feat: pnpm now the default package manager for Start UI

there is still an issue with the dockerfile, starting in /home/nextjs/.cache instead of /app/.next

.github/pull_request_template.md

@@ -18,7 +18,7 @@ closes #<issue_id>
  - [ ] I performed a self review of my code
  - [ ] I ensured that everything is written in English
  - [ ] I tested the feature or fix on my local environment
- - [ ] I ran the `yarn storybook` command and everything is working
+ - [ ] I ran the `pnpm storybook` command and everything is working
  - [ ] If applicable, I updated the translations for english and french files  
       (If you cannot update the french language, just let us know in the PR description)
  - [ ] If applicable, I updated the README.md

.github/workflows/github-ci.yml

@@ -1,10 +1,8 @@
 name: 🚀 Start UI [web]
 
 on:
-  push:
-    branches:
-      - master
-  pull_request:
+  - push
+  - pull_request
 
 jobs:
   build-and-test:
@@ -16,26 +14,37 @@ jobs:
         node: [18, 'lts/*']
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
       - uses: actions/setup-node@v2
         with:
           node-version: ${{ matrix.node }}
 
+      - uses: pnpm/action-setup@v2
+        name: Install pnpm
+        with:
+          version: 8
+          run_install: false
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
       - name: Cache node modules
         uses: actions/cache@v2
         env:
           cache-name: cache-node-modules
         with:
-          path: ~/.npm
-          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/yarn.lock') }}
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
-            ${{ runner.os }}-build-${{ env.cache-name }}-
-            ${{ runner.os }}-build-
+            ${{ runner.os }}-pnpm-store-${{ env.cache-name }}-
+            ${{ runner.os }}-pnpm-store-
             ${{ runner.os }}-
 
       - name: Install dependencies
-        run: yarn install
+        run: pnpm install
 
       - name: Lint code and types
-        run: yarn lint
+        run: pnpm lint

.gitlab-ci.yml

@@ -1,34 +1,24 @@
 image: node:lts
 
 cache:
+  key:
+    files:
+      - pnpm-lock.yaml
   paths:
-    - node_modules
-    - .yarn
+    - .pnpm-store
 
 stages:
   - build
   - test
 
 build:
   stage: build
+  before_script:
+    - corepack enable
+    - corepack prepare pnpm@latest-8 --activate
+    - pnpm config set store-dir .pnpm-store
   script:
     - echo "Installing dependencies"
-    - yarn install
+    - pnpm install
     - echo "Building application"
-    - yarn build
-
-test:
-  image:
-    # Make sure to update this version number on version update
-    name: cypress/included:11.2.0
-    entrypoint: ['']
-  stage: test
-  script:
-    - yarn install
-    - yarn cypress install
-    - echo "Checking format code eslint"
-    - yarn eslint .
-    - echo "Checking types"
-    - yarn tsc --noEmit
-    - echo "Running tests"
-    - yarn test:ci --browser chrome
+    - pnpm build

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-yarn lint-staged
+pnpm lint-staged

.husky/pre-push

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-yarn lint
+pnpm lint

.prettierignore

@@ -12,3 +12,4 @@ public
 *.mdx
 .env*
 !.env.validator.js
+pnpm-lock.yaml

.storybook/main.ts

@@ -10,7 +10,6 @@ const config: StorybookConfig = {
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     'storybook-dark-mode',
-    '@storybook/addon-mdx-gfm',
   ],
   staticDirs: ['../public'],
   docs: {

Dockerfile

@@ -1,14 +1,27 @@
-FROM node:18-alpine
+FROM node:18-alpine AS base
 # Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
 RUN apk add --no-cache libc6-compat
 RUN apk add --no-cache git
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+# Enable supported package managers
+RUN corepack enable
 WORKDIR /app
 COPY . .
-RUN yarn install --frozen-lockfile
+
+FROM base AS build
+RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
 ENV NODE_ENV production
-RUN yarn build
-RUN addgroup -g 1001 -S nodejs
-RUN adduser -S nextjs -u 1001
+RUN pnpm run build
+
+FROM base AS runner
+WORKDIR /app
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+RUN mkdir .next
+RUN chown nextjs:nodejs .next
+COPY --from=build /app/node_modules /app/node_modules
+COPY --from=build /app/.next /app/.next
 
 USER nextjs
 
@@ -19,4 +32,4 @@ ENV PORT 3000
 # Learn more here: https://nextjs.org/telemetry
 ENV NEXT_TELEMETRY_DISABLED 1
 
-CMD ["yarn", "start"]
+CMD ["pnpm", "start"]

README.md

@@ -16,12 +16,12 @@ A live read-only demonstration of what you will have when starting a project wit
 ## Getting Started
 
 ```bash
-yarn create start-ui --web myApp
+pnpm create start-ui --web myApp
 ```
 
 That will scaffold a new folder with the latest version of 🚀 Start UI <small>[web]</small> 🎉
 
-Then just go to the created folder:
+Then go to the created folder:
 
 ```bash
 cd myApp
@@ -32,10 +32,10 @@ cd myApp
 cp .env.example .env
 
 # Setup and start the db with docker
-yarn db:init
+pnpm db:init
 
 # Run the development server
-yarn dev
+pnpm dev
 ```
 
 ## Technology
@@ -85,19 +85,19 @@ cp .env.example .env
 
 2. Install dependencies
 ```bash
-yarn install
+pnpm install
 ```
 
 3. Setup and start the db with docker
 ```bash
-yarn db:init
+pnpm db:init
 ```
 
 ## Development
 
 ```bash
 # Run the development server
-yarn dev
+pnpm dev
 ```
 
 ### Emails in development
@@ -128,7 +128,7 @@ You can add search params to the preview url to pass as props to the template.
 ### Storybook
 
 ```bash
-yarn storybook
+pnpm storybook
 ```
 
 ### Update theme typing
@@ -138,15 +138,15 @@ When adding or updating theme components, component variations, sizes, colors an
 Just run the following command after updating the theme:
 
 ```bash
-yarn theme:generate-typing
+pnpm theme:generate-typing
 ```
 
 ### Generate custom icons components from svg files
 
 Put the custom svg files into the `src/components/Icons/svg-sources` folder and then run the following command:
 
 ```bash
-yarn theme:generate-icons
+pnpm theme:generate-icons
 ```
 
 > ⚠️ All svg icons should be svg files prefixed by `icon-` (example: `icon-externel-link`) with **24x24px** size, only **one shape** and **filled with `#000` color** (will be replaced by `currentColor`).
@@ -262,10 +262,10 @@ t('account:resetPassword.actions.reset')
 ## Production
 
 ```bash
-yarn install
-yarn storybook:build # Optional: Will expose the Storybook at `/storybook`
-yarn build
-yarn start
+pnpm install
+pnpm storybook:build # Optional: Will expose the Storybook at `/storybook`
+pnpm build
+pnpm start
 ```
 
 ### Docker

package.json

@@ -4,26 +4,24 @@
   "version": "1.0.0",
   "description": "Opinionated UI starter with ⚛️ React, ⚡️ Chakra UI, ⚛️ React Query & 🐜 Formiz — From the 🐻 BearStudio Team",
   "engines": {
-    "node": ">=18 <20",
-    "npm": "please-use-yarn",
-    "yarn": ">=1.22"
+    "node": ">=18 <20"
   },
   "scripts": {
     "prepare": "husky install",
-    "postinstall": "prisma generate && yarn build:info && yarn theme:generate-typing",
+    "postinstall": "prisma generate && pnpm build:info && pnpm theme:generate-typing",
     "dev": "run-p dev:*",
     "dev:next": "next dev",
     "dev:email": "maildev -outgoing-host smtp.example.com --outgoing-secure --outgoing-user 'username' --outgoing-pass 'password'",
-    "build": "yarn build:info && next build",
+    "build": "pnpm build:info && next build",
     "build:info": "tsx scripts/build-info.ts",
     "start": "next start",
     "pretty": "prettier -w .",
     "lint": "SKIP_ENV_VALIDATIONS=true next lint && tsc --noEmit",
-    "storybook": "yarn build:info && storybook dev --no-open -p 6006",
-    "storybook:build": "yarn build:info && storybook build && mv ./storybook-static ./public/storybook",
+    "storybook": "pnpm build:info && storybook dev --no-open -p 6006",
+    "storybook:build": "pnpm build:info && storybook build && mv ./storybook-static ./public/storybook",
     "theme:generate-typing": "chakra-cli tokens ./src/theme/theme.ts",
     "theme:generate-icons": "svgr --config-file src/components/Icons/svgr.config.js src/components/Icons/svg-sources",
-    "db:init": "docker run --name startui -e POSTGRES_PASSWORD=startui -e POSTGRES_USER=startui -e POSTGRES_DB=startui -p 5432:5432 -d postgres && sleep 10 && yarn db:push && yarn db:seed",
+    "db:init": "docker run --name startui -e POSTGRES_PASSWORD=startui -e POSTGRES_USER=startui -e POSTGRES_DB=startui -p 5432:5432 -d postgres && sleep 10 && pnpm db:push && pnpm db:seed",
     "db:start": "docker start startui",
     "db:stop": "docker stop startui",
     "db:clear": "docker stop startui && docker rm startui",
@@ -35,8 +33,10 @@
     "*.{ts,tsx,js,jsx,json}": "prettier --write"
   },
   "dependencies": {
+    "@chakra-ui/anatomy": "2.2.1",
     "@chakra-ui/next-js": "2.1.5",
     "@chakra-ui/react": "2.7.0",
+    "@chakra-ui/styled-system": "2.9.1",
     "@chakra-ui/theme-tools": "2.0.18",
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
@@ -67,6 +67,7 @@
     "react-day-picker": "7.4.10",
     "react-dom": "18.2.0",
     "react-error-boundary": "4.0.11",
+    "react-focus-lock": "2.9.5",
     "react-i18next": "13.2.2",
     "react-icons": "4.11.0",
     "react-popper": "2.3.0",
@@ -81,17 +82,16 @@
   },
   "devDependencies": {
     "@babel/core": "7.22.20",
+    "@babel/eslint-parser": "7.22.15",
     "@babel/parser": "7.22.16",
     "@chakra-ui/cli": "2.4.1",
     "@next/eslint-plugin-next": "13.5.2",
-    "@storybook/addon-actions": "7.4.3",
-    "@storybook/addon-essentials": "7.4.3",
-    "@storybook/addon-links": "7.4.3",
-    "@storybook/addon-mdx-gfm": "7.4.3",
-    "@storybook/addon-postcss": "2.0.0",
-    "@storybook/nextjs": "7.4.3",
-    "@storybook/react": "7.4.3",
-    "@storybook/theming": "7.4.3",
+    "@storybook/addon-actions": "7.4.5",
+    "@storybook/addon-essentials": "7.4.5",
+    "@storybook/addon-links": "7.4.5",
+    "@storybook/nextjs": "7.4.5",
+    "@storybook/react": "7.4.5",
+    "@storybook/theming": "7.4.5",
     "@svgr/cli": "8.1.0",
     "@trivago/prettier-plugin-sort-imports": "4.2.0",
     "@types/bcrypt": "5.0.0",
@@ -102,7 +102,6 @@
     "@types/react-dom": "18.2.7",
     "@types/swagger-ui-react": "4.18.0",
     "@typescript-eslint/eslint-plugin": "6.7.2",
-    "babel-eslint": "10.1.0",
     "eslint": "8.49.0",
     "eslint-config-next": "13.5.2",
     "eslint-plugin-sonarjs": "0.21.0",
@@ -113,7 +112,7 @@
     "npm-run-all": "4.1.5",
     "prettier": "3.0.3",
     "prisma": "5.3.1",
-    "storybook": "7.4.3",
+    "storybook": "7.4.5",
     "storybook-dark-mode": "3.0.1",
     "tsx": "3.12.10",
     "typescript": "5.1.3"