agroptima-design-system 0.1.2 → 0.2.0

package/.github/workflows/publish-package-to-npmjs.yml

@@ -0,0 +1,21 @@
+name: Publish Package to npmjs
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      # Setup .npmrc file to publish to npm
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20.x'
+          registry-url: 'https://registry.npmjs.org'
+      - run: npm ci
+      - run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006 --ci",

package/src/atoms/CardsTableList.scss

@@ -29,6 +29,10 @@
     white-space: nowrap;
     text-align: left;
 
+    &.sortable {
+      cursor: pointer;
+    }
+
     .icon {
       width: config.$icon-size-3x;
       height: config.$icon-size-3x;
@@ -41,7 +45,7 @@
   }
 
   td {
-    padding: config.$space-5x;
+    padding: config.$space-5x config.$space-3x;
   }
 
   &.primary {
@@ -59,6 +63,28 @@
             fill: color_alias.$neutral-white;
           }
         }
+
+        &.ascending {
+          > svg {
+            .sorter_svg__up {
+              fill: color_alias.$primary-color-1000;
+            }
+            .sorter_svg__down {
+              fill: color_alias.$neutral-white;
+            }
+          }
+        }
+
+        &.descending {
+          > svg {
+            .sorter_svg__up {
+              fill: color_alias.$neutral-white;
+            }
+            .sorter_svg__down {
+              fill: color_alias.$primary-color-1000;
+            }
+          }
+        }
       }
     }
 

package/src/atoms/CardsTableList.tsx

@@ -1,12 +1,30 @@
 import './CardsTableList.scss'
-import { Icon, IconType } from './Icon'
+import React, { useState } from 'react'
+import { sortBy } from '../utils/sort'
+import { IconType } from './Icon'
+import { CardsTableListHeader } from './CardsTableListHeader'
+import { CardsTableListRow } from './CardsTableListRow'
 
 export type Variant = 'primary'
-export type Header = { label: string; icon?: IconType }
-export type Data = {
+
+export type Header = {
+  label: string
+  icon?: IconType
+  columnId: string
+  isSortable?: boolean
+}
+export type Column = {
   [key: string]: string
 }
-export type Row = { id: string; isDisabled: boolean; data: Data }
+export type Row = { id: string; isDisabled?: boolean; columns: Column }
+
+export enum Order {
+  Ascending = 'ascending',
+  Descending = 'descending',
+  None = 'none',
+}
+
+export type SortState = { columnId: string; order: Order }
 
 export interface CardsTableListProps
   extends React.ComponentPropsWithoutRef<'table'> {
@@ -21,48 +39,59 @@ export function CardsTableList({
   summary,
   variant = 'primary',
 }: CardsTableListProps): React.JSX.Element {
+  const [sortState, setSortState] = useState<SortState | null>(() => {
+    return headers[0]?.isSortable
+      ? { columnId: headers[0].columnId, order: Order.Ascending }
+      : null
+  })
+
   const cssClasses = ['cards-table-list', variant].join(' ')
 
+  function checkColumnOrder(columnId: string) {
+    if (sortState?.columnId === columnId) {
+      return sortState.order
+    }
+    return Order.None
+  }
+
+  function applySort(columnId: string) {
+    if (!headers.find((header) => header.columnId === columnId)?.isSortable) {
+      return
+    }
+
+    setSortState({
+      columnId,
+      order:
+        checkColumnOrder(columnId) === Order.Ascending
+          ? Order.Descending
+          : Order.Ascending,
+    })
+  }
+  const sortedRows = sortState?.columnId
+    ? sortBy({
+        rows,
+        prop: sortState?.columnId,
+        order: sortState?.order,
+      })
+    : rows
   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>
-            )
-          })}
+          {headers.map((header) => (
+            <CardsTableListHeader
+              key={header.columnId}
+              header={header}
+              order={checkColumnOrder(header.columnId)}
+              onClick={() => applySort(header.columnId)}
+            />
+          ))}
         </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>
-          )
-        })}
+        {sortedRows.map((row: Row) => (
+          <CardsTableListRow key={row.id} {...row} />
+        ))}
       </tbody>
     </table>
   )

package/src/atoms/CardsTableListHeader.tsx

@@ -0,0 +1,32 @@
+import { Icon } from './Icon'
+import { Header, Order } from './CardsTableList'
+
+export interface CardsTableListHeaderProps {
+  header: Header
+  order: Order
+  onClick: () => void
+}
+
+export function CardsTableListHeader({
+  header,
+  order,
+  onClick,
+}: CardsTableListHeaderProps) {
+  return (
+    <th
+      scope="col"
+      role="columnheader"
+      className={`header ${header.isSortable ? 'sortable' : ''}`}
+      aria-sort={order}
+      onClick={onClick}
+    >
+      <div className="container">
+        <div className="title-container">
+          <span>{header.label}</span>
+          {header.icon && <Icon name={header.icon} />}
+        </div>
+        {header.isSortable && <Icon name="Sorter" className={order} />}
+      </div>
+    </th>
+  )
+}

package/src/atoms/CardsTableListRow.tsx

@@ -0,0 +1,15 @@
+import { Row } from './CardsTableList'
+
+export function CardsTableListRow({ isDisabled, columns, id }: Row) {
+  const disabledClass = isDisabled ? 'disabled' : ''
+  const cells = Object.entries(columns)
+  return (
+    <tr role="row" className={`row ${disabledClass}`}>
+      {cells.map(([columnId, value]) => (
+        <td role="cell" key={`${id}${columnId}`} className="cell">
+          {value}
+        </td>
+      ))}
+    </tr>
+  )
+}

package/src/stories/CardsTableList.stories.ts

@@ -14,7 +14,8 @@ const meta = {
         'Summary of the table purpose and structure for assistive technologies',
     },
     headers: {
-      description: 'Array of values to be displayed on the headers',
+      description:
+        'Array of values to be displayed on the headers. columnId value must match with rows columns ids.',
     },
     rows: {
       description: 'Array of values to be displayed as the data',
@@ -32,7 +33,64 @@ const figmaPrimaryDesign = {
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Primary: Story = {
+export const WithSorting: Story = {
+  args: {
+    variant: 'primary',
+    summary: 'Videogames companies contact information',
+    headers: [
+      {
+        label: 'Game title',
+        icon: 'Info',
+        columnId: 'name',
+        isSortable: true,
+      },
+      {
+        label: 'Company address',
+        icon: 'Info',
+        columnId: 'address',
+        isSortable: false,
+      },
+      {
+        label: 'Customer service email',
+        columnId: 'email',
+        icon: 'Info',
+        isSortable: true,
+      },
+    ],
+    rows: [
+      {
+        id: '1',
+        columns: {
+          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',
+        columns: {
+          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,
+        columns: {
+          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,
+}
+
+export const NoSorting: Story = {
   args: {
     variant: 'primary',
     summary: 'Videogames companies contact information',
@@ -40,18 +98,23 @@ export const Primary: Story = {
       {
         label: 'Game title',
         icon: 'Info',
+        columnId: 'name',
+      },
+      {
+        label: 'Company address',
+        icon: 'Info',
+        columnId: 'address',
       },
-      { label: 'Company address' },
       {
         label: 'Customer service email',
+        columnId: 'email',
         icon: 'Info',
       },
     ],
     rows: [
       {
         id: '1',
-        isDisabled: false,
-        data: {
+        columns: {
           name: 'Metal Gear Solid 5: The Phantom Pain',
           address:
             'Konami Digital Entertainment Co., Ltd. 1-11-1, Ginza, Chuo-ku, Tokyo, 104-0061 Japan',
@@ -60,8 +123,7 @@ export const Primary: Story = {
       },
       {
         id: '2',
-        isDisabled: false,
-        data: {
+        columns: {
           name: 'The Witcher 3',
           address: 'CD PROJEKT S.A. ul. Jagiellońska 74 03-301 Warszawa Poland',
           email: 'cdprojekt@fakemail.com',
@@ -70,7 +132,7 @@ export const Primary: Story = {
       {
         id: '3',
         isDisabled: true,
-        data: {
+        columns: {
           name: 'Tekken 8',
           address:
             'Bandai Namco Studios Inc. ; Address: 2-37-25 Eitai, Koto-ku, Tokyo 135-0034, Japan',

package/src/stories/Changelog.stories.mdx

@@ -3,6 +3,18 @@ import { Meta } from "@storybook/addon-docs";
 <Meta title="Changelog" />
 # Changelog
 
+## 0.2.0
+
+- Sorting has been added to the CardsTableList component.
+
+BREAKING CHANGES
+- `columnId` prop is required from this version.
+- rows `data` prop has been renamed to `columns`.
+
+## 0.1.3
+
+Update left padding on the cells from CardsTableList component
+
 ## 0.1.2
 
 Cards Table List component is added to Storybook with the following features:

package/src/stories/Icons.stories.mdx

@@ -5,6 +5,11 @@ import * as Icons from '../icons'
 
 # Icons
 
+📁 You can find the source icons on this [link]( https://drive.google.com/drive/folders/16L5iR5KnDP9kfeCF-mDU0C0LiJZi0cwi).
+
+ℹ️ If you need to edit the svgo default options, check this [link](https://stackoverflow.com/a/70360615).
+
+
 <IconGallery>
 {
   Object.values(Icons).map((Icon) => {

package/src/stories/ProgrammersStartingGuide.stories.mdx

@@ -3,4 +3,36 @@ import { Meta } from "@storybook/addon-docs";
 <Meta title="Programmers start guide" />
 # Getting started guide for programmers
 
-WIP
+## Indigo Project
+
+### Install agroptima-design-system dependency
+
+On the frontend project's package.json, you can see the `agroptima-design-system` dependency.
+
+After installing all the project dependencies, run `npm i agroptima-design-system@latest` to have the latest version 
+of the design sytem package.
+
+### Import & use design system components
+
+Import the desired component:
+
+`import { Input } from 'agroptima-design-system/src/atoms/Button'`
+
+Use the desired component:
+
+```
+<Button
+    type="submit"
+    label="Login"
+    loading={isSubmitting}
+    variant="primary"
+/>
+```
+
+
+## Sioux Project
+
+We have been focused on creating prioritized components, learning how Storybook works and behaves, making the Design System independent 
+from the Indigo project and checking the consumption of components from a single project.
+
+Once we reach the needed checkpoint, we'll continue the integration of the Design System with Sioux project. 

package/src/stories/Welcome.stories.mdx

@@ -31,3 +31,7 @@ If you have any questions, proposals, needs or issues, don't hesitate to contact
 
 ## How to report issues
 
+You can report an issue on the [Issues section](https://github.com/agroptima/design-system/issues) of the design system repo. 
+
+Contact with the responsibles of the project to make them aware of the reported issue.
+

package/src/stories/Workflow.stories.mdx

@@ -3,6 +3,14 @@ import { Meta } from "@storybook/addon-docs";
 <Meta title="Component creation workflow" />
 # Component creation workflow
 
+## Style properties conditioned by variants
+
+The following properties are the ones which will change depending on the variant provided:
+
+- Font family
+- Border radius
+- Colours: Except Error and Success variants colours which are common for all themes
+
 ## How does the Design Team work
 
 🌈  <b>The Figma design system is the only source of truth and the collaboration, teamwork and regard among 

package/src/utils/sort.ts

@@ -0,0 +1,31 @@
+import { Order, Row } from '../atoms/CardsTableList'
+
+interface Parse {
+  (x: string): string
+}
+
+export interface Sort {
+  rows: Row[]
+  prop: string
+  order: string
+  parse?: Parse
+}
+
+export function sortBy({
+  rows,
+  prop,
+  order = Order.Ascending,
+  parse = (x) => x,
+}: Sort) {
+  const sortOrder = order === Order.Descending ? -1 : 1
+  return rows.sort((a: Row, b: Row) => {
+    let result = 0
+    if (parse(a.columns[prop]) < parse(b.columns[prop])) {
+      result = -1
+    }
+    if (parse(a.columns[prop]) > parse(b.columns[prop])) {
+      result = 1
+    }
+    return result * sortOrder
+  })
+}