uikit-react-public 0.26.1 → 0.27.1

package/lib/components/BaseCheckbox/BaseCheckbox.stories.tsx

@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useArgs } from '@storybook/preview-api';
+
+import BaseCheckbox from './BaseCheckbox';
+import Icon from '../Icon';
+
+const meta = {
+  title: 'Components/BaseCheckbox',
+  component: BaseCheckbox,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    checked: { control: { type: 'boolean' } },
+    indeterminate: { control: { type: 'boolean' } },
+    disabled: { control: { type: 'boolean' } },
+  },
+} satisfies Meta<typeof BaseCheckbox>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    checked: false,
+    indeterminate: false,
+    uncheckedComponent: <Icon.Square size={32} />,
+    checkedComponent: <Icon.CheckSquare size={32} />,
+    indeterminateComponent: <Icon.MinusSquare size={32} />,
+  },
+  render: (args) => {
+    const [, updateArgs] = useArgs();
+
+    return (
+      <BaseCheckbox
+        {...args}
+        onChange={(ev) => updateArgs({ checked: ev.target.checked })}
+      />
+    );
+  },
+};
+
+export const RenderVisual: Story = {
+  args: {
+    checked: false,
+    indeterminate: false,
+    renderVisual: ({ checked, indeterminate }) => (
+      <Icon.Empty
+        size={32}
+        strokeLinecap='square'
+        strokeLinejoin='miter'
+      >
+        <rect
+          x='5'
+          y='5'
+          width='14'
+          height='14'
+          rx='2'
+        />
+        {indeterminate && (
+          <line
+            x1='9'
+            y1='16'
+            x2='23'
+            y2='16'
+          />
+        )}
+        {checked && <polyline points='23 11 14 20 10 16' />}
+      </Icon.Empty>
+    ),
+  },
+  render: (args) => {
+    const [, updateArgs] = useArgs();
+
+    return (
+      <BaseCheckbox
+        {...args}
+        onChange={(ev) => updateArgs({ checked: ev.target.checked })}
+      />
+    );
+  },
+};

package/lib/components/BaseCheckbox/BaseCheckbox.tsx

@@ -0,0 +1,168 @@
+import {
+  ChangeEvent,
+  InputHTMLAttributes,
+  memo,
+  ReactNode,
+  Ref,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import { css, cx } from '@emotion/css';
+
+export const NAME = 'ucl-uikit-base-checkbox';
+
+export interface BaseCheckboxState {
+  checked: boolean;
+  indeterminate: boolean;
+  disabled: boolean;
+}
+
+interface BaseCheckboxBaseProps extends Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  'type'
+> {
+  indeterminate?: boolean;
+  testId?: string;
+  ref?: Ref<HTMLInputElement>;
+}
+
+type BaseCheckboxVisualProps =
+  | {
+      renderVisual: (state: BaseCheckboxState) => ReactNode;
+      checkedComponent?: never;
+      uncheckedComponent?: never;
+      indeterminateComponent?: never;
+    }
+  | {
+      renderVisual?: never;
+      checkedComponent: ReactNode;
+      uncheckedComponent: ReactNode;
+      indeterminateComponent?: ReactNode;
+    };
+
+export type BaseCheckboxProps = BaseCheckboxBaseProps & BaseCheckboxVisualProps;
+
+const BaseCheckbox = ({
+  renderVisual,
+  checkedComponent,
+  uncheckedComponent,
+  indeterminateComponent,
+  checked,
+  defaultChecked,
+  indeterminate = false,
+  disabled,
+  testId = NAME,
+  className,
+  onChange,
+  ref,
+  ...props
+}: BaseCheckboxProps) => {
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  const isControlled = checked !== undefined;
+  const [internalChecked, setInternalChecked] = useState(
+    defaultChecked ?? false
+  );
+  const displayedChecked = isControlled ? checked : internalChecked;
+
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.indeterminate = indeterminate;
+    }
+  }, [indeterminate]);
+
+  const setRef = useCallback(
+    (node: HTMLInputElement | null) => {
+      inputRef.current = node;
+
+      if (typeof ref === 'function') {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    },
+    [ref]
+  );
+
+  const handleChange = (ev: ChangeEvent<HTMLInputElement>) => {
+    if (!isControlled) {
+      setInternalChecked(ev.target.checked);
+    }
+
+    onChange?.(ev);
+  };
+
+  const rootStyle = css`
+    position: relative;
+    display: inline-grid;
+    cursor: ${disabled ? 'not-allowed' : 'pointer'};
+  `;
+
+  const inputStyle = css`
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    opacity: 0;
+    cursor: inherit;
+  `;
+
+  const visualStyle = css`
+    grid-area: 1 / 1;
+    line-height: 0;
+    pointer-events: none;
+
+    input:focus-visible + & {
+      outline: 2px solid currentColor;
+      outline-offset: 2px;
+    }
+  `;
+
+  const style = cx(NAME, rootStyle, className);
+
+  const visualState = {
+    checked: displayedChecked,
+    indeterminate,
+    disabled: !!disabled,
+  };
+
+  const visual = renderVisual
+    ? renderVisual(visualState)
+    : indeterminate && indeterminateComponent
+      ? indeterminateComponent
+      : displayedChecked
+        ? checkedComponent
+        : uncheckedComponent;
+
+  return (
+    <span
+      className={style}
+      data-testid={testId}
+    >
+      <input
+        ref={setRef}
+        type='checkbox'
+        className={inputStyle}
+        {...props}
+        checked={isControlled ? checked : undefined}
+        defaultChecked={isControlled ? undefined : defaultChecked}
+        disabled={disabled}
+        aria-checked={indeterminate ? 'mixed' : props['aria-checked']}
+        onChange={handleChange}
+      />
+      <span
+        className={visualStyle}
+        aria-hidden='true'
+      >
+        {visual}
+      </span>
+    </span>
+  );
+};
+
+export default memo(BaseCheckbox);

package/lib/components/BaseCheckbox/__tests__/BaseCheckbox.test.tsx

@@ -0,0 +1,98 @@
+import { describe, expect, test, vi } from 'vitest';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import BaseCheckbox from '../BaseCheckbox';
+
+describe('BaseCheckbox', () => {
+  test('renders the unchecked visual by default', () => {
+    const { getByText, queryByText } = render(
+      <BaseCheckbox
+        uncheckedComponent={<span>Unchecked</span>}
+        checkedComponent={<span>Checked</span>}
+      />
+    );
+
+    expect(getByText('Unchecked')).toBeTruthy();
+    expect(queryByText('Checked')).toBeNull();
+  });
+
+  test('renders the checked visual when checked', () => {
+    const { getByText, queryByText } = render(
+      <BaseCheckbox
+        checked
+        uncheckedComponent={<span>Unchecked</span>}
+        checkedComponent={<span>Checked</span>}
+      />
+    );
+
+    expect(getByText('Checked')).toBeTruthy();
+    expect(queryByText('Unchecked')).toBeNull();
+  });
+
+  test('renders the indeterminate visual when indeterminate', () => {
+    const { getByRole, getByText } = render(
+      <BaseCheckbox
+        checked
+        indeterminate
+        uncheckedComponent={<span>Unchecked</span>}
+        checkedComponent={<span>Checked</span>}
+        indeterminateComponent={<span>Indeterminate</span>}
+      />
+    );
+
+    expect(getByText('Indeterminate')).toBeTruthy();
+    expect(getByRole('checkbox')).toHaveAttribute('aria-checked', 'mixed');
+  });
+
+  test('updates uncontrolled state when clicked', async () => {
+    const user = userEvent.setup();
+    const { getByRole, getByText } = render(
+      <BaseCheckbox
+        uncheckedComponent={<span>Unchecked</span>}
+        checkedComponent={<span>Checked</span>}
+      />
+    );
+
+    await user.click(getByRole('checkbox'));
+
+    expect(getByText('Checked')).toBeTruthy();
+  });
+
+  test('calls onChange when clicked', async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    const { getByRole } = render(
+      <BaseCheckbox
+        uncheckedComponent={<span>Unchecked</span>}
+        checkedComponent={<span>Checked</span>}
+        onChange={onChange}
+      />
+    );
+
+    await user.click(getByRole('checkbox'));
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+  });
+
+  test('passes state to renderVisual', async () => {
+    const user = userEvent.setup();
+    const { getByRole, getByText } = render(
+      <BaseCheckbox
+        renderVisual={({ checked, indeterminate, disabled }) => (
+          <span>
+            {checked ? 'Checked' : 'Unchecked'}
+            {indeterminate ? ' mixed' : ''}
+            {disabled ? ' disabled' : ''}
+          </span>
+        )}
+      />
+    );
+
+    expect(getByText('Unchecked')).toBeTruthy();
+
+    await user.click(getByRole('checkbox'));
+
+    expect(getByText('Checked')).toBeTruthy();
+  });
+});

package/lib/components/BaseCheckbox/index.ts

@@ -0,0 +1,2 @@
+export { default } from './BaseCheckbox';
+export type { BaseCheckboxProps, BaseCheckboxState } from './BaseCheckbox';

package/lib/components/Checkbox/Checkbox.tsx

@@ -7,6 +7,7 @@ import {
 } from 'react';
 import { css, cx } from '@emotion/css';
 import useTheme from '../../theme/useTheme';
+import BaseCheckbox from '../BaseCheckbox';
 import Icon from '../Icon';
 import marginsStyle, { MarginProps } from '../common/marginsStyle';
 
@@ -32,6 +33,7 @@ const Checkbox = forwardRef<Ref, CheckboxProps>(
       testId = NAME,
       ariaLabel,
       className,
+      onChange,
       ...props
     },
     ref
@@ -48,12 +50,11 @@ const Checkbox = forwardRef<Ref, CheckboxProps>(
       if (!isControlled) {
         setInternalChecked(ev.target.checked);
       }
-      props.onChange?.(ev);
+      onChange?.(ev);
     };
 
     const baseStyle = css`
       position: relative;
-      display: inline-block;
       width: 24px;
       height: 24px;
       flex-shrink: 0;
@@ -104,20 +105,6 @@ const Checkbox = forwardRef<Ref, CheckboxProps>(
       className
     );
 
-    const hiddenInputStyle = css`
-      cursor: inherit;
-      position: absolute;
-      opacity: 0;
-      left: -1px;
-      top: -1px;
-      width: calc(100% + 2px);
-      height: calc(100% + 2px);
-      border-radius: 2px;
-      border: none;
-      margin: 0;
-      padding: 0;
-    `;
-
     const checkStyle = css`
       position: absolute;
       left: -1px;
@@ -135,43 +122,52 @@ const Checkbox = forwardRef<Ref, CheckboxProps>(
     `;
 
     return (
-      <span className={style}>
-        <input
-          type='checkbox'
-          ref={ref}
-          className={hiddenInputStyle}
-          data-testid={testId}
-          aria-label={ariaLabel}
-          {...(isControlled ? { checked } : { defaultChecked })}
-          disabled={disabled}
-          onChange={handleChange}
-          {...props}
-        />
-        {!indeterminate && isChecked && (
-          <Icon.Empty
-            className={checkStyle}
-            size={24}
-            strokeLinecap='square'
-            strokeLinejoin='miter'
-          >
-            <polyline points='17 9 10 16 7 13' />
-          </Icon.Empty>
-        )}
-        {indeterminate && (
-          <Icon.Empty
-            className={indeterminateLineStyle}
-            size={24}
-            strokeLinecap='square'
-          >
-            <line
-              x1='7'
-              y1='12'
-              x2='17'
-              y2='12'
-            />
-          </Icon.Empty>
-        )}
-      </span>
+      <BaseCheckbox
+        ref={ref}
+        className={style}
+        testId={`${testId}__root`}
+        data-testid={testId}
+        aria-label={ariaLabel}
+        checked={isControlled ? checked : undefined}
+        defaultChecked={isControlled ? undefined : defaultChecked}
+        disabled={disabled}
+        indeterminate={indeterminate}
+        renderVisual={(state) => {
+          if (state.indeterminate) {
+            return (
+              <Icon.Empty
+                className={indeterminateLineStyle}
+                size={24}
+                strokeLinecap='square'
+              >
+                <line
+                  x1='7'
+                  y1='12'
+                  x2='17'
+                  y2='12'
+                />
+              </Icon.Empty>
+            );
+          }
+
+          if (state.checked) {
+            return (
+              <Icon.Empty
+                className={checkStyle}
+                size={24}
+                strokeLinecap='square'
+                strokeLinejoin='miter'
+              >
+                <polyline points='17 9 10 16 7 13' />
+              </Icon.Empty>
+            );
+          }
+
+          return null;
+        }}
+        onChange={handleChange}
+        {...props}
+      />
     );
   }
 );

package/lib/components/Checkbox/__tests__/__snapshots__/Checkbox.test.tsx.snap

@@ -2,86 +2,109 @@
 
 exports[`Checkbox > snapshot: checked prop 1`] = `
 <span
-  class="ucl-uikit-checkbox css-xzd91z"
+  class="ucl-uikit-base-checkbox ucl-uikit-checkbox css-ohh0va"
+  data-testid="ucl-uikit-checkbox__root"
 >
   <input
     checked=""
-    class="css-nzy7im"
+    class="css-1bjd9qx"
     data-testid="ucl-uikit-checkbox"
     type="checkbox"
   />
-  <svg
-    class="ucl-uikit-icon css-1nacdsu"
-    data-testid="ucl-uikit-icon"
-    fill="none"
-    height="24"
-    stroke="currentColor"
-    stroke-linecap="square"
-    stroke-linejoin="miter"
-    stroke-width="2"
-    viewBox="0 0 24 24"
-    width="24"
-    xmlns="http://www.w3.org/2000/svg"
+  <span
+    aria-hidden="true"
+    class="css-1quq9cp"
   >
-    <polyline
-      points="17 9 10 16 7 13"
-    />
-  </svg>
+    <svg
+      class="ucl-uikit-icon css-1nacdsu"
+      data-testid="ucl-uikit-icon"
+      fill="none"
+      height="24"
+      stroke="currentColor"
+      stroke-linecap="square"
+      stroke-linejoin="miter"
+      stroke-width="2"
+      viewBox="0 0 24 24"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <polyline
+        points="17 9 10 16 7 13"
+      />
+    </svg>
+  </span>
 </span>
 `;
 
 exports[`Checkbox > snapshot: indeterminate prop 1`] = `
 <span
-  class="ucl-uikit-checkbox css-xzd91z"
+  class="ucl-uikit-base-checkbox ucl-uikit-checkbox css-ohh0va"
+  data-testid="ucl-uikit-checkbox__root"
 >
   <input
-    class="css-nzy7im"
+    aria-checked="mixed"
+    class="css-1bjd9qx"
     data-testid="ucl-uikit-checkbox"
     type="checkbox"
   />
-  <svg
-    class="ucl-uikit-icon css-2i3jn5"
-    data-testid="ucl-uikit-icon"
-    fill="none"
-    height="24"
-    stroke="currentColor"
-    stroke-linecap="square"
-    stroke-linejoin="round"
-    stroke-width="2"
-    viewBox="0 0 24 24"
-    width="24"
-    xmlns="http://www.w3.org/2000/svg"
+  <span
+    aria-hidden="true"
+    class="css-1quq9cp"
   >
-    <line
-      x1="7"
-      x2="17"
-      y1="12"
-      y2="12"
-    />
-  </svg>
+    <svg
+      class="ucl-uikit-icon css-2i3jn5"
+      data-testid="ucl-uikit-icon"
+      fill="none"
+      height="24"
+      stroke="currentColor"
+      stroke-linecap="square"
+      stroke-linejoin="round"
+      stroke-width="2"
+      viewBox="0 0 24 24"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <line
+        x1="7"
+        x2="17"
+        y1="12"
+        y2="12"
+      />
+    </svg>
+  </span>
 </span>
 `;
 
 exports[`Checkbox > snapshot: no props 1`] = `
 <span
-  class="ucl-uikit-checkbox css-tumlz"
+  class="ucl-uikit-base-checkbox ucl-uikit-checkbox css-tfrbiv"
+  data-testid="ucl-uikit-checkbox__root"
 >
   <input
-    class="css-nzy7im"
+    class="css-1bjd9qx"
     data-testid="ucl-uikit-checkbox"
     type="checkbox"
   />
+  <span
+    aria-hidden="true"
+    class="css-1quq9cp"
+  />
 </span>
 `;
 
 exports[`Checkbox > snapshot: testId prop 1`] = `
 <span
-  class="ucl-uikit-checkbox css-tumlz"
+  class="ucl-uikit-base-checkbox ucl-uikit-checkbox css-tfrbiv"
+  data-testid="test123__root"
 >
   <input
-    class="css-nzy7im"
+    class="css-1bjd9qx"
     data-testid="test123"
     type="checkbox"
   />
+  <span
+    aria-hidden="true"
+    class="css-1quq9cp"
+  />
 </span>
 `;