@equinor/stratus-ui 1.1.0
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.
- package/README.md +80 -0
- package/dist/favicon.ico +0 -0
- package/dist/index.cjs +6 -0
- package/dist/index.js +13212 -0
- package/dist/stratus-ui.css +1 -0
- package/package.json +103 -0
package/README.md
ADDED
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
# @equinor/stratus-ui
|
|
2
|
+
|
|
3
|
+
React component library with UI primitives built on [Equinor Design System](https://eds.equinor.com/) (EDS) tokens. Ships as ESM + CJS with a bundled CSS theme file.
|
|
4
|
+
|
|
5
|
+
📚 [Storybook documentation](https://equinor.github.io/stratus-ui/)
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
```sh
|
|
10
|
+
yarn add @equinor/stratus-ui
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
### Peer dependencies
|
|
14
|
+
|
|
15
|
+
```sh
|
|
16
|
+
yarn add react react-dom
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Usage
|
|
20
|
+
|
|
21
|
+
Import components and the theme CSS in your app:
|
|
22
|
+
|
|
23
|
+
```tsx
|
|
24
|
+
import "@equinor/stratus-ui/theme.css";
|
|
25
|
+
import { Box } from "@equinor/stratus-ui";
|
|
26
|
+
|
|
27
|
+
function App() {
|
|
28
|
+
return <Box p={16} gap={8}>Hello Stratus</Box>;
|
|
29
|
+
}
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
## Development
|
|
33
|
+
|
|
34
|
+
```sh
|
|
35
|
+
yarn install # Install dependencies
|
|
36
|
+
yarn build # Build library (types + Vite)
|
|
37
|
+
yarn test # Run Vitest tests
|
|
38
|
+
yarn lint # ESLint
|
|
39
|
+
yarn storybook # Launch Storybook on port 6006
|
|
40
|
+
yarn generate-icons # Regenerate icon components from @equinor/eds-icons
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
## Project Structure
|
|
44
|
+
|
|
45
|
+
```
|
|
46
|
+
src/
|
|
47
|
+
index.ts # Public API — all exports
|
|
48
|
+
components/ # UI components (one folder each)
|
|
49
|
+
icons/ # Generated icon components
|
|
50
|
+
utils/ # Internal utilities (cn, polymorphic, cssProps, etc.)
|
|
51
|
+
theme/ # CSS theme files (EDS tokens mapping)
|
|
52
|
+
styles/ # Global/shared styles
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
### Component folder layout
|
|
56
|
+
|
|
57
|
+
```
|
|
58
|
+
ComponentName/
|
|
59
|
+
ComponentName.tsx # Implementation
|
|
60
|
+
ComponentName.css # Plain CSS with .stratus-* selectors
|
|
61
|
+
ComponentName.stories.tsx # Storybook story
|
|
62
|
+
__tests__/
|
|
63
|
+
ComponentName.test.tsx # Vitest tests
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
## Conventions
|
|
67
|
+
|
|
68
|
+
- **TypeScript** everywhere
|
|
69
|
+
- **No default exports** (icons are the exception — generated code)
|
|
70
|
+
- **Plain CSS** with `.stratus-*` prefixed selectors (no CSS Modules, no Tailwind)
|
|
71
|
+
- All public exports go through `src/index.ts` directly (no per-component barrel files)
|
|
72
|
+
- Components use `forwardRefWithAs` for polymorphic `as` prop support
|
|
73
|
+
- CSS variables use `--stratus-*` namespace
|
|
74
|
+
- Spacing shorthand props (`p`, `m`, `px`, `mt`, etc.) via `CSSProps` + `extractCSSProps()`
|
|
75
|
+
- Class names composed with `cn()` utility
|
|
76
|
+
- Tests use Vitest + Testing Library + vitest-axe; every component should have an a11y test
|
|
77
|
+
|
|
78
|
+
## License
|
|
79
|
+
|
|
80
|
+
Private — Equinor internal use only.
|
package/dist/favicon.ico
ADDED
|
Binary file
|