scottk/twenty
1
0
Fork 0
mirror of https://github.com/lingble/twenty.git synced 2025-10-29 20:02:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

Docs modifications (#5804)

Browse Source 
- Fixes #5504
- Fixes #5503
- Return 404 when the page does not exist
- Modified the footer in order to align it properly
- Removed "noticed something to change" in each table of content
- Fixed the URLs of the edit module 
- Added the edit module to Developers
- Fixed header style on the REST API page.
- Edited the README to point to Developers
- Fixed selected state when clicking on sidebar elements

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
This commit is contained in:
Ady Beraud
2024-06-11 10:45:17 +03:00
committed by GitHub
parent 3c5a4ba692
commit ff1bca1816
261 changed files with 459 additions and 12184 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
.github/workflows/ci-docs.yaml vendored
View File

@@ -1,42 +0,0 @@
name: CI Docs
on:
push:
branches:
- main
paths:
- 'package.json'
- 'packages/twenty-docs/**'
- 'packages/twenty-ui/**'
pull_request:
paths:
- 'package.json'
- 'packages/twenty-docs/**'
- 'packages/twenty-ui/**'
concurrency:
group: ${{ github.workflow }}-${{ github.ref }}
cancel-in-progress: true
jobs:
docs-build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Install dependencies
uses: ./.github/workflows/actions/yarn-install
- name: Docs / Build Documentation
run: npx nx build twenty-docs
vale:
name: runner / vale
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: errata-ai/vale-action@reviewdog
with:
files: ${{ steps.directories.outputs.LIST }}
fail_on_error: true
vale_flags: "--minAlertLevel=error"
reporter: github-pr-check
token: ${{ github.token }}
filter_mode: nofilter
env:
REVIEWDOG_GITHUB_API_TOKEN: ${{ github.token }}

6
README.md
View File

@@ -9,7 +9,7 @@
<h2 align="center" >The #1 Open-Source CRM </h3>
<p align="center">Tailored to your unique business needs</p>
<p align="center"><a href="https://twenty.com">🌐 Website</a> · <a href="https://docs.twenty.com">📚 Documentation</a> · <a href="https://discord.gg/cx5n4Jzs57"><img src="./packages/twenty-docs/static/img/discord-icon.svg" width="12" height="12"/> Discord</a> · <a href="https://www.figma.com/file/xt8O9mFeLl46C5InWwoMrN/Twenty"><img src="./packages/twenty-docs/static/img/figma-icon.png" width="12" height="12"/> Figma</a><p>
<p align="center"><a href="https://twenty.com">🌐 Website</a> · <a href="https://twenty.com/developers">📚 Documentation</a> · <a href="https://discord.gg/cx5n4Jzs57"><img src="./packages/twenty-docs/static/img/discord-icon.svg" width="12" height="12"/> Discord</a> · <a href="https://www.figma.com/file/xt8O9mFeLl46C5InWwoMrN/Twenty"><img src="./packages/twenty-docs/static/img/figma-icon.png" width="12" height="12"/> Figma</a><p>
<br />
@@ -38,8 +38,8 @@ password: Applecar2025
```
See also:
🚀 [Self-hosting](https://docs.twenty.com/start/self-hosting/)
🖥️ [Local Setup](https://docs.twenty.com/start/local-setup)
🚀 [Self-hosting](https://twenty.com/developers/section/self-hosting)
🖥️ [Local Setup](https://twenty.com/developers/local-setup)
# Why Choose Twenty?
We understand that the CRM landscape is vast. So why should you choose us?

22
packages/twenty-docs/.gitignore vendored
View File

@@ -1,22 +0,0 @@
# Dependencies
/node_modules
# Production
/build
# Generated files
.docusaurus
.cache-loader
# Misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*
package-lock.json

5
packages/twenty-docs/README.md
View File

@@ -1,5 +0,0 @@
# Documentation
The docs here are managed through [Docusaurus 2](https://docusaurus.io/).
We recommend you go directly to the [statically generated website](https://docs.twenty.com) rather than read them here.

3
packages/twenty-docs/babel.config.js
View File

@@ -1,3 +0,0 @@
module.exports = {
presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
};

4
packages/twenty-docs/docs/contributor/_category_.json
View File

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

15
packages/twenty-docs/docs/contributor/bug-and-requests.mdx
View File

@@ -1,15 +0,0 @@
---
title: Bugs and Requests
sidebar_position: 3
sidebar_custom_props:
icon: TbBug
---
## Reporting Bugs
To report a bug, please [create an issue on GitHub](https://github.com/twentyhq/twenty/issues/new).
You can also ask for help on [Discord](https://discord.gg/cx5n4Jzs57).
## 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).

5
packages/twenty-docs/docs/contributor/frontend/_category_.json
View File

@@ -1,5 +0,0 @@
{
"position": 3,
"collapsible": true,
"collapsed": true
}

330
packages/twenty-docs/docs/contributor/frontend/best-practices.mdx
View File

@@ -1,330 +0,0 @@
---
title: Best Practices
sidebar_position: 3
sidebar_custom_props:
icon: TbChecklist
---
This document outlines the best practices you should follow when working on the frontend.
## State management
React and Recoil handle state management in the codebase.
### Use `useRecoilState` to store state
It's good practice to create as many atoms as you need to store your state.
:::tip
It's better to use extra atoms than trying to be too concise with props drilling.
:::
```tsx
export const myAtomState = atom({
key: 'myAtomState',
default: 'default value',
});
export const MyComponent = () => {
const [myAtom, setMyAtom] = useRecoilState(myAtomState);
return (
<div>
<input
value={myAtom}
onChange={(e) => setMyAtom(e.target.value)}
/>
</div>
);
}
```
### Do not use `useRef` to store state
Avoid using `useRef` to store state.
If you want to store state, you should use `useState` or `useRecoilState`.
See [how to manage re-renders](#managing-re-renders) if you feel like you need `useRef` to prevent some re-renders from happening.
## Managing re-renders
Re-renders can be hard to manage in React.
Here are some rules to follow to avoid unnecessary re-renders.
Keep in mind that you can **always** avoid re-renders by understanding their cause.
### Work at the root level
Avoiding re-renders in new features is now made easy by eliminating them at the root level.
The `PageChangeEffect` sidecar component contains just one `useEffect` that holds all the logic to execute on a page change.
That way you know that there's just one place that can trigger a re-render.
### Always think twice before adding `useEffect` in your codebase
Re-renders are often caused by unnecessary `useEffect`.
You should think whether you need `useEffect`, or if you can move the logic in a event handler function.
You'll find it generally easy to move the logic in a `handleClick` or `handleChange` function.
You can also find them in libraries like Apollo: `onCompleted`, `onError`, etc.
### Use a sibling component to extract `useEffect` or data fetching logic
If you feel like you need to add a `useEffect` in your root component, you should consider extracting it in a sidecar component.
You can apply the same for data fetching logic, with Apollo hooks.
```tsx
// ❌ Bad, will cause re-renders even if data is not changing,
// because useEffect needs to be re-evaluated
export const PageComponent = () => {
const [data, setData] = useRecoilState(dataState);
const [someDependency] = useRecoilState(someDependencyState);
useEffect(() => {
if(someDependency !== data) {
setData(someDependency);
}
}, [someDependency]);
return <div>{data}</div>;
};
export const App = () => (
<RecoilRoot>
<PageComponent />
</RecoilRoot>
);
```
```tsx
// ✅ Good, will not cause re-renders if data is not changing,
// because useEffect is re-evaluated in another sibling component
export const PageComponent = () => {
const [data, setData] = useRecoilState(dataState);
return <div>{data}</div>;
};
export const PageData = () => {
const [data, setData] = useRecoilState(dataState);
const [someDependency] = useRecoilState(someDependencyState);
useEffect(() => {
if(someDependency !== data) {
setData(someDependency);
}
}, [someDependency]);
return <></>;
};
export const App = () => (
<RecoilRoot>
<PageData />
<PageComponent />
</RecoilRoot>
);
```
### Use recoil family states and recoil family selectors
Recoil family states and selectors are a great way to avoid re-renders.
They are useful when you need to store a list of items.
### You shouldn't use `React.memo(MyComponent)`
Avoid using `React.memo()` because it does not solve the cause of the re-render, but instead breaks the re-render chain, which can lead to unexpected behavior and make the code very hard to refactor.
### Limit `useCallback` or `useMemo` usage
They are often not necessary and will make the code harder to read and maintain for a gain of performance that is unnoticeable.
## Console.logs
`console.log` statements are invaluable during development, offering real-time insights into variable values and code flow. But, leaving them in production code can lead to several issues:
1. **Performance**: Excessive logging can affect the runtime performance, specially on client-side applications.
2. **Security**: Logging sensitive data can expose critical information to anyone who inspects the browser's console.
3. **Cleanliness**: Filling up the console with logs can obscure important warnings or errors that developers or tools need to see.
4. **Professionalism**: End users or clients checking the console and seeing a myriad of log statements might question the code's quality and polish.
Make sure you remove all `console.logs` before pushing the code to production.
## Naming
### Variable Naming
Variable names ought to precisely depict the purpose or function of the variable.
#### The issue with generic names
Generic names in programming are not ideal because they lack specificity, leading to ambiguity and reduced code readability. Such names fail to convey the variable or function's purpose, making it challenging for developers to understand the code's intent without deeper investigation. This can result in increased debugging time, higher susceptibility to errors, and difficulties in maintenance and collaboration. Meanwhile, descriptive naming makes the code self-explanatory and easier to navigate, enhancing code quality and developer productivity.
```tsx
// ❌ Bad, uses a generic name that doesn't communicate its
// purpose or content clearly
const [value, setValue] = useState('');
```
```tsx
// ✅ Good, uses a descriptive name
const [email, setEmail] = useState('');
```
#### Some words to avoid in variable names
- dummy
### Event handlers
Event handler names should start with `handle`, while `on` is a prefix used to name events in components props.
```tsx
// ❌ Bad
const onEmailChange = (val: string) => {
// ...
};
```
```tsx
// ✅ Good
const handleEmailChange = (val: string) => {
// ...
};
```
## Optional Props
Avoid passing the default value for an optional prop.
**EXAMPLE**
Take the`EmailField` component defined below:
```tsx
type EmailFieldProps = {
value: string;
disabled?: boolean;
};
const EmailField = ({ value, disabled = false }: EmailFieldProps) => (
<TextInput value={value} disabled={disabled} fullWidth />
);
```
**Usage**
```tsx
// ❌ Bad, passing in the same value as the default value adds no value
const Form = () => <EmailField value="username@email.com" disabled={false} />;
```
```tsx
// ✅ Good, assumes the default value
const Form = () => <EmailField value="username@email.com" />;
```
## Component as props
Try as much as possible to pass uninstantiated components as props, so children can decide on their own of what props they need to pass.
The most common example for that is icon components:
```tsx
const SomeParentComponent = () => <MyComponent Icon={MyIcon} />;
// In MyComponent
const MyComponent = ({ MyIcon }: { MyIcon: IconComponent }) => {
const theme = useTheme();
return (
<div>
<MyIcon size={theme.icon.size.md}>
</div>
)
};
```
For React to understand that the component is a component, you need to use PascalCase, to later instantiate it with `<MyIcon>`
## Prop Drilling: Keep It Minimal
Prop drilling, in the React context, refers to the practice of passing state variables and their setters through many component layers, even if intermediary components don't use them. While sometimes necessary, excessive prop drilling can lead to:
1. **Decreased Readability**: Tracing where a prop originates or where it's utilized can become convoluted in a deeply nested component structure.
2. **Maintenance Challenges**: Changes in one component's prop structure might require adjustments in several components, even if they don't directly use the prop.
3. **Reduced Component Reusability**: A component receiving a lot of props solely for 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](#state-management).
## Imports
When importing, opt for the designated aliases rather than specifying complete or relative paths.
**The Aliases**
```js
{
alias: {
"~": path.resolve(__dirname, "src"),
"@": path.resolve(__dirname, "src/modules"),
"@testing": path.resolve(__dirname, "src/testing"),
},
}
```
**Usage**
```tsx
// ❌ Bad, specifies the entire relative path
import {
CatalogDecorator
} from '../../../../../testing/decorators/CatalogDecorator';
import {
ComponentDecorator
} from '../../../../../testing/decorators/ComponentDecorator';
```
```tsx
// ✅ Good, utilises the designated aliases
import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
import { ComponentDecorator } from 'twenty-ui';=
```
## Schema Validation
[Zod](https://github.com/colinhacks/zod) is the schema validator for untyped objects:
```js
const validationSchema = z
.object({
exist: z.boolean(),
email: z
.string()
.email('Email must be a valid email'),
password: z
.string()
.regex(PASSWORD_REGEX, 'Password must contain at least 8 characters'),
})
.required();
type Form = z.infer<typeof validationSchema>;
```
## Breaking Changes
Always perform thorough manual testing before proceeding to guarantee that modifications haven’t caused disruptions elsewhere, given that tests have not yet been extensively integrated.

113
packages/twenty-docs/docs/contributor/frontend/folder-architecture.mdx
View File

@@ -1,113 +0,0 @@
---
title: Folder Architecture
sidebar_position: 5
description: A detailed look into our folder architecture
sidebar_custom_props:
icon: TbFolder
---
In this guide, you will explore the details of the project directory structure and how it contributes to the organization and maintainability of Twenty.
By following this folder architecture convention, it's easier to find the files related to specific features and ensure that the application is scalable and maintainable.
```
front
└───modules
│ └───module1
│ │ └───submodule1
│ └───module2
│ └───ui
│ │ └───display
│ │ └───inputs
│ │ │ └───buttons
│ │ └───...
└───pages
└───...
```
## Pages
Includes the top-level components defined by the application routes. They import more low-level components from the modules folder (more details below).
## Modules
Each module represents a feature or a group of feature, comprising its specific components, states, and operational logic.
They should all follow the structure below. You can nest modules within modules (referred to as submodules) and the same rules will apply.
```
module1
└───components
│ └───component1
│ └───component2
└───constants
└───contexts
└───graphql
│ └───fragments
│ └───queries
│ └───mutations
└───hooks
│ └───internal
└───states
│ └───selectors
└───types
└───utils
```
### Contexts
A context is a way to pass data through the component tree without having to pass props down manually at every level.
See [React Context](https://react.dev/reference/react#context-hooks) for more details.
### GraphQL
Includes fragments, queries, and mutations.
See [GraphQL](https://graphql.org/learn/) for more details.
- Fragments
A fragment is a reusable piece of a query, which you can use in different places. By using fragments, it's easier to avoid duplicating code.
See [GraphQL Fragments](https://graphql.org/learn/queries/#fragments) for more details.
- Queries
See [GraphQL Queries](https://graphql.org/learn/queries/) for more details.
- Mutations
See [GraphQL Mutations](https://graphql.org/learn/queries/#mutations) for more details.
### Hooks
See [Hooks](https://react.dev/learn/reusing-logic-with-custom-hooks) for more details.
### States
Contains the state management logic. [RecoilJS](https://recoiljs.org) handles this.
- Selectors: See [RecoilJS Selectors](https://recoiljs.org/docs/basic-tutorial/selectors) for more details.
React's built-in state management still handles state within a component.
### Utils
Should just contain reusable pure functions. Otherwise, create custom hooks in the `hooks` folder.
## UI
Contains all the reusable UI components used in the application.
This folder can contain sub-folders, like `data`, `display`, `feedback`, and `input` for specific types of components. Each component should be self-contained and reusable, so that you can use it in different parts of the application.
By separating the UI components from the other components in the `modules` folder, it's easier to maintain a consistent design and to make changes to the UI without affecting other parts (business logic) of the codebase.
## Interface and dependencies
You can import other module code from any module except for the `ui` folder. This will keep its code easy to test.
### Internal
Each part (hooks, states, ...) of a module can have an `internal` folder, which contains parts that are just used within the module.

86
packages/twenty-docs/docs/contributor/frontend/frontend.mdx
View File

@@ -1,86 +0,0 @@
---
id: frontend
title: Frontend Development
sidebar_position: 0
sidebar_custom_props:
icon: TbTerminal2
---
import DocCardList from '@theme/DocCardList';
<DocCardList />
## Useful commands
### Starting the app
```bash
nx start twenty-front
```
### Regenerate graphql schema based on API graphql schema
```bash
nx graphql:generate twenty-front
```
### Lint
```bash
nx lint twenty-front
```
### Test
```bash
nx test twenty-front# run jest tests
nx storybook:dev twenty-front# run storybook
nx storybook:test twenty-front# run tests # (needs yarn storybook:dev to be running)
nx storybook:coverage twenty-front # (needs yarn storybook:dev to be running)
```
## Tech Stack
The project has a clean and simple stack, with minimal boilerplate code.
**App**
- [React](https://react.dev/)
- [Apollo](https://www.apollographql.com/docs/)
- [GraphQL Codegen](https://the-guild.dev/graphql/codegen)
- [Recoil](https://recoiljs.org/docs/introduction/core-concepts)
- [TypeScript](https://www.typescriptlang.org/)
**Testing**
- [Jest](https://jestjs.io/)
- [Storybook](https://storybook.js.org/)
**Tooling**
- [Yarn](https://yarnpkg.com/)
- [Craco](https://craco.js.org/docs/)
- [ESLint](https://eslint.org/)
## Architecture
### Routing
[React Router](https://reactrouter.com/) handles the routing.
To avoid unnecessary [re-renders](/contributor/frontend/best-practices#managing-re-renders) all the routing logic is in a `useEffect` in `PageChangeEffect`.
### State Management
[Recoil](https://recoiljs.org/docs/introduction/core-concepts) handles state management.
See [best practices](/contributor/frontend/best-practices#state-management) for more information on state management.
## Testing
[Jest](https://jestjs.io/) serves as the tool for unit testing while [Storybook](https://storybook.js.org/) is for component testing.
Jest is mainly for testing utility functions, and not components themselves.
Storybook is for testing the behavior of isolated components, as well as displaying the design system.

179
packages/twenty-docs/docs/contributor/frontend/hotkeys.mdx
View File

@@ -1,179 +0,0 @@
---
title: Hotkeys
sidebar_position: 11
sidebar_custom_props:
icon: TbKeyboard
---
## Introduction
When you need to listen to a hotkey, you would normally use the `onKeyDown` event listener.
In `twenty-front` however, you might have conflicts between same hotkeys that are used in different components, mounted at the same time.
For example, if you have a page that listens for the Enter key, and a modal that listens for the Enter key, with a Select component inside that modal that listens for the Enter key, you might have a conflict when all are mounted at the same time.
## The `useScopedHotkeys` hook
To handle this problem, we have a custom hook that makes it possible to listen to hotkeys without any conflict.
You place it in a component and it will listen to the hotkeys only when the component is mounted AND when the specified **hotkey scope** is active.
## How to listen for hotkeys in practice ?
There are two steps involved in setting up hotkey listening :
1. Set the [hotkey scope](#what-is-a-hotkey-scope-) that will listen to hotkeys
2. Use the `useScopedHotkeys` hook to listen to hotkeys
Setting up hotkey scopes is required even in simple pages, because other UI elements like left menu or command menu might also listen to hotkeys.
## Use cases for hotkeys
In general, you'll have two use cases that require hotkeys :
1. In a page or a component mounted in a page
2. In a modal-type component that takes the focus due to a user action
The second use case can happen recursively : a dropdown in a modal for example.
### Listening to hotkeys in a page
Example :
```tsx
const PageListeningEnter = () => {
const {
setHotkeyScopeAndMemorizePreviousScope,
goBackToPreviousHotkeyScope,
} = usePreviousHotkeyScope();
// 1. Set the hotkey scope in a useEffect
useEffect(() => {
setHotkeyScopeAndMemorizePreviousScope(
ExampleHotkeyScopes.ExampleEnterPage,
);
// Revert to the previous hotkey scope when the component is unmounted
return () => {
goBackToPreviousHotkeyScope();
};
}, [goBackToPreviousHotkeyScope, setHotkeyScopeAndMemorizePreviousScope]);
// 2. Use the useScopedHotkeys hook
useScopedHotkeys(
Key.Enter,
() => {
// Some logic executed on this page when the user presses Enter
// ...
},
ExampleHotkeyScopes.ExampleEnterPage,
);
return <div>My page that listens for Enter</div>;
};
```
### Listening to hotkeys in a modal-type component
For this example we'll use a modal component that listens for the Escape key to tell it's parent to close it.
Here the user interaction is changing the scope.
```tsx
const ExamplePageWithModal = () => {
const [showModal, setShowModal] = useState(false);
const {
setHotkeyScopeAndMemorizePreviousScope,
goBackToPreviousHotkeyScope,
} = usePreviousHotkeyScope();
const handleOpenModalClick = () => {
// 1. Set the hotkey scope when user opens the modal
setShowModal(true);
setHotkeyScopeAndMemorizePreviousScope(
ExampleHotkeyScopes.ExampleModal,
);
};
const handleModalClose = () => {
// 1. Revert to the previous hotkey scope when the modal is closed
setShowModal(false);
goBackToPreviousHotkeyScope();
};
return <div>
<h1>My page with a modal</h1>
<button onClick={handleOpenModalClick}>Open modal</button>
{showModal && <MyModalComponent onClose={handleModalClose} />}
</div>;
};
```
Then in the modal component :
```tsx
const MyDropdownComponent = ({ onClose }: { onClose: () => void }) => {
// 2. Use the useScopedHotkeys hook to listen for Escape.
// Note that escape is a common hotkey that could be used by many other components
// So it's important to use a hotkey scope to avoid conflicts
useScopedHotkeys(
Key.Escape,
() => {
onClose()
},
ExampleHotkeyScopes.ExampleModal,
);
return <div>My modal component</div>;
};
```
It's important to use this pattern when you're not sure that just using a useEffect with mount/unmount will be enough to avoid conflicts.
Those conflicts can be hard to debug, and it might happen more often than not with useEffects.
## What is a hotkey scope ?
A hotkey scope is a string that represents a context in which the hotkeys are active. It is generally encoded as an enum.
When you change the hotkey scope, the hotkeys that are listening to this scope will be enabled and the hotkeys that are listening to other scopes will be disabled.
You can set only one scope at a time.
As an example, the hotkey scopes for each page are defined in the `PageHotkeyScope` enum:
```tsx
export enum PageHotkeyScope {
Settings = 'settings',
CreateWokspace = 'create-workspace',
SignInUp = 'sign-in-up',
CreateProfile = 'create-profile',
PlanRequired = 'plan-required',
ShowPage = 'show-page',
PersonShowPage = 'person-show-page',
CompanyShowPage = 'company-show-page',
CompaniesPage = 'companies-page',
PeoplePage = 'people-page',
OpportunitiesPage = 'opportunities-page',
ProfilePage = 'profile-page',
WorkspaceMemberPage = 'workspace-member-page',
TaskPage = 'task-page',
}
```
Internally, the currently selected scope is stored in a Recoil state that is shared across the application :
```tsx
export const currentHotkeyScopeState = createState<HotkeyScope>({
key: 'currentHotkeyScopeState',
defaultValue: INITIAL_HOTKEYS_SCOPE,
});
```
But this Recoil state should never be handled manually ! We'll see how to use it in the next section.
## How is it working internally ?
We made a thin wrapper on top of [react-hotkeys-hook](https://react-hotkeys-hook.vercel.app/docs/intro) that makes it more performant and avoids unnecessary re-renders.
We also create a Recoil state to handle the hotkey scope state and make it available everywhere in the application.

291
packages/twenty-docs/docs/contributor/frontend/style-guide.mdx
View File

@@ -1,291 +0,0 @@
---
title: Style Guide
sidebar_position: 4
sidebar_custom_props:
icon: TbPencil
---
This document includes the rules to follow when writing code.
The goal here is to have a consistent codebase, which is easy to read and easy to maintain.
For this, it's better to be a bit more verbose than to be too concise.
Always keep in mind that people read code more often than they write it, specially on an open source project, where anyone can contribute.
There are a lot of rules that are not defined here, but that are automatically checked by linters.
## React
### Use functional components
Always use TSX functional components.
Do not use default `import` with `const`, because it's harder to read and harder to import with code completion.
```tsx
// ❌ Bad, harder to read, harder to import with code completion
const MyComponent = () => {
return <div>Hello World</div>;
};
export default MyComponent;
// ✅ Good, easy to read, easy to import with code completion
export function MyComponent() {
return <div>Hello World</div>;
};
```
### Props
Create the type of the props and call it `(ComponentName)Props` if there's no need to export it.
Use props destructuring.
```tsx
// ❌ Bad, no type
export const MyComponent = (props) => <div>Hello {props.name}</div>;
// ✅ Good, type
type MyComponentProps = {
name: string;
};
export const MyComponent = ({ name }: MyComponentProps) => <div>Hello {name}</div>;
```
#### Refrain from using `React.FC` or `React.FunctionComponent` to define prop types
```tsx
/* ❌ - Bad, defines the component type annotations with `FC`
* - With `React.FC`, the component implicitly accepts a `children` prop
* even if it's not defined in the prop type. This might not always be
* desirable, especially if the component doesn't intend to render
* children.
*/
const EmailField: React.FC<{
value: string;
}> = ({ value }) => <TextInput value={value} disabled fullWidth />;
```
```tsx
/* ✅ - Good, a separate type (OwnProps) is explicitly defined for the
* component's props
* - This method doesn't automatically include the children prop. If
* you want to include it, you have to specify it in OwnProps.
*/
type EmailFieldProps = {
value: string;
};
const EmailField = ({ value }: EmailFieldProps) => (
<TextInput value={value} disabled fullWidth />
);
```
#### No Single Variable Prop Spreading in JSX Elements
Avoid using single variable prop spreading in JSX elements, like `{...props}`. This practice often results in code that is less readable and harder to maintain because it's unclear which props the component is receiving.
```tsx
/* ❌ - Bad, spreads a single variable prop into the underlying component
*/
const MyComponent = (props: OwnProps) => {
return <OtherComponent {...props} />;
}
```
```tsx
/* ✅ - Good, Explicitly lists all props
* - Enhances readability and maintainability
*/
const MyComponent = ({ prop1, prop2, prop3 }: MyComponentProps) => {
return <OtherComponent {...{ prop1, prop2, prop3 }} />;
};
```
Rationale:
- At a glance, it's clearer which props the code passes down, making it easier to understand and maintain.
- It helps to prevent tight coupling between components via their props.
- Linting tools make it easier to identify misspelled or unused props when you list props explicitly.
## JavaScript
### Use nullish-coalescing operator `??`
```tsx
// ❌ Bad, can return 'default' even if value is 0 or ''
const value = process.env.MY_VALUE || 'default';
// ✅ Good, will return 'default' only if value is null or undefined
const value = process.env.MY_VALUE ?? 'default';
```
### Use optional chaining `?.`
```tsx
// ❌ Bad
onClick && onClick();
// ✅ Good
onClick?.();
```
## TypeScript
### Use `type` instead of `interface`
Always use `type` instead of `interface`, because they almost always overlap, and `type` is more flexible.
```tsx
// ❌ Bad
interface MyInterface {
name: string;
}
// ✅ Good
type MyType = {
name: string;
};
```
### Use string literals instead of enums
[String literals](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#literal-types) are the go-to way to handle enum-like values in TypeScript. They are easier to extend with Pick and Omit, and offer a better developer experience, specially with code completion.
You can see why TypeScript recommends avoiding enums [here](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#enums).
```tsx
// ❌ Bad, utilizes an enum
enum Color {
Red = "red",
Green = "green",
Blue = "blue",
}
let color = Color.Red;
```
```tsx
// ✅ Good, utilizes a string literal
let color: "red" | "green" | "blue" = "red";
```
#### GraphQL and internal libraries
You should use enums that GraphQL codegen generates.
It's also better to use an enum when using an internal library, so the internal library doesn't have to expose a string literal type that is not related to the internal API.
Example:
```TSX
const {
setHotkeyScopeAndMemorizePreviousScope,
goBackToPreviousHotkeyScope,
} = usePreviousHotkeyScope();
setHotkeyScopeAndMemorizePreviousScope(
RelationPickerHotkeyScope.RelationPicker,
);
```
## Styling
### Use StyledComponents
Style the components with [styled-components](https://emotion.sh/docs/styled).
```tsx
// ❌ Bad
<div className="my-class">Hello World</div>
```
```tsx
// ✅ Good
const StyledTitle = styled.div`
color: red;
`;
```
Prefix styled components with "Styled" to differentiate them from "real" components.
```tsx
// ❌ Bad
const Title = styled.div`
color: red;
`;
```
```tsx
// ✅ Good
const StyledTitle = styled.div`
color: red;
`;
```
### Theming
Utilizing the theme for the majority of component styling is the preferred approach.
#### Units of measurement
Avoid using `px` or `rem` values directly within the styled components. The necessary values are generally already defined in the theme, so it’s recommended to make use of the theme for these purposes.
#### Colors
Refrain from introducing new colors; instead, use the existing palette from the theme. Should there be a situation where the palette does not align, please leave a comment so that the team can rectify it.
```tsx
// ❌ Bad, directly specifies style values without utilizing the theme
const StyledButton = styled.button`
color: #333333;
font-size: 1rem;
font-weight: 400;
margin-left: 4px;
border-radius: 50px;
`;
```
```tsx
// ✅ Good, utilizes the theme
const StyledButton = styled.button`
color: ${({ theme }) => theme.font.color.primary};
font-size: ${({ theme }) => theme.font.size.md};
font-weight: ${({ theme }) => theme.font.weight.regular};
margin-left: ${({ theme }) => theme.spacing(1)};
border-radius: ${({ theme }) => theme.border.rounded};
`;
```
## Enforcing No-Type Imports
Avoid type imports. To enforce this standard, an ESLint rule checks for and reports any type imports. This helps maintain consistency and readability in the TypeScript code.
```tsx
// ❌ Bad
import { type Meta, type StoryObj } from '@storybook/react';
// ❌ Bad
import type { Meta, StoryObj } from '@storybook/react';
// ✅ Good
import { Meta, StoryObj } from '@storybook/react';
```
### Why No-Type Imports
- **Consistency**: By avoiding type imports and using a single approach for both type and value imports, the codebase remains consistent in its module import style.
- **Readability**: No-type imports improve code readability by making it clear when you're importing values or types. This reduces ambiguity and makes it easier to understand the purpose of imported symbols.
- **Maintainability**: It enhances codebase maintainability because developers can identify and locate type-only imports when reviewing or modifying code.
### ESLint Rule
An ESLint rule, `@typescript-eslint/consistent-type-imports`, enforces the no-type import standard. This rule will generate errors or warnings for any type import violations.
Please note that this rule specifically addresses rare edge cases where unintentional type imports occur. TypeScript itself discourages this practice, as mentioned in the [TypeScript 3.8 release notes](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html). In most situations, you should not need to use type-only imports.
To ensure your code complies with this rule, make sure to run ESLint as part of your development workflow.

65
packages/twenty-docs/docs/contributor/frontend/work-with-figma.mdx
View File

@@ -1,65 +0,0 @@
---
title: Work with Figma
description: Learn how you can collaborate with Twenty's Figma
sidebar_position: 2
sidebar_custom_props:
icon: TbBrandFigma
---
Figma is a collaborative interface design tool that aids in bridging the communication barrier between designers and developers.
This guide explains how you can collaborate with Figma.
## Access
1. **Access the shared link:** You can access the project's Figma file [here](https://www.figma.com/file/xt8O9mFeLl46C5InWwoMrN/Twenty).
2. **Sign in:** If you're not already signed in, Figma will prompt you to do so.
Key features are only available to logged-in users, such as the developer mode and the ability to select a dedicated frame.
:::caution Note
You will not be able to collaborate effectively without an account.
:::
## Figma structure
On the left sidebar, you can access the different pages of Twenty's Figma. This is how they're organized:
- **Components page:** This is the first page. The designer uses it to create and organize the reusable design elements used throughout the design file. For example, buttons, icons, symbols, or any other reusable components. It serves to maintain consistency across the design.
- **Main page:** The second page is the main page, which shows the complete user interface of the project. You can press ***Play*** to use the full app prototype.
- **Features pages:** The other pages are typically dedicated to features in progress. They contain the design of specific features or modules of the application or website. They are typically still in progress.
## Useful Tips
With read-only access, you can't edit the design but you can access all features that will be useful to convert the designs into code.
### Use the Dev mode
Figma's Dev Mode enhances developers' productivity by providing easy design navigation, effective asset management, efficient communication tools, toolbox integrations, quick code snippets, and key layer information, bridging the gap between design and development. You can learn more about Dev Mode [here](https://www.figma.com/dev-mode/).
Switch to the "Developer" mode in the right part of the toolbar to see design specs, copy CSS, and access assets.
### Use the Prototype
Click on any element on the canvas and press the “Play” button at the top right edge of the interface to access the prototype view. Prototype mode allows you to interact with the design as if it were the final product. It demonstrates the flow between screens and how interface elements like buttons, links, or menus behave when interacted with.
1. **Understanding transitions and animations:** In the Prototype mode, you can view any transitions or animations added by a designer between screens or UI elements, providing clear visual instructions to developers on the intended behavior and style.
2. **Implementation clarification:** A prototype can also help reduce ambiguities. Developers can interact with it to gain a better understanding of the functionality or appearance of particular elements.
For more comprehensive details and guidance on learning the Figma platform, you can visit the official [Figma Documentation](https://help.figma.com/hc/en-us).
### Measure distances
Select an element, hold `Option` key (Mac) or `Alt` key (Windows), then hover over another element to see the distance between them.
### Figma extension for VSCode (Recommended)
[Figma for VS Code](https://marketplace.visualstudio.com/items?itemName=figma.figma-vscode-extension)
lets you navigate and inspect design files, collaborate with designers, track changes, and speed up implementation - all without leaving your text editor.
It's part of our recommended extensions.
## Collaboration
1. **Using Comments:** You are welcome to use the comment feature by clicking on the bubble icon in the left part of the toolbar.
2. **Cursor chat:** A nice feature of Figma is the Cursor chat. Just press `;` on Mac and `/` on Windows to send a message if you see someone else using Figma as the same time as you.

5
packages/twenty-docs/docs/contributor/server/_category_.json
View File

@@ -1,5 +0,0 @@
{
"position": 4,
"collapsible": true,
"collapsed": true
}

25
packages/twenty-docs/docs/contributor/server/best-practices.mdx
View File

@@ -1,25 +0,0 @@
---
title: Best Practices
sidebar_position: 3
sidebar_custom_props:
icon: TbChecklist
---
This document outlines the best practices you should follow when working on the backend.
## Follow a modular approach
The backend follows a modular approach, which is a fundamental principle when working with NestJS. Make sure you break down your code into reusable modules to maintain a clean and organized codebase.
Each module should encapsulate a particular feature or functionality and have a well-defined scope. This modular approach enables clear separation of concerns and removes unnecessary complexities.
## Expose services to use in modules
Always create services that have a clear and single responsibility, which enhances code readability and maintainability. Name the services descriptively and consistently.
You should also expose services that you want to use in other modules. Exposing services to other modules is possible through NestJS's powerful dependency injection system, and promotes loose coupling between components.
## Avoid using `any` type
When you declare a variable as `any`, TypeScript's type checker doesn't perform any type checking, making it possible to assign any type of values to the variable. TypeScript uses type inference to determine the type of variable based on the value. By declaring it as `any`, TypeScript can no longer infer the type. This makes it hard to catch type-related errors during development, leading to runtime errors and makes the code less maintainable, less reliable, and harder to understand for others.
This is why everything should have a type. So if you create a new object with a first name and last name, you should create an interface or type that contains a first name and last name that defines the shape of the object you are manipulating.

41
packages/twenty-docs/docs/contributor/server/custom-objects.mdx
View File

@@ -1,41 +0,0 @@
---
title: Custom Objects
sidebar_position: 4
sidebar_custom_props:
icon: TbAugmentedReality
---
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 in-built 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 come from metadata tables that determine the shape, name, and type of the objects. All this information is present in the metadata schema database, consisting of tables:
- **DataSource**: Details where the data is present.
- **Object**: Describes the object and links 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. This updates the metadata accordingly and computes a GraphQL schema based on the metadata, storing it 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, the process involves making queries through the /graphql endpoint and passing them 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>

52
packages/twenty-docs/docs/contributor/server/feature-flags.mdx
View File

@@ -1,52 +0,0 @@
---
title: Feature Flags
sidebar_position: 1
sidebar_custom_props:
icon: TbFlag
---
Feature flags are used to hide experimental features. For twenty they are set on workspace level and not on a user level.
## Adding a new feature flag
In `FeatureFlagKey.ts` add the feature flag:
```ts
type FeatureFlagKey =
| 'IS_FEATURENAME_ENABLED'
| ...;
```
Also add it to the enum in `feature-flag.entity.ts`:
```ts
enum FeatureFlagKeys {
IsFeatureNameEnabled = 'IS_FEATURENAME_ENABLED',
...
}
```
To apply a feature flag on a **backend** feature use:
```ts
@Gate({
featureFlag: 'IS_FEATURENAME_ENABLED',
})
```
To apply a feature flag on a **frontend** feature use:
```ts
const isFeatureNameEnabled = useIsFeatureEnabled('IS_FEATURENAME_ENABLED');
```
## Configure feature flags for the deployment
Change the corresponding record in the Table `core.featureFlag`:
| id | key | workspaceId | value |
|----------|--------------------------|---------------|--------|
| Random | `IS_FEATURENAME_ENABLED` | WorkspaceID | `true` |

132
packages/twenty-docs/docs/contributor/server/folder-architecture.mdx
View File

@@ -1,132 +0,0 @@
---
title: Folder Architecture
sidebar_position: 2
description: A detailed look into our server folder architecture
sidebar_custom_props:
icon: TbFolder
---
The backend directory structure is as follows:
```
server
└───ability
└───constants
└───core
└───database
└───decorators
└───filters
└───guards
└───health
└───integrations
└───metadata
└───workspace
└───utils
```
## Ability
Defines permissions and includes handlers for each entity.
## Decorators
Defines custom decorators in NestJS for added functionality.
See [custom decorators](https://docs.nestjs.com/custom-decorators) for more details.
## Filters
Includes exception filters to handle exceptions that might occur in GraphQL endpoints.
## Guards
See [guards](https://docs.nestjs.com/guards) for more details.
## Health
Includes a publicly available REST API (healthz) that returns a JSON to confirm whether the database is working as expected.
## Metadata
Defines custom objects and makes available a GraphQL API (graphql/metadata).
## Workspace
Generates and serves custom GraphQL schema based on the metadata.
### Workspace Directory Structure
```
workspace
└───workspace-schema-builder
└───factories
└───graphql-types
└───database
└───interfaces
└───object-definitions
└───services
└───storage
└───utils
└───workspace-resolver-builder
└───factories
└───interfaces
└───workspace-query-builder
└───factories
└───interfaces
└───workspace-query-runner
└───interfaces
└───utils
└───workspace-datasource
└───workspace-manager
└───workspace-migration-runner
└───utils
└───workspace.module.ts
└───workspace.factory.spec.ts
└───workspace.factory.ts
```
The root of the workspace directory includes the `workspace.factory.ts`, a file containing the `createGraphQLSchema` function. This function generates workspace-specific schema by using the metadata to tailor a schema for individual workspaces. By separating the schema and resolver construction, we use the `makeExecutableSchema` function, which combines these discrete elements.
This strategy is not just about organization, but also helps with optimization, such as caching generated type definitions to enhance performance and scalability.
### Workspace Schema builder
Generates the GraphQL schema, and includes:
#### Factories:
Specialised constructors to generate GraphQL-related constructs.
- The type.factory translates field metadata into GraphQL types using `TypeMapperService`.
- The type-definition.factory creates GraphQL input or output objects derived from `objectMetadata`.
#### GraphQL Types
Includes enumerations, inputs, objects, and scalars, and serves as the building blocks for the schema construction.
#### Interfaces and Object Definitions
Contains the blueprints for GraphQL entities, and includes both predefined and custom types like `MONEY` or `URL`.
#### Services
Contains the service responsible for associating FieldMetadataType with its appropriate GraphQL scalar or query modifiers.
#### Storage
Includes the `TypeDefinitionsStorage` class that contains reusable type definitions, preventing duplication of GraphQL types.
### Workspace Resolver Builder
Creates resolver functions for querying and mutatating the GraphQL schema.
Each factory in this directory is responsible for producing a distinct resolver type, such as the `FindManyResolverFactory`, designed for adaptable application across various tables.
### Workspace Query Builder
Includes factories that generate `pg_graphql` queries.
### Workspace Query Runner
Runs the generated queries on the database and parses the result.

47
packages/twenty-docs/docs/contributor/server/queue.mdx
View File

@@ -1,47 +0,0 @@
---
title: Message Queue
sidebar_position: 5
sidebar_custom_props:
icon: TbSchema
---
Queues facilitate async operations to be performed. They can be used for performing background tasks such as sending a welcome email on register.
Each use case will have its own queue class extended from `MessageQueueServiceBase`.
Currently, queue supports two drivers which can be configurred by env variable `MESSAGE_QUEUE_TYPE`.
1. `pg-boss`: this is the default driver, which uses [pg-boss](https://github.com/timgit/pg-boss) under the hood.
2. `bull-mq`: this uses [bull-mq](https://bullmq.io/) under the hood.
## Steps to create and use a new queue
1. Add a queue name for your new queue under enum `MESSAGE_QUEUES`.
2. Provide the factory implementation of the queue with the queue name as the dependency token.
3. Inject the queue that you created in the required module/service with the queue name as the dependency token.
4. Add worker class with token based injection just like producer.
### Example usage
```ts
class Resolver {
constructor(@Inject(MESSAGE_QUEUES.custom) private queue: MessageQueueService) {}
async onSomeAction() {
//business logic
await this.queue.add(someData);
}
}
//async worker
class CustomWorker {
constructor(@Inject(MESSAGE_QUEUES.custom) private queue: MessageQueueService) {
this.initWorker();
}
async initWorker() {
await this.queue.work(async ({ id, data }) => {
//worker logic
});
}
}
```

87
packages/twenty-docs/docs/contributor/server/server.mdx
View File

@@ -1,87 +0,0 @@
---
title: Backend Development
sidebar_position: 0
sidebar_custom_props:
icon: TbTerminal
---
import DocCardList from '@theme/DocCardList';
<DocCardList />
## Useful commands
These commands should be exectued from packages/twenty-server folder.
From any other folder you can run `npx nx <command>` twenty-server.
### First time setup
```
npx nx database:reset # setup the database with dev seeds
```
### Starting the app
```
npx nx start
```
### Lint
```
npx nx lint
```
### Test
```
npx nx test:unit
```
### Resetting the database
If you want to reset the database, you can run the following command:
```bash
npx nx database:reset
```
:::warning
This will drop the database and re-run the migrations and seed.
Make sure to back up any data you want to keep before running this command.
:::
## Tech Stack
Twenty primarily uses NestJS for the backend.
Prisma was the first ORM we used. But in order to allow users to create custom fields and custom objects, a lower-level made more sense as we need to have fine-grained control. The project now uses TypeORM.
Here's what the tech stack now looks like.
**Core**
- [NestJS](https://nestjs.com/)
- [TypeORM](https://typeorm.io/)
- [GraphQL Yoga](https://the-guild.dev/graphql/yoga-server)
**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/)

75
packages/twenty-docs/docs/contributor/server/zapier.mdx
View File

@@ -1,75 +0,0 @@
---
title: Zapier App
sidebar_position: 2
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!
## About 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, called 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/developers](http://localhost:3000/settings/developers/api-keys), 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
```

26
packages/twenty-docs/docs/index.mdx
View File

@@ -1,26 +0,0 @@
---
id: homepage
sidebar_position: 0
sidebar_class_name: display-none
title: Welcome
hide_title: true
hide_table_of_contents: true
custom_edit_url: null
pagination_next: null
---
import ThemedImage from '@theme/ThemedImage';
Twenty is a CRM designed to fit your unique business needs.
It is maintained by a community of 200+ developers that care about building high-quality software.
There are three different ways to get started:
- **Managed Cloud:** The fastest and easiest way to try the app
- **Local Setup:** If you're a developer and would like to contribute to the app
- **Self-Hosting:** If you know how to run a server and want to host the app yourself
Once you're setup, you can check the "Extending" or "Contributing" section to start building.
<ThemedImage sources={{light: "../img/light-doc-preview.png", dark:"../img/dark-doc-preview.png"}} style={{width:'100%', maxWidth:'700px'}}/>

4
packages/twenty-docs/docs/start/_category_.json
View File

@@ -1,4 +0,0 @@
{
"label": "Getting Started",
"position": 1
}

23
packages/twenty-docs/docs/start/cloud.mdx
View File

@@ -1,23 +0,0 @@
---
title: Managed Cloud
sidebar_position: 1
sidebar_custom_props:
icon: TbRocket
---
import ThemedImage from '@theme/ThemedImage';
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
The easiest way to try the app is to sign up on [app.twenty.com](https://app.twenty.com).
We offer a free trial but require a credit-card to signup.
If you just want to play around with a test instance you can use these credentials on [demo.twenty.com](https://demo.twenty.com):
```
email: noah@demo.dev
password: Applecar2025
```
Expect the demo to occasionnaly have bugs; it's used for testing purposes and therefore is running a version of the software that's newer than the production environment.

226
packages/twenty-docs/docs/start/local-setup.mdx
View File

@@ -1,226 +0,0 @@
---
title: Local Setup
sidebar_position: 2
sidebar_custom_props:
icon: TbDeviceDesktop
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
Follow this guide if you would like to setup the project locally to contribute.
## 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 v4](https://yarnpkg.com/getting-started/install)
- [nvm](https://github.com/nvm-sh/nvm/blob/master/README.md)
:::info Note
`npm` won't work, you should use `yarn` instead. Yarn is now shipped with Node.js, so you don't need to install it separately.
You only have to run `corepack enable` to enable Yarn if you haven't done it yet.
:::
</TabItem>
<TabItem value="wsl" label="Windows (WSL)" >
1. Install WSL
Open PowerShell as Administrator and run:
```powershell
wsl --install
```
You should now see a prompt to restart your computer. If not, restart it manually.
Upon restart, a powershell window will open and install Ubuntu. This may take up some time.
You'll see a prompt 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
corepack enable
```
Close and reopen your terminal to start using nvm.
</TabItem>
</Tabs>
---
## Step 1: Git Clone
In your terminal, run the following command.
<Tabs>
<TabItem value="ssh" label="SSH (Recommended)" default>
If you haven't already set up SSH keys, you can learn how to do so [here](https://docs.github.com/en/authentication/connecting-to-github-with-ssh/about-ssh).
```bash
git clone git@github.com:twentyhq/twenty.git
```
</TabItem>
<TabItem value="https" label="HTTPS" >
```bash
git clone https://github.com/twentyhq/twenty.git
```
</TabItem>
</Tabs>
## Step 2: Position yourself at the root
```bash
cd twenty
```
You should run all commands in the following steps from the root of the project.
## Step 3: Set up a PostgreSQL Database
We rely on [pg_graphql](https://github.com/supabase/pg_graphql) and recommend you use the scripts below to provision a database with the right extensions.
You can access the database at [localhost:5432](localhost:5432), with user `twenty` and password `twenty` .
<Tabs>
<TabItem value="linux" label="Linux" default>
<b>Option 1:</b> To provision your database locally:
```bash
make postgres-on-linux
```
<b>Option 2:</b> If you have docker installed:
```bash
make postgres-on-docker
```
</TabItem>
<TabItem value="mac-os" label="Mac OS" default>
<b>Option 1:</b> To provision your database locally with `brew`:
```bash
make postgres-on-macos-intel #for intel architecture
make postgres-on-macos-arm #for M1/M2/M3 architecture
```
<b>Option 2:</b> If you have docker installed:
```bash
make postgres-on-docker
```
</TabItem>
<TabItem value="wsl" label="Windows (WSL)">
<b>Option 1 :</b> To provision your database locally:
```bash
make postgres-on-linux
```
Note: you might need to run `sudo apt-get install build-essential` before running the above command if you don't have the build tools installed.
<b>Option 2:</b> If you have docker installed:
Running Docker on WSL adds an extra layer of complexity.
Only use this option if you are comfortable with the extra steps involved, including turning on [Docker Desktop WSL2](https://docs.docker.com/desktop/wsl).
```bash
make postgres-on-docker
```
</TabItem>
</Tabs>
## Step 4: Setup environment variables
Use environment variables or `.env` files to configure your project.
Copy the `.env.example` files in `/front` and `/server`:
```bash
cp ./packages/twenty-front/.env.example ./packages/twenty-front/.env
cp ./packages/twenty-server/.env.example ./packages/twenty-server/.env
```
## Step 5: Installing dependencies
:::info
Use `nvm` to install the correct `node` version. The `.nvmrc` ensures all contributors use the same version.
:::
To build Twenty server and seed some data into your database, run the following commands:
```bash
nvm install # installs recommended node version
nvm use # use recommended node version
yarn
```
## Step 6: Running the project
Setup your database with the following command:
```bash
npx nx database:reset twenty-server
```
Start the server and the frontend:
```bash
npx nx start twenty-server
npx nx start twenty-front
```
Alternatively, you can start both applications at once:
```bash
npx nx start
```
Twenty's server will be up and running at [http://localhost:3000/graphql](http://localhost:3000/graphql).
Twenty's frontend will be running at [http://localhost:3001](http://localhost:3001). Just login using the seeded demo account: `tim@apple.dev` (password: `Applecar2025`) to start using Twenty.
## Troubleshooting
#### CR line breaks found [Windows]
This is due to the line break characters of Windows and the git configuration. Try running:
```
git config --global core.autocrlf false
```
Then delete the repository and clone it again.
#### Missing metadata schema
During Twenty installation, you need to provision your postgres database with the right schemas, extensions, and users.
If you're successful in running this provisioning, you should have `default` and `metadata` schemas in your database.
If you don't, make sure you don't have more than one postgres instance running on your computer.
#### Cannot find module 'twenty-emails' or its corresponding type declarations.
You have to build the package `twenty-emails` before running the initialization of the database with `npx nx run twenty-emails:build`
#### Missing twenty-x package
Make sure to run yarn in the root directory and then run `npx nx server:dev twenty-server`. If this still doesn't work try building the missing package manually.
#### Lint on Save not working
This should work out of the box with the eslint extension installed. If this doens't work try adding this to your vscode setting (on the dev container scope):
```
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
}
```
#### Docker container build
To successfully build Docker images, ensure that your system has a minimum of 2GB of memory available. For users of Docker Desktop, please verify that you've allocated sufficient resources to Docker within the application's settings.

5
packages/twenty-docs/docs/start/self-hosting/_category_.json
View File

@@ -1,5 +0,0 @@
{
"position": 3,
"collapsible": true,
"collapsed": true
}

437
packages/twenty-docs/docs/start/self-hosting/cloud-providers.mdx
View File

@@ -1,437 +0,0 @@
---
title: Vendor-specific instructions
sidebar_position: 3
sidebar_custom_props:
icon: TbCloud
---
:::info
This document is maintained by the community. It might contain issues.
Feel free to join our discord if you need assistance.
:::
## Render
[![Deploy to Render](https://render.com/images/deploy-to-render-button.svg)](https://render.com/deploy?repo=https://github.com/twentyhq/twenty)
## RepoCloud
[![Deploy on RepoCloud](https://d16t0pc4846x52.cloudfront.net/deploy.png)](https://repocloud.io/details/?app_id=259)
## Azure Container Apps
### About
Hosts Twenty CRM using Azure Container Apps.
The solution provisions file shares, a container apps environment with three containers, and a log analytics workspace.
The file shares are used to store uploaded images and files through the UI, and to store database backups.
### Prerequisites
- Terraform installed https://developer.hashicorp.com/terraform/install
- An Azure subscription with permissions to create resources
### Step by step instructions:
1. Create a new folder and copy all the files from below
2. Run `terraform init`
3. Run `terraform plan -out tfplan`
4. Run `terraform apply tfplan`
5. Connect to server `az containerapp exec --name twenty-server -g twenty-crm-rg`
6. Initialize the database from the server `yarn database:init:prod`
7. Go to https://your-twenty-front-fqdn - located in the portal
#### Production docker containers
This uses the prebuilt images found on [docker hub](https://hub.docker.com/r/twentycrm/).
#### Environment Variables
- Is set in respective tf-files
- See docs [Setup Environment Variables](https://docs.twenty.com/start/self-hosting/) for usage
- After deployment you could can set `IS_SIGN_UP_DISABLED=true` (and run `terraform plan/apply` again) to disable new workspaces from being created
#### Security and networking
- Container `twenty-db` accepts only ingress TCP traffic from other containers in the environment. No external ingress traffic allowed
- Container `twenty-server` accepts external traffic over HTTPS
- Container `twenty-front` accepts external traffic over HTTPS
It´s highly recommended to enable [built-in authentication](https://learn.microsoft.com/en-us/azure/container-apps/authentication) for `twenty-front` using one of the supported providers.
Use the [custom domain](https://learn.microsoft.com/en-us/azure/container-apps/custom-domains-certificates) feature on the `twenty-front` container if you would like an easier domain name.
#### Files
##### providers.tf
```hcl
# providers.tf
terraform {
required_providers {
azapi = {
source = "Azure/azapi"
}
}
}
provider "azapi" {
}
provider "azurerm" {
features {}
}
provider "azuread" {
}
provider "random" {
}
```
##### main.tf
```hcl
# main.tf
# Create a resource group
resource "azurerm_resource_group" "main" {
name = "twenty-crm-rg"
location = "North Europe"
}
# Variables
locals {
app_env_name = "twenty"
server_name = "twenty-server"
server_tag = "latest"
front_app_name = "twenty-front"
front_tag = "latest"
db_app_name = "twenty-postgres"
db_tag = "latest"
db_user = "twenty"
db_password = "twenty"
storage_mount_db_name = "twentydbstoragemount"
storage_mount_server_name = "twentyserverstoragemount"
cpu = 1.0
memory = "2Gi"
}
# Set up a Log Analytics workspace
resource "azurerm_log_analytics_workspace" "main" {
name = "${local.app_env_name}-law"
location = azurerm_resource_group.main.location
resource_group_name = azurerm_resource_group.main.name
sku = "PerGB2018"
retention_in_days = 30
}
# Create a storage account
resource "random_pet" "example" {
length = 2
separator = ""
}
resource "azurerm_storage_account" "main" {
name = "twentystorage${random_pet.example.id}"
resource_group_name = azurerm_resource_group.main.name
location = azurerm_resource_group.main.location
account_tier = "Standard"
account_replication_type = "LRS"
large_file_share_enabled = true
}
# Create db file storage
resource "azurerm_storage_share" "db" {
name = "twentydatabaseshare"
storage_account_name = azurerm_storage_account.main.name
quota = 50
enabled_protocol = "SMB"
}
# Create backend file storage
resource "azurerm_storage_share" "server" {
name = "twentyservershare"
storage_account_name = azurerm_storage_account.main.name
quota = 50
enabled_protocol = "SMB"
}
# Create a Container App Environment
resource "azurerm_container_app_environment" "main" {
name = "${local.app_env_name}-env"
location = azurerm_resource_group.main.location
resource_group_name = azurerm_resource_group.main.name
log_analytics_workspace_id = azurerm_log_analytics_workspace.main.id
}
# Connect the db storage share to the container app environment
resource "azurerm_container_app_environment_storage" "db" {
name = local.storage_mount_db_name
container_app_environment_id = azurerm_container_app_environment.main.id
account_name = azurerm_storage_account.main.name
share_name = azurerm_storage_share.db.name
access_key = azurerm_storage_account.main.primary_access_key
access_mode = "ReadWrite"
}
# Connect the server storage share to the container app environment
resource "azurerm_container_app_environment_storage" "server" {
name = local.storage_mount_server_name
container_app_environment_id = azurerm_container_app_environment.main.id
account_name = azurerm_storage_account.main.name
share_name = azurerm_storage_share.server.name
access_key = azurerm_storage_account.main.primary_access_key
access_mode = "ReadWrite"
}
```
##### frontend.tf
```hcl
# frontend.tf
resource "azurerm_container_app" "twenty_front" {
name = local.front_app_name
container_app_environment_id = azurerm_container_app_environment.main.id
resource_group_name = azurerm_resource_group.main.name
revision_mode = "Single"
depends_on = [azurerm_container_app.twenty_server]
ingress {
allow_insecure_connections = false
external_enabled = true
target_port = 3000
transport = "http"
traffic_weight {
percentage = 100
latest_revision = true
}
}
template {
min_replicas = 1
# things starts to fail when using more than 1 replica
max_replicas = 1
container {
name = "twenty-front"
image = "docker.io/twentycrm/twenty-front:${local.front_tag}"
cpu = local.cpu
memory = local.memory
env {
name = "REACT_APP_SERVER_BASE_URL"
value = "https://${azurerm_container_app.twenty_server.ingress[0].fqdn}"
}
}
}
}
# Set CORS rules for frontend app using AzAPI
resource "azapi_update_resource" "cors" {
type = "Microsoft.App/containerApps@2023-05-01"
resource_id = azurerm_container_app.twenty_front.id
body = jsonencode({
properties = {
configuration = {
ingress = {
corsPolicy = {
allowedOrigins = ["*"]
}
}
}
}
})
depends_on = [azurerm_container_app.twenty_front]
}
```
##### backend.tf
```hcl
# backend.tf
# Create three random UUIDs
resource "random_uuid" "access_token_secret" {}
resource "random_uuid" "login_token_secret" {}
resource "random_uuid" "refresh_token_secret" {}
resource "random_uuid" "file_token_secret" {}
resource "azurerm_container_app" "twenty_server" {
name = local.server_name
container_app_environment_id = azurerm_container_app_environment.main.id
resource_group_name = azurerm_resource_group.main.name
revision_mode = "Single"
depends_on = [azurerm_container_app.twenty_db, azurerm_container_app_environment_storage.server]
ingress {
allow_insecure_connections = false
external_enabled = true
target_port = 3000
transport = "http"
traffic_weight {
percentage = 100
latest_revision = true
}
}
template {
min_replicas = 1
max_replicas = 1
volume {
name = "twenty-server-data"
storage_type = "AzureFile"
storage_name = local.storage_mount_server_name
}
container {
name = local.server_name
image = "docker.io/twentycrm/twenty-server:${local.server_tag}"
cpu = local.cpu
memory = local.memory
volume_mounts {
name = "twenty-server-data"
path = "/app/packages/twenty-server/.local-storage"
}
# Environment variables
env {
name = "IS_SIGN_UP_DISABLED"
value = false
}
env {
name = "SIGN_IN_PREFILLED"
value = false
}
env {
name = "STORAGE_TYPE"
value = "local"
}
env {
name = "STORAGE_LOCAL_PATH"
value = ".local-storage"
}
env {
name = "PG_DATABASE_URL"
value = "postgres://${local.db_user}:${local.db_password}@${local.db_app_name}:5432/default"
}
env {
name = "FRONT_BASE_URL"
value = "https://${local.front_app_name}"
}
env {
name = "ACCESS_TOKEN_SECRET"
value = random_uuid.access_token_secret.result
}
env {
name = "LOGIN_TOKEN_SECRET"
value = random_uuid.login_token_secret.result
}
env {
name = "REFRESH_TOKEN_SECRET"
value = random_uuid.refresh_token_secret.result
}
env {
name = "FILE_TOKEN_SECRET"
value = random_uuid.file_token_secret.result
}
}
}
}
# Set CORS rules for server app using AzAPI
resource "azapi_update_resource" "server_cors" {
type = "Microsoft.App/containerApps@2023-05-01"
resource_id = azurerm_container_app.twenty_server.id
body = jsonencode({
properties = {
configuration = {
ingress = {
corsPolicy = {
allowedOrigins = ["*"]
}
}
}
}
})
depends_on = [azurerm_container_app.twenty_server]
}
```
##### database.tf
```hcl
# database.tf
resource "azurerm_container_app" "twenty_db" {
name = local.db_app_name
container_app_environment_id = azurerm_container_app_environment.main.id
resource_group_name = azurerm_resource_group.main.name
revision_mode = "Single"
depends_on = [azurerm_container_app_environment_storage.db]
ingress {
allow_insecure_connections = false
external_enabled = false
target_port = 5432
transport = "tcp"
traffic_weight {
percentage = 100
latest_revision = true
}
}
template {
min_replicas = 1
max_replicas = 1
container {
name = local.db_app_name
image = "docker.io/twentycrm/twenty-postgres:${local.db_tag}"
cpu = local.cpu
memory = local.memory
volume_mounts {
name = "twenty-db-data"
path = "/var/lib/postgresql/data"
}
env {
name = "POSTGRES_USER"
value = "postgres"
}
env {
name = "POSTGRES_PASSWORD"
value = "postgres"
}
env {
name = "POSTGRES_DB"
value = "default"
}
}
volume {
name = "twenty-db-data"
storage_type = "AzureFile"
storage_name = local.storage_mount_db_name
}
}
}
```
## Others
Please feel free to Open a PR to add more Cloud Provider options.

58
packages/twenty-docs/docs/start/self-hosting/docker-compose.mdx
View File

@@ -1,58 +0,0 @@
---
title: Docker Compose (easy)
sidebar_position: 2
sidebar_custom_props:
icon: TbBrandDocker
---
# Step by step instructions:
## One command installation
Install the project with the command below. By default, it installs the latest version from the main branch.
```bash
bash <(curl -sL https://git.new/20)
```
## Custom Installation:
Set VERSION for a specific docker image version, BRANCH for a specific clone branch:
```bash
VERSION=x.y.z BRANCH=branch-name bash <(curl -sL https://git.new/20)
```
## Manual installation
1. Copy the [.env.example](https://github.com/twentyhq/twenty/blob/main/packages/twenty-docker/.env.example) into a `.env` in the same directory where your `docker-compose.yml` file will be
2. Run the command `openssl rand -base64 32` four times, make note of the string for each
3. In your .env file, replace the three "replace_me_with_a_random_string_access" with the four random strings you just generated.
```
ACCESS_TOKEN_SECRET=replace_me_with_a_random_string_access
LOGIN_TOKEN_SECRET=replace_me_with_a_random_string_login
REFRESH_TOKEN_SECRET=replace_me_with_a_random_string_refresh
FILE_TOKEN_SECRET=replace_me_with_a_random_string_refresh
```
4. Copy the [docker-compose.yml](https://github.com/twentyhq/twenty/blob/main/packages/twenty-docker/docker-compose.yml) in the same directory as your `.env` file.
5. Run the command `docker-compose up -d`
6. Go to http://localhost:3000 and see your docker instance.
## Troubleshooting
### Not able to login
If you encounter errors, (not able to log into the application after inputting an email) after the inital setup, try running the following commands and see if that solves your issue.
```
docker exec -it twenty-server-1 yarn
docker exec -it twenty-server-1 npx nx database:reset
```
### Cannot connect to server, running behind a reverse proxy
Complete step three and four with:
3. Update `SERVER_URL=https://<your-api-url.com>` in your `.env`
### Persistence
By default the docker-compose will create volumes for the Database and local storage of the Server. Note that the containers will not persist data if your server is not configured to be stateful (for example Heroku). You probably want to configure a special stateful resource for this purpose.

220
packages/twenty-docs/docs/start/self-hosting/self-hosting.mdx
View File

@@ -1,220 +0,0 @@
---
title: Self-Hosting
sidebar_position: 1
sidebar_custom_props:
icon: TbServer
---
import DocCardList from '@theme/DocCardList';
import OptionTable from '@site/src/theme/OptionTable'
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
# Setup Server
<DocCardList/>
# Setup Messaging & Calendar sync
Twenty offers integrations with Gmail and Google Calendar. To enable these features, you need to connect to register the following recurring jobs:
```
# from your worker container
yarn command:prod cron:messaging:messages-import
yarn command:prod cron:messaging:message-list-fetch
```
# Setup Environment Variables
## Frontend
<OptionTable options={[
['REACT_APP_SERVER_BASE_URL', 'http://localhost:3000', 'Url of backend server'],
['GENERATE_SOURCEMAP', 'false', 'Generate source maps for debugging'],
['CHROMATIC_PROJECT_TOKEN', '', 'Chromatic token used for CI'],
]}></OptionTable>
## Backend
### Config
<OptionTable options={[
['PG_DATABASE_URL', 'postgres://user:pw@localhost:5432/default?connection_limit=1', 'Database connection'],
['PG_SSL_ALLOW_SELF_SIGNED', 'false', 'Allow self signed certificates'],
['REDIS_HOST', '127.0.0.1', 'Redis connection host'],
['REDIS_PORT', '6379', 'Redis connection port'],
['FRONT_BASE_URL', 'http://localhost:3001', 'Url to the hosted frontend'],
['SERVER_URL', 'http://localhost:3000', 'Url to the hosted server'],
['PORT', '3000', 'Port'],
['CACHE_STORAGE_TYPE', 'memory', 'Cache type (memory, redis...)'],
['CACHE_STORAGE_TTL', '3600 * 24 * 7', 'Cache TTL in seconds']
]}></OptionTable>
### Security
<OptionTable options={[
['API_RATE_LIMITING_TTL', '100', 'API rate limiting time window'],
['API_RATE_LIMITING_LIMIT', '200', 'API rate limiting max requests'],
]}></OptionTable>
### Tokens
<OptionTable options={[
['ACCESS_TOKEN_SECRET', '<random>', 'Secret used for the access tokens'],
['ACCESS_TOKEN_EXPIRES_IN', '30m', 'Access token expiration time'],
['LOGIN_TOKEN_SECRET', '<random>', 'Secret used for the login tokens'],
['LOGIN_TOKEN_EXPIRES_IN', '15m', 'Login token expiration time'],
['REFRESH_TOKEN_SECRET', '<random>', 'Secret used for the refresh tokens'],
['REFRESH_TOKEN_EXPIRES_IN', '90d', 'Refresh token expiration time'],
['REFRESH_TOKEN_COOL_DOWN', '1m', 'Refresh token cooldown'],
['FILE_TOKEN_SECRET', '<random>', 'Secret used for the file tokens'],
['FILE_TOKEN_EXPIRES_IN', '1d', 'File token expiration time'],
['API_TOKEN_EXPIRES_IN', '1000y', 'Api token expiration time'],
]}></OptionTable>
### Auth
<OptionTable options={[
['MESSAGING_PROVIDER_GMAIL_ENABLED', 'false', 'Enable Gmail API connection'],
['CALENDAR_PROVIDER_GOOGLE_ENABLED', 'false', 'Enable Google Calendar API connection'],
['AUTH_GOOGLE_APIS_CALLBACK_URL', '', 'Google APIs auth callback'],
['AUTH_PASSWORD_ENABLED', 'false', 'Enable Email/Password login'],
['AUTH_GOOGLE_ENABLED', 'false', 'Enable Google SSO login'],
['AUTH_GOOGLE_CLIENT_ID', '', 'Google client ID'],
['AUTH_GOOGLE_CLIENT_SECRET', '', 'Google client secret'],
['AUTH_GOOGLE_CALLBACK_URL', '', 'Google auth callback'],
['AUTH_MICROSOFT_ENABLED', 'false', 'Enable Microsoft SSO login'],
['AUTH_MICROSOFT_CLIENT_ID', '', 'Microsoft client ID'],
['AUTH_MICROSOFT_TENANT_ID', '', 'Microsoft tenant ID'],
['AUTH_MICROSOFT_CLIENT_SECRET', '', 'Microsoft client secret'],
['AUTH_MICROSOFT_CALLBACK_URL', '', 'Microsoft auth callback'],
['FRONT_AUTH_CALLBACK_URL', 'http://localhost:3001/verify ', 'Callback used for Login page'],
['IS_SIGN_UP_DISABLED', 'false', 'Disable sign-up'],
['PASSWORD_RESET_TOKEN_EXPIRES_IN', '5m', 'Password reset token expiration time'],
]}></OptionTable>
### Email
<OptionTable options={[
['EMAIL_FROM_ADDRESS', 'contact@yourdomain.com', 'Global email From: header used to send emails'],
['EMAIL_FROM_NAME', 'John from YourDomain', 'Global name From: header used to send emails'],
['EMAIL_SYSTEM_ADDRESS', 'system@yourdomain.com', 'Email address used as a destination to send internal system notification'],
['EMAIL_DRIVER', 'logger', "Email driver: 'logger' (to log emails in console) or 'smtp'"],
['EMAIL_SMTP_HOST', '', 'Email Smtp Host'],
['EMAIL_SMTP_PORT', '', 'Email Smtp Port'],
['EMAIL_SMTP_USER', '', 'Email Smtp User'],
['EMAIL_SMTP_PASSWORD', '', 'Email Smtp Password'],
]}></OptionTable>
#### Email SMTP Server configuration examples
<Tabs>
<TabItem value="Gmail" label="Gmail" default>
You will need to provision an [App Password](https://support.google.com/accounts/answer/185833).
- EMAIL_SMTP_HOST=smtp.gmail.com
- EMAIL_SMTP_PORT=465
- EMAIL_SMTP_USER=gmail_email_address
- EMAIL_SMTP_PASSWORD='gmail_app_password'
</TabItem>
<TabItem value="Office365" label="Office365">
Keep in mind that if you have 2FA enabled, you will need to provision an [App Password](https://support.microsoft.com/en-us/account-billing/manage-app-passwords-for-two-step-verification-d6dc8c6d-4bf7-4851-ad95-6d07799387e9).
- EMAIL_SMTP_HOST=smtp.office365.com
- EMAIL_SMTP_PORT=587
- EMAIL_SMTP_USER=office365_email_address
- EMAIL_SMTP_PASSWORD='office365_password'
</TabItem>
<TabItem value="Smtp4dev" label="Smtp4dev">
**smtp4dev** is a fake SMTP email server for development and testing.
- Run the smtp4dev image: `docker run --rm -it -p 8090:80 -p 2525:25 rnwood/smtp4dev`
- Access the smtp4dev ui here: [http://localhost:8090](http://localhost:8090)
- Set the following env variables:
- EMAIL_SMTP_HOST=localhost
- EMAIL_SMTP_PORT=2525
</TabItem>
</Tabs>
### Storage
<OptionTable options={[
['STORAGE_TYPE', 'local', "Storage driver: 'local' or 's3'"],
['STORAGE_S3_REGION', '', 'Storage Region'],
['STORAGE_S3_NAME', '', 'Bucket Name'],
['STORAGE_S3_ENDPOINT', '', 'Use if a different Endpoint is needed (for example Google)'],
['STORAGE_LOCAL_PATH', '.local-storage', 'data path (local storage)'],
]}></OptionTable>
### Message Queue
<OptionTable options={[
['MESSAGE_QUEUE_TYPE', 'pg-boss', "Queue driver: 'pg-boss' or 'bull-mq'"],
]}></OptionTable>
### Logging
<OptionTable options={[
['LOGGER_DRIVER', 'console', "The logging driver can be: 'console' or 'sentry'"],
['LOGGER_IS_BUFFER_ENABLED', 'true', 'Buffer the logs before sending them to the logging driver'],
['LOG_LEVELS', 'error,warn', "The loglevels which are logged to the logging driver. Can include: 'log', 'warn', 'error'"],
['EXCEPTION_HANDLER_DRIVER', 'sentry', "The exception handler driver can be: 'console' or 'sentry'"],
['SENTRY_ENVIRONMENT', 'main', 'The sentry environment used if sentry logging driver is selected'],
['SENTRY_RELEASE', 'latest', 'The sentry release used if sentry logging driver is selected'],
['SENTRY_DSN', 'https://xxx@xxx.ingest.sentry.io/xxx', 'The sentry logging endpoint used if sentry logging driver is selected'],
['SENTRY_FRONT_DSN', 'https://xxx@xxx.ingest.sentry.io/xxx', 'The sentry logging endpoint used by the frontend if sentry logging driver is selected'],
]}></OptionTable>
### Data enrichment and AI
<OptionTable options={[
['OPENROUTER_API_KEY', '', "The API key for openrouter.ai, an abstraction layer over models from Mistral, OpenAI and more"]
]}></OptionTable>
### Support Chat
<OptionTable options={[
['SUPPORT_DRIVER', 'front', "Support driver ('front' or 'none')"],
['SUPPORT_FRONT_HMAC_KEY', '<secret>', 'Suport chat key'],
['SUPPORT_FRONT_CHAT_ID', '<id>', 'Support chat id'],
]}></OptionTable>
### Telemetry
<OptionTable options={[
['TELEMETRY_ENABLED', 'true', 'Change this if you want to disable telemetry'],
['TELEMETRY_ANONYMIZATION_ENABLED', 'true', 'Telemetry is anonymized by default, you probably don\'t want to change this'],
]}></OptionTable>
### Debug / Development
<OptionTable options={[
['DEBUG_MODE', 'true', 'Activate debug mode'],
['SIGN_IN_PREFILLED', 'true', 'Prefill the Signin form for usage in a demo or dev environment'],
]}></OptionTable>
### Workspace Cleaning
<OptionTable options={[
['WORKSPACE_INACTIVE_DAYS_BEFORE_NOTIFICATION', '', 'Number of inactive days before sending workspace deleting warning email'],
['WORKSPACE_INACTIVE_DAYS_BEFORE_DELETION', '', 'Number of inactive days before deleting workspace'],
]}></OptionTable>
### Captcha
<OptionTable options={[
['CAPTCHA_DRIVER', '', "The captcha driver can be 'google-recaptcha' or 'turnstile'"],
['CAPTCHA_SITE_KEY', '', 'The captcha site key'],
['CAPTCHA_SECRET_KEY', '', 'The captcha secret key'],
]}></OptionTable>

8
packages/twenty-docs/docs/start/self-hosting/upgrade-guide.mdx
View File

@@ -1,8 +0,0 @@
---
title: Upgrade guide
sidebar_position: 4
sidebar_class_name: coming-soon
sidebar_custom_props:
icon: TbServer
---

4
packages/twenty-docs/docs/ui-components/_category_.json
View File

@@ -1,4 +0,0 @@
{
"label": "UI Components",
"position": 1
}

9
packages/twenty-docs/docs/ui-components/display/_category_.json
View File

@@ -1,9 +0,0 @@
{
"label": "Display",
"position": 1,
"collapsible": true,
"collapsed": false,
"customProps": {
"icon": "TbAppWindow"
}
}

139
packages/twenty-docs/docs/ui-components/display/app-tooltip.mdx
View File

@@ -1,139 +0,0 @@
---
title: App Tooltip
sidebar_position: 6
sidebar_custom_props:
icon: TbTooltip
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import appTooltipCode from '!!raw-loader!@site/src/ui/display/appTooltipCode.js'
import overflowingTextWithTooltipCode from '!!raw-loader!@site/src/ui/display/overflowingTextWithTooltipCode.js'
import { SandpackEditor} from '@site/src/ui/SandpackEditor'
A brief message that displays additional information when a user interacts with an element.
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['@/ui/display/tooltip/AppTooltip']}
componentCode={appTooltipCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>className</td>
<td>string</td>
<td>Optional CSS class for additional styling</td>
</tr>
<tr>
<td>anchorSelect</td>
<td>CSS selector</td>
<td>Selector for the tooltip anchor (the element that triggers the tooltip)</td>
</tr>
<tr>
<td>content</td>
<td>string</td>
<td>The content you want to display within the tooltip</td>
</tr>
<tr>
<td>delayHide</td>
<td>number</td>
<td>The delay in seconds before hiding the tooltip after the cursor leaves the anchor</td>
</tr>
<tr>
<td>offset</td>
<td>number</td>
<td>The offset in pixels for positioning the tooltip</td>
</tr>
<tr>
<td>noArrow</td>
<td>boolean</td>
<td>If `true`, hides the arrow on the tooltip</td>
</tr>
<tr>
<td>isOpen</td>
<td>boolean</td>
<td>If `true`, the tooltip is open by default</td>
</tr>
<tr>
<td>place</td>
<td>`PlacesType` string from `react-tooltip`</td>
<td>Specifies the placement of the tooltip. Values include `bottom`, `left`, `right`, `top`, `top-start`, `top-end`, `right-start`, `right-end`, `bottom-start`, `bottom-end`, `left-start`, and `left-end`</td>
</tr>
<tr>
<td>positionStrategy</td>
<td>`PositionStrategy` string from `react-tooltip`</td>
<td>Position strategy for the tooltip. Has two values: `absolute` and `fixed`</td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>
## Overflowing Text with Tooltip
Handles overflowing text and displays a tooltip when the text overflows.
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['twenty-ui']}
componentCode={overflowingTextWithTooltipCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>text</td>
<td>string</td>
<td>The content you want to display in the overflowing text area</td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>

95
packages/twenty-docs/docs/ui-components/display/checkmark.mdx
View File

@@ -1,95 +0,0 @@
---
title: Checkmark
sidebar_position: 1
sidebar_custom_props:
icon: TbCheck
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import checkmarkCode from '!!raw-loader!@site/src/ui/display/checkmarkCode.js'
import animatedCheckmarkCode from '!!raw-loader!@site/src/ui/display/animatedCheckmarkCode.js'
import { SandpackEditor} from '@site/src/ui/SandpackEditor'
Represents a successful or completed action.
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['twenty-ui']}
componentCode={checkmarkCode}
/>
</TabItem>
<TabItem value="props" label="Props">
Extends `React.ComponentPropsWithoutRef<'div'>` and accepts all the props of a regular `div` element.
</TabItem >
</Tabs>
## Animated Checkmark
Represents a checkmark icon with the added feature of animation.
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['twenty-ui']}
componentCode={animatedCheckmarkCode}
/>
</TabItem>
<TabItem value="props" label="Props" default>
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<td>isAnimating</td>
<td>boolean</td>
<td>Controls whether the checkmark is animating</td>
<td>`false`</td>
</tr>
<tr>
<td>color</td>
<td>string</td>
<td>Color of the checkmark</td>
<td>Theme's gray0</td>
</tr>
<tr>
<td>duration</td>
<td>number</td>
<td>The duration of the animation in seconds</td>
<td>0.5 seconds</td>
</tr>
<tr>
<td>size</td>
<td>number</td>
<td>The size of the checkmark</td>
<td>28 pixels</td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>

252
packages/twenty-docs/docs/ui-components/display/chip.mdx
View File

@@ -1,252 +0,0 @@
---
title: Chip
sidebar_position: 2
sidebar_custom_props:
icon: TbLayoutList
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import chipCode from '!!raw-loader!@site/src/ui/display/chipCode.js'
import entityChipCode from '!!raw-loader!@site/src/ui/display/entityChipCode.js'
import { SandpackEditor} from '@site/src/ui/SandpackEditor'
A visual element that you can use as a clickable or non-clickable container with a label, optional left and right components, and various styling options to display labels and tags.
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['twenty-ui']}
componentCode={chipCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<td>size</td>
<td>`ChipSize` enum</td>
<td>Specifies the size of the chip. Has two options: `large` and `small`</td>
<td>small</td>
</tr>
<tr>
<td>disabled</td>
<td>boolean</td>
<td>Indicates whether the chip is disabled</td>
<td>false</td>
</tr>
<tr>
<td>clickable</td>
<td>boolean</td>
<td>Specifies whether the chip is clickable</td>
<td>true</td>
</tr>
<tr>
<td>label</td>
<td>string</td>
<td>Represents the text content or label inside the chip</td>
<td></td>
</tr>
<tr>
<td>maxWidth</td>
<td>string</td>
<td>Specifies the maximum width of the chip</td>
<td>200px</td>
</tr>
<tr>
<td>variant</td>
<td>`ChipVariant` enum</td>
<td>Specifies the visual style or variant of the chip. Has four options: `regular`, `highlighted`, `transparent`, and `rounded`</td>
<td>regular</td>
</tr>
<tr>
<td>accent</td>
<td>`ChipAccent` enum</td>
<td>Determines the text color or accent color of the chip. Has two options: `text-primary` and `text-secondary`</td>
<td>text-primary</td>
</tr>
<tr>
<td>leftComponent</td>
<td>`React.ReactNode`</td>
<td>An optional React/node component that you can place on the left side of the chip</td>
<td></td>
</tr>
<tr>
<td>rightComponent</td>
<td>`React.ReactNode`</td>
<td>An optional React/node component that you can place on the right side of the chip</td>
<td></td>
</tr>
<tr>
<td>className</td>
<td>string</td>
<td>An optional class name to apply additional custom styles to the chip</td>
<td></td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>
## Examples
### Transparent Disabled Chip
<SandpackEditor
availableComponentPaths={['twenty-ui']}
componentCode={`import { Chip } from "twenty-ui";
export const MyComponent = () => {
return (
<Chip
size="large"
label="Transparent Disabled Chip"
clickable={false}
variant="rounded"
accent="text-secondary"
leftComponent
rightComponent
maxWidth="200px"
className
/>
);
};
`}
/>
<br/>
### Disabled Chip with Tooltip
<SandpackEditor
availableComponentPaths={['twenty-ui']}
componentCode={`import { Chip } from "twenty-ui";
export const MyComponent = () => {
return (
<Chip
size="large"
label="This is a very long label for a disabled chip that triggers a tooltip when overflowing."
clickable={false}
variant="regular"
accent="text-primary"
leftComponent
rightComponent
maxWidth="200px"
className
/>
);
};
`}
/>
## Entity Chip
A Chip-like element to display information about an entity.
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['twenty-ui']}
componentCode={entityChipCode}
/>
</TabItem >
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<td>linkToEntity</td>
<td>string</td>
<td>The link to the entity</td>
<td></td>
</tr>
<tr>
<td>entityId</td>
<td>string</td>
<td>The unique identifier for the entity</td>
<td></td>
</tr>
<tr>
<td>name</td>
<td>string</td>
<td>The name of the entity</td>
<td></td>
</tr>
<tr>
<td>pictureUrl</td>
<td>string</td>
<td>The URL of the entity's picture</td>
<td></td>
</tr>
<tr>
<td>avatarType</td>
<td>Avatar Type</td>
<td>The type of avatar you want to display. Has two options: `rounded` and `squared`</td>
<td>rounded</td>
</tr>
<tr>
<td>variant</td>
<td>`EntityChipVariant` enum</td>
<td>Variant of the entity chip you want to display. Has two options: `regular` and `transparent`</td>
<td>regular</td>
</tr>
<tr>
<td>LeftIcon</td>
<td>IconComponent</td>
<td>A React component representing an icon. Displayed on the left side of the chip</td>
<td></td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>

134
packages/twenty-docs/docs/ui-components/display/icons.mdx
View File

@@ -1,134 +0,0 @@
---
title: Icons
sidebar_position: 3
sidebar_custom_props:
icon: TbIcons
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import tablerIconExampleCode from '!!raw-loader!@site/src/ui/display/tablerIconExampleCode.js'
import iconAddressBookCode from '!!raw-loader!@site/src/ui/display/iconAddressBookCode.js'
import { SandpackEditor} from '@site/src/ui/SandpackEditor'
A list of icons used throughout our app.
## Tabler Icons
We use Tabler icons for React throughout the app.
<Tabs>
<TabItem value="installation" label="Installation">
```
yarn add @tabler/icons-react
```
</TabItem>
<TabItem value="usage" label="Usage" default>
You can import each icon as a component. Here's an example:
<SandpackEditor
availableComponentPaths={['twenty-ui']}
componentCode={tablerIconExampleCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<td>size</td>
<td>number</td>
<td>The height and width of the icon in pixels</td>
<td>24</td>
</tr>
<tr>
<td>color</td>
<td>string</td>
<td>The color of the icons</td>
<td>currentColor</td>
</tr>
<tr>
<td>stroke</td>
<td>number</td>
<td>The stroke width of the icon in pixels</td>
<td>2</td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>
## Custom Icons
In addition to Tabler icons, the app also uses some custom icons.
### Icon Address Book
Displays an address book icon.
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['twenty-ui']}
componentCode={iconAddressBookCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<td>size</td>
<td>number</td>
<td>The height and width of the icon in pixels</td>
<td>24</td>
</tr>
<tr>
<td>stroke</td>
<td>number</td>
<td>The stroke width of the icon in pixels</td>
<td>2</td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>

49
packages/twenty-docs/docs/ui-components/display/soon-pill.mdx
View File

@@ -1,49 +0,0 @@
---
title: Soon Pill
sidebar_position: 4
sidebar_custom_props:
icon: TbPill
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import soonPillCode from '!!raw-loader!@site/src/ui/display/soonPillCode.js'
import { SandpackEditor} from '@site/src/ui/SandpackEditor'
A small badge or "pill" to indicate something is coming soon.
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['@/ui/display/pill/components/SoonPill']}
componentCode={soonPillCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>

68
packages/twenty-docs/docs/ui-components/display/tag.mdx
View File

@@ -1,68 +0,0 @@
---
title: Tag
sidebar_position: 5
sidebar_custom_props:
icon: TbTag
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import tagCode from '!!raw-loader!@site/src/ui/display/tagCode.js'
import { SandpackEditor} from '@site/src/ui/SandpackEditor'
Component to visually categorize or label content.
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['@/ui/display/tag/components/Tag']}
componentCode={tagCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>className</td>
<td>string</td>
<td>Optional name for additional styling</td>
</tr>
<tr>
<td>color</td>
<td>string</td>
<td>Color of the tag. Options include: `green`, `turquoise`, `sky`, `blue`, `purple`, `pink`, `red`, `orange`, `yellow`, `gray`</td>
</tr>
<tr>
<td>text</td>
<td>string</td>
<td>The content of the tag</td>
</tr>
<tr>
<td>onClick</td>
<td>function</td>
<td>Optional function called when a user clicks on the tag</td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>

9
packages/twenty-docs/docs/ui-components/feedback/_category_.json
View File

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

143
packages/twenty-docs/docs/ui-components/feedback/progress-bar.mdx
View File

@@ -1,143 +0,0 @@
---
title: Progress Bar
sidebar_position: 1
sidebar_custom_props:
icon: TbLoader2
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import progressBarCode from '!!raw-loader!@site/src/ui/feedback/progressBarCode.js'
import circularProgressBarCode from '!!raw-loader!@site/src/ui/feedback/circularProgressBarCode.js'
import { SandpackEditor} from '@site/src/ui/SandpackEditor'
Indicates progress or countdown and moves from right to left.
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['@/ui/feedback/progress-bar/components/ProgressBar']}
componentCode={progressBarCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<td>duration</td>
<td>number</td>
<td>The total duration of the progress bar animation in milliseconds</td>
<td>3</td>
</tr>
<tr>
<td>delay</td>
<td>number</td>
<td>The delay in starting the progress bar animation in milliseconds</td>
<td>0</td>
</tr>
<tr>
<td>easing</td>
<td>string</td>
<td>Easing function for the progress bar animation</td>
<td>easeInOut</td>
</tr>
<tr>
<td>barHeight</td>
<td>number</td>
<td>The height of the bar in pixels</td>
<td>24</td>
</tr>
<tr>
<td>barColor</td>
<td>string</td>
<td>The color of the bar</td>
<td>gray80</td>
</tr>
<tr>
<td>autoStart</td>
<td>boolean</td>
<td>If `true`, the progress bar animation starts automatically when the component mounts</td>
<td>`true`</td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>
## Circular Progress Bar
Indicates the progress of a task, often used in loading screens or areas where you want to communicate ongoing processes to the user.
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['@/ui/feedback/progress-bar/components/CircularProgressBar']}
componentCode={circularProgressBarCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<td>size</td>
<td>number</td>
<td>The size of the circular progress bar</td>
<td>50</td>
</tr>
<tr>
<td>barWidth</td>
<td>number</td>
<td>The width of the progress bar line</td>
<td>5</td>
</tr>
<tr>
<td>barColor</td>
<td>string</td>
<td>The color of the progress bar</td>
<td>currentColor</td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>

9
packages/twenty-docs/docs/ui-components/input/_category_.json
View File

@@ -1,9 +0,0 @@
{
"label": "Input",
"position": 3,
"collapsible": true,
"collapsed": false,
"customProps": {
"icon": "TbInputSearch"
}
}

46
packages/twenty-docs/docs/ui-components/input/block-editor.mdx
View File

@@ -1,46 +0,0 @@
---
title: Block Editor
sidebar_position: 11
sidebar_custom_props:
icon: TbTemplate
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import { SandpackEditor} from '@site/src/ui/SandpackEditor'
import blockEditorCode from '!!raw-loader!@site/src/ui/input/blockEditorCode.js'
Uses a block-based rich text editor from [BlockNote](https://www.blocknotejs.org/) to allow users to edit and view blocks of content.
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['@/ui/input/editor/components/BlockEditor']}
componentCode={blockEditorCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>editor</td>
<td>`BlockNoteEditor`</td>
<td>The block editor instance or configuration</td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>

795
packages/twenty-docs/docs/ui-components/input/button.mdx
View File

@@ -1,795 +0,0 @@
---
title: Buttons
sidebar_position: 1
sidebar_custom_props:
icon: TbSquareRoundedPlusFilled
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import { SandpackEditor} from '@site/src/ui/SandpackEditor'
import buttonCode from '!!raw-loader!@site/src/ui/input/button/buttonCode.js'
import buttonGroupCode from '!!raw-loader!@site/src/ui/input/button/buttonGroupCode.js'
import floatingButtonCode from '!!raw-loader!@site/src/ui/input/button/floatingButtonCode.js'
import floatingButtonGroupCode from '!!raw-loader!@site/src/ui/input/button/floatingButtonGroupCode.js'
import floatingIconButtonCode from '!!raw-loader!@site/src/ui/input/button/floatingIconButtonCode.js'
import floatingIconButtonGroupCode from '!!raw-loader!@site/src/ui/input/button/floatingIconButtonGroupCode.js'
import lightButtonCode from '!!raw-loader!@site/src/ui/input/button/lightButtonCode.js'
import lightIconButtonCode from '!!raw-loader!@site/src/ui/input/button/lightIconButtonCode.js'
import mainButtonCode from '!!raw-loader!@site/src/ui/input/button/mainButtonCode.js'
import roundedIconButtonCode from '!!raw-loader!@site/src/ui/input/button/roundedIconButtonCode.js'
A list of buttons and button groups used throughout the app.
## Button
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['@/ui/input/button/components/Button']}
componentCode={buttonCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<td>className</td>
<td>string</td>
<td>Optional class name for additional styling</td>
<td></td>
</tr>
<tr>
<td>Icon</td>
<td>`React.ComponentType`</td>
<td>An optional icon component that's displayed within the button</td>
<td></td>
</tr>
<tr>
<td>title</td>
<td>string</td>
<td>The text content of the button</td>
<td></td>
</tr>
<tr>
<td>fullWidth</td>
<td>boolean</td>
<td>Defines whether the button should span the whole width of its container</td>
<td>`false`</td>
</tr>
<tr>
<td>variant</td>
<td>string</td>
<td>The visual style variant of the button. Options include `primary`, `secondary`, and `tertiary`</td>
<td>primary</td>
</tr>
<tr>
<td>size</td>
<td>string</td>
<td>The size of the button. Has two options: `small` and `medium`</td>
<td>medium</td>
</tr>
<tr>
<td>position</td>
<td>string</td>
<td>The position of the button in relation to its siblings. Options include: `standalone`, `left`, `right`, and `middle`</td>
<td>standalone</td>
</tr>
<tr>
<td>accent</td>
<td>string</td>
<td>The accent color of the button. Options include: `default`, `blue`, and `danger`</td>
<td>default</td>
</tr>
<tr>
<td>soon</td>
<td>boolean</td>
<td>Indicates if the button is marked as "soon" (such as for upcoming features)</td>
<td>`false`</td>
</tr>
<tr>
<td>disabled</td>
<td>boolean</td>
<td>Specifies whether button is disabled or not</td>
<td>`false`</td>
</tr>
<tr>
<td>focus</td>
<td>boolean</td>
<td>Determines if the button has focus</td>
<td>`false`</td>
</tr>
<tr>
<td>onClick</td>
<td>function</td>
<td>A callback function that triggers when the user clicks on the button</td>
<td></td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>
## Button Group
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['@/ui/input/button/components/Button', '@/ui/input/button/components/ButtonGroup']}
componentCode={buttonGroupCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>variant</td>
<td>string</td>
<td>The visual style variant of the buttons within the group. Options include `primary`, `secondary`, and `tertiary`</td>
</tr>
<tr>
<td>size</td>
<td>string</td>
<td>The size of the buttons within the group. Has two options: `medium` and `small`</td>
</tr>
<tr>
<td>accent</td>
<td>string</td>
<td>The accent color of the buttons within the group. Options include `default`, `blue` and `danger`</td>
</tr>
<tr>
<td>className</td>
<td>string</td>
<td>Optional class name for additional styling</td>
</tr>
<tr>
<td>children</td>
<td>ReactNode</td>
<td>An array of React elements representing the individual buttons within the group</td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>
## Floating Button
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['@/ui/input/button/components/FloatingButton']}
componentCode={floatingButtonCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<td>className</td>
<td>string</td>
<td>Optional name for additional styling</td>
<td></td>
</tr>
<tr>
<td>Icon</td>
<td>`React.ComponentType`</td>
<td>An optional icon component that's displayed within the button</td>
<td></td>
</tr>
<tr>
<td>title</td>
<td>string</td>
<td>The text content of the button</td>
<td></td>
</tr>
<tr>
<td>size</td>
<td>string</td>
<td>The size of the button. Has two options: `small` and `medium`</td>
<td>small</td>
</tr>
<tr>
<td>position</td>
<td>string</td>
<td>The position of the button in relation to its sublings. Options include: `standalone`, `left`, `middle`, `right`</td>
<td></td>
</tr>
<tr>
<td>applyShadow</td>
<td>boolean</td>
<td>Determines whether to apply shadow to a button</td>
<td>`true`</td>
</tr>
<tr>
<td>applyBlur</td>
<td>boolean</td>
<td>Determines whether to apply a blur effect to the button</td>
<td>`true`</td>
</tr>
<tr>
<td>disabled</td>
<td>boolean</td>
<td>Determines whether the button is disabled</td>
<td>`false`</td>
</tr>
<tr>
<td>focus</td>
<td>boolean</td>
<td>Indicates if the button has focus</td>
<td>`false`</td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>
## Floating Button Group
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['@/ui/input/button/components/FloatingButton', '@/ui/input/button/components/FloatingButtonGroup']}
componentCode={floatingButtonGroupCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<td>size</td>
<td>string</td>
<td>The size of the button. Has two options: `small` and `medium`</td>
<td>small</td>
</tr>
<tr>
<td>children</td>
<td>ReactNode</td>
<td>An array of React elements representing the individual buttons within the group</td>
<td></td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>
## Floating Icon Button
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['@/ui/input/button/components/FloatingIconButton']}
componentCode={floatingIconButtonCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<td>className</td>
<td>string</td>
<td>Optional name for additional styling</td>
<td></td>
</tr>
<tr>
<td>Icon</td>
<td>`React.ComponentType`</td>
<td>An optional icon component that's displayed within the button</td>
<td></td>
</tr>
<tr>
<td>size</td>
<td>string</td>
<td>The size of the button. Has two options: `small` and `medium`</td>
<td>small</td>
</tr>
<tr>
<td>position</td>
<td>string</td>
<td>The position of the button in relation to its siblings. Options include: `standalone`, `left`, `right`, and `middle`</td>
<td>standalone</td>
</tr>
<tr>
<td>applyShadow</td>
<td>boolean</td>
<td>Determines whether to apply shadow to a button</td>
<td>`true`</td>
</tr>
<tr>
<td>applyBlur</td>
<td>boolean</td>
<td>Determines whether to apply a blur effect to the button</td>
<td>`true`</td>
</tr>
<tr>
<td>disabled</td>
<td>boolean</td>
<td>Determines whether the button is disabled</td>
<td>`false`</td>
</tr>
<tr>
<td>focus</td>
<td>boolean</td>
<td>Indicates if the button has focus</td>
<td>`false`</td>
</tr>
<tr>
<td>onClick</td>
<td>function</td>
<td>A callback function that triggers when the user clicks on the button</td>
<td></td>
</tr>
<tr>
<td>isActive</td>
<td>boolean</td>
<td>Determines if the button is in an active state</td>
<td></td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>
## Floating Icon Button Group
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['@/ui/input/button/components/FloatingIconButtonGroup']}
componentCode={floatingIconButtonGroupCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>className</td>
<td>string</td>
<td>Optional name for additional styling</td>
</tr>
<tr>
<td>size</td>
<td>string</td>
<td>The size of the button. Has two options: `small` and `medium`</td>
</tr>
<tr>
<td>iconButtons</td>
<td>array</td>
<td>An array of objects, each representing an icon button in the group. Each object should include the icon component you want to display in the button, the function you want to call when a user clicks on the button, and whether the button should be active or not.</td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>
## Light Button
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['@/ui/input/button/components/LightButton']}
componentCode={lightButtonCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<td>className</td>
<td>string</td>
<td>Optional name for additional styling</td>
<td></td>
</tr>
<tr>
<td>icon</td>
<td>`React.ReactNode`</td>
<td>The icon you want to display in the button</td>
<td></td>
</tr>
<tr>
<td>title</td>
<td>string</td>
<td>The text content of the button</td>
<td></td>
</tr>
<tr>
<td>accent</td>
<td>string</td>
<td>The accent color of the button. Options include: `secondary` and `tertiary`</td>
<td>secondary</td>
</tr>
<tr>
<td>active</td>
<td>boolean</td>
<td>Determines if the button is in an active state</td>
<td>`false`</td>
</tr>
<tr>
<td>disabled</td>
<td>boolean</td>
<td>Determines whether the button is disabled</td>
<td>`false`</td>
</tr>
<tr>
<td>focus</td>
<td>boolean</td>
<td>Indicates if the button has focus</td>
<td>`false`</td>
</tr>
<tr>
<td>onClick</td>
<td>function</td>
<td>A callback function that triggers when the user clicks on the button</td>
<td></td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>
## Light Icon Button
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['@/ui/input/button/components/LightIconButton']}
componentCode={lightIconButtonCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<td>className</td>
<td>string</td>
<td>Optional name for additional styling</td>
<td></td>
</tr>
<tr>
<td>testId</td>
<td>string</td>
<td>Test identifier for the button</td>
<td></td>
</tr>
<tr>
<td>Icon</td>
<td>`React.ComponentType`</td>
<td>An optional icon component that's displayed within the button</td>
<td></td>
</tr>
<tr>
<td>title</td>
<td>string</td>
<td>The text content of the button</td>
<td></td>
</tr>
<tr>
<td>size</td>
<td>string</td>
<td>The size of the button. Has two options: `small` and `medium`</td>
<td>small</td>
</tr>
<tr>
<td>accent</td>
<td>string</td>
<td>The accent color of the button. Options include: `secondary` and `tertiary`</td>
<td>secondary</td>
</tr>
<tr>
<td>active</td>
<td>boolean</td>
<td>Determines if the button is in an active state</td>
<td>`false`</td>
</tr>
<tr>
<td>disabled</td>
<td>boolean</td>
<td>Determines whether the button is disabled</td>
<td>`false`</td>
</tr>
<tr>
<td>focus</td>
<td>boolean</td>
<td>Indicates if the button has focus</td>
<td>`false`</td>
</tr>
<tr>
<td>onClick</td>
<td>function</td>
<td>A callback function that triggers when the user clicks on the button</td>
<td></td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>
## Main Button
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['@/ui/input/button/components/MainButton']}
componentCode={mainButtonCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<td>title</td>
<td>string</td>
<td>The text content of the button</td>
<td></td>
</tr>
<tr>
<td>fullWidth</td>
<td>boolean</td>
<td>efines whether the button should span the whole width of its container</td>
<td>`false`</td>
</tr>
<tr>
<td>variant</td>
<td>string</td>
<td>The visual style variant of the button. Options include `primary` and `secondary`</td>
<td>primary</td>
</tr>
<tr>
<td>soon</td>
<td>boolean</td>
<td>Indicates if the button is marked as "soon" (such as for upcoming features)</td>
<td>`false`</td>
</tr>
<tr>
<td>Icon</td>
<td>`React.ComponentType`</td>
<td>An optional icon component that's displayed within the button</td>
<td></td>
</tr>
<tr>
<td>React `button` props</td>
<td>`React.ComponentProps<'button'>`</td>
<td>Additional props from React's `button` element</td>
<td></td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>
## Rounded Icon Button
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['@/ui/input/button/components/RoundedIconButton']}
componentCode={roundedIconButtonCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Icon</td>
<td>`React.ComponentType`</td>
<td>An optional icon component that's displayed within the button</td>
</tr>
<tr>
<td>React `button` props</td>
<td>`React.ButtonHTMLAttributes<HTMLButtonElement>`</td>
<td>Additional props from React's `button` element</td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>

93
packages/twenty-docs/docs/ui-components/input/checkbox.mdx
View File

@@ -1,93 +0,0 @@
---
title: Checkbox
sidebar_position: 4
sidebar_custom_props:
icon: TbCheckbox
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import { SandpackEditor} from '@site/src/ui/SandpackEditor'
import checkboxCode from '!!raw-loader!@site/src/ui/input/components/checkboxCode.js'
Used when a user needs to select multiple values from several options.
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['@/ui/input/components/Checkbox']}
componentCode={checkboxCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<td>checked</td>
<td>boolean</td>
<td>Indicates whether the checkbox is checked</td>
<td></td>
</tr>
<tr>
<td>indeterminate</td>
<td>boolean</td>
<td>Indicates whether the checkbox is in an indeterminate state (neither checked nor unchecked)</td>
<td></td>
</tr>
<tr>
<td>onChange</td>
<td>function</td>
<td>The callback function you want to trigger when the checkbox state changes</td>
<td></td>
</tr>
<tr>
<td>onCheckedChange</td>
<td>function</td>
<td>The callback function you want to trigger when the `checked` state changes</td>
<td></td>
</tr>
<tr>
<td>variant</td>
<td>string</td>
<td>The visual style variant of the box. Options include: `primary`, `secondary`, and `tertiary`</td>
<td>primary</td>
</tr>
<tr>
<td>size</td>
<td>string</td>
<td>The size of the checkbox. Has two options: `small` and `large`</td>
<td>small</td>
</tr>
<tr>
<td>shape</td>
<td>string</td>
<td>The shape of the checkbox. Has two options: `squared` and `rounded`</td>
<td>squared</td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>

113
packages/twenty-docs/docs/ui-components/input/color-scheme.mdx
View File

@@ -1,113 +0,0 @@
---
title: Color Scheme
sidebar_position: 2
sidebar_custom_props:
icon: TbColorFilter
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import colorSchemeCardCode from '!!raw-loader!@site/src/ui/input/color-scheme/colorSchemeCardCode.js'
import colorSchemePickerCode from '!!raw-loader!@site/src/ui/input/color-scheme/colorSchemePickerCode.js'
import { SandpackEditor} from '@site/src/ui/SandpackEditor'
## Color Scheme Card
Represents different color schemes and is specially tailored for light and dark themes.
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['@/ui/input/color-scheme/components/ColorSchemeCard']}
componentCode={colorSchemeCardCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<td>variant</td>
<td>string</td>
<td>The color scheme variant. Options include `Dark`, `Light`, and `System`</td>
<td>light</td>
</tr>
<tr>
<td>selected</td>
<td>boolean</td>
<td>If `true`, displays a checkmark to indicate the selected color scheme</td>
<td></td>
</tr>
<tr>
<td>additional props</td>
<td>`React.ComponentPropsWithoutRef<'div'>`</td>
<td>Standard HTML `div` element props</td>
<td></td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>
## Color Scheme Picker
Allows users to choose between different color schemes.
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['@/ui/input/color-scheme/components/ColorSchemePicker']}
componentCode={colorSchemePickerCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>value</td>
<td>`Color Scheme`</td>
<td>The currently selected color scheme</td>
</tr>
<tr>
<td>onChange</td>
<td>function</td>
<td>The callback function you want to trigger when a user selects a color scheme</td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>

92
packages/twenty-docs/docs/ui-components/input/icon-picker.mdx
View File

@@ -1,92 +0,0 @@
---
title: Icon Picker
sidebar_position: 5
sidebar_custom_props:
icon: TbColorPicker
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import { SandpackEditor} from '@site/src/ui/SandpackEditor'
import iconPickerCode from '!!raw-loader!@site/src/ui/input/components/iconPickerCode.js'
A dropdown-based icon picker that allows users to select an icon from a list.
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['@/ui/input/components/IconPicker']}
componentCode={iconPickerCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<td>disabled</td>
<td>boolean</td>
<td>Disables the icon picker if set to `true`</td>
<td></td>
</tr>
<tr>
<td>onChange</td>
<td>function</td>
<td>The callback function triggered when the user selects an icon. It receives an object with `iconKey` and `Icon` properties</td>
<td></td>
</tr>
<tr>
<td>selectedIconKey</td>
<td>string</td>
<td>The key of the initially selected icon</td>
<td></td>
</tr>
<tr>
<td>onClickOutside</td>
<td>function</td>
<td>Callback function triggered when the user clicks outside the dropdown</td>
<td></td>
</tr>
<tr>
<td>onClose</td>
<td>function</td>
<td>Callback function triggered when the dropdown is closed</td>
<td></td>
</tr>
<tr>
<td>onOpen</td>
<td>function</td>
<td>Callback function triggered when the dropdown is opened</td>
<td></td>
</tr>
<tr>
<td>variant</td>
<td>string</td>
<td>The visual style variant of the clickable icon. Options include: `primary`, `secondary`, and `tertiary`</td>
<td>secondary</td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>

92
packages/twenty-docs/docs/ui-components/input/image-input.mdx
View File

@@ -1,92 +0,0 @@
---
title: Image Input
sidebar_position: 6
sidebar_custom_props:
icon: TbUpload
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import { SandpackEditor} from '@site/src/ui/SandpackEditor'
import imageInputCode from '!!raw-loader!@site/src/ui/input/components/imageInputCode.js'
Allows users to upload and remove an image.
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['@/ui/input/components/ImageInput']}
componentCode={imageInputCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<td>picture</td>
<td>string</td>
<td>The image source URL</td>
<td></td>
</tr>
<tr>
<td>onUpload</td>
<td>function</td>
<td>The function called when a user uploads a new image. It receives the `File` object as a parameter</td>
<td></td>
</tr>
<tr>
<td>onRemove</td>
<td>function</td>
<td>The function called when the user clicks on the remove button</td>
<td></td>
</tr>
<tr>
<td>onAbort</td>
<td>function</td>
<td>The function called when a user clicks on the abort button during image upload</td>
<td></td>
</tr>
<tr>
<td>isUploading</td>
<td>boolean</td>
<td>Indicates whether an image is currently being uploaded</td>
<td>`false`</td>
</tr>
<tr>
<td>errorMessage</td>
<td>string</td>
<td>An optional error message to display below the image input</td>
<td></td>
</tr>
<tr>
<td>disabled</td>
<td>boolean</td>
<td>If `true`, the entire input is disabled, and the buttons are not clickable</td>
<td>`false`</td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>

164
packages/twenty-docs/docs/ui-components/input/radio.mdx
View File

@@ -1,164 +0,0 @@
---
title: Radio
sidebar_position: 7
sidebar_custom_props:
icon: TbCircleDot
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import { SandpackEditor} from '@site/src/ui/SandpackEditor'
import radioCode from '!!raw-loader!@site/src/ui/input/components/radioCode.js'
import radioGroupCode from '!!raw-loader!@site/src/ui/input/components/radioGroupCode.js'
Used when users may only choose one option from a series of options.
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['@/ui/input/components/Radio']}
componentCode={radioCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<td>style</td>
<td>`React.CSS` properties</td>
<td>Additional inline styles for the component</td>
<td></td>
</tr>
<tr>
<td>className</td>
<td>string</td>
<td>Optional CSS class for additional styling</td>
<td></td>
</tr>
<tr>
<td>checked</td>
<td>boolean</td>
<td>Indicates whether the radio button is checked</td>
<td></td>
</tr>
<tr>
<td>value</td>
<td>string</td>
<td>The label or text associated with the radio button</td>
<td></td>
</tr>
<tr>
<td>onChange</td>
<td>function</td>
<td>The function called when the selected radio button is changed</td>
<td></td>
</tr>
<tr>
<td>onCheckedChange</td>
<td>function</td>
<td>The function called when the `checked` state of the radio button changes</td>
<td></td>
</tr>
<tr>
<td>size</td>
<td>string</td>
<td>The size of the radio button. Options include: `large` and `small`</td>
<td>small</td>
</tr>
<tr>
<td>disabled</td>
<td>boolean</td>
<td>If `true`, the radio button is disabled and not clickable</td>
<td>false</td>
</tr>
<tr>
<td>labelPosition</td>
<td>string</td>
<td>The position of the label text relative to the radio button. Has two options: `left` and `right`</td>
<td>right</td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>
## Radio Group
Groups together related radio buttons.
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['@/ui/input/components/RadioGroup', '@/ui/input/components/Radio']}
componentCode={radioGroupCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>value</td>
<td>string</td>
<td>The value of the currently selected radio button</td>
</tr>
<tr>
<td>onChange</td>
<td>function</td>
<td>The callback function triggered when the radio button is changed</td>
</tr>
<tr>
<td>onValueChange</td>
<td>function</td>
<td>The callback function triggered when the selected value in the group changes.</td>
</tr>
<tr>
<td>children</td>
<td>`React.ReactNode`</td>
<td>Allows you to pass React components (such as Radio) as children to the Radio Group</td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>

85
packages/twenty-docs/docs/ui-components/input/select.mdx
View File

@@ -1,85 +0,0 @@
---
title: Select
sidebar_position: 8
sidebar_custom_props:
icon: TbSelect
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import { SandpackEditor} from '@site/src/ui/SandpackEditor'
import selectCode from '!!raw-loader!@site/src/ui/input/components/selectCode.js'
Allows users to pick a value from a list of predefined options.
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['@/ui/input/components/Select', 'twenty-ui']}
componentCode={selectCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>className</td>
<td>string</td>
<td>Optional CSS class for additional styling</td>
</tr>
<tr>
<td>disabled</td>
<td>boolean</td>
<td>When set to `true`, disables user interaction with the component</td>
</tr>
<tr>
<td>dropdownScopeId</td>
<td>string</td>
<td>Required prop that uniquely identifies the dropdown scope</td>
</tr>
<tr>
<td>label</td>
<td>string</td>
<td>The label to describe the purpose of the `Select` component</td>
</tr>
<tr>
<td>onChange</td>
<td>function</td>
<td>The function called when the selected values change</td>
</tr>
<tr>
<td>options</td>
<td>array</td>
<td>Represents the options available for the `Selected` component. It's an array of objects where each object has a `value` (the unique identifier), `label` (the unique identifier), and an optional `Icon`</td>
</tr>
<tr>
<td>value</td>
<td>string</td>
<td>Represents the currently selected value. It should match one of the `value` properties in the `options` array</td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>

322
packages/twenty-docs/docs/ui-components/input/text.mdx
View File

@@ -1,322 +0,0 @@
---
title: Text
sidebar_position: 3
sidebar_custom_props:
icon: TbTextSize
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import { SandpackEditor} from '@site/src/ui/SandpackEditor'
import textInputCode from '!!raw-loader!@site/src/ui/input/components/textInputCode.js'
import autosizeTextInputCode from '!!raw-loader!@site/src/ui/input/components/autosizeTextInputCode.js'
import entityTitleDoubleTextInputCode from '!!raw-loader!@site/src/ui/input/components/entityTitleDoubleTextInputCode.js'
import textAreaCode from '!!raw-loader!@site/src/ui/input/components/textAreaCode.js'
## Text Input
Allows users to enter and edit text.
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['@/ui/input/components/TextInput']}
componentCode={textInputCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<td>className</td>
<td>string</td>
<td>Optional name for additional styling</td>
<td></td>
</tr>
<tr>
<td>label</td>
<td>string</td>
<td>Represents the label for the input</td>
<td></td>
</tr>
<tr>
<td>onChange</td>
<td>function</td>
<td>The function called when the input value changes</td>
<td></td>
</tr>
<tr>
<td>fullWidth</td>
<td>boolean</td>
<td>Indicates whether the input should take up 100% of the width</td>
<td></td>
</tr>
<tr>
<td>disableHotkeys</td>
<td>boolean</td>
<td>Indicates whether hotkeys are enabled for the input</td>
<td>`false`</td>
</tr>
<tr>
<td>error</td>
<td>string</td>
<td>Represents the error message to be displayed. When provided, it also adds an icon error on the right side of the input</td>
<td></td>
</tr>
<tr>
<td>onKeyDown</td>
<td>function</td>
<td>Called when a key is pressed down while the input field is focused. Receives a `React.KeyboardEvent` as an argument</td>
<td></td>
</tr>
<tr>
<td>RightIcon</td>
<td>IconComponent</td>
<td>An optional icon component displayed on the right side of the input</td>
<td></td>
</tr>
</tbody>
</table>
The component also accepts other HTML input element props.
</TabItem>
</Tabs>
## Autosize Text Input
Text input component that automatically adjusts its height based on the content.
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['@/ui/input/components/AutosizeTextInput']}
componentCode={autosizeTextInputCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<td>onValidate</td>
<td>function</td>
<td>The callback function you want to trigger when the user validates the input</td>
<td></td>
</tr>
<tr>
<td>minRows</td>
<td>number</td>
<td>The minimum number of rows for the text area</td>
<td>1</td>
</tr>
<tr>
<td>placeholder</td>
<td>string</td>
<td>The placeholder text you want to display when the text area is empty</td>
<td></td>
</tr>
<tr>
<td>onFocus</td>
<td>function</td>
<td>The callback function you want to trigger when the text area gains focus</td>
<td></td>
</tr>
<tr>
<td>variant</td>
<td>string</td>
<td>The variant of the input. Options include: `default`, `icon`, and `button`</td>
<td>default</td>
</tr>
<tr>
<td>buttonTitle</td>
<td>string</td>
<td>The title for the button (only applicable for the button variant)</td>
<td></td>
</tr>
<tr>
<td>value</td>
<td>string</td>
<td>The initial value for the text area</td>
<td>Empty string</td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>
## Entity Title Double Text Input
Displays a pair of text inputs side by side, allowing the user to edit two related values simultaneously.
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['@/ui/input/components/EntityTitleDoubleTextInput']}
componentCode={entityTitleDoubleTextInputCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>firstValue</td>
<td>string</td>
<td>The value for the first text input</td>
</tr>
<tr>
<td>secondValue</td>
<td>string</td>
<td>The value for the second text input</td>
</tr>
<tr>
<td>firstValuePlaceholder</td>
<td>string</td>
<td>Placeholder text for the first text input, displayed when the input is empty</td>
</tr>
<tr>
<td>secondValuePlaceholder</td>
<td>string</td>
<td>Placeholder text for the second text input, displayed when the input is empty</td>
</tr>
<tr>
<td>onChange</td>
<td>function</td>
<td>The callback function you want to trigger when the text input changes</td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>
## Text Area
Allows you to create multi-line text inputs.
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['@/ui/input/components/TextArea']}
componentCode={textAreaCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<td>disabled</td>
<td>boolean</td>
<td>Indicates whether the text area is disabled</td>
<td></td>
</tr>
<tr>
<td>minRows</td>
<td>number</td>
<td>Minimum number of visible rows for the text area. </td>
<td>1</td>
</tr>
<tr>
<td>onChange</td>
<td>function</td>
<td>Callback function triggered when the text area content changes</td>
<td></td>
</tr>
<tr>
<td>placeholder</td>
<td>string</td>
<td>Placeholder text displayed when the text area is empty</td>
<td></td>
</tr>
<tr>
<td>value</td>
<td>string</td>
<td>The current value of the text area</td>
<td>Empty string</td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>

71
packages/twenty-docs/docs/ui-components/input/toggle.mdx
View File

@@ -1,71 +0,0 @@
---
title: Toggle
sidebar_position: 10
sidebar_custom_props:
icon: TbToggleRight
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import { SandpackEditor} from '@site/src/ui/SandpackEditor'
import toggleCode from '!!raw-loader!@site/src/ui/input/components/toggleCode.js'
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['@/ui/input/components/Toggle']}
componentCode={toggleCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<td>value</td>
<td>boolean</td>
<td>The current state of the toggle</td>
<td>`false`</td>
</tr>
<tr>
<td>onChange</td>
<td>function</td>
<td>Callback function triggered when the toggle state changes</td>
<td></td>
</tr>
<tr>
<td>color</td>
<td>string</td>
<td>Color of the toggle when it's in the "on" state. If not provided, it uses the theme's blue color</td>
<td></td>
</tr>
<tr>
<td>toggleSize</td>
<td>string</td>
<td>Size of the toggle, affecting both height and weight. Has two options: `small` and `medium`</td>
<td>medium</td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>

9
packages/twenty-docs/docs/ui-components/navigation/_category_.json
View File

@@ -1,9 +0,0 @@
{
"label": "Navigation",
"position": 4,
"collapsible": true,
"collapsed": false,
"customProps": {
"icon": "TbNavigation"
}
}

53
packages/twenty-docs/docs/ui-components/navigation/bread-crumb.mdx
View File

@@ -1,53 +0,0 @@
---
title: Breadcrumb
sidebar_position: 1
sidebar_custom_props:
icon: TbSquareChevronsRight
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import { SandpackEditor} from '@site/src/ui/SandpackEditor'
import breadcrumbCode from '!!raw-loader!@site/src/ui/navigation/breadcrumbCode.js'
Renders a breadcrumb navigation bar.
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['@/ui/navigation/bread-crumb/components/Breadcrumb']}
componentCode={breadcrumbCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>className</td>
<td>string</td>
<td>Optional class name for additional styling</td>
</tr>
<tr>
<td>links</td>
<td>array</td>
<td>An array of objects, each representing a breadcrumb link. Each object has a `children` property (the text content of the link) and an optional `href` property (the URL to navigate to when the link is clicked)</td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>

237
packages/twenty-docs/docs/ui-components/navigation/link.mdx
View File

@@ -1,237 +0,0 @@
---
title: Links
sidebar_position: 2
sidebar_custom_props:
icon: TbLink
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import { SandpackEditor} from '@site/src/ui/SandpackEditor'
import contactLinkCode from '!!raw-loader!@site/src/ui/navigation/link/contactLinkCode.js'
import rawLinkCode from '!!raw-loader!@site/src/ui/navigation/link/rawLinkCode.js'
import roundedLinkCode from '!!raw-loader!@site/src/ui/navigation/link/roundedLinkCode.js'
import socialLinkCode from '!!raw-loader!@site/src/ui/navigation/link/socialLinkCode.js'
## Contact Link
A stylized link component for displaying contact information.
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['@/ui/navigation/link/components/ContactLink']}
componentCode={contactLinkCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>className</td>
<td>string</td>
<td>Optional name for additional styling</td>
</tr>
<tr>
<td>href</td>
<td>string</td>
<td>The target URL or path for the link</td>
</tr>
<tr>
<td>onClick</td>
<td>function</td>
<td>Callback function to be triggered when the link is clicked</td>
</tr>
<tr>
<td>children</td>
<td>`React.ReactNode`</td>
<td>The content to be displayed inside the link</td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>
## Raw Link
A stylized link component for displaying links.
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['@/ui/navigation/link/components/RawLink']}
componentCode={rawLinkCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>className</td>
<td>string</td>
<td>Optional name for additional styling</td>
</tr>
<tr>
<td>href</td>
<td>string</td>
<td>The target URL or path for the link</td>
</tr>
<tr>
<td>onClick</td>
<td>function</td>
<td>Callback function to be triggered when the link is clicked</td>
</tr>
<tr>
<td>children</td>
<td>`React.ReactNode`</td>
<td>The content to be displayed inside the link</td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>
## Rounded Link
A rounded-styled link with a Chip component for links.
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['@/ui/navigation/link/components/RoundedLink']}
componentCode={roundedLinkCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>href</td>
<td>string</td>
<td>The target URL or path for the link</td>
</tr>
<tr>
<td>children</td>
<td>`React.ReactNode`</td>
<td>The content to be displayed inside the link</td>
</tr>
<tr>
<td>onClick</td>
<td>function</td>
<td>Callback function to be triggered when the link is clicked</td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>
## Social Link
Stylized social links, with support for various social link types, such as URLs, LinkedIn, and X (or Twitter).
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['@/ui/navigation/link/components/SocialLink']}
componentCode={socialLinkCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>href</td>
<td>string</td>
<td>The target URL or path for the link</td>
</tr>
<tr>
<td>children</td>
<td>`React.ReactNode`</td>
<td>The content to be displayed inside the link</td>
</tr>
<tr>
<td>type</td>
<td>string</td>
<td>The type of social links. Options include: `url`, `LinkedIn`, and `Twitter`</td>
</tr>
<tr>
<td>onClick</td>
<td>function</td>
<td>Callback function to be triggered when the link is clicked</td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>

768
packages/twenty-docs/docs/ui-components/navigation/menu-item.mdx
View File

@@ -1,768 +0,0 @@
---
title: Menu Item
sidebar_position: 3
sidebar_custom_props:
icon: TbMenu
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import { SandpackEditor} from '@site/src/ui/SandpackEditor'
import menuItemCode from '!!raw-loader!@site/src/ui/navigation/menu-item/menuItemCode.js'
import menuItemCommandCode from '!!raw-loader!@site/src/ui/navigation/menu-item/menuItemCommandCode.js'
import menuItemDraggableCode from '!!raw-loader!@site/src/ui/navigation/menu-item/menuItemDraggableCode.js'
import menuItemMultiSelectAvatarCode from '!!raw-loader!@site/src/ui/navigation/menu-item/menuItemMultiSelectAvatarCode.js'
import menuItemMultiSelectCode from '!!raw-loader!@site/src/ui/navigation/menu-item/menuItemMultiSelectCode.js'
import menuItemNavigateCode from '!!raw-loader!@site/src/ui/navigation/menu-item/menuItemNavigateCode.js'
import menuItemSelectAvatarCode from '!!raw-loader!@site/src/ui/navigation/menu-item/menuItemSelectAvatarCode.js'
import menuItemSelectCode from '!!raw-loader!@site/src/ui/navigation/menu-item/menuItemSelectCode.js'
import menuItemSelectColorCode from '!!raw-loader!@site/src/ui/navigation/menu-item/menuItemSelectColorCode.js'
import menuItemToggleCode from '!!raw-loader!@site/src/ui/navigation/menu-item/menuItemToggleCode.js'
A versatile menu item designed to be used in a menu or navigation list.
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['@/ui/navigation/menu-item/components/MenuItem']}
componentCode={menuItemCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<td>LeftIcon</td>
<td>IconComponent</td>
<td>An optional left icon displayed before the text in the menu item</td>
<td></td>
</tr>
<tr>
<td>accent</td>
<td>string</td>
<td>Specifies the accent color of the menu item. Options include: `default`, `danger`, and `placeholder`</td>
<td>default</td>
</tr>
<tr>
<td>text</td>
<td>string</td>
<td>The text content of the menu item</td>
<td></td>
</tr>
<tr>
<td>iconButtons</td>
<td>array</td>
<td>An array of objects representing additional icon buttons associated with the menu item</td>
<td></td>
</tr>
<tr>
<td>isTooltipOpen</td>
<td>boolean</td>
<td>Controls the visibility of the tooltip associated with the menu item</td>
<td></td>
</tr>
<tr>
<td>testId</td>
<td>string</td>
<td>The data-testid attribute for testing purposes</td>
<td></td>
</tr>
<tr>
<td>onClick</td>
<td>function</td>
<td>Callback function triggered when the menu item is clicked</td>
<td></td>
</tr>
<tr>
<td>className</td>
<td>string</td>
<td>Optional name for additional styling</td>
<td></td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>
## Variants
The different variants of the menu item component include the following:
### Command
A command-style menu item within a menu to indicate keyboard shortcuts.
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['@/ui/navigation/menu-item/components/MenuItemCommand']}
componentCode={menuItemCommandCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>LeftIcon</td>
<td>IconComponent</td>
<td>An optional left icon displayed before the text in the menu item</td>
</tr>
<tr>
<td>text</td>
<td>string</td>
<td>The text content of the menu item</td>
</tr>
<tr>
<td>firstHotKey</td>
<td>string</td>
<td>The first keyboard shortcut associated with the command</td>
</tr>
<tr>
<td>secondHotKey</td>
<td>string</td>
<td>The second keyboard shortcut associated with the command</td>
</tr>
<tr>
<td>isSelected</td>
<td>boolean</td>
<td>Indicates whether the menu item is selected or highlighted</td>
</tr>
<tr>
<td>onClick</td>
<td>function</td>
<td>Callback function triggered when the menu item is clicked</td>
</tr>
<tr>
<td>className</td>
<td>string</td>
<td>Optional name for additional styling</td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>
### Draggable
A draggable menu item component designed to be used in a menu or list where items can be dragged, and additional actions can be performed through icon buttons.
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['@/ui/navigation/menu-item/components/MenuItemDraggable']}
componentCode={menuItemDraggableCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<td>LeftIcon</td>
<td>IconComponent</td>
<td>An optional left icon displayed before the text in the menu item</td>
<td></td>
</tr>
<tr>
<td>accent</td>
<td>string</td>
<td>The accent color of the menu item. It can either be `default`, `placeholder`, and `danger`</td>
<td>default</td>
</tr>
<tr>
<td>iconButtons</td>
<td>array</td>
<td>An array of objects representing additional icon buttons associated with the menu item</td>
<td></td>
</tr>
<tr>
<td>isTooltipOpen</td>
<td>boolean</td>
<td>Controls the visibility of the tooltip associated with the menu item</td>
<td></td>
</tr>
<tr>
<td>onClick</td>
<td>function</td>
<td>Callback function to be triggered when the link is clicked</td>
<td></td>
</tr>
<tr>
<td>text</td>
<td>string</td>
<td>The text content of the menu item</td>
<td></td>
</tr>
<tr>
<td>isDragDisabled</td>
<td>boolean</td>
<td>Indicates whether dragging is disabled</td>
<td>`false`</td>
</tr>
<tr>
<td>className</td>
<td>string</td>
<td>Optional name for additional styling</td>
<td></td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>
### Multi Select
Provides a way to implement multi-select functionality with an associated checkbox.
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['@/ui/navigation/menu-item/components/MenuItemMultiSelect']}
componentCode={menuItemMultiSelectCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>LeftIcon</td>
<td>IconComponent</td>
<td>An optional left icon displayed before the text in the menu item</td>
</tr>
<tr>
<td>text</td>
<td>string</td>
<td>The text content of the menu item</td>
</tr>
<tr>
<td>selected</td>
<td>boolean</td>
<td>Indicates whether the menu item is selected (checked)</td>
</tr>
<tr>
<td>onSelectChange</td>
<td>function</td>
<td>Callback function triggered when the checkbox state changes</td>
</tr>
<tr>
<td>className</td>
<td>string</td>
<td>Optional name for additional styling</td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>
### Multi Select Avatar
A multi-select menu item with an avatar, a checkbox for selection, and textual content.
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['@/ui/navigation/menu-item/components/MenuItemMultiSelectAvatar']}
componentCode={menuItemMultiSelectAvatarCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>avatar</td>
<td>`ReactNode`</td>
<td>The avatar or icon to be displayed on the left side of the menu item</td>
</tr>
<tr>
<td>text</td>
<td>string</td>
<td>The text content of the menu item</td>
</tr>
<tr>
<td>selected</td>
<td>boolean</td>
<td>Indicates whether the menu item is selected (checked)</td>
</tr>
<tr>
<td>onSelectChange</td>
<td>function</td>
<td>Callback function triggered when the checkbox state changes</td>
</tr>
<tr>
<td>className</td>
<td>string</td>
<td>Optional name for additional styling</td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>
### Navigate
A menu item featuring an optional left icon, textual content, and a right-chevron icon.
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['@/ui/navigation/menu-item/components/MenuItemNavigate']}
componentCode={menuItemNavigateCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>LeftIcon</td>
<td>IconComponent</td>
<td>An optional left icon displayed before the text in the menu item</td>
</tr>
<tr>
<td>text</td>
<td>string</td>
<td>The text content of the menu item</td>
</tr>
<tr>
<td>onClick</td>
<td>function</td>
<td>Callback function to be triggered when the menu item is clicked</td>
</tr>
<tr>
<td>className</td>
<td>string</td>
<td>Optional name for additional styling</td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>
### Select
A selectable menu item, featuring optional left content (icon and text) and an indicator (check icon) for the selected state.
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['@/ui/navigation/menu-item/components/MenuItemSelect']}
componentCode={menuItemSelectCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>LeftIcon</td>
<td>IconComponent</td>
<td>An optional left icon displayed before the text in the menu item</td>
</tr>
<tr>
<td>text</td>
<td>string</td>
<td>The text content of the menu item</td>
</tr>
<tr>
<td>selected</td>
<td>boolean</td>
<td>Indicates whether the menu item is selected (checked)</td>
</tr>
<tr>
<td>disabled</td>
<td>boolean</td>
<td>Indicates whether the menu item is disabled</td>
</tr>
<tr>
<td>hovered</td>
<td>boolean</td>
<td>Indicates whether the menu item is currently being hovered over</td>
</tr>
<tr>
<td>onClick</td>
<td>function</td>
<td>Callback function to be triggered when the menu item is clicked</td>
</tr>
<tr>
<td>className</td>
<td>string</td>
<td>Optional name for additional styling</td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>
### Select Avatar
A selectable menu item with an avatar, featuring optional left content (avatar and text) and an indicator (check icon) for the selected state.
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['@/ui/navigation/menu-item/components/MenuItemSelectAvatar']}
componentCode={menuItemSelectAvatarCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>avatar</td>
<td>`ReactNode`</td>
<td>The avatar or icon to be displayed on the left side of the menu item</td>
</tr>
<tr>
<td>text</td>
<td>string</td>
<td>The text content of the menu item</td>
</tr>
<tr>
<td>selected</td>
<td>boolean</td>
<td>Indicates whether the menu item is selected (checked)</td>
</tr>
<tr>
<td>disabled</td>
<td>boolean</td>
<td>Indicates whether the menu item is disabled</td>
</tr>
<tr>
<td>hovered</td>
<td>boolean</td>
<td>Indicates whether the menu item is currently being hovered over</td>
</tr>
<tr>
<td>testId</td>
<td>string</td>
<td>The data-testid attribute for testing purposes</td>
</tr>
<tr>
<td>onClick</td>
<td>function</td>
<td>Callback function to be triggered when the menu item is clicked</td>
</tr>
<tr>
<td>className</td>
<td>string</td>
<td>Optional name for additional styling</td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>
### Select Color
A selectable menu item with a color sample for scenarios where you want users to choose a color from a menu.
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['@/ui/navigation/menu-item/components/MenuItemSelectColor']}
componentCode={menuItemSelectColorCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<td>color</td>
<td>string</td>
<td>The theme color to be displayed as a sample in the menu item. Options include: `green`, `turquoise`, `sky`, `blue`, `purple`, `pink`, `red`, `orange`, `yellow`, and `gray`</td>
<td></td>
</tr>
<tr>
<td>selected</td>
<td>boolean</td>
<td>Indicates whether the menu item is selected (checked)</td>
<td></td>
</tr>
<tr>
<td>disabled</td>
<td>boolean</td>
<td>Indicates whether the menu item is disabled</td>
<td></td>
</tr>
<tr>
<td>hovered</td>
<td>boolean</td>
<td>Indicates whether the menu item is currently being hovered over</td>
<td></td>
</tr>
<tr>
<td>variant</td>
<td>string</td>
<td>The variant of the color sample. It can either be `default` or `pipeline`</td>
<td>default</td>
</tr>
<tr>
<td>onClick</td>
<td>function</td>
<td>Callback function to be triggered when the menu item is clicked</td>
<td></td>
</tr>
<tr>
<td>className</td>
<td>string</td>
<td>Optional name for additional styling</td>
<td></td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>
### Toggle
A menu item with an associated toggle switch to allow users to enable or disable a specific feature
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['@/ui/navigation/menu-item/components/MenuItemToggle']}
componentCode={menuItemToggleCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>LeftIcon</td>
<td>IconComponent</td>
<td>An optional left icon displayed before the text in the menu item</td>
</tr>
<tr>
<td>text</td>
<td>string</td>
<td>The text content of the menu item</td>
</tr>
<tr>
<td>toggled</td>
<td>boolean</td>
<td>Indicates whether the toggle switch is in the "on" or "off" state</td>
</tr>
<tr>
<td>onToggleChange</td>
<td>function</td>
<td>Callback function triggered when the toggle switch state changes</td>
</tr>
<tr>
<td>toggleSize</td>
<td>string</td>
<td>The size of the toggle switch. It can be either 'small' or 'medium'</td>
</tr>
<tr>
<td>className</td>
<td>string</td>
<td>Optional name for additional styling</td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>

53
packages/twenty-docs/docs/ui-components/navigation/navigation-bar.mdx
View File

@@ -1,53 +0,0 @@
---
title: Navigation Bar
sidebar_position: 4
sidebar_custom_props:
icon: TbRectangle
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import { SandpackEditor} from '@site/src/ui/SandpackEditor'
import navBarCode from '!!raw-loader!@site/src/ui/navigation/navBarCode.js'
Renders a navigation bar that contains multiple `NavigationBarItem` components.
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['@/ui/navigation/navigation-bar/components/NavigationBar']}
componentCode={navBarCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>activeItemName</td>
<td>string</td>
<td>The name of the currently active navigation item</td>
</tr>
<tr>
<td>items</td>
<td>array</td>
<td>An array of objects representing each navigation item. Each object contains the `name` of the item, the `Icon` component to display, and an `onClick` function to be called when the item is clicked</td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>

47
packages/twenty-docs/docs/ui-components/navigation/step-bar.mdx
View File

@@ -1,47 +0,0 @@
---
title: Step Bar
sidebar_position: 5
sidebar_custom_props:
icon: TbCircleCheckFilled
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import { SandpackEditor} from '@site/src/ui/SandpackEditor'
import stepBarCode from '!!raw-loader!@site/src/ui/navigation/stepBarCode.js'
Displays progress through a sequence of numbered steps by highlighting the active step. It renders a container with steps, each represented by the `Step` component.
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['@/ui/navigation/step-bar/components/StepBar']}
componentCode={stepBarCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>activeStep</td>
<td>number</td>
<td>The index of the currently active step. This determines which step should be visually highlighted</td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>

8
packages/twenty-docs/docs/ui-components/ui-components.mdx
View File

@@ -1,8 +0,0 @@
---
title: UI Components
sidebar_position: 0
displayed_sidebar: uiDocsSidebar
sidebar_custom_props:
isSidebarRoot: true
icon: TbLayoutGrid
---

145
packages/twenty-docs/docusaurus.config.js
View File

@@ -1,145 +0,0 @@
// @ts-check
// Note: type annotations allow type checking and IDEs autocompletion
import { themes } from 'prism-react-renderer';
const lightCodeTheme = themes.github;
const darkCodeTheme = themes.dracula;
const filterOutCategory = (items, categoryNameToExclude) => {
return items.reduce((filteredItems, item) => {
if (item.type === 'category' && item.label === categoryNameToExclude) {
// Skip adding the item if the category should be excluded
return filteredItems;
} else if (item.type === 'category') {
// Recursively filter sub-categories
return filteredItems.concat({
...item,
items: filterOutCategory(item.items, categoryNameToExclude),
});
} else {
// Include the item if it's not a category to be excluded
return filteredItems.concat(item);
}
}, []);
};
/** @type {import('@docusaurus/types').Config} */
const config = {
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',
// Set the production url of your site here
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',
headTags: [],
// Even if you don't use internalization, you can use this field to set useful
// 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'],
},
plugins: ['docusaurus-node-polyfills'],
presets: [
[
'classic',
/** @type {import('@docusaurus/preset-classic').Options} */
({
docs: {
breadcrumbs: false,
sidebarPath: require.resolve('./sidebars.js'),
sidebarCollapsible: false,
routeBasePath: '/',
editUrl:
'https://github.com/twentyhq/twenty/tree/main/packages/twenty-docs',
sidebarItemsGenerator: async ({
defaultSidebarItemsGenerator,
...args
}) => {
const sidebarItems = await defaultSidebarItemsGenerator(args);
return filterOutCategory(sidebarItems, 'UI Components');
},
},
blog: false,
theme: {
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',
respectPrefersColorScheme: false,
},
docs: {
sidebar: {
autoCollapseCategories: true,
},
},
navbar: {
title: 'for Developers',
logo: {
alt: 'Twenty',
src: 'img/logo-square-dark.svg',
srcDark: 'img/logo-square-light.svg',
},
items: [
/*{
to: 'https://github.com/twentyhq/twenty/releases',
label: 'Releases',
position: 'right',
},*/
{
type: 'custom-github-link',
position: 'right',
},
],
},
algolia: {
appId: 'J2OX2P2QAO',
apiKey: 'e3de1c1c0b50bd5ea3ffa1ee7ea3f56d',
indexName: 'twenty-developer-docs',
// Optional: see doc section below
contextualSearch: true,
// Optional: Specify domains where the navigation should occur through window.location instead on history.push. Useful when our Algolia config crawls multiple documentation sites and we want to navigate with window.location.href to them.
// externalUrlRegex: 'external\\.com|domain\\.com',
// Optional: Replace parts of the item URLs from Algolia. Useful when using the same search index for multiple deployments using a different baseUrl. You can use regexp or string in the `from` param. For example: localhost:3000 vs myCompany.com/docs
/* replaceSearchResultPathname: {
from: '/docs/', // or as RegExp: /\/docs\//
to: '/',
},*/
// Optional: Algolia search parameters
searchParameters: {},
// Optional: path for search page that enabled by default (`false` to disable it)
searchPagePath: 'search',
},
/* footer: {
copyright: `© ${new Date().getFullYear()} Twenty. Docs generated with Docusaurus.`,
},*/
prism: {
theme: lightCodeTheme,
darkTheme: darkCodeTheme,
},
}),
};
module.exports = config;

37
packages/twenty-docs/package.json
View File

@@ -1,37 +0,0 @@
{
"name": "twenty-docs",
"version": "0.12.2",
"private": true,
"scripts": {
"nx": "NX_DEFAULT_PROJECT=twenty-docs node ../../node_modules/nx/bin/nx.js",
"docusaurus": "npx docusaurus",
"start": "npx docusaurus start --host 0.0.0.0 --port 5001",
"build": "npx docusaurus build",
"swizzle": "npx docusaurus swizzle",
"deploy": "npx docusaurus deploy",
"clear": "npx docusaurus clear",
"serve": "npx docusaurus serve",
"write-translations": "npx docusaurus write-translations",
"write-heading-ids": "npx docusaurus write-heading-ids",
"typecheck": "npx tsc"
},
"overrides": {
"trim": "^0.0.3",
"got": "^11.8.5"
},
"browserslist": {
"production": [
">0.5%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"engines": {
"node": ">=16.14"
}
}

110
packages/twenty-docs/sidebars.js
View File

@@ -1,110 +0,0 @@
/**
* Creating a sidebar enables you to:
- create an ordered group of docs
- render a sidebar for each doc of that group
- provide next/previous navigation
The sidebars can be generated from the filesystem, or explicitly defined here.
Create as many sidebars as you want.
*/
// @ts-check
const backToHomeLink = {
/** @type {"ref"} */
type: 'ref',
id: 'homepage',
label: 'Back to home',
className: 'menu__list-item--home',
customProps: {
icon: 'TbArrowBackUp',
iconSize: 20,
},
};
/** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
const sidebars = {
docsSidebar: [
{
type: 'doc',
id: 'homepage',
customProps: {
type: 'search-bar',
},
},
{ type: 'autogenerated', dirName: '.' },
{
type: 'category',
label: 'Extending',
items: [
{
type: 'category',
label: 'Rest APIs',
collapsible: true,
collapsed: true,
customProps: {
icon: 'TbApi',
},
items: [
{
type: 'link',
label: 'Core API',
href: '/rest-api/core',
},
{
type: 'link',
label: 'Metadata API',
href: '/rest-api/metadata',
},
],
},
{
type: 'category',
label: 'GraphQL APIs',
collapsible: true,
collapsed: true,
customProps: {
icon: 'TbBrandGraphql',
},
items: [
{
type: 'link',
label: 'Core API',
href: '/graphql/core',
},
{
type: 'link',
label: 'Metadata API',
href: '/graphql/metadata',
},
],
},
{
type: 'category',
label: 'UI Kit',
collapsible: true,
collapsed: true,
customProps: {
icon: 'TbComponents',
},
items: [
{
type: 'link',
label: 'Storybook',
href: 'https://storybook.twenty.com',
},
{
type: 'link',
label: 'Components',
href: '/ui-components/',
},
],
},
],
},
],
uiDocsSidebar: [{ type: 'autogenerated', dirName: 'ui-components' }],
};
module.exports = sidebars;

111
packages/twenty-docs/src/components/graphql-playground.tsx
View File

@@ -1,111 +0,0 @@
import React, { useEffect, useState } from 'react';
import BrowserOnly from '@docusaurus/BrowserOnly';
import { explorerPlugin } from '@graphiql/plugin-explorer';
import { Theme, useTheme } from '@graphiql/react';
import { createGraphiQLFetcher } from '@graphiql/toolkit';
import { SubDoc } from '@site/src/components/token-form';
import Layout from '@theme/Layout';
import { GraphiQL } from 'graphiql';
import Playground from './playground';
import explorerCss from '!css-loader!@graphiql/plugin-explorer/dist/style.css';
import graphiqlCss from '!css-loader!graphiql/graphiql.css';
const SubDocToPath = {
core: 'graphql',
metadata: 'metadata',
};
// Docusaurus does SSR for custom pages, but we need to load GraphiQL in the browser
const GraphQlComponent = ({ token, baseUrl, path }) => {
const explorer = explorerPlugin({
showAttribution: true,
});
const fetcher = createGraphiQLFetcher({
url: baseUrl + '/' + path,
});
// We load graphiql style using useEffect as it breaks remaining docs style
useEffect(() => {
const createAndAppendStyle = (css) => {
const styleElement = document.createElement('style');
styleElement.innerHTML = css.toString();
document.head.append(styleElement);
return styleElement;
};
const styleElement1 = createAndAppendStyle(graphiqlCss);
const styleElement2 = createAndAppendStyle(explorerCss);
return () => {
styleElement1.remove();
styleElement2.remove();
};
}, []);
if (!baseUrl || !token) {
return <></>;
}
return (
<div className="fullHeightPlayground">
<GraphiQL
plugins={[explorer]}
fetcher={fetcher}
defaultHeaders={JSON.stringify({ Authorization: `Bearer ${token}` })}
/>
</div>
);
};
const GraphQlPlayground = ({ subDoc }: { subDoc: SubDoc }) => {
const [token, setToken] = useState<string>();
const [baseUrl, setBaseUrl] = useState<string>();
const { setTheme } = useTheme();
useEffect(() => {
window.localStorage.setItem(
'graphiql:theme',
window.localStorage.getItem('theme') || 'light',
);
const handleThemeChange = (ev) => {
if (ev.key === 'theme') {
setTheme(ev.newValue as Theme);
}
};
window.addEventListener('storage', handleThemeChange);
return () => window.removeEventListener('storage', handleThemeChange);
}, []);
const children = (
<GraphQlComponent
token={token}
baseUrl={baseUrl}
path={SubDocToPath[subDoc]}
/>
);
return (
<Layout
title="GraphQL Playground"
description="GraphQL Playground for Twenty"
>
<BrowserOnly>
{() => (
<Playground
children={children}
setToken={setToken}
setBaseUrl={setBaseUrl}
subDoc={subDoc}
/>
)}
</BrowserOnly>
</Layout>
);
};
export default GraphQlPlayground;

76
packages/twenty-docs/src/components/playground.tsx
View File

@@ -1,76 +0,0 @@
import React, { useState } from 'react';
import { TbLoader2 } from 'react-icons/tb';
import TokenForm, { TokenFormProps } from '../components/token-form';
const Playground = ({
children,
setOpenApiJson,
setToken,
setBaseUrl,
subDoc,
}: Partial<React.PropsWithChildren> &
Omit<
TokenFormProps,
'isTokenValid' | 'setIsTokenValid' | 'setLoadingState'
>) => {
const [isTokenValid, setIsTokenValid] = useState(false);
const [isLoading, setIsLoading] = useState(false);
return (
<div style={{ position: 'relative' }}>
<TokenForm
setOpenApiJson={setOpenApiJson}
setToken={setToken}
setBaseUrl={setBaseUrl}
isTokenValid={isTokenValid}
setIsTokenValid={setIsTokenValid}
subDoc={subDoc}
setLoadingState={setIsLoading}
/>
{!isTokenValid && (
<div
style={{
position: 'absolute',
width: '100%',
height: 'calc(100vh - var(--ifm-navbar-height) - 45px)',
top: '45px',
display: 'flex',
flexFlow: 'column',
alignItems: 'center',
justifyContent: 'center',
zIndex: 2,
background: 'rgba(23,23,23, 0.2)',
}}
>
<div
style={{
width: '50%',
background: 'rgba(23,23,23, 0.8)',
color: 'white',
padding: '16px',
borderRadius: '8px',
}}
>
A token is required as APIs are dynamically generated for each
workspace based on their unique metadata. <br /> Generate your token
under{' '}
<a
className="link"
href="https://app.twenty.com/settings/developers"
>
Settings &gt; Developers
</a>
</div>
{isLoading && (
<div className="loader-container">
<TbLoader2 className="loader" />
</div>
)}
</div>
)}
{children}
</div>
);
};
export default Playground;

146
packages/twenty-docs/src/components/token-form.css
View File

@@ -1,146 +0,0 @@
.form-container {
height: 45px;
overflow: hidden;
border-bottom: 1px solid var(--ifm-color-secondary-light);
position: sticky;
top: var(--ifm-navbar-height);
padding: 0px 8px;
background: var(--ifm-color-secondary-contrast-background);
z-index: 2;
display: flex;
}
.form {
display: flex;
height: 45px;
gap: 10px;
width: 50%;
margin-left: auto;
flex: 0.7;
}
.link {
color: white;
text-decoration: underline;
position: relative;
font-weight: bold;
transition: color 0.3s ease;
&:hover {
color: #ddd;
}
}
.input {
padding: 6px;
margin: 5px 0 5px 0;
max-width: 460px;
width: 100%;
box-sizing: border-box;
background-color: #f3f3f3;
border: 1px solid #ddd;
border-radius: 4px;
padding-left:30px;
height: 32px;
}
.input[disabled] {
color: rgb(153, 153, 153)
}
[data-theme='dark'] .input {
background-color: #16233f;
}
.inputWrapper {
display: flex;
align-items: center;
flex: 1;
position: relative;
}
.inputIcon {
display: flex;
align-items: center;
position: absolute;
top: 0;
height: 100%;
padding: 5px;
color: #B3B3B3;
}
[data-theme='dark'] .inputIcon {
color: white;
}
.select {
padding: 6px;
margin: 5px 0 5px 0;
max-width: 460px;
width: 100%;
box-sizing: border-box;
background-color: #f3f3f3;
border: 1px solid #ddd;
border-radius: 4px;
height: 32px;
flex: 1;
}
[data-theme='dark'] .select {
background-color: #16233f;
}
.invalid {
border: 1px solid #f83e3e;
}
.token-invalid {
color: #f83e3e;
font-size: 12px;
}
.not-visible {
visibility: hidden;
}
.loader {
color: #16233f;
font-size: 2rem;
animation: animate 2s infinite;
}
[data-theme='dark'] .loader {
color: #a3c0f8;
}
@keyframes animate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(720deg);
}
}
.loader-container {
display: flex;
justify-content: center;
align-items: center;
height: 50px;
}
.backButton {
position: absolute;
display: flex;
left: 8px;
height: 100%;
align-items: center;
cursor: pointer;
color: #999999;
&:hover {
color: #16233f;
}
}

200
packages/twenty-docs/src/components/token-form.tsx
View File

@@ -1,200 +0,0 @@
import React, { useEffect, useState } from 'react';
import { TbApi, TbChevronLeft, TbLink } from 'react-icons/tb';
import { useHistory, useLocation } from '@docusaurus/router';
import { parseJson } from 'nx/src/utils/json';
import tokenForm from '!css-loader!./token-form.css';
export type SubDoc = 'core' | 'metadata';
export type TokenFormProps = {
setOpenApiJson?: (json: object) => void;
setToken?: (token: string) => void;
setBaseUrl?: (baseUrl: string) => void;
isTokenValid?: boolean;
setIsTokenValid?: (boolean) => void;
setLoadingState?: (boolean) => void;
subDoc?: SubDoc;
};
const TokenForm = ({
setOpenApiJson,
setToken,
setBaseUrl: submitBaseUrl,
isTokenValid,
setIsTokenValid,
subDoc,
setLoadingState,
}: TokenFormProps) => {
const history = useHistory();
const location = useLocation();
const [isLoading, setIsLoading] = useState(false);
const [locationSetting, setLocationSetting] = useState(
parseJson(localStorage.getItem('baseUrl'))?.locationSetting ?? 'production',
);
const [baseUrl, setBaseUrl] = useState(
parseJson(localStorage.getItem('baseUrl'))?.baseUrl ??
'https://api.twenty.com',
);
const token =
parseJson(localStorage.getItem('TryIt_securitySchemeValues'))?.bearerAuth ??
'';
const updateLoading = (loading: boolean) => {
setIsLoading(loading);
setLoadingState(loading);
};
const updateToken = async (event: React.ChangeEvent<HTMLInputElement>) => {
localStorage.setItem(
'TryIt_securitySchemeValues',
JSON.stringify({ bearerAuth: event.target.value }),
);
await submitToken(event.target.value);
};
const updateBaseUrl = (baseUrl: string, locationSetting: string) => {
let url: string;
if (locationSetting === 'production') {
url = 'https://api.twenty.com';
} else if (locationSetting === 'demo') {
url = 'https://api-demo.twenty.com';
} else if (locationSetting === 'localhost') {
url = 'http://localhost:3000';
} else {
url = baseUrl?.endsWith('/')
? baseUrl.substring(0, baseUrl.length - 1)
: baseUrl;
}
setBaseUrl(url);
setLocationSetting(locationSetting);
submitBaseUrl?.(url);
localStorage.setItem(
'baseUrl',
JSON.stringify({ baseUrl: url, locationSetting }),
);
};
const validateToken = (openApiJson) => {
setIsTokenValid(!!openApiJson.tags);
};
const getJson = async (token: string) => {
updateLoading(true);
return await fetch(baseUrl + '/open-api/' + (subDoc ?? 'core'), {
headers: { Authorization: `Bearer ${token}` },
})
.then((res) => res.json())
.then((result) => {
validateToken(result);
updateLoading(false);
return result;
})
.catch(() => {
updateLoading(false);
setIsTokenValid(false);
});
};
const submitToken = async (token) => {
if (isLoading) return;
const json = await getJson(token);
setToken && setToken(token);
setOpenApiJson && setOpenApiJson(json);
};
useEffect(() => {
(async () => {
updateBaseUrl(baseUrl, locationSetting);
await submitToken(token);
})();
}, []);
// We load playground style using useEffect as it breaks remaining docs style
useEffect(() => {
const styleElement = document.createElement('style');
styleElement.innerHTML = tokenForm.toString();
document.head.append(styleElement);
return () => styleElement.remove();
}, []);
return (
<div className="form-container">
<form className="form">
<div className="backButton" onClick={() => history.goBack()}>
<TbChevronLeft size={18} />
<span>Back</span>
</div>
<div className="inputWrapper">
<select
className="select"
onChange={(event) => {
updateBaseUrl(baseUrl, event.target.value);
}}
value={locationSetting}
>
<option value="production">Production API</option>
<option value="demo">Demo API</option>
<option value="localhost">Localhost</option>
<option value="other">Other</option>
</select>
</div>
<div className="inputWrapper">
<div className="inputIcon" title="Base URL">
<TbLink size={20} />
</div>
<input
className={'input'}
type="text"
readOnly={isLoading}
disabled={locationSetting !== 'other'}
placeholder="Base URL"
value={baseUrl}
onChange={(event) =>
updateBaseUrl(event.target.value, locationSetting)
}
onBlur={() => submitToken(token)}
/>
</div>
<div className="inputWrapper">
<div className="inputIcon" title="Api Key">
<TbApi size={20} />
</div>
<input
className={!isTokenValid && !isLoading ? 'input invalid' : 'input'}
type="text"
readOnly={isLoading}
placeholder="API Key"
defaultValue={token}
onChange={updateToken}
/>
</div>
<div className="inputWrapper" style={{ maxWidth: '100px' }}>
<select
className="select"
onChange={(event) =>
history.replace(
'/' +
location.pathname.split('/').at(-2) +
'/' +
event.target.value,
)
}
value={location.pathname.split('/').at(-1)}
>
<option value="core">Core</option>
<option value="metadata">Metadata</option>
</select>
</div>
</form>
</div>
);
};
export default TokenForm;

350
packages/twenty-docs/src/css/custom.css
View File

@@ -1,350 +0,0 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');
/**
* Any CSS included here will be global. The classic template
* bundles Infima by default. Infima is a CSS framework designed to
* work well for content-centric websites.
*/
/* You can override the default Infima variables here. */
:root {
--ifm-global-radius: 8px;
--ifm-code-font-size: 14px;
--ifm-font-family-base: "Inter",BlinkMacSystemFont,-apple-system,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Helvetica","Arial",sans-serif;
--ifm-font-family-monospace: 'Roboto Mono',SFMono-Regular, Menlo, Monaco, Consolas,'Liberation Mono', 'Courier New', monospace;
--ifm-font-size-base: 14px;
--ifm-base-spacing: 14px;
--ifm-line-height-base: 145%;
--ifm-font-weight-base: var(--twenty-body-regular-font-weight);
--ifm-color-primary: #11181c;
--ifm-code-font-size: 95%;
--docsearch-key-gradient: none !important;
--docsearch-key-shadow: 0 0 0 0.5px var(--docsearch-muted-color) !important;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
--ifm-toc-padding-vertical: 0.5rem;
--ifm-breadcrumb-border-radius: 8px;
--ifm-navbar-link-color: #687076;
--ifm-link-decoration: underline;
--ifm-heading-font-weight: 600;
--ifm-h1-font-size: 1.7rem !important;
--ifm-h2-font-size: 1.25rem !important;
--ifm-h3-font-size: 1rem !important;
--ifm-h4-font-size: 0.875rem !important;
--ifm-h5-font-size: 0.85rem !important;
--ifm-spacing-horizontal: 2rem;
--ifm-menu-link-padding-vertical: 0.2rem;
--list-items-border-color: #ebebeb;
--category-icon-background-color: #ebebeb;
--category-icon-border-color: #d6d6d6;
--level-1-color: #B3B3B3;
--dark-docsearch-hit-title-color: #444950;
--dark-docsearch-hit-mark-color: #11181c;
--dark-docsearch-hit-general-color: #969faf;
--light-docsearch-hit-title-color: #bec3c9;
--light-docsearch-hit-mark-color: #ffffff;
--light-docsearch-hit-general-color: #7f8497;
}
.markdown > h1 {
--ifm-h1-font-size: 1.7rem !important;
}
.markdown > h2 {
--ifm-h2-font-size: 1.25rem;
}
.markdown > h3 {
--ifm-h3-font-size: 1rem;
}
.markdown > h4 {
--ifm-h4-font-size: 0.875rem;
}
.markdown > h5 {
--ifm-h5-font-size: 0.85rem;
}
/* For readability concerns, you should choose a lighter palette in dark mode. */
[data-theme='dark'] {
--ifm-color-primary: #fff;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
--list-items-border-color: #292929;
--category-icon-background-color: #292929;
--category-icon-border-color: #333333;
--level-1-color: #666666;
}
body {
margin: 0;
font-family: 'Inter';
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
html {
font-size: 14px;
}
.container {
padding-top: 48px !important;
}
.DocSearch-Button {
margin: inherit !important;
height: 32px !important;
border-radius: 0 !important;
margin-top: 12px !important;
background: inherit !important;
color: var(--ifm-navbar-link-color) !important;
:hover {
box-shadow: none !important;
}
}
.DocSearch-Button-Placeholder {
padding: 0 100px 0 6px !important;
}
.DocSearch-Button {
display: none !important;
}
.DocSearch-Button-Key {
height: 14px !important;
width: 14px !important;
font-size: 9px !important;
padding: none !important;
top: inherit !important;
}
.DocSearch-Button-Keys {
min-width: inherit !important;
}
.search-menu-item {
padding-top: 12px;
}
.menu__link:hover > .DocSearch-Button-Keys {
display: flex !important;
}
.theme-edit-this-page {
font-size: 70%;
}
.theme-edit-this-page svg {
height: 14px;
width: 14px;
}
li.coming-soon {
display: flex;
}
li.coming-soon a {
display: flex;
justify-content: space-between;
pointer-events: none;
cursor: default;
}
a.menu__link, a.navbar__item {
text-decoration: none;
font-size: 13px;
}
.menu__link--external {
align-items: center;
}
li.coming-soon a::after {
float: right;
content: "soon";
border-color: #373737;
border: 1px solid;
border-radius: 4px;
text-align: center;
float:right;
padding-left: 6px;
padding-right: 6px;
padding-bottom: 2px;
font-size: 80%;
}
.theme-doc-sidebar-item-category-level-1 > .menu__link {
font-size: 12px;
color: var(--level-1-color);
}
.theme-doc-sidebar-item-category-level-1 > .menu__link:hover{
color:inherit
}
.menu__list-item--level1 > .menu__link--active {
color: inherit;
}
.menu__list-item--level1 > .menu__link--active > .icon-and-text {
color: black;
}
[data-theme='dark'] .menu__list-item--level1 > .menu__link--active > .icon-and-text {
color: white;
}
[data-theme='dark'] ul > .DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-title {
color: var(--dark-docsearch-hit-title-color) !important;
}
[data-theme='dark'] ul > .DocSearch-Hit[aria-selected='true'] mark {
color: var(--dark-docsearch-hit-mark-color) !important;
}
[data-theme='dark'] ul > .DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-action,
[data-theme='dark'] ul > .DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-icon,
[data-theme='dark'] ul > .DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-path,
[data-theme='dark'] ul > .DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-text,
[data-theme='dark'] ul > .DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-Tree {
color: var(--dark-docsearch-hit-general-color) !important;
}
[data-theme='light'] ul > .DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-title {
color: var(--light-docsearch-hit-title-color) !important;
}
[data-theme='light'] ul > .DocSearch-Hit[aria-selected='true'] mark {
color: var(--light-docsearch-hit-mark-color) !important;
}
[data-theme='light'] ul > .DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-action,
[data-theme='light'] ul > .DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-icon,
[data-theme='light'] ul > .DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-path,
[data-theme='light'] ul > .DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-text,
[data-theme='light'] ul > .DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-Tree {
color: var(--light-docsearch-hit-general-color) !important;
}
[data-theme='light'] .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 {
background: inherit;
}
.theme-doc-sidebar-item-category-level-1 {
padding-top: 1.5rem;
}
.theme-doc-sidebar-item-category-level-2 {
cursor: pointer;
}
.theme-doc-sidebar-item-category-level-2 .menu__list {
border-left: 1px solid var(--list-items-border-color);
margin-left: var(--ifm-menu-link-padding-horizontal);
}
.menu__list-item--home {
font-size: 13px;
margin: 1.5rem 0;
}
.theme-doc-sidebar-item-link-level-1.menu__list-item--root .sidebar-item-icon {
background-clip: content-box;
background-color: var(--category-icon-background-color);
border: 1px solid var(--category-icon-border-color);
border-radius: 8px;
padding: 3px;
margin-right: 16px;
}
.theme-doc-sidebar-item-link-level-1.menu__list-item--root .sidebar-item-icon svg {
height: 22px;
width: 22px;
padding: 1px;
}
.sidebar-item-icon {
display: flex;
vertical-align: center;
margin-right: 0.5rem;
}
.icon-and-text {
display: flex;
align-items: center;
}
.fullHeightPlayground {
height: calc(100vh - var(--ifm-navbar-height) - 45px);
}
.display-none {
display: none;
}
.table-of-contents__link {
text-decoration: none;
}
a.table-of-contents__link:hover{
text-decoration: underline;
}
.docs-image {
max-width: 100%;
display: flex;
align-self: center;
width: 80%;
}
.pagination-nav__link{
text-decoration: none;
}
.tabs-container {
padding: 20px;
}
.card{
text-decoration: none;
border-radius: 8px !important;
margin-right: -28px;
}
.header-github-link:hover {
opacity: 0.6;
}
.hidden {
display: none !important;
}
.navbar__title {
color: var(--ifm-link-color);
font-family: 'IBM Plex Mono', 'Courier New', Courier, monospace;
font-size: 11px;
}
.navbar__brand {
text-decoration: none;
}
.navbar__link {
color: var(--ifm-link-color);
}
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap');

9
packages/twenty-docs/src/pages/graphql/core.tsx
View File

@@ -1,9 +0,0 @@
import React from 'react';
import GraphQlPlayground from '../../components/graphql-playground';
const CoreGraphql = () => {
return <GraphQlPlayground subDoc={'core'} />;
};
export default CoreGraphql;

9
packages/twenty-docs/src/pages/graphql/metadata.tsx
View File

@@ -1,9 +0,0 @@
import React from 'react';
import GraphQlPlayground from '../../components/graphql-playground';
const CoreGraphql = () => {
return <GraphQlPlayground subDoc={'metadata'} />;
};
export default CoreGraphql;

55
packages/twenty-docs/src/pages/rest-api/core.tsx
View File

@@ -1,55 +0,0 @@
import React, { useEffect, useState } from 'react';
import BrowserOnly from '@docusaurus/BrowserOnly';
import { API } from '@stoplight/elements';
import Layout from '@theme/Layout';
import Playground from '../../components/playground';
import spotlightTheme from '!css-loader!@stoplight/elements/styles.min.css';
const RestApiComponent = ({ openApiJson }) => {
// We load spotlightTheme style using useEffect as it breaks remaining docs style
useEffect(() => {
const styleElement = document.createElement('style');
styleElement.innerHTML = spotlightTheme.toString();
document.head.append(styleElement);
return () => styleElement.remove();
}, []);
return (
<div
style={{
height: 'calc(100vh - var(--ifm-navbar-height) - 45px)',
overflow: 'auto',
}}
>
<API apiDescriptionDocument={JSON.stringify(openApiJson)} router="hash" />
</div>
);
};
const restApi = () => {
const [openApiJson, setOpenApiJson] = useState({});
const children = <RestApiComponent openApiJson={openApiJson} />;
return (
<Layout
title="REST API Playground"
description="REST API Playground for Twenty"
>
<BrowserOnly>
{() => (
<Playground
children={children}
setOpenApiJson={setOpenApiJson}
subDoc="core"
/>
)}
</BrowserOnly>
</Layout>
);
};
export default restApi;

55
packages/twenty-docs/src/pages/rest-api/metadata.tsx
View File

@@ -1,55 +0,0 @@
import React, { useEffect, useState } from 'react';
import BrowserOnly from '@docusaurus/BrowserOnly';
import { API } from '@stoplight/elements';
import Layout from '@theme/Layout';
import Playground from '../../components/playground';
import spotlightTheme from '!css-loader!@stoplight/elements/styles.min.css';
const RestApiComponent = ({ openApiJson }) => {
// We load spotlightTheme style using useEffect as it breaks remaining docs style
useEffect(() => {
const styleElement = document.createElement('style');
styleElement.innerHTML = spotlightTheme.toString();
document.head.append(styleElement);
return () => styleElement.remove();
}, []);
return (
<div
style={{
height: 'calc(100vh - var(--ifm-navbar-height) - 45px)',
overflow: 'auto',
}}
>
<API apiDescriptionDocument={JSON.stringify(openApiJson)} router="hash" />
</div>
);
};
const restApi = () => {
const [openApiJson, setOpenApiJson] = useState({});
const children = <RestApiComponent openApiJson={openApiJson} />;
return (
<Layout
title="REST API Playground"
description="REST API Playground for Twenty"
>
<BrowserOnly>
{() => (
<Playground
children={children}
setOpenApiJson={setOpenApiJson}
subDoc="metadata"
/>
)}
</BrowserOnly>
</Layout>
);
};
export default restApi;

97
packages/twenty-docs/src/theme/DocCard/index.js
View File

@@ -1,97 +0,0 @@
import React from 'react';
import isInternalUrl from '@docusaurus/isInternalUrl';
import Link from '@docusaurus/Link';
import {
findFirstCategoryLink,
useDocById,
} from '@docusaurus/theme-common/internal';
import { translate } from '@docusaurus/Translate';
import clsx from 'clsx';
import * as icons from '../icons';
import styles from './styles.module.css';
function CardContainer({ href, children }) {
return (
<Link
href={href}
className={clsx('card padding--lg', styles.cardContainer)}
>
{children}
</Link>
);
}
function CardLayout({ href, icon, title, description }) {
return (
<CardContainer href={href}>
<h2 className={clsx('text--truncate', styles.cardTitle)} title={title}>
<span className={styles.icon}>
{typeof icon === 'function' ? icon() : icon}
</span>{' '}
{title}
</h2>
{description && (
<p
className={clsx('text--truncate', styles.cardDescription)}
title={description}
>
{description}
</p>
)}
</CardContainer>
);
}
function CardCategory({ item }) {
const href = findFirstCategoryLink(item);
// Unexpected: categories that don't have a link have been filtered upfront
if (!href) {
return null;
}
return (
<CardLayout
href={href}
icon="🗃️"
title={item.label}
description={
item.description ??
translate(
{
message: '{count} items',
id: 'theme.docs.DocCard.categoryDescription',
description:
'The default description for a category card in the generated index about how many items this category includes',
},
{ count: item.items.length },
)
}
/>
);
}
function CardLink({ item }) {
const customIcon = item.customProps.icon;
const icon = icons[customIcon] || (isInternalUrl(item.href) ? '📄️' : '🔗');
const doc = useDocById(item.docId ?? undefined);
return (
<CardLayout
href={item.href}
icon={icon}
title={item.label}
description={item.description ?? doc?.description}
/>
);
}
export default function DocCard({ item }) {
switch (item.type) {
case 'link':
return <CardLink item={item} />;
case 'category':
return <CardCategory item={item} />;
default:
throw new Error(`unknown item type ${JSON.stringify(item)}`);
}
}

35
packages/twenty-docs/src/theme/DocCard/styles.module.css
View File

@@ -1,35 +0,0 @@
.cardContainer {
--ifm-link-color: var(--ifm-color-emphasis-800);
--ifm-link-hover-color: var(--ifm-color-emphasis-700);
--ifm-link-hover-decoration: none;
border: 1px solid var(--ifm-color-emphasis-200);
transition: all var(--ifm-transition-fast) ease;
transition-property: border, box-shadow;
}
.cardContainer:hover {
border-color: var(--ifm-color-primary);
box-shadow: 0 3px 6px 0 rgb(0 0 0 / 20%);
}
.cardContainer *:last-child {
margin-bottom: 0px;
}
.cardTitle {
font-size: 1.2rem;
display: flex
}
.cardDescription {
font-size: 0.8rem;
}
.icon {
font-size: 1.5rem;
padding-right: 0.5rem;
}

103
packages/twenty-docs/src/theme/DocSidebarItem/Category/index.js
View File

@@ -1,103 +0,0 @@
import Link from "@docusaurus/Link";
import isInternalUrl from "@docusaurus/isInternalUrl";
import {
Collapsible,
ThemeClassNames,
useCollapsible,
} from "@docusaurus/theme-common";
import { isActiveSidebarItem } from "@docusaurus/theme-common/internal";
import DocSidebarItems from "@theme/DocSidebarItems";
import IconExternalLink from "@theme/Icon/ExternalLink";
import clsx from "clsx";
import React from "react";
import * as icons from "../../icons";
const DocSidebarItemCategory = ({
item,
onItemClick,
activePath,
level,
index,
...props
}) => {
const {
href,
label,
className,
collapsible,
autoAddBaseUrl,
customProps = {},
items,
} = item;
const isActive = isActiveSidebarItem(item, activePath);
const isInternalLink = isInternalUrl(href);
const IconComponent = customProps?.icon ? icons[customProps.icon] : undefined;
const { collapsed, setCollapsed } = useCollapsible({
initialState: () => collapsible && !isActive && item.collapsed,
});
return (
<li
className={clsx(
ThemeClassNames.docs.docSidebarItemCategory,
ThemeClassNames.docs.docSidebarItemCategoryLevel(level),
"menu__list-item",
`menu__list-item--level${level}`,
className
)}
key={label}
>
<Link
className={clsx("menu__link", {
"menu__link--active": isActive,
"menu__link--external": !!href && !isInternalLink,
})}
autoAddBaseUrl={autoAddBaseUrl}
aria-current={isActive ? "page" : undefined}
aria-expanded={collapsible ? !collapsed : undefined}
to={href}
onClick={(e) => {
onItemClick?.(item);
if (!collapsible) return;
if (href) {
setCollapsed(false);
return;
}
e.preventDefault();
setCollapsed((previousCollapsed) => !previousCollapsed);
}}
{...props}
>
{IconComponent ? (
<span className="icon-and-text">
<i className="sidebar-item-icon">
<IconComponent />
</i>
{label}
</span>
) : (
label
)}
{!!href && !isInternalLink && <IconExternalLink />}
</Link>
{!customProps.isSidebarRoot && (
<Collapsible lazy as="ul" className="menu__list" collapsed={collapsed}>
<DocSidebarItems
items={items}
tabIndex={collapsed ? -1 : 0}
onItemClick={onItemClick}
activePath={activePath}
level={level + 1}
/>
</Collapsible>
)}
</li>
);
};
export default DocSidebarItemCategory;

62
packages/twenty-docs/src/theme/DocSidebarItem/Link/index.js
View File

@@ -1,62 +0,0 @@
import Link from "@docusaurus/Link";
import isInternalUrl from "@docusaurus/isInternalUrl";
import { ThemeClassNames } from "@docusaurus/theme-common";
import { isActiveSidebarItem } from "@docusaurus/theme-common/internal";
import IconExternalLink from "@theme/Icon/ExternalLink";
import clsx from "clsx";
import React from "react";
import * as icons from "../../icons";
const DocSidebarItemLink = ({
item,
onItemClick,
activePath,
level,
index,
...props
}) => {
const { href, label, className, autoAddBaseUrl, customProps = {} } = item;
const isActive = isActiveSidebarItem(item, activePath);
const isInternalLink = isInternalUrl(href);
const IconComponent = customProps?.icon ? icons[customProps.icon] : null;
return (
<li
className={clsx(
ThemeClassNames.docs.docSidebarItemLink,
ThemeClassNames.docs.docSidebarItemLinkLevel(level),
"menu__list-item",
`menu__list-item--level${level}`,
{ "menu__list-item--root": customProps.isSidebarRoot },
className
)}
key={label}
>
<Link
className={clsx("menu__link", {
"menu__link--active": isActive,
"menu__link--external": !isInternalLink,
})}
autoAddBaseUrl={autoAddBaseUrl}
aria-current={isActive ? "page" : undefined}
to={href}
{...(isInternalLink && {
onClick: onItemClick ? () => onItemClick(item) : undefined,
})}
{...props}
>
<span className="icon-and-text">
{IconComponent && (
<i className="sidebar-item-icon">
<IconComponent size={customProps.iconSize} />
</i>
)}
{label}
</span>
{!isInternalLink && <IconExternalLink />}
</Link>
</li>
);
};
export default DocSidebarItemLink;

65
packages/twenty-docs/src/theme/DocSidebarItem/index.js
View File

@@ -1,65 +0,0 @@
import React from 'react';
import { TbSearch } from 'react-icons/tb';
import DocSidebarItem from '@theme-original/DocSidebarItem';
import SearchBar from '@theme-original/SearchBar';
const CustomComponents = {
'search-bar': () => {
const openSearchModal = () => {
const searchInput = document.querySelector('#search-bar');
if (searchInput) {
searchInput.focus();
}
const event = new KeyboardEvent('keydown', {
key: 'k',
code: 'KeyK',
keyCode: 75,
which: 75,
// If the shortcut is Cmd+K on Mac or Ctrl+K on Windows/Linux, set the respective key to true:
metaKey: true, // for Cmd+K (Mac)
// ctrlKey: true, // for Ctrl+K (Windows/Linux)
bubbles: true,
});
// Dispatch the event
window.dispatchEvent(event);
};
return (
<>
<li className="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--level2 search-menu-item">
<SearchBar style={{ display: 'none' }} />
<a className="menu__link" onClick={openSearchModal}>
<span className="icon-and-text">
<i className="sidebar-item-icon">
<TbSearch />
</i>
Search
</span>
<span
className="DocSearch-Button-Keys"
style={{ paddingLeft: '10px', display: 'none' }}
>
<kbd className="DocSearch-Button-Key">⌘</kbd>
<kbd className="DocSearch-Button-Key">K</kbd>
</span>
</a>
</li>
</>
);
},
};
export default function DocSidebarItemWrapper(props) {
const CustomComponent = CustomComponents[props.item?.customProps?.type];
if (CustomComponent) {
return <CustomComponent {...props.item?.customProps?.props} />;
}
return (
<>
<DocSidebarItem {...props} />
</>
);
}

10
packages/twenty-docs/src/theme/Icon/DarkMode/index.js
View File

@@ -1,10 +0,0 @@
import React from 'react';
import { TbMoon } from 'react-icons/tb';
import { useColorMode } from '@docusaurus/theme-common';
const IconDarkMode = (props) => {
const { colorMode } = useColorMode();
return colorMode === 'dark' ? <TbMoon className="navbar__link" /> : <></>;
};
export default IconDarkMode;

5
packages/twenty-docs/src/theme/Icon/Home/index.js
View File

@@ -1,5 +0,0 @@
import React from "react";
import { TbHome } from "react-icons/tb";
const IconHome = (props) => <TbHome size={14} />;
export default IconHome;

10
packages/twenty-docs/src/theme/Icon/LightMode/index.js
View File

@@ -1,10 +0,0 @@
import React from 'react';
import { TbSun } from 'react-icons/tb';
import { useColorMode } from '@docusaurus/theme-common';
const IconLightMode = (props) => {
const { colorMode } = useColorMode();
return colorMode === 'light' ? <TbSun className="navbar__link" /> : <></>;
};
export default IconLightMode;

5
packages/twenty-docs/src/theme/Navbar/Search/index.js
View File

@@ -1,5 +0,0 @@
import React from 'react';
export default function SearchWrapper(props) {
return <></>;
}

24
packages/twenty-docs/src/theme/NavbarItem/ComponentTypes.js
View File

@@ -1,24 +0,0 @@
import GithubLink from '@site/src/theme/NavbarItem/GithubLink';
import DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
import DocNavbarItem from '@theme/NavbarItem/DocNavbarItem';
import DocSidebarNavbarItem from '@theme/NavbarItem/DocSidebarNavbarItem';
import DocsVersionDropdownNavbarItem from '@theme/NavbarItem/DocsVersionDropdownNavbarItem';
import DocsVersionNavbarItem from '@theme/NavbarItem/DocsVersionNavbarItem';
import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem';
import HtmlNavbarItem from '@theme/NavbarItem/HtmlNavbarItem';
import LocaleDropdownNavbarItem from '@theme/NavbarItem/LocaleDropdownNavbarItem';
import SearchNavbarItem from '@theme/NavbarItem/SearchNavbarItem';
const ComponentTypes = {
default: DefaultNavbarItem,
localeDropdown: LocaleDropdownNavbarItem,
search: SearchNavbarItem,
dropdown: DropdownNavbarItem,
html: HtmlNavbarItem,
doc: DocNavbarItem,
docSidebar: DocSidebarNavbarItem,
docsVersion: DocsVersionNavbarItem,
docsVersionDropdown: DocsVersionDropdownNavbarItem,
'custom-github-link': GithubLink,
};
export default ComponentTypes;

21
packages/twenty-docs/src/theme/NavbarItem/GithubLink.tsx
View File

@@ -1,21 +0,0 @@
import React from 'react';
import { TbBrandGithub } from 'react-icons/tb';
const GithubLink = () => {
return (
<a
className="navbar__item navbar__link"
href="https://github.com/twentyhq/twenty"
target="_blank"
rel="noreferrer noopener"
style={{
display: 'flex',
verticalAlign: 'middle',
}}
>
<TbBrandGithub />
</a>
);
};
export default GithubLink;

29
packages/twenty-docs/src/theme/OptionTable/index.js
View File

@@ -1,29 +0,0 @@
import styles from "./style.module.css";
import React from "react";
export default function OptionTable({ options }) {
return (
<div className={styles.container}>
<table className={styles.optionsTable}>
<thead className={styles.tableHeader}>
<tr className={styles.tableHeaderRow}>
<th className={styles.tableHeaderCell}>Variable</th>
<th className={styles.tableHeaderCell}>Example</th>
<th className={styles.tableHeaderCell}>Description</th>
</tr>
</thead>
<tbody className={styles.tableBody}>
{options.map(([option, example, description]) => (
<tr key={option} className={styles.tableRow}>
<td className={styles.tableOptionCell}>
{option}
</td>
<td className={styles.tableDescriptionCell}>{example}</td>
<td className={styles.tableDescriptionCell}>{description}</td>
</tr>
))}
</tbody>
</table>
</div>
);
}

87
packages/twenty-docs/src/theme/OptionTable/style.module.css
View File

@@ -1,87 +0,0 @@
.container {
mask-image: linear-gradient(
to right,
transparent 0.8em,
white 1.5em,
white calc(100% - 1.5em),
transparent calc(100% - 0.8em)
);
overflow-x: auto;
overscroll-behavior-x: contain;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-bottom: 1rem;
margin-bottom: 1rem;
margin-top: 1.5rem;
margin-left: -1.5rem;
margin-right: -1.5rem;
}
.container::-webkit-scrollbar {
appearance: none;
}
.optionsTable {
width: 100%;
font-size: 0.875rem;
line-height: 1.25rem;
border-collapse: collapse;
display: inline-table;
}
.tableHeader {
background: transparent;
}
.tableHeaderRow {
padding-top: 1rem;
padding-bottom: 1rem;
border-bottom-width: 1px;
text-align: left;
border-top: none;
}
.tableHeaderCell {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
font-weight: 600;
border-top: none;
border-left: none;
border-right: none;
}
.tableBody {
color: var(--ifm-color-content);
vertical-align: baseline;
}
.tableRow {
border-bottom-width: 1px;
border-left: none;
border-right: none;
border-color: var(--ifm-color-content);
}
.tableOptionCell {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
monospace;
font-size: 0.75rem;
line-height: 1rem;
font-weight: 600;
line-height: 1.5rem;
white-space: pre;
color: var(--ifm-color-primary-light);
border-right: none;
border-left: none;
}
.tableDescriptionCell {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-left: 1.5rem;
border-right: none;
border-left: none;
}

79
packages/twenty-docs/src/theme/icons.js
View File

@@ -1,79 +0,0 @@
export {
TbAddressBook,
TbApi,
TbApps,
TbAppWindow,
TbArrowBackUp,
TbArrowBigRight,
TbArticle,
TbAugmentedReality,
TbBolt,
TbBrandDocker,
TbBrandFigma,
TbBrandGithub,
TbBrandGraphql,
TbBrandVscode,
TbBrandWindows,
TbBrandZapier,
TbBug,
TbBugOff,
TbChartDots,
TbCheck,
TbCheckbox,
TbChecklist,
TbChevronLeft,
TbCircleCheckFilled,
TbCircleDot,
TbCloud,
TbColorFilter,
TbColorPicker,
TbComponents,
TbDeviceDesktop,
TbExclamationCircle,
TbEyeglass,
TbFaceIdError,
TbFlag,
TbFolder,
TbForms,
TbIcons,
TbInfoCircle,
TbInputSearch,
TbKeyboard,
TbLayoutGrid,
TbLayoutList,
TbLink,
TbLoader2,
TbMenu,
TbNavigation,
TbNote,
TbNotebook,
TbPaint,
TbPencil,
TbPill,
TbPlus,
TbRectangle,
TbRocket,
TbSchema,
TbScript,
TbSelect,
TbServer,
TbSlideshow,
TbSquareChevronsRight,
TbSquareRoundedPlusFilled,
TbTable,
TbTag,
TbTargetArrow,
TbTemplate,
TbTerminal,
TbTerminal2,
TbTextPlus,
TbTextSize,
TbToggleRight,
TbTooltip,
TbTopologyStar,
TbUpload,
TbUsers,
TbVariable,
TbVocabulary,
TbZoomQuestion,
} from 'react-icons/tb';

109
packages/twenty-docs/src/ui/SandpackEditor.js
View File

@@ -1,109 +0,0 @@
import { SandpackProvider, SandpackLayout, SandpackCodeEditor, SandpackPreview } from "@codesandbox/sandpack-react";
import uiModule from "!!raw-loader!@site/src/ui/generated/index.cjs";
import uiComponentsCSS from '!!raw-loader!@site/src/ui/uiComponents.css'
export const SandpackEditor = ({ availableComponentPaths, componentCode}) => {
const fakePackagesJson = availableComponentPaths.reduce((acc, componentPath, index) => {
acc[`/node_modules/${componentPath}/package.json`] = {
hidden: true,
code: JSON.stringify({
name: componentPath,
main: "./index.js",
}),
};
return acc;
}, {});
const fakeIndexesJs = availableComponentPaths.reduce((acc, componentPath, index) => {
acc[`/node_modules/${componentPath}/index.js`] = {
hidden: true,
code: uiModule,
};
return acc;
}
, {});
return (
<SandpackProvider
files={{
"/index.js": {
hidden: true,
code: `
import React, { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App";
const root = createRoot(document.getElementById("root"));
root.render(
<StrictMode>
<App />
</StrictMode>
);`,
},
"/App.tsx": {
hidden: true,
code: `import { ThemeProvider } from "@emotion/react";
import { lightTheme, darkTheme } from "${availableComponentPaths[0]}";
import { MyComponent } from "./MyComponent.tsx";
import './uiComponents.css'
console.log("lightTheme", lightTheme);
export default function App() {
return (<ThemeProvider theme={lightTheme}>
<MyComponent />
</ThemeProvider>);
};`,
},
"/MyComponent.tsx": {
code: componentCode,
},
"/uiComponents.css": {
code: uiComponentsCSS,
hidden: true,
},
...fakePackagesJson,
...fakeIndexesJs,
}}
customSetup={{
entry: "/index.js",
dependencies: {
react: "latest",
"react-dom": "latest",
"react-scripts": "^5.0.0",
"@emotion/react": "^11.10.6",
"@emotion/styled": "latest",
"@tabler/icons-react": "latest",
"hex-rgb": "latest",
"framer-motion": "latest",
uuid: "latest",
"react-tooltip": "latest",
"react-router-dom": "latest",
"@sniptt/guards": "latest",
"react-router": "latest",
"@apollo/client": "latest",
graphql: "latest",
"react-textarea-autosize": "latest",
"react-hotkeys-hook": "latest",
recoil: "latest",
"@floating-ui/react": "latest",
"ts-key-enum": "latest",
"deep-equal": "latest",
"lodash.debounce": "latest",
"react-loading-skeleton": "latest",
"zod": "latest",
"@blocknote/react": 'latest',
'react-responsive': 'latest'
},
}}
>
<SandpackLayout>
<SandpackCodeEditor style={{ minWidth: "100%", height: "auto" }} />
<SandpackPreview style={{ minWidth: "100%", height: "auto" }} />
</SandpackLayout>
</SandpackProvider>
);
};

12
packages/twenty-docs/src/ui/display/animatedCheckmarkCode.js
View File

@@ -1,12 +0,0 @@
import { AnimatedCheckmark } from 'twenty-ui';
export const MyComponent = () => {
return (
<AnimatedCheckmark
isAnimating={true}
color="green"
duration={0.5}
size={30}
/>
);
};

22
packages/twenty-docs/src/ui/display/appTooltipCode.js
View File

@@ -1,22 +0,0 @@
import { AppTooltip } from "@/ui/display/tooltip/AppTooltip";
export const MyComponent = () => {
return (
<>
<p id="hoverText" style={{ display: "inline-block" }}>
Customer Insights
</p>
<AppTooltip
className
anchorSelect="#hoverText"
content="Explore customer behavior and preferences"
delayHide={0}
offset={6}
noArrow={false}
isOpen={true}
place="bottom"
positionStrategy="absolute"
/>
</>
);
};

5
packages/twenty-docs/src/ui/display/checkmarkCode.js
View File

@@ -1,5 +0,0 @@
import { Checkmark } from 'twenty-ui';
export const MyComponent = () => {
return <Checkmark />;
};

17
packages/twenty-docs/src/ui/display/chipCode.js
View File

@@ -1,17 +0,0 @@
import { Chip } from 'twenty-ui';
export const MyComponent = () => {
return (
<Chip
size="large"
label="Clickable Chip"
clickable={true}
variant="highlighted"
accent="text-primary"
leftComponent
rightComponent
maxWidth="200px"
className
/>
);
};

18
packages/twenty-docs/src/ui/display/entityChipCode.js
View File

@@ -1,18 +0,0 @@
import { BrowserRouter as Router } from 'react-router-dom';
import { EntityChip, IconTwentyStar } from 'twenty-ui';
export const MyComponent = () => {
return (
<Router>
<EntityChip
linkToEntity="/entity-link"
entityId="entityTest"
name="Entity name"
pictureUrl=""
avatarType="rounded"
variant="regular"
LeftIcon={IconTwentyStar}
/>
</Router>
);
};

5
packages/twenty-docs/src/ui/display/iconAddressBookCode.js
View File

@@ -1,5 +0,0 @@
import { IconAddressBook } from 'twenty-ui';
export const MyComponent = () => {
return <IconAddressBook size={24} stroke={2} />;
};

8
packages/twenty-docs/src/ui/display/overflowingTextWithTooltipCode.js
View File

@@ -1,8 +0,0 @@
import { OverflowingTextWithTooltip } from 'twenty-ui';
export const MyComponent = () => {
const crmTaskDescription =
'Follow up with client regarding their recent product inquiry. Discuss pricing options, address any concerns, and provide additional product information. Record the details of the conversation in the CRM for future reference.';
return <OverflowingTextWithTooltip text={crmTaskDescription} />;
};

5
packages/twenty-docs/src/ui/display/soonPillCode.js
View File

@@ -1,5 +0,0 @@
import { SoonPill } from "@/ui/display/pill/components/SoonPill";
export const MyComponent = () => {
return <SoonPill />;
};

5
packages/twenty-docs/src/ui/display/tablerIconExampleCode.js
View File

@@ -1,5 +0,0 @@
import { IconArrowLeft } from "@tabler/icons-react";
export const MyComponent = () => {
return <IconArrowLeft color="red" size={48} />;
};

12
packages/twenty-docs/src/ui/display/tagCode.js
View File

@@ -1,12 +0,0 @@
import { Tag } from "@/ui/display/tag/components/Tag";
export const MyComponent = () => {
return (
<Tag
className
color="red"
text="Urgent"
onClick={() => console.log("click")}
/>
);
};

5
packages/twenty-docs/src/ui/feedback/circularProgressBarCode.js
View File

@@ -1,5 +0,0 @@
import { CircularProgressBar } from "@/ui/feedback/progress-bar/components/CircularProgressBar";
export const MyComponent = () => {
return <CircularProgressBar size={80} barWidth={6} barColor="green" />;
};

14
packages/twenty-docs/src/ui/feedback/progressBarCode.js
View File

@@ -1,14 +0,0 @@
import { ProgressBar } from "@/ui/feedback/progress-bar/components/ProgressBar";
export const MyComponent = () => {
return (
<ProgressBar
duration={6000}
delay={0}
easing="easeInOut"
barHeight={10}
barColor="#4bb543"
autoStart={true}
/>
);
};

BIN
packages/twenty-docs/src/ui/generated/dark-noise-JHVNKF2E.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 25 KiB

1509
packages/twenty-docs/src/ui/generated/index.cjs
View File

File diff suppressed because one or more lines are too long

Some files were not shown because too many files have changed in this diff Show More