@purpurds/slider 5.10.1 → 5.11.1

package/src/slider.stories.tsx

@@ -1,16 +1,8 @@
 import React from "react";
-import { useArgs } from "@storybook/client-api";
+import { useArgs } from "@storybook/preview-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>;
+import { ORIENTATION, Slider } from "./slider";
 
 const decorators: Story["decorators"] = [
   (Story) => (
@@ -20,30 +12,49 @@ const decorators: Story["decorators"] = [
   ),
 ];
 
-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 = {
+const meta = {
+  title: "Inputs/Slider",
+  component: Slider,
+  decorators,
+  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/...",
+    //   },
+    // ],
+  },
+  argTypes: {
+    orientation: {
+      table: {
+        type: {
+          summary: ORIENTATION.map((x) => `"${x}"`).join(" | "),
+        },
+      },
+    },
+  },
   args: {
     "data-testid": "test-id",
     "aria-label": "Slider thumb",
-    id: "slider",
     max: 100,
     min: 0,
-    minStepsBetweenThumbs: 0,
     name: "slider",
+    id: "slider",
+    orientation: "horizontal",
     step: 1,
+    minStepsBetweenThumbs: 0,
+  },
+} satisfies Meta<typeof Slider>;
+
+export default meta;
+type Story = StoryObj<typeof Slider>;
+
+export const ControlledSingle: Story = {
+  args: {
     value: [25],
-    orientation: "horizontal",
   },
   argTypes: {
     defaultValue: {
@@ -52,8 +63,6 @@ export const ControlledSingle: Story = {
       },
     },
   },
-  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 });
@@ -69,16 +78,7 @@ export const ControlledSingle: Story = {
 
 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: {
@@ -87,8 +87,6 @@ export const ControlledMulti: Story = {
       },
     },
   },
-  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 });
@@ -105,15 +103,7 @@ export const ControlledMulti: Story = {
 
 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: {
@@ -128,8 +118,6 @@ export const UncontrolledSingle: Story = {
       },
     },
   },
-  parameters,
-  decorators,
   render: ({ ...args }) => {
     return (
       <form style={{ height: "100%" }}>
@@ -142,15 +130,7 @@ export const UncontrolledSingle: Story = {
 
 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: {
@@ -164,8 +144,6 @@ export const UncontrolledMulti: Story = {
       },
     },
   },
-  parameters,
-  decorators,
   render: ({ ...args }) => {
     return (
       <form style={{ height: "100%" }}>

package/src/slider.tsx

@@ -6,6 +6,7 @@ import styles from "./slider.module.scss";
 const cx = c.bind(styles);
 
 type SliderValue = [number] | [number, number];
+export const ORIENTATION = ["horizontal", "vertical"] as const;
 
 export type SliderProps<T extends SliderValue> = {
   ["data-testid"]?: string;
@@ -14,7 +15,10 @@ export type SliderProps<T extends SliderValue> = {
   /* Human-readable text alternative for aria-valuenow (aria-valuenow is set to `value` by radix under the hood). Use when the numeric value alone doesn't clearly represent the actual value. */
   ["aria-valuetext"]: string;
   className?: string;
-  /* The value of the slider when initially rendered. Use when you do not need to control the state of the slider. */
+  /**
+   * The value of the slider when initially rendered. Use when you do not need to control the state of the slider. 
+    `T = <T extends [number] | [number, number]>`
+  */
   defaultValue?: T;
   /* The id of the slider. */
   id?: string;
@@ -27,7 +31,7 @@ export type SliderProps<T extends SliderValue> = {
   /* 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";
+  orientation?: (typeof ORIENTATION)[number];
   /* The stepping interval. */
   step?: number;
   /* The controlled value of the slider. Must be used in conjunction with onValueChange. */