layered-ui-rails 0.1.0 → 0.1.2
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.
- checksums.yaml +4 -4
- data/AGENTS.md +41 -2
- data/CHANGELOG.md +49 -0
- data/README.md +40 -7
- data/app/assets/fonts/layered_ui/inter.woff2 +0 -0
- data/app/assets/fonts/layered_ui/manrope.woff2 +0 -0
- data/app/assets/images/layered_ui/icon_chevron_down.svg +3 -0
- data/app/assets/images/layered_ui/icon_chevron_right.svg +3 -0
- data/app/assets/images/layered_ui/icon_close.svg +3 -0
- data/app/assets/images/layered_ui/icon_hamburger.svg +3 -0
- data/app/assets/images/layered_ui/icon_moon.svg +3 -0
- data/app/assets/images/layered_ui/icon_sun.svg +3 -0
- data/app/assets/tailwind/layered/ui/styles.css +400 -89
- data/app/javascript/layered_ui/controllers/l_ui/mobile_navigation_controller.js +75 -15
- data/app/javascript/layered_ui/controllers/l_ui/modal_controller.js +6 -28
- data/app/javascript/layered_ui/controllers/l_ui/panel_button_controller.js +361 -0
- data/app/javascript/layered_ui/controllers/l_ui/panel_controller.js +52 -212
- data/app/javascript/layered_ui/controllers/l_ui/panel_resize_controller.js +172 -0
- data/app/javascript/layered_ui/controllers/l_ui/tabs_controller.js +9 -15
- data/app/javascript/layered_ui/controllers/l_ui/theme_controller.js +6 -18
- data/app/javascript/layered_ui/index.js +4 -0
- data/app/javascript/layered_ui/utilities/announce.js +14 -0
- data/app/javascript/layered_ui/utilities/layout.js +21 -0
- data/app/javascript/layered_ui/utilities/storage.js +18 -0
- data/app/views/layered_ui/shared/_field_error.html.erb +11 -5
- data/app/views/layered_ui/shared/_form_errors.html.erb +1 -1
- data/app/views/layouts/layered_ui/_header.html.erb +10 -66
- data/app/views/layouts/layered_ui/_navigation.html.erb +1 -1
- data/app/views/layouts/layered_ui/_panel.html.erb +14 -9
- data/app/views/layouts/layered_ui/application.html.erb +1 -5
- data/config/importmap.rb +11 -2
- data/lib/generators/layered/ui/copy_assets_generator.rb +1 -1
- data/lib/generators/layered/ui/create_overrides_generator.rb +108 -0
- data/lib/generators/layered/ui/import_css_generator.rb +17 -9
- data/lib/generators/layered/ui/import_js_generator.rb +1 -1
- data/lib/generators/layered/ui/install_generator.rb +5 -1
- data/lib/layered/ui/engine.rb +1 -0
- data/lib/layered/ui/version.rb +1 -1
- metadata +16 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: fe1154d1875a81940b409ffb0e923946c22ae9f7cf59aa9ab0d46512d5966662
|
|
4
|
+
data.tar.gz: a21bee7115c594e4ef9add2e357daa0b56730067594a628ff44d80bb63d74778
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 984d5fc4224b7a2bfa1ff81ff63168ea95aa7f3dd7d643fb536eeca17f1de9656b17944af354846cbf8b6063c1ea7788eee91dfb9995b6ee9081ddb88662c6ce
|
|
7
|
+
data.tar.gz: 28646db923197efe733f2af98a2e10ea8be238f0c7b409d3f85be8c032d445257cb0a252b962b420771dce2d3f8c6e306494f12193a6ad5bc83c95656d5c5c8d
|
data/AGENTS.md
CHANGED
|
@@ -22,6 +22,45 @@ Guidance for AI agents working in this repository.
|
|
|
22
22
|
|
|
23
23
|
## Conventions
|
|
24
24
|
|
|
25
|
-
-
|
|
25
|
+
- Use "layered-ui-rails" not "Layered UI" when referring to the project
|
|
26
|
+
- Use normal dashes '-' not long ones '—'
|
|
27
|
+
- Locale: Favour en-GB (British English), unless terms are defined by technical standards (e.g. LICENSE, COLOR).
|
|
26
28
|
- Titles: capitalise first word only (e.g. "This title")
|
|
27
|
-
-
|
|
29
|
+
- Document new styles in the dummy app
|
|
30
|
+
- Use l-ui classes only in engine views, with no additional Tailwind utilities, as Tailwind classes referenced only inside the engine will not be generated by the host app’s build
|
|
31
|
+
- Dummy app documentation pages may use additional Tailwind utilities, but should favour l-ui classes where possible
|
|
32
|
+
- Importmap for JS (no bundler)
|
|
33
|
+
|
|
34
|
+
- CRITICAL: Retain WCAG 2.2 AA compliance. Do not be too pedantic though as this introduces audit loops which are undesirable.
|
|
35
|
+
- A WCAG 2.2 AA table looks like this:
|
|
36
|
+
```
|
|
37
|
+
<table>
|
|
38
|
+
<caption>Agent availability by region</caption>
|
|
39
|
+
|
|
40
|
+
<thead>
|
|
41
|
+
<tr>
|
|
42
|
+
<th scope="col">Agent</th>
|
|
43
|
+
<th scope="col">Region</th>
|
|
44
|
+
<th scope="col">Status</th>
|
|
45
|
+
</tr>
|
|
46
|
+
</thead>
|
|
47
|
+
|
|
48
|
+
<tbody>
|
|
49
|
+
<tr>
|
|
50
|
+
<th scope="row">Agent A</th>
|
|
51
|
+
<td>UK</td>
|
|
52
|
+
<td>Available</td>
|
|
53
|
+
</tr>
|
|
54
|
+
<tr>
|
|
55
|
+
<th scope="row">Agent B</th>
|
|
56
|
+
<td>EU</td>
|
|
57
|
+
<td>Busy</td>
|
|
58
|
+
</tr>
|
|
59
|
+
<tr>
|
|
60
|
+
<th scope="row">Agent C</th>
|
|
61
|
+
<td>US</td>
|
|
62
|
+
<td>Offline</td>
|
|
63
|
+
</tr>
|
|
64
|
+
</tbody>
|
|
65
|
+
</table>
|
|
66
|
+
```
|
data/CHANGELOG.md
CHANGED
|
@@ -4,6 +4,55 @@ All notable changes to this project will be documented in this file. This projec
|
|
|
4
4
|
|
|
5
5
|
## [Unreleased]
|
|
6
6
|
|
|
7
|
+
## [0.1.2] - 2026-02-27
|
|
8
|
+
|
|
9
|
+
### Added
|
|
10
|
+
|
|
11
|
+
- Conversation component with markdown support, typing indicators, and token fade-in animation
|
|
12
|
+
- Scroll-to-bottom button in conversations
|
|
13
|
+
- Movable panel toggle button with drag-and-drop repositioning
|
|
14
|
+
- Link utility class
|
|
15
|
+
- Form field utility class
|
|
16
|
+
|
|
17
|
+
### Changed
|
|
18
|
+
|
|
19
|
+
- Improved message styles and spacing
|
|
20
|
+
- Better table header and secondary nav styling
|
|
21
|
+
- Improved WCAG 2.2 AA compliance across components
|
|
22
|
+
- Switch track unchecked state uses neutral colour instead of danger
|
|
23
|
+
- Extracted shared JavaScript into utility modules (announce, layout, storage)
|
|
24
|
+
- Extracted inline SVG icons (close, moon, sun, hamburger, chevron right) into engine assets
|
|
25
|
+
- Rebuilt CSS from engine source every 5 seconds in development
|
|
26
|
+
|
|
27
|
+
### Fixed
|
|
28
|
+
|
|
29
|
+
- Use `main_app` Devise routes in engine views
|
|
30
|
+
- Overflow on code blocks, surfaces, and markdown tables
|
|
31
|
+
- Margins on small screens when vertically centred
|
|
32
|
+
- Select element styling
|
|
33
|
+
- Tabs controller issue
|
|
34
|
+
- Odd scrolling behaviour
|
|
35
|
+
|
|
36
|
+
## [0.1.1] - 2026-02-17
|
|
37
|
+
|
|
38
|
+
### Added
|
|
39
|
+
|
|
40
|
+
- Accent color tokens (`--accent`, `--accent-foreground`) for easy brand color customisation - primary buttons, active tabs, and active navigation items all inherit from these two variables
|
|
41
|
+
- `layered:ui:create_overrides` generator creates a color overrides file that is preserved across upgrades
|
|
42
|
+
- Bundled Manrope and Inter fonts as self-hosted woff2 files, removing the dependency on Google Fonts CDN
|
|
43
|
+
- CI workflow with GitHub Actions
|
|
44
|
+
- Kamal deployment support for the dummy app
|
|
45
|
+
|
|
46
|
+
### Changed
|
|
47
|
+
|
|
48
|
+
- Active navigation items and tabs now use the accent color instead of the foreground color
|
|
49
|
+
- Install generator now also creates the overrides file and imports it into `application.css`
|
|
50
|
+
- Header icon and logo elements include `w-auto` to prevent layout shift
|
|
51
|
+
|
|
52
|
+
### Removed
|
|
53
|
+
|
|
54
|
+
- Google Fonts preconnect links from the application layout
|
|
55
|
+
|
|
7
56
|
## [0.1.0] - 2026-02-16
|
|
8
57
|
|
|
9
58
|
Initial release.
|
data/README.md
CHANGED
|
@@ -1,8 +1,29 @@
|
|
|
1
1
|
# layered-ui-rails
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
[](https://github.com/layered-ai-public/layered-ui-rails/actions/workflows/ci.yml)
|
|
4
|
+
[](https://www.w3.org/WAI/WCAG22/quickref/)
|
|
5
|
+
[](https://opensource.org/licenses/Apache-2.0)
|
|
6
|
+
|
|
7
|
+
An open source, Rails 8+ engine that provides WCAG 2.2 AA compliant design tokens, Tailwind CSS utilities, and Stimulus controllers for theme switching, mobile navigation, slide-out panels, modals, and tabs. Ships as pure frontend with no server-side dependencies beyond Rails and Tailwind CSS. See the [live demo](https://layered-ui-rails.layered.ai).
|
|
8
|
+
|
|
9
|
+
<table align="center">
|
|
10
|
+
<tr>
|
|
11
|
+
<td align="center">
|
|
12
|
+
<img src="https://github.com/layered-ai-public/layered-ui-rails/raw/refs/heads/main/test/dummy/app/assets/images/light_desktop.webp" alt="Light theme (desktop)" height="300">
|
|
13
|
+
<img src="https://github.com/layered-ai-public/layered-ui-rails/raw/refs/heads/main/test/dummy/app/assets/images/light_mobile.webp" alt="Light theme (mobile)" height="300">
|
|
14
|
+
</td>
|
|
15
|
+
<td width="20"></td>
|
|
16
|
+
<td align="center">
|
|
17
|
+
<img src="https://github.com/layered-ai-public/layered-ui-rails/raw/refs/heads/main/test/dummy/app/assets/images/dark_desktop.webp" alt="Dark theme (desktop)" height="300">
|
|
18
|
+
<img src="https://github.com/layered-ai-public/layered-ui-rails/raw/refs/heads/main/test/dummy/app/assets/images/dark_mobile.webp" alt="Dark theme (mobile)" height="300">
|
|
19
|
+
</td>
|
|
20
|
+
</tr>
|
|
21
|
+
<tr>
|
|
22
|
+
<td align="center"><em>Light theme (desktop and mobile)</em></td>
|
|
23
|
+
<td></td>
|
|
24
|
+
<td align="center"><em>Dark theme (desktop and mobile)</em></td>
|
|
25
|
+
</tr>
|
|
26
|
+
</table>
|
|
6
27
|
|
|
7
28
|
## Getting started
|
|
8
29
|
|
|
@@ -21,10 +42,6 @@ The install generator will:
|
|
|
21
42
|
Then update your application layout to render the engine layout:
|
|
22
43
|
|
|
23
44
|
```erb
|
|
24
|
-
<% content_for :l_ui_navigation_items do %>
|
|
25
|
-
<%= l_ui_navigation_item "Home", root_path %>
|
|
26
|
-
<% end %>
|
|
27
|
-
|
|
28
45
|
<%= render template: "layouts/layered_ui/application" %>
|
|
29
46
|
```
|
|
30
47
|
|
|
@@ -42,11 +59,15 @@ Then update your application layout to render the engine layout:
|
|
|
42
59
|
- **WCAG 2.2 AA compliant** - skip links, focus indicators, ARIA attributes, and 4.5:1 contrast ratios
|
|
43
60
|
- **Components** - buttons, forms, surfaces, tables, tabs, notices, badges, conversations, modals, and pagination
|
|
44
61
|
- **Optional integrations** - Devise authentication and Pagy pagination with styled views
|
|
62
|
+
- **Customisable branding** - Override the default logos and icons and colors
|
|
63
|
+
- **Google Lighthouse** - `layered-ui-rails` scores a [perfect 100](https://github.com/layered-ai-public/layered-ui-rails/raw/refs/heads/main/test/dummy/app/assets/images/lighthouse.webp) across all four Google Lighthouse categories - performance, accessibility, best practices, and SEO
|
|
45
64
|
|
|
46
65
|
## Documentation
|
|
47
66
|
|
|
48
67
|
An online version of the documentation is available at **[layered-ui-rails.layered.ai](https://layered-ui-rails.layered.ai)**.
|
|
49
68
|
|
|
69
|
+
The latest accessibility audit is available at **[audits/accessibility/codex-5_3.md](https://github.com/layered-ai-public/layered-ui-rails/blob/main/audits/accessibility/codex-5_3.md)**.
|
|
70
|
+
|
|
50
71
|
You can also run the included dummy app locally for development and testing:
|
|
51
72
|
|
|
52
73
|
```bash
|
|
@@ -58,6 +79,18 @@ cd test/dummy && bin/rails db:setup && bin/dev
|
|
|
58
79
|
|
|
59
80
|
The dummy app serves as both a living style guide and a test harness, with interactive examples and code snippets for every component.
|
|
60
81
|
|
|
82
|
+
### Deploying the dummy app
|
|
83
|
+
|
|
84
|
+
The dummy app can be deployed with [Kamal](https://kamal-deploy.org). Set the required environment variables and deploy from `test/dummy`:
|
|
85
|
+
|
|
86
|
+
```bash
|
|
87
|
+
cd test/dummy
|
|
88
|
+
export KAMAL_DEPLOY_IP=<server-ip>
|
|
89
|
+
export KAMAL_DEPLOY_DOMAIN=<domain>
|
|
90
|
+
export KAMAL_SSH_KEY=<path-to-ssh-key>
|
|
91
|
+
kamal deploy
|
|
92
|
+
```
|
|
93
|
+
|
|
61
94
|
## Contributing
|
|
62
95
|
|
|
63
96
|
This project is still in its early days. We welcome issues, feedback, and ideas - they genuinely help shape the direction of the project. That said, we're holding off on accepting pull requests until after the 1.0 release so we can stay focused on getting the core foundations right. Once we're there, we'd love to open things up to broader contributions. Thanks for your patience and interest!
|
|
Binary file
|
|
Binary file
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
|
|
3
|
+
</svg>
|