improve directory structure and add storybook for button (#7)

daisy_ui_components_site/.dockerignore

@@ -0,0 +1,45 @@
+# This file excludes paths from the Docker build context.
+#
+# By default, Docker's build context includes all files (and folders) in the
+# current directory. Even if a file isn't copied into the container it is still sent to
+# the Docker daemon.
+#
+# There are multiple reasons to exclude files from the build context:
+#
+# 1. Prevent nested folders from being copied into the container (ex: exclude
+#    /assets/node_modules when copying /assets)
+# 2. Reduce the size of the build context and improve build time (ex. /build, /deps, /doc)
+# 3. Avoid sending files containing sensitive information
+#
+# More information on using .dockerignore is available here:
+# https://docs.docker.com/engine/reference/builder/#dockerignore-file
+
+.dockerignore
+
+# Ignore git, but keep git HEAD and refs to access current commit hash if needed:
+#
+# $ cat .git/HEAD | awk '{print ".git/"$2}' | xargs cat
+# d0b8727759e1e0e7aa3d41707d12376e373d5ecc
+.git
+!.git/HEAD
+!.git/refs
+
+# Common development/test artifacts
+/cover/
+/doc/
+/test/
+/tmp/
+.elixir_ls
+
+# Mix artifacts
+/_build/
+/deps/
+*.ez
+
+# Generated on crash by the VM
+erl_crash.dump
+
+# Static artifacts - These should be fetched and built inside the Docker image
+/assets/node_modules/
+/priv/static/assets/
+/priv/static/cache_manifest.json

daisy_ui_components_site/Dockerfile

@@ -0,0 +1,102 @@
+# Find eligible builder and runner images on Docker Hub. We use Ubuntu/Debian
+# instead of Alpine to avoid DNS resolution issues in production.
+#
+# https://hub.docker.com/r/hexpm/elixir/tags?page=1&name=ubuntu
+# https://hub.docker.com/_/ubuntu?tab=tags
+#
+# This file is based on these images:
+#
+#   - https://hub.docker.com/r/hexpm/elixir/tags - for the build image
+#   - https://hub.docker.com/_/debian?tab=tags&page=1&name=bullseye-20221004-slim - for the release image
+#   - https://pkgs.org/ - resource for finding needed packages
+#   - Ex: hexpm/elixir:1.14.1-erlang-25.1.2-debian-bullseye-20221004-slim
+#
+ARG ELIXIR_VERSION=1.14.1
+ARG OTP_VERSION=25.1.2
+ARG DEBIAN_VERSION=bullseye-20221004-slim
+
+ARG BUILDER_IMAGE="hexpm/elixir:${ELIXIR_VERSION}-erlang-${OTP_VERSION}-debian-${DEBIAN_VERSION}"
+ARG RUNNER_IMAGE="debian:${DEBIAN_VERSION}"
+
+FROM ${BUILDER_IMAGE} as builder
+
+# install build dependencies
+RUN apt-get update -y && apt-get install -y build-essential git npm \
+    && apt-get clean && rm -f /var/lib/apt/lists/*_*
+
+# prepare build dir
+WORKDIR /app
+
+# install hex + rebar
+RUN mix local.hex --force && \
+    mix local.rebar --force
+
+# set build ENV
+ENV MIX_ENV="prod"
+
+# install mix dependencies
+COPY mix.exs mix.lock ./
+RUN mix deps.get --only $MIX_ENV
+RUN mkdir config
+
+# copy compile-time config files before we compile dependencies
+# to ensure any relevant config change will trigger the dependencies
+# to be re-compiled.
+COPY config/config.exs config/${MIX_ENV}.exs config/
+RUN mix deps.compile
+
+COPY priv priv
+
+COPY lib lib
+
+# build assets
+COPY assets/package.json assets/package-lock.json ./assets/
+RUN npm --prefix ./assets ci --progress=false --no-audit --loglevel=error
+
+COPY assets assets
+COPY storybook storybook
+
+# compile assets
+RUN mix assets.deploy
+
+# Compile the release
+RUN mix compile
+
+# Changes to config/runtime.exs don't require recompiling the code
+COPY config/runtime.exs config/
+
+COPY rel rel
+RUN mix release
+
+# start a new build stage so that the final image will only contain
+# the compiled release and other runtime necessities
+FROM ${RUNNER_IMAGE}
+
+RUN apt-get update -y && \
+  apt-get install -y libstdc++6 openssl libncurses5 locales ca-certificates \
+  && apt-get clean && rm -f /var/lib/apt/lists/*_*
+
+# Set the locale
+RUN sed -i '/en_US.UTF-8/s/^# //g' /etc/locale.gen && locale-gen
+
+ENV LANG en_US.UTF-8
+ENV LANGUAGE en_US:en
+ENV LC_ALL en_US.UTF-8
+
+WORKDIR "/app"
+RUN chown nobody /app
+
+# set runner ENV
+ENV MIX_ENV="prod"
+
+# Only copy the final release from the build stage
+COPY --from=builder --chown=nobody:root /app/_build/${MIX_ENV}/rel/daisy_ui_components_site ./
+
+USER nobody
+
+# If using an environment that doesn't automatically reap zombie processes, it is
+# advised to add an init process such as tini via `apt-get install`
+# above and adding an entrypoint. See https://github.com/krallin/tini for details
+# ENTRYPOINT ["/tini", "--"]
+
+CMD ["/app/bin/server"]

daisy_ui_components_site/assets/js/storybook.js

@@ -1,3 +1,5 @@
+document.documentElement.dataset.theme = 'light';
+
 // If your components require any hooks or custom uploaders, or if your pages
 // require connect parameters, uncomment the following lines and declare them as
 // such:

daisy_ui_components_site/fly.toml

@@ -0,0 +1,32 @@
+# fly.toml app configuration file generated for daisy-ui-components-site on 2024-05-03T23:03:38+03:00
+#
+# See https://fly.io/docs/reference/configuration/ for information about how to use this file.
+#
+
+app = 'daisy-ui-components-site'
+primary_region = 'arn'
+kill_signal = 'SIGTERM'
+
+[build]
+
+[env]
+  PHX_HOST = 'daisy-ui-components-site.fly.dev'
+  PORT = '8080'
+
+[http_service]
+  internal_port = 8080
+  force_https = true
+  auto_stop_machines = true
+  auto_start_machines = true
+  min_machines_running = 0
+  processes = ['app']
+
+  [http_service.concurrency]
+    type = 'connections'
+    hard_limit = 1000
+    soft_limit = 1000
+
+[[vm]]
+  memory = '1gb'
+  cpu_kind = 'shared'
+  cpus = 1

daisy_ui_components_site/mix.exs

@@ -40,13 +40,13 @@ defmodule DaisyUIComponentsSite.MixProject do
       {:phoenix_live_dashboard, "~> 0.8.3"},
       {:esbuild, "~> 0.8", runtime: Mix.env() == :dev},
       {:tailwind, "~> 0.2", runtime: Mix.env() == :dev},
-      # {:heroicons,
-      #  github: "tailwindlabs/heroicons",
-      #  tag: "v2.1.1",
-      #  sparse: "optimized",
-      #  app: false,
-      #  compile: false,
-      #  depth: 1, override: true},
+      {:heroicons,
+       github: "tailwindlabs/heroicons",
+       tag: "v2.1.1",
+       sparse: "optimized",
+       app: false,
+       compile: false,
+       depth: 1, override: true},
       {:telemetry_metrics, "~> 1.0"},
       {:telemetry_poller, "~> 1.0"},
       {:gettext, "~> 0.20"},
@@ -55,6 +55,7 @@ defmodule DaisyUIComponentsSite.MixProject do
       {:bandit, "~> 1.2"},
       {:phoenix_storybook, "~> 0.6.0"},
       {:daisy_ui_components, "~> 0.1.0"}
+      # {:daisy_ui_components, path: "../"}
     ]
   end
 

daisy_ui_components_site/rel/env.sh.eex

@@ -0,0 +1,8 @@
+#!/bin/sh
+
+# configure node for distributed erlang with IPV6 support
+export ERL_AFLAGS="-proto_dist inet6_tcp"
+export ECTO_IPV6="true"
+export DNS_CLUSTER_QUERY="${FLY_APP_NAME}.internal"
+export RELEASE_DISTRIBUTION="name"
+export RELEASE_NODE="${FLY_APP_NAME}-${FLY_IMAGE_REF##*-}@${FLY_PRIVATE_IP}"

daisy_ui_components_site/rel/overlays/bin/server

@@ -0,0 +1,5 @@
+#!/bin/sh
+set -eu
+
+cd -P -- "$(dirname -- "$0")"
+PHX_SERVER=true exec ./daisy_ui_components_site start

daisy_ui_components_site/rel/overlays/bin/server.bat

@@ -0,0 +1,2 @@
+set PHX_SERVER=true
+call "%~dp0\daisy_ui_components_site" start

daisy_ui_components_site/storybook/components/button.story.exs

@@ -1,6 +1,8 @@
-defmodule Storybook.CoreComponents.Button do
+defmodule Storybook.Components.Button do
   use PhoenixStorybook.Story, :component
 
+  alias DaisyUIComponents.Utils
+
   def function, do: &DaisyUIComponents.Button.button/1
 
   def variations do
@@ -9,19 +11,113 @@ defmodule Storybook.CoreComponents.Button do
         id: :default,
         slots: ["Button"]
       },
+      %VariationGroup{
+        id: :colors,
+        variations:
+          for color <- Utils.colors() ++ ["neutral"] do
+            %Variation{
+              id: String.to_atom(color),
+              attributes: %{
+                color: color
+              },
+              slots: [String.capitalize(color)]
+            }
+          end
+      },
       %Variation{
-        id: :custom_class,
+        id: :outline,
         attributes: %{
-          class: "rounded-full bg-indigo-500 hover:bg-indigo-600"
+          outline: true
         },
-        slots: ["Disabled"]
+        slots: ["Button"]
+      },
+      %Variation{
+        id: :active,
+        attributes: %{
+          active: true
+        },
+        slots: ["Active"]
       },
       %Variation{
         id: :disabled,
         attributes: %{
           disabled: true
         },
         slots: ["Disabled"]
+      },
+      %VariationGroup{
+        id: :button_sizes,
+        variations:
+          for size <- Utils.sizes() do
+            %Variation{
+              id: String.to_atom(size),
+              attributes: %{
+                size: size
+              },
+              slots: [String.capitalize(size)]
+            }
+          end
+      },
+      %Variation{
+        id: :wide,
+        attributes: %{
+          wide: true
+        },
+        slots: ["Wide"]
+      },
+      %Variation{
+        id: :square,
+        attributes: %{
+          shape: "square"
+        },
+        slots: [
+          """
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
+          """
+        ]
+      },
+      %Variation{
+        id: :circle,
+        attributes: %{
+          shape: "circle"
+        },
+        slots: [
+          """
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
+          """
+        ]
+      },
+      %Variation{
+        id: :icon_at_start,
+        slots: [
+          """
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" /></svg>
+          """,
+          "Button"
+        ]
+      },
+      %Variation{
+        id: :icon_at_end,
+        slots: [
+          "Button",
+          """
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" /></svg>
+          """
+        ]
+      },
+      %Variation{
+        id: :block,
+        attributes: %{
+          block: true
+        },
+        slots: ["Button"]
+      },
+      %Variation{
+        id: :button_loading_with_a_spinner,
+        attributes: %{
+          loading: true
+        },
+        slots: ["Button"]
       }
     ]
   end

lib/daisyui_components/button.ex → lib/daisy_ui_components/button.ex

@@ -31,7 +31,6 @@ defmodule DaisyUIComponents.Button do
   attr :wide, :boolean, default: false
   attr :block, :boolean, default: false
   attr :shape, :string, values: ~w(circle square)
-  attr :label, :string, default: nil
   attr :rest, :global, include: ~w(form name value)
   slot :inner_block, required: true
 

mix.exs

@@ -37,12 +37,12 @@ defmodule DaisyUIComponents.MixProject do
 
   defp deps do
     [
-      {:phoenix_live_view, "~> 0.18 or ~> 0.19"},
+      {:phoenix_live_view, "~> 0.20.14"},
       {:jason, "~> 1.4", only: [:dev, :test]},
-      {:dialyxir, "~> 1.3", only: [:dev, :test], runtime: false},
+      {:dialyxir, "~> 1.4", only: [:dev, :test], runtime: false},
       {:credo, "~> 1.7", only: [:dev, :test], runtime: false},
-      {:ex_doc, "~> 0.27", only: :dev, runtime: false},
-      {:excoveralls, "~> 0.10", only: :test}
+      {:ex_doc, "~> 0.31", only: :dev, runtime: false},
+      {:excoveralls, "~> 0.18", only: :test}
     ]
   end