docs: Convert docs to typescript (#48)

* docs: Convert docs to typescript

* TS improvements

* Change files

.yarn/patches/@docusaurus-theme-common-npm-2.0.0-beta.15-aaa76f45ef

@@ -0,0 +1,117 @@
+diff --git a/lib/components/Collapsible/index.d.ts b/lib/components/Collapsible/index.d.ts
+index 048360eabdca9e50289ee886c7debc21ba05949a..1df99e04a6ce5c7dec39e0b198d82e9612e5388d 100644
+--- a/lib/components/Collapsible/index.d.ts
++++ b/lib/components/Collapsible/index.d.ts
+@@ -4,7 +4,7 @@
+  * This source code is licensed under the MIT license found in the
+  * LICENSE file in the root directory of this source tree.
+  */
+-import React, { type Dispatch, type SetStateAction, type ReactNode } from 'react';
++import React, {  Dispatch,  SetStateAction,  ReactNode } from 'react';
+ export declare type UseCollapsibleConfig = {
+     initialState: boolean | (() => boolean);
+ };
+diff --git a/lib/components/Details/index.d.ts b/lib/components/Details/index.d.ts
+index 36a1a482ccd3dd311e02eedb0656ac19e3957bdf..944a3c453bf51aa79b3e6c5cf06d8009680d12f3 100644
+--- a/lib/components/Details/index.d.ts
++++ b/lib/components/Details/index.d.ts
+@@ -4,7 +4,7 @@
+  * This source code is licensed under the MIT license found in the
+  * LICENSE file in the root directory of this source tree.
+  */
+-import { type ComponentProps, type ReactElement } from 'react';
++import {  ComponentProps,  ReactElement } from 'react';
+ export declare type DetailsProps = {
+     summary?: ReactElement;
+ } & ComponentProps<'details'>;
+diff --git a/lib/utils/announcementBarUtils.d.ts b/lib/utils/announcementBarUtils.d.ts
+index eece3b5f6bc71d0e96fb040f0264677e38e5d916..d24b6fc301644820cd471e308917d8ebca109687 100644
+--- a/lib/utils/announcementBarUtils.d.ts
++++ b/lib/utils/announcementBarUtils.d.ts
+@@ -4,7 +4,7 @@
+  * This source code is licensed under the MIT license found in the
+  * LICENSE file in the root directory of this source tree.
+  */
+-import { type ReactNode } from 'react';
++import { ReactNode } from 'react';
+ export declare const AnnouncementBarDismissStorageKey = "docusaurus.announcement.dismiss";
+ declare type AnnouncementBarAPI = {
+     readonly isActive: boolean;
+diff --git a/lib/utils/docSidebarItemsExpandedState.d.ts b/lib/utils/docSidebarItemsExpandedState.d.ts
+index c159b3c5a462dd3abc19d06a6d4cfe20dbb93b84..271174b4bb8d9908fcef6b4d94cf13e833bc7664 100644
+--- a/lib/utils/docSidebarItemsExpandedState.d.ts
++++ b/lib/utils/docSidebarItemsExpandedState.d.ts
+@@ -4,7 +4,7 @@
+  * This source code is licensed under the MIT license found in the
+  * LICENSE file in the root directory of this source tree.
+  */
+-import { type ReactNode } from 'react';
++import { ReactNode } from 'react';
+ declare type DocSidebarItemsExpandedState = {
+     expandedItem: number | null;
+     setExpandedItem: (a: number | null) => void;
+diff --git a/lib/utils/docsPreferredVersion/useDocsPreferredVersion.d.ts b/lib/utils/docsPreferredVersion/useDocsPreferredVersion.d.ts
+index e8dd2309f014ddd57a1ddb4c8e9d55a4354ae725..7cf7282de02630a4a69f39359aa671c9ffb78417 100644
+--- a/lib/utils/docsPreferredVersion/useDocsPreferredVersion.d.ts
++++ b/lib/utils/docsPreferredVersion/useDocsPreferredVersion.d.ts
+@@ -5,7 +5,7 @@
+  * LICENSE file in the root directory of this source tree.
+  */
+ /// <reference types="@docusaurus/plugin-content-docs" />
+-import { type GlobalVersion } from '@docusaurus/plugin-content-docs/client';
++import { GlobalVersion } from '@docusaurus/plugin-content-docs/client';
+ export declare function useDocsPreferredVersion(pluginId?: string | undefined): {
+     preferredVersion: GlobalVersion | null | undefined;
+     savePreferredVersionName: (versionName: string) => void;
+diff --git a/lib/utils/docsUtils.d.ts b/lib/utils/docsUtils.d.ts
+index c495b505d4cbac92e63e7bbf4b05d121370a7ffb..7a39a31a8c06de9af804e6d49f868da9e2ce1aeb 100644
+--- a/lib/utils/docsUtils.d.ts
++++ b/lib/utils/docsUtils.d.ts
+@@ -4,7 +4,7 @@
+  * This source code is licensed under the MIT license found in the
+  * LICENSE file in the root directory of this source tree.
+  */
+-import { type ReactNode } from 'react';
++import { ReactNode } from 'react';
+ import type { PropSidebar, PropSidebarItem, PropSidebarItemCategory, PropVersionDoc, PropVersionMetadata } from '@docusaurus/plugin-content-docs';
+ export declare const isDocsPluginEnabled: boolean;
+ declare const EmptyContextValue: unique symbol;
+diff --git a/lib/utils/mobileSecondaryMenu.d.ts b/lib/utils/mobileSecondaryMenu.d.ts
+index a2b62f353a1b5db60109ddc8de72ebd46bbd09d6..8bb9677c51181239dbb9c4fee63da4c7510aef2c 100644
+--- a/lib/utils/mobileSecondaryMenu.d.ts
++++ b/lib/utils/mobileSecondaryMenu.d.ts
+@@ -4,7 +4,7 @@
+  * This source code is licensed under the MIT license found in the
+  * LICENSE file in the root directory of this source tree.
+  */
+-import { type ReactNode, type ComponentType } from 'react';
++import { ReactNode, ComponentType } from 'react';
+ declare type ExtraProps = {
+     toggleSidebar: () => void;
+ };
+diff --git a/lib/utils/scrollUtils.d.ts b/lib/utils/scrollUtils.d.ts
+index 09f34f928666b813e863c08150b31105d988c55a..e081b4c8b8f340aab3a554807a6675876de90ba7 100644
+--- a/lib/utils/scrollUtils.d.ts
++++ b/lib/utils/scrollUtils.d.ts
+@@ -4,7 +4,7 @@
+  * This source code is licensed under the MIT license found in the
+  * LICENSE file in the root directory of this source tree.
+  */
+-import React, { type ReactNode } from 'react';
++import React, { ReactNode } from 'react';
+ /**
+  * We need a way to update the scroll position while ignoring scroll events
+  * without affecting Navbar/BackToTop visibility
+diff --git a/lib/utils/tabGroupChoiceUtils.d.ts b/lib/utils/tabGroupChoiceUtils.d.ts
+index 31046d523f4a759749d97c4fbc422f61d4ea9336..9271b79b8e748531bc6ff87a37d5e89643270da7 100644
+--- a/lib/utils/tabGroupChoiceUtils.d.ts
++++ b/lib/utils/tabGroupChoiceUtils.d.ts
+@@ -4,7 +4,7 @@
+  * This source code is licensed under the MIT license found in the
+  * LICENSE file in the root directory of this source tree.
+  */
+-import { type ReactNode } from 'react';
++import { ReactNode } from 'react';
+ declare type TabGroupChoiceContextValue = {
+     readonly tabGroupChoices: {
+         readonly [groupId: string]: string;

apps/website/project.json

@@ -17,6 +17,14 @@
         "cwd": "apps/website",
         "commands": [{ "command": "docusaurus start" }]
       }
+    },
+    "type-check": {
+      "executor": "@nrwl/workspace:run-commands",
+      "options": {
+        "cwd": "apps/website",
+        "commands": [{ "command": "tsc -b --pretty" }],
+        "outputPath": []
+      }
     }
   },
   "tags": []

apps/website/src/components/OutputTitle/index.js → apps/website/src/components/OutputTitle/index.tsx

@@ -3,11 +3,13 @@ import React from 'react';
 import { CogsIcon } from '../icons';
 import styles from './styles.module.css';
 
-export default function OutputTitle(props) {
+const OutpuTitle: React.FC = props => {
   return (
-    <div className={styles.container}>
+    <div className={styles['container']}>
       <CogsIcon />
       <span>{props.children}</span>
     </div>
   );
-}
+};
+
+export default OutpuTitle;

apps/website/src/components/Playground/index.js → apps/website/src/components/Playground/index.tsx

@@ -14,7 +14,11 @@ export default function Playground() {
       template="react"
       customSetup={{
         dependencies: { '@griffel/core': 'latest', 'highlight.js': 'latest', 'js-beautify': 'latest' },
-        files: { '/App.js': { code: AppCode, hidden: true }, '/Styles.js': { code: StylesCode, active: true } },
+        files: {
+          '/App.js': { code: AppCode, hidden: true },
+          // Template files are in JS but type checked, don't want unnecessary comments leaking into docs
+          '/Styles.js': { code: StylesCode.replace('//@ts-check\n', ''), active: true },
+        },
       }}
     >
       <SandpackLayout theme={sandpackTheme}>

apps/website/src/components/Playground/template/App.js

@@ -1,3 +1,5 @@
+//@ts-check
+
 import hljs from 'highlight.js/lib/core';
 import 'highlight.js/styles/vs.css';
 import beautify from 'js-beautify';
@@ -10,13 +12,18 @@ export default function App() {
   const [rules, setRules] = React.useState('');
   const ref = React.useRef(null);
   React.useEffect(() => {
+    /** @type import('@griffel/core').GriffelRenderer */
     const playgroundRenderer = {
       id: 'playground',
       insertCSSRules(cssRules) {
-        const raw = Object.values(cssRules).flat().join('\n');
+        const raw = Object.values(cssRules)
+          .reduce((acc, val) => acc.concat(val), [])
+          .join('\n');
         const prettified = beautify.css_beautify(raw, { indent_size: 2 });
         setRules(prettified);
       },
+      insertionCache: {},
+      styleElements: {},
     };
 
     styles({

apps/website/src/components/Playground/template/Styles.js

@@ -1,11 +1,12 @@
-import { makeStyles } from '@griffel/core';
+//@ts-check
+import { makeStyles, shorthands } from '@griffel/core';
 
 export default makeStyles({
   root: {
     backgroundColor: 'red',
     paddingLeft: '10px',
     '@media(forced-colors: active):': {
-      borderColor: 'transparent',
+      ...shorthands.borderColor('transparent'),
     },
   },
 });

apps/website/src/theme/Toggle/index.js → apps/website/src/theme/Toggle/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useColorMode } from '@docusaurus/theme-common';
-import useIsBrowser from '@docusaurus/useIsBrowser';
 
+import useIsBrowser from '@docusaurus/useIsBrowser';
 import { GithubIcon, MoonIcon, SunIcon } from '../../components/icons';
 import styles from './styles.module.css';
 
@@ -23,7 +23,7 @@ function ThemeToggle() {
   return (
     <button
       aria-label={ariaLabel}
-      className={styles.toggleButton}
+      className={styles['toggelButton']}
       disabled={disabled}
       onClick={handleClick}
       type="button"
@@ -37,7 +37,7 @@ function GithubLink() {
   return (
     <a
       aria-label="Go to Griffel GitHub page"
-      className={styles.githubLink}
+      className={styles['githubLink']}
       href="https://github.com/microsoft/griffel"
       target="_blank"
       rel="noopener noreferrer"
@@ -49,7 +49,7 @@ function GithubLink() {
 
 export default function () {
   return (
-    <div className={styles.container}>
+    <div className={styles['container']}>
       {/* Docusaurus does not support declaring JSX elements in Navbar configuration. */}
       {/* This is a hack to re-order Github link & Theme switcher. */}
       {/* The folder cannot be renamed as it's how swizzling works in Docusaurus: */}

apps/website/tsconfig.json

@@ -1,6 +1,17 @@
 {
-  "extends": "@tsconfig/docusaurus/tsconfig.json",
+  "extends": "../../tsconfig.base.json",
   "compilerOptions": {
-    "baseUrl": "."
-  }
+    "allowJs": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "jsx": "react",
+    "outDir": "../../dist/out-tsc",
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "types": ["environment", "static-assets", "@docusaurus/module-type-aliases", "@docusaurus/theme-classic"],
+  "include": ["./src/**/*.ts", "./src/**/*.tsx", "./src/**/*.js"]
 }

change/@griffel-babel-preset-1550fea4-75fd-4e1d-91be-6f6e354c48f9.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Enable pretty type-check output",
+  "packageName": "@griffel/babel-preset",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@griffel-core-f4f7d8d2-fbb4-4c0d-8015-01fcd065b460.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Enable pretty type-check output",
+  "packageName": "@griffel/core",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@griffel-jest-serializer-7f3bf76b-121c-44f2-92c9-bf38d52a4202.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Enable pretty type-check output",
+  "packageName": "@griffel/jest-serializer",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@griffel-react-392971f5-c184-48b0-82b9-d33deadbcf1c.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Enable pretty type-check output",
+  "packageName": "@griffel/react",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@griffel-webpack-loader-e5e40d4f-97fb-457c-b2cc-121c898ad1ea.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Enable pretty type-check output",
+  "packageName": "@griffel/webpack-loader",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

package.json

@@ -24,6 +24,7 @@
     "@babel/preset-typescript": "7.12.13",
     "@codesandbox/sandpack-react": "0.13.15",
     "@docusaurus/core": "2.0.0-beta.15",
+    "@docusaurus/module-type-aliases": "^2.0.0-beta.15",
     "@docusaurus/preset-classic": "2.0.0-beta.15",
     "@fluentui/bundle-size": "^1.1.4",
     "@nrwl/cli": "13.4.5",
@@ -45,8 +46,10 @@
     "@testing-library/jest-dom": "5.16.1",
     "@testing-library/react": "12.1.2",
     "@testing-library/react-hooks": "7.0.2",
+    "@tsconfig/docusaurus": "^1.0.4",
     "@types/babel__helper-plugin-utils": "7.10.0",
     "@types/jest": "27.0.2",
+    "@types/js-beautify": "^1.13.3",
     "@types/loader-utils": "2.0.3",
     "@types/node": "14.14.33",
     "@types/react": "17.0.30",
@@ -67,6 +70,7 @@
     "eslint-plugin-react-hooks": "4.2.0",
     "highlight.js": "11.4.0",
     "jest": "27.2.3",
+    "js-beautify": "^1.14.0",
     "nano-staged": "0.5.0",
     "prettier": "2.3.1",
     "prism-react-renderer": "1.2.1",
@@ -99,6 +103,7 @@
   "resolutions": {
     "@nrwl/web": "patch:@nrwl/web@npm:13.4.5#.yarn/patches/@nrwl-web-npm-13.4.5-d7e9ea40d2",
     "@nrwl/workspace": "patch:@nrwl/workspace@npm:13.4.5#.yarn/patches/@nrwl-workspace-npm-13.4.5-233a3ec85c",
-    "beachball": "patch:beachball@npm:2.21.0#.yarn/patches/beachball-npm-2.21.0-85c8ba3d6b"
+    "beachball": "patch:beachball@npm:2.21.0#.yarn/patches/beachball-npm-2.21.0-85c8ba3d6b",
+    "@docusaurus/[email protected]": "patch:@docusaurus/theme-common@npm:2.0.0-beta.15#.yarn/patches/@docusaurus-theme-common-npm-2.0.0-beta.15-aaa76f45ef"
   }
 }

packages/babel-preset/project.json

@@ -41,8 +41,7 @@
       "executor": "@nrwl/workspace:run-commands",
       "options": {
         "cwd": "packages/babel-preset",
-        "color": true,
-        "commands": [{ "command": "tsc -b" }],
+        "commands": [{ "command": "tsc -b --pretty" }],
         "outputPath": []
       }
     }

packages/core/project.json

@@ -58,8 +58,7 @@
       "executor": "@nrwl/workspace:run-commands",
       "options": {
         "cwd": "packages/core",
-        "color": true,
-        "commands": [{ "command": "tsc -b" }],
+        "commands": [{ "command": "tsc -b --pretty" }],
         "outputPath": []
       }
     }

packages/jest-serializer/project.json

@@ -34,8 +34,7 @@
       "executor": "@nrwl/workspace:run-commands",
       "options": {
         "cwd": "packages/jest-serializer",
-        "color": true,
-        "commands": [{ "command": "tsc -b" }],
+        "commands": [{ "command": "tsc -b --pretty" }],
         "outputPath": []
       }
     }

packages/react/project.json

@@ -97,8 +97,7 @@
       "executor": "@nrwl/workspace:run-commands",
       "options": {
         "cwd": "packages/react",
-        "color": true,
-        "commands": [{ "command": "tsc -b" }],
+        "commands": [{ "command": "tsc -b --pretty" }],
         "outputPath": []
       }
     }

packages/webpack-loader/project.json

@@ -34,8 +34,7 @@
       "executor": "@nrwl/workspace:run-commands",
       "options": {
         "cwd": "packages/webpack-loader",
-        "color": true,
-        "commands": [{ "command": "tsc -b" }],
+        "commands": [{ "command": "tsc -b --pretty" }],
         "outputPath": []
       }
     }