@saasmakers/ui 0.1.79 → 0.1.81

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.81",
   "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"
   }
 }