Demo components page for React Components (#2850)

Author: zeorin

assets/js/react/components/Bar.tsx

@@ -0,0 +1,14 @@
+export type BarProps = {
+  before: React.ReactNode;
+  after: React.ReactNode;
+  children: React.ReactNode;
+};
+
+export const Bar = ({ before, after, children }: BarProps) => (
+  <>
+    {before}
+    <p>Bar:</p>
+    {children}
+    {after}
+  </>
+);

assets/js/react/components/Baz.tsx

@@ -0,0 +1,11 @@
+export type BazProps = {
+  baz: number;
+  children: React.ReactNode;
+};
+
+export const Baz = ({ baz, children }: BazProps) => (
+  <>
+    <p>Baz: {baz}</p>
+    {children}
+  </>
+);

assets/js/react/components/Foo.tsx

@@ -0,0 +1,11 @@
+export type FooProps = {
+  foo: number;
+  children: React.ReactNode;
+};
+
+export const Foo = ({ foo, children }: FooProps) => (
+  <>
+    <p>Foo: {foo}</p>
+    {children}
+  </>
+);

assets/js/react/components/index.ts

@@ -1,3 +1,7 @@
+export { Foo, type FooProps } from './Foo';
+export { Bar, type BarProps } from './Bar';
+export { Baz, type BazProps } from './Baz';
+
 export { Fallback, type FallbackProps } from './Fallback';
 export { Boundary, type BoundaryProps } from './Boundary';
 export { Slot, type SlotProps } from './Slot';

lib/lightning_web/live/dev/react_live.ex

@@ -0,0 +1,56 @@
+defmodule LightningWeb.Dev.ReactLive do
+  # Internal Development Page for viewing and working on React components.
+  # Access this page at /dev/react
+  @moduledoc false
+  use LightningWeb, {:live_view, layout: {LightningWeb.Layouts, :blank}}
+
+  import React
+
+  @impl true
+  def mount(_params, _session, socket) do
+    socket = assign(socket, :baz, 0)
+    {:ok, socket}
+  end
+
+  @impl true
+  def handle_event("inc", _params, socket) do
+    {:noreply, update(socket, :baz, &(&1 + 1))}
+  end
+
+  attr :foo, :integer
+  slot :inner_block
+  jsx("components/Foo.tsx")
+
+  slot :before
+  slot :inner_block, required: true
+  slot :after, required: true
+  jsx("components/Bar.tsx")
+
+  attr :baz, :integer, default: 0
+  jsx("components/Baz.tsx")
+
+  @impl true
+  def render(assigns) do
+    assigns = assign(assigns, foo: 42)
+
+    ~H"""
+    <.Foo foo={@foo}>
+      <.Bar>
+        <:before>
+          <p style="color: blue">Bar before slot</p>
+        </:before>
+        <.Baz baz={@baz} />
+        <:after>
+          <p style="color: red">Bar after slot</p>
+        </:after>
+      </.Bar>
+    </.Foo>
+    <button
+      phx-click="inc"
+      class="inline-flex justify-center items-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 phx-submit-loading:opacity-75 bg-primary-600 hover:bg-primary-700 text-white focus:ring-primary-500 disabled:bg-primary-300 rounded-md"
+    >
+      Increment
+    </button>
+    """
+  end
+end

lib/lightning_web/router.ex

@@ -263,6 +263,7 @@ defmodule LightningWeb.Router do
       forward "/mailbox", Plug.Swoosh.MailboxPreview
 
       live "/components", LightningWeb.Dev.ComponentsLive, :index
+      live "/react", LightningWeb.Dev.ReactLive, :index
     end
   end