Doc changes (#2124)

* refactored Storybook UI

* refactored Storybook UI

* removed extra cards from the doc, added card for ui components

* added hover behavior to doc page & made it look selected

* separate storybook docs and tests

* separating storybook tests and docs

* fixed spelling errors in docs

* Final round of edits for frontend, added backend folder architecture

* Created CODE_OF_CONDUCT.md

* Add code of conduct to contributing.md

* doc changes

* fixed broken links

docs/docs/contributor/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "Contributor guide",
-  "position": 3
+  "position": 2
 }

docs/docs/contributor/frontend/advanced/_category_.json

@@ -1,7 +1,4 @@
 {
   "label": "Advanced",
-  "position": 3,
-  "customProps": {
-    "icon": "TbTerminal2"
-  }
+  "position": 3
 }

docs/docs/contributor/frontend/basics/_category_.json

@@ -1,7 +1,4 @@
 {
   "label": "Basics",
-  "position": 1,
-  "customProps": {
-    "icon": "TbTerminal2"
-  }
+  "position": 1
 }

docs/docs/contributor/frontend/basics/basics.mdx

@@ -1,8 +1,6 @@
 ---
 title: Basics
 sidebar_position: 0
-sidebar_custom_props:
-  icon: TbEyeglass
 ---
 
 import DocCardList from '@theme/DocCardList';

docs/docs/contributor/frontend/basics/contributing.mdx

@@ -15,7 +15,7 @@ Make sure that your [IDE is correctly setup](/contributor/local-setup/ide-setup)
 
 Make sure your database is running on the URL provided in your `server/.env` file.
 
-```
+```bash
 cd front
 yarn
 
@@ -24,19 +24,19 @@ yarn start
 
 ## Regenerate graphql schema based on API graphql schema
 
-```
+```bash
 yarn graphql:generate
 ```
 
 ## Lint
 
-```
+```bash
 yarn lint
 ```
 
 ## Test
 
-```
+```bash
 yarn test # run jest tests
 yarn storybook:dev # run storybook
 yarn storybook:test # run tests (needs yarn storybook:dev to be running)

docs/docs/contributor/frontend/basics/folder-architecture.mdx

@@ -48,7 +48,6 @@ module1
   └───hooks
   │   └───internal
   └───states
-  │   └───recoil-scope-contexts
   │   └───selectors
   └───types
   └───utils
@@ -90,8 +89,6 @@ Contains the state management logic. We use [RecoilJS](https://recoiljs.org) for
 
 - Selectors: See [RecoilJS Selectors](https://recoiljs.org/docs/basic-tutorial/selectors) for more details.
 
-- Recoil Scope Contexts: More details will be added soon.
-
 We still use React's built-in state management for state that is only used within a component.
 
 ### Utils

docs/docs/contributor/frontend/ui-components/_category_.json

@@ -1,7 +1,4 @@
 {
   "label": "UI Components",
-  "position": 1,
-  "customProps": {
-    "icon": "TbTerminal2"
-  }
+  "position": 1
 }

docs/docs/contributor/frontend/ui-components/ui-components.mdx

@@ -1,8 +1,6 @@
 ---
 title: Overview
 sidebar_position: 0
-sidebar_custom_props:
-  icon: TbBrandFigma
 ---
 import DocCardList from '@theme/DocCardList';
 

docs/docs/contributor/server/basics/_category_.json

@@ -1,7 +1,4 @@
 {
   "label": "Basics",
-  "position": 1,
-  "customProps": {
-    "icon": "TbTerminal2"
-  }
+  "position": 1
 }

docs/docs/contributor/server/basics/custom-objects.mdx

@@ -0,0 +1,17 @@
+---
+title: Custom Objects
+sidebar_position: 4
+sidebar_custom_props:
+  icon: TbAugmentedReality
+---
+
+To elevate our platform experience and adhere to our dedication towards versatility, we've successfully integrated custom objects (objects available only in a specific workspace). 
+Users across different workspaces can now seamlessly access custom objects using a dynamic GraphQL schema.
+
+## How it works
+
+Custom objects trace their roots back to metadata tables that dictate the shape, name, and type of the objects. All this information is housed in the metadata schema database, consisting of tables:
+
+- **DataSource**: Details where data is stored.
+- **Object**: Describes the object and is linked to a DataSource.
+- **Field**: Outlines an Object's fields and connects to the Object.

docs/docs/contributor/server/basics/zapier.mdx

@@ -1,29 +0,0 @@
----
-title: Zapier App
-sidebar_position: 3
-sidebar_custom_props:
-  icon: TbBrandZapier
----
-
-## Setup
-- Create a [Zapier account](https://zapier.com/)
-- Install [Zapier CLI](https://platform.zapier.com/quickstart/cli-tutorial) globally: `npm install -g zapier-platform-cli`
-- Login with CLI with your Zapier account credentials: `zapier login`
-- Install Zapier packages:
-```
-cd packages/twenty-zapier
-yarn
-```
-- set environment variables:
-  - In **packages/twenty-zapier** launch `cp .env.example .env`
-  - launch local application, go to `http://localhost:3000/settings/apis` and generate an apiKey
-  - copy and paste the api key to replace the .env **YOUR_API_KEY** value
-- `cd .. && cd twenty-zapier` to set environment variables (needs autoenv)
-
-## Development
-- Test: `yarn test`
-- Lint: `yarn format`
-- Watch and compile as you edit code: `yarn watch`
-- Validate your Zapier app: `yarn validate`
-- Deploy your Zapier app: `yarn deploy`
-- List all Zapier CLI commands: `zapier`. ⚠️ make sure to run `yarn build` before any `zapier` command

docs/docs/contributor/server/others/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "Others",
+  "position": 2
+}

docs/docs/contributor/server/others/zapier.mdx

@@ -0,0 +1,75 @@
+---
+title: Zapier App
+sidebar_position: 1
+sidebar_custom_props:
+  icon: TbBrandZapier
+---
+
+Effortlessly sync Twenty with 3000+ apps using [Zapier](https://zapier.com/). Automate tasks, boost productivity, and supercharge your customer relationships!
+
+## What is Zapier?
+
+Zapier is a tool that allows you automate workflows by connecting the apps that your team uses everyday. The fundamental concept of Zapier is automation workflows, which are known as Zaps, and include triggers and actions. 
+
+You can learn more about how Zapier works [here](https://zapier.com/how-it-works).  
+
+## Setup
+
+### Step 1: Install Zapier packages
+
+```bash
+cd packages/twenty-zapier
+yarn
+```
+
+### Step 2: Login with the CLI
+
+Use your Zapier credentials to log in using the CLI: 
+
+```bash
+zapier login
+```
+
+### Step 3: Set environment variables
+
+From the `packages/twenty-zapier` folder, run:
+
+```bash
+cp .env.example .env
+```
+Run the application locally, go to [http://localhost:3000/settings/apis](http://localhost:3000/settings/apis), and generate an API key.
+
+Replace the **YOUR_API_KEY** value in the `.env` file with the API key you just generated.
+
+## Development
+
+:::caution Note
+
+Make sure to run `yarn build` before any `zapier` command.
+
+:::
+
+### Test
+```bash
+yarn test
+```
+### Lint
+```bash
+yarn format
+```
+### Watch and compile as you edit code
+```bash
+yarn watch
+```
+### Validate your Zapier app
+```bash
+yarn validate
+```
+### Deploy your Zapier app 
+```bash
+yarn deploy
+```
+### List all Zapier CLI commands
+```bash
+zapier
+``` 

docs/docs/contributor/server/server.mdx

@@ -3,7 +3,7 @@ title: Backend Development
 displayed_sidebar: backendSidebar
 sidebar_position: 0
 sidebar_custom_props:
-  icon: TbTerminal2
+  icon: TbTerminal
   isSidebarRoot: true
 ---
 

docs/docs/developer/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "Developer guide",
-  "position": 4
+  "position": 3
 }

docs/docs/hosting/_category_.json

@@ -1,4 +0,0 @@
-{
-  "label": "Self-Hosting",
-  "position": 2
-}

docs/docs/others/CLI.mdx

@@ -1,10 +0,0 @@
----
-title: CLI
-sidebar_position: 1
-sidebar_class_name: coming-soon
-sidebar_custom_props:
-  icon: TbTerminal2
----
-
-
-Available soon!

docs/docs/others/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "Others",
-  "position": 5
+  "position": 4
 }

docs/docs/start/getting-started.mdx

@@ -21,7 +21,7 @@ The signup is free.
 If you're a developer and would like to experiment or contribute to the app, you can install Twenty on your local environment. Follow our [local setup](/contributor/local-setup) guide to get started.  
 
 ### 3. Self-hosting
-We provide [self-hosting options](/hosting/self-hosting) if you want greater control over your data and want to run the app on your own server. Right now, Docker containers are the only hosting option we support. However we are actively working on providing simple options to self-host Twenty.
+We provide [self-hosting options](self-hosting) if you want greater control over your data and want to run the app on your own server. Right now, Docker containers are the only hosting option we support. However we are actively working on providing simple options to self-host Twenty.
 
 
 ___

docs/docs/start/overview.mdx

@@ -9,7 +9,7 @@ import ThemedImage from '@theme/ThemedImage';
 
 
 Twenty is an Open Source CRM that provides flexibility, tailored to your business needs. It helps you break free from vendor lock-in and limitations, and provides the tools needed to harness the full potential of your data while ensuring a sleek and effortlessly intuitive design that teams will love to use.  
-<ThemedImage sources={{light: "../img/light-doc-preview.png", dark:"./img/dark-doc-preview.png"}} style={{width:'100%', maxWidth:'800px'}}/>
+<ThemedImage sources={{light: "../img/light-doc-preview.png", dark:"../img/dark-doc-preview.png"}} style={{width:'100%', maxWidth:'800px'}}/>
 
 ___
 

docs/docs/start/self-hosting.mdx

@@ -1,5 +1,6 @@
 ---
 title: Self-Hosting
+sidebar_position: 2
 sidebar_custom_props:
   icon: TbServer
 ---

docs/docusaurus.config.js

@@ -57,6 +57,9 @@ const config = {
     ({
       // Replace with your project's social card
       image: 'img/social-card.png',
+      colorMode:{
+        defaultMode: 'light'
+      },
       navbar: {
         /*title: 'Twenty',*/
         logo: {

docs/src/css/custom.css

@@ -43,6 +43,7 @@
   --category-icon-background-color: #ebebeb;
   --category-icon-border-color: #d6d6d6;
   --level-1-color: #B3B3B3;
+  
 }
 
 .markdown > h1 {
@@ -162,10 +163,23 @@ li.coming-soon a::after {
   color:inherit
 } 
 
-.menu__list-item--level1 > .menu__link--active > .icon-and-text{
+.menu__list-item--level1 > .menu__link--active > .icon-and-text {
   color: black;
 }
 
+/* Change text color to white for dark mode */
+@media (prefers-color-scheme: dark) {
+  .menu__list-item--level1 > .menu__link--active > .icon-and-text {
+    color: white;
+  }
+}
+
+/* Reset to the browser's default text color for other cases (light mode) */
+.menu__list-item--level1 > .menu__link--active > .icon-and-text {
+  color: initial;
+}
+
+ 
 
 .menu__list-item--level1 > .menu__link--active,
 .menu__list-item--level1 > .menu__link:hover {

docs/src/theme/Icon/DarkMode/index.js

@@ -4,7 +4,7 @@ import {useColorMode} from '@docusaurus/theme-common';
 
 
 const IconDarkMode = (props) => {
-  const { colorMode } = useColorMode().colorMode;
+  const { colorMode } = useColorMode();
   return colorMode === 'dark' ? <TbMoon /> : <></>;
 }
 

docs/src/theme/Icon/LightMode/index.js

@@ -4,8 +4,8 @@ import {useColorMode} from '@docusaurus/theme-common';
 
 
 const IconLightMode = (props) =>  {
-  const { colorMode } = useColorMode().colorMode;
-  return colorMode === 'dark' ? <></>: <TbSun /> ;
+  const { colorMode } = useColorMode();
+  return colorMode === 'light' ? <TbSun /> : <></>;
 }
 
 export default IconLightMode;

docs/src/theme/icons.js

@@ -32,5 +32,7 @@ export {
   TbTopologyStar,
   TbVocabulary,
   TbZoomQuestion,
-  TbRocket
+  TbRocket,
+  TbAugmentedReality,
+  TbTerminal,
 } from "react-icons/tb";