diff --git a/README.md b/README.md index a541864..1267f55 100644 --- a/README.md +++ b/README.md @@ -2,54 +2,6 @@ Rails need a plug n play system for creating streamlined ui components. Phlex looks fun and fast, so I thought I'd start creating ui components with it. -Here is the list of components that are being built. For reference, see here https://ui.shadcn.com/docs/components/accordion - -✅ Accordion -✅ Alert -✅ Alert Dialog -✅ Aspect Ratio -✅ Avatar -✅ Badge -✅ Button -✅ Calendar -✅ Card -✅ Checkbox -✅ Checkbox Group -✅ Codeblock -✅ Collapsible -⚪️ Combobox -✅ Command -⚪️ Context Menu -⚪️ Data Table -✅ Date Picker -✅ Dialog -✅ Dropdown Menu -⚪️ Form -✅ Hover Card -✅ Input -✅ Label -✅ Link -⚪️ Menubar -⚪️ Navigation Menu -✅ Pagination -✅ Popover -⚪️ Progress -⚪️ Radio Group -⚪️ Scroll Area -⚪️ Select -⚪️ Separator -✅ Sheet -⚪️ Skeleton -⚪️ Slider -⚪️ Switch -⚪️ Table -✅ Tabs -✅ Textarea -⚪️ Toast -⚪️ Toggle -✅ Tooltip -✅ Typography - ## Contributing - Local Development Setup ### Install the Gem Locally @@ -57,24 +9,15 @@ Here is the list of components that are being built. For reference, see here htt To contribute to this project, it's recommended to install the gem locally and point to it in your Gemfile: ```ruby -gem "rbui", path: "../rbui" +gem "ruby_ui", path: "../ruby_ui" ``` - -### Link the JavaScript Package - -Similarly, link the rbui-js package locally using yarn: - -```bash -yarn add ../rbui -``` - ## Working with Components ### Component Development Workflow 1. Eject the component you want to modify using the generator: ```bash - rails generate rbui:component combobox + rails generate ruby_ui:component combobox ``` 2. Make your desired changes to the ejected component 3. Once you're satisfied with the modifications, integrate the component back into the gem in the appropriate location diff --git a/app/assets/.DS_Store b/app/assets/.DS_Store new file mode 100644 index 0000000..6d489ef Binary files /dev/null and b/app/assets/.DS_Store differ diff --git a/app/assets/images/logo.svg b/app/assets/images/logo.svg index 9208468..a5628db 100644 --- a/app/assets/images/logo.svg +++ b/app/assets/images/logo.svg @@ -2,27 +2,50 @@ + + transform="translate(-53.368365,-19.968138)"> RBUI + y="24.25659">RubyUI diff --git a/app/assets/images/logo_dark.svg b/app/assets/images/logo_dark.svg index 24e22a3..30e7877 100644 --- a/app/assets/images/logo_dark.svg +++ b/app/assets/images/logo_dark.svg @@ -2,27 +2,50 @@ + + transform="translate(-53.368365,-19.968138)"> RBUI + y="24.25659">RubyUI diff --git a/app/views/components/docs/tailwind_config.rb b/app/views/components/docs/tailwind_config.rb index c98ee97..455751a 100644 --- a/app/views/components/docs/tailwind_config.rb +++ b/app/views/components/docs/tailwind_config.rb @@ -15,12 +15,12 @@ def view_template def tailwind_config <<~CODE - // For importing tailwind styles from rbui gem + // For importing tailwind styles from ruby_ui gem const execSync = require('child_process').execSync; - // Import rbui gem path (To make sure Tailwind loads classes used by rbui gem) - const outputRBUI = execSync('bundle show phlex_ui', { encoding: 'utf-8' }); - const rbui_path = outputRBUI.trim() + '/**/*.rb'; + // Import ruby_ui gem path (To make sure Tailwind loads classes used by ruby_ui gem) + const outputRUBYUI = execSync('bundle show phlex_ui', { encoding: 'utf-8' }); + const ruby_ui_path = outputRUBYUI.trim() + '/**/*.rb'; const defaultTheme = require('tailwindcss/defaultTheme') @@ -31,7 +31,7 @@ def tailwind_config './app/helpers/**/*.rb', './app/assets/stylesheets/**/*.css', './app/javascript/**/*.js', - rbui_path + ruby_ui_path ], theme: { container: {