@simplybusiness/mobius 3.0.0

package/src/components/Slider/Slider.story.mdx

@@ -0,0 +1,130 @@
+import { Fragment, useState } from "react";
+import { Meta, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
+import { Slider } from "./Slider";
+import { excludeControls } from "../../utils/excludeControls";
+
+<Meta
+  title="Components/Slider"
+  component={Slider}
+  argTypes={{
+    // Note: minValue, maxValue, defaultValue only work with certain settings.
+    // For example, minValue: 0, maxValue: 100, defaultValue: 25 work well, but
+    // minValue: 50, maxValue: 500, defaultValue: 0 break. Hiding these controls
+    // will still allow users to interact with example settings, but without
+    // allowing the user to break the UI.
+    ...excludeControls(
+      "className",
+      "onChange",
+      "onChangeEnd",
+      "formatOptions",
+      "minValue",
+      "maxValue",
+      "defaultValue",
+    ),
+  }}
+/>
+
+# Slider
+
+Slider allows creating a range slider input, with a `minValue`, `maxValue`, and `step`. It also allows providing an optional `minLabel` and `maxLabel`.
+
+The output of the slider can be formatted by providing a `formatOptions` prop, which is an object as documented in [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat#using_options).
+
+## Install
+
+```bash
+yarn add @simplybusiness/mobius
+```
+
+## Usage
+
+```js
+import { Slider } from "@simplybusiness/mobius";
+```
+
+## Examples
+
+### Primary
+
+<Canvas>
+  <Story
+    name="Primary"
+    args={{
+      label: "Tools value",
+      minValue: 20,
+      maxValue: 500,
+      defaultValue: 100,
+      variant: "primary",
+      minLabel: "",
+      maxLabel: "",
+      isDisabled: false,
+    }}
+  >
+    {args => <Slider {...args} />}
+  </Story>
+</Canvas>
+
+### Secondary
+
+<Canvas>
+  <Story
+    name="Secondary"
+    args={{
+      label: "Tools value",
+      minValue: 20,
+      maxValue: 500,
+      defaultValue: 100,
+      variant: "secondary",
+      minLabel: "",
+      maxLabel: "",
+      isDisabled: false,
+    }}
+  >
+    {args => <Slider {...args} />}
+  </Story>
+</Canvas>
+
+### No label
+
+<Canvas>
+  <Story
+    name="No Label"
+    args={{
+      label: "",
+      "aria-label": "Tools value",
+      minValue: 20,
+      maxValue: 500,
+      variant: "primary",
+      defaultValue: 100,
+      minLabel: "",
+      maxLabel: "",
+      isDisabled: false,
+    }}
+  >
+    {args => <Slider {...args} />}
+  </Story>
+</Canvas>
+
+### Disabled
+
+<Canvas>
+  <Story
+    name="Disabled"
+    args={{
+      label: "Tools value",
+      minValue: 20,
+      maxValue: 500,
+      variant: "primary",
+      defaultValue: 100,
+      minLabel: "",
+      maxLabel: "",
+      isDisabled: true,
+    }}
+  >
+    {args => <Slider {...args} />}
+  </Story>
+</Canvas>
+
+---
+
+[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/Slider) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/Slider/Slider.test.tsx

@@ -0,0 +1,102 @@
+import { render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Slider } from "./Slider";
+
+describe("Slider", () => {
+  it("should render without errors", () => {
+    const { container } = render(
+      <Slider className="test" label="Test" defaultValue={0} />,
+    );
+    expect(container).toBeInTheDocument();
+  });
+
+  describe("labels", () => {
+    it("should render a min label", () => {
+      const { getByTestId } = render(<Slider label="Test" minLabel="Min" />);
+      expect(getByTestId("min-label")).toHaveTextContent("Min");
+    });
+
+    it("should render a max label", () => {
+      const { getByTestId } = render(<Slider label="Test" maxLabel="Max" />);
+      expect(getByTestId("max-label")).toHaveTextContent("Max");
+    });
+  });
+
+  describe("classnames", () => {
+    let result: any;
+
+    beforeEach(() => {
+      result = render(
+        <Slider className="test" label="test" defaultValue={0} />,
+      );
+    });
+
+    const classNames = ["mobius", "mobius/Slider", "test"];
+    it.each(classNames)("should have classname %s", className => {
+      expect(result.container.firstChild).toHaveClass(className);
+    });
+  });
+
+  describe("events", () => {
+    it("should call events on input change", async () => {
+      const onChange = jest.fn();
+      const onChangeEnd = jest.fn();
+
+      render(
+        <Slider
+          label="test"
+          defaultValue={1}
+          minValue={1}
+          maxValue={10}
+          onChange={onChange}
+          onChangeEnd={onChangeEnd}
+        />,
+      );
+
+      await userEvent.tab();
+      await userEvent.keyboard("{arrowright}");
+      expect(onChange).toHaveBeenCalledWith(2);
+      expect(onChangeEnd).toHaveBeenCalledWith(2);
+    });
+
+    it("should not call onChange when value is already min", async () => {
+      const onChange = jest.fn();
+      const onChangeEnd = jest.fn();
+
+      render(
+        <Slider
+          label="test"
+          defaultValue={1}
+          minValue={1}
+          maxValue={10}
+          onChange={onChange}
+          onChangeEnd={onChangeEnd}
+        />,
+      );
+
+      await userEvent.tab();
+      await userEvent.keyboard("{arrowleft}");
+      expect(onChange).not.toHaveBeenCalled();
+    });
+
+    it("should not call onChange when value is already max", async () => {
+      const onChange = jest.fn();
+      const onChangeEnd = jest.fn();
+
+      render(
+        <Slider
+          label="test"
+          defaultValue={10}
+          minValue={1}
+          maxValue={10}
+          onChange={onChange}
+          onChangeEnd={onChangeEnd}
+        />,
+      );
+
+      await userEvent.tab();
+      await userEvent.keyboard("{arrowright}");
+      expect(onChange).not.toHaveBeenCalled();
+    });
+  });
+});

package/src/components/Slider/Slider.tsx

@@ -0,0 +1,125 @@
+import { useRef } from "react";
+import { useSlider } from "@react-aria/slider";
+import { SliderProps as SpectrumSliderProps } from "@react-types/slider";
+import { useSliderState } from "@react-stately/slider";
+import { useNumberFormatter } from "@react-aria/i18n";
+import clsx from "clsx";
+import { DOMProps } from "@react-types/shared";
+import { SliderThumb } from "./Thumb";
+import { Label } from "../Label";
+import { useUnwrappedHandler, useWrappedValue } from "./helpers";
+
+export interface SliderProps extends SpectrumSliderProps<number>, DOMProps {
+  variant?: "primary" | "secondary";
+  className?: string;
+  onChange?: (value: number | undefined) => void;
+  onChangeEnd?: (value: number | undefined) => void;
+  minLabel?: string;
+  maxLabel?: string;
+  formatOptions?: Intl.NumberFormatOptions;
+}
+
+export function Slider(props: SliderProps) {
+  const {
+    className,
+    label,
+    defaultValue,
+    value,
+    onChange,
+    onChangeEnd,
+    variant = "primary",
+    minLabel,
+    maxLabel,
+    formatOptions,
+    isDisabled = false,
+  } = props;
+  const trackRef = useRef(null);
+  const numberFormatter = useNumberFormatter(formatOptions);
+
+  const wrappedValue = useWrappedValue(value);
+  const wrappedDefaultValue = useWrappedValue(defaultValue);
+
+  const unwrappedOnChange = useUnwrappedHandler(onChange);
+  const unwrappedOnChangeEnd = useUnwrappedHandler(onChangeEnd);
+
+  const state = useSliderState({
+    ...props,
+    value: wrappedValue,
+    defaultValue: wrappedDefaultValue,
+    onChange: unwrappedOnChange,
+    onChangeEnd: unwrappedOnChangeEnd,
+    numberFormatter,
+    isDisabled,
+  });
+
+  const { groupProps, trackProps, labelProps, outputProps } = useSlider(
+    {
+      ...props,
+      value: wrappedValue,
+      defaultValue: wrappedDefaultValue,
+      onChange: unwrappedOnChange,
+      onChangeEnd: unwrappedOnChangeEnd,
+    },
+    state,
+    trackRef,
+  );
+  const classes = clsx("mobius", "mobius/Slider", className, {
+    "--is-disabled": isDisabled,
+    "--is-primary": variant === "primary",
+    "--is-secondary": variant === "secondary",
+  });
+
+  return (
+    <div
+      {...groupProps}
+      css={{
+        position: "relative",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        touchAction: "none",
+      }}
+      className={classes}
+    >
+      {/* Create a flex container for the label and output element. */}
+      <div css={{ display: "flex", alignSelf: "stretch" }}>
+        {label && <Label {...labelProps}>{label}</Label>}
+        {label && (
+          <output
+            {...outputProps}
+            style={{ flex: "1 0 auto", textAlign: "end" }}
+          >
+            {state.getThumbValueLabel(0)}
+          </output>
+        )}
+      </div>
+      {/* The track element holds the visible track line and the thumb. */}
+      <div
+        {...trackProps}
+        ref={trackRef}
+        className="mobius mobius/SliderTrackWrapper"
+        css={{
+          position: "relative",
+          width: "100%",
+        }}
+      >
+        <div
+          className="mobius/SliderTrack"
+          css={{
+            position: "absolute",
+            width: "100%",
+          }}
+        />
+        <SliderThumb index={0} state={state} trackRef={trackRef} />
+      </div>
+      <div className="mobius/SliderLabels">
+        <div className="mobius/SliderMinLabel" data-testid="min-label">
+          {minLabel}
+        </div>
+        <div className="mobius/SliderMaxLabel" data-testid="max-label">
+          {maxLabel}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/Slider/Thumb.tsx

@@ -0,0 +1,54 @@
+import { RefObject, useRef } from "react";
+import { useFocusRing } from "@react-aria/focus";
+import { VisuallyHidden } from "@react-aria/visually-hidden";
+import { mergeProps } from "@react-aria/utils";
+import { useSliderThumb } from "@react-aria/slider";
+import { SliderThumbProps as SpectrumSliderThumbProps } from "@react-types/slider";
+import { SliderState } from "@react-stately/slider";
+import clsx from "clsx";
+
+export interface SliderThumbProps extends SpectrumSliderThumbProps {
+  state: SliderState;
+  trackRef: RefObject<HTMLElement>;
+}
+
+export function SliderThumb(props: SliderThumbProps) {
+  const { state, trackRef, index, isDisabled } = props;
+  const inputRef = useRef(null);
+  const { thumbProps, inputProps } = useSliderThumb(
+    {
+      index,
+      trackRef,
+      inputRef,
+    },
+    state,
+  );
+
+  const { focusProps, isFocusVisible } = useFocusRing();
+
+  const classes = {
+    "--is-disabled": isDisabled,
+    "--is-focus-visible": isFocusVisible,
+    "is-dragging": state.isThumbDragging(index),
+  };
+  const wrapperClasses = clsx("mobius", "mobius/SliderThumbWrapper", classes);
+  const thumbClasses = clsx("mobius", "mobius/SliderThumb", classes);
+
+  return (
+    <div
+      css={{
+        position: "absolute",
+        top: "calc(50% - 1px)",
+        transform: "translateX(-50%)",
+        left: `${state.getThumbPercent(index) * 100}%`,
+      }}
+      className={wrapperClasses}
+    >
+      <div {...thumbProps} className={thumbClasses}>
+        <VisuallyHidden>
+          <input ref={inputRef} {...mergeProps(inputProps, focusProps)} />
+        </VisuallyHidden>
+      </div>
+    </div>
+  );
+}

package/src/components/Slider/helpers.test.ts

@@ -0,0 +1,67 @@
+import { renderHook } from "@testing-library/react";
+import {
+  unwrapFirstValue,
+  useUnwrappedHandler,
+  useWrappedValue,
+  wrapValue,
+} from "./helpers";
+
+describe("Slider helpers", () => {
+  describe("unwrapFirstValue", () => {
+    it("should return undefined if the value is undefined", () => {
+      expect(unwrapFirstValue(undefined)).toBeUndefined();
+    });
+
+    it("should return undefined if the value is an empty array", () => {
+      expect(unwrapFirstValue([])).toBeUndefined();
+    });
+
+    it("should return the first value if the value is an array with one element", () => {
+      expect(unwrapFirstValue([1])).toBe(1);
+    });
+
+    it("should return the first value if the value is an array with more than one element", () => {
+      expect(unwrapFirstValue([1, 2])).toBe(1);
+    });
+  });
+
+  describe("wrapValue", () => {
+    it("should return undefined if the value is undefined", () => {
+      expect(wrapValue(undefined)).toBeUndefined();
+    });
+
+    it("should return the value if it is not an array", () => {
+      expect(wrapValue(1)).toEqual([1]);
+    });
+
+    it("should return an array of array if value is an array", () => {
+      expect(wrapValue([1])).toEqual([[1]]);
+    });
+  });
+
+  describe("useWrappedValue", () => {
+    it("should return undefined if the value is undefined", () => {
+      const { result } = renderHook(() => useWrappedValue(undefined));
+      expect(result.current).toBeUndefined();
+    });
+
+    it("should return the value if it is not an array", () => {
+      const { result } = renderHook(() => useWrappedValue(1));
+      expect(result.current).toEqual([1]);
+    });
+
+    it("should return an array of array if value is an array", () => {
+      const { result } = renderHook(() => useWrappedValue([1]));
+      expect(result.current).toEqual([[1]]);
+    });
+  });
+
+  describe("useUnwrappedHandler", () => {
+    it("should call the handler with the unwrapped value", () => {
+      const handler = jest.fn();
+      const { result } = renderHook(() => useUnwrappedHandler(handler));
+      result.current([1]);
+      expect(handler).toHaveBeenCalledWith(1);
+    });
+  });
+});

package/src/components/Slider/helpers.ts

@@ -0,0 +1,27 @@
+import { useCallback, useMemo } from "react";
+
+export function unwrapFirstValue<T>(value: T | T[] | undefined): T | undefined {
+  if (Array.isArray(value)) {
+    return value[0];
+  }
+  return value;
+}
+
+export function wrapValue<T>(value: T | undefined): T[] | undefined {
+  return value === undefined ? undefined : [value];
+}
+
+export function useUnwrappedHandler<T>(
+  handler: ((value: T | undefined) => void) | undefined,
+) {
+  return useCallback(
+    (value: T | T[]) => {
+      handler?.(unwrapFirstValue(value));
+    },
+    [handler],
+  );
+}
+
+export function useWrappedValue<T>(value: T | undefined): T[] | undefined {
+  return useMemo(() => wrapValue(value), [value]);
+}

package/src/components/Slider/index.tsx

@@ -0,0 +1 @@
+export * from "./Slider";

package/src/components/Table/Body.tsx

@@ -0,0 +1,20 @@
+import { Ref, forwardRef, RefAttributes, ReactNode } from "react";
+import clsx from "clsx";
+import { ForwardedRefComponent } from "../../types/components";
+
+export interface BodyProps extends RefAttributes<HTMLTableSectionElement> {
+  children?: ReactNode;
+  className?: string;
+}
+
+export type BodyRef = Ref<HTMLTableSectionElement>;
+
+const Body: ForwardedRefComponent<BodyProps, HTMLTableSectionElement> =
+  forwardRef((props: BodyProps, ref: BodyRef) => {
+    const classes = clsx("mobius", "mobius/TableBody", props.className);
+
+    return <tbody ref={ref} {...props} className={classes} />;
+  });
+
+Body.displayName = "Table.Body";
+export { Body };

package/src/components/Table/Cell.tsx

@@ -0,0 +1,23 @@
+import { Ref, forwardRef, RefAttributes, ReactNode } from "react";
+import clsx from "clsx";
+import { ForwardedRefComponent } from "../../types/components";
+
+export interface CellProps extends RefAttributes<HTMLTableCellElement> {
+  children?: ReactNode;
+  className?: string;
+  colSpan?: number;
+  rowSpan?: number;
+}
+
+export type CellRef = Ref<HTMLTableCellElement>;
+
+const Cell: ForwardedRefComponent<CellProps, HTMLTableCellElement> = forwardRef(
+  (props: CellProps, ref: CellRef) => {
+    const classes = clsx("mobius", "mobius/TableBodyCell", props.className);
+
+    return <td ref={ref} {...props} className={classes} />;
+  },
+);
+
+Cell.displayName = "Table.Cell";
+export { Cell };

package/src/components/Table/Foot.tsx

@@ -0,0 +1,20 @@
+import { Ref, forwardRef, RefAttributes, ReactNode } from "react";
+import clsx from "clsx";
+import { ForwardedRefComponent } from "../../types/components";
+
+export interface FootProps extends RefAttributes<HTMLTableSectionElement> {
+  children?: ReactNode;
+  className?: string;
+}
+
+export type FootRef = Ref<HTMLTableSectionElement>;
+
+const Foot: ForwardedRefComponent<FootProps, HTMLTableSectionElement> =
+  forwardRef((props: FootProps, ref: FootRef) => {
+    const classes = clsx("mobius", "mobius/TableFoot", props.className);
+
+    return <tfoot ref={ref} {...props} className={classes} />;
+  });
+
+Foot.displayName = "Table.Foot";
+export { Foot };

package/src/components/Table/Head.tsx

@@ -0,0 +1,20 @@
+import { Ref, forwardRef, RefAttributes, ReactNode } from "react";
+import clsx from "clsx";
+import { ForwardedRefComponent } from "../../types/components";
+
+export interface HeadProps extends RefAttributes<HTMLTableSectionElement> {
+  children?: ReactNode;
+  className?: string;
+}
+
+export type HeadRef = Ref<HTMLTableSectionElement>;
+
+const Head: ForwardedRefComponent<HeadProps, HTMLTableSectionElement> =
+  forwardRef((props: HeadProps, ref: HeadRef) => {
+    const classes = clsx("mobius", "mobius/TableHead", props.className);
+
+    return <thead ref={ref} {...props} className={classes} />;
+  });
+
+Head.displayName = "Table.Head";
+export { Head };

package/src/components/Table/HeaderCell.tsx

@@ -0,0 +1,20 @@
+import { Ref, forwardRef, RefAttributes, ReactNode } from "react";
+import clsx from "clsx";
+import { ForwardedRefComponent } from "../../types/components";
+
+export interface HeaderCellProps extends RefAttributes<HTMLTableCellElement> {
+  children?: ReactNode;
+  className?: string;
+}
+
+export type HeaderCellRef = Ref<HTMLTableCellElement>;
+
+const HeaderCell: ForwardedRefComponent<HeaderCellProps, HTMLTableCellElement> =
+  forwardRef((props: HeaderCellProps, ref: HeaderCellRef) => {
+    const classes = clsx("mobius", "mobius/TableHeadCell", props.className);
+
+    return <th {...props} ref={ref} className={classes} />;
+  });
+
+HeaderCell.displayName = "Table.HeaderCell";
+export { HeaderCell };

package/src/components/Table/Row.tsx

@@ -0,0 +1,21 @@
+import { Ref, forwardRef, RefAttributes, ReactNode } from "react";
+import clsx from "clsx";
+import { ForwardedRefComponent } from "../../types/components";
+
+export interface RowProps extends RefAttributes<HTMLTableRowElement> {
+  children?: ReactNode;
+  className?: string;
+}
+
+export type RowRef = Ref<HTMLTableRowElement>;
+
+const Row: ForwardedRefComponent<RowProps, HTMLTableRowElement> = forwardRef(
+  (props: RowProps, ref: RowRef) => {
+    const classes = clsx("mobius", "mobius/TableRow", props.className);
+
+    return <tr ref={ref} {...props} className={classes} />;
+  },
+);
+
+Row.displayName = "Table.Row";
+export { Row };