@flightlesslabs/dodo-ui 0.21.0 → 0.22.1

package/src/lib/components/Layout/Grid/Column/Column.scss

@@ -0,0 +1,78 @@
+// Grid-Column
+@use '../../../../styles/global/breakpoints' as breakpoints;
+@use 'sass:math';
+@use 'sass:map';
+
+// ----------------------------------------
+// Config
+// ----------------------------------------
+
+$grid-columns: 12;
+
+$breakpoint-keys: (default, sm, md, lg, xl, xxl);
+
+// ----------------------------------------
+// Function
+// ----------------------------------------
+
+@function col($n) {
+  @return math.div(100%, $grid-columns) * $n;
+}
+
+// ----------------------------------------
+// Column map
+// ----------------------------------------
+
+$column-size: ();
+
+@for $i from 1 through $grid-columns {
+  $column-size: map.set($column-size, $i, col($i));
+}
+
+// ----------------------------------------
+// Mixin (core logic)
+// ----------------------------------------
+
+@mixin column-styles($bp) {
+  @each $name, $size in $column-size {
+    &--#{$name} {
+      @if $bp == default {
+        width: $size;
+        flex: initial;
+      } @else {
+        @include breakpoints.up($bp) {
+          width: $size;
+          flex: initial;
+        }
+      }
+    }
+  }
+
+  &--flex {
+    @if $bp == default {
+      flex: 1;
+    } @else {
+      @include breakpoints.up($bp) {
+        flex: 1;
+      }
+    }
+  }
+}
+
+// ----------------------------------------
+// Component
+// ----------------------------------------
+
+.dodo-ui-Grid-Column {
+  display: block;
+  min-width: 0;
+  padding: calc(var(--dodo-ui-space) * var(--Grid-gap));
+
+  &.column-size {
+    @each $bp in $breakpoint-keys {
+      &--#{$bp} {
+        @include column-styles($bp);
+      }
+    }
+  }
+}

package/src/lib/components/Layout/Grid/Column/Column.stories.svelte

@@ -0,0 +1,66 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Column, { gridColumnSizeOptions } from './Column.svelte';
+  import type { GridColumnProps } from './Column.svelte';
+  import type { ArgTypes } from 'storybook/internal/csf';
+
+  // ------------------------------
+  // Storybook ArgTypes
+  // ------------------------------
+  export const storyColumnArgTypes: Partial<ArgTypes<GridColumnProps>> = {
+    // ------------------------------
+    // Core
+    // ------------------------------
+    children: { table: { category: 'API', subcategory: 'Base' } },
+    class: { table: { category: 'API', subcategory: 'Base' } },
+
+    // ------------------------------
+    // Size
+    // ------------------------------
+    size: {
+      control: { type: 'select' },
+      options: gridColumnSizeOptions,
+      table: { category: 'API', subcategory: 'Size', defaultValue: { summary: '12' } },
+    },
+    sm: {
+      control: { type: 'select' },
+      options: gridColumnSizeOptions,
+      table: { category: 'API', subcategory: 'Size' },
+    },
+    md: {
+      control: { type: 'select' },
+      options: gridColumnSizeOptions,
+      table: { category: 'API', subcategory: 'Size' },
+    },
+    lg: {
+      control: { type: 'select' },
+      options: gridColumnSizeOptions,
+      table: { category: 'API', subcategory: 'Size' },
+    },
+    xl: {
+      control: { type: 'select' },
+      options: gridColumnSizeOptions,
+      table: { category: 'API', subcategory: 'Size' },
+    },
+    xxl: {
+      control: { type: 'select' },
+      options: gridColumnSizeOptions,
+      table: { category: 'API', subcategory: 'Size' },
+    },
+  };
+
+  // ------------------------------
+  // Storybook Meta
+  // ------------------------------
+  const { Story } = defineMeta({
+    component: Column,
+    tags: ['autodocs'],
+    argTypes: storyColumnArgTypes,
+  });
+</script>
+
+<!-- ------------------------------ -->
+<!-- Stories -->
+<!-- ------------------------------ -->
+
+<Story name="Default">Hello there</Story>

package/src/lib/components/Layout/Grid/Column/Column.svelte

@@ -0,0 +1,79 @@
+<script lang="ts" module>
+  import type { Snippet } from 'svelte';
+
+  export const GRID_COLUMN_BREAKPOINT = {
+    numerical: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+    flex: ['flex'],
+  } as const;
+
+  export type GridColumnSizeNumerical = (typeof GRID_COLUMN_BREAKPOINT.numerical)[number];
+  type GridColumnSizeFlex = (typeof GRID_COLUMN_BREAKPOINT.flex)[number];
+  export type GridColumnSize = GridColumnSizeNumerical | GridColumnSizeFlex;
+
+  export const gridColumnSizeOptions = [
+    ...GRID_COLUMN_BREAKPOINT.numerical,
+    ...GRID_COLUMN_BREAKPOINT.flex,
+  ] as const satisfies readonly GridColumnSize[];
+
+  export const gridColumnSizeNumericalOptions = GRID_COLUMN_BREAKPOINT.numerical;
+
+  export interface GridColumnProps {
+    /** Custom CSS class names */
+    class?: string;
+
+    /** Column contents go here */
+    children?: Snippet;
+
+    /** GridColumn ref */
+    ref?: HTMLDivElement | null;
+
+    /** Breakpoint: size (default unit) */
+    size?: GridColumnSize;
+
+    /** Breakpoint: sm */
+    sm?: GridColumnSize;
+
+    /** Breakpoint: md */
+    md?: GridColumnSize;
+
+    /** Breakpoint: lg */
+    lg?: GridColumnSize;
+
+    /** Breakpoint: xl */
+    xl?: GridColumnSize;
+
+    /** Breakpoint: xxl */
+    xxl?: GridColumnSize;
+  }
+</script>
+
+<script lang="ts">
+  let {
+    class: className = '',
+    ref = $bindable(null),
+    children,
+    size = 12,
+    sm,
+    md,
+    lg,
+    xl,
+    xxl,
+  }: GridColumnProps = $props();
+
+  const classes = $derived(
+    [
+      'dodo-ui-Grid-Column',
+      `column-size--default--${size}`,
+      sm ? `column-size--sm--${sm}` : '',
+      md ? `column-size--md--${md}` : '',
+      lg ? `column-size--lg--${lg}` : '',
+      xl ? `column-size--xl--${xl}` : '',
+      xxl ? `column-size--xxl--${xxl}` : '',
+      className,
+    ].filter(Boolean),
+  );
+</script>
+
+<div class={classes.join(' ')} bind:this={ref}>
+  {@render children?.()}
+</div>

package/src/lib/components/Layout/Grid/Grid.scss

@@ -0,0 +1,8 @@
+// Grid
+
+.dodo-ui-Grid {
+  display: flex;
+  width: 100%;
+  flex-wrap: wrap;
+  margin: calc(calc(var(--dodo-ui-space) * var(--Grid-gap)) * -1);
+}

package/src/lib/components/Layout/Grid/Grid.stories.svelte

@@ -0,0 +1,192 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Grid from './Grid.svelte';
+  import type { GridProps } from './Grid.svelte';
+  import type { ArgTypes } from 'storybook/internal/csf';
+  import Column from './Column/Column.svelte';
+  import Card from '../Card/Card.svelte';
+  import Row from './Row/Row.svelte';
+
+  const description = `
+  a set of components for your basic "12 column grid" needs
+
+ \`\`\`ts
+ import { Grid, Column, Row } from '@flightlesslabs/dodo-ui';
+ \`\`\`
+ `;
+
+  // ------------------------------
+  // Storybook ArgTypes
+  // ------------------------------
+  export const storyGridArgTypes: Partial<ArgTypes<GridProps>> = {
+    // ------------------------------
+    // Core
+    // ------------------------------
+    children: { table: { category: 'API', subcategory: 'Base' } },
+    class: { table: { category: 'API', subcategory: 'Base' } },
+    gap: { table: { category: 'API', subcategory: 'Base', defaultValue: { summary: '1' } } },
+  };
+
+  // ------------------------------
+  // Storybook Meta
+  // ------------------------------
+  const { Story } = defineMeta({
+    component: Grid,
+    tags: ['autodocs'],
+    argTypes: storyGridArgTypes,
+    parameters: {
+      docs: {
+        description: {
+          component: description,
+        },
+      },
+    },
+  });
+</script>
+
+<!-- ------------------------------ -->
+<!-- Stories -->
+<!-- ------------------------------ -->
+
+<!-- Basic 12 column grid -->
+<Story name="Default">
+  <Column sm={4}>Hello there</Column>
+  <Column sm={4}>Hello there</Column>
+  <Column sm={4}>Hello there</Column>
+  <Column sm={4}>Hello there</Column>
+  <Column sm={4}>Hello there</Column>
+</Story>
+
+<Story name="Example">
+  <Column sm={4}>
+    <Card color="primary">
+      <p>Hello there</p>
+    </Card>
+  </Column>
+  <Column sm={4}>
+    <Card color="primary">
+      <p>Hello there</p>
+    </Card>
+  </Column>
+  <Column sm={4}>
+    <Card color="primary">
+      <p>Hello there</p>
+    </Card>
+  </Column>
+  <Column sm={4}>
+    <Card color="primary">
+      <p>Hello there</p>
+    </Card>
+  </Column>
+</Story>
+
+<Story name="Grid Row">
+  <Row>
+    <Column sm={6} md={4} lg={3}>
+      <Card color="primary">
+        <p>Hello there</p>
+      </Card>
+    </Column>
+    <Column sm={6} md={4} lg={3}>
+      <Card color="primary">
+        <p>Hello there</p>
+      </Card>
+    </Column>
+    <Column sm={6} md={4} lg={3}>
+      <Card color="primary">
+        <p>Hello there</p>
+      </Card>
+    </Column>
+  </Row>
+  <Row>
+    <Column sm={6} md={4} lg={3}>
+      <Card color="primary">
+        <p>Hello there</p>
+      </Card>
+    </Column>
+    <Column sm={6} md={4} lg={3}>
+      <Card color="primary">
+        <p>Hello there</p>
+      </Card>
+    </Column>
+    <Column sm={6} md={4} lg={3}>
+      <Card color="primary">
+        <p>Hello there</p>
+      </Card>
+    </Column>
+  </Row>
+</Story>
+
+<Story name="Gap" args={{ gap: 2 }}>
+  <Column sm={4}>
+    <Card color="primary">
+      <p>Hello there</p>
+    </Card>
+  </Column>
+  <Column sm={4}>
+    <Card color="primary">
+      <p>Hello there</p>
+    </Card>
+  </Column>
+  <Column sm={4}>
+    <Card color="primary">
+      <p>Hello there</p>
+    </Card>
+  </Column>
+  <Column sm={4}>
+    <Card color="primary">
+      <p>Hello there</p>
+    </Card>
+  </Column>
+</Story>
+
+<Story name="Responsive">
+  <Column sm={6} md={4} lg={3}>
+    <Card color="primary">
+      <p>Hello there</p>
+    </Card>
+  </Column>
+  <Column sm={6} md={4} lg={3}>
+    <Card color="primary">
+      <p>Hello there</p>
+    </Card>
+  </Column>
+  <Column sm={6} md={4} lg={3}>
+    <Card color="primary">
+      <p>Hello there</p>
+    </Card>
+  </Column>
+  <Column sm={6} md={4} lg={3}>
+    <Card color="primary">
+      <p>Hello there</p>
+    </Card>
+  </Column>
+  <Column sm={6} md={4} lg={3}>
+    <Card color="primary">
+      <p>Hello there</p>
+    </Card>
+  </Column>
+  <Column sm={6} md={4} lg={3}>
+    <Card color="primary">
+      <p>Hello there</p>
+    </Card>
+  </Column>
+</Story>
+
+<Story name="Flex">
+  <Column md="flex">
+    <Card color="primary">
+      <p>Hello there</p>
+    </Card>
+  </Column>
+  <Column md={2}>
+    <Card color="primary">
+      <p>Hello there</p>
+    </Card>
+  </Column>
+  <Column md={2}>
+    <Card color="primary">
+      <p>Hello there</p>
+    </Card>
+  </Column>
+</Story>

package/src/lib/components/Layout/Grid/Grid.svelte

@@ -0,0 +1,32 @@
+<script lang="ts" module>
+  import type { Snippet } from 'svelte';
+
+  export interface GridProps {
+    /** Custom CSS class names */
+    class?: string;
+
+    /** Grid contents go here*/
+    children?: Snippet;
+
+    /** Grid spacing, affects Coulumns */
+    gap?: number;
+  }
+</script>
+
+<script lang="ts">
+  let { class: className = '', gap = 1, children }: GridProps = $props();
+
+  function normalizeGap(value: number) {
+    return value === 0 ? 0 : value / 2;
+  }
+
+  const gapHalf = $derived(normalizeGap(gap));
+
+  const classes = $derived(['dodo-ui-Grid', className].filter(Boolean));
+
+  const inlineStyles = $derived([`--Grid-gap: ${gapHalf}`].filter(Boolean));
+</script>
+
+<div class={classes.join(' ')} style={inlineStyles.join(';')}>
+  {@render children?.()}
+</div>

package/src/lib/components/Layout/Grid/Row/Row.scss

@@ -0,0 +1,7 @@
+// Grid-Row
+
+.dodo-ui-Grid-Row {
+  display: flex;
+  width: 100%;
+  flex-wrap: wrap;
+}

package/src/lib/components/Layout/Grid/Row/Row.stories.svelte

@@ -0,0 +1,39 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Row from './Row.svelte';
+  import type { GridRowProps } from './Row.svelte';
+  import type { ArgTypes } from 'storybook/internal/csf';
+  import Column from '../Column/Column.svelte';
+
+  // ------------------------------
+  // Storybook ArgTypes
+  // ------------------------------
+  export const storyRowArgTypes: Partial<ArgTypes<GridRowProps>> = {
+    // ------------------------------
+    // Core
+    // ------------------------------
+    children: { table: { category: 'API', subcategory: 'Base' } },
+    class: { table: { category: 'API', subcategory: 'Base' } },
+  };
+
+  // ------------------------------
+  // Storybook Meta
+  // ------------------------------
+  const { Story } = defineMeta({
+    component: Row,
+    tags: ['autodocs'],
+    argTypes: storyRowArgTypes,
+  });
+</script>
+
+<!-- ------------------------------ -->
+<!-- Stories -->
+<!-- ------------------------------ -->
+
+<Story name="Default">
+  <Column sm={4}>Hello there</Column>
+  <Column sm={4}>Hello there</Column>
+  <Column sm={4}>Hello there</Column>
+  <Column sm={4}>Hello there</Column>
+  <Column sm={4}>Hello there</Column>
+</Story>

package/src/lib/components/Layout/Grid/Row/Row.svelte

@@ -0,0 +1,21 @@
+<script lang="ts" module>
+  import type { Snippet } from 'svelte';
+
+  export interface GridRowProps {
+    /** Custom CSS class names */
+    class?: string;
+
+    /** GridRow contents go here*/
+    children?: Snippet;
+  }
+</script>
+
+<script lang="ts">
+  let { class: className = '', children }: GridRowProps = $props();
+
+  const classes = $derived(['dodo-ui-Grid-Row', className].filter(Boolean));
+</script>
+
+<div class={classes.join(' ')}>
+  {@render children?.()}
+</div>

package/src/lib/components/Layout/Theme/Theme.stories.svelte

@@ -5,6 +5,14 @@
   import type { ArgTypes } from 'storybook/internal/csf';
   import { componentThemeOptions } from '$lib/attributes/theme.js';
 
+  const description = `
+    Wrap your app at the root with Theme to provide a consistent light or dark class (based on system or override) to all child components
+
+ \`\`\`ts
+ import { Theme } from '@flightlesslabs/dodo-ui';
+ \`\`\`
+ `;
+
   /**
    * Storybook controls for Theme
    */
@@ -25,6 +33,13 @@
     component: Theme,
     tags: ['autodocs'],
     argTypes: ThemeArgTypes,
+    parameters: {
+      docs: {
+        description: {
+          component: description,
+        },
+      },
+    },
   });
 </script>
 
@@ -32,8 +47,7 @@
 <!-- Stories -->
 <!-- ------------------------------ -->
 
-<!-- Wrap your app at the root with Theme to provide a consistent light or dark class (based on system or override) to all child components. -->
-<Story name="Auto"></Story>
+<Story name="Default"></Story>
 
 <Story name="Light" args={{ type: 'light' }}></Story>
 

package/src/lib/components/Layout/Theme/ThemeSystem/index.mdx

@@ -1,5 +1,3 @@
-import { Source } from '@storybook/addon-docs/blocks';
-
 # 🎨 Theme System
 
 A lightweight theme system built using context + local store.
@@ -8,25 +6,17 @@ A lightweight theme system built using context + local store.
 
 ### 📦 Import
 
-<Source
-  dark
-  language="ts"
-  code={`
+```ts
 import { useThemeContext } from '@flightlesslabs/dodo-ui';
-`}
-/>
+```
 
 Provides access to the active theme.
 
 ### Usage
 
-<Source
-  dark
-  language="ts"
-  code={`
+```ts
 const { theme } = useThemeContext();
-`}
-/>
+```
 
 ## 🏪 Theme Store
 
@@ -34,20 +24,12 @@ Global theme state.
 
 ### 📦 Import
 
-<Source
-  dark
-  language="ts"
-  code={`
+```ts
 import { useThemeStore } from '@flightlesslabs/dodo-ui';
-`}
-/>
+```
 
 ### Read
 
-<Source
-  dark
-  language="ts"
-  code={`
+```ts
 const theme = useThemeStore.theme;
-`}
-/>
+```

package/src/lib/index.ts

@@ -120,6 +120,23 @@ export {
   type CardProps,
 } from './components/Layout/Card/Card.svelte';
 
+/**
+ * Grid component and related prop types.
+ */
+export { default as Grid, type GridProps } from './components/Layout/Grid/Grid.svelte';
+
+export {
+  GRID_COLUMN_BREAKPOINT,
+  default as Column,
+  gridColumnSizeOptions,
+  gridColumnSizeNumericalOptions,
+  type GridColumnProps,
+  type GridColumnSizeNumerical,
+  type GridColumnSize,
+} from './components/Layout/Grid/Column/Column.svelte';
+
+export { default as Row, type GridRowProps } from './components/Layout/Grid/Row/Row.svelte';
+
 // =====================================================
 // Info Components – Public API
 // =====================================================

package/src/lib/styles/components.scss

@@ -12,3 +12,6 @@
 @use '../components/Form/Switch/Switch.scss';
 @use '../components/Form/Select/Select.scss';
 @use '../components/Form/DatePicker/DatePicker.scss';
+@use '../components/Layout/Grid/Grid.scss';
+@use '../components/Layout/Grid/Column/Column.scss';
+@use '../components/Layout/Grid/Row/Row.scss';