From e63356715706bfd64aa0648a039c075e5ff33e85 Mon Sep 17 00:00:00 2001 From: Devin Elrose Date: Thu, 27 Jun 2024 13:21:18 -0700 Subject: [PATCH 01/10] Fixes issues with mjs in exports --- package.json | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index 27fcc68..4f25c25 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ladle-inject-custom-addons", - "version": "4.0.0", + "version": "4.0.1", "description": "Adds a button to the Ladle addon bar", "files": [ "dist", @@ -9,18 +9,18 @@ "exports": { ".": { "types": "./dist/index.d.ts", - "import": "./dist/index.js", - "require": "./dist/index.cjs.js" + "import": "./dist/index.mjs", + "require": "./dist/index.js" }, "./*": { "types": "./dist/components/*.d.ts", - "import": "./dist/components/*.js", - "require": "./dist/components/*.cjs.js" + "import": "./dist/components/*.mjs", + "require": "./dist/components/*.js" } }, "types": "./dist/index.d.ts", - "module": "./dist/index.js", - "main": "./dist/index.cjs.js", + "module": "./dist/index.mjs", + "main": "./dist/index.js", "scripts": { "build": "tsup && tsc -p tsconfig.build.json", "build:watch": "pnpm build --watch", From 263c8dde151bfa6ba275994c305d6ba1521d5bad Mon Sep 17 00:00:00 2001 From: Devin Elrose Date: Thu, 27 Jun 2024 13:21:33 -0700 Subject: [PATCH 02/10] Minify the bundle --- tsup.config.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/tsup.config.ts b/tsup.config.ts index cab7129..ddef04f 100644 --- a/tsup.config.ts +++ b/tsup.config.ts @@ -4,5 +4,6 @@ export default defineConfig({ format: ["cjs", "esm"], entry: ["src/**/*.{ts,tsx}", "!**/*.{test,stories}.{ts,tsx}"], splitting: false, + minify: true, clean: true, }) From e9f02583ab7e0006c8dafaa16facfd40adb04164 Mon Sep 17 00:00:00 2001 From: Devin Elrose Date: Thu, 27 Jun 2024 13:22:07 -0700 Subject: [PATCH 03/10] Updates documentation and example story --- .ladle/components.tsx | 7 ++++--- .ladle/config.mjs | 3 ++- .ladle/example.stories.tsx | 14 +++++++++----- README.md | 9 ++++++--- 4 files changed, 21 insertions(+), 12 deletions(-) diff --git a/.ladle/components.tsx b/.ladle/components.tsx index 5d99eff..05887c3 100644 --- a/.ladle/components.tsx +++ b/.ladle/components.tsx @@ -1,5 +1,5 @@ import React from "react" -import { Truck, AlertCircle } from "react-feather" +import { AlertCircle, ThumbsUp, Truck } from "react-feather" import { CustomGlobalProvider, @@ -15,6 +15,7 @@ const packageName = "ladle-inject-custom-addons" interface MyCustomAddonConfig { customAddon: { enabled: boolean + customMessage: string } } @@ -28,8 +29,8 @@ export const Provider: CustomGlobalProvider = ({ {config.addons.customAddon.enabled && ( } - tooltip="this addon must be enabled in config.mjs to show up" + icon={} + tooltip={`This addon must be enabled in config.mjs to show up. ${config.addons.customAddon.customMessage}`} /> )} diff --git a/.ladle/config.mjs b/.ladle/config.mjs index b518106..9c37388 100644 --- a/.ladle/config.mjs +++ b/.ladle/config.mjs @@ -14,7 +14,8 @@ export default { enabled: false, }, customAddon: { - enabled: false, + enabled: true, + customMessage: "You can also add custom values to the config file!", }, }, } diff --git a/.ladle/example.stories.tsx b/.ladle/example.stories.tsx index 22cc2f2..0a2569d 100644 --- a/.ladle/example.stories.tsx +++ b/.ladle/example.stories.tsx @@ -1,8 +1,12 @@ -import type { Story } from "@ladle/react"; +import React from "react" +import type { Story } from "@ladle/react" export const Simple: Story = () => ( -
    -
  • Item 1
    • -
  • Item 2
    • -
+
+

Welcome

+

+ This is a simple example story. Check out the addon buttons at the bottom + of the screen to see the magic! +

+
) diff --git a/README.md b/README.md index c7568d5..7bec1b0 100644 --- a/README.md +++ b/README.md @@ -66,7 +66,7 @@ const DialogExampleAddon = () => ( ### Icons -Most icon libraries will work for your addon buttons. Check out [react-feather](https://github.com/feathericons/react-feather) if you're not sure where to start! +Need icons for your addon buttons? Check out [react-feather](https://github.com/feathericons/react-feather) for a great set of icons! You can also add your own SVGs for your icons. Use `currentColor` for the stroke or fill on the icon to have it use the default hover and active colors. The icons are expected to be 24 by 24 pixels in size. @@ -88,9 +88,12 @@ const MyIcon = () => ( +> [!NOTE] +> Please be aware that you may encounter issues using certain libraries for your button icons. Material UI icons have been observed causing style issues with production bundles of component story libraries. + ### Button order -If you would like to put your custom addons at a different place in the list, you can pass the `position` property. +If you would like your custom addon to display in a different position within the addon list, you can pass the `position` property. ```tsx // .ladle/components.tsx @@ -113,7 +116,7 @@ export const Provider = ({ children }) => ( `AddonButton` utilizes a [React Portal](https://react.dev/reference/react-dom/createPortal) to mount your buttons within the existing Ladle addon list. -> **Warning**
+> [!WARNING] > This method of injecting components may not be very stable. Changes to the Ladle package could easily break this in future updates. ## Questions or contributions From 12b6dbe26918b83cba20175073a1db8db0f3b114 Mon Sep 17 00:00:00 2001 From: Devin Elrose Date: Thu, 27 Jun 2024 13:37:45 -0700 Subject: [PATCH 04/10] Adds a static pages deploy action --- .github/workflows/deploy.yml | 52 ++++++++++++++++++++++++++++++++++++ .ladle/config.mjs | 3 +++ 2 files changed, 55 insertions(+) create mode 100644 .github/workflows/deploy.yml diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml new file mode 100644 index 0000000..f7a4721 --- /dev/null +++ b/.github/workflows/deploy.yml @@ -0,0 +1,52 @@ +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@v2.2.4 + with: + version: 9.4.0 + run_install: true + + - name: Build package + run: pnpm build + + - 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 diff --git a/.ladle/config.mjs b/.ladle/config.mjs index 9c37388..ef8bea0 100644 --- a/.ladle/config.mjs +++ b/.ladle/config.mjs @@ -1,5 +1,8 @@ +const baseUrl = process.env["BASE_URL"] || "/" + export default { stories: ["{src,.ladle}/**/*.stories.{js,jsx,ts,tsx}"], + base: baseUrl, addons: { ladle: { enabled: false, From da074737f361ef0a54cd3fe77fc936f45f6d9ce2 Mon Sep 17 00:00:00 2001 From: Devin Elrose Date: Thu, 27 Jun 2024 14:37:05 -0700 Subject: [PATCH 05/10] Removes extra build, use newer pnpm action version --- .github/workflows/deploy.yml | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index f7a4721..c729a56 100644 --- a/.github/workflows/deploy.yml +++ b/.github/workflows/deploy.yml @@ -29,14 +29,11 @@ jobs: - name: Setup Pages uses: actions/configure-pages@v5 - - uses: pnpm/action-setup@v2.2.4 + - uses: pnpm/action-setup@v4 with: version: 9.4.0 run_install: true - - name: Build package - run: pnpm build - - name: Build Ladle static content run: pnpm ladle build env: From 99ad19f6e649f25096dc0c2e455ad3c0f8d63ee2 Mon Sep 17 00:00:00 2001 From: Devin Elrose Date: Thu, 27 Jun 2024 14:37:31 -0700 Subject: [PATCH 06/10] Adds an example of a button on an individual story --- .ladle/components.tsx | 39 +++++++++++++++++++---- .ladle/components/PlusOneAnimated.tsx | 37 +++++++++++++++++++++ .ladle/example.stories.tsx | 46 ++++++++++++++++++++++++++- .ladle/style.css | 17 ++++++++++ tsconfig.json | 2 +- 5 files changed, 132 insertions(+), 9 deletions(-) create mode 100644 .ladle/components/PlusOneAnimated.tsx create mode 100644 .ladle/style.css diff --git a/.ladle/components.tsx b/.ladle/components.tsx index 05887c3..bc6dc35 100644 --- a/.ladle/components.tsx +++ b/.ladle/components.tsx @@ -1,5 +1,6 @@ import React from "react" import { AlertCircle, ThumbsUp, Truck } from "react-feather" +import "./style.css" import { CustomGlobalProvider, @@ -23,8 +24,28 @@ export const Provider: CustomGlobalProvider = ({ config, children, }) => ( - - {children} + +

+ This message being displayed shows that the addon button is able to + receive data from a context provider. Yay! +

+

+ This message is populated from a context provided in the{" "} + CustomGlobalProvider component. If you want to know + more about how it works, check out the + + components.tsx + {" "} + source code. +

+ + ), + }} + > +
{children}
{config.addons.customAddon.enabled && ( @@ -38,7 +59,12 @@ export const Provider: CustomGlobalProvider = ({ ) const Context = React.createContext({ - message: "not in context", + message: ( +

+ If you can see this message, it means that the addon is not receiving data + from the context provider in the CustomGlobalProvider component. Dang. +

+ ), }) const PrependedHelloAddon = ({ position = 0 }) => { @@ -80,12 +106,11 @@ const ContextTestAddon = ({ position = 0 }) => { return ( } - label="Test context" - tooltip="Tests if the context provider can be used within the button component." - badge={1} + label="Addons with Context" + tooltip="Demonstrates that addon buttons are able to inherit parent context." position={position} > -

{message}

+ {message} ) } diff --git a/.ladle/components/PlusOneAnimated.tsx b/.ladle/components/PlusOneAnimated.tsx new file mode 100644 index 0000000..e820537 --- /dev/null +++ b/.ladle/components/PlusOneAnimated.tsx @@ -0,0 +1,37 @@ +import React from "react" + +const PlusOne = () => { + return ( +
+ +1 +
+ ) +} + +export const usePlusOneAnimated = () => { + const [elements, setElements] = React.useState([]) + + const addPlusOne = React.useCallback(() => { + const element = + setElements((elems) => [...elems, element]) + setTimeout(() => { + setElements((elems) => elems.filter((e) => e !== element)) + }, 1000) + }, []) + + return { + addPlusOne, + elements, + } +} diff --git a/.ladle/example.stories.tsx b/.ladle/example.stories.tsx index 0a2569d..637376f 100644 --- a/.ladle/example.stories.tsx +++ b/.ladle/example.stories.tsx @@ -1,7 +1,10 @@ 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 = () => ( +export const Home: Story = () => (

Welcome

@@ -10,3 +13,44 @@ export const Simple: Story = () => (

) + +export const StoryWithAddon: Story = () => { + const [clickCount, setClickCount] = React.useState(0) + + const { elements, addPlusOne } = usePlusOneAnimated() + + return ( +
+

This story has its own addon button

+

+ In addition to creating addon buttons in the global context, you can + also create addon buttons that only show up for specific stories! +

+

+

+ You have clicked the button {clickCount} time{clickCount != 1 && "s"} +

+

+

+ Curious how it's done? Find the source code button and take a look at + the code for this story! +

+ + + + {elements} + + } + tooltip="Increment the click count for this story" + position={10} + badge={true} + onClick={() => { + addPlusOne() + setClickCount((c) => c + 1) + }} + /> +
+ ) +} diff --git a/.ladle/style.css b/.ladle/style.css new file mode 100644 index 0000000..87f8ffc --- /dev/null +++ b/.ladle/style.css @@ -0,0 +1,17 @@ +@keyframes plus-one { + 0% { + opacity: 0; + transform: translateY(100%) scale(0.5); + } + 25% { + opacity: 1; + transform: translateY(-50%) scale(1); + } + 50% { + opacity: 1; + } + 100% { + opacity: 0; + transform: translateY(0); + } +} diff --git a/tsconfig.json b/tsconfig.json index 39d0e8a..86c7fa2 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -31,6 +31,6 @@ }, "types": ["node"] }, - "include": ["**/*", ".ladle/components.tsx"], + "include": ["**/*", ".ladle/components.tsx", ".ladle/example.stories.tsx"], "exclude": ["node_modules", "dist", ""] } From 4a379f0d5896bcc43d835780b4639669425aa2b2 Mon Sep 17 00:00:00 2001 From: Devin Elrose Date: Thu, 27 Jun 2024 14:58:20 -0700 Subject: [PATCH 07/10] Removes inline styles, misc cleanup --- .ladle/components.tsx | 45 ++++++---------------------- .ladle/components/ContextExample.tsx | 28 +++++++++++++++++ .ladle/example.stories.tsx | 2 +- .ladle/style.css | 10 +++++++ 4 files changed, 48 insertions(+), 37 deletions(-) create mode 100644 .ladle/components/ContextExample.tsx diff --git a/.ladle/components.tsx b/.ladle/components.tsx index bc6dc35..a4c426e 100644 --- a/.ladle/components.tsx +++ b/.ladle/components.tsx @@ -10,6 +10,7 @@ import { } from "ladle-inject-custom-addons" import { GettingStarted } from "./components/GettingStarted" +import { Context, contextMessage } from "./components/ContextExample" const packageName = "ladle-inject-custom-addons" @@ -24,65 +25,37 @@ export const Provider: CustomGlobalProvider = ({ config, children, }) => ( - -

- This message being displayed shows that the addon button is able to - receive data from a context provider. Yay! -

-

- This message is populated from a context provided in the{" "} - CustomGlobalProvider component. If you want to know - more about how it works, check out the - - components.tsx - {" "} - source code. -

- - ), - }} - > -
{children}
+ + {children} + + + {config.addons.customAddon.enabled && ( } tooltip={`This addon must be enabled in config.mjs to show up. ${config.addons.customAddon.customMessage}`} /> )} + ) -const Context = React.createContext({ - message: ( -

- If you can see this message, it means that the addon is not receiving data - from the context provider in the CustomGlobalProvider component. Dang. -

- ), -}) - const PrependedHelloAddon = ({ position = 0 }) => { const [packageManager, setPackageManager] = React.useState("") return ( } tooltip="Shows info about this package." - style={{ display: "grid", gap: 16 }} position={position} >

{packageName}

Add your own components in the Ladle addon panel!

-
- ✨🐙✨ -
+
✨🐙✨
( /> ) -const ContextTestAddon = ({ position = 0 }) => { +export const ContextTestAddon = ({ position = 0 }) => { const { message } = React.useContext(Context) return ( + If you can see this message, it means that the addon is not receiving data + from the context provider in the CustomGlobalProvider component. Dang. +

+ ), +}) + +export const contextMessage = ( + <> +

+ This message being displayed shows that the addon button is able to + receive data from a context provider. Yay! +

+

+ This message is populated from a context provided in the{" "} + CustomGlobalProvider component. If you want to know more + about how it works, check out the + + components.tsx + {" "} + source code. +

+ +) diff --git a/.ladle/example.stories.tsx b/.ladle/example.stories.tsx index 637376f..8521871 100644 --- a/.ladle/example.stories.tsx +++ b/.ladle/example.stories.tsx @@ -45,7 +45,7 @@ export const StoryWithAddon: Story = () => { } tooltip="Increment the click count for this story" position={10} - badge={true} + badge={clickCount < 10 ? clickCount : "9+"} onClick={() => { addPlusOne() setClickCount((c) => c + 1) diff --git a/.ladle/style.css b/.ladle/style.css index 87f8ffc..52d12dc 100644 --- a/.ladle/style.css +++ b/.ladle/style.css @@ -1,3 +1,13 @@ +.ladle-main { + font-family: Arial, Helvetica, sans-serif; +} + +.octomoji { + font-size: 50px; + text-align: "center"; + margin-bottom: 16px; +} + @keyframes plus-one { 0% { opacity: 0; From f5ea08a40f84c2c7f2045287b138d22a0f50a55b Mon Sep 17 00:00:00 2001 From: Devin Elrose Date: Thu, 27 Jun 2024 15:42:32 -0700 Subject: [PATCH 08/10] more documentation --- .ladle/components.tsx | 18 +++++++++--- .ladle/components/ContextExample.tsx | 4 +-- .ladle/components/PlusOneAnimated.tsx | 17 +---------- .ladle/config.mjs | 2 +- .ladle/example.stories.tsx | 38 ++++++++++++++++++++---- .ladle/style.css | 42 ++++++++++++++++++++++++++- README.md | 14 +++++++-- 7 files changed, 103 insertions(+), 32 deletions(-) diff --git a/.ladle/components.tsx b/.ladle/components.tsx index a4c426e..5094ead 100644 --- a/.ladle/components.tsx +++ b/.ladle/components.tsx @@ -33,10 +33,18 @@ export const Provider: CustomGlobalProvider = ({ {config.addons.customAddon.enabled && ( - } - tooltip={`This addon must be enabled in config.mjs to show up. ${config.addons.customAddon.customMessage}`} - /> + label="Use custom configuration" + tooltip="Uses a custom configuration to show a custom message." + > +

+ This addon is set up so that it must be enabled in the{" "} + config.mjs file to show up, similar to the built-in Ladle + addons. +

+

{config.addons.customAddon.customMessage}

+ )} @@ -48,6 +56,7 @@ const PrependedHelloAddon = ({ position = 0 }) => { return ( } + label="Show package info" tooltip="Shows info about this package." position={position} > @@ -68,6 +77,7 @@ const PrependedHelloAddon = ({ position = 0 }) => { const CustomDialogAddon = ({ position = 0 }) => ( } + label="Show an alert" onClick={() => alert("hello!")} tooltip="Shows an alert to say hello." position={position} @@ -79,7 +89,7 @@ export const ContextTestAddon = ({ position = 0 }) => { return ( } - label="Addons with Context" + label="Use a context" tooltip="Demonstrates that addon buttons are able to inherit parent context." position={position} > diff --git a/.ladle/components/ContextExample.tsx b/.ladle/components/ContextExample.tsx index cee449e..a58c8ed 100644 --- a/.ladle/components/ContextExample.tsx +++ b/.ladle/components/ContextExample.tsx @@ -18,11 +18,11 @@ export const contextMessage = (

This message is populated from a context provided in the{" "} CustomGlobalProvider component. If you want to know more - about how it works, check out the + about how it works, check out the{" "} components.tsx {" "} - source code. + source code on GitHub.

) diff --git a/.ladle/components/PlusOneAnimated.tsx b/.ladle/components/PlusOneAnimated.tsx index e820537..06193a4 100644 --- a/.ladle/components/PlusOneAnimated.tsx +++ b/.ladle/components/PlusOneAnimated.tsx @@ -1,22 +1,7 @@ import React from "react" const PlusOne = () => { - return ( -
- +1 -
- ) + return
+1
} export const usePlusOneAnimated = () => { diff --git a/.ladle/config.mjs b/.ladle/config.mjs index ef8bea0..34a0224 100644 --- a/.ladle/config.mjs +++ b/.ladle/config.mjs @@ -8,7 +8,7 @@ export default { enabled: false, }, theme: { - enabled: false, + enabled: true, }, mode: { enabled: false, diff --git a/.ladle/example.stories.tsx b/.ladle/example.stories.tsx index 8521871..616f796 100644 --- a/.ladle/example.stories.tsx +++ b/.ladle/example.stories.tsx @@ -5,11 +5,38 @@ import { AddonButton } from "ladle-inject-custom-addons" import { usePlusOneAnimated } from "./components/PlusOneAnimated" export const Home: Story = () => ( -
-

Welcome

+
+

ladle-inject-custom-addons

+ + 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! ✨🐙✨ +

+ This is a working example of the ladle-inject-custom-addons{" "} + package. Check out the buttons at the bottom of the screen to see it in + action. +

- This is a simple example story. Check out the addon buttons at the bottom - of the screen to see the magic! + Learn more at the{" "} + + hiddenist/ladle-inject-custom-addons + {" "} + GitHub repository!

) @@ -43,8 +70,9 @@ export const StoryWithAddon: Story = () => { {elements} } + label="Count clicks" tooltip="Increment the click count for this story" - position={10} + position={0} badge={clickCount < 10 ? clickCount : "9+"} onClick={() => { addPlusOne() diff --git a/.ladle/style.css b/.ladle/style.css index 52d12dc..01a38bb 100644 --- a/.ladle/style.css +++ b/.ladle/style.css @@ -1,13 +1,53 @@ -.ladle-main { +body { font-family: Arial, Helvetica, sans-serif; } +[data-theme="dark"] body { + color: #eee; +} + .octomoji { font-size: 50px; text-align: "center"; margin-bottom: 16px; } +.home { + display: flex; + flex-direction: column; + align-items: center; +} + +.home p { + max-width: 80ch; +} + +.home img { + max-width: 100%; +} + +.github-badges { + display: flex; + justify-content: center; + gap: 16px; +} + +.plus-one { + position: absolute; + bottom: 100%; + animation: plus-one 1s forwards; + font-weight: bold; + font-size: 12px; + color: rgba(10, 60, 90, 0.9); + background-color: rgba(255, 255, 255, 0.2); + border-radius: 4px; +} + +[data-theme="dark"] .plus-one { + color: rgba(117, 194, 242, 0.9); + background-color: rgba(0, 0, 0, 0.2); +} + @keyframes plus-one { 0% { opacity: 0; diff --git a/README.md b/README.md index 7bec1b0..ba43565 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ [Ladle](https://github.com/tajo/ladle) doesn't officially support third party addons yet. Now we can pretend it does! -Confirmed to work up through `@ladle/react` version ^4.10.0. +Check out working example: https://hiddenist.github.io/ladle-inject-custom-addons/ - [Quick Start](#quick-start) - [Customization](#customization) @@ -22,7 +22,9 @@ Confirmed to work up through `@ladle/react` version ^4.10.0. pnpm add ladle-inject-custom-addons ``` -> **Note**
+This package is confirmed to work with `@ladle/react` up through version ^4.10.0. + +> [!NOTE] > Replace `pnpm` with `yarn` or `npm` to match what you use for your project. 😉 ### Basic Usage @@ -51,12 +53,17 @@ const HelloAddon = () => ( } onClick={() => alert("hello!")} + label="Say hello" tooltip="Shows an alert to say hello." /> ) const DialogExampleAddon = () => ( - } tooltip="Opens a dialog box."> + } + label="Show dialog" + tooltip="Opens a dialog box." + >

Custom text, or more advanced components, will show up in a dialog.

 ) @@ -103,6 +110,7 @@ export const Provider = ({ children }) => ( } onClick={() => alert("hello!")} + label="Say hello" tooltip="Shows an alert to say hello." // This button will be third in the addon panel list: position={3} From 6f5de714188811badc7425c756376cd37e5b8327 Mon Sep 17 00:00:00 2001 From: Devin Elrose Date: Thu, 27 Jun 2024 15:42:45 -0700 Subject: [PATCH 09/10] updates ci workflow --- .github/workflows/ci.yml | 34 ++++++++++++++++++++-------------- 1 file changed, 20 insertions(+), 14 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 3c3ca43..d594204 100644 --- a/.github/workflows/ci.yml +++ b/.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,38 @@ 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 with: cache: "pnpm" node-version-file: ".nvmrc" - - run: pnpm install + + - uses: pnpm/action-setup@v4 + with: + 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" From 5660e1bf2d8d9be8a04b4c6c46e3254bd257b980 Mon Sep 17 00:00:00 2001 From: Devin Elrose Date: Thu, 27 Jun 2024 15:44:38 -0700 Subject: [PATCH 10/10] removes setup-node since it doesn't seem to work with pnpm action-setup --- .github/workflows/ci.yml | 5 ----- 1 file changed, 5 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index d594204..c762b3c 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -28,11 +28,6 @@ jobs: steps: - uses: actions/checkout@v4 - - uses: actions/setup-node@v4 - with: - cache: "pnpm" - node-version-file: ".nvmrc" - - uses: pnpm/action-setup@v4 with: version: 9.4.0