@latte-macchiat-io/latte-vanilla-components 0.0.556 → 0.0.557

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latte-macchiat-io/latte-vanilla-components",
-  "version": "0.0.556",
+  "version": "0.0.557",
   "description": "Beautiful components for amazing projects, with a touch of Vanilla 🥤",
   "type": "module",
   "main": "./src/index.ts",

package/src/components/Actions/stories.tsx

@@ -4,31 +4,65 @@ import React from 'react';
 import { Button } from '../Button';
 import { Actions } from '.';
 
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta: Meta<typeof Actions> = {
   title: '3. Buttons / Actions',
   component: Actions,
   parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
     layout: 'centered',
   },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ['autodocs'],
-  // More on argTypes: https://storybook.js.org/docs/api/argtypes
-  argTypes: {},
-  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+  argTypes: {
+    align: { control: 'select', options: ['left', 'center', 'right'] },
+    direction: { control: 'select', options: ['row', 'column'] },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: '400px' }}>
+        <Story />
+      </div>
+    ),
+  ],
 };
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const Default: Story = {
+const buttons = (
+  <>
+    <Button as="button" variant="primary">Primary</Button>
+    <Button as="button" variant="secondary">Secondary</Button>
+  </>
+);
+
+export const AlignLeft: Story = {
+  args: { align: 'left', direction: 'row', children: buttons },
+};
+
+export const AlignCenter: Story = {
+  args: { align: 'center', direction: 'row', children: buttons },
+};
+
+export const AlignRight: Story = {
+  args: { align: 'right', direction: 'row', children: buttons },
+};
+
+export const DirectionColumn: Story = {
+  args: { align: 'left', direction: 'column', children: buttons },
+};
+
+export const DirectionColumnCenter: Story = {
+  args: { align: 'center', direction: 'column', children: buttons },
+};
+
+export const ThreeButtons: Story = {
   args: {
+    align: 'center',
+    direction: 'row',
     children: (
       <>
-        <Button>hello</Button>
-        <Button>hello</Button>
+        <Button as="button" variant="primary">Primary</Button>
+        <Button as="button" variant="secondary">Secondary</Button>
+        <Button as="button" variant="tertiary">Tertiary</Button>
       </>
     ),
   },

package/src/components/Box/Alert/stories.tsx

@@ -24,20 +24,50 @@ const meta: Meta<typeof AlertBox> = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const Default: Story = {
+const content = (
+  <>
+    <Heading as="h3">Lorem ipsum</Heading>
+    <Paragraph>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+      </p>
+    </Paragraph>
+  </>
+);
+
+export const Warning: Story = {
+  args: {
+    variant: 'warning',
+    children: content,
+  },
+};
+
+export const Info: Story = {
+  args: {
+    variant: 'info',
+    children: content,
+  },
+};
+
+export const Success: Story = {
+  args: {
+    variant: 'success',
+    children: content,
+  },
+};
+
+export const Danger: Story = {
+  args: {
+    variant: 'danger',
+    children: content,
+  },
+};
+
+export const WithoutIcon: Story = {
   args: {
-    children: (
-      <>
-        <Heading as="h3">Lorem ipsum</Heading>
-        <Paragraph>
-          <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-            minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
-            voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-          </p>
-        </Paragraph>
-      </>
-    ),
+    variant: 'warning',
+    noIcon: true,
+    children: content,
   },
 };

package/src/components/Box/stories.tsx

@@ -3,44 +3,100 @@ import React from 'react';
 
 import { Heading } from '../Heading';
 import { Paragraph } from '../Paragraph';
-
 import { Box } from '.';
 
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta: Meta<typeof Box> = {
   title: '1. Layout/Box/Box',
   component: Box,
   parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
     layout: 'fullscreen',
   },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ['autodocs'],
-  // More on argTypes: https://storybook.js.org/docs/api/argtypes
   argTypes: {
+    variant: { control: 'select', options: ['primary', 'secondary', 'transparent'] },
+    paddingTop: { control: 'select', options: ['small', 'medium', 'large'] },
+    align: { control: 'select', options: ['left', 'center', 'right'] },
+    vAlign: { control: 'select', options: ['top', 'center', 'bottom', 'spaceBetween'] },
+    direction: { control: 'select', options: ['column', 'row'] },
     isLight: { control: 'boolean' },
     isReversed: { control: 'boolean' },
   },
-  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
 };
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const Default: Story = {
+const boxContent = (
+  <>
+    <Heading as="h3">Lorem ipsum</Heading>
+    <Paragraph>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+    </Paragraph>
+  </>
+);
+
+export const Primary: Story = {
+  args: { variant: 'primary', children: boxContent },
+};
+
+export const Secondary: Story = {
+  args: { variant: 'secondary', children: boxContent },
+};
+
+export const Transparent: Story = {
+  args: { variant: 'transparent', children: boxContent },
+};
+
+export const PaddingSmall: Story = {
+  args: { variant: 'primary', paddingTop: 'small', children: boxContent },
+};
+
+export const PaddingMedium: Story = {
+  args: { variant: 'primary', paddingTop: 'medium', children: boxContent },
+};
+
+export const PaddingLarge: Story = {
+  args: { variant: 'primary', paddingTop: 'large', children: boxContent },
+};
+
+export const AlignCenter: Story = {
+  args: { variant: 'primary', align: 'center', children: boxContent },
+};
+
+export const AlignRight: Story = {
+  args: { variant: 'primary', align: 'right', children: boxContent },
+};
+
+export const VAlignCenter: Story = {
+  args: { variant: 'primary', vAlign: 'center', children: boxContent },
+};
+
+export const DirectionRow: Story = {
   args: {
     variant: 'primary',
+    direction: 'row',
+    children: (
+      <>
+        <div style={{ flex: 1, background: '#e5e7eb', padding: '1rem', borderRadius: '4px' }}>Left content</div>
+        <Paragraph><p>Right content: Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></Paragraph>
+      </>
+    ),
+  },
+};
+
+export const IsLight: Story = {
+  args: { variant: 'primary', isLight: true, children: boxContent },
+};
+
+export const DirectionRowReversed: Story = {
+  args: {
+    variant: 'secondary',
+    direction: 'row',
+    isReversed: true,
     children: (
       <>
-        <Heading as="h3">Lorem ipsum</Heading>
-        <Paragraph>
-          <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-            minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
-            voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-          </p>
-        </Paragraph>
+        <div style={{ flex: 1, background: '#e5e7eb', padding: '1rem', borderRadius: '4px' }}>First in DOM (shown right)</div>
+        <Paragraph><p>Second in DOM (shown left)</p></Paragraph>
       </>
     ),
   },
@@ -51,27 +107,13 @@ export const AdjacentBoxes: Story = {
     <>
       <Box {...args}>
         <Heading as="h3">First box</Heading>
-        <Paragraph>
-          <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-            minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
-            voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-          </p>
-        </Paragraph>
+        <Paragraph><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></Paragraph>
       </Box>
       <Box {...args} variant="secondary">
         <Heading as="h3">Second box</Heading>
-        <Paragraph>
-          <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-            minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
-            voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-          </p>
-        </Paragraph>
+        <Paragraph><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></Paragraph>
       </Box>
     </>
   ),
-  args: {
-    variant: 'primary',
-  },
+  args: { variant: 'primary' },
 };

package/src/components/Button/stories.tsx

@@ -2,27 +2,82 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { Button } from '.';
 
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta: Meta<typeof Button> = {
   title: '3. Buttons / Button',
   component: Button,
   parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
     layout: 'centered',
   },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ['autodocs'],
-  // More on argTypes: https://storybook.js.org/docs/api/argtypes
-  argTypes: {},
-  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+  argTypes: {
+    variant: { control: 'select', options: ['primary', 'secondary', 'tertiary'] },
+    size: { control: 'select', options: ['sm', 'md', 'lg'] },
+    style: { control: 'select', options: [undefined, 'outline'] },
+    as: { control: 'select', options: ['a', 'button'] },
+    fullWidth: { control: 'boolean' },
+    isPending: { control: 'boolean' },
+    isDisabled: { control: 'boolean' },
+  },
 };
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const Default: Story = {
+export const Primary: Story = {
+  args: { children: 'Primary', variant: 'primary', size: 'md', as: 'button' },
+};
+
+export const Secondary: Story = {
+  args: { children: 'Secondary', variant: 'secondary', size: 'md', as: 'button' },
+};
+
+export const Tertiary: Story = {
+  args: { children: 'Tertiary', variant: 'tertiary', size: 'md', as: 'button' },
+};
+
+export const OutlinePrimary: Story = {
+  args: { children: 'Outline Primary', variant: 'primary', style: 'outline', as: 'button' },
+};
+
+export const OutlineSecondary: Story = {
+  args: { children: 'Outline Secondary', variant: 'secondary', style: 'outline', as: 'button' },
+};
+
+export const OutlineTertiary: Story = {
+  args: { children: 'Outline Tertiary', variant: 'tertiary', style: 'outline', as: 'button' },
+};
+
+export const SizeSmall: Story = {
+  args: { children: 'Small', variant: 'primary', size: 'sm', as: 'button' },
+};
+
+export const SizeMedium: Story = {
+  args: { children: 'Medium', variant: 'primary', size: 'md', as: 'button' },
+};
+
+export const SizeLarge: Story = {
+  args: { children: 'Large', variant: 'primary', size: 'lg', as: 'button' },
+};
+
+export const FullWidth: Story = {
+  args: { children: 'Full Width', variant: 'primary', fullWidth: true, as: 'button' },
+  parameters: { layout: 'padded' },
+};
+
+export const Disabled: Story = {
+  args: { children: 'Disabled', variant: 'primary', isDisabled: true, as: 'button' },
+};
+
+export const Pending: Story = {
   args: {
-    children: 'Button',
+    children: 'Submit',
+    variant: 'primary',
+    isPending: true,
+    as: 'button',
+    translation: { isPendingLabel: 'Loading...' },
   },
 };
+
+export const AsLink: Story = {
+  args: { children: 'Link Button', variant: 'primary', as: 'a', href: '#' },
+};

package/src/components/Button/theme.ts

@@ -120,15 +120,15 @@ export const themeButtonLight = {
 
     variant: {
       primary: {
-        color: '#FF7377',
+        color: '#FFFFFF',
         backgroundColor: '#FF7377',
       },
       secondary: {
-        color: '#FF7377',
+        color: '#FFFFFF',
         backgroundColor: '#FF7377',
       },
       tertiary: {
-        color: '#FF7377',
+        color: '#FFFFFF',
         backgroundColor: '#FF7377',
       },
     },
@@ -141,15 +141,15 @@ export const themeButtonDark = {
 
     variant: {
       primary: {
-        color: '#FF7377',
+        color: '#FFFFFF',
         backgroundColor: '#FF7377',
       },
       secondary: {
-        color: '#FF7377',
+        color: '#FFFFFF',
         backgroundColor: '#FF7377',
       },
       tertiary: {
-        color: '#FF7377',
+        color: '#FFFFFF',
         backgroundColor: '#FF7377',
       },
     },

package/src/components/Carousel/stories.tsx

@@ -1,26 +1,66 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
+import React from 'react';
 
 import { Carousel } from '.';
 
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta: Meta<typeof Carousel> = {
   title: '7. Interactive / Carousel',
   component: Carousel,
   parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: 'centered',
+    layout: 'padded',
   },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ['autodocs'],
-  // More on argTypes: https://storybook.js.org/docs/api/argtypes
-  argTypes: {},
-  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+  argTypes: {
+    showBullets: { control: 'boolean' },
+    showNavButtons: { control: 'boolean' },
+    autoplay: { control: 'boolean' },
+    isFullWidth: { control: 'boolean' },
+    itemsPerView: { control: 'number' },
+  },
 };
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+const slide = (label: string, color: string) => (
+  <div style={{ padding: '2rem', background: color, textAlign: 'center', borderRadius: '8px', minHeight: '160px', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '1.25rem', fontWeight: 600 }}>
+    {label}
+  </div>
+);
+
+const slides = [
+  slide('Slide 1', '#dbeafe'),
+  slide('Slide 2', '#dcfce7'),
+  slide('Slide 3', '#fef9c3'),
+  slide('Slide 4', '#fce7f3'),
+  slide('Slide 5', '#ede9fe'),
+];
+
 export const Default: Story = {
-  args: {},
+  args: { data: slides },
+};
+
+export const WithNavButtons: Story = {
+  args: { data: slides, showNavButtons: true },
+};
+
+export const WithBullets: Story = {
+  args: { data: slides, showBullets: true },
+};
+
+export const WithNavAndBullets: Story = {
+  args: { data: slides, showNavButtons: true, showBullets: true },
+};
+
+export const Autoplay: Story = {
+  args: { data: slides, autoplay: true, autoplayInterval: 2000, showBullets: true },
+};
+
+export const MultipleItemsPerView: Story = {
+  name: '3 items per view',
+  args: { data: slides, itemsPerView: 3, showNavButtons: true, gap: 16 },
+};
+
+export const FullWidth: Story = {
+  args: { data: slides, isFullWidth: true, showNavButtons: true, showBullets: true },
 };

package/src/components/Columns/stories.tsx

@@ -3,31 +3,115 @@ import React from 'react';
 
 import { Columns } from '.';
 
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta: Meta<typeof Columns> = {
   title: '1. Layout / Columns',
   component: Columns,
   parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: 'centered',
+    layout: 'fullscreen',
   },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ['autodocs'],
-  // More on argTypes: https://storybook.js.org/docs/api/argtypes
-  argTypes: {},
-  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+  argTypes: {
+    align: { control: 'select', options: ['left', 'center', 'right'] },
+    vAlign: { control: 'select', options: ['top', 'center', 'bottom', 'stretch'] },
+    reverse: { control: 'boolean' },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ padding: '1rem' }}>
+        <Story />
+      </div>
+    ),
+  ],
 };
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const Default: Story = {
+const col = (label: string, height = '80px') => (
+  <div style={{ background: '#e5e7eb', padding: '1rem', minHeight: height, display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: '4px' }}>
+    {label}
+  </div>
+);
+
+export const TwoEqualColumns: Story = {
+  args: {
+    columns: [1, 1],
+    children: <>{col('Column 1')}{col('Column 2')}</>,
+  },
+};
+
+export const ThreeEqualColumns: Story = {
+  args: {
+    columns: [1, 1, 1],
+    children: <>{col('Column 1')}{col('Column 2')}{col('Column 3')}</>,
+  },
+};
+
+export const FourEqualColumns: Story = {
+  args: {
+    columns: [1, 1, 1, 1],
+    children: <>{col('Col 1')}{col('Col 2')}{col('Col 3')}{col('Col 4')}</>,
+  },
+};
+
+export const AsymmetricTwoThirds: Story = {
+  name: '2/3 + 1/3',
+  args: {
+    columns: [2, 1],
+    children: <>{col('Main content (2/3)')}{col('Sidebar (1/3)')}</>,
+  },
+};
+
+export const AsymmetricThreeQuarters: Story = {
+  name: '3/4 + 1/4',
+  args: {
+    columns: [3, 1],
+    children: <>{col('Main (3/4)')}{col('Side (1/4)')}</>,
+  },
+};
+
+export const AlignCenter: Story = {
+  args: {
+    columns: [1, 1],
+    align: 'center',
+    children: <>{col('Left')}{col('Right')}</>,
+  },
+};
+
+export const VAlignCenter: Story = {
+  args: {
+    columns: [1, 1],
+    vAlign: 'center',
+    children: (
+      <>
+        {col('Short', '60px')}
+        {col('Taller column with more content', '140px')}
+      </>
+    ),
+  },
+};
+
+export const VAlignStretch: Story = {
+  args: {
+    columns: [1, 1],
+    vAlign: 'stretch',
+    children: (
+      <>
+        {col('Short', '60px')}
+        {col('Taller column', '140px')}
+      </>
+    ),
+  },
+};
+
+export const Reversed: Story = {
   args: {
+    columns: [2, 1],
+    reverse: true,
     children: (
       <>
-        <div>Col 1</div>
-        <div>Col 2</div>
+        {col('First in DOM (shown right)')}
+        {col('Second in DOM (shown left)')}
       </>
     ),
   },