feat(ory-hydra): merge branch develop into feat/ory_hydra

Signed-off-by: Roy Scheeren <[email protected]>

apps/design-system/src/components/Atoms/Form/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,33 @@
+import { Meta, Story } from '@storybook/react'
+
+import { Checkbox } from './Checkbox'
+
+export default {
+  component: Checkbox,
+  title: 'Components/Form/Checkbox',
+} as Meta
+
+const CheckboxTemplate: Story = ({ label, name, value, checked, description, inputRef, onChange }) => (
+  <Checkbox
+    label={label}
+    name={name}
+    value={value}
+    checked={checked}
+    description={description}
+    inputRef={inputRef}
+    onChange={onChange}
+  />
+)
+
+export const CheckboxComponent = CheckboxTemplate.bind({})
+
+CheckboxComponent.args = {
+  label: 'label',
+  name: 'name',
+  value: 'value',
+  description: 'DESCRIPTION',
+  error: 'ERROR',
+  checked: false,
+  inputRef: null,
+  onChange: () => {},
+}

apps/design-system/src/components/Atoms/Form/Checkbox/Checkbox.tsx

@@ -0,0 +1,51 @@
+import { isEmpty } from 'ramda'
+import { FC, JSXElementConstructor, ReactElement } from 'react'
+import { RefCallBack } from 'react-hook-form'
+
+interface CheckboxProps {
+  name: string
+  value?: string | number
+  checked: boolean
+  label: string | ReactElement<any, string | JSXElementConstructor<any>>
+  description?: string
+  inputRef: RefCallBack
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
+}
+
+export const Checkbox: FC<CheckboxProps> = ({
+  name,
+  value = '',
+  checked,
+  label,
+  description = '',
+  inputRef,
+  onChange,
+}) => {
+  return (
+    <div className="relative flex items-start">
+      <div className="flex h-6 items-center">
+        <input
+          id={`${name}-${value}`}
+          aria-describedby={`${name}-description`}
+          name={name}
+          value={value}
+          onChange={onChange}
+          ref={inputRef}
+          checked={checked}
+          type="checkbox"
+          className="h-4 w-4 rounded border-gray-300 text-orange-600 focus:ring-orange-600"
+        />
+      </div>
+      <div className="ml-3 text-sm leading-6">
+        <label htmlFor={`${name}-${value}`} className="font-medium leading-6 text-gray-900 dark:text-white">
+          {label}
+        </label>
+        {!isEmpty(description) && (
+          <p id={`${name}-${value}-description`} className="text-gray-500">
+            {description}
+          </p>
+        )}
+      </div>
+    </div>
+  )
+}

apps/design-system/src/components/Atoms/Form/Checkbox/Checkbox.ui.test.tsx

@@ -0,0 +1,16 @@
+import { render, screen } from '@testing-library/react'
+
+import { Checkbox } from './Checkbox'
+
+describe('atoms/Checkbox', () => {
+  describe('render', () => {
+    it('should render Checkbox', () => {
+      // when ... we rendering component
+      render(<Checkbox label="CHECKBOX" checked={true} inputRef={() => {}} name="NAME" />)
+
+      // then ... it should return as expected
+      const element = screen.getByText('CHECKBOX')
+      expect(element).toBeInTheDocument()
+    })
+  })
+})

apps/design-system/src/components/Atoms/Form/Checkbox/Checkboxes.stories.tsx

@@ -0,0 +1,50 @@
+import { Meta, Story } from '@storybook/react'
+
+import { Checkboxes } from './Checkboxes'
+
+export default {
+  component: Checkboxes,
+  title: 'Components/Form/Checkboxes',
+} as Meta
+
+const CheckboxesTemplate: Story = ({ label, name, values, description, inputRef, onChange }) => (
+  <Checkboxes
+    label={label}
+    name={name}
+    values={values}
+    items={[
+      {
+        id: 'item-1',
+        name: 'Item 1',
+        description: 'Item description',
+      },
+      {
+        id: 'item-2',
+        name: 'Item 2',
+        description: 'Item description',
+      },
+      {
+        id: 'item-3',
+        name: 'Item 3',
+        description: 'Item description',
+      },
+    ]}
+    handleCheckbox={x => values.push(x)}
+    description={description}
+    inputRef={inputRef}
+    onChange={onChange}
+  />
+)
+
+export const CheckboxesComponent = CheckboxesTemplate.bind({})
+
+CheckboxesComponent.args = {
+  label: 'label',
+  name: 'name',
+  values: ['item-1'],
+  description: 'DESCRIPTION',
+  error: 'ERROR',
+  checked: false,
+  inputRef: null,
+  onChange: () => {},
+}

apps/design-system/src/components/Atoms/Form/Checkbox/Checkboxes.tsx

@@ -0,0 +1,70 @@
+import { includes, isEmpty, map } from 'ramda'
+import { ChangeEvent, FC, JSXElementConstructor, ReactElement } from 'react'
+import { RefCallBack } from 'react-hook-form'
+
+interface CheckboxItem {
+  id: string
+  name: string
+  description: string
+}
+
+interface CheckboxProps {
+  name: string
+  values: []
+  label: string | ReactElement<any, string | JSXElementConstructor<any>>
+  description?: string
+  error?: string
+  inputRef: RefCallBack
+  handleCheckbox: (id: string) => any
+  onChange: (event: ChangeEvent<HTMLInputElement>) => void
+  items: CheckboxItem[]
+}
+
+export const Checkboxes: FC<CheckboxProps> = ({
+  name,
+  values = [],
+  label,
+  description = '',
+  error = '',
+  inputRef,
+  handleCheckbox,
+  onChange,
+  items,
+}) => (
+  <>
+    <label htmlFor={name} className="block text-sm font-medium leading-6 text-gray-900 dark:text-white">
+      {label}
+    </label>
+    {!isEmpty(description) && <p className="mt-3 text-sm leading-6 text-gray-600 dark:text-gray-400">{description}</p>}
+    <div className="grid gap-4 grid-cols-3 mt-2">
+      {map(({ id, name: itemName, description: itemDescription }: CheckboxItem) => (
+        <div className="relative flex items-start">
+          <div className="flex h-6 items-center">
+            <input
+              id={`${name}-${id}`}
+              aria-describedby={`${name}-description`}
+              name={name}
+              value={id}
+              onChange={() => onChange(handleCheckbox(id))}
+              ref={inputRef}
+              checked={includes(id)(values)}
+              type="checkbox"
+              className="h-4 w-4 rounded border-gray-300 text-orange-600 focus:ring-orange-600"
+            />
+          </div>
+          <div className="ml-3 text-sm leading-6">
+            <label htmlFor={`${name}-${id}`} className="font-medium leading-6 text-gray-900 dark:text-white">
+              {itemName}
+            </label>
+            {!isEmpty(itemDescription) && (
+              <p id={`${name}-${id}-description`} className="text-gray-500">
+                {itemDescription}
+              </p>
+            )}
+          </div>
+        </div>
+      ))(items)}
+    </div>
+    {!isEmpty(error) && <p className="mt-3 text-sm leading-6 text-red-600 dark:text-red-400">{error}</p>}
+  </>
+)

apps/design-system/src/components/Atoms/Form/Checkbox/Checkboxes.ui.test.tsx

@@ -0,0 +1,42 @@
+import { render, screen } from '@testing-library/react'
+
+import { Checkboxes } from './Checkboxes'
+
+describe('atoms/Checkboxes', () => {
+  describe('render', () => {
+    it('should render Checkboxes', () => {
+      // when ... we rendering component
+      render(
+        <Checkboxes
+          label="CHECKBOXES"
+          items={[
+            {
+              id: 'item-1',
+              name: 'Item 1',
+              description: 'Item description',
+            },
+            {
+              id: 'item-2',
+              name: 'Item 2',
+              description: 'Item description',
+            },
+            {
+              id: 'item-3',
+              name: 'Item 3',
+              description: 'Item description',
+            },
+          ]}
+          values={[]}
+          handleCheckbox={() => {}}
+          onChange={() => {}}
+          inputRef={() => {}}
+          name="NAME"
+        />,
+      )
+
+      // then ... it should return as expected
+      const element = screen.getByText('CHECKBOXES')
+      expect(element).toBeInTheDocument()
+    })
+  })
+})

apps/design-system/src/components/Atoms/Form/Checkbox/index.ts

@@ -0,0 +1,2 @@
+export { Checkbox } from './Checkbox'
+export { Checkboxes } from './Checkboxes'

apps/design-system/src/components/Atoms/Form/Input/TextField.stories.tsx

@@ -0,0 +1,32 @@
+import { Meta, Story } from '@storybook/react'
+
+import { TextField } from './TextField'
+
+export default {
+  component: TextField,
+  title: 'Components/Form/TextField',
+} as Meta
+
+const TextTemplate: Story = ({ label, name, value, error, disabled, inputRef, onChange }) => (
+  <TextField
+    label={label}
+    name={name}
+    value={value}
+    error={error}
+    disabled={disabled}
+    inputRef={inputRef}
+    onChange={onChange}
+  />
+)
+
+export const TextComponent = TextTemplate.bind({})
+
+TextComponent.args = {
+  label: 'label',
+  name: 'name',
+  value: 'value',
+  error: 'ERROR',
+  disabled: false,
+  inputRef: null,
+  onChange: () => {},
+}

apps/design-system/src/components/Atoms/Form/Input/TextField.tsx

@@ -0,0 +1,44 @@
+import { isEmpty } from 'ramda'
+import { FC, JSXElementConstructor, ReactElement } from 'react'
+import { RefCallBack } from 'react-hook-form'
+
+interface TextFieldProps {
+  label: string | ReactElement<any, string | JSXElementConstructor<any>>
+  name: string
+  value: string
+  error?: string
+  disabled?: boolean
+  inputRef: RefCallBack
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
+}
+
+export const TextField: FC<TextFieldProps> = ({
+  label,
+  name,
+  value,
+  error = '',
+  disabled = false,
+  inputRef,
+  onChange,
+}) => {
+  return (
+    <>
+      <label htmlFor={name} className="block text-sm font-medium leading-6 text-gray-900 dark:text-white">
+        {label}
+      </label>
+      <div className="mt-2">
+        <input
+          type="text"
+          name={name}
+          id={name}
+          defaultValue={value}
+          disabled={disabled}
+          onChange={onChange}
+          ref={inputRef}
+          className="block w-full rounded-md border-0 py-1.5 px-3 dark:bg-white/5 dark:text-white dark:ring-white/10 focus:dark:ring-gray-200 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-gray-600 sm:text-sm sm:leading-6 dark:disabled:text-gray-600 disabled:text-gray-400"
+        />
+      </div>
+      {!isEmpty(error) && <p className="mt-3 text-sm leading-6 text-red-600 dark:text-red-400">{error}</p>}
+    </>
+  )
+}

apps/design-system/src/components/Atoms/Form/Input/TextField.ui.test.tsx

@@ -0,0 +1,16 @@
+import { render, screen } from '@testing-library/react'
+
+import { TextField } from './TextField'
+
+describe('atoms/TextField', () => {
+  describe('render', () => {
+    it('should render TextField', () => {
+      // when ... we rendering component
+      render(<TextField label="LABEL" value="VALUE" disabled={true} inputRef={() => {}} name="NAME" />)
+
+      // then ... it should return as expected
+      const element = screen.getByText('LABEL')
+      expect(element).toBeInTheDocument()
+    })
+  })
+})

apps/design-system/src/components/Atoms/Form/Input/index.ts

@@ -0,0 +1 @@
+export { TextField } from './TextField'

apps/design-system/src/components/Atoms/Form/Textarea/TextField.ui.test.tsx

@@ -0,0 +1,16 @@
+import { render, screen } from '@testing-library/react'
+
+import { TextareaField } from './TextareaField'
+
+describe('atoms/TextareaField', () => {
+  describe('render', () => {
+    it('should render TextareaField', () => {
+      // when ... we rendering component
+      render(<TextareaField label="LABEL" value="VALUE" disabled={true} inputRef={() => {}} name="NAME" />)
+
+      // then ... it should return as expected
+      const element = screen.getByText('LABEL')
+      expect(element).toBeInTheDocument()
+    })
+  })
+})