feat: add CoreComponents from fresh Phoenix 1.7 app #976

meagharty · 2024-06-05T17:41:12Z

Summary of changes

Relates to https://app.asana.com/0/584764604969369/1207488912719156

Adds CoreComponent file from fresh Phoenix 1.7 app
Adds verified route functionality (optional in this upgrade guide) because CoreComponents uses it
- Allows use of sigil paths ~p
Separates out css build from js build, uses Tailwind to build the css (existing app css and CoreComponents css)
- Supports tree-shaking css used in heex files
- Required adding lib to the Dockerfile before running mix assets.deploy

Tested with phoenix generators in #978

Reviewer Checklist

Meets ticket's acceptance criteria
Any new or changed functions have typespecs
Tests were added for any new functionality (don't just rely on Codecov)
This branch was deployed to the staging environment and is currently running with no unexpected increase in warnings, and no errors or crashes.

github-actions · 2024-06-05T17:47:12Z

Coverage of commit `91222d0`

Summary coverage rate:
  lines......: 72.9% (666 of 914 lines)
  functions..: 58.0% (507 of 874 functions)
  branches...: no data found

Files changed coverage rate:
                                                                     |Lines       |Functions  |Branches    
  Filename                                                           |Rate     Num|Rate    Num|Rate     Num
  =========================================================================================================
  lib/arrow_web.ex                                                   | 0.0%      2| 0.0%     8|    -      0
  lib/arrow_web/components/core_components.ex                        | 0.0%    167| 0.0%    38|    -      0

Download coverage report

github-actions · 2024-06-05T18:13:32Z

Coverage of commit `a7ee6f2`

Summary coverage rate:
  lines......: 73.1% (668 of 914 lines)
  functions..: 58.4% (510 of 874 functions)
  branches...: no data found

Files changed coverage rate:
                                                                     |Lines       |Functions  |Branches    
  Filename                                                           |Rate     Num|Rate    Num|Rate     Num
  =========================================================================================================
  lib/arrow_web.ex                                                   | 100%      2|37.5%     8|    -      0
  lib/arrow_web/components/core_components.ex                        | 0.0%    167| 0.0%    38|    -      0
  lib/arrow_web/endpoint.ex                                          | 100%      2|44.4%    18|    -      0
  test/support/conn_case.ex                                          | 100%     11| 100%     4|    -      0

Download coverage report

meagharty · 2024-06-05T18:13:50Z

lib/arrow_web.ex

@@ -18,6 +18,22 @@ defmodule ArrowWeb do
  below. Instead, define any helper function in modules
  and import those modules here.
  """
+  def static_paths, do: ~w(assets fonts images favicon.ico robots.txt)


Updated this file to match what a new app's lib/app_web.ex looks like.

Verified routes: adds static_paths, verified routes functions from new app
Organization: Moves up router, channel functions
CoreComponents: added with html_helpers function from new app

meagharty · 2024-06-05T18:16:10Z

test/support/conn_case.ex

@@ -20,13 +20,15 @@ defmodule ArrowWeb.ConnCase do

  using do
    quote do
+      # The default endpoint for testing


Re-ordered to matches new app's conn_case.ex

github-actions · 2024-06-05T22:12:48Z

Coverage of commit `3eb2ada`

Summary coverage rate:
  lines......: 73.1% (668 of 914 lines)
  functions..: 58.4% (510 of 874 functions)
  branches...: no data found

Files changed coverage rate:
                                                                     |Lines       |Functions  |Branches    
  Filename                                                           |Rate     Num|Rate    Num|Rate     Num
  =========================================================================================================
  lib/arrow_web.ex                                                   | 100%      2|37.5%     8|    -      0
  lib/arrow_web/components/core_components.ex                        | 0.0%    167| 0.0%    38|    -      0
  lib/arrow_web/endpoint.ex                                          | 100%      2|44.4%    18|    -      0
  test/support/conn_case.ex                                          | 100%     11| 100%     4|    -      0

Download coverage report

meagharty · 2024-06-06T15:27:32Z

I deployed this to dev with #978 so that it could be previewed with a working page from the phx.gen.html generators (that were broken pre-1.7 upgrade but with 1.7 required tailwind configuration for working CSS).

github-actions · 2024-06-07T12:56:38Z

Coverage of commit `4823396`

Summary coverage rate:
  lines......: 73.1% (668 of 914 lines)
  functions..: 58.4% (510 of 874 functions)
  branches...: no data found

Files changed coverage rate:
                                                                     |Lines       |Functions  |Branches    
  Filename                                                           |Rate     Num|Rate    Num|Rate     Num
  =========================================================================================================
  lib/arrow_web.ex                                                   | 100%      2|37.5%     8|    -      0
  lib/arrow_web/components/core_components.ex                        | 0.0%    167| 0.0%    38|    -      0
  lib/arrow_web/endpoint.ex                                          | 100%      2|44.4%    18|    -      0
  test/support/conn_case.ex                                          | 100%     11| 100%     4|    -      0

Download coverage report

github-actions · 2024-06-12T15:47:37Z

Coverage of commit `f9e89ca`

Summary coverage rate:
  lines......: 73.1% (668 of 914 lines)
  functions..: 58.4% (510 of 874 functions)
  branches...: no data found

Files changed coverage rate:
                                                                     |Lines       |Functions  |Branches    
  Filename                                                           |Rate     Num|Rate    Num|Rate     Num
  =========================================================================================================
  lib/arrow_web.ex                                                   | 100%      2|37.5%     8|    -      0
  lib/arrow_web/components/core_components.ex                        | 0.0%    167| 0.0%    38|    -      0
  lib/arrow_web/endpoint.ex                                          | 100%      2|44.4%    18|    -      0
  test/support/conn_case.ex                                          | 100%     11| 100%     4|    -      0

Download coverage report

nlwstein

🚢

meagharty marked this pull request as ready for review June 5, 2024 18:14

meagharty temporarily deployed to dev June 5, 2024 18:14 — with GitHub Actions Inactive

meagharty commented Jun 5, 2024

View reviewed changes

meagharty temporarily deployed to dev June 5, 2024 22:08 — with GitHub Actions Inactive

meagharty requested review from a team and bklebe and removed request for a team June 6, 2024 15:27

meagharty mentioned this pull request Jun 6, 2024

feat: add shuttle shape page #978

Merged

4 tasks

fsaid90 requested a review from nlwstein June 11, 2024 14:11

meagharty added 16 commits June 12, 2024 11:41

fix: commit CoreComponents from a phoenix 7 new app

59187fe

fix: update arrow_web.ex to match new phoenix app, use CoreComponents

a07dffb

chore: commit cosmetic npm lockfile change

1653e76

feat: hook up phoenix 1.7 verified_routes to endpoint.ex

b2133cb

fix: fix icons by adding to static path list

3b070af

feat: add tailwind css & hero icons for CoreComponents 1.7

4522191

fix: format tailwind.config.js with prettier

7a11182

fix: add phx.digest output to .gitignore

c8ad81d

fix: add tailwind to mix assets.build, assets.deploy

a3c3bc9

fix: fix dev config name for watching tailwind changes

341aa28

fix: have phoenix serve static files like images, fonts, icons

b5b03d7

fix: remove asset tagged versions of icons

0e0b8f9

fix: fix path for checkbox.css image

55c0895

fix: separate out css from js build, remove tailwind.css separate file

9aa8ee0

fix: remove @tailwind/base to prevent collision with bootstrap

a64d5fb

fix: update esbuild, remove css refs and add empty loader

0016475

fix: fix Dockerfile to work with tailwind with Phoenix .heex

f9e89ca

meagharty force-pushed the meag/add-phx7-core-components branch from 4823396 to f9e89ca Compare June 12, 2024 15:41

nlwstein approved these changes Jun 13, 2024

View reviewed changes

meagharty merged commit 7e2569e into master Jun 13, 2024
28 checks passed

meagharty deleted the meag/add-phx7-core-components branch June 13, 2024 15:05

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add CoreComponents from fresh Phoenix 1.7 app #976

feat: add CoreComponents from fresh Phoenix 1.7 app #976

meagharty commented Jun 5, 2024 •

edited

Loading

github-actions bot commented Jun 5, 2024

github-actions bot commented Jun 5, 2024

meagharty Jun 5, 2024

meagharty Jun 5, 2024

github-actions bot commented Jun 5, 2024

meagharty commented Jun 6, 2024 •

edited

Loading

github-actions bot commented Jun 7, 2024

github-actions bot commented Jun 12, 2024

nlwstein left a comment

feat: add CoreComponents from fresh Phoenix 1.7 app #976

feat: add CoreComponents from fresh Phoenix 1.7 app #976

Conversation

meagharty commented Jun 5, 2024 • edited Loading

Summary of changes

Reviewer Checklist

github-actions bot commented Jun 5, 2024

Coverage of commit 91222d0

github-actions bot commented Jun 5, 2024

Coverage of commit a7ee6f2

meagharty Jun 5, 2024

Choose a reason for hiding this comment

meagharty Jun 5, 2024

Choose a reason for hiding this comment

github-actions bot commented Jun 5, 2024

Coverage of commit 3eb2ada

meagharty commented Jun 6, 2024 • edited Loading

github-actions bot commented Jun 7, 2024

Coverage of commit 4823396

github-actions bot commented Jun 12, 2024

Coverage of commit f9e89ca

nlwstein left a comment

Choose a reason for hiding this comment

meagharty commented Jun 5, 2024 •

edited

Loading

Coverage of commit `91222d0`

Coverage of commit `a7ee6f2`

Coverage of commit `3eb2ada`

meagharty commented Jun 6, 2024 •

edited

Loading

Coverage of commit `4823396`

Coverage of commit `f9e89ca`