├── app
    ├── globals.css
    ├── favicon.ico
    ├── fonts
    │   ├── GeistVF.woff
    │   └── GeistMonoVF.woff
    ├── page.tsx
    ├── figma-imports
    │   └── page.tsx
    ├── layout.tsx
    └── [...page]
    │   └── page.tsx
├── .env
├── postcss.config.mjs
├── next.config.mjs
├── tailwind.config.ts
├── components
    ├── Counter
    │   ├── styles.module.css
    │   └── Counter.tsx
    └── builder.tsx
├── .gitignore
├── src
    └── mappings
    │   ├── HelpPanel.mapper.tsx
    │   ├── SideNavigation.mapper.tsx
    │   ├── Breadcrumb.mapper.tsx
    │   ├── Pagination.mapper.tsx
    │   ├── Link.mapper.tsx
    │   ├── generic-node.mapper.tsx
    │   ├── TextFilter.mapper.tsx
    │   ├── ElementsCheckboxOnlyCheckbox.mapper.tsx
    │   ├── Header.mapper.tsx
    │   ├── Input.mapper.tsx
    │   ├── Button.mapper.tsx
    │   ├── BarChart.mapper.tsx
    │   ├── TopNavigation.mapper.tsx
    │   ├── Icon.mapper.tsx
    │   ├── TableBase.mapper.tsx
    │   └── AreaChart.mapper.tsx
├── tsconfig.json
├── package.json
└── README.md


/app/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 | 


--------------------------------------------------------------------------------
/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BuilderIO/cloudscape-demo/main/app/favicon.ico


--------------------------------------------------------------------------------
/app/fonts/GeistVF.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BuilderIO/cloudscape-demo/main/app/fonts/GeistVF.woff


--------------------------------------------------------------------------------
/app/fonts/GeistMonoVF.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BuilderIO/cloudscape-demo/main/app/fonts/GeistMonoVF.woff


--------------------------------------------------------------------------------
/.env:
--------------------------------------------------------------------------------
1 | # https://www.builder.io/c/docs/using-your-api-key
2 | NEXT_PUBLIC_BUILDER_API_KEY=f546e7034188465bb355c178889c82be
3 | 


--------------------------------------------------------------------------------
/postcss.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('postcss-load-config').Config} */
2 | const config = {
3 |   plugins: {
4 |     tailwindcss: {},
5 |   },
6 | };
7 | 
8 | export default config;
9 | 


--------------------------------------------------------------------------------
/next.config.mjs:
--------------------------------------------------------------------------------
1 | import BuilderDevTools from "@builder.io/dev-tools/next";
2 | 
3 | /** @type {import('next').NextConfig} */
4 | const nextConfig = BuilderDevTools()({});
5 | 
6 | export default nextConfig;
7 | 


--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
 1 | import Image from "next/image";
 2 | 
 3 | export default function Home() {
 4 |   return (
 5 |     <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
 6 |       hello world :)
 7 |     </div>
 8 |   );
 9 | }
10 | 


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import type { Config } from "tailwindcss";
 2 | 
 3 | const config: Config = {
 4 |   content: [
 5 |     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
 6 |     "./components/**/*.{js,ts,jsx,tsx,mdx}",
 7 |     "./app/**/*.{js,ts,jsx,tsx,mdx}",
 8 |   ],
 9 |   theme: {
10 |     extend: {
11 |       colors: {
12 |         background: "var(--background)",
13 |         foreground: "var(--foreground)",
14 |       },
15 |     },
16 |   },
17 |   plugins: [],
18 | };
19 | export default config;
20 | 


--------------------------------------------------------------------------------
/components/Counter/styles.module.css:
--------------------------------------------------------------------------------
 1 | .counter {
 2 |   margin: 32px auto;
 3 |   display: flex;
 4 |   width: 100%;
 5 |   max-width: 190px;
 6 | }
 7 | 
 8 | .btn {
 9 |   width: 42px;
10 |   font-size: 32px;
11 |   font-weight: bold;
12 |   background-color: #1c6bd1;
13 |   color: white;
14 |   border: none;
15 |   border-radius: 4px;
16 |   cursor: pointer;
17 |   line-height: 1.4;
18 | }
19 | 
20 | .btn:hover {
21 |   opacity: 0.8;
22 | }
23 | 
24 | .count {
25 |   flex: 1;
26 |   font-size: 42px;
27 |   text-align: center;
28 | }
29 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | .yarn/install-state.gz
 8 | 
 9 | # testing
10 | /coverage
11 | 
12 | # next.js
13 | /.next/
14 | /out/
15 | 
16 | # production
17 | /build
18 | 
19 | # misc
20 | .DS_Store
21 | *.pem
22 | 
23 | # debug
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 | 
28 | # local env files
29 | .env*.local
30 | 
31 | # vercel
32 | .vercel
33 | 
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 | 


--------------------------------------------------------------------------------
/src/mappings/HelpPanel.mapper.tsx:
--------------------------------------------------------------------------------
 1 | import { figmaMapping, type BaseFigmaProps } from "@builder.io/dev-tools/figma";
 2 | import { HelpPanel } from "@/builder-components";
 3 | 
 4 | interface FigmaHelpPanelProps extends BaseFigmaProps {
 5 |   State?: "Closed" | "Open" | "Loading";
 6 | }
 7 | 
 8 | figmaMapping({
 9 |   componentKey: "be7139eb80e5df7d3d81daee698541f17963ead1",
10 |   mapper(figma: FigmaHelpPanelProps) {
11 |     return (
12 |       <HelpPanel loading={figma.State === "Loading"} loadingText="Loading...">
13 |         {figma.$children}
14 |       </HelpPanel>
15 |     );
16 |   },
17 | });
18 | 


--------------------------------------------------------------------------------
/app/figma-imports/page.tsx:
--------------------------------------------------------------------------------
 1 | import { builder } from "@builder.io/sdk";
 2 | import { RenderBuilderContent } from "../../components/builder";
 3 | 
 4 | // Builder Public API Key set in .env file
 5 | builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY!);
 6 | 
 7 | interface PageProps {
 8 |   params: {
 9 |     page: string[];
10 |   };
11 | }
12 | 
13 | export default async function Page(props: PageProps) {
14 |   const builderModelName = "figma-imports";
15 | 
16 |   return (
17 |     <>
18 |       {/* Render the Builder page */}
19 |       <RenderBuilderContent model={builderModelName} />
20 |     </>
21 |   );
22 | }
23 | 


--------------------------------------------------------------------------------
/src/mappings/SideNavigation.mapper.tsx:
--------------------------------------------------------------------------------
 1 | import { figmaMapping, type BaseFigmaProps } from "@builder.io/dev-tools/figma";
 2 | import { SideNavigation } from "@/builder-components";
 3 | 
 4 | interface FigmaSideNavigationProps extends BaseFigmaProps {
 5 |   State?: "Closed" | "Open";
 6 |   Example?:
 7 |     | "Simple"
 8 |     | "Sections"
 9 |     | "Expandable link groups"
10 |     | "Link groups"
11 |     | "Small logo"
12 |     | "Large logo";
13 | }
14 | 
15 | figmaMapping({
16 |   componentKey: "753b0ad5cc2026910bbdce2c26625150fcbb4506",
17 |   mapper(figma: FigmaSideNavigationProps) {
18 |     return <SideNavigation itemsControl={figma.$children} />;
19 |   },
20 | });
21 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "lib": ["dom", "dom.iterable", "esnext"],
 4 |     "allowJs": true,
 5 |     "skipLibCheck": true,
 6 |     "strict": true,
 7 |     "noEmit": true,
 8 |     "esModuleInterop": true,
 9 |     "module": "esnext",
10 |     "moduleResolution": "bundler",
11 |     "resolveJsonModule": true,
12 |     "isolatedModules": true,
13 |     "jsx": "preserve",
14 |     "incremental": true,
15 |     "plugins": [
16 |       {
17 |         "name": "next"
18 |       }
19 |     ],
20 |     "paths": {
21 |       "@/*": ["./*"]
22 |     }
23 |   },
24 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
25 |   "exclude": ["node_modules"]
26 | }
27 | 


--------------------------------------------------------------------------------
/src/mappings/Breadcrumb.mapper.tsx:
--------------------------------------------------------------------------------
 1 | import { figmaMapping, type BaseFigmaProps } from "@builder.io/dev-tools/figma";
 2 | import { BreadcrumbGroup } from "@/builder-components";
 3 | 
 4 | interface FigmaBreadcrumbProps extends BaseFigmaProps {
 5 |   Count?: "2x" | "3x" | "4x" | "5x";
 6 | }
 7 | 
 8 | figmaMapping({
 9 |   componentKey: "49ecd03e916e48c6eb3fe3573940971640256af0",
10 |   mapper(figma: FigmaBreadcrumbProps) {
11 |     return (
12 |       <BreadcrumbGroup
13 |         items={
14 |           figma.$children?.map((child) => ({
15 |             text: child?.$textContent ?? "",
16 |             href: "#",
17 |           })) ?? []
18 |         }
19 |         ariaLabel="Breadcrumbs"
20 |       />
21 |     );
22 |   },
23 | });
24 | 


--------------------------------------------------------------------------------
/src/mappings/Pagination.mapper.tsx:
--------------------------------------------------------------------------------
 1 | import { figmaMapping, type BaseFigmaProps } from "@builder.io/dev-tools/figma";
 2 | import { Pagination } from "@/builder-components";
 3 | 
 4 | interface FigmaPaginationProps extends BaseFigmaProps {
 5 |   Type?: "Open end" | "Simple";
 6 |   State?: "Disabled" | "Enabled";
 7 |   "Visual context"?: "Light" | "Dark";
 8 | }
 9 | 
10 | figmaMapping({
11 |   componentKey: "f2f490468aa94d7b57808494f545a63437905860",
12 |   mapper(figma: FigmaPaginationProps) {
13 |     return (
14 |       <Pagination
15 |         currentPageIndex={1}
16 |         pagesCount={5}
17 |         openEnd={figma.Type === "Open end"}
18 |         disabled={figma.State === "Disabled"}
19 |       />
20 |     );
21 |   },
22 | });
23 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "cloudscape-demo",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@builder.io/dev-tools": "^1.1.14",
13 |     "@builder.io/react": "^5.0.4",
14 |     "@builder.io/sdk": "^3.0.2",
15 |     "@cloudscape-design/components": "^3.0.779",
16 |     "next": "14.2.15",
17 |     "react": "^18",
18 |     "react-dom": "^18"
19 |   },
20 |   "devDependencies": {
21 |     "@types/node": "^20",
22 |     "@types/react": "^18",
23 |     "@types/react-dom": "^18",
24 |     "postcss": "^8",
25 |     "tailwindcss": "^3.4.1",
26 |     "typescript": "^5"
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/src/mappings/Link.mapper.tsx:
--------------------------------------------------------------------------------
 1 | import { figmaMapping, type BaseFigmaProps } from "@builder.io/dev-tools/figma";
 2 | import { Link } from "@/builder-components";
 3 | 
 4 | interface FigmaLinkProps extends BaseFigmaProps {
 5 |   Type?: "Primary" | "Secondary" | "Info" | "Button";
 6 |   State?: "Default" | "Hover";
 7 | }
 8 | 
 9 | figmaMapping({
10 |   componentKey: "e6e810d9853676d622eef58fc84439a04c2a65f4",
11 |   mapper(figma: FigmaLinkProps) {
12 |     return (
13 |       <Link
14 |         variant={
15 |           figma.Type?.toLowerCase() as
16 |             | "primary"
17 |             | "secondary"
18 |             | "info"
19 |             | undefined
20 |         }
21 |         href="#"
22 |       >
23 |         {figma.$findOneByName("✏️ Link text")}
24 |       </Link>
25 |     );
26 |   },
27 | });
28 | 


--------------------------------------------------------------------------------
/src/mappings/generic-node.mapper.tsx:
--------------------------------------------------------------------------------
 1 | import { AppLayout } from "@/builder-components";
 2 | import { figmaMapping } from "@builder.io/dev-tools/figma";
 3 | 
 4 | const explicitFalse = (value: any) => false;
 5 | 
 6 | figmaMapping({
 7 |   genericMapper(figma) {
 8 |     // App layout is a detached component so we need to map it here per it
 9 |     // being no longer a Figma component and just a normal layer
10 |     if (figma.$name.toLowerCase() === "app layout") {
11 |       return (
12 |         <div>
13 |           {figma.$findOneByName("Top navigation")}
14 |           <AppLayout
15 |             navigation={figma.$findOneByName("Side navigation")}
16 |             navigationOpen={explicitFalse(false)}
17 |           >
18 |             {figma.$findOneByName("App")}
19 |           </AppLayout>
20 |         </div>
21 |       );
22 |     }
23 |     return undefined;
24 |   },
25 | });
26 | 


--------------------------------------------------------------------------------
/components/Counter/Counter.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | import React, { useState } from "react";
 3 | import styles from "./styles.module.css";
 4 | 
 5 | interface CounterProps {
 6 |   initialCount?: number;
 7 | }
 8 | 
 9 | function Counter({ initialCount = 99 }: CounterProps) {
10 |   const [count, setCount] = useState(initialCount);
11 | 
12 |   const increment = () => {
13 |     setCount((prevCount) => prevCount + 1);
14 |   };
15 | 
16 |   const decrement = () => {
17 |     setCount((prevCount) => prevCount - 1);
18 |   };
19 | 
20 |   return (
21 |     <div className={styles.counter}>
22 |       <button className={styles.btn} onClick={decrement}>
23 |         -
24 |       </button>
25 |       <span className={styles.count}>{count}</span>
26 |       <button className={styles.btn} onClick={increment}>
27 |         +
28 |       </button>
29 |     </div>
30 |   );
31 | }
32 | 
33 | export default Counter;
34 | 


--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import type { Metadata } from "next";
 2 | import localFont from "next/font/local";
 3 | import "./globals.css";
 4 | 
 5 | const geistSans = localFont({
 6 |   src: "./fonts/GeistVF.woff",
 7 |   variable: "--font-geist-sans",
 8 |   weight: "100 900",
 9 | });
10 | const geistMono = localFont({
11 |   src: "./fonts/GeistMonoVF.woff",
12 |   variable: "--font-geist-mono",
13 |   weight: "100 900",
14 | });
15 | 
16 | export const metadata: Metadata = {
17 |   title: "Create Next App",
18 |   description: "Generated by create next app",
19 | };
20 | 
21 | export default function RootLayout({
22 |   children,
23 | }: Readonly<{
24 |   children: React.ReactNode;
25 | }>) {
26 |   return (
27 |     <html lang="en">
28 |       <body
29 |         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
30 |       >
31 |         {children}
32 |       </body>
33 |     </html>
34 |   );
35 | }
36 | 


--------------------------------------------------------------------------------
/src/mappings/TextFilter.mapper.tsx:
--------------------------------------------------------------------------------
 1 | import { figmaMapping, type BaseFigmaProps } from "@builder.io/dev-tools/figma";
 2 | import { TextFilter } from "@/builder-components";
 3 | 
 4 | interface FigmaTextFilterProps extends BaseFigmaProps {
 5 |   Type?: "Empty" | "With matches";
 6 |   State?: "Default" | "Active" | "Disabled";
 7 |   Content?: "Placeholder" | "Value";
 8 |   "Visual context"?: "Light" | "Dark";
 9 | }
10 | 
11 | figmaMapping({
12 |   componentKey: "4067802c99c825b20198338b38a2f743e8094c71",
13 |   mapper(figma: FigmaTextFilterProps) {
14 |     return (
15 |       <TextFilter
16 |         filteringText={
17 |           figma.Content === "Value"
18 |             ? figma.$children[0]?.$textContent ?? ""
19 |             : ""
20 |         }
21 |         filteringPlaceholder={
22 |           figma.Content === "Placeholder"
23 |             ? figma.$children[0]?.$textContent ?? ""
24 |             : undefined
25 |         }
26 |         disabled={figma.State === "Disabled"}
27 |       />
28 |     );
29 |   },
30 | });
31 | 


--------------------------------------------------------------------------------
/app/[...page]/page.tsx:
--------------------------------------------------------------------------------
 1 | import { builder } from "@builder.io/sdk";
 2 | import { RenderBuilderContent } from "../../components/builder";
 3 | 
 4 | // Builder Public API Key set in .env file
 5 | builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY!);
 6 | 
 7 | interface PageProps {
 8 |   params: {
 9 |     page: string[];
10 |   };
11 | }
12 | 
13 | export default async function Page(props: PageProps) {
14 |   const builderModelName = "page";
15 | 
16 |   const content = await builder
17 |     // Get the page content from Builder with the specified options
18 |     .get(builderModelName, {
19 |       userAttributes: {
20 |         // Use the page path specified in the URL to fetch the content
21 |         urlPath: "/" + (props?.params?.page?.join("/") || ""),
22 |       },
23 |     })
24 |     // Convert the result to a promise
25 |     .toPromise();
26 | 
27 |   return (
28 |     <>
29 |       {/* Render the Builder page */}
30 |       <RenderBuilderContent content={content} model={builderModelName} />
31 |     </>
32 |   );
33 | }
34 | 


--------------------------------------------------------------------------------
/src/mappings/ElementsCheckboxOnlyCheckbox.mapper.tsx:
--------------------------------------------------------------------------------
 1 | import { figmaMapping, type BaseFigmaProps } from "@builder.io/dev-tools/figma";
 2 | import { Checkbox } from "@/builder-components";
 3 | 
 4 | interface FigmaElementsCheckboxOnlyCheckboxProps extends BaseFigmaProps {
 5 |   State?:
 6 |     | "Default"
 7 |     | "Selected"
 8 |     | "Indeterminate"
 9 |     | "Indeterminate Disabled"
10 |     | "Disabled"
11 |     | "Selected disabled";
12 |   "Visual context"?: "Light" | "Dark";
13 | }
14 | 
15 | figmaMapping({
16 |   componentKey: "3df20007f5244f2d1aff2b95444f7c3dfaf6df58",
17 |   mapper(figma: FigmaElementsCheckboxOnlyCheckboxProps) {
18 |     return (
19 |       <Checkbox
20 |         checked={
21 |           figma.State === "Selected" || figma.State === "Selected disabled"
22 |         }
23 |         indeterminate={
24 |           figma.State === "Indeterminate" ||
25 |           figma.State === "Indeterminate Disabled"
26 |         }
27 |         disabled={
28 |           figma.State === "Disabled" ||
29 |           figma.State === "Selected disabled" ||
30 |           figma.State === "Indeterminate Disabled"
31 |         }
32 |       />
33 |     );
34 |   },
35 | });
36 | 


--------------------------------------------------------------------------------
/components/builder.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | import { ComponentProps } from "react";
 3 | import { BuilderComponent, useIsPreviewing } from "@builder.io/react";
 4 | import { BuilderContent, builder } from "@builder.io/sdk";
 5 | import DefaultErrorPage from "next/error";
 6 | import "../builder-registry";
 7 | 
 8 | type BuilderPageProps = ComponentProps<typeof BuilderComponent>;
 9 | 
10 | // Builder Public API Key set in .env file
11 | builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY!);
12 | 
13 | export function RenderBuilderContent({ content, model }: BuilderPageProps) {
14 |   // Call the useIsPreviewing hook to determine if
15 |   // the page is being previewed in Builder
16 |   const isPreviewing = useIsPreviewing();
17 |   // If "content" has a value or the page is being previewed in Builder,
18 |   // render the BuilderComponent with the specified content and model props.
19 |   if (content || isPreviewing) {
20 |     return <BuilderComponent content={content} model={model} />;
21 |   }
22 |   // If the "content" is falsy and the page is
23 |   // not being previewed in Builder, render the
24 |   // DefaultErrorPage with a 404.
25 |   return <DefaultErrorPage statusCode={404} />;
26 | }
27 | 


--------------------------------------------------------------------------------
/src/mappings/Header.mapper.tsx:
--------------------------------------------------------------------------------
 1 | import { figmaMapping, type BaseFigmaProps } from "@builder.io/dev-tools/figma";
 2 | import { Header } from "@/builder-components";
 3 | 
 4 | interface FigmaHeaderProps extends BaseFigmaProps {
 5 |   Description?: boolean;
 6 |   "Action stripe"?: boolean;
 7 |   Type?: "Container" | "Page" | "Page- dark header" | "Section";
 8 | }
 9 | 
10 | figmaMapping({
11 |   componentKey: "91a25ad05e5aca3d4bac93c7c0a6b9baada82170",
12 |   mapper(figma: FigmaHeaderProps) {
13 |     return (
14 |       <Header
15 |         variant={
16 |           figma.Type === "Page" || figma.Type === "Page- dark header"
17 |             ? "h1"
18 |             : "h2"
19 |         }
20 |         description={
21 |           figma.Description
22 |             ? figma.$findOneByName("✏️ Description")?.$textContent
23 |             : undefined
24 |         }
25 |         actions={
26 |           figma["Action stripe"]
27 |             ? figma.$findOneByName("Action stripe")?.$children
28 |             : undefined
29 |         }
30 |         counter={figma.$findOneByName(".Counter (base)")?.$textContent}
31 |         info={figma.$findOneByName("Info")?.$children}
32 |       >
33 |         {figma.$findOneByName("✏️ Title")?.$textContent}
34 |       </Header>
35 |     );
36 |   },
37 | });
38 | 


--------------------------------------------------------------------------------
/src/mappings/Input.mapper.tsx:
--------------------------------------------------------------------------------
 1 | import { figmaMapping, type BaseFigmaProps } from "@builder.io/dev-tools/figma";
 2 | import { Input } from "@/builder-components";
 3 | 
 4 | interface FigmaInputProps extends BaseFigmaProps {
 5 |   Type?: "Basic" | "Search" | "Time" | "Numeric";
 6 |   Content?: "None" | "Value" | "Placeholder";
 7 |   State?: "Default" | "Active" | "Disabled" | "Read-only";
 8 |   Invalid?: "Off" | "On";
 9 |   "Visual context"?: "Light" | "Dark";
10 | }
11 | 
12 | figmaMapping({
13 |   componentKey: "9f56d1c87573504861f4b69a1a58eb37217270e8",
14 |   mapper(figma: FigmaInputProps) {
15 |     return (
16 |       <Input
17 |         type={
18 |           figma.Type === "Search"
19 |             ? "search"
20 |             : figma.Type === "Time"
21 |             ? "text"
22 |             : figma.Type === "Numeric"
23 |             ? "number"
24 |             : "text"
25 |         }
26 |         value={
27 |           figma.Content === "Value"
28 |             ? figma.$children[0]?.$textContent ?? ""
29 |             : ""
30 |         }
31 |         placeholder={
32 |           figma.Content === "Placeholder"
33 |             ? figma.$children[0]?.$textContent
34 |             : undefined
35 |         }
36 |         disabled={figma.State === "Disabled"}
37 |         readOnly={figma.State === "Read-only"}
38 |         invalid={figma.Invalid === "On"}
39 |       />
40 |     );
41 |   },
42 | });
43 | 


--------------------------------------------------------------------------------
/src/mappings/Button.mapper.tsx:
--------------------------------------------------------------------------------
 1 | import { figmaMapping, type BaseFigmaProps } from "@builder.io/dev-tools/figma";
 2 | import { Button } from "@/builder-components";
 3 | 
 4 | interface FigmaButtonProps extends BaseFigmaProps {
 5 |   Type?:
 6 |     | "Primary"
 7 |     | "Secondary"
 8 |     | "Secondary only icon"
 9 |     | "Link button"
10 |     | "Icon"
11 |     | "Inline icon"
12 |     | "Navigation"
13 |     | "Alert"
14 |     | "Help panel";
15 |   State?: "Default" | "Hover" | "Active" | "Disabled" | "Loading";
16 |   "Visual context"?: "Light" | "Dark";
17 | }
18 | 
19 | figmaMapping({
20 |   componentKey: "e4a33cb6fca296d8cc5bb870010861552fd2d022",
21 |   mapper(figma: FigmaButtonProps) {
22 |     return (
23 |       <Button
24 |         variant={
25 |           figma.Type === "Primary"
26 |             ? "primary"
27 |             : figma.Type === "Secondary"
28 |             ? "normal"
29 |             : figma.Type === "Secondary only icon"
30 |             ? "icon"
31 |             : figma.Type === "Link button"
32 |             ? "link"
33 |             : figma.Type === "Icon"
34 |             ? "icon"
35 |             : figma.Type === "Inline icon"
36 |             ? "inline-icon"
37 |             : "normal"
38 |         }
39 |         disabled={figma.State === "Disabled"}
40 |         loading={figma.State === "Loading"}
41 |       >
42 |         {figma.$findOneByName("✏️ Button text")?.$textContent}
43 |       </Button>
44 |     );
45 |   },
46 | });
47 | 


--------------------------------------------------------------------------------
/src/mappings/BarChart.mapper.tsx:
--------------------------------------------------------------------------------
 1 | import { figmaMapping, type BaseFigmaProps } from "@builder.io/dev-tools/figma";
 2 | import { BarChart } from "@/builder-components";
 3 | 
 4 | interface FigmaBarChartProps extends BaseFigmaProps {
 5 |   "Show Average line"?: boolean;
 6 |   "Show legends"?: boolean;
 7 |   "Show filter"?: boolean;
 8 |   Type?: "Stacked horizontally" | "Single" | "Grouped" | "Stacked vertically";
 9 |   State?: "Default" | "Hover" | "Active";
10 | }
11 | 
12 | figmaMapping({
13 |   componentKey: "6723d2c468d81fae60929db2c628c47acc9f1832",
14 |   mapper(figma: FigmaBarChartProps) {
15 |     return (
16 |       <BarChart
17 |         series={[
18 |           {
19 |             title: "Site 1",
20 |             type: "bar",
21 |             data: [
22 |               { x: 1601103600000, y: 34503 },
23 |               { x: 1601110800000, y: 25832 },
24 |               { x: 1601118000000, y: 4012 },
25 |               { x: 1601125200000, y: -5602 },
26 |               { x: 1601132400000, y: 17839 },
27 |             ],
28 |           },
29 |           {
30 |             title: "Average revenue",
31 |             type: "threshold",
32 |             y: 19104,
33 |           },
34 |         ]}
35 |         stackedBars={figma.Type?.includes("Stacked") || false}
36 |         horizontalBars={figma.Type === "Stacked horizontally" || false}
37 |         hideLegend={!figma["Show legends"]}
38 |         hideFilter={!figma["Show filter"]}
39 |         statusType={figma.State === "Default" ? "finished" : "loading"}
40 |       />
41 |     );
42 |   },
43 | });
44 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
 2 | 
 3 | ## Getting Started
 4 | 
 5 | First, run the development server:
 6 | 
 7 | ```bash
 8 | npm run dev
 9 | # or
10 | yarn dev
11 | # or
12 | pnpm dev
13 | # or
14 | bun dev
15 | ```
16 | 
17 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
18 | 
19 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
20 | 
21 | This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
22 | 
23 | ## Learn More
24 | 
25 | To learn more about Next.js, take a look at the following resources:
26 | 
27 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
28 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
29 | 
30 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
31 | 
32 | ## Deploy on Vercel
33 | 
34 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
35 | 
36 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
37 | 


--------------------------------------------------------------------------------
/src/mappings/TopNavigation.mapper.tsx:
--------------------------------------------------------------------------------
 1 | import { figmaMapping, type BaseFigmaProps } from "@builder.io/dev-tools/figma";
 2 | import { TopNavigation } from "@/builder-components";
 3 | 
 4 | interface FigmaTopNavigationProps extends BaseFigmaProps {
 5 |   Notifications?: boolean;
 6 |   "Utility control"?: boolean;
 7 |   Search?: boolean;
 8 |   "Screen size"?: "Large" | "Medium";
 9 |   Dropdown?: "Closed" | "Profile" | "Settings";
10 | }
11 | 
12 | figmaMapping({
13 |   componentKey: "56a35954cce8f53e9b417c0ef7d35fc9899363bc",
14 |   mapper(figma: FigmaTopNavigationProps) {
15 |     return (
16 |       <TopNavigation
17 |         identity={{
18 |           title:
19 |             figma.$findOneByName("Service name")?.$textContent || "Service",
20 |           href: "#",
21 |         }}
22 |         utilities={[
23 |           {
24 |             type: "button",
25 |             text: "Link",
26 |             href: "https://example.com/",
27 |             external: true,
28 |             externalIconAriaLabel: " (opens in a new tab)",
29 |           },
30 |           {
31 |             type: "button",
32 |             iconName: "notification",
33 |             title: "Notifications",
34 |             ariaLabel: "Notifications (unread)",
35 |             badge: true,
36 |             disableUtilityCollapse: false,
37 |           },
38 |           {
39 |             type: "menu-dropdown",
40 |             iconName: "settings",
41 |             ariaLabel: "Settings",
42 |             title: "Settings",
43 |             items: [
44 |               {
45 |                 id: "settings-org",
46 |                 text: "Organizational settings",
47 |               },
48 |               {
49 |                 id: "settings-project",
50 |                 text: "Project settings",
51 |               },
52 |             ],
53 |           },
54 |           {
55 |             type: "menu-dropdown",
56 |             text: "Customer Name",
57 |             description: "email@example.com",
58 |             iconName: "user-profile",
59 |             items: [
60 |               { id: "profile", text: "Profile" },
61 |               { id: "preferences", text: "Preferences" },
62 |               { id: "security", text: "Security" },
63 |               { id: "signout", text: "Sign out" },
64 |             ],
65 |           },
66 |         ]}
67 |       />
68 |     );
69 |   },
70 | });
71 | 


--------------------------------------------------------------------------------
/src/mappings/Icon.mapper.tsx:
--------------------------------------------------------------------------------
  1 | import { figmaMapping, type BaseFigmaProps } from "@builder.io/dev-tools/figma";
  2 | import { Icon } from "@/builder-components";
  3 | 
  4 | interface FigmaIconProps extends BaseFigmaProps {
  5 |   Name?:
  6 |     | "Add"
  7 |     | "Angle double left"
  8 |     | "Angle double right"
  9 |     | "Angle left"
 10 |     | "Angle right"
 11 |     | "Angle up"
 12 |     | "Angle down"
 13 |     | "Arrow left"
 14 |     | "Calendar"
 15 |     | "Caret up"
 16 |     | "Caret down"
 17 |     | "Caret filled left"
 18 |     | "Caret filled right"
 19 |     | "Caret filled up"
 20 |     | "Caret filled down"
 21 |     | "Check"
 22 |     | "Close"
 23 |     | "Copy"
 24 |     | "Download"
 25 |     | "Edit"
 26 |     | "Ellipsis"
 27 |     | "Expand"
 28 |     | "External"
 29 |     | "Menu"
 30 |     | "Microphone"
 31 |     | "Notification"
 32 |     | "Refresh"
 33 |     | "Settings"
 34 |     | "Treview collapse"
 35 |     | "Treview expand"
 36 |     | "Undo"
 37 |     | "Upload"
 38 |     | "View full"
 39 |     | "View horizontal"
 40 |     | "View vertical"
 41 |     | "Zoom in"
 42 |     | "Zoom out"
 43 |     | "In progress"
 44 |     | "Info"
 45 |     | "Negative"
 46 |     | "Pending"
 47 |     | "Positive"
 48 |     | "Stopped"
 49 |     | "Warning"
 50 |     | "Bug"
 51 |     | "Call"
 52 |     | "Contact"
 53 |     | "Envelope"
 54 |     | "File"
 55 |     | "File open"
 56 |     | "Filter"
 57 |     | "Folder"
 58 |     | "Folder open"
 59 |     | "Heart"
 60 |     | "Key"
 61 |     | "Lock"
 62 |     | "Search"
 63 |     | "Share"
 64 |     | "Unlocked"
 65 |     | "User profile"
 66 |     | "audio-full"
 67 |     | "audio-half"
 68 |     | "audio-off"
 69 |     | "delete-marker"
 70 |     | "flag"
 71 |     | "group"
 72 |     | "group-active"
 73 |     | "insert-row"
 74 |     | "keyboard"
 75 |     | "multiscreen"
 76 |     | "remove"
 77 |     | "script"
 78 |     | "security"
 79 |     | "shrink"
 80 |     | "suggestions"
 81 |     | "thumbs-down"
 82 |     | "thumbs-down-filled"
 83 |     | "thumbs-up"
 84 |     | "thumbs-up-filled"
 85 |     | "ticket"
 86 |     | "upload-download"
 87 |     | "user-profile-active"
 88 |     | "video-disabled"
 89 |     | "video-off"
 90 |     | "video-on"
 91 |     | "zoom-to-fit";
 92 |   Size?: "Small" | "Medium" | "Big" | "Large";
 93 |   Type?: "Action" | "Status" | "Symbol" | "Community icon";
 94 |   "Visual context"?: "Light" | "Dark";
 95 | }
 96 | 
 97 | figmaMapping({
 98 |   componentKey: "4410e9b1b673fbbf124c7298372d99edf38eba6f",
 99 |   mapper(figma: FigmaIconProps) {
100 |     return (
101 |       <Icon
102 |         name={figma.Name?.toLowerCase() as any}
103 |         size={figma.Size?.toLowerCase() as "big" | "large" | "medium" | "small"}
104 |         variant={figma["Visual context"] === "Dark" ? "inverted" : "normal"}
105 |       />
106 |     );
107 |   },
108 | });
109 | 


--------------------------------------------------------------------------------
/src/mappings/TableBase.mapper.tsx:
--------------------------------------------------------------------------------
 1 | import { figmaMapping, type BaseFigmaProps } from "@builder.io/dev-tools/figma";
 2 | import { Table } from "@/builder-components";
 3 | 
 4 | interface FigmaTableBaseProps extends BaseFigmaProps {
 5 |   Type?: "Default" | "Empty" | "Loading" | "No match";
 6 |   Footer?: "Off" | "On";
 7 | }
 8 | 
 9 | figmaMapping({
10 |   componentKey: "2e67825e412ec1eec8771a747409a24e5a31cc85",
11 |   mapper(figma: FigmaTableBaseProps) {
12 |     return (
13 |       <Table
14 |         columnDefinitions={[
15 |           {
16 |             id: "variable",
17 |             header: "Variable name",
18 |             sortingField: "name",
19 |             isRowHeader: true,
20 |           },
21 |           {
22 |             id: "value",
23 |             header: "Text value",
24 |             sortingField: "alt",
25 |           },
26 |           {
27 |             id: "type",
28 |             header: "Type",
29 |           },
30 |           {
31 |             id: "description",
32 |             header: "Description",
33 |           },
34 |         ]}
35 |         columnDisplay={[
36 |           { id: "variable", visible: true },
37 |           { id: "value", visible: true },
38 |           { id: "type", visible: true },
39 |           { id: "description", visible: true },
40 |         ]}
41 |         items={[
42 |           {
43 |             name: "Item 1",
44 |             alt: "First",
45 |             description: "This is the first item",
46 |             type: "1A",
47 |             size: "Small",
48 |           },
49 |           {
50 |             name: "Item 2",
51 |             alt: "Second",
52 |             description: "This is the second item",
53 |             type: "1B",
54 |             size: "Large",
55 |           },
56 |           {
57 |             name: "Item 3",
58 |             alt: "Third",
59 |             description: "-",
60 |             type: "1A",
61 |             size: "Large",
62 |           },
63 |           {
64 |             name: "Item 4",
65 |             alt: "Fourth",
66 |             description: "This is the fourth item",
67 |             type: "2A",
68 |             size: "Small",
69 |           },
70 |           {
71 |             name: "Item 5",
72 |             alt: "-",
73 |             description: "This is the fifth item with a longer description",
74 |             type: "2A",
75 |             size: "Large",
76 |           },
77 |           {
78 |             name: "Item 6",
79 |             alt: "Sixth",
80 |             description: "This is the sixth item",
81 |             type: "1A",
82 |             size: "Small",
83 |           },
84 |         ]}
85 |         selectionType="multi"
86 |         variant="container"
87 |         loading={figma.Type === "Loading"}
88 |         empty={
89 |           figma.Type === "Empty" || figma.Type === "No match" ? (
90 |             <div>No data available</div>
91 |           ) : undefined
92 |         }
93 |       />
94 |     );
95 |   },
96 | });
97 | 


--------------------------------------------------------------------------------
/src/mappings/AreaChart.mapper.tsx:
--------------------------------------------------------------------------------
  1 | import { figmaMapping, type BaseFigmaProps } from "@builder.io/dev-tools/figma";
  2 | import { AreaChart } from "@/builder-components";
  3 | 
  4 | interface FigmaAreaChartProps extends BaseFigmaProps {
  5 |   "Show average line"?: boolean;
  6 |   "Show filter"?: boolean;
  7 |   "Show legends"?: boolean;
  8 |   Type?: "Multiple" | "Default";
  9 |   State?: "Hover" | "Default" | "Active";
 10 | }
 11 | 
 12 | figmaMapping({
 13 |   componentKey: "866fc404b333d4b5d12734bff13f699b062c5967",
 14 |   mapper(figma: FigmaAreaChartProps) {
 15 |     return (
 16 |       <AreaChart
 17 |         series={[
 18 |           {
 19 |             title: "Network 1",
 20 |             type: "area",
 21 |             data: [
 22 |               { x: 1601017200000, y: 114489 },
 23 |               { x: 1601018100000, y: 136935 },
 24 |               { x: 1601019000000, y: 141026 },
 25 |               { x: 1601019900000, y: 123288 },
 26 |               { x: 1601020800000, y: 121956 },
 27 |               { x: 1601021700000, y: 119868 },
 28 |               { x: 1601022600000, y: 132326 },
 29 |               { x: 1601023500000, y: 126879 },
 30 |               { x: 1601024400000, y: 138543 },
 31 |               { x: 1601025300000, y: 144309 },
 32 |               { x: 1601026200000, y: 121118 },
 33 |               { x: 1601027100000, y: 113430 },
 34 |               { x: 1601028000000, y: 135911 },
 35 |               { x: 1601028900000, y: 113126 },
 36 |               { x: 1601029800000, y: 119538 },
 37 |               { x: 1601030700000, y: 124338 },
 38 |               { x: 1601031600000, y: 133884 },
 39 |               { x: 1601032500000, y: 135473 },
 40 |               { x: 1601033400000, y: 131187 },
 41 |               { x: 1601034300000, y: 136176 },
 42 |               { x: 1601035200000, y: 144422 },
 43 |               { x: 1601036100000, y: 115392 },
 44 |               { x: 1601037000000, y: 139307 },
 45 |               { x: 1601037900000, y: 128517 },
 46 |               { x: 1601038800000, y: 107160 },
 47 |               { x: 1601039700000, y: 110283 },
 48 |               { x: 1601040600000, y: 134513 },
 49 |               { x: 1601041500000, y: 111311 },
 50 |               { x: 1601042400000, y: 142686 },
 51 |               { x: 1601043300000, y: 130652 },
 52 |               { x: 1601044200000, y: 149418 },
 53 |               { x: 1601045100000, y: 121923 },
 54 |             ],
 55 |           },
 56 |           {
 57 |             title: "Network 2",
 58 |             type: "area",
 59 |             data: [
 60 |               { x: 1601017200000, y: 10413 },
 61 |               { x: 1601018100000, y: 26582 },
 62 |               { x: 1601019000000, y: 45593 },
 63 |               { x: 1601019900000, y: 65918 },
 64 |               { x: 1601020800000, y: 76223 },
 65 |               { x: 1601021700000, y: 62385 },
 66 |               { x: 1601022600000, y: 83330 },
 67 |               { x: 1601023500000, y: 127209 },
 68 |               { x: 1601024400000, y: 104802 },
 69 |               { x: 1601025300000, y: 145899 },
 70 |               { x: 1601026200000, y: 121375 },
 71 |               { x: 1601027100000, y: 112968 },
 72 |               { x: 1601028000000, y: 145263 },
 73 |               { x: 1601028900000, y: 139562 },
 74 |               { x: 1601029800000, y: 128343 },
 75 |               { x: 1601030700000, y: 122774 },
 76 |               { x: 1601031600000, y: 145396 },
 77 |               { x: 1601032500000, y: 176509 },
 78 |               { x: 1601033400000, y: 201006 },
 79 |               { x: 1601034300000, y: 196538 },
 80 |               { x: 1601035200000, y: 213773 },
 81 |               { x: 1601036100000, y: 205076 },
 82 |               { x: 1601037000000, y: 216369 },
 83 |               { x: 1601037900000, y: 159386 },
 84 |               { x: 1601038800000, y: 238852 },
 85 |               { x: 1601039700000, y: 207500 },
 86 |               { x: 1601040600000, y: 187110 },
 87 |               { x: 1601041500000, y: 314165 },
 88 |               { x: 1601042400000, y: 165653 },
 89 |               { x: 1601043300000, y: 175584 },
 90 |               { x: 1601044200000, y: 230042 },
 91 |               { x: 1601045100000, y: 293879 },
 92 |             ],
 93 |           },
 94 |         ]}
 95 |         hideLegend={!figma["Show legends"]}
 96 |         hideFilter={!figma["Show filter"]}
 97 |         statusType="finished"
 98 |         detailPopoverSize="medium"
 99 |       />
100 |     );
101 |   },
102 | });
103 | 


--------------------------------------------------------------------------------