@once-ui-system/core 1.0.7 → 1.0.9
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 +97 -21
- package/dist/README.md +97 -21
- package/dist/package.json +1 -3
- package/package.json +1 -6
- package/postcss.config.js +0 -18
package/README.md
CHANGED
|
@@ -16,45 +16,123 @@ pnpm add @once-ui-system/core
|
|
|
16
16
|
|
|
17
17
|
Start building your Next.js app in minutes.
|
|
18
18
|
|
|
19
|
-
* **Customization**: Manage design config
|
|
19
|
+
* **Customization**: Manage design config with the ThemeProvider context.
|
|
20
20
|
* **Components**: Access advanced components with simple APIs.
|
|
21
21
|
* **Data-viz**: Add responsive charts with a few lines of code.
|
|
22
|
-
* **SEO**: Use
|
|
22
|
+
* **SEO**: Use SEO components to simplify meta and schema setup.
|
|
23
23
|
|
|
24
24
|
## Documentation
|
|
25
25
|
|
|
26
26
|
Learn how to build with Once UI at [docs.once-ui.com](https://docs.once-ui.com/once-ui/quick-start).
|
|
27
27
|
|
|
28
|
-
## Quick start
|
|
29
|
-
|
|
30
|
-
[Magic Portfolio](https://once-ui.com/products/magic-portfolio): Our free portfolio starter used and loved by thousands of creatives. Simple, customizable, responsive.
|
|
31
|
-
|
|
32
28
|
## Styling
|
|
33
29
|
|
|
34
|
-
|
|
30
|
+
Import styles and tokens in your root layout file:
|
|
35
31
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
```jsx
|
|
32
|
+
```js
|
|
39
33
|
// Import the pre-compiled CSS files
|
|
40
34
|
import '@once-ui-system/core/css/styles.css';
|
|
41
35
|
import '@once-ui-system/core/css/tokens.css';
|
|
42
36
|
```
|
|
43
37
|
|
|
44
|
-
|
|
38
|
+
Create a `Providers.tsx` component:
|
|
39
|
+
|
|
40
|
+
```js
|
|
41
|
+
"use client";
|
|
42
|
+
|
|
43
|
+
import { DataThemeProvider, IconProvider, ThemeProvider, ToastProvider } from "@once-ui-system/core";
|
|
44
|
+
|
|
45
|
+
export function Providers({ children }: { children: React.ReactNode }) {
|
|
46
|
+
return (
|
|
47
|
+
<ThemeProvider>
|
|
48
|
+
<DataThemeProvider>
|
|
49
|
+
<ToastProvider>
|
|
50
|
+
<IconProvider>
|
|
51
|
+
{children}
|
|
52
|
+
</IconProvider>
|
|
53
|
+
</ToastProvider>
|
|
54
|
+
</DataThemeProvider>
|
|
55
|
+
</ThemeProvider>
|
|
56
|
+
);
|
|
57
|
+
}
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
Wrap your app with the `Providers` component in your root layout:
|
|
45
61
|
|
|
46
|
-
|
|
62
|
+
```js
|
|
63
|
+
import { Providers } from "./providers";
|
|
47
64
|
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
65
|
+
export default function RootLayout({ children }: {
|
|
66
|
+
children: React.ReactNode
|
|
67
|
+
}) {
|
|
68
|
+
return (
|
|
69
|
+
<Providers>
|
|
70
|
+
{children}
|
|
71
|
+
</Providers>
|
|
72
|
+
);
|
|
73
|
+
}
|
|
74
|
+
```
|
|
52
75
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
76
|
+
Prevent flash of unstyled content (FOUC) by adding the following script to the `<head>` of your root layout:
|
|
77
|
+
|
|
78
|
+
```js
|
|
79
|
+
<head>
|
|
80
|
+
<script
|
|
81
|
+
dangerouslySetInnerHTML={{
|
|
82
|
+
__html: `
|
|
83
|
+
(function() {
|
|
84
|
+
try {
|
|
85
|
+
const root = document.documentElement;
|
|
86
|
+
|
|
87
|
+
root.setAttribute('data-theme', 'dark');
|
|
88
|
+
|
|
89
|
+
root.setAttribute('data-neutral', 'gray');
|
|
90
|
+
root.setAttribute('data-brand', 'blue');
|
|
91
|
+
root.setAttribute('data-accent', 'indigo');
|
|
92
|
+
root.setAttribute('data-solid', 'contrast');
|
|
93
|
+
root.setAttribute('data-solid-style', 'flat');
|
|
94
|
+
root.setAttribute('data-border', 'playful');
|
|
95
|
+
root.setAttribute('data-surface', 'filled');
|
|
96
|
+
root.setAttribute('data-transition', 'all');
|
|
97
|
+
root.setAttribute('data-scaling', '100');
|
|
98
|
+
root.setAttribute('data-viz-style', 'categorical');
|
|
99
|
+
|
|
100
|
+
const theme = localStorage.getItem('theme');
|
|
101
|
+
if (theme) {
|
|
102
|
+
if (theme === 'system') {
|
|
103
|
+
const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
104
|
+
root.setAttribute('data-theme', isDark ? 'dark' : 'light');
|
|
105
|
+
} else {
|
|
106
|
+
root.setAttribute('data-theme', theme);
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
const styleKeys = ['neutral', 'brand', 'accent', 'solid', 'solid-style', 'border', 'surface', 'transition', 'scaling'];
|
|
111
|
+
styleKeys.forEach(key => {
|
|
112
|
+
const value = localStorage.getItem('data-' + key);
|
|
113
|
+
if (value) {
|
|
114
|
+
root.setAttribute('data-' + key, value);
|
|
115
|
+
}
|
|
116
|
+
});
|
|
117
|
+
|
|
118
|
+
const dataViz = localStorage.getItem('data-viz-style');
|
|
119
|
+
if (dataViz) {
|
|
120
|
+
root.setAttribute('data-viz-style', dataViz);
|
|
121
|
+
}
|
|
122
|
+
} catch (e) {
|
|
123
|
+
document.documentElement.setAttribute('data-theme', 'dark');
|
|
124
|
+
}
|
|
125
|
+
})();
|
|
126
|
+
`,
|
|
127
|
+
}}
|
|
128
|
+
/>
|
|
129
|
+
</head>
|
|
56
130
|
```
|
|
57
131
|
|
|
132
|
+
## Quick start
|
|
133
|
+
|
|
134
|
+
[Magic Portfolio](https://once-ui.com/products/magic-portfolio): Our free portfolio starter used and loved by thousands of creatives. Simple, customizable, responsive.
|
|
135
|
+
|
|
58
136
|
[Magic Store](https://once-ui.com/products/magic-store) (PRO): Our premium ecommerce storefront that lets you launch your merch store in minutes. Payment, production and shipping managed by Fourthwall.
|
|
59
137
|
|
|
60
138
|
[Magic Docs](https://once-ui.com/products/magic-docs) (PRO): Our premium documentation generator. Just add your MDX files and let Magic Docs handle the rest.
|
|
@@ -65,8 +143,6 @@ import '@once-ui-system/core/tokens/index.scss';
|
|
|
65
143
|
|
|
66
144
|
[Once UI for Figma](https://once-ui.com/figma) (PRO): Design and prototype entire products from scratch in hours.
|
|
67
145
|
|
|
68
|
-
|
|
69
|
-
|
|
70
146
|
## Creators
|
|
71
147
|
|
|
72
148
|
Connect with us!
|
package/dist/README.md
CHANGED
|
@@ -16,45 +16,123 @@ pnpm add @once-ui-system/core
|
|
|
16
16
|
|
|
17
17
|
Start building your Next.js app in minutes.
|
|
18
18
|
|
|
19
|
-
* **Customization**: Manage design config
|
|
19
|
+
* **Customization**: Manage design config with the ThemeProvider context.
|
|
20
20
|
* **Components**: Access advanced components with simple APIs.
|
|
21
21
|
* **Data-viz**: Add responsive charts with a few lines of code.
|
|
22
|
-
* **SEO**: Use
|
|
22
|
+
* **SEO**: Use SEO components to simplify meta and schema setup.
|
|
23
23
|
|
|
24
24
|
## Documentation
|
|
25
25
|
|
|
26
26
|
Learn how to build with Once UI at [docs.once-ui.com](https://docs.once-ui.com/once-ui/quick-start).
|
|
27
27
|
|
|
28
|
-
## Quick start
|
|
29
|
-
|
|
30
|
-
[Magic Portfolio](https://once-ui.com/products/magic-portfolio): Our free portfolio starter used and loved by thousands of creatives. Simple, customizable, responsive.
|
|
31
|
-
|
|
32
28
|
## Styling
|
|
33
29
|
|
|
34
|
-
|
|
30
|
+
Import styles and tokens in your root layout file:
|
|
35
31
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
```jsx
|
|
32
|
+
```js
|
|
39
33
|
// Import the pre-compiled CSS files
|
|
40
34
|
import '@once-ui-system/core/css/styles.css';
|
|
41
35
|
import '@once-ui-system/core/css/tokens.css';
|
|
42
36
|
```
|
|
43
37
|
|
|
44
|
-
|
|
38
|
+
Create a `Providers.tsx` component:
|
|
39
|
+
|
|
40
|
+
```js
|
|
41
|
+
"use client";
|
|
42
|
+
|
|
43
|
+
import { DataThemeProvider, IconProvider, ThemeProvider, ToastProvider } from "@once-ui-system/core";
|
|
44
|
+
|
|
45
|
+
export function Providers({ children }: { children: React.ReactNode }) {
|
|
46
|
+
return (
|
|
47
|
+
<ThemeProvider>
|
|
48
|
+
<DataThemeProvider>
|
|
49
|
+
<ToastProvider>
|
|
50
|
+
<IconProvider>
|
|
51
|
+
{children}
|
|
52
|
+
</IconProvider>
|
|
53
|
+
</ToastProvider>
|
|
54
|
+
</DataThemeProvider>
|
|
55
|
+
</ThemeProvider>
|
|
56
|
+
);
|
|
57
|
+
}
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
Wrap your app with the `Providers` component in your root layout:
|
|
45
61
|
|
|
46
|
-
|
|
62
|
+
```js
|
|
63
|
+
import { Providers } from "./providers";
|
|
47
64
|
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
65
|
+
export default function RootLayout({ children }: {
|
|
66
|
+
children: React.ReactNode
|
|
67
|
+
}) {
|
|
68
|
+
return (
|
|
69
|
+
<Providers>
|
|
70
|
+
{children}
|
|
71
|
+
</Providers>
|
|
72
|
+
);
|
|
73
|
+
}
|
|
74
|
+
```
|
|
52
75
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
76
|
+
Prevent flash of unstyled content (FOUC) by adding the following script to the `<head>` of your root layout:
|
|
77
|
+
|
|
78
|
+
```js
|
|
79
|
+
<head>
|
|
80
|
+
<script
|
|
81
|
+
dangerouslySetInnerHTML={{
|
|
82
|
+
__html: `
|
|
83
|
+
(function() {
|
|
84
|
+
try {
|
|
85
|
+
const root = document.documentElement;
|
|
86
|
+
|
|
87
|
+
root.setAttribute('data-theme', 'dark');
|
|
88
|
+
|
|
89
|
+
root.setAttribute('data-neutral', 'gray');
|
|
90
|
+
root.setAttribute('data-brand', 'blue');
|
|
91
|
+
root.setAttribute('data-accent', 'indigo');
|
|
92
|
+
root.setAttribute('data-solid', 'contrast');
|
|
93
|
+
root.setAttribute('data-solid-style', 'flat');
|
|
94
|
+
root.setAttribute('data-border', 'playful');
|
|
95
|
+
root.setAttribute('data-surface', 'filled');
|
|
96
|
+
root.setAttribute('data-transition', 'all');
|
|
97
|
+
root.setAttribute('data-scaling', '100');
|
|
98
|
+
root.setAttribute('data-viz-style', 'categorical');
|
|
99
|
+
|
|
100
|
+
const theme = localStorage.getItem('theme');
|
|
101
|
+
if (theme) {
|
|
102
|
+
if (theme === 'system') {
|
|
103
|
+
const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
104
|
+
root.setAttribute('data-theme', isDark ? 'dark' : 'light');
|
|
105
|
+
} else {
|
|
106
|
+
root.setAttribute('data-theme', theme);
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
const styleKeys = ['neutral', 'brand', 'accent', 'solid', 'solid-style', 'border', 'surface', 'transition', 'scaling'];
|
|
111
|
+
styleKeys.forEach(key => {
|
|
112
|
+
const value = localStorage.getItem('data-' + key);
|
|
113
|
+
if (value) {
|
|
114
|
+
root.setAttribute('data-' + key, value);
|
|
115
|
+
}
|
|
116
|
+
});
|
|
117
|
+
|
|
118
|
+
const dataViz = localStorage.getItem('data-viz-style');
|
|
119
|
+
if (dataViz) {
|
|
120
|
+
root.setAttribute('data-viz-style', dataViz);
|
|
121
|
+
}
|
|
122
|
+
} catch (e) {
|
|
123
|
+
document.documentElement.setAttribute('data-theme', 'dark');
|
|
124
|
+
}
|
|
125
|
+
})();
|
|
126
|
+
`,
|
|
127
|
+
}}
|
|
128
|
+
/>
|
|
129
|
+
</head>
|
|
56
130
|
```
|
|
57
131
|
|
|
132
|
+
## Quick start
|
|
133
|
+
|
|
134
|
+
[Magic Portfolio](https://once-ui.com/products/magic-portfolio): Our free portfolio starter used and loved by thousands of creatives. Simple, customizable, responsive.
|
|
135
|
+
|
|
58
136
|
[Magic Store](https://once-ui.com/products/magic-store) (PRO): Our premium ecommerce storefront that lets you launch your merch store in minutes. Payment, production and shipping managed by Fourthwall.
|
|
59
137
|
|
|
60
138
|
[Magic Docs](https://once-ui.com/products/magic-docs) (PRO): Our premium documentation generator. Just add your MDX files and let Magic Docs handle the rest.
|
|
@@ -65,8 +143,6 @@ import '@once-ui-system/core/tokens/index.scss';
|
|
|
65
143
|
|
|
66
144
|
[Once UI for Figma](https://once-ui.com/figma) (PRO): Design and prototype entire products from scratch in hours.
|
|
67
145
|
|
|
68
|
-
|
|
69
|
-
|
|
70
146
|
## Creators
|
|
71
147
|
|
|
72
148
|
Connect with us!
|
package/dist/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@once-ui-system/core",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.9",
|
|
4
4
|
"description": "Once UI for Next.js NPM package",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"once-ui",
|
|
@@ -63,8 +63,6 @@
|
|
|
63
63
|
"classnames": "^2.5.1",
|
|
64
64
|
"compressorjs": "^1.2.1",
|
|
65
65
|
"date-fns": "^4.1.0",
|
|
66
|
-
"postcss": "^8.4.39",
|
|
67
|
-
"postcss-preset-env": "^9.5.15",
|
|
68
66
|
"prismjs": "^1.30.0",
|
|
69
67
|
"react-icons": "^5.2.1",
|
|
70
68
|
"recharts": "^2.15.1",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@once-ui-system/core",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.9",
|
|
4
4
|
"description": "Once UI for Next.js NPM package",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"once-ui",
|
|
@@ -77,8 +77,6 @@
|
|
|
77
77
|
"compressorjs": "^1.2.1",
|
|
78
78
|
"date-fns": "^4.1.0",
|
|
79
79
|
"next": "15.2.3",
|
|
80
|
-
"postcss": "^8.4.39",
|
|
81
|
-
"postcss-preset-env": "^9.5.15",
|
|
82
80
|
"prismjs": "^1.30.0",
|
|
83
81
|
"react": "19.0.0",
|
|
84
82
|
"react-dom": "19.0.0",
|
|
@@ -89,12 +87,9 @@
|
|
|
89
87
|
},
|
|
90
88
|
"devDependencies": {
|
|
91
89
|
"@biomejs/biome": "1.9.4",
|
|
92
|
-
"@csstools/postcss-global-data": "^2.1.1",
|
|
93
90
|
"@types/node": "20.17.23",
|
|
94
91
|
"@types/react": "19.0.1",
|
|
95
92
|
"@types/react-dom": "19.0.2",
|
|
96
|
-
"postcss-custom-media": "^10.0.7",
|
|
97
|
-
"postcss-flexbugs-fixes": "^5.0.2",
|
|
98
93
|
"rimraf": "^5.0.10",
|
|
99
94
|
"typescript": "5.8.2"
|
|
100
95
|
},
|
package/postcss.config.js
DELETED
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
module.exports = {
|
|
2
|
-
plugins: [
|
|
3
|
-
"postcss-custom-media",
|
|
4
|
-
"postcss-flexbugs-fixes",
|
|
5
|
-
[
|
|
6
|
-
"postcss-preset-env",
|
|
7
|
-
{
|
|
8
|
-
autoprefixer: {
|
|
9
|
-
flexbox: "no-2009",
|
|
10
|
-
},
|
|
11
|
-
stage: 3,
|
|
12
|
-
features: {
|
|
13
|
-
"custom-properties": false,
|
|
14
|
-
},
|
|
15
|
-
},
|
|
16
|
-
],
|
|
17
|
-
],
|
|
18
|
-
};
|