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

package/.cspell/custom-words.txt

@@ -18,6 +18,7 @@ fontawesome
 framename
 Gaurav
 innerref
+interdimensional
 Lipsey
 Neue
 Nishant
@@ -28,14 +29,17 @@ noopener
 noreferrer
 OPACITYS
 partialformat
+pocus
 premajor
 preminor
 prepatch
 rgba
 sbdocs
 Stapleton
+storysource
 superrover
 systemjs
+tablist
 tabout
 testid
 tnum

package/.storybook/main.js

@@ -22,6 +22,36 @@ module.exports = {
     '@storybook/testing-react',
     // 'storybook-vscode-component/register', This is not supported in storybook 7
     '@storybook/addon-mdx-gfm',
+    {
+      name: '@storybook/addon-storysource',
+      options: {
+        loaderOptions: {
+          injectStoryParameters: false,
+          prettierConfig: {
+            singleQuote: true,
+            trailingComma: 'all',
+            printWidth: 80,
+            tabWidth: 2,
+            bracketSpacing: false,
+            endOfLine: 'lf',
+            overrides: [
+              {
+                files: ['*.js', '*.jsx'],
+                options: {
+                  parser: 'babel-flow',
+                },
+              },
+              {
+                files: ['*.css'],
+                options: {
+                  parser: 'css',
+                },
+              },
+            ],
+          },
+        },
+      },
+    },
   ],
   babel: async (options) => ({
     ...options,

package/.storybook/manager-head.html

@@ -1,6 +1,10 @@
 <!--
   Override the default favicon used in the Storybook in the browser tab.
 -->
+<meta
+  name="viewport"
+  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+/>
 <link
   rel="icon"
   sizes="any"

package/.storybook/preview-head.html

@@ -1,3 +1,7 @@
+<meta
+  name="viewport"
+  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+/>
 <style type="text/css">
   @font-face {
     font-family: 'Centra No 2';
@@ -136,5 +140,18 @@
 
   code {
     white-space: pre-wrap !important;
+    background-color: #f1f1f5 !important;
+    border-color: #d3d2e0 !important;
+    color: #17172a !important;
+  }
+
+  .docblock-source {
+    background-color: #f1f1f5 !important;
+    box-shadow: none !important;
+    border-color: #d3d2e0 !important;
+  }
+
+  a.sbdocs {
+    color: #5c34cd !important;
   }
 </style>

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.1.28](https://github.com/spaced-out/ui-design-system/compare/v0.1.27...v0.1.28) (2023-05-26)
+
+
+### Features
+
+* added @storybook/addon-storysource ([b25a7f7](https://github.com/spaced-out/ui-design-system/commit/b25a7f787fbfe366ba9ec7f96a48096cbcdb24f1))
+* tokens page now support search ([bae8e7f](https://github.com/spaced-out/ui-design-system/commit/bae8e7fac06ee31cb0e4ea390e0709a4d51a171d))
+
+
+### Bug Fixes
+
+* added fun entries missing messages ([eabe577](https://github.com/spaced-out/ui-design-system/commit/eabe5772da715d9066794ff99aa76b39a2e8f847))
+* checkbox onChange getting triggered twice ([#118](https://github.com/spaced-out/ui-design-system/issues/118)) ([79f01fd](https://github.com/spaced-out/ui-design-system/commit/79f01fd80d11bc3c22280e3432dc05567c680830))
+* fixed broken links in docs ([faf1301](https://github.com/spaced-out/ui-design-system/commit/faf1301dbc6285d49a1c3c5ead91fc493df47b96))
+* no scaling on iPhones ([11556c0](https://github.com/spaced-out/ui-design-system/commit/11556c006e73c3d067e9c7187ac72d41617c3349))
+* story style fixes ([3ef77e7](https://github.com/spaced-out/ui-design-system/commit/3ef77e77ca2fe2fcc0d08a6baf7ef079bc3c8dab))
+* style fixes for sb ([14900e9](https://github.com/spaced-out/ui-design-system/commit/14900e995e43673fea0b744b22a1e064f81ae16d))
+* style fixes for sb ([2672025](https://github.com/spaced-out/ui-design-system/commit/2672025e2bd214b035ae89eafbb004bd1663958f))
+
 ### [0.1.27](https://github.com/spaced-out/ui-design-system/compare/v0.1.26...v0.1.27) (2023-05-17)
 
 

package/lib/components/Checkbox/Checkbox.js

@@ -30,7 +30,7 @@ const Checkbox = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
   } = _ref;
   const checkboxInput = /*#__PURE__*/React.createRef();
   React.useImperativeHandle(forwardRef, () => checkboxInput.current);
-  const handleOnChange = () => {
+  const handleOnClick = () => {
     if (!disabled) {
       onChange && onChange({
         value,
@@ -51,9 +51,6 @@ const Checkbox = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
       checkboxInput.current.indeterminate = false;
     }
   }, [indeterminate]);
-  const onClickHandler = () => {
-    checkboxInput.current?.click();
-  };
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": "checkbox",
     className: (0, _classify.default)(_CheckboxModule.default.checkboxContainer, {
@@ -61,7 +58,7 @@ const Checkbox = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
       [_CheckboxModule.default.horizontalCheckbox]: align === 'horizontal-fixed',
       [_CheckboxModule.default.fluidCheckbox]: align === 'horizontal-fluid'
     }, classNames?.wrapper),
-    onClick: onClickHandler
+    onClick: handleOnClick
   }, /*#__PURE__*/React.createElement("span", {
     className: (0, _classify.default)(_CheckboxModule.default.checkboxSquare, {
       [_CheckboxModule.default.disabled]: disabled
@@ -69,10 +66,9 @@ const Checkbox = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
   }, /*#__PURE__*/React.createElement("input", {
     tabIndex: disabled ? -1 : tabIndex,
     type: "checkbox",
-    value: value,
     checked: checked,
+    readOnly: true,
     ref: checkboxInput,
-    onChange: handleOnChange,
     className: (0, _classify.default)(_CheckboxModule.default.inputCheckbox),
     disabled: disabled,
     name: name,

package/lib/components/Checkbox/Checkbox.js.flow

@@ -61,7 +61,7 @@ export const Checkbox: React$AbstractComponent<
     const checkboxInput = React.createRef<HTMLInputElement>();
     React.useImperativeHandle(forwardRef, () => checkboxInput.current);
 
-    const handleOnChange = () => {
+    const handleOnClick = () => {
       if (!disabled) {
         onChange &&
           onChange({
@@ -86,10 +86,6 @@ export const Checkbox: React$AbstractComponent<
       }
     }, [indeterminate]);
 
-    const onClickHandler = () => {
-      checkboxInput.current?.click();
-    };
-
     return (
       <div
         data-testid="checkbox"
@@ -102,7 +98,7 @@ export const Checkbox: React$AbstractComponent<
           },
           classNames?.wrapper,
         )}
-        onClick={onClickHandler}
+        onClick={handleOnClick}
       >
         <span
           className={classify(
@@ -116,10 +112,9 @@ export const Checkbox: React$AbstractComponent<
           <input
             tabIndex={disabled ? -1 : tabIndex}
             type="checkbox"
-            value={value}
             checked={checked}
+            readOnly
             ref={checkboxInput}
-            onChange={handleOnChange}
             className={classify(css.inputCheckbox)}
             disabled={disabled}
             name={name}

package/lib/utils/tokens.js

@@ -3,7 +3,72 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getSortedTokenNames = void 0;
+exports.getSortedTokenNames = exports.getRandomDataVariation = exports.filterTableDataBySearchText = exports.dataVariations = void 0;
+
+const dataVariations = [{
+  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! 🧙‍♂️✨'
+}];
 
 /**
  *
@@ -23,6 +88,7 @@ exports.getSortedTokenNames = void 0;
  * based on their numerical values.
  *
  */
+exports.dataVariations = dataVariations;
 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';
@@ -71,4 +137,18 @@ const getSortedTokenNames = function (obj) {
   });
   return sortedTokens;
 };
-exports.getSortedTokenNames = getSortedTokenNames;
+exports.getSortedTokenNames = getSortedTokenNames;
+const filterTableDataBySearchText = (TABLE_DATA, searchText) => {
+  const filteredData = TABLE_DATA.filter(item => {
+    const nameMatch = item.name.toLowerCase().includes(searchText.toLowerCase());
+    const valueMatch = item.value.toLowerCase().includes(searchText.toLowerCase());
+    return nameMatch || valueMatch;
+  });
+  return filteredData;
+};
+exports.filterTableDataBySearchText = filterTableDataBySearchText;
+const getRandomDataVariation = () => {
+  const randomIndex = Math.floor(Math.random() * dataVariations.length);
+  return dataVariations[randomIndex];
+};
+exports.getRandomDataVariation = getRandomDataVariation;

package/lib/utils/tokens.js.flow

@@ -1,9 +1,133 @@
 // @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,
@@ -80,3 +204,25 @@ export const getSortedTokenNames = (
 
   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.27",
+  "version": "0.1.28",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {
@@ -61,6 +61,7 @@
     "@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",