feat: lint codebase and run precommit hook

packages/storybook/HOW_TO_CREATE_STORIES.md

@@ -31,6 +31,7 @@ Stories are organized into two main categories:
 3. Optionally create a fields file: `fields.ts` (for controls configuration)
 
 **Example:**
+
 ```
 src/molecules/hover-card/
   ├── hover-card.stories.svelte
@@ -44,16 +45,16 @@ Every story file follows this structure:
 ```svelte
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
-  
+
   // Component imports
   import * as ComponentName from '@cio/ui/base/component-name';
-  
+
   // Other imports (icons, utilities, etc.)
   import IconName from '@lucide/svelte/icons/icon-name';
-  
+
   // Fields import (if using controls)
   import { FIELDS } from './fields';
-  
+
   // Story definition
   const { Story } = defineMeta({
     title: 'Category/ComponentName',
@@ -66,7 +67,7 @@ Every story file follows this structure:
     },
     tags: ['autodocs']
   });
-  
+
   // State variables (if needed)
   let someState = $state('');
 </script>
@@ -83,25 +84,23 @@ Every story file follows this structure:
 ### Component Imports
 
 - **Namespace imports** for multi-part components:
+
   ```svelte
-  import * as HoverCard from '@cio/ui/base/hover-card';
-  import * as Card from '@cio/ui/base/card';
-  import * as Field from '@cio/ui/base/field';
+  import * as HoverCard from '@cio/ui/base/hover-card'; import * as Card from '@cio/ui/base/card'; import * as Field
+  from '@cio/ui/base/field';
   ```
 
 - **Named imports** for single components:
   ```svelte
-  import { Button } from '@cio/ui/base/button';
-  import { Input } from '@cio/ui/base/input';
-  import { Avatar } from '@cio/ui/base/avatar';
+  import {Button} from '@cio/ui/base/button'; import {Input} from '@cio/ui/base/input'; import {Avatar} from '@cio/ui/base/avatar';
   ```
 
 ### Icon Imports
 
 Use Lucide Svelte icons:
+
 ```svelte
-import CalendarDaysIcon from '@lucide/svelte/icons/calendar-days';
-import UsersIcon from '@lucide/svelte/icons/users';
+import CalendarDaysIcon from '@lucide/svelte/icons/calendar-days'; import UsersIcon from '@lucide/svelte/icons/users';
 import BookOpenIcon from '@lucide/svelte/icons/book-open';
 ```
 
@@ -115,20 +114,20 @@ import BookOpenIcon from '@lucide/svelte/icons/book-open';
 ### Component Reference
 
 - For multi-part components, reference the `Root` component:
+
   ```svelte
-  component: HoverCard.Root
-  component: Card.Root
+  component: HoverCard.Root component: Card.Root
   ```
 
 - For single components, reference directly:
   ```svelte
-  component: Button
-  component: Input
+  component: Button component: Input
   ```
 
 ### Parameters
 
 Standard parameters configuration:
+
 ```svelte
 parameters: {
   layout: 'centered',
@@ -159,6 +158,7 @@ Always include `tags: ['autodocs']` for automatic documentation generation.
 ### Template with Args (for controls)
 
 For atoms that need to pass args to controls:
+
 ```svelte
 <Story name="Default">
   {#snippet template(args)}
@@ -170,6 +170,7 @@ For atoms that need to pass args to controls:
 ### Multiple Stories
 
 Create multiple stories to showcase different use cases:
+
 ```svelte
 <Story name="Default">
   {#snippet template()}
@@ -199,6 +200,7 @@ export const FIELDS = ['class'] as string[];
 ```
 
 Common fields:
+
 - `'class'` - CSS classes
 - `'variant'` - Component variants
 - `'size'` - Component sizes
@@ -210,6 +212,7 @@ Common fields:
 ### Atoms
 
 Basic, indivisible components:
+
 - Button, Input, Badge, Avatar, Label, Checkbox, Switch, etc.
 - Single-purpose components
 - Usually don't compose other components
@@ -217,6 +220,7 @@ Basic, indivisible components:
 ### Molecules
 
 Composite components:
+
 - Card, Field, ButtonGroup, HoverCard, Empty, etc.
 - Made of multiple atoms or other components
 - More complex functionality
@@ -279,6 +283,7 @@ Since ClassroomIO is an LMS platform, all story content should be **LMS-related*
 ### Content Patterns
 
 **Instructor Profiles:**
+
 ```svelte
 <h4 class="text-sm font-semibold">Sarah Johnson</h4>
 <p class="text-sm">Senior Full-Stack Developer & Instructor</p>
@@ -286,6 +291,7 @@ Since ClassroomIO is an LMS platform, all story content should be **LMS-related*
 ```
 
 **Course Information:**
+
 ```svelte
 <h4 class="text-sm font-semibold">Advanced React Patterns</h4>
 <p class="text-muted-foreground text-sm">
@@ -294,6 +300,7 @@ Since ClassroomIO is an LMS platform, all story content should be **LMS-related*
 ```
 
 **Student Information:**
+
 ```svelte
 <h4 class="text-sm font-semibold">Alex Martinez</h4>
 <p class="text-muted-foreground text-xs">5 courses enrolled</p>
@@ -455,4 +462,3 @@ When creating a new story, ensure:
 - [Storybook Svelte CSF Addon](https://storybook.js.org/addons/@storybook/addon-svelte-csf)
 - [Bits UI Documentation](https://bits-ui.com/docs/components)
 - [Lucide Icons](https://lucide.dev/icons/)
-

packages/storybook/package.json

@@ -7,6 +7,7 @@
     "dev": "storybook dev -p 6006",
     "build": "storybook build",
     "preview": "storybook preview",
+    "format": "prettier --write .",
     "build-storybook": "storybook build",
     "upload:storybook": "tsx scripts/upload-storybook.ts",
     "publish:storybook": "pnpm build-storybook && pnpm upload:storybook"

packages/storybook/src/atoms/accordion/fields.ts

@@ -1,9 +1 @@
-export const FIELDS = [
-  'type',
-  'value',
-  'onValueChange',
-  'disabled',
-  'name',
-  'loop',
-  'orientation'
-] as string[];
+export const FIELDS = ['type', 'value', 'onValueChange', 'disabled', 'name', 'loop', 'orientation'] as string[];

packages/storybook/src/atoms/checkbox/fields.ts

@@ -1,8 +1 @@
-export const FIELDS = [
-  'checked',
-  'onCheckedChange',
-  'disabled',
-  'name',
-  'value',
-  'required'
-] as string[];
+export const FIELDS = ['checked', 'onCheckedChange', 'disabled', 'name', 'value', 'required'] as string[];

packages/storybook/src/atoms/collapsible/fields.ts

@@ -1,6 +1 @@
-export const FIELDS = [
-  'open',
-  'onOpenChange',
-  'onOpenChangeComplete',
-  'disabled'
-] as string[];
+export const FIELDS = ['open', 'onOpenChange', 'onOpenChangeComplete', 'disabled'] as string[];

packages/storybook/src/atoms/command/fields.ts

@@ -1,8 +1 @@
-export const FIELDS = [
-  'value',
-  'onValueChange',
-  'label',
-  'filter',
-  'columns',
-  'disablePointerSelection'
-] as string[];
+export const FIELDS = ['value', 'onValueChange', 'label', 'filter', 'columns', 'disablePointerSelection'] as string[];

packages/storybook/src/atoms/item/item.stories.svelte

@@ -68,22 +68,19 @@
     {
       name: 'v0-1.5-sm',
       description: 'Everyday tasks and UI generation.',
-      image:
-        'https://images.unsplash.com/photo-1650804068570-7fb2e3dbf888?q=80&w=640&auto=format&fit=crop',
+      image: 'https://images.unsplash.com/photo-1650804068570-7fb2e3dbf888?q=80&w=640&auto=format&fit=crop',
       credit: 'Valeria Reverdo on Unsplash'
     },
     {
       name: 'v0-1.5-lg',
       description: 'Advanced thinking or reasoning.',
-      image:
-        'https://images.unsplash.com/photo-1610280777472-54133d004c8c?q=80&w=640&auto=format&fit=crop',
+      image: 'https://images.unsplash.com/photo-1610280777472-54133d004c8c?q=80&w=640&auto=format&fit=crop',
       credit: 'Michael Oeser on Unsplash'
     },
     {
       name: 'v0-2.0-mini',
       description: 'Open Source model for everyone.',
-      image:
-        'https://images.unsplash.com/photo-1602146057681-08560aee8cde?q=80&w=640&auto=format&fit=crop',
+      image: 'https://images.unsplash.com/photo-1602146057681-08560aee8cde?q=80&w=640&auto=format&fit=crop',
       credit: 'Cherry Laithang on Unsplash'
     }
   ];
@@ -413,4 +410,3 @@
     </div>
   {/snippet}
 </Story>
-

packages/storybook/src/atoms/menubar/fields.ts

@@ -1,7 +1 @@
-export const FIELDS = [
-  'onValueChange',
-  'value',
-  'dir',
-  'onOpenChange',
-  'disabled'
-] as string[];
+export const FIELDS = ['onValueChange', 'value', 'dir', 'onOpenChange', 'disabled'] as string[];

packages/storybook/src/atoms/pagination/fields.ts

@@ -1,7 +1 @@
-export const FIELDS = [
-  'count',
-  'page',
-  'onPageChange',
-  'perPage',
-  'orientation'
-] as string[];
+export const FIELDS = ['count', 'page', 'onPageChange', 'perPage', 'orientation'] as string[];

packages/storybook/src/atoms/radio-group/fields.ts

@@ -1,9 +1 @@
-export const FIELDS = [
-  'value',
-  'onValueChange',
-  'disabled',
-  'required',
-  'name',
-  'loop',
-  'orientation'
-] as string[];
+export const FIELDS = ['value', 'onValueChange', 'disabled', 'required', 'name', 'loop', 'orientation'] as string[];

packages/storybook/src/atoms/switch/fields.ts

@@ -1,8 +1 @@
-export const FIELDS = [
-  'checked',
-  'onCheckedChange',
-  'disabled',
-  'name',
-  'required',
-  'value'
-] as string[];
+export const FIELDS = ['checked', 'onCheckedChange', 'disabled', 'name', 'required', 'value'] as string[];

packages/storybook/src/atoms/tabs/fields.ts

@@ -1,7 +1 @@
-export const FIELDS = [
-  'value',
-  'onValueChange',
-  'disabled',
-  'activationMode',
-  'orientation'
-] as string[];
+export const FIELDS = ['value', 'onValueChange', 'disabled', 'activationMode', 'orientation'] as string[];

packages/storybook/src/atoms/tooltip/fields.ts

@@ -1,6 +1 @@
-export const FIELDS = [
-  'disableHoverableContent',
-  'delayDuration',
-  'ignoreNonKeyboardFocus',
-  'disabled'
-] as string[];
+export const FIELDS = ['disableHoverableContent', 'delayDuration', 'ignoreNonKeyboardFocus', 'disabled'] as string[];

packages/storybook/src/molecules/hover-card/fields.ts

@@ -1,2 +1 @@
 export const FIELDS = ['class'] as string[];
-

packages/storybook/src/molecules/icon-button/fields.ts

@@ -1,2 +1 @@
 export const FIELDS = ['disabled', 'class', 'type', 'tooltip', 'tooltipSide'] as string[];
-

packages/storybook/src/molecules/input-group/fields.ts

@@ -1,2 +1 @@
 export const FIELDS = ['class'] as string[];
-

packages/storybook/src/molecules/page/fields.ts

@@ -1,2 +1 @@
 export const FIELDS = ['class'] as string[];
-

packages/storybook/src/molecules/password/password.stories.svelte

@@ -94,4 +94,3 @@
     </div>
   {/snippet}
 </Story>
-