@spaced-out/ui-design-system 0.1.26 → 0.1.28

package/lib/utils/tokens.js.flow

@@ -0,0 +1,228 @@
+// @flow strict
+
+type TokenObject = {[key: string]: string};
+
+export type SortOrder = 'asc' | 'desc';
+
+export type SortBy = 'name' | 'value';
+
+export type TableDataItem = {
+  id: string | number,
+  name: string,
+  value: string,
+  demo: string,
+};
+
+export type TableData = Array<TableDataItem>;
+
+export type DataVariation = {
+  title: string,
+  description: string,
+};
+
+export const dataVariations: Array<DataVariation> = [
+  {
+    title: 'The Great HTML Escape 🎩🌐',
+    description:
+      'Watch out! Our HTML has escaped and is running wild on the web. It\'s causing mischief, adding tags and styles wherever it pleases! <div>🙈</div>',
+  },
+  {
+    title: 'The CSS Enigma 🔍💡',
+    description:
+      'Behold the CSS enigma! Our styles have tangled themselves into a web of complexity. Can you decipher the mystery and bring order to the chaos? 💻🎨',
+  },
+  {
+    title: 'The Missing Dependency 😱📦',
+    description:
+      'Uh-oh! It seems like a crucial frontend dependency went on a vacation and forgot to come back. Without it, our application feels a bit incomplete. We\'re on the lookout for its grand return! 🏖️🌴',
+  },
+  {
+    title: 'The Vanishing CSS Rule 🙀🎩',
+    description:
+      'Hocus pocus! A CSS rule vanished into thin air, leaving our styles in a state of bewilderment. We\'re summoning all our magical powers to bring it back. Abracadabra, where did it go? 🧙‍♂️✨',
+  },
+  {
+    title: 'The Mysterious JavaScript Bug 🐞❓',
+    description:
+      'We\'ve encountered a puzzling JavaScript bug that seems to have hidden itself in the shadows of our codebase. It\'s playing hide-and-seek, but fear not! We\'ll track it down and restore order to our application. 🔍🔦',
+  },
+  {
+    title: 'The Lost Code Snippet 🧐🔍',
+    description:
+      'Oh no! It appears that a valuable code snippet has gone missing, leaving us scratching our heads. We\'re combing through the archives and retracing our steps to recover it. We won\'t stop until it\'s back where it belongs! 🕵️‍♂️🔎',
+  },
+  {
+    title: 'The Hidden API Endpoint 🕵️‍♀️🔐',
+    description:
+      'We\'re on a mission to find an elusive API endpoint that seems to have vanished into the depths of the backend. We\'re following the clues, decoding cryptic messages, and hacking our way through the digital maze. Stay tuned for its triumphant rediscovery! 🚀🌐',
+  },
+  {
+    title: 'The Ghostly UI Element 👻👁️',
+    description:
+      'Beware of the ghostly UI element! It has mysteriously disappeared from our interface, leaving behind an empty void. We\'ve dispatched our best designers to investigate and resurrect it. Soon, it\'ll return to haunt the pixels once again! 🎃💻',
+  },
+  {
+    title: 'The Evaporating Stylesheet 💦🎨',
+    description:
+      'Uh-oh! It seems like our stylesheet got caught in a cosmic evaporation event, and now our carefully crafted styles are floating in the digital ether. We\'re working on a rescue mission to bring them back to the realm of the browser. ✨🚀',
+  },
+  {
+    title: 'The Missing Feature Fairy 🧚✨',
+    description:
+      'We\'ve sent out an APB (All Points Bulletin) for the missing feature fairy. She\'s known for sprinkling delightful functionalities into our applications, but it seems she took a detour. We\'re patiently waiting for her magical return! 🌟🧚‍♀️',
+  },
+  {
+    title: 'The Invisible DOM Element 🙈🌐',
+    description:
+      'Something peculiar has happened! A DOM element has turned invisible, playing tricks on our frontend. We\'ve called in our best detectives to investigate this optical illusion and restore its rightful visibility. Stay tuned for the grand unveiling! 👀✨',
+  },
+  {
+    title: 'The Elusive Frontend Bug 🐛❓',
+    description:
+      'Our frontend bug seems to have gained a PhD in camouflage and disappeared into the code jungle. We\'re conducting bug-hunting expeditions, armed with magnifying glasses and a good sense of humor. It won\'t escape our watchful eyes for long! 🕵️‍♀️🔍',
+  },
+  {
+    title: 'The Abducted Animation 🌪️🎥',
+    description:
+      'Alert! An animation has been abducted from our frontend, leaving us with static screens. We suspect interdimensional interference. We\'re assembling a rescue team armed with keyframes and transition effects. Together, we\'ll bring motion back to our digital world! ⚡️🎬',
+  },
+  {
+    title: 'The Disappearing Click Event 🙀🖱️',
+    description:
+      'In a twist of events, a click event has mysteriously vanished, eluding our attempts to capture it. We\'ve set up mouse traps and deployed debugging tools to solve this enigma. Don\'t worry, we\'ll catch that sneaky click and restore its functionality! 🔍🔧',
+  },
+  {
+    title: 'The Phantom Mobile Responsiveness 👻📱',
+    description:
+      'Beware of the phantom mobile responsiveness! It likes to hide in the shadows, making our web pages look like a ghost town on small screens. We\'re summoning our media queries and responsive design tactics to banish this spectral issue. Soon, our pages will be mobile-friendly once more! 📲💪',
+  },
+  {
+    title: 'The Misplaced UI Element 🧭🔄',
+    description:
+      'Oops! It seems like a UI element lost its way and ended up in the wrong place. We\'re guiding it back to its rightful position with pixel-perfect precision. Soon, order will be restored, and our interface will be back in balance! 🗺️🔀',
+  },
+  {
+    title: 'The Cryptic JavaScript Error 🔐❓',
+    description:
+      'We\'ve stumbled upon a cryptic JavaScript error that speaks in riddles, leaving us scratching our heads. Fear not, our code sorcerers are deciphering the error message, searching for the hidden clues to resolve this enigmatic mystery. ✨🔍',
+  },
+  {
+    title: 'The Broken CSS Grid 📏🔩',
+    description:
+      'Oh no! Our CSS grid has sprung a leak and lost its structure. We\'re patching it up with grid areas and grid-template-areas to bring order back to the layout. Soon, the grid will stand strong and proud! 🧰🔧',
+  },
+  {
+    title: 'The Disappearing Web Fonts 🙈🖊️',
+    description:
+      'Web fonts have vanished without a trace, leaving our text looking plain and dull. We\'re calling in the font detectives to investigate this typographic disappearance. We won\'t rest until our words are dressed in style once again! 👓🔎',
+  },
+  {
+    title: 'The Forgotten Vendor Prefixes 🤔🔍',
+    description:
+      'Oops! It seems that some vendor prefixes got lost in the shuffle, leaving our CSS properties puzzled. We\'re on a mission to rediscover these elusive prefixes and ensure our styles are cross-browser compatible. Together, we\'ll navigate the prefix labyrinth and emerge victorious! 💪🚀',
+  },
+  {
+    title: 'The Invisible API Response 🙈📡',
+    description:
+      'We\'re experiencing an API response that\'s mastered the art of invisibility. It\'s hiding behind layers of middleware and network protocols. We\'ve enlisted our finest backend wizards to conjure it back into visibility. Be patient, and soon the data will reappear like magic! 🧙‍♂️✨',
+  },
+];
+
+/**
+ *
+ * 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;
+};
+
+export const filterTableDataBySearchText = (
+  TABLE_DATA: TableData,
+  searchText: string,
+): TableData => {
+  const filteredData: TableData = TABLE_DATA.filter((item) => {
+    const nameMatch: boolean = item.name
+      .toLowerCase()
+      .includes(searchText.toLowerCase());
+    const valueMatch: boolean = item.value
+      .toLowerCase()
+      .includes(searchText.toLowerCase());
+    return nameMatch || valueMatch;
+  });
+
+  return filteredData;
+};
+
+export const getRandomDataVariation = (): DataVariation => {
+  const randomIndex: number = Math.floor(Math.random() * dataVariations.length);
+  return dataVariations[randomIndex];
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.1.26",
+  "version": "0.1.28",
   "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,16 @@
     "@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/addon-storysource": "^7.0.12",
+    "@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 +85,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 +93,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 +105,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>