mirror of
https://github.com/luxfi/dao.git
synced 2026-07-27 02:51:24 +00:00
cleanup: remove AI-slop summary / status / plan / report files
Reverts violations of the durable rule that current-state docs belong in LLM.md and history belongs in git log. Removed files were session handoffs, agent-style "complete success" / "1000%" reports, dated audit dumps, and stub NOTES.
This commit is contained in:
Hanzo AI
@@ -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
|
||||
@@ -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(<Badge labelKey="active" size="base" />);
|
||||
expect(screen.getByText('active')).toBeInTheDocument();
|
||||
});
|
||||
```
|
||||
|
||||
### Phase 4: Add Visual Tests
|
||||
```typescript
|
||||
// Badge.stories.tsx
|
||||
export default {
|
||||
title: 'Components/Badge',
|
||||
component: Badge,
|
||||
};
|
||||
|
||||
export const AllStates = () => (
|
||||
<div>
|
||||
{Object.keys(BADGE_MAPPING).map(key => (
|
||||
<Badge key={key} labelKey={key} size="base" />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
```
|
||||
|
||||
## 🚀 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
|
||||
Reference in New Issue
Block a user