Merge pull request #77 from jakala-na/feat/turbo

Move to multi-package turborepo

.github/workflows/chromatic.yml

@@ -10,12 +10,18 @@ jobs:
         uses: actions/checkout@v4
         with:
           fetch-depth: 0
+      - uses: pnpm/action-setup@v4
+        name: Install pnpm
+        with:
+          run_install: false
       - uses: actions/setup-node@v4
         with:
           node-version: '>=20.18.0'
+          cache: 'pnpm'
       - name: Install dependencies
-        run: yarn install --frozen-lockfile
+        run: pnpm install --frozen-lockfile
       - name: Publish to Chromatic
         uses: chromaui/action@v1
         with:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          workingDir: packages/ui

.gitignore

@@ -1,23 +1,16 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
-/node_modules
+node_modules
 /.pnp
 .pnp.js
 
-# testing
-/coverage
-
 # next.js
-/.next/
-/out/
+.next/
 
 # storybook
-/storybook-static
-/build-storybook.log
-
-# production
-/build
+storybook-static
+build-storybook.log
 
 # misc
 .DS_Store
@@ -30,11 +23,14 @@ yarn-error.log*
 .pnpm-debug.log*
 
 # local env files
-.env*.local
+.env.local
 
 # vercel
 .vercel
 
+# turbo
+.turbo
+
 # typescript
 *.tsbuildinfo
 next-env.d.ts

.graphqlrc.yml

@@ -1,3 +1,9 @@
-schema: 'gql/schema.graphql'
-documents:
-  ['app/**/*.{graphql,js,ts,jsx,tsx}', 'components/**/*.{graphql,js,ts,jsx,tsx}', 'lib/**/*.{graphql,js,ts,jsx,tsx}']
+projects:
+  marketing:
+    schema: './apps/marketing/gql/schema.graphql'
+    documents:
+      [
+        'apps/marketing/app/**/*.{graphql,js,ts,jsx,tsx}',
+        'apps/marketing/components/**/*.{graphql,js,ts,jsx,tsx}',
+        'apps/marketing/lib/**/*.{graphql,js,ts,jsx,tsx}',
+      ]

.prettierignore

@@ -1,3 +1,3 @@
 # Ignore gql
-gql/*
+apps/*/gql/*
 

.vscode/settings.json

@@ -2,9 +2,9 @@
   "typescript.tsdk": "node_modules/typescript/lib",
   "typescript.enablePromptUseWorkspaceTsdk": true,
   "cucumberautocomplete.steps": [
-    "cypress/e2e/**/*.{js,ts}",
-    "cypress/support/step_definitions/*.{js,ts}",
-    "ui/**/*.steps.{js,ts,jsx,tsx}"
+    "apps/marketing/cypress/e2e/**/*.{js,ts}",
+    "apps/marketing/cypress/support/step_definitions/*.{js,ts}",
+    "packages/ui/**/*.steps.{js,ts,jsx,tsx}"
   ],
   "cucumberautocomplete.strictGherkinCompletion": false
 }

README.md

@@ -14,6 +14,7 @@ The starterkit's cornerstone is our data-fetching solution and it's typesafety.
 - **Draft Mode** - preview mode for your application for Contentful Preview API usage
 - **Contentful Live Preview** - Contentful live previews let you edit components side by side with a visual representation and Live Preview SDK also lets you annotate specific fields you are editing to get to the editor screen by just clicking “Edit” button on the frontend. We also integrated live updates, which will show result of content changes immediately as opposed to waiting for content to auto-save in Contentful.
 - **Contentful Content Source Maps** - Optionally use Contentful Content Source Maps feature to get Live Preview SDK annotations without manually annotating your components, as well as get Vercel Content Link for Vercel customers.
+- **Turborepo** - we use Turborepo for this project to showcase use of multiple packages for design system, CLI tooling, testing in addition to Next.js web app.
 
 ## Getting Started
 
@@ -22,21 +23,21 @@ The starterkit's cornerstone is our data-fetching solution and it's typesafety.
 2. Install dependencies with:
 
 ```
-yarn install
+pnpm install
 ```
 
 3. Setup Contenful access
    To develop locally, you will want to connect to a Contentful instance that has the same data model as we use to develop, there are 3 ways to do that:
 
 - You could get access to an existing space that follows Contentful Marketing Template content model, for example a colleague could share his space with you
 - You could create your own space with https://www.contentful.com/starter-templates/marketing-website/. Keep in mind, new templates today can only be deployed on brand new Contentful accounts, so you might have to create a new account with a new email to do that, but this shouldn't be a problem, as it's free.
-- You can start from scratch and use the contentful CLI and `/migrations/ctf-seed.json` to [import](https://www.contentful.com/developers/docs/tutorials/cli/import-and-export/) our demo content into your own contentful instance: `yarn seed --environment-id=[ENVIRONMENT_ID] --space-id=[SPACE_ID]`
+- You can start from scratch and use the contentful CLI and `apps/marketing/migrations/ctf-seed.json` to [import](https://www.contentful.com/developers/docs/tutorials/cli/import-and-export/) our demo content into your own contentful instance: `pnpm --filter=marketing seed --environment-id=[ENVIRONMENT_ID] --space-id=[SPACE_ID]`
 
 You will want to get a CDA and CPA API keys by using this [guide](https://www.contentful.com/developers/docs/references/authentication/#api-keys-in-the-contentful-web-app)
 
 4. Configure environment
 
-Create .env.local in root directory of the repo with the following contents:
+Create .env.local in apps/marketing directory of the repo with the following contents:
 
 ```
 CONTENTFUL_SPACE=<space id>
@@ -48,18 +49,22 @@ CONTENTFUL_PREVIEW_SECRET=secret
 CONTENTFUL_USE_CONTENT_SOURCE_MAPS=true
 ```
 
-5. Run Dev Server
+5. Run Next.js Dev Server
 
 ```bash
-yarn dev
+turbo dev --filter=marketing
+```
+or run both Next.js and Storybook dev servers with:
+```bash
+turbo dev
 ```
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
 ## Documentation
 
 - [Component Architecture](./docs/components.md)
-- [Components UI Folder](./components/ui/README.md)
+- [Components UI Folder](./packages/ui/README.md)
 - [Data-fetching guide](./docs/data-fetching.md)
 - [Features guide](./docs/features.md)
 - [Analytics guide](./components/analytics/README.md)
@@ -70,7 +75,9 @@ Open [http://localhost:3000](http://localhost:3000) with your browser to see the
 
 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.
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+Customize the build command to be `turbo run build` and set the root directory to `apps/marketing`
+
+Check out [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
 
 ## Support
 

apps/marketing/.eslintignore

@@ -0,0 +1,3 @@
+postcss.config.js
+*.mjs
+*.js

apps/marketing/.eslintrc.js

@@ -0,0 +1,12 @@
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  root: true,
+  extends: ['@repo/eslint-config/next.js'],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    project: true,
+  },
+  globals: {
+    cy: true,
+  },
+};

apps/marketing/.gitignore

@@ -0,0 +1,2 @@
+cucumber-messages.ndjson
+cucumber-report.html