ci: 👷 Add type checks to PR checks

A simple way to type checking all our projects

.github/workflows/checks.yml

@@ -9,10 +9,12 @@ on:
       - 'biome.jsonc'
 jobs:
   checks:
-    name: Lint
+    name: Checks
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
       - uses: ./.github/actions/gh-setup
-      - name: Lint code
+      - name: Types
+        run: yarn types
+      - name: Biome CI
         run: yarn biome ci .

.github/workflows/test.yml

@@ -13,7 +13,7 @@ permissions:
   pull-requests: write
 
 jobs:
-  checks:
+  test:
     name: Build & test
     runs-on: ubuntu-latest
     steps:

apps/_components/declarations.d.ts

@@ -0,0 +1,4 @@
+declare module '*.css' {
+  const styles: { [className: string]: string };
+  export default styles;
+}

apps/_components/package.json

@@ -24,6 +24,7 @@
     "@navikt/aksel-icons": "^6.14.0",
     "@types/react-syntax-highlighter": "^15.5.13",
     "clsx": "^2.1.1",
+    "next": "^14.2.5",
     "prettier": "^3.3.3",
     "react-syntax-highlighter": "^15.5.0"
   },

apps/_components/src/Header/Header.tsx

@@ -171,7 +171,7 @@ const Header = ({
                       onClick={() => setOpen(false)}
                       prefetch={false}
                       className={cl(
-                        pathname.includes(item.href) && classes.active,
+                        pathname?.includes(item.href) && classes.active,
                         classes.link,
                         'ds-focus',
                       )}

apps/_components/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "extends": "../../tsconfig.base.json",
+  "rootDir": "./src",
   "compilerOptions": {
     "outDir": "./tsc-build",
     "declarationDir": "./dist/types",
@@ -9,8 +10,20 @@
     "noEmit": false,
     "incremental": true,
     "moduleResolution": "Bundler",
-    "types": ["@digdir/designsystemet-theme/colors.d.ts"]
+    "types": [
+      "@digdir/designsystemet-theme/colors.d.ts",
+      "./declarations.d.ts",
+      "./next-env.d.ts"
+    ],
   },
-  "include": ["./src", "./stories", "declarations.d.ts"],
-  "rootDir": "./src"
+  "include": [
+    "./src",
+    "./stories",
+    "declarations.d.ts"
+  ],
+  "plugins": [
+    {
+      "name": "next"
+    }
+  ]
 }

apps/storefront/components/Tokens/TokenColor/TokenColor.tsx

@@ -4,7 +4,7 @@ import cl from 'clsx/lite';
 import { useRef } from 'react';
 import type { TransformedToken } from 'style-dictionary';
 
-import type { ColorNumber } from '../../../../../packages/cli/src/colors/types';
+import type { ColorNumber } from '@digdir/designsystemet/color';
 
 import classes from './TokenColor.module.css';
 interface TokenColorProps {

apps/storefront/layouts/MenuPageLayout/MenuPageLayout.tsx

@@ -48,7 +48,7 @@ const MenuPageLayout = ({ content, data, banner }: PageLayoutProps) => {
       )}
       <Container className={classes.page}>
         <div className={classes.left}>
-          <SidebarMenu routerPath={pathname} />
+          <SidebarMenu routerPath={pathname ?? ''} />
         </div>
         <main id='main' className={classes.right}>
           {data && (

apps/storefront/tsconfig.json

@@ -1,12 +1,23 @@
 {
+  "extends": "../../tsconfig.base.json",
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "@components": ["components"],
-      "@layouts": ["layouts"],
-      "@blog": ["app/bloggen/_components"]
+      "@components": [
+        "components"
+      ],
+      "@layouts": [
+        "layouts"
+      ],
+      "@blog": [
+        "app/bloggen/_components"
+      ]
     },
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -19,16 +30,23 @@
     "jsx": "preserve",
     "incremental": true,
     "forceConsistentCasingInFileNames": true,
-    "types": ["@digdir/designsystemet-theme/colors.d.ts"],
+    "types": [
+      "@digdir/designsystemet-theme/colors.d.ts",
+    ],
     "plugins": [
-      {
-        "name": "typescript-plugin-css-modules"
-      },
       {
         "name": "next"
       }
     ]
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    "**/*.css",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }

apps/theme/package.json

@@ -6,7 +6,8 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "types": "tsc --noEmit"
   },
   "dependencies": {
     "@digdir/designsystemet": "workspace:^",

package.json

@@ -28,7 +28,7 @@
     "build:storybook": "yarn workspace @designsystemet/storybook build",
     "build:storefront": "yarn workspace storefront build",
     "start:storefront": "yarn workspace storefront start",
-    "types": "yarn workspaces foreach -Ap --topological-dev --no-private run types",
+    "types": "yarn workspaces foreach -Ap --topological-dev run types",
     "types:react": "yarn workspace @digdir/designsystemet-react types",
     "types:storefront": "yarn workspace storefront types",
     "version-packages": "changeset version",

packages/cli/package.json

@@ -35,6 +35,7 @@
     "build:tokens:debug": "yarn clean:theme && tsx --inspect-brk ./bin/designsystemet.ts tokens build -p -t ../../design-tokens -o ../../packages/theme/brand",
     "build": "tsup && yarn build:types",
     "build:types": "tsc --emitDeclarationOnly --declaration",
+    "types": "tsc --noEmit",
     "test:tokens-create": "yarn designsystemet tokens create -m dominant:#007682 secondary:#ff0000 -n #003333 -s support1:#12404f support2:#0054a6 support3:#942977 -o ./test-tokens-create",
     "test:tokens-build": "yarn designsystemet tokens build -t ./test-tokens-create -o ./test-tokens-build",
     "test:tokens-create-and-build": "rimraf test-tokens-create && rimraf test-tokens-build && yarn test:tokens-create && yarn test:tokens-build",

packages/cli/src/colors/utils.ts

@@ -264,3 +264,15 @@ export const convertToHex = (color?: string): CssColor => {
   }
   return chroma(color).hex() as CssColor;
 };
+
+export const rgbToHex = (rgb: { r: number; g: number; b: number }) => {
+  return (
+    '#' +
+    [rgb.r, rgb.g, rgb.b]
+      .map((x) => {
+        const hex = Math.round(x * 255).toString(16);
+        return hex.length === 1 ? '0' + hex : hex;
+      })
+      .join('')
+  );
+};

packages/react/package.json

@@ -32,7 +32,7 @@
     "build": "yarn run clean && tsc -b tsconfig.lib.json --emitDeclarationOnly false && rollup -c --bundleConfigAsCjs",
     "clean": "rimraf dist && rimraf tsc-build && rimraf --glob \"*.tsbuildinfo\"",
     "copy-css-to-build": "copyfiles -u 1 ./src/**/*.css ./tsc-build/",
-    "types": "tsc -b"
+    "types": "tsc --noEmit"
   },
   "peerDependencies": {
     "react": ">=18.3.1",

plugins/figma/package.json

@@ -11,6 +11,7 @@
     "build": "npm run build:plugin && npm run build:ui",
     "build:ui": "vite build -c ./vite.config.ui.ts",
     "build:plugin": "vite build -c ./vite.config.plugin.ts",
+    "types": "tsc --noEmit",
     "types:src": "tsc",
     "types:node": "tsc -P tsconfig.node.json"
   },

plugins/figma/src/ui/pages/Theme/Theme.tsx

@@ -10,10 +10,9 @@ import {
 import { useEffect, useId, useState } from 'react';
 import { Link as RouterLink, useParams } from 'react-router-dom';
 
-import type { CssColor } from '@adobe/leonardo-contrast-colors';
 import { getDummyTheme } from '@common/dummyTheme';
 import { colorCliOptions } from '@digdir/designsystemet';
-import { generateThemeForColor } from '@digdir/designsystemet/color';
+import { type CssColor, generateThemeForColor } from '@digdir/designsystemet/color';
 import { type ColorTheme, useThemeStore } from '../../../common/store';
 import { themeToFigmaFormat } from '../../../common/utils';
 import classes from './Theme.module.css';

yarn.lock

@@ -3231,6 +3231,7 @@ __metadata:
     "@navikt/aksel-icons": "npm:^6.14.0"
     "@types/react-syntax-highlighter": "npm:^15.5.13"
     clsx: "npm:^2.1.1"
+    next: "npm:^14.2.5"
     prettier: "npm:^3.3.3"
     react-syntax-highlighter: "npm:^15.5.0"
     typescript: "npm:^5.5.4"