@ds-mo/ui 0.3.0 → 0.4.0

package/src/components/Select/Select.stories.tsx

@@ -1,59 +0,0 @@
-import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Select } from './Select';
-
-const meta: Meta<typeof Select> = {
-  title: 'Components/Select',
-  component: Select,
-};
-
-export default meta;
-type Story = StoryObj<typeof Select>;
-
-const fruitOptions = [
-  { value: 'apple', label: 'Apple' },
-  { value: 'banana', label: 'Banana' },
-  { value: 'cherry', label: 'Cherry' },
-  { value: 'date', label: 'Date' },
-  { value: 'elderberry', label: 'Elderberry' },
-];
-
-export const Default: Story = {
-  render: () => {
-    const [value, setValue] = useState<string | number>('');
-    return (
-      <div style={{ width: 260, padding: 24 }}>
-        <Select
-          value={value}
-          onChange={setValue}
-          options={fruitOptions}
-          placeholder="Select a fruit"
-        />
-      </div>
-    );
-  },
-};
-
-export const WithValue: Story = {
-  render: () => {
-    const [value, setValue] = useState<string | number>('cherry');
-    return (
-      <div style={{ width: 260, padding: 24 }}>
-        <Select value={value} onChange={setValue} options={fruitOptions} />
-      </div>
-    );
-  },
-};
-
-export const Inactive: Story = {
-  render: () => (
-    <div style={{ width: 260, padding: 24 }}>
-      <Select
-        value="banana"
-        onChange={() => {}}
-        options={fruitOptions}
-        inactive
-      />
-    </div>
-  ),
-};

package/src/components/Select/Select.tsx

@@ -1,222 +0,0 @@
-import React, { forwardRef, useId, useState, useRef, useEffect, useCallback } from 'react';
-import { Surface } from '@/components/Surface';
-import { Text } from '@/components/Text';
-import { Menu } from '@/components/Menu';
-import type { MenuItemData } from '@/components/Menu';
-import type { IconComponent } from '@/types';
-import styles from './Select.module.css';
-
-export interface SelectOption {
-  label: string;
-  value: string | number;
-}
-
-export interface SelectProps {
-  value: string | number;
-  onChange: (value: string | number) => void;
-  options: SelectOption[];
-  placeholder?: string;
-  className?: string;
-  inactive?: boolean;
-  id?: string;
-  chevronIcon?: IconComponent;
-  /** Accessible name. Required when no associated `<label htmlFor>` element exists. */
-  'aria-label'?: string;
-  /** Accessible name reference. Use when a visible label already exists outside the trigger. */
-  'aria-labelledby'?: string;
-}
-
-export const Select = forwardRef<HTMLDivElement, SelectProps>(
-  (
-    {
-      value,
-      onChange,
-      options,
-      placeholder = 'Select option',
-      className,
-      inactive = false,
-      id,
-      chevronIcon: ChevronIcon,
-      'aria-label': ariaLabel,
-      'aria-labelledby': ariaLabelledBy,
-    },
-    ref
-  ) => {
-    const [isMenuOpen, setIsMenuOpen] = useState(false);
-    const [activeIndex, setActiveIndex] = useState(-1);
-    const buttonRef = useRef<HTMLButtonElement>(null);
-
-    const reactId = useId();
-    const triggerId = id ?? `select-${reactId}`;
-    const listboxId = `${triggerId}-listbox`;
-    const getOptionId = useCallback((index: number) => `${triggerId}-option-${index}`, [triggerId]);
-
-    const selectedIndex = options.findIndex(opt => opt.value === value);
-    const selectedOption = selectedIndex >= 0 ? options[selectedIndex] : undefined;
-    const selectedLabel = selectedOption?.label || placeholder;
-
-    const commitSelection = useCallback(
-      (index: number) => {
-        const option = options[index];
-        if (!option) return;
-        onChange(option.value);
-        setIsMenuOpen(false);
-      },
-      [options, onChange]
-    );
-
-    const openWith = useCallback(
-      (initialIndex: number) => {
-        if (inactive || options.length === 0) return;
-        const clamped = Math.max(0, Math.min(options.length - 1, initialIndex));
-        setActiveIndex(clamped);
-        setIsMenuOpen(true);
-      },
-      [inactive, options.length]
-    );
-
-    useEffect(() => {
-      if (isMenuOpen) {
-        setActiveIndex(prev => {
-          if (prev >= 0 && prev < options.length) return prev;
-          return selectedIndex >= 0 ? selectedIndex : 0;
-        });
-      } else {
-        setActiveIndex(-1);
-      }
-    }, [isMenuOpen, options.length, selectedIndex]);
-
-    const menuItems: MenuItemData[] = options.map((option, index) => ({
-      label: option.label,
-      onClick: () => commitSelection(index),
-      isSelected: option.value === value,
-    }));
-
-    const handleToggle = () => {
-      if (inactive) return;
-      if (isMenuOpen) {
-        setIsMenuOpen(false);
-      } else {
-        openWith(selectedIndex >= 0 ? selectedIndex : 0);
-      }
-    };
-
-    const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {
-      if (inactive || options.length === 0) return;
-      const last = options.length - 1;
-
-      if (!isMenuOpen) {
-        switch (event.key) {
-          case 'ArrowDown':
-          case 'ArrowUp':
-          case 'Enter':
-          case ' ':
-            event.preventDefault();
-            openWith(selectedIndex >= 0 ? selectedIndex : 0);
-            return;
-          case 'Home':
-            event.preventDefault();
-            openWith(0);
-            return;
-          case 'End':
-            event.preventDefault();
-            openWith(last);
-            return;
-          default:
-            return;
-        }
-      }
-
-      switch (event.key) {
-        case 'ArrowDown':
-          event.preventDefault();
-          setActiveIndex(prev => Math.min(last, (prev < 0 ? -1 : prev) + 1));
-          break;
-        case 'ArrowUp':
-          event.preventDefault();
-          setActiveIndex(prev => Math.max(0, (prev < 0 ? options.length : prev) - 1));
-          break;
-        case 'Home':
-          event.preventDefault();
-          setActiveIndex(0);
-          break;
-        case 'End':
-          event.preventDefault();
-          setActiveIndex(last);
-          break;
-        case 'Enter':
-        case ' ':
-          event.preventDefault();
-          if (activeIndex >= 0) commitSelection(activeIndex);
-          break;
-        case 'Escape':
-          event.preventDefault();
-          setIsMenuOpen(false);
-          break;
-        case 'Tab':
-          setIsMenuOpen(false);
-          break;
-      }
-    };
-
-    const activeDescendantId =
-      isMenuOpen && activeIndex >= 0 ? getOptionId(activeIndex) : undefined;
-
-    return (
-      <div ref={ref} className={`${styles.selectWrapper} ${className || ''}`}>
-        <Surface
-          id={triggerId}
-          ref={buttonRef as React.RefObject<HTMLElement>}
-          as="button"
-          type="button"
-          elevation="elevated"
-          radius="sm"
-          interactive
-          selected={isMenuOpen}
-          className={styles.selectButton}
-          onClick={handleToggle}
-          onKeyDown={handleKeyDown}
-          inactive={inactive}
-          role="combobox"
-          aria-haspopup="listbox"
-          aria-expanded={isMenuOpen}
-          aria-controls={isMenuOpen ? listboxId : undefined}
-          aria-activedescendant={activeDescendantId}
-          aria-label={ariaLabel}
-          aria-labelledby={ariaLabelledBy}
-        >
-          <Text
-            variant="text-body-medium"
-            as="span"
-            color={selectedOption ? 'primary' : 'secondary'}
-          >
-            {selectedLabel}
-          </Text>
-          {ChevronIcon && (
-            <span className={styles.chevron}>
-              <ChevronIcon size={16} />
-            </span>
-          )}
-        </Surface>
-        <Menu
-          isOpen={isMenuOpen}
-          onClose={() => setIsMenuOpen(false)}
-          anchorRef={buttonRef as React.RefObject<HTMLElement | null>}
-          items={menuItems}
-          side="bottom"
-          align="start"
-          sideOffset={4}
-          alignOffset={-4}
-          matchAnchorWidth
-          matchAnchorWidthOffset={8}
-          role="listbox"
-          id={listboxId}
-          activeIndex={activeIndex}
-          getOptionId={getOptionId}
-        />
-      </div>
-    );
-  }
-);
-
-Select.displayName = 'Select';

package/src/components/Select/index.ts

@@ -1,2 +0,0 @@
-export { Select } from './Select';
-export type { SelectProps, SelectOption } from './Select';

package/src/components/Sidebar/Sidebar.module.css

@@ -1,168 +0,0 @@
-/* Sidebar */
-.sidebar {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  background-color: var(--color-background-secondary);
-  border-right: var(--dimension-stroke-width-015) solid var(--color-border-primary);
-  position: relative;
-  flex-shrink: 0;
-  overflow: hidden;
-  transition: width var(--effect-motion-short-2);
-}
-
-.sidebar.resizing { transition: none; }
-
-.sidebar.collapsed { width: 0 !important; border-right: none; }
-
-.sidebar.mobile {
-  position: fixed;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  z-index: 9997;
-}
-
-.sidebar.mini .itemLabel { display: none; }
-.sidebar.mini .itemBadge { display: none; }
-.sidebar.mini .sectionHeader { display: none; }
-
-.backdrop {
-  position: fixed;
-  inset: 0;
-  background-color: var(--color-background-shade);
-  z-index: 9996;
-}
-
-.content {
-  flex: 1;
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding: var(--dimension-space-050);
-  scrollbar-width: none;
-}
-
-.content::-webkit-scrollbar { display: none; }
-
-.footer {
-  flex-shrink: 0;
-  padding: var(--dimension-space-050);
-  border-top: var(--dimension-stroke-width-015) solid var(--color-border-primary);
-}
-
-/* Resize Handle */
-.resizeHandle {
-  position: absolute;
-  top: 0;
-  right: -3px;
-  bottom: 0;
-  width: 6px;
-  cursor: col-resize;
-  z-index: 10;
-}
-
-.resizeHandle:hover {
-  background-color: var(--color-border-brand);
-  opacity: 0.5;
-}
-
-.resizeHandle:focus-visible {
-  outline: var(--dimension-stroke-width-025) solid var(--color-border-brand);
-  outline-offset: var(--dimension-stroke-width-015);
-  background-color: var(--color-border-brand);
-  opacity: 0.5;
-}
-
-/* Sections */
-.section {
-  display: flex;
-  flex-direction: column;
-}
-
-.section + .section {
-  margin-top: var(--dimension-space-050);
-  padding-top: var(--dimension-space-050);
-  border-top: var(--dimension-stroke-width-015) solid var(--color-border-primary);
-}
-
-.sectionHeader {
-  padding: var(--dimension-space-050) var(--dimension-space-075);
-  -webkit-user-select: none;
-  user-select: none;
-}
-
-.sectionHeaderClickable { cursor: pointer; }
-
-.sectionItems {
-  display: flex;
-  flex-direction: column;
-  gap: var(--dimension-space-025);
-}
-
-/* Items */
-.itemWrapper {
-  display: flex;
-  flex-direction: column;
-}
-
-.item {
-  display: flex;
-  align-items: center;
-  gap: var(--dimension-space-075);
-  padding: var(--dimension-space-075);
-  background-color: transparent;
-  border: none;
-  border-radius: var(--dimension-radius-075);
-  cursor: pointer;
-  width: 100%;
-  text-align: left;
-  position: relative;
-  min-height: var(--dimension-size-400);
-  transition: background-color var(--effect-motion-short-2);
-}
-
-.item::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background-color: transparent;
-  border-radius: var(--dimension-radius-075);
-  transition: var(--effect-transition-interaction-background-short-2);
-  pointer-events: none;
-}
-
-.item:hover::before { background-color: var(--color-interaction-hover); }
-.item:active::before { background-color: var(--color-interaction-pressed); }
-
-.itemSelected { background-color: var(--color-background-faint-brand); }
-.itemSelected::before { display: none; }
-
-.itemDisabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
-
-.itemIcon {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  color: var(--color-foreground-secondary);
-}
-
-.itemSelected .itemIcon { color: var(--color-foreground-primary); }
-
-.itemLabel {
-  flex: 1;
-  min-width: 0;
-}
-
-.itemBadge {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-}
-
-/* Sub-items */
-.subItems {
-  display: flex;
-  flex-direction: column;
-  padding-left: var(--dimension-space-300);
-  gap: var(--dimension-space-025);
-}

package/src/components/Sidebar/Sidebar.stories.tsx

@@ -1,125 +0,0 @@
-import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Sidebar } from './Sidebar';
-import { SidebarSection } from './SidebarSection';
-import { SidebarItem } from './SidebarItem';
-
-const meta: Meta<typeof Sidebar> = {
-  title: 'Layout/Sidebar',
-  component: Sidebar,
-};
-
-export default meta;
-type Story = StoryObj<typeof Sidebar>;
-
-export const Default: Story = {
-  render: () => {
-    const [selected, setSelected] = useState('dashboard');
-    return (
-      <div style={{ height: 500, display: 'flex' }}>
-        <Sidebar>
-          <SidebarSection label="Main">
-            <SidebarItem label="Dashboard" isSelected={selected === 'dashboard'} onClick={() => setSelected('dashboard')} />
-            <SidebarItem label="Projects" isSelected={selected === 'projects'} onClick={() => setSelected('projects')} />
-            <SidebarItem label="Tasks" isSelected={selected === 'tasks'} onClick={() => setSelected('tasks')} />
-          </SidebarSection>
-          <SidebarSection label="Settings">
-            <SidebarItem label="Account" isSelected={selected === 'account'} onClick={() => setSelected('account')} />
-            <SidebarItem label="Preferences" isSelected={selected === 'preferences'} onClick={() => setSelected('preferences')} />
-          </SidebarSection>
-        </Sidebar>
-        <div style={{ flex: 1, padding: 24, background: 'var(--color-background-secondary)' }}>
-          Content: {selected}
-        </div>
-      </div>
-    );
-  },
-};
-
-export const Collapsible: Story = {
-  render: () => {
-    const [collapsed, setCollapsed] = useState(false);
-    const [selected, setSelected] = useState('dashboard');
-    return (
-      <div style={{ height: 500, display: 'flex' }}>
-        <Sidebar isCollapsed={collapsed} onToggle={() => setCollapsed(c => !c)}>
-          <SidebarSection label="Navigation">
-            <SidebarItem label="Dashboard" isSelected={selected === 'dashboard'} onClick={() => setSelected('dashboard')} />
-            <SidebarItem label="Analytics" isSelected={selected === 'analytics'} onClick={() => setSelected('analytics')} />
-            <SidebarItem label="Reports" isSelected={selected === 'reports'} onClick={() => setSelected('reports')} />
-          </SidebarSection>
-        </Sidebar>
-        <div style={{ flex: 1, padding: 24, background: 'var(--color-background-secondary)' }}>
-          Content area
-        </div>
-      </div>
-    );
-  },
-};
-
-export const WithSubitems: Story = {
-  render: () => {
-    const [selected, setSelected] = useState('general');
-    return (
-      <div style={{ height: 500, display: 'flex' }}>
-        <Sidebar>
-          <SidebarSection label="Settings">
-            <SidebarItem label="General" isSelected={selected === 'general'} onClick={() => setSelected('general')}>
-              <SidebarItem label="Profile" isSelected={selected === 'profile'} onClick={() => setSelected('profile')} />
-              <SidebarItem label="Notifications" isSelected={selected === 'notifications'} onClick={() => setSelected('notifications')} />
-            </SidebarItem>
-            <SidebarItem label="Security" isSelected={selected === 'security'} onClick={() => setSelected('security')}>
-              <SidebarItem label="Password" isSelected={selected === 'password'} onClick={() => setSelected('password')} />
-              <SidebarItem label="Two Factor" isSelected={selected === '2fa'} onClick={() => setSelected('2fa')} />
-            </SidebarItem>
-          </SidebarSection>
-        </Sidebar>
-        <div style={{ flex: 1, padding: 24, background: 'var(--color-background-secondary)' }}>
-          Content: {selected}
-        </div>
-      </div>
-    );
-  },
-};
-
-export const CollapsibleSections: Story = {
-  render: () => {
-    const [selected, setSelected] = useState('dashboard');
-    return (
-      <div style={{ height: 500, display: 'flex' }}>
-        <Sidebar>
-          <SidebarSection label="Main" collapsible>
-            <SidebarItem label="Dashboard" isSelected={selected === 'dashboard'} onClick={() => setSelected('dashboard')} />
-            <SidebarItem label="Projects" isSelected={selected === 'projects'} onClick={() => setSelected('projects')} />
-          </SidebarSection>
-          <SidebarSection label="Admin" collapsible defaultCollapsed>
-            <SidebarItem label="Users" isSelected={selected === 'users'} onClick={() => setSelected('users')} />
-            <SidebarItem label="Billing" isSelected={selected === 'billing'} onClick={() => setSelected('billing')} />
-          </SidebarSection>
-        </Sidebar>
-        <div style={{ flex: 1, padding: 24, background: 'var(--color-background-secondary)' }}>
-          Content: {selected}
-        </div>
-      </div>
-    );
-  },
-};
-
-export const WithFooter: Story = {
-  render: () => {
-    const [selected, setSelected] = useState('home');
-    return (
-      <div style={{ height: 500, display: 'flex' }}>
-        <Sidebar footer={<div style={{ padding: '12px 16px', fontSize: 12, color: 'var(--color-foreground-tertiary)' }}>v1.0.0</div>}>
-          <SidebarSection>
-            <SidebarItem label="Home" isSelected={selected === 'home'} onClick={() => setSelected('home')} />
-            <SidebarItem label="Explore" isSelected={selected === 'explore'} onClick={() => setSelected('explore')} />
-          </SidebarSection>
-        </Sidebar>
-        <div style={{ flex: 1, padding: 24, background: 'var(--color-background-secondary)' }}>
-          Content: {selected}
-        </div>
-      </div>
-    );
-  },
-};