From 33861776a9416dc9348350253406215d45e82efd Mon Sep 17 00:00:00 2001 From: Alireza Date: Sat, 3 Aug 2024 12:48:20 +0200 Subject: [PATCH] chore: type check website as well --- .github/workflows/CI.yaml | 2 +- package.json | 2 +- packages/example-app/package.json | 4 +-- packages/jui/package.json | 6 ++-- .../website/src/components/ExampleContext.tsx | 19 +++++++++---- .../src/components/component-linking.tsx | 6 ++-- .../pages/_index/WindowFrame/WindowFrame.tsx | 2 +- packages/website/src/pages/index.tsx | 4 +-- .../src/theme/CodeBlock/Expandable.tsx | 10 ++++--- .../src/theme/CodeBlock/Playground.tsx | 3 +- packages/website/tsconfig.json | 28 +++++++++++++++---- tsconfig.json | 2 +- 12 files changed, 58 insertions(+), 30 deletions(-) diff --git a/.github/workflows/CI.yaml b/.github/workflows/CI.yaml index b87426ab..516b6775 100644 --- a/.github/workflows/CI.yaml +++ b/.github/workflows/CI.yaml @@ -47,7 +47,7 @@ jobs: run: yarn install --immutable - name: Type Check ʦ - run: yarn run type-check + run: yarn run typecheck - name: Linting 🕵 run: yarn run lint diff --git a/package.json b/package.json index dc9bfa71..1d4f84a4 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "packages/*" ], "scripts": { - "type-check": "yarn workspaces foreach run type-check", + "typecheck": "yarn workspaces foreach run typecheck", "test": "yarn workspaces foreach run test", "cypress:component": "yarn workspaces foreach run cypress:component", "cypress:e2e": "yarn workspaces foreach run cypress:e2e", diff --git a/packages/example-app/package.json b/packages/example-app/package.json index b21d77cc..0512b93b 100644 --- a/packages/example-app/package.json +++ b/packages/example-app/package.json @@ -5,9 +5,9 @@ "scripts": { "dev": "../../node_modules/.bin/parcel serve", "serve": "PORT=1234 ../../node_modules/.bin/serve ./dist", - "jest:type-check": "tsc --project tsconfig.jest.json", + "jest:typecheck": "tsc --project tsconfig.jest.json", "test": "jest", - "type-check": "tsc --project tsconfig.app.json && yarn run jest:type-check", + "typecheck": "tsc --project tsconfig.app.json && yarn run jest:typecheck", "build": "../../node_modules/.bin/parcel build" }, "source": "src/index.html", diff --git a/packages/jui/package.json b/packages/jui/package.json index 26a0fd1c..8efc6872 100644 --- a/packages/jui/package.json +++ b/packages/jui/package.json @@ -26,16 +26,16 @@ "storybook:build": "storybook build", "storybook:typecheck": "tsc --project tsconfig.stories.json", "test": "yarn run jest", - "type-check": "tsc --project tsconfig.lib.json && yarn run storybook:typecheck && yarn run cypress:type-check && yarn run jest:type-check", + "typecheck": "tsc --project tsconfig.lib.json && yarn run storybook:typecheck && yarn run cypress:typecheck && yarn run jest:typecheck", "jest": "jest", - "jest:type-check": "tsc --project tsconfig.jest.json", + "jest:typecheck": "tsc --project tsconfig.jest.json", "jest:watch": "jest --watch", "generate:known-theme-props": "node ./scripts/generate-known-theme-properties.js", "generate:component": "hygen component new", "cypress:component": "ELECTRON_EXTRA_LAUNCH_ARGS=--disable-color-correct-rendering percy exec -- cypress run --component --browser=electron", "cypress:e2e": "percy exec -- cypress run --e2e --browser=electron", "cypress:open": "ELECTRON_EXTRA_LAUNCH_ARGS=--disable-color-correct-rendering cypress open --browser=electron", - "cypress:type-check": "tsc --project tsconfig.cypress.json && tsc --project tsconfig.cypress-e2e.json", + "cypress:typecheck": "tsc --project tsconfig.cypress.json && tsc --project tsconfig.cypress-e2e.json", "api-docs:extract": "yarn api-extractor run -c ./api-extractor.json --local", "parcel": "../../node_modules/.bin/parcel", "api-extractor": "../../node_modules/.bin/api-extractor" diff --git a/packages/website/src/components/ExampleContext.tsx b/packages/website/src/components/ExampleContext.tsx index 898ccf00..59a8d058 100644 --- a/packages/website/src/components/ExampleContext.tsx +++ b/packages/website/src/components/ExampleContext.tsx @@ -36,12 +36,15 @@ export const ExampleContext: React.FC<{ /** * TODO: add a surrounding UI for examples, with tools for theme selection for example. */ -export const Example: React.FC = ({ children }) => ( +export const Example: React.FC<{ children: React.ReactNode }> = ({ + children, +}) => (
theme.color("*.background")}; + background: ${({ theme }: { theme: Theme }) => + theme.color("*.background")}; `} > {children} @@ -86,10 +89,14 @@ function undoUseKeyboardNavigation() { document .querySelectorAll("link[rel=stylesheet]") .forEach((linkEl) => { - for (let i = 0; i < linkEl.sheet.cssRules.length; i++) { - const rule = linkEl.sheet.cssRules.item(i); - if (rule.cssText?.startsWith("body:not(.navigation-with-keyboard)")) { - linkEl.sheet.deleteRule(i); // We can change the rule to only disable it within the boundary of example + if (linkEl.sheet) { + for (let i = 0; i < linkEl.sheet.cssRules.length; i++) { + const rule = linkEl.sheet.cssRules.item(i); + if ( + rule?.cssText?.startsWith("body:not(.navigation-with-keyboard)") + ) { + linkEl.sheet.deleteRule(i); // We can change the rule to only disable it within the boundary of example + } } } }); diff --git a/packages/website/src/components/component-linking.tsx b/packages/website/src/components/component-linking.tsx index 04add986..691796e6 100644 --- a/packages/website/src/components/component-linking.tsx +++ b/packages/website/src/components/component-linking.tsx @@ -8,7 +8,7 @@ function useDocs() { return ( useDocusaurusContext().globalData["docusaurus-plugin-content-docs"] .default as GlobalPluginData - ).versions.find((version) => version.name === "current").docs; + ).versions.find((version) => version.name === "current")?.docs; } /** @@ -19,8 +19,8 @@ function useDocs() { export function useComponentLinkMap(): { [componentName: string]: string } { const docs = useDocs(); return useMemo(() => { - const linkMap = {}; - docs.forEach((doc) => { + const linkMap: Record = {}; + docs?.forEach((doc) => { // maybe change the criteria based on sidebar later, if components are moved to a dedicated sidebar const componentName = doc.id.match(/components\/(.*)/)?.[1]; if (componentName) { diff --git a/packages/website/src/pages/_index/WindowFrame/WindowFrame.tsx b/packages/website/src/pages/_index/WindowFrame/WindowFrame.tsx index 89355dee..c86249d4 100644 --- a/packages/website/src/pages/_index/WindowFrame/WindowFrame.tsx +++ b/packages/website/src/pages/_index/WindowFrame/WindowFrame.tsx @@ -11,7 +11,7 @@ export function WindowFrame({ children: React.ReactNode; title?: React.ReactNode; } & Pick, "style" | "className">) { - const onLinkClick = (e) => e.preventDefault(); + const onLinkClick = (e: React.MouseEvent) => e.preventDefault(); return (
diff --git a/packages/website/src/pages/index.tsx b/packages/website/src/pages/index.tsx index 414ebfb7..da3364c3 100644 --- a/packages/website/src/pages/index.tsx +++ b/packages/website/src/pages/index.tsx @@ -13,9 +13,9 @@ import { PageSection2 as SectionType, } from "./_index/PageSection2"; -const demoAppClickHandler = (e) => { +const demoAppClickHandler = (e: React.MouseEvent) => { e.preventDefault(); - document.getElementById("demo-app").scrollIntoView({ behavior: "smooth" }); + document.getElementById("demo-app")?.scrollIntoView({ behavior: "smooth" }); }; function HomepageHeader() { const { siteConfig } = useDocusaurusContext(); diff --git a/packages/website/src/theme/CodeBlock/Expandable.tsx b/packages/website/src/theme/CodeBlock/Expandable.tsx index 1b8b2765..831d7ecf 100644 --- a/packages/website/src/theme/CodeBlock/Expandable.tsx +++ b/packages/website/src/theme/CodeBlock/Expandable.tsx @@ -42,11 +42,13 @@ export function Expandable({ isExpandable: boolean; setIsExpandable: (isExpandable: boolean) => void; }) { - const ref = useRef(); + const ref = useRef(null); useEffect(() => { - const expandable = ref.current?.scrollHeight > ref.current?.offsetHeight; - if (expandable !== isExpandable) { - setIsExpandable(expandable); + if (ref.current) { + const expandable = ref.current?.scrollHeight > ref.current?.offsetHeight; + if (expandable !== isExpandable) { + setIsExpandable(expandable); + } } }); return ( diff --git a/packages/website/src/theme/CodeBlock/Playground.tsx b/packages/website/src/theme/CodeBlock/Playground.tsx index 8a6a7104..ea6ea062 100644 --- a/packages/website/src/theme/CodeBlock/Playground.tsx +++ b/packages/website/src/theme/CodeBlock/Playground.tsx @@ -175,6 +175,7 @@ function EditorWithHeader() { export default function Playground({ children, transformCode, + ref, ...props }: Props): JSX.Element { const prismTheme = usePrismTheme(); @@ -183,7 +184,7 @@ export default function Playground({ return ( <> -
+