feat: BREAKING CHANGE: Project architecture to umbrella project and r…

…emove third party web component. (#4)

BREAKING CHANGE: 

* feat: Change architecture to umbrella project.

* fix: Fix base dev.

* feat: Add live storybook.

* fix: fix test.

* fix: Fix names.

* fix: Fix filename to exs.

* fix: Fix component.

* feat: Update storybook.

* fix: Add class.

* feat: Add tailwind css.

* feat: Add appbar.

* fix: Fix config.

* feat: Add markdown add appbar.

* feat: Add pagination.

* fix: Fix pagination.

* chore: Add CI.

* chore: Fix format.

* fix: Fix test.

* chore: Fix.

* feat: Add use :alias.

* docs: Add README.md

Co-authored-by: Jonathan Gao <gsmlg.com@gmail.com>

.formatter.exs

@@ -1,3 +1,4 @@
 [
-  inputs: ["{mix,.formatter}.exs", "{config,lib,test}/**/*.{ex,exs}"]
+  inputs: ["mix.exs", "config/*.exs"],
+  subdirectories: ["apps/*"]
 ]

.github/workflows/test-and-release.yml

@@ -8,6 +8,7 @@ on:
       - beta
       - next
       - next-major
+      - umbrella
 jobs:
   tests:
     name: Run tests (Elixir ${{matrix.elixir}}, OTP ${{matrix.otp}})
@@ -104,6 +105,8 @@ jobs:
             @semantic-release/changelog
             @semantic-release/exec
             @semantic-release/git
+          dry_run: true
+          working_directory: apps/phoenix_webcomponent
         env:
           MIX_ENV: prod
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -1,11 +1,25 @@
-/_build
-/cover
-/node_modules
-/package-lock.json
-/deps
-/doc
-/priv/static/phoenix_webcomponent.js
-/priv/static/
-/.elixir_ls
+# 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
+
+# Temporary files, for example, from tests.
+/tmp
+
+

README.md

@@ -16,18 +16,19 @@ About at [Web Component](https://developer.mozilla.org/en-US/docs/Web/Web_Compon
 
 Add deps in `mix.exs`
 ```elixir
-    {:phoenix_webcomponent, "~> 1.0"},
+    {:phoenix_webcomponent, "~> 2.0"},
 ```
 
 Include in phoenix view helpers
 
 ```elixir
  defp view_helpers do
     quote do
-        # Use all HTML functionality (forms, tags, etc)
-        use Phoenix.HTML
+        # import all helper functions
         use Phoenix.WebComponent
 
+        # or 
+        use Phoenix.WebComponent, :alias
         ...
     end
 end
@@ -49,33 +50,13 @@ npm install phoenix_webcomponent
 
 ### All helpers
 
-- wc_button
-- wc_checkbox
-- wc_color_input
-- wc_date_input
-- wc_date_select
-- wc_datetime_local_input
-- wc_datetime_select
-- wc_email_input
-- wc_file_input
-- wc_link
-- wc_live_patch
-- wc_live_redirect
-- wc_multiple_select
-- wc_number_input
-- wc_password_input
-- wc_radio_button
-- wc_range_input
-- wc_remark
-- wc_reset
-- wc_search_input
-- wc_select
-- wc_submit
-- wc_telephone_input
-- wc_textarea
-- wc_text_input
-- wc_time_input
-- wc_time_select
-- wc_url_input
-- wc_switch
-- wc_top_app_bar
+- wc_appbar
+- wc_markdown
+- wc_pagination
+- wc_table
+
+## Live Storybook
+
+[Live Storybook](https://phoenix-webcomponent.gsmlg.org)
+
+

apps/phoenix_webcomponent/.formatter.exs

@@ -0,0 +1,3 @@
+[
+  inputs: ["{mix,.formatter}.exs", "{config,lib,test}/**/*.{ex,exs}"]
+]

apps/phoenix_webcomponent/.gitignore

@@ -0,0 +1,11 @@
+/_build
+/cover
+/node_modules
+/package-lock.json
+/deps
+/doc
+/priv/static/phoenix_webcomponent.js
+/priv/static/
+/.elixir_ls
+erl_crash.dump
+*.ez

.releaserc.yaml → apps/phoenix_webcomponent/.releaserc.yaml

@@ -3,6 +3,7 @@ branches:
   - main
   - next
   - next-major
+  - {name: 'umbrella', prerelease: true}
   - {name: 'beta', prerelease: true}
   - {name: 'alpha', prerelease: true}
 plugins:

apps/phoenix_webcomponent/README.md

@@ -0,0 +1,81 @@
+# Phoenix.WebComponent
+
+[![release](https://github.com/gsmlg-dev/phoenix_webcomponent/actions/workflows/test-and-release.yml/badge.svg)](https://github.com/gsmlg-dev/phoenix_webcomponent/actions/workflows/test-and-release.yml)
+
+Collection of helpers to generate and manipulate Web Component.
+
+Although this project was originally extracted from Phoenix,
+it does not depend on Phoenix and can be used with any Plug
+application (or even without Plug).
+
+See the [docs](https://hexdocs.pm/phoenix_webcomponent/) for more information.
+
+About at [Web Component](https://developer.mozilla.org/en-US/docs/Web/Web_Components)
+
+## Install
+
+Add deps in `mix.exs`
+```elixir
+    {:phoenix_webcomponent, "~> 1.0"},
+```
+
+Include in phoenix view helpers
+
+```elixir
+ defp view_helpers do
+    quote do
+        # Use all HTML functionality (forms, tags, etc)
+        use Phoenix.HTML
+        use Phoenix.WebComponent
+
+        ...
+    end
+end
+```
+
+Include javascript
+
+```javascript
+import 'phoenix_webcomponent';
+```
+
+By default, javascirpt is at `priv/static/phoenix_webcomponent.js` and bundle all packages.
+
+If you wannt better javascript bundle, you can use npm version.
+
+```bash
+npm install phoenix_webcomponent
+```
+
+### All helpers
+
+- wc_button
+- wc_checkbox
+- wc_color_input
+- wc_date_input
+- wc_date_select
+- wc_datetime_local_input
+- wc_datetime_select
+- wc_email_input
+- wc_file_input
+- wc_link
+- wc_live_patch
+- wc_live_redirect
+- wc_multiple_select
+- wc_number_input
+- wc_password_input
+- wc_radio_button
+- wc_range_input
+- wc_remark
+- wc_reset
+- wc_search_input
+- wc_select
+- wc_submit
+- wc_telephone_input
+- wc_textarea
+- wc_text_input
+- wc_time_input
+- wc_time_select
+- wc_url_input
+- wc_switch
+- wc_top_app_bar

apps/phoenix_webcomponent/assets/css/phoenix_webcomponent.css

@@ -0,0 +1,5 @@
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+
+

apps/phoenix_webcomponent/assets/js/phoenix_webcomponent.js

@@ -0,0 +1 @@
+import '@gsmlg/lit';

apps/phoenix_webcomponent/assets/tailwind.config.js

@@ -0,0 +1,22 @@
+// See the Tailwind configuration guide for advanced usage
+// https://tailwindcss.com/docs/configuration
+
+let plugin = require('tailwindcss/plugin')
+
+module.exports = {
+  content: [
+    './js/**/*.js',
+    '../lib/phoenix_webcomponent/*.ex',
+    '../lib/phoenix_webcomponent/**/*.*ex'
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [
+    require('@tailwindcss/forms'),
+    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 &']))
+  ]
+}

apps/phoenix_webcomponent/lib/phoenix_webcomponent.ex

@@ -0,0 +1,91 @@
+defmodule Phoenix.WebComponent do
+  @moduledoc """
+  Provides a suit of html custom component for phoenix.
+
+  This library provides three main functionalities:
+
+    * Enhance form helper with manterial web componet
+    * Enhance link helper with manterial web componet
+    * Markdown render helper with `@gsmlg/lit/remark-element`
+    * TopAppBar render top app bar with custom element.
+
+  ## Form helper
+
+  See `Phoenix.WebComponent.FormHelper`.
+
+  ## JavaScript library
+
+  This project provides javascript that define custom elements.
+
+  To use the web component, you must load `priv/static/phoenix_webcomponent.js`
+  into your build tool. Or through npm by install `phoenix_webcomponent`.
+  The difference is npm version is not bundled.
+
+  """
+
+  def live_component do
+    quote do
+      use Phoenix.LiveComponent
+
+      unquote(view_helpers())
+    end
+  end
+
+  def component do
+    quote do
+      use Phoenix.Component
+
+      unquote(view_helpers())
+    end
+  end
+
+  def alias do
+    quote do
+      alias Phoenix.WebComponent.Appbar
+      alias Phoenix.WebComponent.Markdown
+      alias Phoenix.WebComponent.Table
+      alias Phoenix.WebComponent.Pagination
+    end
+  end
+
+  defp view_helpers do
+    quote do
+      # Use all HTML functionality (forms, tags, etc)
+      use Phoenix.HTML
+
+      # Import LiveView and .heex helpers (live_render, live_patch, <.form>, etc)
+      import Phoenix.LiveView.Helpers
+
+      # Import basic rendering functionality (render, render_layout, etc)
+      import Phoenix.View
+    end
+  end
+
+  defp components do
+    quote do
+      import Phoenix.WebComponent.Appbar
+      import Phoenix.WebComponent.Markdown
+      import Phoenix.WebComponent.Table
+      import Phoenix.WebComponent.Pagination
+    end
+  end
+
+  @doc """
+  Import helpers for internal usage.
+
+  Support:
+
+  - `use Phoenix.WebComponent, :component`
+  - `use Phoenix.WebComponent, :live_component`
+
+  """
+  defmacro __using__(which) when is_atom(which) do
+    apply(__MODULE__, which, [])
+  end
+
+  defmacro __using__(_) do
+    quote do
+      unquote(components())
+    end
+  end
+end