.

Author: sacrosanctic

.github/workflows/chromatic.yml

@@ -22,7 +22,7 @@ jobs:
     if: ${{ github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name == github.repository }}
 
     steps:
-      - name: Checkout
+      - name: ☑️ Checkout
         uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
         with:
           fetch-depth: 0

app/components/Button/Base.stories.ts

@@ -9,93 +9,52 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Primary: Story = {
-  args: {},
-  render: args => ({
-    components: { Component },
-    setup() {
-      return { args }
-    },
-    template: '<Component v-bind="args">Primary Button</Component>',
-  }),
+  args: {
+    default: 'Primary Button',
+  },
 }
 
 export const Secondary: Story = {
   args: {
+    default: 'Secondary Button',
     variant: 'secondary',
   },
-  render: args => ({
-    components: { Component },
-    setup() {
-      return { args }
-    },
-    template: '<Component v-bind="args">Secondary Button</Component>',
-  }),
 }
 
 export const Small: Story = {
   args: {
-    variant: 'secondary',
+    default: 'Small Button',
     size: 'small',
+    variant: 'secondary',
   },
-  render: args => ({
-    components: { Component },
-    setup() {
-      return { args }
-    },
-    template: '<Component v-bind="args">Small Button</Component>',
-  }),
 }
 
 export const Disabled: Story = {
   args: {
+    default: 'Disabled Button',
     disabled: true,
   },
-  render: args => ({
-    components: { Component },
-    setup() {
-      return { args }
-    },
-    template: '<Component v-bind="args">Disabled Button</Component>',
-  }),
 }
 
 export const WithIcon: Story = {
   args: {
-    variant: 'secondary',
+    default: 'Search',
     classicon: 'i-carbon:search',
+    variant: 'secondary',
   },
-  render: args => ({
-    components: { Component },
-    setup() {
-      return { args }
-    },
-    template: '<Component v-bind="args">Search</Component>',
-  }),
 }
 
 export const WithKeyboardShortcut: Story = {
   args: {
-    variant: 'secondary',
     ariaKeyshortcuts: '/',
+    default: 'Search',
+    variant: 'secondary',
   },
-  render: args => ({
-    components: { Component },
-    setup() {
-      return { args }
-    },
-    template: '<Component v-bind="args">Search</Component>',
-  }),
 }
 
 export const Block: Story = {
   args: {
     block: true,
+    default: 'Full Width Button',
   },
-  render: args => ({
-    components: { Component },
-    setup() {
-      return { args }
-    },
-    template: '<Component v-bind="args">Full Width Button</Component>',
-  }),
 }

app/components/Button/Base.vue

@@ -1,28 +1,18 @@
 <script setup lang="ts">
 const props = withDefaults(
   defineProps<{
-    /** Whether the button is disabled */
     disabled?: boolean
-    /**
-     * HTML button type attribute
-     * @default "button"
-     */
+    /** @default "button" */
     type?: 'button' | 'submit'
-    /**
-     * Button visual style variant
-     * @default "secondary"
-     */
+    /** @default "secondary" */
     variant?: 'primary' | 'secondary'
-    /**
-     * Button size
-     * @default "medium"
-     */
+    /** @default "medium" */
     size?: 'small' | 'medium'
     /** Keyboard shortcut hint */
     ariaKeyshortcuts?: string
-    /** Whether the button should take full width */
+    /** Forces the button to occupy the entire width of its container. */
     block?: boolean
-    /** Icon class (e.g., i-carbon-add) */
+    /** Icon class (e.g., i-carbon-add) applied to the left of the text. */
     classicon?: string
   }>(),
   {

app/components/Input/Base.stories.ts

@@ -4,17 +4,12 @@ import Component from './Base.vue'
 
 const meta = {
   component: Component,
-
   argTypes: {
     disabled: { control: 'boolean' },
     size: {
       control: 'select',
       options: ['small', 'medium', 'large'],
     },
-    noCorrect: {
-      control: 'boolean',
-      description: 'Whether to disable browser autocorrect',
-    },
     onFocus: {
       action: 'focus',
       description: 'Fired when the input gains focus',

app/components/Input/Base.vue

@@ -6,7 +6,13 @@ const model = defineModel<string>({ default: '' })
 const props = withDefaults(
   defineProps<{
     disabled?: boolean
+    /** @default 'medium' */
     size?: 'small' | 'medium' | 'large'
+    /**
+     * Prevents the browser from automatically modifying user input
+     * (e.g. autocorrect, autocomplete, autocapitalize, and spellcheck).
+     * @default true
+     */
     noCorrect?: boolean
   }>(),
   {