Improve Documentation (twentyhq#3795)

* Begin docs improvement * Keep improving documentation * Upgrade Docusarus * Fix broken links
sdileep · Feb 5, 2024 · a5989a4 · a5989a4
1 parent 6748dfe
commit a5989a4
Show file tree

Hide file tree

Showing 91 changed files with 1,045 additions and 895 deletions.
diff --git a/README.md b/README.md
@@ -26,7 +26,7 @@
 
 We’ve spent thousands of hours grappling with traditional CRMs like Pipedrive and Salesforce to align them with our business needs, only to end up frustrated — customizations are complex and the closed ecosystems of these platforms can feel restrictive.
 
-We felt the need for a CRM platform that empowers rather than constrains. We believe the next great CRM will come from the open source community. And we’ve packed Twenty with powerful features to give you full control and help you win more deals. 
+We felt the need for a CRM platform that empowers rather than constrains. We believe the next great CRM will come from the open source community. And we’ve packed Twenty with powerful features to give you full control and help you run your business efficiently. 
 
 <br>
 

diff --git a/package.json b/package.json
@@ -10,8 +10,8 @@
     "@chakra-ui/accordion": "^2.3.0",
     "@chakra-ui/system": "^2.6.0",
     "@codesandbox/sandpack-react": "^2.11.3",
-    "@docusaurus/core": "^3.0.0",
-    "@docusaurus/preset-classic": "^3.0.0",
+    "@docusaurus/core": "^3.1.0",
+    "@docusaurus/preset-classic": "^3.1.0",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@floating-ui/react": "^0.24.3",
@@ -157,8 +157,8 @@
   "devDependencies": {
     "@babel/core": "^7.14.5",
     "@babel/preset-react": "^7.14.5",
-    "@docusaurus/module-type-aliases": "^3.0.0",
-    "@docusaurus/tsconfig": "3.0.0",
+    "@docusaurus/module-type-aliases": "^3.1.0",
+    "@docusaurus/tsconfig": "3.1.0",
     "@graphql-codegen/cli": "^3.3.1",
     "@graphql-codegen/client-preset": "^4.1.0",
     "@graphql-codegen/typescript": "^3.0.4",

diff --git a/packages/twenty-docs/docs/contributor/_category_.json b/packages/twenty-docs/docs/contributor/_category_.json
@@ -1,4 +1,4 @@
 {
-  "label": "Contributor guide",
-  "position": 2
+  "label": "Contributing",
+  "position": 3
 }
diff --git a/...enty-docs/docs/start/bug-and-requests.mdx → ...ocs/docs/contributor/bug-and-requests.mdx b/...enty-docs/docs/start/bug-and-requests.mdx → ...ocs/docs/contributor/bug-and-requests.mdx
@@ -1,5 +1,5 @@
 ---
-title: Bugs & Requests
+title: Bugs and Requests
 sidebar_position: 3
 sidebar_custom_props:
   icon: TbBug

diff --git a/packages/twenty-docs/docs/contributor/frontend/_category_.json b/packages/twenty-docs/docs/contributor/frontend/_category_.json
@@ -1,3 +1,5 @@
 {
-  "position": 3
+  "position": 3,
+  "collapsible": true,
+  "collapsed": true
 }
diff --git a/packages/twenty-docs/docs/contributor/frontend/advanced/_category_.json b/packages/twenty-docs/docs/contributor/frontend/advanced/_category_.json
diff --git a/packages/twenty-docs/docs/contributor/frontend/basics/_category_.json b/packages/twenty-docs/docs/contributor/frontend/basics/_category_.json
diff --git a/packages/twenty-docs/docs/contributor/frontend/basics/basics.mdx b/packages/twenty-docs/docs/contributor/frontend/basics/basics.mdx
diff --git a/packages/twenty-docs/docs/contributor/frontend/basics/contributing.mdx b/packages/twenty-docs/docs/contributor/frontend/basics/contributing.mdx
diff --git a/packages/twenty-docs/docs/contributor/frontend/basics/design-system.mdx b/packages/twenty-docs/docs/contributor/frontend/basics/design-system.mdx
diff --git a/...utor/frontend/advanced/best-practices.mdx → ...s/contributor/frontend/best-practices.mdx b/...utor/frontend/advanced/best-practices.mdx → ...s/contributor/frontend/best-practices.mdx
@@ -268,7 +268,7 @@ Prop drilling, in the React context, refers to the practice of passing state var
 
 3. **Reduced Component Reusability**: A component receiving a lot of props solely for passing them down becomes less general-purpose and harder to reuse in different contexts.
 
-If you feel that you are using excessive prop drilling, see [state management best practices](/contributor/frontend/advanced/best-practices#state-management).
+If you feel that you are using excessive prop drilling, see [state management best practices](#state-management).
 
 ## Imports
 

diff --git a/...r/frontend/basics/folder-architecture.mdx → ...tributor/frontend/folder-architecture.mdx b/...r/frontend/basics/folder-architecture.mdx → ...tributor/frontend/folder-architecture.mdx
diff --git a/packages/twenty-docs/docs/contributor/frontend/frontend.mdx b/packages/twenty-docs/docs/contributor/frontend/frontend.mdx
@@ -1,14 +1,86 @@
 ---
 id: frontend
 title: Frontend Development
-displayed_sidebar: frontendSidebar
 sidebar_position: 0
 sidebar_custom_props:
   icon: TbTerminal2
-  isSidebarRoot: true
 ---
 
-Welcome to the Frontend Development section of the documentation. 
-Here you will find information about the frontend development process, the recommended tools, and the best practices you should follow.
+import DocCardList from '@theme/DocCardList';
 
 
+<DocCardList />
+
+## Useful commands
+
+### Starting the app
+
+```bash
+ nx start twenty-front
+ ```
+
+### Regenerate graphql schema based on API graphql schema
+
+```bash
+nx graphql:generate twenty-front
+```
+
+### Lint
+
+```bash
+nx lint twenty-front
+```
+
+### Test
+
+```bash
+nx test twenty-front# run jest tests
+nx storybook:dev twenty-front# run storybook
+nx storybook:test twenty-front# run tests # (needs yarn storybook:dev to be running)
+nx storybook:coverage twenty-front # (needs yarn storybook:dev to be running)
+```
+
+## Tech Stack
+
+The project has a clean and simple stack, with minimal boilerplate code.
+
+**App**
+
+- [React](https://react.dev/)
+- [Apollo](https://www.apollographql.com/docs/)
+- [GraphQL Codegen](https://the-guild.dev/graphql/codegen)
+- [Recoil](https://recoiljs.org/docs/introduction/core-concepts)
+- [TypeScript](https://www.typescriptlang.org/)
+
+**Testing**
+
+- [Jest](https://jestjs.io/)
+- [Storybook](https://storybook.js.org/)
+
+**Tooling**
+
+- [Yarn](https://yarnpkg.com/)
+- [Craco](https://craco.js.org/docs/)
+- [ESLint](https://eslint.org/)
+
+## Architecture
+
+### Routing
+
+[React Router](https://reactrouter.com/) handles the routing. 
+
+To avoid unnecessary [re-renders](/contributor/frontend/best-practices#managing-re-renders) all the routing logic is in a `useEffect` in `PageChangeEffect`.
+
+### State Management
+
+[Recoil](https://recoiljs.org/docs/introduction/core-concepts) handles state management.
+
+See [best practices](/contributor/frontend/best-practices#state-management) for more information on state management.
+
+## Testing
+
+[Jest](https://jestjs.io/) serves as the tool for unit testing while [Storybook](https://storybook.js.org/) is for component testing.
+
+Jest is mainly for testing utility functions, and not components themselves.
+
+Storybook is for testing the behavior of isolated components, as well as displaying the design system.
diff --git a/...contributor/frontend/advanced/hotkeys.mdx → ...ocs/docs/contributor/frontend/hotkeys.mdx b/...contributor/frontend/advanced/hotkeys.mdx → ...ocs/docs/contributor/frontend/hotkeys.mdx
diff --git a/...ributor/frontend/advanced/style-guide.mdx → ...docs/contributor/frontend/style-guide.mdx b/...ributor/frontend/advanced/style-guide.mdx → ...docs/contributor/frontend/style-guide.mdx
diff --git a/...butor/frontend/basics/work-with-figma.mdx → .../contributor/frontend/work-with-figma.mdx b/...butor/frontend/basics/work-with-figma.mdx → .../contributor/frontend/work-with-figma.mdx
diff --git a/packages/twenty-docs/docs/contributor/server/_category_.json b/packages/twenty-docs/docs/contributor/server/_category_.json
@@ -1,3 +1,5 @@
 {
-  "position": 4
+  "position": 4,
+  "collapsible": true,
+  "collapsed": true
 }
diff --git a/packages/twenty-docs/docs/contributor/server/basics/_category_.json b/packages/twenty-docs/docs/contributor/server/basics/_category_.json
diff --git a/packages/twenty-docs/docs/contributor/server/basics/overview.mdx b/packages/twenty-docs/docs/contributor/server/basics/overview.mdx
diff --git a/packages/twenty-docs/docs/contributor/server/basics/workflows.mdx b/packages/twenty-docs/docs/contributor/server/basics/workflows.mdx
diff --git a/...tributor/server/others/best-practices.mdx → ...ocs/contributor/server/best-practices.mdx b/...tributor/server/others/best-practices.mdx → ...ocs/contributor/server/best-practices.mdx
diff --git a/...tributor/server/basics/custom-objects.mdx → ...ocs/contributor/server/custom-objects.mdx b/...tributor/server/basics/custom-objects.mdx → ...ocs/contributor/server/custom-objects.mdx
diff --git a/...ntributor/server/others/feature-flags.mdx → ...docs/contributor/server/feature-flags.mdx b/...ntributor/server/others/feature-flags.mdx → ...docs/contributor/server/feature-flags.mdx
diff --git a/...tor/server/basics/folder-architecture.mdx → ...ontributor/server/folder-architecture.mdx b/...tor/server/basics/folder-architecture.mdx → ...ontributor/server/folder-architecture.mdx
diff --git a/packages/twenty-docs/docs/contributor/server/others/_category_.json b/packages/twenty-docs/docs/contributor/server/others/_category_.json
diff --git a/.../docs/contributor/server/basics/queue.mdx → ...ty-docs/docs/contributor/server/queue.mdx b/.../docs/contributor/server/basics/queue.mdx → ...ty-docs/docs/contributor/server/queue.mdx
-Original file line number
+Diff line change
@@ Expand Up / @@ -26,7 +26,7 @@ @@
     We’ve spent thousands of hours grappling with traditional CRMs like Pipedrive and Salesforce to align them with our business needs, only to end up frustrated — customizations are complex and the closed ecosystems of these platforms can feel restrictive.
-    We felt the need for a CRM platform that empowers rather than constrains. We believe the next great CRM will come from the open source community. And we’ve packed Twenty with powerful features to give you full control and help you win more deals.
+    We felt the need for a CRM platform that empowers rather than constrains. We believe the next great CRM will come from the open source community. And we’ve packed Twenty with powerful features to give you full control and help you run your business efficiently.
     <br>
@@ Expand Down @@