forked from twentyhq/twenty
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Introduce UI Components documentation (twentyhq#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
- Loading branch information
1 parent
7b6ee4e
commit edc060f
Showing
61 changed files
with
872 additions
and
1,011 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| { | ||
| "position": 3 | ||
| } |
4 changes: 1 addition & 3 deletions
4
docs/docs/developer/frontend/_category_.json → ...ributor/frontend/advanced/_category_.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| { | ||
| "label": "Basics", | ||
| "position": 1, | ||
| "customProps": { | ||
| "icon": "TbTerminal2" | ||
| } | ||
| } |
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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) | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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. | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| { | ||
| "label": "UI Components", | ||
| "position": 1, | ||
| "customProps": { | ||
| "icon": "TbTerminal2" | ||
| } | ||
| } |
9 changes: 9 additions & 0 deletions
9
docs/docs/contributor/frontend/ui-components/forms/_category_.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| { | ||
| "label": "Forms", | ||
| "position": 2, | ||
| "collapsible": true, | ||
| "collapsed": true, | ||
| "customProps": { | ||
| "icon": "TbForms" | ||
| } | ||
| } |
15 changes: 15 additions & 0 deletions
15
docs/docs/contributor/frontend/ui-components/forms/button.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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%'}} | ||
| /> | ||
|
|
||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| --- | ||
| title: Overview | ||
| sidebar_position: 0 | ||
| sidebar_custom_props: | ||
| icon: TbBrandFigma | ||
| --- | ||
|
|
||
| WIP | ||
|
|
4 changes: 2 additions & 2 deletions
4
docs/docs/developer/additional/glossary.mdx → docs/docs/contributor/glossary.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| { | ||
| "label": "Local setup", | ||
| "position": 1, | ||
| "collapsible": true, | ||
| "collapsed": true, | ||
| "customProps": { | ||
| "icon": "TbDeviceDesktop" | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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/)) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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. | ||
| ___ | ||
|
|
Oops, something went wrong.