diff --git a/.husky/pre-commit b/.husky/pre-commit deleted file mode 100755 index c2f9eeedb..000000000 --- a/.husky/pre-commit +++ /dev/null @@ -1 +0,0 @@ -yarn pretty-quick --staged diff --git a/README.md b/README.md index 7064917db..c16a20cd3 100644 --- a/README.md +++ b/README.md @@ -105,7 +105,7 @@ Cheatsheet for using React with TypeScript. -### Setup +### Introduction #### Prerequisites diff --git a/docs/basic/setup.md b/docs/basic/setup.md index 45858e91e..c00e51320 100644 --- a/docs/basic/setup.md +++ b/docs/basic/setup.md @@ -1,6 +1,6 @@ --- id: setup -title: Setup +title: Introduction --- ## Prerequisites diff --git a/package.json b/package.json index cdbe53c0b..e83d38186 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,6 @@ "format": "prettier --write \"**/*.md\"", "format:check": "prettier --check \"**/*.md\"", "postinstall": "cd website && yarn", - "prepare": "husky", "start": "yarn --cwd website start", "build": "yarn --cwd website build", "serve": "yarn --cwd website serve" @@ -37,8 +36,6 @@ "yargs": "^18.0.0" }, "devDependencies": { - "husky": "^9.1.7", - "prettier": "^3.8.3", - "pretty-quick": "^4.2.2" + "prettier": "^3.8.3" } } diff --git a/website/docusaurus.config.js b/website/docusaurus.config.ts similarity index 78% rename from website/docusaurus.config.js rename to website/docusaurus.config.ts index 75efb842e..32fcaa440 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.ts @@ -1,22 +1,13 @@ -const { themes } = require("prism-react-renderer"); - -// List of projects/orgs using your project for the users page. -const users = [ - { - caption: "Docusaurus", - image: "https://docusaurus.io/img/docusaurus.svg", - infoLink: "https://docusaurus.io/", - pinned: true, - }, -]; +import { themes } from "prism-react-renderer"; +import type { Config } from "@docusaurus/types"; +import type * as Preset from "@docusaurus/preset-classic"; const setupDoc = "docs/basic/setup"; -module.exports = { +const config: Config = { favicon: "img/icon.png", title: "React TypeScript Cheatsheet", // Title for your website. - tagline: - "A cheatsheet for experienced React developers getting started with TypeScript", + tagline: "A cheatsheet for developers using React with TypeScript", url: "https://react-typescript-cheatsheet.netlify.app", // Your website URL baseUrl: "/", projectName: "react-typescript-cheatsheet", @@ -24,7 +15,7 @@ module.exports = { presets: [ [ - "@docusaurus/preset-classic", + "classic", { theme: { customCss: require.resolve("./src/css/custom.css"), @@ -37,8 +28,7 @@ module.exports = { editUrl: "https://github.com/typescript-cheatsheets/react/tree/main/docs", }, - // ... - }, + } satisfies Preset.Options, ], ], @@ -50,9 +40,6 @@ module.exports = { image: "https://user-images.githubusercontent.com/6764957/53868378-2b51fc80-3fb3-11e9-9cee-0277efe8a927.png", - // Equivalent to `docsSideNavCollapsible`. - // sidebarCollapsible: false, - prism: { defaultLanguage: "typescript", theme: themes.github, @@ -68,12 +55,17 @@ module.exports = { items: [ { to: setupDoc, - label: "Docs", + label: "Introduction", + position: "right", + }, + { + to: "docs/basic/getting-started/basic_type_example", + label: "Learn", position: "right", }, { - to: "help", - label: "Help", + to: "docs/reference/ComponentProps", + label: "API Reference", position: "right", }, { @@ -81,7 +73,6 @@ module.exports = { label: "Discord", position: "right", }, - // {to: 'blog', label: 'Blog', position: 'right'}, ], }, @@ -90,8 +81,6 @@ module.exports = { logo: { alt: "TypeScript Cheatsheets Logo", src: "img/icon.png", - // maxWidth: 128, - // style: { maxWidth: 128, maxHeight: 128 }, }, copyright: `Copyright © ${new Date().getFullYear()} TypeScript Cheatsheets`, links: [ @@ -102,6 +91,14 @@ module.exports = { label: "Introduction", to: setupDoc, }, + { + label: "Learn", + to: "docs/basic/getting-started/basic_type_example", + }, + { + label: "API Reference", + to: "docs/reference/ComponentProps", + }, ], }, { @@ -111,14 +108,6 @@ module.exports = { label: "Stack Overflow", href: "https://stackoverflow.com/questions/tagged/typescript", }, - { - label: "User Showcase", - to: "users", - }, - { - label: "Help", - to: "help", - }, { label: "Contributors", to: "contributors", @@ -142,13 +131,11 @@ module.exports = { `, }, { - // label: "Discord", html: ` Discord `, }, { - // label: "Spread the word", html: ` X `, @@ -162,18 +149,12 @@ module.exports = { apiKey: "9a22585d1841d2fa758da919cd08a764", indexName: "react-typescript-cheatsheet", appId: "J65EL4UPXZ", - algoliaOptions: { - //... }, - }, }, - }, + } satisfies Preset.ThemeConfig, customFields: { firstDoc: setupDoc, - - // TODO useless user showcase page ? - users, - addUserUrl: - "https://github.com/typescript-cheatsheets/react/blob/main/website/docusaurus.config.js", }, }; + +export default config; diff --git a/website/package.json b/website/package.json index d7da3db54..81a600a0e 100644 --- a/website/package.json +++ b/website/package.json @@ -18,6 +18,13 @@ "react": "^19.2.0", "react-dom": "^19.2.0" }, + "devDependencies": { + "@docusaurus/tsconfig": "^3.10.1", + "@docusaurus/types": "^3.10.1", + "@types/react": "^19.2.0", + "@types/react-dom": "^19.2.0", + "typescript": "^6.0.3" + }, "browserslist": { "production": [ ">0.2%", diff --git a/website/src/css/custom.css b/website/src/css/custom.css index 542084665..709025031 100644 --- a/website/src/css/custom.css +++ b/website/src/css/custom.css @@ -54,11 +54,75 @@ main details:hover { } .homePageBtns { + display: flex; + flex-wrap: wrap; + gap: 1rem; + justify-content: center; + margin-top: 2rem; +} + +.homeSectionGrid { display: grid; - gap: 20px; + gap: 1.5rem; + grid-template-columns: 1fr; } -@media (min-width: 480px) { - .homePageBtns { - grid-template-columns: 1fr 1fr; +@media (min-width: 768px) { + .homeSectionGrid { + grid-template-columns: repeat(3, 1fr); } } + +.homeSectionCard { + display: block; + padding: 1.5rem; + border: 1px solid var(--ifm-color-emphasis-300); + border-radius: var(--ifm-card-border-radius, 0.5rem); + background: var(--ifm-background-surface-color); + color: inherit; + text-decoration: none; + transition: + transform 0.15s ease, + border-color 0.15s ease, + box-shadow 0.15s ease; +} +.homeSectionCard:hover { + text-decoration: none; + color: inherit; + border-color: var(--ifm-color-primary); + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); +} +.homeSectionCard h3 { + margin: 0 0 0.5rem; + color: var(--ifm-color-primary); +} +.homeSectionCard p { + margin: 0; + color: var(--ifm-color-emphasis-700); + font-size: 0.95rem; +} + +.homeTopicsGrid { + display: flex; + flex-wrap: wrap; + gap: 0.75rem; + justify-content: center; +} +.homeTopicLink { + padding: 0.5rem 1rem; + border: 1px solid var(--ifm-color-emphasis-300); + border-radius: 999px; + font-size: 0.9rem; + color: var(--ifm-color-emphasis-800); + text-decoration: none; + transition: + border-color 0.15s ease, + color 0.15s ease, + background 0.15s ease; +} +.homeTopicLink:hover { + border-color: var(--ifm-color-primary); + color: var(--ifm-color-primary); + background: var(--ifm-color-primary-contrast-background, transparent); + text-decoration: none; +} diff --git a/website/src/pages/help.js b/website/src/pages/help.js deleted file mode 100644 index 18f343b95..000000000 --- a/website/src/pages/help.js +++ /dev/null @@ -1,60 +0,0 @@ -import React from "react"; -import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; -import useBaseUrl from "@docusaurus/useBaseUrl"; -import Link from "@docusaurus/Link"; -import Layout from "@theme/Layout"; - -const SupportLink = ({ title, content }) => ( -
-

{title}

-
{content}
-
-); - -export default function Help() { - const { siteConfig } = useDocusaurusContext(); - - const supportLinks = [ - { - title: "Browse Docs", - content: ( - <> - Learn more using the{" "} - - documentation on this site - - . - - ), - }, - { - title: "Join the community", - content: "Ask questions about the documentation and project", - }, - { - title: "Stay up to date", - content: "Find out what's new with this project", - }, - ]; - - return ( - -
-
-
-

Need help?

-
-

This project is maintained by a dedicated group of people.

-
- -
- {supportLinks.map((supportLink, i) => ( -
- -
- ))} -
-
- - ); -} diff --git a/website/src/pages/index.js b/website/src/pages/index.js deleted file mode 100644 index b519a5c23..000000000 --- a/website/src/pages/index.js +++ /dev/null @@ -1,40 +0,0 @@ -import React from "react"; -import Link from "@docusaurus/Link"; -import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; -import useBaseUrl from "@docusaurus/useBaseUrl"; - -import Layout from "@theme/Layout"; - -export default function Home() { - const { siteConfig } = useDocusaurusContext(); - return ( - -
-
-
-

{siteConfig.title}

-

{siteConfig.tagline}

-
-
- - Getting started - - - Join Official Discord - -
-
-
- - ); -} diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx new file mode 100644 index 000000000..026f72f4b --- /dev/null +++ b/website/src/pages/index.tsx @@ -0,0 +1,104 @@ +import type { ReactNode } from "react"; +import Link from "@docusaurus/Link"; +import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; + +import Layout from "@theme/Layout"; + +type Section = { + title: string; + description: string; + to: string; +}; + +type Topic = { + label: string; + to: string; +}; + +const sections: Section[] = [ + { + title: "Introduction", + description: + "Get started with React and TypeScript using Next.js, Remix, Gatsby, or Expo.", + to: "/docs/basic/setup", + }, + { + title: "Learn", + description: + "Typing component props, hooks, class components, defaultProps, forms and events, context, refs, portals, error boundaries, concurrent rendering, and reusable patterns.", + to: "/docs/basic/getting-started/basic_type_example", + }, + { + title: "API Reference", + description: + "Focused references for the @types/react types you'll reach for most: ComponentProps, CSSProperties, ReactNode, and Ref.", + to: "/docs/reference/ComponentProps", + }, +]; + +const popularTopics: Topic[] = [ + { label: "Hooks", to: "/docs/basic/getting-started/hooks" }, + { + label: "Function components", + to: "/docs/basic/getting-started/function_components", + }, + { + label: "Forms and events", + to: "/docs/basic/getting-started/forms_and_events", + }, + { + label: "forwardRef / Ref as a prop", + to: "/docs/basic/getting-started/forward_and_create_ref", + }, + { label: "Context", to: "/docs/basic/getting-started/context" }, + { + label: "Useful patterns by use case", + to: "/docs/basic/getting-started/patterns_by_usecase", + }, +]; + +export default function Home(): ReactNode { + const { siteConfig } = useDocusaurusContext(); + return ( + +
+
+

{siteConfig.title}

+

{siteConfig.tagline}

+
+
+ +
+
+

What's inside

+
+ {sections.map((section) => ( + +

{section.title}

+

{section.description}

+ + ))} +
+
+ +
+

Popular topics

+
+ {popularTopics.map((topic) => ( + + {topic.label} + + ))} +
+
+
+ + ); +} diff --git a/website/src/pages/users.js b/website/src/pages/users.js deleted file mode 100644 index 975f24117..000000000 --- a/website/src/pages/users.js +++ /dev/null @@ -1,50 +0,0 @@ -import React from "react"; -import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; -import Layout from "@theme/Layout"; - -// TODO useless user showcase page ? -export default function Users() { - const { siteConfig } = useDocusaurusContext(); - const { users, addUserUrl } = siteConfig.customFields; - - return ( - -
-
-
-

Who is Using This?

-

This project is used by many folks

-
-
- {users && users.length>0&& users.map((user) => ( - - {user.caption} - - ))} -
-

Are you using this project?

- - Add your company - -
-
- - ); -} diff --git a/website/tsconfig.json b/website/tsconfig.json new file mode 100644 index 000000000..ccf9cf695 --- /dev/null +++ b/website/tsconfig.json @@ -0,0 +1,7 @@ +{ + "extends": "@docusaurus/tsconfig", + "compilerOptions": { + "ignoreDeprecations": "6.0" + }, + "exclude": [".docusaurus", "build"] +} diff --git a/website/yarn.lock b/website/yarn.lock index f5329c758..a8132fa7f 100644 --- a/website/yarn.lock +++ b/website/yarn.lock @@ -1906,7 +1906,12 @@ fs-extra "^11.1.1" tslib "^2.6.0" -"@docusaurus/types@3.10.1": +"@docusaurus/tsconfig@^3.10.1": + version "3.10.1" + resolved "https://registry.yarnpkg.com/@docusaurus/tsconfig/-/tsconfig-3.10.1.tgz#1db31b4a4a5c914bdffa80070a35b6365d34f2e8" + integrity sha512-rYvB7yqkdqWIpAbDzQljGfM4cDBkLTbhmagZBEcsyj6oPUsz47lmW2pYdN1j+7sGFgltbAmQH62xfbrij4Eh6Q== + +"@docusaurus/types@3.10.1", "@docusaurus/types@^3.10.1": version "3.10.1" resolved "https://registry.yarnpkg.com/@docusaurus/types/-/types-3.10.1.tgz#d42837938ae43ca2be0ca47e63e00476b5eb94be" integrity sha512-XYMK8k1szDCFMw2V+Xyen0g7Kee1sP3dtFnl7vkGkZOkeAJ/oPDQPL8iz4HBKOo/cwU8QeV6onVjMqtP+tFzsw== @@ -2799,6 +2804,11 @@ resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.7.tgz#50ae4353eaaddc04044279812f52c8c65857dbcb" integrity sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ== +"@types/react-dom@^19.2.0": + version "19.2.3" + resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-19.2.3.tgz#c1e305d15a52a3e508d54dca770d202cb63abf2c" + integrity sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ== + "@types/react-router-config@*", "@types/react-router-config@^5.0.7": version "5.0.11" resolved "https://registry.yarnpkg.com/@types/react-router-config/-/react-router-config-5.0.11.tgz#2761a23acc7905a66a94419ee40294a65aaa483a" @@ -2825,7 +2835,7 @@ "@types/history" "^4.7.11" "@types/react" "*" -"@types/react@*": +"@types/react@*", "@types/react@^19.2.0": version "19.2.14" resolved "https://registry.yarnpkg.com/@types/react/-/react-19.2.14.tgz#39604929b5e3957e3a6fa0001dafb17c7af70bad" integrity sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w== @@ -8701,6 +8711,11 @@ typedarray-to-buffer@^3.1.5: dependencies: is-typedarray "^1.0.0" +typescript@^6.0.3: + version "6.0.3" + resolved "https://registry.yarnpkg.com/typescript/-/typescript-6.0.3.tgz#90251dc007916e972786cb94d74d15b185577d21" + integrity sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw== + "undici-types@>=7.24.0 <7.24.7": version "7.24.6" resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-7.24.6.tgz#61275b485d7fd4e9d269c7cf04ec2873c9cc0f91" diff --git a/yarn.lock b/yarn.lock index ee0e49b58..ee20276cc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2,11 +2,6 @@ # yarn lockfile v1 -"@pkgr/core@^0.2.7": - version "0.2.9" - resolved "https://registry.yarnpkg.com/@pkgr/core/-/core-0.2.9.tgz#d229a7b7f9dac167a156992ef23c7f023653f53b" - integrity sha512-QNqXyfVS2wm9hweSYD2O7F0G06uurj9kZ96TRQE5Y9hU7+tgdZwIkbAKc5Ocy1HxEY2kuDQa6cQ1WRs/O5LFKA== - ansi-red@^0.1.1: version "0.1.1" resolved "https://registry.yarnpkg.com/ansi-red/-/ansi-red-0.1.1.tgz#8c638f9d1080800a353c9c28c8a81ca4705d946c" @@ -171,16 +166,6 @@ gulp-header@^1.7.1: lodash.template "^4.4.0" through2 "^2.0.0" -husky@^9.1.7: - version "9.1.7" - resolved "https://registry.yarnpkg.com/husky/-/husky-9.1.7.tgz#d46a38035d101b46a70456a850ff4201344c0b2d" - integrity sha512-5gs5ytaNjBrh5Ow3zrvdUUY+0VxIuWVL4i9irt6friV+BqdCfmV11CQTWMiBYWHbXhco+J1kHfTOUkePhCDvMA== - -ignore@^7.0.5: - version "7.0.5" - resolved "https://registry.yarnpkg.com/ignore/-/ignore-7.0.5.tgz#4cb5f6cd7d4c7ab0365738c7aea888baa6d7efd9" - integrity sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg== - inherits@^2.0.3, inherits@~2.0.3: version "2.0.4" resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c" @@ -337,11 +322,6 @@ mixin-deep@^1.1.3: for-in "^1.0.2" is-extendable "^1.0.1" -mri@^1.2.0: - version "1.2.0" - resolved "https://registry.yarnpkg.com/mri/-/mri-1.2.0.tgz#6721480fec2a11a4889861115a48b6cbe7cc8f0b" - integrity sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA== - object.pick@^1.2.0: version "1.3.0" resolved "https://registry.yarnpkg.com/object.pick/-/object.pick-1.3.0.tgz#87a10ac4c1694bd2e1cbf53591a66141fb5dd747" @@ -349,34 +329,11 @@ object.pick@^1.2.0: dependencies: isobject "^3.0.1" -picocolors@^1.1.1: - version "1.1.1" - resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b" - integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA== - -picomatch@^4.0.2: - version "4.0.4" - resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-4.0.4.tgz#fd6f5e00a143086e074dffe4c924b8fb293b0589" - integrity sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A== - prettier@^3.8.3: version "3.8.3" resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.8.3.tgz#560f2de55bf01b4c0503bc629d5df99b9a1d09b0" integrity sha512-7igPTM53cGHMW8xWuVTydi2KO233VFiTNyF5hLJqpilHfmn8C8gPf+PS7dUT64YcXFbiMGZxS9pCSxL/Dxm/Jw== -pretty-quick@^4.2.2: - version "4.2.2" - resolved "https://registry.yarnpkg.com/pretty-quick/-/pretty-quick-4.2.2.tgz#0fc31da666f182fe14e119905fc9829b5b85a234" - integrity sha512-uAh96tBW1SsD34VhhDmWuEmqbpfYc/B3j++5MC/6b3Cb8Ow7NJsvKFhg0eoGu2xXX+o9RkahkTK6sUdd8E7g5w== - dependencies: - "@pkgr/core" "^0.2.7" - ignore "^7.0.5" - mri "^1.2.0" - picocolors "^1.1.1" - picomatch "^4.0.2" - tinyexec "^0.3.2" - tslib "^2.8.1" - process-nextick-args@~2.0.0: version "2.0.1" resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2" @@ -480,11 +437,6 @@ through2@^2.0.0: readable-stream "~2.3.6" xtend "~4.0.1" -tinyexec@^0.3.2: - version "0.3.2" - resolved "https://registry.yarnpkg.com/tinyexec/-/tinyexec-0.3.2.tgz#941794e657a85e496577995c6eef66f53f42b3d2" - integrity sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA== - to-object-path@^0.3.0: version "0.3.0" resolved "https://registry.yarnpkg.com/to-object-path/-/to-object-path-0.3.0.tgz#297588b7b0e7e0ac08e04e672f85c1f4999e17af" @@ -497,11 +449,6 @@ toml@^2.3.2: resolved "https://registry.yarnpkg.com/toml/-/toml-2.3.6.tgz#25b0866483a9722474895559088b436fd11f861b" integrity sha512-gVweAectJU3ebq//Ferr2JUY4WKSDe5N+z0FvjDncLGyHmIDoxgY/2Ie4qfEIDm4IS7OA6Rmdm7pdEEdMcV/xQ== -tslib@^2.8.1: - version "2.8.1" - resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f" - integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w== - typedarray@^0.0.6: version "0.0.6" resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"