From a73bf416bbb7b978a44b48010824c365552a9a0b Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Thu, 12 Dec 2024 12:04:29 +0100 Subject: [PATCH] ci: :construction_worker: Add type checks to PR checks A simple way to type checking all our projects --- .github/workflows/checks.yml | 6 ++- .github/workflows/test.yml | 2 +- apps/_components/declarations.d.ts | 4 ++ apps/_components/package.json | 1 + apps/_components/src/Header/Header.tsx | 2 +- apps/_components/tsconfig.json | 19 ++++++++-- .../Tokens/TokenColor/TokenColor.tsx | 2 +- .../layouts/MenuPageLayout/MenuPageLayout.tsx | 2 +- apps/storefront/tsconfig.json | 38 ++++++++++++++----- apps/theme/package.json | 3 +- package.json | 2 +- packages/cli/package.json | 1 + packages/cli/src/colors/utils.ts | 12 ++++++ packages/react/package.json | 2 +- plugins/figma/package.json | 1 + plugins/figma/src/ui/pages/Theme/Theme.tsx | 3 +- yarn.lock | 1 + 17 files changed, 77 insertions(+), 24 deletions(-) create mode 100644 apps/_components/declarations.d.ts diff --git a/.github/workflows/checks.yml b/.github/workflows/checks.yml index b4c9f56879..88d6361258 100644 --- a/.github/workflows/checks.yml +++ b/.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 . diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index e44e784bfc..b9dee660e6 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -13,7 +13,7 @@ permissions: pull-requests: write jobs: - checks: + test: name: Build & test runs-on: ubuntu-latest steps: diff --git a/apps/_components/declarations.d.ts b/apps/_components/declarations.d.ts new file mode 100644 index 0000000000..a1fdb07cd7 --- /dev/null +++ b/apps/_components/declarations.d.ts @@ -0,0 +1,4 @@ +declare module '*.css' { + const styles: { [className: string]: string }; + export default styles; +} diff --git a/apps/_components/package.json b/apps/_components/package.json index c5ff28ac76..3d83163974 100644 --- a/apps/_components/package.json +++ b/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" }, diff --git a/apps/_components/src/Header/Header.tsx b/apps/_components/src/Header/Header.tsx index 9fe920f1ac..beba9b29b1 100644 --- a/apps/_components/src/Header/Header.tsx +++ b/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', )} diff --git a/apps/_components/tsconfig.json b/apps/_components/tsconfig.json index 7416f49ff6..f1e82e83c6 100644 --- a/apps/_components/tsconfig.json +++ b/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" + } + ] } diff --git a/apps/storefront/components/Tokens/TokenColor/TokenColor.tsx b/apps/storefront/components/Tokens/TokenColor/TokenColor.tsx index 1ebe4513a7..00b13e6cab 100644 --- a/apps/storefront/components/Tokens/TokenColor/TokenColor.tsx +++ b/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 { diff --git a/apps/storefront/layouts/MenuPageLayout/MenuPageLayout.tsx b/apps/storefront/layouts/MenuPageLayout/MenuPageLayout.tsx index 92fdb95712..8141ac497c 100644 --- a/apps/storefront/layouts/MenuPageLayout/MenuPageLayout.tsx +++ b/apps/storefront/layouts/MenuPageLayout/MenuPageLayout.tsx @@ -48,7 +48,7 @@ const MenuPageLayout = ({ content, data, banner }: PageLayoutProps) => { )}
- +
{data && ( diff --git a/apps/storefront/tsconfig.json b/apps/storefront/tsconfig.json index 0e3ca35ddd..a30167788e 100644 --- a/apps/storefront/tsconfig.json +++ b/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" + ] } diff --git a/apps/theme/package.json b/apps/theme/package.json index 5fcb75675a..090e4b317b 100644 --- a/apps/theme/package.json +++ b/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:^", diff --git a/package.json b/package.json index e6b0a230de..cdc25d7b2e 100644 --- a/package.json +++ b/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", diff --git a/packages/cli/package.json b/packages/cli/package.json index a85e28dc97..48e5d4adf9 100644 --- a/packages/cli/package.json +++ b/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", diff --git a/packages/cli/src/colors/utils.ts b/packages/cli/src/colors/utils.ts index b1c60ba84e..2f0d9f9978 100644 --- a/packages/cli/src/colors/utils.ts +++ b/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('') + ); +}; diff --git a/packages/react/package.json b/packages/react/package.json index f924d4d472..b5df507a40 100644 --- a/packages/react/package.json +++ b/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", diff --git a/plugins/figma/package.json b/plugins/figma/package.json index 62b10ba9cb..2cdba6e79a 100644 --- a/plugins/figma/package.json +++ b/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" }, diff --git a/plugins/figma/src/ui/pages/Theme/Theme.tsx b/plugins/figma/src/ui/pages/Theme/Theme.tsx index 51b19fe9e0..73534426a1 100644 --- a/plugins/figma/src/ui/pages/Theme/Theme.tsx +++ b/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'; diff --git a/yarn.lock b/yarn.lock index 03459f5752..25d5ef3447 100644 --- a/yarn.lock +++ b/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"