update design

Author: karim-semmoud

.github/workflows/elixir.yml

@@ -9,6 +9,9 @@ on:
 permissions:
   contents: read
 
+env:
+  FORCE_JAVASCRIPT_ACTIONS_TO_NODE24: true
+
 jobs:
   unit-tests:
     name: Unit tests (OTP ${{ matrix.otp }} | Elixir ${{ matrix.elixir }})

e2e/assets/corex/components/data-table.css

@@ -3,29 +3,29 @@
 @layer components {
 
   .data-table {
-    @apply ui-root scrollbar;
+    @apply scrollbar;
+    display: block;
     width: 100%;
     max-width: 100%;
+    min-width: 0;
     overflow-x: auto;
     overflow-y: hidden;
     border-radius: var(--radius-ui);
     border: 1px solid var(--color-ui--border);
     }
 
   .data-table [data-scope="data-table"][data-part="root"] {
-    @apply ui-root;
-    
-    width: 100%;
+    display: table;
+    width: max-content;
+    min-width: 100%;
     max-width: none;
     border-collapse: collapse;
-    gap: 0;
   }
 
   .data-table [data-scope="data-table"][data-part="thead"] {
     border-bottom: 1px solid var(--color-ui--border);
     color: var(--color-ui--text);
     text-transform: uppercase;
-    background-color: var(--color-ui-active);
     font-size: var(--text-ui-sm);
   }
 
@@ -37,6 +37,7 @@
     font-weight: var(--font-weight-ui-bold);
     white-space: nowrap;
     width: 1%;
+    background-color: var(--color-ui-active);
   }
 
   .data-table [data-scope="data-table"][data-part="action-header"] {

e2e/assets/corex/components/layout.css

@@ -8,8 +8,10 @@
     display: flex;
     flex-direction: column;
     min-height: 100vh;
+    min-width: 0;
     color: var(--color-root--text);
     background: var(--color-root);
+    overflow-x: hidden;
     overflow-y: scroll;
 
     scrollbar-gutter: stable;
@@ -58,6 +60,7 @@
     display: flex;
     flex: 1;
     width: 100%;
+    min-width: 0;
     justify-content: flex-start;
     margin-inline: auto;
     background-color: var(--color-root);
@@ -107,6 +110,7 @@
     flex-direction: row;
     width: 100%;
     flex: 1;
+    min-width: 0;
     justify-content: flex-start;
     align-items: center;
   }
@@ -116,6 +120,7 @@
     flex-direction: column;
     width: 100%;
     flex: 1;
+    min-width: 0;
     justify-content: flex-start;
     align-items: center;
     padding: var(--spacing-ui-padding);

e2e/assets/corex/components/native-input.css

@@ -55,6 +55,7 @@
 
   .native-input [data-scope="native-input"][data-part="error"] {
     @apply ui-error;
+    margin-block-start: var(--spacing-ui-gap);
   }
 
   .native-input [data-scope="native-input"][data-part="control"] label[data-part="label"] {

e2e/assets/corex/components/number-input.css

@@ -65,4 +65,8 @@
     border-start-end-radius: 0;
     border-block-start: 0;
   }
+
+  .number-input [data-scope="number-input"][data-part="error"] {
+    @apply ui-error;
+  }
 }

installer/templates/corex_design/components/data-table.css

@@ -3,29 +3,29 @@
 @layer components {
 
   .data-table {
-    @apply ui-root scrollbar;
+    @apply scrollbar;
+    display: block;
     width: 100%;
     max-width: 100%;
+    min-width: 0;
     overflow-x: auto;
     overflow-y: hidden;
     border-radius: var(--radius-ui);
     border: 1px solid var(--color-ui--border);
     }
 
   .data-table [data-scope="data-table"][data-part="root"] {
-    @apply ui-root;
-    
-    width: 100%;
+    display: table;
+    width: max-content;
+    min-width: 100%;
     max-width: none;
     border-collapse: collapse;
-    gap: 0;
   }
 
   .data-table [data-scope="data-table"][data-part="thead"] {
     border-bottom: 1px solid var(--color-ui--border);
     color: var(--color-ui--text);
     text-transform: uppercase;
-    background-color: var(--color-ui-active);
     font-size: var(--text-ui-sm);
   }
 
@@ -37,6 +37,7 @@
     font-weight: var(--font-weight-ui-bold);
     white-space: nowrap;
     width: 1%;
+    background-color: var(--color-ui-active);
   }
 
   .data-table [data-scope="data-table"][data-part="action-header"] {

installer/templates/corex_design/components/layout.css

@@ -8,8 +8,10 @@
     display: flex;
     flex-direction: column;
     min-height: 100vh;
+    min-width: 0;
     color: var(--color-root--text);
     background: var(--color-root);
+    overflow-x: hidden;
     overflow-y: scroll;
 
     scrollbar-gutter: stable;
@@ -58,6 +60,7 @@
     display: flex;
     flex: 1;
     width: 100%;
+    min-width: 0;
     justify-content: flex-start;
     margin-inline: auto;
     background-color: var(--color-root);
@@ -107,6 +110,7 @@
     flex-direction: row;
     width: 100%;
     flex: 1;
+    min-width: 0;
     justify-content: flex-start;
     align-items: center;
   }
@@ -116,6 +120,7 @@
     flex-direction: column;
     width: 100%;
     flex: 1;
+    min-width: 0;
     justify-content: flex-start;
     align-items: center;
     padding: var(--spacing-ui-padding);

installer/templates/corex_design/components/native-input.css

@@ -55,6 +55,7 @@
 
   .native-input [data-scope="native-input"][data-part="error"] {
     @apply ui-error;
+    margin-block-start: var(--spacing-ui-gap);
   }
 
   .native-input [data-scope="native-input"][data-part="control"] label[data-part="label"] {

installer/templates/corex_design/components/number-input.css

@@ -65,4 +65,8 @@
     border-start-end-radius: 0;
     border-block-start: 0;
   }
+
+  .number-input [data-scope="number-input"][data-part="error"] {
+    @apply ui-error;
+  }
 }

lib/mix/tasks/corex.gen.live.ex

@@ -266,7 +266,7 @@ defmodule Mix.Tasks.Corex.Gen.Live do
     if schema.web_namespace do
       Mix.shell().info("""
 
-      Add the live routes to your #{schema.web_namespace} :browser scope in #{web_path}/router.ex:
+      #{scope_instruction}
 
           scope "/#{schema.web_path}", #{inspect(prefix)} do
             pipe_through :browser
@@ -327,9 +327,6 @@ defmodule Mix.Tasks.Corex.Gen.Live do
     schema.attrs
     |> Enum.reject(fn {_key, type} -> type == :map end)
     |> Enum.map(fn
-      {_, {:references, _}} ->
-        nil
-
       {key, :integer} ->
         number_input_block(key, nil)
 
@@ -366,7 +363,6 @@ defmodule Mix.Tasks.Corex.Gen.Live do
       {key, _} ->
         native_input_block("text", key, error_slot: true)
     end)
-    |> Enum.reject(&is_nil/1)
   end
 
   defp number_input_block(key, step) do
@@ -378,7 +374,7 @@ defmodule Mix.Tasks.Corex.Gen.Live do
       end
 
     ~s"""
-    <.number_input field={@form[#{inspect(key)}]} controlled class="number-input"#{step_lines}>
+    <.number_input field={@form[#{inspect(key)}]} class="number-input"#{step_lines}>
       <:label>#{label(key)}</:label>
       <:decrement_trigger><.heroicon name="hero-chevron-down" class="icon" /></:decrement_trigger>
       <:increment_trigger><.heroicon name="hero-chevron-up" class="icon" /></:increment_trigger>
@@ -392,7 +388,7 @@ defmodule Mix.Tasks.Corex.Gen.Live do
 
   defp checkbox_block(key) do
     ~s"""
-    <.checkbox field={@form[#{inspect(key)}]} class="checkbox" controlled>
+    <.checkbox field={@form[#{inspect(key)}]} class="checkbox">
       <:label>#{label(key)}</:label>
       <:indicator>
         <.heroicon name="hero-check" class="data-checked" />
@@ -407,7 +403,7 @@ defmodule Mix.Tasks.Corex.Gen.Live do
 
   defp date_picker_block(key) do
     ~s"""
-    <.date_picker field={@form[#{inspect(key)}]} class="date-picker" controlled>
+    <.date_picker field={@form[#{inspect(key)}]} class="date-picker">
       <:label>#{label(key)}</:label>
       <:trigger>
         <.heroicon name="hero-calendar" class="icon" />