smbls 3.4.6 → 3.4.11
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 +151 -4
- package/dist/esm/package.json +1 -1
- package/package.json +15 -15
package/README.md
CHANGED
|
@@ -1,7 +1,154 @@
|
|
|
1
|
-
#
|
|
1
|
+
# smbls
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
[](https://www.npmjs.com/package/smbls)
|
|
4
|
+
[](https://www.npmjs.com/package/smbls)
|
|
5
|
+
[](https://bundlephobia.com/package/smbls)
|
|
6
|
+
[](https://github.com/symbo-ls/smbls/blob/main/LICENSE)
|
|
7
|
+
[](https://nodejs.org)
|
|
8
|
+
[](https://www.npmjs.com/package/smbls)
|
|
4
9
|
|
|
5
|
-
|
|
10
|
+
> The main Symbols package — bundles the entire design system ecosystem into a single import.
|
|
6
11
|
|
|
7
|
-
|
|
12
|
+
## Installation
|
|
13
|
+
|
|
14
|
+
```bash
|
|
15
|
+
npm install smbls
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
## What's Included
|
|
19
|
+
|
|
20
|
+
This package re-exports everything from:
|
|
21
|
+
|
|
22
|
+
| Package | Description |
|
|
23
|
+
|---------|-------------|
|
|
24
|
+
| `@domql/utils` | Utility functions |
|
|
25
|
+
| `@symbo.ls/scratch` | CSS framework and methodology |
|
|
26
|
+
| `@symbo.ls/emotion` | Emotion CSS-in-JS integration |
|
|
27
|
+
| `@symbo.ls/default-config` | Default design system configuration |
|
|
28
|
+
| `@symbo.ls/uikit` | Complete UI component library |
|
|
29
|
+
| `@symbo.ls/smbls-utils` | Symbols-specific utilities |
|
|
30
|
+
| `css-in-props` | CSS properties as props |
|
|
31
|
+
| `attrs-in-props` | HTML attributes as props |
|
|
32
|
+
|
|
33
|
+
It also includes the `@symbo.ls/cli` binary, `@symbo.ls/fetch`, `@symbo.ls/sync`, and `@domql/router`.
|
|
34
|
+
|
|
35
|
+
## Quick Start
|
|
36
|
+
|
|
37
|
+
### Initialize Design System
|
|
38
|
+
|
|
39
|
+
```javascript
|
|
40
|
+
import { init } from 'smbls'
|
|
41
|
+
|
|
42
|
+
init({
|
|
43
|
+
color: {
|
|
44
|
+
primary: '#3B82F6',
|
|
45
|
+
gray: ['#1F2937', '#9CA3AF'] // [light, dark]
|
|
46
|
+
},
|
|
47
|
+
theme: {
|
|
48
|
+
primary: {
|
|
49
|
+
color: 'white',
|
|
50
|
+
background: 'primary',
|
|
51
|
+
':hover': { opacity: '0.85' }
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
})
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
### Create an Application
|
|
58
|
+
|
|
59
|
+
```javascript
|
|
60
|
+
import { create } from 'smbls'
|
|
61
|
+
|
|
62
|
+
const App = {
|
|
63
|
+
extends: 'Flex',
|
|
64
|
+
flow: 'column',
|
|
65
|
+
|
|
66
|
+
Header: {
|
|
67
|
+
extends: 'Flex',
|
|
68
|
+
H1: { text: 'Hello Symbols!' }
|
|
69
|
+
},
|
|
70
|
+
|
|
71
|
+
Main: {
|
|
72
|
+
extends: 'Flex',
|
|
73
|
+
Button: {
|
|
74
|
+
text: 'Get Started',
|
|
75
|
+
theme: 'primary'
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
create(App, {
|
|
81
|
+
key: 'your-project-key'
|
|
82
|
+
})
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
### Create Variants
|
|
86
|
+
|
|
87
|
+
```javascript
|
|
88
|
+
import { create, createAsync, createSync, createSkeleton } from 'smbls'
|
|
89
|
+
|
|
90
|
+
// Standard — renders immediately
|
|
91
|
+
create(App, options)
|
|
92
|
+
|
|
93
|
+
// Async — renders first, then fetches remote config
|
|
94
|
+
createAsync(App, options)
|
|
95
|
+
|
|
96
|
+
// Sync — fetches remote config first, then renders
|
|
97
|
+
await createSync(App, options)
|
|
98
|
+
|
|
99
|
+
// Skeleton — resolves extends only, no full rendering
|
|
100
|
+
createSkeleton(App, options)
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
## Init Options
|
|
104
|
+
|
|
105
|
+
```javascript
|
|
106
|
+
init(config, {
|
|
107
|
+
emotion: customEmotion, // custom Emotion instance
|
|
108
|
+
useVariable: true, // inject CSS custom properties
|
|
109
|
+
useReset: true, // inject CSS reset
|
|
110
|
+
useFontImport: true, // inject @font-face declarations
|
|
111
|
+
useIconSprite: true, // create SVG icon sprite
|
|
112
|
+
useDocumentTheme: true, // apply document-level theme
|
|
113
|
+
useSvgSprite: true, // create SVG sprite sheet
|
|
114
|
+
useDefaultConfig: false, // use built-in default config
|
|
115
|
+
globalTheme: 'dark', // set global theme
|
|
116
|
+
verbose: false // enable verbose logging
|
|
117
|
+
})
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
## Additional Exports
|
|
121
|
+
|
|
122
|
+
```javascript
|
|
123
|
+
import {
|
|
124
|
+
// Re-initialization
|
|
125
|
+
reinit, // re-apply config changes
|
|
126
|
+
applyCSS, // inject global CSS
|
|
127
|
+
updateVars, // update CSS custom properties
|
|
128
|
+
|
|
129
|
+
// Constants
|
|
130
|
+
DEFAULT_CONTEXT,
|
|
131
|
+
DESIGN_SYSTEM_OPTIONS,
|
|
132
|
+
ROUTER_OPTIONS
|
|
133
|
+
} from 'smbls'
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
## CLI
|
|
137
|
+
|
|
138
|
+
This package also provides the `smbls` CLI binary:
|
|
139
|
+
|
|
140
|
+
```bash
|
|
141
|
+
smbls init # Initialize a project
|
|
142
|
+
smbls start # Start dev server
|
|
143
|
+
smbls build # Build for production
|
|
144
|
+
smbls deploy # Deploy to hosting
|
|
145
|
+
smbls fetch # Fetch remote config
|
|
146
|
+
smbls push # Push changes to platform
|
|
147
|
+
smbls ask # AI assistant
|
|
148
|
+
```
|
|
149
|
+
|
|
150
|
+
See the [@symbo.ls/cli](../cli/) package for the full command reference.
|
|
151
|
+
|
|
152
|
+
## Documentation
|
|
153
|
+
|
|
154
|
+
For full documentation visit [symbols.app/developers](https://symbols.app/developers).
|
package/dist/esm/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"name":"smbls","version":"3.4.
|
|
1
|
+
{"name":"smbls","version":"3.4.10"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "smbls",
|
|
3
|
-
"version": "3.4.
|
|
3
|
+
"version": "3.4.11",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"repository": "https://github.com/symbo-ls/smbls",
|
|
6
6
|
"gitHead": "9fc1b79b41cdc725ca6b24aec64920a599634681",
|
|
@@ -28,20 +28,20 @@
|
|
|
28
28
|
"src"
|
|
29
29
|
],
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@symbo.ls/emotion": "^3.4.
|
|
32
|
-
"@domql/report": "^3.4.
|
|
33
|
-
"@domql/router": "^3.4.
|
|
34
|
-
"@domql/utils": "^3.4.
|
|
35
|
-
"@symbo.ls/cli": "^3.4.
|
|
36
|
-
"@symbo.ls/default-config": "^3.4.
|
|
37
|
-
"@symbo.ls/fetch": "^3.4.
|
|
38
|
-
"@symbo.ls/scratch": "^3.4.
|
|
39
|
-
"@symbo.ls/sync": "^3.4.
|
|
40
|
-
"@symbo.ls/uikit": "^3.4.
|
|
41
|
-
"@symbo.ls/smbls-utils": "^3.4.
|
|
42
|
-
"attrs-in-props": "^3.4.
|
|
43
|
-
"css-in-props": "^3.4.
|
|
44
|
-
"domql": "^3.4.
|
|
31
|
+
"@symbo.ls/emotion": "^3.4.11",
|
|
32
|
+
"@domql/report": "^3.4.11",
|
|
33
|
+
"@domql/router": "^3.4.11",
|
|
34
|
+
"@domql/utils": "^3.4.11",
|
|
35
|
+
"@symbo.ls/cli": "^3.4.11",
|
|
36
|
+
"@symbo.ls/default-config": "^3.4.11",
|
|
37
|
+
"@symbo.ls/fetch": "^3.4.11",
|
|
38
|
+
"@symbo.ls/scratch": "^3.4.11",
|
|
39
|
+
"@symbo.ls/sync": "^3.4.11",
|
|
40
|
+
"@symbo.ls/uikit": "^3.4.11",
|
|
41
|
+
"@symbo.ls/smbls-utils": "^3.4.11",
|
|
42
|
+
"attrs-in-props": "^3.4.11",
|
|
43
|
+
"css-in-props": "^3.4.11",
|
|
44
|
+
"domql": "^3.4.11"
|
|
45
45
|
},
|
|
46
46
|
"publishConfig": {},
|
|
47
47
|
"scripts": {
|