@wpmoo/ui 0.7.0 → 0.7.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/ASSET_LICENSE.md +1 -1
- package/README.md +131 -136
- package/THIRD_PARTY_NOTICES.md +1 -1
- package/certification.json +1 -1
- package/package.json +1 -1
package/ASSET_LICENSE.md
CHANGED
|
@@ -6,7 +6,7 @@ WPMoo-generated visual assets are copyright (c) 2026 WPMoo
|
|
|
6
6
|
These assets are not licensed under the repository's MIT source code license
|
|
7
7
|
unless an individual file or directory states otherwise. This includes brand
|
|
8
8
|
assets, component preview images, marketing images, screenshots, generated
|
|
9
|
-
artwork, and other WPMoo-owned image assets under `static/images/`.
|
|
9
|
+
artwork, and other WPMoo-owned image assets under `site/static/images/`.
|
|
10
10
|
|
|
11
11
|
You may view these assets as part of the Moo UI documentation and demo site.
|
|
12
12
|
You may not copy, redistribute, modify, sell, sublicense, or use them in another
|
package/README.md
CHANGED
|
@@ -4,45 +4,41 @@
|
|
|
4
4
|
|
|
5
5
|
<p align="center">
|
|
6
6
|
<a href="https://github.com/wpmoo-org/ui/actions/workflows/ui-ci.yml"><img alt="CI" src="https://img.shields.io/github/actions/workflow/status/wpmoo-org/ui/ui-ci.yml?branch=main&label=CI"></a>
|
|
7
|
-
<a href="https://github.com/wpmoo-org/ui"><img alt="GitHub" src="https://img.shields.io/badge/GitHub-181717?logo=github&logoColor=white"></a>
|
|
8
7
|
<a href="https://www.npmjs.com/package/@wpmoo/ui"><img alt="npm" src="https://img.shields.io/npm/v/@wpmoo/ui?label=npm&logo=npm&color=cb3837"></a>
|
|
9
8
|
<a href="LICENSE"><img alt="License: MIT" src="https://img.shields.io/badge/License-MIT-blue.svg"></a>
|
|
10
9
|
</p>
|
|
11
10
|
|
|
12
|
-
<p align="center">
|
|
13
|
-
<strong>Bootstrap markup. shadcn feel.</strong>
|
|
14
|
-
</p>
|
|
15
|
-
|
|
16
|
-
<p align="center">
|
|
17
|
-
Keep your Bootstrap 5.3 HTML and behavior. Replace the stylesheet and give
|
|
18
|
-
your application a calmer, modern product interface without moving to React or
|
|
19
|
-
Tailwind.
|
|
20
|
-
</p>
|
|
11
|
+
<p align="center"><strong>Bootstrap markup. shadcn feel.</strong></p>
|
|
21
12
|
|
|
22
13
|
<p align="center">
|
|
23
|
-
|
|
14
|
+
Moo UI is a Bootstrap 5.3-native component system with a restrained,
|
|
15
|
+
shadcn-inspired visual language.
|
|
24
16
|
</p>
|
|
25
17
|
|
|
26
18
|
<p align="center">
|
|
19
|
+
<a href="https://ui.wpmoo.org/"><strong>Explore the catalog »</strong></a> ·
|
|
27
20
|
<a href="#try-it-in-30-seconds">Try it in 30 seconds</a> ·
|
|
28
|
-
<a href="https://
|
|
29
|
-
<a href="https://github.com/wpmoo-org/ui/issues">Report bug</a>
|
|
21
|
+
<a href="https://github.com/wpmoo-org/ui/issues">Report an issue</a>
|
|
30
22
|
</p>
|
|
31
23
|
|
|
32
24
|
# Moo UI
|
|
33
25
|
|
|
34
|
-
Moo UI
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
26
|
+
Moo UI preserves Bootstrap markup, variables, and JavaScript plugins wherever
|
|
27
|
+
Bootstrap already provides the contract. For patterns Bootstrap does not
|
|
28
|
+
provide, Moo UI adds small documented extensions, including optional ESM for
|
|
29
|
+
Combobox and Sidebar.
|
|
38
30
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
31
|
+
- **CSS-first.** Most components need only the stylesheet and ordinary HTML.
|
|
32
|
+
- **Bootstrap owns native behavior.** Keep using Bootstrap's bundle for its
|
|
33
|
+
Dropdown, Modal, Offcanvas, Tooltip, Popover, Toast, and other plugins.
|
|
34
|
+
- **Moo extends verified gaps.** Optional Moo ESM is explicit and
|
|
35
|
+
side-effect-free; importing it never scans the document automatically.
|
|
36
|
+
- **Adopt all at once or gradually.** Use the full Bootstrap build or scope the
|
|
37
|
+
Moo component layer to a `.moo-ui` boundary.
|
|
42
38
|
|
|
43
39
|
## Try It in 30 Seconds
|
|
44
40
|
|
|
45
|
-
|
|
41
|
+
The quick demo intentionally follows the floating npm tag:
|
|
46
42
|
|
|
47
43
|
```html
|
|
48
44
|
<link rel="stylesheet"
|
|
@@ -51,135 +47,146 @@ Drop the stylesheet into ordinary Bootstrap markup:
|
|
|
51
47
|
<button type="button" class="btn btn-primary">Create workspace</button>
|
|
52
48
|
```
|
|
53
49
|
|
|
54
|
-
|
|
55
|
-
|
|
50
|
+
`moo-ui.css` is a complete Bootstrap CSS build with Moo UI defaults. Use it
|
|
51
|
+
instead of another Bootstrap stylesheet, not in addition to one.
|
|
56
52
|
|
|
57
|
-
##
|
|
53
|
+
## Runtime Ownership
|
|
54
|
+
|
|
55
|
+
| Surface | Runtime owner | What to load |
|
|
56
|
+
| --- | --- | --- |
|
|
57
|
+
| Static HTML and CSS components | Browser + Bootstrap markup | `moo-ui.css`, or Bootstrap CSS followed by scoped `moo.css` |
|
|
58
|
+
| Dropdown, Modal, Offcanvas, Tooltip, Popover, Toast, and other Bootstrap plugins | Bootstrap | Bootstrap's JavaScript bundle and documented initialization |
|
|
59
|
+
| Combobox | Optional Moo ESM | `@wpmoo/ui/combobox.js`, then explicit initialization |
|
|
60
|
+
| Sidebar state and responsive coordination | Optional Moo ESM, composed with Bootstrap plugins | `@wpmoo/ui/sidebar.js`, then explicit initialization |
|
|
61
|
+
|
|
62
|
+
Moo UI does not replace Bootstrap plugins and does not publish a mandatory
|
|
63
|
+
aggregate JavaScript runtime.
|
|
58
64
|
|
|
59
|
-
|
|
65
|
+
## Install
|
|
60
66
|
|
|
61
67
|
```bash
|
|
62
|
-
npm install @wpmoo/ui
|
|
68
|
+
npm install @wpmoo/ui bootstrap
|
|
63
69
|
```
|
|
64
70
|
|
|
71
|
+
### Full replacement
|
|
72
|
+
|
|
73
|
+
Use the complete Moo UI Bootstrap build instead of Bootstrap's stylesheet:
|
|
74
|
+
|
|
65
75
|
```js
|
|
66
76
|
import "@wpmoo/ui/moo-ui.css";
|
|
77
|
+
import "bootstrap/dist/js/bootstrap.bundle.min.js"; // only when plugins are used
|
|
67
78
|
```
|
|
68
79
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
80
|
+
### Scoped gradual adoption
|
|
81
|
+
|
|
82
|
+
Keep the existing Bootstrap stylesheet, load the scoped Moo layer after it, and
|
|
83
|
+
wrap only the area being migrated:
|
|
84
|
+
|
|
85
|
+
```js
|
|
86
|
+
import "bootstrap/dist/css/bootstrap.min.css";
|
|
87
|
+
import "@wpmoo/ui/moo.css";
|
|
88
|
+
import "bootstrap/dist/js/bootstrap.bundle.min.js"; // only when plugins are used
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
```html
|
|
92
|
+
<div class="moo-ui">
|
|
93
|
+
<button type="button" class="btn btn-primary">Create workspace</button>
|
|
94
|
+
</div>
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
### Optional Moo ESM
|
|
98
|
+
|
|
99
|
+
Initialize only the documented behavior gaps you use:
|
|
100
|
+
|
|
101
|
+
```js
|
|
102
|
+
import Combobox from "@wpmoo/ui/combobox.js";
|
|
103
|
+
import Sidebar from "@wpmoo/ui/sidebar.js";
|
|
104
|
+
|
|
105
|
+
Combobox.getOrCreateInstance(document.querySelector(".combobox"));
|
|
106
|
+
Sidebar.getOrCreateInstance(document.querySelector('[data-slot="sidebar-wrapper"]'));
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
See the [Installation guide](https://ui.wpmoo.org/installation/) for CDN
|
|
110
|
+
recipes, load order, and troubleshooting.
|
|
73
111
|
|
|
74
112
|
## Choose an Adoption Path
|
|
75
113
|
|
|
76
|
-
| Situation |
|
|
77
|
-
| --- | --- |
|
|
78
|
-
| New page or whole application |
|
|
79
|
-
|
|
|
114
|
+
| Situation | Recommended path |
|
|
115
|
+
| --- | --- |
|
|
116
|
+
| New page or whole application | Replace Bootstrap CSS with `moo-ui.css`. |
|
|
117
|
+
| Existing Bootstrap application | Load `moo.css` after Bootstrap CSS and add `.moo-ui` around migrated regions. |
|
|
118
|
+
| Static page with no interactive plugins | Load CSS only. |
|
|
119
|
+
| Page using Bootstrap plugins | Keep Bootstrap's bundle and its documented initialization. |
|
|
120
|
+
| Page using Combobox or Sidebar | Add only the corresponding optional Moo ESM module. |
|
|
121
|
+
|
|
122
|
+
## Public Package Surface
|
|
123
|
+
|
|
124
|
+
`@wpmoo/ui` exports exactly these public entrypoints:
|
|
125
|
+
|
|
126
|
+
| Export | Purpose |
|
|
127
|
+
| --- | --- |
|
|
128
|
+
| `@wpmoo/ui/moo-ui.css` | Full expanded CSS build |
|
|
129
|
+
| `@wpmoo/ui/moo-ui.min.css` | Full minified CSS build |
|
|
130
|
+
| `@wpmoo/ui/moo.css` | Scoped expanded component layer for `.moo-ui` |
|
|
131
|
+
| `@wpmoo/ui/moo.min.css` | Scoped minified component layer |
|
|
132
|
+
| `@wpmoo/ui/combobox.js` | Optional Combobox ESM lifecycle |
|
|
133
|
+
| `@wpmoo/ui/sidebar.js` | Optional Sidebar ESM lifecycle |
|
|
134
|
+
| `@wpmoo/ui/certification.json` | Versioned support/evidence manifest |
|
|
135
|
+
| `@wpmoo/ui/package.json` | Package metadata |
|
|
136
|
+
|
|
137
|
+
The tarball also contains `README.md`, `LICENSE`, `ASSET_LICENSE.md`, and
|
|
138
|
+
`THIRD_PARTY_NOTICES.md`. It does not publish catalog templates, preview
|
|
139
|
+
artwork, catalog JavaScript, SCSS source, or a Sass facade. Internal Sass
|
|
140
|
+
partials and Jinja macros are repository build tools, not npm APIs.
|
|
80
141
|
|
|
81
142
|
## Why Bootstrap Teams Try It
|
|
82
143
|
|
|
83
|
-
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
-
|
|
88
|
-
shows rendered examples and copyable markup.
|
|
89
|
-
- **Bootstrap-native customization.** Moo UI uses Bootstrap Sass knobs and
|
|
90
|
-
`--bs-*` variables wherever Bootstrap can express the need, adding Moo-owned
|
|
91
|
-
tokens only for gaps Bootstrap does not model.
|
|
92
|
-
- **Practical migration surface.** Start with one page, one scoped area, or a
|
|
93
|
-
full stylesheet replacement after visual review.
|
|
94
|
-
|
|
95
|
-
## Philosophy
|
|
96
|
-
|
|
97
|
-
- **Bootstrap is the contract.** Moo UI keeps Bootstrap markup, documented
|
|
98
|
-
behavior, Sass knobs, and `--bs-*` variables wherever Bootstrap can express
|
|
99
|
-
the need.
|
|
100
|
-
- **shadcn is the feeling.** Moo UI studies restraint, rhythm, and product UI
|
|
101
|
-
sensibility without adopting React, Tailwind, Radix, or shadcn source.
|
|
102
|
-
- **HTML stays first-class.** The catalog is static, inspectable, and friendly
|
|
103
|
-
to server-rendered applications.
|
|
104
|
-
- **Extensions stay honest.** Moo-owned classes and behavior are added only
|
|
105
|
-
when Bootstrap has no native component contract for the pattern.
|
|
106
|
-
|
|
107
|
-
## What Is Included
|
|
108
|
-
|
|
109
|
-
The live catalog is the source of truth for current coverage:
|
|
110
|
-
|
|
111
|
-
- [Components](https://ui.wpmoo.org/components/) for actions, forms,
|
|
112
|
-
data display, feedback, disclosure, overlays, and navigation.
|
|
113
|
-
- [Blocks](https://ui.wpmoo.org/blocks/) for composed application
|
|
114
|
-
surfaces such as sidebar layouts.
|
|
115
|
-
- A static documentation site that can be inspected without a client-side app
|
|
116
|
-
runtime.
|
|
144
|
+
- Keep server-rendered HTML, Bootstrap classes, and familiar plugin behavior.
|
|
145
|
+
- Apply a restrained product rhythm to forms, overlays, navigation, data
|
|
146
|
+
display, and application shells.
|
|
147
|
+
- Inspect static rendered examples and copy the resulting HTML contracts.
|
|
148
|
+
- Start with one scoped region or replace the full stylesheet after review.
|
|
117
149
|
|
|
118
150
|
Representative components include Button, Field, Table, Dialog, Toast, Sheet,
|
|
119
|
-
and Sidebar.
|
|
151
|
+
Combobox, and Sidebar. Browse the [component catalog](https://ui.wpmoo.org/components/)
|
|
152
|
+
and composed [blocks](https://ui.wpmoo.org/blocks/).
|
|
120
153
|
|
|
121
154
|
## Designed, Not Just Restyled
|
|
122
155
|
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
theme-aware surfaces so they stay legible on GitHub.
|
|
156
|
+
The README uses original WPMoo preview artwork stored under
|
|
157
|
+
`site/static/images/`; those files are source assets for the public catalog and
|
|
158
|
+
are not part of the npm package.
|
|
127
159
|
|
|
128
160
|
<p align="center">
|
|
129
|
-
<a href="https://ui.wpmoo.org/components/button/">
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
<img src="static/images/readme/button-light.svg" alt="Button preview" width="31%">
|
|
133
|
-
</picture>
|
|
134
|
-
</a>
|
|
135
|
-
<a href="https://ui.wpmoo.org/components/dialog/">
|
|
136
|
-
<picture>
|
|
137
|
-
<source media="(prefers-color-scheme: dark)" srcset="static/images/readme/dialog-dark.svg">
|
|
138
|
-
<img src="static/images/readme/dialog-light.svg" alt="Dialog preview" width="31%">
|
|
139
|
-
</picture>
|
|
140
|
-
</a>
|
|
141
|
-
<a href="https://ui.wpmoo.org/components/sidebar/">
|
|
142
|
-
<picture>
|
|
143
|
-
<source media="(prefers-color-scheme: dark)" srcset="static/images/readme/sidebar-dark.svg">
|
|
144
|
-
<img src="static/images/readme/sidebar-light.svg" alt="Sidebar preview" width="31%">
|
|
145
|
-
</picture>
|
|
146
|
-
</a>
|
|
147
|
-
<a href="https://ui.wpmoo.org/components/toast/">
|
|
148
|
-
<picture>
|
|
149
|
-
<source media="(prefers-color-scheme: dark)" srcset="static/images/readme/toast-dark.svg">
|
|
150
|
-
<img src="static/images/readme/toast-light.svg" alt="Toast preview" width="31%">
|
|
151
|
-
</picture>
|
|
152
|
-
</a>
|
|
153
|
-
<a href="https://ui.wpmoo.org/components/sheet/">
|
|
154
|
-
<picture>
|
|
155
|
-
<source media="(prefers-color-scheme: dark)" srcset="static/images/readme/sheet-dark.svg">
|
|
156
|
-
<img src="static/images/readme/sheet-light.svg" alt="Sheet preview" width="31%">
|
|
157
|
-
</picture>
|
|
158
|
-
</a>
|
|
159
|
-
<a href="https://ui.wpmoo.org/components/input/">
|
|
160
|
-
<picture>
|
|
161
|
-
<source media="(prefers-color-scheme: dark)" srcset="static/images/readme/input-dark.svg">
|
|
162
|
-
<img src="static/images/readme/input-light.svg" alt="Input preview" width="31%">
|
|
163
|
-
</picture>
|
|
164
|
-
</a>
|
|
161
|
+
<a href="https://ui.wpmoo.org/components/button/"><picture><source media="(prefers-color-scheme: dark)" srcset="https://ui.wpmoo.org/assets/images/readme/button-dark.svg"><img src="https://ui.wpmoo.org/assets/images/readme/button-light.svg" alt="Button preview" width="31%"></picture></a>
|
|
162
|
+
<a href="https://ui.wpmoo.org/components/dialog/"><picture><source media="(prefers-color-scheme: dark)" srcset="https://ui.wpmoo.org/assets/images/readme/dialog-dark.svg"><img src="https://ui.wpmoo.org/assets/images/readme/dialog-light.svg" alt="Dialog preview" width="31%"></picture></a>
|
|
163
|
+
<a href="https://ui.wpmoo.org/components/sidebar/"><picture><source media="(prefers-color-scheme: dark)" srcset="https://ui.wpmoo.org/assets/images/readme/sidebar-dark.svg"><img src="https://ui.wpmoo.org/assets/images/readme/sidebar-light.svg" alt="Sidebar preview" width="31%"></picture></a>
|
|
165
164
|
</p>
|
|
166
165
|
|
|
167
|
-
|
|
168
|
-
<a href="https://ui.wpmoo.org/components/">Browse the full catalog →</a>
|
|
169
|
-
</p>
|
|
166
|
+
## Status And Support
|
|
170
167
|
|
|
171
|
-
|
|
168
|
+
Moo UI is in the `0.x` series. Current package: `@wpmoo/ui@0.7.1`. The
|
|
169
|
+
package's certification manifest currently has `preview` status; catalog
|
|
170
|
+
availability is WPMoo-maintained preview evidence, not independent or
|
|
171
|
+
accredited certification. Read [Support & Evidence](https://ui.wpmoo.org/support/)
|
|
172
|
+
for the Bootstrap range, browser policy, maturity definitions, limitations, and
|
|
173
|
+
release evidence. Complete release notes are on
|
|
174
|
+
[GitHub Releases](https://github.com/wpmoo-org/ui/releases).
|
|
172
175
|
|
|
173
|
-
|
|
174
|
-
ship the catalog's generated preview images, Jinja templates, Sass source, or
|
|
175
|
-
Moo-owned catalog JavaScript.
|
|
176
|
+
## Contributing
|
|
176
177
|
|
|
177
|
-
|
|
178
|
-
|
|
178
|
+
Small documentation corrections, reduced reproductions, accessibility checks,
|
|
179
|
+
and bounded component improvements are welcome. Start with
|
|
180
|
+
[`CONTRIBUTING.md`](CONTRIBUTING.md), choose an
|
|
181
|
+
[issue type](https://github.com/wpmoo-org/ui/issues/new/choose), and review the
|
|
182
|
+
[Code of Conduct](CODE_OF_CONDUCT.md) and [security policy](SECURITY.md).
|
|
179
183
|
|
|
180
|
-
## Development
|
|
184
|
+
## Repository Layout And Development
|
|
181
185
|
|
|
182
|
-
|
|
186
|
+
Moo UI Core is published from the repository root. Core source and package
|
|
187
|
+
outputs live outside `site/`; `dist/` is the package build. The `site/` tree
|
|
188
|
+
owns ui.wpmoo.org documentation, catalog chrome, public metadata, and protected
|
|
189
|
+
preview artwork; it builds to `site-dist/`.
|
|
183
190
|
|
|
184
191
|
```bash
|
|
185
192
|
.venv/bin/python build.py
|
|
@@ -187,23 +194,11 @@ The catalog is intentionally small-tool friendly:
|
|
|
187
194
|
.venv/bin/python -m unittest discover -s tests -v
|
|
188
195
|
```
|
|
189
196
|
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
```bash
|
|
193
|
-
npm run build
|
|
194
|
-
npm run dev
|
|
195
|
-
npm test
|
|
196
|
-
```
|
|
197
|
-
|
|
198
|
-
Browse the local catalog at `http://localhost:4173/` when `dev.py` is running.
|
|
197
|
+
Browse the local catalog at `http://localhost:4173/` while `dev.py` runs.
|
|
199
198
|
|
|
200
199
|
## Licensing
|
|
201
200
|
|
|
202
|
-
Moo UI source code is licensed
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
are not covered by the MIT source code license and remain copyright WPMoo, all
|
|
206
|
-
rights reserved.
|
|
207
|
-
|
|
208
|
-
Vendored third-party material keeps its original license and attribution. See
|
|
201
|
+
Moo UI source code is MIT licensed. WPMoo-generated visual assets under
|
|
202
|
+
`site/static/images/` remain separately protected as described in
|
|
203
|
+
`ASSET_LICENSE.md`. Vendored dependencies retain their original licenses; see
|
|
209
204
|
`LICENSE`, `ASSET_LICENSE.md`, and `THIRD_PARTY_NOTICES.md`.
|
package/THIRD_PARTY_NOTICES.md
CHANGED
|
@@ -36,6 +36,6 @@ license is stored at `vendor/geist/LICENSE`.
|
|
|
36
36
|
|
|
37
37
|
## WPMoo visual assets
|
|
38
38
|
|
|
39
|
-
WPMoo-generated visual assets, including image assets under `static/images/`,
|
|
39
|
+
WPMoo-generated visual assets, including image assets under `site/static/images/`,
|
|
40
40
|
are original WPMoo work and are not licensed under MIT unless explicitly
|
|
41
41
|
stated. See `ASSET_LICENSE.md`.
|
package/certification.json
CHANGED
package/package.json
CHANGED