@latte-macchiat-io/latte-vanilla-components 0.0.185 → 0.0.186

package/src/components/Section/stories.tsx

@@ -0,0 +1,344 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Section } from './Section';
+import { Button } from '../Button/Button';
+
+const meta: Meta<typeof Section> = {
+  title: 'Layout Components/Section',
+  component: Section,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: `
+The Section component provides consistent spacing and layout for content sections throughout your application.
+
+## Features
+- Consistent vertical spacing and padding
+- Multiple alignment options (left, center, right)
+- Dark mode support
+- Full height option for hero sections
+- Flexible spacing options (none, small, medium, large)
+- Semantic HTML elements (section, div, main, article, aside)
+- Theme-aware styling
+- Responsive design
+        `,
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    align: {
+      control: 'select',
+      options: ['left', 'center', 'right'],
+      description: 'Text alignment for the section content',
+    },
+    isDark: {
+      control: 'boolean',
+      description: 'Apply dark background styling',
+    },
+    isFullHeight: {
+      control: 'boolean',
+      description: 'Make the section take full viewport height',
+    },
+    spacing: {
+      control: 'select',
+      options: ['none', 'small', 'medium', 'large'],
+      description: 'Amount of vertical padding',
+    },
+    as: {
+      control: 'select',
+      options: ['section', 'div', 'main', 'article', 'aside'],
+      description: 'HTML element to render as',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Section>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <>
+        <h2>Default Section</h2>
+        <p>This is a default section with standard spacing and alignment.</p>
+        <Button variant="primary">Call to Action</Button>
+      </>
+    ),
+  },
+};
+
+export const CenterAligned: Story = {
+  args: {
+    align: 'center',
+    children: (
+      <>
+        <h2>Centered Section</h2>
+        <p>This section has center-aligned content, perfect for hero sections or call-to-action areas.</p>
+        <Button variant="primary">Get Started</Button>
+      </>
+    ),
+  },
+};
+
+export const RightAligned: Story = {
+  args: {
+    align: 'right',
+    children: (
+      <>
+        <h2>Right Aligned Section</h2>
+        <p>This section has right-aligned content.</p>
+        <Button variant="secondary">Learn More</Button>
+      </>
+    ),
+  },
+};
+
+export const DarkSection: Story = {
+  args: {
+    isDark: true,
+    align: 'center',
+    children: (
+      <>
+        <h2 style={{ color: 'white' }}>Dark Section</h2>
+        <p style={{ color: 'rgba(255, 255, 255, 0.8)' }}>
+          This section has a dark background, great for creating visual contrast.
+        </p>
+        <Button variant="primary">Get Started</Button>
+      </>
+    ),
+  },
+};
+
+export const FullHeight: Story = {
+  args: {
+    isFullHeight: true,
+    align: 'center',
+    children: (
+      <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', height: '100%' }}>
+        <h1>Full Height Hero Section</h1>
+        <p style={{ fontSize: '1.2rem', marginBottom: '2rem', maxWidth: '600px' }}>
+          This section takes up the full viewport height, perfect for hero sections and landing page intros.
+        </p>
+        <div style={{ display: 'flex', gap: '1rem' }}>
+          <Button variant="primary" size="large">Get Started</Button>
+          <Button variant="secondary" size="large">Learn More</Button>
+        </div>
+      </div>
+    ),
+  },
+};
+
+export const NoSpacing: Story = {
+  args: {
+    spacing: 'none',
+    children: (
+      <>
+        <h2>No Spacing Section</h2>
+        <p>This section has no vertical padding, useful when you want to control spacing manually.</p>
+      </>
+    ),
+  },
+};
+
+export const SmallSpacing: Story = {
+  args: {
+    spacing: 'small',
+    children: (
+      <>
+        <h2>Small Spacing Section</h2>
+        <p>This section has reduced vertical padding for tighter layouts.</p>
+      </>
+    ),
+  },
+};
+
+export const LargeSpacing: Story = {
+  args: {
+    spacing: 'large',
+    children: (
+      <>
+        <h2>Large Spacing Section</h2>
+        <p>This section has increased vertical padding for more breathing room.</p>
+      </>
+    ),
+  },
+};
+
+export const AsMain: Story = {
+  args: {
+    as: 'main',
+    children: (
+      <>
+        <h1>Main Content Area</h1>
+        <p>This section is rendered as a main element for semantic HTML.</p>
+      </>
+    ),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Section rendered as a main element for the primary content area.',
+      },
+    },
+  },
+};
+
+export const AsArticle: Story = {
+  args: {
+    as: 'article',
+    children: (
+      <>
+        <h2>Article Section</h2>
+        <p>This section is rendered as an article element for standalone content.</p>
+        <p>Perfect for blog posts, news articles, or any self-contained content.</p>
+      </>
+    ),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Section rendered as an article element for standalone content.',
+      },
+    },
+  },
+};
+
+// Real-world Examples
+export const HeroSection: Story = {
+  render: () => (
+    <Section isFullHeight={true} align="center" backgroundColor="primary">
+      <div style={{ 
+        color: 'white', 
+        textAlign: 'center',
+        display: 'flex', 
+        flexDirection: 'column', 
+        justifyContent: 'center', 
+        alignItems: 'center', 
+        height: '100%',
+        maxWidth: '800px',
+        margin: '0 auto'
+      }}>
+        <h1 style={{ fontSize: '3rem', marginBottom: '1rem' }}>
+          Welcome to Our Platform
+        </h1>
+        <p style={{ fontSize: '1.25rem', marginBottom: '3rem', opacity: 0.9 }}>
+          Build amazing applications with our comprehensive component library. 
+          Get started in minutes and scale to millions of users.
+        </p>
+        <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap', justifyContent: 'center' }}>
+          <Button variant="secondary" size="large">Get Started Free</Button>
+          <Button variant="ghost" size="large" style={{ borderColor: 'white', color: 'white' }}>
+            Watch Demo
+          </Button>
+        </div>
+      </div>
+    </Section>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'A complete hero section example with full height and centered content.',
+      },
+    },
+  },
+};
+
+export const FeatureSection: Story = {
+  render: () => (
+    <Section spacing="large">
+      <div style={{ maxWidth: '1200px', margin: '0 auto' }}>
+        <div style={{ textAlign: 'center', marginBottom: '3rem' }}>
+          <h2 style={{ fontSize: '2.5rem', marginBottom: '1rem' }}>
+            Why Choose Our Components?
+          </h2>
+          <p style={{ fontSize: '1.1rem', color: 'var(--latte-colors-textSecondary)', maxWidth: '600px', margin: '0 auto' }}>
+            Built with modern best practices, accessibility in mind, and developer experience at the forefront.
+          </p>
+        </div>
+        
+        <div style={{ 
+          display: 'grid', 
+          gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', 
+          gap: '2rem' 
+        }}>
+          {[
+            {
+              title: '🎨 Theme System',
+              description: 'Flexible theming with light/dark modes and complete customization options.'
+            },
+            {
+              title: '⚡ Performance',
+              description: 'Zero-runtime CSS-in-JS with Vanilla Extract for optimal performance.'
+            },
+            {
+              title: '🔒 Type Safety',
+              description: 'Full TypeScript support with excellent IntelliSense and autocomplete.'
+            },
+            {
+              title: '📱 Responsive',
+              description: 'Mobile-first design with responsive utilities and breakpoint support.'
+            },
+            {
+              title: '♿ Accessible',
+              description: 'WCAG compliant components with proper ARIA attributes and keyboard navigation.'
+            },
+            {
+              title: '🚀 Developer Experience',
+              description: 'Great documentation, hot reloading, and intuitive component APIs.'
+            }
+          ].map((feature, index) => (
+            <div key={index} style={{ 
+              padding: '2rem',
+              backgroundColor: 'var(--latte-colors-surface)',
+              borderRadius: 'var(--latte-radii-lg)',
+              border: '1px solid var(--latte-colors-border)'
+            }}>
+              <h3 style={{ marginBottom: '1rem', fontSize: '1.25rem' }}>
+                {feature.title}
+              </h3>
+              <p style={{ color: 'var(--latte-colors-textSecondary)' }}>
+                {feature.description}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </Section>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'A feature showcase section with grid layout and cards.',
+      },
+    },
+  },
+};
+
+export const CallToActionSection: Story = {
+  render: () => (
+    <Section isDark={true} align="center" spacing="large">
+      <div style={{ color: 'white', textAlign: 'center', maxWidth: '600px', margin: '0 auto' }}>
+        <h2 style={{ fontSize: '2.5rem', marginBottom: '1rem' }}>
+          Ready to Get Started?
+        </h2>
+        <p style={{ fontSize: '1.1rem', marginBottom: '2rem', opacity: 0.9 }}>
+          Join thousands of developers building amazing applications with our component library.
+        </p>
+        <div style={{ display: 'flex', gap: '1rem', justifyContent: 'center', flexWrap: 'wrap' }}>
+          <Button variant="primary" size="large">Start Building</Button>
+          <Button variant="ghost" size="large" style={{ borderColor: 'white', color: 'white' }}>
+            View Documentation
+          </Button>
+        </div>
+      </div>
+    </Section>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'A call-to-action section with dark background and centered content.',
+      },
+    },
+  },
+};

package/src/index.ts

@@ -86,19 +86,19 @@ export { type TextareaVariants } from './components/Form/TextField/Textarea/Text
 
 export { ToRemove } from './components/ToRemove/ToRemove';
 
-// Theme utilities  
-export { createDarkTheme, createLightTheme, type ThemeOverrides } from './utils/theme';
-export { createCustomLightTheme, createCustomDarkTheme, type ThemeOverrides as CustomThemeOverrides } from './utils/createCustomTheme';
-export { createScopedTheme } from './utils/themeOverrides';
-export { quickTheme, createQuickTheme } from './utils/quickTheme';
-// Theme contract and values
+// Theme System - Core Exports
 export { themeContract } from './theme/contract.css';
 export { baseLightTheme, baseDarkTheme } from './theme/baseThemeValues';
 
-// Pre-built themes (these actually generate CSS variables)
+// Pre-built Themes (Ready to Use)
 export { lightTheme } from './themes/light.css';
 export { darkTheme } from './themes/dark.css';
-export { defaultTheme } from './themes/default.css';
 
-// Theme utilities
-export { createThemeOverride, getThemeContract, getThemeValues, toggleTheme, setTheme, getCurrentTheme, type ThemeValues } from './theme/utils';
+// Quick Theme Utilities (For Rapid Development)
+export { quickTheme, createQuickTheme } from './utils/quickTheme';
+
+// Advanced Theme Creation
+export { createDarkTheme, createLightTheme, type ThemeOverrides } from './utils/theme';
+
+// Theme Management Utilities
+export { toggleTheme, setTheme, getCurrentTheme } from './theme/utils';

package/src/components/Actions/stories.tsx

@@ -1,34 +0,0 @@
-// import type { Meta, StoryObj } from '@storybook/react';
-
-// import { Actions, Button } from '../../index';
-// import { actionsStyle } from './styles.css';
-
-// import { defaultTheme } from '../../assets/styles/default-theme';
-// import { buttonStyle } from '../Button/styles.css';
-
-// // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-// const meta: Meta<typeof Actions> = {
-//   title: 'Latte Components / 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
-// };
-
-// 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 = {
-//   args: {
-//     theme: defaultTheme,
-//     className: actionsStyle,
-//     children: <Button className={buttonStyle}>Button</Button>,
-//   },
-// };

package/src/components/ConsentCookie/stories.tsx

@@ -1,28 +0,0 @@
-// import type { Meta, StoryObj } from '@storybook/react';
-//
-// import { ConsentCookie } from '.';
-//
-// // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-// const meta: Meta<typeof ConsentCookie> = {
-//   title: 'Latte Components / 5. Consent / Cookie',
-//   component: ConsentCookie,
-//   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
-// };
-//
-// 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 = {
-//   args: {
-//     children: 'Cookies with your latte? In accordance with our cookies policy',
-//   },
-// };

package/src/components/Form/Row/stories.tsx

@@ -1,41 +0,0 @@
-// import type { Meta, StoryObj } from '@storybook/react';
-//
-// import { TextField } from '../TextField';
-//
-// import { Row } from '.';
-//
-// // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-// const meta: Meta<typeof Row> = {
-//   title: 'Latte Components / Form / Row',
-//   component: Row,
-//   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
-// };
-//
-// 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 = {
-//   args: {
-//     children: <TextField name="hello" label="hello" />,
-//   },
-// };
-//
-// export const MultipleChildren: Story = {
-//   args: {
-//     children: (
-//       <>
-//         <TextField name="hello" label="hello" />
-//         <TextField name="hello" label="hello" />
-//       </>
-//     ),
-//   },
-// };

package/src/components/Form/TextField/Textarea/stories.tsx

@@ -1,44 +0,0 @@
-// import type { Meta, StoryObj } from '@storybook/react';
-//
-// import { TextFieldTextarea } from '../../../../index';
-//
-// // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-// const meta: Meta<typeof TextFieldTextarea> = {
-//   title: 'Latte Components / Form / Text Field / Textarea',
-//   component: TextFieldTextarea,
-//   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
-// };
-//
-// 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 = {
-//   args: {},
-// };
-//
-// export const Placeholder: Story = {
-//   args: {
-//     placeholder: "It's a placeholder",
-//   },
-// };
-//
-// export const Disabled: Story = {
-//   args: {
-//     disabled: true,
-//   },
-// };
-//
-// export const Rows10: Story = {
-//   args: {
-//     rows: 10,
-//   },
-// };

package/src/components/NavSocial/stories.tsx

@@ -1,33 +0,0 @@
-// import type { Meta, StoryObj } from '@storybook/react';
-//
-// import { NavSocial } from '../../index';
-//
-// // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-// const meta: Meta<typeof NavSocial> = {
-//   title: 'Latte Components / 6. Nav / Social',
-//   component: NavSocial,
-//   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
-// };
-//
-// 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 = {
-//   args: {
-//     navSocial: [
-//       {
-//         name: 'instagram',
-//         link: 'https://www.instagram.com/',
-//       },
-//     ],
-//   },
-// };

package/src/themes/default.css.ts

@@ -1,20 +0,0 @@
-import { createGlobalTheme } from '@vanilla-extract/css';
-import { themeContract } from '../theme/contract.css';
-import { baseLightTheme } from '../theme/baseThemeValues';
-
-// Create a default theme for quick usage and RAD (Rapid Application Development)
-// This provides a ready-to-use theme without any customization needed
-export const defaultTheme = createGlobalTheme(':root', themeContract, {
-  colors: baseLightTheme.colors,
-  space: baseLightTheme.space,
-  radii: baseLightTheme.radii,
-  fonts: baseLightTheme.fonts,
-  maxWidth: baseLightTheme.maxWidth,
-  fontSizes: baseLightTheme.fontSizes,
-  fontWeights: baseLightTheme.fontWeights,
-  lineHeights: baseLightTheme.lineHeights,
-  shadows: baseLightTheme.shadows,
-  section: baseLightTheme.section,
-  header: baseLightTheme.header,
-  footer: baseLightTheme.footer,
-});

package/src/utils/createCustomTheme.ts

@@ -1,52 +0,0 @@
-import { baseLightTheme, baseDarkTheme } from '../theme/baseThemeValues';
-
-// Type for partial theme overrides
-export type ThemeOverrides = {
-  colors?: Partial<typeof baseLightTheme.colors>;
-  space?: Partial<typeof baseLightTheme.space>;
-  radii?: Partial<typeof baseLightTheme.radii>;
-  fonts?: Partial<typeof baseLightTheme.fonts>;
-  maxWidth?: string;
-  fontSizes?: Partial<typeof baseLightTheme.fontSizes>;
-  fontWeights?: Partial<typeof baseLightTheme.fontWeights>;
-  lineHeights?: Partial<typeof baseLightTheme.lineHeights>;
-  shadows?: Partial<typeof baseLightTheme.shadows>;
-  section?: Partial<typeof baseLightTheme.section>;
-  header?: Partial<typeof baseLightTheme.header>;
-  footer?: Partial<typeof baseLightTheme.footer>;
-};
-
-// Utility to merge overrides with base theme
-export const createCustomLightTheme = (overrides: ThemeOverrides = {}) => {
-  return {
-    colors: { ...baseLightTheme.colors, ...overrides.colors },
-    space: { ...baseLightTheme.space, ...overrides.space },
-    radii: { ...baseLightTheme.radii, ...overrides.radii },
-    fonts: { ...baseLightTheme.fonts, ...overrides.fonts },
-    maxWidth: overrides.maxWidth || `${baseLightTheme.maxWidth}px`,
-    fontSizes: { ...baseLightTheme.fontSizes, ...overrides.fontSizes },
-    fontWeights: { ...baseLightTheme.fontWeights, ...overrides.fontWeights },
-    lineHeights: { ...baseLightTheme.lineHeights, ...overrides.lineHeights },
-    shadows: { ...baseLightTheme.shadows, ...overrides.shadows },
-    section: { ...baseLightTheme.section, ...overrides.section },
-    header: { ...baseLightTheme.header, ...overrides.header },
-    footer: { ...baseLightTheme.footer, ...overrides.footer },
-  };
-};
-
-export const createCustomDarkTheme = (overrides: ThemeOverrides = {}) => {
-  return {
-    colors: { ...baseDarkTheme.colors, ...overrides.colors },
-    space: { ...baseDarkTheme.space, ...overrides.space },
-    radii: { ...baseDarkTheme.radii, ...overrides.radii },
-    fonts: { ...baseDarkTheme.fonts, ...overrides.fonts },
-    maxWidth: overrides.maxWidth || `${baseDarkTheme.maxWidth}px`,
-    fontSizes: { ...baseDarkTheme.fontSizes, ...overrides.fontSizes },
-    fontWeights: { ...baseDarkTheme.fontWeights, ...overrides.fontWeights },
-    lineHeights: { ...baseDarkTheme.lineHeights, ...overrides.lineHeights },
-    shadows: { ...baseDarkTheme.shadows, ...overrides.shadows },
-    section: { ...baseDarkTheme.section, ...overrides.section },
-    header: { ...baseDarkTheme.header, ...overrides.header },
-    footer: { ...baseDarkTheme.footer, ...overrides.footer },
-  };
-};

package/src/utils/themeOverrides.ts

@@ -1,10 +0,0 @@
-import { createGlobalTheme, createThemeContract } from '@vanilla-extract/css';
-import { themeContract } from '../theme/contract.css';
-
-// Create a higher-specificity theme that can override the base themes
-export const themeOverrides = createThemeContract(themeContract);
-
-// Export a utility to create CSS theme overrides with custom selectors
-export const createScopedTheme = (selector: string, values: Partial<typeof themeContract>) => {
-  return createGlobalTheme(selector, themeContract, values as any);
-};