shadwire.json — Shadwire

shadwire init writes this file once. After that, every add, update and remove updates the installed section. Commit it along with the rest of your code.

{
  "$schema": "https://shadwire.edumoraes.dev.br/schema.json",
  "registry": "https://shadwire.edumoraes.dev.br/r",
  "tailwind": { "css": "app/assets/tailwind/application.css" },
  "aliases": {
    "components":  "app/components",
    "ui":          "app/components/ui",
    "helpers":     "app/helpers",

{
  "$schema": "https://shadwire.edumoraes.dev.br/schema.json",
  "registry": "https://shadwire.edumoraes.dev.br/r",
  "tailwind": { "css": "app/assets/tailwind/application.css" },
  "aliases": {
    "components":  "app/components",
    "ui":          "app/components/ui",
    "helpers":     "app/helpers",
    "controllers": "app/javascript/controllers",
    "vendorCss":   "vendor/shadwire"
  },
  "installed": {
    "button": {
      "version": "0.2.0",
      "files": [
        "app/components/ui/button_component.rb",
        "app/helpers/ui/button_helper.rb"
      ]
    }
  }
}

Fields

Field	What it is
`registry`	The base URL the CLI installs from. `init --registry` sets it. Accepts `https://` and `file://`.
`tailwind.css`	The app's Tailwind entrypoint, where `init` adds the `@import` of shadwire.css.
`aliases`	Where each kind of file goes. Change these if your app does not follow the standard Rails tree.
`installed`	One entry per component: the registry `version` and the files it owns. `diff`, `update` and `remove` work from this list.

Aliases

Each file in the registry has a kind (component, helper, Stimulus controller, CSS), and the alias for that kind sets the directory it is written to.

Alias	Default	Receives
`components`	`app/components`	The shared UiComponent superclass.
`ui`	`app/components/ui`	The component classes and their templates.
`helpers`	`app/helpers`	The Ui::Helper modules holding the ui_ wrappers.
`controllers`	`app/javascript/controllers`	The Stimulus controllers of the interactive components.
`vendorCss`	`vendor/shadwire`	shadwire.css, which holds the tokens.

If your app has a different layout, an engine for example, point the aliases at the right directories before the first add:

{
  "aliases": {
    "components":  "app/components",
    "ui":          "app/components/ui",
    "helpers":     "app/helpers",
    "controllers": "app/javascript/controllers",
    "vendorCss":   "app/assets/stylesheets/shadwire"
  },

{
  "aliases": {
    "components":  "app/components",
    "ui":          "app/components/ui",
    "helpers":     "app/helpers",
    "controllers": "app/javascript/controllers",
    "vendorCss":   "app/assets/stylesheets/shadwire"
  },
  "tailwind": { "css": "app/assets/stylesheets/application.tailwind.css" }
}

Changing an alias after installing moves nothing

The paths in installed[].files still point to where the files were first written. To change an alias after installing components, remove them, change the alias, and install them again.

The Tailwind @import

init adds this import to the file tailwind.css points to. It is what brings the tokens into the Tailwind build:

@import "tailwindcss";
@import "../../../vendor/shadwire/shadwire.css";

bin/shadwire status --json includes tailwind.importPresent. If it is false, the import has been removed and the components will render without colours.

How the registry is resolved

Every command picks the registry URL in this order:

the --registry flag, if passed;
the registry field of the app's shadwire.json;
the built-in default, https://shadwire.edumoraes.dev.br/r.

bin/shadwire add button --registry file://$PWD/build/r
shadwire init --registry https://ui.example.com/r

Passed to init, --registry is saved in the file. Passed to any other command, it only applies to that run. The Registry page describes the format.