setup deployment with pnpm

Author: sebald

.github/workflows/deploy.yml

@@ -4,7 +4,7 @@ name: Deploy
 on:
   # Runs on pushes targeting the default branch
   push:
-    branches: ['main']
+    branches: ["main"]
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
@@ -17,7 +17,7 @@ permissions:
 
 # Allow one concurrent deployment
 concurrency:
-  group: 'pages'
+  group: "pages"
   cancel-in-progress: true
 
 jobs:
@@ -30,22 +30,25 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
       - name: Set up Node
         uses: actions/setup-node@v3
         with:
           node-version: 18
-          cache: 'npm'
+          cache: "npm"
       - name: Install dependencies
-        run: npm install
+        run: pnpm install
       - name: Build
-        run: npm run build
+        run: pnpm build
       - name: Setup Pages
         uses: actions/configure-pages@v3
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v2
         with:
           # Upload dist repository
-          path: './dist'
+          path: "./dist"
       - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@v2

src/App.jsx

@@ -3,6 +3,7 @@ import { MarigoldProvider } from "@marigold/components";
 import theme from "@marigold/theme-b2b";
 
 import Slides from "./slideshow.mdx";
+import Validation from "./validation.mdx";
 import { Example } from "./example";
 import { Frame } from "./Frame";
 
@@ -18,6 +19,9 @@ const App = () => (
         </MarigoldProvider>
       </Frame>
     </div>
+    <div className="content-item">
+      <Validation />
+    </div>
   </div>
 );
 

src/example.tsx

@@ -1,4 +1,4 @@
-import { Button, Form, Stack, TextField } from "@marigold/components";
+import { Button, Form, Inline, Stack, TextField } from "@marigold/components";
 import { getFormData, post } from "./utils";
 
 interface User {
@@ -23,9 +23,14 @@ export const Example = () => {
       <Stack space={4} alignX="left">
         <TextField label="Name" name="name" required />
         <TextField type="email" label="E-Mail" name="email" required />
-        <Button variant="primary" type="submit">
-          Submit
-        </Button>
+        <Inline space={2}>
+          <Button variant="primary" type="submit">
+            Submit
+          </Button>
+          <Button variant="secondary" type="reset">
+            Reset
+          </Button>
+        </Inline>
       </Stack>
     </Form>
   );