@saasmakers/ui 0.1.79 → 0.1.80

package/app/components/bases/BaseAlert.stories.ts

@@ -0,0 +1,42 @@
+import BaseAlert from './BaseAlert.vue'
+
+export default {
+  component: BaseAlert,
+  title: 'Bases/BaseAlert',
+
+  argTypes: {
+    closingId: { control: 'text' },
+    isClosable: { control: 'boolean' },
+    size: {
+      control: 'select',
+      options: [
+        '2xs',
+        'xs',
+        'sm',
+        'base',
+        'lg',
+        'xl',
+        '2xl',
+        '3xl',
+        '4xl',
+      ] satisfies BaseSize[],
+    },
+    status: {
+      control: 'select',
+      options: [
+        'error',
+        'info',
+        'success',
+        'warning',
+      ] satisfies BaseStatus[],
+    },
+    text: { control: 'text' },
+  },
+} satisfies Meta<typeof BaseAlert>
+
+export const Default: StoryObj<typeof BaseAlert> = {
+  args: {
+    status: 'info',
+    text: 'This is an alert message',
+  } satisfies Partial<BaseAlert>,
+}

package/app/components/bases/BaseAvatar.stories.ts

@@ -0,0 +1,18 @@
+import BaseAvatar from './BaseAvatar.vue'
+
+export default {
+  component: BaseAvatar,
+  title: 'Bases/BaseAvatar',
+
+  argTypes: {
+    bordered: { control: 'boolean' },
+    borderWidth: { control: 'number' },
+    circular: { control: 'boolean' },
+    editable: { control: 'boolean' },
+    maxSizeMb: { control: 'number' },
+    shadow: { control: 'boolean' },
+    src: { control: 'text' },
+  },
+} satisfies Meta<typeof BaseAvatar>
+
+export const Default: StoryObj<typeof BaseAvatar> = { args: { src: 'https://via.placeholder.com/100' } satisfies Partial<BaseAvatar> }

package/app/components/bases/BaseBordered.stories.ts

@@ -0,0 +1,22 @@
+import BaseBordered from './BaseBordered.vue'
+
+export default {
+  component: BaseBordered,
+  title: 'Bases/BaseBordered',
+
+  argTypes: {
+    background: {
+      control: 'select',
+      options: ['gray', 'white'] satisfies BaseBackground[],
+    },
+    borderColor: {
+      control: 'select',
+      options: ['black', 'gray'] satisfies BaseBorderedColor[],
+    },
+    hasBorder: { control: 'boolean' },
+    shadow: { control: 'boolean' },
+    title: { control: 'text' },
+  },
+} satisfies Meta<typeof BaseBordered>
+
+export const Default: StoryObj<typeof BaseBordered> = { args: { title: 'Bordered Container' } satisfies Partial<BaseBordered> }

package/app/components/bases/BaseButton.stories.ts

@@ -0,0 +1,81 @@
+import BaseButton from './BaseButton.vue'
+
+export default {
+  component: BaseButton,
+  title: 'Bases/BaseButton',
+
+  argTypes: {
+    background: { control: 'boolean' },
+    circular: { control: 'boolean' },
+    color: {
+      control: 'select',
+      options: [
+        'black',
+        'gray',
+        'green',
+        'indigo',
+        'orange',
+        'red',
+        'white',
+      ] satisfies BaseColor[],
+    },
+    confirmation: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    fullWidth: { control: 'boolean' },
+    icon: { control: 'text' },
+    iconColor: {
+      control: 'select',
+      options: [
+        'black',
+        'gray',
+        'green',
+        'indigo',
+        'orange',
+        'red',
+        'white',
+      ] satisfies BaseColor[],
+    },
+    light: { control: 'boolean' },
+    loading: { control: 'boolean' },
+    reverse: { control: 'boolean' },
+    rounded: {
+      control: 'select',
+      options: [
+        'none',
+        'sm',
+        'base',
+        'md',
+        'lg',
+        'xl',
+        'full',
+      ] satisfies BaseButtonRounded[],
+    },
+    size: {
+      control: 'select',
+      options: [
+        '2xs',
+        'xs',
+        'sm',
+        'base',
+        'lg',
+        'xl',
+      ] satisfies BaseButtonSize[],
+    },
+    text: { control: 'text' },
+    type: {
+      control: 'select',
+      options: [
+        'button',
+        'reset',
+        'submit',
+      ],
+    },
+  },
+} satisfies Meta<typeof BaseButton>
+
+export const Default: StoryObj<typeof BaseButton> = {
+  args: {
+    color: 'black',
+    text: 'Update profile',
+  } satisfies Partial<BaseButton>,
+}

package/app/components/bases/BaseCharacter.stories.ts

@@ -0,0 +1,31 @@
+import BaseCharacter from './BaseCharacter.vue'
+
+export default {
+  component: BaseCharacter,
+  title: 'Bases/BaseCharacter',
+
+  argTypes: {
+    character: {
+      control: 'select',
+      options: [
+        'anthony',
+        'julien',
+        'mathieu',
+        'nada',
+        'power',
+        'yoda',
+      ] satisfies BaseCharacterCharacter[],
+    },
+    size: {
+      control: 'select',
+      options: [
+        'xs',
+        'sm',
+        'base',
+        'lg',
+      ] satisfies BaseCharacterSize[],
+    },
+  },
+} satisfies Meta<typeof BaseCharacter>
+
+export const Default: StoryObj<typeof BaseCharacter> = { args: { character: 'power' } satisfies Partial<BaseCharacter> }

package/app/components/bases/BaseChart.stories.ts

@@ -0,0 +1,20 @@
+import BaseChart from './BaseChart.vue'
+
+export default {
+  component: BaseChart,
+  title: 'Bases/BaseChart',
+
+  argTypes: {
+    fullWidth: { control: 'boolean' },
+    type: {
+      control: 'select',
+      options: [
+        'bar',
+        'line',
+        'pie',
+      ] satisfies BaseChartType[],
+    },
+  },
+} satisfies Meta<typeof BaseChart>
+
+export const Default: StoryObj<typeof BaseChart> = { args: { type: 'bar' } satisfies Partial<BaseChart> }

package/app/components/bases/BaseDivider.stories.ts

@@ -0,0 +1,25 @@
+import BaseDivider from './BaseDivider.vue'
+
+export default {
+  component: BaseDivider,
+  title: 'Bases/BaseDivider',
+
+  argTypes: {
+    borderStyle: {
+      control: 'select',
+      options: [
+        'dashed',
+        'dotted',
+        'solid',
+      ] satisfies BaseDividerBorderStyle[],
+    },
+    margin: { control: 'number' },
+    size: {
+      control: 'select',
+      options: ['sm', 'base'] satisfies BaseDividerSize[],
+    },
+    title: { control: 'text' },
+  },
+} satisfies Meta<typeof BaseDivider>
+
+export const Default: StoryObj<typeof BaseDivider> = { args: { title: 'Divider Title' } satisfies Partial<BaseDivider> }

package/app/components/bases/BaseEmoji.stories.ts

@@ -0,0 +1,28 @@
+import BaseEmoji from './BaseEmoji.vue'
+
+export default {
+  component: BaseEmoji,
+  title: 'Bases/BaseEmoji',
+
+  argTypes: {
+    clickable: { control: 'boolean' },
+    emoji: { control: 'text' },
+    hasBox: { control: 'boolean' },
+    size: {
+      control: 'select',
+      options: [
+        '2xs',
+        'xs',
+        'sm',
+        'base',
+        'lg',
+        'xl',
+        '2xl',
+        '3xl',
+        '4xl',
+      ] satisfies BaseSize[],
+    },
+  },
+} satisfies Meta<typeof BaseEmoji>
+
+export const Default: StoryObj<typeof BaseEmoji> = { args: { emoji: '😀' } satisfies Partial<BaseEmoji> }

package/app/components/bases/BaseHeading.stories.ts

@@ -0,0 +1,49 @@
+import BaseHeading from './BaseHeading.vue'
+
+export default {
+  component: BaseHeading,
+  title: 'Bases/BaseHeading',
+
+  argTypes: {
+    alignment: {
+      control: 'select',
+      options: [
+        'center',
+        'left',
+        'right',
+      ] satisfies BaseAlignment[],
+    },
+    size: {
+      control: 'select',
+      options: [
+        'xs',
+        'sm',
+        'base',
+        'lg',
+        'xl',
+      ] satisfies BaseHeadingSize[],
+    },
+    tag: {
+      control: 'select',
+      options: [
+        'h1',
+        'h2',
+        'h3',
+        'h4',
+        'h5',
+        'h6',
+      ] satisfies BaseHeadingTag[],
+    },
+  },
+} satisfies Meta<typeof BaseHeading>
+
+export const Default: StoryObj<typeof BaseHeading> = {
+  args: { tag: 'h1' } satisfies Partial<BaseHeading>,
+  render: args => ({
+    components: { BaseHeading },
+    setup() {
+      return { args }
+    },
+    template: '<BaseHeading v-bind="args">Heading Text</BaseHeading>',
+  }),
+}

package/app/components/bases/BaseIcon.stories.ts

@@ -0,0 +1,56 @@
+import BaseIcon from './BaseIcon.vue'
+
+export default {
+  component: BaseIcon,
+  title: 'Bases/BaseIcon',
+
+  argTypes: {
+    bold: { control: 'boolean' },
+    clickable: { control: 'boolean' },
+    color: {
+      control: 'select',
+      options: [
+        'black',
+        'gray',
+        'green',
+        'indigo',
+        'orange',
+        'red',
+        'white',
+      ] satisfies BaseColor[],
+    },
+    confirmation: { control: 'boolean' },
+    icon: { control: 'text' },
+    loading: { control: 'boolean' },
+    reverse: { control: 'boolean' },
+    size: {
+      control: 'select',
+      options: [
+        '2xs',
+        'xs',
+        'sm',
+        'base',
+        'lg',
+        'xl',
+        '2xl',
+        '3xl',
+        '4xl',
+      ] satisfies BaseSize[],
+    },
+    status: {
+      control: 'select',
+      options: [
+        'error',
+        'info',
+        'success',
+        'warning',
+      ] satisfies BaseStatus[],
+    },
+    text: { control: 'text' },
+    truncate: { control: 'boolean' },
+    underline: { control: 'boolean' },
+    uppercase: { control: 'boolean' },
+  },
+} satisfies Meta<typeof BaseIcon>
+
+export const Default: StoryObj<typeof BaseIcon> = { args: { text: 'Icon Text' } satisfies Partial<BaseIcon> }

package/app/components/bases/BaseMessage.stories.ts

@@ -0,0 +1,20 @@
+import BaseMessage from './BaseMessage.vue'
+
+export default {
+  component: BaseMessage,
+  title: 'Bases/BaseMessage',
+
+  argTypes: {
+    bordered: { control: 'boolean' },
+    description: { control: 'text' },
+    legend: { control: 'text' },
+    title: { control: 'text' },
+  },
+} satisfies Meta<typeof BaseMessage>
+
+export const Default: StoryObj<typeof BaseMessage> = {
+  args: {
+    description: 'This is a message description',
+    title: 'Message Title',
+  } satisfies Partial<BaseMessage>,
+}

package/app/components/bases/BaseMetric.stories.ts

@@ -0,0 +1,39 @@
+import BaseMetric from './BaseMetric.vue'
+
+export default {
+  component: BaseMetric,
+  title: 'Bases/BaseMetric',
+
+  argTypes: {
+    alignment: {
+      control: 'select',
+      options: [
+        'center',
+        'left',
+        'right',
+      ] satisfies BaseMetricAlignment[],
+    },
+    performance: {
+      control: 'select',
+      options: [
+        'down',
+        'equal',
+        'up',
+      ] satisfies BaseMetricPerformance[],
+    },
+    performanceTooltip: { control: 'text' },
+    size: {
+      control: 'select',
+      options: ['sm', 'base'] satisfies BaseMetricSize[],
+    },
+    title: { control: 'text' },
+    value: { control: 'text' },
+  },
+} satisfies Meta<typeof BaseMetric>
+
+export const Default: StoryObj<typeof BaseMetric> = {
+  args: {
+    title: 'Metric Title',
+    value: '100',
+  } satisfies Partial<BaseMetric>,
+}

package/app/components/bases/BaseOverlay.stories.ts

@@ -0,0 +1,30 @@
+import BaseOverlay from './BaseOverlay.vue'
+
+export default {
+  component: BaseOverlay,
+  title: 'Bases/BaseOverlay',
+
+  argTypes: {
+    active: { control: 'boolean' },
+    clickable: { control: 'boolean' },
+    fixed: { control: 'boolean' },
+    hasClose: { control: 'boolean' },
+    opacity: {
+      control: 'select',
+      options: [
+        0,
+        25,
+        50,
+        75,
+        95,
+        100,
+      ] satisfies BaseOverlayOpacity[],
+    },
+    position: {
+      control: 'select',
+      options: ['absolute', 'fixed'] satisfies BaseOverlayPosition[],
+    },
+  },
+} satisfies Meta<typeof BaseOverlay>
+
+export const Default: StoryObj<typeof BaseOverlay> = { args: { active: true } satisfies Partial<BaseOverlay> }

package/app/components/bases/BaseParagraph.stories.ts

@@ -0,0 +1,36 @@
+import BaseParagraph from './BaseParagraph.vue'
+
+export default {
+  component: BaseParagraph,
+  title: 'Bases/BaseParagraph',
+
+  argTypes: {
+    alignment: {
+      control: 'select',
+      options: [
+        'center',
+        'left',
+        'right',
+      ] satisfies BaseParagraphAlignment[],
+    },
+    size: {
+      control: 'select',
+      options: [
+        'sm',
+        'base',
+        'lg',
+      ] satisfies BaseParagraphSize[],
+    },
+  },
+} satisfies Meta<typeof BaseParagraph>
+
+export const Default: StoryObj<typeof BaseParagraph> = {
+  args: {},
+  render: args => ({
+    components: { BaseParagraph },
+    setup() {
+      return { args }
+    },
+    template: '<BaseParagraph v-bind="args">This is a paragraph text.</BaseParagraph>',
+  }),
+}

package/app/components/bases/BasePower.stories.ts

@@ -0,0 +1,59 @@
+import BasePower from './BasePower.vue'
+
+export default {
+  component: BasePower,
+  title: 'Bases/BasePower',
+
+  argTypes: {
+    animated: { control: 'boolean' },
+    power: {
+      control: 'select',
+      options: [
+        '401',
+        '404',
+        '500',
+        'angry',
+        'bag',
+        'bank',
+        'book',
+        'browser',
+        'chair',
+        'christmas',
+        'city',
+        'city-bis',
+        'coffee',
+        'computer-book',
+        'computer-coffee',
+        'dead',
+        'easter',
+        'hourglass',
+        'invite',
+        'ko',
+        'love',
+        'magic',
+        'popcorn',
+        'radar',
+        'rocket',
+        'smiling',
+        'social-networks',
+        'starwars',
+        'teach',
+        'typewriter',
+        'website',
+        'welcome',
+        'writer',
+      ] satisfies BasePowerPower[],
+    },
+    size: {
+      control: 'select',
+      options: [
+        'xs',
+        'sm',
+        'base',
+        'lg',
+      ] satisfies BasePowerSize[],
+    },
+  },
+} satisfies Meta<typeof BasePower>
+
+export const Default: StoryObj<typeof BasePower> = { args: { power: 'rocket' } satisfies Partial<BasePower> }

package/app/components/bases/BaseQuote.stories.ts

@@ -0,0 +1,63 @@
+import BaseQuote from './BaseQuote.vue'
+
+export default {
+  component: BaseQuote,
+  title: 'Bases/BaseQuote',
+
+  argTypes: {
+    background: {
+      control: 'select',
+      options: [
+        'gray',
+        'gray-light',
+        'white',
+      ] satisfies BaseQuoteBackground[],
+    },
+    character: {
+      control: 'select',
+      options: [
+        'anthony',
+        'julien',
+        'mathieu',
+        'nada',
+        'power',
+        'yoda',
+      ] satisfies BaseCharacterCharacter[],
+    },
+    clickable: { control: 'boolean' },
+    closingId: { control: 'text' },
+    forceSlot: { control: 'boolean' },
+    hasClose: { control: 'boolean' },
+    hideCharacterOnMobile: { control: 'boolean' },
+    noMargin: { control: 'boolean' },
+    reverse: { control: 'boolean' },
+    size: {
+      control: 'select',
+      options: [
+        'xs',
+        'sm',
+        'base',
+      ] satisfies BaseQuoteSize[],
+    },
+    status: {
+      control: 'select',
+      options: [
+        'error',
+        'info',
+        'success',
+        'warning',
+      ] satisfies BaseStatus[],
+    },
+  },
+} satisfies Meta<typeof BaseQuote>
+
+export const Default: StoryObj<typeof BaseQuote> = {
+  args: {},
+  render: args => ({
+    components: { BaseQuote },
+    setup() {
+      return { args }
+    },
+    template: '<BaseQuote v-bind="args">This is a quote text.</BaseQuote>',
+  }),
+}

package/app/components/bases/BaseSpinner.stories.ts

@@ -0,0 +1,42 @@
+import BaseSpinner from './BaseSpinner.vue'
+
+export default {
+  component: BaseSpinner,
+  title: 'Bases/BaseSpinner',
+
+  argTypes: {
+    clickable: { control: 'boolean' },
+    color: {
+      control: 'select',
+      options: [
+        'black',
+        'gray',
+        'green',
+        'indigo',
+        'orange',
+        'red',
+        'white',
+      ] satisfies BaseColor[],
+    },
+    id: { control: 'text' },
+    reverse: { control: 'boolean' },
+    size: {
+      control: 'select',
+      options: [
+        '2xs',
+        'xs',
+        'sm',
+        'base',
+        'lg',
+        'xl',
+        '2xl',
+        '3xl',
+        '4xl',
+      ] satisfies BaseSize[],
+    },
+    text: { control: 'text' },
+    uppercase: { control: 'boolean' },
+  },
+} satisfies Meta<typeof BaseSpinner>
+
+export const Default: StoryObj<typeof BaseSpinner> = { args: { text: 'Loading...' } satisfies Partial<BaseSpinner> }

package/app/components/bases/BaseTag.stories.ts

@@ -0,0 +1,44 @@
+import BaseTag from './BaseTag.vue'
+
+export default {
+  component: BaseTag,
+  title: 'Bases/BaseTag',
+
+  argTypes: {
+    active: { control: 'boolean' },
+    avatar: { control: 'text' },
+    circle: { control: 'text' },
+    clickable: { control: 'boolean' },
+    color: {
+      control: 'select',
+      options: [
+        'black',
+        'gray',
+        'green',
+        'indigo',
+        'orange',
+        'red',
+        'white',
+      ] satisfies BaseColor[],
+    },
+    draggable: { control: 'boolean' },
+    editable: { control: 'boolean' },
+    icon: { control: 'text' },
+    iconSize: { control: 'number' },
+    id: { control: 'number' },
+    isCreation: { control: 'boolean' },
+    light: { control: 'boolean' },
+    order: { control: 'number' },
+    removable: { control: 'boolean' },
+    rounded: { control: 'boolean' },
+    size: {
+      control: 'select',
+      options: ['sm', 'base'] satisfies BaseTagSize[],
+    },
+    text: { control: 'text' },
+    truncate: { control: 'boolean' },
+    uppercase: { control: 'boolean' },
+  },
+} satisfies Meta<typeof BaseTag>
+
+export const Default: StoryObj<typeof BaseTag> = { args: { text: 'Tag' } satisfies Partial<BaseTag> }

package/app/components/bases/BaseTags.stories.ts

@@ -0,0 +1,42 @@
+import BaseTags from './BaseTags.vue'
+
+export default {
+  component: BaseTags,
+  title: 'Bases/BaseTags',
+
+  argTypes: {
+    active: { control: 'boolean' },
+    clickable: { control: 'boolean' },
+    draggable: { control: 'boolean' },
+    editable: { control: 'boolean' },
+    hasBack: { control: 'boolean' },
+    hasCreation: { control: 'boolean' },
+    maxTags: { control: 'number' },
+    modelValue: { control: 'object' },
+    removable: { control: 'boolean' },
+    selectable: { control: 'boolean' },
+    selectableUnique: { control: 'boolean' },
+    size: {
+      control: 'select',
+      options: ['sm', 'base'] satisfies BaseTagSize[],
+    },
+    tags: { control: 'object' },
+    wrap: { control: 'boolean' },
+  },
+} satisfies Meta<typeof BaseTags>
+
+export const Default: StoryObj<typeof BaseTags> = {
+  args: {
+    modelValue: [],
+    tags: [
+      {
+        id: 1,
+        text: 'Tag 1',
+      },
+      {
+        id: 2,
+        text: 'Tag 2',
+      },
+    ],
+  } satisfies Partial<BaseTags>,
+}

package/app/components/bases/BaseText.stories.ts

@@ -0,0 +1,48 @@
+import BaseText from './BaseText.vue'
+
+export default {
+  component: BaseText,
+  title: 'Bases/BaseText',
+
+  argTypes: {
+    alignment: {
+      control: 'select',
+      options: [
+        'center',
+        'left',
+        'right',
+      ] satisfies BaseAlignment[],
+    },
+    background: {
+      control: 'select',
+      options: ['gray', 'white'] satisfies BaseBackground[],
+    },
+    block: { control: 'boolean' },
+    bold: { control: 'boolean' },
+    hasMargin: { control: 'boolean' },
+    maxCharacters: { control: 'number' },
+    noWrap: { control: 'boolean' },
+    reverse: { control: 'boolean' },
+    size: {
+      control: 'select',
+      options: [
+        '2xs',
+        'xs',
+        'sm',
+        'base',
+        'lg',
+        'xl',
+        '2xl',
+        '3xl',
+        '4xl',
+      ] satisfies BaseSize[],
+    },
+    skeleton: { control: 'boolean' },
+    text: { control: 'text' },
+    truncate: { control: 'boolean' },
+    underline: { control: 'boolean' },
+    uppercase: { control: 'boolean' },
+  },
+} satisfies Meta<typeof BaseText>
+
+export const Default: StoryObj<typeof BaseText> = { args: { text: 'Text content' } satisfies Partial<BaseText> }

package/app/components/bases/BaseToast.stories.ts

@@ -0,0 +1,29 @@
+import BaseToast from './BaseToast.vue'
+
+export default {
+  component: BaseToast,
+  title: 'Bases/BaseToast',
+
+  argTypes: {
+    hasClose: { control: 'boolean' },
+    id: { control: 'text' },
+    status: {
+      control: 'select',
+      options: [
+        'error',
+        'info',
+        'success',
+        'warning',
+      ] satisfies BaseStatus[],
+    },
+    text: { control: 'text' },
+  },
+} satisfies Meta<typeof BaseToast>
+
+export const Default: StoryObj<typeof BaseToast> = {
+  args: {
+    id: 'toast-1',
+    status: 'info',
+    text: 'Toast message',
+  } satisfies Partial<BaseToast>,
+}

package/app/components/fields/FieldCheckbox.stories.ts

@@ -0,0 +1,36 @@
+import FieldCheckbox from './FieldCheckbox.vue'
+
+export default {
+  component: FieldCheckbox,
+  title: 'Fields/FieldCheckbox',
+
+  argTypes: {
+    description: { control: 'text' },
+    disabled: { control: 'boolean' },
+    fullWidth: { control: 'boolean' },
+    hideError: { control: 'boolean' },
+    label: { control: 'text' },
+    labelIcon: { control: 'text' },
+    lineThrough: { control: 'boolean' },
+    loading: { control: 'boolean' },
+    required: { control: 'boolean' },
+    size: {
+      control: 'select',
+      options: [
+        'xs',
+        'sm',
+        'base',
+        'lg',
+      ] satisfies FieldSize[],
+    },
+    truncate: { control: 'boolean' },
+    uppercase: { control: 'boolean' },
+  },
+} satisfies Meta<typeof FieldCheckbox>
+
+export const Default: StoryObj<typeof FieldCheckbox> = {
+  args: {
+    label: 'Checkbox Label',
+    modelValue: false,
+  } satisfies Partial<FieldCheckbox>,
+}

package/app/components/fields/FieldDays.stories.ts

@@ -0,0 +1,10 @@
+import FieldDays from './FieldDays.vue'
+
+export default {
+  component: FieldDays,
+  title: 'Fields/FieldDays',
+
+  argTypes: {},
+} satisfies Meta<typeof FieldDays>
+
+export const Default: StoryObj<typeof FieldDays> = { args: { modelValue: [] } satisfies Partial<FieldDays> }

package/app/components/fields/FieldEmojis.stories.ts

@@ -0,0 +1,10 @@
+import FieldEmojis from './FieldEmojis.vue'
+
+export default {
+  component: FieldEmojis,
+  title: 'Fields/FieldEmojis',
+
+  argTypes: {},
+} satisfies Meta<typeof FieldEmojis>
+
+export const Default: StoryObj<typeof FieldEmojis> = { args: { modelValue: '' } satisfies Partial<FieldEmojis> }

package/app/components/fields/FieldInput.stories.ts

@@ -0,0 +1,80 @@
+import FieldInput from './FieldInput.vue'
+
+export default {
+  component: FieldInput,
+  title: 'Fields/FieldInput',
+
+  argTypes: {
+    alignment: {
+      control: 'select',
+      options: [
+        'center',
+        'left',
+        'right',
+      ] satisfies BaseAlignment[],
+    },
+    autocomplete: { control: 'boolean' },
+    autofocus: { control: 'boolean' },
+    background: {
+      control: 'select',
+      options: ['gray', 'white'] satisfies FieldBackground[],
+    },
+    border: {
+      control: 'select',
+      options: [
+        'bottom',
+        'full',
+        'none',
+      ] satisfies FieldInputBorder[],
+    },
+    description: { control: 'text' },
+    disabled: { control: 'boolean' },
+    fullWidth: { control: 'boolean' },
+    hideError: { control: 'boolean' },
+    label: { control: 'text' },
+    labelIcon: { control: 'text' },
+    lineThrough: { control: 'boolean' },
+    loading: { control: 'boolean' },
+    lowercaseOnly: { control: 'boolean' },
+    max: { control: 'number' },
+    min: { control: 'number' },
+    placeholder: { control: 'text' },
+    required: { control: 'boolean' },
+    size: {
+      control: 'select',
+      options: [
+        'xs',
+        'sm',
+        'base',
+        'lg',
+      ] satisfies FieldSize[],
+    },
+    type: {
+      control: 'select',
+      options: [
+        'currency',
+        'date',
+        'datetime-local',
+        'email',
+        'month',
+        'number',
+        'password',
+        'search',
+        'tel',
+        'text',
+        'time',
+        'url',
+        'week',
+      ] satisfies FieldInputType[],
+    },
+    uppercase: { control: 'boolean' },
+  },
+} satisfies Meta<typeof FieldInput>
+
+export const Default: StoryObj<typeof FieldInput> = {
+  args: {
+    label: 'Input Label',
+    modelValue: '',
+    placeholder: 'Enter text...',
+  } satisfies Partial<FieldInput>,
+}

package/app/components/fields/FieldLabel.stories.ts

@@ -0,0 +1,30 @@
+import FieldLabel from './FieldLabel.vue'
+
+export default {
+  component: FieldLabel,
+  title: 'Fields/FieldLabel',
+
+  argTypes: {
+    disabled: { control: 'boolean' },
+    forField: { control: 'text' },
+    hasMarginBottom: { control: 'boolean' },
+    hasMarginLeft: { control: 'boolean' },
+    icon: { control: 'text' },
+    label: { control: 'text' },
+    lineThrough: { control: 'boolean' },
+    loading: { control: 'boolean' },
+    required: { control: 'boolean' },
+    size: {
+      control: 'select',
+      options: [
+        'xs',
+        'sm',
+        'base',
+        'lg',
+      ] satisfies FieldSize[],
+    },
+    truncate: { control: 'boolean' },
+  },
+} satisfies Meta<typeof FieldLabel>
+
+export const Default: StoryObj<typeof FieldLabel> = { args: { label: 'Label Text' } satisfies Partial<FieldLabel> }

package/app/components/fields/FieldMessage.stories.ts

@@ -0,0 +1,22 @@
+import FieldMessage from './FieldMessage.vue'
+
+export default {
+  component: FieldMessage,
+  title: 'Fields/FieldMessage',
+
+  argTypes: {
+    description: { control: 'text' },
+    hideError: { control: 'boolean' },
+    size: {
+      control: 'select',
+      options: [
+        'xs',
+        'sm',
+        'base',
+        'lg',
+      ] satisfies FieldSize[],
+    },
+  },
+} satisfies Meta<typeof FieldMessage>
+
+export const Default: StoryObj<typeof FieldMessage> = { args: { description: 'This is a message' } satisfies Partial<FieldMessage> }

package/app/components/fields/FieldSelect.stories.ts

@@ -0,0 +1,73 @@
+import FieldSelect from './FieldSelect.vue'
+
+export default {
+  component: FieldSelect,
+  title: 'Fields/FieldSelect',
+
+  argTypes: {
+    border: {
+      control: 'select',
+      options: [
+        'bottom',
+        'full',
+        'none',
+      ] satisfies FieldSelectBorder[],
+    },
+    caret: { control: 'boolean' },
+    columns: { control: 'object' },
+    description: { control: 'text' },
+    direction: {
+      control: 'select',
+      options: ['bottom', 'top'] satisfies FieldSelectDirection[],
+    },
+    disabled: { control: 'boolean' },
+    hideError: { control: 'boolean' },
+    label: { control: 'text' },
+    labelIcon: { control: 'text' },
+    maxHeight: {
+      control: 'select',
+      options: [
+        'xs',
+        'sm',
+        'md',
+        'lg',
+      ] satisfies FieldSelectMaxHeight[],
+    },
+    openOnHover: { control: 'boolean' },
+    options: { control: 'object' },
+    padding: { control: 'boolean' },
+    placeholder: { control: 'text' },
+    required: { control: 'boolean' },
+    size: {
+      control: 'select',
+      options: [
+        'xs',
+        'sm',
+        'base',
+        'lg',
+      ] satisfies FieldSize[],
+    },
+  },
+} satisfies Meta<typeof FieldSelect>
+
+export const Default: StoryObj<typeof FieldSelect> = {
+  args: {
+    label: 'Select Label',
+    modelValue: '',
+    options: [
+      {
+        text: 'Option 1',
+        value: '1',
+      },
+      {
+        text: 'Option 2',
+        value: '2',
+      },
+      {
+        text: 'Option 3',
+        value: '3',
+      },
+    ],
+    placeholder: 'Choose an option...',
+  } satisfies Partial<FieldSelect>,
+}

package/app/components/fields/FieldTabs.stories.ts

@@ -0,0 +1,44 @@
+import FieldTabs from './FieldTabs.vue'
+
+export default {
+  component: FieldTabs,
+  title: 'Fields/FieldTabs',
+
+  argTypes: {
+    minimizeOnMobile: { control: 'boolean' },
+    size: {
+      control: 'select',
+      options: [
+        'xs',
+        'sm',
+        'base',
+        'lg',
+      ] satisfies FieldSize[],
+    },
+    tabs: { control: 'object' },
+    theme: {
+      control: 'select',
+      options: ['border', 'rounded'] satisfies FieldTabsTheme[],
+    },
+  },
+} satisfies Meta<typeof FieldTabs>
+
+export const Default: StoryObj<typeof FieldTabs> = {
+  args: {
+    modelValue: 'tab1',
+    tabs: [
+      {
+        label: 'Tab 1',
+        value: 'tab1',
+      },
+      {
+        label: 'Tab 2',
+        value: 'tab2',
+      },
+      {
+        label: 'Tab 3',
+        value: 'tab3',
+      },
+    ],
+  } satisfies Partial<FieldTabs>,
+}

package/app/components/fields/FieldTextarea.stories.ts

@@ -0,0 +1,44 @@
+import FieldTextarea from './FieldTextarea.vue'
+
+export default {
+  component: FieldTextarea,
+  title: 'Fields/FieldTextarea',
+
+  argTypes: {
+    autofocus: { control: 'boolean' },
+    background: {
+      control: 'select',
+      options: ['gray', 'white'] satisfies FieldBackground[],
+    },
+    border: { control: 'boolean' },
+    description: { control: 'text' },
+    disabled: { control: 'boolean' },
+    fullWidth: { control: 'boolean' },
+    hideError: { control: 'boolean' },
+    label: { control: 'text' },
+    labelIcon: { control: 'text' },
+    loading: { control: 'boolean' },
+    padding: { control: 'boolean' },
+    placeholder: { control: 'text' },
+    required: { control: 'boolean' },
+    resize: { control: 'boolean' },
+    rows: { control: 'number' },
+    size: {
+      control: 'select',
+      options: [
+        'xs',
+        'sm',
+        'base',
+        'lg',
+      ] satisfies FieldSize[],
+    },
+  },
+} satisfies Meta<typeof FieldTextarea>
+
+export const Default: StoryObj<typeof FieldTextarea> = {
+  args: {
+    label: 'Textarea Label',
+    modelValue: '',
+    placeholder: 'Enter text...',
+  } satisfies Partial<FieldTextarea>,
+}

package/app/components/fields/FieldTime.stories.ts

@@ -0,0 +1,39 @@
+import FieldTime from './FieldTime.vue'
+
+export default {
+  component: FieldTime,
+  title: 'Fields/FieldTime',
+
+  argTypes: {
+    background: {
+      control: 'select',
+      options: ['gray', 'white'] satisfies FieldBackground[],
+    },
+    description: { control: 'text' },
+    disabled: { control: 'boolean' },
+    hideError: { control: 'boolean' },
+    icon: { control: 'text' },
+    id: { control: 'text' },
+    label: { control: 'text' },
+    labelIcon: { control: 'text' },
+    name: { control: 'text' },
+    required: { control: 'boolean' },
+    size: {
+      control: 'select',
+      options: [
+        'xs',
+        'sm',
+        'base',
+        'lg',
+      ] satisfies FieldSize[],
+    },
+  },
+} satisfies Meta<typeof FieldTime>
+
+export const Default: StoryObj<typeof FieldTime> = {
+  args: {
+    id: 'time-1',
+    label: 'Time Label',
+    modelValue: '',
+  } satisfies Partial<FieldTime>,
+}

package/app/components/layout/LayoutToasts.stories.ts

@@ -0,0 +1,8 @@
+import LayoutToasts from './LayoutToasts.vue'
+
+export default {
+  component: LayoutToasts,
+  title: 'Layout/LayoutToasts',
+} satisfies Meta<typeof LayoutToasts>
+
+export const Default: StoryObj<typeof LayoutToasts> = { args: {} }

package/app/types/bases.d.ts

@@ -334,7 +334,7 @@ export interface BaseTags {
 
 export interface BaseText {
   alignment?: BaseAlignment
-  background?: BaseTextBackground
+  background?: BaseBackground
   block?: boolean
   bold?: boolean
   hasMargin?: boolean

package/app/types/global.d.ts

@@ -15,6 +15,7 @@ declare global {
   type LayerIconValue = LayerIconValueType
 
   // Bases
+  type BaseAlignment = Bases.BaseAlignment
   type BaseBackground = Bases.BaseBackground
   type BaseColor = Bases.BaseColor
   type BaseSize = Bases.BaseSize
@@ -97,7 +98,9 @@ declare global {
   type ChartistLineChartData = import('chartist').LineChartData
   type ChartistOptions = import('chartist').Options
   type ChartistPieChartData = import('chartist').PieChartData
+  type Meta<T> = import('@nuxtjs/storybook').Meta<T>
   type RouteLocationNamedI18n = import('vue-router').RouteLocationNamedI18n
+  type StoryObj<T> = import('@nuxtjs/storybook').StoryObj<T>
   type VuelidateValidation = import('@vuelidate/core').BaseValidation
 
   // Navigator

package/nuxt.config.ts

@@ -56,6 +56,7 @@ export default defineNuxtConfig({
     '@nuxtjs/plausible',
     '@nuxtjs/robots',
     '@nuxtjs/sitemap',
+    '@nuxtjs/storybook',
     '@pinia/nuxt',
     '@unocss/nuxt',
     '@vueuse/nuxt',

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@saasmakers/ui",
   "type": "module",
-  "version": "0.1.79",
+  "version": "0.1.80",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
   "license": "MIT",
@@ -33,6 +33,7 @@
     "@nuxtjs/plausible": "2.0.1",
     "@nuxtjs/robots": "5.5.6",
     "@nuxtjs/sitemap": "7.4.7",
+    "@nuxtjs/storybook": "9.0.1",
     "@pinia/nuxt": "0.11.2",
     "@unocss/nuxt": "66.5.4",
     "@unocss/reset": "66.5.10",
@@ -47,6 +48,7 @@
     "motion-v": "1.7.4",
     "numbro": "2.5.0",
     "snarkdown": "2.0.0",
+    "storybook": "9.0.5",
     "unocss": "66.5.4",
     "vue": "3.5.22",
     "vue-router": "4.6.3"
@@ -59,6 +61,7 @@
   "scripts": {
     "dev": "nuxi dev",
     "lint": "eslint .",
+    "storybook": "storybook dev",
     "typecheck": "nuxi typecheck"
   }
 }