agroptima-design-system 0.1.1 → 0.1.2

package/.github/workflows/design-system-deploy-production.yaml

@@ -10,7 +10,7 @@ permissions:
   contents: write
 
 jobs:
-  chromatic-deployment:
+  github-pages-deployment:
     runs-on: ubuntu-latest
 
     steps:
@@ -19,15 +19,15 @@ jobs:
 
       - name: Install dependencies and build
         run: |
-          npm install --workspace=@wineries/design-system
-          npm run design-system:build
+          npm install
+          npm run build
       - name: Add robots.txt
         run: |
-          touch apps/design-system/storybook-static/robots.txt
-          echo "User-agent: *" >> apps/design-system/storybook-static/robots.txt
-          echo "Disallow: /" >> apps/design-system/storybook-static/robots.txt
+          touch storybook-static/robots.txt
+          echo "User-agent: *" >> storybook-static/robots.txt
+          echo "Disallow: /" >> storybook-static/robots.txt
 
       - name: Deploy 🚀
         uses: JamesIves/github-pages-deploy-action@v4
         with:
-          folder: apps/design-system/storybook-static
+          folder: storybook-static

package/.storybook/main.ts

@@ -1,59 +1,59 @@
-import type { StorybookConfig } from "@storybook/nextjs";
-import { join, dirname, resolve } from "path";
+import type { StorybookConfig } from '@storybook/nextjs'
+import { join, dirname, resolve } from 'path'
 
 /**
  * This function is used to resolve the absolute path of a package.
  * It is needed in projects that use Yarn PnP or are set up within a monorepo.
  */
 function getAbsolutePath(value: string): any {
-  return dirname(require.resolve(join(value, "package.json")));
+  return dirname(require.resolve(join(value, 'package.json')))
 }
 const config: StorybookConfig = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
-    getAbsolutePath("@storybook/addon-links"),
-    getAbsolutePath("@storybook/addon-essentials"),
-    getAbsolutePath("@storybook/addon-onboarding"),
-    getAbsolutePath("@storybook/addon-interactions"),
+    getAbsolutePath('@storybook/addon-links'),
+    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('@storybook/addon-onboarding'),
+    getAbsolutePath('@storybook/addon-interactions'),
     '@storybook/addon-a11y',
     '@storybook/addon-designs',
   ],
   framework: {
-    name: getAbsolutePath("@storybook/nextjs"),
+    name: getAbsolutePath('@storybook/nextjs'),
     options: {},
   },
   docs: {
-    autodocs: "tag",
+    autodocs: 'tag',
   },
   core: {
-    builder: '@storybook/builder-webpack5'
+    builder: '@storybook/builder-webpack5',
   },
   webpackFinal: async (config) => {
-    const pathToInlineSvg = resolve(__dirname, "../src/icons");
-    
-    config.module = config.module || {};
-    config.module.rules = config.module.rules || [];
+    const pathToInlineSvg = resolve(__dirname, '../src/icons')
+
+    config.module = config.module || {}
+    config.module.rules = config.module.rules || []
 
     // This modifies the existing image rule to exclude .svg files
     // since you want to handle those files with @svgr/webpack
-    const imageRule = config.module.rules.find((rule) => rule?.['test']?.test('.svg'));
+    const imageRule = config.module.rules.find(
+      (rule) => rule?.['test']?.test('.svg'),
+    )
     if (!imageRule || typeof imageRule !== 'object') return
 
     // Configure .svg files to be loaded with @svgr/webpack
-    config.module.rules.push(
-    {
+    config.module.rules.push({
       ...imageRule,
       test: /\.svg$/i,
       include: pathToInlineSvg,
       use: ['@svgr/webpack'],
-    },
-    );
+    })
 
     if (imageRule) {
-      imageRule['exclude'] = /\.svg$/i;
+      imageRule['exclude'] = /\.svg$/i
     }
 
-    return config;
+    return config
   },
-};
-export default config;
+}
+export default config

package/.storybook/preview.ts

@@ -11,6 +11,17 @@ const preview: Preview = {
       },
       expanded: true,
     },
+    options: {
+      storySort: {
+        order: [
+          'Welcome',
+          'Changelog',
+          'Component creation workflow',
+          'Programmers start guide',
+          '*',
+        ],
+      },
+    },
     viewport: {
       viewports: INITIAL_VIEWPORTS,
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006 --ci",
@@ -8,7 +8,7 @@
     "build-storybook": "storybook build",
     "lint": "eslint",
     "lint:fix": "eslint src --fix",
-    "chromatic": "npx chromatic --exit-zero-on-changes"
+    "publish-chromatic": "npx chromatic --exit-zero-on-changes"
   },
   "dependencies": {
     "@storybook/addon-designs": "^7.0.5",

package/src/atoms/CardsTableList.scss

@@ -0,0 +1,99 @@
+@use '../settings/color_alias';
+@use '../settings/typography';
+@use '../settings/config';
+
+.cards-table-list {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0 config.$space-3x;
+
+  thead {
+    background: transparent;
+  }
+
+  th,
+  td {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  th {
+    padding: config.$space-2x config.$space-3x;
+    white-space: nowrap;
+    text-align: left;
+
+    .icon {
+      width: config.$icon-size-3x;
+      height: config.$icon-size-3x;
+      margin-left: config.$space-1x;
+      > svg {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+
+  td {
+    padding: config.$space-5x;
+  }
+
+  &.primary {
+    thead > tr {
+      @include typography.cards-table-list-header;
+    }
+
+    th {
+      background: color_alias.$primary-color-600;
+
+      .icon {
+        > svg {
+          fill: color_alias.$neutral-white;
+          path {
+            fill: color_alias.$neutral-white;
+          }
+        }
+      }
+    }
+
+    th:first-child {
+      border-radius: config.$corner-radius-xxs 0px 0px config.$corner-radius-xxs;
+    }
+
+    th:last-child {
+      border-radius: 0px config.$corner-radius-xxs config.$corner-radius-xxs 0px;
+    }
+
+    tr {
+      box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.25);
+    }
+
+    tr {
+      td {
+        @include typography.cards-table-list-text;
+      }
+    }
+
+    tr:not(.disabled):hover {
+      background: color_alias.$primary-color-50;
+    }
+
+    tr.disabled {
+      background: color_alias.$neutral-color-50;
+
+      td {
+        @include typography.cards-table-list-disabled-text;
+      }
+    }
+
+    tr > td:first-child {
+      @include typography.cards-table-list-highlight-text;
+    }
+  }
+}

package/src/atoms/CardsTableList.tsx

@@ -0,0 +1,69 @@
+import './CardsTableList.scss'
+import { Icon, IconType } from './Icon'
+
+export type Variant = 'primary'
+export type Header = { label: string; icon?: IconType }
+export type Data = {
+  [key: string]: string
+}
+export type Row = { id: string; isDisabled: boolean; data: Data }
+
+export interface CardsTableListProps
+  extends React.ComponentPropsWithoutRef<'table'> {
+  headers: Header[]
+  rows: Row[]
+  variant?: Variant
+}
+
+export function CardsTableList({
+  headers,
+  rows,
+  summary,
+  variant = 'primary',
+}: CardsTableListProps): React.JSX.Element {
+  const cssClasses = ['cards-table-list', variant].join(' ')
+
+  return (
+    <table summary={summary} role="table" className={cssClasses}>
+      <thead role="rowgroup">
+        <tr role="row">
+          {headers.map((header) => {
+            const { icon } = header
+            return (
+              <th
+                scope="col"
+                role="columnheader"
+                className="header"
+                key={header.label}
+              >
+                <div className="container">
+                  <div className="title-container">
+                    <span>{header.label}</span>
+                    {icon && <Icon name={icon} />}
+                  </div>
+                </div>
+              </th>
+            )
+          })}
+        </tr>
+      </thead>
+      <tbody role="rowgroup">
+        {rows.map((row) => {
+          const { data, isDisabled } = row
+          const disabledClass = isDisabled ? 'disabled' : ''
+          return (
+            <tr role="row" className={`row ${disabledClass}`} key={row.id}>
+              {Object.getOwnPropertyNames(data).map((property) => {
+                return (
+                  <td role="cell" key={row.id + property} className="cell">
+                    {data[property]}
+                  </td>
+                )
+              })}
+            </tr>
+          )
+        })}
+      </tbody>
+    </table>
+  )
+}

package/src/atoms/Multiselect.scss

@@ -0,0 +1,148 @@
+@use '../settings/color_alias';
+@use '../settings/typography';
+@use '../settings/config';
+
+.multiselect-group {
+  display: flex;
+  flex-direction: column;
+  gap: config.$space-2x;
+
+  &:has(.selected-option.invalid) {
+    & .multiselect-help-text {
+      color: color_alias.$error-color-1000;
+    }
+  }
+
+  &.primary {
+    .multiselect-label {
+      @include typography.form-label;
+    }
+
+    .selected-option {
+      border-radius: config.$corner-radius-m;
+      border: 1px solid color_alias.$neutral-color-300;
+      background: color_alias.$neutral-white;
+      @include typography.select-text;
+
+      > .icon {
+        > svg {
+          fill: color_alias.$primary-color-1000;
+          path {
+            fill: color_alias.$primary-color-1000;
+          }
+        }
+      }
+
+      &.filled {
+        @include typography.select-option-text;
+      }
+
+      &:focus {
+        outline: color_alias.$primary-color-1000;
+        border: 1px solid color_alias.$primary-color-1000;
+      }
+
+      &.invalid {
+        border: 1px solid color_alias.$error-color-1000;
+      }
+
+      &.disabled {
+        border: 1px solid color_alias.$neutral-color-200;
+        background: color_alias.$neutral-color-50;
+        color: color_alias.$neutral-color-200;
+
+        > .icon {
+          > svg {
+            fill: color_alias.$neutral-color-200;
+            path {
+              fill: color_alias.$neutral-color-200;
+            }
+          }
+        }
+      }
+    }
+
+    .multiselect-options {
+      border-radius: config.$corner-radius-xxs;
+      background: color_alias.$neutral-white;
+      box-shadow:
+        0px 9px 28px 8px rgba(0, 0, 0, 0.05),
+        0px 6px 16px 0px rgba(0, 0, 0, 0.08),
+        0px 3px 6px -4px rgba(0, 0, 0, 0.12);
+
+      .option {
+        background: color_alias.$neutral-white;
+        @include typography.select-option-text;
+
+        &:hover {
+          background-color: color_alias.$primary-color-50;
+        }
+
+        > .icon {
+          > svg {
+            border-radius: config.$corner-radius-xxs;
+            .checkbox-active_svg__border {
+              fill: color_alias.$primary-color-1000;
+            }
+            .checkbox-inactive_svg__border {
+              fill: color_alias.$neutral-color-300;
+            }
+          }
+        }
+      }
+    }
+
+    .multiselect-help-text {
+      @include typography.form-help-text;
+    }
+  }
+
+  .multiselect-container {
+    display: inline-block;
+    text-align: left;
+    position: relative;
+  }
+
+  .selected-option {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: config.$space-2x config.$space-3x;
+    cursor: default;
+
+    > .icon {
+      width: config.$icon-size-3x;
+      height: config.$icon-size-3x;
+      > svg {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+
+  .multiselect-options {
+    margin: 0;
+    padding: config.$space-1x 0rem;
+    text-align: left;
+    position: absolute;
+    width: 100%;
+
+    .option {
+      display: flex;
+      align-items: center;
+      cursor: default;
+      list-style-type: none;
+      padding: config.$space-2x config.$space-3x;
+
+      > .icon {
+        width: config.$icon-size-4x;
+        height: config.$icon-size-4x;
+        margin-right: config.$space-1x;
+        > svg {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+}

package/src/atoms/Multiselect.tsx

@@ -0,0 +1,124 @@
+import './Multiselect.scss'
+import React, { useState } from 'react'
+import { Icon } from './Icon'
+
+export type Variant = 'primary'
+export type Option = { id: string; label: string }
+
+export interface MultiselectProps
+  extends React.ComponentPropsWithoutRef<'select'> {
+  placeholder?: string
+  helpText?: string
+  variant?: Variant
+  options: Option[]
+  invalid?: boolean
+  label: string
+  selectedLabel?: string
+}
+
+export function Multiselect({
+  placeholder,
+  helpText,
+  variant = 'primary',
+  disabled,
+  invalid,
+  name,
+  options,
+  label,
+  selectedLabel = 'items selected',
+}: MultiselectProps): React.JSX.Element {
+  const [showOptionsList, setShowOptionsList] = useState(false)
+  const [selectedOptionsIds, setSelectedOptionsIds] = useState<string[]>([])
+
+  const optionsListOpenClass = showOptionsList ? 'open' : ''
+  const filledSelectClass = selectedOptionsIds.length > 0 ? 'filled' : ''
+  const disabledClass = disabled ? 'disabled' : ''
+  const invalidClass = invalid ? 'invalid' : ''
+
+  const cssClasses = [
+    'selected-option',
+    optionsListOpenClass,
+    filledSelectClass,
+    disabledClass,
+    invalidClass,
+  ].join(' ')
+
+  function handleOptionsList() {
+    if (!disabled) setShowOptionsList(!showOptionsList)
+  }
+
+  function selectOption(optionId: string) {
+    const hasOptionId = isOptionSelected(optionId)
+    if (hasOptionId) {
+      setSelectedOptionsIds(
+        selectedOptionsIds.filter(
+          (selectedOptionId) => selectedOptionId !== optionId,
+        ),
+      )
+    } else {
+      setSelectedOptionsIds([...selectedOptionsIds, optionId])
+    }
+  }
+
+  function handleSelectIcon() {
+    return showOptionsList ? 'AngleUp' : 'AngleDown'
+  }
+
+  function isOptionSelected(optionId: string) {
+    return selectedOptionsIds.includes(optionId)
+  }
+
+  return (
+    <div className={`multiselect-group ${variant}`}>
+      <span className="multiselect-label">{label}</span>
+      <div className="multiselect-container">
+        <div
+          className={cssClasses}
+          tabIndex={0}
+          onClick={handleOptionsList}
+          aria-label={label}
+          aria-live="assertive"
+          role="alert"
+        >
+          <span>
+            {selectedOptionsIds.length > 0
+              ? selectedOptionsIds.length + ' ' + selectedLabel
+              : placeholder}
+          </span>
+          <Icon name={handleSelectIcon()} />
+        </div>
+        {showOptionsList && (
+          <ul className="multiselect-options" role="listbox">
+            {options.map((option) => {
+              return (
+                <li
+                  className="option"
+                  role="option"
+                  aria-selected={isOptionSelected(option.id)}
+                  data-option={option}
+                  key={option.id}
+                  onClick={() => selectOption(option.id)}
+                >
+                  <Icon
+                    name={
+                      isOptionSelected(option.id)
+                        ? 'CheckboxActive'
+                        : 'CheckboxInactive'
+                    }
+                  />
+                  {option.label}
+                </li>
+              )
+            })}
+          </ul>
+        )}
+      </div>
+      {helpText && (
+        <span className={`multiselect-help-text ${invalidClass}`}>
+          {helpText}
+        </span>
+      )}
+      <input type="hidden" name={name} value={selectedOptionsIds.toString()} />
+    </div>
+  )
+}

package/src/icons/checkbox-active.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path class="border" d="M0 2a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2Z" fill="#444"/><path class="background" fill-rule="evenodd" clip-rule="evenodd" d="M18 1H2a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1ZM2 0a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2Z" fill="#444"/><path class="check" d="m7.085 13.699-3.793-3.98L2 11.063 7.085 16.4 18 4.946 16.718 3.6 7.085 13.699Z" fill="#fff"/></svg>

package/src/icons/checkbox-inactive.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path class="background" d="M0 2a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2Z" fill="#fff"/><path class="border" fill-rule="evenodd" clip-rule="evenodd" d="M18 1H2a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1ZM2 0a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2Z" fill="#444"/></svg>

package/src/icons/index.tsx

@@ -4,6 +4,8 @@ import AngleLeft from './angle-left.svg'
 import AngleRight from './angle-right.svg'
 import AngleUp from './angle-up.svg'
 import Check from './check.svg'
+import CheckboxActive from './checkbox-active.svg'
+import CheckboxInactive from './checkbox-inactive.svg'
 import Close from './close.svg'
 import Done from './done.svg'
 import EditColumns from './edit-columns.svg'
@@ -14,6 +16,7 @@ import Loading from './loading.svg'
 import Search from './search.svg'
 import Show from './show.svg'
 import ShowOff from './show-off.svg'
+import Sorter from './sorter.svg'
 import Warning from './warning.svg'
 
 export {
@@ -23,6 +26,8 @@ export {
   AngleRight,
   AngleUp,
   Check,
+  CheckboxActive,
+  CheckboxInactive,
   Close,
   Done,
   EditColumns,
@@ -33,5 +38,6 @@ export {
   Search,
   Show,
   ShowOff,
+  Sorter,
   Warning,
 }

package/src/icons/sorter.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path class="down" d="M15.598 12H4.402c-.335 0-.523.343-.315.578l5.598 6.287c.16.18.468.18.63 0l5.598-6.287c.208-.235.02-.578-.316-.578Z" fill="#444"/><path class="up" d="m15.913 7.422-5.598-6.287a.436.436 0 0 0-.63 0L4.087 7.422c-.208.235-.02.578.316.578h11.195c.335 0 .523-.343.315-.578Z" fill="#444"/></svg>

package/src/settings/_typography.scss

@@ -65,3 +65,42 @@ $font-primary: $font-base-stretch $text-base-style $font-base-weight #{$text-bas
   font-size: 0.875rem;
   line-height: 0.775rem;
 }
+
+@mixin cards-table-list-header {
+  font-style: $text-base-style;
+  font-variant: $text-base-style;
+  font-weight: 700;
+  font-family: $font-base-family;
+  color: color_alias.$neutral-white;
+  font-size: 1rem;
+  line-height: 1.375rem; /* 137.5% */
+}
+
+@mixin cards-table-list-highlight-text {
+  font-style: $text-base-style;
+  font-variant: $text-base-style;
+  font-weight: 700;
+  font-family: $font-base-family;
+  font-size: 1rem;
+  line-height: 1.5rem; /* 150% */
+}
+
+@mixin cards-table-list-text {
+  font-style: $text-base-style;
+  font-variant: $text-base-style;
+  font-weight: 400;
+  font-family: $font-base-family;
+  color: color_alias.$neutral-color-1000;
+  font-size: 1rem;
+  line-height: 1.5rem; /* 150% */
+}
+
+@mixin cards-table-list-disabled-text {
+  font-style: $text-base-style;
+  font-variant: $text-base-style;
+  font-weight: 400;
+  font-family: $font-base-family;
+  color: color_alias.$neutral-color-200;
+  font-size: 1rem;
+  line-height: 1.5rem; /* 150% */
+}

package/src/stories/CardsTableList.stories.ts

@@ -0,0 +1,83 @@
+import { CardsTableList } from '../atoms/CardsTableList'
+import { StoryObj } from '@storybook/react'
+
+const meta = {
+  title: 'Design System/Atoms/Cards Table List',
+  component: CardsTableList,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      description: 'Select variant used',
+    },
+    summary: {
+      description:
+        'Summary of the table purpose and structure for assistive technologies',
+    },
+    headers: {
+      description: 'Array of values to be displayed on the headers',
+    },
+    rows: {
+      description: 'Array of values to be displayed as the data',
+    },
+  },
+}
+
+const figmaPrimaryDesign = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/DN2ova21vWqCRvPspBXgI1/Design-System?type=design&node-id=1272-1328&mode=dev',
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Primary: Story = {
+  args: {
+    variant: 'primary',
+    summary: 'Videogames companies contact information',
+    headers: [
+      {
+        label: 'Game title',
+        icon: 'Info',
+      },
+      { label: 'Company address' },
+      {
+        label: 'Customer service email',
+        icon: 'Info',
+      },
+    ],
+    rows: [
+      {
+        id: '1',
+        isDisabled: false,
+        data: {
+          name: 'Metal Gear Solid 5: The Phantom Pain',
+          address:
+            'Konami Digital Entertainment Co., Ltd. 1-11-1, Ginza, Chuo-ku, Tokyo, 104-0061 Japan',
+          email: 'konami@fakemail.com',
+        },
+      },
+      {
+        id: '2',
+        isDisabled: false,
+        data: {
+          name: 'The Witcher 3',
+          address: 'CD PROJEKT S.A. ul. Jagiellońska 74 03-301 Warszawa Poland',
+          email: 'cdprojekt@fakemail.com',
+        },
+      },
+      {
+        id: '3',
+        isDisabled: true,
+        data: {
+          name: 'Tekken 8',
+          address:
+            'Bandai Namco Studios Inc. ; Address: 2-37-25 Eitai, Koto-ku, Tokyo 135-0034, Japan',
+          email: 'namco@fakemail.com',
+        },
+      },
+    ],
+  },
+  parameters: figmaPrimaryDesign,
+}

package/src/stories/Changelog.stories.mdx

@@ -3,4 +3,37 @@ import { Meta } from "@storybook/addon-docs";
 <Meta title="Changelog" />
 # Changelog
 
-WIP
+## 0.1.2
+
+Cards Table List component is added to Storybook with the following features:
+
+- Headers with icon
+- Cells text with default and bold styles
+- Highlight style for the first cell in a row
+- Row default, hover and disabled styles
+
+Changelog has been updated with all published versions.
+
+The order of the Docs stories has been updated.
+
+## 0.1.1
+
+The "required" property has been removed from Input and Select components.
+
+The "invalid" property has been created to manage error states.
+
+Styles unification has been applied on Select component.
+
+## 0.1.0
+
+Multiselect component is added to Storybook.
+
+Eye icon has been added to Input of type password on Storybook.
+
+Welcome and Docs pages have been added.
+
+Icon gallery has been added.
+
+Select component has been added.
+
+Input component has been added.

package/src/stories/Multiselect.stories.ts

@@ -0,0 +1,69 @@
+import { Multiselect } from '../atoms/Multiselect'
+import { StoryObj } from '@storybook/react'
+
+const meta = {
+  title: 'Design System/Atoms/Multiselect',
+  component: Multiselect,
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      description: 'Label for the select',
+    },
+    selectedLabel: {
+      description: 'Label used when having selected values',
+    },
+    variant: {
+      description: 'Select variant used',
+    },
+    disabled: {
+      description: 'Is the select in disabled state?',
+    },
+    invalid: {
+      description: 'Is the select in disabled state?',
+    },
+    helpText: {
+      description: 'Optional help text',
+    },
+    name: {
+      description: 'Set name property',
+    },
+    placeholder: {
+      description: 'Set select placeholder text',
+    },
+    options: {
+      description: 'Array of values to be displayed on the select list',
+    },
+  },
+}
+
+const figmaPrimaryDesign = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/DN2ova21vWqCRvPspBXgI1/Design-System?type=design&node-id=454-1657&mode=dev',
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Primary: Story = {
+  args: {
+    variant: 'primary',
+    disabled: false,
+    invalid: false,
+    helpText: 'This text can help you',
+    name: 'example',
+    label: 'Videogames',
+    selectedLabel: 'videogames selected',
+    placeholder: 'Select your favourite videogames...',
+    options: [
+      { id: '1', label: 'The Legend of Zelda: Ocarina of Time' },
+      { id: '2', label: 'Spyro the Dragon' },
+      { id: '3', label: 'Halo' },
+      { id: '4', label: 'Tetris' },
+      { id: '5', label: 'Super Mario Bros' },
+      { id: '6', label: 'Red Dead Redemption' },
+    ],
+  },
+  parameters: figmaPrimaryDesign,
+}

package/.github/workflows/design-system-deploy-staging.yaml

@@ -1,24 +0,0 @@
-name: Deploy design system to Chromatic
-
-on:
-  workflow_dispatch:
-
-jobs:
-  chromatic-deployment:
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v3
-        with:
-          fetch-depth: 0
-
-      - name: Install dependencies
-        run: npm install --workspace=@wineries/design-system
-
-      - name: Publish to Chromatic 🚀
-        uses: chromaui/action@v1
-
-        with:
-          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
-          buildScriptName: 'design-system:build'