File tree 5 files changed +67
-78
lines changed
5 files changed +67
-78
lines changed Original file line number Diff line number Diff line change @@ -2,79 +2,22 @@ Rails need a plug n play system for creating streamlined ui components.
2
2
3
3
Phlex looks fun and fast, so I thought I'd start creating ui components with it.
4
4
5
- Here is the list of components that are being built. For reference, see here https://ui.shadcn.com/docs/components/accordion
6
-
7
- ✅ Accordion
8
- ✅ Alert
9
- ✅ Alert Dialog
10
- ✅ Aspect Ratio
11
- ✅ Avatar
12
- ✅ Badge
13
- ✅ Button
14
- ✅ Calendar
15
- ✅ Card
16
- ✅ Checkbox
17
- ✅ Checkbox Group
18
- ✅ Codeblock
19
- ✅ Collapsible
20
- ⚪️ Combobox
21
- ✅ Command
22
- ⚪️ Context Menu
23
- ⚪️ Data Table
24
- ✅ Date Picker
25
- ✅ Dialog
26
- ✅ Dropdown Menu
27
- ⚪️ Form
28
- ✅ Hover Card
29
- ✅ Input
30
- ✅ Label
31
- ✅ Link
32
- ⚪️ Menubar
33
- ⚪️ Navigation Menu
34
- ✅ Pagination
35
- ✅ Popover
36
- ⚪️ Progress
37
- ⚪️ Radio Group
38
- ⚪️ Scroll Area
39
- ⚪️ Select
40
- ⚪️ Separator
41
- ✅ Sheet
42
- ⚪️ Skeleton
43
- ⚪️ Slider
44
- ⚪️ Switch
45
- ⚪️ Table
46
- ✅ Tabs
47
- ✅ Textarea
48
- ⚪️ Toast
49
- ⚪️ Toggle
50
- ✅ Tooltip
51
- ✅ Typography
52
-
53
5
## Contributing - Local Development Setup
54
6
55
7
### Install the Gem Locally
56
8
57
9
To contribute to this project, it's recommended to install the gem locally and point to it in your Gemfile:
58
10
59
11
``` ruby
60
- gem " rbui " , path: " ../rbui "
12
+ gem " ruby_ui " , path: " ../ruby_ui "
61
13
```
62
-
63
- ### Link the JavaScript Package
64
-
65
- Similarly, link the rbui-js package locally using yarn:
66
-
67
- ``` bash
68
- yarn add ../rbui
69
- ```
70
-
71
14
## Working with Components
72
15
73
16
### Component Development Workflow
74
17
75
18
1 . Eject the component you want to modify using the generator:
76
19
``` bash
77
- rails generate rbui :component combobox
20
+ rails generate ruby_ui :component combobox
78
21
```
79
22
2 . Make your desired changes to the ejected component
80
23
3 . Once you're satisfied with the modifications, integrate the component back into the gem in the appropriate location
Original file line number Diff line number Diff line change @@ -15,12 +15,12 @@ def view_template
15
15
16
16
def tailwind_config
17
17
<<~CODE
18
- // For importing tailwind styles from rbui gem
18
+ // For importing tailwind styles from ruby_ui gem
19
19
const execSync = require('child_process').execSync;
20
20
21
- // Import rbui gem path (To make sure Tailwind loads classes used by rbui gem)
22
- const outputRBUI = execSync('bundle show phlex_ui', { encoding: 'utf-8' });
23
- const rbui_path = outputRBUI .trim() + '/**/*.rb';
21
+ // Import ruby_ui gem path (To make sure Tailwind loads classes used by ruby_ui gem)
22
+ const outputRUBYUI = execSync('bundle show phlex_ui', { encoding: 'utf-8' });
23
+ const ruby_ui_path = outputRUBYUI .trim() + '/**/*.rb';
24
24
25
25
const defaultTheme = require('tailwindcss/defaultTheme')
26
26
@@ -31,7 +31,7 @@ def tailwind_config
31
31
'./app/helpers/**/*.rb',
32
32
'./app/assets/stylesheets/**/*.css',
33
33
'./app/javascript/**/*.js',
34
- rbui_path
34
+ ruby_ui_path
35
35
],
36
36
theme: {
37
37
container: {
You can’t perform that action at this time.
0 commit comments