@spaced-out/ui-design-system 0.1.25 → 0.1.27

package/lib/utils/menu.js

@@ -3,8 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getTextLabelFromSelectedKeys = exports.getSelectedKeysFromSelectedOption = exports.getOptionsFromKeys = exports.getOptionFromKey = exports.getButtonLabelFromSelectedKeys = void 0;
+exports.getTextLabelFromSelectedKeys = exports.getSelectedKeysFromSelectedOption = exports.getOptionsFromKeys = exports.getOptionFromKey = exports.getFilteredOptionsResultText = exports.getFilteredOptionsFromSearchText = exports.getFilteredGroupTitleOptionsResultText = exports.getFilteredGroupTitleOptionsFromSearchText = exports.getFilteredComposeOptionsResultText = exports.getFilteredComposeOptionsFromSearchText = exports.getButtonLabelFromSelectedKeys = void 0;
 var React = _interopRequireWildcard(require("react"));
+var _string = require("./string");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
@@ -49,4 +50,58 @@ const getOptionsFromKeys = (options, keys) => {
   }
   return options.filter(option => keys.includes(option.key));
 };
-exports.getOptionsFromKeys = getOptionsFromKeys;
+exports.getOptionsFromKeys = getOptionsFromKeys;
+const getFilteredOptionsFromSearchText = (options, searchText) => {
+  if (!Array.isArray(options) || !options.length || !searchText) {
+    return options;
+  }
+  return options.filter(option => option.label?.toLowerCase().includes(searchText.toLowerCase()));
+};
+exports.getFilteredOptionsFromSearchText = getFilteredOptionsFromSearchText;
+const getFilteredOptionsResultText = function (options) {
+  let resultText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'result';
+  let resultCount = 0;
+  resultCount += options.length;
+  const generatedResultText = `${resultCount} ${(0, _string.formatWord)(resultText, resultCount)}`;
+  return generatedResultText;
+};
+exports.getFilteredOptionsResultText = getFilteredOptionsResultText;
+const getFilteredComposeOptionsFromSearchText = (composeOptions, searchText) => {
+  if (!Array.isArray(composeOptions) || !composeOptions.length || !searchText) {
+    return composeOptions;
+  }
+  return composeOptions.map(optionGroup => optionGroup.filter(option => option.label?.toLowerCase().includes(searchText.toLowerCase()))).filter(group => group.length > 0);
+};
+exports.getFilteredComposeOptionsFromSearchText = getFilteredComposeOptionsFromSearchText;
+const getFilteredComposeOptionsResultText = function (composeOptions) {
+  let resultText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'result';
+  let resultCount = 0;
+  composeOptions.forEach(optionGroup => {
+    resultCount += optionGroup.length;
+  });
+  const generatedResultText = `${resultCount} ${(0, _string.formatWord)(resultText, resultCount)}`;
+  return generatedResultText;
+};
+exports.getFilteredComposeOptionsResultText = getFilteredComposeOptionsResultText;
+const getFilteredGroupTitleOptionsFromSearchText = (groupTitleOptions, searchText) => {
+  if (!Array.isArray(groupTitleOptions) || !groupTitleOptions.length || !searchText) {
+    return groupTitleOptions;
+  }
+  return groupTitleOptions.map(group => ({
+    ...group,
+    options: group.options?.filter(option => option.label?.toLowerCase().includes(searchText.toLowerCase()))
+  })).filter(group => group.options && group.options.length > 0);
+};
+exports.getFilteredGroupTitleOptionsFromSearchText = getFilteredGroupTitleOptionsFromSearchText;
+const getFilteredGroupTitleOptionsResultText = function (groupTitleOptions) {
+  let resultText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'result';
+  let resultCount = 0;
+  groupTitleOptions.forEach(group => {
+    if (group.options) {
+      resultCount += group.options.length;
+    }
+  });
+  const generatedResultText = `${resultCount} ${(0, _string.formatWord)(resultText, resultCount)}`;
+  return generatedResultText;
+};
+exports.getFilteredGroupTitleOptionsResultText = getFilteredGroupTitleOptionsResultText;

package/lib/utils/menu.js.flow

@@ -1,7 +1,9 @@
 // @flow strict
 import * as React from 'react';
 
-import type {MenuOption} from '../components/Menu';
+import type {MenuGroupTitleOption, MenuOption} from '../components/Menu';
+
+import {formatWord} from './string';
 
 
 export const getSelectedKeysFromSelectedOption = (
@@ -79,3 +81,109 @@ export const getOptionsFromKeys = (
 
   return options.filter((option) => keys.includes(option.key));
 };
+
+export const getFilteredOptionsFromSearchText = (
+  options: MenuOption[],
+  searchText: string,
+): MenuOption[] => {
+  if (!Array.isArray(options) || !options.length || !searchText) {
+    return options;
+  }
+
+  return options.filter((option) =>
+    option.label?.toLowerCase().includes(searchText.toLowerCase()),
+  );
+};
+
+export const getFilteredOptionsResultText = (
+  options: MenuOption[],
+  resultText: string = 'result',
+): string => {
+  let resultCount = 0;
+
+  resultCount += options.length;
+
+  const generatedResultText = `${resultCount} ${formatWord(
+    resultText,
+    resultCount,
+  )}`;
+
+  return generatedResultText;
+};
+
+export const getFilteredComposeOptionsFromSearchText = (
+  composeOptions: Array<Array<MenuOption>>,
+  searchText: string,
+): Array<Array<MenuOption>> => {
+  if (!Array.isArray(composeOptions) || !composeOptions.length || !searchText) {
+    return composeOptions;
+  }
+
+  return composeOptions
+    .map((optionGroup) =>
+      optionGroup.filter((option) =>
+        option.label?.toLowerCase().includes(searchText.toLowerCase()),
+      ),
+    )
+    .filter((group) => group.length > 0);
+};
+
+export const getFilteredComposeOptionsResultText = (
+  composeOptions: Array<Array<MenuOption>>,
+  resultText: string = 'result',
+): string => {
+  let resultCount = 0;
+
+  composeOptions.forEach((optionGroup) => {
+    resultCount += optionGroup.length;
+  });
+
+  const generatedResultText = `${resultCount} ${formatWord(
+    resultText,
+    resultCount,
+  )}`;
+
+  return generatedResultText;
+};
+
+export const getFilteredGroupTitleOptionsFromSearchText = (
+  groupTitleOptions: Array<MenuGroupTitleOption>,
+  searchText: string,
+): Array<MenuGroupTitleOption> => {
+  if (
+    !Array.isArray(groupTitleOptions) ||
+    !groupTitleOptions.length ||
+    !searchText
+  ) {
+    return groupTitleOptions;
+  }
+
+  return groupTitleOptions
+    .map((group) => ({
+      ...group,
+      options: group.options?.filter((option) =>
+        option.label?.toLowerCase().includes(searchText.toLowerCase()),
+      ),
+    }))
+    .filter((group) => group.options && group.options.length > 0);
+};
+
+export const getFilteredGroupTitleOptionsResultText = (
+  groupTitleOptions: Array<MenuGroupTitleOption>,
+  resultText: string = 'result',
+): string => {
+  let resultCount = 0;
+
+  groupTitleOptions.forEach((group) => {
+    if (group.options) {
+      resultCount += group.options.length;
+    }
+  });
+
+  const generatedResultText = `${resultCount} ${formatWord(
+    resultText,
+    resultCount,
+  )}`;
+
+  return generatedResultText;
+};

package/lib/utils/string.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.escapeRegExp = exports.capitalize = void 0;
+exports.formatWord = exports.escapeRegExp = exports.capitalize = void 0;
 
 const capitalize = word => {
   if (!word) {
@@ -13,4 +13,6 @@ const capitalize = word => {
 };
 exports.capitalize = capitalize;
 const escapeRegExp = str => str.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
-exports.escapeRegExp = escapeRegExp;
+exports.escapeRegExp = escapeRegExp;
+const formatWord = (word, count) => count === 1 ? word : word + 's';
+exports.formatWord = formatWord;

package/lib/utils/string.js.flow

@@ -11,3 +11,6 @@ export const capitalize = (word: string): string => {
 
 export const escapeRegExp = (str: string): string =>
   str.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
+
+export const formatWord = (word: string, count: number): string =>
+  count === 1 ? word : word + 's';

package/lib/utils/tokens.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSortedTokenNames = void 0;
+
+/**
+ *
+ * This function takes in an object containing key-value pairs of tokens,
+ * where values are strings representing numerical
+ * values with optional percentage or viewport units. It also takes in an optional
+ * sort order ('asc' or 'desc') and an optional sort by parameter ('name' or 'value').
+ *
+ * The function sorts the tokens by either their key names (if sortBy='name') or their
+ * numerical values (if sortBy='value'). The sort order can be specified as
+ * ascending (order='asc') or descending (order='desc').
+ *
+ * The function handles values with different units by comparing their numerical values.
+ * If both values have the same unit, their numerical values are compared directly.
+ * If their units are different, tokens with percentage values are considered greater than
+ * those with viewport units, and tokens without a percentage or viewport unit are compared
+ * based on their numerical values.
+ *
+ */
+const getSortedTokenNames = function (obj) {
+  let order = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'asc';
+  let sortBy = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'value';
+  // Create an array from the object keys and sort the array
+  const sortedTokens = Object.keys(obj).sort((token1, token2) => {
+    const value1 = obj[token1];
+    const value2 = obj[token2];
+
+    // Convert value1 to a number
+    const numValue1 = parseFloat(value1);
+    // Convert value2 to a number
+    const numValue2 = parseFloat(value2);
+    if (sortBy === 'name') {
+      // Sorting by name
+      return order === 'asc' ? token1.localeCompare(token2) // Compare key names directly
+      : token2.localeCompare(token1);
+    } else {
+      const isPercentage1 = value1.endsWith('%');
+      const isPercentage2 = value2.endsWith('%');
+      const isViewport1 = value1.endsWith('vw') || value1.endsWith('vh');
+      const isViewport2 = value2.endsWith('vw') || value2.endsWith('vh');
+      if (isPercentage1 && isPercentage2 || isViewport1 && isViewport2) {
+        // If both tokens have the same unit (percentage or viewport), compare their numerical values
+        return order === 'asc' ? numValue1 - numValue2 : numValue2 - numValue1;
+      }
+      if (isPercentage1 && !isPercentage2) {
+        // Only token1 has a percentage value, consider it greater than token2
+        return order === 'asc' ? 1 : -1;
+      }
+      if (!isPercentage1 && isPercentage2) {
+        // Only token2 has a percentage value, consider it greater than token1
+        return order === 'asc' ? -1 : 1;
+      }
+      if (isViewport1 && !isViewport2) {
+        // Only token1 has a viewport unit value, consider it greater than token2
+        return order === 'asc' ? 1 : -1;
+      }
+      if (!isViewport1 && isViewport2) {
+        // Only token2 has a viewport unit value, consider it greater than token1
+        return order === 'asc' ? -1 : 1;
+      }
+
+      // Neither token has a percentage or viewport unit value, compare their numerical values
+      return order === 'asc' ? numValue1 - numValue2 : numValue2 - numValue1;
+    }
+  });
+  return sortedTokens;
+};
+exports.getSortedTokenNames = getSortedTokenNames;

package/lib/utils/tokens.js.flow

@@ -0,0 +1,82 @@
+// @flow strict
+
+type TokenObject = {[key: string]: string};
+export type SortOrder = 'asc' | 'desc';
+export type SortBy = 'name' | 'value';
+
+/**
+ *
+ * This function takes in an object containing key-value pairs of tokens,
+ * where values are strings representing numerical
+ * values with optional percentage or viewport units. It also takes in an optional
+ * sort order ('asc' or 'desc') and an optional sort by parameter ('name' or 'value').
+ *
+ * The function sorts the tokens by either their key names (if sortBy='name') or their
+ * numerical values (if sortBy='value'). The sort order can be specified as
+ * ascending (order='asc') or descending (order='desc').
+ *
+ * The function handles values with different units by comparing their numerical values.
+ * If both values have the same unit, their numerical values are compared directly.
+ * If their units are different, tokens with percentage values are considered greater than
+ * those with viewport units, and tokens without a percentage or viewport unit are compared
+ * based on their numerical values.
+ *
+ */
+export const getSortedTokenNames = (
+  obj: TokenObject,
+  order?: SortOrder = 'asc',
+  sortBy?: SortBy = 'value',
+): Array<string> => {
+  // Create an array from the object keys and sort the array
+  const sortedTokens = Object.keys(obj).sort((token1, token2) => {
+    const value1 = obj[token1];
+    const value2 = obj[token2];
+
+    // Convert value1 to a number
+    const numValue1 = parseFloat(value1);
+    // Convert value2 to a number
+    const numValue2 = parseFloat(value2);
+
+    if (sortBy === 'name') {
+      // Sorting by name
+      return order === 'asc'
+        ? token1.localeCompare(token2) // Compare key names directly
+        : token2.localeCompare(token1);
+    } else {
+      const isPercentage1 = value1.endsWith('%');
+      const isPercentage2 = value2.endsWith('%');
+      const isViewport1 = value1.endsWith('vw') || value1.endsWith('vh');
+      const isViewport2 = value2.endsWith('vw') || value2.endsWith('vh');
+
+      if ((isPercentage1 && isPercentage2) || (isViewport1 && isViewport2)) {
+        // If both tokens have the same unit (percentage or viewport), compare their numerical values
+        return order === 'asc' ? numValue1 - numValue2 : numValue2 - numValue1;
+      }
+
+      if (isPercentage1 && !isPercentage2) {
+        // Only token1 has a percentage value, consider it greater than token2
+        return order === 'asc' ? 1 : -1;
+      }
+
+      if (!isPercentage1 && isPercentage2) {
+        // Only token2 has a percentage value, consider it greater than token1
+        return order === 'asc' ? -1 : 1;
+      }
+
+      if (isViewport1 && !isViewport2) {
+        // Only token1 has a viewport unit value, consider it greater than token2
+        return order === 'asc' ? 1 : -1;
+      }
+
+      if (!isViewport1 && isViewport2) {
+        // Only token2 has a viewport unit value, consider it greater than token1
+        return order === 'asc' ? -1 : 1;
+      }
+
+      // Neither token has a percentage or viewport unit value, compare their numerical values
+      return order === 'asc' ? numValue1 - numValue2 : numValue2 - numValue1;
+    }
+  });
+
+  return sortedTokens;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.1.25",
+  "version": "0.1.27",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {
@@ -10,9 +10,9 @@
   "scripts": {
     "build": "rimraf lib && yarn build:style-variables && gulp build",
     "build:style-variables": "rimraf src/styles/variables && style-dictionary build --config ./config.js",
-    "storybook": "yarn build:style-variables && start-storybook -p 6006",
-    "storybook:export": "yarn build:style-variables && rimraf storybook-static && build-storybook",
-    "build-storybook": "yarn build:style-variables && rimraf storybook-static && build-storybook",
+    "storybook": "yarn build:style-variables && storybook dev -p 6006",
+    "storybook:export": "yarn build:style-variables && rimraf storybook-static && storybook build",
+    "build-storybook": "yarn build:style-variables && rimraf storybook-static && storybook build",
     "generate": "node ./scripts/create-component",
     "generateHook": "node ./scripts/create-hook",
     "prepublishOnly": "yarn build",
@@ -44,8 +44,7 @@
     "react-dom": ">=16.8.0"
   },
   "dependencies": {
-    "@floating-ui/react-dom": "^1.0.0",
-    "@floating-ui/react-dom-interactions": "^0.10.1",
+    "@floating-ui/react": "^0.24.0",
     "date-fns": "^2.29.3",
     "lodash": "^4.17.21"
   },
@@ -59,14 +58,15 @@
     "@babel/preset-react": "^7.18.6",
     "@commitlint/cli": "^17.1.2",
     "@commitlint/config-conventional": "^17.1.0",
-    "@storybook/addon-a11y": "^6.5.13",
-    "@storybook/addon-essentials": "^6.5.13",
-    "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/addons": "^6.5.13",
-    "@storybook/react": "^6.5.13",
-    "@storybook/test-runner": "^0.9.0",
-    "@storybook/testing-react": "^1.3.0",
-    "@storybook/theming": "^6.5.13",
+    "@storybook/addon-a11y": "^7.0.8",
+    "@storybook/addon-essentials": "^7.0.8",
+    "@storybook/addon-mdx-gfm": "^7.0.8",
+    "@storybook/addons": "^7.0.8",
+    "@storybook/react": "^7.0.8",
+    "@storybook/react-webpack5": "^7.0.8",
+    "@storybook/test-runner": "^0.10.0",
+    "@storybook/testing-react": "^2.0.0",
+    "@storybook/theming": "^7.0.8",
     "@testing-library/react": "^11.2.7",
     "all-contributors-cli": "^6.20.0",
     "babel-eslint": "^10.1.0",
@@ -84,7 +84,7 @@
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-simple-import-sort": "^8.0.0",
-    "eslint-plugin-storybook": "^0.6.7",
+    "eslint-plugin-storybook": "^0.6.12",
     "eslint-plugin-unused-imports": "^2.0.0",
     "flow-bin": "^0.184.0",
     "gulp": "^4.0.2",
@@ -92,6 +92,7 @@
     "gulp-rename": "^2.0.0",
     "gulp-replace": "^1.1.3",
     "husky": "2.1.0",
+    "invariant": "^2.2.4",
     "jest": "^29.3.1",
     "lint-staged": "^10.5.1",
     "node-sass": "^7.0.0",
@@ -103,8 +104,9 @@
     "rimraf": "^3.0.2",
     "simple-git": "^3.12.0",
     "standard-version": "^9.5.0",
+    "storybook": "^7.0.8",
     "storybook-css-modules": "^1.0.8",
-    "storybook-vscode-component": "^1.0.8",
+    "storybook-vscode-component": "^1.0.9",
     "style-dictionary": "^3.7.1"
   },
   "homepage": "https://spaced-out.github.io/ui-design-system",

package/.storybook/public/favicon.svg

@@ -1,6 +0,0 @@
-<svg width="137" height="137" viewBox="0 0 137 137" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M46.5 76C56.7173 76 65 67.7173 65 57.5C65 47.2827 56.7173 39 46.5 39C36.2827 39 28 47.2827 28 57.5C28 67.7173 36.2827 76 46.5 76Z" fill="#FFD252"/>
-<path d="M90.5 47C100.717 47 109 38.4934 109 28C109 17.5066 100.717 9 90.5 9C80.2827 9 72 17.5066 72 28C72 38.4934 80.2827 47 90.5 47Z" fill="#F05A28"/>
-<path d="M46.5 128C56.7173 128 65 119.717 65 109.5C65 99.2827 56.7173 91 46.5 91C36.2827 91 28 99.2827 28 109.5C28 119.717 36.2827 128 46.5 128Z" fill="#7461E5"/>
-<path d="M90.5 98C100.717 98 109 89.9411 109 80C109 70.0589 100.717 62 90.5 62C80.2827 62 72 70.0589 72 80C72 89.9411 80.2827 98 90.5 98Z" fill="#33A30F"/>
-</svg>