eidotter 0.16.1 → 0.16.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +241 -250
  2. package/dist/eidotter.css +1 -1
  3. package/dist/index.d.ts +1 -1
  4. package/dist/index.es.js +134 -134
  5. package/dist/index.umd.js +2 -2
  6. package/guidelines/README.md +118 -106
  7. package/package.json +1 -1
package/README.md CHANGED
@@ -1,250 +1,241 @@
1
- # eiDotter - DOS Terminal Design System
2
-
3
- A DOS-themed React component library with authentic CGA terminal aesthetics.
4
-
5
- ## Installation
6
-
7
- ```bash
8
- npm install eidotter
9
- # or
10
- yarn add eidotter
11
- # or
12
- pnpm add eidotter
13
- ```
14
-
15
- ## Quick Start
16
-
17
- ```jsx
18
- import { Terminal, Button, Alert } from 'eidotter';
19
- import 'eidotter/dist/style.css';
20
-
21
- function App() {
22
- return (
23
- <Terminal title="MY-APP.EXE">
24
- <Alert type="info" title="Welcome">
25
- DOS interface loaded successfully.
26
- </Alert>
27
- <Button variant="primary">Execute</Button>
28
- </Terminal>
29
- );
30
- }
31
- ```
32
-
33
- ## Available Components (v0.15.0)
34
-
35
- | Component | Description |
36
- |-----------|-------------|
37
- | Accordion | Collapsible content sections |
38
- | Alert | System notifications (info, success, warning, error) |
39
- | Badge | Status indicators with variant support |
40
- | Breadcrumb | Navigation path display |
41
- | Button | DOS-style buttons with variants (primary, secondary, ghost, link) |
42
- | Card | Content container with default, elevated, bordered, glow, interactive, minimal, callout variants |
43
- | ChatMessage | Single chat message with role-based DOS styling and streaming cursor |
44
- | ChatHistory | Scrollable message list with auto-scroll and `role="log"` |
45
- | ChatInput | Multiline textarea with Enter-to-send, Shift+Enter for newlines |
46
- | ChatContainer | Composes ChatHistory + ChatInput — place inside Terminal for DOS chat |
47
- | Checkbox | DOS-style checkbox with [X] indicator |
48
- | CommandPrompt | Interactive command-line input with blinking cursor |
49
- | FilterBar | Multi-select toggle group for faceted filtering |
50
- | Footer | Site footer with default legal links (Impressum + Datenschutz) |
51
- | Icon | SVG icon system with DOS styling |
52
- | InlineExpand | Inline disclosure widget for expanding text within prose |
53
- | Input | Text input with DOS styling and error variant |
54
- | Modal | Dialog overlay with title bar and close button |
55
- | Nav | Responsive navigation with desktop/mobile variants |
56
- | Progress | DOS-style progress bar with block characters |
57
- | RetroEffects | CRT effects (scanlines, noise, phosphor glow) |
58
- | Separator | Horizontal/vertical divider for content separation |
59
- | Stat | Key-value display for metrics and statistics |
60
- | Switch | Toggle switch for on/off states |
61
- | Tabs | Tabbed interface navigation |
62
- | Tag | Interactive labels for tags, categories, and filter chips |
63
- | Terminal | DOS window with title bar and content area (controls hidden by default) |
64
- | TextScramble | DOS text decode/scramble animation effect |
65
- | TimelineContainer | Multi-zoom timeline with year/month/day/hour views + `mode="static"` |
66
- | TimelineEntry | Individual timeline entry with icon, date, and expandable content |
67
- | TimelineList | *(Deprecated)* Use `<TimelineContainer mode="static">` instead |
68
- | TimelineNode | Timeline/stepper axis markers with shapes and glow |
69
-
70
- ## Component Examples
71
-
72
- ### Terminal
73
-
74
- ```jsx
75
- <Terminal
76
- title="PROGRAM.EXE"
77
- size="medium"
78
- closeable
79
- onClose={() => console.log('closed')}
80
- >
81
- <p>Terminal content here</p>
82
- </Terminal>
83
- ```
84
-
85
- ### Button
86
-
87
- ```jsx
88
- <Button variant="primary" size="medium">
89
- Click Me
90
- </Button>
91
-
92
- <Button variant="ghost" loading>
93
- Processing...
94
- </Button>
95
- ```
96
-
97
- ### Alert
98
-
99
- ```jsx
100
- <Alert
101
- type="warning"
102
- title="Low Disk Space"
103
- onClose={() => {}}
104
- >
105
- Drive C: has only 640KB remaining.
106
- </Alert>
107
- ```
108
-
109
- ### Input
110
-
111
- ```jsx
112
- <Input
113
- placeholder="Enter filename..."
114
- variant="default"
115
- />
116
-
117
- <Input
118
- variant="error"
119
- placeholder="Invalid path"
120
- />
121
- ```
122
-
123
- ### CommandPrompt
124
-
125
- ```jsx
126
- <CommandPrompt
127
- prompt="C:\>"
128
- onCommand={(cmd) => console.log('Executing:', cmd)}
129
- autoFocus
130
- />
131
- ```
132
-
133
- ### Accordion
134
-
135
- ```jsx
136
- <AccordionFill
137
- sections={[
138
- { title: 'Section 1', content: 'Content 1' },
139
- { title: 'Section 2', content: 'Content 2' },
140
- ]}
141
- defaultExpandedIndex={0}
142
- />
143
- ```
144
-
145
- ## Design Tokens
146
-
147
- The library uses authentic CGA colors:
148
-
149
- ```css
150
- --color-cga-black: #000000;
151
- --color-cga-blue: #0000AA;
152
- --color-cga-cyan: #00AAAA;
153
- --color-cga-yellow: #FFFF55;
154
- --color-cga-white: #FFFFFF;
155
- --color-cga-amber: #FFBF00;
156
- /* ... full 16-color CGA palette + amber */
157
- ```
158
-
159
- ### Theming
160
-
161
- Apply the DOS amber theme (amber-on-black terminal aesthetic):
162
-
163
- ```html
164
- <div data-theme="amber-mono">
165
- <!-- Components will use amber colors -->
166
- </div>
167
- ```
168
-
169
- Or via CSS class:
170
-
171
- ```html
172
- <div class="theme-amber-mono">...</div>
173
- ```
174
-
175
- ## Tailwind CSS Integration
176
-
177
- Use Eidotter tokens in Tailwind projects without importing React components.
178
-
179
- ### Setup
180
-
181
- ```javascript
182
- // tailwind.config.js
183
- module.exports = {
184
- presets: [require('eidotter/tailwind.preset')],
185
- content: ['./src/**/*.{js,jsx,ts,tsx}'],
186
- };
187
- ```
188
-
189
- ### Usage
190
-
191
- ```jsx
192
- // CGA palette colors
193
- <div className="bg-cga-black text-cga-yellow">
194
- DOS terminal content
195
- </div>
196
-
197
- // Semantic colors
198
- <div className="bg-dos-bg-primary text-dos-text-accent">
199
- Using semantic tokens
200
- </div>
201
-
202
- // Typography
203
- <p className="font-dos text-dos-base leading-dos-tight">
204
- Perfect DOS VGA 437 font
205
- </p>
206
- ```
207
-
208
- ### Available Token Classes
209
-
210
- **CGA Colors:** `cga-black`, `cga-blue`, `cga-green`, `cga-cyan`, `cga-red`, `cga-magenta`, `cga-brown`, `cga-light-gray`, `cga-dark-gray`, `cga-bright-blue`, `cga-bright-green`, `cga-bright-cyan`, `cga-bright-red`, `cga-bright-magenta`, `cga-yellow`, `cga-white`, `cga-amber`, `cga-amber-bright`, `cga-amber-dim`
211
-
212
- **Semantic Colors:** `dos-bg-primary`, `dos-bg-secondary`, `dos-text-primary`, `dos-text-accent`, `dos-border-default`, `dos-border-focus`, `dos-success`, `dos-warning`, `dos-error`, `dos-info`
213
-
214
- **Typography:** `font-dos`, `text-dos-xs` through `text-dos-4xl`, `leading-dos-tight/normal/loose`
215
-
216
- ## Development
217
-
218
- ```bash
219
- # Install dependencies
220
- npm install
221
-
222
- # Run Storybook
223
- npm run storybook
224
-
225
- # Build library
226
- npm run build
227
-
228
- # Run tests
229
- npm run test
230
- ```
231
-
232
- ## Planned Components
233
-
234
- See [ROADMAP.md](./ROADMAP.md) for future components.
235
-
236
- ## Design Philosophy
237
-
238
- The DOS aesthetic isn't nostalgia for nostalgia's sake. It represents values we've lost in modern software:
239
-
240
- - **Control** - Every command is explicit and intentional
241
- - **Clarity** - Information presented without distraction
242
- - **Personal Sovereignty** - Your tools, your way
243
-
244
- Eidotter brings these values to modern interfaces while maintaining accessibility (WCAG AA compliant) and usability standards. The authentic 16-color CGA palette plus amber phosphor variants creates that terminal feel without sacrificing readability.
245
-
246
- Part of the **Timeline OS** ecosystem - a vision for personal data management along temporal, thematic, and social axes.
247
-
248
- ## License
249
-
250
- CC-BY-NC-4.0 (Creative Commons Attribution-NonCommercial 4.0 International)
1
+ # eiDotter - DOS Terminal Design System
2
+
3
+ A DOS-themed React component library with authentic CGA terminal aesthetics.
4
+
5
+ ## Installation
6
+
7
+ ```bash
8
+ npm install eidotter
9
+ ```
10
+
11
+ ## Quick Start
12
+
13
+ ```tsx
14
+ import { Terminal, Button, Alert } from 'eidotter';
15
+ import 'eidotter/styles'; // Component CSS (includes Tailwind utilities)
16
+ import 'eidotter/tokens.css'; // Design token CSS variables (required)
17
+
18
+ function App() {
19
+ return (
20
+ <Terminal title="MY-APP.EXE">
21
+ <Alert type="info" title="Welcome">
22
+ DOS interface loaded successfully.
23
+ </Alert>
24
+ <Button variant="primary">Execute</Button>
25
+ </Terminal>
26
+ );
27
+ }
28
+ ```
29
+
30
+ ## Setup
31
+
32
+ ### Basic (no Tailwind needed)
33
+
34
+ Import the styles and tokens. All component styling is pre-compiled — no build tools required.
35
+
36
+ ```tsx
37
+ import 'eidotter/styles'; // Component CSS
38
+ import 'eidotter/tokens.css'; // CSS variable definitions
39
+
40
+ // Optional: import a theme
41
+ import 'eidotter/themes/amber-mono.css';
42
+ ```
43
+
44
+ ### With Tailwind CSS
45
+
46
+ Use eidotter's design tokens as Tailwind utility classes in your own code.
47
+
48
+ ```bash
49
+ npm install tailwindcss
50
+ ```
51
+
52
+ ```js
53
+ // tailwind.config.js
54
+ module.exports = {
55
+ presets: [require('eidotter/tailwind.preset')],
56
+ content: ['./src/**/*.{js,jsx,ts,tsx}'],
57
+ };
58
+ ```
59
+
60
+ ```tsx
61
+ // Now use eidotter tokens as Tailwind classes
62
+ <div className="bg-dos-bg-primary text-dos-text-accent font-dos">
63
+ DOS terminal content
64
+ </div>
65
+ ```
66
+
67
+ For React Aria state variants and animations, use the enhanced preset:
68
+
69
+ ```js
70
+ presets: [require('eidotter/tailwind.preset.enhanced')],
71
+ ```
72
+
73
+ ## Available Components (v0.16.1)
74
+
75
+ | Component | Description |
76
+ |-----------|-------------|
77
+ | Accordion | Collapsible content sections (Section, AccordionFill) |
78
+ | Alert | Dismissible notifications (info, success, warning, error) |
79
+ | Badge | Status indicators with variant support |
80
+ | Breadcrumb | Navigation path display |
81
+ | Button | DOS-style buttons (primary, secondary, ghost, link) |
82
+ | Card | Content container with variants (elevated, bordered, glow, interactive, minimal, callout) |
83
+ | ChatMessage | Chat message with role-based DOS styling and streaming cursor |
84
+ | ChatHistory | Scrollable message list with auto-scroll and `role="log"` |
85
+ | ChatInput | Multiline textarea with Enter-to-send |
86
+ | ChatContainer | Composes ChatHistory + ChatInput — place inside Terminal for DOS chat |
87
+ | Checkbox | DOS-style checkbox with `[X]` bracket indicator |
88
+ | CommandPrompt | Interactive command-line input with blinking cursor |
89
+ | FilterBar | Multi-select toggle group for faceted filtering |
90
+ | Footer | Site footer with legal links (Impressum + Datenschutz) |
91
+ | Icon | SVG icon system with DOS styling |
92
+ | InlineExpand | Inline disclosure widget for expanding text within prose |
93
+ | Input | Text input with DOS styling and error variant |
94
+ | Modal | Dialog overlay with title bar and close button |
95
+ | Nav | Responsive navigation with desktop/mobile variants |
96
+ | Progress | DOS-style progress bar with block characters |
97
+ | RetroEffects | CRT effects (scanlines, noise, phosphor glow) |
98
+ | Separator | Horizontal/vertical divider |
99
+ | Stat | Key-value display for metrics and statistics |
100
+ | Switch | Toggle switch for on/off states |
101
+ | Tabs | Tabbed interface navigation |
102
+ | Tag | Interactive labels for tags, categories, and filter chips |
103
+ | Terminal | DOS window with title bar and content area |
104
+ | TextScramble | DOS text decode/scramble animation effect |
105
+ | TimelineContainer | Multi-zoom timeline with year/month/day/hour views |
106
+ | TimelineNode | Timeline/stepper axis markers with shapes and glow |
107
+ | Tokens | Design token reference display (Storybook only) |
108
+
109
+ ## Component Examples
110
+
111
+ ### Terminal
112
+
113
+ ```tsx
114
+ <Terminal
115
+ title="PROGRAM.EXE"
116
+ size="medium"
117
+ closeable
118
+ onClose={() => console.log('closed')}
119
+ >
120
+ <p>Terminal content here</p>
121
+ </Terminal>
122
+ ```
123
+
124
+ ### Button
125
+
126
+ ```tsx
127
+ <Button variant="primary" size="md">
128
+ Click Me
129
+ </Button>
130
+
131
+ <Button variant="ghost" loading>
132
+ Processing...
133
+ </Button>
134
+ ```
135
+
136
+ ### Alert
137
+
138
+ ```tsx
139
+ <Alert
140
+ type="warning"
141
+ title="Low Disk Space"
142
+ onClose={() => {}}
143
+ >
144
+ Drive C: has only 640KB remaining.
145
+ </Alert>
146
+ ```
147
+
148
+ ### Input
149
+
150
+ ```tsx
151
+ <Input
152
+ label="Filename"
153
+ placeholder="Enter filename..."
154
+ />
155
+
156
+ <Input
157
+ variant="error"
158
+ errorMessage="File not found"
159
+ placeholder="Invalid path"
160
+ />
161
+ ```
162
+
163
+ ### Checkbox
164
+
165
+ ```tsx
166
+ <Checkbox label="Remember me" />
167
+ <Checkbox label="Accept terms" checked />
168
+ <Checkbox label="Select all" indeterminate />
169
+ ```
170
+
171
+ ### CommandPrompt
172
+
173
+ ```tsx
174
+ <CommandPrompt
175
+ prompt="C:\>"
176
+ onCommand={(cmd) => console.log('Executing:', cmd)}
177
+ autoFocus
178
+ />
179
+ ```
180
+
181
+ ## Design Tokens
182
+
183
+ The library uses authentic CGA colors via CSS custom properties:
184
+
185
+ ```css
186
+ --color-cga-amber: #FFB000; /* Primary accent */
187
+ --color-cga-amber-bright: #FDCA9F;
188
+ --color-cga-amber-dim: #9A5700;
189
+ --color-cga-black: #020003; /* Background */
190
+ /* ... full 16-color CGA palette */
191
+ ```
192
+
193
+ ### Theming
194
+
195
+ Apply themes via `data-theme` attribute:
196
+
197
+ ```html
198
+ <div data-theme="amber-mono">
199
+ <!-- Amber-on-black terminal aesthetic -->
200
+ </div>
201
+ ```
202
+
203
+ Available themes: `amber-mono`, `cga-amber`, `cga-mode4-p0`, `cga-mode4-p1`, `cga-mode5`.
204
+
205
+ ### Tailwind Token Classes
206
+
207
+ **CGA Colors:** `cga-black`, `cga-blue`, `cga-green`, `cga-cyan`, `cga-red`, `cga-magenta`, `cga-brown`, `cga-light-gray`, `cga-dark-gray`, `cga-bright-blue`, `cga-bright-green`, `cga-bright-cyan`, `cga-bright-red`, `cga-bright-magenta`, `cga-yellow`, `cga-white`, `cga-amber`, `cga-amber-bright`, `cga-amber-dim`
208
+
209
+ **Semantic Colors:** `dos-bg-primary`, `dos-bg-secondary`, `dos-text-primary`, `dos-text-accent`, `dos-border-default`, `dos-border-focus`, `dos-success`, `dos-warning`, `dos-error`, `dos-info`
210
+
211
+ **Typography:** `font-dos`, `text-dos-xs` through `text-dos-4xl`, `leading-dos-tight/normal/loose`
212
+
213
+ **Spacing:** `dos-0` through `dos-16` (4px grid)
214
+
215
+ **Border Radius:** `rounded-dos-none` (0), `rounded-dos-sm` (2px), `rounded-dos-base` (4px max)
216
+
217
+ ## Development
218
+
219
+ ```bash
220
+ npm install # Install dependencies
221
+ npm run storybook # Launch Storybook on port 6006
222
+ npm run build # Production build
223
+ npm run test # Run test suite
224
+ npm run lint # ESLint
225
+ ```
226
+
227
+ ## Design Philosophy
228
+
229
+ The DOS aesthetic represents values we've lost in modern software:
230
+
231
+ - **Control** - Every command is explicit and intentional
232
+ - **Clarity** - Information presented without distraction
233
+ - **Personal Sovereignty** - Your tools, your way
234
+
235
+ eiDotter brings these values to modern interfaces while maintaining accessibility (WCAG AA) and usability standards. The authentic 16-color CGA palette plus amber phosphor variants creates that terminal feel without sacrificing readability.
236
+
237
+ Part of the **Timeline OS** ecosystem - a vision for personal data management along temporal, thematic, and social axes.
238
+
239
+ ## License
240
+
241
+ CC-BY-NC-4.0 (Creative Commons Attribution-NonCommercial 4.0 International)