Merge pull request #95 from makeswift/hunter/des-1391-counter

feat: added Counter component?

Author: hunterbecton

.changeset/tidy-facts-taste.md

@@ -0,0 +1,5 @@
+---
+'commerce-toolkit': minor
+---
+
+Added Counter component

package.json

@@ -107,6 +107,16 @@
         "default": "./dist/chip.cjs"
       }
     },
+    "./counter": {
+      "import": {
+        "types": "./dist/components/counter/primitives.d.ts",
+        "default": "./dist/counter.js"
+      },
+      "require": {
+        "types": "./dist/components/counter/primitives.d.ts",
+        "default": "./dist/counter.cjs"
+      }
+    },
     "./compare-card": {
       "import": {
         "types": "./dist/components/compare-card/primitives.d.ts",

src/components/counter/counter.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import { Minus, Plus } from 'lucide-react';
+
+import * as CounterPrimitive from '@/components/counter';
+
+export interface CounterProps {
+  start?: number;
+  max?: number;
+  decrementAriaLabel?: string;
+  incrementAriaLabel?: string;
+}
+
+/**
+ * This component supports various CSS variables for theming. Here's a comprehensive list, along
+ * with their default values:
+ *
+ * ```css
+ * :root {
+ *   --counter-focus: hsl(var(--primary));
+ *   --counter-font-family: var(--font-family-body);
+ *   --counter-background: hsl(var(--background));
+ *   --counter-background-hover: color-mix(in oklab, hsl(var(--contrast-100)) 50%, transparent);
+ *   --counter-border: hsl(var(--contrast-100));
+ *   --counter-text: hsl(var(--foreground));
+ *   --counter-icon-hover: hsl(var(--foreground));
+ *   --counter-icon: hsl(var(--contrast-300));
+ * }
+ * ```
+ */
+export function Counter({
+  start = 0,
+  max = 10,
+  decrementAriaLabel = 'Decrease count',
+  incrementAriaLabel = 'Increase count',
+}: CounterProps) {
+  return (
+    <CounterPrimitive.Root max={max} start={start}>
+      <CounterPrimitive.Decrease aria-label={decrementAriaLabel}>
+        <Minus
+          absoluteStrokeWidth
+          className="text-[var(--counter-icon,hsl(var(--contrast-300)))] transition-colors duration-300 group-data-[state=enabled]:group-hover:text-[var(--counter-icon-hover,hsl(var(--foreground)))]"
+          size={18}
+          strokeWidth={1.5}
+        />
+      </CounterPrimitive.Decrease>
+      <CounterPrimitive.Input readOnly />
+      <CounterPrimitive.Increase aria-label={incrementAriaLabel}>
+        <Plus
+          absoluteStrokeWidth
+          className="text-[var(--counter-icon,hsl(var(--contrast-300)))] transition-colors duration-300 group-data-[state=enabled]:group-hover:text-[var(--counter-icon-hover,hsl(var(--foreground)))]"
+          size={18}
+          strokeWidth={1.5}
+        />
+      </CounterPrimitive.Increase>
+    </CounterPrimitive.Root>
+  );
+}

src/components/counter/index.ts

@@ -0,0 +1,2 @@
+export { Counter, type CounterProps } from '@/components/counter/counter';
+export * from '@/components/counter/primitives';

src/components/counter/primitives.ts

@@ -0,0 +1,17 @@
+export {
+  CounterRoot as Root,
+  type CounterRootProps as RootProps,
+  useCounter,
+} from '@/components/counter/primitives/counter-root';
+export {
+  CounterDecrease as Decrease,
+  type CounterDecreaseProps as DecreaseProps,
+} from '@/components/counter/primitives/counter-decrease';
+export {
+  CounterIncrease as Increase,
+  type CounterIncreaseProps as IncreaseProps,
+} from '@/components/counter/primitives/counter-increase';
+export {
+  CounterInput as Input,
+  type CounterInputProps as InputProps,
+} from '@/components/counter/primitives/counter-input';

src/components/counter/primitives/counter-decrease.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import type { ComponentProps } from 'react';
+
+import { useCounter } from '@/components/counter';
+import { cn } from '@/lib';
+
+export type CounterDecreaseProps = ComponentProps<'button'>;
+
+export function CounterDecrease({ children, className, ...props }: CounterDecreaseProps) {
+  const { count, decrement } = useCounter();
+
+  return (
+    <button
+      className={cn(
+        'group z-[1] rounded-l-lg p-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--counter-focus,hsl(var(--primary)))] enabled:hover:bg-[var(--counter-background-hover,color-mix(in_oklab,hsl(var(--contrast-100))_50%,transparent))] disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      data-slot="counter-decrease"
+      data-state={count > 0 ? 'enabled' : 'disabled'}
+      disabled={count === 0}
+      onClick={decrement}
+      type="button"
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}

src/components/counter/primitives/counter-increase.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import type { ComponentProps } from 'react';
+
+import { useCounter } from '@/components/counter';
+import { cn } from '@/lib';
+
+export type CounterIncreaseProps = ComponentProps<'button'>;
+
+export function CounterIncrease({ children, className, ...props }: CounterIncreaseProps) {
+  const { count, max, increment } = useCounter();
+
+  return (
+    <button
+      className={cn(
+        'group z-[1] rounded-r-lg p-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--counter-focus,hsl(var(--primary)))] enabled:hover:bg-[var(--counter-background-hover,color-mix(in_oklab,hsl(var(--contrast-100))_50%,transparent))] disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      data-slot="counter-increase"
+      data-state={count < max ? 'enabled' : 'disabled'}
+      disabled={count === max}
+      onClick={increment}
+      type="button"
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}

src/components/counter/primitives/counter-input.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import type { ComponentProps } from 'react';
+
+import { useCounter } from '@/components/counter';
+import { cn } from '@/lib';
+
+export type CounterInputProps = Omit<ComponentProps<'input'>, 'type'>;
+
+export function CounterInput({ className, ...props }: CounterInputProps) {
+  const { count, max } = useCounter();
+
+  return (
+    <input
+      className={cn(
+        'w-8 bg-transparent text-center [appearance:textfield] focus-visible:outline-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',
+        className,
+      )}
+      data-slot="counter-input"
+      max={max}
+      type="number"
+      value={count}
+      {...props}
+    />
+  );
+}

src/components/counter/primitives/counter-root.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+import { createContext, use, useCallback, useMemo, useState } from 'react';
+import type { ComponentProps } from 'react';
+
+import { cn } from '@/lib';
+
+interface CounterContext {
+  count: number;
+  max: number;
+  decrement: () => void;
+  increment: () => void;
+}
+
+export const CounterContext = createContext<CounterContext | undefined>(undefined);
+
+export type CounterRootProps = ComponentProps<'div'> & {
+  start?: number;
+  max?: number;
+};
+
+export function CounterRoot({
+  children,
+  className,
+  start = 0,
+  max = 10,
+  ...props
+}: CounterRootProps) {
+  const [count, setCount] = useState(start);
+
+  const decrement = useCallback(() => {
+    setCount((prev) => prev - 1);
+  }, [max]);
+
+  const increment = useCallback(() => {
+    setCount((prev) => prev + 1);
+  }, [max]);
+
+  const contextValues = useMemo(
+    () => ({
+      count,
+      max,
+      decrement,
+      increment,
+    }),
+    [count, max, decrement, increment],
+  );
+
+  return (
+    <CounterContext.Provider value={contextValues}>
+      <div
+        className={cn(
+          'flex items-center justify-between rounded-lg border border-[var(--counter-border,hsl(var(--contrast-100)))] bg-[var(--counter-background,hsl(var(--background)))] font-[var(--counter-font-family,var(--font-family-body))] text-[var(--counter-text,hsl(var(--foreground)))]',
+          className,
+        )}
+        data-slot="counter-root"
+        {...props}
+      >
+        {children}
+      </div>
+    </CounterContext.Provider>
+  );
+}
+
+export function useCounter() {
+  const context = use(CounterContext);
+
+  if (context === undefined) {
+    throw new Error('useCounter must be used within a CounterRoot');
+  }
+
+  return context;
+}

src/components/counter/storybook/counter.stories.tsx

@@ -0,0 +1,81 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Counter } from '@/components/counter';
+
+const meta = {
+  title: 'Components/Counter',
+  component: Counter,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    start: {
+      control: 'number',
+      description: 'Initial count value',
+      table: {
+        defaultValue: { summary: '0' },
+      },
+    },
+    max: {
+      control: 'number',
+      description: 'Maximum count value (increment button disabled at this value)',
+      table: {
+        defaultValue: { summary: '10' },
+      },
+    },
+    decrementAriaLabel: {
+      control: 'text',
+      description: 'Accessible label for the decrement button',
+      table: {
+        defaultValue: { summary: 'Decrease count' },
+      },
+    },
+    incrementAriaLabel: {
+      control: 'text',
+      description: 'Accessible label for the increment button',
+      table: {
+        defaultValue: { summary: 'Increase count' },
+      },
+    },
+  },
+  args: {
+    start: 0,
+    max: 10,
+    decrementAriaLabel: 'Decrease count',
+    incrementAriaLabel: 'Increase count',
+  },
+} satisfies Meta<typeof Counter>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const WithInitialValue: Story = {
+  args: {
+    start: 5,
+  },
+};
+
+export const SmallRange: Story = {
+  args: {
+    max: 3,
+  },
+};
+
+export const AtMaximum: Story = {
+  args: {
+    start: 10,
+    max: 10,
+  },
+};
+
+export const LargeRange: Story = {
+  args: {
+    max: 100,
+  },
+};