-
Notifications
You must be signed in to change notification settings - Fork 48
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
1 parent
5ef0c06
commit d94d7a6
Showing
8 changed files
with
88 additions
and
11 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1,21 @@ | ||
# Component Generators | ||
|
||
The gem adds generators to your application to help you copy the code from this application into | ||
yours. | ||
|
||
Each time you run the generator it will check to make sure you have the prerequisites, like Tailwind | ||
and the shadcn stylesheet, and if not, do its best to reconcile that for you. | ||
|
||
After that it will copy the component files into your application. If you edit the component, | ||
re-running the generator for it will remove your edits. **Re-running a component generator is | ||
basically reinstalling it and overwriting any changes you might have made.** | ||
|
||
The generator will show up in `rails g` and it is called `shadcn-ui` | ||
|
||
## Usage | ||
|
||
``` | ||
rails generate shadcn-ui <component_name> | ||
``` | ||
|
||
You can list out the available components from `rails g shadcn-ui`. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,54 @@ | ||
# Component Helpers | ||
|
||
The main entry point to using the component is always a `render_<component>` method defined in the | ||
helper located in `app/helpers/components/<component>_helper.rb`. | ||
|
||
The main responsibility of the component's render method is to ultimatelly render the component's | ||
partial, located in `app/views/components/ui/_<component>.html.erb`. | ||
|
||
The component partial generally will integrate all the content passed to the component helper, | ||
whether through arguments or blocks. | ||
|
||
The render helper generally takes a hash of arguments, and a block. The arguments are used for | ||
required values for the HTML or for the content. Blocks generally correspond to inner content or | ||
sections for the component. | ||
|
||
<%= code_partial("dialog/usage", :erb) %> | ||
|
||
Here the `render_dialog` helper takes a block, and the block is used to render the `dialog_trigger` | ||
within the corresponding DOM along with the `dialog_content` as a sibling. | ||
|
||
Inner content is generally rendered with a `content_for` call, and the component render method will | ||
yield to the block, capture the content, and pass it along to the main partial. | ||
|
||
```ruby | ||
module Components::DialogHelper | ||
def render_dialog(**options, &block) | ||
content = capture(&block) if block | ||
render "components/ui/dialog", content: content, **options | ||
end | ||
|
||
def dialog_trigger(&block) | ||
content_for :dialog_trigger, capture(&block), flush: true | ||
end | ||
|
||
def dialog_content(&block) | ||
content_for :dialog_content, capture(&block), flush: true | ||
end | ||
end | ||
``` | ||
|
||
That is a pretty standard example of how the components work. The component partial is responsible | ||
for the end result HTML. | ||
|
||
## Options | ||
|
||
Most of the components accept a variaty of DOM/HTML/Data related options. Sometimes these are | ||
explcitly defined in the render method, and sometimes they are globed as an `**options` argument. | ||
This should be standardized. As much as possible, I've tried to ensure that these are correctly | ||
accounted for and passed along to the final html/dom elements, but I imagine that is not the case | ||
everywhere. **Would love it if you raised an issue when you find this.** | ||
|
||
## Standardiziation | ||
|
||
As I add more components and see edge cases, I will move to standardizing the API. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
# Stimulus Controllers | ||
|
||
Many components are paired with a stimulus controller that lives in | ||
`app/javascript/controllers/ui/<component>_controller.js`. As much as possible I try to avoid adding | ||
depedencies and currently this application is managing them with importmaps and I'm pretty sure if | ||
you're not using importmaps, this breaks. | ||
|
||
The Stimulus controllers frankly need a lot of work. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,3 @@ | ||
module ShadcnUi | ||
VERSION = "0.0.3" | ||
VERSION = "0.0.4" | ||
end |