@spaced-out/ui-design-system 0.4.13-beta.0 → 0.4.13-beta.1

package/lib/utils/string/string.stories.tsx

@@ -1,71 +0,0 @@
-import React from 'react';
-
-import {Input} from '../../components/Input';
-import {BodyLarge} from '../../components/Text';
-import {useInputState} from '../../hooks/useInputState/useInputState';
-
-import {capitalize, escapeRegExp, formatWord, truncateString} from './string';
-
-import css from './string.stories.module.css';
-
-
-export default {
-  tags: ['autodocs'],
-  title: 'Utils/String',
-  parameters: {
-    docs: {
-      description: {
-        component: `
-\`\`\`js
-import { capitalize, escapeRegExp, formatWord, truncateString } from "@spaced-out/ui-design-system/lib/utils/string";
-\`\`\`
-This story showcases various utility functions for string manipulation.
-
-### Utility Functions
-- \`capitalize\`: Capitalizes the first letter of a word.
-- \`escapeRegExp\`: Escapes special characters in a regular expression string.
-- \`formatWord\`: Formats a word based on a count, adding an "s" for plural.
-- \`truncateString\`: Truncates a string based on a maxLength, adding ellipsis "..." at the end.
-
-### Usage
-Please refer to the individual functions for usage examples.
-`,
-      },
-    },
-  },
-};
-
-export const Example = (): React.ReactElement<React.ComponentProps<'div'>> => {
-  const [value, onChange] = useInputState('');
-  const count = 3;
-  const maxLength = 5;
-
-  return (
-    <div>
-      <BodyLarge className={css.text}>
-        This story showcases various utility functions for string manipulation.
-      </BodyLarge>
-      <Input
-        classNames={{box: css.text}}
-        label="Original Word"
-        placeholder="Type a word here"
-        value={value}
-        onChange={onChange}
-      />
-      <BodyLarge className={css.text}>
-        <strong>Capitalized Word:</strong> {capitalize(value)}
-      </BodyLarge>
-      <BodyLarge className={css.text}>
-        <strong>Escaped RegExp:</strong> {escapeRegExp(`[${value}]`)}
-      </BodyLarge>
-      <BodyLarge className={css.text}>
-        <strong>Formatted Word:</strong>{' '}
-        {!!value.length && formatWord(value, count)}
-      </BodyLarge>
-      <BodyLarge className={css.text}>
-        <strong>Truncated String:</strong>{' '}
-        {!!value.length && truncateString(value, maxLength)}
-      </BodyLarge>
-    </div>
-  );
-};

package/lib/utils/string/string.ts

@@ -1,26 +0,0 @@
-export const capitalize = (word: string): string => {
-  if (!word) {
-    return '';
-  }
-  return word
-    .toLowerCase()
-    .replace(/\w/, (firstLetter) => firstLetter.toUpperCase());
-};
-
-export const escapeRegExp = (str: string): string => str.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
-
-export const formatWord = (word: string, count: number): string => count === 1 ? word : word + 's';
-
-export const truncateString = (inputString: string, maxLength: number): string => {
-  if (inputString.length > maxLength) {
-    return inputString.substring(0, maxLength - 3) + '...';
-  }
-  return inputString;
-};
-
-export const appendPx = (value?: number | string): string => {
-  if (typeof value === 'number') {
-    return `${value}px`;
-  }
-  return value ?? '';
-};

package/lib/utils/token-list-input/token-list-input.ts

@@ -1,32 +0,0 @@
-import * as React from 'react';
-
-
-type V = {
-  key: string;
-  label: string;
-  arbitrary?: boolean;
-  multiarbitrary?: boolean;
-};
-
-type Group<V> = {
-  options: Array<V>;
-  groupTitle?: React.ReactNode;
-};
-
-export const getFirstOption = (options: Array<V>): V | null => {
-  // pick the first option from the options
-  if (options.length > 0) {
-    return options[0];
-  }
-  return null;
-};
-
-export const getFirstOptionFromGroup = (groupTitleOptions: Array<Group<V>>): V | null => {
-  if (groupTitleOptions.length > 0) {
-    const firstGroup = groupTitleOptions[0];
-    if (firstGroup.options && firstGroup.options.length > 0) {
-      return firstGroup.options[0];
-    }
-  }
-  return null;
-};

package/lib/utils/tokens/index.ts

@@ -1 +0,0 @@
-export * from './tokens';

package/lib/utils/tokens/tokens.ts

@@ -1,237 +0,0 @@
-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];
-};
-
-export const handleDownload = (filePath: string, fileName: string) => {
-  fetch(filePath)
-    .then((response) => response.blob())
-    .then((blob) => {
-      const url = URL.createObjectURL(blob);
-      const link = document.createElement('a');
-      link.href = url;
-      link.download = fileName;
-      link.click();
-      URL.revokeObjectURL(url);
-    })
-    .catch((error) => {
-      console.error('Error downloading the JSON file:', error);
-    });
-};