@infonomic/uikit 3.3.0 → 3.5.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 +4 -4
- package/package.json +18 -18
package/README.md
CHANGED
|
@@ -34,7 +34,7 @@ We use CSS Cascade layers via the @layer statement at-rule for named layers. Thi
|
|
|
34
34
|
|
|
35
35
|
For component CSS modules - this means ensuring that the layer specificity order appears at the top of each CSS module. It acts as sort of a 'preamble' - and it means that the component's bundled CSS will behave correctly when used within the overall UI kit.
|
|
36
36
|
|
|
37
|
-
The use of CSS modules will also allow us to support exporting individual components separately
|
|
37
|
+
The use of CSS modules will also allow us to support exporting individual components separately (we export a single bundle for import at the moment) helping reduce the import and bundle size of the consuming client. Once we've enabled single component imports, a client can then import the main style.css file followed by the individual components needed. We'll be revisiting this soon.
|
|
38
38
|
|
|
39
39
|
Lastly - we highly value the option to 'tell' components to ignore or override a top-level theme decision of light or dark. There is an intentionally duplicated `.not-dark` class selector in our tokens.css file. Since we're using shadows to create ring offsets (which we desire for focus, active modes etc.) and since CSS shadows need a background color - being able to use `.not-dark` means that we can override components that need to be in 'dark mode' on an otherwise 'light theme', or that need to be in .not-dark mode, on an otherwise 'dark theme'. This allows us to use the correct ring, background and component colors for components that might be placed on fixed dark or light background panels or sections - irrespective of the currently selected theme
|
|
40
40
|
|
|
@@ -48,7 +48,7 @@ or...
|
|
|
48
48
|
|
|
49
49
|
`pnpm add @infonomic/uikit`
|
|
50
50
|
|
|
51
|
-
And then in your application in a global.css or other root
|
|
51
|
+
And then in your application in a global.css or other root CSS file...
|
|
52
52
|
|
|
53
53
|
```css
|
|
54
54
|
/**
|
|
@@ -84,11 +84,11 @@ import { Button, Card, Container, Section } from '@infonomic/uikit/react
|
|
|
84
84
|
|
|
85
85
|
## Documentation
|
|
86
86
|
|
|
87
|
-
At the moment self-documented component examples are all based on [Storybook](https://storybook.js.org/). For now at least, in order to view our Storybook stories
|
|
87
|
+
At the moment self-documented component examples are all based on [Storybook](https://storybook.js.org/). For now at least, in order to view our Storybook stories you'll need to clone this repo, install all dependencies, then change into the packages/ui directory and start Storybook with `pnpm storybook` or `npm run storybook`.
|
|
88
88
|
|
|
89
89
|
## Tailwind CSS Integration
|
|
90
90
|
|
|
91
|
-
Here's an example Tailwind CSS integration. Note that we have our own reset, and optional typography system and so the order of our imports are a little different from the usual 'Tailwind first' approach. The example below does NOT use the Tailwind CSS
|
|
91
|
+
Here's an example Tailwind CSS integration. Note that we have our own reset, and optional typography system and so the order of our imports are a little different from the usual 'Tailwind first' approach. The example below does NOT use the Tailwind CSS reset.
|
|
92
92
|
|
|
93
93
|
```css
|
|
94
94
|
@layer theme, base, components, utilities;
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@infonomic/uikit",
|
|
3
3
|
"private": false,
|
|
4
4
|
"license": "MIT",
|
|
5
|
-
"version": "3.
|
|
5
|
+
"version": "3.5.0",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"description": "Infonomic UI kit is a collection of reusable UI components and utilities for React and Astro.",
|
|
8
8
|
"keywords": [
|
|
@@ -50,9 +50,9 @@
|
|
|
50
50
|
}
|
|
51
51
|
},
|
|
52
52
|
"dependencies": {
|
|
53
|
-
"@mantine/hooks": "^8.3.
|
|
53
|
+
"@mantine/hooks": "^8.3.7",
|
|
54
54
|
"@radix-ui/react-icons": "^1.3.2",
|
|
55
|
-
"@radix-ui/react-slot": "^1.2.
|
|
55
|
+
"@radix-ui/react-slot": "^1.2.4",
|
|
56
56
|
"classnames": "^2.5.1",
|
|
57
57
|
"date-fns": "^4.1.0",
|
|
58
58
|
"material-ripple-effects": "^2.0.1",
|
|
@@ -69,30 +69,30 @@
|
|
|
69
69
|
"devDependencies": {
|
|
70
70
|
"@astrojs/check": "0.9.5",
|
|
71
71
|
"@astrojs/node": "9.5.0",
|
|
72
|
-
"@biomejs/biome": "2.3.
|
|
73
|
-
"@rsbuild/plugin-react": "^1.4.
|
|
74
|
-
"@rslib/core": "^0.17.
|
|
75
|
-
"@storybook/addon-a11y": "^10.0.
|
|
76
|
-
"@storybook/addon-docs": "^10.0.
|
|
77
|
-
"@storybook/addon-links": "^10.0.
|
|
78
|
-
"@storybook/addon-themes": "^10.0.
|
|
79
|
-
"@storybook/react-vite": "^10.0.
|
|
72
|
+
"@biomejs/biome": "2.3.5",
|
|
73
|
+
"@rsbuild/plugin-react": "^1.4.2",
|
|
74
|
+
"@rslib/core": "^0.17.1",
|
|
75
|
+
"@storybook/addon-a11y": "^10.0.7",
|
|
76
|
+
"@storybook/addon-docs": "^10.0.7",
|
|
77
|
+
"@storybook/addon-links": "^10.0.7",
|
|
78
|
+
"@storybook/addon-themes": "^10.0.7",
|
|
79
|
+
"@storybook/react-vite": "^10.0.7",
|
|
80
80
|
"@types/lodash": "^4.17.20",
|
|
81
|
-
"@types/node": "^24.
|
|
82
|
-
"@types/react": "19.2.
|
|
81
|
+
"@types/node": "^24.10.0",
|
|
82
|
+
"@types/react": "19.2.3",
|
|
83
83
|
"@types/react-dom": "19.2.2",
|
|
84
84
|
"@vitejs/plugin-react": "^5.1.0",
|
|
85
|
-
"astro": "5.15.
|
|
85
|
+
"astro": "5.15.5",
|
|
86
86
|
"chokidar": "^4.0.3",
|
|
87
|
-
"eslint-plugin-storybook": "^10.0.
|
|
87
|
+
"eslint-plugin-storybook": "^10.0.7",
|
|
88
88
|
"lightningcss": "^1.30.2",
|
|
89
89
|
"lightningcss-cli": "^1.30.2",
|
|
90
90
|
"rimraf": "^6.1.0",
|
|
91
|
-
"storybook": "^10.0.
|
|
91
|
+
"storybook": "^10.0.7",
|
|
92
92
|
"typescript": "5.9.3",
|
|
93
93
|
"typescript-plugin-css-modules": "^5.2.0",
|
|
94
|
-
"vite": "^7.
|
|
95
|
-
"vitest": "^4.0.
|
|
94
|
+
"vite": "^7.2.2",
|
|
95
|
+
"vitest": "^4.0.8"
|
|
96
96
|
},
|
|
97
97
|
"publishConfig": {
|
|
98
98
|
"access": "public",
|