@brightspot/ui 5.4.0 → 5.4.1
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 +113 -150
- package/dist/storybook/project.json +1 -1
- package/package.json +1 -1
- package/src/legacy/tool-ui/src/MenuView.css +9 -0
- package/src/legacy/tool-ui/src/PrePublish.ts +0 -24
- package/src/legacy/tool-ui/src/ThemeBundleEditor.css +4 -0
- package/src/legacy/tool-ui/src/main/webapp/dist/{v4.84f71eb0a38ed97f7d3a.js → v4.ba601ff96a3370471a41.js} +2 -2
- package/src/legacy/tool-ui/src/main/webapp/dist/{v5.060e8a546f81da35c4de.js → v5.4cdf07db0213a5d2f97e.js} +2 -2
- package/src/legacy/tool-ui/src/main/webapp/dist/{v5.ac655d942db92fdcddfc.css → v5.553c18f29cb4a71c3577.css} +1 -1
- /package/src/legacy/tool-ui/src/main/webapp/dist/{v4.84f71eb0a38ed97f7d3a.js.LICENSE.txt → v4.ba601ff96a3370471a41.js.LICENSE.txt} +0 -0
- /package/src/legacy/tool-ui/src/main/webapp/dist/{v5.060e8a546f81da35c4de.js.LICENSE.txt → v5.4cdf07db0213a5d2f97e.js.LICENSE.txt} +0 -0
package/README.md
CHANGED
|
@@ -1,212 +1,175 @@
|
|
|
1
1
|
# Brightspot UI
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
`@brightspot/ui` is a library of ready-made interface pieces — buttons, widgets, icons — plus a full set of colors and styles (light, dark, and high-contrast) for the screens inside the Brightspot CMS.
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
<h2 align="center">platform-ui</h2>
|
|
7
|
-
<p align="center">
|
|
8
|
-
A UI library optimized for rapid, standards-based Brightspot CMS component creation.
|
|
9
|
-
<br/>
|
|
10
|
-
</p>
|
|
11
|
-
</div>
|
|
5
|
+
The CMS's own interface is built from this UI library, and we're gradually moving the rest of it over. It is also published so individual Brightspot projects can use it.
|
|
12
6
|
|
|
13
|
-
|
|
14
|
-
<details>
|
|
15
|
-
<summary>Table of Contents</summary>
|
|
16
|
-
<ol>
|
|
17
|
-
<li>
|
|
18
|
-
<a href="#about">About</a>
|
|
19
|
-
</li>
|
|
20
|
-
<li>
|
|
21
|
-
<a href="#getting-started">Getting Started</a>
|
|
22
|
-
</li>
|
|
23
|
-
<li><a href="#prerequisites">Prerequisites</a></li>
|
|
24
|
-
<li><a href="#installation">Installation</a></li>
|
|
25
|
-
<li>
|
|
26
|
-
<a href="#using-plugins">Using Plugins</a>
|
|
27
|
-
</li>
|
|
28
|
-
<li>
|
|
29
|
-
<a href="#examples">Examples</a>
|
|
30
|
-
</li>
|
|
31
|
-
<li>
|
|
32
|
-
<a href="#development">Development</a>
|
|
33
|
-
</li>
|
|
34
|
-
</ol>
|
|
35
|
-
</details>
|
|
7
|
+
## What do you want to do?
|
|
36
8
|
|
|
37
|
-
|
|
9
|
+
- [Fix or change the CMS UI](#fix-or-change-the-cms-ui)
|
|
10
|
+
- [Use the UI library in a project](#use-the-ui-library-in-a-project)
|
|
11
|
+
- [Improve the UI library itself](#improve-the-ui-library-itself)
|
|
38
12
|
|
|
39
|
-
|
|
13
|
+
---
|
|
40
14
|
|
|
41
|
-
|
|
15
|
+
## Fix or change the CMS UI
|
|
42
16
|
|
|
43
|
-
|
|
17
|
+
The CMS interface lives in `src/legacy/tool-ui/`. Edit files there and preview them in a running CMS one of two ways.
|
|
44
18
|
|
|
45
|
-
|
|
19
|
+
**You'll need:** Node 22 (`nvm use 22`), Yarn 1, a local `brightspot` checkout, and `yarn install` run once here.
|
|
46
20
|
|
|
47
|
-
|
|
21
|
+
> **Editor tip:** In VSCode, the recommended extensions autocomplete the `btu-*` classes as you type. See the [VSCode setup notes](src/legacy/tool-ui/README.md#visual-studio-code).
|
|
48
22
|
|
|
49
|
-
###
|
|
23
|
+
### Fast way — live preview (for everyday edits)
|
|
50
24
|
|
|
51
|
-
|
|
25
|
+
1. Start the CMS backend (in your `brightspot/` folder):
|
|
52
26
|
|
|
53
|
-
- TailwindCSS **v3**
|
|
54
|
-
|
|
55
|
-
### Installation
|
|
56
|
-
|
|
57
|
-
1. Install the Brightspot ui node module as a devDependency
|
|
58
27
|
```sh
|
|
59
|
-
|
|
60
|
-
```
|
|
61
|
-
2. Create a `tailwind.config` file and add Brightspot ui as a preset. More on TWCSS presets [here](https://v3.tailwindcss.com/docs/presets#presets).
|
|
62
|
-
```ts
|
|
63
|
-
// (Typescript example) contents of tailwind.config.ts
|
|
64
|
-
export default {
|
|
65
|
-
...
|
|
66
|
-
presets: [require('@brightspot/ui')],
|
|
67
|
-
...
|
|
68
|
-
}
|
|
69
|
-
```
|
|
70
|
-
```js
|
|
71
|
-
// (Javascript example) contents of tailwind.config.js
|
|
72
|
-
export default {
|
|
73
|
-
...
|
|
74
|
-
presets: [require('@brightspot/ui/dist/tailwind.config.js')],
|
|
75
|
-
...
|
|
76
|
-
}
|
|
28
|
+
docker compose up -d
|
|
77
29
|
```
|
|
78
|
-
3. Build your frontend
|
|
79
30
|
|
|
80
|
-
|
|
31
|
+
2. Start the live preview (here):
|
|
81
32
|
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
33
|
+
```sh
|
|
34
|
+
cd src/legacy/tool-ui
|
|
35
|
+
yarn server:local
|
|
36
|
+
```
|
|
85
37
|
|
|
86
|
-
|
|
38
|
+
3. Open the dev server — note the **`:8080`**, not plain `localhost`:
|
|
87
39
|
|
|
88
|
-
|
|
40
|
+
```
|
|
41
|
+
https://localhost:8080/cms/
|
|
42
|
+
```
|
|
89
43
|
|
|
90
|
-
|
|
91
|
-
// your tailwind.config.ts
|
|
92
|
-
...
|
|
93
|
-
plugins: [
|
|
94
|
-
require('@brightspot/ui/dist/tailwind-plugin-theme.ts'),
|
|
95
|
-
...
|
|
96
|
-
```
|
|
44
|
+
Click through the certificate warning (local cert — normal).
|
|
97
45
|
|
|
98
|
-
|
|
46
|
+
Now edit anything in `src/legacy/tool-ui/src/` and the browser updates on its own — no rebuilding.
|
|
99
47
|
|
|
100
|
-
|
|
48
|
+
_Seeing `502` errors? The CMS backend isn't reachable — check the docker step._
|
|
101
49
|
|
|
102
|
-
|
|
50
|
+
### Full way — build the real package (for a final check only)
|
|
103
51
|
|
|
104
|
-
|
|
105
|
-
import '@brightspot/ui/dist/components/widget/Widget'
|
|
106
|
-
```
|
|
52
|
+
Slower, but produces the actual file the CMS ships. Needs two temporary edits in `brightspot` — **don't commit them**.
|
|
107
53
|
|
|
108
|
-
|
|
54
|
+
1. Build the package (here):
|
|
109
55
|
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
```sh
|
|
115
|
-
yarn storybook
|
|
116
|
-
```
|
|
56
|
+
```sh
|
|
57
|
+
./gradlew publishToMavenLocal
|
|
58
|
+
```
|
|
117
59
|
|
|
118
|
-
|
|
60
|
+
2. Point `brightspot` at your build:
|
|
61
|
+
- `site/build.gradle` — add `mavenLocal()` under `repositories`
|
|
62
|
+
- `platform/brightspot-dependencies/build.gradle` — change the cms-tool-ui line to:
|
|
119
63
|
|
|
120
|
-
|
|
64
|
+
```groovy
|
|
65
|
+
api 'com.brightspot.ui:cms-tool-ui:9999-SNAPSHOT'
|
|
66
|
+
```
|
|
121
67
|
|
|
122
|
-
|
|
68
|
+
3. Rebuild and run (in `brightspot/`):
|
|
123
69
|
|
|
124
|
-
|
|
125
|
-
|
|
70
|
+
```sh
|
|
71
|
+
./gradlew docker
|
|
72
|
+
```
|
|
126
73
|
|
|
127
|
-
|
|
74
|
+
4. Check it at https://localhost/cms/, then undo the two edits when done.
|
|
128
75
|
|
|
129
|
-
|
|
76
|
+
---
|
|
130
77
|
|
|
131
|
-
|
|
132
|
-
- `src/legacy/tool-ui/` — the brightspot CMS frontend (JS, CSS, webpack, tests). Has its own `package.json`. Built by `(cd src/legacy/tool-ui && yarn build)` into `src/legacy/tool-ui/src/main/webapp/dist/`.
|
|
78
|
+
## Use the UI library in a project
|
|
133
79
|
|
|
134
|
-
|
|
80
|
+
> Starting a new frontend package? [`@brightspot/ui-builder`](https://www.npmjs.com/package/@brightspot/ui-builder) scaffolds the build (Vite) and wires up this preset for you. The steps below are for adding the library to a build you already have.
|
|
135
81
|
|
|
136
|
-
|
|
82
|
+
**You'll need:** a frontend using TailwindCSS v3.
|
|
137
83
|
|
|
138
84
|
```sh
|
|
139
|
-
yarn
|
|
85
|
+
yarn add -D @brightspot/ui
|
|
140
86
|
```
|
|
141
87
|
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
### CMS integration work
|
|
145
|
-
|
|
146
|
-
The brightspot CMS consumes `@brightspot/ui` from npm. Two workflows for local iteration:
|
|
147
|
-
|
|
148
|
-
#### Fast loop: webpack-dev-server (recommended for JS/CSS edits)
|
|
88
|
+
If you don't already have one, create a Tailwind config file at the root of your frontend — `tailwind.config.mjs`:
|
|
149
89
|
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
90
|
+
```js
|
|
91
|
+
// tailwind.config.mjs
|
|
92
|
+
export default {
|
|
93
|
+
content: ['./src/**/*.{js,ts,html}'], // wherever your markup lives
|
|
94
|
+
}
|
|
95
|
+
```
|
|
155
96
|
|
|
156
|
-
|
|
97
|
+
Then add `@brightspot/ui` as a [preset](https://v3.tailwindcss.com/docs/presets). One line pulls in everything — all colors, styles, and components:
|
|
157
98
|
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
99
|
+
```js
|
|
100
|
+
// tailwind.config.mjs
|
|
101
|
+
import preset from '@brightspot/ui'
|
|
161
102
|
|
|
162
|
-
|
|
103
|
+
export default {
|
|
104
|
+
presets: [preset],
|
|
105
|
+
content: ['./src/**/*.{js,ts,html}'],
|
|
106
|
+
}
|
|
107
|
+
```
|
|
163
108
|
|
|
164
|
-
|
|
109
|
+
Leave `plugins` empty — the preset already registers every component's plugin, so listing them again double-registers.
|
|
165
110
|
|
|
166
|
-
|
|
111
|
+
To use a component, import it (it self-registers its `btu-*` element), then use the tag. Import from the `components/` subpath with the `.js` extension — not the deep `dist/` path:
|
|
167
112
|
|
|
168
|
-
|
|
113
|
+
```ts
|
|
114
|
+
import '@brightspot/ui/components/badge/Badge.js'
|
|
115
|
+
```
|
|
169
116
|
|
|
170
|
-
|
|
117
|
+
```html
|
|
118
|
+
<btu-badge>Draft</btu-badge>
|
|
119
|
+
```
|
|
171
120
|
|
|
172
|
-
|
|
173
|
-
yarn link
|
|
174
|
-
```
|
|
121
|
+
To browse everything available, run the interactive catalog:
|
|
175
122
|
|
|
176
|
-
|
|
123
|
+
```sh
|
|
124
|
+
yarn storybook # opens http://localhost:6006
|
|
125
|
+
```
|
|
177
126
|
|
|
178
|
-
|
|
179
|
-
yarn link @brightspot/ui
|
|
180
|
-
```
|
|
127
|
+
---
|
|
181
128
|
|
|
182
|
-
|
|
129
|
+
## Improve the UI library itself
|
|
183
130
|
|
|
184
|
-
|
|
185
|
-
yarn build # for src/ edits
|
|
186
|
-
(cd src/legacy/tool-ui && yarn build) # for src/legacy/tool-ui/ edits
|
|
187
|
-
```
|
|
131
|
+
Adding or fixing a component, style, or color.
|
|
188
132
|
|
|
189
|
-
|
|
133
|
+
**You'll need:** Node 22 (`nvm use 22`), Yarn 1.
|
|
190
134
|
|
|
191
|
-
|
|
192
|
-
./gradlew :cms-tool-ui:yarnBuild
|
|
193
|
-
./gradlew docker
|
|
194
|
-
```
|
|
135
|
+
**Where things live:**
|
|
195
136
|
|
|
196
|
-
|
|
137
|
+
- `src/` — the UI library (components, styles, colors); this is what gets published.
|
|
138
|
+
- `src/legacy/tool-ui/` — the CMS interface (see the first section).
|
|
139
|
+
- `tool-ui/` — packaging only.
|
|
197
140
|
|
|
198
|
-
|
|
141
|
+
Build and preview components in the catalog — no CMS needed:
|
|
199
142
|
|
|
200
143
|
```sh
|
|
201
|
-
|
|
202
|
-
yarn unlink @brightspot/ui && yarn install --force
|
|
203
|
-
|
|
204
|
-
# in platform-ui:
|
|
205
|
-
yarn unlink
|
|
144
|
+
yarn storybook
|
|
206
145
|
```
|
|
207
146
|
|
|
208
|
-
|
|
147
|
+
Before committing:
|
|
209
148
|
|
|
210
|
-
|
|
149
|
+
```sh
|
|
150
|
+
yarn build # compile everything
|
|
151
|
+
yarn check:conventions # check the rules
|
|
152
|
+
yarn format # tidy formatting
|
|
153
|
+
yarn test:storybook # run tests
|
|
154
|
+
```
|
|
211
155
|
|
|
212
|
-
|
|
156
|
+
**House rules** — when you touch one of these areas, read its guide in `.ai/` first:
|
|
157
|
+
|
|
158
|
+
| Area | Guide |
|
|
159
|
+
| ----------------------------------------------- | -------------------------------------- |
|
|
160
|
+
| Naming (sizes, icons, events, CSS vars) | `.ai/LESSONS-NAMING.md` |
|
|
161
|
+
| JSDoc and types | `.ai/LESSONS-JSDOC.md` |
|
|
162
|
+
| Reusing the button primitive | `.ai/LESSONS-BUTTON-REUSE.md` |
|
|
163
|
+
| Keeping plugin styles isolated | `.ai/LESSONS-PLUGIN-ISOLATION.md` |
|
|
164
|
+
| Safelisting classes written at runtime | `.ai/LESSONS-SAFELIST.md` |
|
|
165
|
+
| Preset vs Storybook config; adding a new plugin | `.ai/LESSONS-TAILWIND-CONFIGS.md` |
|
|
166
|
+
| CSS custom properties + Tailwind gotchas | `.ai/LESSONS-CSS-PROPS.md` |
|
|
167
|
+
| Writing Storybook stories | `.ai/LESSONS-STORYBOOK.md` |
|
|
168
|
+
| Anchor positioning / popovers | `.ai/LESSONS-ANCHOR-POSITIONING.md` |
|
|
169
|
+
| Reduced motion | `.ai/LESSONS-REDUCED-MOTION.md` |
|
|
170
|
+
| Roving tabindex | `.ai/LESSONS-ROVING-TABINDEX.md` |
|
|
171
|
+
| Composing components | `.ai/LESSONS-COMPONENT-COMPOSITION.md` |
|
|
172
|
+
|
|
173
|
+
See [`CONTRIBUTING.md`](./CONTRIBUTING.md) for documentation standards.
|
|
174
|
+
|
|
175
|
+
**Releases** are automatic: merge to `main`, and a version is tagged and published for you.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"generatedAt":
|
|
1
|
+
{"generatedAt":1784123091163,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":true,"hasStorybookEslint":true,"refCount":0,"knownPackages":{"testPackages":{"@storybook/addon-vitest":"10.2.12","@vitest/browser-playwright":"4.0.18","playwright":"1.58.2","vitest":"4.0.18"},"stylingPackages":{"tailwindcss":"^3.4.13","autoprefixer":"10.4.21"}},"hasRouterPackage":false,"packageManager":{"type":"yarn","agent":"yarn","nodeLinker":"undefined"},"preview":{"usesGlobals":true},"framework":{"name":"@storybook/web-components-vite","options":{}},"builder":"@storybook/builder-vite","renderer":"@storybook/web-components","portableStoriesFileCount":0,"applicationFileCount":6,"storybookVersion":"10.2.12","storybookVersionSpecifier":"10.2.12","language":"typescript","storybookPackages":{"@storybook/addon-themes":{"version":"10.2.12"},"@storybook/web-components-vite":{"version":"10.2.12"},"@wc-toolkit/storybook-helpers":{"version":"10.0.0"},"eslint-plugin-storybook":{"version":"10.0.7"},"storybook":{}},"addons":{"@storybook/addon-docs":{"version":"10.2.12"},"@storybook/addon-vitest":{"version":"10.2.12"}},"packageJsonType":"module"}
|
package/package.json
CHANGED
|
@@ -60,6 +60,10 @@
|
|
|
60
60
|
@apply btu-button-pressed after:-rotate-180;
|
|
61
61
|
}
|
|
62
62
|
|
|
63
|
+
&.active:not(.is-open):not(.rte-overflow-btn) > button {
|
|
64
|
+
@apply btu-button-pressed;
|
|
65
|
+
}
|
|
66
|
+
|
|
63
67
|
&.rte-overflow-btn {
|
|
64
68
|
@apply h-7;
|
|
65
69
|
}
|
|
@@ -316,6 +320,11 @@ button + .rte2-toolbar-submenu-2-items {
|
|
|
316
320
|
@apply btu-button-pressed;
|
|
317
321
|
}
|
|
318
322
|
|
|
323
|
+
/* Submenu active items: selector specificity (0-3-1) beats Dropdown-item's background-color:transparent (0-2-3) */
|
|
324
|
+
.rte2-toolbar-submenu-2-items .ProseMirrorToolbar-action.active > a {
|
|
325
|
+
@apply btu-dropdown-item-selected;
|
|
326
|
+
}
|
|
327
|
+
|
|
319
328
|
.ProseMirrorToolbar-action.disabled > a[data-icon] {
|
|
320
329
|
@apply btu-button-disabled;
|
|
321
330
|
}
|
|
@@ -18,30 +18,6 @@ onFind('.PrePublish', (popup: HTMLElement) => {
|
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
close?.addEventListener('click', () => {
|
|
21
|
-
// User closed the popup and chose to continue then submit without interferrence.
|
|
22
|
-
if (form) {
|
|
23
|
-
const input = form.querySelector<HTMLInputElement>(
|
|
24
|
-
'input[name="prePublish"]',
|
|
25
|
-
)
|
|
26
|
-
const button = form.querySelector<HTMLButtonElement>(
|
|
27
|
-
'button[name="prePublishDisplay"]',
|
|
28
|
-
)
|
|
29
|
-
|
|
30
|
-
input?.remove()
|
|
31
|
-
|
|
32
|
-
if (button) {
|
|
33
|
-
button.addEventListener(
|
|
34
|
-
'click',
|
|
35
|
-
() => {
|
|
36
|
-
if (input) {
|
|
37
|
-
form.appendChild(input)
|
|
38
|
-
}
|
|
39
|
-
},
|
|
40
|
-
{ once: true },
|
|
41
|
-
)
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
|
|
45
21
|
popup.classList.remove('is-visible')
|
|
46
22
|
|
|
47
23
|
if (window.BRIGHTSPOT?.ui.cms.enableV5UI) {
|