uikit-react-public 0.11.13

package/lib/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,177 @@
+import {
+  memo,
+  InputHTMLAttributes,
+  forwardRef,
+  useState,
+  ChangeEvent,
+} from 'react';
+import { css, cx } from '@emotion/css';
+import useTheme from '../../theme/useTheme';
+import Icon from '../Icon';
+import marginsStyle, { MarginProps } from '../common/marginsStyle';
+
+export const NAME = 'ucl-uikit-checkbox';
+
+export interface CheckboxBaseProps
+  extends InputHTMLAttributes<HTMLInputElement> {
+  indeterminate?: boolean;
+  testId?: string;
+}
+
+export type CheckboxProps = CheckboxBaseProps & MarginProps;
+
+export type Ref = HTMLInputElement;
+
+const Checkbox = forwardRef<Ref, CheckboxProps>(
+  (
+    {
+      indeterminate, // takes precedence over checked
+      checked,
+      defaultChecked,
+      disabled,
+      testId = NAME,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const [theme] = useTheme();
+
+    const isControlled = checked !== undefined;
+    const [internalChecked, setInternalChecked] = useState(
+      defaultChecked ?? false
+    );
+    const isChecked = isControlled ? checked : internalChecked;
+
+    const handleChange = (ev: ChangeEvent<HTMLInputElement>) => {
+      if (!isControlled) {
+        setInternalChecked(ev.target.checked);
+      }
+      props.onChange?.(ev);
+    };
+
+    const baseStyle = css`
+      position: relative;
+      display: inline-block;
+      width: 24px;
+      height: 24px;
+      flex-shrink: 0;
+      border-width: ${theme.border.b1};
+      border-style: solid;
+      border-radius: ${theme.radius.r2};
+      outline: none;
+      box-sizing: border-box;
+      color: ${theme.color.neutral.white};
+      transition:
+        background-color 0.15s ease-out,
+        border-color 0.15s ease-out;
+      cursor: pointer;
+    `;
+
+    const focusStyle = css`
+      &:focus-within {
+        box-shadow: ${theme.boxShadow.focus};
+      }
+    `;
+
+    const checkedStyle = css`
+      background-color: ${theme.color.interaction.blue70};
+      border-color: ${theme.color.interaction.blue70};
+      color: ${theme.color.neutral.white};
+    `;
+
+    const uncheckedStyle = css`
+      background-color: ${theme.color.neutral.white};
+      border-color: ${theme.color.neutral.grey60};
+    `;
+
+    const disabledStyle = css`
+      background-color: ${theme.color.neutral.grey20};
+      border-color: ${theme.color.neutral.grey20};
+      cursor: not-allowed;
+    `;
+
+    const style = cx(
+      NAME,
+      baseStyle,
+      marginsStyle(props, theme),
+      !disabled && focusStyle,
+      isChecked && checkedStyle,
+      indeterminate && checkedStyle,
+      !isChecked && !indeterminate && uncheckedStyle,
+      disabled && disabledStyle,
+      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;
+      top: -1px;
+      color: inherit;
+      user-select: none;
+      pointer-events: none;
+      transition: color 0.15s ease-in-out;
+    `;
+
+    const indeterminateLineStyle = css`
+      position: absolute;
+      left: -1px;
+      top: -1px;
+    `;
+
+    return (
+      <span className={style}>
+        <input
+          type='checkbox'
+          ref={ref}
+          className={hiddenInputStyle}
+          data-testid={testId}
+          {...(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>
+    );
+  }
+);
+
+export default memo(Checkbox);

package/lib/components/Checkbox/LabelledCheckbox.tsx

@@ -0,0 +1,111 @@
+import { memo, forwardRef, ReactNode, useId } from 'react';
+import { css, cx } from '@emotion/css';
+import useTheme from '../../theme/useTheme';
+import Checkbox, { CheckboxProps } from './Checkbox';
+import Label, { LabelProps } from '../Label';
+import marginsStyle, { MarginProps } from '../common/marginsStyle';
+
+export const NAME = 'ucl-uikit-labelled-checkbox';
+
+export interface LabelledCheckboxBaseProps extends CheckboxProps {
+  labelProps?: LabelProps;
+  children: ReactNode;
+  testId?: string;
+}
+
+export type LabelledCheckboxProps = LabelledCheckboxBaseProps & MarginProps;
+
+export type Ref = HTMLInputElement;
+
+const LabelledCheckbox = forwardRef<Ref, LabelledCheckboxProps>(
+  (
+    {
+      id,
+      labelProps,
+      testId = NAME,
+      m,
+      mv,
+      mh,
+      mt,
+      mb,
+      ml,
+      mr,
+      noMargins,
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const [theme] = useTheme();
+
+    const generatedId = useId();
+
+    id = id ?? generatedId;
+
+    const baseStyle = css`
+      margin-top: ${theme.margin.m16};
+      margin-bottom: ${theme.margin.m16};
+      display: flex;
+      align-items: center;
+      gap: ${theme.m16};
+      width: fit-content;
+    `;
+
+    const focusStyle = css`
+      &:focus-within {
+        box-shadow: ${theme.boxShadow.focus};
+      }
+    `;
+
+    const style = cx(
+      NAME,
+      baseStyle,
+      !props.disabled && focusStyle,
+      marginsStyle(
+        {
+          m,
+          mv,
+          mh,
+          mt,
+          mb,
+          ml,
+          mr,
+          noMargins,
+        },
+        theme
+      ),
+      className
+    );
+
+    const checkboxStyle = css`
+      &:focus-within {
+        box-shadow: none;
+      }
+    `;
+
+    return (
+      <div
+        className={style}
+        data-testid={testId}
+      >
+        <Checkbox
+          ref={ref}
+          className={checkboxStyle}
+          id={id}
+          data-testid={`${testId}__checkbox`}
+          {...props}
+        />
+        <Label
+          htmlFor={labelProps?.htmlFor ?? id}
+          data-testid={`${testId}__label`}
+          {...labelProps}
+        >
+          {children}
+        </Label>
+      </div>
+    );
+  }
+);
+
+export default memo(LabelledCheckbox);

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

@@ -0,0 +1,99 @@
+import { describe, expect, test } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ThemeContextProvider } from '../../../theme/useTheme';
+import Checkbox from '../Checkbox';
+
+describe('Checkbox', () => {
+  // Snapshot tests
+
+  test('snapshot: no props', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Checkbox />
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('snapshot: checked prop', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Checkbox
+          checked
+          onChange={() => {}}
+        />
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('snapshot: indeterminate prop', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Checkbox
+          indeterminate
+          onChange={() => {}}
+        />
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('snapshot: testId prop', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Checkbox testId='test123' />
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  // Interaction tests
+
+  test('test ID: default', () => {
+    render(
+      <ThemeContextProvider>
+        <Checkbox />
+      </ThemeContextProvider>
+    );
+    const checkbox = screen.getByTestId('ucl-uikit-checkbox');
+    expect(checkbox).toBeDefined();
+  });
+
+  test('test ID: custom', () => {
+    render(
+      <ThemeContextProvider>
+        <Checkbox testId='custom-test-id' />
+      </ThemeContextProvider>
+    );
+    const checkbox = screen.getByTestId('custom-test-id');
+    expect(checkbox).toBeDefined();
+  });
+
+  test('click: uncontrolled', async () => {
+    const user = userEvent.setup();
+    render(
+      <ThemeContextProvider>
+        <Checkbox />
+      </ThemeContextProvider>
+    );
+    const checkbox = screen.getByRole('checkbox') as HTMLInputElement;
+    expect(checkbox.checked).toBe(false);
+    await user.click(checkbox);
+    expect(checkbox.checked).toBe(true);
+  });
+
+  test('click: disabled', async () => {
+    const user = userEvent.setup();
+    render(
+      <ThemeContextProvider>
+        <Checkbox disabled />
+      </ThemeContextProvider>
+    );
+    const checkbox = screen.getByRole('checkbox') as HTMLInputElement;
+    expect(checkbox.checked).toBe(false);
+    await user.click(checkbox);
+    expect(checkbox.checked).toBe(false);
+  });
+});

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

@@ -0,0 +1,87 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Checkbox > snapshot: checked prop 1`] = `
+<span
+  class="ucl-uikit-checkbox css-1g4adr4"
+>
+  <input
+    checked=""
+    class="css-nzy7im"
+    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"
+  >
+    <polyline
+      points="17 9 10 16 7 13"
+    />
+  </svg>
+</span>
+`;
+
+exports[`Checkbox > snapshot: indeterminate prop 1`] = `
+<span
+  class="ucl-uikit-checkbox css-1g4adr4"
+>
+  <input
+    class="css-nzy7im"
+    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"
+  >
+    <line
+      x1="7"
+      x2="17"
+      y1="12"
+      y2="12"
+    />
+  </svg>
+</span>
+`;
+
+exports[`Checkbox > snapshot: no props 1`] = `
+<span
+  class="ucl-uikit-checkbox css-cg31xm"
+>
+  <input
+    class="css-nzy7im"
+    data-testid="ucl-uikit-checkbox"
+    type="checkbox"
+  />
+</span>
+`;
+
+exports[`Checkbox > snapshot: testId prop 1`] = `
+<span
+  class="ucl-uikit-checkbox css-cg31xm"
+>
+  <input
+    class="css-nzy7im"
+    data-testid="test123"
+    type="checkbox"
+  />
+</span>
+`;

package/lib/components/Checkbox/index.ts

@@ -0,0 +1,4 @@
+export { default } from './Checkbox';
+export type { CheckboxProps } from './Checkbox';
+export { default as LabelledCheckbox } from './LabelledCheckbox';
+export type { LabelledCheckboxProps } from './LabelledCheckbox';

package/lib/components/Datepicker/Datepicker.stories.tsx

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useArgs } from '@storybook/preview-api';
+import Datepicker from './Datepicker';
+
+const meta = {
+  title: 'Components/Work in progress/Datepicker/Datepicker',
+  component: Datepicker,
+  parameters: { layout: 'padded' },
+  argTypes: {
+    date: { control: { type: 'date' } },
+    minDate: { control: { type: 'date' } },
+    maxDate: { control: { type: 'date' } },
+    native: { control: { type: 'boolean' } },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Datepicker>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    date: null,
+    onDateChange: () => {},
+  },
+  render: () => {
+    const [args, updateArgs] = useArgs();
+
+    // Convert UNIX timestamp from Storybook controls to `Date` object
+    // https://storybook.js.org/docs/essentials/controls#annotation
+    args.date = args.date ? new Date(args.date) : null;
+    args.minDate = args.minDate ? new Date(args.minDate) : null;
+    args.maxDate = args.maxDate ? new Date(args.maxDate) : null;
+
+    // const onChange = (event: React.ChangeEvent<HTMLInputElement>) => updateArgs({ date: event.target.valueAsDate });
+    const onDateChange = (date: Date | null | undefined) =>
+      updateArgs({ date: date });
+    return (
+      <Datepicker
+        {...args}
+        date={args.date}
+        onDateChange={onDateChange}
+      />
+    );
+  },
+};
+
+export const AsNative: Story = {
+  name: 'As native fallback',
+  args: {
+    native: true,
+    date: null,
+    onDateChange: () => {},
+  },
+  render: () => {
+    const [args, updateArgs] = useArgs();
+    args.date = args.date ? new Date(args.date) : null;
+    args.minDate = args.minDate ? new Date(args.minDate) : null;
+    args.maxDate = args.maxDate ? new Date(args.maxDate) : null;
+    const onDateChange = (date: Date | null | undefined) =>
+      updateArgs({ date: date });
+    return (
+      <Datepicker
+        {...args}
+        date={args.date}
+        onDateChange={onDateChange}
+      />
+    );
+  },
+};

package/lib/components/Datepicker/Datepicker.tsx

@@ -0,0 +1,153 @@
+import {
+  useState,
+  useRef,
+  memo,
+  InputHTMLAttributes,
+} from 'react';
+import { css, cx } from '@emotion/css';
+import {
+  Native,
+  DateField,
+  CalendarMenu,
+} from './subcomponents';
+import { useTheme } from '../../theme';
+
+export const NAME = 'ucl-datepicker';
+
+export interface DatepickerProps
+  extends InputHTMLAttributes<HTMLInputElement> {
+  date: Date | null | undefined;
+  minDate?: Date | null | undefined;
+  maxDate?: Date | null | undefined;
+  onDateChange: (date: Date | null | undefined) => void;
+  native?: boolean;
+  testId?: string;
+}
+
+const Datepicker = ({
+  date,
+  minDate,
+  maxDate,
+  onDateChange,
+  native,
+  testId = NAME,
+  className,
+  ...props
+}: DatepickerProps) => {
+  const [theme] = useTheme();
+  const [isOpen, setIsOpen] = useState(false);
+  const datepickerRef = useRef<HTMLDivElement>(null);
+
+  if (native)
+    return (
+      <Native
+        date={date}
+        minDate={minDate}
+        maxDate={maxDate}
+        onDateChange={onDateChange}
+        testId={testId}
+        {...props}
+      />
+    );
+
+  const blur = () =>
+    (document.activeElement as HTMLElement)?.blur();
+
+  const handleKeyDown = (
+    event: React.KeyboardEvent<HTMLDivElement>
+  ) => {
+    // Keyboard mappings for interacting with the date `<CalendarMenu>`
+    // Escape & Enter both close the `<CalendarMenu>`
+    if (event.key === 'Escape' || event.key === 'Enter')
+      blur();
+    // Move the currently selected date in the `<CalendarGrid />`
+    else if (event.key === 'ArrowLeft' && date)
+      onDateChange(
+        new Date(
+          date.getFullYear(),
+          date.getMonth(),
+          date.getDate() - 1
+        )
+      );
+    else if (event.key === 'ArrowRight' && date)
+      onDateChange(
+        new Date(
+          date.getFullYear(),
+          date.getMonth(),
+          date.getDate() + 1
+        )
+      );
+    else if (event.key === 'ArrowUp' && date)
+      onDateChange(
+        new Date(
+          date.getFullYear(),
+          date.getMonth(),
+          date.getDate() - 7
+        )
+      );
+    else if (event.key === 'ArrowDown' && date)
+      onDateChange(
+        new Date(
+          date.getFullYear(),
+          date.getMonth(),
+          date.getDate() + 7
+        )
+      );
+  };
+
+  const handleOnFocus = () => setIsOpen(true);
+
+  const handleDatePick = () => blur();
+
+  const handleBlurCapture = (event: React.FocusEvent) => {
+    // Only close if focus moves outside `<Datepicker>` and its subcomponents
+    if (
+      !datepickerRef.current?.contains(
+        event.relatedTarget as Node
+      )
+    )
+      setIsOpen(false);
+  };
+
+  const baseStyle = css`
+    position: relative;
+    width: max-content;
+    user-select: none;
+
+    &:focus-visible,
+    &:focus-within {
+      box-shadow: ${theme.boxShadow.focus};
+      outline: none;
+    }
+  `;
+
+  const style = cx(baseStyle, className);
+
+  return (
+    <div
+      className={style}
+      ref={datepickerRef}
+      onFocus={handleOnFocus}
+      onBlurCapture={handleBlurCapture}
+      onKeyDown={handleKeyDown}
+      tabIndex={0}
+      data-testid={testId}
+    >
+      <DateField
+        date={date}
+        onChange={onDateChange}
+        testId={testId}
+      />
+      {isOpen && (
+        <CalendarMenu
+          date={date}
+          setDate={onDateChange}
+          onDatePick={handleDatePick}
+          testId={testId}
+        />
+      )}
+    </div>
+  );
+};
+
+export default memo(Datepicker);