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

package/src/lib/form/formItems.tsx

@@ -0,0 +1,94 @@
+import React from 'react'
+
+import { IValidator, ValidatorRules } from '@sebgroup/extract'
+import { useFormContext } from './formContext'
+import { validateInputValue } from './validateInput'
+
+export interface FormItemsProps {
+  children: React.ReactElement<any>
+  name: string
+  validate?: IValidator
+  onChange?: React.ChangeEventHandler<HTMLInputElement>
+}
+
+export const FormItems: React.FC<FormItemsProps> = ({
+  children,
+  name,
+  validate,
+  onChange: _onFormItemsChanged,
+}) => {
+  const { values, setValues, setErrors, setFields, errors } = useFormContext()
+
+  React.useEffect(() => {
+    /* eslint-disable-next-line */
+    setFields((fields: Record<string, any>) => ({
+      ...fields,
+      [name]: validate?.rules,
+    }))
+
+    /* eslint-disable-next-line */
+    const removeValues = (values: Record<string, any>) => {
+      /* eslint-disable-next-line */
+      const newValues: Record<string, any> = { ...values }
+      delete newValues[name]
+      return newValues
+    }
+
+    return () => {
+      /* eslint-disable-next-line */
+      setFields((fields: Record<string, any>) => removeValues(fields))
+      /* eslint-disable-next-line */
+      setValues((values: Record<string, any>) => removeValues(values))
+      /* eslint-disable-next-line */
+      setErrors((errors: Record<string, any>) => removeValues(errors))
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (!event.target) return
+
+    const { value, name, type, checked } = event.target
+
+    let inputValue
+    if (type === 'checkbox') {
+      inputValue = checked ? value : null
+      /* eslint-disable-next-line */
+      checked
+        ? setValues((values: Record<string, any>) => ({
+            ...values,
+            [name]: value,
+          }))
+        : setValues((values: Record<string, any>) => ({
+            ...values,
+            [name]: null,
+          }))
+    } else {
+      inputValue = value
+      /* eslint-disable-next-line */
+      setValues((values: Record<string, any>) => ({ ...values, [name]: value }))
+    }
+
+    validateInputValue(
+      { value: inputValue as string, name, type, checked },
+      validate?.rules as ValidatorRules,
+      setErrors,
+    )
+  }
+
+  /* eslint-disable-next-line */
+  return React.cloneElement(children, {
+    validator: errors?.[name] && validate,
+    name,
+    value: values?.[name],
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => {
+      if (typeof _onFormItemsChanged === 'function') {
+        _onFormItemsChanged(event)
+      }
+
+      onChange(event)
+    },
+  })
+}
+
+export default FormItems

package/src/lib/form/group/group.mdx

@@ -0,0 +1,23 @@
+import { Meta, Story, Canvas } from '@storybook/blocks'
+import { Group } from '../'
+import { TextInput, Button } from '../../form'
+import * as GroupStories from './group.stories'
+
+<Meta of={GroupStories} />
+
+# Group
+
+Group inputs, buttons and other form elements together.
+
+## Input & Button
+
+<Canvas of={GroupStories.Default} />
+
+## Static text in input field
+
+<Canvas of={GroupStories.StaticText} />
+
+## Group error message
+
+<Canvas of={GroupStories.Error} />
+

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

@@ -0,0 +1,28 @@
+import { render, screen } from '@testing-library/react'
+
+import Group from './group'
+
+describe('Group', () => {
+  it('renders', () => {
+    render(<Group>Hello</Group>)
+
+    expect(screen.getByText('Hello')).toBeVisible()
+  })
+
+  it('Should have groupBorder', () => {
+    render(<Group groupBorder> Hello World </Group>)
+    expect(screen.getByText('Hello World')).toHaveClass('group-border')
+  })
+
+  it('Should render error message (string)', () => {
+    render(<Group error="Invalid text"> Hello World </Group>)
+    expect(screen.getByText('Invalid text')).toBeVisible()
+  })
+
+  it('Should render error message (Error object)', () => {
+    const mockError: Error = new Error('Failed')
+    mockError.message = 'Invalid text'
+    render(<Group error={mockError}> Hello World </Group>)
+    expect(screen.getByText('Invalid text')).toBeVisible()
+  })
+})

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

@@ -0,0 +1,57 @@
+import Button from '../button/button'
+import { TextInput } from '../input/input'
+import { Group } from './group'
+
+const Template = ({ children, ...props }) => (
+  <Group {...props}>{children}</Group>
+)
+
+export default {
+  title: 'Components/Form/Group',
+  component: Group,
+}
+
+export const Default = {
+  render: Template.bind({}),
+  name: 'Basic Group',
+
+  parameters: {
+    componentIds: ['component-form-group'],
+  },
+
+  args: {
+    children: [
+      <TextInput placeholder="Input field" />,
+      <Button>Normal button</Button>,
+    ],
+  },
+}
+
+export const StaticText = {
+  render: Template.bind({}),
+  name: 'Static text and input field',
+
+  args: {
+    groupBorder: true,
+    groupFocus: true,
+    children: [
+      <TextInput placeholder="First input field" />,
+      <span className="form-text">kr</span>,
+    ],
+  },
+}
+
+export const Error = {
+  render: Template.bind({}),
+  name: 'Group error',
+
+  args: {
+    groupBorder: true,
+    groupFocus: true,
+    error: 'Error message',
+    children: [
+      <TextInput placeholder="First input field" />,
+      <span className="form-text">kr</span>,
+    ],
+  },
+}

package/src/lib/form/group/group.tsx

@@ -0,0 +1,45 @@
+import { ReactNode } from 'react'
+import classNames from 'classnames'
+
+/* eslint-disable-next-line */
+export interface GroupProps {
+  children: ReactNode
+  error?: Error | string
+  groupBorder?: boolean
+  groupFocus?: boolean
+  invalid?: boolean
+  id?: string
+  className?: classNames.Argument
+}
+
+export function Group({
+  id,
+  children,
+  error,
+  className,
+  groupBorder = false,
+  groupFocus = false,
+}: GroupProps) {
+  const groupClassName = classNames(
+    'group',
+    { 'group-border': groupBorder },
+    { 'group-focus': groupFocus },
+    { 'is-invalid': error },
+    className,
+  )
+  const errorMessage = error
+    ? (error as Error).message || (error as string)
+    : ''
+  return (
+    <div className="form-group" id={id}>
+      <div className={groupClassName}>{children}</div>
+      {error && (
+        <span className="form-info" id={id && `${id}-message`}>
+          {errorMessage}
+        </span>
+      )}
+    </div>
+  )
+}
+
+export default Group

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

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

package/src/lib/form/iconButton/iconButton.mdx

@@ -0,0 +1,13 @@
+import { Meta, Story, Canvas } from '@storybook/blocks'
+import { IconButton } from './iconButton'
+import * as IconButtonStories from './iconButton.stories';
+
+export const Template = ({ children, ...props }) => (
+  <IconButton {...props}>{children}</IconButton>
+)
+
+<Meta of={IconButtonStories} />
+
+# Icon button
+
+<Story of={IconButtonStories.Default} />

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

@@ -0,0 +1,23 @@
+import { IconButton } from './iconButton'
+
+const Template = ({ children, ...props }) => (
+  <IconButton {...props}>{children}</IconButton>
+)
+
+export default {
+  title: 'Components/IconButton',
+  component: IconButton,
+}
+
+export const Default = {
+  render: Template.bind({}),
+  name: 'Default',
+
+  args: {
+    children: (
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+        <path d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 448c-110.532 0-200-89.431-200-200 0-110.495 89.472-200 200-200 110.491 0 200 89.471 200 200 0 110.53-89.431 200-200 200zm0-338c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z" />
+      </svg>
+    ),
+  },
+}

package/src/lib/form/iconButton/iconButton.tsx

@@ -0,0 +1,14 @@
+import { ForwardedRef, forwardRef, MouseEvent, ReactNode } from 'react'
+
+import { ButtonType } from '@sebgroup/extract'
+import { Button, ButtonProps } from '../button/button'
+
+export const IconButton = forwardRef(
+  (props: ButtonProps, ref: ForwardedRef<HTMLButtonElement>) => {
+    return (
+      <Button {...props} className={`icon`} ref={ref}>
+        {props.children}
+      </Button>
+    )
+  },
+)

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

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

package/src/lib/form/index.ts

@@ -0,0 +1,12 @@
+export * from './button/button'
+export * from './iconButton/iconButton'
+export * from './buttonGroup/buttonGroup'
+export * from './checkbox/checkbox'
+export * from './form'
+export * from './formItems'
+export * from './group/group'
+export * from './input/input'
+export * from './text/text'
+export * from './radioButton/radioButton'
+export * from './radioButton/radioGroup'
+export * from './textarea/textarea'

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

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

package/src/lib/form/input/input.mdx

@@ -0,0 +1,81 @@
+import { Meta, Story, Canvas, Controls } from '@storybook/blocks'
+import { Input } from './input'
+import * as InputStories from './input.stories';
+
+export const InputTemplate = ({ ...props }) => <Input {...props} />
+
+<Meta of={InputStories} />
+
+# Input
+
+## Input without FormItem
+
+If an input is requested without a label, info or expandable info, then a pure input is rendered. Can be used together with the Group component.
+
+<Canvas of={InputStories.Default} />
+
+## Input with FormItem
+
+As soon as one of the properties `label`, `info` or `expandable` info are set, the input will be be surrounded by a FormItem.
+
+### Label Information
+
+<Canvas of={InputStories.WithFormInfo} />
+
+### Expandable Information
+
+<Canvas of={InputStories.WithExpandableInfo} />
+
+### Unit label
+
+<Canvas of={InputStories.UnitLabel} />
+
+### Formatter
+
+A formatting callback that takes the current value as an argument and returns the formatted value can be supplied to the Input.
+The returned value will be displayed in the field and outputted in the onChange callback.
+
+The following is just an example. Test thoroughly for your use case before using in production!
+
+```tsx
+<Input
+    label="Input"
+    info="Formats input as swedish number"
+    maxLength={8}
+    unit="Kr"
+    formatter={(value) => {
+      const trimmedValue = value.replace('\u00A0', '').replace('\xa0', '')
+      return !trimmedValue || isNaN(Number(trimmedValue))
+        ? value
+        : new Intl.NumberFormat('sv-SE').format(Number(trimmedValue))
+    }}
+  />
+```
+<Input
+    label="Input"
+    info="Formats input as swedish number"
+    maxLength={8}
+    unit="Kr"
+    formatter={(value) => {
+      const trimmedValue = value.replace('\u00A0', '').replace('\xa0', '')
+      return !trimmedValue || isNaN(Number(trimmedValue))
+        ? value
+        : new Intl.NumberFormat('sv-SE').format(Number(trimmedValue))
+    }}
+  />
+
+### Validation
+
+A `validator`, despite it's name, does not add validation. It's simply a way to add an error message to the field.
+
+
+<Canvas of={InputStories.Validator} />
+
+
+### Everything On
+
+<Canvas of={InputStories.Everything} />
+
+## Properties
+
+<Controls />