agroptima-design-system 0.1.0 → 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/.nvmrc

@@ -0,0 +1 @@
+18.18

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.0",
+  "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/Icon.tsx

@@ -5,9 +5,14 @@ export type IconType = keyof typeof icons
 
 export interface IconProps extends React.SVGAttributes<HTMLOrSVGElement> {
   name: IconType
+  className?: string
 }
 
-export const Icon: React.FC<IconProps> = ({ name, ...props }) => {
-  const cssClasses = ['icon', name === 'Loading' ? 'rotate' : ''].join(' ')
+export const Icon: React.FC<IconProps> = ({ name, className, ...props }) => {
+  const cssClasses = [
+    'icon',
+    className,
+    name === 'Loading' ? 'rotate' : '',
+  ].join(' ')
   return <span className={cssClasses}>{icons[name](props)}</span>
 }

package/src/atoms/Input.scss

@@ -11,7 +11,7 @@
     padding-left: 12px;
   }
 
-  &:has(.input:invalid, .input:required) {
+  &:has(.input.invalid) {
     & .input-help-text {
       color: color_alias.$error-color-1000;
     }
@@ -45,7 +45,7 @@
         border: 1px solid color_alias.$primary-color-1000;
       }
 
-      &:invalid {
+      &.invalid {
         border: 1px solid color_alias.$error-color-1000;
       }
 
@@ -61,7 +61,7 @@
     }
 
     .input-help-text {
-      @include typography.input-help-text;
+      @include typography.form-help-text;
     }
 
     .input-label {
@@ -76,8 +76,6 @@
 
     .icon {
       position: absolute;
-      top: 0.75rem;
-      left: 0.7rem;
       width: config.$icon-size-3x;
       height: config.$icon-size-3x;
       > svg {
@@ -85,6 +83,16 @@
         height: 100%;
       }
     }
+
+    .left-icon {
+      top: 0.75rem;
+      left: 0.7rem;
+    }
+
+    .password-icon {
+      top: 0.75rem;
+      right: 0.7rem;
+    }
   }
 
   .input {

package/src/atoms/Input.tsx

@@ -1,4 +1,5 @@
 import './Input.scss'
+import React, { useState } from 'react'
 import { Icon, IconType } from './Icon'
 
 export type InputVariant = 'primary'
@@ -10,6 +11,7 @@ export interface InputProps extends React.ComponentPropsWithoutRef<'input'> {
   helpText?: string
   variant?: InputVariant
   id: string
+  invalid?: boolean
 }
 
 export function Input({
@@ -22,10 +24,28 @@ export function Input({
   type = 'text',
   name,
   id,
+  invalid,
   ...props
 }: InputProps): React.JSX.Element {
+  const [showPassword, setShowPassword] = useState(false)
   const iconClass = icon ? 'with-icon' : ''
-  const cssClasses = ['input', iconClass].join(' ')
+  const invalidClass = invalid ? 'invalid' : ''
+  const cssClasses = ['input', iconClass, invalidClass].join(' ')
+
+  function handlePasswordIcon() {
+    return showPassword ? 'ShowOff' : 'Show'
+  }
+
+  function handleInputType() {
+    if (type !== 'password') return type
+
+    return showPassword ? 'text' : 'password'
+  }
+
+  function handlePasswordVisibility() {
+    setShowPassword(!showPassword)
+  }
+
   return (
     <div className={`input-group ${variant}`}>
       {!hideLabel && (
@@ -34,16 +54,23 @@ export function Input({
         </label>
       )}
       <div className="input-container">
-        {icon && <Icon name={icon} />}
+        {icon && <Icon className="left-icon" name={icon} />}
         <input
           id={id}
           className={cssClasses}
           disabled={disabled}
-          type={type}
+          type={handleInputType()}
           name={name}
           aria-label={label}
           {...props}
         />
+        {type === 'password' && (
+          <Icon
+            className="password-icon"
+            name={handlePasswordIcon()}
+            onClick={handlePasswordVisibility}
+          />
+        )}
       </div>
       {helpText && <span className="input-help-text">{helpText}</span>}
     </div>

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%;
+        }
+      }
+    }
+  }
+}