Doggo

https://github.com/woylie/doggo
Admin
Doggo is a collection of headless UI components for Phoenix, emphasizing semantics and...
Tokens:1,499
Snippets:7
Trust Score:9
License:MIT
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install Doggo Dependency

Source: https://github.com/woylie/doggo/blob/main/README.md

This snippet shows how to add the 'doggo' package to your project's dependencies in the mix.exs file.

```elixir
def deps do
  [
    {:doggo, "~> 0.10.7"}
  ]
end
```

--------------------------------

### Run Demo Application Locally

Source: https://github.com/woylie/doggo/blob/main/README.md

Instructions to clone the Doggo repository, navigate to the demo directory, set up dependencies, and start the Phoenix server to run the demo application locally.

```bash
git clone git@github.com:woylie/doggo.git
cd doggo/demo
mix setup
mix phx.server
```

--------------------------------

### Example Button Usage with Modifier

Source: https://github.com/woylie/doggo/blob/main/README.md

This HTML snippet demonstrates how to use a Doggo-generated button component with a 'size' modifier attribute.

```html
<.button size="small">Edit</.button>
```

--------------------------------

### Customize Button Component in Doggo

Source: https://github.com/woylie/doggo/blob/main/README.md

This Elixir example shows how to customize a button component generated by Doggo, including overriding the base class, defining modifier class logic, and changing the component name.

```elixir
defmodule MyAppWeb.CoreComponents do
  use Doggo.Components
  use Phoenix.Component

  build_button(
    base_class: "alt-button",
    modifiers: [small: [size: ["normal", "small"], default: "normal"]],
    class_name_fun: &MyAppWeb.CoreComponents.modifier_class/2
  )

  def modifier_class(name, value) do
    "#{name} #{value}"
  end
end
```

```elixir
build_button(name: :alt_button, base_class: "alt-button")
```

--------------------------------

### Define Phoenix Components with Doggo

Source: https://github.com/woylie/doggo/blob/main/README.md

This Elixir code demonstrates how to use Doggo.Components to define Phoenix components, including building alerts and buttons with customizable modifiers.

```elixir
defmodule MyAppWeb.CoreComponents do
  use Doggo.Components
  use Phoenix.Component

  build_alert()
  build_alert_dialog()

  build_button(
    modifiers: [
      size: [values: ["normal", "small"], default: "normal"]
    ]
  )
end
```

--------------------------------

### Generate Doggo Stories with Mix Task

Source: https://github.com/woylie/doggo/blob/main/README.md

This bash command illustrates how to use the 'mix dog.gen.stories' task to generate Phoenix Storybook stories for Doggo components, specifying the component module, output directory, and optionally filtering by component name.

```bash
mix dog.gen.stories -m MyAppWeb.CoreComponents -o storybook --all
```

```bash
mix dog.gen.stories -m MyAppWeb.CoreComponents -o storybook -c button
```

--------------------------------

### Generate CSS Classes for PurgeCSS

Source: https://github.com/woylie/doggo/blob/main/README.md

This bash command shows how to use the 'mix dog.classes' task to generate a list of CSS class names for all configured Doggo components, which can then be used with PurgeCSS.

```bash
mix dog.classes -m MyAppWeb.CoreComponents -o assets/modifiers.txt
```
Tokens:
Raw