@flightlesslabs/dodo-ui 0.20.0 → 0.22.0

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

@@ -0,0 +1,177 @@
+<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';
+
+  // ------------------------------
+  // 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,
+  });
+</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/ThemeSystem/index.mdx

@@ -1,53 +1,53 @@
-import { Source } from '@storybook/addon-docs/blocks';
-
-# 🎨 Theme System
-
-A lightweight theme system built using context + local store.
-
-## 🧩 Theme Context
-
-### 📦 Import
-
-<Source
-  dark
-  language="ts"
-  code={`
-import { useThemeContext } from '@flightlesslabs/dodo-ui';
-`}
-/>
-
-Provides access to the active theme.
-
-### Usage
-
-<Source
-  dark
-  language="ts"
-  code={`
-const { theme } = useThemeContext();
-`}
-/>
-
-## 🏪 Theme Store
-
-Global theme state.
-
-### 📦 Import
-
-<Source
-  dark
-  language="ts"
-  code={`
-import { useThemeStore } from '@flightlesslabs/dodo-ui';
-`}
-/>
-
-### Read
-
-<Source
-  dark
-  language="ts"
-  code={`
-const theme = useThemeStore.theme;
-`}
-/>
+import { Source } from '@storybook/addon-docs/blocks';
+
+# 🎨 Theme System
+
+A lightweight theme system built using context + local store.
+
+## 🧩 Theme Context
+
+### 📦 Import
+
+<Source
+  dark
+  language="ts"
+  code={`
+import { useThemeContext } from '@flightlesslabs/dodo-ui';
+`}
+/>
+
+Provides access to the active theme.
+
+### Usage
+
+<Source
+  dark
+  language="ts"
+  code={`
+const { theme } = useThemeContext();
+`}
+/>
+
+## 🏪 Theme Store
+
+Global theme state.
+
+### 📦 Import
+
+<Source
+  dark
+  language="ts"
+  code={`
+import { useThemeStore } from '@flightlesslabs/dodo-ui';
+`}
+/>
+
+### Read
+
+<Source
+  dark
+  language="ts"
+  code={`
+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

@@ -3,7 +3,6 @@
 @use '../components/Form/UtilityButton/UtilityButton.scss';
 @use '../components/Form/Button/Button.scss';
 @use '../components/Form/InputEnclosure/InputEnclosure.scss';
-@use '../components/Form/TextInput/TextInput.scss';
 @use '../components/Form/Label/Label.scss';
 @use '../components/Form/FormField/FormField.scss';
 @use '../components/Form/CheckEnclosure/CheckEnclosure.scss';
@@ -13,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';

package/dist/components/Form/TextInput/TextInput.scss

@@ -1,34 +0,0 @@
-// ----------------------------------------
-// Component CSS
-// ----------------------------------------
-.dodo-ui-TextInput {
-  flex: 1;
-  border: 0;
-  outline: 0;
-  height: 100%;
-  background-color: transparent;
-  font-family: inherit;
-  color: inherit;
-  letter-spacing: 0.3px;
-  margin: 0;
-
-  // ----------------------------------------
-  // Sizes
-  // ----------------------------------------
-  &.size {
-    &--normal {
-      font-size: 1rem;
-      padding: 0 calc(var(--dodo-ui-space-small) * 2);
-    }
-
-    &--small {
-      padding: 0 var(--dodo-ui-space);
-      font-size: 0.9rem;
-    }
-
-    &--large {
-      font-size: 1.1rem;
-      padding: 0 calc(var(--dodo-ui-space) * 2);
-    }
-  }
-}

package/src/lib/components/Form/TextInput/TextInput.scss

@@ -1,34 +0,0 @@
-// ----------------------------------------
-// Component CSS
-// ----------------------------------------
-.dodo-ui-TextInput {
-  flex: 1;
-  border: 0;
-  outline: 0;
-  height: 100%;
-  background-color: transparent;
-  font-family: inherit;
-  color: inherit;
-  letter-spacing: 0.3px;
-  margin: 0;
-
-  // ----------------------------------------
-  // Sizes
-  // ----------------------------------------
-  &.size {
-    &--normal {
-      font-size: 1rem;
-      padding: 0 calc(var(--dodo-ui-space-small) * 2);
-    }
-
-    &--small {
-      padding: 0 var(--dodo-ui-space);
-      font-size: 0.9rem;
-    }
-
-    &--large {
-      font-size: 1.1rem;
-      padding: 0 calc(var(--dodo-ui-space) * 2);
-    }
-  }
-}