├── test ├── helpers │ └── .keep ├── mailers │ └── .keep ├── models │ └── .keep ├── controllers │ ├── .keep │ └── rails_ui │ │ ├── blocks_controller_test.rb │ │ ├── charts_controller_test.rb │ │ ├── colors_controller_test.rb │ │ ├── themes_controller_test.rb │ │ ├── examples_controller_test.rb │ │ └── playground_controller_test.rb ├── dummy │ ├── log │ │ └── .keep │ ├── lib │ │ └── assets │ │ │ └── .keep │ ├── public │ │ ├── assets │ │ │ └── .keep │ │ ├── favicon.ico │ │ ├── apple-touch-icon.png │ │ └── apple-touch-icon-precomposed.png │ ├── app │ │ ├── assets │ │ │ ├── builds │ │ │ │ └── .keep │ │ │ ├── images │ │ │ │ └── .keep │ │ │ ├── config │ │ │ │ └── manifest.js │ │ │ └── stylesheets │ │ │ │ └── application.css │ │ ├── models │ │ │ ├── concerns │ │ │ │ └── .keep │ │ │ └── application_record.rb │ │ ├── views │ │ │ ├── home │ │ │ │ └── show.erb │ │ │ └── layouts │ │ │ │ ├── mailer.text.erb │ │ │ │ ├── mailer.html.erb │ │ │ │ └── application.html.erb │ │ ├── controllers │ │ │ ├── concerns │ │ │ │ └── .keep │ │ │ ├── application_controller.rb │ │ │ └── home_controller.rb │ │ ├── helpers │ │ │ ├── home_helper.rb │ │ │ └── application_helper.rb │ │ ├── channels │ │ │ └── application_cable │ │ │ │ ├── channel.rb │ │ │ │ └── connection.rb │ │ ├── mailers │ │ │ └── application_mailer.rb │ │ ├── javascript │ │ │ ├── application.js │ │ │ └── controllers │ │ │ │ ├── hello_controller.js │ │ │ │ ├── application.js │ │ │ │ ├── index.js │ │ │ │ └── dark_mode_controller.js │ │ └── jobs │ │ │ └── application_job.rb │ ├── Procfile.dev │ ├── bin │ │ ├── rake │ │ ├── rails │ │ ├── dev │ │ └── setup │ ├── config │ │ ├── routes.rb │ │ ├── environment.rb │ │ ├── cable.yml │ │ ├── boot.rb │ │ ├── initializers │ │ │ ├── filter_parameter_logging.rb │ │ │ ├── permissions_policy.rb │ │ │ ├── assets.rb │ │ │ ├── inflections.rb │ │ │ └── content_security_policy.rb │ │ ├── locales │ │ │ └── en.yml │ │ ├── application.rb │ │ ├── storage.yml │ │ ├── database.yml │ │ └── puma.rb │ ├── config.ru │ ├── test │ │ └── controllers │ │ │ └── home_controller_test.rb │ ├── Rakefile │ ├── spec │ │ └── ui │ │ │ └── components │ │ │ ├── separator_spec.rb │ │ │ └── simple_editor_spec.rb │ ├── esbuild.config.mjs │ └── package.json ├── integration │ ├── .keep │ └── navigation_test.rb ├── fixtures │ └── files │ │ └── .keep ├── rails_ui_test.rb └── test_helper.rb ├── app ├── models │ ├── concerns │ │ └── .keep │ └── rails_ui │ │ ├── application_record.rb │ │ └── user_form.rb ├── assets │ ├── images │ │ └── rails_ui │ │ │ └── .keep │ ├── config │ │ └── rails_ui_manifest.js │ └── stylesheets │ │ └── rails_ui │ │ └── application.css ├── controllers │ ├── concerns │ │ └── .keep │ └── rails_ui │ │ ├── blocks_controller.rb │ │ ├── charts_controller.rb │ │ ├── colors_controller.rb │ │ ├── themes_controller.rb │ │ ├── examples_controller.rb │ │ ├── application_controller.rb │ │ └── playground_controller.rb ├── views │ ├── rails_ui │ │ ├── blocks │ │ │ └── index.erb │ │ ├── charts │ │ │ └── index.erb │ │ ├── colors │ │ │ └── index.erb │ │ ├── examples │ │ │ └── index.erb │ │ ├── themes │ │ │ └── index.html.erb │ │ └── playground │ │ │ ├── sections │ │ │ ├── _checkbox.html.erb │ │ │ ├── _combobox.html.erb │ │ │ ├── _form.html.erb │ │ │ ├── _label.html.erb │ │ │ ├── _select.html.erb │ │ │ ├── _theming.html.erb │ │ │ ├── _toast.html.erb │ │ │ ├── _date_picker.html.erb │ │ │ ├── _drawer.html.erb │ │ │ ├── _hover_card.html.erb │ │ │ ├── _scroll_area.html.erb │ │ │ ├── _slider.html.erb │ │ │ ├── _getting-started.html.erb │ │ │ ├── _navigation_menu.html.erb │ │ │ ├── _radio_group.html.erb │ │ │ ├── _toggle_group.html.erb │ │ │ ├── _data_table.html.erb │ │ │ ├── _installation.html.erb │ │ │ ├── _pagination.html.erb │ │ │ ├── _cli.html.erb │ │ │ ├── _switch.html.erb │ │ │ ├── _changelog.html.erb │ │ │ ├── _introduction.html.erb │ │ │ ├── _figma.html.erb │ │ │ ├── _textarea.html.erb │ │ │ ├── _calendar.html.erb │ │ │ ├── _input_otp.html.erb │ │ │ ├── _carousel.html.erb │ │ │ ├── _dropdown_menu.html.erb │ │ │ ├── _aspect_ratio.html.erb │ │ │ ├── _alert.html.erb │ │ │ ├── _avatar.html.erb │ │ │ ├── _dialog.html.erb │ │ │ ├── _dark_mode.html.erb │ │ │ ├── _progress.html.erb │ │ │ ├── _simple_editor.html.erb │ │ │ ├── _sonner.html.erb │ │ │ ├── _separator.html.erb │ │ │ ├── _card.html.erb │ │ │ └── _accordion.html.erb │ │ │ ├── index.erb │ │ │ ├── _nav.erb │ │ │ └── show.erb │ └── layouts │ │ └── rails_ui │ │ ├── preview.html.erb │ │ └── application.html.erb ├── ui │ ├── components │ │ └── rails_ui │ │ │ ├── toast │ │ │ ├── component.html--.erb-- │ │ │ ├── index.css │ │ │ ├── preview.rb │ │ │ └── component.rb │ │ │ ├── toast_item │ │ │ ├── component.html.erb-- │ │ │ ├── index.css │ │ │ ├── preview.rb │ │ │ ├── index.js │ │ │ └── component.rb │ │ │ ├── aspect_ratio │ │ │ ├── component.html.erb-- │ │ │ ├── index.css │ │ │ ├── preview.rb │ │ │ ├── index.js │ │ │ └── component.rb │ │ │ ├── .DS_Store │ │ │ ├── markdown │ │ │ ├── component.html.erb │ │ │ ├── index.css │ │ │ ├── component.rb │ │ │ ├── preview.rb │ │ │ └── index.js │ │ │ ├── alert │ │ │ ├── index.css │ │ │ ├── preview.rb │ │ │ ├── index.js │ │ │ ├── component.html.erb │ │ │ └── component.rb │ │ │ ├── badge │ │ │ ├── index.css │ │ │ ├── component.html.erb │ │ │ ├── preview.rb │ │ │ ├── index.js │ │ │ └── component.rb │ │ │ ├── card │ │ │ ├── index.css │ │ │ ├── component.rb │ │ │ ├── preview.rb │ │ │ ├── index.js │ │ │ └── component.html.erb │ │ │ ├── sheet │ │ │ ├── index.css │ │ │ ├── preview.rb │ │ │ ├── component.rb │ │ │ ├── component.html.erb │ │ │ └── index.js │ │ │ ├── table │ │ │ ├── index.css │ │ │ ├── preview.rb │ │ │ ├── index.js │ │ │ ├── component.html.erb │ │ │ └── component.rb │ │ │ ├── tabs │ │ │ ├── index.css │ │ │ ├── preview.rb │ │ │ ├── index.js │ │ │ ├── component.rb │ │ │ └── component.html.erb │ │ │ ├── accordion │ │ │ ├── index.css │ │ │ ├── component.erb │ │ │ ├── component.rb │ │ │ ├── preview.rb │ │ │ └── index.js │ │ │ ├── avatar │ │ │ ├── index.css │ │ │ ├── preview.rb │ │ │ ├── component.html.erb │ │ │ ├── index.js │ │ │ └── component.rb │ │ │ ├── breadcrumb │ │ │ ├── index.css │ │ │ ├── preview.rb │ │ │ ├── index.js │ │ │ ├── component.rb │ │ │ └── component.html.erb │ │ │ ├── button │ │ │ ├── index.css │ │ │ ├── component.erb │ │ │ ├── index.js │ │ │ └── preview.rb │ │ │ ├── calendar │ │ │ ├── index.css │ │ │ ├── preview.rb │ │ │ └── component.rb │ │ │ ├── carousel │ │ │ ├── index.css │ │ │ ├── component.rb │ │ │ └── preview.rb │ │ │ ├── command │ │ │ ├── index.css │ │ │ ├── preview.rb │ │ │ ├── component.rb │ │ │ └── index.js │ │ │ ├── dialog │ │ │ ├── index.css │ │ │ ├── preview.rb │ │ │ ├── component.rb │ │ │ └── index.js │ │ │ ├── input_otp │ │ │ ├── index.css │ │ │ ├── preview.rb │ │ │ └── component.rb │ │ │ ├── menubar │ │ │ ├── index.css │ │ │ ├── preview.rb │ │ │ └── component.html.erb │ │ │ ├── popover │ │ │ ├── index.css │ │ │ ├── preview.rb │ │ │ ├── component.rb │ │ │ └── component.html.erb │ │ │ ├── progress │ │ │ ├── index.css │ │ │ ├── preview.rb │ │ │ ├── index.js │ │ │ ├── component.rb │ │ │ └── component.html.erb │ │ │ ├── resizable │ │ │ ├── index.css │ │ │ ├── preview.rb │ │ │ └── component.rb │ │ │ ├── separator │ │ │ ├── index.css │ │ │ ├── component.html.erb │ │ │ ├── preview.rb │ │ │ ├── index.js │ │ │ └── component.rb │ │ │ ├── skeleton │ │ │ ├── index.css │ │ │ ├── preview.rb │ │ │ ├── component.rb │ │ │ ├── index.js │ │ │ └── component.html.erb │ │ │ ├── toggle │ │ │ ├── index.css │ │ │ ├── preview.rb │ │ │ ├── component.html.erb │ │ │ ├── index.js │ │ │ └── component.rb │ │ │ ├── tooltip │ │ │ ├── index.css │ │ │ ├── preview.rb │ │ │ ├── component.html.erb │ │ │ └── component.rb │ │ │ ├── accordion_item │ │ │ ├── index.css │ │ │ ├── component.rb │ │ │ ├── preview.rb │ │ │ ├── index.js │ │ │ └── component.html.erb │ │ │ ├── alert_dialog │ │ │ ├── index.css │ │ │ ├── preview.rb │ │ │ ├── component.rb │ │ │ └── index.js │ │ │ ├── breadcrumb_item │ │ │ ├── index.css │ │ │ ├── preview.rb │ │ │ ├── index.js │ │ │ └── component.rb │ │ │ ├── collapsible │ │ │ ├── index.css │ │ │ ├── preview.rb │ │ │ ├── component.html.erb │ │ │ ├── component.rb │ │ │ └── index.js │ │ │ ├── context_menu │ │ │ ├── index.css │ │ │ ├── component.rb │ │ │ └── preview.rb │ │ │ ├── dropdown_menu │ │ │ ├── index.css │ │ │ ├── preview.rb │ │ │ ├── component.rb │ │ │ ├── component.html.erb │ │ │ └── index.js │ │ │ ├── toggle_group │ │ │ ├── index.css │ │ │ ├── component.rb │ │ │ ├── component.html.erb │ │ │ ├── preview.rb │ │ │ └── index.js │ │ │ ├── dropdown_menu_item │ │ │ ├── index.css │ │ │ ├── preview.rb │ │ │ ├── component.html.erb │ │ │ ├── index.js │ │ │ └── component.rb │ │ │ ├── link │ │ │ ├── component.erb │ │ │ └── component.rb │ │ │ ├── simple_editor │ │ │ ├── index.css │ │ │ ├── preview.rb │ │ │ └── component.rb │ │ │ ├── chart │ │ │ ├── component.erb │ │ │ ├── component.rb │ │ │ └── index.js │ │ │ ├── switch │ │ │ ├── component.rb │ │ │ ├── preview.rb │ │ │ ├── index.css │ │ │ ├── component.html.erb │ │ │ └── index.js │ │ │ ├── component_preview │ │ │ ├── component.rb │ │ │ └── component.erb │ │ │ ├── index.js-- │ │ │ ├── number_input │ │ │ └── index.js │ │ │ └── input_counter │ │ │ └── index.js │ ├── application_view_component_preview.rb │ └── application_view_component.rb ├── helpers │ └── rails_ui │ │ ├── blocks_helper.rb │ │ ├── charts_helper.rb │ │ ├── colors_helper.rb │ │ ├── themes_helper.rb │ │ ├── examples_helper.rb │ │ └── playground_helper.rb ├── jobs │ └── rails_ui │ │ └── application_job.rb └── mailers │ └── rails_ui │ └── application_mailer.rb ├── CHANGELOG.md ├── .vscode └── settings.json ├── lib ├── rails_ui │ ├── version.rb │ └── engine.rb ├── generators │ └── view_component │ │ ├── templates │ │ ├── component.html.erb.tt │ │ ├── index.css.tt │ │ ├── component.rb.tt │ │ ├── preview.rb.tt │ │ ├── component_spec.rb.tt │ │ └── index.js.tt │ │ └── USAGE ├── tasks │ └── rails_ui_tasks.rake └── rails_ui.rb ├── Procfile.dev ├── bin ├── setup ├── dev └── rails ├── Procfile ├── Rakefile ├── package.json ├── config └── routes.rb ├── .gitignore ├── spec ├── ui │ └── components │ │ └── rails_ui │ │ ├── card_spec.rb │ │ ├── tabs_spec.rb │ │ ├── alert_spec.rb │ │ ├── avatar_spec.rb │ │ ├── badge_spec.rb │ │ ├── button_spec.rb │ │ ├── dialog_spec.rb │ │ ├── sheet_spec.rb │ │ ├── table_spec.rb │ │ ├── toast_spec.rb │ │ ├── toggle_spec.rb │ │ ├── command_spec.rb │ │ ├── menubar_spec.rb │ │ ├── popover_spec.rb │ │ ├── tooltip_spec.rb │ │ ├── accordion_spec.rb │ │ ├── calendar_spec.rb │ │ ├── carousel_spec.rb │ │ ├── input_otp_spec.rb │ │ ├── markdown_spec.rb │ │ ├── progress_spec.rb │ │ ├── resizable_spec.rb │ │ ├── skeleton_spec.rb │ │ ├── toast_item_spec.rb │ │ ├── breadcrumb_spec.rb │ │ ├── collapsible_spec.rb │ │ ├── alert_dialog_spec.rb │ │ ├── aspect_ratio_spec.rb │ │ ├── context_menu_spec.rb │ │ ├── dropdown_menu_spec.rb │ │ ├── simple_editor_spec.rb │ │ ├── toggle_group_spec.rb │ │ ├── accordion_demo_spec.rb │ │ ├── accordion_item_spec.rb │ │ ├── breadcrumb_item_spec.rb │ │ ├── accordion_content_spec.rb │ │ ├── accordion_trigger_spec.rb │ │ └── dropdown_menu_item_spec.rb └── frontend │ └── components │ └── rails_ui │ └── button_spec.rb ├── Gemfile ├── MIT-LICENSE └── rails_ui.gemspec /test/helpers/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/mailers/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/models/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/controllers/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/dummy/log/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/integration/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /app/models/concerns/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/dummy/lib/assets/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/fixtures/files/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /app/assets/images/rails_ui/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /app/controllers/concerns/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/dummy/public/assets/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/dummy/public/favicon.ico: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/dummy/app/assets/builds/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/dummy/app/assets/images/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/dummy/app/models/concerns/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/dummy/app/views/home/show.erb: -------------------------------------------------------------------------------- 1 | olii -------------------------------------------------------------------------------- /test/dummy/public/apple-touch-icon.png: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /app/views/rails_ui/blocks/index.erb: -------------------------------------------------------------------------------- 1 | Soon -------------------------------------------------------------------------------- /app/views/rails_ui/charts/index.erb: -------------------------------------------------------------------------------- 1 | Soon -------------------------------------------------------------------------------- /app/views/rails_ui/colors/index.erb: -------------------------------------------------------------------------------- 1 | soon -------------------------------------------------------------------------------- /app/views/rails_ui/examples/index.erb: -------------------------------------------------------------------------------- 1 | soon -------------------------------------------------------------------------------- /test/dummy/app/controllers/concerns/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | + Aug 2024 2 | + init components -------------------------------------------------------------------------------- /app/views/rails_ui/themes/index.html.erb: -------------------------------------------------------------------------------- 1 | Soon -------------------------------------------------------------------------------- /test/dummy/public/apple-touch-icon-precomposed.png: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /app/views/rails_ui/playground/sections/_checkbox.html.erb: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /app/views/rails_ui/playground/sections/_combobox.html.erb: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /app/views/rails_ui/playground/sections/_form.html.erb: -------------------------------------------------------------------------------- 1 | soon -------------------------------------------------------------------------------- /app/views/rails_ui/playground/sections/_label.html.erb: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /app/views/rails_ui/playground/sections/_select.html.erb: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /app/views/rails_ui/playground/sections/_theming.html.erb: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /app/views/rails_ui/playground/sections/_toast.html.erb: -------------------------------------------------------------------------------- 1 | Soon -------------------------------------------------------------------------------- /app/views/rails_ui/playground/sections/_date_picker.html.erb: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /app/views/rails_ui/playground/sections/_drawer.html.erb: -------------------------------------------------------------------------------- 1 | soon -------------------------------------------------------------------------------- /app/views/rails_ui/playground/sections/_hover_card.html.erb: -------------------------------------------------------------------------------- 1 | soon -------------------------------------------------------------------------------- /app/views/rails_ui/playground/sections/_scroll_area.html.erb: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /app/views/rails_ui/playground/sections/_slider.html.erb: -------------------------------------------------------------------------------- 1 | soon -------------------------------------------------------------------------------- /test/dummy/app/views/layouts/mailer.text.erb: -------------------------------------------------------------------------------- 1 | <%= yield %> 2 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "git.ignoreLimitWarning": true 3 | } -------------------------------------------------------------------------------- /app/views/rails_ui/playground/sections/_getting-started.html.erb: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /app/views/rails_ui/playground/sections/_navigation_menu.html.erb: -------------------------------------------------------------------------------- 1 | soon -------------------------------------------------------------------------------- /app/views/rails_ui/playground/sections/_radio_group.html.erb: -------------------------------------------------------------------------------- 1 | soon -------------------------------------------------------------------------------- /app/views/rails_ui/playground/sections/_toggle_group.html.erb: -------------------------------------------------------------------------------- 1 | soon -------------------------------------------------------------------------------- /test/dummy/app/helpers/home_helper.rb: -------------------------------------------------------------------------------- 1 | module HomeHelper 2 | end 3 | -------------------------------------------------------------------------------- /app/views/rails_ui/playground/sections/_data_table.html.erb: -------------------------------------------------------------------------------- 1 | data table soon -------------------------------------------------------------------------------- /app/views/rails_ui/playground/sections/_installation.html.erb: -------------------------------------------------------------------------------- 1 | _installation -------------------------------------------------------------------------------- /app/views/rails_ui/playground/sections/_pagination.html.erb: -------------------------------------------------------------------------------- 1 | _pagination soon -------------------------------------------------------------------------------- /lib/rails_ui/version.rb: -------------------------------------------------------------------------------- 1 | module RailsUi 2 | VERSION = "0.1.0" 3 | end 4 | -------------------------------------------------------------------------------- /test/dummy/app/helpers/application_helper.rb: -------------------------------------------------------------------------------- 1 | module ApplicationHelper 2 | end 3 | -------------------------------------------------------------------------------- /app/assets/config/rails_ui_manifest.js: -------------------------------------------------------------------------------- 1 | //= link_directory ../stylesheets/rails_ui .css 2 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/toast/component.html--.erb--: -------------------------------------------------------------------------------- 1 |
Add Toast template here
2 | -------------------------------------------------------------------------------- /app/helpers/rails_ui/blocks_helper.rb: -------------------------------------------------------------------------------- 1 | module RailsUi 2 | module BlocksHelper 3 | end 4 | end 5 | -------------------------------------------------------------------------------- /app/helpers/rails_ui/charts_helper.rb: -------------------------------------------------------------------------------- 1 | module RailsUi 2 | module ChartsHelper 3 | end 4 | end 5 | -------------------------------------------------------------------------------- /app/helpers/rails_ui/colors_helper.rb: -------------------------------------------------------------------------------- 1 | module RailsUi 2 | module ColorsHelper 3 | end 4 | end 5 | -------------------------------------------------------------------------------- /app/helpers/rails_ui/themes_helper.rb: -------------------------------------------------------------------------------- 1 | module RailsUi 2 | module ThemesHelper 3 | end 4 | end 5 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/toast_item/component.html.erb--: -------------------------------------------------------------------------------- 1 |
Add ToastItem template here
2 | -------------------------------------------------------------------------------- /app/helpers/rails_ui/examples_helper.rb: -------------------------------------------------------------------------------- 1 | module RailsUi 2 | module ExamplesHelper 3 | end 4 | end 5 | -------------------------------------------------------------------------------- /app/helpers/rails_ui/playground_helper.rb: -------------------------------------------------------------------------------- 1 | module RailsUi 2 | module PlaygroundHelper 3 | end 4 | end 5 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/aspect_ratio/component.html.erb--: -------------------------------------------------------------------------------- 1 |
Add AspectRatio template here
2 | -------------------------------------------------------------------------------- /lib/generators/view_component/templates/component.html.erb.tt: -------------------------------------------------------------------------------- 1 |
Add <%= class_name %> template here
2 | -------------------------------------------------------------------------------- /app/jobs/rails_ui/application_job.rb: -------------------------------------------------------------------------------- 1 | module RailsUi 2 | class ApplicationJob < ActiveJob::Base 3 | end 4 | end 5 | -------------------------------------------------------------------------------- /test/dummy/Procfile.dev: -------------------------------------------------------------------------------- 1 | web: bin/rails server 2 | css: bin/rails tailwindcss:watch 3 | js: npm run build --watch 4 | -------------------------------------------------------------------------------- /test/dummy/app/controllers/application_controller.rb: -------------------------------------------------------------------------------- 1 | class ApplicationController < ActionController::Base 2 | end 3 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michelson/rails-ui/HEAD/app/ui/components/rails_ui/.DS_Store -------------------------------------------------------------------------------- /app/ui/components/rails_ui/markdown/component.html.erb: -------------------------------------------------------------------------------- 1 |
2 | <%= content %> 3 |
4 | -------------------------------------------------------------------------------- /test/dummy/bin/rake: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env ruby 2 | require_relative "../config/boot" 3 | require "rake" 4 | Rake.application.run 5 | -------------------------------------------------------------------------------- /lib/tasks/rails_ui_tasks.rake: -------------------------------------------------------------------------------- 1 | # desc "Explaining what the task does" 2 | # task :rails_ui do 3 | # # Task goes here 4 | # end 5 | -------------------------------------------------------------------------------- /test/dummy/app/controllers/home_controller.rb: -------------------------------------------------------------------------------- 1 | class HomeController < ApplicationController 2 | layout "application" 3 | end 4 | -------------------------------------------------------------------------------- /test/dummy/app/models/application_record.rb: -------------------------------------------------------------------------------- 1 | class ApplicationRecord < ActiveRecord::Base 2 | primary_abstract_class 3 | end 4 | -------------------------------------------------------------------------------- /app/controllers/rails_ui/blocks_controller.rb: -------------------------------------------------------------------------------- 1 | module RailsUi 2 | class BlocksController < ApplicationController 3 | end 4 | end 5 | -------------------------------------------------------------------------------- /app/controllers/rails_ui/charts_controller.rb: -------------------------------------------------------------------------------- 1 | module RailsUi 2 | class ChartsController < ApplicationController 3 | end 4 | end 5 | -------------------------------------------------------------------------------- /app/controllers/rails_ui/colors_controller.rb: -------------------------------------------------------------------------------- 1 | module RailsUi 2 | class ColorsController < ApplicationController 3 | end 4 | end 5 | -------------------------------------------------------------------------------- /app/controllers/rails_ui/themes_controller.rb: -------------------------------------------------------------------------------- 1 | module RailsUi 2 | class ThemesController < ApplicationController 3 | end 4 | end 5 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/alert/index.css: -------------------------------------------------------------------------------- 1 | /* Use component-local class names and add them to HTML via #class_for(name) helper */ 2 | 3 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/badge/index.css: -------------------------------------------------------------------------------- 1 | /* Use component-local class names and add them to HTML via #class_for(name) helper */ 2 | 3 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/card/index.css: -------------------------------------------------------------------------------- 1 | /* Use component-local class names and add them to HTML via #class_for(name) helper */ 2 | 3 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/sheet/index.css: -------------------------------------------------------------------------------- 1 | /* Use component-local class names and add them to HTML via #class_for(name) helper */ 2 | 3 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/table/index.css: -------------------------------------------------------------------------------- 1 | /* Use component-local class names and add them to HTML via #class_for(name) helper */ 2 | 3 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/tabs/index.css: -------------------------------------------------------------------------------- 1 | /* Use component-local class names and add them to HTML via #class_for(name) helper */ 2 | 3 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/toast/index.css: -------------------------------------------------------------------------------- 1 | /* Use component-local class names and add them to HTML via #class_for(name) helper */ 2 | 3 | -------------------------------------------------------------------------------- /app/controllers/rails_ui/examples_controller.rb: -------------------------------------------------------------------------------- 1 | module RailsUi 2 | class ExamplesController < ApplicationController 3 | end 4 | end 5 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/accordion/index.css: -------------------------------------------------------------------------------- 1 | /* Use component-local class names and add them to HTML via #class_for(name) helper */ 2 | 3 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/avatar/index.css: -------------------------------------------------------------------------------- 1 | /* Use component-local class names and add them to HTML via #class_for(name) helper */ 2 | 3 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/breadcrumb/index.css: -------------------------------------------------------------------------------- 1 | /* Use component-local class names and add them to HTML via #class_for(name) helper */ 2 | 3 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/button/index.css: -------------------------------------------------------------------------------- 1 | /* Use component-local class names and add them to HTML via #class_for(name) helper */ 2 | 3 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/calendar/index.css: -------------------------------------------------------------------------------- 1 | /* Use component-local class names and add them to HTML via #class_for(name) helper */ 2 | 3 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/carousel/index.css: -------------------------------------------------------------------------------- 1 | /* Use component-local class names and add them to HTML via #class_for(name) helper */ 2 | 3 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/command/index.css: -------------------------------------------------------------------------------- 1 | /* Use component-local class names and add them to HTML via #class_for(name) helper */ 2 | 3 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/dialog/index.css: -------------------------------------------------------------------------------- 1 | /* Use component-local class names and add them to HTML via #class_for(name) helper */ 2 | 3 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/input_otp/index.css: -------------------------------------------------------------------------------- 1 | /* Use component-local class names and add them to HTML via #class_for(name) helper */ 2 | 3 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/markdown/index.css: -------------------------------------------------------------------------------- 1 | /* Use component-local class names and add them to HTML via #class_for(name) helper */ 2 | 3 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/menubar/index.css: -------------------------------------------------------------------------------- 1 | /* Use component-local class names and add them to HTML via #class_for(name) helper */ 2 | 3 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/popover/index.css: -------------------------------------------------------------------------------- 1 | /* Use component-local class names and add them to HTML via #class_for(name) helper */ 2 | 3 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/progress/index.css: -------------------------------------------------------------------------------- 1 | /* Use component-local class names and add them to HTML via #class_for(name) helper */ 2 | 3 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/resizable/index.css: -------------------------------------------------------------------------------- 1 | /* Use component-local class names and add them to HTML via #class_for(name) helper */ 2 | 3 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/separator/index.css: -------------------------------------------------------------------------------- 1 | /* Use component-local class names and add them to HTML via #class_for(name) helper */ 2 | 3 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/skeleton/index.css: -------------------------------------------------------------------------------- 1 | /* Use component-local class names and add them to HTML via #class_for(name) helper */ 2 | 3 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/toast_item/index.css: -------------------------------------------------------------------------------- 1 | /* Use component-local class names and add them to HTML via #class_for(name) helper */ 2 | 3 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/toggle/index.css: -------------------------------------------------------------------------------- 1 | /* Use component-local class names and add them to HTML via #class_for(name) helper */ 2 | 3 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/tooltip/index.css: -------------------------------------------------------------------------------- 1 | /* Use component-local class names and add them to HTML via #class_for(name) helper */ 2 | 3 | -------------------------------------------------------------------------------- /lib/rails_ui.rb: -------------------------------------------------------------------------------- 1 | require "rails_ui/version" 2 | require "rails_ui/engine" 3 | 4 | module RailsUi 5 | # Your code goes here... 6 | end 7 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/accordion_item/index.css: -------------------------------------------------------------------------------- 1 | /* Use component-local class names and add them to HTML via #class_for(name) helper */ 2 | 3 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/alert_dialog/index.css: -------------------------------------------------------------------------------- 1 | /* Use component-local class names and add them to HTML via #class_for(name) helper */ 2 | 3 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/aspect_ratio/index.css: -------------------------------------------------------------------------------- 1 | /* Use component-local class names and add them to HTML via #class_for(name) helper */ 2 | 3 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/breadcrumb_item/index.css: -------------------------------------------------------------------------------- 1 | /* Use component-local class names and add them to HTML via #class_for(name) helper */ 2 | 3 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/collapsible/index.css: -------------------------------------------------------------------------------- 1 | /* Use component-local class names and add them to HTML via #class_for(name) helper */ 2 | 3 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/context_menu/index.css: -------------------------------------------------------------------------------- 1 | /* Use component-local class names and add them to HTML via #class_for(name) helper */ 2 | 3 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/dropdown_menu/index.css: -------------------------------------------------------------------------------- 1 | /* Use component-local class names and add them to HTML via #class_for(name) helper */ 2 | 3 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/separator/component.html.erb: -------------------------------------------------------------------------------- 1 | <%= tag.div role: "none", "data-orientation": @orientation, class: separator_class %> 2 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/toggle_group/index.css: -------------------------------------------------------------------------------- 1 | /* Use component-local class names and add them to HTML via #class_for(name) helper */ 2 | 3 | -------------------------------------------------------------------------------- /lib/generators/view_component/templates/index.css.tt: -------------------------------------------------------------------------------- 1 | /* Use component-local class names and add them to HTML via #class_for(name) helper */ 2 | 3 | -------------------------------------------------------------------------------- /test/dummy/app/channels/application_cable/channel.rb: -------------------------------------------------------------------------------- 1 | module ApplicationCable 2 | class Channel < ActionCable::Channel::Base 3 | end 4 | end 5 | -------------------------------------------------------------------------------- /test/dummy/config/routes.rb: -------------------------------------------------------------------------------- 1 | Rails.application.routes.draw do 2 | root to: "home#show" 3 | 4 | mount RailsUi::Engine => "/rails_ui" 5 | end 6 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/dropdown_menu_item/index.css: -------------------------------------------------------------------------------- 1 | /* Use component-local class names and add them to HTML via #class_for(name) helper */ 2 | 3 | -------------------------------------------------------------------------------- /test/dummy/app/channels/application_cable/connection.rb: -------------------------------------------------------------------------------- 1 | module ApplicationCable 2 | class Connection < ActionCable::Connection::Base 3 | end 4 | end 5 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/link/component.erb: -------------------------------------------------------------------------------- 1 | 2 | 3 | <%= link_to action, **button_attributes do %> 4 | <%= icon if icon %> 5 | <%= content %> 6 | <% end %> -------------------------------------------------------------------------------- /app/ui/components/rails_ui/markdown/component.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | class RailsUi::Markdown::Component < ApplicationViewComponent 4 | end 5 | -------------------------------------------------------------------------------- /test/dummy/app/mailers/application_mailer.rb: -------------------------------------------------------------------------------- 1 | class ApplicationMailer < ActionMailer::Base 2 | default from: "from@example.com" 3 | layout "mailer" 4 | end 5 | -------------------------------------------------------------------------------- /Procfile.dev: -------------------------------------------------------------------------------- 1 | web: cd test/dummy && bin/rails server -p $PORT -b 0.0.0.0 2 | css: cd test/dummy && bin/rails tailwindcss:watch 3 | js: cd test/dummy && npm run build_dev -------------------------------------------------------------------------------- /app/models/rails_ui/application_record.rb: -------------------------------------------------------------------------------- 1 | module RailsUi 2 | class ApplicationRecord < ActiveRecord::Base 3 | self.abstract_class = true 4 | end 5 | end 6 | -------------------------------------------------------------------------------- /app/ui/application_view_component_preview.rb: -------------------------------------------------------------------------------- 1 | class ApplicationViewComponentPreview < ViewComponentContrib::Preview::Base 2 | self.abstract_class = true 3 | end 4 | -------------------------------------------------------------------------------- /app/controllers/rails_ui/application_controller.rb: -------------------------------------------------------------------------------- 1 | module RailsUi 2 | class ApplicationController < ActionController::Base 3 | def ui 4 | end 5 | end 6 | end 7 | -------------------------------------------------------------------------------- /test/dummy/app/assets/config/manifest.js: -------------------------------------------------------------------------------- 1 | //= link_tree ../images 2 | // link_directory ../stylesheets .css 3 | //= link rails_ui_manifest.js 4 | //= link_tree ../builds 5 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/button/component.erb: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | <%= tag.button(**button_attributes) do 5 | concat(icon) if icon? 6 | concat(content) 7 | end 8 | %> 9 | -------------------------------------------------------------------------------- /bin/setup: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | 3 | # Navigate to the dummy app and install npm packages 4 | npm --prefix ./test/dummy install 5 | 6 | # Install Ruby gems 7 | bundle install -------------------------------------------------------------------------------- /test/dummy/bin/rails: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env ruby 2 | APP_PATH = File.expand_path("../config/application", __dir__) 3 | require_relative "../config/boot" 4 | require "rails/commands" 5 | -------------------------------------------------------------------------------- /test/dummy/config/environment.rb: -------------------------------------------------------------------------------- 1 | # Load the Rails application. 2 | require_relative "application" 3 | 4 | # Initialize the Rails application. 5 | Rails.application.initialize! 6 | -------------------------------------------------------------------------------- /test/rails_ui_test.rb: -------------------------------------------------------------------------------- 1 | require "test_helper" 2 | 3 | class RailsUiTest < ActiveSupport::TestCase 4 | test "it has a version number" do 5 | assert RailsUi::VERSION 6 | end 7 | end 8 | -------------------------------------------------------------------------------- /app/mailers/rails_ui/application_mailer.rb: -------------------------------------------------------------------------------- 1 | module RailsUi 2 | class ApplicationMailer < ActionMailer::Base 3 | default from: "from@example.com" 4 | layout "mailer" 5 | end 6 | end 7 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/simple_editor/index.css: -------------------------------------------------------------------------------- 1 | /* Use component-local class names and add them to HTML via #class_for(name) helper */ 2 | 3 | .ProseMirror:focus { 4 | outline: none; 5 | } 6 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/toggle_group/component.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | class RailsUi::ToggleGroup::Component < ApplicationViewComponent 4 | renders_many :toggles 5 | end 6 | -------------------------------------------------------------------------------- /test/integration/navigation_test.rb: -------------------------------------------------------------------------------- 1 | require "test_helper" 2 | 3 | class NavigationTest < ActionDispatch::IntegrationTest 4 | # test "the truth" do 5 | # assert true 6 | # end 7 | end 8 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/carousel/component.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | class RailsUi::Carousel::Component < ApplicationViewComponent 4 | option :items, default: -> { [] } 5 | end 6 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/link/component.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | class RailsUi::Link::Component < RailsUi::Button::Component 4 | option :action, default: -> { "#" } 5 | 6 | end 7 | -------------------------------------------------------------------------------- /test/dummy/config.ru: -------------------------------------------------------------------------------- 1 | # This file is used by Rack-based servers to start the application. 2 | 3 | require_relative "config/environment" 4 | 5 | run Rails.application 6 | Rails.application.load_server 7 | -------------------------------------------------------------------------------- /test/dummy/app/javascript/application.js: -------------------------------------------------------------------------------- 1 | // Entry point for the build script in your package.json 2 | import { Turbo } from '@hotwired/turbo-rails'; 3 | window.Turbo = Turbo; 4 | 5 | import "./controllers" 6 | -------------------------------------------------------------------------------- /test/dummy/test/controllers/home_controller_test.rb: -------------------------------------------------------------------------------- 1 | require "test_helper" 2 | 3 | class HomeControllerTest < ActionDispatch::IntegrationTest 4 | # test "the truth" do 5 | # assert true 6 | # end 7 | end 8 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/toggle_group/component.html.erb: -------------------------------------------------------------------------------- 1 |
5 | <%= toggles %> 6 |
-------------------------------------------------------------------------------- /Procfile: -------------------------------------------------------------------------------- 1 | web: cd test/dummy && bin/rails server -p $PORT -b 0.0.0.0 2 | # release: cd spec/dummy && bin/rails assets:precompile 3 | #css: cd spec/dummy && bin/rails tailwindcss:watch 4 | #js: cd spec/dummy && yarn build --watch -------------------------------------------------------------------------------- /Rakefile: -------------------------------------------------------------------------------- 1 | require "bundler/setup" 2 | 3 | APP_RAKEFILE = File.expand_path("test/dummy/Rakefile", __dir__) 4 | load "rails/tasks/engine.rake" 5 | 6 | load "rails/tasks/statistics.rake" 7 | 8 | require "bundler/gem_tasks" 9 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/accordion_item/component.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | class RailsUi::AccordionItem::Component < ApplicationViewComponent 4 | option :value 5 | 6 | renders_one :trigger 7 | end 8 | -------------------------------------------------------------------------------- /app/views/rails_ui/playground/sections/_cli.html.erb: -------------------------------------------------------------------------------- 1 | <%= render RailsUi::Markdown::Component.new do %> 2 |
3 | CLI soon! 4 |
5 | <% end %> -------------------------------------------------------------------------------- /app/ui/components/rails_ui/card/component.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | class RailsUi::Card::Component < ApplicationViewComponent 4 | option :title 5 | option :description 6 | option :footer, default: -> {} 7 | end 8 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/badge/component.html.erb: -------------------------------------------------------------------------------- 1 |
2 | <% if icon.present? %> 3 | <%= icon.html_safe %> 4 | <% end %> 5 | <%= content %> 6 |
-------------------------------------------------------------------------------- /test/dummy/app/javascript/controllers/hello_controller.js: -------------------------------------------------------------------------------- 1 | import { Controller } from "@hotwired/stimulus" 2 | 3 | export default class extends Controller { 4 | connect() { 5 | this.element.textContent = "Hello World!" 6 | } 7 | } 8 | 9 | -------------------------------------------------------------------------------- /lib/generators/view_component/templates/component.rb.tt: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | class RailsUi::<%= class_name %>::Component < <%= parent_class %> 4 | <%- if initialize_signature -%> 5 | <%= initialize_signature %> 6 | <%- end -%> 7 | end 8 | -------------------------------------------------------------------------------- /app/views/rails_ui/playground/sections/_switch.html.erb: -------------------------------------------------------------------------------- 1 | 2 | 3 | <%= render RailsUi::Switch::Component.new( 4 | id: 'campaign-toggle', 5 | label: "activate", 6 | checked: false, 7 | disabled: false, 8 | url: "/foo", 9 | on_change: '') 10 | %> -------------------------------------------------------------------------------- /test/dummy/config/cable.yml: -------------------------------------------------------------------------------- 1 | development: 2 | adapter: async 3 | 4 | test: 5 | adapter: test 6 | 7 | production: 8 | adapter: redis 9 | url: <%= ENV.fetch("REDIS_URL") { "redis://localhost:6379/1" } %> 10 | channel_prefix: dummy_production 11 | -------------------------------------------------------------------------------- /test/dummy/Rakefile: -------------------------------------------------------------------------------- 1 | # Add your own tasks in files placed in lib/tasks ending in .rake, 2 | # for example lib/tasks/capistrano.rake, and they will automatically be available to Rake. 3 | 4 | require_relative "config/application" 5 | 6 | Rails.application.load_tasks 7 | -------------------------------------------------------------------------------- /test/dummy/config/boot.rb: -------------------------------------------------------------------------------- 1 | # Set up gems listed in the Gemfile. 2 | ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../../Gemfile", __dir__) 3 | 4 | require "bundler/setup" if File.exist?(ENV["BUNDLE_GEMFILE"]) 5 | $LOAD_PATH.unshift File.expand_path("../../../lib", __dir__) 6 | -------------------------------------------------------------------------------- /app/views/rails_ui/playground/sections/_changelog.html.erb: -------------------------------------------------------------------------------- 1 | <%= render RailsUi::Markdown::Component.new do %> 2 |
3 | <%= File.open(RailsUi::Engine.root.join "CHANGELOG.md").read %> 4 |
5 | <% end %> -------------------------------------------------------------------------------- /app/views/rails_ui/playground/sections/_introduction.html.erb: -------------------------------------------------------------------------------- 1 | <%= render RailsUi::Markdown::Component.new do %> 2 |
3 | <%= raw File.open(RailsUi::Engine.root.join "README.md").read %> 4 |
5 | <% end %> -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "build": "cd test/dummy && npm install && SKIP_YARN_INSTALL=true bin/rails assets:precompile --trace", 4 | "heroku-postbuild": "npm run build" 5 | }, 6 | "packageManager": "npm", 7 | "engines": { 8 | "node": "21.x" 9 | } 10 | } -------------------------------------------------------------------------------- /app/ui/components/rails_ui/accordion/component.erb: -------------------------------------------------------------------------------- 1 | 2 |
" 3 | data-controller="ui-accordion" data-accordion-type="<%= @type%>"> 4 | <% items.each do |item| %> 5 | <%= item %> 6 | <% end %> 7 |
-------------------------------------------------------------------------------- /app/views/rails_ui/playground/index.erb: -------------------------------------------------------------------------------- 1 | 2 |
3 |

4 | RailsUI Components Playground 5 |

6 | 7 |
8 | 9 |
10 | 11 |
12 | 13 |
14 |
-------------------------------------------------------------------------------- /app/ui/components/rails_ui/context_menu/component.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | class RailsUi::ContextMenu::Component < ApplicationViewComponent 4 | option :menu_items, default: -> { [] } 5 | option :side, default: -> { "right" } 6 | option :align, default: -> { "start" } 7 | end 8 | -------------------------------------------------------------------------------- /config/routes.rb: -------------------------------------------------------------------------------- 1 | RailsUi::Engine.routes.draw do 2 | root to: "playground#index" 3 | get "playground(/:section)", to: "playground#show", as: :playground 4 | resources :blocks 5 | resources :charts 6 | resources :themes 7 | resources :examples 8 | resources :colors 9 | end 10 | -------------------------------------------------------------------------------- /bin/dev: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | 3 | if gem list --no-installed --exact --silent foreman; then 4 | echo "Installing foreman..." 5 | gem install foreman 6 | fi 7 | 8 | # Default to port 3000 if not specified 9 | export PORT="${PORT:-3000}" 10 | 11 | exec foreman start -f Procfile.dev "$@" 12 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/chart/component.erb: -------------------------------------------------------------------------------- 1 | 2 |
6 | 7 |
8 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/switch/component.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | class RailsUi::Switch::Component < ApplicationViewComponent 4 | option :id 5 | option :url, default: -> { "" } 6 | option :label 7 | option :checked 8 | option :disabled 9 | option :on_change 10 | end 11 | -------------------------------------------------------------------------------- /test/controllers/rails_ui/blocks_controller_test.rb: -------------------------------------------------------------------------------- 1 | require "test_helper" 2 | 3 | module RailsUi 4 | class BlocksControllerTest < ActionDispatch::IntegrationTest 5 | include Engine.routes.url_helpers 6 | 7 | # test "the truth" do 8 | # assert true 9 | # end 10 | end 11 | end 12 | -------------------------------------------------------------------------------- /test/controllers/rails_ui/charts_controller_test.rb: -------------------------------------------------------------------------------- 1 | require "test_helper" 2 | 3 | module RailsUi 4 | class ChartsControllerTest < ActionDispatch::IntegrationTest 5 | include Engine.routes.url_helpers 6 | 7 | # test "the truth" do 8 | # assert true 9 | # end 10 | end 11 | end 12 | -------------------------------------------------------------------------------- /test/controllers/rails_ui/colors_controller_test.rb: -------------------------------------------------------------------------------- 1 | require "test_helper" 2 | 3 | module RailsUi 4 | class ColorsControllerTest < ActionDispatch::IntegrationTest 5 | include Engine.routes.url_helpers 6 | 7 | # test "the truth" do 8 | # assert true 9 | # end 10 | end 11 | end 12 | -------------------------------------------------------------------------------- /test/controllers/rails_ui/themes_controller_test.rb: -------------------------------------------------------------------------------- 1 | require "test_helper" 2 | 3 | module RailsUi 4 | class ThemesControllerTest < ActionDispatch::IntegrationTest 5 | include Engine.routes.url_helpers 6 | 7 | # test "the truth" do 8 | # assert true 9 | # end 10 | end 11 | end 12 | -------------------------------------------------------------------------------- /test/controllers/rails_ui/examples_controller_test.rb: -------------------------------------------------------------------------------- 1 | require "test_helper" 2 | 3 | module RailsUi 4 | class ExamplesControllerTest < ActionDispatch::IntegrationTest 5 | include Engine.routes.url_helpers 6 | 7 | # test "the truth" do 8 | # assert true 9 | # end 10 | end 11 | end 12 | -------------------------------------------------------------------------------- /test/dummy/app/javascript/controllers/application.js: -------------------------------------------------------------------------------- 1 | import { Application } from "@hotwired/stimulus" 2 | 3 | const application = Application.start() 4 | 5 | // Configure Stimulus development experience 6 | application.debug = false 7 | window.Stimulus = application 8 | 9 | export { application } 10 | -------------------------------------------------------------------------------- /test/dummy/bin/dev: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | 3 | if gem list --no-installed --exact --silent foreman; then 4 | echo "Installing foreman..." 5 | gem install foreman 6 | fi 7 | 8 | # Default to port 3000 if not specified 9 | export PORT="${PORT:-3000}" 10 | 11 | exec foreman start -f Procfile.dev "$@" 12 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/accordion/component.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | class RailsUi::Accordion::Component < ApplicationViewComponent 4 | option :type, default: -> { "single" } 5 | option :collapsible, default: -> { true } 6 | 7 | renders_many :items, RailsUi::AccordionItem::Component 8 | end 9 | -------------------------------------------------------------------------------- /test/controllers/rails_ui/playground_controller_test.rb: -------------------------------------------------------------------------------- 1 | require "test_helper" 2 | 3 | module RailsUi 4 | class PlaygroundControllerTest < ActionDispatch::IntegrationTest 5 | include Engine.routes.url_helpers 6 | 7 | # test "the truth" do 8 | # assert true 9 | # end 10 | end 11 | end 12 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/alert/preview.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | class RailsUi::Alert::Preview < ApplicationViewComponentPreview 4 | # You can specify the container class for the default template 5 | # self.container_class = "w-1/2 border border-gray-300" 6 | 7 | def default 8 | end 9 | end 10 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/badge/preview.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | class RailsUi::Badge::Preview < ApplicationViewComponentPreview 4 | # You can specify the container class for the default template 5 | # self.container_class = "w-1/2 border border-gray-300" 6 | 7 | def default 8 | end 9 | end 10 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/card/preview.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | class RailsUi::Card::Preview < ApplicationViewComponentPreview 4 | # You can specify the container class for the default template 5 | # self.container_class = "w-1/2 border border-gray-300" 6 | 7 | def default 8 | end 9 | end 10 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/sheet/preview.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | class RailsUi::Sheet::Preview < ApplicationViewComponentPreview 4 | # You can specify the container class for the default template 5 | # self.container_class = "w-1/2 border border-gray-300" 6 | 7 | def default 8 | end 9 | end 10 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/table/preview.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | class RailsUi::Table::Preview < ApplicationViewComponentPreview 4 | # You can specify the container class for the default template 5 | # self.container_class = "w-1/2 border border-gray-300" 6 | 7 | def default 8 | end 9 | end 10 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/tabs/preview.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | class RailsUi::Tabs::Preview < ApplicationViewComponentPreview 4 | # You can specify the container class for the default template 5 | # self.container_class = "w-1/2 border border-gray-300" 6 | 7 | def default 8 | end 9 | end 10 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/toast/preview.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | class RailsUi::Toast::Preview < ApplicationViewComponentPreview 4 | # You can specify the container class for the default template 5 | # self.container_class = "w-1/2 border border-gray-300" 6 | 7 | def default 8 | end 9 | end 10 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/avatar/preview.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | class RailsUi::Avatar::Preview < ApplicationViewComponentPreview 4 | # You can specify the container class for the default template 5 | # self.container_class = "w-1/2 border border-gray-300" 6 | 7 | def default 8 | end 9 | end 10 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/calendar/preview.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | class RailsUi::Calendar::Preview < ApplicationViewComponentPreview 4 | # You can specify the container class for the default template 5 | # self.container_class = "w-1/2 border border-gray-300" 6 | 7 | def default 8 | end 9 | end 10 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/carousel/preview.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | class RailsUi::Carousel::Preview < ApplicationViewComponentPreview 4 | # You can specify the container class for the default template 5 | # self.container_class = "w-1/2 border border-gray-300" 6 | 7 | def default 8 | end 9 | end 10 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/command/preview.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | class RailsUi::Command::Preview < ApplicationViewComponentPreview 4 | # You can specify the container class for the default template 5 | # self.container_class = "w-1/2 border border-gray-300" 6 | 7 | def default 8 | end 9 | end 10 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/dialog/preview.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | class RailsUi::Dialog::Preview < ApplicationViewComponentPreview 4 | # You can specify the container class for the default template 5 | # self.container_class = "w-1/2 border border-gray-300" 6 | 7 | def default 8 | end 9 | end 10 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/markdown/preview.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | class RailsUi::Markdown::Preview < ApplicationViewComponentPreview 4 | # You can specify the container class for the default template 5 | # self.container_class = "w-1/2 border border-gray-300" 6 | 7 | def default 8 | end 9 | end 10 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/menubar/preview.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | class RailsUi::Menubar::Preview < ApplicationViewComponentPreview 4 | # You can specify the container class for the default template 5 | # self.container_class = "w-1/2 border border-gray-300" 6 | 7 | def default 8 | end 9 | end 10 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/popover/preview.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | class RailsUi::Popover::Preview < ApplicationViewComponentPreview 4 | # You can specify the container class for the default template 5 | # self.container_class = "w-1/2 border border-gray-300" 6 | 7 | def default 8 | end 9 | end 10 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/progress/preview.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | class RailsUi::Progress::Preview < ApplicationViewComponentPreview 4 | # You can specify the container class for the default template 5 | # self.container_class = "w-1/2 border border-gray-300" 6 | 7 | def default 8 | end 9 | end 10 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/skeleton/preview.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | class RailsUi::Skeleton::Preview < ApplicationViewComponentPreview 4 | # You can specify the container class for the default template 5 | # self.container_class = "w-1/2 border border-gray-300" 6 | 7 | def default 8 | end 9 | end 10 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/switch/preview.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | class RailsUi::Switch::Preview < ApplicationViewComponentPreview 4 | # You can specify the container class for the default template 5 | # self.container_class = "w-1/2 border border-gray-300" 6 | 7 | def default 8 | end 9 | end 10 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/toggle/preview.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | class RailsUi::Toggle::Preview < ApplicationViewComponentPreview 4 | # You can specify the container class for the default template 5 | # self.container_class = "w-1/2 border border-gray-300" 6 | 7 | def default 8 | end 9 | end 10 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/tooltip/preview.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | class RailsUi::Tooltip::Preview < ApplicationViewComponentPreview 4 | # You can specify the container class for the default template 5 | # self.container_class = "w-1/2 border border-gray-300" 6 | 7 | def default 8 | end 9 | end 10 | -------------------------------------------------------------------------------- /test/dummy/app/jobs/application_job.rb: -------------------------------------------------------------------------------- 1 | class ApplicationJob < ActiveJob::Base 2 | # Automatically retry jobs that encountered a deadlock 3 | # retry_on ActiveRecord::Deadlocked 4 | 5 | # Most jobs are safe to ignore if the underlying records are no longer available 6 | # discard_on ActiveJob::DeserializationError 7 | end 8 | -------------------------------------------------------------------------------- /test/dummy/app/views/layouts/mailer.html.erb: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 8 | 9 | 10 | 11 | <%= yield %> 12 | 13 | 14 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/accordion/preview.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | class RailsUi::Accordion::Preview < ApplicationViewComponentPreview 4 | # You can specify the container class for the default template 5 | # self.container_class = "w-1/2 border border-gray-300" 6 | 7 | def default 8 | end 9 | end 10 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/breadcrumb/preview.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | class RailsUi::Breadcrumb::Preview < ApplicationViewComponentPreview 4 | # You can specify the container class for the default template 5 | # self.container_class = "w-1/2 border border-gray-300" 6 | 7 | def default 8 | end 9 | end 10 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/input_otp/preview.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | class RailsUi::InputOtp::Preview < ApplicationViewComponentPreview 4 | # You can specify the container class for the default template 5 | # self.container_class = "w-1/2 border border-gray-300" 6 | 7 | def default 8 | end 9 | end 10 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/resizable/preview.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | class RailsUi::Resizable::Preview < ApplicationViewComponentPreview 4 | # You can specify the container class for the default template 5 | # self.container_class = "w-1/2 border border-gray-300" 6 | 7 | def default 8 | end 9 | end 10 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/separator/preview.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | class RailsUi::Separator::Preview < ApplicationViewComponentPreview 4 | # You can specify the container class for the default template 5 | # self.container_class = "w-1/2 border border-gray-300" 6 | 7 | def default 8 | end 9 | end 10 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/toast_item/preview.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | class RailsUi::ToastItem::Preview < ApplicationViewComponentPreview 4 | # You can specify the container class for the default template 5 | # self.container_class = "w-1/2 border border-gray-300" 6 | 7 | def default 8 | end 9 | end 10 | -------------------------------------------------------------------------------- /lib/generators/view_component/templates/preview.rb.tt: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | class <%= class_name %>::Preview < <%= preview_parent_class %> 4 | # You can specify the container class for the default template 5 | # self.container_class = "w-1/2 border border-gray-300" 6 | 7 | def default 8 | end 9 | end 10 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/alert_dialog/preview.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | class RailsUi::AlertDialog::Preview < ApplicationViewComponentPreview 4 | # You can specify the container class for the default template 5 | # self.container_class = "w-1/2 border border-gray-300" 6 | 7 | def default 8 | end 9 | end 10 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/aspect_ratio/preview.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | class RailsUi::AspectRatio::Preview < ApplicationViewComponentPreview 4 | # You can specify the container class for the default template 5 | # self.container_class = "w-1/2 border border-gray-300" 6 | 7 | def default 8 | end 9 | end 10 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/collapsible/preview.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | class RailsUi::Collapsible::Preview < ApplicationViewComponentPreview 4 | # You can specify the container class for the default template 5 | # self.container_class = "w-1/2 border border-gray-300" 6 | 7 | def default 8 | end 9 | end 10 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/context_menu/preview.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | class RailsUi::ContextMenu::Preview < ApplicationViewComponentPreview 4 | # You can specify the container class for the default template 5 | # self.container_class = "w-1/2 border border-gray-300" 6 | 7 | def default 8 | end 9 | end 10 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/dropdown_menu/preview.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | class RailsUi::DropdownMenu::Preview < ApplicationViewComponentPreview 4 | # You can specify the container class for the default template 5 | # self.container_class = "w-1/2 border border-gray-300" 6 | 7 | def default 8 | end 9 | end 10 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/simple_editor/preview.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | class RailsUi::SimpleEditor::Preview < ApplicationViewComponentPreview 4 | # You can specify the container class for the default template 5 | # self.container_class = "w-1/2 border border-gray-300" 6 | 7 | def default 8 | end 9 | end 10 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/toggle_group/preview.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | class RailsUi::ToggleGroup::Preview < ApplicationViewComponentPreview 4 | # You can specify the container class for the default template 5 | # self.container_class = "w-1/2 border border-gray-300" 6 | 7 | def default 8 | end 9 | end 10 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/accordion_item/preview.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | class RailsUi::AccordionItem::Preview < ApplicationViewComponentPreview 4 | # You can specify the container class for the default template 5 | # self.container_class = "w-1/2 border border-gray-300" 6 | 7 | def default 8 | end 9 | end 10 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/breadcrumb_item/preview.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | class RailsUi::BreadcrumbItem::Preview < ApplicationViewComponentPreview 4 | # You can specify the container class for the default template 5 | # self.container_class = "w-1/2 border border-gray-300" 6 | 7 | def default 8 | end 9 | end 10 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/dropdown_menu_item/preview.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | class RailsUi::DropdownMenuItem::Preview < ApplicationViewComponentPreview 4 | # You can specify the container class for the default template 5 | # self.container_class = "w-1/2 border border-gray-300" 6 | 7 | def default 8 | end 9 | end 10 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/simple_editor/component.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | class RailsUi::SimpleEditor::Component < ApplicationViewComponent 4 | option :preview_id, default: -> {} 5 | option :variables, default: -> { {} } 6 | option :height, default: -> { "h-20" } 7 | option :data 8 | option :form 9 | option :field 10 | end 11 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/component_preview/component.rb: -------------------------------------------------------------------------------- 1 | class RailsUi::ComponentPreview::Component < ViewComponent::Base 2 | renders_one :example 3 | renders_one :code 4 | 5 | attr_reader :title 6 | 7 | def initialize(title:) 8 | @title = title 9 | end 10 | 11 | def render_code 12 | ERB::Util.html_escape_once code 13 | end 14 | end 15 | -------------------------------------------------------------------------------- /app/controllers/rails_ui/playground_controller.rb: -------------------------------------------------------------------------------- 1 | module RailsUi 2 | class PlaygroundController < ApplicationController 3 | include RailsUi::ApplicationHelper 4 | def index 5 | @section = "accordion" 6 | render "show" 7 | end 8 | 9 | def show 10 | @section = params[:section] 11 | render "show" 12 | end 13 | end 14 | end 15 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/dropdown_menu/component.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | module RailsUi 4 | module DropdownMenu 5 | class Component < ApplicationViewComponent 6 | renders_one :trigger 7 | renders_many :items, RailsUi::DropdownMenuItem::Component 8 | renders_many :separators # , SeparatorComponent 9 | end 10 | end 11 | end 12 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /.bundle/ 2 | /doc/ 3 | /log/*.log 4 | /pkg/ 5 | /tmp/ 6 | /test/dummy/db/*.sqlite3 7 | /test/dummy/db/*.sqlite3-* 8 | /test/dummy/log/*.log 9 | /test/dummy/node_modules 10 | /test/dummy/storage/ 11 | /test/dummy/tmp/ 12 | /test/dummy/public/assets/* 13 | !/test/dummy/public/assets/.keep 14 | /test/dummy/app/assets/builds/* 15 | !/test/dummy/app/assets/builds/.keep 16 | -------------------------------------------------------------------------------- /app/ui/application_view_component.rb: -------------------------------------------------------------------------------- 1 | class ApplicationViewComponent < ViewComponentContrib::Base 2 | extend Dry::Initializer 3 | 4 | private 5 | 6 | def identifier 7 | @identifier ||= self.class.name.sub("::Component", "").underscore.split("/").join("--") 8 | end 9 | 10 | def class_for(name, from: identifier) 11 | "c-#{from}-#{name}" 12 | end 13 | end 14 | -------------------------------------------------------------------------------- /spec/ui/components/rails_ui/card_spec.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | require "rails_helper" 4 | 5 | describe Card::Component do 6 | let(:options) { {} } 7 | let(:component) { Card::Component.new(**options) } 8 | 9 | subject { rendered_component } 10 | 11 | it "renders" do 12 | render_inline(component) 13 | 14 | is_expected.to have_css "div" 15 | end 16 | end 17 | -------------------------------------------------------------------------------- /spec/ui/components/rails_ui/tabs_spec.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | require "rails_helper" 4 | 5 | describe Tabs::Component do 6 | let(:options) { {} } 7 | let(:component) { Tabs::Component.new(**options) } 8 | 9 | subject { rendered_component } 10 | 11 | it "renders" do 12 | render_inline(component) 13 | 14 | is_expected.to have_css "div" 15 | end 16 | end 17 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/index.js--: -------------------------------------------------------------------------------- 1 | import controllers from "./**/*index.js" 2 | 3 | controllers.forEach((controller) => { 4 | if(controller.module.default){ 5 | const name = controller.name.replace("--index.js", "") 6 | console.log("ADDINDG CONTROLLER FROM RAILS UI", name) 7 | application.register(name, controller.module.default); 8 | } 9 | }); 10 | 11 | console.log(application) -------------------------------------------------------------------------------- /spec/ui/components/rails_ui/alert_spec.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | require "rails_helper" 4 | 5 | describe Alert::Component do 6 | let(:options) { {} } 7 | let(:component) { Alert::Component.new(**options) } 8 | 9 | subject { rendered_component } 10 | 11 | it "renders" do 12 | render_inline(component) 13 | 14 | is_expected.to have_css "div" 15 | end 16 | end 17 | -------------------------------------------------------------------------------- /spec/ui/components/rails_ui/avatar_spec.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | require "rails_helper" 4 | 5 | describe Avatar::Component do 6 | let(:options) { {} } 7 | let(:component) { Avatar::Component.new(**options) } 8 | 9 | subject { rendered_component } 10 | 11 | it "renders" do 12 | render_inline(component) 13 | 14 | is_expected.to have_css "div" 15 | end 16 | end 17 | -------------------------------------------------------------------------------- /spec/ui/components/rails_ui/badge_spec.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | require "rails_helper" 4 | 5 | describe Badge::Component do 6 | let(:options) { {} } 7 | let(:component) { Badge::Component.new(**options) } 8 | 9 | subject { rendered_component } 10 | 11 | it "renders" do 12 | render_inline(component) 13 | 14 | is_expected.to have_css "div" 15 | end 16 | end 17 | -------------------------------------------------------------------------------- /spec/ui/components/rails_ui/button_spec.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | require "rails_helper" 4 | 5 | describe Button::Component do 6 | let(:options) { {} } 7 | let(:component) { Button::Component.new(**options) } 8 | 9 | subject { rendered_component } 10 | 11 | it "renders" do 12 | render_inline(component) 13 | 14 | is_expected.to have_css "div" 15 | end 16 | end 17 | -------------------------------------------------------------------------------- /spec/ui/components/rails_ui/dialog_spec.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | require "rails_helper" 4 | 5 | describe Dialog::Component do 6 | let(:options) { {} } 7 | let(:component) { Dialog::Component.new(**options) } 8 | 9 | subject { rendered_component } 10 | 11 | it "renders" do 12 | render_inline(component) 13 | 14 | is_expected.to have_css "div" 15 | end 16 | end 17 | -------------------------------------------------------------------------------- /spec/ui/components/rails_ui/sheet_spec.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | require "rails_helper" 4 | 5 | describe Sheet::Component do 6 | let(:options) { {} } 7 | let(:component) { Sheet::Component.new(**options) } 8 | 9 | subject { rendered_component } 10 | 11 | it "renders" do 12 | render_inline(component) 13 | 14 | is_expected.to have_css "div" 15 | end 16 | end 17 | -------------------------------------------------------------------------------- /spec/ui/components/rails_ui/table_spec.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | require "rails_helper" 4 | 5 | describe Table::Component do 6 | let(:options) { {} } 7 | let(:component) { Table::Component.new(**options) } 8 | 9 | subject { rendered_component } 10 | 11 | it "renders" do 12 | render_inline(component) 13 | 14 | is_expected.to have_css "div" 15 | end 16 | end 17 | -------------------------------------------------------------------------------- /spec/ui/components/rails_ui/toast_spec.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | require "rails_helper" 4 | 5 | describe Toast::Component do 6 | let(:options) { {} } 7 | let(:component) { Toast::Component.new(**options) } 8 | 9 | subject { rendered_component } 10 | 11 | it "renders" do 12 | render_inline(component) 13 | 14 | is_expected.to have_css "div" 15 | end 16 | end 17 | -------------------------------------------------------------------------------- /spec/ui/components/rails_ui/toggle_spec.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | require "rails_helper" 4 | 5 | describe Toggle::Component do 6 | let(:options) { {} } 7 | let(:component) { Toggle::Component.new(**options) } 8 | 9 | subject { rendered_component } 10 | 11 | it "renders" do 12 | render_inline(component) 13 | 14 | is_expected.to have_css "div" 15 | end 16 | end 17 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/dropdown_menu_item/component.html.erb: -------------------------------------------------------------------------------- 1 | <%= tag.send(tag_name, **html_options) do %> 2 | <% if icon.present? %> 3 | <%= icon %> 4 | <% # inline_svg_tag icon, class: "mr-2 h-4 w-4" %> 5 | <% end %> 6 | <%= content %> 7 | <% if shortcut.present? %> 8 | <%= shortcut %> 9 | <% end %> 10 | <% end %> -------------------------------------------------------------------------------- /spec/ui/components/rails_ui/command_spec.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | require "rails_helper" 4 | 5 | describe Command::Component do 6 | let(:options) { {} } 7 | let(:component) { Command::Component.new(**options) } 8 | 9 | subject { rendered_component } 10 | 11 | it "renders" do 12 | render_inline(component) 13 | 14 | is_expected.to have_css "div" 15 | end 16 | end 17 | -------------------------------------------------------------------------------- /spec/ui/components/rails_ui/menubar_spec.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | require "rails_helper" 4 | 5 | describe Menubar::Component do 6 | let(:options) { {} } 7 | let(:component) { Menubar::Component.new(**options) } 8 | 9 | subject { rendered_component } 10 | 11 | it "renders" do 12 | render_inline(component) 13 | 14 | is_expected.to have_css "div" 15 | end 16 | end 17 | -------------------------------------------------------------------------------- /spec/ui/components/rails_ui/popover_spec.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | require "rails_helper" 4 | 5 | describe Popover::Component do 6 | let(:options) { {} } 7 | let(:component) { Popover::Component.new(**options) } 8 | 9 | subject { rendered_component } 10 | 11 | it "renders" do 12 | render_inline(component) 13 | 14 | is_expected.to have_css "div" 15 | end 16 | end 17 | -------------------------------------------------------------------------------- /spec/ui/components/rails_ui/tooltip_spec.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | require "rails_helper" 4 | 5 | describe Tooltip::Component do 6 | let(:options) { {} } 7 | let(:component) { Tooltip::Component.new(**options) } 8 | 9 | subject { rendered_component } 10 | 11 | it "renders" do 12 | render_inline(component) 13 | 14 | is_expected.to have_css "div" 15 | end 16 | end 17 | -------------------------------------------------------------------------------- /spec/frontend/components/rails_ui/button_spec.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | require "rails_helper" 4 | 5 | describe Button::Component do 6 | let(:options) { {} } 7 | let(:component) { Button::Component.new(**options) } 8 | 9 | subject { rendered_component } 10 | 11 | it "renders" do 12 | render_inline(component) 13 | 14 | is_expected.to have_css "div" 15 | end 16 | end 17 | -------------------------------------------------------------------------------- /spec/ui/components/rails_ui/accordion_spec.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | require "rails_helper" 4 | 5 | describe Accordion::Component do 6 | let(:options) { {} } 7 | let(:component) { Accordion::Component.new(**options) } 8 | 9 | subject { rendered_component } 10 | 11 | it "renders" do 12 | render_inline(component) 13 | 14 | is_expected.to have_css "div" 15 | end 16 | end 17 | -------------------------------------------------------------------------------- /spec/ui/components/rails_ui/calendar_spec.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | require "rails_helper" 4 | 5 | describe Calendar::Component do 6 | let(:options) { {} } 7 | let(:component) { Calendar::Component.new(**options) } 8 | 9 | subject { rendered_component } 10 | 11 | it "renders" do 12 | render_inline(component) 13 | 14 | is_expected.to have_css "div" 15 | end 16 | end 17 | -------------------------------------------------------------------------------- /spec/ui/components/rails_ui/carousel_spec.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | require "rails_helper" 4 | 5 | describe Carousel::Component do 6 | let(:options) { {} } 7 | let(:component) { Carousel::Component.new(**options) } 8 | 9 | subject { rendered_component } 10 | 11 | it "renders" do 12 | render_inline(component) 13 | 14 | is_expected.to have_css "div" 15 | end 16 | end 17 | -------------------------------------------------------------------------------- /spec/ui/components/rails_ui/input_otp_spec.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | require "rails_helper" 4 | 5 | describe InputOtp::Component do 6 | let(:options) { {} } 7 | let(:component) { InputOtp::Component.new(**options) } 8 | 9 | subject { rendered_component } 10 | 11 | it "renders" do 12 | render_inline(component) 13 | 14 | is_expected.to have_css "div" 15 | end 16 | end 17 | -------------------------------------------------------------------------------- /spec/ui/components/rails_ui/markdown_spec.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | require "rails_helper" 4 | 5 | describe Markdown::Component do 6 | let(:options) { {} } 7 | let(:component) { Markdown::Component.new(**options) } 8 | 9 | subject { rendered_component } 10 | 11 | it "renders" do 12 | render_inline(component) 13 | 14 | is_expected.to have_css "div" 15 | end 16 | end 17 | -------------------------------------------------------------------------------- /spec/ui/components/rails_ui/progress_spec.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | require "rails_helper" 4 | 5 | describe Progress::Component do 6 | let(:options) { {} } 7 | let(:component) { Progress::Component.new(**options) } 8 | 9 | subject { rendered_component } 10 | 11 | it "renders" do 12 | render_inline(component) 13 | 14 | is_expected.to have_css "div" 15 | end 16 | end 17 | -------------------------------------------------------------------------------- /spec/ui/components/rails_ui/resizable_spec.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | require "rails_helper" 4 | 5 | describe Resizable::Component do 6 | let(:options) { {} } 7 | let(:component) { Resizable::Component.new(**options) } 8 | 9 | subject { rendered_component } 10 | 11 | it "renders" do 12 | render_inline(component) 13 | 14 | is_expected.to have_css "div" 15 | end 16 | end 17 | -------------------------------------------------------------------------------- /spec/ui/components/rails_ui/skeleton_spec.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | require "rails_helper" 4 | 5 | describe Skeleton::Component do 6 | let(:options) { {} } 7 | let(:component) { Skeleton::Component.new(**options) } 8 | 9 | subject { rendered_component } 10 | 11 | it "renders" do 12 | render_inline(component) 13 | 14 | is_expected.to have_css "div" 15 | end 16 | end 17 | -------------------------------------------------------------------------------- /spec/ui/components/rails_ui/toast_item_spec.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | require "rails_helper" 4 | 5 | describe ToastItem::Component do 6 | let(:options) { {} } 7 | let(:component) { ToastItem::Component.new(**options) } 8 | 9 | subject { rendered_component } 10 | 11 | it "renders" do 12 | render_inline(component) 13 | 14 | is_expected.to have_css "div" 15 | end 16 | end 17 | -------------------------------------------------------------------------------- /spec/ui/components/rails_ui/breadcrumb_spec.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | require "rails_helper" 4 | 5 | describe Breadcrumb::Component do 6 | let(:options) { {} } 7 | let(:component) { Breadcrumb::Component.new(**options) } 8 | 9 | subject { rendered_component } 10 | 11 | it "renders" do 12 | render_inline(component) 13 | 14 | is_expected.to have_css "div" 15 | end 16 | end 17 | -------------------------------------------------------------------------------- /spec/ui/components/rails_ui/collapsible_spec.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | require "rails_helper" 4 | 5 | describe Collapsible::Component do 6 | let(:options) { {} } 7 | let(:component) { Collapsible::Component.new(**options) } 8 | 9 | subject { rendered_component } 10 | 11 | it "renders" do 12 | render_inline(component) 13 | 14 | is_expected.to have_css "div" 15 | end 16 | end 17 | -------------------------------------------------------------------------------- /test/dummy/spec/ui/components/separator_spec.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | require "rails_helper" 4 | 5 | describe Separator::Component do 6 | let(:options) { {} } 7 | let(:component) { Separator::Component.new(**options) } 8 | 9 | subject { rendered_component } 10 | 11 | it "renders" do 12 | render_inline(component) 13 | 14 | is_expected.to have_css "div" 15 | end 16 | end 17 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/avatar/component.html.erb: -------------------------------------------------------------------------------- 1 | 2 | <% if src %> 3 | <%= image_tag src, class: "aspect-square h-full w-full", alt: alt %> 4 | <% else %> 5 | 6 | <%= fallback_initials %> 7 | 8 | <% end %> 9 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/chart/component.rb: -------------------------------------------------------------------------------- 1 | # app/components/rails_ui/alert_dialog/component.rb 2 | module RailsUi 3 | module Chart 4 | class Component < ApplicationViewComponent 5 | #option :id, default: -> { SecureRandom.hex(6) } 6 | option :type, default: -> { 'line' } 7 | option :config, default: -> { {} } 8 | option :data, default: -> { {} } 9 | 10 | end 11 | end 12 | end -------------------------------------------------------------------------------- /spec/ui/components/rails_ui/alert_dialog_spec.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | require "rails_helper" 4 | 5 | describe AlertDialog::Component do 6 | let(:options) { {} } 7 | let(:component) { AlertDialog::Component.new(**options) } 8 | 9 | subject { rendered_component } 10 | 11 | it "renders" do 12 | render_inline(component) 13 | 14 | is_expected.to have_css "div" 15 | end 16 | end 17 | -------------------------------------------------------------------------------- /spec/ui/components/rails_ui/aspect_ratio_spec.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | require "rails_helper" 4 | 5 | describe AspectRatio::Component do 6 | let(:options) { {} } 7 | let(:component) { AspectRatio::Component.new(**options) } 8 | 9 | subject { rendered_component } 10 | 11 | it "renders" do 12 | render_inline(component) 13 | 14 | is_expected.to have_css "div" 15 | end 16 | end 17 | -------------------------------------------------------------------------------- /spec/ui/components/rails_ui/context_menu_spec.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | require "rails_helper" 4 | 5 | describe ContextMenu::Component do 6 | let(:options) { {} } 7 | let(:component) { ContextMenu::Component.new(**options) } 8 | 9 | subject { rendered_component } 10 | 11 | it "renders" do 12 | render_inline(component) 13 | 14 | is_expected.to have_css "div" 15 | end 16 | end 17 | -------------------------------------------------------------------------------- /spec/ui/components/rails_ui/dropdown_menu_spec.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | require "rails_helper" 4 | 5 | describe DropdownMenu::Component do 6 | let(:options) { {} } 7 | let(:component) { DropdownMenu::Component.new(**options) } 8 | 9 | subject { rendered_component } 10 | 11 | it "renders" do 12 | render_inline(component) 13 | 14 | is_expected.to have_css "div" 15 | end 16 | end 17 | -------------------------------------------------------------------------------- /spec/ui/components/rails_ui/simple_editor_spec.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | require "rails_helper" 4 | 5 | describe SimpleEditor::Component do 6 | let(:options) { {} } 7 | let(:component) { SimpleEditor::Component.new(**options) } 8 | 9 | subject { rendered_component } 10 | 11 | it "renders" do 12 | render_inline(component) 13 | 14 | is_expected.to have_css "div" 15 | end 16 | end 17 | -------------------------------------------------------------------------------- /spec/ui/components/rails_ui/toggle_group_spec.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | require "rails_helper" 4 | 5 | describe ToggleGroup::Component do 6 | let(:options) { {} } 7 | let(:component) { ToggleGroup::Component.new(**options) } 8 | 9 | subject { rendered_component } 10 | 11 | it "renders" do 12 | render_inline(component) 13 | 14 | is_expected.to have_css "div" 15 | end 16 | end 17 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/skeleton/component.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | class RailsUi::Skeleton::Component < ApplicationViewComponent 4 | option :variant, default: -> { :avatar } 5 | option :avatar_size, default: -> { "h-12 w-12" } 6 | option :card_size, default: -> { "h-[125px] w-[250px]" } 7 | option :lines, default: -> { 2 } 8 | option :line_widths, default: -> { ["250px", "200px"] } 9 | end 10 | -------------------------------------------------------------------------------- /spec/ui/components/rails_ui/accordion_demo_spec.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | require "rails_helper" 4 | 5 | describe AccordionDemo::Component do 6 | let(:options) { {} } 7 | let(:component) { AccordionDemo::Component.new(**options) } 8 | 9 | subject { rendered_component } 10 | 11 | it "renders" do 12 | render_inline(component) 13 | 14 | is_expected.to have_css "div" 15 | end 16 | end 17 | -------------------------------------------------------------------------------- /spec/ui/components/rails_ui/accordion_item_spec.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | require "rails_helper" 4 | 5 | describe AccordionItem::Component do 6 | let(:options) { {} } 7 | let(:component) { AccordionItem::Component.new(**options) } 8 | 9 | subject { rendered_component } 10 | 11 | it "renders" do 12 | render_inline(component) 13 | 14 | is_expected.to have_css "div" 15 | end 16 | end 17 | -------------------------------------------------------------------------------- /spec/ui/components/rails_ui/breadcrumb_item_spec.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | require "rails_helper" 4 | 5 | describe BreadcrumbItem::Component do 6 | let(:options) { {} } 7 | let(:component) { BreadcrumbItem::Component.new(**options) } 8 | 9 | subject { rendered_component } 10 | 11 | it "renders" do 12 | render_inline(component) 13 | 14 | is_expected.to have_css "div" 15 | end 16 | end 17 | -------------------------------------------------------------------------------- /test/dummy/spec/ui/components/simple_editor_spec.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | require "rails_helper" 4 | 5 | describe SimpleEditor::Component do 6 | let(:options) { {} } 7 | let(:component) { SimpleEditor::Component.new(**options) } 8 | 9 | subject { rendered_component } 10 | 11 | it "renders" do 12 | render_inline(component) 13 | 14 | is_expected.to have_css "div" 15 | end 16 | end 17 | -------------------------------------------------------------------------------- /spec/ui/components/rails_ui/accordion_content_spec.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | require "rails_helper" 4 | 5 | describe AccordionContent::Component do 6 | let(:options) { {} } 7 | let(:component) { AccordionContent::Component.new(**options) } 8 | 9 | subject { rendered_component } 10 | 11 | it "renders" do 12 | render_inline(component) 13 | 14 | is_expected.to have_css "div" 15 | end 16 | end 17 | -------------------------------------------------------------------------------- /spec/ui/components/rails_ui/accordion_trigger_spec.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | require "rails_helper" 4 | 5 | describe AccordionTrigger::Component do 6 | let(:options) { {} } 7 | let(:component) { AccordionTrigger::Component.new(**options) } 8 | 9 | subject { rendered_component } 10 | 11 | it "renders" do 12 | render_inline(component) 13 | 14 | is_expected.to have_css "div" 15 | end 16 | end 17 | -------------------------------------------------------------------------------- /spec/ui/components/rails_ui/dropdown_menu_item_spec.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | require "rails_helper" 4 | 5 | describe DropdownMenuItem::Component do 6 | let(:options) { {} } 7 | let(:component) { DropdownMenuItem::Component.new(**options) } 8 | 9 | subject { rendered_component } 10 | 11 | it "renders" do 12 | render_inline(component) 13 | 14 | is_expected.to have_css "div" 15 | end 16 | end 17 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/command/component.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | # app/components/rails_ui/command/component.rb 4 | module RailsUi 5 | module Command 6 | class Component < ApplicationViewComponent 7 | option :id, default: -> { SecureRandom.hex(6) } 8 | option :placeholder, default: -> { "Type a command or search..." } 9 | option :sections, default: -> { [] } 10 | end 11 | end 12 | end 13 | -------------------------------------------------------------------------------- /lib/generators/view_component/templates/component_spec.rb.tt: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | require "rails_helper" 4 | 5 | describe <%= class_name %>::Component do 6 | let(:options) { {} } 7 | let(:component) { <%= class_name %>::Component.new(**options) } 8 | 9 | subject { rendered_component } 10 | 11 | it "renders" do 12 | render_inline(component) 13 | 14 | is_expected.to have_css "div" 15 | end 16 | end 17 | -------------------------------------------------------------------------------- /app/views/rails_ui/playground/sections/_figma.html.erb: -------------------------------------------------------------------------------- 1 | <%= render RailsUi::Markdown::Component.new do %> 2 |
3 | 4 | Every component recreated in Figma. With customizable props, typography and icons. 5 | The Figma UI Kit is open sourced by Pietro Schirano. 6 | 7 | [Grab a copy](https://www.figma.com/community/file/1203061493325953101) 8 | 9 |
10 | <% end %> -------------------------------------------------------------------------------- /app/ui/components/rails_ui/resizable/component.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | module RailsUi 4 | module Resizable 5 | class Component < ApplicationViewComponent 6 | option :id, default: -> { SecureRandom.hex(6) } 7 | option :direction, default: -> { "horizontal" } 8 | option :panels, default: -> { [] } 9 | option :class_name, default: -> { "min-h-[200px] rounded-lg border" } 10 | end 11 | end 12 | end 13 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/card/index.js: -------------------------------------------------------------------------------- 1 | import "./index.css" 2 | 3 | // Add a Stimulus controller for this component. 4 | // It will automatically registered and its name will be available 5 | // via #component_name in the component class. 6 | // 7 | // import { Controller as BaseController } from "stimulus"; 8 | // 9 | // export class Controller extends BaseController { 10 | // connect() { 11 | // } 12 | // 13 | // disconnect() { 14 | // } 15 | // } 16 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/skeleton/index.js: -------------------------------------------------------------------------------- 1 | import "./index.css" 2 | 3 | // Add a Stimulus controller for this component. 4 | // It will automatically registered and its name will be available 5 | // via #component_name in the component class. 6 | // 7 | import { Controller as BaseController } from "@hotwired/stimulus"; 8 | // 9 | export default class Controller extends BaseController { 10 | connect() { 11 | } 12 | disconnect() { 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/tabs/index.js: -------------------------------------------------------------------------------- 1 | import "./index.css" 2 | 3 | // Add a Stimulus controller for this component. 4 | // It will automatically registered and its name will be available 5 | // via #component_name in the component class. 6 | // 7 | // import { Controller as BaseController } from "stimulus"; 8 | // 9 | // export class Controller extends BaseController { 10 | // connect() { 11 | // } 12 | // 13 | // disconnect() { 14 | // } 15 | // } 16 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/alert/index.js: -------------------------------------------------------------------------------- 1 | import "./index.css" 2 | 3 | // Add a Stimulus controller for this component. 4 | // It will automatically registered and its name will be available 5 | // via #component_name in the component class. 6 | // 7 | // import { Controller as BaseController } from "stimulus"; 8 | // 9 | // export class Controller extends BaseController { 10 | // connect() { 11 | // } 12 | // 13 | // disconnect() { 14 | // } 15 | // } 16 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/avatar/index.js: -------------------------------------------------------------------------------- 1 | import "./index.css" 2 | 3 | // Add a Stimulus controller for this component. 4 | // It will automatically registered and its name will be available 5 | // via #component_name in the component class. 6 | // 7 | // import { Controller as BaseController } from "stimulus"; 8 | // 9 | // export class Controller extends BaseController { 10 | // connect() { 11 | // } 12 | // 13 | // disconnect() { 14 | // } 15 | // } 16 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/badge/index.js: -------------------------------------------------------------------------------- 1 | import "./index.css" 2 | 3 | // Add a Stimulus controller for this component. 4 | // It will automatically registered and its name will be available 5 | // via #component_name in the component class. 6 | // 7 | // import { Controller as BaseController } from "stimulus"; 8 | // 9 | // export class Controller extends BaseController { 10 | // connect() { 11 | // } 12 | // 13 | // disconnect() { 14 | // } 15 | // } 16 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/button/index.js: -------------------------------------------------------------------------------- 1 | import "./index.css" 2 | 3 | // Add a Stimulus controller for this component. 4 | // It will automatically registered and its name will be available 5 | // via #component_name in the component class. 6 | // 7 | // import { Controller as BaseController } from "stimulus"; 8 | // 9 | // export class Controller extends BaseController { 10 | // connect() { 11 | // } 12 | // 13 | // disconnect() { 14 | // } 15 | // } 16 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/progress/index.js: -------------------------------------------------------------------------------- 1 | import "./index.css" 2 | 3 | // Add a Stimulus controller for this component. 4 | // It will automatically registered and its name will be available 5 | // via #component_name in the component class. 6 | // 7 | // import { Controller as BaseController } from "stimulus"; 8 | // 9 | // export class Controller extends BaseController { 10 | // connect() { 11 | // } 12 | // 13 | // disconnect() { 14 | // } 15 | // } 16 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/table/index.js: -------------------------------------------------------------------------------- 1 | import "./index.css" 2 | 3 | // Add a Stimulus controller for this component. 4 | // It will automatically registered and its name will be available 5 | // via #component_name in the component class. 6 | // 7 | // import { Controller as BaseController } from "stimulus"; 8 | // 9 | // export class Controller extends BaseController { 10 | // connect() { 11 | // } 12 | // 13 | // disconnect() { 14 | // } 15 | // } 16 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/accordion_item/index.js: -------------------------------------------------------------------------------- 1 | import "./index.css" 2 | 3 | // Add a Stimulus controller for this component. 4 | // It will automatically registered and its name will be available 5 | // via #component_name in the component class. 6 | // 7 | // import { Controller as BaseController } from "stimulus"; 8 | // 9 | // export class Controller extends BaseController { 10 | // connect() { 11 | // } 12 | // 13 | // disconnect() { 14 | // } 15 | // } 16 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/breadcrumb/index.js: -------------------------------------------------------------------------------- 1 | import "./index.css" 2 | 3 | // Add a Stimulus controller for this component. 4 | // It will automatically registered and its name will be available 5 | // via #component_name in the component class. 6 | // 7 | // import { Controller as BaseController } from "stimulus"; 8 | // 9 | // export class Controller extends BaseController { 10 | // connect() { 11 | // } 12 | // 13 | // disconnect() { 14 | // } 15 | // } 16 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/breadcrumb_item/index.js: -------------------------------------------------------------------------------- 1 | import "./index.css" 2 | 3 | // Add a Stimulus controller for this component. 4 | // It will automatically registered and its name will be available 5 | // via #component_name in the component class. 6 | // 7 | // import { Controller as BaseController } from "stimulus"; 8 | // 9 | // export class Controller extends BaseController { 10 | // connect() { 11 | // } 12 | // 13 | // disconnect() { 14 | // } 15 | // } 16 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/separator/index.js: -------------------------------------------------------------------------------- 1 | import "./index.css" 2 | 3 | // Add a Stimulus controller for this component. 4 | // It will automatically registered and its name will be available 5 | // via #component_name in the component class. 6 | // 7 | // import { Controller as BaseController } from "@hotwired/stimulus"; 8 | // 9 | // export default class Controller extends BaseController { 10 | // connect() { 11 | // } 12 | // disconnect() { 13 | // } 14 | // } 15 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/aspect_ratio/index.js: -------------------------------------------------------------------------------- 1 | import "./index.css" 2 | 3 | // Add a Stimulus controller for this component. 4 | // It will automatically registered and its name will be available 5 | // via #component_name in the component class. 6 | // 7 | // import { Controller as BaseController } from "@hotwired/stimulus"; 8 | // 9 | // export default class Controller extends BaseController { 10 | // connect() { 11 | // } 12 | // disconnect() { 13 | // } 14 | // } 15 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/toast_item/index.js: -------------------------------------------------------------------------------- 1 | import "./index.css" 2 | 3 | // Add a Stimulus controller for this component. 4 | // It will automatically registered and its name will be available 5 | // via #component_name in the component class. 6 | // 7 | // import { Controller as BaseController } from "@hotwired/stimulus"; 8 | // 9 | // export default class Controller extends BaseController { 10 | // connect() { 11 | // } 12 | // disconnect() { 13 | // } 14 | // } 15 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/toggle_group/index.js: -------------------------------------------------------------------------------- 1 | import "./index.css" 2 | 3 | // Add a Stimulus controller for this component. 4 | // It will automatically registered and its name will be available 5 | // via #component_name in the component class. 6 | // 7 | // import { Controller as BaseController } from "@hotwired/stimulus"; 8 | // 9 | // export default class Controller extends BaseController { 10 | // connect() { 11 | // } 12 | // disconnect() { 13 | // } 14 | // } 15 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/dropdown_menu_item/index.js: -------------------------------------------------------------------------------- 1 | import "./index.css" 2 | 3 | // Add a Stimulus controller for this component. 4 | // It will automatically registered and its name will be available 5 | // via #component_name in the component class. 6 | // 7 | // import { Controller as BaseController } from "@hotwired/stimulus"; 8 | // 9 | // export default class Controller extends BaseController { 10 | // connect() { 11 | // } 12 | // disconnect() { 13 | // } 14 | // } 15 | -------------------------------------------------------------------------------- /lib/generators/view_component/templates/index.js.tt: -------------------------------------------------------------------------------- 1 | import "./index.css" 2 | 3 | // Add a Stimulus controller for this component. 4 | // It will automatically registered and its name will be available 5 | // via #component_name in the component class. 6 | // 7 | // import { Controller as BaseController } from "@hotwired/stimulus"; 8 | // 9 | // export default class Controller extends BaseController { 10 | // connect() { 11 | // } 12 | // disconnect() { 13 | // } 14 | // } 15 | -------------------------------------------------------------------------------- /test/dummy/config/initializers/filter_parameter_logging.rb: -------------------------------------------------------------------------------- 1 | # Be sure to restart your server when you modify this file. 2 | 3 | # Configure parameters to be partially matched (e.g. passw matches password) and filtered from the log file. 4 | # Use this to limit dissemination of sensitive information. 5 | # See the ActiveSupport::ParameterFilter documentation for supported notations and behaviors. 6 | Rails.application.config.filter_parameters += [ 7 | :passw, :secret, :token, :_key, :crypt, :salt, :certificate, :otp, :ssn 8 | ] 9 | -------------------------------------------------------------------------------- /app/views/layouts/rails_ui/preview.html.erb: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Rails ui 5 | <%= csrf_meta_tags %> 6 | <%= csp_meta_tag %> 7 | 8 | <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %> 9 | <%= stylesheet_link_tag "application", media: "all" %> 10 | <%= javascript_include_tag "application", "data-turbo-track": "reload", type: "module" %> 11 | 12 | 13 | 14 | 15 | <%= yield %> 16 | 17 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/breadcrumb/component.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | class RailsUi::Breadcrumb::Component < ApplicationViewComponent 4 | renders_many :items, RailsUi::BreadcrumbItem::Component 5 | 6 | def separator 7 | ''.html_safe 8 | end 9 | end 10 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/alert/component.html.erb: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/dialog/component.rb: -------------------------------------------------------------------------------- 1 | # app/components/rails_ui/alert_dialog/component.rb 2 | module RailsUi 3 | module Dialog 4 | class Component < ApplicationViewComponent 5 | option :id, default: -> { SecureRandom.hex(6) } 6 | option :title 7 | option :description 8 | option :cancel_text, default: -> { "Cancel" } 9 | option :action_text, default: -> { "Action" } 10 | option :close_on_click_outside, default: -> { false } 11 | renders_one :trigger 12 | end 13 | end 14 | end 15 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/progress/component.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | class RailsUi::Progress::Component < ApplicationViewComponent 4 | option :value, default: -> {} 5 | option :max, default: -> { 100 } 6 | option :width, default: -> { "60%" } 7 | 8 | def indeterminate? 9 | value.nil? 10 | end 11 | 12 | def progress_style 13 | if indeterminate? 14 | "transform: translateX(-34%);" 15 | else 16 | "transform: translateX(-#{100 - (value.to_f / max * 100)}%);" 17 | end 18 | end 19 | end 20 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/tooltip/component.html.erb: -------------------------------------------------------------------------------- 1 |
class="relative inline-block"> 2 |
3 | <%= trigger %> 4 |
5 | 11 |
-------------------------------------------------------------------------------- /app/ui/components/rails_ui/avatar/component.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | class RailsUi::Avatar::Component < ApplicationViewComponent 4 | option :src, default: -> {} 5 | option :alt, default: -> { "" } 6 | option :size, default: -> { :sm } 7 | 8 | def size_classes 9 | case size 10 | when :sm 11 | "h-8 w-8" 12 | when :lg 13 | "h-12 w-12" 14 | else # :md 15 | "h-10 w-10" 16 | end 17 | end 18 | 19 | def fallback_initials 20 | alt.split.map(&:first).join[0, 2].upcase 21 | end 22 | end 23 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/button/preview.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | class RailsUi::Button::Preview < ApplicationViewComponentPreview 4 | # You can specify the container class for the default template 5 | # self.container_class = "w-1/2 border border-gray-300" 6 | layout "rails_ui/preview" 7 | 8 | def default 9 | render(RailsUi::Button::Component.new { "dfdfdf" }) 10 | end 11 | 12 | def with_dynamic_title(title: "Example component default") 13 | render(RailsUi::Button::Component.new { "dfdfdf" }) 14 | end 15 | end 16 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/collapsible/component.html.erb: -------------------------------------------------------------------------------- 1 |
class="w-[350px] space-y-2 <%= @class %>"> 2 |
3 | <%= header %> 4 | <%= trigger %> 5 |
6 | 7 | <% items.each do |item| %> 8 |
9 | <%= item %> 10 |
11 | <% end %> 12 | 13 | 16 |
-------------------------------------------------------------------------------- /app/ui/components/rails_ui/breadcrumb/component.html.erb: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/dummy/config/initializers/permissions_policy.rb: -------------------------------------------------------------------------------- 1 | # Be sure to restart your server when you modify this file. 2 | 3 | # Define an application-wide HTTP permissions policy. For further 4 | # information see: https://developers.google.com/web/updates/2018/06/feature-policy 5 | 6 | # Rails.application.config.permissions_policy do |policy| 7 | # policy.camera :none 8 | # policy.gyroscope :none 9 | # policy.microphone :none 10 | # policy.usb :none 11 | # policy.fullscreen :self 12 | # policy.payment :self, "https://secure.example.com" 13 | # end 14 | -------------------------------------------------------------------------------- /test/dummy/config/initializers/assets.rb: -------------------------------------------------------------------------------- 1 | # Be sure to restart your server when you modify this file. 2 | 3 | # Version of your assets, change this if you want to expire all your assets. 4 | Rails.application.config.assets.version = "1.0" 5 | 6 | # Add additional assets to the asset load path. 7 | # Rails.application.config.assets.paths << Emoji.images_path 8 | 9 | # Precompile additional assets. 10 | # application.js, application.css, and all non-JS/CSS in the app/assets 11 | # folder are already added. 12 | # Rails.application.config.assets.precompile += %w( admin.js admin.css ) 13 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/calendar/component.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | require "date" 4 | 5 | module RailsUi 6 | module Calendar 7 | class Component < ApplicationViewComponent 8 | option :id, default: -> { SecureRandom.hex(6) } 9 | option :format, default: -> { "PPPP" } 10 | option :view_date, default: -> { Date.today } 11 | option :selected_date, default: -> {} 12 | option :input_id, default: -> { "formatted-date" } 13 | 14 | def weekdays 15 | %w[Mo Tu We Th Fr Sa Su] 16 | end 17 | end 18 | end 19 | end 20 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/card/component.html.erb: -------------------------------------------------------------------------------- 1 |
2 |
3 |

4 | <%= title %> 5 |

6 |

7 | <%= description %> 8 |

9 |
10 |
11 | <%= content %> 12 |
13 | <% if footer %> 14 |
15 | <%= footer %> 16 |
17 | <% end %> 18 |
-------------------------------------------------------------------------------- /app/ui/components/rails_ui/switch/index.css: -------------------------------------------------------------------------------- 1 | /* Use component-local class names and add them to HTML via #class_for(name) helper */ 2 | 3 | /* CHECKBOX TOGGLE SWITCH */ 4 | /* @apply rules for documentation, these do not work as inline style */ 5 | .toggle-checkbox:checked { 6 | @apply right-0 border-green-400; 7 | right: 0; 8 | border-color: #68D391; 9 | } 10 | .toggle-checkbox:checked + .toggle-label { 11 | @apply bg-green-400; 12 | background-color: #68D391; 13 | } 14 | 15 | .toggle-checkbox:disabled + .toggle-label { 16 | @apply cursor-not-allowed; 17 | background-color: #68D391; 18 | } 19 | 20 | -------------------------------------------------------------------------------- /bin/rails: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env ruby 2 | # This command will automatically be run when you run "rails" with Rails gems 3 | # installed from the root of your application. 4 | 5 | ENGINE_ROOT = File.expand_path("..", __dir__) 6 | ENGINE_PATH = File.expand_path("../lib/rails_ui/engine", __dir__) 7 | APP_PATH = File.expand_path("../test/dummy/config/application", __dir__) 8 | 9 | # Set up gems listed in the Gemfile. 10 | ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../Gemfile", __dir__) 11 | require "bundler/setup" if File.exist?(ENV["BUNDLE_GEMFILE"]) 12 | 13 | require "rails/all" 14 | require "rails/engine/commands" 15 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/breadcrumb_item/component.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | class RailsUi::BreadcrumbItem::Component < ApplicationViewComponent 4 | option :href, default: -> { "#" } 5 | option :current, default: -> { false } 6 | 7 | def call 8 | if current 9 | content_tag(:span, content, role: "link", "aria-disabled": "true", "aria-current": "page", class: "font-normal text-foreground max-w-20 truncate md:max-w-none") 10 | else 11 | link_to(content, href, class: "transition-colors hover:text-foreground max-w-20 truncate md:max-w-none") 12 | end 13 | end 14 | end 15 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/input_otp/component.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | module RailsUi 4 | module InputOtp 5 | class Component < ApplicationViewComponent 6 | option :groups, default: -> { [3, 3] } # Default to two groups of 3 7 | option :separator, default: -> { true } 8 | option :input_mode, default: -> { "numeric" } 9 | option :pattern, default: -> { "^\\d+$" } 10 | option :autocomplete, default: -> { "one-time-code" } 11 | option :disabled, default: -> { false } 12 | 13 | def total_digits 14 | groups.sum 15 | end 16 | end 17 | end 18 | end 19 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/alert_dialog/component.rb: -------------------------------------------------------------------------------- 1 | # app/components/rails_ui/alert_dialog/component.rb 2 | module RailsUi 3 | module AlertDialog 4 | class Component < ApplicationViewComponent 5 | option :id, default: -> { SecureRandom.hex(6) } 6 | option :title 7 | option :description 8 | option :cancel_text, default: -> { "Cancel" } 9 | option :action_text, default: -> { "Continue" } 10 | option :on_cancel, default: -> { "" } 11 | option :on_action, default: -> { "" } 12 | option :close_on_click_outside, default: -> { false } 13 | 14 | renders_one :trigger 15 | end 16 | end 17 | end 18 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/tooltip/component.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | class RailsUi::Tooltip::Component < ApplicationViewComponent 4 | option :placement, default: -> { "top" } 5 | option :delay, default: -> { 700 } 6 | option :classes, default: -> { "" } 7 | 8 | renders_one :trigger 9 | 10 | def data_attributes 11 | { 12 | controller: "ui-tooltip", 13 | ui_tooltip_placement_value: placement, 14 | ui_tooltip_delay_value: delay 15 | } 16 | end 17 | 18 | def data_attribute_string 19 | data_attributes.map { |key, value| "data-#{key.to_s.dasherize}=#{value}" }.join(" ") 20 | end 21 | end 22 | -------------------------------------------------------------------------------- /app/views/rails_ui/playground/sections/_textarea.html.erb: -------------------------------------------------------------------------------- 1 | 2 | 3 | <%= form_with(model: @user_form, builder: RailsUi::FormHelper) do |form| %> 4 | 5 | <%= form.textarea_field :description, label: 'Description', placeholder: 'Enter description here...', rows: 4 %> 6 | 7 | 8 | <%= form.textarea_field :notes, label: 'Custom Label', helper: 'Additional information goes here', ring_color: '234 89% 74%' %> 9 | 10 | 11 | <%= form.textarea_field :comments, label: false, placeholder: 'Your comments...' %> 12 | 13 | <% end %> -------------------------------------------------------------------------------- /app/ui/components/rails_ui/progress/component.html.erb: -------------------------------------------------------------------------------- 1 |
5 | role="progressbar" 6 | data-state="<%= indeterminate? ? 'indeterminate' : 'loading' %>" 7 | data-max="<%= max %>" 8 | class="relative h-4 overflow-hidden rounded-full bg-secondary" 9 | style="width: <%= width %>;" 10 | > 11 |
17 |
-------------------------------------------------------------------------------- /app/ui/components/rails_ui/toggle/component.html.erb: -------------------------------------------------------------------------------- 1 |
> 2 | 19 |
-------------------------------------------------------------------------------- /app/ui/components/rails_ui/toggle/index.js: -------------------------------------------------------------------------------- 1 | import "./index.css" 2 | 3 | // app/javascript/controllers/ui-toggle-controller.js 4 | import { Controller } from "@hotwired/stimulus" 5 | 6 | export default class extends Controller { 7 | static targets = ["button"] 8 | static values = { 9 | pressed: Boolean 10 | } 11 | 12 | connect() { 13 | this.updatePressed() 14 | } 15 | 16 | toggle() { 17 | this.pressedValue = !this.pressedValue 18 | this.updatePressed() 19 | } 20 | 21 | updatePressed() { 22 | this.buttonTarget.setAttribute("aria-pressed", this.pressedValue) 23 | this.buttonTarget.dataset.state = this.pressedValue ? "on" : "off" 24 | } 25 | } -------------------------------------------------------------------------------- /app/ui/components/rails_ui/collapsible/component.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | class RailsUi::Collapsible::Component < ApplicationViewComponent 4 | option :open, default: -> { false } 5 | # option :class, default: -> { "" } 6 | option :content_class, default: -> { "" } 7 | 8 | renders_one :trigger 9 | renders_one :header 10 | renders_many :items 11 | renders_one :collapsible_content 12 | 13 | def stimulus_attributes 14 | { 15 | controller: "ui-collapsible", 16 | ui_collapsible_open_value: open 17 | } 18 | end 19 | 20 | def data_attributes 21 | stimulus_attributes.map { |k, v| "data-#{k.to_s.dasherize}=#{v}" }.join(" ") 22 | end 23 | end 24 | -------------------------------------------------------------------------------- /app/views/rails_ui/playground/sections/_calendar.html.erb: -------------------------------------------------------------------------------- 1 | 2 | <%= render(RailsUi::ComponentPreview::Component.new(title: "Avatar with Image")) do |component| %> 3 | <% component.with_example do %> 4 |
5 | <%= render RailsUi::Calendar::Component.new( 6 | format: "PPPP", 7 | view_date: Date.today, 8 | selected_date: Date.today, 9 | input_id: "my-date-input" 10 | ) %> 11 |
12 | <% end %> 13 | 14 | 15 | <% component.with_code do %> 16 | <%%= render RailsUi::Calendar::Component.new( 17 | format: "PPPP", 18 | view_date: Date.today, 19 | selected_date: Date.today, 20 | input_id: "my-date-input" 21 | ) %> 22 | <% end %> 23 | <% end %> 24 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/collapsible/index.js: -------------------------------------------------------------------------------- 1 | import "./index.css" 2 | 3 | // app/javascript/controllers/ui-collapsible-controller.js 4 | import { Controller } from "@hotwired/stimulus" 5 | 6 | export default class extends Controller { 7 | static targets = ["content"] 8 | static values = { 9 | open: Boolean 10 | } 11 | 12 | connect() { 13 | this.updateVisibility() 14 | } 15 | 16 | toggle() { 17 | this.openValue = !this.openValue 18 | } 19 | 20 | openValueChanged() { 21 | this.updateVisibility() 22 | } 23 | 24 | updateVisibility() { 25 | if (this.openValue) { 26 | this.contentTarget.classList.remove("hidden") 27 | } else { 28 | this.contentTarget.classList.add("hidden") 29 | } 30 | } 31 | } -------------------------------------------------------------------------------- /test/dummy/config/initializers/inflections.rb: -------------------------------------------------------------------------------- 1 | # Be sure to restart your server when you modify this file. 2 | 3 | # Add new inflection rules using the following format. Inflections 4 | # are locale specific, and you may define rules for as many different 5 | # locales as you wish. All of these examples are active by default: 6 | # ActiveSupport::Inflector.inflections(:en) do |inflect| 7 | # inflect.plural /^(ox)$/i, "\\1en" 8 | # inflect.singular /^(ox)en/i, "\\1" 9 | # inflect.irregular "person", "people" 10 | # inflect.uncountable %w( fish sheep ) 11 | # end 12 | 13 | # These inflection rules are supported but not enabled by default: 14 | # ActiveSupport::Inflector.inflections(:en) do |inflect| 15 | # inflect.acronym "RESTful" 16 | # end 17 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/number_input/index.js: -------------------------------------------------------------------------------- 1 | 2 | // Add a Stimulus controller for this component. 3 | // It will automatically registered and its name will be available 4 | // via #component_name in the component class. 5 | // 6 | import { Controller } from "@hotwired/stimulus" 7 | 8 | export default class extends Controller { 9 | static targets = ["input"]; 10 | 11 | connect() { 12 | this.step = parseFloat(this.inputTarget.getAttribute("step")) || 1; 13 | } 14 | 15 | up() { 16 | this.changeValue(this.step); 17 | } 18 | 19 | down() { 20 | this.changeValue(-this.step); 21 | } 22 | 23 | changeValue(delta) { 24 | const currentValue = parseFloat(this.inputTarget.value) || 0; 25 | this.inputTarget.value = currentValue + delta; 26 | } 27 | } -------------------------------------------------------------------------------- /app/models/rails_ui/user_form.rb: -------------------------------------------------------------------------------- 1 | class RailsUi::UserForm 2 | include ActiveModel::Model 3 | include ActiveModel::Attributes 4 | include ActiveModel::Validations 5 | 6 | # Define attributes 7 | attribute :name, :string 8 | attribute :email, :string 9 | attribute :url, :string 10 | attribute :quantity, :integer 11 | attribute :avatar, :string 12 | attribute :card_number, :string 13 | attribute :expiry_date, :string 14 | 15 | # Validations 16 | # validates :name, presence: true, length: { minimum: 2 } 17 | validates :email, format: { with: URI::MailTo::EMAIL_REGEXP, message: "must be a valid email address" } 18 | 19 | # Custom error handling (optional) 20 | def error_messages_for(attribute) 21 | errors[attribute].join(", ") 22 | end 23 | end 24 | 25 | -------------------------------------------------------------------------------- /test/test_helper.rb: -------------------------------------------------------------------------------- 1 | # Configure Rails Environment 2 | ENV["RAILS_ENV"] = "test" 3 | 4 | require_relative "../test/dummy/config/environment" 5 | ActiveRecord::Migrator.migrations_paths = [File.expand_path("../test/dummy/db/migrate", __dir__)] 6 | ActiveRecord::Migrator.migrations_paths << File.expand_path("../db/migrate", __dir__) 7 | require "rails/test_help" 8 | 9 | # Load fixtures from the engine 10 | if ActiveSupport::TestCase.respond_to?(:fixture_paths=) 11 | ActiveSupport::TestCase.fixture_paths = [File.expand_path("fixtures", __dir__)] 12 | ActionDispatch::IntegrationTest.fixture_paths = ActiveSupport::TestCase.fixture_paths 13 | ActiveSupport::TestCase.file_fixture_path = File.expand_path("fixtures", __dir__) + "/files" 14 | ActiveSupport::TestCase.fixtures :all 15 | end 16 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/input_counter/index.js: -------------------------------------------------------------------------------- 1 | import { Controller } from "@hotwired/stimulus"; 2 | 3 | export default class extends Controller { 4 | static targets = ["input", "counter", "charactersLeft"]; 5 | 6 | connect() { 7 | this.updateCharacterCount(); 8 | } 9 | 10 | updateCharacterCount() { 11 | const currentLength = this.inputTarget.value.length; 12 | const maxLength = this.inputTarget.maxLength; 13 | if(this.hasCounterTarget) 14 | this.counterTarget.textContent = `${currentLength}/${maxLength}`; 15 | 16 | const charactersLeft = maxLength - currentLength; 17 | if(this.hasCharactersLeftTarget) 18 | this.charactersLeftTarget.textContent = charactersLeft 19 | } 20 | 21 | onInput() { 22 | this.updateCharacterCount(); 23 | } 24 | } -------------------------------------------------------------------------------- /app/views/rails_ui/playground/sections/_input_otp.html.erb: -------------------------------------------------------------------------------- 1 | <%= render(RailsUi::ComponentPreview::Component.new(title: "Default Button")) do |component| %> 2 | <% component.with_example do %> 3 | <%= render RailsUi::InputOtp::Component.new( 4 | groups: [3, 3], # Two groups of 3 digits 5 | separator: true, 6 | input_mode: "numeric", 7 | pattern: "^\\d+$", 8 | autocomplete: "one-time-code", 9 | disabled: false 10 | ) %> 11 | 12 | <% end %> 13 | 14 | <% component.with_code do %> 15 | 16 | <%%= render RailsUi::InputOtp::Component.new( 17 | groups: [3, 3], # Two groups of 3 digits 18 | separator: true, 19 | input_mode: "numeric", 20 | pattern: "^\\d+$", 21 | autocomplete: "one-time-code", 22 | disabled: false 23 | ) %> 24 | <% end %> 25 | <% end %> -------------------------------------------------------------------------------- /app/ui/components/rails_ui/skeleton/component.html.erb: -------------------------------------------------------------------------------- 1 | <% if variant == :avatar %> 2 |
3 |
4 |
5 | <% lines.times do |i| %> 6 |
7 | <% end %> 8 |
9 |
10 | <% else %> 11 |
12 |
13 |
14 | <% lines.times do |i| %> 15 |
16 | <% end %> 17 |
18 |
19 | <% end %> -------------------------------------------------------------------------------- /lib/generators/view_component/USAGE: -------------------------------------------------------------------------------- 1 | Description: 2 | ============ 3 | Creates a new view component, test and preview files. 4 | Pass the component name, either CamelCased or under_scored, and an optional list of attributes as arguments. 5 | 6 | Example: 7 | ======== 8 | bin/rails generate view_component Profile name age 9 | 10 | creates a Profile component and test: 11 | Component: app/frontend/components/profile/component.rb 12 | Template: app/frontend/components/profile/component.html.erb 13 | Test: spec/frontend/components/profile_component_spec.rb 14 | Preview: app/frontend/components/profile/component_preview.rb 15 | JS: app/frontend/components/profile/component.js 16 | CSS: app/frontend/components/profile/component.css 17 | -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | source "https://rubygems.org" 2 | git_source(:github) { |repo| "https://github.com/#{repo}.git" } 3 | 4 | # Specify your gem's dependencies in rails_ui.gemspec. 5 | gemspec 6 | 7 | gem "puma" 8 | 9 | # gem "sqlite3", "2.0.2" 10 | gem "pg" 11 | gem "pry" 12 | 13 | gem "sprockets-rails" 14 | 15 | gem "view_components" 16 | gem "view_component-contrib" 17 | 18 | gem "tailwindcss-rails" 19 | gem "turbo-rails", github: "hotwired/turbo-rails", branch: "main" 20 | 21 | group :development do 22 | gem "web-console", ">= 3.3.0" 23 | gem "standard" 24 | end 25 | 26 | # Start debugger with binding.b [https://github.com/ruby/debug] 27 | # gem "debug", ">= 1.0.0" 28 | 29 | gem "dry-initializer", "~> 3.1" 30 | 31 | gem "method_source", "~> 1.1" 32 | 33 | gem "jsbundling-rails", "~> 1.3" 34 | 35 | gem "stimulus-rails", "~> 1.3" 36 | -------------------------------------------------------------------------------- /app/assets/stylesheets/rails_ui/application.css: -------------------------------------------------------------------------------- 1 | /* 2 | * This is a manifest file that'll be compiled into application.css, which will include all the files 3 | * listed below. 4 | * 5 | * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets, 6 | * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path. 7 | * 8 | * You're free to add application-wide styles to this file and they'll appear at the bottom of the 9 | * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS 10 | * files in this directory. Styles in this file should be added after the last require_* statement. 11 | * It is generally better to create a new file per style scope. 12 | * 13 | *= require_tree . 14 | *= require_self 15 | */ 16 | -------------------------------------------------------------------------------- /test/dummy/app/assets/stylesheets/application.css: -------------------------------------------------------------------------------- 1 | /* 2 | * This is a manifest file that'll be compiled into application.css, which will include all the files 3 | * listed below. 4 | * 5 | * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets, 6 | * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path. 7 | * 8 | * You're free to add application-wide styles to this file and they'll appear at the bottom of the 9 | * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS 10 | * files in this directory. Styles in this file should be added after the last require_* statement. 11 | * It is generally better to create a new file per style scope. 12 | * 13 | *= require_tree . 14 | *= require_self 15 | */ 16 | -------------------------------------------------------------------------------- /app/ui/components/rails_ui/separator/component.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | class RailsUi::Separator::Component < ApplicationViewComponent 4 | # Available orientations for the separator 5 | ORIENTATIONS = %w[horizontal vertical].freeze 6 | 7 | # Define initializer to accept orientation and class_name as parameters 8 | def initialize(orientation: "horizontal", class_name: "") 9 | @orientation = ORIENTATIONS.include?(orientation) ? orientation : "horizontal" 10 | @class_name = class_name 11 | end 12 | 13 | # Provides the CSS class for the separator 14 | def separator_class 15 | base_class = "shrink-0 bg-border" 16 | orientation_class = (@orientation == "vertical") ? "h-full w-[1px]" : "h-[1px] w-full my-4" 17 | [base_class, orientation_class, @class_name].compact.join(" ") 18 | end 19 | end 20 | -------------------------------------------------------------------------------- /app/views/rails_ui/playground/_nav.erb: -------------------------------------------------------------------------------- 1 |
2 | 20 |
-------------------------------------------------------------------------------- /app/ui/components/rails_ui/component_preview/component.erb: -------------------------------------------------------------------------------- 1 |
2 |

3 | <%= title %> 4 |

5 | 6 | 7 | <%= render RailsUi::Resizable::Component.new( 8 | direction: "horizontal", 9 | panels: [ 10 | { 11 | defaultSize: 50, 12 | content: -> { 13 | "
14 | #{example} 15 |
" 16 | } 17 | }, 18 | { 19 | defaultSize: 50, 20 | content: -> { 21 | "
22 |   #{render_code}
23 |
" 24 | } 25 | } 26 | ] 27 | ) 28 | %> 29 | 30 | 31 | 35 |
-------------------------------------------------------------------------------- /app/ui/components/rails_ui/popover/component.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | # app/components/rails_ui/popover/component.rb 4 | # 5 | 6 | # Remember to style the arrow appropriately in your CSS. 7 | # You might want to add something like this to your stylesheet: 8 | # cssCopy[data-ui-popover-target="arrow"] { 9 | # position: absolute; 10 | # background: inherit; 11 | # width: 8px; 12 | # height: 8px; 13 | # transform: rotate(45deg); 14 | # } 15 | # 16 | module RailsUi 17 | module Popover 18 | class Component < ApplicationViewComponent 19 | renders_one :trigger 20 | 21 | option :id, default: -> { SecureRandom.hex(6) } 22 | option :placement, default: -> { "bottom" } 23 | option :offset, default: -> { 6 } 24 | option :arrow, default: -> { false } 25 | option :trigger_type, default: -> { "click" } 26 | end 27 | end 28 | end 29 | -------------------------------------------------------------------------------- /test/dummy/app/views/layouts/application.html.erb: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Dummy 5 | 6 | <%= csrf_meta_tags %> 7 | <%= csp_meta_tag %> 8 | <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %> 9 | 10 | 11 |