tide-design-system 2.5.13 → 2.5.14

package/src/stories/TideToaster.stories.ts

@@ -1,117 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { h } from 'vue';
-
-import TideButton from '@/components/TideButton.vue';
-import TideToaster from '@/components/TideToaster.vue';
-import { useTideToaster } from '@/composables/useTideToaster';
-import { doSomething, lineBreak, tab } from '@/utilities/storybook';
-
-import type { StoryContext } from '@storybook/vue3';
-
-type Args = {
-  actionLabel: string;
-  description: string;
-  heading: string;
-  isActionable: boolean;
-};
-
-const formatSnippet = (code: string, context: StoryContext) => {
-  const { args } = context;
-
-  const toastConfig = [
-    `heading: '${args.heading}'`,
-    args.description ? `description: '${args.description}'` : null,
-    args.isActionable ? `action: { label: '${args.actionLabel}', callback: () => {} }` : null,
-  ]
-    .filter(Boolean)
-    .join(`,${lineBreak}${tab}${tab}`);
-
-  return (
-    `<TideToaster />${lineBreak}${lineBreak}` +
-    `<script setup>${lineBreak}` +
-    `${tab}const { addToast } = useTideToaster();${lineBreak}${lineBreak}` +
-    `${tab}addToast({${lineBreak}` +
-    `${tab}${tab}${toastConfig}${lineBreak}` +
-    `${tab}});${lineBreak}` +
-    `</script>`
-  );
-};
-
-const parameters = {
-  docs: {
-    source: {
-      format: 'vue',
-      language: 'html',
-      transform: formatSnippet,
-    },
-  },
-};
-
-const render = (args: Args) => {
-  return {
-    components: { TideButton, TideToaster },
-    setup() {
-      const { addToast } = useTideToaster();
-
-      const triggerToast = () => {
-        action('Toast triggered')({});
-
-        addToast({
-          action: args.isActionable
-            ? {
-                callback: () => {
-                  action('CTA clicked')({});
-                  doSomething();
-                },
-                label: args.actionLabel,
-              }
-            : undefined,
-          description: args.description,
-          heading: args.heading,
-        });
-      };
-
-      return () =>
-        h('div', { style: 'min-height: 200px;' }, [
-          h(TideButton, {
-            label: 'Trigger Toast',
-            onClick: triggerToast,
-          }),
-          h(TideToaster),
-        ]);
-    },
-  };
-};
-
-export default {
-  argTypes: {
-    actionLabel: {
-      control: 'text',
-      table: { defaultValue: { summary: 'None' } },
-    },
-    description: {
-      control: 'text',
-      table: { defaultValue: { summary: 'None' } },
-    },
-    heading: {
-      control: 'text',
-      table: { defaultValue: { summary: 'None' } },
-    },
-    isActionable: {
-      control: 'boolean',
-    },
-  },
-  args: {
-    actionLabel: 'Undo',
-    description: 'This is a toast notification.',
-    heading: 'Toast Demo',
-    isActionable: false,
-  },
-  component: TideToaster,
-  parameters,
-  render,
-  tags: ['autodocs'],
-  title: 'Components/TideToaster',
-};
-
-export const Demo = {};

package/src/stories/Welcome.mdx

@@ -1,17 +0,0 @@
-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/types/Alert.ts

@@ -1,8 +0,0 @@
-export const ALERT = {
-  ERROR: 'error',
-  INFO: 'info',
-  SUCCESS: 'success',
-  WARNING: 'warning',
-} as const;
-
-export type Alert = (typeof ALERT)[keyof typeof ALERT];

package/src/types/Badge.ts

@@ -1,76 +0,0 @@
-import { CSS } from '@/types/Styles';
-
-export const BADGE_COLOR = {
-  BLACK: 'black',
-  BLUE: 'blue',
-  GREEN: 'green',
-  LIME: 'lime',
-  ORANGE: 'orange',
-  PURPLE: 'purple',
-  RED: 'red',
-  SALMON: 'salmon',
-  TEAL: 'teal',
-  YELLOW: 'yellow',
-} as const;
-
-export const BADGE_COLOR_DETAILS: Record<
-  BadgeColor,
-  {
-    borderColor: string;
-    iconColor: string;
-  }
-> = {
-  [BADGE_COLOR.BLACK]: {
-    borderColor: CSS.BORDER.COLOR.HIGH,
-    iconColor: CSS.FONT.COLOR.SURFACE.DEFAULT,
-  },
-  [BADGE_COLOR.BLUE]: {
-    borderColor: CSS.BORDER.COLOR.GLOBAL.BLUE,
-    iconColor: CSS.FONT.COLOR.GLOBAL.PRIMARY.BLUE,
-  },
-  [BADGE_COLOR.GREEN]: {
-    borderColor: CSS.BORDER.COLOR.GLOBAL.GREEN,
-    iconColor: CSS.FONT.COLOR.GLOBAL.PRIMARY.GREEN,
-  },
-  [BADGE_COLOR.LIME]: {
-    borderColor: CSS.BORDER.COLOR.GLOBAL.LIME,
-    iconColor: CSS.FONT.COLOR.GLOBAL.PRIMARY.LIME,
-  },
-  [BADGE_COLOR.ORANGE]: {
-    borderColor: CSS.BORDER.COLOR.GLOBAL.ORANGE,
-    iconColor: CSS.FONT.COLOR.GLOBAL.PRIMARY.ORANGE,
-  },
-  [BADGE_COLOR.PURPLE]: {
-    borderColor: CSS.BORDER.COLOR.GLOBAL.PURPLE,
-    iconColor: CSS.FONT.COLOR.GLOBAL.PRIMARY.PURPLE,
-  },
-  [BADGE_COLOR.RED]: {
-    borderColor: CSS.BORDER.COLOR.GLOBAL.RED,
-    iconColor: CSS.FONT.COLOR.GLOBAL.PRIMARY.RED,
-  },
-  [BADGE_COLOR.SALMON]: {
-    borderColor: CSS.BORDER.COLOR.GLOBAL.SALMON,
-    iconColor: CSS.FONT.COLOR.GLOBAL.PRIMARY.SALMON,
-  },
-  [BADGE_COLOR.TEAL]: {
-    borderColor: CSS.BORDER.COLOR.GLOBAL.TEAL,
-    iconColor: CSS.FONT.COLOR.GLOBAL.PRIMARY.TEAL,
-  },
-  [BADGE_COLOR.YELLOW]: {
-    borderColor: CSS.BORDER.COLOR.GLOBAL.YELLOW,
-    iconColor: CSS.FONT.COLOR.GLOBAL.PRIMARY.YELLOW,
-  },
-};
-
-export const BADGE_TRUSTED = {
-  YEARS_10: '10',
-  YEARS_15: '15',
-  YEARS_20: '20',
-  YEARS_25: '25',
-  YEARS_30: '30',
-  YEARS_35: '35',
-  YEARS_5: '5',
-} as const;
-
-export type BadgeColor = (typeof BADGE_COLOR)[keyof typeof BADGE_COLOR];
-export type BadgeTrustedYears = (typeof BADGE_TRUSTED)[keyof typeof BADGE_TRUSTED];

package/src/types/BreadCrumb.ts

@@ -1,5 +0,0 @@
-export type BreadCrumb = {
-  dataTrack?: string;
-  label: string;
-  url?: string;
-};

package/src/types/Breakpoint.ts

@@ -1,18 +0,0 @@
-/* eslint-disable vue/sort-keys */
-
-export const BREAKPOINT = {
-  SM: 'sm',
-  MD: 'md',
-  LG: 'lg',
-  XL: 'xl',
-} as const;
-
-export const MEDIA = {
-  SM: 768,
-  MD: 992,
-  LG: 1232,
-  XL: 1920,
-};
-
-export type Breakpoint = (typeof BREAKPOINT)[keyof typeof BREAKPOINT];
-export type Media = (typeof MEDIA)[keyof typeof MEDIA];

package/src/types/Card.ts

@@ -1,7 +0,0 @@
-export const TYPE_CARD = {
-  ACTIONABLE: 'action',
-  INFORMATIONAL: 'informational',
-  SELECTABLE: 'select',
-} as const;
-
-export type CardType = (typeof TYPE_CARD)[keyof typeof TYPE_CARD];

package/src/types/Element.ts

@@ -1,13 +0,0 @@
-export const ELEMENT = {
-  BUTTON: 'button',
-  LINK: 'a',
-} as const;
-
-export const ELEMENT_BROAD = {
-  BUTTON: 'button',
-  DIV: 'div',
-  LINK: 'a',
-} as const;
-
-export type Element = (typeof ELEMENT)[keyof typeof ELEMENT];
-export type ElementBroad = (typeof ELEMENT_BROAD)[keyof typeof ELEMENT_BROAD];

package/src/types/FieldDeprecated.ts

@@ -1,92 +0,0 @@
-import type { FormValueTransformer } from '@/types/Form';
-import type { SelectOption, SelectOptionGroup } from '@/types/Select';
-import type { TextInputType } from '@/types/TextInput';
-import type { ValidationError, Validator } from '@/types/ValidationDeprecated';
-
-/**
- * @deprecated
- */
-interface BooleanValue {
-  value?: boolean;
-}
-
-/**
- * @deprecated
- */
-interface CheckboxField extends GenericInput, BooleanValue {
-  indeterminate?: boolean;
-}
-
-/**
- * @deprecated
- */
-interface GenericField extends GenericInput {
-  transformValue?: FormValueTransformer;
-  validators?: Validator[];
-}
-
-/**
- * @deprecated
- */
-interface GenericInput {
-  disabled?: boolean;
-  error?: ValidationError;
-  label?: string;
-  name: string;
-  required?: boolean;
-}
-
-/**
- * @deprecated
- */
-interface SelectField extends GenericInput, StringValue {
-  optgroups?: (SelectOption | SelectOptionGroup)[];
-  options?: SelectOption[];
-}
-
-/**
- * @deprecated
- */
-interface StringValue {
-  value?: string;
-}
-
-/**
- * @deprecated
- */
-interface TextareaField extends GenericField, StringValue {
-  maxlength?: number;
-  minlength?: number;
-  placeholder?: string;
-  value?: string;
-}
-
-/**
- * @deprecated
- */
-interface TextField extends GenericField, StringValue {
-  maxlength?: number;
-  minlength?: number;
-  placeholder?: string;
-  type?: TextInputType;
-  value?: string;
-}
-
-/**
- * @deprecated
- */
-export type BooleanField = CheckboxField;
-
-/**
- * @deprecated
- */
-export type Field = SelectField | TextField | TextareaField | CheckboxField;
-
-/**
- * @deprecated
- */
-export type StringField = SelectField | TextField | TextareaField;
-
-export type { BooleanValue, StringValue };
-
-export type { CheckboxField, GenericField, GenericInput, SelectField, TextareaField, TextField };

package/src/types/Form.ts

@@ -1 +0,0 @@
-export type FormValueTransformer = (value: string) => string;

package/src/types/FormDeprecated.ts

@@ -1,91 +0,0 @@
-import type { SelectOption, SelectOptionGroup } from '@/types/Select';
-import type { TextInputType } from '@/types/TextInput';
-import type { ValidationError, Validator } from '@/types/ValidationDeprecated';
-
-/**
- * @deprecated
- */
-interface GenericInput {
-  error?: ValidationError;
-  transformValue?: FormValueTransformer;
-  name: string;
-  validators?: Validator[];
-  required?: boolean;
-  label?: string;
-  disabled?: boolean;
-}
-
-/**
- * @deprecated
- */
-interface StringValue {
-  value?: string;
-}
-
-/**
- * @deprecated
- */
-interface BooleanValue {
-  value?: boolean;
-}
-
-/**
- * @deprecated
- */
-export type SelectInput = GenericInput &
-  StringValue & {
-    options?: SelectOption[] | readonly SelectOption[];
-    placeholder?: string;
-    optgroups?: (SelectOption | SelectOptionGroup)[];
-  };
-
-/**
- * @deprecated
- */
-export type TextInput = GenericInput &
-  StringValue & {
-    autocomplete?: boolean;
-    maxlength?: number;
-    minlength?: number;
-    type?: TextInputType;
-    placeholder?: string;
-    value?: string;
-  };
-
-/**
- * @deprecated
- */
-export type TextareaInput = GenericInput &
-  StringValue & {
-    maxlength?: number;
-    minlength?: number;
-    placeholder?: string;
-    value?: string;
-  };
-
-/**
- * @deprecated
- */
-export type CheckboxInput = GenericInput &
-  BooleanValue & {
-    checked?: boolean;
-    indeterminate?: boolean;
-  };
-
-/**
- * @deprecated
- */
-export type StringInput = SelectInput | TextInput | TextareaInput;
-/**
- * @deprecated
- */
-export type BooleanInput = CheckboxInput;
-/**
- * @deprecated
- */
-export type Input = SelectInput | TextInput | TextareaInput | CheckboxInput;
-
-/**
- * @deprecated
- */
-export type FormValueTransformer = (value: string) => string;

package/src/types/Formatted.ts

@@ -1,23 +0,0 @@
-import { formatNumber, formatPhone, formatPrice } from '@/utilities/format';
-
-export type Formatted = {
-  [key: string]: string | string[] | number;
-};
-
-export const FORMAT = {
-  NUMBER: formatNumber,
-  PHONE: formatPhone,
-  PRICE: formatPrice,
-} as const;
-
-export const FORMAT_REGEX = {
-  alpha: /^[a-zA-Z]+$/g,
-  alphaNumberOrEmpty: /^$|^[a-z0-9]+$/i,
-  alphaSpace: /^[a-zA-Z ]+$/g,
-  email:
-    /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@(?!(?:[a-zA-Z0-9-]+\.)*(?<tld>[a-zA-Z]{2,})\.\k<tld>$)((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}))$/,
-  numberFormatted: /^$|(?=.)^\$?(([1-9][0-9]{0,2}(,[0-9]{3})*)|0)?(\.[0-9]{1,2})?$/,
-  phone: /^(?:\d{3}-\d{3}-\d{4}|\d{1}-\d{3}-\d{3}-\d{4})?$/,
-  price: /(?=.)^\$?(([1-9][0-9]{0,2}(,[0-9]{3})*)|0)?(\.[0-9]{1,2})?$/,
-  zip: /^\d{5}$/,
-};

package/src/types/Icon.ts

@@ -1,202 +0,0 @@
-import type { RealmKey } from '@/types/Realm';
-
-export const ICON = {
-  ACCOUNT_BALANCE: 'account-balance',
-  ACUTE: 'acute',
-  ADD: 'add',
-  AI_DESCRIPTION: 'ai-description',
-  ALIGN_SPACE_EVEN: 'align-space-even',
-  APPLE_PAY: 'apple-pay',
-  ARROW_BACK: 'arrow-back',
-  ARROW_CYCLE: 'arrow-cycle',
-  ARROW_FORWARD: 'arrow-forward',
-  ARROW_RIGHT: 'arrow-right',
-  ARROW_UP: 'arrow-up',
-  ASSIGNMENT: 'assignment',
-  ATTACH_MONEY: 'attach-money',
-  AUTO_RENEW: 'auto-renew',
-  AWARD_STAR: 'award-star',
-  BED: 'bed',
-  BOLT: 'bolt',
-  BOOKMARK: 'bookmark',
-  BUNKHOUSE: 'bunkhouse',
-  CALCULATE: 'calculate',
-  CALENDAR_MONTH: 'calendar-month',
-  CALL: 'call',
-  CALL_QUALITY: 'call-quality',
-  CAR_RENTAL: 'car-rental',
-  CHECK: 'check',
-  CHEVRON_LEFT: 'chevron-left',
-  CHEVRON_RIGHT: 'chevron-right',
-  CLEAR: 'clear',
-  CLOSE: 'close',
-  CONTRACT: 'contract',
-  CRASH: 'crash',
-  DASHBOARD_CUSTOMIZE: 'dashboard-customize',
-  DELETE: 'delete',
-  DIAMOND: 'diamond',
-  DIRECTIONS_BOAT: 'directions-boat',
-  DOMAIN: 'domain',
-  DRAFT: 'draft',
-  EDIT: 'edit',
-  ENGINE: 'engine',
-  ENGINEERING: 'engineering',
-  ERROR: 'error',
-  EXPAND_CONTENT: 'expand-content',
-  EXPAND_LESS: 'expand-less',
-  EXPAND_MORE: 'expand-more',
-  FACEBOOK: 'facebook',
-  FAVORITE: 'favorite',
-  FAVORITE_FILLED: 'favorite-filled',
-  FLAG: 'flag',
-  FORMAT_BOLD: 'format-bold',
-  FORMAT_ITALIC: 'format-italic',
-  FORMAT_LIST_BULLETED: 'format-list-bulleted',
-  FORUM: 'forum',
-  GAS: 'gas',
-  GAVEL: 'gavel',
-  GEARS: 'gears',
-  GLOBE_LOCATION_PIN: 'globe-location-pin',
-  GOOGLE: 'google',
-  GOOGLE_PAY: 'google-pay',
-  GRID: 'grid',
-  HANDSHAKE: 'handshake',
-  HANDYMAN: 'handyman',
-  HEIGHT: 'height',
-  HELP: 'help',
-  INFO: 'info',
-  INFORMATION: 'information',
-  INSERT_TEXT: 'insert-text',
-  INSTAGRAM: 'instagram',
-  IOS_SHARE: 'ios-share',
-  LAYOUT: 'layout',
-  LEVELLING_JACK: 'levelling-jack',
-  LINKED_IN: 'linked in',
-  LOCAL_SHIPPING: 'local-shipping',
-  LOCK: 'lock',
-  MAIL: 'mail',
-  MOVE: 'move',
-  MENU: 'menu',
-  MONEY_BAG: 'money-bag',
-  MORE_HORIZ: 'more-horiz',
-  NOTIFICATIONS: 'notifications',
-  ODOMETER: 'odometer',
-  OPEN_IN_NEW: 'open-in-new',
-  PALETTE: 'palette',
-  PAYPAL: 'paypal',
-  PERSON: 'person',
-  PERSON_SEARCH: 'person-search',
-  PHOTO_CAMERA: 'photo-camera',
-  PINTEREST: 'pinterest',
-  PLAY_ARROW: 'play-arrow',
-  POLICY: 'policy',
-  POWER: 'power',
-  POWER_OFF: 'power-off',
-  PRIORITY_HIGH: 'priority-high',
-  REMOVE: 'remove',
-  REQUEST_QUOTE: 'request-quote',
-  RESET_WRENCH: 'reset-wrench',
-  ROAD: 'road',
-  ROUNDED_CORNER: 'rounded-corner',
-  RULER: 'ruler',
-  SAILING: 'sailing',
-  SCHOOL: 'school',
-  SEARCH: 'search',
-  SEATING: 'seating',
-  SELL: 'sell',
-  SENSORS: 'sensors',
-  SETTINGS: 'settings',
-  SHARE: 'share',
-  SHIELD_CHECK: 'shield-check',
-  SHOPPING_CART: 'shopping-cart',
-  SLEEPS: 'sleeps',
-  SMS: 'sms',
-  SNOWFLAKE: 'snowflake',
-  STAR: 'star',
-  STAR_FILLED: 'star-filled',
-  STAR_HALF: 'star-half',
-  SUMMARIZE: 'summarize',
-  SWAP_HORIZ: 'swap-horiz',
-  SWAP_VERT: 'swap-vert',
-  THREE_D_ROTATION: 'three-d-rotation',
-  THUMB_UP: 'thumb-up',
-  TRENDING_DOWN: 'trending-down',
-  TROPHY: 'trophy',
-  TUNE: 'tune',
-  TWITTER: 'twitter',
-  UMBRELLA: 'umbrella',
-  VERIFIED: 'verified',
-  VIDEOCAM: 'videocam',
-  VIEW_IN_AR: 'view-in-ar',
-  VISIBILITY: 'visibility',
-  VOLUME_OFF: 'volume-off',
-  VOLUME_ON: 'volume-on',
-  WAREHOUSE: 'warehouse',
-  WARNING: 'warning',
-  WATER: 'water',
-  WEIGHT: 'weight',
-  WIDTH: 'width',
-  WORKSPACE_PREMIUM: 'workspace-premium',
-  WRENCH: 'wrench',
-  YOUTUBE: 'youtube',
-} as const;
-
-export const ICON_REALM = {
-  AERO: {
-    FLIGHT: 'aero-flight',
-    HELICOPTER: 'aero-helicopter',
-    MODE_FAN: 'aero-mode-fan',
-    PLANE_CONTRAILS: 'aero-plane-contrails',
-  },
-  ATV: {
-    ATV: 'atv-atv',
-    DUNE_BUGGY: 'atv-dune-buggy',
-    GOLF_CART: 'atv-golf-cart',
-    GO_KART: 'atv-go-kart',
-    SAND_RAIL: 'atv-sand-rail',
-    SIDE_BY_SIDE: 'atv-side-by-side',
-    TRAILER: 'atv-trailer',
-  },
-  BOATMART: {
-    PWC: 'boatmart-pwc',
-    TRAILER: 'boatmart-trailer',
-  },
-  CYCLE: {
-    MOTORCYCLE: 'cycle-motorcycle',
-    TRAILER: 'cycle-trailer',
-  },
-  PWC: {
-    PWC: 'pwc-pwc',
-    SNOWMOBILE: 'pwc-snowmobile',
-    TRAILER: 'pwc-trailer',
-  },
-  RV: {
-    CLASS_A: 'rv-class-a',
-    CLASS_B: 'rv-class-b',
-    CLASS_C: 'rv-class-c',
-    DESTINATION_TRAILER: 'rv-destination-trailer',
-    FIFTH_WHEEL: 'rv-fifth-wheel',
-    FISH_HOUSE: 'rv-fish-house',
-    PARK_MODEL: 'rv-park-model',
-    POP_UP_CAMPER: 'rv-pop-up-camper',
-    TEARDROP_TRAILER: 'rv-teardrop-trailer',
-    TRAVEL_TRAILER: 'rv-travel-trailer',
-    TRUCK_CAMPER: 'rv-truck-camper',
-  },
-  SNOW: {
-    MOTORCYCLE: 'snow-motorcycle',
-    PWC: 'snow-pwc',
-    SIDE_BY_SIDE: 'snow-side-by-side',
-    SNOWMOBILE: 'snow-snowmobile',
-    TRAILER: 'snow-trailer',
-  },
-} as const;
-
-type RealmKeysWithIcons = Extract<RealmKey, keyof typeof ICON_REALM>;
-type RealmIcon = {
-  [RealmKey in RealmKeysWithIcons]: (typeof ICON_REALM)[RealmKey][keyof (typeof ICON_REALM)[RealmKey]];
-}[RealmKeysWithIcons];
-
-type GlobalIcon = (typeof ICON)[keyof typeof ICON];
-
-export type Icon = GlobalIcon | RealmIcon;

package/src/types/Image.ts

@@ -1,7 +0,0 @@
-export const OBJECT_FIT = {
-  CONTAIN: 'contain',
-  COVER: 'cover',
-  SCALE_DOWN: 'scale-down',
-} as const;
-
-export type ObjectFit = (typeof OBJECT_FIT)[keyof typeof OBJECT_FIT];

package/src/types/Link.ts

@@ -1,5 +0,0 @@
-export type Link = {
-  label: string;
-  url: string;
-  isNewTab?: boolean;
-};