From e966e565d29c0f846dacab811e9fb1fcf8803432 Mon Sep 17 00:00:00 2001 From: Giampaolo Bellavite Date: Sun, 22 Sep 2024 11:02:44 -0500 Subject: [PATCH] docs: add development, contributing instructions --- CONTRIBUTING.md | 89 ++++++++++++++++----- examples-app/package.json | 2 +- website/docs/development/code-of-conduct.md | 12 ++- website/docs/development/contributing.md | 9 +++ website/docs/development/contributing.mdx | 11 --- website/sidebars.ts | 22 ++--- 6 files changed, 95 insertions(+), 50 deletions(-) create mode 100644 website/docs/development/contributing.md delete mode 100644 website/docs/development/contributing.mdx diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6c35f6c4c9..e3e886c54b 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,22 +1,71 @@ # Contributing to DayPicker -You are welcome to join the [DayPicker -contributors](https://github.com/gpbl/react-day-picker/graphs/contributors), -help us building the best date picker for React. - -There are many ways to help the development of DayPicker: - -- Improve our build tools and Github actions -- Opening PRs with new features, bug fixes and improved rendering performance -- Align the source code to the latest Typescript / React practices -- Helping with unit and integration tests -- Proofreading [our website](https://daypicker.dev/) and the - code documentation in the source files -- Making the website more stylish -- Help maintaining [the repository](https://github.com/gpbl/react-day-picker) on Github and triaging issues and PRs -- Answering our [support questions](https://github.com/gpbl/react-day-picker/discussions/categories/support) -- [Sponsoring the project](https://github.com/sponsors/gpbl) - -[Send a -message](https://github.com/gpbl/react-day-picker/discussions) -in our discussions page to present yourself! +You are welcome to join the [DayPicker contributors](https://github.com/gpbl/react-day-picker/graphs/contributors) and help us build the best date picker for React. + +## Ways to Contribute + +There are many ways to contribute to the development of DayPicker: + +- Improve our build tools and GitHub actions +- Open PRs with new features, bug fixes, and improved rendering performance +- Align the source code with the latest TypeScript/React practices +- Help with unit and integration tests +- Proofread [our website](https://daypicker.dev/) and the code documentation in the source files +- Make the website more stylish +- Help maintain [the repository](https://github.com/gpbl/react-day-picker) on GitHub and triage issues and PRs +- Answer [support questions](https://github.com/gpbl/react-day-picker/discussions/categories/support) +- [Sponsor the project](https://github.com/sponsors/gpbl) + +[Send a message](https://github.com/gpbl/react-day-picker/discussions) on our discussions page to introduce yourself! + +## Working With the Source Code + +DayPicker is built using the following tools and libraries: + +- **[React](https://reactjs.org/)** +- **[TypeScript](https://www.typescriptlang.org/)** +- **[Vite](https://vitejs.dev/)** - for the examples app +- **[Docusaurus](https://docusaurus.io/)** - for the documentation +- **[Jest](https://jestjs.io/)** - for testing +- **[pnpm](https://pnpm.io/)** - for package management + +To contribute to DayPicker, start by cloning the repository: + +```sh +git clone https://github.com/gpbl/react-day-picker.git +cd react-day-picker +pnpm install +``` + +### DayPicker Workspace + +If your are using [Visual Studio code](https://code.visualstudio.com) open the [react-day-picker.code-workspace](https://github.com/gpbl/react-day-picker/blob/main/react-day-picker.code-workspace) to set up the development environment. This workspace includes: + +- Suggested extensions for the project +- TypeScript compiler running in watch mode for the ESM export +- Docusaurus website running at http://localhost:2001, with documentation and API docs +- Vite.js examples app served at http://localhost:5173 + - Use this app to run isolated test cases and examples, exported by `/examples/index.ts` + +### Test Driven Development + +DayPicker development is test-driven. Change code and run the tests using `pnpm run test-watch` or `pnpm run test`. The Jest plugin in the VS Code workspace is recommended for running tests. + +### Useful Scripts + +- To run the build in watch mode: + ```sh + pnpm tsc --project tsconfig-esm.json --watch + ``` +- To run the tests in watch mode: + ``` + pnpm run test-watch + ``` +- To run the examples app at http://localhost:5173 + ``` + pnpm --filter examples-app run dev + ``` +- To run the documentation at http://localhost:2001: + ``` + pnpm --filter website run start + ``` diff --git a/examples-app/package.json b/examples-app/package.json index 70d606724e..c22e6a29c2 100644 --- a/examples-app/package.json +++ b/examples-app/package.json @@ -1,5 +1,5 @@ { - "name": "vite-project", + "name": "examples-app", "private": true, "version": "0.0.0", "type": "module", diff --git a/website/docs/development/code-of-conduct.md b/website/docs/development/code-of-conduct.md index 816ecaeb39..fd29e1fef4 100644 --- a/website/docs/development/code-of-conduct.md +++ b/website/docs/development/code-of-conduct.md @@ -1,11 +1,9 @@ --- -draft: true +hide_title: true +title: Code Of Conduct +sidebar_position: 2 --- -# Code Of Conduct +import CodeOfConduct from "../../../.github/CODE_OF_CONDUCT.md"; -:::info Draft - -This documentation is still a work in progress. If you have any questions, ask to the [discussions](https://github.com/gpbl/react-day-picker/discussions) page on Github. - -::: + diff --git a/website/docs/development/contributing.md b/website/docs/development/contributing.md new file mode 100644 index 0000000000..33f9aa34ef --- /dev/null +++ b/website/docs/development/contributing.md @@ -0,0 +1,9 @@ +--- +hide_title: true +title: Contributing +sidebar_position: 1 +--- + +import Contributing from "../../../CONTRIBUTING.md"; + + diff --git a/website/docs/development/contributing.mdx b/website/docs/development/contributing.mdx deleted file mode 100644 index b27e85b544..0000000000 --- a/website/docs/development/contributing.mdx +++ /dev/null @@ -1,11 +0,0 @@ ---- -draft: true ---- - -# Contributing - -:::info Draft - -This documentation is still a work in progress. If you have any questions, ask to the [discussions](https://github.com/gpbl/react-day-picker/discussions) page on Github. - -::: diff --git a/website/sidebars.ts b/website/sidebars.ts index b1e824b9f6..073f9f9db0 100644 --- a/website/sidebars.ts +++ b/website/sidebars.ts @@ -30,18 +30,18 @@ const sidebars: SidebarsConfig = { dirName: "guides" } ] + }, + { + type: "category", + label: "Development", + collapsed: true, + items: [ + { + type: "autogenerated", + dirName: "development" + } + ] } - // { - // type: "category", - // label: "Development", - // collapsed: true, - // items: [ - // { - // type: "autogenerated", - // dirName: "development" - // } - // ] - // } ], api: ["api/index", typedocSidebar] };