Skip to content

Latest commit

 

History

History
94 lines (69 loc) · 2.31 KB

README.md

File metadata and controls

94 lines (69 loc) · 2.31 KB

GenComponents

  • Generates a set of UI heex components to start a project from.
  • Generates a component catalogue live view.
  • Uses daisyUI build on top of tailwindcss

The generated components are meant to be a point to start from. They will reside in your project space, where you can easily adjust them to your needs.

example usage

mix gen.components
mix gen.components -o other_components

Options

  • -o, --output - lowercase name of the module, that will hold the components. Defaults to components

Example

See the demo project for some examples.

To see the demo project in action:

  • checkout the project
  • cd to the components_demo gonzo project
  • run npm install in components_demo/assets
  • call mix gen.components
  • call iex -S mix phx.server
  • visit catalogue

Installation

The package can be installed by adding gen_components to your list of dependencies in mix.exs.

def deps do
  [
    {:gen_components, "~> 0.1.0", only: [:dev]},
    # optional icon package
    {:heroicons, "~> 0.5.0"}
  ]
end

The generated components are meant to be changed after being generated. So it is recommendet to add the components folder to your live reload dev config:

# Watch static and templates for browser reloading.
config :my_app_web, MyAppWeb.Endpoint,
  live_reload: [
    patterns: [
      ~r"priv/static/.*(js|css|png|jpeg|jpg|gif|svg)$",
      ~r"lib/my_app_web/(live|views|components)/.*(ex)$",
      ~r"lib/my_app_web/templates/.*(eex)$"
    ]
  ]

Run npm install in components_demo/assets, to use tailwind and daisyUI

Install the catalogue

Add the folowing to router.ex inside your project:

if Mix.env() == :dev do
  import MyAppWeb.ComponentsCatalogueLive
  catalogue_routes "/catalogue"
end

Install the Javascript custom components

The custom components are used to format numbers and dates in the browsers locale. To make it work add the following to your app.js

// to activate local format custom components
import "./components"

How to contribute

  1. Use the gonzo project to build your component.
  2. Adapt it to the templates