tide-design-system 2.0.22 → 2.0.24

package/src/stories/TideTabs.stories.ts

@@ -0,0 +1,100 @@
+import { action } from '@storybook/addon-actions';
+
+import type { Tab } from '@/types/Tab';
+
+import TideTabs from '@/components/TideTabs.vue';
+import { change, disabledArgType, doSomething, getLabelsFromOptions, parameters } from '@/utilities/storybook';
+
+/* eslint-disable */
+// ^ Storybook controls are based on iterating over object properties instead of array slots (bad form), so these can't be ordered alphabetically.
+const options = {
+  'None': undefined,
+  'Tab 1': 0,
+  'Tab 2': 1,
+  'Tab 3': 2,
+};
+/* eslint-enable */
+
+const tabs: Tab[] = [
+  {
+    dataTrack: 'Tab 0 Click',
+    label: 'First Tab',
+  },
+  {
+    dataTrack: 'Tab 1 Click',
+    label: 'Second Tab',
+  },
+  {
+    dataTrack: 'Tab 2 Click',
+    label: 'Third Tab',
+  },
+];
+
+const render = (args: any) => ({
+  components: { TideTabs },
+  methods: {
+    doSomething,
+    handleEmit: (event: Event, index: number) => {
+      action(`Current tab ${index}`)(event, { index });
+
+      try {
+        const performCallback = eval(args.handleEmit);
+
+        if (performCallback) {
+          performCallback();
+        }
+      } catch {
+        alert('Please specify a valid handler in the "change" control.');
+      }
+    },
+  },
+  setup: () => ({ args }),
+  template:
+    '<TideTabs @change="handleEmit" :key="args.activeTabInitial" class="tide-display-inline-flex" v-bind="args" />',
+});
+
+export default {
+  argTypes: {
+    activeTabInitial: {
+      control: {
+        labels: getLabelsFromOptions(options),
+        type: 'select',
+      },
+      description: 'Determines which tab should be active by default<br />(Subsequently managed within component)',
+      isDynamic: true,
+      options: Object.values(options),
+      table: {
+        defaultValue: { summary: 'None' },
+      },
+    },
+    change: disabledArgType,
+    handleEmit: {
+      ...change,
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: '(event: Event, tabIndex: number) => void' },
+      },
+    },
+    tabs: {
+      control: 'object',
+      description: 'Sets label and callback for each tab',
+      isCustom: true,
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'Tab[]' },
+      },
+    },
+  },
+  args: {
+    activeTabInitial: undefined,
+    handleEmit: 'doSomething',
+    tabs,
+  },
+  component: TideTabs,
+  parameters,
+  render,
+  tags: ['autodocs'],
+  title: 'Basic Components/TideTabs',
+};
+
+export const Demo = {};

package/src/stories/TideToggle.stories.ts

@@ -0,0 +1,69 @@
+import { action } from '@storybook/addon-actions';
+
+import TideToggle from '@/components/TideToggle.vue';
+import {
+  argTypeBooleanUnrequired,
+  change,
+  dataTrack,
+  disabledArgType,
+  doSomething,
+  parameters,
+} from '@/utilities/storybook';
+
+const render = (args: any, { updateArgs }: any) => ({
+  components: { TideToggle },
+  methods: {
+    doSomething,
+    handleEmit: (event: Event, isActive: boolean) => {
+      updateArgs({ ...args, isActive });
+      action('TideToggle changed')(event, { isActive });
+
+      try {
+        const performCallback = eval(args.handleEmit);
+
+        if (performCallback) {
+          performCallback();
+        }
+      } catch {
+        alert('Please specify a valid handler in the "change" control.');
+      }
+    },
+  },
+  setup: () => ({ args }),
+  template: `<TideToggle @change="handleEmit" v-bind="args" />`,
+});
+
+export default {
+  argTypes: {
+    change: disabledArgType,
+    dataTrack,
+    disabled: {
+      ...argTypeBooleanUnrequired,
+      description: 'Determines clickability',
+    },
+    handleEmit: {
+      ...change,
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: '(event: Event, tabIndex: number) => void' },
+      },
+    },
+    isActive: {
+      ...argTypeBooleanUnrequired,
+      description: 'Determines whether toggle is active',
+    },
+  },
+  args: {
+    dataTrack: '',
+    disabled: undefined,
+    handleEmit: 'doSomething',
+    isActive: undefined,
+  },
+  component: TideToggle,
+  parameters,
+  render,
+  tags: ['autodocs'],
+  title: 'Basic Components/TideToggle',
+};
+
+export const Demo = {};

package/src/stories/Welcome.mdx

@@ -0,0 +1,17 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Welcome" />
+
+# Welcome to TIDE
+
+> When building apps, one of the biggest challenges is to figure out if a piece of UI already exists in your codebase and how to use it for the new feature you're building.
+>
+> Storybook catalogues all your components and their use cases. Therefore, you can quickly browse it to find what you're looking for.
+>
+> Here's what the workflow looks like:
+>
+> * Use the sidebar to find the suitable component.
+> * Review its stories to select the variant that fulfills the requirements.
+> * Copy/paste the code snippet into the app and wire it up to data.
+
+*(Excerpted from the [Storybook docs](https://storybook.js.org/docs/vue/get-started/browse-stories#use-stories-to-build-uis))*

package/src/utilities/format.ts

@@ -0,0 +1,184 @@
+const capitalizeFirst = (string: string) => {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+};
+
+const formatCamelCase = (input: string): string => {
+  return input && typeof input === 'string'
+    ? input
+        .replace(/^[\s_-]/, '')
+        .replace(/([a-z]{1})([A-Z]{1})/g, '$1 $2')
+        .replace(/[\s_-]/g, ' ')
+        .toLowerCase()
+        .split(' ')
+        .map((word, index) => (index === 0 ? word : word.slice(0, 1).toUpperCase() + word.slice(1)))
+        .join('')
+    : input;
+};
+
+const formatKebabCase = (input: string): string => {
+  return input && typeof input === 'string'
+    ? input
+        .replace(/([a-z]{1})([A-Z]{1})/g, '$1 $2')
+        .toLowerCase()
+        .replace(/[\s_-]/g, '-')
+    : input;
+};
+
+const formatLabel = (value: string) => {
+  const labelMap: { [key: string]: string } = {
+    false: 'No',
+    true: 'Yes',
+  };
+  return Object.hasOwn(labelMap, value) ? labelMap[value] : value;
+};
+
+const formatNumber = (input: number | string): string => {
+  let output = input && typeof input === 'number' ? new Intl.NumberFormat().format(input) : String(input || '');
+  let digits = output;
+
+  if (input && typeof input === 'string') {
+    digits = digits.replace(/\D/g, '');
+    if (Number(digits)) {
+      output = new Intl.NumberFormat().format(Number(digits));
+    } else {
+      output = '0';
+    }
+  }
+
+  return output;
+};
+
+const formatPascalCase = (input: string): string => {
+  return input && typeof input === 'string'
+    ? input
+        .replace(/([a-z]{1})([A-Z]{1})/g, '$1 $2')
+        .replace(/[\s_-]/g, ' ')
+        .toLowerCase()
+        .split(' ')
+        .map((word) => word.slice(0, 1).toUpperCase() + word.slice(1))
+        .join('')
+    : input;
+};
+
+const formatPhone = (input: number | string): string => {
+  let output = input && typeof input === 'number' ? String(input) : String(input || '');
+  let digits = output;
+  digits = digits.replace(/\D/g, '');
+
+  switch (digits.length) {
+    case 7:
+      output = `${digits.slice(0, 3)}-${digits.slice(3)}`;
+      break;
+    case 10:
+      output = `${digits.slice(0, 3)}-${digits.slice(3, 6)}-${digits.slice(6)}`;
+      break;
+    case 11:
+      output = `${digits.slice(0, 1)}-${digits.slice(1, 4)}-${digits.slice(4, 7)}-${digits.slice(7)}`;
+      break;
+    default:
+      output = digits;
+      break;
+  }
+
+  return output;
+};
+
+const formatPrice = (input: number | string): string => {
+  const output = input ? formatNumber(input) : String(input || '0');
+  return `$${output}`;
+};
+
+const formatQuotes = (value: string) => {
+  if (value.startsWith('"') && value.endsWith('"')) {
+    return value.slice(1, -1);
+  } else {
+    return value;
+  }
+};
+
+const formatSentenceCase = (input: string): string => {
+  let sentenceCase = input;
+
+  if (input && typeof input === 'string') {
+    const lowerCase = input
+      .replace(/([a-z]{1})([A-Z]{1})/g, '$1 $2')
+      .toLowerCase()
+      .replace(/[\s_-]/g, ' ');
+
+    sentenceCase = lowerCase.slice(0, 1).toUpperCase() + lowerCase.slice(1);
+  }
+
+  return sentenceCase;
+};
+
+const formatSnakeCase = (input: string): string => {
+  return input && typeof input === 'string'
+    ? input
+        .replace(/([a-z]{1})([A-Z]{1})/g, '$1 $2')
+        .toLowerCase()
+        .replace(/[\s_-]/g, '_')
+    : input;
+};
+
+const formatTitleCase = (input: string): string => {
+  return input && typeof input === 'string'
+    ? input
+        .replace(/([a-z]{1})([A-Z]{1})/g, '$1 $2')
+        .toLowerCase()
+        .replace(/[\s_-]/g, ' ')
+        .split(' ')
+        .map((word) => word.slice(0, 1).toUpperCase() + word.slice(1))
+        .join(' ')
+    : input;
+};
+
+const formatUrlFromRoot = (url: string) => {
+  const urlFormatted = url.split('.com/');
+
+  return urlFormatted.length > 1 ? `/${urlFormatted[1]}` : url;
+};
+
+const formatWeight = (input: number | string): string => {
+  const output = input ? formatNumber(input) : String(input || '0');
+  return `${output} lbs`;
+};
+
+const getArticle = (noun: string, isPlural = false, isDefinite = false) => {
+  const vowels = ['a', 'e', 'i', 'o', 'u'];
+  const isVowelLeading = vowels.includes(noun.charAt(0));
+
+  return isDefinite ? 'the' : isPlural ? 'some' : isVowelLeading ? 'an' : 'a';
+};
+
+const priceToNumber = (value: string) => {
+  if (Number.isNaN(Number(value))) {
+    value = value.replace('$', '');
+    value = value.replace(/,/g, '');
+  }
+  return parseInt(value, 10);
+};
+
+const unformatPrice = (input: string): string => {
+  const output = input.replace(/\$/g, '').replace(/,/g, '');
+  return `${output}`;
+};
+
+export {
+  capitalizeFirst,
+  formatCamelCase,
+  formatKebabCase,
+  formatLabel,
+  formatNumber,
+  formatPascalCase,
+  formatPhone,
+  formatPrice,
+  formatQuotes,
+  formatSentenceCase,
+  formatSnakeCase,
+  formatTitleCase,
+  formatUrlFromRoot,
+  formatWeight,
+  getArticle,
+  priceToNumber,
+  unformatPrice,
+};

package/src/utilities/storybook.ts

@@ -0,0 +1,295 @@
+import type { ArgTypes } from '@storybook/vue3';
+
+import { BOOLEAN_UNREQUIRED } from '@/types/Storybook';
+import { CSS } from '@/types/Styles';
+import { ELEMENT, ELEMENT_TEXT_AS_ICON } from '@/types/Element';
+
+// Extensible object of key/value pairs
+type KeyValue = { [key: string]: any };
+
+// Object with a retrievable key and an extensible object of key/value pairs as the value
+type KeyValueNamed = {
+  [key: string]: KeyValue;
+};
+
+import type { StoryContext } from '@storybook/vue3';
+
+import { formatKebabCase } from '@/utilities/format';
+import { NoneAsEmpty, NoneAsUndefined } from '@/types/Storybook';
+
+export const lineBreak = '\r';
+export const tab = '  ';
+
+export const argTypeBooleanUnrequired = {
+  control: 'select',
+  description: 'True, False, or undefined<br />(for demonstration purposes)',
+  options: BOOLEAN_UNREQUIRED,
+  table: {
+    defaultValue: { summary: 'None' },
+    type: { summary: 'boolean' },
+  },
+};
+
+export const argTypeDimension = {
+  control: {
+    max: 500,
+    min: 100,
+    step: 100,
+    type: 'number',
+  },
+  table: {
+    defaultValue: { summary: 'None' },
+    type: { summary: 'number (px)' },
+  },
+};
+
+export const change = {
+  control: 'text',
+  description: 'JS code or function to execute on change event',
+  isEmit: true,
+  name: 'change',
+  table: {
+    defaultValue: { summary: 'None' },
+    type: { summary: '(event: Event) => void' },
+  },
+};
+
+export const click = {
+  control: 'text',
+  description: 'JS code or function to execute on click event',
+  table: {
+    defaultValue: { summary: 'None' },
+    type: { summary: '(event: Event) => void' },
+  },
+};
+
+export const dataTrack = {
+  control: 'text',
+  description: 'Data attribute for external tracking',
+  table: {
+    defaultValue: { summary: 'None' },
+    type: { summary: 'string' },
+  },
+};
+
+export const disabledArgType = {
+  table: {
+    disable: true,
+  },
+};
+
+export const doSomething = () => {
+  alert('Did something.');
+};
+
+// Accept a KeyValue as the value of an object with a retrievable key as a Storybook argType.
+export const formatArgType = (collection: KeyValueNamed) => {
+  const constant = getKey(collection);
+  const keyValues: KeyValue = collection[constant];
+
+  return {
+    constant,
+    control: 'select',
+    options: {
+      ...keyValues,
+    },
+    table: {
+      defaultValue: { summary: 'None' },
+      type: { summary: constant },
+    },
+  };
+};
+
+export const formatArgTypeCheck = (collection: KeyValueNamed) => {
+  const constant = getKey(collection);
+  const keyValues: KeyValue = collection[constant];
+
+  return {
+    constant,
+    control: 'check',
+    options: {
+      ...keyValues,
+    },
+    table: {
+      defaultValue: { summary: 'None' },
+      type: { summary: constant },
+    },
+  };
+};
+
+export const formatValueAsConstant = (keyValue: KeyValue, argTypes: ArgTypes) => {
+  const [key, value] = Object.entries(keyValue)[0];
+  let constant;
+
+  const arg: ArgTypes = argTypes[key];
+
+  Object.entries(arg.options).forEach(([optionKey, optionValue]) => {
+    if (value === optionValue) {
+      constant = `${argTypes[key].constant}.${optionKey}`;
+    }
+  });
+
+  return constant;
+};
+
+export const formatSnippet = (code: string, context: StoryContext) => {
+  const tag = context.component?.__name;
+  const { args, argTypes } = context;
+
+  let classNames: string[] = [];
+
+  let attributes = Object.entries(args).map((arg: any) => {
+    const key = arg[0];
+    let value = arg[1];
+    const argType: ArgTypes = argTypes[key];
+    const conditionKey = argType.if?.arg;
+    const conditionValue = argType.if?.eq;
+
+    // TODO: TypeScript doesn't seem to believe the implict shapes of Storybook's native types?
+    const controlType = argType?.control?.type as any;
+
+    // If arg is conditional, hide when conditional is not met.
+    const isClick = key === 'click';
+    const isConditionMet = argType.if ? args[conditionKey] === conditionValue : true;
+    const isConstant = Object.keys(argTypes).includes(key) && !!argType.constant && controlType === 'select';
+    const isConstants = Object.keys(argTypes).includes(key) && !!argType.constant && controlType === 'check';
+    const isCustom = argType.isCustom;
+    const isDynamic = argType.isDynamic || isConstant || isConstants || typeof value === 'boolean';
+    const isEmpty = !isDynamic && value === '';
+    const isExcluded = value === undefined || (Array.isArray(value) && !value.length);
+    const isEmit = argType.isEmit;
+    const isSlot = key === 'default';
+
+    if (argType.isCss) {
+      classNames.push(value);
+    }
+
+    if (isConstant && value !== 'None') {
+      const arg: ArgTypes = argType;
+
+      Object.entries(arg.options).forEach(([optionKey, optionValue]) => {
+        if (value === optionValue) {
+          value = `${argType.constant}.${optionKey}`;
+        }
+      });
+    }
+
+    if (isConstants && value.length) {
+      const constantSlots: string[] = [];
+
+      Object.entries(argType.options).forEach(([optionKey, optionValue]) => {
+        value.forEach((valueSlot: any) => {
+          if (valueSlot === optionValue) {
+            constantSlots.push(`${argTypes[key].constant}.${optionKey}`);
+          }
+        });
+      });
+
+      value = `[${constantSlots.join(', ')}]`;
+    }
+
+    if (isCustom) {
+      return `:${formatKebabCase(key)}="${key}"`;
+    }
+
+    if (
+      isClick &&
+      value &&
+      (!args.element || args.element === ELEMENT.BUTTON || args.element === ELEMENT_TEXT_AS_ICON.BUTTON)
+    ) {
+      return `@click="${value}"`;
+    }
+
+    if (isEmit) {
+      if (value) {
+        return `@change="${value}"`;
+      }
+    }
+
+    if (isConditionMet && !isClick && !isCustom && !isEmpty && !isExcluded && !isSlot) {
+      return `${isDynamic ? ':' : ''}${formatKebabCase(key)}="${value}"`;
+    }
+  });
+
+  classNames = classNames.filter((className) => !!className);
+
+  if (classNames.length > 0) attributes.push(`class="${classNames.join(' ')}"`);
+
+  attributes = attributes.filter((attribute) => !!attribute).sort();
+
+  if (attributes) attributes.unshift('');
+
+  return args.default
+    ? `<${tag}${attributes.join(' ')}>${lineBreak}${tab}${args.default}${lineBreak}</${tag}>`
+    : `<${tag}${attributes.join(' ')} />`;
+};
+
+export const formatSnippetMinimal = (code: string) => {
+  return code.replace(/<[/]*template>/g, '');
+};
+
+export const getConstantByValue = (value: string) => {
+  const compareRecursively = (basis: string, shape: string | object, depth: number = 0): string | void => {
+    let output;
+
+    Object.entries(shape).forEach((entry: string[]) => {
+      const key = entry[0];
+      const value = entry[1];
+      const type = typeof value;
+
+      if (type === 'string' && basis === value) {
+        output = key;
+        return;
+      } else if (type === 'object') {
+        const match = compareRecursively(basis, value, depth + 1);
+
+        if (match) {
+          output = `${key}.${match}`;
+          return;
+        }
+      }
+    });
+
+    return output;
+  };
+
+  const constant = compareRecursively(value, CSS);
+
+  return constant ? `CSS.${constant}` : undefined;
+};
+
+export const getConstantsByValues = (classNames: string[]) =>
+  classNames.map((className) => getConstantByValue(className));
+
+export const getKey = (input: any) => Object.keys(input)[0];
+
+// Invert key/value pairs bc Storybook control option format is unintuitive.
+export const getLabelsFromOptions = (options: any) => {
+  const labels: { [key: string]: string } = {};
+
+  Object.entries(options).forEach(([key, value]) => {
+    labels[`${value}`] = key;
+  });
+
+  return labels;
+};
+
+export const parameters = {
+  docs: {
+    source: {
+      format: 'vue',
+      language: 'html',
+      transform: formatSnippet,
+    },
+  },
+};
+
+// Prepend a key/value pair to a constant.
+export const prependKeyValue = (collection: KeyValue, keyValue: KeyValue) => ({
+  ...keyValue,
+  ...collection,
+});
+
+export const prependNoneAsUndefined = (collection: KeyValue) => prependKeyValue(collection, NoneAsUndefined);
+
+export const prependNoneAsEmpty = (collection: KeyValue) => prependKeyValue(collection, NoneAsEmpty);