Merge branch 'main' into ci/turbo-storybook

.github/FUNDING.yml

@@ -1,5 +1,5 @@
 patreon: volebnikalkulacka
 custom:
- - https://herohero.co/volebnikalkulacka
- - https://www.darujme.cz/darovat/1200653
- - https://www.kalkulacka.one/cs/podporte-kalkulacku
+  - https://herohero.co/volebnikalkulacka
+  - https://www.darujme.cz/darovat/1200653
+  - https://www.kalkulacka.one/cs/podporte-kalkulacku

.github/workflows/build.yaml

@@ -1,4 +1,4 @@
-name: Build & lint
+name: Lint, format & build
 on: push
 jobs:
   build:
@@ -24,5 +24,7 @@ jobs:
         run: npm ci
       - name: Lint
         run: npm run lint
+      - name: Format
+        run: npm run format
       - name: Build
         run: npm run build

apps/design-system/package.json

@@ -5,10 +5,13 @@
   "scripts": {
     "build": "storybook build",
     "dev": "storybook dev -p 6006 --no-open",
+    "format": "prettier . --check",
+    "format:fix": "prettier . --write",
     "lint": "eslint . --max-warnings 0"
   },
   "dependencies": {
     "@repo/design-system": "*",
+    "prettier": "^3.3.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

apps/web/package.json

@@ -3,14 +3,17 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
     "build": "next build",
-    "start": "next start",
-    "lint": "eslint . --max-warnings 0"
+    "dev": "next dev",
+    "format": "prettier . --check",
+    "format:fix": "prettier . --write",
+    "lint": "eslint . --max-warnings 0",
+    "start": "next start"
   },
   "dependencies": {
     "@repo/design-system": "*",
     "next": "^14.1.1",
+    "prettier": "^3.3.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

package.json

@@ -4,8 +4,9 @@
   "scripts": {
     "build": "turbo build",
     "dev": "turbo dev",
-    "lint": "turbo lint",
-    "format": "prettier --write \"**/*.{js,ts,tsx,md}\""
+    "format": "turbo format",
+    "format:fix": "turbo format:fix",
+    "lint": "turbo lint"
   },
   "devDependencies": {
     "@repo/eslint-config": "*",

packages/design-system/config/color.ts

@@ -0,0 +1,15 @@
+import type { Config } from "tailwindcss";
+
+const color: Pick<Config, "theme"> = {
+  theme: {
+    extend: {
+      colors: {
+        red: {
+          100: "#BB0000",
+        },
+      },
+    },
+  },
+};
+
+export default color;

packages/design-system/config/typography.ts

@@ -0,0 +1,14 @@
+import type { Config } from "tailwindcss";
+import defaultTheme from "tailwindcss/defaultTheme";
+
+const typography: Pick<Config, "theme"> = {
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['"Radio Canada"', ...defaultTheme.fontFamily.sans],
+      },
+    },
+  },
+};
+
+export default typography;

packages/design-system/package.json

@@ -4,13 +4,16 @@
   "private": true,
   "exports": {
     "./styles": "./dist/index.css",
+    "./tailwind": "./tailwind.config.ts",
     "./fonts": "./dist/fonts",
     "./heading": "./src/heading.tsx"
   },
   "scripts": {
     "build": "npm run fonts && npm run tailwind",
-    "fonts": "mkdir -p ./dist && cp -r ./src/fonts ./dist/fonts",
     "dev": "npm run fonts && npm run tailwind:watch",
+    "fonts": "mkdir -p ./dist && cp -r ./src/fonts ./dist/fonts",
+    "format": "prettier . --check",
+    "format:fix": "prettier . --write",
     "generate:component": "turbo gen react-component",
     "lint": "eslint . --max-warnings 0",
     "tailwind": "tailwindcss -i ./src/styles.css -o ./dist/index.css",
@@ -35,6 +38,7 @@
   },
   "dependencies": {
     "@headlessui/react": "^2.0.4",
-    "clsx": "^2.1.1"
+    "clsx": "^2.1.1",
+    "prettier": "^3.3.3"
   }
 }

packages/design-system/src/styles.css

@@ -24,10 +24,10 @@
 @layer utilities {
   /* TODO: Remove after upgrading to Tailwind CSS v4.
      See https://github.com/tailwindlabs/tailwindcss/pull/13153. */
-  .ds-font-stretch-semi-condensed {
+  .k1-font-stretch-semi-condensed {
     font-stretch: semi-condensed;
   }
-  .ds-font-stretch-condensed {
+  .k1-font-stretch-condensed {
     font-stretch: condensed;
   }
 }

packages/design-system/tailwind.config.ts

@@ -1,33 +1,14 @@
-import globalConfig from "@repo/tailwind-config";
 import type { Config } from "tailwindcss";
-import defaultTheme from "tailwindcss/defaultTheme";
 
-const colors = {
-  theme: {
-    extend: {
-      colors: {
-        red: {
-          100: "#BB0000",
-        },
-      },
-    },
-  },
-};
+import globalConfig from "@repo/tailwind-config";
 
-const fonts = {
-  theme: {
-    extend: {
-      fontFamily: {
-        sans: ['"Radio Canada"', ...defaultTheme.fontFamily.sans],
-      },
-    },
-  },
-};
+import color from "./config/color.ts";
+import typography from "./config/typography.ts";
 
 const config: Pick<Config, "content" | "prefix" | "presets"> = {
   content: ["./src/**/*.tsx"],
-  prefix: "ds-",
-  presets: [globalConfig, colors, fonts],
+  prefix: "k1-",
+  presets: [globalConfig, color, typography],
 };
 
 export default config;

packages/design-system/tsconfig.json

@@ -3,6 +3,6 @@
   "compilerOptions": {
     "outDir": "dist"
   },
-  "include": ["src"],
+  "include": ["config", "src"],
   "exclude": ["node_modules", "dist"]
 }

packages/design-system/tsconfig.lint.json

@@ -3,6 +3,12 @@
   "compilerOptions": {
     "outDir": "dist"
   },
-  "include": ["src", "turbo", "postcss.config.js", "tailwind.config.ts"],
+  "include": [
+    "config",
+    "src",
+    "turbo",
+    "postcss.config.js",
+    "tailwind.config.ts"
+  ],
   "exclude": ["node_modules", "dist"]
 }

turbo.json

@@ -11,12 +11,18 @@
         "packages/*/dist/**"
       ]
     },
-    "lint": {
-      "dependsOn": ["^lint"]
-    },
     "dev": {
       "cache": false,
       "persistent": true
+    },
+    "format": {
+      "dependsOn": ["^format"]
+    },
+    "format:fix": {
+      "dependsOn": ["^format:fix"]
+    },
+    "lint": {
+      "dependsOn": ["^lint"]
     }
   }
 }