Introduce UI Components documentation (#1926)

* new contributor guide folder architecture

* update content pass 1

* Prepare UI component folder to receive componentns

* Add component doc example for button

* Fix broken links

* Fix broken links

* Fix images

README.md

@@ -134,5 +134,5 @@ Here’s what you can look forward to:
 
 Dive into Twenty today and experience the power of open-source CRM on your own terms.
 
-🚀 [Get Started with Twenty](https://docs.twenty.com/developer/local-setup). 
+🚀 [Get Started with Twenty](https://docs.twenty.com/contributor/local-setup). 
 

docs/docs/contributor/frontend/_category_.json

@@ -0,0 +1,3 @@
+{
+  "position": 3
+}

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

@@ -1,8 +1,6 @@
 {
-  "label": "Frontend",
+  "label": "Advanced",
   "position": 3,
-  "collapsible": true,
-  "collapsed": false,
   "customProps": {
     "icon": "TbTerminal2"
   }

docs/docs/contributor/frontend/advanced/best-practices.mdx

@@ -261,7 +261,7 @@ Prop drilling, in the React context, refers to the practice of passing state var
 
 3. **Reduced Component Reusability**: A component receiving numerous props solely for the purpose of 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](/developer/frontend/best-practices#state-management)
+If you feel that you are using excessive prop drilling, see [state management best practices](/contributor/frontend/advanced/best-practices#state-management)
 
 ## Imports
 

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

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

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

@@ -35,13 +35,13 @@ We took care of having a clean and simple stack, with minimal boilerplate code.
 
 We use [React Router](https://reactrouter.com/) for routing. 
 
-To avoid unnecessary [re-renders](/developer/frontend/best-practices#managing-re-renders) we handle all the routing logic in a `useEffect` in `PageChangeEffect`.
+To avoid unnecessary [re-renders](/contributor/frontend/advanced/best-practices#managing-re-renders) we handle all the routing logic in a `useEffect` in `PageChangeEffect`.
 
 ### State Management
 
 We use [Recoil](https://recoiljs.org/docs/introduction/core-concepts) for state management.
 
-See our [best practices](/developer/frontend/best-practices#state-management) for more managing state.
+See our [best practices](/contributor/frontend/advanced/best-practices#state-management) for more managing state.
 
 ## Testing
 
@@ -49,4 +49,4 @@ We use [Jest](https://jestjs.io/) for unit testing and [Storybook](https://story
 
 Jest is mainly used for testing utility functions, and not components themselves.
 
-Storybook is used for testing the behavior of isolated components, as well as displaying our [design system](/developer/frontend/design-system).
+Storybook is used for testing the behavior of isolated components, as well as displaying our [design system](/contributor/frontend/basics/design-system).

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

@@ -0,0 +1,43 @@
+---
+title: Contributing
+sidebar_position: 1
+sidebar_custom_props:
+  icon: TbTopologyStar
+---
+
+## Pre-requesites
+
+Make sure that your [IDE is correctly setup](/contributor/local-setup/ide-setup) and that your backend is running on `localhost:3000`.
+
+
+## Starting a new feature
+
+Make sure your database is running on the URL provided in your `server/.env` file.
+
+```
+cd front
+yarn
+
+yarn start
+```
+
+## Regenerate graphql schema based on API graphql schema
+
+```
+yarn graphql:generate
+```
+
+## Lint
+
+```
+yarn lint
+```
+
+## Test
+
+```
+yarn test # run jest tests
+yarn storybook:dev # run storybook
+yarn storybook:test # run tests (needs yarn storybook:dev to be running)
+yarn storybook:coverage # run tests (needs yarn storybook:dev to be running)
+```

docs/docs/contributor/frontend/frontend.mdx

@@ -0,0 +1,12 @@
+---
+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 tools we use, and the best practices we follow.
+

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

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

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

@@ -0,0 +1,9 @@
+{
+  "label": "Forms",
+  "position": 2,
+  "collapsible": true,
+  "collapsed": true,
+  "customProps": {
+    "icon": "TbForms"
+  }
+}

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

@@ -0,0 +1,15 @@
+---
+title: Button
+sidebar_position: 1
+---
+
+import IframeResizer from 'iframe-resizer-react';
+
+<IframeResizer
+  checkOrigin={false}
+  inPageLinks
+  src="http://storybook.twenty.com/iframe.html?id=ui-button-button--docs&viewMode=docs&singleStory=true"
+  style={{ width: '1px', minWidth: '100%'}}
+/>
+ 
+ 

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

@@ -0,0 +1,9 @@
+---
+title: Overview
+sidebar_position: 0
+sidebar_custom_props:
+  icon: TbBrandFigma
+---
+
+WIP
+ 

docs/docs/contributor/glossary.mdx

@@ -1,9 +1,9 @@
 ---
-sidebar_position: 3
+title: Glossary
+sidebar_position: 2
 sidebar_custom_props:
   icon: TbVocabulary
 ---
-# Glossary
 
 ### Workspace
 A `Workspace` usually represents a company using Twenty.  

docs/docs/contributor/local-setup/_category_.json

@@ -0,0 +1,9 @@
+{
+  "label": "Local setup",
+  "position": 1,
+  "collapsible": true,
+  "collapsed": true,
+  "customProps": {
+    "icon": "TbDeviceDesktop"
+  }
+}

docs/docs/contributor/local-setup/docker-setup.mdx

@@ -0,0 +1,107 @@
+---
+title: Docker Setup
+sidebar_position: 2
+sidebar_custom_props:
+  icon: TbBrandDocker
+---
+
+You can also provision the project with Docker. This comes with a few advantages:
+- It provides the exact same environment as our core developer team.
+- It includes some additional dependencies (such as `playwright`) that you might need if you wish to contribute to some advanced areas of the project.
+- It provisions a PostgreSQL database.
+
+## Prerequisites
+
+Make sure you have the latest `Docker` and [git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) versions installed on your computer.
+
+You can run `docker --version` to verify the installation.
+
+## Step #1: Git Clone
+In your terminal, run the following command:
+
+```bash
+git clone git@github.com:twentyhq/twenty.git
+```
+
+## Step #2: Setup env variables
+
+Twenty requires a few environment variables to be set. Locally, we recommend setting them through `.env` files.
+
+```bash
+cp ./front/.env.example ./front/.env
+cp ./server/.env.example ./server/.env 
+```
+
+The default values should work out of the box, except for the postgres URL, which requires a small modification.
+
+Open `./server/.env` and change to the following:
+
+```bash
+PG_DATABASE_URL=postgres://twenty:twenty@postgres:5432/default?connection_limit=1
+```
+
+
+## Step #3: Build
+
+We provide an environment containerized with Docker and orchestrated with `docker-compose`.
+This installation method will also provision a PostgreSQL container.
+
+**Note:** The configuration for the build is stored in the `infra/dev` folder, but you can run `make` commands directly from the root folder.
+
+```bash
+make build
+```
+
+## Step #4: Migrate & seed
+
+Before running the project, you need to initialize the database by running the migrations and seed.
+
+Start the containers:
+```bash
+make up
+```
+
+Run database migrations, generate prisma client, and seed:
+```bash
+make server-prisma-reset
+```
+
+## Step #5: Start Twenty
+
+Run the project with the following commands from the `root folder`:
+
+```bash
+make server-start
+```
+
+```bash
+make front-start
+```
+
+You should now have:
+- **Frontend** available on: [http://localhost:3001](http://localhost:3001)
+- **Server** available on: [http://localhost:3000/graphql](http://localhost:3000/graphql)
+- **Postgres** available on [http://localhost:5432](http://localhost:5432) and containing database named `default`
+
+Sign in using our seeded demo account `tim@apple.dev` (password: `Applecar2025`) to start using Twenty
+
+### Optional
+
+If you don't want to use the `make` command and work directly from the container, you can also ssh directly into the container:
+
+```bash
+make sh
+```
+Then run commands through yarn:
+```bash
+cd server
+yarn prisma:reset
+```
+
+
+### Troubleshooting
+
+#### Docker throws errors while setting up local environment
+
+If by any chance you will run into problems with Docker, you should change the `docker-compose` to `docker compose` in `./infra/dev/Makefile` as `docker-compose` is old version
+becoming slowly obsolete. (More info can be found [here](https://docs.docker.com/compose/migrate/))

docs/docs/contributor/local-setup/ide-setup.mdx

@@ -1,12 +1,11 @@
 ---
-sidebar_position: 0
+title: IDE Setup
+sidebar_position: 4
 sidebar_custom_props:
   icon: TbBrandVscode
 ---
 
-# IDE Setup
-
-This section will help you setup your IDE for the project. If you haven't setup your development environment, please refer to [Development Environment](/developer/local-setup) section.
+This section will help you setup your IDE for the project. If you haven't setup your development environment, please refer to [Development Environment](/contributor/local-setup) section.
 
 You can obviously use any IDE you want but we recommend using Visual Studio Code as our internal team uses it and we have a lot of extensions and settings that we can share with you.
 
@@ -22,7 +21,7 @@ You can download Visual Studio Code from [here](https://code.visualstudio.com/do
 Once you have installed Visual Studio Code, you can open the project by clicking on `File > Open Folder` and selecting `twenty` project root folder.
 
 <div style={{textAlign: 'center'}}>
-    <img src="/img/developer/ide-project-open.png" alt="Visual Studio Code: Open Twenty project" width="90%" />
+    <img src="/img/contributor/ide-project-open.png" alt="Visual Studio Code: Open Twenty project" width="90%" />
 </div>
 
 ### Extensions 
@@ -30,16 +29,16 @@ Once you have installed Visual Studio Code, you can open the project by clicking
 You can use the recommended extensions for the project. You will find them in `.vscode/extensions.json` file. VSCode should prompt you to install the recommended extensions when you open the project.
 
 <div style={{textAlign: 'center'}}>
-    <img src="/img/developer/ide-extensions.png" alt="Visual Studio Code: Install recommended extensions" width="90%" />
+    <img src="/img/contributor/ide-extensions.png" alt="Visual Studio Code: Install recommended extensions" width="90%" />
 </div>
 
 
 ### Docker Setup
 
-If you are using a [Docker setup](/developer/local-setup#docker-install), you will need to run VSCode in the container. You can do that by opening the project, clicking on `Remote Explorer` icon on the left sidebar and then clicking on `Attach in New window` on `dev-twenty-dev` container.
+If you are using a [Docker setup](/contributor/local-setup#docker-install), you will need to run VSCode in the container. You can do that by opening the project, clicking on `Remote Explorer` icon on the left sidebar and then clicking on `Attach in New window` on `dev-twenty-dev` container.
 
 <div style={{textAlign: 'center'}}>
-    <img src="/img/developer/ide-start-dev-container.png" alt="Visual Studio Code: Open in container" width="90%" />
+    <img src="/img/contributor/ide-start-dev-container.png" alt="Visual Studio Code: Open in container" width="90%" />
 </div>
 
 <br />

docs/docs/contributor/local-setup/local-setup.mdx

@@ -0,0 +1,42 @@
+---
+title: Local Setup
+sidebar_position: 0
+sidebar_custom_props:
+  icon: TbDeviceDesktop
+---
+import ThemedImage from '@theme/ThemedImage';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+Twenty is designed to be developer-friendly, and your local installation should be up and running in a few minutes.
+
+## Discord
+
+If you have any questions or need help, you can join our [Discord](https://discord.com/invite/cx5n4Jzs57) server.
+
+## MacOS and Linux users
+
+We recommend using [yarn installation](/contributor/local-setup/yarn-setup) as this is the easiest way to get started.
+We also provide an easy way to run the project with [Docker](/contributor/local-setup/yarn-setup) that you can use if you are familiar with containerized environments.
+
+## Windows users
+
+Windows users can install install the project through WSL2. We provide a [guide](/contributor/local-setup/wsl-setup) to help you get started.
+
+## Project structure
+
+The repository is structured as follows:
+```
+twenty
+└───docs // contains this documentation
+└───front // contains the frontend code for the application
+└───server // contains the backend code for the application
+└───infra // contains docker configurations for development and production deployments
+```
+
+## IDE Setup
+
+Once Twnenty is running on your computer, you will get the best experience by using an IDE that supports TypeScript and ESLint.
+You will find a guide for [VSCode](/contributor/local-setup/ide-setup) further in the documentation.
+___
+

docs/docs/contributor/local-setup/troubleshooting.mdx

@@ -1,11 +1,10 @@
 ---
-sidebar_position: 2
+title: Troubleshooting
+sidebar_position: 5
 sidebar_custom_props:
   icon: TbExclamationCircle
 ---
 
-# Troubleshooting
-
 
 ## Windows setup eslint prettier error: `CR` line breaks found
 
@@ -20,9 +19,3 @@ Then delete the repository and clone it again.
 ## Yarn lock file changed and new files are created (`yarn.lock`, `.yarnrc.yml`, `.yarn`)
 
 Maybe you are using yarn 3? Try installing [yarn classic](https://classic.yarnpkg.com/lang/en/)!
-
-
-## Docker throws errors while setting up local environment
-
-If by any chance you will run into problems with Docker, you should change the `docker-compose` to `docker compose` in `./infra/dev/Makefile` as `docker-compose` is old version
-becoming slowly obsolete. (More info can be found [here](https://docs.docker.com/compose/migrate/))

docs/docs/contributor/local-setup/wsl-setup.mdx

@@ -1,11 +1,10 @@
 ---
-sidebar_position: 1
+title: Windows WSL Setup
+sidebar_position: 3
 sidebar_custom_props:
   icon: TbBrandWindows
 ---
 
-# Windows WSL Setup
-
 ## Install WSL
 
 Open PowerShell as Administrator and run:
@@ -22,7 +21,7 @@ Upon restart, a powershell window will open and install Ubuntu. This may take a
 You will be prompted to create a username and password for your Ubuntu installation.
 
 <div style={{textAlign: 'center'}}>
-    <img src="/img/developer/wsl-complete.png" alt="Visual Studio Code: Open in container" width="90%" />
+    <img src="/img/contributor/wsl-complete.png" alt="Visual Studio Code: Open in container" width="90%" />
 </div>
 
 ## Setup your developer environment
@@ -55,5 +54,5 @@ Close and reopen your terminal to start using nvm or run the following to use it
 
 ### Install Twenty project
 
-You are ready to install Twenty project. Follow the [Yarn install guide](/developer/local-setup#yarn-install-recommended) instructions.
+You are ready to install Twenty project. Follow the [Yarn install guide](/contributor/local-setup#yarn-install-recommended) instructions.
 We don't recommend to use Docker on WSL as it adds an extra layer of complexity.

docs/docs/contributor/local-setup/yarn-setup.mdx

@@ -0,0 +1,133 @@
+---
+title: Yarn Setup
+sidebar_position: 1
+sidebar_custom_props:
+  icon: TbScript
+---
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+
+**Note:** `npm` currently does not support local packages satisfactorily. We strongly recommend using `yarn` instead.
+
+## Prerequisites
+
+Before you can install and use Twenty, make sure you install the following on your computer:
+- [Git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git)
+- [Node](https://nodejs.org/en/download) 
+- [yarn](https://classic.yarnpkg.com/lang/en/docs/install/) 
+
+---
+
+## Step #1: Git Clone
+
+In your terminal, run the following command:
+
+```
+git clone git@github.com:twentyhq/twenty.git
+```
+
+
+## Step #2: Set up PostgreSQL Database
+You need to have a PostgreSQL database available to be able to use Twenty. If you already have one available, you can skip this step.
+
+If you don't, you can provision one through `docker` using the following commands:
+
+<Tabs>
+  <TabItem value="docker" label="Docker" default>
+
+```bash
+  cd twenty
+  make provision-postgres
+```
+
+This will create a Docker container, exposing a PostgresSQL instance at [http://localhost:5432](http://localhost:5432).
+
+This instance contains two databases: `default` and `test`
+You can access them using `twenty` postgres user (password: `twenty`)
+  </TabItem>
+  <TabItem value="linux-wsl" label="Linux / Windows WSL">
+
+To install PostgresSQL on WSL2, use the following commands:
+
+```bash
+  sudo apt update
+  sudo apt install postgresql postgresql-contrib
+```
+
+Start postgresql service and connect to the database using default `postgres` user:
+
+```bash
+sudo service postgresql start
+sudo -u postgres psql
+```
+
+Create two databases:
+
+```sql
+CREATE DATABASE "default";
+CREATE DATABASE "test";
+```
+
+Create a user `twenty` with password `twenty`:
+
+```sql
+CREATE USER twenty PASSWORD 'twenty';
+ALTER USER twenty CREATEDB;
+```
+
+Create `metadata` schema:
+```sql
+CREATE SCHEMA IF NOT EXISTS "metadata";
+GRANT ALL ON SCHEMA metadata TO twenty;
+```
+
+Activate `uuid-ossp` extension: 
+```sql
+CREATE EXTENSION IF NOT EXISTS "uuid-ossp";
+```
+  </TabItem>
+</Tabs>
+
+
+## Step #3: Setup env variables
+
+Twenty requires a few environment variables to be set. Locally, we recommend setting them through a `.env` file.
+
+To do so, make copies of the `.env.example` files in `/front` and `/server`:
+```bash
+cp ./front/.env.example ./front/.env
+cp ./server/.env.example ./server/.env
+```
+
+## Step #4: Server setup
+
+**Note:** We recommend that you use `nvm` to install the correct `node` version. We have added a `server/.nvmrc` to ensure all contributors are using the same version.
+
+To build Twenty server and seed some data into your database, run the following commands:
+```bash
+cd server
+nvm install #recommended
+nvm use #recommended 
+yarn
+yarn prisma:reset
+yarn start:dev
+```
+
+Twenty's server will be up and running at [http://localhost:3000](http://localhost:3000).
+
+## Step #5: Frontend setup
+
+**Note:** For the frontend setup, too, we recommend using `nvm` to install the right node version. 
+To set up the frontend, run the following commands in your terminal:
+
+```bash
+cd ../front
+nvm install #recommended
+nvm use #recommended 
+yarn
+yarn start
+```
+
+Twenty's frontend will be running at [http://localhost:3001](http://localhost:3001). Simply login using our seeded demo account: `tim@apple.dev` to start using Twenty.
+

docs/docs/contributor/server/_category_.json

@@ -0,0 +1,3 @@
+{
+  "position": 4
+}

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

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

docs/docs/contributor/server/basics/overview.mdx

@@ -0,0 +1,9 @@
+---
+title: Overview
+sidebar_position: 0
+sidebar_custom_props:
+  icon: TbEyeglass
+---
+
+
+WIP

docs/docs/contributor/server/basics/workflows.mdx

@@ -0,0 +1,44 @@
+---
+title: Development workflow
+sidebar_position: 2
+sidebar_custom_props:
+  icon: TbTopologyStar
+---
+
+## First time setup
+
+```
+cd server
+yarn # install dependencies
+
+yarn prisma:migrate # run migrations
+yarn prisma:generate # generate prisma and nestjs-graphql schemas
+yarn prisma:seed # provision database with seeds
+
+# alternatively, you can run
+yarn prisma:reset # all-in-one command to reset, migrate, seed and generate schemas
+```
+
+## Starting a new feature
+
+Make sure your database is running on the URL provided in your `server/.env` file.
+
+```
+cd server
+yarn
+yarn prisma:migrate && yarn prisma:generate
+
+yarn start:dev
+```
+
+## Lint
+
+```
+yarn lint
+```
+
+## Test
+
+```
+yarn test
+```

docs/docs/contributor/server/server.mdx

@@ -0,0 +1,8 @@
+---
+title: Backend Development
+displayed_sidebar: backendSidebar
+sidebar_position: 0
+sidebar_custom_props:
+  icon: TbTerminal2
+  isSidebarRoot: true
+---

docs/docs/developer/additional/_category_.json

@@ -1,9 +0,0 @@
-{
-  "label": "Additional resources",
-  "position": 10,
-  "collapsible": true,
-  "collapsed": true,
-  "customProps": {
-    "icon": "TbPlus"
-  }
-}

docs/docs/developer/frontend/getting-started.mdx

@@ -1,27 +0,0 @@
----
-sidebar_position: 1
-sidebar_custom_props:
-  icon: TbZoomQuestion
----
-
-# Getting started
-
-## Installation 
-
-To install the front end, you'll have to [install Yarn](https://yarnpkg.com/getting-started/install) first.
-
-Then just run : 
-
-```
-yarn
-```
-
-## Development flow
-
-You can start the application for local development with : 
-
-```
-yarn start
-```
-
-Then go to our [best-practice](/developer/frontend/best-practices) guide and the [folder architecture](/developer/frontend/folder-architecture) to learn more about how to structure your feature.

docs/docs/developer/local-setup.mdx

@@ -1,247 +0,0 @@
----
-title: Local Setup
-sidebar_position: 1
-sidebar_custom_props:
-  icon: TbDeviceDesktop
----
-import ThemedImage from '@theme/ThemedImage';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-Twenty is designed to be developer-friendly, and your local installation should be up and running in a few minutes.
-
-In a nutshell:
-- We recommend using `yarn` installation but we also provide an easy way to run the project with Docker.
-- Twenty uses PostgreSQL as a database. If you don't have a PostgreSQL instance available, we also provide a one-line command to provision one through Docker.
-
-The repository is structured as follows:
-```
-twenty
-└───docs // contains this documentation
-└───front // contains the frontend code for the application
-└───server // contains the backend code for the application
-└───infra // contains docker configurations for development and production deployments
-```
-___
-
-# Recommended: Yarn Installation
-
-**Note:** `npm` currently does not support local packages satisfactorily. We strongly recommend using `yarn` instead.
-
-## Prerequisites
-
-Before you can install and use Twenty, make sure you install the following on your computer:
-- [Git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git)
-- [Node](https://nodejs.org/en/download) 
-- [yarn](https://classic.yarnpkg.com/lang/en/docs/install/) 
-
----
-
-## Step #1: Git Clone
-
-In your terminal, run the following command:
-
-```
-git clone git@github.com:twentyhq/twenty.git
-```
-
-
-## Step #2: Set up PostgreSQL Database
-You need to have a PostgreSQL database available to be able to use Twenty. If you already have one available, you can skip this step.
-
-If you don't, you can provision one through `docker` using the following commands:
-
-<Tabs>
-  <TabItem value="docker" label="Docker" default>
-
-```bash
-  cd twenty
-  make provision-postgres
-```
-
-This will create a Docker container, exposing a PostgresSQL instance at [http://localhost:5432](http://localhost:5432).
-
-This instance contains two databases: `default` and `test`
-You can access them using `twenty` postgres user (password: `twenty`)
-  </TabItem>
-  <TabItem value="linux-wsl" label="Linux / Windows WSL">
-
-To install PostgresSQL on WSL2, use the following commands:
-
-```bash
-  sudo apt update
-  sudo apt install postgresql postgresql-contrib
-```
-
-Start postgresql service and connect to the database using default `postgres` user:
-
-```bash
-sudo service postgresql start
-sudo -u postgres psql
-```
-
-Create two databases:
-
-```sql
-CREATE DATABASE "default";
-CREATE DATABASE "test";
-```
-
-Create a user `twenty` with password `twenty`:
-
-```sql
-CREATE USER twenty PASSWORD 'twenty';
-ALTER USER twenty CREATEDB;
-```
-
-Create `metadata` schema:
-```sql
-CREATE SCHEMA IF NOT EXISTS "metadata";
-GRANT ALL ON SCHEMA metadata TO twenty;
-```
-
-Activate `uuid-ossp` extension: 
-```sql
-CREATE EXTENSION IF NOT EXISTS "uuid-ossp";
-```
-  </TabItem>
-</Tabs>
-
-
-## Step #3: Setup env variables
-
-Twenty requires a few environment variables to be set. Locally, we recommend setting them through a `.env` file.
-
-To do so, make copies of the `.env.example` files in `/front` and `/server`:
-```bash
-cp ./front/.env.example ./front/.env
-cp ./server/.env.example ./server/.env
-```
-
-## Step #4: Server setup
-
-**Note:** We recommend that you use `nvm` to install the correct `node` version. We have added a `server/.nvmrc` to ensure all contributors are using the same version.
-
-To build Twenty server and seed some data into your database, run the following commands:
-```bash
-cd server
-nvm install #recommended
-nvm use #recommended 
-yarn
-yarn prisma:reset
-yarn start:dev
-```
-
-Twenty's server will be up and running at [http://localhost:3000](http://localhost:3000).
-
-## Step #5: Frontend setup
-
-**Note:** For the frontend setup, too, we recommend using `nvm` to install the right node version. 
-To set up the frontend, run the following commands in your terminal:
-
-```bash
-cd ../front
-nvm install #recommended
-nvm use #recommended 
-yarn
-yarn start
-```
-
-Twenty's frontend will be running at [http://localhost:3001](http://localhost:3001). Simply login using our seeded demo account: `tim@apple.dev` to start using Twenty.
-
----
-
-# Docker Installation
-
-You can also provision the project with Docker. This comes with a few advantages:
-- It provides the exact same environment as our core developer team.
-- It includes some additional dependencies (such as `playwright`) that you might need if you wish to contribute to some advanced areas of the project.
-- It provisions a PostgreSQL database.
-
-## Prerequisites
-
-Make sure you have the latest `Docker` and [git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) versions installed on your computer.
-
-You can run `docker --version` to verify the installation.
-
-## Step #1: Git Clone
-In your terminal, run the following command:
-
-```bash
-git clone git@github.com:twentyhq/twenty.git
-```
-
-## Step #2: Setup env variables
-
-Twenty requires a few environment variables to be set. Locally, we recommend setting them through `.env` files.
-
-```bash
-cp ./front/.env.example ./front/.env
-cp ./server/.env.example ./server/.env 
-```
-
-The default values should work out of the box, except for the postgres URL, which requires a small modification.
-
-Open `./server/.env` and change to the following:
-
-```bash
-PG_DATABASE_URL=postgres://twenty:twenty@postgres:5432/default?connection_limit=1
-```
-
-
-## Step #3: Build
-
-We provide an environment containerized with Docker and orchestrated with `docker-compose`.
-This installation method will also provision a PostgreSQL container.
-
-**Note:** The configuration for the build is stored in the `infra/dev` folder, but you can run `make` commands directly from the root folder.
-
-```bash
-make build
-```
-
-## Step #4: Migrate & seed
-
-Before running the project, you need to initialize the database by running the migrations and seed.
-
-Start the containers:
-```bash
-make up
-```
-
-Run database migrations, generate prisma client, and seed:
-```bash
-make server-prisma-reset
-```
-
-## Step #5: Start Twenty
-
-Run the project with the following commands from the `root folder`:
-
-```bash
-make server-start
-```
-
-```bash
-make front-start
-```
-
-You should now have:
-- **Frontend** available on: [http://localhost:3001](http://localhost:3001)
-- **Server** available on: [http://localhost:3000/graphql](http://localhost:3000/graphql)
-- **Postgres** available on [http://localhost:5432](http://localhost:5432) and containing database named `default`
-
-Sign in using our seeded demo account `tim@apple.dev` (password: `Applecar2025`) to start using Twenty
-
-### Optional
-
-If you don't want to use the `make` command and work directly from the container, you can also ssh directly into the container:
-
-```bash
-make sh
-```
-Then run commands through yarn:
-```bash
-cd server
-yarn prisma:reset
-```

docs/docs/developer/workflows.mdx

@@ -1,44 +0,0 @@
----
-sidebar_position: 2
-sidebar_custom_props:
-  icon: TbTopologyStar
----
-# Development workflow
-
-
-## IDE Setup
-
-If you are using VSCode, we provide a [.vscode](https://github.com/twentyhq/twenty/tree/main/.vscode) configuration.
-
-## Frontend development commands
-
-```bash
-yarn # install dependencies
-yarn start # start local development server
-
-yarn test # run jest tests
-yarn storybook:dev # run storybook
-yarn storybook:test # run tests (needs yarn storybook:dev to be running)
-yarn storybook:coverage # run tests (needs yarn storybook:dev to be running)
-yarn lint # run linter
-
-yarn graphql:generate
-```
-
-See [front/package.json](https://github.com/twentyhq/twenty/blob/main/front/package.json) script section to see the full list of available commands.
-
-## Server development
-
-```
-yarn # install dependencies
-yarn start:dev
-
-yarn prisma:migrate # run migrations
-yarn prisma:generate # generate prisma and nestjs-graphql schemas
-yarn prisma:seed # provision database with seeds
-yarn:reset # all-in-one command to reset, migrate, seed and generate schemas
-
-yarn:test
-```
-
-See [server/package.json](https://github.com/twentyhq/twenty/blob/main/server/package.json) script section to see the full list of available commands.

docs/docs/level-1/_category_.json

@@ -1,4 +0,0 @@
-{
-  "label": "Level 1",
-  "className": "display-none"
-}

docs/docs/level-1/level-2/level-2.mdx

@@ -1,9 +0,0 @@
----
-title: "Level 2"
-displayed_sidebar: level2PageSidebar
-sidebar_custom_props:
-  icon: TbBolt
-  isSidebarRoot: true
----
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus posuere sollicitudin nisl a euismod. Aenean congue tellus sed sollicitudin posuere. Proin convallis, elit ac mollis scelerisque, purus erat consequat magna, sed pellentesque libero mi vel massa. Phasellus vulputate dolor leo, a vulputate turpis mollis vitae. Mauris purus ante, tempor id erat pellentesque, tempor gravida metus. Praesent gravida arcu orci, vel vestibulum arcu placerat eu. Nulla eu malesuada leo, ac blandit lectus. Nunc egestas nulla at aliquet sollicitudin. Ut mi ante, ullamcorper vel facilisis nec, suscipit at.

docs/docs/level-1/level-2/level-3/_category_.json

@@ -1,3 +0,0 @@
-{
-  "label": "Level 3"
-}

docs/docs/level-1/level-2/level-3/level-4.mdx

@@ -1,7 +0,0 @@
----
-title: "Level 4"
-sidebar_custom_props:
-  icon: TbBolt
----
-
-Nam consequat neque et velit molestie, non egestas est aliquam. Aenean sed nisl odio. Curabitur sed augue non justo convallis aliquet. Nam fringilla accumsan ex id ultricies. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis quis sem ac elit posuere dictum suscipit ut nunc. Nullam id auctor dui. Sed bibendum justo a nulla ultricies tempus. Sed at varius nulla, id pharetra quam. Vivamus a ex sollicitudin, ornare lectus nec, eleifend nisi. Donec sit amet ligula nisi. Integer urna ligula, pellentesque nec lectus et, finibus elementum purus. Etiam sit amet sapien massa.

docs/docs/others/CLI.mdx

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

docs/docs/others/bug-and-requests.mdx

@@ -1,11 +1,14 @@
 ---
+title: Bugs & Requests
+sidebar_position: 3
 sidebar_custom_props:
   icon: TbBug
 ---
-# Troubleshooting
 
-## Reporting bugs
+## Reporting Bugs
 Please create an issue on Github: [https://github.com/twentyhq/twenty/issues/new](https://github.com/twentyhq/twenty/issues/new)
 
+## Feature Requests
+
 If you're not sure it's a bug and you feel it's closer to a feature request, then you should probably open a discussion instead: 
 [https://github.com/twentyhq/twenty/discussions/new](https://github.com/twentyhq/twenty/discussions/new)

docs/docs/others/telemetry.mdx

@@ -1,4 +1,6 @@
 ---
+title: Telemetry
+sidebar_position: 2
 sidebar_custom_props:
   icon: TbChartDots
 ---

docs/docs/start/getting-started.mdx

@@ -18,7 +18,7 @@ The signup is free.
 <ThemedImage sources={{light: "/img/light-sign-in.png", dark:"/img/dark-sign-in.png"}} style={{width:'100%', maxWidth:'800px'}}/>
 
 ### 2. Local
-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](/developer/local-setup) guide to get started.  
+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 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

@@ -21,6 +21,6 @@ ___
 
 Contributions are what makes the open source community such an amazing place.  
 
-Code contributions through pull request are most welcome. See our [local setup guide](../developer/local-setup) to get started.
+Code contributions through pull request are most welcome. See our [local setup guide](../contributor/local-setup) to get started.
 
 You can also contribute by creating an issue to report a bug you've spotted, joining our discussions or writing documentation.

docs/package.json

@@ -21,6 +21,7 @@
     "clsx": "^1.2.1",
     "graphiql": "^2.4.7",
     "graphql": "^16.6.0",
+    "iframe-resizer-react": "^1.1.0",
     "prism-react-renderer": "^1.3.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

docs/sidebars.js

@@ -26,9 +26,13 @@ const backToHomeLink = {
 /** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
 const sidebars = {
   docsSidebar: [{ type: "autogenerated", dirName: "." }],
-  level2PageSidebar: [
+  frontendSidebar: [
     backToHomeLink,
-    { type: "autogenerated", dirName: "level-1/level-2" },
+    { type: "autogenerated", dirName: "contributor/frontend" },
+  ],
+  backendSidebar: [
+    backToHomeLink,
+    { type: "autogenerated", dirName: "contributor/server" },
   ],
 };
 

docs/src/theme/DocSidebarItem/Link/index.js

@@ -18,9 +18,7 @@ const DocSidebarItemLink = ({
   const { href, label, className, autoAddBaseUrl, customProps = {} } = item;
   const isActive = isActiveSidebarItem(item, activePath);
   const isInternalLink = isInternalUrl(href);
-  const IconComponent = customProps?.icon
-    ? icons[customProps.icon]
-    : icons.TbFaceIdError;
+  const IconComponent = customProps?.icon ? icons[customProps.icon] : null;
 
   return (
     <li
@@ -48,9 +46,11 @@ const DocSidebarItemLink = ({
         {...props}
       >
         <span className="icon-and-text">
+        {IconComponent && (
           <i className="sidebar-item-icon">
             <IconComponent size={customProps.iconSize} />
           </i>
+        )}
           {label}
         </span>
         {!isInternalLink && <IconExternalLink />}

docs/src/theme/icons.js

@@ -11,6 +11,11 @@ export {
   TbChartDots,
   TbChecklist,
   TbCloud,
+  TbScript,
+  TbForms,
+  TbTable,
+  TbSlideshow,
+  TbBrandDocker,
   TbDeviceDesktop,
   TbExclamationCircle,
   TbEyeglass,

front/.storybook/main.js

@@ -2,14 +2,19 @@ const path = require('path');
 
 computeStoriesGlob = () => {
   if (process.env.STORYBOOK_STORIES_FOLDER === 'pages') {
-    return ['../src/pages/**/*.stories.@(js|jsx|ts|tsx)', '../src/__stories__/*.stories.@(js|jsx|ts|tsx)']
+    return [
+      '../src/pages/**/*.stories.@(js|jsx|ts|tsx)',
+      '../src/__stories__/*.stories.@(js|jsx|ts|tsx)',
+      '../src/pages/**/*.docs.mdx',
+      '../src/__stories__/*.docs.mdx'
+    ]
   }
 
   if (process.env.STORYBOOK_STORIES_FOLDER === 'modules') {
-    return ['../src/modules/**/*.stories.@(js|jsx|ts|tsx)']
+    return ['../src/modules/**/*.stories.@(js|jsx|ts|tsx)', '../src/modules/**/*.docs.mdx']
   }
 
-  return ['../src/**/*.stories.@(js|jsx|ts|tsx)']
+  return ['../src/**/*.stories.@(js|jsx|ts|tsx)', '../src/**/*.docs.mdx']
 };
 
 module.exports = {
@@ -77,7 +82,7 @@ module.exports = {
     'storybook-addon-pseudo-states',
     'storybook-addon-cookie',
   ],
-  docs: { autodocs: true },
+  docs: { autodocs: false },
   framework: {
     name: '@storybook/react-webpack5',
     options: {},

front/.storybook/preview-head.html

@@ -2,6 +2,7 @@
 href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
 rel="stylesheet"
 />
+<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.7/iframeResizer.contentWindow.min.js"></script>
 <style type="text/css">
 body {
   margin: 0;
@@ -12,4 +13,7 @@ body {
 html {
   font-size: 13px;
 }
+.sbdocs-wrapper {
+  padding: 0 !important;
+}
 </style>

front/src/modules/ui/button/components/__stories__/Button.docs.mdx

@@ -0,0 +1,28 @@
+{/* Button.mdx */}
+
+import { Meta, Controls, Story } from '@storybook/blocks';
+import * as ButtonStories from './Button.stories';
+
+<Meta of={ButtonStories} />
+
+Button is a clickable interactive element that triggers a response.
+
+You can place text and icons inside of a button.
+
+Buttons are often used for form submissions and to toggle elements into view.
+
+<Story of={ButtonStories.Default} />
+<br />
+
+## Properties
+
+<Controls />
+
+## Usage
+
+```js
+
+import { Button } from '@/ui/button/components/Button';
+
+<Button title='Click me' />
+```

front/src/modules/ui/button/components/__stories__/Button.stories.tsx

@@ -22,6 +22,9 @@ export default meta;
 type Story = StoryObj<typeof Button>;
 
 export const Default: Story = {
+  argTypes: {
+    Icon: { control: false },
+  },
   args: {
     title: 'Button',
     size: 'small',

packages/eslint-plugin-twenty-ts/dist/src/rules/no-spread-props.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const utils_1 = require("@typescript-eslint/utils");
-const createRule = utils_1.ESLintUtils.RuleCreator(() => "https://docs.twenty.com/developer/frontend/style-guide#no-single-variable-prop-spreading-in-jsx-elements");
+const createRule = utils_1.ESLintUtils.RuleCreator(() => "https://docs.twenty.com/contributor/frontend/style-guide#no-single-variable-prop-spreading-in-jsx-elements");
 const noSpreadPropsRule = createRule({
     create: (context) => ({
         JSXSpreadAttribute: (node) => {
@@ -19,7 +19,7 @@ const noSpreadPropsRule = createRule({
             description: "Disallow passing props as {...props} in React components.",
         },
         messages: {
-            noSpreadProps: `Single variable prop spreading is disallowed in JSX elements.\nPrefer explicitly listing out all props or using an object expression like so: \`{...{ prop1, prop2 }}\`.\nSee https://docs.twenty.com/developer/frontend/style-guide#no-single-variable-prop-spreading-in-jsx-elements for more information.`,
+            noSpreadProps: `Single variable prop spreading is disallowed in JSX elements.\nPrefer explicitly listing out all props or using an object expression like so: \`{...{ prop1, prop2 }}\`.\nSee https://docs.twenty.com/contributor/frontend/style-guide#no-single-variable-prop-spreading-in-jsx-elements for more information.`,
         },
         type: "suggestion",
         schema: [],

packages/eslint-plugin-twenty/src/rules/no-spread-props.ts

@@ -2,7 +2,7 @@ import { ESLintUtils } from "@typescript-eslint/utils";
 
 const createRule = ESLintUtils.RuleCreator(
   () =>
-    "https://docs.twenty.com/developer/frontend/style-guide#no-single-variable-prop-spreading-in-jsx-elements",
+    "https://docs.twenty.com/contributor/frontend/style-guide#no-single-variable-prop-spreading-in-jsx-elements",
 );
 
 const noSpreadPropsRule = createRule({
@@ -22,7 +22,7 @@ const noSpreadPropsRule = createRule({
       description: "Disallow passing props as {...props} in React components.",
     },
     messages: {
-      noSpreadProps: `Single variable prop spreading is disallowed in JSX elements.\nPrefer explicitly listing out all props or using an object expression like so: \`{...{ prop1, prop2 }}\`.\nSee https://docs.twenty.com/developer/frontend/style-guide#no-single-variable-prop-spreading-in-jsx-elements for more information.`,
+      noSpreadProps: `Single variable prop spreading is disallowed in JSX elements.\nPrefer explicitly listing out all props or using an object expression like so: \`{...{ prop1, prop2 }}\`.\nSee https://docs.twenty.com/contributor/frontend/style-guide#no-single-variable-prop-spreading-in-jsx-elements for more information.`,
     },
     type: "suggestion",
     schema: [],