@ceed/ads 1.21.0 → 1.22.0-next.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.
- package/README.md +157 -0
- package/dist/components/ProfileMenu/ProfileMenu.d.ts +1 -1
- package/dist/index.browser.js +237 -0
- package/dist/index.browser.js.map +7 -0
- package/package.json +11 -3
package/README.md
ADDED
|
@@ -0,0 +1,157 @@
|
|
|
1
|
+
# @ceed/ads
|
|
2
|
+
|
|
3
|
+
Admin Design System - A React component library for Ecube Labs admin applications.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @ceed/ads
|
|
9
|
+
# or
|
|
10
|
+
yarn add @ceed/ads
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Usage
|
|
14
|
+
|
|
15
|
+
### With Bundler (Vite, Webpack, etc.)
|
|
16
|
+
|
|
17
|
+
```tsx
|
|
18
|
+
import { Button, ThemeProvider } from '@ceed/ads';
|
|
19
|
+
|
|
20
|
+
function App() {
|
|
21
|
+
return (
|
|
22
|
+
<ThemeProvider>
|
|
23
|
+
<Button variant="solid">Click me</Button>
|
|
24
|
+
</ThemeProvider>
|
|
25
|
+
);
|
|
26
|
+
}
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
### Browser ESM (via CDN)
|
|
30
|
+
|
|
31
|
+
You can use `@ceed/ads` directly in the browser without a bundler via [esm.sh](https://esm.sh).
|
|
32
|
+
|
|
33
|
+
```html
|
|
34
|
+
<!DOCTYPE html>
|
|
35
|
+
<html>
|
|
36
|
+
<head>
|
|
37
|
+
<meta charset="UTF-8">
|
|
38
|
+
<title>@ceed/ads Browser Example</title>
|
|
39
|
+
</head>
|
|
40
|
+
<body>
|
|
41
|
+
<div id="root"></div>
|
|
42
|
+
|
|
43
|
+
<script type="module">
|
|
44
|
+
import React from 'https://esm.sh/react@18';
|
|
45
|
+
import { createRoot } from 'https://esm.sh/react-dom@18/client';
|
|
46
|
+
import { Button, ThemeProvider } from 'https://esm.sh/@ceed/ads';
|
|
47
|
+
|
|
48
|
+
const App = () => (
|
|
49
|
+
React.createElement(ThemeProvider, null,
|
|
50
|
+
React.createElement(Button, { variant: 'solid' }, 'Hello from CDN!')
|
|
51
|
+
)
|
|
52
|
+
);
|
|
53
|
+
|
|
54
|
+
createRoot(document.getElementById('root')).render(
|
|
55
|
+
React.createElement(App)
|
|
56
|
+
);
|
|
57
|
+
</script>
|
|
58
|
+
</body>
|
|
59
|
+
</html>
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
#### With Import Maps
|
|
63
|
+
|
|
64
|
+
For cleaner imports, use [Import Maps](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap):
|
|
65
|
+
|
|
66
|
+
```html
|
|
67
|
+
<!DOCTYPE html>
|
|
68
|
+
<html>
|
|
69
|
+
<head>
|
|
70
|
+
<meta charset="UTF-8">
|
|
71
|
+
<title>@ceed/ads with Import Maps</title>
|
|
72
|
+
</head>
|
|
73
|
+
<body>
|
|
74
|
+
<div id="root"></div>
|
|
75
|
+
|
|
76
|
+
<script type="importmap">
|
|
77
|
+
{
|
|
78
|
+
"imports": {
|
|
79
|
+
"react": "https://esm.sh/react@18",
|
|
80
|
+
"react/jsx-runtime": "https://esm.sh/react@18/jsx-runtime",
|
|
81
|
+
"react-dom/client": "https://esm.sh/react-dom@18/client",
|
|
82
|
+
"@ceed/ads": "https://esm.sh/@ceed/ads"
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
</script>
|
|
86
|
+
|
|
87
|
+
<script type="module">
|
|
88
|
+
import React from 'react';
|
|
89
|
+
import { createRoot } from 'react-dom/client';
|
|
90
|
+
import { Button, ThemeProvider } from '@ceed/ads';
|
|
91
|
+
|
|
92
|
+
const App = () => (
|
|
93
|
+
React.createElement(ThemeProvider, null,
|
|
94
|
+
React.createElement(Button, { variant: 'solid' }, 'Hello from CDN!')
|
|
95
|
+
)
|
|
96
|
+
);
|
|
97
|
+
|
|
98
|
+
createRoot(document.getElementById('root')).render(
|
|
99
|
+
React.createElement(App)
|
|
100
|
+
);
|
|
101
|
+
</script>
|
|
102
|
+
</body>
|
|
103
|
+
</html>
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
#### With JSX (using esm.sh)
|
|
107
|
+
|
|
108
|
+
esm.sh supports JSX transformation via the `?jsx-runtime=automatic` parameter:
|
|
109
|
+
|
|
110
|
+
```html
|
|
111
|
+
<!DOCTYPE html>
|
|
112
|
+
<html>
|
|
113
|
+
<head>
|
|
114
|
+
<meta charset="UTF-8">
|
|
115
|
+
<title>@ceed/ads with JSX</title>
|
|
116
|
+
</head>
|
|
117
|
+
<body>
|
|
118
|
+
<div id="root"></div>
|
|
119
|
+
|
|
120
|
+
<script type="importmap">
|
|
121
|
+
{
|
|
122
|
+
"imports": {
|
|
123
|
+
"react": "https://esm.sh/react@18",
|
|
124
|
+
"react/jsx-runtime": "https://esm.sh/react@18/jsx-runtime",
|
|
125
|
+
"react-dom/client": "https://esm.sh/react-dom@18/client",
|
|
126
|
+
"@ceed/ads": "https://esm.sh/@ceed/ads"
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
</script>
|
|
130
|
+
|
|
131
|
+
<script type="module">
|
|
132
|
+
import { createRoot } from 'react-dom/client';
|
|
133
|
+
import { jsx } from 'react/jsx-runtime';
|
|
134
|
+
import { Button, Stack, ThemeProvider } from '@ceed/ads';
|
|
135
|
+
|
|
136
|
+
const App = () =>
|
|
137
|
+
jsx(ThemeProvider, {
|
|
138
|
+
children: jsx(Stack, {
|
|
139
|
+
spacing: 2,
|
|
140
|
+
children: [
|
|
141
|
+
jsx(Button, { variant: 'solid', children: 'Solid' }),
|
|
142
|
+
jsx(Button, { variant: 'outlined', children: 'Outlined' }),
|
|
143
|
+
jsx(Button, { variant: 'soft', children: 'Soft' }),
|
|
144
|
+
],
|
|
145
|
+
}),
|
|
146
|
+
});
|
|
147
|
+
|
|
148
|
+
createRoot(document.getElementById('root')).render(jsx(App, {}));
|
|
149
|
+
</script>
|
|
150
|
+
</body>
|
|
151
|
+
</html>
|
|
152
|
+
```
|
|
153
|
+
|
|
154
|
+
## Documentation
|
|
155
|
+
|
|
156
|
+
- [Storybook](https://main--66da7aaaf87fb0b864d6afca.chromatic.com)
|
|
157
|
+
- [Confluence](https://ecubelabs.atlassian.net/wiki/spaces/HP/pages/3256123430/Design+System)
|