refactor(www): framework path params to global state

.github/workflows/deploy.yml

@@ -2,14 +2,64 @@ name: Workers Deployment
 
 on:
   pull_request:
-    branches: ['main','next']
-  push: 
+    branches: ['next']
+  push:
     branches: ['next']
 
 jobs:
-  deploy:
+  preview:
+    name: Preview Deployment
+    if: github.event_name == 'pull_request'
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      pull-requests: write
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Setup Node & Pnpm
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: ''
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build
+        run: pnpm run build
+
+      - name: Preview Deploy to Cloudflare Workers
+        id: deploy
+        uses: cloudflare/wrangler-action@v3
+        with:
+          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          workingDirectory: "apps/www"
+          packageManager: pnpm
+          command: versions upload --message="${{ github.ref_name }}"
+
+      - name: Comment PR with Preview URL
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const deploymentUrl = "${{ steps.deploy.outputs.deployment-url }}";
+            const body = `🚀 Preview: ${deploymentUrl}`;
+
+            github.rest.issues.createComment({
+              issue_number: context.issue.number,
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              body: body
+            });
+
+  production:
+    name: Production Deployment
+    if: github.event_name == 'push' && github.ref == 'refs/heads/next'
     runs-on: ubuntu-latest
-    name: Deploy
     permissions:
       contents: read
     steps:
@@ -31,8 +81,8 @@ jobs:
       - name: Build
         run: pnpm run build
 
-      - name:  Deploy to Cloudflare Workers
-        uses:  cloudflare/wrangler-action@v3
+      - name: Production Deploy to Cloudflare Workers
+        uses: cloudflare/wrangler-action@v3
         with:
           apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
           workingDirectory: "apps/www"

apps/www/content/components/accordion.mdx

@@ -21,7 +21,7 @@ description: A vertically stacked set of interactive headings that each reveal a
 
 <Step>Copy and paste the following code into your project.</Step>
 
-<ComponentSource component="accordion"/>
+<ComponentSource name="accordion"/>
 
 <Step>Update the import paths to match your project setup.</Step>
 

apps/www/content/components/avatar.mdx

@@ -21,7 +21,7 @@ description: An image element with a fallback for representing the user.
 
 <Step>Copy and paste the following code into your project.</Step>
 
-<ComponentSource component="avatar" />
+<ComponentSource name="avatar" />
 
 <Step>Update the import paths to match your project setup.</Step>
 

apps/www/content/components/button.mdx

@@ -21,7 +21,7 @@ description: Displays a button or a component that looks like a button.
 
 <Step>Copy and paste the following code into your project.</Step>
 
-<ComponentSource component="button" />
+<ComponentSource name="button" />
 
 <Step>Update the import paths to match your project setup.</Step>
 

apps/www/content/components/checkbox.mdx

@@ -21,7 +21,7 @@ description: A control that allows the user to toggle between checked and not ch
 
 <Step>Copy and paste the following code into your project.</Step>
 
-<ComponentSource component="checkbox" />
+<ComponentSource name="checkbox" />
 
 <Step>Update the import paths to match your project setup.</Step>
 

apps/www/content/components/collapsible.mdx

@@ -21,7 +21,7 @@ description: An interactive component which expands/collapses a panel.
 
 <Step>Copy and paste the following code into your project.</Step>
 
-<ComponentSource component="collapsible" />
+<ComponentSource name="collapsible" />
 
 <Step>Update the import paths to match your project setup.</Step>
 

apps/www/content/components/combobox.mdx

@@ -21,7 +21,7 @@ description: Autocomplete input and command palette with a list of suggestions.
 
 <Step>Copy and paste the following code into your project.</Step>
 
-<ComponentSource component="combobox" />
+<ComponentSource name="combobox" />
 
 <Step>Update the import paths to match your project setup.</Step>
 

apps/www/content/components/dialog.mdx

@@ -21,7 +21,7 @@ description: A window overlaid on either the primary window or another dialog wi
 
 <Step>Copy and paste the following code into your project.</Step>
 
-<ComponentSource component="dialog" />
+<ComponentSource name="dialog" />
 
 <Step>Update the import paths to match your project setup.</Step>
 

apps/www/content/components/hover-card.mdx

@@ -21,7 +21,7 @@ description: For sighted users to preview content available behind a link.
 
 <Step>Copy and paste the following code into your project.</Step>
 
-<ComponentSource component="hover-card" />
+<ComponentSource name="hover-card" />
 
 <Step>Update the import paths to match your project setup.</Step>
 

apps/www/content/components/input.mdx

@@ -21,7 +21,7 @@ description: Displays a form input field or a component that looks like an input
 
 <Step>Copy and paste the following code into your project.</Step>
 
-<ComponentSource component="input" />
+<ComponentSource name="input" />
 
 <Step>Update the import paths to match your project setup.</Step>
 

apps/www/content/components/label.mdx

@@ -21,7 +21,7 @@ description: Renders an accessible label associated with controls.
 
 <Step>Copy and paste the following code into your project.</Step>
 
-<ComponentSource component="label" />
+<ComponentSource name="label" />
 
 <Step>Update the import paths to match your project setup.</Step>
 

apps/www/content/components/menu.mdx

@@ -21,7 +21,7 @@ description: Displays a menu to the user — such as a set of actions or functio
 
 <Step>Copy and paste the following code into your project.</Step>
 
-<ComponentSource component="menu" />
+<ComponentSource name="menu" />
 
 <Step>Update the import paths to match your project setup.</Step>
 

apps/www/content/components/number-input.mdx

@@ -21,7 +21,7 @@ description: A field that allows users to enter and manipulate numeric values wi
 
 <Step>Copy and paste the following code into your project.</Step>
 
-<ComponentSource component="number-input" />
+<ComponentSource name="number-input" />
 
 <Step>Update the import paths to match your project setup.</Step>
 

apps/www/content/components/pagination.mdx

@@ -21,7 +21,7 @@ description: Pagination with page navigation, next and previous links.
 
 <Step>Copy and paste the following code into your project.</Step>
 
-<ComponentSource component="pagination" />
+<ComponentSource name="pagination" />
 
 <Step>Update the import paths to match your project setup.</Step>
 

apps/www/content/components/pin-input.mdx

@@ -21,7 +21,7 @@ description: Accessible one-time password component with copy paste functionalit
 
 <Step>Copy and paste the following code into your project.</Step>
 
-<ComponentSource component="pin-input" />
+<ComponentSource name="pin-input" />
 
 <Step>Update the import paths to match your project setup.</Step>
 

apps/www/content/components/popover.mdx

@@ -21,7 +21,7 @@ description: Displays rich content in a portal, triggered by a button.
 
 <Step>Copy and paste the following code into your project.</Step>
 
-<ComponentSource component="popover" />
+<ComponentSource name="popover" />
 
 <Step>Update the import paths to match your project setup.</Step>
 

apps/www/content/components/progress.mdx

@@ -21,7 +21,7 @@ description: Displays an indicator showing the completion progress of a task, ty
 
 <Step>Copy and paste the following code into your project.</Step>
 
-<ComponentSource component="progress" />
+<ComponentSource name="progress" />
 
 <Step>Update the import paths to match your project setup.</Step>
 

apps/www/content/components/radio-group.mdx

@@ -21,7 +21,7 @@ description: A set of checkable buttons—known as radio buttons—where no more
 
 <Step>Copy and paste the following code into your project.</Step>
 
-<ComponentSource component="radio-group" />
+<ComponentSource name="radio-group" />
 
 <Step>Update the import paths to match your project setup.</Step>
 

apps/www/content/components/rating-group.mdx

@@ -22,7 +22,7 @@ visible: false
 
 <Step>Copy and paste the following code into your project.</Step>
 
-<ComponentSource component="rating-group" />
+<ComponentSource name="rating-group" />
 
 <Step>Update the import paths to match your project setup.</Step>
 

apps/www/content/components/select.mdx

@@ -21,7 +21,7 @@ description: Displays a list of options for the user to pick from—triggered by
 
 <Step>Copy and paste the following code into your project.</Step>
 
-<ComponentSource component="select" />
+<ComponentSource name="select" />
 
 <Step>Update the import paths to match your project setup.</Step>
 

apps/www/content/components/sheet.mdx

@@ -21,7 +21,7 @@ description: Extends the Dialog component to display content that complements th
 
 <Step>Copy and paste the following code into your project.</Step>
 
-<ComponentSource component="sheet" />
+<ComponentSource name="sheet" />
 
 <Step>Update the import paths to match your project setup.</Step>
 

apps/www/content/components/slider.mdx

@@ -21,7 +21,7 @@ description: An input where the user selects a value from within a given range.
 
 <Step>Copy and paste the following code into your project.</Step>
 
-<ComponentSource component="slider" />
+<ComponentSource name="slider" />
 
 <Step>Update the import paths to match your project setup.</Step>
 

apps/www/content/components/switch.mdx

@@ -21,7 +21,7 @@ description: A control that allows the user to toggle between checked and not ch
 
 <Step>Copy and paste the following code into your project.</Step>
 
-<ComponentSource component="switch" />
+<ComponentSource name="switch" />
 
 <Step>Update the import paths to match your project setup.</Step>
 

apps/www/content/components/tabs.mdx

@@ -21,7 +21,7 @@ description: A set of layered sections of content—known as tab panels—that a
 
 <Step>Copy and paste the following code into your project.</Step>
 
-<ComponentSource component="tabs" />
+<ComponentSource name="tabs" />
 
 <Step>Update the import paths to match your project setup.</Step>
 

apps/www/content/components/tags-input.mdx

@@ -21,7 +21,7 @@ description: A component that allows users to add tags to an input field.
 
 <Step>Copy and paste the following code into your project.</Step>
 
-<ComponentSource component="tags-input" />
+<ComponentSource name="tags-input" />
 
 <Step>Update the import paths to match your project setup.</Step>
 

apps/www/content/components/textarea.mdx

@@ -21,7 +21,7 @@ description: Displays a form textarea or a component that looks like a textarea.
 
 <Step>Copy and paste the following code into your project.</Step>
 
-<ComponentSource component="textarea" />
+<ComponentSource name="textarea" />
 
 <Step>Update the import paths to match your project setup.</Step>
 

apps/www/content/components/toast.mdx

@@ -22,7 +22,7 @@ visible: false
 
 <Step>Copy and paste the following code into your project.</Step>
 
-<ComponentSource component="toast" />
+<ComponentSource name="toast" />
 
 <Step>Update the import paths to match your project setup.</Step>
 

apps/www/content/components/toggle-group.mdx

@@ -21,7 +21,7 @@ description: A set of two-state buttons that can be toggled on or off.
 
 <Step>Copy and paste the following code into your project.</Step>
 
-<ComponentSource component="toggle-group" />
+<ComponentSource name="toggle-group" />
 
 <Step>Update the import paths to match your project setup.</Step>
 

apps/www/content/components/toggle.mdx

@@ -24,7 +24,7 @@ links:
 
 <Step>Copy and paste the following code into your project.</Step>
 
-<ComponentSource component="toggle" />
+<ComponentSource name="toggle" />
 
 <Step>Update the import paths to match your project setup.</Step>
 

apps/www/content/components/tooltip.mdx

@@ -21,7 +21,7 @@ description: A popup that displays information related to an element when the el
 
 <Step>Copy and paste the following code into your project.</Step>
 
-<ComponentSource component="tooltip" />
+<ComponentSource name="tooltip" />
 
 <Step>Update the import paths to match your project setup.</Step>
 

apps/www/content/components/tree-view.mdx

@@ -22,7 +22,7 @@ visible: false
 
 <Step>Copy and paste the following code into your project.</Step>
 
-<ComponentSource component="tree-view" />
+<ComponentSource name="tree-view" />
 
 <Step>Update the import paths to match your project setup.</Step>