Moo UI

https://github.com/wpmoo-org/ui
Admin
Moo UI is a Bootstrap 5.3-native component system with a restrained, shadcn-inspired visual language...
Tokens:5,447
Snippets:97
Trust Score:4
License:MIT
Update:2 months ago
Show doc for...
Tokens:
Raw
### Set up local development environment

Source: https://github.com/wpmoo-org/ui/blob/main/CONTRIBUTING.md

Commands to initialize a virtual environment, install dependencies, and start the development server.

```bash
python3 -m venv .venv
.venv/bin/pip install -r requirements-dev.txt
env npm_config_cache=/private/tmp/wpmoo-npm-cache npm install
.venv/bin/python build.py
.venv/bin/python dev.py
```

--------------------------------

### Quick Start with CDN

Source: https://github.com/wpmoo-org/ui/blob/main/README.md

Load the Moo UI stylesheet and use standard Bootstrap markup for immediate component rendering.

```html
<link rel="stylesheet"
      href="https://unpkg.com/@wpmoo/ui@latest/dist/assets/css/moo-ui.css">

<button type="button" class="btn btn-primary">Create workspace</button>
```

--------------------------------

### Install Dependencies

Source: https://github.com/wpmoo-org/ui/blob/main/README.md

Install the Moo UI package and Bootstrap via npm.

```bash
npm install @wpmoo/ui bootstrap
```

--------------------------------

### Run Development and Build Commands

Source: https://github.com/wpmoo-org/ui/blob/main/README.md

Use these commands to build the project, start the development server, and execute the test suite.

```bash
.venv/bin/python build.py
.venv/bin/python dev.py
.venv/bin/python -m unittest discover -s tests -v
```

--------------------------------

### Verify changes

Source: https://github.com/wpmoo-org/ui/blob/main/CONTRIBUTING.md

Commands to build the project, run unit tests, and check for whitespace errors before submission.

```bash
.venv/bin/python build.py
.venv/bin/python -m unittest discover -s tests -v
git diff --check
```

--------------------------------

### Configure Full Replacement

Source: https://github.com/wpmoo-org/ui/blob/main/README.md

Import the complete Moo UI Bootstrap build to replace standard Bootstrap styles.

```javascript
import "@wpmoo/ui/moo-ui.css";
import "bootstrap/dist/js/bootstrap.bundle.min.js"; // only when plugins are used
```

--------------------------------

### Initialize Optional ESM Components

Source: https://github.com/wpmoo-org/ui/blob/main/README.md

Import and initialize specific Moo UI components as needed for advanced functionality.

```javascript
import Combobox from "@wpmoo/ui/combobox.js";
import ContextMenu from "@wpmoo/ui/context-menu.js";
import DataTable from "@wpmoo/ui/datatable.js";
import Sidebar from "@wpmoo/ui/sidebar.js";

Combobox.getOrCreateInstance(document.querySelector(".combobox"));
ContextMenu.getOrCreateInstance(document.querySelector(".context-menu"));
DataTable.getOrCreateInstance(document.querySelector(".datatable"));
Sidebar.getOrCreateInstance(document.querySelector('[data-slot="sidebar-wrapper"]'));
```

--------------------------------

### Implement WPMOO UI Component

Source: https://github.com/wpmoo-org/ui/blob/main/site/public/llms.txt

Wrap components in the moo-ui class to apply the library's styling.

```html
<div class="moo-ui">
  <button type="button" class="btn btn-primary">Create workspace</button>
</div>
```

--------------------------------

### Configure WPMOO UI Imports

Source: https://github.com/wpmoo-org/ui/blob/main/site/public/llms.txt

Use these import patterns to integrate WPMOO UI styles and required Bootstrap dependencies into your project.

```javascript
import "@wpmoo/ui/moo-ui.css";
import "bootstrap/dist/js/bootstrap.bundle.min.js"; // only when plugins are used
```

```javascript
import "bootstrap/dist/css/bootstrap.min.css";
import "@wpmoo/ui/moo.css";
import "bootstrap/dist/js/bootstrap.bundle.min.js"; // only when plugins are used
```

--------------------------------

### Context Menu JavaScript Initialization

Source: https://github.com/wpmoo-org/ui/blob/main/tests/fixtures/certification/context-menu.html

Initializes the ContextMenu instances for standard and edge-positioned elements.

```javascript
import ContextMenu from "/dist/js/context-menu.js"; const root = document.querySelector("#certification-context-menu"); const edgeRoot = document.querySelector("#certification-context-menu-edge"); window.CertificationContextMenu = ContextMenu; window.certificationContextMenu = ContextMenu.getOrCreateInstance(root); window.certificationContextMenuEdge = ContextMenu.getOrCreateInstance(edgeRoot); document.body.dataset.contextMenuReady = "true";
```

--------------------------------

### Initialize certification popovers

Source: https://github.com/wpmoo-org/ui/blob/main/tests/fixtures/certification/popover.html

Initializes focus and edge popovers using the Bootstrap Popover API.

```javascript
const focusTrigger = document.querySelector("#certification-popover-focus-trigger"); const edgeTrigger = document.querySelector("#certification-popover-edge-trigger"); window.certificationFocusPopover = new bootstrap.Popover(focusTrigger, { container: document.body, }); window.certificationEdgePopover = new bootstrap.Popover(edgeTrigger, { boundary: document.body, container: document.body, }); document.body.dataset.popoverReady = "true";
```

--------------------------------

### Initialize Combobox Component

Source: https://github.com/wpmoo-org/ui/blob/main/tests/fixtures/certification/combobox.html

Initializes the Combobox instance and sets up event listeners for change events.

```javascript
import Combobox from "/dist/js/combobox.js"; const root = document.querySelector("#certification-combobox"); root.addEventListener("change.moo.combobox", event => { document.body.dataset.comboboxValues = event.detail.values.join(","); }); window.CertificationCombobox = Combobox; window.certificationCombobox = Combobox.getOrCreateInstance(root); document.body.dataset.comboboxReady = "true";
```

--------------------------------

### Initialize Data Table Component

Source: https://github.com/wpmoo-org/ui/blob/main/tests/fixtures/certification/datatable.html

Initializes the Data Table instance on the target DOM element and sets a readiness flag on the document body.

```javascript
import DataTable from "/dist/js/datatable.js"; const root = document.querySelector("#certification-datatable"); window.CertificationDataTable = DataTable; window.certificationDataTable = DataTable.getOrCreateInstance(root); document.body.dataset.datatableReady = "true";
```

--------------------------------

### Sidebar JavaScript Initialization

Source: https://github.com/wpmoo-org/ui/blob/main/tests/fixtures/certification/sidebar.html

Initializes the sidebar instance and sets up event listeners to track sidebar state changes on the document body.

```javascript
import Sidebar from "/dist/js/sidebar.js"; const root = document.querySelector('[data-slot="sidebar-wrapper"]'); root.addEventListener("change.moo.sidebar", event => { document.body.dataset.sidebarState = event.detail.state; }); window.CertificationSidebar = Sidebar; window.certificationSidebar = Sidebar.getOrCreateInstance(root); document.body.dataset.sidebarReady = "true";
```

--------------------------------

### Tooltip Certification JavaScript Initialization

Source: https://github.com/wpmoo-org/ui/blob/main/tests/fixtures/certification/tooltip.html

Initializes tooltips for edge and repeat triggers, setting the boundary and container to the document body.

```javascript
const edgeTrigger = document.querySelector("#certification-tooltip-edge-trigger"); const repeatTrigger = document.querySelector("#certification-tooltip-repeat-trigger"); window.certificationEdgeTooltip = new bootstrap.Tooltip(edgeTrigger, { boundary: document.body, container: document.body, }); window.certificationRepeatTooltip = new bootstrap.Tooltip(repeatTrigger, { container: document.body, }); document.body.dataset.tooltipReady = "true";
```

--------------------------------

### Context Menu CSS Styling

Source: https://github.com/wpmoo-org/ui/blob/main/tests/fixtures/certification/context-menu.html

Defines the layout and fixed positioning for the context menu certification fixture.

```css
body { margin: 0; min-height: 100vh; padding: 2rem; } main { max-width: 28rem; } #certification-context-menu-edge { position: fixed; inset-inline-end: 1rem; inset-block-end: 1rem; width: 10rem; }
```

--------------------------------

### Configure Scoped Adoption

Source: https://github.com/wpmoo-org/ui/blob/main/README.md

Load Moo UI as a scoped layer alongside existing Bootstrap styles and wrap components in the .moo-ui class.

```javascript
import "bootstrap/dist/css/bootstrap.min.css";
import "@wpmoo/ui/moo.css";
import "bootstrap/dist/js/bootstrap.bundle.min.js"; // only when plugins are used
```

```html
<div class="moo-ui">
  <button type="button" class="btn btn-primary">Create workspace</button>
</div>
```

--------------------------------

### Switch Component CSS Styles

Source: https://github.com/wpmoo-org/ui/blob/main/tests/fixtures/certification/switch.html

Base styles for the switch certification fixture layout.

```css
body { margin: 0; min-height: 100vh; padding: 2rem; } main { display: grid; gap: 1.5rem; max-width: 42rem; } [data-certification-surface] { display: grid; gap: 0.75rem; }
```

--------------------------------

### Toast fixture CSS styles

Source: https://github.com/wpmoo-org/ui/blob/main/tests/fixtures/certification/toast.html

Basic styling for the toast certification fixture page.

```css
body { margin: 0; min-height: 100vh; padding: 2rem; }
```

--------------------------------

### Initialize and trigger toast notification

Source: https://github.com/wpmoo-org/ui/blob/main/tests/fixtures/certification/toast.html

Initializes a Bootstrap toast instance and attaches a click event listener to the trigger element. Sets the body data attribute to indicate the toast is ready.

```javascript
const toastElement = document.querySelector("#certification-toast"); window.certificationToast = new bootstrap.Toast(toastElement, { autohide: false, }); document.querySelector("#certification-toast-trigger").addEventListener("click", () => { window.certificationToast.show(); }); document.body.dataset.toastReady = "true";
```

--------------------------------

### Button Certification Styles

Source: https://github.com/wpmoo-org/ui/blob/main/tests/fixtures/certification/button.html

CSS styles defining the layout and spacing for the button certification fixture.

```css
body { margin: 0; min-height: 100vh; padding: 2rem; } main { display: grid; gap: 1.5rem; max-width: 42rem; } [data-certification-surface] { align-items: center; display: flex; flex-wrap: wrap; gap: 0.75rem; }
```

--------------------------------

### Tooltip Certification CSS Styles

Source: https://github.com/wpmoo-org/ui/blob/main/tests/fixtures/certification/tooltip.html

Defines the layout and clipping region constraints for the tooltip certification fixture.

```css
body { margin: 0; min-height: 100vh; padding: 0.25rem 2rem 2rem; } main { display: grid; gap: 12rem; justify-items: start; max-width: 28rem; } .certification-clipping-region { max-width: 12rem; overflow: auto; padding: 0.25rem; }
```

--------------------------------

### Separator Component CSS Styles

Source: https://github.com/wpmoo-org/ui/blob/main/tests/fixtures/certification/separator.html

Defines the layout and spacing for the certification fixture surface and main container.

```css
body { margin: 0; min-height: 100vh; padding: 2rem; } main { display: grid; gap: 1rem; max-width: 32rem; } [data-certification-surface] { align-items: center; display: flex; gap: 0.75rem; }
```

--------------------------------

### Popover certification CSS styles

Source: https://github.com/wpmoo-org/ui/blob/main/tests/fixtures/certification/popover.html

Defines the layout and spacing for the popover certification test page.

```css
body { margin: 0; min-height: 100vh; padding: 2rem; } main { display: grid; gap: 8rem; justify-items: start; max-width: 28rem; } .certification-edge-region { margin-inline-start: -1.75rem; }
```

--------------------------------

### Sidebar CSS Styles

Source: https://github.com/wpmoo-org/ui/blob/main/tests/fixtures/certification/sidebar.html

Basic layout styles for the sidebar fixture, ensuring proper margin and padding for the main content area.

```css
body { margin: 0; min-height: 100vh; } .sidebar-inset main { padding: 1.5rem; }
```
Tokens:
Raw