@tetrascience-npm/tetrascience-react-ui 0.5.0-beta.23.1 → 0.5.0-beta.24.1

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 (4) hide show
  1. package/README.md +54 -40
  2. package/dist/index.css +1 -1
  3. package/dist/index.tailwind.css +2 -0
  4. package/package.json +8 -5
package/README.md CHANGED
@@ -2,13 +2,14 @@
2
2
 
3
3
  React component library for building TetraScience applications.
4
4
 
5
- [![npm version](https://img.shields.io/npm/v/@tetrascience-npm/tetrascience-react-ui)](https://www.npmjs.com/package/@tetrascience-npm/tetrascience-react-ui) [![CI](https://github.com/tetrascience/ts-lib-ui-kit/actions/workflows/ci.yml/badge.svg)](https://github.com/tetrascience/ts-lib-ui-kit/actions/workflows/ci.yml) 📖 **[Storybook – Live Component Demos](https://ts-lib-ui-kit-storybook.vercel.app/)** | 🛠️ **[Contributing Guide](./CONTRIBUTING.md)**
5
+ [![npm version](https://img.shields.io/npm/v/@tetrascience-npm/tetrascience-react-ui)](https://www.npmjs.com/package/@tetrascience-npm/tetrascience-react-ui) [![CI](https://github.com/tetrascience/ts-lib-ui-kit/actions/workflows/ci.yml/badge.svg)](https://github.com/tetrascience/ts-lib-ui-kit/actions/workflows/ci.yml) **[Storybook](https://ts-lib-ui-kit-storybook.vercel.app/)** | **[Contributing Guide](./CONTRIBUTING.md)**
6
6
 
7
7
  This library provides:
8
8
 
9
- - **UI Components**: Reusable React components following atomic design principles
9
+ - **UI Components**: shadcn/ui primitives (Radix UI) with Tailwind CSS
10
+ - **Composed Components**: TetraScience-specific compositions (AppHeader, Sidebar, etc.)
10
11
  - **Data Visualisation**: Interactive charts powered by Plotly.js
11
- - **Theming**: Customisable design system with ThemeProvider
12
+ - **Theming**: CSS custom properties (oklch) for light/dark mode
12
13
  - **TypeScript**: Full type support with exported prop types
13
14
 
14
15
  ## Requirements
@@ -26,59 +27,71 @@ yarn add @tetrascience-npm/tetrascience-react-ui
26
27
  ## Quick Start
27
28
 
28
29
  ```tsx
29
- // 1. Import the CSS (required)
30
+ // 1. Import the CSS once at your app root (required)
30
31
  import '@tetrascience-npm/tetrascience-react-ui/index.css';
31
32
 
32
33
  // 2. Import components
33
- import { Button, Card, BarGraph } from '@tetrascience-npm/tetrascience-react-ui';
34
+ import { Button, Card, CardHeader, CardContent } from '@tetrascience-npm/tetrascience-react-ui';
34
35
 
35
36
  function App() {
36
37
  return (
37
- <Card title="Welcome">
38
- <p>My first TetraScience app!</p>
39
- <Button variant="primary">Get Started</Button>
38
+ <Card>
39
+ <CardHeader>Welcome</CardHeader>
40
+ <CardContent>
41
+ <p>My first TetraScience app!</p>
42
+ <Button variant="default">Get Started</Button>
43
+ </CardContent>
40
44
  </Card>
41
45
  );
42
46
  }
43
47
  ```
44
48
 
45
- ## Components
49
+ ## Styling & CSS
46
50
 
47
- ### Atoms (Basic Building Blocks)
51
+ This library uses **Tailwind CSS 4** with design tokens defined as CSS custom properties (oklch color space). All CSS files are declared as [`sideEffects`](https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-side-effect-free) in `package.json`, so bundlers will preserve them while still tree-shaking unused JavaScript.
48
52
 
49
- Badge, Button, ButtonControl, Card, Checkbox, CodeEditor, Dropdown, ErrorAlert, Icon, Input, Label, MarkdownDisplay, MenuItem, Modal, PopConfirm, SupportiveText, Tab, TableCell, TableHeaderCell, Textarea, Toast, Toggle, Tooltip
53
+ ### CSS Import Options
50
54
 
51
- ### Molecules (Composed Components)
55
+ | Import path | Use case |
56
+ | --- | --- |
57
+ | `@tetrascience-npm/tetrascience-react-ui/index.css` | **Pre-built CSS** — use this for most apps. Import once at your app root. |
58
+ | `@tetrascience-npm/tetrascience-react-ui/index.tailwind.css` | **Tailwind source** — for apps that run their own Tailwind build and want to extend/override tokens. |
52
59
 
53
- AppHeader, AssistantModal, ButtonControlGroup, CardSidebar, CodeScriptEditorButton, FormField, LaunchContent, Menu, Navbar, ProtocolConfiguration, ProtocolYamlCard, PythonEditorModal, SelectField, Sidebar, TabGroup, Table, ToastManager
60
+ Most consumers only need `index.css`:
54
61
 
55
- ### Organisms (Data Visualisation)
62
+ ### Theming
56
63
 
57
- AppLayout, AreaGraph, BarGraph, Boxplot, Chromatogram, DotPlot, Heatmap, Histogram, LineGraph, Main, PieChart, ScatterGraph, TaskScripts
64
+ The design system is controlled via CSS custom properties in `index.css`. Override them to customise colours, spacing, and radii:
58
65
 
59
- ## Theming
66
+ ```css
67
+ :root {
68
+ --primary: oklch(0.205 0 0);
69
+ --primary-foreground: oklch(0.985 0 0);
70
+ --radius: 0.625rem;
71
+ }
72
+ ```
60
73
 
61
- Customise colours, border radius, and spacing:
74
+ Dark mode is supported via the `.dark` class on a parent element. See [THEMING.md](./THEMING.md) for details.
62
75
 
63
- ```tsx
64
- import { ThemeProvider } from '@tetrascience-npm/tetrascience-react-ui';
65
-
66
- const customTheme = {
67
- colors: {
68
- primary: '#DC2626',
69
- primaryHover: '#B91C1C',
70
- },
71
- radius: {
72
- medium: '12px',
73
- },
74
- };
75
-
76
- <ThemeProvider theme={customTheme}>
77
- <App />
78
- </ThemeProvider>
79
- ```
76
+ ## Components
77
+
78
+ ### UI Primitives (`ui/`)
79
+
80
+ shadcn/ui components built on Radix UI with Tailwind CSS and CVA variants:
81
+
82
+ Accordion, Alert, AlertDialog, AspectRatio, Avatar, Badge, Breadcrumb, Button, ButtonGroup, Calendar, Card, Carousel, Checkbox, CodeEditor, Collapsible, ComboBox, Command, ContextMenu, Dialog, Drawer, DropdownMenu, Field, HoverCard, Input, InputGroup, InputOTP, Item, KBD, Label, MenuBar, NavigationMenu, RadioGroup, ResizablePanel, ScrollArea, Select, Separator, Sheet, Sidebar, Skeleton, Slider, Sonner, Spinner, Switch, Table, Tabs, Textarea, TetraScience Icon, Toggle, ToggleGroup, Tooltip
83
+
84
+ ### Composed Components (`composed/`)
85
+
86
+ TetraScience-specific compositions built from UI primitives:
87
+
88
+ AppHeader, AppLayout, AssistantModal, CodeScriptEditorButton, LaunchContent, Main, Navbar, ProtocolConfiguration, ProtocolYamlCard, PythonEditorModal, Sidebar, TdpLink, TdpSearch, TdpUrl
89
+
90
+ ### Charts (`charts/`)
91
+
92
+ Plotly.js-based data visualisations:
80
93
 
81
- See [THEMING.md](./THEMING.md) for the complete theming guide.
94
+ AreaGraph, BarGraph, Boxplot, Chromatogram, ChromatogramChart, DotPlot, Heatmap, Histogram, LineGraph, PieChart, PlateMap, ScatterGraph
82
95
 
83
96
  ## Server Utilities
84
97
 
@@ -293,7 +306,7 @@ import type { ButtonProps, BarGraphProps, BarDataSeries } from '@tetrascience-np
293
306
 
294
307
  ## Examples
295
308
 
296
- This repository uses component driven development with storybook.js. To see the examples run the following.
309
+ This repository uses component driven development with Storybook. To see the examples run the following.
297
310
 
298
311
  ```bash
299
312
  # Clone the repository
@@ -313,18 +326,19 @@ Visit <http://localhost:6006>.
313
326
 
314
327
  - [Storybook – Live Component Demos](https://ts-lib-ui-kit-storybook.vercel.app/) - Browse all components with interactive examples
315
328
  - [NPM Package](https://www.npmjs.com/package/@tetrascience-npm/tetrascience-react-ui) - Installation and version info
316
- - [Getting Started Guide](./get_started_1.md) - Step-by-step tutorial
329
+ - [Migration Guide](./MIGRATION.md) - Migrating from the old atom/molecule/organism architecture
317
330
  - [Theming Guide](./THEMING.md) - Customise the design system
318
331
  - [Contributing](./CONTRIBUTING.md#development-setup) - Clone the repo and run `yarn storybook`
319
332
 
320
333
  ## Tech Stack
321
334
 
322
- - React 18
335
+ - React 19
323
336
  - TypeScript
324
- - styled-components
337
+ - Tailwind CSS 4
338
+ - shadcn/ui (Radix UI)
339
+ - Vite 7
325
340
  - Plotly.js (charts)
326
341
  - Monaco Editor (code editing)
327
- - React Flow (workflow diagrams)
328
342
 
329
343
  ## License
330
344