agroptima-design-system 0.10.0 → 0.11.0

package/.storybook/main.ts

@@ -52,6 +52,13 @@ const config: StorybookConfig = {
       imageRule['exclude'] = /\.svg$/i
     }
 
+    if (config.resolve) {
+      config.resolve.alias = {
+        ...config.resolve.alias,
+        '@': resolve(__dirname, '../src'),
+      }
+    }
+
     return config
   },
 }

package/package.json

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

package/src/atoms/Alert.tsx

@@ -1,6 +1,7 @@
 import { IconButton, IconButtonProps } from './IconButton'
 import { Icon } from './Icon'
 import './Alert.scss'
+import { classNames } from '@/utils/classNames'
 
 export type Variant = 'info' | 'success' | 'warning' | 'error'
 
@@ -22,14 +23,15 @@ export enum IconVariant {
 export function Alert({
   id,
   variant = 'success',
-  className = '',
+  className,
   fitContent = false,
   text,
   button,
   ...props
 }: AlertProps): React.JSX.Element {
-  const fitContentClass = fitContent ? 'fit-content' : ''
-  const cssClasses = ['alert', variant, className, fitContentClass].join(' ')
+  const cssClasses = classNames('alert', variant, className, {
+    'fit-content': fitContent,
+  })
 
   return (
     <div

package/src/atoms/Badge.tsx

@@ -1,3 +1,4 @@
+import { classNames } from '@/utils/classNames'
 import './Badge.scss'
 
 export type Variant =
@@ -18,11 +19,12 @@ export interface BadgeProps extends React.ComponentPropsWithoutRef<'div'> {
 
 export function Badge({
   variant = 'info',
+  className,
   text,
   accessibilityLabel,
   ...props
 }: BadgeProps): React.JSX.Element {
-  const cssClasses = ['badge', variant].join(' ')
+  const cssClasses = classNames('badge', variant, className)
 
   return (
     <span

package/src/atoms/Button.tsx

@@ -1,6 +1,7 @@
 import NextLink from 'next/link'
 import './Button.scss'
 import { Icon, IconType } from './Icon'
+import { classNames } from '@/utils/classNames'
 
 export interface BaseButtonProps {
   label: string
@@ -56,15 +57,15 @@ export function Button({
   if (loading) {
     leftIcon = 'Loading'
   }
-  const cssClasses = ['button', variant].join(' ')
+  const cssClasses = classNames('button', variant, props.className)
 
   if (hasHref(props)) {
     return (
       <NextLink
         href={props.href || ''}
-        className={cssClasses}
         aria-label={accessibilityLabel || label}
         {...props}
+        className={cssClasses}
       >
         {leftIcon && <Icon name={leftIcon} />}
         {label}
@@ -75,10 +76,10 @@ export function Button({
 
   return (
     <button
-      className={cssClasses}
       disabled={loading || disabled}
       aria-label={accessibilityLabel || label}
       {...props}
+      className={cssClasses}
     >
       {leftIcon && <Icon name={leftIcon} />}
       {label}

package/src/atoms/CardsTable.tsx

@@ -1,3 +1,4 @@
+import { classNames } from '@/utils/classNames'
 import './CardsTable.scss'
 
 export type Variant = 'primary'
@@ -8,13 +9,13 @@ export interface CardsTableProps
 }
 
 export function CardsTable({
+  className,
   summary,
   variant = 'primary',
   children,
   ...props
 }: CardsTableProps): React.JSX.Element {
-  const cssClasses = ['cards-table-list', variant].join(' ')
-
+  const cssClasses = classNames('cards-table-list', variant, className)
   return (
     <table summary={summary} role="table" className={cssClasses} {...props}>
       {children}

package/src/atoms/CardsTableCell.tsx

@@ -1,3 +1,4 @@
+import { classNames } from '@/utils/classNames'
 import './CardsTable.scss'
 import React from 'react'
 
@@ -20,12 +21,9 @@ export function CardsTableCell({
   className,
   ...props
 }: CardsTableCellProps): React.JSX.Element {
-  const cssClasses = [
-    'cell',
-    noWrap ? 'no-wrap' : '',
-    `alignment-${align}`,
-    className,
-  ].join(' ')
+  const cssClasses = classNames('cell', `alignment-${align}`, className, {
+    'no-wrap': noWrap,
+  })
   return (
     <td role="cell" className={cssClasses} {...props}>
       {children}

package/src/atoms/CardsTableHeader.tsx

@@ -1,3 +1,5 @@
+import { classNames } from '@/utils/classNames'
+
 export interface CardsTableHeaderProps
   extends React.ComponentPropsWithoutRef<'th'> {}
 
@@ -6,7 +8,7 @@ export function CardsTableHeader({
   className,
   ...props
 }: CardsTableHeaderProps) {
-  const cssClasses = ['header', className].join(' ')
+  const cssClasses = classNames('header', className)
   return (
     <th scope="col" role="columnheader" className={cssClasses} {...props}>
       {children}

package/src/atoms/Checkbox.tsx

@@ -1,3 +1,4 @@
+import { classNames } from '@/utils/classNames'
 import './Checkbox.scss'
 
 export type Variant = 'primary'
@@ -17,26 +18,28 @@ export function Checkbox({
   disabled,
   variant = 'primary',
   id,
+  name,
   ...props
 }: CheckboxProps) {
-  const disabledClass = disabled ? 'disabled' : ''
-  const cssClasses = ['checkbox', variant].join(' ')
+  const identifier = id || name
+  const inputCss = classNames('checkbox', variant)
+  const labelCss = classNames('checkbox-label-container', {
+    disabled: disabled,
+  })
 
   return (
     <div className={`checkbox-group ${variant}`}>
       <input
-        id={id}
+        id={identifier}
+        name={name}
         type="checkbox"
-        className={cssClasses}
+        className={inputCss}
         disabled={disabled}
         aria-label={accessibilityLabel}
         {...props}
       />
 
-      <label
-        className={`checkbox-label-container ${disabledClass}`}
-        htmlFor={id}
-      >
+      <label className={labelCss} htmlFor={identifier}>
         <span className="background-icon"></span>
         {!hideLabel && <span className="label">{label}</span>}
       </label>

package/src/atoms/EmptyState.tsx

@@ -1,3 +1,4 @@
+import { classNames } from '@/utils/classNames'
 import { Button, ButtonProps } from './Button'
 import './EmptyState.scss'
 import { Icon, IconType } from './Icon'
@@ -12,12 +13,13 @@ export interface EmptyStateProps extends React.ComponentPropsWithoutRef<'div'> {
 }
 
 export function EmptyState({
+  className,
   icon = 'EmptyState',
   text = 'No data',
   variant = 'primary',
   button,
 }: EmptyStateProps): React.JSX.Element {
-  const cssClasses = ['empty-state', variant].join(' ')
+  const cssClasses = classNames('empty-state', variant, className)
 
   return (
     <div className={cssClasses}>

package/src/atoms/Icon.tsx

@@ -1,6 +1,7 @@
 import './Icon.scss'
 
 import * as icons from '../icons'
+import { classNames } from '@/utils/classNames'
 export type IconType = keyof typeof icons
 
 export interface IconProps extends React.SVGAttributes<HTMLOrSVGElement> {
@@ -9,11 +10,9 @@ export interface IconProps extends React.SVGAttributes<HTMLOrSVGElement> {
 }
 
 export const Icon: React.FC<IconProps> = ({ name, className, ...props }) => {
-  const cssClasses = [
-    'icon',
-    className,
-    name === 'Loading' ? 'rotate' : '',
-  ].join(' ')
+  const cssClasses = classNames('icon', className, {
+    rotate: name === 'Loading',
+  })
   return (
     <span role="img" title={name} className={cssClasses}>
       {icons[name](props)}

package/src/atoms/IconButton.tsx

@@ -1,6 +1,7 @@
 import NextLink from 'next/link'
 import './IconButton.scss'
 import { Icon, IconType } from './Icon'
+import { classNames } from '@/utils/classNames'
 
 export type Variant = 'primary'
 
@@ -29,15 +30,15 @@ export function IconButton({
   variant = 'primary',
   ...props
 }: IconButtonProps) {
-  const cssClasses = ['icon-button', variant].join(' ')
+  const cssClasses = classNames('icon-button', variant, props.className)
 
   if (hasHref(props)) {
     return (
       <NextLink
         href={props.href || ''}
-        className={cssClasses}
         aria-label={accessibilityLabel}
         {...props}
+        className={cssClasses}
       >
         <Icon name={icon} />
       </NextLink>
@@ -46,10 +47,10 @@ export function IconButton({
 
   return (
     <button
-      className={cssClasses}
       disabled={disabled}
       aria-label={accessibilityLabel}
       {...props}
+      className={cssClasses}
     >
       <Icon name={icon} />
     </button>

package/src/atoms/Input.tsx

@@ -1,6 +1,8 @@
-import './Input.scss'
 import React, { useState } from 'react'
 import { Icon, IconType } from './Icon'
+import { classNames } from '@/utils/classNames'
+import './Input.scss'
+import { buildHelpText } from '@/utils/buildHelpText'
 
 export type InputVariant = 'primary'
 
@@ -18,6 +20,7 @@ export interface InputProps extends React.ComponentPropsWithoutRef<'input'> {
 export function Input({
   label,
   accessibilityLabel,
+  className,
   hideLabel = false,
   icon,
   helpText,
@@ -29,10 +32,13 @@ export function Input({
   errors,
   ...props
 }: InputProps): React.JSX.Element {
+  const identifier = id || name
   const [showPassword, setShowPassword] = useState(false)
-  const iconClass = icon ? 'with-icon' : ''
-  const invalidClass = errors ? 'invalid' : ''
-  const cssClasses = ['input', iconClass, invalidClass].join(' ')
+  const cssClasses = classNames('input', className, {
+    'with-icon': icon,
+    invalid: errors?.length,
+  })
+  const helpTexts = buildHelpText(helpText, errors)
 
   function handlePasswordIcon() {
     return showPassword ? 'ShowOff' : 'Show'
@@ -51,14 +57,14 @@ export function Input({
   return (
     <div className={`input-group ${variant}`}>
       {!hideLabel && (
-        <label className="input-label" htmlFor={id}>
+        <label className="input-label" htmlFor={identifier}>
           {label}
         </label>
       )}
       <div className="input-container">
         {icon && <Icon className="left-icon" name={icon} />}
         <input
-          id={id}
+          id={identifier}
           className={cssClasses}
           disabled={disabled}
           type={handleInputType()}
@@ -74,17 +80,11 @@ export function Input({
           />
         )}
       </div>
-      {helpText && !errors && (
-        <span className="input-help-text">{helpText}</span>
-      )}
-      {errors &&
-        errors?.map((error, index) => {
-          return (
-            <span key={`error-${index}`} className="input-help-text">
-              {error}
-            </span>
-          )
-        })}
+      {helpTexts.map((helpText) => (
+        <span key={`${identifier}-${helpText}`} className="input-help-text">
+          {helpText}
+        </span>
+      ))}
     </div>
   )
 }

package/src/atoms/Modal.tsx

@@ -1,3 +1,4 @@
+import { classNames } from '@/utils/classNames'
 import { Button, ButtonProps } from './Button'
 import { Icon } from './Icon'
 import './Modal.scss'
@@ -21,13 +22,14 @@ export interface ModalProps extends React.ComponentPropsWithoutRef<'div'> {
 
 export function Modal({
   id,
+  className,
   variant = 'info',
   title,
   buttons,
   children,
   ...props
 }: ModalProps): React.JSX.Element {
-  const cssClasses = ['modal', variant].join(' ')
+  const cssClasses = classNames('modal', variant, className)
 
   return (
     <div className="modal-container">

package/src/atoms/Multiselect.tsx

@@ -1,6 +1,8 @@
 import './Multiselect.scss'
 import React, { useState } from 'react'
 import { Icon } from './Icon'
+import { classNames } from '@/utils/classNames'
+import { buildHelpText } from '@/utils/buildHelpText'
 
 export type Variant = 'primary'
 export type Option = { id: string; label: string }
@@ -20,6 +22,7 @@ export interface MultiselectProps
 }
 
 export function Multiselect({
+  className,
   placeholder,
   helpText,
   variant = 'primary',
@@ -34,23 +37,17 @@ export function Multiselect({
   selected,
   ...props
 }: MultiselectProps): React.JSX.Element {
+  const helpTexts = buildHelpText(helpText, errors)
   const [showOptionsList, setShowOptionsList] = useState(false)
   const [selectedOptionsIds, setSelectedOptionsIds] = useState<string[]>(
     selected?.map((option) => option.id) || [],
   )
-
-  const optionsListOpenClass = showOptionsList ? 'open' : ''
-  const filledSelectClass = selectedOptionsIds.length > 0 ? 'filled' : ''
-  const disabledClass = disabled ? 'disabled' : ''
-  const invalidClass = errors ? 'invalid' : ''
-
-  const cssClasses = [
-    'selected-option',
-    optionsListOpenClass,
-    filledSelectClass,
-    disabledClass,
-    invalidClass,
-  ].join(' ')
+  const cssClasses = classNames('selected-option', className, {
+    open: showOptionsList,
+    filled: selectedOptionsIds.length > 0,
+    disabled: disabled,
+    invalid: errors?.length,
+  })
 
   function handleOptionsList() {
     if (!disabled) setShowOptionsList(!showOptionsList)
@@ -130,19 +127,11 @@ export function Multiselect({
           </ul>
         )}
       </div>
-      {helpText && !errors && (
-        <span className={`multiselect-help-text ${invalidClass}`}>
+      {helpTexts.map((helpText) => (
+        <span key={`${name}-${helpText}`} className="multiselect-help-text">
           {helpText}
         </span>
-      )}
-      {errors &&
-        errors?.map((error, index) => {
-          return (
-            <span key={`error-${index}`} className="multiselect-help-text">
-              {error}
-            </span>
-          )
-        })}
+      ))}
       <input
         type="hidden"
         name={name}

package/src/atoms/Select.tsx

@@ -1,6 +1,8 @@
 import './Select.scss'
 import React, { useState } from 'react'
 import { Icon } from './Icon'
+import { classNames } from '@/utils/classNames'
+import { buildHelpText } from '@/utils/buildHelpText'
 
 export type Variant = 'primary'
 export type Option = { id: string; label: string }
@@ -23,6 +25,7 @@ export interface SelectProps extends InputPropsWithoutOnChange {
 }
 
 export function Select({
+  className,
   placeholder,
   helpText,
   variant = 'primary',
@@ -37,24 +40,19 @@ export function Select({
   onChange,
   ...props
 }: SelectProps): React.JSX.Element {
+  const helpTexts = buildHelpText(helpText, errors)
   const [showOptionsList, setShowOptionsList] = useState(false)
   const [selectedOption, setSelectedOption] = useState<Option>({
     id: selected?.id || '',
     label: selected?.label || '',
   })
 
-  const optionsListOpenClass = showOptionsList ? 'open' : ''
-  const filledSelectClass = selectedOption.id ? 'filled' : ''
-  const disabledClass = disabled ? 'disabled' : ''
-  const invalidClass = errors ? 'invalid' : ''
-
-  const cssClasses = [
-    'selected-option',
-    optionsListOpenClass,
-    filledSelectClass,
-    disabledClass,
-    invalidClass,
-  ].join(' ')
+  const cssClasses = classNames('selected-option', className, {
+    open: showOptionsList,
+    filled: selectedOption.id,
+    disabled: disabled,
+    invalid: errors?.length,
+  })
 
   function handleOptionsList() {
     if (!disabled) setShowOptionsList(!showOptionsList)
@@ -113,17 +111,11 @@ export function Select({
           </ul>
         )}
       </div>
-      {helpText && !errors && (
-        <span className="select-help-text">{helpText}</span>
-      )}
-      {errors &&
-        errors?.map((error, index) => {
-          return (
-            <span key={`error-${index}`} className="select-help-text">
-              {error}
-            </span>
-          )
-        })}
+      {helpTexts.map((helpText) => (
+        <span key={`${name}-${helpText}`} className="select-help-text">
+          {helpText}
+        </span>
+      ))}
       <input type="hidden" name={name} value={selectedOption.id} {...props} />
     </div>
   )

package/src/atoms/TextArea.tsx

@@ -0,0 +1,58 @@
+import { classNames } from '@/utils/classNames'
+import { buildHelpText } from '@/utils/buildHelpText'
+import './Input.scss'
+
+export type TextAreaVariant = 'primary'
+
+export interface TextAreaProps
+  extends React.ComponentPropsWithoutRef<'textarea'> {
+  label: string
+  accessibilityLabel?: string
+  hideLabel?: boolean
+  helpText?: string
+  variant?: TextAreaVariant
+  id?: string
+  errors?: string[]
+}
+
+export default function TextArea({
+  id,
+  label,
+  className,
+  accessibilityLabel,
+  hideLabel = false,
+  helpText,
+  variant = 'primary',
+  disabled,
+  name,
+  errors,
+  ...props
+}: TextAreaProps) {
+  const identifier = id || name
+  const cssClasses = classNames('input', className, { invalid: errors?.length })
+  const helpTexts = buildHelpText(helpText, errors)
+  return (
+    <div className={`input-group ${variant}`}>
+      {!hideLabel && (
+        <label className="input-label" htmlFor={identifier}>
+          {label}
+        </label>
+      )}
+      <div className="input-container">
+        <textarea
+          id={identifier}
+          className={cssClasses}
+          disabled={disabled}
+          name={name}
+          aria-label={accessibilityLabel || label}
+          {...props}
+        />
+      </div>
+      {helpTexts.map((helpText) => (
+        <span key={`${identifier}-${helpText}`} className="input-help-text">
+          {helpText}
+        </span>
+      ))}
+    </div>
+  )
+}

package/src/stories/Changelog.stories.mdx

@@ -3,6 +3,10 @@ import { Meta } from "@storybook/addon-docs";
 <Meta title="Changelog" />
 # Changelog
 
+## 0.11.0
+- Added TextArea component to Storybook.
+- Id prop is now optional in Input, Select, Multiselect and TextArea components.
+
 ## 0.10.0
 
 - Cards Table components now are responsive.

package/src/stories/Input.stories.ts

@@ -31,7 +31,7 @@ const meta = {
     type: {
       description: 'Input type property',
     },
-    leftIcon: {
+    icon: {
       description: 'Input left icon from a list of values',
     },
     id: {

package/src/stories/TextArea.stories.ts

@@ -0,0 +1,78 @@
+import TextArea from '../atoms/TextArea'
+import { StoryObj } from '@storybook/react'
+
+const meta = {
+  title: 'Design System/Atoms/Textarea',
+  component: TextArea,
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      description: 'Label for the textarea',
+    },
+    accessibilityLabel: {
+      description:
+        'Describes the textarea purpose. If empty, label content will be used',
+    },
+    placeholder: {
+      description: 'Optional textarea placeholder text',
+    },
+    variant: {
+      description: 'Textarea variant used',
+    },
+    disabled: {
+      description: 'Is the textarea in disabled state?',
+    },
+    helpText: {
+      description: 'Optional help text',
+    },
+    name: {
+      description: 'Textarea name property',
+    },
+    id: {
+      description: 'Value needed for the label relation',
+    },
+    errors: {
+      description:
+        'Optional array of errors. If passed, the errors are listed and invalid style is applied.',
+    },
+  },
+}
+
+const figmaPrimaryDesign = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/DN2ova21vWqCRvPspBXgI1/Design-System?type=design&node-id=2371-2157&mode=dev',
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Primary: Story = {
+  args: {
+    label: 'Textarea',
+    accessibilityLabel: 'Fill the textarea',
+    placeholder: 'Write here...',
+    variant: 'primary',
+    disabled: false,
+    helpText: 'This text can help you',
+    name: 'textarea',
+    id: 'textarea',
+  },
+  parameters: figmaPrimaryDesign,
+}
+
+export const WithErrors: Story = {
+  args: {
+    label: 'Textarea',
+    accessibilityLabel: 'Fill the form textarea',
+    placeholder: 'Write here...',
+    variant: 'primary',
+    disabled: false,
+    helpText: 'This text can help you',
+    name: 'textarea',
+    id: 'textarea',
+    errors: ['error1', 'error2'],
+  },
+  parameters: figmaPrimaryDesign,
+}

package/src/utils/buildHelpText.ts

@@ -0,0 +1,12 @@
+export function buildHelpText(
+  helpText: string | undefined,
+  errors: string[] | undefined,
+): string[] {
+  if (Boolean(errors?.length)) {
+    return errors || []
+  }
+  if (helpText) {
+    return [helpText]
+  }
+  return []
+}

package/src/utils/classNames.ts

@@ -0,0 +1,23 @@
+type classNameProp = string | { [key: string]: any } | undefined
+
+export const classNames = (...classNames: classNameProp[]): string => {
+  const resultClasses: string[] = []
+
+  classNames.forEach((className) => {
+    if (className === undefined) {
+      return
+    }
+
+    if (typeof className === 'string') {
+      return resultClasses.push(className)
+    }
+
+    Object.keys(className).forEach((key) => {
+      if (Boolean(className[key])) {
+        resultClasses.push(key)
+      }
+    })
+  })
+
+  return resultClasses.join(' ')
+}

package/tests/utils/classNames.spec.tsx

@@ -0,0 +1,13 @@
+import { classNames } from '@/utils/classNames'
+
+describe('classNames', () => {
+  it('returns a string of classes', () => {
+    expect(classNames('class1', 'class2')).toBe('class1 class2')
+  })
+  it('ignores undefined', () => {
+    expect(classNames('class1', undefined, 'class2')).toBe('class1 class2')
+  })
+  it('returns a string of classes with object', () => {
+    expect(classNames({ class1: true, class2: false })).toBe('class1')
+  })
+})