Skip to content

Commit ee7bc93

Browse files
skinreadskinread
authored
Roadmap (#1295)
* fix: import * chore: draft roadmap * chore: quick reference * chore: roadmap doc * chore: roadmap * chore: roadmap * chore: roadmap
1 parent d2f79d6 commit ee7bc93

File tree

6 files changed

+216
-421
lines changed

6 files changed

+216
-421
lines changed

‎.prettierignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
/*
22
!/config/
3+
!/docs/
34
!/lib/
45
!/scripts/
56
!/stories/

‎docs/QUICK_REFERENCE.md‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
# Overdrive Component Library - Quick Reference
2+
3+
## At a Glance
4+
5+
| Category | Details |
6+
| -------------------- | ------------------------- |
7+
| **Version** | 4.50.0 |
8+
| **Total Components** | 73 UI components |
9+
| **React Version** | 19.1.1 (supports 18+) |
10+
| **TypeScript** | 5.9.2 (strict mode) |
11+
| **Styling** | Vanilla Extract CSS-in-TS |
12+
| **Package** | @autoguru/overdrive (npm) |
13+
| **Docs** | overdrive.autoguru.io |
14+
15+
## Component Count by Category
16+
17+
- **Primitives**: 10 (Box, Text, Flex, Stack, etc.)
18+
- **Forms & Inputs**: 14 (TextInput, DatePicker, Calendar, etc.)
19+
- **Navigation**: 9 (Tabs, Pagination, Stepper, etc.)
20+
- **Content Display**: 15 (Heading, Badge, Image, etc.)
21+
- **Modals & Overlays**: 6 (Modal, Popover, Tooltip, etc.)
22+
- **Interactive**: 9 (Button, Toaster, Actions, etc.)
23+
24+
## Key Technologies
25+
26+
### Core Stack
27+
28+
- React 19.1.1 + React DOM
29+
- TypeScript 5.9.2
30+
- Vanilla Extract (CSS-in-TS)
31+
32+
### Tooling
33+
34+
- **Build**: Babel 7.28.3 + Vite 7.1.7
35+
- **Lint**: ESLint 9.38.0 (flat config)
36+
- **Format**: Prettier 3.6.2
37+
- **Tests**: Vitest 3.2.4
38+
- **Dev Docs**: Storybook 9.1.10
39+
- **CI/CD**: GitHub Actions
40+
41+
### State & Positioning
42+
43+
- PopperJS 2.11.8 (positioning)
44+
- React Focus Lock 2.13.6 (focus trapping)
45+
- React Intersection Observer 9.16.0
46+
- React Swipeable 7.0.2
47+
48+
## Quick Commands
49+
50+
```bash
51+
# Development
52+
yarn storybook # Start dev server (port 6006)
53+
yarn build # Build for distribution
54+
55+
# Code Quality
56+
yarn lint # ESLint + TypeScript
57+
yarn format # Prettier format
58+
yarn lint:eslint # ESLint only
59+
60+
# Testing
61+
yarn test # Watch mode
62+
yarn test:ci # CI with coverage
63+
yarn test:a11y # Storybook tests
64+
yarn test ComponentName # Specific component
65+
66+
# Analysis
67+
yarn analyse # Bundle analysis
68+
yarn chromatic # Visual regression tests
69+
yarn check-deps # Update check
70+
71+
# Component Generation
72+
yarn plop component # New component scaffold
73+
yarn typeEmit # Generate type declarations
74+
```
75+
76+
## Design System
77+
78+
### Themes (3 Available)
79+
80+
1. **baseTheme** (default) - AutoGuru primary
81+
2. **flatRedTheme** - Red variant
82+
3. **neutralTheme** - Grayscale variant
83+
84+
### Responsive Breakpoints
85+
86+
- `mobile` | `tablet` | `desktop` | `largeDesktop`
87+
88+
### Space Tokens
89+
90+
- Values `'1'` through `'9'` for spacing/sizing
91+
92+
### Color Tokens
93+
94+
- NEW: `color` (American)
95+
- LEGACY: `colour` (British)
96+
97+
## File Structure
98+
99+
```
100+
lib/
101+
├── components/ # 73 UI components
102+
├── hooks/ # 13 custom hooks
103+
├── styles/ # Vanilla Extract utilities
104+
├── themes/ # Design tokens & themes
105+
├── utils/ # 20+ utility functions
106+
├── types/ # TypeScript definitions
107+
└── stories/ # Storybook documentation
108+
```
109+
110+
## CI/CD
111+
112+
- **Linting**: Pre-commit with husky + lint-staged
113+
- **Testing**: Unit tests + Storybook browser tests
114+
- **Coverage**: Codecov integration
115+
- **Visual**: Chromatic on all PRs (TurboSnap enabled)
116+
- **Releases**: Changesets-based versioning
117+
118+
## Accessibility Focus
119+
120+
- Full keyboard support
121+
- React Aria integration
122+
- Visible focus indicators (`:focus-visible`)
123+
- Screen reader support
124+
125+
## Code Quality Standards
126+
127+
✅ **MUST DO:**
128+
129+
- Vanilla Extract CSS
130+
- Design tokens only (no hardcoded values)
131+
- Storybook stories for all components
132+
- Full keyboard/accessibility support
133+
- Strict TypeScript
134+
- Fix all ESLint errors
135+
136+
❌ **NEVER:**
137+
138+
- Inline styles or magic numbers
139+
- Hardcoded values
140+
- Unused imports/variables/parameters
141+
- Console statements
142+
- Missing displayNames
143+
144+
---
145+
146+
**Last Updated**: October 23, 2025

‎docs/ROADMAP.md‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
# Overdrive Roadmap
2+
3+
A draft roadmap for Overdrive evoloution.
4+
5+
### Ongoing
6+
7+
| Initiative | Description |
8+
| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
9+
| **Dependency Upgrades** | Manual check using `yarn check-deps` to pick up additional upgrades |
10+
| **MFE Component Promotion** | Continue identifying any MFE-based components that can be promoted into Overdrive |
11+
| **Update Agent Instructions** | Review agent instructions (CLAUDE, Copilot, etc) for updates, correctness and opportunities to consolidate |
12+
| **Accessibility Standards** | Review interactive components for WCAG and ARIA standards |
13+
| **Story Args** | Make handling of args and argTypes (especially style props) more consistent across all stories and enable removal `@ts-expect-error` |
14+
| **Expand Test Coverage** | Update tests to increase coverage (currently 83%) |
15+
16+
---
17+
18+
### Component Uplift
19+
20+
| Component | Description |
21+
| -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
22+
| **DropDown** | Fix controlled vs. uncontrolled state, and enhance with mobile modal overlay experience |
23+
| **Tooltip** | Allow support for richtext content and detect children to selectively spread correct props to child |
24+
| **Polymorphic `as`** | Create a new Box prop, or alternate version of Box to handle polymorphic `as` component. Prototype in /components/Box/polymorphicBox folder |
25+
| **Positioner** | Rebuild the Positioner component with the new CSS `anchor-position` properties. Flow on effect to Tooltip, Flyout, DropDown and AutoSuggest |
26+
| **Input Fields**. | The input fields use a material UI design pattern with the inset label on border but won't be used in new designs. The fields can modernised which will help with a11y |
27+
28+
---
29+
30+
### Future State
31+
32+
| Initiative | Description | Reference |
33+
| ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
34+
| **Vitest 4** | Latest version of Vitest has some breaking changes with Overdrive tests or possibly Storybook test harness | [Vitest 4 migration](https://vitest.dev/guide/migration.html#vitest-4) |
35+
| **Storybook MCP Server** | Install and integrate experimental Storybook MCP server for enhanced development capabilities | [Storybook MCP](https://github.com/storybookjs/mcp) |
36+
| **Dark Mode** | Implement a simple dark mode mechanism and draft inverted version of base colour tokens | [POC](https://github.com/autoguru-au/overdrive/pull/1297), [branch](https://github.com/autoguru-au/overdrive/tree/poc-dark-mode) |
37+
| **Unified Testing with Storybook 10** | Migrate to Storybook 10's support for writing Vitest tests within `.stories.tsx` files to unify test running and coverage reports between Vitest and Story play functions | [Storybook .test syntax proposal](https://chromatic-ui.notion.site/Storybook-test-syntax-in-CSF-2566e816203480cb95ddc674ddfbf5d3#2566e816203480cb95ddc674ddfbf5d3) |
38+
| **Vite+ Exploration** | Explore migration to Vite+ tooling (free for open source projects), including transitions from ESLint to Oxlint and eventually Prettier to Oxfmt for improved performance | [Vite+](https://oss.vite.plus/) |
39+
| **Semantic Color Tokens** | The new `color` set of tokens can be improved on and adopted by design (color set has been loaded in to Figma variables and design should change workflow) | |
40+
| **Bundle Size Monitoring** | Add automated bundle size tracking in CI using existing `yarn analyse` tool | |
41+
| **React 19 Compiler Optimization** | If React 19 compiler is assumed, manual memoization can start to be phased out across components (155 instances of memo/useMemo/useCallback) | |
42+
| **Sync Tokens** | Sync tokens from Figma to code. Example combination: Figma > Supernova.io account > Supernova.io GH action > Style Dictionary conversion script | [experiment branch](https://github.com/autoguru-au/overdrive/tree/supernova/style-dictionary), [Supernova.io](https://www.supernova.io/), [Style Dictionary](https://styledictionary.com/) |

‎lib/stories/roadmap.mdx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { Markdown, Meta } from '@storybook/addon-docs/blocks';
2+
3+
import roadmap from '../../docs/ROADMAP.md?raw';
4+
5+
<Meta title="Roadmap" tags={['new']} />
6+
7+
<Markdown>{roadmap}</Markdown>

‎lib/utils/responsiveStyle.ts‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
1-
import type {
2-
CSSProperties,
3-
StyleRule,
4-
} from '@vanilla-extract/css/dist/vanilla-extract-css.cjs';
1+
import type { CSSProperties, StyleRule } from '@vanilla-extract/css';
52

63
import { breakpoints } from '../themes/makeTheme';
74

0 commit comments

Comments
 (0)