Tabs

CHANGELOG.md

@@ -11,8 +11,14 @@ Every entry has a category for which we use the following visual abbreviations:
 - ⚡️ Breaking Change
 - 🐞 Bugfix
 
+## [0.12.0]
+- 🎁 Tabs [#81](https://github.com/tenzir/ui-component-library/pull/81)
+We now have a tabs, and tabbed card component. They have built-in support for
+drag 'n drop replacing, updating, adding, duplicating and removing. Depending
+on which callback functions are supplied, they're activated, or not.
+
 ## [0.10.0]
-- 🎁 Sizing [#69](https://github.com/tenzir/ui-component-library/pull/71)
+- 🎁 Sizing [#71](https://github.com/tenzir/ui-component-library/pull/71)
 We now support sizes (`small` / `medium` / `large`) for buttons and alerts
 
 ## [0.9.0]

README.md

@@ -30,7 +30,7 @@ contribution ([Contributing Guidelines][contributing-url]) in these cases.
 ### Components
 The following components are currently built.
 - Button
-- Card
+- Card (optionally with a tabbed header)
 - Checkbox
 - Icons - A script generates bindings for [React 
   Icons](https://github.com/react-icons/react-icons). We currently generate
@@ -45,6 +45,7 @@ The following components are currently built.
 - Segment
 - Notifications
 - Slider
+- Tabs
 
 Preview here: [Tenzir-Ui-Component-Library][storybook-url]
 

bsconfig.json

@@ -1,38 +1,38 @@
 {
-	"name": "tenzir-ui-component-library",
-	"reason": {
-		"react-jsx": 3
-	},
-	"sources": [
-		{
-			"dir": "src",
-			"subdirs": true
-		},
-		{
-			"dir": "__tests__",
-			"type": "dev"
-		}
-	],
-	"bsc-flags": ["-bs-super-errors", "-bs-no-version-header"],
-	"warnings": {
-		"number": "+A-4-41-48-102-107",
-		"error": "+A-3-44-102-103"
-	},
-	"package-specs": [
-		{
-			"module": "es6-global",
-			"in-source": true
-		}
-	],
-	"suffix": ".bs.js",
-	"namespace": true,
-	"bs-dependencies": [
-		"bs-flexboxgrid",
-		"bs-webapi",
-		"reason-react",
-		"bs-css",
-		"bs-css-emotion"
-	],
-	"bs-dev-dependencies": ["@glennsl/bs-jest"],
-	"refmt": 3
+    "name": "tenzir-ui-component-library",
+    "reason": {
+        "react-jsx": 3
+    },
+    "sources": [
+        {
+            "dir": "src",
+            "subdirs": true
+        },
+        {
+            "dir": "__tests__",
+            "type": "dev"
+        }
+    ],
+    "bsc-flags": ["-bs-super-errors", "-bs-no-version-header"],
+    "warnings": {
+        "number": "+A-4-41-48-102-107",
+        "error": "+A-3-44-102-103"
+    },
+    "package-specs": [
+        {
+            "module": "es6-global",
+            "in-source": true
+        }
+    ],
+    "suffix": ".bs.js",
+    "namespace": true,
+    "bs-dependencies": [
+        "bs-flexboxgrid",
+        "bs-webapi",
+        "reason-react",
+        "bs-css",
+        "bs-css-emotion"
+    ],
+    "bs-dev-dependencies": ["@glennsl/bs-jest"],
+    "refmt": 3
 }

package.json

@@ -1,7 +1,7 @@
 {
     "name": "tenzir-ui-component-library",
     "author": "Tenzir",
-    "version": "0.11.0",
+    "version": "0.12.0",
     "scripts": {
         "build:reason": "bsb -clean-world && bsb -make-world",
         "build:storybook": "build-storybook",
@@ -35,6 +35,7 @@
         "bs-css-emotion": "^3.0.0",
         "bs-flexboxgrid": "^3.0.0",
         "bs-webapi": "^0.19.1",
+        "react-beautiful-dnd": "^13.1.0",
         "react-icons": "^4.2.0",
         "react-syntax-highlighter": "^15.4.4",
         "storybook-dark-mode": "^1.0.8"
@@ -43,10 +44,8 @@
         "@babel/core": "^7.14.3",
         "@glennsl/bs-jest": "^0.7.0",
         "@storybook/addon-actions": "^6.3.6",
-        "@storybook/addon-postcss": "^2.0.0",
-        "autoprefixer": "^10.3.1",
-        "postcss-flexbugs-fixes": "^5.0.2",
         "@storybook/addon-links": "^6.3.6",
+        "@storybook/addon-postcss": "^2.0.0",
         "@storybook/addons": "^6.3.6",
         "@storybook/api": "^6.3.6",
         "@storybook/components": "^6.3.6",
@@ -55,11 +54,13 @@
         "@storybook/react": "^6.3.6",
         "@storybook/storybook-deployer": "^2.8.10",
         "@storybook/theming": "^6.3.6",
+        "autoprefixer": "^10.3.1",
         "babel-loader": "^8.2.2",
         "bs-platform": "^9.0.2",
         "html-webpack-plugin": "^5.3.2",
         "husky": "^4.3.8",
         "lint-staged": "^10.4.2",
+        "postcss-flexbugs-fixes": "^5.0.2",
         "prettier": "^2.3.2",
         "react": "17.0.2",
         "react-dom": "17.0.2",

src/Card.re

@@ -12,22 +12,11 @@ let make =
       ~header=?,
       ~footer=?,
       ~children=<Empty />,
-      ~styles=?,
     ) => {
-  switch (styles) {
-  | Some(_) =>
-    Js.log(
-      "*Deprecated* - Adding styles this way will be removed in favour of a custom classname",
-    )
-  | None => ()
-  };
-
   <div
     ?onMouseOver
     ?onMouseOut
-    className={
-      className ++ " " ++ card(~spacing, ~theme, ~depth, ~styles, ()) ++ "  "
-    }>
+    className={className ++ " " ++ card(~spacing, ~theme, ~depth, ()) ++ "  "}>
     {header->Belt.Option.mapWithDefault(<Empty />, header =>
        <div className={cardHeader(~theme, ~depth, ())}> header </div>
      )}
@@ -43,3 +32,57 @@ let make =
      )}
   </div>;
 };
+
+module Tabbed = {
+  [@react.component]
+  let make =
+      (
+        ~onMouseOver=?,
+        ~onMouseOut=?,
+        ~spacing=Normal,
+        ~theme=Config.defaultTheme,
+        ~depth=1,
+        ~className="",
+        ~footer=?,
+        ~children=<Empty />,
+        ~activeTabId: string,
+        ~tabs: array(Tabs.t),
+        ~onAdd=?,
+        ~onMove=?,
+        ~onOpen=?,
+        ~onClose=?,
+        ~onDuplicate=?,
+        ~onRename=?,
+      ) => {
+    <div
+      ?onMouseOver
+      ?onMouseOut
+      className={
+        className ++ " " ++ card(~spacing, ~theme, ~depth, ()) ++ "  "
+      }>
+      <Tabs
+        standalone=false
+        tabs
+        activeTabId
+        theme
+        depth
+        ?onAdd
+        ?onMove
+        ?onOpen
+        ?onClose
+        ?onDuplicate
+        ?onRename
+      />
+      <div
+        className={cardContent(
+          ~hasHeader=true,
+          ~hasFooter=footer->Belt.Option.isSome,
+        )}>
+        children
+      </div>
+      {footer->Belt.Option.mapWithDefault(<Empty />, footer =>
+         <div className={cardFooter(~theme, ~depth, ())}> footer </div>
+       )}
+    </div>;
+  };
+};

src/CardStyles.re

@@ -22,9 +22,8 @@ let deteriminePadding = spacing => {
   };
 };
 
-let card = (~theme, ~spacing=Normal, ~depth, ~styles, ()) => {
+let card = (~theme, ~spacing=Normal, ~depth, ()) => {
   let colors = StyleHelpers.colorsFromThemeVariant(theme);
-  let extraStyles = Belt.Option.getWithDefault(styles, []);
   style([
     width(100.0->pct),
     height(100.0->pct),
@@ -39,7 +38,6 @@ let card = (~theme, ~spacing=Normal, ~depth, ~styles, ()) => {
     borderRadius(Misc.borderRadius),
     deteriminePadding(spacing),
     position(`relative),
-    ...extraStyles,
   ]);
 };
 

src/Dnd.js

@@ -0,0 +1,51 @@
+import React from 'react'
+import { Droppable } from 'react-beautiful-dnd'
+import { Draggable } from 'react-beautiful-dnd'
+
+const Provided = ({ provided, innerRef, children }) => {
+    const augmentedChildren = {
+        ...children,
+        ref: innerRef,
+        props: {
+            ...children.props,
+            ...provided.draggableProps,
+            ...provided.dragHandleProps,
+        },
+    }
+    return (
+        <>
+            {augmentedChildren}
+            {provided.placeholder}
+        </>
+    )
+}
+
+export const DroppableWrapper = ({ direction, droppableId, children }) => {
+    const ref = React.useRef()
+    return (
+        <Droppable droppableId={droppableId} direction={direction}>
+            {(provided) => {
+                return (
+                    <Provided provided={provided} innerRef={provided.innerRef}>
+                        {children}
+                    </Provided>
+                )
+            }}
+        </Droppable>
+    )
+}
+
+export const DraggableWrapper = ({ index, draggableId, children }) => {
+    const ref = React.useRef()
+    return (
+        <Draggable draggableId={draggableId} index={index}>
+            {(provided) => {
+                return (
+                    <Provided provided={provided} innerRef={provided.innerRef}>
+                        {children}
+                    </Provided>
+                )
+            }}
+        </Draggable>
+    )
+}

src/Dnd.re

@@ -0,0 +1,55 @@
+module Context = {
+  type dragItem = {
+    droppableId: string,
+    index: int,
+  };
+  type dragEndEvent = {
+    destination: Js.Nullable.t(dragItem),
+    source: dragItem,
+    /*combine: Js.Nullable.t(combine),*/
+    /*draggableId: string,*/
+    /*mode: string,*/
+    /*reason: string,*/
+    /*type_: string*/
+  };
+  type dragStartEvent = {
+    source: dragItem,
+    /*combine: Js.Nullable.t(combine),*/
+    /*draggableId: string,*/
+    /*mode: string,*/
+    /*reason: string,*/
+    /*type_: string*/
+  };
+
+  [@bs.module "react-beautiful-dnd"] [@react.component]
+  external make:
+    (
+      ~onDragStart: dragStartEvent => unit=?,
+      ~onDragUpdate: ReactEvent.Synthetic.t => unit=?,
+      ~onDragEnd: dragEndEvent => unit,
+      ~children: React.element=?
+    ) =>
+    React.element =
+    "DragDropContext";
+};
+
+module Draggable = {
+  [@bs.module "./Dnd.js"] [@react.component]
+  external make:
+    (~draggableId: string, ~index: int, ~children: React.element=?) =>
+    React.element =
+    "DraggableWrapper";
+};
+
+module Droppable = {
+  type direction = [ | `vertical | `horizontal];
+  [@bs.module "./Dnd.js"] [@react.component]
+  external make:
+    (
+      ~droppableId: string,
+      ~direction: direction=?,
+      ~children: React.element=?
+    ) =>
+    React.element =
+    "DroppableWrapper";
+};

src/Helpers/Function.re

@@ -0,0 +1 @@
+

src/Helpers/StyleHelpers.re

@@ -40,6 +40,19 @@ let applyPercentageToColor =
 let lighten = applyPercentageToColor(Lighten);
 let darken = applyPercentageToColor(Darken);
 
+let offsetBgColorFlt = (theme, depth: float, color) => {
+  (
+    switch (theme) {
+    | UiTypes.Dark
+    | UiTypes.TenzirBlue =>
+      float_of_int(Misc.cardDarkeningPct) *. (depth *. (-1.) -. 1.)
+    | _ => float_of_int(Misc.cardDarkeningPct) *. depth
+    }
+  )
+  ->int_of_float
+  ->darken(color);
+};
+
 let offsetBgColor = (theme, depth, color) => {
   (
     switch (theme) {