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

package/lib/utils/helpers/helpers.stories.tsx

@@ -1,124 +0,0 @@
-import React, {useState} from 'react';
-
-import {Button} from '../../components/Button';
-import {Input} from '../../components/Input';
-import {BodyLarge} from '../../components/Text';
-
-import {convertFileSize, range, uuid} from './helpers';
-
-import css from './helpers.stories.module.css';
-
-
-export default {
-  tags: ['autodocs'],
-  title: 'Utils/Helper Functions',
-  parameters: {
-    docs: {
-      description: {
-        component: `
-\`\`\`js
-import { uuid, range } from "@spaced-out/ui-design-system/lib/utils/helpers";
-\`\`\`
-This story showcases helper functions that can be used in different scenarios.
-
-### Helper Functions
-- \`uuid\`: Generates a unique identifier.
-- \`range\`: Creates an array of numbers within a specified range.
-- \`convertFileSize\`: Converts a file size in bytes to KB, MB, or GB.
-
-### Usage
-\`\`\`jsx
-import { uuid, range } from './helpers';
-
-const uniqueId = uuid(); // Example output: "983651f0-a7db-4f84-b0d2-4d348b5e5199"
-
-const numbers = range(1, 5); // Example output: [1, 2, 3, 4, 5]
-
-const fileSize = convertFileSize(1024 * 1024 * 1024); // 1 GB
-\`\`\`
-`,
-      },
-    },
-  },
-};
-
-export const Example = (): React.ReactElement<React.ComponentProps<'div'>> => {
-  const [uniqueId, setUniqueId] = useState('');
-  const [rangeStart, setRangeStart] = useState(1);
-  const [rangeEnd, setRangeEnd] = useState(5);
-  const [numbers, setNumbers] = useState([]);
-  const [fileSize, setFileSize] = useState(1024);
-
-  const generateUniqueId = () => {
-    const id = uuid();
-    setUniqueId(id);
-  };
-
-  const generateRange = () => {
-// @ts-ignore - TS2345 - Argument of type 'number' is not assignable to parameter of type 'string'.
-    const start = parseInt(rangeStart, 10);
-// @ts-ignore - TS2345 - Argument of type 'number' is not assignable to parameter of type 'string'.
-    const end = parseInt(rangeEnd, 10);
-    const generatedNumbers = range(start, end);
-// @ts-ignore - TS2345 - Argument of type 'number[]' is not assignable to parameter of type 'SetStateAction<never[]>'.
-    setNumbers(generatedNumbers);
-  };
-
-  return (
-    <div>
-      <BodyLarge className={css.text}>
-        This story showcases helper functions that can be used in different
-        scenarios.
-      </BodyLarge>
-      <div className={css.playground}>
-        <div className={css.playgroundItem}>
-          <BodyLarge>Generated Unique ID: {uniqueId}</BodyLarge>
-          <Button onClick={generateUniqueId}>Generate Unique ID</Button>
-        </div>
-
-        <div className={css.playgroundItem}>
-          <BodyLarge>Generated Range: {numbers.join(', ')}</BodyLarge>
-          <div>
-            <label htmlFor="rangeStart">Start:</label>
-            <Input
-              type="number"
-              id="rangeStart"
-// @ts-ignore - TS2769 - No overload matches this call.
-              value={rangeStart}
-// @ts-ignore - TS2345 - Argument of type 'string' is not assignable to parameter of type 'SetStateAction<number>'.
-              onChange={(event) => setRangeStart(event.target.value)}
-            />
-          </div>
-          <div>
-            <label htmlFor="rangeEnd">End:</label>
-            <Input
-              type="number"
-              id="rangeEnd"
-// @ts-ignore - TS2769 - No overload matches this call.
-              value={rangeEnd}
-// @ts-ignore - TS2345 - Argument of type 'string' is not assignable to parameter of type 'SetStateAction<number>'.
-              onChange={(event) => setRangeEnd(event.target.value)}
-            />
-          </div>
-          <Button onClick={generateRange}>Generate Range</Button>
-        </div>
-
-        <div className={css.playgroundItem}>
-          <BodyLarge>
-{ /* @ts-ignore - TS2345 - Argument of type 'number' is not assignable to parameter of type 'string'. */}
-            Generated File Size: {convertFileSize(parseInt(fileSize))}
-          </BodyLarge>
-          <div>
-            <Input
-              type="number"
-              id="rangeStart"
-// @ts-ignore - TS2769 - No overload matches this call.
-              value={fileSize || 0}
-              onChange={(event) => setFileSize(parseInt(event.target.value))}
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};

package/lib/utils/helpers/helpers.ts

@@ -1,51 +0,0 @@
-export const uuid = (): string => {
-  let dt = new Date().getTime();
-
-  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
-    const r = (dt + Math.random() * 16) % 16 | 0;
-    dt = Math.floor(dt / 16);
-    return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);
-  });
-};
-
-export const range = (start: number, end: number): Array<number> => {
-  const length = end - start + 1;
-  return Array.from({length}, (_, i) => start + i);
-};
-
-export const convertFileSize = (fileSize: number = 0): string => {
-  let sizeInBytes = fileSize;
-  // Check if the file size is less than 1024
-  if (sizeInBytes < 0) {
-    sizeInBytes = Math.abs(sizeInBytes);
-  }
-
-  // Handle the case where the file size is 0 or negative
-  if (sizeInBytes <= 0) {
-    return '0 B';
-  }
-
-  // Check if the file size is less than 1024
-  if (sizeInBytes < 1024) {
-    // Return the file size in bytes
-    return sizeInBytes.toString() + ' B';
-  }
-
-  // Check if the file size is less than 1048576
-  else if (sizeInBytes < 1048576) {
-    // Return the file size in KB
-    return (sizeInBytes / 1024).toFixed(1) + ' KB';
-  }
-
-  // Check if the file size is less than 1073741824
-  else if (sizeInBytes < 1073741824) {
-    // Return the file size in MB
-    return (sizeInBytes / 1048576).toFixed(1) + ' MB';
-  }
-
-  // Otherwise, the file size is greater than or equal to 1073741824
-  else {
-    // Return the file size in GB
-    return (sizeInBytes / 1073741824).toFixed(1) + ' GB';
-  }
-};

package/lib/utils/helpers/index.ts

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

package/lib/utils/index.ts

@@ -1,14 +0,0 @@
-export * from './array';
-export * from './charts';
-export * from './classify';
-export * from './click-away';
-export * from './date-range-picker';
-export * from './dom';
-export * from './helpers';
-export * from './makeClassNameComponent';
-export * from './menu';
-export * from './merge-refs';
-export * from './rating';
-export * from './score-bar';
-export * from './string';
-export * from './tokens';

package/lib/utils/makeClassNameComponent/index.ts

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

package/lib/utils/makeClassNameComponent/makeClassNameComponent.stories.tsx

@@ -1,46 +0,0 @@
-import React, {useState} from 'react';
-
-import {makeClassNameComponent} from './makeClassNameComponent';
-
-import css from './makeClassNameComponent.stories.module.css';
-
-
-export default {
-  tags: ['autodocs'],
-  title: 'Utils/Make Class Name Component',
-  parameters: {
-    docs: {
-      description: {
-        component: `
-\`\`\`js
-import { makeClassNameComponent } from "@spaced-out/ui-design-system/lib/utils/makeClassNameComponent";
-\`\`\`
-This story showcases the utility functions \`makeClassNameComponent\` and \`makeClassNameComponentCustom\`.
-
-### \`makeClassNameComponent\`
-The \`makeClassNameComponent\` function creates a higher-order component (HOC) that adds a base class name and combines it with the existing class name.
-
-### \`makeClassNameComponentCustom\`
-The \`makeClassNameComponentCustom\` function is similar to \`makeClassNameComponent\`, but allows you to use a custom component as the base component.
-
-### Usage
-Please refer to the individual functions for usage examples.
-`,
-      },
-    },
-  },
-};
-
-export const Example = (): React.ReactElement<React.ComponentProps<'div'>> => {
-  const [className] = useState('');
-
-  const ClassNameDiv = makeClassNameComponent(css.container, 'div');
-
-  return (
-    <div>
-      <ClassNameDiv className={className}>
-        I'm a div created with make className component
-      </ClassNameDiv>
-    </div>
-  );
-};

package/lib/utils/makeClassNameComponent/makeClassNameComponent.tsx

@@ -1,60 +0,0 @@
-import {Flow} from 'flow-to-typescript-codemod';
-import * as React from 'react';
-
-import classify from '../classify';
-
-
-export function nameHoc<C, T extends React.ComponentType<C>, C2>(
-  WrapperComponent: T,
-  WrappedComponent: React.ComponentType<C2>,
-  hocName: string,
-): T {
-  const wrappedComponentName =
-    WrappedComponent.displayName || WrappedComponent.name || 'Component';
-  WrapperComponent.displayName = `${hocName}(${wrappedComponentName})`;
-  return WrapperComponent;
-}
-
-// @ts-ignore - TS2322 - Type 'T' is not assignable to type 'ComponentType<P>'.
-export type ClassNameComponent<T = 'div', I = React.ElementRef<T>> = Flow.AbstractComponent<ComponentProps<T>, I>;
-// @ts-ignore - TS2322 - Type 'C' is not assignable to type 'ComponentType<P>'.
-export function makeClassNameComponent<C extends string>(baseClassName: string, ComponentType: C = 'div', name?: string): Flow.AbstractComponent<ComponentProps<C>, React.ElementRef<C>> {
-  return React.forwardRef(
-// @ts-ignore - TS7031 - Binding element 'className' implicitly has an 'any' type. | TS7006 - Parameter 'ref' implicitly has an 'any' type.
-    nameComponent(({className, ...props}, ref) => (
-// @ts-ignore - TS2604 - JSX element type 'ComponentType' does not have any construct or call signatures.
-      (<ComponentType
-        {...props}
-        ref={ref}
-        className={classify(baseClassName, className)}
-      />)
-    ), `CNC(${name || ComponentType})`),
-  );
-}
-
-export function makeClassNameComponentCustom<C extends Readonly<{
-  className?: string;
-}>, B>(baseClassName: string, ComponentType: Flow.AbstractComponent<C, B>): Flow.AbstractComponent<C, B> {
-  return React.forwardRef(
-// @ts-ignore - TS2345 - Argument of type 'ComponentType<unknown>' is not assignable to parameter of type 'ForwardRefRenderFunction<B, unknown>'.
-    nameHoc(
-// @ts-ignore - TS2345 - Argument of type '({ className, ...props }: { [x: string]: any; className: any; }, ref: any) => Element' is not assignable to parameter of type 'ComponentType<unknown>'. | TS7031 - Binding element 'className' implicitly has an 'any' type. | TS7006 - Parameter 'ref' implicitly has an 'any' type.
-      ({className, ...props}, ref) => (
-// @ts-ignore - TS2769 - No overload matches this call.
-        <ComponentType
-          {...props}
-          ref={ref}
-          className={classify(baseClassName, className)}
-        />
-      ),
-      ComponentType,
-      'CNC',
-    ),
-  );
-}
-
-// @ts-ignore - TS7006 - Parameter 'component' implicitly has an 'any' type.
-function nameComponent(component, name: string) {
-  component.displayName = name;
-  return component;
-}

package/lib/utils/menu/index.ts

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

package/lib/utils/menu/menu.ts

@@ -1,174 +0,0 @@
-import * as React from 'react';
-
-import type {MenuGroupTitleOption, MenuOption} from '../../components/Menu';
-
-
-export const getSelectedKeysFromSelectedOption = (currentOption?: MenuOption, currentSelectedKeys?: Array<string>): Array<string> => {
-  if (!Array.isArray(currentSelectedKeys) || !currentOption?.key) {
-    return [];
-  }
-
-  let newSelectedKeys: Array<never> | Array<string> = [];
-
-  if (currentSelectedKeys.includes(currentOption.key)) {
-    newSelectedKeys = currentSelectedKeys.filter(
-      (item) => item !== currentOption.key,
-    );
-  } else {
-    newSelectedKeys = [...currentSelectedKeys, currentOption.key];
-  }
-
-  return newSelectedKeys;
-};
-
-export const getTextLabelFromSelectedKeys = (currentSelectedKeys?: Array<string>, options?: MenuOption[]): string => {
-  if (!Array.isArray(currentSelectedKeys) || !Array.isArray(options)) {
-    return '';
-  }
-
-  const selectedOptions = getOptionsFromKeys(options, currentSelectedKeys);
-
-  return selectedOptions.map((option) => option.label).join(', ');
-};
-
-export const getButtonLabelFromSelectedKeys = (currentSelectedKeys?: Array<string>, label?: React.ReactNode) => {
-  if (
-    !Array.isArray(currentSelectedKeys) ||
-    typeof label !== 'string' ||
-    !currentSelectedKeys.length
-  ) {
-    return label;
-  }
-
-  return `(${currentSelectedKeys.length}) ${label}`;
-};
-
-export const getOptionFromKey = (options?: MenuOption[], key?: string): MenuOption | null | undefined => {
-  if (!Array.isArray(options) || !key || !options.length) {
-    return null;
-  }
-
-  return options.find((option) => option.key === key);
-};
-
-export const getOptionsFromKeys = (options?: MenuOption[], keys?: Array<string>): Array<MenuOption> => {
-  if (
-    !Array.isArray(options) ||
-    !Array.isArray(keys) ||
-    !options.length ||
-    !keys.length
-  ) {
-    return [];
-  }
-
-  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[],
-  staticLabels: {
-    [key: string]: string;
-  },
-): string => {
-  let resultCount = 0;
-
-  resultCount += options.length;
-
-  const singleResultMessage = staticLabels.RESULT ?? 'result';
-  const multipleResultsMessage = staticLabels.RESULTS ?? 'results';
-
-  const generatedResultText = `${resultCount} ${
-    resultCount > 1 ? multipleResultsMessage : singleResultMessage
-  }`;
-
-  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>>,
-  staticLabels: {
-    [key: string]: string;
-  },
-): string => {
-  let resultCount = 0;
-
-  composeOptions.forEach((optionGroup) => {
-    resultCount += optionGroup.length;
-  });
-
-  const singleResultMessage = staticLabels.RESULT ?? 'result';
-  const multipleResultsMessage = staticLabels.RESULTS ?? 'results';
-
-  const generatedResultText = `${resultCount} ${
-    resultCount > 1 ? multipleResultsMessage : singleResultMessage
-  }`;
-
-  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: MenuOption) =>
-        option.label?.toLowerCase().includes(searchText.toLowerCase()),
-      ),
-    }))
-    .filter((group) => group.options && group.options.length > 0);
-};
-
-export const getFilteredGroupTitleOptionsResultText = (
-  groupTitleOptions: Array<MenuGroupTitleOption>,
-  staticLabels: {
-    [key: string]: string;
-  },
-): string => {
-  let resultCount = 0;
-
-  groupTitleOptions.forEach((group) => {
-    if (group.options) {
-      resultCount += group.options.length;
-    }
-  });
-
-  const singleResultMessage = staticLabels.RESULT ?? 'result';
-  const multipleResultsMessage = staticLabels.RESULTS ?? 'results';
-
-  const generatedResultText = `${resultCount} ${
-    resultCount > 1 ? multipleResultsMessage : singleResultMessage
-  }`;
-
-  return generatedResultText;
-};

package/lib/utils/merge-refs/index.ts

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

package/lib/utils/merge-refs/merge-refs.stories.tsx

@@ -1,92 +0,0 @@
-import React, {useRef, useState} from 'react';
-
-import {Button} from '../../components/Button';
-import {Input} from '../../components/Input';
-import {BodyLarge} from '../../components/Text';
-
-import {mergeRefs} from './merge-refs';
-
-import css from './merge-refs.stories.module.css';
-
-
-export default {
-  tags: ['autodocs'],
-  title: 'Utils/Merge Refs',
-  parameters: {
-    docs: {
-      description: {
-        component: `
-\`\`\`js
-import { mergeRefs } from "@spaced-out/ui-design-system/lib/utils/merge-refs";
-\`\`\`
-This story showcases the \`mergeRefs\` utility function.
-
-### \`mergeRefs\`
-The \`mergeRefs\` function combines multiple ref objects into a single ref function or object. It allows you to merge refs from different sources and use them together.
-
-### Usage
-Please refer to the function for a usage example.
-`,
-      },
-    },
-  },
-};
-
-export const Example = (): React.ReactElement<React.ComponentProps<'div'>> => {
-  const [inputValue, setInputValue] = useState('');
-  const [inputValue1, setInputValue1] = useState('');
-  const inputRef1 = useRef(null);
-  const inputRef2 = useRef(null);
-
-  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setInputValue(event.target.value);
-  };
-  const handleInputChange1 = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setInputValue1(event.target.value);
-  };
-
-  const handleClearButtonClick = () => {
-    setInputValue('');
-    setInputValue1('');
-// @ts-ignore - TS2339 - Property 'focus' does not exist on type 'never'.
-    inputRef1.current?.focus();
-// @ts-ignore - TS2531 - Object is possibly 'null'.
-    inputRef1.current.value = '';
-// @ts-ignore - TS2531 - Object is possibly 'null'.
-    inputRef2.current.value = '';
-  };
-
-  const handleMergeRefs = mergeRefs([inputRef1, inputRef2]);
-
-  return (
-    <div>
-      <BodyLarge className={css.text}>
-        This story showcases the mergeRefs utility function.
-      </BodyLarge>
-      <div className={css.text}>
-        <Input
-// @ts-ignore - TS2769 - No overload matches this call.
-          id="input1"
-          label="Input 1"
-          type="text"
-          value={inputValue}
-          onChange={handleInputChange}
-          ref={handleMergeRefs}
-        />
-        <Input
-// @ts-ignore - TS2769 - No overload matches this call.
-          id="input2"
-          label="Input 2"
-          type="text"
-          value={inputValue1}
-          onChange={handleInputChange1}
-          ref={handleMergeRefs}
-        />
-      </div>
-{ /* @ts-ignore - TS2769 - No overload matches this call. */}
-      <Button className={css.button} onClick={handleClearButtonClick}>
-        Clear Inputs
-      </Button>
-    </div>
-  );
-};

package/lib/utils/merge-refs/merge-refs.ts

@@ -1,16 +0,0 @@
-export function mergeRefs(
-  refs: Array<{
-    current: HTMLElement | null | undefined;
-  }>,
-): (value?: HTMLElement | null | undefined) => void {
-  return (value: HTMLElement | null | undefined) => {
-    refs.forEach((ref) => {
-      if (typeof ref === 'function') {
-// @ts-ignore - TS2349 - This expression is not callable.
-        ref(value);
-      } else if (ref != null) {
-        ref.current = value;
-      }
-    });
-  };
-}

package/lib/utils/rating/index.ts

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

package/lib/utils/rating/rating.ts

@@ -1,30 +0,0 @@
-export const RATING_ERRORS = Object.freeze({
-  INVALID_RANGE: {
-    type: 'INVALID_RANGE',
-    description:
-      'Given rating\'s stop value cannot come before the start value.',
-  },
-  INVALID_RATING_LABELS: {
-    type: 'INVALID_RATING_LABELS',
-    description: 'Given rating labels are invalid.',
-  },
-});
-
-export const RATINGS: Array<string> = [
-  'Not-Qualified',
-  'Proficient',
-  'Silver',
-  'Gold',
-  'Platinum',
-  'Diamond',
-];
-
-export const getRatingLabel = (rating: number, labels: Array<string>): string => {
-  if (rating <= 0) {
-    return labels[0];
-  } else if (rating >= labels.length) {
-    return labels.slice(-1)[0];
-  } else {
-    return labels[rating];
-  }
-};

package/lib/utils/score-bar/index.ts

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

package/lib/utils/score-bar/score-bar.ts

@@ -1,45 +0,0 @@
-import type {ScoreBarColorMap, ScoreBarLabelMap} from '../../components/ScoreBar';
-
-
-const getValidRange = (score: number, totalBars: number, keys: Array<string>): string => {
-  const scorePercentage = (100 * score) / totalBars;
-  for (const key of keys) {
-    if (scorePercentage <= Number(key)) {
-      return key;
-    }
-  }
-
-  return [...keys].pop() || '';
-};
-
-export const getColorByScorePercentage = (
-  totalBars: number,
-  score: number,
-  currentBarNumber: number,
-  colorMap: ScoreBarColorMap,
-): string => {
-  if (score <= 0) {
-    return colorMap.inactive;
-  }
-  const validRange = getValidRange(score, totalBars, Object.keys(colorMap));
-  const validColor = colorMap[validRange];
-
-  return currentBarNumber < score ? validColor : colorMap.inactive;
-};
-
-export const getLabelByScorePercentage = (score: number, totalBars: number, labelMap?: ScoreBarLabelMap): string => {
-  if (!labelMap) {
-    return '';
-  }
-  const validRange = getValidRange(score, totalBars, Object.keys(labelMap));
-  const validLabel = labelMap[validRange];
-
-  return validLabel || '';
-};
-
-export const SCORE_BAR_ERRORS = Object.freeze({
-  INVALID_BAR_COUNT: {
-    type: 'INVALID_BAR_COUNT',
-    description: 'totalBars can not be less than 1',
-  },
-});

package/lib/utils/string/index.ts

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