diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index 2b31993b..968311d8 100644 --- a/.github/workflows/deploy.yml +++ b/.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" diff --git a/apps/www/content/components/accordion.mdx b/apps/www/content/components/accordion.mdx index fa51d1d2..c47b2022 100644 --- a/apps/www/content/components/accordion.mdx +++ b/apps/www/content/components/accordion.mdx @@ -21,7 +21,7 @@ description: A vertically stacked set of interactive headings that each reveal a Copy and paste the following code into your project. - + Update the import paths to match your project setup. diff --git a/apps/www/content/components/avatar.mdx b/apps/www/content/components/avatar.mdx index 16d40735..fc1f5b3c 100644 --- a/apps/www/content/components/avatar.mdx +++ b/apps/www/content/components/avatar.mdx @@ -21,7 +21,7 @@ description: An image element with a fallback for representing the user. Copy and paste the following code into your project. - + Update the import paths to match your project setup. diff --git a/apps/www/content/components/button.mdx b/apps/www/content/components/button.mdx index 1360f49b..01a62d7a 100644 --- a/apps/www/content/components/button.mdx +++ b/apps/www/content/components/button.mdx @@ -21,7 +21,7 @@ description: Displays a button or a component that looks like a button. Copy and paste the following code into your project. - + Update the import paths to match your project setup. diff --git a/apps/www/content/components/checkbox.mdx b/apps/www/content/components/checkbox.mdx index bd7762ba..f2dd2b27 100644 --- a/apps/www/content/components/checkbox.mdx +++ b/apps/www/content/components/checkbox.mdx @@ -21,7 +21,7 @@ description: A control that allows the user to toggle between checked and not ch Copy and paste the following code into your project. - + Update the import paths to match your project setup. diff --git a/apps/www/content/components/collapsible.mdx b/apps/www/content/components/collapsible.mdx index 58b0bb9e..cdf6a997 100644 --- a/apps/www/content/components/collapsible.mdx +++ b/apps/www/content/components/collapsible.mdx @@ -21,7 +21,7 @@ description: An interactive component which expands/collapses a panel. Copy and paste the following code into your project. - + Update the import paths to match your project setup. diff --git a/apps/www/content/components/combobox.mdx b/apps/www/content/components/combobox.mdx index b8dd5819..54975d12 100644 --- a/apps/www/content/components/combobox.mdx +++ b/apps/www/content/components/combobox.mdx @@ -21,7 +21,7 @@ description: Autocomplete input and command palette with a list of suggestions. Copy and paste the following code into your project. - + Update the import paths to match your project setup. diff --git a/apps/www/content/components/dialog.mdx b/apps/www/content/components/dialog.mdx index 5e9d5a92..885197bf 100644 --- a/apps/www/content/components/dialog.mdx +++ b/apps/www/content/components/dialog.mdx @@ -21,7 +21,7 @@ description: A window overlaid on either the primary window or another dialog wi Copy and paste the following code into your project. - + Update the import paths to match your project setup. diff --git a/apps/www/content/components/hover-card.mdx b/apps/www/content/components/hover-card.mdx index 2802ef7e..5e745a14 100644 --- a/apps/www/content/components/hover-card.mdx +++ b/apps/www/content/components/hover-card.mdx @@ -21,7 +21,7 @@ description: For sighted users to preview content available behind a link. Copy and paste the following code into your project. - + Update the import paths to match your project setup. diff --git a/apps/www/content/components/input.mdx b/apps/www/content/components/input.mdx index cb8f8c9e..273905a5 100644 --- a/apps/www/content/components/input.mdx +++ b/apps/www/content/components/input.mdx @@ -21,7 +21,7 @@ description: Displays a form input field or a component that looks like an input Copy and paste the following code into your project. - + Update the import paths to match your project setup. diff --git a/apps/www/content/components/label.mdx b/apps/www/content/components/label.mdx index 4b261b54..9f526b21 100644 --- a/apps/www/content/components/label.mdx +++ b/apps/www/content/components/label.mdx @@ -21,7 +21,7 @@ description: Renders an accessible label associated with controls. Copy and paste the following code into your project. - + Update the import paths to match your project setup. diff --git a/apps/www/content/components/menu.mdx b/apps/www/content/components/menu.mdx index c68b953e..75f5ab74 100644 --- a/apps/www/content/components/menu.mdx +++ b/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 Copy and paste the following code into your project. - + Update the import paths to match your project setup. diff --git a/apps/www/content/components/number-input.mdx b/apps/www/content/components/number-input.mdx index 901373b1..5cc80cfd 100644 --- a/apps/www/content/components/number-input.mdx +++ b/apps/www/content/components/number-input.mdx @@ -21,7 +21,7 @@ description: A field that allows users to enter and manipulate numeric values wi Copy and paste the following code into your project. - + Update the import paths to match your project setup. diff --git a/apps/www/content/components/pagination.mdx b/apps/www/content/components/pagination.mdx index c167fe13..6db1f18d 100644 --- a/apps/www/content/components/pagination.mdx +++ b/apps/www/content/components/pagination.mdx @@ -21,7 +21,7 @@ description: Pagination with page navigation, next and previous links. Copy and paste the following code into your project. - + Update the import paths to match your project setup. diff --git a/apps/www/content/components/pin-input.mdx b/apps/www/content/components/pin-input.mdx index e42450eb..d88a47de 100644 --- a/apps/www/content/components/pin-input.mdx +++ b/apps/www/content/components/pin-input.mdx @@ -21,7 +21,7 @@ description: Accessible one-time password component with copy paste functionalit Copy and paste the following code into your project. - + Update the import paths to match your project setup. diff --git a/apps/www/content/components/popover.mdx b/apps/www/content/components/popover.mdx index 7efc451a..8b412e7a 100644 --- a/apps/www/content/components/popover.mdx +++ b/apps/www/content/components/popover.mdx @@ -21,7 +21,7 @@ description: Displays rich content in a portal, triggered by a button. Copy and paste the following code into your project. - + Update the import paths to match your project setup. diff --git a/apps/www/content/components/progress.mdx b/apps/www/content/components/progress.mdx index f51cb22a..0e6de555 100644 --- a/apps/www/content/components/progress.mdx +++ b/apps/www/content/components/progress.mdx @@ -21,7 +21,7 @@ description: Displays an indicator showing the completion progress of a task, ty Copy and paste the following code into your project. - + Update the import paths to match your project setup. diff --git a/apps/www/content/components/radio-group.mdx b/apps/www/content/components/radio-group.mdx index 4c43d574..c77e0031 100644 --- a/apps/www/content/components/radio-group.mdx +++ b/apps/www/content/components/radio-group.mdx @@ -21,7 +21,7 @@ description: A set of checkable buttons—known as radio buttons—where no more Copy and paste the following code into your project. - + Update the import paths to match your project setup. diff --git a/apps/www/content/components/rating-group.mdx b/apps/www/content/components/rating-group.mdx index 697a8fa8..fab0d003 100644 --- a/apps/www/content/components/rating-group.mdx +++ b/apps/www/content/components/rating-group.mdx @@ -22,7 +22,7 @@ visible: false Copy and paste the following code into your project. - + Update the import paths to match your project setup. diff --git a/apps/www/content/components/select.mdx b/apps/www/content/components/select.mdx index 412f490a..9eb5cc7e 100644 --- a/apps/www/content/components/select.mdx +++ b/apps/www/content/components/select.mdx @@ -21,7 +21,7 @@ description: Displays a list of options for the user to pick from—triggered by Copy and paste the following code into your project. - + Update the import paths to match your project setup. diff --git a/apps/www/content/components/sheet.mdx b/apps/www/content/components/sheet.mdx index 36d9aace..77dcdea1 100644 --- a/apps/www/content/components/sheet.mdx +++ b/apps/www/content/components/sheet.mdx @@ -21,7 +21,7 @@ description: Extends the Dialog component to display content that complements th Copy and paste the following code into your project. - + Update the import paths to match your project setup. diff --git a/apps/www/content/components/slider.mdx b/apps/www/content/components/slider.mdx index 7268f2c0..b352f9a5 100644 --- a/apps/www/content/components/slider.mdx +++ b/apps/www/content/components/slider.mdx @@ -21,7 +21,7 @@ description: An input where the user selects a value from within a given range. Copy and paste the following code into your project. - + Update the import paths to match your project setup. diff --git a/apps/www/content/components/switch.mdx b/apps/www/content/components/switch.mdx index c3af4d97..cbece1c9 100644 --- a/apps/www/content/components/switch.mdx +++ b/apps/www/content/components/switch.mdx @@ -21,7 +21,7 @@ description: A control that allows the user to toggle between checked and not ch Copy and paste the following code into your project. - + Update the import paths to match your project setup. diff --git a/apps/www/content/components/tabs.mdx b/apps/www/content/components/tabs.mdx index 661b3811..7260f3cf 100644 --- a/apps/www/content/components/tabs.mdx +++ b/apps/www/content/components/tabs.mdx @@ -21,7 +21,7 @@ description: A set of layered sections of content—known as tab panels—that a Copy and paste the following code into your project. - + Update the import paths to match your project setup. diff --git a/apps/www/content/components/tags-input.mdx b/apps/www/content/components/tags-input.mdx index 9c51a6af..d13422ce 100644 --- a/apps/www/content/components/tags-input.mdx +++ b/apps/www/content/components/tags-input.mdx @@ -21,7 +21,7 @@ description: A component that allows users to add tags to an input field. Copy and paste the following code into your project. - + Update the import paths to match your project setup. diff --git a/apps/www/content/components/textarea.mdx b/apps/www/content/components/textarea.mdx index 95de7c78..477789fc 100644 --- a/apps/www/content/components/textarea.mdx +++ b/apps/www/content/components/textarea.mdx @@ -21,7 +21,7 @@ description: Displays a form textarea or a component that looks like a textarea. Copy and paste the following code into your project. - + Update the import paths to match your project setup. diff --git a/apps/www/content/components/toast.mdx b/apps/www/content/components/toast.mdx index 1d368cae..692f2713 100644 --- a/apps/www/content/components/toast.mdx +++ b/apps/www/content/components/toast.mdx @@ -22,7 +22,7 @@ visible: false Copy and paste the following code into your project. - + Update the import paths to match your project setup. diff --git a/apps/www/content/components/toggle-group.mdx b/apps/www/content/components/toggle-group.mdx index a7e09470..fefe6899 100644 --- a/apps/www/content/components/toggle-group.mdx +++ b/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. Copy and paste the following code into your project. - + Update the import paths to match your project setup. diff --git a/apps/www/content/components/toggle.mdx b/apps/www/content/components/toggle.mdx index e3dea6b2..e8106ffe 100644 --- a/apps/www/content/components/toggle.mdx +++ b/apps/www/content/components/toggle.mdx @@ -24,7 +24,7 @@ links: Copy and paste the following code into your project. - + Update the import paths to match your project setup. diff --git a/apps/www/content/components/tooltip.mdx b/apps/www/content/components/tooltip.mdx index 6b7ae6c1..bd935e3c 100644 --- a/apps/www/content/components/tooltip.mdx +++ b/apps/www/content/components/tooltip.mdx @@ -21,7 +21,7 @@ description: A popup that displays information related to an element when the el Copy and paste the following code into your project. - + Update the import paths to match your project setup. diff --git a/apps/www/content/components/tree-view.mdx b/apps/www/content/components/tree-view.mdx index 00411285..32a84938 100644 --- a/apps/www/content/components/tree-view.mdx +++ b/apps/www/content/components/tree-view.mdx @@ -22,7 +22,7 @@ visible: false Copy and paste the following code into your project. - + Update the import paths to match your project setup. diff --git a/apps/www/src/components/content/accordion.tsx b/apps/www/src/components/content/accordion.tsx deleted file mode 100644 index d3ce9de6..00000000 --- a/apps/www/src/components/content/accordion.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import { - Accordion, - AccordionItem, - AccordionItemContent, - AccordionItemTrigger, -} from "@ui/react/accordion" - -interface AccordionProps extends React.ComponentProps { - [key: `trigger-${number}`]: string - [key: `content-${number}`]: string -} - -export default function (props: AccordionProps) { - const items = Object.entries(props).filter(([key]) => - key.startsWith("trigger") - ) - - const rest = Object.fromEntries( - Object.entries(props).filter( - ([key]) => !key.startsWith("trigger") && !key.startsWith("content") - ) - ) - - return ( - - {items.map(([key], index) => { - return ( - - - {props[`trigger-${index + 1}`]} - - - {props[`content-${index + 1}`]} - - - ) - })} - - ) -} diff --git a/apps/www/src/components/content/component-preview/component-code.astro b/apps/www/src/components/content/component-preview/component-code.astro deleted file mode 100644 index 89cc0a97..00000000 --- a/apps/www/src/components/content/component-preview/component-code.astro +++ /dev/null @@ -1,27 +0,0 @@ ---- -import Code from "@/components/code.astro" -import { getComponentPageParams } from "@/lib/docs" -import { getExampleSource } from "@/lib/source" - -export interface Props { - name: string -} -const { name } = Astro.props - -// Get type-safe framework parameter -const { framework } = getComponentPageParams(Astro.params) - -const { source, lang } = (await getExampleSource(framework, name)) || {} ---- - -{ - source ? ( - - ) : ( - - ) -} diff --git a/apps/www/src/components/content/component-preview/index.astro b/apps/www/src/components/content/component-preview/index.astro index 2d96aead..dff1d392 100644 --- a/apps/www/src/components/content/component-preview/index.astro +++ b/apps/www/src/components/content/component-preview/index.astro @@ -1,6 +1,6 @@ --- +import ExampleSource from "@/components/content/example-source.astro" import { cn } from "@/lib/utils" -import ComponentCode from "./component-code.astro" import Preview from "./preview" import Tabs from "./tabs" @@ -9,11 +9,6 @@ export interface Props { className?: string } const { name, className } = Astro.props - -// // Get type-safe framework parameter -// const { framework } = getComponentPageParams(Astro.params) - -// const { source, lang } = (await getExampleSource(framework, name)) || {} ---
- - +
diff --git a/apps/www/src/components/content/component-preview/preview.tsx b/apps/www/src/components/content/component-preview/preview.tsx index 8e104af9..e50b959a 100644 --- a/apps/www/src/components/content/component-preview/preview.tsx +++ b/apps/www/src/components/content/component-preview/preview.tsx @@ -11,7 +11,7 @@ interface Props { export default function PreviewReact({ name }: Props) { const [key, setKey] = useState(0) - const Component = Examples[name] ?? (() => ) + const Component = Examples[name] ?? (() => ) useEffect(() => { setKey((prev) => prev + 1) @@ -45,12 +45,12 @@ export default function PreviewReact({ name }: Props) { ) } -function NotFound({ component }: { component: string }) { +function NotFound({ name }: { name: string }) { return (

Component - {component} + {name} not found in registry.

diff --git a/apps/www/src/components/content/component-source.astro b/apps/www/src/components/content/component-source.astro index bae2eca9..88fafe5e 100644 --- a/apps/www/src/components/content/component-source.astro +++ b/apps/www/src/components/content/component-source.astro @@ -1,39 +1,43 @@ --- import Code from "@/components/code.astro" import CodeCollapsible from "@/components/content/code-collapsible" -import { getComponentPageParams } from "@/lib/docs" +import { frameworks } from "@/constants/frameworks" import { getComponentSource } from "@/lib/source" export interface Props { - component: string + name: string } -const { component } = Astro.props +const { name } = Astro.props -// Get current framework from type-safe params -const { framework: currentFramework } = getComponentPageParams(Astro.params) - -// Only get source for current framework -const frameworkSources = await getComponentSource(currentFramework, component) +const frameworkSources = await Promise.all( + frameworks.map((framework) => getComponentSource(framework, name)) +) --- -
- {frameworkSources?.length ? ( - frameworkSources?.map((src) => ( - - {typeof frameworkSources?.length === "number" && - frameworkSources?.length > 1 ? ( -

{src.filename}

- ) : null} - - - - - )) - ) : ( - - )} -
+{ + frameworks?.map((framework, index) => { + const sources = frameworkSources[index]; + return ( + + ); + }) +} diff --git a/apps/www/src/components/content/example-source.astro b/apps/www/src/components/content/example-source.astro new file mode 100644 index 00000000..9591dea8 --- /dev/null +++ b/apps/www/src/components/content/example-source.astro @@ -0,0 +1,32 @@ +--- +import Code from "@/components/code.astro" +import { frameworks } from "@/constants/frameworks" +import { getExampleSource } from "@/lib/source" + +export interface Props { + name: string +} +const { name } = Astro.props + +const frameworkSources = await Promise.all( + frameworks.map(async (framework) => { + const { content, lang } = (await getExampleSource(framework, name)) || {} + return { framework, content, lang } + }) +) +--- + +{ + frameworks.map((framework, index) => { + const source = frameworkSources[index]; + return ( + + ); + }) +} diff --git a/apps/www/src/components/framework-select/select.tsx b/apps/www/src/components/framework-select.tsx similarity index 75% rename from apps/www/src/components/framework-select/select.tsx rename to apps/www/src/components/framework-select.tsx index 4a50d77e..23cb5d22 100644 --- a/apps/www/src/components/framework-select/select.tsx +++ b/apps/www/src/components/framework-select.tsx @@ -1,5 +1,6 @@ import type { Framework } from "@/constants/frameworks" import { frameworks } from "@/constants/frameworks" +import { frameworkAtom } from "@/store/atoms/framework" import { Select, SelectContent, @@ -10,13 +11,9 @@ import { SelectValueText, createListCollection, } from "@ui/react/select" -import { useState } from "react" +import { useAtom } from "@xstate/store/react" import { pascalCase } from "scule" -interface Props { - framework: Framework -} - const frameworksCollection = createListCollection({ items: frameworks.map((framework) => ({ value: framework, @@ -24,18 +21,16 @@ const frameworksCollection = createListCollection({ })), }) -export function FrameworkSelect({ framework }: Props) { - const [currentFramework, setCurrentFramework] = useState(framework) +export function FrameworkSelect() { + const framework = useAtom(frameworkAtom) return (