Move app templates to a separate folder (#2652)

.changeset/config.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://unpkg.com/@changesets/config@1.5.0/schema.json",
+  "$schema": "https://unpkg.com/@changesets/config@1.7.0/schema.json",
   "changelog": [
     "@changesets/changelog-github",
     { "repo": "sumup-oss/circuit-ui" }

.eslintignore

@@ -12,7 +12,7 @@ package-lock.json
 *rc.*
 /scripts/
 # disable linting for templates because they will have their own rules when used in a new app
-packages/cna-template/template
-packages/astro-template/src/env.d.ts
+templates/nextjs/template
+templates/astro/src/env.d.ts
 packages/circuit-ui/vendor
 packages/icons/vendor

.eslintrc.js

@@ -72,7 +72,7 @@ module.exports = require('@sumup-oss/foundry/eslint')({
       },
     },
     {
-      files: ['packages/remix-template/**/*', 'packages/astro-template/**/*'],
+      files: ['templates/remix/**/*', 'templates/astro/**/*'],
       rules: {
         'notice/notice': 'off',
       },

.github/workflows/templates.yml

@@ -15,13 +15,13 @@ jobs:
         template: [astro, nextjs, remix]
         include:
           - template: astro
-            bootstrap: 'npx create-astro@latest ./test-app --template sumup-oss/circuit-ui/packages/astro-template --install --no-git --typescript=strictest'
+            bootstrap: 'npx create-astro@latest ./test-app --template sumup-oss/circuit-ui/templates/astro --install --no-git --typescript=strictest'
             verify: 'npm run lint && npm run astro check'
           - template: nextjs
-            bootstrap: 'npx create-next-app --example "https://github.com/sumup-oss/circuit-ui/tree/main/packages/cna-template/template" test-app'
+            bootstrap: 'npx create-next-app --example "https://github.com/sumup-oss/circuit-ui/tree/main/templates/nextjs/template" test-app'
             verify: 'npm run test:ci'
           - template: remix
-            bootstrap: 'npx create-remix@latest ./test-app --template https://github.com/sumup-oss/circuit-ui/tree/main/packages/remix-template --install --no-git-init'
+            bootstrap: 'npx create-remix@latest ./test-app --template https://github.com/sumup-oss/circuit-ui/tree/main/templates/remix --install --no-git-init'
             verify: 'npm run lint && npm run typecheck'
 
     steps:

.gitignore

@@ -16,6 +16,7 @@ circuit-ui-global.css
 
 # These are generated in CI from other files.
 docs/packages/
+docs/templates/
 docs/contributing/1-overview.mdx
 docs/contributing/*-contributing-*.mdx
 docs/introduction/*-changelog.mdx

README.md

@@ -25,7 +25,6 @@ Here are a few helpful links for getting started with Circuit UI:
 - **[@sumup-oss/circuit-ui](./packages/circuit-ui)** — the core React component library
 - **[@sumup-oss/design-tokens](./packages/design-tokens)** — visual primitives such as typography, color, and spacing
 - **[@sumup-oss/icons](./packages/icons)** — a collection of SVG icons
-- **[@sumup-oss/cna-template](./packages/cna-template)** — bootstrap a fresh [Next.js](https://nextjs.org/) app with Circuit UI and [Foundry](https://github.com/sumup-oss/foundry)
 - **[@sumup-oss/eslint-plugin-circuit-ui](./packages/eslint-plugin-circuit-ui)** — ESLint rules to help users follow best practices when using Circuit UI
 - **[@sumup-oss/stylelint-plugin-circuit-ui](./packages/stylelint-plugin-circuit-ui)** — Stylelint rules to help users follow best practices when using Circuit UI
 

biome.jsonc

@@ -50,9 +50,9 @@
     },
     "ignore": [
       // The templates have their own linting setup
-      "packages/astro-template/**",
-      "packages/cna-template/template/**",
-      "packages/remix-template/**"
+      "templates/astro/**",
+      "templates/nextjs/template/**",
+      "templates/remix/**"
     ]
   },
   "overrides": [

docs/introduction/2-getting-started.mdx

@@ -12,9 +12,9 @@ import { Meta, Intro } from '../../.storybook/components';
 
 Starting fresh? The best way to bootstrap a new project with Circuit UI is to use one of the app templates:
 
-- [Astro](https://circuit.sumup.com/?path=/docs/packages-astro-template--docs)
-- [Next.js](https://circuit.sumup.com/?path=/docs/packages-cna-template--docs)
-- [Remix](https://circuit.sumup.com/?path=/docs/packages-remix-template--docs)
+- [Astro](https://circuit.sumup.com/?path=/docs/templates-astro--docs)
+- [Next.js](https://circuit.sumup.com/?path=/docs/templates-nextjs--docs)
+- [Remix](https://circuit.sumup.com/?path=/docs/templates-remix--docs)
 
 Each template includes Circuit UI and SumUp's [Foundry](https://github.com/sumup-oss/foundry) frontend toolkit to get you started in minutes!
 

lerna.json

@@ -1,5 +1,5 @@
 {
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
-  "packages": ["packages/*", "packages/cna-template/template"],
+  "packages": ["packages/*", "templates/*", "templates/nextjs/template"],
   "version": "independent"
 }

package.json

@@ -2,10 +2,7 @@
   "name": "circuit-ui-web",
   "description": "The web implementation of Circuit UI, SumUp's design system",
   "private": true,
-  "workspaces": [
-    "packages/*",
-    "packages/cna-template/template"
-  ],
+  "workspaces": ["packages/*", "templates/*", "templates/nextjs/template"],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/sumup-oss/circuit-ui.git"
@@ -36,7 +33,7 @@
     "check:licenses": "license-checker --production --summary --failOn=GPLv3",
     "check:svg-sizes": "./scripts/check-svg-sizes.sh",
     "copy-docs": "./scripts/copy-docs.sh",
-    "bootstrap": "npm run build && npm run copy-docs && cd packages/cna-template/template && npm ci",
+    "bootstrap": "npm run build && npm run copy-docs && cd templates/nextjs/template && npm ci",
     "release": "changeset publish"
   },
   "devDependencies": {

scripts/copy-docs.sh

@@ -16,6 +16,16 @@ for package in "${packages[@]}"; do
   echo -e "import { Meta } from '../../.storybook/components';\n\n<Meta title=\"Packages/${package_name}\" />\n\n$(cat ${src_file_path})" > "${dest_file_path}"
 done
 
+mkdir -p ./docs/templates
+
+for template in "${templates[@]}"; do
+  template_name=$(echo ${template} | cut -d'/' -f 3)
+  src_file_path="${template}/README.md"
+  dest_file_path="./docs/templates/${template_name}.mdx"
+
+  echo -e "import { Meta } from '../../.storybook/components';\n\n<Meta title=\"Packages/${template_name}\" />\n\n$(cat ${src_file_path})" > "${dest_file_path}"
+done
+
 # CONTRIBUTING.md
 
 echo -e "import { Meta } from '../../.storybook/components';\n\n<Meta title=\"Introduction/Changelog\" />\n\n$(cat "./packages/circuit-ui/CHANGELOG.md")" | sed -r 's/# @sumup\/circuit-ui/# Changelog/g' | sed -r 's/ >=18/ {` >=18`}/g' | sed -r 's/ <18/ {` <18`}/g' > "./docs/introduction/5-changelog.mdx"

packages/astro-template/README.md → templates/astro/README.md

@@ -16,7 +16,7 @@ A template for Circuit UI + Astro apps with SumUp's frontend stack.
 
 1. Open your terminal.
 2. Navigate to the directory you would like to place your project in.
-3. Run `npx create-astro@latest ./my-app --template sumup-oss/circuit-ui/packages/astro-template`, where `my-app` is the name of your project.
+3. Run `npx create-astro@latest ./my-app --template sumup-oss/circuit-ui/templates/astro`, where `my-app` is the name of your project.
 
 This will create the folder `my-app` and initialize a new project inside. The project will be based on [Astro](https://docs.astro.build) and will use SumUp's [Circuit UI](https://circuit.sumup.com/) component library and [Foundry](https://github.com/sumup-oss/foundry) toolkit.
 

packages/cna-template/README.md → templates/nextjs/README.md

@@ -16,7 +16,7 @@ A [create-next-app template](https://nextjs.org/docs/api-reference/create-next-a
 
 1. Open your terminal.
 2. Navigate to the directory you would like to place your project in.
-3. Run `npx create-next-app --example "https://github.com/sumup-oss/circuit-ui/tree/main/packages/cna-template/template" my-app`, where `my-app` is the name of your project.
+3. Run `npx create-next-app --example "https://github.com/sumup-oss/circuit-ui/tree/main/templates/nextjs/template" my-app`, where `my-app` is the name of your project.
 
 This will create the folder `my-app` and initialize a new project inside. The project will be based on [Next.js](https://github.com/vercel/next.js/) and will use SumUp's [Circuit UI](https://circuit.sumup.com/) component library and [Foundry](https://github.com/sumup-oss/foundry) toolkit.
 

packages/cna-template/package.json → templates/nextjs/package.json

@@ -5,12 +5,12 @@
   "private": true,
   "repository": {
     "type": "git",
-    "directory": "packages/cna-template",
+    "directory": "templates/nextjs",
     "url": "git+https://github.com/sumup-oss/circuit-ui.git"
   },
   "license": "Apache-2.0",
   "bugs": {
     "url": "https://github.com/sumup-oss/circuit-ui/issues"
   },
-  "homepage": "https://github.com/sumup-oss/circuit-ui/tree/main/packages/cna-template/README.md"
+  "homepage": "https://github.com/sumup-oss/circuit-ui/tree/main/templates/nextjs/README.md"
 }

packages/remix-template/README.md → templates/remix/README.md

@@ -16,7 +16,7 @@ A template for Circuit UI + Remix apps with SumUp's frontend stack.
 
 1. Open your terminal.
 2. Navigate to the directory you would like to place your project in.
-3. Run `npx create-remix@latest ./my-app --template https://github.com/sumup-oss/circuit-ui/tree/main/packages/remix-template`, where `my-app` is the name of your project.
+3. Run `npx create-remix@latest ./my-app --template https://github.com/sumup-oss/circuit-ui/tree/main/templates/remix`, where `my-app` is the name of your project.
 
 This will create the folder `my-app` and initialize a new project inside. The project will be based on [Remix](https://remix.run/docs/) and will use SumUp's [Circuit UI](https://circuit.sumup.com/) component library and [Foundry](https://github.com/sumup-oss/foundry) toolkit.
 

templates/remix/app/components/DocCard/index.ts

@@ -0,0 +1 @@
+export { DocCard } from './DocCard.js';