@purpurds/slider 0.0.1

package/src/slider.stories.tsx

@@ -0,0 +1,177 @@
+import React from "react";
+import { useArgs } from "@storybook/client-api";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Slider } from "./slider";
+
+const meta: Meta<typeof Slider> = {
+  title: "Inputs/Slider",
+  component: Slider,
+};
+
+export default meta;
+type Story = StoryObj<typeof Slider>;
+
+const decorators: Story["decorators"] = [
+  (Story) => (
+    <div style={{ maxWidth: "22rem", height: "10rem" }}>
+      <Story />
+    </div>
+  ),
+];
+
+const parameters = {
+  // Design is missing and component is in Alpha-phase.
+  // TODO: [Flamingo] - Uncomment once design is approved
+  // design: [
+  //   {
+  //     name: "Slider",
+  //     type: "figma",
+  //     url: "https://www.figma.com/file/...",
+  //   },
+  // ],
+};
+
+export const ControlledSingle: Story = {
+  args: {
+    "data-testid": "test-id",
+    "aria-label": "Slider thumb",
+    id: "slider",
+    max: 100,
+    min: 0,
+    minStepsBetweenThumbs: 0,
+    name: "slider",
+    step: 1,
+    value: [25],
+    orientation: "horizontal",
+  },
+  argTypes: {
+    defaultValue: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+  parameters,
+  decorators,
+  render: ({ ...args }) => {
+    const [{ value = args.defaultValue }, updateArgs] = useArgs(); // eslint-disable-line react-hooks/rules-of-hooks
+    const setValue = (value: [number] | [number, number]) => updateArgs({ value });
+    return (
+      <>
+        <h3>Controlled (single)</h3>
+        <p>Value: {value?.[0]}</p>
+        <Slider {...args} onValueChange={setValue} />
+      </>
+    );
+  },
+};
+
+export const ControlledMulti: Story = {
+  args: {
+    "data-testid": "test-id",
+    "aria-label": "Slider thumb",
+    id: "slider",
+    max: 100,
+    min: 0,
+    minStepsBetweenThumbs: 0,
+    name: "slider",
+    step: 1,
+    value: [25, 75],
+    orientation: "horizontal",
+  },
+  argTypes: {
+    defaultValue: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+  parameters,
+  decorators,
+  render: ({ ...args }) => {
+    const [{ value = args.defaultValue }, updateArgs] = useArgs(); // eslint-disable-line react-hooks/rules-of-hooks
+    const setValue = (value: [number] | [number, number]) => updateArgs({ value });
+    return (
+      <>
+        <h3>Controlled (multi)</h3>
+        <p>Thumb #1 value: {value?.[0]}</p>
+        <p>Thumb #2 value: {value?.[1]}</p>
+        <Slider {...args} onValueChange={setValue} />
+      </>
+    );
+  },
+};
+
+export const UncontrolledSingle: Story = {
+  args: {
+    "data-testid": "test-id",
+    "aria-label": "Slider thumb",
+    defaultValue: [50],
+    max: 100,
+    min: 0,
+    minStepsBetweenThumbs: 0,
+    name: "slider",
+    step: 1,
+    orientation: "horizontal",
+    onValueChange: undefined,
+  },
+  argTypes: {
+    onValueChange: {
+      table: {
+        disable: true,
+      },
+    },
+    value: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+  parameters,
+  decorators,
+  render: ({ ...args }) => {
+    return (
+      <form style={{ height: "100%" }}>
+        <h3>Uncontrolled (single)</h3>
+        <Slider {...args} />
+      </form>
+    );
+  },
+};
+
+export const UncontrolledMulti: Story = {
+  args: {
+    "data-testid": "test-id",
+    "aria-label": "Slider thumb",
+    defaultValue: [25, 75],
+    max: 100,
+    min: 0,
+    minStepsBetweenThumbs: 0,
+    name: "slider",
+    step: 1,
+    orientation: "horizontal",
+  },
+  argTypes: {
+    onValueChange: {
+      table: {
+        disable: true,
+      },
+    },
+    value: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+  parameters,
+  decorators,
+  render: ({ ...args }) => {
+    return (
+      <form style={{ height: "100%" }}>
+        <h3>Uncontrolled (multi)</h3>
+        <Slider {...args} />
+      </form>
+    );
+  },
+};

package/src/slider.test.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import * as matchers from "@testing-library/jest-dom/matchers";
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { Slider } from "./slider";
+
+expect.extend(matchers);
+
+describe("Slider", () => {
+  global.ResizeObserver = vi.fn().mockImplementation(() => ({
+    observe: vi.fn(),
+    unobserve: vi.fn(),
+    disconnect: vi.fn(),
+  }));
+  afterEach(cleanup);
+
+  it("should render a slider with one thumb when default value contains a single number", async () => {
+    render(<Slider aria-label="thumb-aria-label" data-testid="slider-root" value={[20]} />);
+
+    const rootElement = screen.getByTestId("slider-root");
+    expect(rootElement).toBeInTheDocument();
+
+    expect(screen.getAllByRole("slider")).toHaveLength(1);
+
+    const thumbElement = screen.getByRole("slider");
+    expect(thumbElement).toHaveAttribute("aria-valuenow", "20");
+
+    // Only possible with input field from uncontrolled / using form.
+    expect(screen.queryByDisplayValue("30")).not.toBeInTheDocument();
+  });
+
+  it("should render a slider with two thumbs when default value contains two numbers", async () => {
+    render(<Slider aria-label="thumb-aria-label" data-testid="slider-root" value={[30, 50]} />);
+
+    const rootElement = screen.getByTestId("slider-root");
+    expect(rootElement).toBeInTheDocument();
+
+    const thumbElements = screen.getAllByRole("slider");
+    expect(thumbElements).toHaveLength(2);
+
+    expect(thumbElements[0]).toHaveAttribute("aria-valuenow", "30");
+    expect(thumbElements[1]).toHaveAttribute("aria-valuenow", "50");
+
+    // Only possible with input field from uncontrolled / using form.
+    expect(screen.queryByDisplayValue("30")).not.toBeInTheDocument();
+  });
+
+  it("should render form input", async () => {
+    render(
+      <form>
+        <Slider
+          aria-label="thumb-aria-label"
+          data-testid="slider-root"
+          defaultValue={[30]}
+          name="slider"
+        />
+      </form>
+    );
+
+    expect(screen.getByDisplayValue("30")).toBeInTheDocument();
+  });
+});

package/src/slider.tsx

@@ -0,0 +1,73 @@
+import React, { ForwardedRef, forwardRef, useId } from "react";
+import { Range, Root, Thumb, Track } from "@radix-ui/react-slider";
+import c from "classnames/bind";
+
+import styles from "./slider.module.scss";
+const cx = c.bind(styles);
+
+type SliderValue = [number] | [number, number];
+
+export type SliderProps<T extends SliderValue> = {
+  ["data-testid"]?: string;
+  /* The aria-label is set to each thumb. */
+  ["aria-label"]: string;
+  className?: string;
+  /* The value of the slider when initially rendered. Use when you do not need to control the state of the slider. */
+  defaultValue?: T;
+  /* The id of the slider. */
+  id?: string;
+  /* The maximum value for the range. */
+  max?: number;
+  /* The minimum value for the range. */
+  min?: number;
+  /* The minimum permitted steps between multiple thumbs. */
+  minStepsBetweenThumbs?: number;
+  /* The name of the slider. Submitted with its owning form as part of a name/value pair. */
+  name?: string;
+  /* The orientation of the slider. */
+  orientation?: "horizontal" | "vertical";
+  /* The stepping interval. */
+  step?: number;
+  /* The controlled value of the slider. Must be used in conjunction with onValueChange. */
+  value?: T;
+  /* Event handler called when the value changes. */
+  onValueChange?(value: T): void;
+};
+
+const rootClassName = "purpur-slider";
+
+const getKey = (index: number) => String(index);
+
+const SliderComponent = <T extends SliderValue>(
+  { "aria-label": ariaLabel, className, defaultValue, id, value, ...props }: SliderProps<T>,
+  ref: ForwardedRef<HTMLButtonElement>
+) => {
+  const internalId = useId();
+  const internalValue = value || defaultValue;
+
+  return (
+    <Root
+      {...props}
+      id={id || internalId}
+      ref={ref}
+      className={cx(rootClassName, className)}
+      value={value}
+      defaultValue={defaultValue}
+    >
+      <Track className={cx(`${rootClassName}__track`)}>
+        <Range className={cx(`${rootClassName}__range`)} />
+      </Track>
+      {internalValue?.map((_, index) => (
+        <Thumb
+          key={getKey(index)}
+          className={cx(`${rootClassName}__thumb`)}
+          aria-label={ariaLabel}
+        />
+      ))}
+    </Root>
+  );
+};
+
+export const Slider = forwardRef(SliderComponent);
+
+Slider.displayName = "Slider";