@sebgroup/green-react 3.29.0 → 3.29.1-rc.20250730100346308

package/src/lib/form/buttonGroup/buttonGroup.stories.tsx

@@ -0,0 +1,30 @@
+import { Button } from '../button/button'
+import { ButtonGroup } from './buttonGroup'
+
+const Template = ({ children, ...props }) => (
+  <ButtonGroup {...props}>
+    <Button>First Button</Button>
+    <Button>Second Button</Button>
+    <Button>Third Button</Button>
+    <Button>Forth Button</Button>
+  </ButtonGroup>
+)
+
+export default {
+  title: 'Components/Form/ButtonGroup',
+  component: ButtonGroup,
+}
+
+export const Default = {
+  render: Template.bind({}),
+  name: 'Button Group',
+
+  parameters: {
+    componentIds: ['component-segmented-control'],
+  },
+
+  args: {
+    variant: 'ghost',
+    selectedIndex: 1,
+  },
+}

package/src/lib/form/buttonGroup/buttonGroup.test.tsx

@@ -0,0 +1,37 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+
+import { Button, ButtonGroup } from '..'
+
+describe('ButtonGroup', () => {
+  const buttonClick = jest.fn()
+  const MockButtonGroup = () => {
+    return (
+      <ButtonGroup>
+        <Button onClick={buttonClick}>Hello</Button>
+        <Button>Hello</Button>
+      </ButtonGroup>
+    )
+  }
+
+  it('renders single button', () => {
+    render(
+      <ButtonGroup>
+        <Button>Hello</Button>
+      </ButtonGroup>,
+    )
+
+    expect(screen.getAllByRole('button')).toHaveLength(1)
+  })
+  it('renders buttons', () => {
+    render(<MockButtonGroup />)
+
+    expect(screen.getAllByRole('button')).toHaveLength(2)
+  })
+
+  it('should click button', () => {
+    render(<MockButtonGroup />)
+
+    fireEvent.click(screen.getAllByRole('button')[0])
+    expect(buttonClick).toBeCalled()
+  })
+})

package/src/lib/form/buttonGroup/buttonGroup.tsx

@@ -0,0 +1,59 @@
+import { JSX, ReactElement, useEffect, useState } from 'react'
+import classNames from 'classnames'
+
+import { ButtonVariant } from '@sebgroup/extract'
+import { Group } from '../'
+import { Button, ButtonProps } from '../button/button'
+
+interface ButtonGroupProps {
+  children: ReactElement<ButtonProps> | ReactElement<ButtonProps>[]
+  /** Class names passed to the child elements */
+  className?: string
+  selectedIndex?: number
+  variant?: ButtonVariant
+  id?: string
+}
+type Props = ButtonProps & JSX.IntrinsicAttributes
+export const ButtonGroup = ({
+  children,
+  className,
+  selectedIndex,
+  variant,
+  id,
+}: ButtonGroupProps) => {
+  const [selected, setSelected] = useState(selectedIndex)
+  const [buttons, setButtons] = useState<Props[]>([])
+
+  useEffect(() => {
+    const buttonProps: Props[] = (
+      children instanceof Array ? children : [children]
+    )
+      .filter((b) => b && b.props)
+      .map((b, ix) => {
+        const bp = b.props
+        const props: Props = {
+          ...bp,
+          variant,
+          key: bp.key || `btn_${ix}`,
+          active: ix === selected,
+          onClick: (e) => {
+            setSelected(ix)
+            if (bp.onClick) bp.onClick(e)
+          },
+          className: classNames(bp.className, className),
+        }
+        return props
+      })
+    setButtons(buttonProps)
+  }, [children, selected, variant, className])
+
+  return (
+    <Group data-label="button-group" id={id}>
+      {buttons.map(({ key, ...props }) => (
+        <Button key={key} {...props} />
+      ))}
+    </Group>
+  )
+}
+
+export default ButtonGroup

package/src/lib/form/buttonGroup/index.tsx

@@ -0,0 +1 @@
+export * from './buttonGroup'

package/src/lib/form/checkbox/checkbox.mdx

@@ -0,0 +1,74 @@
+import { Controls, Meta, Story, Canvas } from '@storybook/blocks'
+import { Checkbox } from './checkbox'
+import * as CheckboxStories from './checkbox.stories';
+
+export const CheckboxTemplate = ({ ...props }) => <Checkbox {...props} />
+
+<Meta of={CheckboxStories} />
+
+# Checkbox
+
+## Basic
+
+<Canvas of={CheckboxStories.Default} />
+
+## Checked state
+
+You control the state of the checkbox by setting the `checked` prop to true or false. You can use the `onChange` handler to listen to user input and update state in your app accordingly.
+
+```tsx
+function RobotCheckComponent () {
+  const [isRobot, setIsRobot] = useState<boolean>()
+
+  return (
+    <Checkbox
+      label="Check this if you are a robot"
+      checked={isRobot}
+      onChange={(event) => { setIsRobot(event.target.checked) }
+    />
+  )
+}
+```
+
+## States and variants checkbox
+
+
+<form>
+  <Checkbox label="Normal unchecked" />
+
+  <Checkbox label="Normal checked" checked />
+
+  <Checkbox
+    label="Invalid unchecked"
+    validator={{
+      indicator: 'error',
+      message: 'Invalid',
+    }}
+  />
+
+  <Checkbox
+    label="Invalid checked"
+    validator={{
+      indicator: 'error',
+      message: 'Invalid',
+    }}
+    checked
+  />
+</form>
+
+## Validation
+
+```jsx
+<Checkbox
+  label="Invalid checked"
+  validator={{
+    indicator: 'error',
+    message: 'Error',
+  }}
+  checked
+/>
+```
+
+## Properties
+
+<Controls />

package/src/lib/form/checkbox/checkbox.spec.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+
+import { Checkbox } from './checkbox'
+
+describe('Checkbox', () => {
+  it('ref becomes checkbox input element', () => {
+    const ref = React.createRef<HTMLInputElement>()
+    render(<Checkbox ref={ref} />)
+
+    expect(ref.current).toBeInstanceOf(HTMLInputElement)
+    expect(ref.current?.type).toBe('checkbox')
+  })
+})

package/src/lib/form/checkbox/checkbox.stories.tsx

@@ -0,0 +1,23 @@
+import { Checkbox } from './checkbox'
+
+const CheckboxTemplate = ({ ...props }) => <Checkbox {...props} />
+
+export default {
+  title: 'Components/Form/Checkbox',
+  component: Checkbox,
+  args: {},
+}
+
+export const Default = {
+  render: CheckboxTemplate.bind({}),
+  name: 'Checkbox',
+
+  parameters: {
+    componentIds: ['component-checkbox'],
+  },
+
+  args: {
+    label: 'Checkbox input',
+    defaultChecked: false,
+  },
+}

package/src/lib/form/checkbox/checkbox.tsx

@@ -0,0 +1,91 @@
+import {
+  FormEventHandler,
+  ForwardedRef,
+  forwardRef,
+  HTMLProps,
+  useState,
+} from 'react'
+import classNames from 'classnames'
+
+import { IValidator, randomId, validateClassName } from '@sebgroup/extract'
+import { IconTriangleExclamation } from '../../icon/icons/IconTriangleExclamation'
+
+export interface CheckboxProps extends HTMLProps<HTMLInputElement> {
+  /** Use this prop to control the checked state of the checkbox */
+  checked?: boolean
+  /** The label of the checkbox */
+  label?: string
+  /** A test id that will be placed in the `data-testid` attribute on the input element */
+  testId?: string
+  /** An object used to render the validation status for the component */
+  validator?: IValidator
+  /** A handler function that takes the event and can act on it */
+  onChange?: FormEventHandler<HTMLInputElement>
+}
+
+export const Checkbox = forwardRef(
+  (
+    {
+      'aria-describedby': ariaDescribedBy,
+      id = randomId(),
+      label,
+      validator,
+      testId,
+      required,
+      className,
+      ...props
+    }: CheckboxProps,
+    ref: ForwardedRef<HTMLInputElement>,
+  ) => {
+    const [uuid] = useState(id)
+
+    const validationClassName = validateClassName(validator?.indicator)
+
+    const labelClassNames = classNames('form-control', {
+      [validationClassName]: validator,
+    })
+
+    const inputClassNames = classNames(className, {
+      [validationClassName]: validator,
+    })
+
+    const describedBy = classNames(ariaDescribedBy, {
+      [`${uuid}_message`]:
+        validator?.message !== undefined && validator.message.length > 0,
+    })
+
+    return (
+      <div className="form-group">
+        <label htmlFor={uuid} className={labelClassNames}>
+          {label}
+          <input
+            aria-describedby={describedBy || undefined}
+            aria-invalid={validator?.indicator === 'error'}
+            aria-required={required}
+            className={inputClassNames || undefined}
+            type="checkbox"
+            data-testid={testId}
+            id={uuid}
+            required={required}
+            ref={ref}
+            {...props}
+          />
+          <i />
+        </label>
+        {validator && (
+          <span
+            className="form-info"
+            id={`${uuid}_message`}
+            style={{ display: 'flex', gap: '0.25rem' }}
+          >
+            <IconTriangleExclamation
+              size="16px"
+              margin="2xs 0 0 0"
+            ></IconTriangleExclamation>
+            {validator.message}
+          </span>
+        )}
+      </div>
+    )
+  },
+)

package/src/lib/form/checkbox/index.tsx

@@ -0,0 +1 @@
+export * from './checkbox'

package/src/lib/form/form.mdx

@@ -0,0 +1,190 @@
+import { Meta, Story, Canvas, Controls } from '@storybook/blocks'
+import {
+  Form,
+  TextInput,
+  EmailInput,
+  NumberInput,
+  Button,
+  ButtonGroup,
+  Checkbox,
+  Text,
+  FormItems,
+  RadioGroup,
+  RadioButton,
+} from './'
+import AlertRibbon from '../alert-ribbon/alert-ribbon'
+import * as FormStories from './form.stories';
+
+export const Styles = () => (
+  <style>
+    {`
+    form{
+      padding: 1rem 2rem;
+      background-color: white
+    }
+    .row .col-12 .form-group{
+      width: 100%;
+    }
+    .row .col-6 .form-group{
+      width: 100%;
+    }
+    .row .col-12 button{
+      width: 100%
+    }
+    .row{
+      margin-bottom: 1.2rem;
+    }
+    div[role='alert']{
+      width: 100%
+    }
+  `}
+  </style>
+)
+
+export const Template = ({ children, ...props }) => (
+  <Form {...props}>
+    <Styles />
+    <h1>Form example</h1>
+    <div className="row">
+      <div className="col-12">
+        <AlertRibbon type="info" header="" isCloseable={false}>
+          Alert content placed inside a paragraph. Inline link will inherit
+          color from alert to make sure contrast is applied.
+        </AlertRibbon>
+      </div>
+    </div>
+    <h2>Inputs</h2>
+    <div className="row mb-0">
+      <div className="col-6 ">
+        <FormItems
+          name="text"
+          validate={{
+            message: 'Required',
+            indicator: 'error',
+            rules: { type: 'Required' },
+          }}
+        >
+          <TextInput id="namedField" label="Person name" />
+        </FormItems>
+      </div>
+      <div className="col-6">
+        <FormItems
+          name="number"
+          validate={{
+            message: 'Required',
+            indicator: 'error',
+            rules: { type: 'Required' },
+          }}
+        >
+          <NumberInput label="Numeric field" min={-1} max={10} step={2} />
+        </FormItems>
+      </div>
+      <div className="col-12">
+        <FormItems
+          name="email"
+          validate={{
+            message: 'Required',
+            indicator: 'error',
+            rules: { type: 'Required' },
+          }}
+        >
+          <EmailInput label="Email field" />
+        </FormItems>
+      </div>
+    </div>
+    <div className="row">
+      <div className="col-6">
+        <h2>Checkbox</h2>
+        <FormItems
+          name="checkbox"
+          validate={{
+            message: 'Required',
+            indicator: 'error',
+            rules: { type: 'Required' },
+          }}
+        >
+          <Checkbox label="Some checkbox" value="checkme" />
+        </FormItems>
+      </div>
+      <div className="col-6">
+        <h2 className="mb-3">Text</h2>
+        <Text>Static text</Text>
+      </div>
+    </div>
+    <div className="row mb-0">
+      <div className="col-12 mb-5">
+        <h2>Button Group</h2>
+      </div>
+      <div className="col-6">
+        <ButtonGroup>
+          <Button>Button 1</Button>
+          <Button>Button 2</Button>
+        </ButtonGroup>
+      </div>
+    </div>
+    <div className="row mb-0">
+      <div className="col-12 mb-5">
+        <h2>Radio Group</h2>
+      </div>
+      <div className="col-6">
+        <FormItems
+          name="radiobtnGroup"
+          validate={{
+            message: 'Required',
+            indicator: 'error',
+            rules: { type: 'Required' },
+          }}
+        >
+          <RadioGroup label="Groups">
+            <RadioButton label="Radio Button 1" value="button1" />
+            <RadioButton label="Radio Button 2" value="button2" />
+          </RadioGroup>
+        </FormItems>
+      </div>
+    </div>
+    <div className="row mb-0">
+      <div className="col-12 mb-5">
+        <h2>Buttons</h2>
+      </div>
+      <div className="col-12 mb-5">
+        <Button type="reset">Reset</Button>
+      </div>
+      <div className="col-12 mb-5">
+        <Button type="submit">Submit</Button>
+      </div>
+    </div>
+  </Form>
+)
+
+<Meta of={FormStories} />
+
+# Forms
+
+<Canvas>
+  <Story of={FormStories.Default} />
+</Canvas>
+
+<Controls />
+
+# Use Form Validation
+
+To use form validation, every inputs thats need validation `e.g. text-input, email-input` need to be wrapped with `<FormItems />` component. The component takes in few parameters which are `name` and `validate`.
+
+```
+{
+  message: string
+  indicator: 'success' | 'error' | 'info'
+  rules?: { type: 'Required' | 'Email', custom?: () => string | undefined }
+}
+```
+
+```
+<Form>
+  <FormItems name="text" validate={{ message: 'Required', indicator: 'error', rules: { type: 'Required' } }} >
+    <TextInput id="namedField" label="Person name" />
+  </FormItems>
+</Form>
+
+```
+
+**Please note** - Pass in normal html buttons with submit or reset to submit form or reset form accordinglly.