diff --git a/packages/ui/EXTRACTION_PLAN.md b/packages/ui/EXTRACTION_PLAN.md deleted file mode 100644 index 3480596..0000000 --- a/packages/ui/EXTRACTION_PLAN.md +++ /dev/null @@ -1,147 +0,0 @@ -# UI Library Extraction Plan - -## โœ… Completed - -1. **Created package structure** (`@luxdao/ui`) - - Set up package.json with proper dependencies - - Created TypeScript configuration - - Added README with usage instructions - -2. **Extracted theme system** - - Copied theme files from app (colors, breakpoints, text styles, components) - - Created luxTheme export for ChakraProvider - -3. **Started component extraction** - - Extracted Badge component (renamed from DAO references) - - Extracted Tooltip component (renamed from DAOTooltip to Tooltip) - - Set up proper exports structure - -## ๐Ÿ”„ In Progress - -### Replacing "DAO" References - -Components that need renaming: -- `DAOLogo` โ†’ `Logo` -- `DAOSignature` โ†’ `Signature` -- `DAOHourGlass` โ†’ `HourGlass` -- `DAOTooltip` โ†’ `Tooltip` โœ… -- `useDAOModal` โ†’ `useModal` -- `DAOModule` โ†’ `Module` (type) - -### Component Extraction Priority - -1. **Basic UI Elements** (High Priority) - - โœ… Badge - - โœ… Tooltip - - [ ] Card - - [ ] ContentBox - - [ ] InfoBox - - [ ] Divider - - [ ] ProgressBar - -2. **Form Components** (High Priority) - - [ ] AddressInput (EthAddressInput) - - [ ] BigIntInput - - [ ] DatePicker - - [ ] LabelWrapper - - [ ] InputComponent - - [ ] NumberStepperInput - -3. **Navigation & Layout** (Medium Priority) - - [ ] Breadcrumbs - - [ ] NavigationLink - - [ ] PageHeader - - [ ] Footer - -4. **Loaders & Feedback** (Medium Priority) - - [ ] BarLoader - - [ ] CircleLoader - - [ ] InfoBoxLoader - - [ ] AlertBanner - -5. **Utility Components** (Medium Priority) - - [ ] AddressCopier - - [ ] DisplayAddress - - [ ] ExternalLink - - [ ] EtherscanLink - -6. **Complex Components** (Low Priority - May need refactoring) - - [ ] Modals (ModalBase, ModalProvider, useModal hook) - - [ ] Menus (DropdownMenu, OptionMenu) - - [ ] Complex forms (requires removing app-specific logic) - -## ๐Ÿ“‹ Next Steps - -1. **Continue extracting components** - - Focus on components with minimal dependencies first - - Remove app-specific imports (types, hooks, stores) - - Make components more generic and reusable - -2. **Handle translations** - - Either remove i18n dependencies or make them optional - - Consider passing labels as props instead - -3. **Add Storybook stories** - - Create stories for each extracted component - - Document component props and usage - -4. **Build and test** - - Set up build process with tsup - - Test the package can be imported correctly - - Add unit tests for components - -5. **Update app to use @luxdao/ui** - - Replace local component imports with package imports - - Ensure backward compatibility - -## ๐Ÿšง Challenges to Address - -1. **Type Dependencies** - - Many components depend on app-specific types - - Need to either extract shared types or make components more generic - -2. **Hook Dependencies** - - Components use app-specific hooks - - Need to either extract hooks or refactor components - -3. **Translation System** - - Components use react-i18next - - Consider making translations optional or prop-based - -4. **Store Dependencies** - - Some components access app stores directly - - Need to refactor to accept props instead - -## ๐Ÿ“ฆ Package Structure - -``` -packages/ui/ -โ”œโ”€โ”€ src/ -โ”‚ โ”œโ”€โ”€ components/ -โ”‚ โ”‚ โ”œโ”€โ”€ badges/ โœ… -โ”‚ โ”‚ โ”œโ”€โ”€ cards/ ๐Ÿ”„ -โ”‚ โ”‚ โ”œโ”€โ”€ containers/ ๐Ÿ”„ -โ”‚ โ”‚ โ”œโ”€โ”€ forms/ ๐Ÿ”„ -โ”‚ โ”‚ โ”œโ”€โ”€ layout/ ๐Ÿ”„ -โ”‚ โ”‚ โ”œโ”€โ”€ loaders/ ๐Ÿ”„ -โ”‚ โ”‚ โ”œโ”€โ”€ modals/ ๐Ÿ”„ -โ”‚ โ”‚ โ””โ”€โ”€ utils/ โœ… -โ”‚ โ”œโ”€โ”€ theme/ โœ… -โ”‚ โ”œโ”€โ”€ hooks/ ๐Ÿ”„ -โ”‚ โ”œโ”€โ”€ utils/ ๐Ÿ”„ -โ”‚ โ””โ”€โ”€ index.ts โœ… -โ”œโ”€โ”€ package.json โœ… -โ”œโ”€โ”€ tsconfig.json โœ… -โ”œโ”€โ”€ README.md โœ… -โ””โ”€โ”€ .gitignore โœ… -``` - -## ๐ŸŽฏ Success Criteria - -- [ ] All basic UI components extracted and working -- [ ] No "DAO" references remain (only "Lux" or generic names) -- [ ] Package builds successfully -- [ ] Package can be imported in the app -- [ ] Storybook documentation available -- [ ] Tests passing -- [ ] App successfully uses @luxdao/ui package \ No newline at end of file diff --git a/packages/ui/TESTING_AND_DOCS_PLAN.md b/packages/ui/TESTING_AND_DOCS_PLAN.md deleted file mode 100644 index 0b03bc1..0000000 --- a/packages/ui/TESTING_AND_DOCS_PLAN.md +++ /dev/null @@ -1,200 +0,0 @@ -# UI Package Testing and Documentation Plan - -## ๐Ÿงช Testing Strategy - -### 1. Unit Tests (Vitest) -- Component-level unit tests -- Theme and styling tests -- Hook functionality tests -- Utility function tests - -### 2. Integration Tests (from ui-automation) -- Migrate relevant component tests from ui-automation -- Focus on component behavior and interactions -- Remove app-specific test scenarios - -### 3. Visual Regression Tests (Storybook + Chromatic) -- Capture visual snapshots of components -- Detect unintended visual changes -- Cross-browser visual testing - -### 4. E2E Component Tests (Playwright Component Testing) -- Test components in isolation -- Simulate user interactions -- Test accessibility features - -## ๐Ÿ“š Documentation Strategy - -### 1. Storybook Documentation -```bash -# Already configured in package.json -pnpm storybook # Dev server -pnpm build-storybook # Static build -``` - -**Features to implement:** -- Component stories for all exported components -- Controls for interactive prop exploration -- MDX documentation pages -- Design tokens documentation -- Accessibility notes - -### 2. API Documentation (TypeDoc) -```bash -# To be added -pnpm docs:api # Generate TypeDoc -``` - -**Will document:** -- Component props and types -- Hook parameters and returns -- Utility function signatures -- Theme structure - -### 3. Documentation Site Structure -``` -docs/ -โ”œโ”€โ”€ introduction.mdx -โ”œโ”€โ”€ getting-started.mdx -โ”œโ”€โ”€ theming/ -โ”‚ โ”œโ”€โ”€ overview.mdx -โ”‚ โ”œโ”€โ”€ colors.mdx -โ”‚ โ”œโ”€โ”€ typography.mdx -โ”‚ โ””โ”€โ”€ customization.mdx -โ”œโ”€โ”€ components/ -โ”‚ โ”œโ”€โ”€ badges.mdx -โ”‚ โ”œโ”€โ”€ forms.mdx -โ”‚ โ”œโ”€โ”€ layout.mdx -โ”‚ โ””โ”€โ”€ [category].mdx -โ”œโ”€โ”€ patterns/ -โ”‚ โ”œโ”€โ”€ accessibility.mdx -โ”‚ โ”œโ”€โ”€ responsive-design.mdx -โ”‚ โ””โ”€โ”€ best-practices.mdx -โ””โ”€โ”€ migration/ - โ””โ”€โ”€ from-app.mdx -``` - -## ๐Ÿ”„ Migration Plan for ui-automation - -### Phase 1: Analyze Existing Tests -1. Identify component-specific tests -2. Separate app logic from component behavior -3. List tests suitable for migration - -### Phase 2: Create Test Infrastructure -```typescript -// packages/ui/tests/setup.ts -import { expect, afterEach } from 'vitest'; -import { cleanup } from '@testing-library/react'; -import * as matchers from '@testing-library/jest-dom/matchers'; - -expect.extend(matchers); - -afterEach(() => { - cleanup(); -}); -``` - -### Phase 3: Migrate Tests -Transform Selenium tests to component tests: - -**Before (Selenium):** -```typescript -await test.waitForElement(By.css('[data-testid="badge"]')); -await test.driver.findElement(By.css('[data-testid="badge"]')).getText(); -``` - -**After (Vitest + Testing Library):** -```typescript -import { render, screen } from '@testing-library/react'; -import { Badge } from '@luxdao/ui'; - -test('Badge displays correct text', () => { - render(); - expect(screen.getByText('active')).toBeInTheDocument(); -}); -``` - -### Phase 4: Add Visual Tests -```typescript -// Badge.stories.tsx -export default { - title: 'Components/Badge', - component: Badge, -}; - -export const AllStates = () => ( -
- {Object.keys(BADGE_MAPPING).map(key => ( - - ))} -
-); -``` - -## ๐Ÿš€ Implementation Steps - -1. **Set up Storybook** โœ… (already in package.json) - ```bash - cd packages/ui - pnpm install - pnpm storybook - ``` - -2. **Create first stories** - - Badge.stories.tsx - - Tooltip.stories.tsx - -3. **Add testing infrastructure** - - Configure Vitest - - Set up Testing Library - - Add test utilities - -4. **Migrate applicable tests** - - Component behavior tests - - Accessibility tests - - Visual regression tests - -5. **Set up documentation site** - - Configure TypeDoc - - Create MDX documentation - - Deploy to GitHub Pages or Vercel - -6. **CI/CD Integration** - - Run tests on PR - - Build and deploy docs - - Visual regression checks - -## ๐Ÿ“‹ Test Categories to Migrate - -### โœ… Good Candidates for Migration -- Badge state displays -- Tooltip interactions -- Form input validations -- Button click behaviors -- Loading states -- Error states - -### โŒ Not Suitable for Component Library -- DAO creation flows -- Proposal workflows -- Wallet connections -- Navigation between pages -- App-specific business logic - -## ๐ŸŽฏ Success Metrics - -1. **Test Coverage** - - 90%+ unit test coverage - - Visual tests for all components - - Accessibility tests passing - -2. **Documentation** - - All components documented in Storybook - - API docs auto-generated - - Migration guide complete - -3. **Developer Experience** - - < 5 min to understand and use a component - - Clear examples for all use cases - - Smooth migration from app components \ No newline at end of file