@spaced-out/ui-design-system 0.0.6 → 0.0.8

package/lib/components/TabList/TabList.js.flow

@@ -0,0 +1,146 @@
+// @flow strict
+
+import * as React from 'react';
+
+import {size36, size100} from '../../styles/variables/_size';
+import {spaceMedium} from '../../styles/variables/_space';
+import {classify} from '../../utils/classify';
+
+import {TabDropdown} from './TabDropdown.js';
+
+import css from './TabList.module.css';
+
+
+type ClassNames = $ReadOnly<{wrapper?: string}>;
+
+export type TabsProps = {
+  classNames?: ClassNames,
+  onSelect?: ({tabId?: string, label?: string}) => mixed,
+  children?: React.Node,
+  size?: 'medium',
+  selectedTab?: {tabId?: string, label?: string},
+  menuWidth?: string,
+};
+
+export const TabList = ({
+  classNames,
+  children,
+  size,
+  onSelect,
+  selectedTab,
+  menuWidth,
+}: TabsProps): React.Node => {
+  const ref = React.useRef(null);
+
+  const [containerWidth, setContainerWidth] = React.useState(0);
+
+  const childrenWithProps = () => {
+    const childrenArray = React.Children.toArray(children);
+    const totalChildCount = childrenArray.length;
+    let tabListWidth = 0;
+    const menuOptions = [];
+
+    let nodes: React.Node[] = [];
+    const tabListNodes: React.Node[] = [];
+    for (let i = 0; i < totalChildCount; i++) {
+      const child = childrenArray[i];
+      const {
+        width = size100,
+        tabId,
+        label,
+        disabled,
+        iconName,
+        iconType,
+      } = child.props;
+      const widthInt = parseInt(width);
+      tabListWidth = tabListWidth + widthInt;
+
+      if (tabListWidth < containerWidth || i === 0) {
+        const childOnSelect = (params) => {
+          onSelect && onSelect(params); // call the tab level onSelect
+        };
+        tabListNodes.push(
+          React.cloneElement(child, {
+            size,
+            onSelect: childOnSelect,
+            selectedTab,
+          }),
+        );
+      } else {
+        menuOptions.push({
+          key: tabId,
+          label,
+          disabled,
+          iconLeft: iconName,
+          iconLeftType: iconType,
+        });
+      }
+    }
+
+    const menuOnSelect = ({key, label}) => {
+      onSelect && onSelect({tabId: key, label});
+    };
+    const selectedOption = {
+      key: selectedTab?.tabId,
+      label: selectedTab?.label || '',
+    };
+
+    const isMenuOptionSelected = (() => {
+      for (let i = 0; i < menuOptions.length; i++) {
+        if (menuOptions[i].key === selectedTab?.tabId) {
+          return true;
+        }
+      }
+      return false;
+    })();
+
+    const tabDropDownNode = menuOptions.length ? (
+      <TabDropdown
+        size={size}
+        onOptionSelect={menuOnSelect}
+        props={{
+          tab: {
+            label: '...',
+            tabId: 'tab-dropdown',
+            selectedTab: {tabId: isMenuOptionSelected ? 'tab-dropdown' : ''},
+          },
+          menu: {
+            isFluid: false,
+            menuDisabled: false,
+            options: menuOptions,
+            selectedOption,
+            width: menuWidth,
+          },
+        }}
+      />
+    ) : null;
+
+    nodes = [...tabListNodes, tabDropDownNode];
+    return nodes;
+  };
+
+  React.useLayoutEffect(() => {
+    if (ref.current && ref.current.offsetWidth) {
+      const availableContainerWidth =
+        ref.current.offsetWidth - (parseInt(size36) + parseInt(spaceMedium));
+      setContainerWidth(availableContainerWidth);
+    }
+  }, [ref.current]);
+
+  return (
+    <div
+      ref={ref}
+      data-testid="Tabs"
+      className={classify(
+        css.tabsContainer,
+        {
+          [css.mediumSize]: size === 'medium',
+          [css.smallSize]: size === 'small',
+        },
+        classNames?.wrapper,
+      )}
+    >
+      {containerWidth ? childrenWithProps() : null}
+    </div>
+  );
+};

package/lib/components/TabList/TabList.module.css

@@ -0,0 +1,11 @@
+@value (colorFillPrimary) from '../../styles/variables/_color.css';
+@value (spaceMedium) from '../../styles/variables/_space.css';
+
+@value ( sizeFluid) from '../../styles/variables/_size.css';
+
+.tabsContainer {
+  display: flex;
+  flex-direction: row;
+  gap: spaceMedium;
+  width: sizeFluid;
+}

package/lib/components/TabList/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _TabList = require("./TabList");
+Object.keys(_TabList).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _TabList[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _TabList[key];
+    }
+  });
+});

package/lib/components/TabList/index.js.flow

@@ -0,0 +1,4 @@
+// @flow strict
+
+export type {TabsProps} from './TabList';
+export * from './TabList';

package/lib/styles/variables/_size.css

@@ -24,6 +24,8 @@
 
 @value size36: 36px;
 
+@value size38: 38px;
+
 @value size40: 40px;
 
 @value size42: 42px;

package/lib/styles/variables/_size.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.sizeFluid = exports.size960 = exports.size8 = exports.size720 = exports.size60 = exports.size580 = exports.size500 = exports.size5 = exports.size480 = exports.size42 = exports.size400 = exports.size40 = exports.size4 = exports.size380 = exports.size36 = exports.size34 = exports.size300 = exports.size30 = exports.size276 = exports.size240 = exports.size24 = exports.size228 = exports.size22 = exports.size20 = exports.size2 = exports.size18 = exports.size160 = exports.size140 = exports.size12 = exports.size110 = exports.size100 = exports.size10 = void 0;
+exports.sizeFluid = exports.size960 = exports.size8 = exports.size720 = exports.size60 = exports.size580 = exports.size500 = exports.size5 = exports.size480 = exports.size42 = exports.size400 = exports.size40 = exports.size4 = exports.size380 = exports.size38 = exports.size36 = exports.size34 = exports.size300 = exports.size30 = exports.size276 = exports.size240 = exports.size24 = exports.size228 = exports.size22 = exports.size20 = exports.size2 = exports.size18 = exports.size160 = exports.size140 = exports.size12 = exports.size110 = exports.size100 = exports.size10 = void 0;
 
 const size2 = '2px';
 exports.size2 = size2;
@@ -31,6 +31,8 @@ const size34 = '34px';
 exports.size34 = size34;
 const size36 = '36px';
 exports.size36 = size36;
+const size38 = '38px';
+exports.size38 = size38;
 const size40 = '40px';
 exports.size40 = size40;
 const size42 = '42px';

package/lib/styles/variables/_size.js.flow

@@ -26,6 +26,8 @@ export const size34 = '34px';
 
 export const size36 = '36px';
 
+export const size38 = '38px';
+
 export const size40 = '40px';
 
 export const size42 = '42px';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {