@saasmakers/ui 0.1.79 → 0.1.81

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/BaseQuote.vue

@@ -90,7 +90,7 @@ function onClose(event: MouseEvent) {
       :size="size"
     />
 
-    <div class="flex flex-1 flex-col normal-case">
+    <div class="flex flex-1 flex-col font-semibold normal-case">
       <div
         class="rounded-2xl text-left transition duration-300"
         :class="{
@@ -103,10 +103,10 @@ function onClose(event: MouseEvent) {
           'px-5 py-4 text-base leading-7 sm:text-lg sm:leading-8': size === 'base',
           'border': status,
           'text-black dark:text-white': !status,
-          'border-red-700 dark:border-red-300 text-red-700 dark:text-red-300': status === 'error',
-          'border-indigo-700 dark:border-indigo-300 text-indigo-700 dark:text-indigo-300': status === 'info',
-          'border-green-700 dark:border-green-300 text-green-700 dark:text-green-300': status === 'success',
-          'border-orange-700 dark:border-orange-300 text-orange-700 dark:text-orange-300': status === 'warning',
+          'border-red-600 dark:border-red-400 text-red-600 dark:text-red-400': status === 'error',
+          'border-indigo-600 dark:border-indigo-400 text-indigo-600 dark:text-indigo-400': status === 'info',
+          'border-green-600 dark:border-green-400 text-green-600 dark:text-green-400': status === 'success',
+          'border-orange-600 dark:border-orange-400 text-orange-600 dark:text-orange-400': status === 'warning',
         }"
         @click="onBubbleClick"
       >