Skip to content

Commit d48ca7e

Browse files
gints-erglisgints-erglis
committed
doc: Update main README.md file
1 parent b075726 commit d48ca7e

1 file changed

Lines changed: 61 additions & 57 deletions

File tree

‎README.md‎

Lines changed: 61 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,62 @@
1-
# wudo
2-
Drupal 11 base theme (SDC).
1+
# WUDO
2+
Drupal 11 base theme (SDC, Web Components, Lit).
33

44
Wudo, derived from the Wunder and the Japanese Dō (Path).
55

6-
![Drupal](https://img.shields.io/badge/Drupal-10+-blue?style=flat-square&logo=drupal&logoColor=white)
7-
![Lit](https://img.shields.io/badge/Lit-3.0-blueviolet?style=flat-square&logo=lit&logoColor=white)
8-
![Web Components](https://img.shields.io/badge/Web_Components-Native-orange?style=flat-square&logo=webcomponents&logoColor=white)
6+
![Drupal](https://img.shields.io/badge/Drupal-11-0678BE?style=flat-square&logo=drupal&logoColor=white)
7+
![Storybook](https://img.shields.io/badge/Storybook-10-FF4785?style=flat-square&logo=storybook&logoColor=white)
98
![Vite](https://img.shields.io/badge/Vite-Build_Tool-646CFF?style=flat-square&logo=vite&logoColor=white)
10-
![TypeScript](https://img.shields.io/badge/TypeScript-Ready-3178C6?style=flat-square&logo=typescript&logoColor=white)
9+
![Web Components](https://img.shields.io/badge/Web_Components-Native-orange?style=flat-square&logo=webcomponents&logoColor=white)
10+
![Lit](https://img.shields.io/badge/Lit-3.0-blueviolet?style=flat-square&logo=lit&logoColor=white)
11+
1112

1213
## Why This Stack?
1314
* **Single Directory Components (SDC)** keep markup, styles, metadata, and logic together, making components clear, reusable, and Drupal-native.
1415
* **Vite** is chosen for speed, simplicity, and modern ESM workflows.
16+
* **Lit** provides a lightweight, reactive layer for Web Components. It ensures that complex UI logic remains fast and encapsulated, allowing for high interactivity with minimal overhead
1517
* **Storybook** is isolated by design to enforce clean, native, CMS-agnostic components.
1618

17-
This combination ensures:
18-
* fast development
19-
* predictable behavior
20-
* long-term maintainability
21-
* clear component ownership and structure
19+
## Component Inventory
20+
21+
### Atoms
22+
23+
| Component | Status | SDC | Web Components | Lit |
24+
|:------------------------------------------------------|:----------------|----------|----------------|-----|
25+
| [Button](./components/01-atoms/button) | stable | ✅ | | |
26+
| [Link](./components/01-atoms/link) | experimental | ✅ | | |
27+
| [Paragraph](./components/01-atoms/paragraph) | stable | ✅ | | |
28+
| [Icon](./components/01-atoms/icon) | stable | ✅ | | |
29+
| [Theme Toggler](./components/01-atoms/theme-toggler) | stable | ✅ | ✅ | |
30+
| [Quantity Input](./components/01-atoms/form/quantity) | stable | ✅ | ✅ | |
31+
| [Back To Top](./components/01-atoms/back-to-top) | experimental | ✅ | ✅ | |
32+
33+
### Molecules
34+
| Component | Status | SDC | Web Components | Lit |
35+
|:-----------------------------------------------------------|:--------------|----------|----------------|-----|
36+
| [Accordion](./components/02-molecules/accordion) | stable | ✅ | | |
37+
| [Article card](./components/02-molecules/article-card) | experimental | ✅ | | |
38+
| [Tabs](./components/02-molecules/tabs) | experimental | ✅ | | |
39+
| [Pagination](./components/02-molecules/pagination) | stable | ✅ | | |
40+
| [Countdown](./components/02-molecules/countdown) | experimental | ✅ | ✅ | |
41+
| [Stat Card](./components/02-molecules/stat-card) | experimental | ✅ | ✅ | |
42+
| [Toast Messages](./components/02-molecules/toast-messages) | experimental | ✅ | ✅ | |
43+
| [Attribute List](./components/02-molecules/attribute-list) | stable | ✅ | | |
44+
45+
### Organisms
46+
| Component | Status | SDC | Web Components | Lit |
47+
|:-----------------------------------------------|:-------------|-----------|-----------------|-----------|
48+
| [Header](./components/03-organisms/header) | stable | ✅ | | |
49+
| [Drawer](./components/03-organisms/drawer) | experimental | ✅ | ✅ | |
50+
| [Carousel](./components/03-organisms/carousel) | experimental | ✅ | ✅ | |
51+
| [Favorite](./components/03-organisms/favorite) | experimental | ✅ | ✅ | ✅ |
52+
53+
### Utilities
54+
| Component | Status | Description |
55+
|:------------------------------------------------------------------|:-------------|:--------------------------------------------------------------------------------------------|
56+
| [Link Manager](./components/00-base/01-primitives/link-manager) | experimental | **SDC + Web Component** - automatically manages external links |
57+
| [Sticky Header](./components/00-base/01-primitives/sticky-header) | experimental | **SDC + Web Component** - adds "Smart Sticky" functionality to any header or navigation bar |
58+
| [Reveal](./components/00-base/01-primitives/reveal) | experimental | **SDC + Web Component** - provides a "reveal on scroll" animation for its content |
59+
| [Focus Trap](./components/00-base/01-primitives/focus-trap) | stable | JS only component used by Drawer, Menu toggle |
2260

2361
## Quick Start
2462

@@ -28,17 +66,25 @@ Install all dependencies
2866
npm install
2967
```
3068

31-
Starts the Vite development server
69+
Develop common Drupal styles
3270

3371
```bash
3472
npm run dev
3573
```
36-
74+
Develop SDC components
75+
```bash
76+
npm run dev:sdc
77+
```
3778
Build SDC components and main style.css
3879

3980
```bash
4081
npm run build
4182
```
83+
Run Storybook
84+
```bash
85+
npm run storybook
86+
```
87+
4288
## Theme Renaming
4389
This theme includes a migration script to safely change the theme's machine name. This is particularly useful when using this repository as a starter kit.
4490
### What the script does:
@@ -63,60 +109,18 @@ Run the script:
63109
```
64110
Enter your new theme machine name (e.g., `my_awesome_theme`) when prompted.
65111

66-
## Theme Management
112+
## Theme Light / Dark modes
67113

68114
This project implements a flexible theme system with native Dark Mode support.
69115

70116
### 1. Native System Support (Default)
71117
The theme is **Auto-first** by design. Even without the toggler component, the site automatically inherits the user's OS preference via `prefers-color-scheme`. Dark mode CSS variables are active by default to ensure a seamless experience from the first visit.
72118

73119
### 2. Manual Theme Toggler
74-
The `<wudo-theme-toggler>` Web Component allows users to manually override system settings.
120+
The [Theme Toggler](./components/01-atoms/theme-toggler) Web Component allows users to manually override system settings.
75121
* **Tri-state Logic:** Cycles through **Auto** (System), **Dark**, and **Light** modes.
76122
* **Zero Flicker:** Applies `data-theme` to the `<html>` element instantly to prevent Layout Shift.
77123
* **Fully Localized:** All labels and ARIA attributes are passed from Drupal/Twig, making the component 100% translatable.
78-
## Component Inventory
79-
80-
### Atoms
81-
Fundamental building blocks that cannot be broken down further.
82-
83-
| Component | Status | SDC | Web Components | Lit |
84-
|:------------------------------------------------------|:----------------|----------|----------------|-----|
85-
| [Button](./components/01-atoms/button) | stable | &#x2705; | | |
86-
| [Link](./components/01-atoms/link) | experimental | &#x2705; | | |
87-
| [Paragraph](./components/01-atoms/paragraph) | stable | &#x2705; | | |
88-
| [Icon](./components/01-atoms/icon) | stable | &#x2705; | | |
89-
| [Theme Toggler](./components/01-atoms/theme-toggler) | stable | &#x2705; | &#x2705; | |
90-
| [Quantity Input](./components/01-atoms/form/quantity) | stable | &#x2705; | &#x2705; | |
91-
| [Back To Top](./components/01-atoms/back-to-top) | experimental | &#x2705; | &#x2705; | |
92-
93-
### Molecules
94-
| Component | Status | SDC | Web Components | Lit |
95-
|:-----------------------------------------------------------|:--------------|----------|----------------|-----|
96-
| [Accordion](./components/02-molecules/accordion) | stable | &#x2705; | | |
97-
| [Article card](./components/02-molecules/article-card) | experimental | &#x2705; | | |
98-
| [Tabs](./components/02-molecules/tabs) | experimental | &#x2705; | | |
99-
| [Pagination](./components/02-molecules/pagination) | stable | &#x2705; | | |
100-
| [Countdown](./components/02-molecules/countdown) | experimental | &#x2705; | &#x2705; | |
101-
| [Stat Card](./components/02-molecules/stat-card) | experimental | &#x2705; | &#x2705; | |
102-
| [Toast Messages](./components/02-molecules/toast-messages) | experimental | &#x2705; | &#x2705; | |
103-
| [Attribute List](./components/02-molecules/attribute-list) | stable | &#x2705; | | |
104-
105-
### Organisms
106-
| Component | Status | SDC | Web Components | Lit |
107-
|:-----------------------------------------------|:-------------|-----------|-----------------|-----------|
108-
| [Header](./components/03-organisms/header) | stable | &#x2705; | | |
109-
| [Drawer](./components/03-organisms/drawer) | experimental | &#x2705; | &#x2705; | |
110-
| [Carousel](./components/03-organisms/carousel) | experimental | &#x2705; | &#x2705; | |
111-
| [Favorite](./components/03-organisms/favorite) | experimental | &#x2705; | &#x2705; | &#x2705; |
112-
113-
### Utilities
114-
| Component | Status | Description |
115-
|:------------------------------------------------------------------|:-------------|:--------------------------------------------------------------------------------------------|
116-
| [Link Manager](./components/00-base/01-primitives/link-manager) | experimental | **SDC + Web Component** - automatically manages external links |
117-
| [Sticky Header](./components/00-base/01-primitives/sticky-header) | experimental | **SDC + Web Component** - adds "Smart Sticky" functionality to any header or navigation bar |
118-
| [Reveal](./components/00-base/01-primitives/reveal) | experimental | **SDC + Web Component** - provides a "reveal on scroll" animation for its content |
119-
| [Focus Trap](./components/00-base/01-primitives/focus-trap) | stable | JS only component used by Drawer, Menu toggle |
120124

121125

122126
## Documentation

0 commit comments

Comments
 (0)