jp-composter 0.1.0

package/src/stories/Typography.mdx

@@ -0,0 +1,454 @@
+import {Meta} from '@storybook/addon-docs/blocks';
+import Frame_65 from '../SliceUI/assets/Frame_65.png';
+
+<Meta title="Tokens/Typography" />
+
+# Typography tokens
+
+<h3 style={{fontWeight: 'normal', fontFamily: 'Lato'}}>
+  Slice’s shape tokens define corner radius and border width to bring
+  consistency to how elements look and feel. By standardizing these values, we
+  create a more unified visual style across buttons, cards, inputs, and other UI
+  components.
+</h3>{' '}
+
+---
+
+# Foundation typography
+
+<h3 style={{fontWeight: 'normal', fontFamily: 'Lato'}}>
+  Lato is our primary typeface, chosen for its clean lines and legibility across
+  digital interfaces.
+</h3>
+<img
+  src={Frame_65}
+  alt="A wall of logos representing different styling technologies"
+/>
+
+<table
+  style={{
+    borderCollapse: 'separate',
+    borderSpacing: 0,
+    width: '100%',
+    borderRadius: '24px',
+    overflow: 'hidden',
+    border: '1px solid #ccc',
+  }}>
+  <thead>
+    <tr>
+      <th
+        style={{
+          borderBottom: '1px solid #ccc',
+          textAlign: 'left',
+          background: '#f9f9f9',
+          borderTopLeftRadius: '24px',
+          borderRight: '1px solid #ccc',
+          padding: '12px 16px',
+          fontWeight: '600',
+          fontSize: '14px',
+          width: '50%',
+        }}>
+        Font Weight
+      </th>
+      <th
+        style={{
+          borderBottom: '1px solid #ccc',
+          padding: '8px',
+          textAlign: 'left',
+          background: '#f9f9f9',
+          borderTopRightRadius: '24px',
+          width: '50%',
+        }}>
+        Token Name
+      </th>
+    </tr>
+  </thead>
+  <tbody>
+    {[
+      {weight: 'Regular', token: 'font-weight-regular'},
+      {weight: 'Medium', token: 'font-weight-medium'},
+      {weight: 'Bold', token: 'font-weight-bold'},
+      {weight: 'Heavy', token: 'font-weight-heavy'},
+      {weight: 'Black', token: 'font-weight-black'},
+    ].map(({weight, token}, i, arr) => (
+      <tr key={token} style={{backgroundColor: '#fff'}}>
+        <td
+          style={{
+            borderRight: '1px solid #fff',
+            borderBottom: i === arr.length - 1 ? 'none' : '1px solid #fff',
+            padding: '8px',
+            borderBottomLeftRadius: i === arr.length - 1 ? '24px' : 0,
+            padding: '12px 16px',
+            borderTop: '1px solid #eee',
+          }}>
+          {weight}
+        </td>
+        <td
+          style={{
+            borderBottom: i === arr.length - 1 ? 'none' : '1px solid #fff',
+            padding: '8px',
+            borderBottomRightRadius: i === arr.length - 1 ? '24px' : 0,
+          }}>
+          {token}
+        </td>
+      </tr>
+    ))}
+  </tbody>
+</table>
+
+<table
+  style={{
+    borderCollapse: 'separate',
+    borderSpacing: 0,
+    width: '100%',
+    borderRadius: '24px',
+    overflow: 'hidden',
+    border: '1px solid #ccc',
+  }}>
+  <thead>
+    <tr>
+      <th
+        style={{
+          borderBottom: '1px solid #ccc',
+          textAlign: 'left',
+          background: '#f9f9f9',
+          borderTopLeftRadius: '24px',
+          borderRight: '1px solid #ccc',
+          padding: '12px 16px',
+          fontWeight: '600',
+          fontSize: '14px',
+          width: '50%',
+        }}>
+        Font Size
+      </th>
+      <th
+        style={{
+          borderBottom: '1px solid #ccc',
+          padding: '12px 16px',
+          textAlign: 'left',
+          background: '#f9f9f9',
+          borderTopRightRadius: '24px',
+          fontWeight: '600',
+          fontSize: '14px',
+          width: '50%',
+        }}>
+        Value
+      </th>
+    </tr>
+  </thead>
+  <tbody>
+    {[
+      '05 (10 px)',
+      '06 (12 px)',
+      '07 (14 px)',
+      '08 (16 px)',
+      '09 (18 px)',
+      '10 (20 px)',
+      '12 (24 px)',
+      '16 (32 px)',
+      '18 (40 px)',
+      '19 (48 px)',
+      '20 (56 px)',
+      '21 (64 px)',
+      '22 (72 px)',
+    ].map((val, i, arr) => {
+      const isLast = i === arr.length - 1;
+      return (
+        <tr key={i} style={{backgroundColor: '#fff'}}>
+          <td
+            style={{
+              borderRight: '1px solid #fff',
+              borderBottom: isLast ? 'none' : '1px solid #fff',
+              padding: '12px 16px',
+              borderBottomLeftRadius: isLast ? '24px' : 0,
+              borderTop: '1px solid #eee',
+            }}>
+            font-size-{(i + 1) * 100}
+          </td>
+          <td
+            style={{
+              borderBottom: isLast ? 'none' : '1px solid #fff',
+              padding: '12px 16px',
+              borderBottomRightRadius: isLast ? '24px' : 0,
+              borderTop: '1px solid #eee',
+            }}>
+            Dimension-{val}
+          </td>
+        </tr>
+      );
+    })}
+  </tbody>
+</table>
+
+<table
+  style={{
+    borderCollapse: 'separate',
+    borderSpacing: 0,
+    width: '100%',
+    borderRadius: '24px',
+    overflow: 'hidden',
+    border: '1px solid #ccc',
+  }}>
+  <thead>
+    <tr>
+      <th
+        style={{
+          borderBottom: '1px solid #ccc',
+          textAlign: 'left',
+          background: '#f9f9f9',
+          borderTopLeftRadius: '24px',
+          borderRight: '1px solid #ccc',
+          padding: '12px 16px',
+          fontWeight: '600',
+          fontSize: '18px',
+          width: '50%',
+        }}>
+        Line height
+      </th>
+      <th
+        style={{
+          borderBottom: '1px solid #ccc',
+          padding: '12px 16px',
+          textAlign: 'left',
+          background: '#f9f9f9',
+          borderTopRightRadius: '24px',
+          fontWeight: '600',
+          fontSize: '14px',
+          width: '50%',
+        }}>
+        Value
+      </th>
+    </tr>
+  </thead>
+  <tbody>
+    {[
+      '07 (14 px)',
+      '09 (18 px)',
+      '10 (20 px)',
+      '12 (24 px)',
+      '14 (26 px)',
+      '16 (32 px)',
+      '18 (40 px)',
+      '19 (48 px)',
+      '20 (56 px)',
+      '21 (64 px)',
+      '22 (72 px)',
+      '23 (80 px)',
+    ].map((val, i, arr) => {
+      const isLast = i === arr.length - 1;
+      return (
+        <tr key={i} style={{backgroundColor: '#fff'}}>
+          <td
+            style={{
+              borderRight: '1px solid #fff',
+              borderBottom: isLast ? 'none' : '1px solid #fff',
+              padding: '12px 16px',
+              borderBottomLeftRadius: isLast ? '12px' : 0,
+              borderTop: '1px solid #eee',
+            }}>
+            font-line-height-{(i + 1) * 100}
+          </td>
+          <td
+            style={{
+              borderBottom: isLast ? 'none' : '1px solid #fff',
+              padding: '12px 16px',
+              borderBottomRightRadius: isLast ? '24px' : 0,
+              borderTop: '1px solid #eee',
+            }}>
+            Dimension-{val}
+          </td>
+        </tr>
+      );
+    })}
+  </tbody>
+</table>
+
+# Typography style
+
+<table
+  style={{
+    borderCollapse: 'separate',
+    borderSpacing: 0,
+    width: '100%',
+    borderRadius: '24px',
+    overflow: 'hidden',
+    border: '1px solid #ccc',
+    fontFamily: 'Lato, sans-serif',
+  }}>
+  <thead>
+    <tr>
+      <th
+        style={{
+          borderBottom: '1px solid #ccc',
+          textAlign: 'left',
+          background: '#f9f9f9',
+          borderTopLeftRadius: '24px',
+          borderRight: '1px solid #ccc',
+          padding: '12px 16px',
+          fontWeight: '600',
+          fontSize: '18px',
+          width: '50%',
+        }}>
+        Title
+      </th>
+      <th
+        style={{
+          borderBottom: '1px solid #ccc',
+          padding: '12px 16px',
+          textAlign: 'left',
+          background: '#f9f9f9',
+          borderTopRightRadius: '24px',
+          fontWeight: '600',
+          fontSize: '18px',
+          width: '50%',
+        }}>
+        Value
+      </th>
+    </tr>
+  </thead>
+  <tbody>
+    {[
+      {
+        title: 'Display 1',
+        value: [
+          'fontWeight: font-weight-bold',
+          'fontSize: font-size-display-1',
+          'lineHeight: font-line-height-display-1',
+        ],
+      },
+      {
+        title: 'Display 2',
+        value: [
+          'fontWeight: font-weight-bold',
+          'fontSize: font-size-display-2',
+          'lineHeight: font-line-height-display-2',
+        ],
+      },
+      {
+        title: 'Display 3',
+        value: [
+          'fontWeight: font-weight-bold',
+          'fontSize: font-size-display-3',
+          'lineHeight: font-line-height-display-3',
+        ],
+      },
+      {
+        title: 'Display 4',
+        value: [
+          'fontWeight: font-weight-bold',
+          'fontSize: font-size-display-4',
+          'lineHeight: font-line-height-display-4',
+        ],
+      },
+      {
+        title: 'Heading 1',
+        value: [
+          'fontWeight: font-weight-bold',
+          'fontSize: font-size-heading-1',
+          'lineHeight: font-line-height-heading-1',
+        ],
+      },
+      {
+        title: 'Heading 2',
+        value: [
+          'fontWeight: font-weight-bold',
+          'fontSize: font-size-heading-2',
+          'lineHeight: font-line-height-heading-2',
+        ],
+      },
+      {
+        title: 'Heading 3',
+        value: [
+          'fontWeight: font-weight-bold',
+          'fontSize: font-size-heading-3',
+          'lineHeight: font-line-height-heading-3',
+        ],
+      },
+      {
+        title: 'Heading 4',
+        value: [
+          'fontWeight: font-weight-bold',
+          'fontSize: font-size-heading-4',
+          'lineHeight: font-line-height-heading-4',
+        ],
+      },
+      {
+        title: 'Heading 5',
+        value: [
+          'fontWeight: font-weight-bold',
+          'fontSize: font-size-heading-5',
+          'lineHeight: font-line-height-heading-5',
+        ],
+      },
+      {
+        title: 'Body 1',
+        value: [
+          'fontWeight: font-weight-bold',
+          'fontSize: font-size-body-1',
+          'lineHeight: font-line-height-body-1',
+        ],
+      },
+      {
+        title: 'Body 2',
+        value: [
+          'fontWeight: font-weight-bold',
+          'fontSize: font-size-body-2',
+          'lineHeight: font-line-height-body-2',
+        ],
+      },
+      {
+        title: 'Body 3',
+        value: [
+          'fontWeight: font-weight-bold',
+          'fontSize: font-size-body-3',
+          'lineHeight: font-line-height-body-3',
+        ],
+      },
+      {
+        title: 'Body 4',
+        value: [
+          'fontWeight: font-weight-bold',
+          'fontSize: font-size-body-4',
+          'lineHeight: font-line-height-body-4',
+        ],
+      },
+      // Add more rows as needed...
+    ].map(({title, value}, i, arr) => {
+      const isLast = i === arr.length - 1;
+      return (
+        <tr key={title} style={{backgroundColor: '#fff'}}>
+          <td
+            style={{
+              borderRight: '1px solid #fff',
+              borderBottom: isLast ? 'none' : '1px solid #fff',
+              padding: '12px 16px',
+              borderBottomLeftRadius: isLast ? '12px' : 0,
+              borderTop: '1px solid #eee',
+              fontSize: '20px',
+            }}>
+            {title}
+          </td>
+          <td
+            style={{
+              borderBottom: isLast ? 'none' : '1px solid #fff',
+              padding: '12px 16px',
+              borderBottomRightRadius: isLast ? '12px' : 0,
+              borderTop: '1px solid #eee',
+              fontSize: '20px',
+            }}>
+            {value.map((line, idx) => {
+              const parts = line.split(':');
+              const label = parts[0]?.trim() || '';
+              const val = parts.slice(1).join(':').trim();
+              return (
+                <div key={idx} className="custom-value">
+                  <strong>{label}:</strong> {val}
+                </div>
+              );
+            })}
+          </td>
+        </tr>
+      );
+    })}
+  </tbody>
+</table>

package/src/stories/Utils.mdx

@@ -0,0 +1,277 @@
+# Utility Functions
+
+SliceUI provides a set of utility functions to help you work with the design system more effectively. These utilities make it easier to handle common tasks like theming, responsive design, and styling.
+
+## Theme Context Utilities
+
+### useSliceTheme
+
+The `useSliceTheme` hook provides access to the current theme context:
+
+```jsx
+import {useSliceTheme} from '@foodhub/slice-ui';
+
+function MyComponent() {
+  const theme = useSliceTheme();
+
+  return (
+    <div
+      style={{
+        color: theme.colors.colorForegroundPrimary,
+        padding: theme.spacing.medium,
+      }}>
+      Hello World
+    </div>
+  );
+}
+```
+
+### SliceThemeProvider
+
+Wrap your application with `SliceThemeProvider` to provide theme context:
+
+```jsx
+import {SliceThemeProvider} from '@foodhub/slice-ui';
+
+function App() {
+  return (
+    <SliceThemeProvider>
+      <YourApp />
+    </SliceThemeProvider>
+  );
+}
+```
+
+## Responsive Utilities
+
+### useResponsiveValue
+
+Get responsive values based on screen size:
+
+```jsx
+import {useResponsiveValue} from '@foodhub/slice-ui';
+
+function MyComponent() {
+  const padding = useResponsiveValue({
+    mobile: 'small',
+    tablet: 'medium',
+    desktop: 'large',
+  });
+
+  return <div style={{padding}}>Responsive Content</div>;
+}
+```
+
+### getResponsiveValue
+
+Get a responsive value without using a hook:
+
+```jsx
+import {getResponsiveValue} from '@foodhub/slice-ui';
+
+const styles = {
+  padding: getResponsiveValue({
+    mobile: 'small',
+    tablet: 'medium',
+    desktop: 'large',
+  }),
+};
+```
+
+## Color Utilities
+
+### getColorWithOpacity
+
+Add opacity to a color:
+
+```jsx
+import {getColorWithOpacity} from '@foodhub/slice-ui';
+
+const styles = {
+  backgroundColor: getColorWithOpacity(theme.colors.primary, '0.5'),
+};
+```
+
+### getContrastColor
+
+Get a contrasting color for text:
+
+```jsx
+import {getContrastColor} from '@foodhub/slice-ui';
+
+const styles = {
+  color: getContrastColor(theme.colors.primary),
+};
+```
+
+## Spacing Utilities
+
+### getSpacing
+
+Get spacing value with multiplier:
+
+```jsx
+import {getSpacing} from '@foodhub/slice-ui';
+
+const styles = {
+  margin: getSpacing('medium', 2), // 2x medium spacing
+};
+```
+
+### getResponsiveSpacing
+
+Get responsive spacing:
+
+```jsx
+import {getResponsiveSpacing} from '@foodhub/slice-ui';
+
+const styles = {
+  padding: getResponsiveSpacing({
+    mobile: 'small',
+    tablet: 'medium',
+    desktop: 'large',
+  }),
+};
+```
+
+## Typography Utilities
+
+### getTypographyStyle
+
+Get typography style with custom properties:
+
+```jsx
+import {getTypographyStyle} from '@foodhub/slice-ui';
+
+const styles = {
+  ...getTypographyStyle('body1', {
+    color: theme.colors.primary,
+    textAlign: 'center',
+  }),
+};
+```
+
+### getResponsiveTypography
+
+Get responsive typography:
+
+```jsx
+import {getResponsiveTypography} from '@foodhub/slice-ui';
+
+const styles = {
+  ...getResponsiveTypography({
+    mobile: 'body2',
+    tablet: 'body1',
+    desktop: 'heading3',
+  }),
+};
+```
+
+## Component-Specific Utilities
+
+### getButtonStyles
+
+Get button styles based on variant and size:
+
+```jsx
+import {getButtonStyles} from '@foodhub/slice-ui';
+
+const styles = {
+  ...getButtonStyles('primary', 'medium'),
+};
+```
+
+### getInputStyles
+
+Get input styles based on state and size:
+
+```jsx
+import {getInputStyles} from '@foodhub/slice-ui';
+
+const styles = {
+  ...getInputStyles('default', 'medium'),
+};
+```
+
+## Best Practices
+
+1. **Theme Context**
+
+   - Always use `useSliceTheme` to access theme values
+   - Don't access theme values directly from imports
+   - Keep theme context at the root of your application
+
+2. **Color Management**
+
+   - Use semantic color tokens
+   - Use color utilities for opacity and contrast
+   - Maintain consistent color usage across components
+
+3. **Spacing Consistency**
+
+   - Use the spacing scale
+   - Use spacing utilities for calculations
+   - Maintain consistent spacing across components
+
+4. **Typography Hierarchy**
+   - Use typography utilities for consistent text styles
+   - Follow the typography scale
+   - Use responsive typography for different screen sizes
+
+## Complete Example
+
+Here's a complete example showing how to use multiple utilities together:
+
+```jsx
+import {
+  useSliceTheme,
+  useResponsiveValue,
+  getColorWithOpacity,
+  getSpacing,
+  getTypographyStyle,
+} from '@foodhub/slice-ui';
+
+function Card({title, content}) {
+  const theme = useSliceTheme();
+  const padding = useResponsiveValue({
+    mobile: 'small',
+    tablet: 'medium',
+    desktop: 'large',
+  });
+
+  const styles = {
+    container: {
+      backgroundColor: getColorWithOpacity(theme.colors.primary, '0.1'),
+      padding: getSpacing(padding),
+      borderRadius: theme.dimensions.borderRadius.medium,
+    },
+    title: {
+      ...getTypographyStyle('heading2', {
+        color: theme.colors.colorForegroundPrimary,
+        marginBottom: getSpacing('small'),
+      }),
+    },
+    content: {
+      ...getTypographyStyle('body1', {
+        color: theme.colors.colorForegroundSecondary,
+      }),
+    },
+  };
+
+  return (
+    <div style={styles.container}>
+      <h2 style={styles.title}>{title}</h2>
+      <p style={styles.content}>{content}</p>
+    </div>
+  );
+}
+```
+
+This example demonstrates:
+
+- Using theme context
+- Responsive values
+- Color utilities
+- Spacing utilities
+- Typography utilities
+- Component-specific styling