Initial commit

.devcontainer/Dockerfile

@@ -0,0 +1,62 @@
+# Update the VARIANT arg in docker-compose.yml to pick an Elixir version: 1.9, 1.10, 1.10.4
+ARG VARIANT="1.14.3"
+FROM elixir:${VARIANT}
+
+# This Dockerfile adds a non-root user with sudo access. Update the “remoteUser” property in
+# devcontainer.json to use it. More info: https://aka.ms/vscode-remote/containers/non-root-user.
+ARG USERNAME=vscode
+ARG USER_UID=1000
+ARG USER_GID=$USER_UID
+
+# Options for common package install script
+ARG INSTALL_ZSH="true"
+ARG UPGRADE_PACKAGES="true"
+ARG COMMON_SCRIPT_SOURCE="https://raw.githubusercontent.com/microsoft/vscode-dev-containers/main/script-library/common-debian.sh"
+ARG COMMON_SCRIPT_SHA="dev-mode"
+
+# Optional Settings for Phoenix
+ARG PHOENIX_VERSION="1.7.0-rc.2"
+
+# [Optional] Setup nodejs
+#ARG NODE_SCRIPT_SOURCE="https://raw.githubusercontent.com/microsoft/vscode-dev-containers/main/script-library/node-debian.sh"
+#ARG NODE_SCRIPT_SHA="dev-mode"
+# [Optional, Choice] Node.js version: none, lts/*, 16, 14, 12, 10
+#ARG NODE_VERSION="none"
+#ENV NVM_DIR=/usr/local/share/nvm
+#ENV NVM_SYMLINK_CURRENT=true
+#ENV PATH=${NVM_DIR}/current/bin:${PATH}
+
+# Install needed packages and setup non-root user. Use a separate RUN statement to add your own dependencies.
+RUN apt-get update \
+  && export DEBIAN_FRONTEND=noninteractive \
+  && apt-get -y install --no-install-recommends curl ca-certificates 2>&1 \
+  && curl -sSL ${COMMON_SCRIPT_SOURCE} -o /tmp/common-setup.sh \
+  && ([ "${COMMON_SCRIPT_SHA}" = "dev-mode" ] || (echo "${COMMON_SCRIPT_SHA} */tmp/common-setup.sh" | sha256sum -c -)) \
+  && /bin/bash /tmp/common-setup.sh "${INSTALL_ZSH}" "${USERNAME}" "${USER_UID}" "${USER_GID}" "${UPGRADE_PACKAGES}" \
+  #
+  # [Optional] Install Node.js for use with web applications
+  #&& if [ "$NODE_VERSION" != "none" ]; then \
+  #curl -sSL ${NODE_SCRIPT_SOURCE} -o /tmp/node-setup.sh \
+  #&& ([ "${NODE_SCRIPT_SHA}" = "dev-mode" ] || (echo "${NODE_SCRIPT_SHA} */tmp/node-setup.sh" | sha256sum -c -)) \
+  #&& /bin/bash /tmp/node-setup.sh "${NVM_DIR}" "${NODE_VERSION}" "${USERNAME}"; \
+  #fi \
+  #
+  # Install dependencies
+  && apt-get install -y build-essential inotify-tools \
+  #
+  # Clean up
+  && apt-get autoremove -y \
+  && apt-get clean -y \
+  && rm -rf /var/lib/apt/lists/* /tmp/common-setup.sh /tmp/node-setup.sh
+
+RUN su ${USERNAME} -c "mix local.hex --force \
+  && mix local.rebar --force \
+  && mix archive.install --force hex phx_new ${PHOENIX_VERSION}"
+
+# [Optional] Uncomment this section to install additional OS packages.
+# RUN apt-get update \
+#     && export DEBIAN_FRONTEND=noninteractive \
+#     && apt-get -y install --no-install-recommends <your-package-list-here>
+
+# [Optional] Uncomment this line to install additional package.
+# RUN  mix ...

.devcontainer/devcontainer.json

@@ -0,0 +1,32 @@
+{
+	"name": "Elixir, Phoenix, Node.js & PostgresSQL (Community)",
+	"dockerComposeFile": "docker-compose.yml",
+	"service": "elixir",
+	"workspaceFolder": "/workspace",
+
+	// Configure tool-specific properties.
+	"customizations": {
+		// Configure properties specific to VS Code.
+		"vscode": {
+			// Add the IDs of extensions you want installed when the container is created.
+			"extensions": [
+				"jakebecker.elixir-ls",
+				"ms-azuretools.vscode-docker",
+				"phoenixframework.phoenix"
+			]
+		}
+	},
+
+	// Use 'forwardPorts' to make a list of ports inside the container available locally.
+	// This can be used to network with other containers or with the host. 
+	"forwardPorts": [4000, 4001, 5432],
+
+	// Use 'postCreateCommand' to run commands after the container is created.
+	// "postCreateCommand": "mix deps.get"
+
+	// Uncomment to connect as a non-root user. See https://aka.ms/vscode-remote/containers/non-root.
+	"remoteUser": "vscode",
+	"features": {
+		"ghcr.io/jungaretti/features/make:1": {}
+	}
+}

.devcontainer/docker-compose.yml

@@ -0,0 +1,35 @@
+version: "3.8"
+
+services:
+  elixir:
+    build:
+      context: .
+      dockerfile: Dockerfile
+      args:
+        # Elixir Version: 1.9, 1.10, 1.10.4, ...
+        VARIANT: "1.14.3"
+        # Phoenix Version: 1.4.17, 1.5.4, ...
+        PHOENIX_VERSION: "1.7.0-rc.2"
+        # Node Version: 12, 14, ...
+        NODE_VERSION: "16"
+
+    volumes:
+      - ..:/workspace:cached
+    # Runs app on the same network as the database container, allows "forwardPorts" in devcontainer.json function.
+    network_mode: service:db
+
+    # Overrides default command so things don't shut down after the process ends.
+    command: sleep infinity
+
+  db:
+    image: postgres:latest
+    restart: unless-stopped
+    volumes:
+      - postgres-data:/var/lib/postgresql/data
+    environment:
+      POSTGRES_USER: postgres
+      POSTGRES_PASSWORD: postgres
+      POSTGRES_DB: app
+
+volumes:
+  postgres-data:

.formatter.exs

@@ -0,0 +1,6 @@
+[
+  import_deps: [:ecto, :phoenix],
+  plugins: [Phoenix.LiveView.HTMLFormatter],
+  inputs: ["*.{heex,ex,exs}", "priv/*/seeds.exs", "{config,lib,test}/**/*.{heex,ex,exs}"],
+  subdirectories: ["priv/*/migrations"]
+]

.gitignore

@@ -0,0 +1,37 @@
+# The directory Mix will write compiled artifacts to.
+/_build/
+
+# If you run "mix test --cover", coverage assets end up here.
+/cover/
+
+# The directory Mix downloads your dependencies sources to.
+/deps/
+
+# Where 3rd-party dependencies like ExDoc output generated docs.
+/doc/
+
+# Ignore .fetch files in case you like to edit your project deps locally.
+/.fetch
+
+# If the VM crashes, it generates a dump, let's ignore it too.
+erl_crash.dump
+
+# Also ignore archive artifacts (built via "mix archive.build").
+*.ez
+
+# Ignore package tarball (built via "mix hex.build").
+petal_boilerplate-*.tar
+
+# Ignore assets that are produced by build tools.
+/priv/static/assets/
+
+# Ignore digested assets cache.
+/priv/static/cache_manifest.json
+
+# In case you use Node.js/npm, you want to ignore these.
+npm-debug.log
+/assets/node_modules/
+
+.vscode
+.elixir_ls
+

.tool-versions

@@ -0,0 +1,2 @@
+erlang 25.0
+elixir 1.14.3

README.md

@@ -0,0 +1,35 @@
+# Petal Boilerplate
+
+A clean install of the Phoenix 1.7 (RC) along with:
+- Alpine JS - using a CDN to avoid needing `node_modules`
+- 🌺 [Petal Components Library](https://github.com/petalframework/petal_components)
+- Maintained and sponsored by [Petal Framework](https://petal.build)
+
+## Get up and running
+
+Optionally change your database name in `dev.exs`.
+
+1. Setup the project with `mix setup`
+2. Start Phoenix endpoint with `mix phx.server` or inside IEx with `iex -S mix phx.server`
+3. Now you can visit [`localhost:4000`](http://localhost:4000) from your browser.
+
+## Phoenix 1.7 generators
+
+The CRUD generators (eg. `mix phx.gen.live`) will produce code that doesn't quite work. Basically, they will use components defined in `core_components.ex` that we have renamed due to naming clashes with Petal Components.
+To fix, simply do a find and replace in the generated code:
+
+```
+Replace `.modal` with `.phx_modal`
+Replace `.table` with `.phx_table`
+Replace `.button` with `.phx_button`
+```
+
+This should make it work but it'll be using a different style of buttons/tables/modal to Petal Components. To work with Petal Components you will need to replace all buttons/tables/modal with the Petal Component versions.
+
+Petal Pro currently comes with a generator to build CRUD interfaces with Petal Components. You can purchase it [here](https://petal.build/pro).
+
+## Renaming your project
+
+Run `mix rename PetalBoilerplate YourNewName` to rename your project. You can then remove `{:rename_project, "~> 0.1.0", only: :dev}` from your `mix.exs` file.
+
+

assets/css/app.css

@@ -0,0 +1,46 @@
+@import "tailwindcss/base";
+@import "../../deps/petal_components/assets/default.css";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+
+@layer base {
+  /* Add base styles here (eg. styles that are the defaults for common elements)
+
+    Example base style:
+    h1 {
+      @apply text-2xl;
+    }
+
+  */
+}
+
+@layer components {
+  /* Add component styles here (eg. buttons or tabs or anything that uses a number of styles)
+
+    Example change button styles:
+
+    .pc-button {
+      @apply inline-flex items-center justify-center font-semibold tracking-wider uppercase transition duration-150 ease-in-out border-2 rounded-none focus:outline-none;
+    }
+    .pc-button--primary {
+      @apply text-black border-black bg-primary-400 hover:bg-primary-700 focus:bg-primary-700 active:bg-primary-800 focus:shadow-primary-500/50;
+    }
+  */
+}
+
+@layer utilities {
+  /* LiveView specific classes for your customization */
+  .phx-no-feedback.invalid-feedback,
+  .phx-no-feedback .invalid-feedback {
+    display: none;
+  }
+
+  .phx-click-loading {
+    opacity: 0.5;
+    transition: opacity 1s ease-out;
+  }
+
+  .phx-loading{
+    cursor: wait;
+  }
+}

assets/js/app.js

@@ -0,0 +1,54 @@
+// If you want to use Phoenix channels, run `mix help phx.gen.channel`
+// to get started and then uncomment the line below.
+// import "./user_socket.js"
+
+// You can include dependencies in two ways.
+//
+// The simplest option is to put them in assets/vendor and
+// import them using relative paths:
+//
+//     import "../vendor/some-package.js"
+//
+// Alternatively, you can `npm install some-package --prefix assets` and import
+// them using a path starting with the package name:
+//
+//     import "some-package"
+//
+
+// Include phoenix_html to handle method=PUT/DELETE in forms and buttons.
+import "phoenix_html";
+// Establish Phoenix Socket and LiveView configuration.
+import { Socket } from "phoenix";
+import { LiveSocket } from "phoenix_live_view";
+import topbar from "../vendor/topbar";
+import hooks from "./hooks";
+
+let csrfToken = document
+  .querySelector("meta[name='csrf-token']")
+  .getAttribute("content");
+let liveSocket = new LiveSocket("/live", Socket, {
+  params: { _csrf_token: csrfToken },
+  hooks,
+  dom: {
+    onBeforeElUpdated(from, to) {
+      if (from._x_dataStack) {
+        window.Alpine.clone(from, to);
+      }
+    },
+  },
+});
+
+// Show progress bar on live navigation and form submits
+topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"})
+window.addEventListener("phx:page-loading-start", _info => topbar.show(300))
+window.addEventListener("phx:page-loading-stop", _info => topbar.hide())
+
+// connect if there are any LiveViews on the page
+liveSocket.connect()
+
+// expose liveSocket on window for web console debug logs and latency simulation:
+// >> liveSocket.enableDebug()
+// >> liveSocket.enableLatencySim(1000)  // enabled for duration of browser session
+// >> liveSocket.disableLatencySim()
+window.liveSocket = liveSocket
+

assets/js/hooks/color-scheme-hook.js

@@ -0,0 +1,16 @@
+// Requires window.initScheme() and window.toggleScheme() functions defined (see `color_scheme_switch.ex`)
+const ColorSchemeHook = {
+  deadViewCompatible: true,
+  mounted() {
+    this.init();
+  },
+  updated() {
+    this.init();
+  },
+  init() {
+    initScheme();
+    this.el.addEventListener("click", window.toggleScheme);
+  },
+};
+
+export default ColorSchemeHook;

assets/js/hooks/index.js

@@ -0,0 +1,5 @@
+import ColorSchemeHook from "./color-scheme-hook";
+
+export default {
+  ColorSchemeHook,
+};

assets/tailwind.config.js

@@ -0,0 +1,55 @@
+// See the Tailwind configuration guide for advanced usage
+// https://tailwindcss.com/docs/configuration
+
+const colors = require("tailwindcss/colors");
+const plugin = require("tailwindcss/plugin");
+
+module.exports = {
+  content: [
+    "./js/**/*.js",
+    "../lib/*_web.ex",
+    "../lib/*_web/**/*.*ex",
+    "../deps/petal_components/**/*.*ex",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        primary: colors.blue,
+        secondary: colors.pink,
+        success: colors.green,
+        danger: colors.red,
+        warning: colors.yellow,
+        info: colors.blue,
+        gray: colors.gray,
+      },
+    },
+  },
+  darkMode: "class",
+  plugins: [
+    require("@tailwindcss/forms"),
+    require("@tailwindcss/typography"),
+    require("@tailwindcss/line-clamp"),
+    require("@tailwindcss/aspect-ratio"),
+    plugin(({ addVariant }) =>
+      addVariant("phx-no-feedback", [".phx-no-feedback&", ".phx-no-feedback &"])
+    ),
+    plugin(({ addVariant }) =>
+      addVariant("phx-click-loading", [
+        ".phx-click-loading&",
+        ".phx-click-loading &",
+      ])
+    ),
+    plugin(({ addVariant }) =>
+      addVariant("phx-submit-loading", [
+        ".phx-submit-loading&",
+        ".phx-submit-loading &",
+      ])
+    ),
+    plugin(({ addVariant }) =>
+      addVariant("phx-change-loading", [
+        ".phx-change-loading&",
+        ".phx-change-loading &",
+      ])
+    ),
+  ],
+};