{"id":13878776,"url":"https://github.com/yuki24/shoelace-rails","last_synced_at":"2025-10-27T11:30:35.581Z","repository":{"id":56895364,"uuid":"397068596","full_name":"yuki24/shoelace-rails","owner":"yuki24","description":"Rails helpers for https://shoelace.style, the design system.","archived":false,"fork":false,"pushed_at":"2024-08-16T05:47:21.000Z","size":271,"stargazers_count":47,"open_issues_count":2,"forks_count":3,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-02-08T04:28:29.583Z","etag":null,"topics":["custom-elements","design-system","rails","ruby","ruby-on-rails","shoelace","ui","ux","web-components","webcomponents"],"latest_commit_sha":null,"homepage":"","language":"Ruby","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yuki24.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-08-17T02:49:34.000Z","updated_at":"2025-01-09T00:38:54.000Z","dependencies_parsed_at":"2023-02-06T14:45:21.525Z","dependency_job_id":"eaab38c1-11cf-4a7c-ad44-ead9066fd743","html_url":"https://github.com/yuki24/shoelace-rails","commit_stats":{"total_commits":192,"total_committers":3,"mean_commits":64.0,"dds":0.21875,"last_synced_commit":"a1666b3e7056d588282184969e2824cea8327e24"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuki24%2Fshoelace-rails","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuki24%2Fshoelace-rails/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuki24%2Fshoelace-rails/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuki24%2Fshoelace-rails/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yuki24","download_url":"https://codeload.github.com/yuki24/shoelace-rails/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238486743,"owners_count":19480470,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["custom-elements","design-system","rails","ruby","ruby-on-rails","shoelace","ui","ux","web-components","webcomponents"],"created_at":"2024-08-06T08:01:59.613Z","updated_at":"2025-10-27T11:30:35.139Z","avatar_url":"https://github.com/yuki24.png","language":"Ruby","funding_links":[],"categories":["Ruby"],"sub_categories":[],"readme":"# Shoelace Rails\n\nThe `shoelace-rails` gem adds useful helper methods for [Shoelace.style](https://shoelace.style), the design system.\n\n## Compatibility with Shoelace\n\n* **For Shoelace version \u003e= 2.0.0-beta.88, use the gem version `0.4.0` or above**.\n* For Shoelace version \u003c= 2.0.0-beta.87, use the gem version `0.3.0`.\n\n## Installation\n\nAdd this line to your application's Gemfile:\n\n```ruby\ngem 'shoelace-rails'\n```\n\nAnd then execute:\n\n```\n$ bundle install\n```\n\nAdditionally, you need to add the following npm packages:\n\n```sh\n$ yarn add @shoelace-style/shoelace\n```\n\n## Set up CSS\n\n### Asset Pipeline\n\nAdd the following lines to the `app/assets/stylesheets/application.css` if you need the sprockets gem:\n\n```scss\n/*\n *= require @shoelace-style/shoelace/dist/themes/light.css\n *= require @shoelace-style/shoelace/dist/themes/dark.css\n */\n```\n\n### Webpack \u0026 CSS Loader\n\nAdd the following lines to the `app/packs/entrypoints/application.js` if you prefer the webpack and CSS loader:\n\n```js\nimport \"@shoelace-style/shoelace/dist/themes/light.css\"\nimport \"@shoelace-style/shoelace/dist/themes/dark.css\" // Optional dark mode\n```\n\n## Set up Javascript\n\nIn this README, it is assumed that you are using a JS bundler such as `webpack` or `esbuild`. In order to define all\nthe custome elements,  import the shoelace dependency in the entrypoint file:\n\n```js\nimport \"@shoelace-style/shoelace\"\n```\n\nThat's it!\n\n### Shoelace Icons\n\nShoelace icons are automatically set up to load properly, so you don't need to add any extra code. More specifically,\n\n * In development, the icons are served by the `ActionDispatch::Static` middleware, directly from the\n   `node_modules/@shoelace-style/shoelace/dist/assets/icons` directory.\n * In production, the icon files are automatically copied into the `public/assets` directory as part of the\n   `assets:precompile` rake task.\n\n## View Helpers\n\nAs explained above, this gem provides drop-in replacements to Rails view helpers.\n\n### Form Helpers\n\nThe `sl_form_with` or `sl_form_for` method could be used to generate a form with the Shoelace components:\n\n```erb\n\u003c%= sl_form_for @user do |form| %\u003e\n  \u003c%  # Text input: https://shoelace.style/components/input %\u003e\n  \u003c%= form.text_field :name %\u003e\n  \u003c%= form.password_field :password, placeholder: \"Password Toggle\", 'toggle-password': true %\u003e\n\n  \u003c%  # Radio buttons: https://shoelace.style/components/color-picker %\u003e\n  \u003c%= form.color_field :color %\u003e\n\n  \u003c%  # Radio buttons: https://shoelace.style/components/radio %\u003e\n  \u003c%= form.collection_radio_buttons :status, { id_1: \"Option 1\", id_2: \"Option 2\", id_3: \"Option 3\" }, :first, :last %\u003e\n\n  \u003c%  # Select: https://shoelace.style/components/select %\u003e\n  \u003c%= form.collection_select :tag, { id_1: \"Option 1\", id_2: \"Option 2\", id_3: \"Option 3\" }, :first, :last, {}, { placeholder: \"Select one\" } %\u003e\n\n  \u003c%= form.submit %\u003e\n\u003c% end %\u003e\n```\n\nAnd this code will produce:\n\n```html\n\u003cform class=\"new_user\" id=\"new_user\" data-remote=\"true\" action=\"/\" accept-charset=\"UTF-8\" method=\"post\"\u003e\n  \u003csl-input label=\"Name\" type=\"text\" name=\"user[name]\" id=\"user_name\"\u003e\u003c/sl-input\u003e\n  \u003csl-input label=\"Password\" type=\"password\" name=\"user[password]\" id=\"user_password\"\u003e\u003c/sl-input\u003e\n  \u003csl-color-picker value=\"#ffffff\" name=\"user[color]\" id=\"user_color\"\u003e\u003c/sl-color-picker\u003e\n\n  \u003csl-radio-group no-fieldset=\"true\"\u003e\n    \u003csl-radio value=\"id_1\" name=\"user[status]\" id=\"user_status_id_1\"\u003eOption 1\u003c/sl-radio\u003e\n    \u003csl-radio value=\"id_2\" name=\"user[status]\" id=\"user_status_id_2\"\u003eOption 2\u003c/sl-radio\u003e\n    \u003csl-radio value=\"id_3\" name=\"user[status]\" id=\"user_status_id_3\"\u003eOption 3\u003c/sl-radio\u003e\n  \u003c/sl-radio-group\u003e\n\n  \u003csl-select placeholder=\"Select one\" name=\"user[tag]\" id=\"user_tag\"\u003e\n    \u003csl-menu-item value=\"id_1\"\u003eOption 1\u003c/sl-menu-item\u003e\n    \u003csl-menu-item value=\"id_2\"\u003eOption 2\u003c/sl-menu-item\u003e\n    \u003csl-menu-item value=\"id_3\"\u003eOption 3\u003c/sl-menu-item\u003e\n  \u003c/sl-select\u003e\n\n  \u003csl-button submit=\"true\" type=\"primary\" data-disable-with=\"Create User\"\u003eCreate User\u003c/sl-button\u003e\n\u003c/form\u003e\n```\n\n#### Using The `sl-select` component with `multiple`\n\nTDB\n\n#### Using the Shoelace FormBuilder with other gems\n\nSometimes you want to use the Shoelace FormBuilder with other gems, such as [ransack](https://github.com/activerecord-hackery/ransack).\nIn this case, you can not use the `sl_form_for` or `sl_form_with` methods in tandem with `ransack`, but you can use\nthe `Shoelace::FormBuilder` with e.g. [the `search_form_for` method](https://activerecord-hackery.github.io/ransack/getting-started/simple-mode/#form-helper):\n\n```erb\n\u003c%= search_form_for @q, builder: Shoelace::FormBuilder do |form| %\u003e\n  ...\n\u003c% end %\u003e\n```\n\n### Tag Helpers\n\n#### `#sl_avatar_tag`\n\nThe `@sl_avatar_tag` method behaves just like the `image_tag` method.\n\n```erb\n\u003c%= sl_avatar_tag \"/path/to/image.jpg\" %\u003e\n```\n\nWill produce:\n\n```html\n\u003csl-avatar image=\"/path/to/image.jpg\"\u003e\u003c/sl-avatar\u003e\n```\n\n#### `#sl_button_to`\n\nThe `sl_button_to` method behaves just like the `link_to` method. Note that this is slightly different from the\nbuilt-in `button_to` method.\n\nWithout a block:\n\n```erb\n\u003c%= sl_button_to \"Next Page\", \"/components?page=2\" %\u003e\n```\n\n```html\n\u003csl-button href=\"/components?page=2\"\u003e\n  Next Page\n\u003c/sl-button\u003e\n```\n\nWith a block:\n\n```erb\n\u003c%= sl_button_to \"/components?page=2\" do %\u003e\n  Next Page \n\u003c% end %\u003e\n```\n\n```html\n\u003csl-button href=\"/components?page=2\"\u003e\n Next Page\n\u003c/sl-button\u003e\n```\n\n#### `#sl_icon_tag`\n\nThe `sl_icon_tag` method takes the `name` attribute value as the first argument:\n\n```erb\n\u003c%= sl_icon_tag \"apple\" %\u003e\n```\n\n```html\n\u003csl-icon name=\"apple\"\u003e\u003c/sl-icon\u003e\n```\n\n## Development\n\n 1. Run `bundle install`\n 2. Make a change and add test coverage\n 3. Run `bundle rails test`\n 4. Make a commit and push it to GitHub\n 5. Send us a pull request\n\n## Contributing\n\nBug reports and pull requests are welcome on GitHub at https://github.com/yuki24/shoelace-rails. This project is\nintended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the\n[code of conduct](https://github.com/yuki24/shoelace-rails/blob/master/CODE_OF_CONDUCT.md).\n\n## License\n\nThe gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).\n\n## Code of Conduct\n\nEveryone interacting in the Shoelace::Rails project's codebases, issue trackers, chat rooms and mailing lists is\nexpected to follow the [code of conduct](https://github.com/yuki24/shoelace-rails/blob/master/CODE_OF_CONDUCT.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyuki24%2Fshoelace-rails","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyuki24%2Fshoelace-rails","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyuki24%2Fshoelace-rails/lists"}