tharaday 0.5.11 → 0.6.0

package/src/components/List/List.tsx

@@ -0,0 +1,93 @@
+import clsx from 'clsx';
+import type { CSSProperties } from 'react';
+
+import styles from './List.module.css';
+import type { ListProps } from './List.types';
+import { getSpacingStyles } from '../Box/helpers/getSpacingStyles';
+import { ListItem } from './ListItem';
+
+export const List = ({
+  children,
+  variant = 'unordered',
+  spacing = 0,
+  className,
+  margin,
+  marginX,
+  marginY,
+  marginTop,
+  marginBottom,
+  marginLeft,
+  marginRight,
+  padding,
+  paddingX,
+  paddingY,
+  paddingTop,
+  paddingBottom,
+  paddingLeft,
+  paddingRight,
+  style,
+  ...props
+}: ListProps) => {
+  const Component = variant === 'ordered' ? 'ol' : 'ul';
+
+  const listStyles: CSSProperties = {
+    ...style,
+    ...getSpacingStyles(
+      'padding',
+      padding,
+      paddingX,
+      paddingY,
+      paddingTop,
+      paddingBottom,
+      paddingLeft,
+      paddingRight
+    ),
+    ...getSpacingStyles(
+      'margin',
+      margin,
+      marginX,
+      marginY,
+      marginTop,
+      marginBottom,
+      marginLeft,
+      marginRight
+    ),
+    '--list-spacing': typeof spacing === 'number' ? `${spacing * 0.25}rem` : spacing,
+  } as CSSProperties;
+
+  return (
+    <Component
+      className={clsx(
+        styles.root,
+        styles[variant],
+        typeof spacing === 'number' && styles[`gap-${spacing}`],
+        // If it's 'none' variant or has an icon, we might want to use flex to handle alignment
+        (variant === 'none' ||
+          (typeof spacing === 'number' && spacing > 0) ||
+          typeof spacing === 'string') &&
+          styles.flex,
+        typeof padding === 'number' && styles[`p-${padding}`],
+        typeof paddingX === 'number' && styles[`px-${paddingX}`],
+        typeof paddingY === 'number' && styles[`py-${paddingY}`],
+        typeof paddingTop === 'number' && styles[`pt-${paddingTop}`],
+        typeof paddingBottom === 'number' && styles[`pb-${paddingBottom}`],
+        typeof paddingLeft === 'number' && styles[`pl-${paddingLeft}`],
+        typeof paddingRight === 'number' && styles[`pr-${paddingRight}`],
+        typeof margin === 'number' && styles[`margin-${margin}`],
+        typeof marginX === 'number' && styles[`marginX-${marginX}`],
+        typeof marginY === 'number' && styles[`marginY-${marginY}`],
+        typeof marginTop === 'number' && styles[`marginTop-${marginTop}`],
+        typeof marginBottom === 'number' && styles[`marginBottom-${marginBottom}`],
+        typeof marginLeft === 'number' && styles[`marginLeft-${marginLeft}`],
+        typeof marginRight === 'number' && styles[`marginRight-${marginRight}`],
+        className
+      )}
+      style={listStyles}
+      {...props}
+    >
+      {children}
+    </Component>
+  );
+};
+
+List.Item = ListItem;

package/src/components/List/List.types.ts

@@ -0,0 +1,45 @@
+import type { ReactNode, HTMLAttributes } from 'react';
+import type { BoxPadding, BoxMargin } from '../Box/Box.types';
+
+export type ListVariant = 'unordered' | 'ordered' | 'none';
+
+export interface ListProps extends HTMLAttributes<HTMLUListElement | HTMLOListElement> {
+  /** The content of the list, usually ListItem components */
+  children: ReactNode;
+  /** The visual variant of the list */
+  variant?: ListVariant;
+  /** Spacing between list items */
+  spacing?: BoxPadding;
+  /** Additional class name */
+  className?: string;
+  /** Margin for the entire list */
+  margin?: BoxMargin;
+  /** Horizontal margin */
+  marginX?: BoxMargin;
+  /** Vertical margin */
+  marginY?: BoxMargin;
+  /** Top margin */
+  marginTop?: BoxMargin;
+  /** Bottom margin */
+  marginBottom?: BoxMargin;
+  /** Left margin */
+  marginLeft?: BoxMargin;
+  /** Right margin */
+  marginRight?: BoxMargin;
+  /** Padding for the entire list */
+  padding?: BoxPadding;
+  /** Horizontal padding */
+  paddingX?: BoxPadding;
+  /** Vertical padding */
+  paddingY?: BoxPadding;
+  /** Top padding */
+  paddingTop?: BoxPadding;
+  /** Bottom padding */
+  paddingBottom?: BoxPadding;
+  /** Left padding */
+  paddingLeft?: BoxPadding;
+  /** Right padding */
+  paddingRight?: BoxPadding;
+}
+
+export * from './ListItem.types';

package/src/components/List/ListItem.module.css

@@ -0,0 +1,12 @@
+.item {
+  display: flex;
+  align-items: flex-start;
+}
+
+.iconWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 0.5rem;
+  flex-shrink: 0;
+}

package/src/components/List/ListItem.tsx

@@ -0,0 +1,12 @@
+import clsx from 'clsx';
+import type { ListItemProps } from './ListItem.types';
+import styles from './ListItem.module.css';
+
+export const ListItem = ({ children, icon, className, ...props }: ListItemProps) => {
+  return (
+    <li className={clsx(styles.item, className)} {...props}>
+      {icon && <span className={styles.iconWrapper}>{icon}</span>}
+      <div className={styles.content}>{children}</div>
+    </li>
+  );
+};

package/src/components/List/ListItem.types.ts

@@ -0,0 +1,10 @@
+import type { ReactNode, HTMLAttributes } from 'react';
+
+export interface ListItemProps extends HTMLAttributes<HTMLLIElement> {
+  /** The content of the list item */
+  children: ReactNode;
+  /** Additional class name */
+  className?: string;
+  /** Optional icon or element to display before the content */
+  icon?: ReactNode;
+}

package/src/components/Slider/Slider.module.css

@@ -175,3 +175,22 @@
   font-size: var(--ds-font-size-xs);
   color: var(--ds-text-2);
 }
+
+.inputsRow {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  align-items: center;
+  gap: var(--ds-space-3);
+  width: 100%;
+}
+
+.singleInputRow {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.separator {
+  font-family: var(--ds-font-family-base);
+  font-size: var(--ds-font-size-sm);
+  color: var(--ds-text-2);
+  line-height: 1;
+}

package/src/components/Slider/Slider.stories.tsx

@@ -79,3 +79,22 @@ export const DualValue: Story = {
     showValue: true,
   },
 };
+
+export const WithInputs: Story = {
+  args: {
+    min: 0,
+    max: 500,
+    step: 10,
+    defaultValue: [100, 350],
+    label: 'Budget range',
+    helperText: 'Drag the handles or type exact values.',
+    showValue: true,
+    showInputs: true,
+    fullWidth: true,
+  },
+  render: (args) => (
+    <Box width="420px">
+      <Slider {...args} />
+    </Box>
+  ),
+};

package/src/components/Slider/Slider.tsx

@@ -1,6 +1,7 @@
 import clsx from 'clsx';
 import { useId, useMemo, useState } from 'react';
 
+import { Input } from '../Input/Input.tsx';
 import styles from './Slider.module.css';
 import type { SliderProps, SliderValue } from './Slider.types.ts';
 
@@ -15,6 +16,20 @@ const toNumber = (value: number | string | undefined, fallback: number): number
 const clamp = (value: number, min: number, max: number): number =>
   Math.min(Math.max(value, min), max);
 
+const alignToStep = (
+  value: number,
+  min: number,
+  max: number,
+  step: number | 'any' | undefined
+): number => {
+  if (step == null || step === 'any' || step <= 0) {
+    return clamp(value, min, max);
+  }
+
+  const steps = Math.round((value - min) / step);
+  return clamp(min + steps * step, min, max);
+};
+
 const normalizeToPair = (
   value: SliderValue | undefined,
   min: number,
@@ -36,6 +51,7 @@ export const Slider = ({
   helperText,
   fullWidth = false,
   showValue = false,
+  showInputs = false,
   className,
   id,
   value,
@@ -48,6 +64,8 @@ export const Slider = ({
   const helperId = helperText ? `${componentId}-help` : undefined;
   const min = toNumber(props.min as number | string | undefined, 0);
   const max = toNumber(props.max as number | string | undefined, 100);
+  const step =
+    props.step === 'any' ? 'any' : toNumber(props.step as number | string | undefined, 1);
   const isDual = Array.isArray(value) || Array.isArray(defaultValue);
 
   const initialPair = useMemo(
@@ -69,6 +87,36 @@ export const Slider = ({
     onValueChange?.(isDual ? nextPair : nextPair[0]);
   };
 
+  const commitStartInput = (rawValue: string) => {
+    if (!rawValue.trim()) {
+      return;
+    }
+
+    const parsed = Number(rawValue);
+
+    if (Number.isNaN(parsed)) {
+      return;
+    }
+
+    const next = alignToStep(parsed, min, isDual ? endValue : max, step);
+    emitChange([next, endValue]);
+  };
+
+  const commitEndInput = (rawValue: string) => {
+    if (!rawValue.trim()) {
+      return;
+    }
+
+    const parsed = Number(rawValue);
+
+    if (Number.isNaN(parsed)) {
+      return;
+    }
+
+    const next = alignToStep(parsed, startValue, max, step);
+    emitChange([startValue, next]);
+  };
+
   return (
     <div className={clsx(styles.wrapper, fullWidth && styles.fullWidth, className)}>
       {(label || showValue) && (
@@ -100,9 +148,10 @@ export const Slider = ({
           {...props}
           min={min}
           max={max}
+          step={step}
           value={startValue}
           onChange={(event) => {
-            const next = clamp(toNumber(event.target.value, min), min, endValue);
+            const next = alignToStep(toNumber(event.target.value, min), min, endValue, step);
             emitChange([next, endValue]);
           }}
         />
@@ -116,14 +165,64 @@ export const Slider = ({
             {...props}
             min={min}
             max={max}
+            step={step}
             value={endValue}
             onChange={(event) => {
-              const next = clamp(toNumber(event.target.value, max), startValue, max);
+              const next = alignToStep(toNumber(event.target.value, max), startValue, max, step);
               emitChange([startValue, next]);
             }}
           />
         )}
       </div>
+      {showInputs && (
+        <div className={clsx(styles.inputsRow, !isDual && styles.singleInputRow)}>
+          <Input
+            key={`slider-start-${startValue}-${endValue}`}
+            type="number"
+            inputMode="decimal"
+            size={size}
+            defaultValue={startValue}
+            min={min}
+            max={isDual ? endValue : max}
+            step={step}
+            aria-label={
+              label ? `${label} minimum input` : isDual ? 'Slider minimum input' : 'Slider input'
+            }
+            fullWidth
+            onBlur={(event) => {
+              commitStartInput(event.target.value);
+            }}
+            onKeyDown={(event) => {
+              if (event.key === 'Enter') {
+                commitStartInput(event.currentTarget.value);
+              }
+            }}
+          />
+          {isDual && <span className={styles.separator}>-</span>}
+          {isDual && (
+            <Input
+              key={`slider-end-${startValue}-${endValue}`}
+              type="number"
+              inputMode="decimal"
+              size={size}
+              defaultValue={endValue}
+              min={startValue}
+              max={max}
+              step={step}
+              aria-label={label ? `${label} maximum input` : 'Slider maximum input'}
+              fullWidth
+              onBlur={(event) => {
+                commitEndInput(event.target.value);
+              }}
+              onKeyDown={(event) => {
+                if (event.key === 'Enter') {
+                  commitEndInput(event.currentTarget.value);
+                }
+              }}
+            />
+          )}
+        </div>
+      )}
       {helperText && (
         <span id={helperId} className={styles.helperText}>
           {helperText}

package/src/components/Slider/Slider.types.ts

@@ -13,6 +13,7 @@ export interface SliderProps extends Omit<
   helperText?: string;
   fullWidth?: boolean;
   showValue?: boolean;
+  showInputs?: boolean;
   value?: SliderValue;
   defaultValue?: SliderValue;
   onValueChange?: (value: SliderValue) => void;

package/src/components/Tree/Tree.module.css

@@ -0,0 +1,5 @@
+.root {
+  font-family: var(--ds-font-family-base);
+  font-size: var(--ds-font-size-sm);
+  line-height: var(--ds-line-height-base);
+}

package/src/components/Tree/Tree.stories.tsx

@@ -0,0 +1,113 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Tree } from './Tree';
+
+const meta = {
+  title: 'Components/Tree',
+  component: Tree,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Tree>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Simple: Story = {
+  args: {
+    data: {
+      name: 'John Doe',
+      age: 30,
+      city: 'New York',
+    },
+  },
+};
+
+export const Nested: Story = {
+  args: {
+    data: {
+      user: {
+        id: 1,
+        profile: {
+          firstName: 'Jane',
+          lastName: 'Smith',
+          hobbies: ['reading', 'coding', 'hiking'],
+        },
+      },
+      status: 'active',
+      lastLogin: null,
+    },
+  },
+};
+
+export const ArrayOnly: Story = {
+  args: {
+    data: [
+      { id: 1, text: 'Item 1' },
+      { id: 2, text: 'Item 2', children: [1, 2, 3] },
+    ],
+  },
+};
+
+export const Primitive: Story = {
+  args: {
+    data: 'Hello World',
+  },
+};
+
+export const NullValue: Story = {
+  args: {
+    data: null,
+  },
+};
+
+export const Collapsed: Story = {
+  args: {
+    data: {
+      nested: {
+        deeply: {
+          data: 'hidden',
+        },
+      },
+      array: [1, 2, 3],
+    },
+    defaultExpanded: false,
+  },
+};
+
+export const ExpandedByDefault: Story = {
+  args: {
+    data: {
+      nested: {
+        deeply: {
+          data: 'visible',
+        },
+      },
+    },
+    defaultExpanded: true,
+  },
+};
+
+export const CustomIcons: Story = {
+  args: {
+    data: {
+      folder1: {
+        file1: 'content',
+      },
+      folder2: {
+        file2: 'content',
+      },
+    },
+    expandIcon: '+',
+    collapseIcon: '-',
+  },
+};
+
+export const EmptyStructures: Story = {
+  args: {
+    data: {
+      emptyObj: {},
+      emptyArray: [],
+      nullValue: null,
+      undefinedValue: undefined,
+      notEmpty: [1],
+    },
+  },
+};

package/src/components/Tree/Tree.tsx

@@ -0,0 +1,27 @@
+import clsx from 'clsx';
+import type { TreeProps } from './Tree.types';
+import styles from './Tree.module.css';
+import { TreeItem } from './TreeItem';
+
+export const Tree = ({
+  data,
+  className,
+  defaultExpanded,
+  expandIcon,
+  collapseIcon,
+  ...props
+}: TreeProps) => {
+  return (
+    <div className={clsx(styles.root, className)} {...props}>
+      <TreeItem
+        data={data}
+        defaultExpanded={defaultExpanded}
+        expandIcon={expandIcon}
+        collapseIcon={collapseIcon}
+        isRoot
+      />
+    </div>
+  );
+};
+
+Tree.Item = TreeItem;

package/src/components/Tree/Tree.types.ts

@@ -0,0 +1,16 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export interface TreeProps extends HTMLAttributes<HTMLDivElement> {
+  /** The data to be displayed in the tree */
+  data: unknown;
+  /** Additional class name */
+  className?: string;
+  /** Whether the tree items should be expanded by default */
+  defaultExpanded?: boolean;
+  /** Custom icon for expanded state */
+  expandIcon?: ReactNode;
+  /** Custom icon for collapsed state */
+  collapseIcon?: ReactNode;
+}
+
+export * from './TreeItem.types';

package/src/components/Tree/TreeItem.module.css

@@ -0,0 +1,63 @@
+.list {
+  list-style: none;
+  padding-left: var(--ds-space-4);
+  margin: 0;
+}
+
+.item {
+  margin: 0;
+}
+
+.itemHeader {
+  display: flex;
+  align-items: center;
+  min-height: var(--ds-space-6);
+}
+
+.toggleButton {
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--ds-text-2);
+  width: var(--ds-space-5);
+  height: var(--ds-space-5);
+  flex-shrink: 0;
+  transition: transform var(--ds-transition-fast);
+}
+
+.toggleButton:hover {
+  color: var(--ds-text-1);
+}
+
+.key {
+  font-weight: var(--ds-font-weight-medium);
+  color: var(--ds-text-2);
+}
+
+.value {
+  color: var(--ds-text-1);
+  margin-left: var(--ds-space-1);
+}
+
+.empty {
+  font-style: italic;
+  color: var(--ds-text-disabled);
+  margin-left: var(--ds-space-1);
+}
+
+.collapsibleContent {
+  display: none;
+}
+
+.expanded {
+  display: block;
+}
+
+.rootList {
+  padding-left: 0;
+}