Improve Documentation (#3795)
* Begin docs improvement * Keep improving documentation * Upgrade Docusarus * Fix broken links
This commit is contained in:
Félix Malfait
@ -1,4 +1,4 @@
|
||||
{
|
||||
"label": "Contributor guide",
|
||||
"position": 2
|
||||
"label": "Contributing",
|
||||
"position": 3
|
||||
}
|
||||
|
||||
15
packages/twenty-docs/docs/contributor/bug-and-requests.mdx
Normal file
15
packages/twenty-docs/docs/contributor/bug-and-requests.mdx
Normal file
@ -0,0 +1,15 @@
|
||||
---
|
||||
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).
|
||||
@ -1,3 +1,5 @@
|
||||
{
|
||||
"position": 3
|
||||
"position": 3,
|
||||
"collapsible": true,
|
||||
"collapsed": true
|
||||
}
|
||||
|
||||
@ -1,4 +0,0 @@
|
||||
{
|
||||
"label": "Advanced",
|
||||
"position": 3
|
||||
}
|
||||
@ -1,4 +0,0 @@
|
||||
{
|
||||
"label": "Basics",
|
||||
"position": 1
|
||||
}
|
||||
@ -1,53 +0,0 @@
|
||||
---
|
||||
title: Basics
|
||||
sidebar_position: 0
|
||||
---
|
||||
|
||||
import DocCardList from '@theme/DocCardList';
|
||||
|
||||
<DocCardList />
|
||||
|
||||
## 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/advanced/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/advanced/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](/contributor/frontend/basics/design-system).
|
||||
@ -1,44 +0,0 @@
|
||||
---
|
||||
title: Contributing
|
||||
sidebar_position: 1
|
||||
description: Learn how you can contribute to the project
|
||||
sidebar_custom_props:
|
||||
icon: TbTopologyStar
|
||||
---
|
||||
|
||||
## Pre-requisites
|
||||
|
||||
Make sure that your [IDE is correctly setup](/contributor/local-setup/ide-setup) and that your backend is running on `localhost:3000`.
|
||||
|
||||
|
||||
## Starting a new feature
|
||||
|
||||
Make sure your database is running on the URL provided in your `server/.env` file.
|
||||
|
||||
```bash
|
||||
cd front
|
||||
yarn
|
||||
|
||||
yarn start
|
||||
```
|
||||
|
||||
## Regenerate graphql schema based on API graphql schema
|
||||
|
||||
```bash
|
||||
yarn graphql:generate
|
||||
```
|
||||
|
||||
## Lint
|
||||
|
||||
```bash
|
||||
yarn lint
|
||||
```
|
||||
|
||||
## Test
|
||||
|
||||
```bash
|
||||
yarn test # run jest tests
|
||||
yarn storybook:dev # run storybook
|
||||
yarn storybook:test # run tests (needs yarn storybook:dev to be running)
|
||||
yarn storybook:coverage # run tests (needs yarn storybook:dev to be running)
|
||||
```
|
||||
@ -1,10 +0,0 @@
|
||||
---
|
||||
title: Design System
|
||||
description: What our design system looks like
|
||||
sidebar_position: 7
|
||||
sidebar_custom_props:
|
||||
icon: TbPaint
|
||||
---
|
||||
|
||||
The CRM depends on its internal and custom design system, constructed on top of styled-components.
|
||||
|
||||
@ -268,7 +268,7 @@ Prop drilling, in the React context, refers to the practice of passing state var
|
||||
|
||||
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](/contributor/frontend/advanced/best-practices#state-management).
|
||||
If you feel that you are using excessive prop drilling, see [state management best practices](#state-management).
|
||||
|
||||
## Imports
|
||||
|
||||
@ -1,14 +1,86 @@
|
||||
---
|
||||
id: frontend
|
||||
title: Frontend Development
|
||||
displayed_sidebar: frontendSidebar
|
||||
sidebar_position: 0
|
||||
sidebar_custom_props:
|
||||
icon: TbTerminal2
|
||||
isSidebarRoot: true
|
||||
---
|
||||
|
||||
Welcome to the Frontend Development section of the documentation.
|
||||
Here you will find information about the frontend development process, the recommended tools, and the best practices you should follow.
|
||||
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.
|
||||
|
||||
@ -1,4 +0,0 @@
|
||||
{
|
||||
"label": "UI Components",
|
||||
"position": 1
|
||||
}
|
||||
@ -1,9 +0,0 @@
|
||||
{
|
||||
"label": "Display",
|
||||
"position": 1,
|
||||
"collapsible": true,
|
||||
"collapsed": false,
|
||||
"customProps": {
|
||||
"icon": "TbAppWindow"
|
||||
}
|
||||
}
|
||||
@ -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={['@/ui/display/tooltip/OverflowingTextWithTooltip']}
|
||||
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>
|
||||
@ -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={['@/ui/display/checkmark/components/Checkmark']}
|
||||
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={['@/ui/display/checkmark/components/AnimatedCheckmark']}
|
||||
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>
|
||||
@ -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={['@/ui/display/chip/components/Chip']}
|
||||
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={['@/ui/display/chip/components/Chip']}
|
||||
componentCode={`import { Chip } from "@/ui/display/chip/components/Chip";
|
||||
|
||||
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={['@/ui/display/chip/components/Chip']}
|
||||
componentCode={`import { Chip } from "@/ui/display/chip/components/Chip";
|
||||
|
||||
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={['@/ui/display/chip/components/EntityChip', '@/ui/display/icon/types/IconComponent']}
|
||||
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>
|
||||
@ -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={['@/ui/display/icon/components/IconAddressBook']}
|
||||
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={['@/ui/display/icon/components/IconAddressBook']}
|
||||
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>
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
@ -1,9 +0,0 @@
|
||||
{
|
||||
"label": "Feedback",
|
||||
"position": 2,
|
||||
"collapsible": true,
|
||||
"collapsed": false,
|
||||
"customProps": {
|
||||
"icon": "TbForms"
|
||||
}
|
||||
}
|
||||
@ -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>
|
||||
@ -1,9 +0,0 @@
|
||||
{
|
||||
"label": "Input",
|
||||
"position": 3,
|
||||
"collapsible": true,
|
||||
"collapsed": false,
|
||||
"customProps": {
|
||||
"icon": "TbInputSearch"
|
||||
}
|
||||
}
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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', '@/ui/display/icon/types/IconComponent']}
|
||||
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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -1,9 +0,0 @@
|
||||
{
|
||||
"label": "Navigation",
|
||||
"position": 4,
|
||||
"collapsible": true,
|
||||
"collapsed": false,
|
||||
"customProps": {
|
||||
"icon": "TbNavigation"
|
||||
}
|
||||
}
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -1,8 +0,0 @@
|
||||
---
|
||||
title: UI Components
|
||||
sidebar_position: 0
|
||||
displayed_sidebar: uiDocsSidebar
|
||||
sidebar_custom_props:
|
||||
isSidebarRoot: true
|
||||
icon: TbLayoutGrid
|
||||
---
|
||||
@ -1,9 +0,0 @@
|
||||
{
|
||||
"label": "Local setup",
|
||||
"position": 1,
|
||||
"collapsible": true,
|
||||
"collapsed": true,
|
||||
"customProps": {
|
||||
"icon": "TbDeviceDesktop"
|
||||
}
|
||||
}
|
||||
@ -1,131 +0,0 @@
|
||||
---
|
||||
title: Docker Setup
|
||||
sidebar_position: 3
|
||||
description: Set up the project with Docker
|
||||
sidebar_custom_props:
|
||||
icon: TbBrandDocker
|
||||
---
|
||||
|
||||
import Tabs from '@theme/Tabs';
|
||||
import TabItem from '@theme/TabItem';
|
||||
|
||||
This guide will walk you through provisioning the project with Docker. This comes with the following advantages:
|
||||
- It provides the exact same environment as the core development team.
|
||||
- It includes some extra dependencies (such as `playwright`) that you might need if you wish to contribute to some advanced areas of the project.
|
||||
- It provisions a PostgreSQL database.
|
||||
|
||||
:::info
|
||||
Avoid setting up the project with Docker if you are a Windows (WSL) user, unless you have experience with it, as it will make troubleshooting harder.
|
||||
If you are a Windows user, it's better to use the [yarn installation](/contributor/local-setup/yarn-setup).
|
||||
:::
|
||||
|
||||
## Prerequisites
|
||||
|
||||
Make sure you have the latest [Docker](https://docs.docker.com/get-docker/) and [git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) versions installed on your computer.
|
||||
|
||||
You can run `docker --version` to verify the installation.
|
||||
|
||||
## Step 1: Git Clone
|
||||
|
||||
In your terminal, run the following command:
|
||||
|
||||
:::info Note
|
||||
|
||||
It's better to use SSH for this step. If you already haven't set up SSH keys, please do so first. You can learn more about it [here](https://docs.github.com/en/authentication/connecting-to-github-with-ssh/about-ssh).
|
||||
|
||||
:::
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="ssh" label="SSH (Recommended)" default>
|
||||
|
||||
```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: Setup environment variables
|
||||
|
||||
You need to set some environment variables before you can work on the project. Locally, it's better to set them through `.env` files.
|
||||
|
||||
```bash
|
||||
cd twenty
|
||||
cp ./packages/twenty-front/.env.example ./packages/twenty-front/.env
|
||||
cp ./packages/twenty-server/.env.example ./packages/twenty-server/.env
|
||||
```
|
||||
|
||||
The default values should work out of the box, except for the postgres URL, which requires a small modification.
|
||||
|
||||
Open `./packages/twenty-server/.env` and change to the following:
|
||||
|
||||
```bash
|
||||
PG_DATABASE_URL=postgres://twenty:twenty@postgres:5432/default
|
||||
```
|
||||
|
||||
|
||||
## Step 3: Build
|
||||
|
||||
The project includes an environment containerized with Docker and orchestrated with `docker-compose`.
|
||||
This installation method will also provision a PostgreSQL container.
|
||||
|
||||
|
||||
```bash
|
||||
make docker-dev-build
|
||||
```
|
||||
|
||||
## Step 4: Migrate & seed
|
||||
|
||||
Before running the project, you need to initialize the database by running the migrations and seed.
|
||||
|
||||
Start the containers:
|
||||
```bash
|
||||
make docker-dev-up
|
||||
```
|
||||
|
||||
Setup database, run migrations, and seed:
|
||||
```bash
|
||||
make docker-dev-sh
|
||||
yarn
|
||||
yarn nx database:init twenty-server
|
||||
```
|
||||
|
||||
## Step 5: Start Twenty
|
||||
|
||||
Run the project with the following commands from the `root` folder:
|
||||
|
||||
```bash
|
||||
make docker-dev-sh
|
||||
yarn nx start:dev twenty-server
|
||||
```
|
||||
|
||||
and in a separate terminal:
|
||||
```bash
|
||||
make docker-dev-sh
|
||||
yarn nx start twenty-front
|
||||
```
|
||||
|
||||
You should now have:
|
||||
- **Frontend** available on: [http://localhost:3001](http://localhost:3001)
|
||||
- **Server** available on: [http://localhost:3000/graphql](http://localhost:3000/graphql)
|
||||
- **Postgres** available on [http://localhost:5432](http://localhost:5432) and containing database named `default`
|
||||
|
||||
Sign in using a seeded demo account `tim@apple.dev` (password: `Applecar2025`) to start using Twenty.
|
||||
|
||||
## Step 6: Configure your IDE
|
||||
|
||||
As you are executing the project inside a Docker container, you need to configure your IDE to use the same environment.
|
||||
You can find the instructions for your IDE in our [IDE setup](/contributor/local-setup/ide-setup) guide.
|
||||
|
||||
### Troubleshooting
|
||||
|
||||
#### Docker throws errors while setting up local environment
|
||||
|
||||
If by any chance you run into problems with Docker, you should change the `docker-compose` to `docker compose` in `./infra/dev/Makefile` as `docker-compose` is an old version
|
||||
that's becoming obsolete. (You can find more info [here](https://docs.docker.com/compose/migrate/))
|
||||
@ -1,54 +0,0 @@
|
||||
---
|
||||
title: IDE Setup
|
||||
sidebar_position: 4
|
||||
description: Get the best developer UX with VSCode
|
||||
sidebar_custom_props:
|
||||
icon: TbBrandVscode
|
||||
---
|
||||
|
||||
This section will help you set up your IDE for the project. If you haven't set up your development environment, please refer to the [local setup](/contributor/local-setup) section.
|
||||
|
||||
|
||||
## Visual Studio Code
|
||||
|
||||
You can use any IDE you prefer, but Visual Studio Code is the choice of the core team, and has lots of extensions and settings to share with you.
|
||||
|
||||
|
||||
### Step 1: Installation
|
||||
|
||||
You can download Visual Studio Code from [here](https://code.visualstudio.com/download). Depending on your operating system, you can download the appropriate version.
|
||||
|
||||
### Step 2: Open Project
|
||||
|
||||
Once you install Visual Studio Code, you can open the project by clicking on `File > Open Folder` and selecting `twenty` project root folder.
|
||||
|
||||
<div style={{textAlign: 'center'}}>
|
||||
<img src="/img/contributor/ide-project-open.png" alt="Visual Studio Code: Open Twenty project" width="90%" />
|
||||
</div>
|
||||
|
||||
### Step 3: Extensions
|
||||
|
||||
You can use the recommended extensions for the project. You will find them in `.vscode/extensions.json` file. VSCode should prompt you to install the recommended extensions when you open the project.
|
||||
|
||||
<div style={{textAlign: 'center'}}>
|
||||
<img src="/img/contributor/ide-extensions.png" alt="Visual Studio Code: Install recommended extensions" width="90%" />
|
||||
</div>
|
||||
|
||||
|
||||
### Step 4: (Docker only) Run VSCode in container
|
||||
|
||||
If you are using a [Docker setup](/contributor/local-setup/docker-setup), you will need to run VSCode in the container. You can do that by opening the project, clicking on the `Remote Explorer` icon on the left sidebar and then clicking on `Attach in New window` on `dev-twenty-dev` container.
|
||||
|
||||
<div style={{textAlign: 'center'}}>
|
||||
<img src="/img/contributor/ide-start-dev-container.png" alt="Visual Studio Code: Open in container" width="90%" />
|
||||
</div>
|
||||
|
||||
<br />
|
||||
VSCode will open a new window and you will be able to use it as you would typically do. The only difference is that you will be running VSCode inside the container and you will have access to all the tools and dependencies installed in the container.
|
||||
|
||||
<br /><br />
|
||||
If you stop your containers, you will need to restart them before opening the project in VSCode again.
|
||||
|
||||
## You are all set
|
||||
|
||||
You are all set to start contributing to the project. If you have any questions, feel free to reach out to the team on [Discord](https://discord.gg/cx5n4Jzs57).
|
||||
@ -1,48 +0,0 @@
|
||||
---
|
||||
title: Local Setup
|
||||
sidebar_position: 0
|
||||
sidebar_custom_props:
|
||||
icon: TbDeviceDesktop
|
||||
---
|
||||
import ThemedImage from '@theme/ThemedImage';
|
||||
import Tabs from '@theme/Tabs';
|
||||
import TabItem from '@theme/TabItem';
|
||||
import DocCardList from '@theme/DocCardList';
|
||||
|
||||
|
||||
|
||||
Twenty aims for developer-friendliness, and your local installation should be up and running in just a bit.
|
||||
|
||||
<DocCardList/>
|
||||
|
||||
## Discord
|
||||
|
||||
If you have any questions or need help, you can join Twenty's [Discord](https://discord.gg/cx5n4Jzs57) server.
|
||||
|
||||
## MacOS and Linux users
|
||||
|
||||
It's better to use [yarn installation](/contributor/local-setup/yarn-setup) as this is the easiest way to get started.
|
||||
But there's also an easy way to run the project with [Docker](/contributor/local-setup/docker-setup) that you can use if you are familiar with containerized environments.
|
||||
|
||||
## Windows users
|
||||
|
||||
Windows users can install the project through WSL2. [This guide](/contributor/local-setup/yarn-setup) can help you get started.
|
||||
|
||||
## Project structure
|
||||
|
||||
The repository has the following structure:
|
||||
```
|
||||
twenty
|
||||
└───packages // contains this documentation
|
||||
└───twenty-front // contains the frontend code for the application
|
||||
└───twenty-server // contains the backend code for the application
|
||||
└───twenty-docker // contains docker configurations for development and production build
|
||||
└───many other packages you are invited to discover such as twenty-docs, twenty-ui, eslint-rules, twenty-zapier...
|
||||
```
|
||||
|
||||
## IDE Setup
|
||||
|
||||
Once Twenty is running on your computer, you will get the best experience by using an IDE that supports TypeScript and ESLint.
|
||||
You will find a guide for [VSCode](/contributor/local-setup/ide-setup) further in the documentation.
|
||||
___
|
||||
|
||||
@ -1,30 +0,0 @@
|
||||
---
|
||||
title: Troubleshooting
|
||||
sidebar_position: 5
|
||||
description: Common problems & their solutions.
|
||||
sidebar_custom_props:
|
||||
icon: TbExclamationCircle
|
||||
---
|
||||
|
||||
|
||||
## 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.
|
||||
|
||||
## Extra yarn files
|
||||
|
||||
If you have extra files created by yarn (`yarn.lock`, `.yarnrc.yml`, `.yarn`), you may have a yarn version issue.
|
||||
Try installing [yarn classic](https://classic.yarnpkg.com/lang/en/)!
|
||||
|
||||
## Missing metadata schema
|
||||
|
||||
During Twenty installation, you need to provision your postgres database with the right schemas, extensions, and users.
|
||||
This documentation includes [different ways](/contributor/local-setup/yarn-setup#step-2-set-up-postgresql-database) to set up your postgres instance.
|
||||
|
||||
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.
|
||||
@ -1,197 +0,0 @@
|
||||
---
|
||||
title: Yarn Setup
|
||||
sidebar_position: 1
|
||||
description: |
|
||||
Set up the project with Yarn
|
||||
sidebar_custom_props:
|
||||
icon: TbScript
|
||||
---
|
||||
import Tabs from '@theme/Tabs';
|
||||
import TabItem from '@theme/TabItem';
|
||||
|
||||
In this document, you'll learn how to install the project using yarn. You should use this method since it's the easiest way to get started but you can also run the project with [Docker](/contributor/local-setup/docker-setup).
|
||||
|
||||
:::info
|
||||
`npm` does not support local packages well, opt for `yarn` instead.
|
||||
:::
|
||||
|
||||
## 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
|
||||
Yarn is now shipped with Node.js nowadays, so you don't need to install it separately.
|
||||
You should 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.
|
||||
|
||||
:::caution Note
|
||||
|
||||
Avoid using Docker on WSL as it adds an extra layer of complexity.
|
||||
|
||||
:::
|
||||
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
---
|
||||
|
||||
## Step 1: Git Clone
|
||||
|
||||
In your terminal, run the following command.
|
||||
|
||||
:::info Note
|
||||
|
||||
It's better to use SSH for this step. If you already haven't set up SSH keys, please do so first. You can learn more about it [here](https://docs.github.com/en/authentication/connecting-to-github-with-ssh/about-ssh).
|
||||
|
||||
:::
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="ssh" label="SSH (Recommended)" default>
|
||||
|
||||
```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: Place yourself at the root of the project
|
||||
|
||||
```bash
|
||||
cd twenty
|
||||
```
|
||||
|
||||
All commands in the following steps should be run from the root of the project.
|
||||
|
||||
|
||||
## Step 3: Set up PostgreSQL Database
|
||||
To install PostgreSQL with a `default` and a `test` database, and provision these databases with a user `twenty` (password: `twenty`), follow the steps below:
|
||||
|
||||
<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
|
||||
```
|
||||
This will create a Docker container, exposing a PostgresSQL instance at [http://localhost:5432](http://localhost:5432).
|
||||
You can access this using `twenty` postgres user (password: `twenty`)
|
||||
</TabItem>
|
||||
<TabItem value="mac-os" label="Mac OS" default>
|
||||
|
||||
<b>Option 1:</b> To provision your database locally:
|
||||
```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
|
||||
```
|
||||
This will create a Docker container, exposing a PostgresSQL instance at [http://localhost:5432](http://localhost:5432).
|
||||
You can access this using `twenty` postgres user (password: `twenty`)
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="wsl" label="Windows (WSL)">
|
||||
|
||||
It's better to provision your database locally:
|
||||
```bash
|
||||
make postgres-on-linux
|
||||
```
|
||||
This will create a Docker container, exposing a PostgresSQL instance at [http://localhost:5432](http://localhost:5432).
|
||||
You can access this using `twenty` postgres user (password: `twenty`)
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
|
||||
## Step 4: Setup environment variables
|
||||
|
||||
Twenty requires you to set some environment variables. Locally, you should set them through a `.env` file.
|
||||
|
||||
To do so, make copies of 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 #recommended
|
||||
nvm use #recommended
|
||||
|
||||
yarn
|
||||
```
|
||||
|
||||
## Step 6: Running the project
|
||||
|
||||
Setup your database with the following command:
|
||||
```bash
|
||||
yarn nx database:init twenty-server
|
||||
```
|
||||
|
||||
Start the server and the frontend:
|
||||
```bash
|
||||
yarn nx start:dev twenty-server
|
||||
yarn nx start twenty-front
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
{
|
||||
"position": 4
|
||||
"position": 4,
|
||||
"collapsible": true,
|
||||
"collapsed": true
|
||||
}
|
||||
|
||||
@ -1,4 +0,0 @@
|
||||
{
|
||||
"label": "Basics",
|
||||
"position": 1
|
||||
}
|
||||
@ -1,35 +0,0 @@
|
||||
---
|
||||
title: Overview
|
||||
sidebar_position: 0
|
||||
sidebar_custom_props:
|
||||
icon: TbEyeglass
|
||||
---
|
||||
|
||||
Twenty primarily uses NestJS for the backend.
|
||||
|
||||
Prisma was the first choice as the ORM with a lot of auto-generated code under the hood. But to offer users flexibility and allow them to create custom fields and custom objects, something more low-level than Prisma made more sense to have more fine-grained control. This is why the project now uses TypeORM.
|
||||
|
||||
Here's what the tech stack now looks like.
|
||||
|
||||
## Tech Stack
|
||||
|
||||
**Core**
|
||||
- [NestJS](https://nestjs.com/)
|
||||
- [TypeORM](https://typeorm.io/)
|
||||
- [GraphQL Yoga](https://the-guild.dev/graphql/yoga-server)
|
||||
|
||||
**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/)
|
||||
@ -1,61 +0,0 @@
|
||||
---
|
||||
title: Development workflow
|
||||
sidebar_position: 3
|
||||
sidebar_custom_props:
|
||||
icon: TbTopologyStar
|
||||
---
|
||||
|
||||
## First time setup
|
||||
|
||||
```
|
||||
cd server
|
||||
yarn # install dependencies
|
||||
|
||||
yarn prisma:migrate # run migrations
|
||||
yarn prisma:generate # generate prisma and nestjs-graphql schemas
|
||||
yarn prisma:seed # provision database with seeds
|
||||
|
||||
# alternatively, you can run
|
||||
yarn prisma:reset # all-in-one command to reset, migrate, seed and generate schemas
|
||||
```
|
||||
|
||||
## Starting a new feature
|
||||
|
||||
Make sure your database is running on the URL provided in your `server/.env` file.
|
||||
|
||||
```
|
||||
cd server
|
||||
yarn
|
||||
yarn prisma:migrate && yarn prisma:generate
|
||||
|
||||
yarn start:dev
|
||||
```
|
||||
|
||||
## Lint
|
||||
|
||||
```
|
||||
yarn lint
|
||||
```
|
||||
|
||||
## Test
|
||||
|
||||
```
|
||||
yarn test
|
||||
```
|
||||
|
||||
## Resetting the database
|
||||
|
||||
If you want to reset the database, you can run the following command:
|
||||
|
||||
```bash
|
||||
cd server
|
||||
yarn 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.
|
||||
|
||||
:::
|
||||
@ -1,4 +0,0 @@
|
||||
{
|
||||
"label": "Others",
|
||||
"position": 2
|
||||
}
|
||||
@ -1,12 +1,91 @@
|
||||
---
|
||||
title: Backend Development
|
||||
displayed_sidebar: backendSidebar
|
||||
sidebar_position: 0
|
||||
sidebar_custom_props:
|
||||
icon: TbTerminal
|
||||
isSidebarRoot: true
|
||||
---
|
||||
|
||||
Welcome to the Backend Development section of the documentation.
|
||||
|
||||
Here you will find information about the development process, the recommended tools, and the best practices you should follow.
|
||||
import DocCardList from '@theme/DocCardList';
|
||||
|
||||
|
||||
<DocCardList />
|
||||
|
||||
## Useful commands
|
||||
|
||||
### First time setup
|
||||
|
||||
```
|
||||
yarn prisma:migrate # run migrations
|
||||
yarn prisma:generate # generate prisma and nestjs-graphql schemas
|
||||
yarn prisma:seed # provision database with seeds
|
||||
|
||||
# alternatively, you can run
|
||||
yarn prisma:reset # all-in-one command to reset, migrate, seed and generate schemas
|
||||
```
|
||||
|
||||
### Starting the app
|
||||
|
||||
```
|
||||
nx prisma:migrate twenty-server
|
||||
nx prisma:generate twenty-server
|
||||
nx start:dev twenty-server
|
||||
```
|
||||
|
||||
### Lint
|
||||
|
||||
```
|
||||
nx lint twenty-server
|
||||
```
|
||||
|
||||
### Test
|
||||
|
||||
```
|
||||
nx test twenty-server
|
||||
```
|
||||
|
||||
### Resetting the database
|
||||
|
||||
If you want to reset the database, you can run the following command:
|
||||
|
||||
```bash
|
||||
nx database:reset twenty-server
|
||||
```
|
||||
|
||||
:::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/)
|
||||
Reference in New Issue
Block a user