shadwire.json — Shadwire

O shadwire init cria este arquivo uma vez. Depois disso, todo add, update e remove atualiza a seção installed. Faça commit dele junto com o resto do código.

{
  "$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"
      ]
    }
  }
}

Campos

Campo	O que é
`registry`	A URL base de onde a CLI instala. É definida pelo `init --registry`. Aceita `https://` e `file://`.
`tailwind.css`	O entrypoint do Tailwind do app, onde o `init` adiciona o `@import` do shadwire.css.
`aliases`	Para onde cada tipo de arquivo vai. Mude aqui se o seu app não segue a árvore padrão do Rails.
`installed`	Uma entrada por componente: a `version` do registry e os arquivos que são dele. `diff`, `update` e `remove` trabalham a partir dessa lista.

Aliases

Cada arquivo do registry tem um tipo (componente, helper, controller Stimulus, CSS), e o alias desse tipo define em qual diretório ele é gravado.

Alias	Padrão	Recebe
`components`	`app/components`	A superclasse compartilhada UiComponent.
`ui`	`app/components/ui`	As classes de componente e seus templates.
`helpers`	`app/helpers`	Os módulos Ui::Helper com os wrappers ui_.
`controllers`	`app/javascript/controllers`	Os controllers Stimulus dos componentes interativos.
`vendorCss`	`vendor/shadwire`	O shadwire.css, que contém os tokens.

Se o seu app tem outra estrutura, uma engine por exemplo, aponte os aliases para os diretórios certos antes do primeiro 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" }
}

Mudar alias depois de instalar não move nada

Os caminhos em installed[].files continuam apontando para onde os arquivos foram gravados da primeira vez. Para mudar um alias depois de instalar componentes, remova-os, altere o alias e instale de novo.

O @import do Tailwind

O init adiciona este import no arquivo indicado em tailwind.css. É ele que leva os tokens para o build do Tailwind:

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

O bin/shadwire status --json traz o campo tailwind.importPresent. Se vier false, o import foi removido e os componentes vão aparecer sem cor.

Resolução do registry

Todo comando escolhe a URL do registry nesta ordem:

a flag --registry, se passada;
o campo registry do shadwire.json do app;
o padrão embutido, https://shadwire.edumoraes.dev.br/r.

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

No init, o --registry fica salvo no arquivo. Nos outros comandos, vale só para aquela execução. O formato está descrito na página Registry.