diff --git a/daisy_ui_components_site/Dockerfile b/daisy_ui_components_site/Dockerfile index d16f9f6..1c0cc9b 100644 --- a/daisy_ui_components_site/Dockerfile +++ b/daisy_ui_components_site/Dockerfile @@ -49,6 +49,9 @@ COPY priv priv COPY lib lib +# Copying readme for the documentation +COPY README.md README.md + # build assets COPY assets/package.json assets/package-lock.json ./assets/ RUN npm --prefix ./assets ci --progress=false --no-audit --loglevel=error diff --git a/daisy_ui_components_site/priv/static/README.md b/daisy_ui_components_site/priv/static/README.md new file mode 100644 index 0000000..97693b2 --- /dev/null +++ b/daisy_ui_components_site/priv/static/README.md @@ -0,0 +1,74 @@ +## Installation + +Reference this repository on your `mix.exs` file to start using. + +```elixir +def deps do + [ + {:daisy_ui_components, "~> 0.1"} + ] +end +``` + +Add through `npm` the daisy UI package inside your phoenix application: + +``` +cd assets +npm i -D daisyui@latest +``` + +On `tailwind.config.js` include Live DaisyUI Components under the content list and reference under plugins + +```javascript +module.exports = { + content: [ + //... + "../deps/daisy_ui_components/**/*.*ex" // <- reference DaisyUIComponents as content path + ], + //... + plugins: [ + //... + require("daisyui") <- // add daisyUI plugin + //... + ] +} +``` + +Add error translation function to your app's config.exs file. This function is used to translate ecto changeset errors + +```elixir +config :daisy_ui_components, translate_function: &MyAppWeb.CoreComponents.translate_error/1 +``` + +And now this library is ready. To have the components available under liveview, import the components on the web folder + +```elixir +defp html_helpers do + quote do + use DaisyUIComponents + # HTML escaping functionality + import Phoenix.HTML + # Core UI components from Live DaisyUI + import DaisyUIComponents.CoreComponents + + # import YourProjectWeb.CoreComponents + # Importing CoreComponents from your project is no longer necessary since + # DaisyUIComponents.CoreComponents offers a drop in replacement + # If you still want to use your own core components, remember to delete the default components generated from phoenix in this file + # ... + end +end +``` + +and that's it! You can use the components in your application + + +```elixir +def button_primary(assigns) do + ~H""" + <.button color="primary"> + Button with primary color + + """ +end +``` diff --git a/daisy_ui_components_site/storybook/welcome.story.exs b/daisy_ui_components_site/storybook/welcome.story.exs index 399dbd2..ffd9c62 100644 --- a/daisy_ui_components_site/storybook/welcome.story.exs +++ b/daisy_ui_components_site/storybook/welcome.story.exs @@ -18,7 +18,7 @@ defmodule Storybook.MyPage do # This is a dummy fonction that you should replace with your own HEEx content. def render(assigns = %{tab: :welcome}) do markdown = - Path.wildcard(Path.expand("../README.md", __DIR__)) + Application.app_dir(:daisy_ui_components_site, "priv/static/README.md") |> File.read!() {:ok, html_guide, _} = Earmark.as_html(markdown)