From bea9d0835bd52abe29d80d4e4003f315b5f8ce12 Mon Sep 17 00:00:00 2001
From: Nimra Ahmed <50912134+nimraahmed@users.noreply.github.com>
Date: Thu, 19 Oct 2023 19:32:29 +0500
Subject: [PATCH] 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 | 2 +-
.../frontend/advanced/_category_.json | 5 +-
.../frontend/basics/_category_.json | 5 +-
.../contributor/frontend/basics/basics.mdx | 2 -
.../frontend/basics/contributing.mdx | 8 +-
.../frontend/basics/folder-architecture.mdx | 3 -
.../frontend/ui-components/_category_.json | 5 +-
.../frontend/ui-components/ui-components.mdx | 2 -
.../contributor/server/basics/_category_.json | 5 +-
.../server/basics/custom-objects.mdx | 17 +++++
.../docs/contributor/server/basics/zapier.mdx | 29 -------
.../contributor/server/others/_category_.json | 4 +
.../docs/contributor/server/others/zapier.mdx | 75 +++++++++++++++++++
docs/docs/contributor/server/server.mdx | 2 +-
docs/docs/developer/_category_.json | 2 +-
docs/docs/hosting/_category_.json | 4 -
docs/docs/others/CLI.mdx | 10 ---
docs/docs/others/_category_.json | 2 +-
docs/docs/start/getting-started.mdx | 2 +-
docs/docs/start/overview.mdx | 2 +-
docs/docs/{hosting => start}/self-hosting.mdx | 1 +
docs/docusaurus.config.js | 3 +
docs/src/css/custom.css | 16 +++-
docs/src/theme/Icon/DarkMode/index.js | 2 +-
docs/src/theme/Icon/LightMode/index.js | 4 +-
docs/src/theme/icons.js | 4 +-
26 files changed, 135 insertions(+), 81 deletions(-)
create mode 100644 docs/docs/contributor/server/basics/custom-objects.mdx
delete mode 100644 docs/docs/contributor/server/basics/zapier.mdx
create mode 100644 docs/docs/contributor/server/others/_category_.json
create mode 100644 docs/docs/contributor/server/others/zapier.mdx
delete mode 100644 docs/docs/hosting/_category_.json
delete mode 100644 docs/docs/others/CLI.mdx
rename docs/docs/{hosting => start}/self-hosting.mdx (98%)
diff --git a/docs/docs/contributor/_category_.json b/docs/docs/contributor/_category_.json
index 98b3340caaf..c4117720daf 100644
--- a/docs/docs/contributor/_category_.json
+++ b/docs/docs/contributor/_category_.json
@@ -1,4 +1,4 @@
{
"label": "Contributor guide",
- "position": 3
+ "position": 2
}
diff --git a/docs/docs/contributor/frontend/advanced/_category_.json b/docs/docs/contributor/frontend/advanced/_category_.json
index 29fddaafe56..dd1c52f2ee6 100644
--- a/docs/docs/contributor/frontend/advanced/_category_.json
+++ b/docs/docs/contributor/frontend/advanced/_category_.json
@@ -1,7 +1,4 @@
{
"label": "Advanced",
- "position": 3,
- "customProps": {
- "icon": "TbTerminal2"
- }
+ "position": 3
}
diff --git a/docs/docs/contributor/frontend/basics/_category_.json b/docs/docs/contributor/frontend/basics/_category_.json
index e99e1a8aa11..daec3e16a89 100644
--- a/docs/docs/contributor/frontend/basics/_category_.json
+++ b/docs/docs/contributor/frontend/basics/_category_.json
@@ -1,7 +1,4 @@
{
"label": "Basics",
- "position": 1,
- "customProps": {
- "icon": "TbTerminal2"
- }
+ "position": 1
}
diff --git a/docs/docs/contributor/frontend/basics/basics.mdx b/docs/docs/contributor/frontend/basics/basics.mdx
index 32d1047faf1..e1ae97d12fb 100644
--- a/docs/docs/contributor/frontend/basics/basics.mdx
+++ b/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';
diff --git a/docs/docs/contributor/frontend/basics/contributing.mdx b/docs/docs/contributor/frontend/basics/contributing.mdx
index 0c421c46aaf..885a8a2d070 100644
--- a/docs/docs/contributor/frontend/basics/contributing.mdx
+++ b/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)
diff --git a/docs/docs/contributor/frontend/basics/folder-architecture.mdx b/docs/docs/contributor/frontend/basics/folder-architecture.mdx
index eed751c29b4..3382a2e3785 100644
--- a/docs/docs/contributor/frontend/basics/folder-architecture.mdx
+++ b/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
diff --git a/docs/docs/contributor/frontend/ui-components/_category_.json b/docs/docs/contributor/frontend/ui-components/_category_.json
index 15e39f15470..89ff27960ca 100644
--- a/docs/docs/contributor/frontend/ui-components/_category_.json
+++ b/docs/docs/contributor/frontend/ui-components/_category_.json
@@ -1,7 +1,4 @@
{
"label": "UI Components",
- "position": 1,
- "customProps": {
- "icon": "TbTerminal2"
- }
+ "position": 1
}
diff --git a/docs/docs/contributor/frontend/ui-components/ui-components.mdx b/docs/docs/contributor/frontend/ui-components/ui-components.mdx
index 772d1d5a522..d1c137ca689 100644
--- a/docs/docs/contributor/frontend/ui-components/ui-components.mdx
+++ b/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';
diff --git a/docs/docs/contributor/server/basics/_category_.json b/docs/docs/contributor/server/basics/_category_.json
index e99e1a8aa11..daec3e16a89 100644
--- a/docs/docs/contributor/server/basics/_category_.json
+++ b/docs/docs/contributor/server/basics/_category_.json
@@ -1,7 +1,4 @@
{
"label": "Basics",
- "position": 1,
- "customProps": {
- "icon": "TbTerminal2"
- }
+ "position": 1
}
diff --git a/docs/docs/contributor/server/basics/custom-objects.mdx b/docs/docs/contributor/server/basics/custom-objects.mdx
new file mode 100644
index 00000000000..dc11f4b0b8b
--- /dev/null
+++ b/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.
\ No newline at end of file
diff --git a/docs/docs/contributor/server/basics/zapier.mdx b/docs/docs/contributor/server/basics/zapier.mdx
deleted file mode 100644
index 19aee2530f2..00000000000
--- a/docs/docs/contributor/server/basics/zapier.mdx
+++ /dev/null
@@ -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
diff --git a/docs/docs/contributor/server/others/_category_.json b/docs/docs/contributor/server/others/_category_.json
new file mode 100644
index 00000000000..da47888894f
--- /dev/null
+++ b/docs/docs/contributor/server/others/_category_.json
@@ -0,0 +1,4 @@
+{
+ "label": "Others",
+ "position": 2
+}
diff --git a/docs/docs/contributor/server/others/zapier.mdx b/docs/docs/contributor/server/others/zapier.mdx
new file mode 100644
index 00000000000..7d5dbf5e6f7
--- /dev/null
+++ b/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
+```
diff --git a/docs/docs/contributor/server/server.mdx b/docs/docs/contributor/server/server.mdx
index cf9b28efdba..5bd75a3b493 100644
--- a/docs/docs/contributor/server/server.mdx
+++ b/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
---
diff --git a/docs/docs/developer/_category_.json b/docs/docs/developer/_category_.json
index 459b7f56314..8736dcf6235 100644
--- a/docs/docs/developer/_category_.json
+++ b/docs/docs/developer/_category_.json
@@ -1,4 +1,4 @@
{
"label": "Developer guide",
- "position": 4
+ "position": 3
}
diff --git a/docs/docs/hosting/_category_.json b/docs/docs/hosting/_category_.json
deleted file mode 100644
index 4d559f849e1..00000000000
--- a/docs/docs/hosting/_category_.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "label": "Self-Hosting",
- "position": 2
-}
diff --git a/docs/docs/others/CLI.mdx b/docs/docs/others/CLI.mdx
deleted file mode 100644
index c95cb5b8f25..00000000000
--- a/docs/docs/others/CLI.mdx
+++ /dev/null
@@ -1,10 +0,0 @@
----
-title: CLI
-sidebar_position: 1
-sidebar_class_name: coming-soon
-sidebar_custom_props:
- icon: TbTerminal2
----
-
-
-Available soon!
\ No newline at end of file
diff --git a/docs/docs/others/_category_.json b/docs/docs/others/_category_.json
index 31b069864d3..5901bf5b65a 100644
--- a/docs/docs/others/_category_.json
+++ b/docs/docs/others/_category_.json
@@ -1,4 +1,4 @@
{
"label": "Others",
- "position": 5
+ "position": 4
}
diff --git a/docs/docs/start/getting-started.mdx b/docs/docs/start/getting-started.mdx
index e0401cac8a5..a203473da96 100644
--- a/docs/docs/start/getting-started.mdx
+++ b/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.
___
diff --git a/docs/docs/start/overview.mdx b/docs/docs/start/overview.mdx
index 74cc8f34f1a..fe22dc345db 100644
--- a/docs/docs/start/overview.mdx
+++ b/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.
-
+
___
diff --git a/docs/docs/hosting/self-hosting.mdx b/docs/docs/start/self-hosting.mdx
similarity index 98%
rename from docs/docs/hosting/self-hosting.mdx
rename to docs/docs/start/self-hosting.mdx
index c16e5d2035e..b4f6b1295eb 100644
--- a/docs/docs/hosting/self-hosting.mdx
+++ b/docs/docs/start/self-hosting.mdx
@@ -1,5 +1,6 @@
---
title: Self-Hosting
+sidebar_position: 2
sidebar_custom_props:
icon: TbServer
---
diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
index 847ad0e43e9..f6e449fa788 100644
--- a/docs/docusaurus.config.js
+++ b/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: {
diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
index 26cfdbe2fb7..a7b0cebc136 100644
--- a/docs/src/css/custom.css
+++ b/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 {
diff --git a/docs/src/theme/Icon/DarkMode/index.js b/docs/src/theme/Icon/DarkMode/index.js
index 57a210842c6..8e247f6c1f4 100644
--- a/docs/src/theme/Icon/DarkMode/index.js
+++ b/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' ? : <>;
}
diff --git a/docs/src/theme/Icon/LightMode/index.js b/docs/src/theme/Icon/LightMode/index.js
index 901da61783e..77bf2b5e6ef 100644
--- a/docs/src/theme/Icon/LightMode/index.js
+++ b/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' ? <>: ;
+ const { colorMode } = useColorMode();
+ return colorMode === 'light' ? : <>;
}
export default IconLightMode;
diff --git a/docs/src/theme/icons.js b/docs/src/theme/icons.js
index 2d09fb3dba7..687f76757f6 100644
--- a/docs/src/theme/icons.js
+++ b/docs/src/theme/icons.js
@@ -32,5 +32,7 @@ export {
TbTopologyStar,
TbVocabulary,
TbZoomQuestion,
- TbRocket
+ TbRocket,
+ TbAugmentedReality,
+ TbTerminal,
} from "react-icons/tb";