jp-composter 0.1.0

package/src/stories/Dimensions.mdx

@@ -0,0 +1,60 @@
+import React from 'react';
+import {Meta} from '@storybook/addon-docs/blocks';
+import {dimensions} from '../SliceUI/values/Dimension.ts';
+
+<Meta title="Tokens/Dimensions" />
+
+# Dimensions
+
+<h3 style={{fontWeight: 'normal', fontFamily: 'Lato'}}>
+  Slice’s dimension system is built for consistency, clarity, and flexibility
+  across all screens. We use a set of predefined values — mainly 2px, 4px, 8px,
+  and 16px — to keep spacing and sizing predictable and scalable. This helps
+  create clean layouts and makes collaboration smoother between design and
+  development.
+</h3>
+
+---
+
+# Core
+
+<table
+  style={{
+    borderCollapse: 'separate',
+    borderSpacing: 0,
+    width: '100%',
+    border: '1px solid var(--border-light, #E6E6E6)',
+    borderRadius: '24px',
+    overflow: 'hidden',
+  }}>
+  <thead>
+    <tr style={{backgroundColor: '#f9f9f9'}}>
+      <th
+        style={{
+          padding: '12px 16px',
+          fontSize: '18px',
+          textAlign: 'left',
+        }}>
+        Title
+      </th>
+      <th
+        style={{
+          padding: '12px 16px',
+          fontSize: '18px',
+          textAlign: 'left',
+        }}>
+        Value
+      </th>
+    </tr>
+  </thead>
+  <tbody>
+    {Object.entries(dimensions).map(([key, value]) => (
+      <tr key={key} style={{backgroundColor: '#fff'}}>
+        <td style={{padding: '12px 16px'}}>
+          {key.replace(/^dimension/, 'Dimension-')}
+        </td>
+        <td style={{padding: '12px 16px'}}>{`${value}px`}</td>
+      </tr>
+    ))}
+  </tbody>
+</table>

package/src/stories/GetStarted.mdx

@@ -0,0 +1,90 @@
+import {Meta} from '@storybook/addon-docs/blocks';
+
+<Meta title="Getting started" />
+
+Welcome! Whether you're a designer or a developer, this guide will help you get started and connect you to the essential resources you need.
+
+## Table of Contents
+
+- [Design Resources](#design-resources)
+
+  - [Figma](#figma)
+  - [UI/UX Design Guidelines](https://brand.foodhub.com/uiux_standards/)
+  - [Design Assets](https://brand.foodhub.com/uiux_standards/)
+
+- [Development Resources](#development-resources)
+  - [Coding Standards](#coding-standards)
+  - [Version Control](#version-control)
+  - [Development Tools](#development-tools)
+
+---
+
+## Design Resources
+
+### Figma
+
+[Figma](https://www.figma.com/) is a collaborative design and prototyping tool. It's the heart of the design process, allowing designers to work together seamlessly.
+
+- **Get Access**: If you're not already part of the Figma project, request access from the project lead or manager.
+
+### UI/UX Design Guidelines
+
+Before you dive into designing, familiarize yourself with our UI/UX design guidelines. They provide valuable insights into our design philosophy and standards.
+
+- [UI/UX Guidelines Document](https://brand.foodhub.com/uiux_standards/)
+
+### Design Assets
+
+All the essential design assets like logos, icons, and brand guidelines can be found in the Figma project. Ensure you have access and familiarize yourself with these assets for consistency.
+
+---
+
+## Development Resources
+
+### Coding Standards
+
+Maintaining a consistent code style is essential for collaborative development. Our coding standards document will guide you on best practices.
+
+- [Coding Standards Document](https://your-coding-standards-link.com)
+
+### Version Control
+
+We use Git for version control. Make sure you have Git installed and are familiar with its basics.
+
+### Development Tools
+
+Your development environment is critical. Here are some tools and resources to help you set up your workspace:
+
+- **Code Editor**: We recommend using [Visual Studio Code](https://code.visualstudio.com/) for development. It's highly customizable and supports a wide range of extensions.
+
+- **Package Manager**: [npm](https://www.npmjs.com/) is the package manager we use for JavaScript projects. Install it to manage project dependencies.
+
+---
+
+## Food Hub Components
+
+Building a design system for Food Hub involves creating reusable components that ensure consistency across the application. These components are the building blocks of our user interface.
+
+### Component Library
+
+Our component library includes all the essential UI elements like buttons, forms, modals, and more. Each component is designed to be reusable and customizable.
+
+- **Access the Library**: The component library is available in our Figma project. Make sure you have access to view and use these components.
+
+### Design Tokens
+
+Design tokens are the core values that define our design system, such as colors, typography, spacing, and more. They ensure consistency and scalability across different platforms.
+
+- **Color Tokens**: Define the primary, secondary, and neutral colors used in the application.
+- **Typography Tokens**: Define font families, sizes, weights, and line heights.
+- **Spacing Tokens**: Define the spacing scale used for margins and paddings.
+
+### Important Resources
+
+To get started with building and using the Food Hub design system, refer to the following resources:
+
+- [Component Library Documentation](https://your-component-library-link.com)
+- [Design Tokens Documentation](http://localhost:6006/?path=/docs/design-tokens--docs)
+- [Design System Guidelines](https://your-design-system-guidelines-link.com)
+
+These resources will provide you with the necessary information to understand and implement the design system effectively.

package/src/stories/Introduction.mdx

@@ -0,0 +1,136 @@
+import {Meta} from '@storybook/addon-docs/blocks';
+
+import Frame_5 from '../SliceUI/assets/Frame 5.png';
+import Layer1 from '../SliceUI/assets/Icon_Plug.svg';
+import bridging from '../SliceUI/assets/Icon_Bridging.svg';
+import consistent from '../SliceUI/assets/Icon_Consistent.svg';
+import reusable from '../SliceUI/assets/Icon_Reusable.svg';
+
+<Meta title="Introduction" />
+
+## <h1 style={{color:'#111'}}>Introduction</h1>
+
+ <img
+        src={Frame_5}
+        alt="A wall of logos representing different styling technologies"
+      />
+<div style={{ padding: '32px 0px 0px 0px' }}>
+
+<h1 style={{color: '#111'}}>What is Slice?</h1>
+
+<h3 style={{fontWeight: 'normal',fontFamily:'Lato'}}>Slice is our Design System — a central source for reusable design patterns, 
+components, and assets. It helps teams collaborate better and move faster by sharing a common language and process.</h3> 
+<div style={{ padding: '20px 0px ', display: 'flex', flexDirection: 'column', gap: '20px' }}>
+    <div style={{
+      border: '1px solid #E6E6E6',
+      borderRadius: '20px',
+      padding: '24px 24px 8px 8px',
+      display: 'flex',
+      gap: '8px',
+      alignItems: 'center',
+      justifyContent: 'left'
+    }}>
+      <img
+        src={Layer1}
+        alt="Plug and Play Icon"
+        style={{
+          width: '88px',
+          height: '88px',
+          objectFit: 'contain'
+        }}
+      />
+      <div>
+        <h3>Plug-and-play</h3>
+        <p style={{marginTop:'-1px'}}><span>The Styleguide helps us move faster by taking care of the basics, so we can focus on bigger challenges. While every tool takes a little time to learn, we’ve built ready-to-use components with smart defaults to make it easy to get started. These components take more time to build upfront, but they save a lot of time later. You can customize them if you need to — but you don't have to.</span></p>
+      </div>
+    </div>
+
+    <div style={{
+      border: '1px solid #E6E6E6',
+      borderRadius: '20px',
+      padding: '24px 24px 8px 8px',
+      display: 'flex',
+      gap: '8px',
+      alignItems: 'center',
+      justifyContent: 'left'
+    }}>
+      <img
+        src={bridging}
+        alt="Bridging Icon"
+        style={{
+          width: '88px',
+          height: '88px',
+          objectFit: 'contain'
+        }}
+      />
+      <div>
+        <h3 >Bridging</h3>
+        <p style={{marginTop:'-1px'}}><span>With teams moving at lightning speed and working autonomously, it’s not always easy to prioritize crafting the best experience. Styleguide ensures every team can deliver consistent, high-quality experiences—while also strengthening collaboration between designers and developers.</span></p>
+      </div>
+    </div>
+
+    <div style={{
+      border: '1px solid #E6E6E6',
+      borderRadius: '20px',
+      padding: '24px 24px 8px 8px',
+      display: 'flex',
+      gap: '8px',
+      alignItems: 'center',
+      justifyContent: 'left'
+    }}>
+      <img
+        src={consistent}
+        alt="Consistent Icon"
+        style={{
+          width: '88px',
+          height: '88px',
+          objectFit: 'contain'
+        }}
+      />
+      <div>
+        <h3>Consistent</h3>
+        <p style={{marginTop:'-1px'}}><span>Being consistent has an impact much beyond brand presence and a better sense of quality. Reusing interaction and visual patterns makes for a more fluid experience using Foodhub products, and this arguably improves user experience. A Design System is the main tool for promoting alignment and improving consistency in whatever it touches.</span></p>
+      </div>
+    </div>
+
+    <div style={{
+      border: '1px solid #E6E6E6',
+      borderRadius: '20px',
+      padding: '24px 24px 8px 8px',
+      display: 'flex',
+      gap: '8px',
+      alignItems: 'center',
+      justifyContent: 'left'
+    }}>
+      <img
+        src={reusable}
+        alt="Reusable Icon"
+        style={{
+          width: '88px',
+          height: '88px',
+          objectFit: 'contain'
+        }}
+      />
+      <div>
+        <h3>Reusable</h3>
+        <p style={{marginTop:'-1px'}}><span>The impact of the work you put in a component is multiplied by the number of projects are reusing it — and this number grows every day! From a company-level, a culture of reusability reduces code redundancy and increases overall quality with well-tested, bullet-proof solutions.</span></p>
+      </div>
+    </div>
+
+  </div>
+</div>
+
+# Two worlds, one system
+
+<div>
+  <p>
+    <span>
+      Slice is fuels two distinct worlds with one shared system: CM (Client
+      Management) and CO (Consumer Ordering). Each of them serves very different
+      users, with different contexts and needs, which implies in their own
+      guidelines and principles. While lots of atomic components are easily
+      shared between these worlds, others were designed with those principles in
+      mind and would even feel weird elsewhere — which is good!
+    </span>
+  </p>
+</div>

package/src/stories/Shape.mdx

@@ -0,0 +1,126 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Tokens/Shape" />
+
+# Shape 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> 
+---
+
+# Corner radius
+
+  <table
+    style={{
+    borderCollapse: 'separate', 
+    borderSpacing: 0,
+    width: '100%',
+    borderRadius: '24px',
+    overflow: 'hidden', 
+    border: '1px solid #ccc',
+    }}
+  >
+    <thead style={{backgroundColor: '#f9f9f9', textAlign: 'left' }}>
+      <tr>
+        <th style={{ padding: '12px 16px', fontWeight: '600' ,width:'50%'}}>
+          Title
+        </th>
+        <th style={{ padding: '12px 16px', fontWeight: '600',width:'50%' }}>
+          Value
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+  {[
+    { token: 'border-radius-0', value: 'Dimension-00 (0 px)' },
+    { token: 'border-radius-30', value: 'Dimension-04 (8 px)' },
+    { token: 'border-radius-40', value: 'Dimension-06 (12 px)' },
+    { token: 'border-radius-50', value: 'Dimension-08 (16 px)' },
+    { token: 'border-radius-60', value: 'Dimension-10 (20 px)' },
+    { token: 'border-radius-70', value: 'Dimension-12 (24 px)' },
+    { token: 'border-radius-80', value: 'Dimension-14 (28 px)' },
+    { token: 'border-radius-90', value: 'Dimension-16 (32 px)' },
+    { token: 'border-radius-full', value: 'Dimension-100 (1000 px)' },
+  ].map(({ token, value }, i, arr) => {
+    const isLast = i === arr.length - 1;
+    return (
+      <tr key={token} style={{ backgroundColor: '#fff' }}>
+        <td
+          style={{
+            padding: '12px 16px',
+            borderBottom: isLast ? 'none' : '1px solid #ccc',
+            borderBottomRadius: isLast ? '24px' : 0,
+          }}
+        >
+          {token}
+        </td>
+        <td
+          style={{
+            padding: '12px 16px',
+            borderBottom: isLast ? 'none' : '1px solid #ccc',
+            borderBottomRadius: isLast ? '24px' : 0,
+          }}
+        >
+          {value}
+        </td>
+      </tr>
+    );
+  })}
+</tbody>
+
+  </table>
+
+# Border width
+  <table
+    style={{
+    borderCollapse: 'collapse', 
+    borderSpacing: 0,
+    width: '100%',
+    borderRadius: '24px',
+    overflow: 'hidden', 
+    }}
+  >
+    <thead style={{backgroundColor: '#f9f9f9', textAlign: 'left' }}>
+      <tr>
+        <th style={{ padding: '12px 16px', fontWeight: '600',width:'50%' }}>
+          Title
+        </th>
+        <th style={{ padding: '12px 16px', fontWeight: '600',width:'50%' }}>
+          Value
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+  {[
+    { token: 'border-width-0', value: '0 px' },
+    { token: 'border-width-10', value: '1 px' },
+    { token: 'border-width-15', value: '1.5 px' },
+    { token: 'border-width-20', value: '2 px' },
+    { token: 'border-width-40', value: '4 px' },
+    
+  ].map(({ token, value }, i, arr) => {
+    const isLast = i === arr.length - 1;
+    return (
+      <tr key={token} style={{ backgroundColor: '#fff' }}>
+        <td
+          style={{
+            padding: '12px 16px',
+            borderBottom: isLast ? 'none' : '1px solid #ccc',
+            borderBottomRadius: isLast ? '24px' : 0,
+          }}
+        >
+          {token}
+        </td>
+        <td
+          style={{
+            padding: '12px 16px',
+            borderBottom: isLast ? 'none' : '1px solid #ccc',
+            borderBottomRadius: isLast ? '24px' : 0,
+          }}
+        >
+          {value}
+        </td>
+      </tr>
+    );
+  })}
+</tbody>
+
+  </table>

package/src/stories/Spacing.mdx

@@ -0,0 +1,104 @@
+import {Meta} from '@storybook/addon-docs/blocks';
+
+<Meta title="Tokens/Spacing" />
+
+# Spacing tokens
+
+<h3 style={{fontWeight: 'normal', fontFamily: 'Lato'}}>
+  Slice’s spacing tokens help maintain consistent padding and margins across the
+  product. Built on a base scale of 2px, 4px, 8px, and 16px, they make it easy
+  to create clean, organized layouts while improving alignment and rhythm in the
+  interface.
+</h3>{' '}
+
+---
+
+<table
+  style={{
+    borderCollapse: 'separate',
+    borderSpacing: 0,
+    width: '100%',
+    borderRadius: '24px',
+    overflow: 'hidden',
+    border: '1px solid #ccc',
+  }}
+>
+  <thead style={{ backgroundColor: '#f9f9f9', textAlign: 'left' }}>
+    <tr>
+      <th style={{ padding: '12px 16px', fontWeight: '600', fontSize: '14px' }}>Title</th>
+      <th style={{ padding: '12px 16px', fontWeight: '600', fontSize: '14px' }}>Value</th>
+      <th style={{ padding: '12px 16px', fontWeight: '600', fontSize: '14px' }}>Example</th>
+    </tr>
+  </thead>
+<tbody>
+  {
+    // First 13 rows
+    Array.from({ length: 13 }).map((_, i) => {
+      const title = i * 50;
+      const value = `Dimension-${i.toString().padStart(2, '0')} (${i * 2}px)`;
+
+      // Only show the bar if i > 0
+      const showBar = i !== 0;
+
+      // Bar width increases by 2px per row starting from 2px at i = 1
+      const boxWidth = i * 2;
+
+      return (
+        <tr key={i} style={{ backgroundColor: '#fff' }}>
+          <td style={{ padding: '12px 16px', borderTop: '1px solid #eee' }}>
+            space-{title}
+          </td>
+          <td style={{ padding: '12px 16px', borderTop: '1px solid #eee' }}>
+            {value}
+          </td>
+          <td style={{ padding: '12px 16px', borderTop: '1px solid #eee' }}>
+            {
+              showBar ? (
+                <div
+                  style={{
+                    width: `${boxWidth}px`,
+                    height: '40px',
+                    background: 'var(--blue-200, #B5BDF4)',
+                  }}
+                />
+              ) : null
+            }
+          </td>
+        </tr>
+      );
+    })
+
+}
+
+{
+// Last 5 custom rows
+[
+{ title: 'space-800', value: 'Dimension-16 (32 px)', width: 32 },
+{ title: 'space-900', value: 'Dimension-19 (48 px)', width: 48 },
+{ title: 'space-1000', value: 'Dimension-21 (64 px)', width: 64 },
+{ title: 'space-1200', value: 'Dimension-25 (96 px)', width: 96 },
+{ title: 'space-1400', value: 'Dimension-29 (160 px)', width: 160 }
+].map((row, i) => (
+
+<tr key={`custom-${i}`} style={{backgroundColor: '#fff'}}>
+  <td style={{padding: '12px 16px', borderTop: '1px solid #eee'}}>
+    {row.title}
+  </td>
+  <td style={{padding: '12px 16px', borderTop: '1px solid #eee'}}>
+    {row.value}
+  </td>
+  <td style={{padding: '12px 16px', borderTop: '1px solid #eee'}}>
+    <div
+      style={{
+        width: `${row.width}px`,
+        height: '40px',
+        background: 'var(--blue-200, #B5BDF4)',
+      }}
+    />
+  </td>
+</tr>
+)) }
+
+</tbody>
+
+</table>