Skip to content

Commit 640b626

Browse files
mariochavezmariochavez
committed
Adds first component and a README.
1 parent b290e74 commit 640b626

File tree

4 files changed

+210
-11
lines changed

4 files changed

+210
-11
lines changed

‎README.md‎

Lines changed: 199 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,216 @@
1-
# MaquinaComponents
2-
Short description and motivation.
1+
# Maquina Components
32

4-
## Usage
5-
How to use my plugin.
3+
Modern UI components for Ruby on Rails, powered by TailwindCSS and Stimulus
4+
5+
# Maquina Components
6+
7+
Modern UI components for Ruby on Rails, powered by TailwindCSS and Stimulus
8+
9+
![Dashboard Example](/imgs/home.png)
10+
11+
![Form Example](/imgs/new.png)
12+
13+
## Overview
14+
15+
Maquina Components provides a collection of ready-to-use UI components for Ruby on Rails applications. Built with ERB, TailwindCSS 4.0, and Stimulus, it offers a modern and maintainable approach to building beautiful user interfaces without the complexity of JavaScript frameworks.
16+
17+
### Key Features
18+
19+
- 🎨 Pre-built UI components based on shadcn/ui design system
20+
- ⚡️ Powered by TailwindCSS 4.0
21+
- 🧩 Seamless Rails integration with ERB partials
22+
- 📱 Fully responsive components
23+
- 🎯 Interactive behaviors with Stimulus controllers
24+
- 🌙 Dark mode support out of the box
25+
- ♿️ Accessibility-first components
626

727
## Installation
28+
829
Add this line to your application's Gemfile:
930

1031
```ruby
11-
gem "maquina_components"
32+
gem 'maquina-components'
1233
```
1334

14-
And then execute:
35+
Then execute:
36+
1537
```bash
16-
$ bundle
38+
bundle install
1739
```
1840

19-
Or install it yourself as:
20-
```bash
21-
$ gem install maquina_components
41+
### Setup
42+
43+
1. Install TailwindCSS 4.0 in your Rails application
44+
2. Add the required Stimulus controllers to your application
45+
3. Use Shadcn/UI standard color variables:
46+
47+
```css
48+
/* app/assets/stylesheets/application.css */
49+
50+
@theme {
51+
/* Default background color of <body />...etc */
52+
--color-background: var(--background);
53+
--color-foreground: var(--foreground);
54+
55+
/* Primary colors for Button */
56+
--color-primary: var(--primary-color);
57+
--color-primary-foreground: var(--primary-foreground-color);
58+
59+
/* Muted colors */
60+
--color-muted: var(--muted);
61+
--color-muted-foreground: var(--muted-foreground);
62+
63+
/* Secondary colors */
64+
--color-secondary: var(--secondary);
65+
--color-secondary-foreground: var(--secondary-foreground);
66+
67+
/* Accent colors */
68+
--color-accent: var(--accent);
69+
--color-accent-foreground: var(--accent-foreground);
70+
71+
/* Destructive colors */
72+
--color-destructive: var(--destructive);
73+
--color-destructive-foreground: var(--destructive-foreground);
74+
75+
/* Default input color */
76+
--color-input: var(--input);
77+
78+
/* Default border color */
79+
--color-border: var(--border);
80+
81+
/* Default ring color */
82+
--color-ring: var(--ring);
83+
--color-ring-destructive: var(--destructive);
84+
85+
/* Background color for Card */
86+
--color-card: var(--card);
87+
--color-card-foreground: var(--card-foreground);
88+
89+
/* Sidebar colors */
90+
--color-sidebar: var(--sidebar-background);
91+
--color-sidebar-foreground: var(--sidebar-foreground);
92+
93+
--color-sidebar-primary: var(--sidebar-primary);
94+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
95+
96+
--color-sidebar-accent: var(--sidebar-accent);
97+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
98+
99+
--color-sidebar-ring: var(--sidebar-ring);
100+
--color-sidebar-border: var(--sidebar-border);
101+
}
102+
```
103+
104+
## Usage
105+
106+
### Basic Layout Example
107+
108+
```erb
109+
<%# app/views/layouts/application.html.erb %>
110+
<body class="bg-background text-primary font-display antialiased">
111+
<div class="flex min-h-screen">
112+
<%= render "components/sidebar" do %>
113+
<%= render "components/sidebar_header" do %>
114+
<%= render "shared/ui/menu_button",
115+
title: "My App",
116+
subtitle: "Dashboard",
117+
text_icon: "MA" %>
118+
<% end %>
119+
120+
<%= render "components/sidebar_content" do %>
121+
<!-- Sidebar content here -->
122+
<% end %>
123+
<% end %>
124+
125+
<main class="flex-1 pl-(--sidebar-width)">
126+
<%= yield %>
127+
</main>
128+
</div>
129+
</body>
130+
```
131+
132+
### Components
133+
134+
#### Cards
135+
136+
```erb
137+
<%= render "components/card" do %>
138+
<%= render "components/card_header",
139+
title: "Account Balance",
140+
icon: :dollar %>
141+
142+
<%= render "components/card_content" do %>
143+
<p class="text-2xl font-bold">
144+
<%= number_to_currency(@balance) %>
145+
</p>
146+
<p class="text-xs text-muted-foreground">
147+
Current balance
148+
</p>
149+
<% end %>
150+
<% end %>
151+
```
152+
153+
#### Buttons
154+
155+
```erb
156+
<%= link_to new_transaction_path, class: "button-primary" do %>
157+
New Transaction
158+
<%= icon_for(:money) %>
159+
<% end %>
160+
```
161+
162+
## Available Components
163+
164+
Work in progress...
165+
166+
- Layout
167+
- Sidebar
168+
- Card
169+
- Navigation
170+
- Menu Button
171+
- Navigation Menu
172+
- Elements
173+
- Button
174+
- Alert
175+
- Badge
176+
- Forms
177+
- Input
178+
- Select
179+
- Checkbox
180+
- Radio
181+
182+
## Customization
183+
184+
### Theme Configuration
185+
186+
Customize the look and feel of your components by modifying the theme variables:
187+
188+
```css
189+
@theme {
190+
/* Colors */
191+
--color-primary: oklch(21.34% 0 0);
192+
--color-primary-foreground: oklch(98.48% 0 0);
193+
194+
/* Typography */
195+
--font-display: "Inter var", "sans-serif";
196+
197+
/* Spacing */
198+
--sidebar-width: 16rem;
199+
200+
/* ... other customizations ... */
201+
}
22202
```
23203

24204
## Contributing
25-
Contribution directions go here.
205+
206+
Bug reports and pull requests are welcome on GitHub at <https://github.com/maquina-app/maquina_components>.
26207

27208
## License
209+
28210
The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
211+
212+
## Acknowledgments
213+
214+
- Design system inspired by [shadcn/ui](https://ui.shadcn.com/)
215+
- Built with [TailwindCSS](https://tailwindcss.com/)
216+
- Powered by [Ruby on Rails](https://rubyonrails.org/)

‎app/views/components/_alert.html.erb‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<%# locals: (title: nil) %>
2+
<% if notice || alert %>
3+
<div
4+
role="alert"
5+
class="<%= class_names('relative w-full rounded-lg border px-4 py-3 text-sm mx-auto mb-4 [&>svg]:size-4 [&>svg+div]:translate-y-(-3px) [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg~*]:pl-7 max-w-lg', '[&>svg]:text-foreground bg-background text-foreground': notice.present?, 'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive': alert.present?) %>"
6+
>
7+
<%= icon_for(notice.present? ? :check : :circle_alert) %>
8+
<h5 class="mb-1 font-medium leading-none tracking-tight"><%= title || (notice.present? ? "Éxito" : "Error") %></h5>
9+
<div class="text-sm [&_p]:leading-relaxed"><%= notice %></div>
10+
</div>
11+
<% end %>

‎imgs/home.png‎

883 KB
Loading

‎imgs/new.png‎

704 KB
Loading

0 commit comments

Comments
 (0)