Fixes exports and example build after version upgrades (#10)

* Fixes issues with mjs in exports
* Minify the bundle
* Updates documentation and example story
* Adds a static pages deploy action
* Removes extra build, use newer pnpm action version
* Adds an example of a button on an individual story

.github/workflows/ci.yml

@@ -2,10 +2,11 @@ name: CI
 
 on:
   push:
-    branches:
-      - main
+    branches: ["main"]
+
   pull_request:
-    types: [opened, synchronize]
+    types: ["opened", "synchronize"]
+
   workflow_dispatch:
     inputs:
       lint_fix:
@@ -15,33 +16,33 @@ on:
         default: true
 
 concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
+  group: ${{ github.workflow }}-${{ github.ref }}-ci
   cancel-in-progress: true
 
 env:
-  LINT_FIX: ${{ fromJSON(inputs.lint_fix || 'false') || github.event_name == 'pull_request' && github.head_ref != 'main' }}
+  fixLintingErrors: ${{ fromJSON(inputs.lint_fix || 'false') || github.event_name == 'pull_request' && github.head_ref != 'main' }}
 
 jobs:
   lint:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - name: install pnpm
-        run: |
-          npm i -g pnpm
-          pnpm -v
-      - uses: actions/setup-node@v4
+
+      - uses: pnpm/action-setup@v4
         with:
-          cache: "pnpm"
-          node-version-file: ".nvmrc"
-      - run: pnpm install
+          version: 9.4.0
+          run_install: true
+
       - run: pnpm typecheck
+
       - run: pnpm lint
-        if: ${{ ! fromJSON(env.LINT_FIX) }}
+        if: ${{ ! fromJSON(env.fixLintingErrors) }}
+
       - run: pnpm lint:fix
-        if: ${{ fromJSON(env.LINT_FIX) }}
+        if: ${{ fromJSON(env.fixLintingErrors) }}
+
       - name: Commit linter fixes
         uses: stefanzweifel/git-auto-commit-action@8621497c8c39c72f3e2a999a26b4ca1b5058a842 #v5
-        if: ${{ fromJSON(env.LINT_FIX) }}
+        if: ${{ fromJSON(env.fixLintingErrors) }}
         with:
-          commit_message: "automated commit: pnpm lint:fix"
+          commit_message: "pnpm lint:fix"

.github/workflows/deploy.yml

@@ -0,0 +1,49 @@
+name: Deploy static content to Pages
+
+on:
+  push:
+    branches: ["main"]
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 9.4.0
+          run_install: true
+
+      - name: Build Ladle static content
+        run: pnpm ladle build
+        env:
+          BASE_URL: ${{ github.event.repository.name }}
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: "build"
+
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.ladle/components.tsx

@@ -1,5 +1,6 @@
 import React from "react"
-import { Truck, AlertCircle } from "react-feather"
+import { AlertCircle, ThumbsUp, Truck } from "react-feather"
+import "./style.css"
 
 import {
   CustomGlobalProvider,
@@ -9,53 +10,61 @@ import {
 } from "ladle-inject-custom-addons"
 
 import { GettingStarted } from "./components/GettingStarted"
+import { Context, contextMessage } from "./components/ContextExample"
 
 const packageName = "ladle-inject-custom-addons"
 
 interface MyCustomAddonConfig {
   customAddon: {
     enabled: boolean
+    customMessage: string
   }
 }
 
 export const Provider: CustomGlobalProvider<MyCustomAddonConfig> = ({
   config,
   children,
 }) => (
-  <Context.Provider value={{ message: "in context" }}>
+  <Context.Provider value={{ message: contextMessage }}>
     {children}
+
     <CustomDialogAddon />
+
     <ContextTestAddon position={2} />
+
     {config.addons.customAddon.enabled && (
-      <AddonButton
-        icon={<ExampleLadleIcon />}
-        tooltip="this addon must be enabled in config.mjs to show up"
-      />
+      <AddonDialogButton
+        icon={<ThumbsUp />}
+        label="Use custom configuration"
+        tooltip="Uses a custom configuration to show a custom message."
+      >
+        <p>
+          This addon is set up so that it must be enabled in the{" "}
+          <code>config.mjs</code> file to show up, similar to the built-in Ladle
+          addons.
+        </p>
+        <p>{config.addons.customAddon.customMessage}</p>
+      </AddonDialogButton>
     )}
+
     <PrependedHelloAddon position={-1} />
   </Context.Provider>
 )
 
-const Context = React.createContext({
-  message: "not in context",
-})
-
 const PrependedHelloAddon = ({ position = 0 }) => {
   const [packageManager, setPackageManager] = React.useState<string>("")
   return (
     <AddonDialogButton
       icon={<ExampleLadleIcon />}
+      label="Show package info"
       tooltip="Shows info about this package."
-      style={{ display: "grid", gap: 16 }}
       position={position}
     >
       <p>
         <strong>{packageName}</strong>
       </p>
       <p>Add your own components in the Ladle addon panel!</p>
-      <div style={{ fontSize: 50, textAlign: "center", marginBottom: 16 }}>
-        ✨🐙✨
-      </div>
+      <div className="octomoji">✨🐙✨</div>
       <GettingStarted
         packageName={packageName}
         packageManager={packageManager}
@@ -68,23 +77,23 @@ const PrependedHelloAddon = ({ position = 0 }) => {
 const CustomDialogAddon = ({ position = 0 }) => (
   <AddonButton
     icon={<AlertCircle />}
+    label="Show an alert"
     onClick={() => alert("hello!")}
     tooltip="Shows an alert to say hello."
     position={position}
   />
 )
 
-const ContextTestAddon = ({ position = 0 }) => {
+export const ContextTestAddon = ({ position = 0 }) => {
   const { message } = React.useContext(Context)
   return (
     <AddonDialogButton
       icon={<Truck />}
-      label="Test context"
-      tooltip="Tests if the context provider can be used within the button component."
-      badge={1}
+      label="Use a context"
+      tooltip="Demonstrates that addon buttons are able to inherit parent context."
       position={position}
     >
-      <p>{message}</p>
+      {message}
     </AddonDialogButton>
   )
 }

.ladle/components/ContextExample.tsx

@@ -0,0 +1,28 @@
+import React from "react"
+
+export const Context = React.createContext({
+  message: (
+    <p>
+      If you can see this message, it means that the addon is not receiving data
+      from the context provider in the CustomGlobalProvider component. Dang.
+    </p>
+  ),
+})
+
+export const contextMessage = (
+  <>
+    <p>
+      This message being displayed shows that the addon button is able to
+      receive data from a context provider. Yay!
+    </p>
+    <p>
+      This message is populated from a context provided in the{" "}
+      <code>CustomGlobalProvider</code> component. If you want to know more
+      about how it works, check out the{" "}
+      <a href="https://github.com/hiddenist/ladle-inject-custom-addons/blob/main/.ladle/components.tsx">
+        components.tsx
+      </a>{" "}
+      source code on GitHub.
+    </p>
+  </>
+)

.ladle/components/PlusOneAnimated.tsx

@@ -0,0 +1,22 @@
+import React from "react"
+
+const PlusOne = () => {
+  return <div className="plus-one">+1</div>
+}
+
+export const usePlusOneAnimated = () => {
+  const [elements, setElements] = React.useState<React.ReactNode[]>([])
+
+  const addPlusOne = React.useCallback(() => {
+    const element = <PlusOne key={Date.now()} />
+    setElements((elems) => [...elems, element])
+    setTimeout(() => {
+      setElements((elems) => elems.filter((e) => e !== element))
+    }, 1000)
+  }, [])
+
+  return {
+    addPlusOne,
+    elements,
+  }
+}

.ladle/config.mjs

@@ -1,11 +1,14 @@
+const baseUrl = process.env["BASE_URL"] || "/"
+
 export default {
   stories: ["{src,.ladle}/**/*.stories.{js,jsx,ts,tsx}"],
+  base: baseUrl,
   addons: {
     ladle: {
       enabled: false,
     },
     theme: {
-      enabled: false,
+      enabled: true,
     },
     mode: {
       enabled: false,
@@ -14,7 +17,8 @@ export default {
       enabled: false,
     },
     customAddon: {
-      enabled: false,
+      enabled: true,
+      customMessage: "You can also add custom values to the config file!",
     },
   },
 }

.ladle/example.stories.tsx

@@ -1,8 +1,84 @@
-import type { Story } from "@ladle/react";
+import React from "react"
+import type { Story } from "@ladle/react"
+import { PlusCircle } from "react-feather"
+import { AddonButton } from "ladle-inject-custom-addons"
+import { usePlusOneAnimated } from "./components/PlusOneAnimated"
 
-export const Simple: Story = () => (
-  <ul>
-    <li>Item 1</li>
-    <li>Item 2</li>
-  </ul>
+export const Home: Story = () => (
+  <div className="home">
+    <h1>ladle-inject-custom-addons</h1>
+    <div className="github-badges">
+      <a href="https://npmjs.com/package/ladle-inject-custom-addons">
+        <img
+          src="https://img.shields.io/npm/v/ladle-inject-custom-addons.svg"
+          alt="npm package"
+        />
+      </a>
+      <a href="https://github.com/hiddenist/ladle-inject-custom-addons/actions/workflows/ci.yml">
+        <img
+          src="https://github.com/hiddenist/ladle-inject-custom-addons/actions/workflows/ci.yml/badge.svg?branch=main"
+          alt="build status"
+        />
+      </a>
+    </div>
+    <img
+      width="686"
+      alt="A screenshot of the Ladle addon bar, with a dialog box displaying text: 'ladle-inject-custom-addons' Add your own components in the Ladle addon panel! ✨🐙✨"
+      src="https://github.com/hiddenist/ladle-inject-custom-addons/assets/563879/235b9c68-a7e5-40f3-b2cc-838f7c608b19"
+    />
+    <p>
+      This is a working example of the <code>ladle-inject-custom-addons</code>{" "}
+      package. Check out the buttons at the bottom of the screen to see it in
+      action.
+    </p>
+    <p>
+      Learn more at the{" "}
+      <a href="https://github.com/hiddenist/ladle-inject-custom-addons">
+        hiddenist/ladle-inject-custom-addons
+      </a>{" "}
+      GitHub repository!
+    </p>
+  </div>
 )
+
+export const StoryWithAddon: Story = () => {
+  const [clickCount, setClickCount] = React.useState(0)
+
+  const { elements, addPlusOne } = usePlusOneAnimated()
+
+  return (
+    <div>
+      <h1>This story has its own addon button</h1>
+      <p>
+        In addition to creating addon buttons in the global context, you can
+        also create addon buttons that only show up for specific stories!
+      </p>
+      <p>
+        <h2>
+          You have clicked the button {clickCount} time{clickCount != 1 && "s"}
+        </h2>
+      </p>
+      <p>
+        Curious how it's done? Find the source code button and take a look at
+        the code for this story!
+      </p>
+
+      <AddonButton
+        icon={
+          <>
+            <PlusCircle />
+            {elements}
+          </>
+        }
+        label="Count clicks"
+        tooltip="Increment the click count for this story"
+        position={0}
+        badge={clickCount < 10 ? clickCount : "9+"}
+        onClick={() => {
+          addPlusOne()
+          setClickCount((c) => c + 1)
+        }}
+      />
+    </div>
+  )
+}