{"id":28434348,"url":"https://github.com/builderio/vcp-sample-app","last_synced_at":"2025-07-18T05:36:47.471Z","repository":{"id":256230301,"uuid":"854668719","full_name":"BuilderIO/vcp-sample-app","owner":"BuilderIO","description":null,"archived":false,"fork":false,"pushed_at":"2024-12-04T00:04:37.000Z","size":344,"stargazers_count":0,"open_issues_count":0,"forks_count":11,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-06-30T09:42:06.857Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BuilderIO.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-09-09T15:18:33.000Z","updated_at":"2024-12-04T00:04:40.000Z","dependencies_parsed_at":"2024-09-09T19:03:19.797Z","dependency_job_id":"3e4a2f5a-84ef-4e14-a626-6a4a7e5fe118","html_url":"https://github.com/BuilderIO/vcp-sample-app","commit_stats":null,"previous_names":["builderio/vcp-sample-app"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/BuilderIO/vcp-sample-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BuilderIO%2Fvcp-sample-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BuilderIO%2Fvcp-sample-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BuilderIO%2Fvcp-sample-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BuilderIO%2Fvcp-sample-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BuilderIO","download_url":"https://codeload.github.com/BuilderIO/vcp-sample-app/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BuilderIO%2Fvcp-sample-app/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265705617,"owners_count":23814488,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-06-05T19:08:45.439Z","updated_at":"2025-07-18T05:36:47.463Z","avatar_url":"https://github.com/BuilderIO.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Ecommerce\n\nWelcome to our ecommerce project! This README provides all the necessary information to get started, including links to our Jira board and Figma designs, as well as instructions for running the project locally.\n\nTo run the project locally, clone this repository and run the following commands:\n\n```bash\nnpm install\nnpm run dev\n```\n\n\n## VCP component mapping\n\nFigma-Component-to-React-Component mappings live in `*.mapper.tsx` files, these files connect specific Figma components to some of the local React components in this repos.\n\n1. Make sure you have the latest version of @builder.io/dev-tools installed.\n```bash\nnpm i @builder.io/dev-tools@latest\n```\n2. [Login/Signup in Builder.io](https://builder.io/login)\n\n3. Publish existing mappings into your Builder.io space. (The CLI might prompt you to authorize with Builder.io.)\n```bash\nnpx builder.io figma publish\n```\n\n3. Open the [Sample Figma file](https://www.figma.com/design/gk3fgi86UxOGgZQohLgSGK/VCP-demo?node-id=0-1\u0026t=IQ27EabKQr6yqH2k-1)\nThis figma files includes several components, some of which are already mapped in this repository, and some Homepage example to export to builder.io.\n\n\n4. Open the [Builder.io Figma Plugin](https://www.figma.com/community/plugin/747985167520967365/builder-io-ai-powered-figma-to-code-react-vue-tailwind-more) and login into the same account/space as you did in step 2.\n\nhttps://github.com/user-attachments/assets/1ecd77b6-e990-4d4a-96e1-939efdf1b305\n\n5. Click Generate Code, you will be able to see the generated code properly import and use the components in this repo.\n\n\n\n### Why publishing mappings?\n\nMappings don't come into effect until they are published to your Builder.io space, this allows following up figma exports to reference your local components.\n\nTo publish your mappings:\n\n```bash\nnpx builder.io figma publish\n```\n\n### Figma Mapping Files\n\nSpecial files in this repository named `*.mapper.tsx` are used to map Figma components to React components.\n\n#### Generic mapper\n`generic.mapper.tsx`: Defines generic mappings for Figma elements.\n\n```tsx\nimport { figmaMapping } from \"@builder.io/dev-tools/figma\";\n\nfigmaMapping({\n  genericMapper(figma) {\n    if (figma.$type === \"FRAME\" \u0026\u0026 figma.$name === \"Section\") {\n      // If we have a FRAME node named \"Section\" then we will render it as a \u003csection\u003e element.\n      return \u003csection\u003e{figma.$children}\u003c/section\u003e;\n    }\n\n    // For other nodes, do not apply the generic\n    // mapper and keep the default rendering behavior\n    return undefined;\n  },\n});\n```\n\n#### Component Mappings\n\nFor example, `Hero.mapper.tsx` maps various the Hero component from Figma to React.\n\n```tsx\nimport { figmaMapping } from \"@builder.io/dev-tools/figma\";\nimport ImageHero from \"@/components/Hero/ImageHero\";\n\nfigmaMapping({\n  componentKey: \"4bd6da0f53b73a462b070b55dd055ce6a4cb3eca\",\n  mapper(figma) {\n    return (\n      \u003cImageHero\n        title={\n          figma.Title ?? figma.$children[1]?.$children[0]?.$textContent ?? \"\"\n        }\n        subTitle=\"Discover our collection\"\n        buttonText={\n          figma.buttonText ??\n          figma.$findOneByName(\"Shop Now\")?.$textContent ??\n          \"\"\n        }\n        buttonLink=\"#\"\n        backgroundImage={figma.$children[0]?.$imageUrl ?? \"\"}\n        alignment=\"center\"\n        makeFullBleed={false}\n      /\u003e\n    );\n  },\n});\n```\n\n\n#### Design Tokens Mapper\n`design-tokens.mapper.tsx` defines mappings for design tokens (colors, etc.).\n\n```tsx\nimport { figmaMapping } from \"@builder.io/dev-tools/figma\";\n\nfigmaMapping({\n  designTokenMapper(token) {\n    if (token === \"black\") {\n      return \"var(--company-black, #000)\";\n    }\n\n    // For anything keep the same\n    return undefined;\n  },\n});\n```\n\n\n## Builder Registry\n\n`builder-registry.ts` registers custom components and design tokens with Builder.io.\n\n```tsx\n\"use client\";\nimport \"@builder.io/widgets\";\nimport { builder, Builder, withChildren } from \"@builder.io/react\";\nimport { Button } from \"./components/ui/button\";\nimport Counter from \"./components/Counter/Counter\";\nimport HeroWithChildren from \"./components/Hero/HeroWithChildren\";\nimport IconCard from \"./components/Card/IconCard\";\nimport ImageHero from \"./components/Hero/ImageHero\";\nimport SplitHero from \"./components/Hero/SplitHero\";\nimport TextHero from \"./components/Hero/TextHero\";\n\nbuilder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY!);\n\nBuilder.register(\"editor.settings\", {\n  styleStrictMode: false,\n  allowOverridingTokens: true, // optional\n  models: [\"page\"],\n  designTokens: {\n    colors: [\n      { name: \"Primary\", value: \"var(--color-primary, #000000)\" },\n      { name: \"Secondary\", value: \"var(--color-secondary, #ffffff)\" },\n      { name: \"Deconstructive\", value: \"var(--color-deconstructive, #18B4F4)\" },\n      { name: \"Muted\", value: \"var(--color-muted, #C8E2EE)\" },\n      { name: \"Accent\", value: \"var(--color-accent, #F35959)\" },\n      { name: \"Energetic\", value: \"var(--color-energetic, #A97FF2)\" },\n      { name: \"Background\", value: \"var(--color-background, #ffffff)\" },\n      { name: \"Text\", value: \"var(--color-primary, #000000)\" },\n      { name: \"Text Muted\", value: \"var(--color-muted, #e2e8f0)\" },\n      {\n        name: \"Background Light\",\n        value: \"var(--color-background-light, #FAFAFA)\",\n      },\n    ],\n    spacing: [\n      { name: \"Large\", value: \"var(--space-large, 20px)\" },\n      { name: \"Small\", value: \"var(--space-small, 10px)\" },\n      { name: \"Tiny\", value: \"5px\" },\n    ],\n    fontFamily: [{ name: \"Primary\", value: \"var(--primary-font, Poppins)\" }],\n    fontSize: [\n      { name: \"Small\", value: \"var(--font-size-small, 12px)\" },\n      { name: \"Medium\", value: \"var(--font-size-medium, 14px)\" },\n      { name: \"Large\", value: \"var(--font-size-large, 16px)\" },\n    ],\n    fontWeight: [\n      { name: \"Light\", value: \"var(--font-weight-light, 200)\" },\n      { name: \"Normal\", value: \"var(--font-weight-regular, 400)\" },\n      { name: \"Medium\", value: \"var(--font-weight-medium, 600)\" },\n      { name: \"Bold\", value: \"var(--font-weight-bold, 800)\" },\n    ],\n    letterSpacing: [\n      { name: \"Tight\", value: \"var(--letter-spacing-tight, -0.02em)\" },\n      { name: \"Normal\", value: \"var(--letter-spacing-normal, 0em)\" },\n      { name: \"Relaxed\", value: \"var(--letter-spacing-wide, 0.02em)\" },\n      { name: \"Loose\", value: \"var(--letter-spacing-wide, 0.04em)\" },\n    ],\n    lineHeight: [\n      { name: \"None\", value: \"var(--line-height-none, 1)\" },\n      { name: \"Tight\", value: \"var(--line-height-tight, 1.2)\" },\n      { name: \"Normal\", value: \"var(--line-height-normal, 1.5)\" },\n      { name: \"Relaxed\", value: \"var(--line-height-relaxed, 1.8)\" },\n      { name: \"Loose\", value: \"var(--line-height-loose, 2)\" },\n    ],\n  },\n});\nBuilder.register(\"insertMenu\", {\n  name: \"Heros\",\n  items: [\n    { name: \"TextHero\" },\n    { name: \"ImageHero\" },\n    { name: \"SplitHero\" },\n    { name: \"HeroWithChildren\" },\n  ],\n  // priority: 2,\n});\nBuilder.register(\"insertMenu\", {\n  name: \"Cards\",\n  items: [{ name: \"IconCard\" }, { name: \"ProductCard\" }],\n  // priority: 3,\n});\nif (Builder.isBrowser) {\n  if (builder.editingModel === \"homepage\") {\n    Builder.register(\"insertMenu\", {\n      name: \"Layout\",\n      items: [\n        { name: \"Columns\" },\n        { name: \"Builder:Carousel\" },\n        { name: \"Collection\" },\n      ],\n    });\n  }\n}\nBuilder.register(\"insertMenu\", {\n  name: \"Popups\",\n  items: [{ name: \"UpsellPopup\" }],\n});\n\nBuilder.registerComponent(Counter, {\n  name: \"Counter\",\n  image: \"https://cdn.builder.io/api/v1/image/assets%2Fa87584e551b6472fa0f0a2eb10f2c0ff%2F000c4b516154412498592db34d340789\",\n  inputs: [\n    {\n      name: \"initialCount\",\n      type: \"number\",\n    },\n  ],\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbuilderio%2Fvcp-sample-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbuilderio%2Fvcp-sample-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbuilderio%2Fvcp-sample-app/lists"}