Doc addition & changes (#2152)
* 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 * doc addition and changes
This commit is contained in:
Nimra Ahmed
@ -26,7 +26,7 @@ We also provide an easy way to run the project with [Docker](/contributor/local-
|
||||
|
||||
## Windows users
|
||||
|
||||
Windows users can install the project through WSL2. We provide a [guide](/contributor/local-setup/wsl-setup) to help you get started.
|
||||
Windows users can install the project through WSL2. We provide a [guide](/contributor/local-setup/yarn-setup) to help you get started.
|
||||
|
||||
## Project structure
|
||||
|
||||
|
||||
@ -1,60 +0,0 @@
|
||||
---
|
||||
title: Windows WSL Setup
|
||||
sidebar_position: 2
|
||||
description: Install the project with WSL2 (Windows)
|
||||
sidebar_custom_props:
|
||||
icon: TbBrandWindows
|
||||
---
|
||||
|
||||
This document guides you through installing the project with WSL2.
|
||||
|
||||
## Install WSL
|
||||
|
||||
Open PowerShell as Administrator and run:
|
||||
|
||||
```powershell
|
||||
wsl --install
|
||||
```
|
||||
|
||||
You should be prompted to restart your computer. If not, restart it manually.
|
||||
|
||||
Upon restart, a powershell window will open and install Ubuntu. This may take a few minutes.
|
||||
You will be prompted to create a username and password for your Ubuntu installation.
|
||||
|
||||
<div style={{textAlign: 'center'}}>
|
||||
<img src="/img/contributor/wsl-complete.png" alt="Visual Studio Code: Open in container" width="90%" />
|
||||
</div>
|
||||
|
||||
## Setup your developer environment
|
||||
|
||||
### Step 1: Install Git
|
||||
|
||||
```
|
||||
sudo apt-get install git
|
||||
```
|
||||
Then, configure your git user name and email using the following commands, replacing name and email with your own. These details will be associated with any commits that you create:
|
||||
|
||||
```
|
||||
git config --global user.name "Your Name"
|
||||
git config --global user.email "youremail@domain.com"
|
||||
```
|
||||
:::info Note
|
||||
|
||||
If you don't have a Github account, create one now with the corresponding email address. We recommend that you setup a SSH key for your Github account. Follow the instructions [here](https://docs.github.com/fr/authentication/connecting-to-github-with-ssh/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent).
|
||||
|
||||
:::
|
||||
|
||||
### Step 2: Install Node.js, nvm, Yarn
|
||||
|
||||
```bash
|
||||
sudo apt-get install curl
|
||||
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh | bash
|
||||
curl -o- -L https://yarnpkg.com/install.sh | bash
|
||||
```
|
||||
|
||||
Close and reopen your terminal to start using nvm.
|
||||
|
||||
### Step 3: Install Twenty
|
||||
|
||||
Follow our [Yarn install guide](/contributor/local-setup/yarn-setup) to install Twenty.
|
||||
We don't recommend using Docker on WSL as it adds an extra layer of complexity.
|
||||
@ -3,14 +3,13 @@ title: Yarn Setup
|
||||
sidebar_position: 1
|
||||
description: |
|
||||
Set up the project with Yarn
|
||||
(MacOs and Linux)
|
||||
sidebar_custom_props:
|
||||
icon: TbScript
|
||||
---
|
||||
import Tabs from '@theme/Tabs';
|
||||
import TabItem from '@theme/TabItem';
|
||||
|
||||
In this document, you'll learn how to install the project using yarn. We recommend this method since it's the easiest way to get started but you can also run the project with [Docker](/contributor/local-setup/docker-setup) or [WSL2](/contributor/local-setup/wsl-setup).
|
||||
In this document, you'll learn how to install the project using yarn. We recommend this method since it's the easiest way to get started but you can also run the project with [Docker](/contributor/local-setup/docker-setup).
|
||||
|
||||
:::info
|
||||
`npm` currently does not support local packages satisfactorily. We strongly recommend using `yarn` instead.
|
||||
@ -18,12 +17,55 @@ In this document, you'll learn how to install the project using yarn. We recomme
|
||||
|
||||
## Prerequisites
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="yarn" label="Linux and MacOS" default>
|
||||
|
||||
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 v18](https://nodejs.org/en/download)
|
||||
- [yarn v1](https://classic.yarnpkg.com/lang/en/docs/install/)
|
||||
- [nvm](https://github.com/nvm-sh/nvm/blob/master/README.md)
|
||||
|
||||
</TabItem>
|
||||
|
||||
<TabItem value="wsl" label="Windows (WSL)" >
|
||||
|
||||
1. Install WSL
|
||||
Open PowerShell as Administrator and run:
|
||||
|
||||
```powershell
|
||||
wsl --install
|
||||
```
|
||||
You should be prompted to restart your computer. If not, restart it manually.
|
||||
|
||||
Upon restart, a powershell window will open and install Ubuntu. This may take a few minutes.
|
||||
You will be prompted to create a username and password for your Ubuntu installation.
|
||||
|
||||
2. Install and configure git
|
||||
|
||||
```bash
|
||||
sudo apt-get install git
|
||||
git config --global user.name "Your Name"
|
||||
git config --global user.email "youremail@domain.com"
|
||||
```
|
||||
|
||||
3. Install Node.js, nvm, yarn
|
||||
```bash
|
||||
sudo apt-get install curl
|
||||
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh | bash
|
||||
curl -o- -L https://yarnpkg.com/install.sh | bash
|
||||
```
|
||||
Close and reopen your terminal to start using nvm.
|
||||
|
||||
:::caution Note
|
||||
|
||||
We don't recommend using Docker on WSL as it adds an extra layer of complexity.
|
||||
|
||||
:::
|
||||
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
---
|
||||
|
||||
## Step 1: Git Clone
|
||||
|
||||
@ -5,13 +5,38 @@ 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.
|
||||
Objects are structures that allow you to store data (records, attributes, and values) specific to an organization. Twenty provides both standard and custom objects.
|
||||
|
||||
Standard objects are built-in objects with a set of attributes available for all users. Examples of standard objects in Twenty include Company and Person. Standard objects have standard fields that are also available for all Twenty users, like Company.displayName.
|
||||
|
||||
Custom objects are objects that you can create to store information that is unique to your organization. They are not built-in; members of your workspace can create and customize custom objects to hold information that standard objects aren't suitable for.
|
||||
|
||||
|
||||
## High-level schema
|
||||
|
||||
<div style={{textAlign: 'center'}}>
|
||||
<img src="/img/contributor/custom-object-schema.jpeg" alt="High level schema" />
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
|
||||
## 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:
|
||||
Custom objects are derived from metadata tables that determine the shape, name, and type of the objects. All this information is stored 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.
|
||||
- **Field**: Outlines an Object's fields and connects to the Object.
|
||||
|
||||
To add a custom object, the workspaceMember will query the /metadata API. Then, the metadata is updated accordingly and a GraphQL schema is computed based on metadata and stored in a GQL cache for later use.
|
||||
|
||||
<div style={{textAlign: 'center'}}>
|
||||
<img src="/img/contributor/add-custom-objects.jpeg" alt="Query the /metadata API to add custom objects" />
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
|
||||
To fetch data, querying is done through the /graphql endpoint and goes through the Query Resolver.
|
||||
<div style={{textAlign: 'center'}}>
|
||||
<img src="/img/contributor/custom-objects-schema.png" alt="Query the /graphql endpoint to fetch data" />
|
||||
</div>
|
||||
|
||||
@ -8,18 +8,24 @@ sidebar_custom_props:
|
||||
We primarily use NestJS for our backend. We previously used to have Prisma as the ORM with a lot of auto-generated code under the hood. But since we want to offer flexibility so that users can create custom fields and custom objects, we needed something more low-level than Prisma to have more fine-grained control. This is why we switched to TypeORM. Here's what our tech stack now looks like.
|
||||
|
||||
## Tech Stack
|
||||
|
||||
**Core**
|
||||
- [NestJS](https://nestjs.com/)
|
||||
- [TypeORM](https://typeorm.io/)
|
||||
- [GraphQL Yoga](https://the-guild.dev/graphql/yoga-server)
|
||||
- [Sentry](https://sentry.io/welcome/)
|
||||
- [AWS EKS](https://aws.amazon.com/eks/)
|
||||
|
||||
**Database**
|
||||
- [Postgres](https://www.postgresql.org/)
|
||||
|
||||
**Third-party integrations**
|
||||
- [Sentry](https://sentry.io/welcome/) for tracking bugs
|
||||
|
||||
**Testing**
|
||||
- [Jest](https://jestjs.io/)
|
||||
|
||||
**Tooling**
|
||||
- [Yarn](https://yarnpkg.com/)
|
||||
- [ESLint](https://eslint.org/)
|
||||
|
||||
**Development**
|
||||
- [AWS EKS](https://aws.amazon.com/eks/)
|
||||
Reference in New Issue
Block a user