diff --git a/README.md b/README.md index c0376c6..685d79d 100644 --- a/README.md +++ b/README.md @@ -1,27 +1,100 @@ A Ruby UI component library for DaisyUI using Phlex ✨ -## Installation +# ⚙️ Installation -Install the gem and add to the application's Gemfile by executing: +## 1. Install CSS dependencies - $ bundle add phlexy_ui +You can install TailwindCSS and DaisyUI either via a JS bundler or via importmaps. -If bundler is not being used to manage dependencies, install the gem by executing: +### JS Bundler - $ gem install phlexy_ui +**TailwindCSS** -## Development +Install TailwindCSS by following the instructions in the TailwindCSS documentation, using either the Tailwind CLI or PostCSS. + +**DaisyUI** + +Install DaisyUI by following the instructions in the DaisyUI documentation as a Node package. + +### Importmaps + +**TailwindCSS with DaisyUI** + +You'll need to download a TailwindCSS standalone CLI that comes bundled with DaisyUI by following the instructions in the [tailwind-cli-extra repo](https://github.com/dobicinaitis/tailwind-cli-extra). + +Afterwards, place it somewhere in your project, e.g. in the bin directory. + +If you want to compile the standalone TailwindCSS CLI with DaisyUI yourself, you can follow the instructions here. + +**tailwindcss-rails gem** + +Install tailwindcss-rails gem for Rails to automatically include your TailwindCSS stylesheets when the asset pipeline compiles your assets. + +For this, you'll need to install the gem by following the instructions in the [tailwindcss-rails repo](https://github.com/rails/tailwindcss-rails). + +Finally, you'll need to set the `TAILWINDCSS_INSTALL_DIR` environment variable in your Rails app pointing to the directory where you plaed the binary from the tailwind-cli-extra repo mentioned above. e.g. `TAILWINDCSS_INSTALL_DIR=bin` + +### 2. Install Ruby dependencies + +#### Install Phlex + +Install Phlex by following the instructions in the [Phlex documentation](https://www.phlex.fun/#rails-introduction). + +#### Install PhlexyUI + +1. Add the PhlexyUI gem to your Gemfile: + +``` +bundle add phlexy_ui +``` + +2. Include the `PhlexyUI` module in `ApplicationComponent`: + +```rb +class ApplicationComponent < Phlex::HTML + include PhlexyUI +end +``` + +3. Update your `tailwind.config.js` file to include PhlexyUI styles: + +```js +const execSync = require("child_process").execSync; +const outputPhlexyUI = execSync("bundle show phlexy_ui", { encoding: "utf-8" }); +const phlexyUIPath = outputPhlexyUI.trim() + "/**/*.rb"; +module.exports = { + content: [ + // ... other paths + phlexyUIPath, + ], +}; +``` + +4. Update your tailwind.config.js file to detect TailwindCSS classes in Ruby files. + +```js +module.exports = { + content: [ + // ... other paths + // + // Note the "rb" extension at the end + "./app/views/**/*.{erb,haml,html,slim,rb}", + ], +}; +``` + +# 🔧 Development After checking out the repo, run `bin/setup` to install dependencies. Then, run `bundle exec rspec` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment. -## Contributing +# 💻 Contributing Bug reports and pull requests are welcome on GitHub at https://github.com/PhlexyUI/phlexy_ui. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [code of conduct](https://github.com/[USERNAME]/phlexy_ui/blob/main/CODE_OF_CONDUCT.md). -## License +# 📃 License The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT). -## Code of Conduct +# ☝️ Code of Conduct Everyone interacting in the PhlexyUI project's codebases, issue trackers, chat rooms and mailing lists is expected to follow the [code of conduct](https://github.com/[USERNAME]/phlexy_ui/blob/main/CODE_OF_CONDUCT.md).