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.
|
||||
|
||||
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/)
|
||||
@ -7,31 +7,29 @@ custom_edit_url: null
|
||||
---
|
||||
import ThemedImage from '@theme/ThemedImage';
|
||||
|
||||
Twenty is an Open Source CRM.
|
||||
<ThemedImage sources={{light: "./img/light-doc-preview.png", dark:"./img/dark-doc-preview.png"}} style={{width:'100%', maxWidth:'800px'}}/>
|
||||
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'}}/>
|
||||
|
||||
|
||||
## Why did we create Twenty?
|
||||
At first, CRM platforms were just for sales teams.
|
||||
But now, they've grown to cover more than just sales - they handle many aspects of running a business.
|
||||
This has often left in-house engineering teams out of the loop, making companies rely more on outside help to manage their CRM needs.
|
||||
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.
|
||||
|
||||
Our team has a shared passion for crafting beautiful products with great attention to details.
|
||||
And we are starting this project with one key goal: to put the power back in the hands of the people who use CRM systems every day.
|
||||
We wish to create a tool that users will enjoy, and that engineers will want to make their own and customize for their company's specific needs.
|
||||
We felt the need for a CRM solution that empowers rather than constrains, which inspired us to create Twenty. We’re building the next-generation open-source CRM that offers you the flexibility to shape it according to your business objectives and meet your team’s unique needs. We’ve packed Twenty with powerful features to give you full control and help you win more deals.
|
||||
|
||||
## Getting started
|
||||
|
||||
There are three ways for you to get started with Twenty:
|
||||
- **Cloud:** the fastest and easiest way to try the app (it's free)
|
||||
- **Local:** if you're a developer and would like to experiment or contribute to the app
|
||||
- **Self-hosting:** if you want greater control over your data and want to run the app on your own server
|
||||
- **Cloud:** The fastest and easiest way to try the app (it's free)
|
||||
- **Local:** If you're a developer and would like to experiment or contribute to the app
|
||||
- **Self-hosting:** If you want greater control over your data and want to run the app on your own server
|
||||
|
||||
See our [Getting Started](./start/getting-started/) guide to learn more.
|
||||
|
||||
## Contributing
|
||||
|
||||
Contributions are what makes the open source community such an amazing place.
|
||||
Code contributions through pull requests are most welcome.
|
||||
But it doesn't have to be code. You can also create an issue to report a bug you've spotted, join discussions or write documentation.
|
||||
|
||||
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.
|
||||
|
||||
|
||||
@ -1,28 +0,0 @@
|
||||
---
|
||||
title: Overview
|
||||
sidebar_position: 0
|
||||
sidebar_custom_props:
|
||||
icon: TbBolt
|
||||
---
|
||||
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'}}/>
|
||||
|
||||
___
|
||||
|
||||
## Why did we create Twenty?
|
||||
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 solution that empowers rather than constrains, which inspired us to create Twenty. We’re building the next-generation open-source CRM that offers you the flexibility to shape it according to your business objectives and meet your team’s unique needs. We’ve packed Twenty with powerful features to give you full control and help you win more deals.
|
||||
___
|
||||
|
||||
## Contributing
|
||||
|
||||
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](../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.
|
||||
@ -7,20 +7,20 @@ const darkCodeTheme = require('prism-react-renderer/themes/dracula');
|
||||
|
||||
/** @type {import('@docusaurus/types').Config} */
|
||||
const config = {
|
||||
title: 'Twenty - Documentation',
|
||||
tagline: 'Twenty is cool',
|
||||
favicon: 'img/logo-square-dark.ico',
|
||||
title: "Twenty - Documentation",
|
||||
tagline: "Twenty is cool",
|
||||
favicon: "img/logo-square-dark.ico",
|
||||
|
||||
// Prevent search engines from indexing the doc for selected environments
|
||||
noIndex: process.env.SHOULD_INDEX_DOC === 'false',
|
||||
noIndex: process.env.SHOULD_INDEX_DOC === "false",
|
||||
|
||||
// Set the production url of your site here
|
||||
url: 'https://docs.twenty.com',
|
||||
url: "https://docs.twenty.com",
|
||||
// Set the /<baseUrl>/ pathname under which your site is served
|
||||
// For GitHub pages deployment, it is often '/<projectName>/'
|
||||
baseUrl: '/',
|
||||
onBrokenLinks: 'throw',
|
||||
onBrokenMarkdownLinks: 'warn',
|
||||
baseUrl: "/",
|
||||
onBrokenLinks: "throw",
|
||||
onBrokenMarkdownLinks: "warn",
|
||||
|
||||
headTags: [],
|
||||
|
||||
@ -28,66 +28,72 @@ const config = {
|
||||
// metadata like html lang. For example, if your site is Chinese, you may want
|
||||
// to replace "en" with "zh-Hans".
|
||||
i18n: {
|
||||
defaultLocale: 'en',
|
||||
locales: ['en'],
|
||||
defaultLocale: "en",
|
||||
locales: ["en"],
|
||||
},
|
||||
presets: [
|
||||
[
|
||||
'classic',
|
||||
"classic",
|
||||
/** @type {import('@docusaurus/preset-classic').Options} */
|
||||
({
|
||||
docs: {
|
||||
breadcrumbs: false,
|
||||
sidebarPath: require.resolve('./sidebars.js'),
|
||||
sidebarPath: require.resolve("./sidebars.js"),
|
||||
sidebarCollapsible: false,
|
||||
routeBasePath: '/',
|
||||
editUrl: 'https://github.com/twentyhq/twenty/edit/main/docs/',
|
||||
routeBasePath: "/",
|
||||
editUrl: "https://github.com/twentyhq/twenty/edit/main/docs/",
|
||||
|
||||
},
|
||||
blog: false,
|
||||
theme: {
|
||||
customCss: require.resolve('./src/css/custom.css'),
|
||||
customCss: require.resolve("./src/css/custom.css"),
|
||||
},
|
||||
}),
|
||||
|
||||
]
|
||||
],
|
||||
],
|
||||
|
||||
themeConfig:
|
||||
/** @type {import('@docusaurus/preset-classic').ThemeConfig} */
|
||||
({
|
||||
// Replace with your project's social card
|
||||
image: 'img/social-card.png',
|
||||
colorMode:{
|
||||
defaultMode: 'light'
|
||||
image: "img/social-card.png",
|
||||
colorMode: {
|
||||
defaultMode: "light",
|
||||
},
|
||||
navbar: {
|
||||
/*title: 'Twenty',*/
|
||||
logo: {
|
||||
alt: 'Twenty',
|
||||
src: 'img/logo-square-dark.svg',
|
||||
srcDark: 'img/logo-square-light.svg',
|
||||
alt: "Twenty",
|
||||
src: "img/logo-square-dark.svg",
|
||||
srcDark: "img/logo-square-light.svg",
|
||||
},
|
||||
items: [
|
||||
{
|
||||
type: 'search',
|
||||
position: 'left',
|
||||
type: "search",
|
||||
position: "left",
|
||||
},
|
||||
{
|
||||
to: '/graphql/',
|
||||
label: 'GraphQL Playground',
|
||||
position: 'right'
|
||||
to: "/graphql/",
|
||||
label: "GraphQL Playground",
|
||||
position: "right",
|
||||
},
|
||||
{
|
||||
to: 'https://github.com/twentyhq/twenty/releases',
|
||||
label: 'Releases',
|
||||
position: 'right'
|
||||
}
|
||||
to: "https://github.com/twentyhq/twenty/releases",
|
||||
label: "Releases",
|
||||
position: "right",
|
||||
},
|
||||
{
|
||||
href: "https://github.com/twentyhq/twenty",
|
||||
position: "right",
|
||||
className: "header-github-link",
|
||||
"aria-label": "GitHub repository",
|
||||
},
|
||||
],
|
||||
},
|
||||
algolia: {
|
||||
appId: 'J2OX2P2QAO',
|
||||
apiKey: 'e0a7a59c7862598a0cf87307c8ea97f2',
|
||||
indexName: 'twenty',
|
||||
appId: "J2OX2P2QAO",
|
||||
apiKey: "e0a7a59c7862598a0cf87307c8ea97f2",
|
||||
indexName: "twenty",
|
||||
|
||||
// Optional: see doc section below
|
||||
contextualSearch: true,
|
||||
@ -101,7 +107,7 @@ const config = {
|
||||
// Optional: Algolia search parameters
|
||||
searchParameters: {},
|
||||
// Optional: path for search page that enabled by default (`false` to disable it)
|
||||
searchPagePath: 'search',
|
||||
searchPagePath: "search",
|
||||
},
|
||||
/* footer: {
|
||||
copyright: `© ${new Date().getFullYear()} Twenty. Docs generated with Docusaurus.`,
|
||||
|
||||
@ -262,3 +262,22 @@ a.table-of-contents__link:hover{
|
||||
.card{
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
.header-github-link:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.header-github-link:before {
|
||||
background: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
|
||||
no-repeat;
|
||||
content: "";
|
||||
display: flex;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
[data-theme='dark'] .header-github-link::before {
|
||||
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
|
||||
no-repeat;
|
||||
}
|
||||
BIN
docs/static/img/contributor/add-custom-objects.jpeg
vendored
Normal file
BIN
docs/static/img/contributor/add-custom-objects.jpeg
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
BIN
docs/static/img/contributor/custom-object-schema.jpeg
vendored
Normal file
BIN
docs/static/img/contributor/custom-object-schema.jpeg
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Reference in New Issue
Block a user