twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-11-26 13:42:44 +03:00
Code Issues Packages Projects Releases Wiki Activity

UI Component docs (Display & Feedback components) (#2453)

Browse Source 
* ui docs

* UI docs for display components

* docs for display and feedback components

* minor edits

* minor changes

* cleaned up code

* Move telemetry

* Revised Feedback/Display UI docs & added input UI docs

* Docs for Input components

* updated icons

* docs for input/components

* minor edits based on feedback

* add css to ui components

* Fixed spacing issue in button groups

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Nimra Ahmed 2023-11-23 02:35:34 +05:00 committed by GitHub
parent ec3cfe6fdb
commit b1d748f8bd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
66 changed files with 3394 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/docs/contributor/frontend/frontend.mdx
View File

@ -1,4 +1,5 @@
--- ---
id: frontend
title: Frontend Development title: Frontend Development
displayed_sidebar: frontendSidebar displayed_sidebar: frontendSidebar
sidebar_position: 0 sidebar_position: 0

6
docs/docs/contributor/frontend/ui-components/display/_category_.json
View File

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

139
docs/docs/contributor/frontend/ui-components/display/app-tooltip.mdx Normal file
View File

@ -0,0 +1,139 @@
---
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>

95
docs/docs/contributor/frontend/ui-components/display/checkmark.mdx
View File

@ -1,18 +1,95 @@
--- ---
title: Checkmark title: Checkmark
sidebar_position: 1 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' import { SandpackEditor} from '@site/src/ui/SandpackEditor'
Represents a successful or completed action.
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor <SandpackEditor
availableComponentPaths={['@/ui/Checkmark/components/Checkmark', '@/ui/Button/components/Button']} availableComponentPaths={['@/ui/display/checkmark/components/Checkmark']}
componentCode={`import { Checkmark } from "@/ui/Checkmark/components/Checkmark"; componentCode={checkmarkCode}
import { Button } from "@/ui/Button/components/Button";
export const MyComponent = () => {
return <><Checkmark /><Button title="New task"
variant={'secondary'}
onClick={() => console.log('click')}/></>
}
`}
/> />
</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>

252
docs/docs/contributor/frontend/ui-components/display/chip.mdx Normal file
View File

@ -0,0 +1,252 @@
---
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>

134
docs/docs/contributor/frontend/ui-components/display/icons.mdx Normal file
View File

@ -0,0 +1,134 @@
---
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>

49
docs/docs/contributor/frontend/ui-components/display/soon-pill.mdx Normal file
View File

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

68
docs/docs/contributor/frontend/ui-components/display/tag.mdx Normal file
View File

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

9
docs/docs/contributor/frontend/ui-components/feedback/_category_.json Normal file
View File

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

143
docs/docs/contributor/frontend/ui-components/feedback/progress-bar.mdx Normal file
View File

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

9
docs/docs/contributor/frontend/ui-components/input/_category_.json Normal file
View File

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

798
docs/docs/contributor/frontend/ui-components/input/button.mdx Normal file
View File

@ -0,0 +1,798 @@
---
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>
<th>Default</th>
</tr>
</thead>
<tbody>
<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.ButtonHTMLAttributes<HTMLButtonElement>`</td>
<td>Additional props from React's `button` element</td>
<td></td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>

93
docs/docs/contributor/frontend/ui-components/input/checkbox.mdx Normal file
View File

@ -0,0 +1,93 @@
---
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>

111
docs/docs/contributor/frontend/ui-components/input/color-scheme.mdx Normal file
View File

@ -0,0 +1,111 @@
---
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>
</tr>
<tr>
<td>additional props</td>
<td>`React.ComponentPropsWithoutRef<'div'>`</td>
<td>Standard HTML `div` element props</td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>
## Color Scheme Picker
Allows users to choose between different color schemes.
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['@/ui/input/color-scheme/components/ColorSchemePicker']}
componentCode={colorSchemePickerCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>value</td>
<td>`Color Scheme`</td>
<td>The currently selected color scheme</td>
</tr>
<tr>
<td>onChange</td>
<td>function</td>
<td>The callback function you want to trigger when a user selects a color scheme</td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>

92
docs/docs/contributor/frontend/ui-components/input/icon-picker.mdx Normal file
View File

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

92
docs/docs/contributor/frontend/ui-components/input/image-input.mdx Normal file
View File

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

164
docs/docs/contributor/frontend/ui-components/input/radio.mdx Normal file
View File

@ -0,0 +1,164 @@
---
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>

160
docs/docs/contributor/frontend/ui-components/input/text-input.mdx Normal file
View File

@ -0,0 +1,160 @@
---
title: Text Inputs
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 autoSizeTextInputCode from '!!raw-loader!@site/src/ui/input/components/autoSizeTextInputCode.js'
import entityTitleDoubleTextInputCode from '!!raw-loader!@site/src/ui/input/components/entityTitleDoubleTextInputCode.js'
## 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>

6
docs/docs/contributor/frontend/ui-components/ui-components.mdx
View File

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

3
docs/docs/index.mdx
View File

@ -6,6 +6,7 @@ title: Welcome
custom_edit_url: null custom_edit_url: null
--- ---
import ThemedImage from '@theme/ThemedImage'; import ThemedImage from '@theme/ThemedImage';
import Footer from '@theme/Footer'
Twenty is an Open Source CRM that provides flexibility, tailored to your business needs. It helps you break free from vendor lock-in and limitations, and provides the tools you need to harness the full potential of your data while ensuring a sleek and effortlessly intuitive design that teams will love to use. Twenty is an Open Source CRM that provides flexibility, tailored to your business needs. It helps you break free from vendor lock-in and limitations, and provides the tools you need to harness the full potential of your data while ensuring a sleek and effortlessly intuitive design that teams will love to use.
<ThemedImage sources={{light: "../img/light-doc-preview.png", dark:"../img/dark-doc-preview.png"}} style={{width:'100%', maxWidth:'800px'}}/> <ThemedImage sources={{light: "../img/light-doc-preview.png", dark:"../img/dark-doc-preview.png"}} style={{width:'100%', maxWidth:'800px'}}/>
@ -33,3 +34,5 @@ Code contributions through pull request are most welcome. See the [local setup g
You can also contribute by creating an issue to report a bug you've spotted, joining discussions or writing documentation. You can also contribute by creating an issue to report a bug you've spotted, joining discussions or writing documentation.
<Footer/>

4
docs/docs/others/_category_.json
View File

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

16
docs/docs/others/telemetry.mdx
View File

@ -1,16 +0,0 @@
---
title: Telemetry
sidebar_position: 2
sidebar_custom_props:
icon: TbChartDots
---
# Data collected
Twenty records pageview events using a unique identifier for each workspace/user, and collects the workspace's domain.
Twenty does not use cookies for telemetry or collect email addresses, names, phone numbers, dates of birth, addresses, usernames, or other PII.
# Opting-out of telemetry
To disable telemetry in your workspace, add the following line to your `server/.env` file:
```
TELEMETRY_ANONYMIZATION_ENABLED=false
```

2
docs/docs/others/bug-and-requests.mdx → docs/docs/start/bug-and-requests.mdx
View File

@ -8,6 +8,8 @@ sidebar_custom_props:
## Reporting Bugs ## Reporting Bugs
To report a bug, please [create an issue on GitHub](https://github.com/twentyhq/twenty/issues/new). 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://twenty.com/discord).
## Feature Requests ## 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). 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).

6
docs/docs/start/self-hosting/enviroment-variables.mdx
View File

@ -26,7 +26,6 @@ import OptionTable from '@site/src/theme/OptionTable'
['PG_DATABASE_URL', 'postgres://user:pw@localhost:5432/default?connection_limit=1', 'Database connection'], ['PG_DATABASE_URL', 'postgres://user:pw@localhost:5432/default?connection_limit=1', 'Database connection'],
['FRONT_BASE_URL', 'http://localhost:3001', 'Url to the hosted frontend'], ['FRONT_BASE_URL', 'http://localhost:3001', 'Url to the hosted frontend'],
['PORT', '3000', 'Port'], ['PORT', '3000', 'Port'],
['TELEMETRY_ANONYMIZATION_ENABLED', 'true', 'Anonymized telemetry is collected if not disabled'],
]}></OptionTable> ]}></OptionTable>
### Tokens ### Tokens
@ -79,6 +78,11 @@ import OptionTable from '@site/src/theme/OptionTable'
['SUPPORT_FRONT_CHAT_ID', '<id>', 'Support chat id'], ['SUPPORT_FRONT_CHAT_ID', '<id>', 'Support chat id'],
]}></OptionTable> ]}></OptionTable>
### Telemetry
<OptionTable options={[
['TELEMETRY_ENABLED', 'true', 'Change this if you want to disable telemetry'],
['TELEMETRY_ANONYMIZATION_ENABLED', 'true', 'Telemetry is anonymized by default, you probably don\'t want to change this'],
]}></OptionTable>
### Debug / Development ### Debug / Development

12
docs/sidebars.js
View File

@ -25,7 +25,7 @@ const backToHomeLink = {
/** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */ /** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
const sidebars = { const sidebars = {
docsSidebar: [{ type: "autogenerated", dirName: ".", }], docsSidebar: [{ type: "autogenerated", dirName: "." }],
frontendSidebar: [ frontendSidebar: [
backToHomeLink, backToHomeLink,
{ type: "autogenerated", dirName: "contributor/frontend" }, { type: "autogenerated", dirName: "contributor/frontend" },
@ -34,10 +34,12 @@ const sidebars = {
backToHomeLink, backToHomeLink,
{ type: "autogenerated", dirName: "contributor/server" }, { type: "autogenerated", dirName: "contributor/server" },
], ],
userSidebar:[ userSidebar: [
backToHomeLink, { type: "autogenerated", dirName: "user-guide" },
{ type: "autogenerated", dirName: "user-guide", }, ],
] uiDocsSidebar: [
{ type: "autogenerated", dirName: "contributor/frontend/ui-components" },
],
}; };
module.exports = sidebars; module.exports = sidebars;

19
docs/src/theme/icons.js
View File

@ -38,5 +38,24 @@ export {
TbBrandGraphql, TbBrandGraphql,
TbApi, TbApi,
TbUsers, TbUsers,
TbCheck,
TbPill,
TbAppWindow,
TbTooltip,
TbTag,
TbLayoutList,
TbAddressBook,
TbLoader2,
TbInputSearch,
TbIcons,
TbSquareRoundedPlusFilled,
TbLayoutGrid,
TbColorFilter,
TbTextSize,
TbComponents,
TbCheckbox,
TbColorPicker,
TbCircleDot,
TbUpload,
TbVariable TbVariable
} from "react-icons/tb"; } from "react-icons/tb";

45
docs/src/ui/SandpackEditor.js
View File

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

14
docs/src/ui/display/animatedCheckmarkCode.js Normal file
View File

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

22
docs/src/ui/display/appTooltipCode.js Normal file
View File

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

5
docs/src/ui/display/checkmarkCode.js Normal file
View File

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

17
docs/src/ui/display/chipCode.js Normal file
View File

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

19
docs/src/ui/display/entityChipCode.js Normal file
View File

@ -0,0 +1,19 @@
import { BrowserRouter as Router } from "react-router-dom";
import { EntityChip } from "@/ui/display/chip/components/EntityChip";
import { IconComponent } from "@/ui/display/icon/types/IconComponent";
export const MyComponent = () => {
return (
<Router>
<EntityChip
linkToEntity="/entity-link"
entityId="entityTest"
name="Entity name"
pictureUrl=""
avatarType="rounded"
variant="regular"
LeftIcon={IconComponent}
/>
</Router>
);
};

5
docs/src/ui/display/iconAddressBookCode.js Normal file
View File

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

8
docs/src/ui/display/overflowingTextWithTooltipCode.js Normal file
View File

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

5
docs/src/ui/display/soonPillCode.js Normal file
View File

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

5
docs/src/ui/display/tablerIconExampleCode.js Normal file
View File

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

12
docs/src/ui/display/tagCode.js Normal file
View File

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

5
docs/src/ui/feedback/circularProgressBarCode.js Normal file
View File

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

14
docs/src/ui/feedback/progressBarCode.js Normal file
View File

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

376
docs/src/ui/generated/index.d.ts vendored
View File

@ -1,6 +1,10 @@
export { ThemeProvider } from '@emotion/react'; export { ThemeProvider } from '@emotion/react';
import * as react_jsx_runtime from 'react/jsx-runtime'; import * as react_jsx_runtime from 'react/jsx-runtime';
import React, { FunctionComponent } from 'react'; import * as React$1 from 'react';
import React__default, { ReactNode, MouseEvent, FunctionComponent, ComponentProps } from 'react';
import { motion, AnimationControls } from 'framer-motion';
import { TablerIconsProps } from '@tabler/icons-react';
import { PlacesType, PositionStrategy } from 'react-tooltip';
declare const lightTheme: { declare const lightTheme: {
accent: { accent: {
@ -56,6 +60,7 @@ declare const lightTheme: {
extraLight: string; extraLight: string;
light: string; light: string;
strong: string; strong: string;
underline: string;
}; };
font: { font: {
size: { size: {
@ -279,15 +284,143 @@ declare const lightTheme: {
type ThemeType = typeof lightTheme; type ThemeType = typeof lightTheme;
declare const darkTheme: ThemeType; declare const darkTheme: ThemeType;
type CheckmarkProps = React.ComponentPropsWithoutRef<'div'>; type CheckmarkProps = React__default.ComponentPropsWithoutRef<'div'>;
declare const Checkmark: (_props: CheckmarkProps) => react_jsx_runtime.JSX.Element; declare const Checkmark: (_props: CheckmarkProps) => react_jsx_runtime.JSX.Element;
type AnimatedCheckmarkProps = React.ComponentProps<typeof motion.path> & {
isAnimating?: boolean;
color?: string;
duration?: number;
size?: number;
};
declare const AnimatedCheckmark: ({ isAnimating, color, duration, size, }: AnimatedCheckmarkProps) => react_jsx_runtime.JSX.Element;
declare enum ChipSize {
Large = "large",
Small = "small"
}
declare enum ChipAccent {
TextPrimary = "text-primary",
TextSecondary = "text-secondary"
}
declare enum ChipVariant {
Highlighted = "highlighted",
Regular = "regular",
Transparent = "transparent",
Rounded = "rounded"
}
type ChipProps = {
size?: ChipSize;
disabled?: boolean;
clickable?: boolean;
label: string;
maxWidth?: string;
variant?: ChipVariant;
accent?: ChipAccent;
leftComponent?: ReactNode;
rightComponent?: ReactNode;
className?: string;
onClick?: (event: MouseEvent<HTMLDivElement>) => void;
};
declare const Chip: ({ size, label, disabled, clickable, variant, leftComponent, rightComponent, accent, maxWidth, className, onClick, }: ChipProps) => react_jsx_runtime.JSX.Element;
type IconComponent = FunctionComponent<{ type IconComponent = FunctionComponent<{
color?: string; color?: string;
size?: number; size?: number;
stroke?: number; stroke?: number;
}>; }>;
type AvatarType = 'squared' | 'rounded';
type EntityChipProps = {
linkToEntity?: string;
entityId: string;
name: string;
pictureUrl?: string;
avatarType?: AvatarType;
variant?: EntityChipVariant;
LeftIcon?: IconComponent;
};
declare enum EntityChipVariant {
Regular = "regular",
Transparent = "transparent"
}
declare const EntityChip: ({ linkToEntity, entityId, name, pictureUrl, avatarType, variant, LeftIcon, }: EntityChipProps) => react_jsx_runtime.JSX.Element;
type IconAddressBookProps = TablerIconsProps;
declare const IconAddressBook: (props: IconAddressBookProps) => JSX.Element;
declare const SoonPill: () => react_jsx_runtime.JSX.Element;
declare const mainColors: {
yellow: string;
green: string;
turquoise: string;
sky: string;
blue: string;
purple: string;
pink: string;
red: string;
orange: string;
gray: string;
};
type ThemeColor = keyof typeof mainColors;
declare const tagColors: string[];
type TagColor = (typeof tagColors)[number];
declare const castToTagColor: (color: string) => TagColor;
type TagProps = {
className?: string;
color: ThemeColor;
text: string;
onClick?: () => void;
};
declare const Tag: ({ className, color, text, onClick }: TagProps) => react_jsx_runtime.JSX.Element;
declare enum TooltipPosition {
Top = "top",
Left = "left",
Right = "right",
Bottom = "bottom"
}
type AppTooltipProps = {
className?: string;
anchorSelect?: string;
content?: string;
delayHide?: number;
offset?: number;
noArrow?: boolean;
isOpen?: boolean;
place?: PlacesType;
positionStrategy?: PositionStrategy;
};
declare const AppTooltip: ({ anchorSelect, className, content, delayHide, isOpen, noArrow, offset, place, positionStrategy, }: AppTooltipProps) => react_jsx_runtime.JSX.Element;
declare const OverflowingTextWithTooltip: ({ text, }: {
text: string | null | undefined;
}) => react_jsx_runtime.JSX.Element;
type ProgressBarProps = {
duration?: number;
delay?: number;
easing?: string;
barHeight?: number;
barColor?: string;
autoStart?: boolean;
};
type ProgressBarControls = AnimationControls & {
start: () => Promise<any>;
pause: () => Promise<any>;
};
declare const ProgressBar: React$1.ForwardRefExoticComponent<ProgressBarProps & React$1.RefAttributes<ProgressBarControls>>;
interface CircularProgressBarProps {
size?: number;
barWidth?: number;
barColor?: string;
}
declare const CircularProgressBar: ({ size, barWidth, barColor, }: CircularProgressBarProps) => react_jsx_runtime.JSX.Element;
type ButtonSize = 'medium' | 'small'; type ButtonSize = 'medium' | 'small';
type ButtonPosition = 'standalone' | 'left' | 'middle' | 'right'; type ButtonPosition = 'standalone' | 'left' | 'middle' | 'right';
type ButtonVariant = 'primary' | 'secondary' | 'tertiary'; type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
@ -304,13 +437,248 @@ type ButtonProps = {
soon?: boolean; soon?: boolean;
disabled?: boolean; disabled?: boolean;
focus?: boolean; focus?: boolean;
onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void; onClick?: (event: React__default.MouseEvent<HTMLButtonElement>) => void;
}; };
declare const Button: ({ className, Icon, title, fullWidth, variant, size, accent, position, soon, disabled, focus, onClick, }: ButtonProps) => react_jsx_runtime.JSX.Element; declare const Button: ({ className, Icon, title, fullWidth, variant, size, accent, position, soon, disabled, focus, onClick, }: ButtonProps) => react_jsx_runtime.JSX.Element;
type ButtonGroupProps = Pick<ButtonProps, 'variant' | 'size' | 'accent'> & {
className?: string;
children: ReactNode[];
};
declare const ButtonGroup: ({ className, children, variant, size, accent, }: ButtonGroupProps) => react_jsx_runtime.JSX.Element;
type FloatingButtonSize = 'small' | 'medium';
type FloatingButtonPosition = 'standalone' | 'left' | 'middle' | 'right';
type FloatingButtonProps = {
className?: string;
Icon?: IconComponent;
title?: string;
size?: FloatingButtonSize;
position?: FloatingButtonPosition;
applyShadow?: boolean;
applyBlur?: boolean;
disabled?: boolean;
focus?: boolean;
};
declare const FloatingButton: ({ className, Icon, title, size, applyBlur, applyShadow, disabled, focus, }: FloatingButtonProps) => react_jsx_runtime.JSX.Element;
type FloatingButtonGroupProps = Pick<FloatingButtonProps, 'size'> & {
children: React__default.ReactElement[];
};
declare const FloatingButtonGroup: ({ children, size, }: FloatingButtonGroupProps) => react_jsx_runtime.JSX.Element;
type FloatingIconButtonSize = 'small' | 'medium';
type FloatingIconButtonPosition = 'standalone' | 'left' | 'middle' | 'right';
type FloatingIconButtonProps = {
className?: string;
Icon?: IconComponent;
size?: FloatingIconButtonSize;
position?: FloatingIconButtonPosition;
applyShadow?: boolean;
applyBlur?: boolean;
disabled?: boolean;
focus?: boolean;
onClick?: (event: React__default.MouseEvent<HTMLButtonElement>) => void;
isActive?: boolean;
};
declare const FloatingIconButton: ({ className, Icon, size, position, applyShadow, applyBlur, disabled, focus, onClick, isActive, }: FloatingIconButtonProps) => react_jsx_runtime.JSX.Element;
type FloatingIconButtonGroupProps = Pick<FloatingIconButtonProps, 'className' | 'size'> & {
iconButtons: {
Icon: IconComponent;
onClick?: (event: MouseEvent<any>) => void;
isActive?: boolean;
}[];
};
declare const FloatingIconButtonGroup: ({ iconButtons, size, className, }: FloatingIconButtonGroupProps) => react_jsx_runtime.JSX.Element;
type LightButtonAccent = 'secondary' | 'tertiary';
type LightButtonProps = {
className?: string;
icon?: React__default.ReactNode;
title?: string;
accent?: LightButtonAccent;
active?: boolean;
disabled?: boolean;
focus?: boolean;
onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
};
declare const LightButton: ({ className, icon: initialIcon, title, active, accent, disabled, focus, onClick, }: LightButtonProps) => react_jsx_runtime.JSX.Element;
type LightIconButtonAccent = 'secondary' | 'tertiary';
type LightIconButtonSize = 'small' | 'medium';
type LightIconButtonProps = {
className?: string;
testId?: string;
Icon?: IconComponent;
title?: string;
size?: LightIconButtonSize;
accent?: LightIconButtonAccent;
active?: boolean;
disabled?: boolean;
focus?: boolean;
onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
} & Pick<ComponentProps<'button'>, 'aria-label' | 'title'>;
declare const LightIconButton: ({ "aria-label": ariaLabel, className, testId, Icon, active, size, accent, disabled, focus, onClick, title, }: LightIconButtonProps) => react_jsx_runtime.JSX.Element;
type Variant = 'primary' | 'secondary';
type Props = {
title: string;
fullWidth?: boolean;
variant?: Variant;
soon?: boolean;
} & React__default.ComponentProps<'button'>;
type MainButtonProps = Props & {
Icon?: IconComponent;
};
declare const MainButton: ({ Icon, title, fullWidth, variant, type, onClick, disabled, }: MainButtonProps) => react_jsx_runtime.JSX.Element;
type RoundedIconButtonProps = {
Icon: IconComponent;
} & React.ButtonHTMLAttributes<HTMLButtonElement>;
declare const RoundedIconButton: ({ Icon, onClick, disabled, }: RoundedIconButtonProps) => react_jsx_runtime.JSX.Element;
declare enum ColorScheme$1 {
Dark = "Dark",
Light = "Light",
System = "System"
}
type ColorSchemeSegmentProps = {
variant: `${Lowercase<ColorScheme$1.Dark | ColorScheme$1.Light>}`;
controls: AnimationControls;
} & React__default.ComponentPropsWithoutRef<'div'>;
type ColorSchemeCardProps = {
variant: `${Lowercase<ColorScheme$1>}`;
selected?: boolean;
} & React__default.ComponentPropsWithoutRef<'div'>;
declare const ColorSchemeCard: ({ variant, selected, onClick, }: ColorSchemeCardProps) => react_jsx_runtime.JSX.Element;
type ColorScheme = 'Dark' | 'Light' | 'System';
type ColorSchemePickerProps = {
value: ColorScheme;
onChange: (value: ColorScheme) => void;
};
declare const ColorSchemePicker: ({ value, onChange, }: ColorSchemePickerProps) => react_jsx_runtime.JSX.Element;
declare enum AutosizeTextInputVariant {
Default = "default",
Icon = "icon",
Button = "button"
}
type AutosizeTextInputProps = {
onValidate?: (text: string) => void;
minRows?: number;
placeholder?: string;
onFocus?: () => void;
variant?: AutosizeTextInputVariant;
buttonTitle?: string;
value?: string;
};
declare const AutosizeTextInput: ({ placeholder, onValidate, minRows, onFocus, variant, buttonTitle, value, }: AutosizeTextInputProps) => react_jsx_runtime.JSX.Element;
declare enum CheckboxVariant {
Primary = "primary",
Secondary = "secondary",
Tertiary = "tertiary"
}
declare enum CheckboxShape {
Squared = "squared",
Rounded = "rounded"
}
declare enum CheckboxSize {
Large = "large",
Small = "small"
}
type CheckboxProps = {
checked: boolean;
indeterminate?: boolean;
onChange?: (event: React$1.ChangeEvent<HTMLInputElement>) => void;
onCheckedChange?: (value: boolean) => void;
variant?: CheckboxVariant;
size?: CheckboxSize;
shape?: CheckboxShape;
};
declare const Checkbox: ({ checked, onChange, onCheckedChange, indeterminate, variant, size, shape, }: CheckboxProps) => react_jsx_runtime.JSX.Element;
type EntityTitleDoubleTextInputProps = {
firstValue: string;
secondValue: string;
firstValuePlaceholder: string;
secondValuePlaceholder: string;
onChange: (firstValue: string, secondValue: string) => void;
};
declare const EntityTitleDoubleTextInput: ({ firstValue, secondValue, firstValuePlaceholder, secondValuePlaceholder, onChange, }: EntityTitleDoubleTextInputProps) => react_jsx_runtime.JSX.Element;
type IconButtonVariant = 'primary' | 'secondary' | 'tertiary';
type IconPickerProps = {
disabled?: boolean;
dropdownScopeId?: string;
onChange: (params: {
iconKey: string;
Icon: IconComponent;
}) => void;
selectedIconKey?: string;
onClickOutside?: () => void;
onClose?: () => void;
onOpen?: () => void;
variant?: IconButtonVariant;
};
declare const IconPicker: ({ disabled, dropdownScopeId, onChange, selectedIconKey, onClickOutside, onClose, onOpen, variant, }: IconPickerProps) => react_jsx_runtime.JSX.Element;
type ImageInputProps = Omit<React__default.ComponentProps<'div'>, 'children'> & {
picture: string | null | undefined;
onUpload?: (file: File) => void;
onRemove?: () => void;
onAbort?: () => void;
isUploading?: boolean;
errorMessage?: string | null;
disabled?: boolean;
};
declare const ImageInput: ({ picture, onUpload, onRemove, onAbort, isUploading, errorMessage, disabled, }: ImageInputProps) => react_jsx_runtime.JSX.Element;
declare enum RadioSize {
Large = "large",
Small = "small"
}
declare enum LabelPosition {
Left = "left",
Right = "right"
}
type RadioProps = {
style?: React$1.CSSProperties;
className?: string;
checked?: boolean;
value?: string;
onChange?: (event: React$1.ChangeEvent<HTMLInputElement>) => void;
onCheckedChange?: (checked: boolean) => void;
size?: RadioSize;
disabled?: boolean;
labelPosition?: LabelPosition;
};
declare const Radio: {
({ checked, value, onChange, onCheckedChange, size, labelPosition, disabled, }: RadioProps): react_jsx_runtime.JSX.Element;
Group: ({ value, onChange, onValueChange, children, }: {
children?: React$1.ReactNode;
} & {
value?: string | undefined;
onChange?: ((event: React$1.ChangeEvent<HTMLInputElement>) => void) | undefined;
onValueChange?: ((value: string) => void) | undefined;
}) => react_jsx_runtime.JSX.Element;
};
type RadioGroupProps = React__default.PropsWithChildren & {
value?: string;
onChange?: (event: React__default.ChangeEvent<HTMLInputElement>) => void;
onValueChange?: (value: string) => void;
};
declare const RadioGroup: ({ value, onChange, onValueChange, children, }: RadioGroupProps) => react_jsx_runtime.JSX.Element;
declare module '@emotion/react' { declare module '@emotion/react' {
interface Theme extends ThemeType { interface Theme extends ThemeType {
} }
} }
export { Button, ButtonAccent, ButtonPosition, ButtonProps, ButtonSize, ButtonVariant, Checkmark, CheckmarkProps, darkTheme, lightTheme }; export { AnimatedCheckmark, AnimatedCheckmarkProps, AppTooltip, AppTooltipProps, AutosizeTextInput, AutosizeTextInputVariant, Button, ButtonAccent, ButtonGroup, ButtonGroupProps, ButtonPosition, ButtonProps, ButtonSize, ButtonVariant, Checkbox, CheckboxShape, CheckboxSize, CheckboxVariant, Checkmark, CheckmarkProps, Chip, ChipAccent, ChipSize, ChipVariant, CircularProgressBar, ColorSchemeCard, ColorSchemeCardProps, ColorSchemePicker, ColorSchemePickerProps, ColorSchemeSegmentProps, EntityChip, EntityChipProps, EntityChipVariant, EntityTitleDoubleTextInput, EntityTitleDoubleTextInputProps, FloatingButton, FloatingButtonGroup, FloatingButtonGroupProps, FloatingButtonPosition, FloatingButtonProps, FloatingButtonSize, FloatingIconButton, FloatingIconButtonGroup, FloatingIconButtonGroupProps, FloatingIconButtonPosition, FloatingIconButtonProps, FloatingIconButtonSize, IconAddressBook, IconPicker, ImageInput, LabelPosition, LightButton, LightButtonAccent, LightButtonProps, LightIconButton, LightIconButtonAccent, LightIconButtonProps, LightIconButtonSize, MainButton, OverflowingTextWithTooltip, ProgressBar, ProgressBarControls, ProgressBarProps, Radio, RadioGroup, RadioProps, RadioSize, RoundedIconButton, SoonPill, Tag, TagColor, TagProps, TooltipPosition, castToTagColor, darkTheme, lightTheme };

2
docs/src/ui/generated/index.js
View File

File diff suppressed because one or more lines are too long

20
docs/src/ui/input/button/buttonCode.js Normal file
View File

@ -0,0 +1,20 @@
import { Button } from "@/ui/input/button/components/Button";
export const MyComponent = () => {
return (
<Button
className
Icon={null}
title="Click Me"
fullWidth={false}
variant="primary"
size="medium"
position="standalone"
accent="default"
soon={false}
disabled={false}
focus={true}
onClick={() => console.log("click")}
/>
);
};

51
docs/src/ui/input/button/buttonGroupCode.js Normal file
View File

@ -0,0 +1,51 @@
import { Button } from "@/ui/input/button/components/Button";
import { ButtonGroup } from "@/ui/input/button/components/ButtonGroup";
export const MyComponent = () => {
return (
<ButtonGroup variant="primary" size="large" accent="blue" className>
<Button
className
Icon={null}
title="Button 1"
fullWidth={false}
variant="primary"
size="medium"
position="standalone"
accent="blue"
soon={false}
disabled={false}
focus={true}
onClick={() => console.log("click")}
/>
<Button
className
Icon={null}
title="Button 2"
fullWidth={false}
variant="secondary"
size="medium"
position="left"
accent="blue"
soon={false}
disabled={false}
focus={true}
onClick={() => console.log("click")}
/>
<Button
className
Icon={null}
title="Button 3"
fullWidth={false}
variant="tertiary"
size="medium"
position="right"
accent="blue"
soon={false}
disabled={false}
focus={true}
onClick={() => console.log("click")}
/>
</ButtonGroup>
);
};

18
docs/src/ui/input/button/floatingButtonCode.js Normal file
View File

@ -0,0 +1,18 @@
import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
import { IconSearch } from "@tabler/icons-react";
export const MyComponent = () => {
return (
<FloatingButton
className
Icon={IconSearch}
title="Click Me"
size="medium"
position="standalone"
applyShadow={true}
applyBlur={true}
disabled={false}
focus={true}
/>
);
};

32
docs/src/ui/input/button/floatingButtonGroupCode.js Normal file
View File

@ -0,0 +1,32 @@
import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
import { FloatingButtonGroup } from "@/ui/input/button/components/FloatingButtonGroup";
import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";
export const MyComponent = () => {
return (
<FloatingButtonGroup size="small">
<FloatingButton
className
Icon={IconClipboardText}
title
size="small"
position="standalone"
applyShadow={true}
applyBlur={true}
disabled={false}
focus={true}
/>
<FloatingButton
className
Icon={IconCheckbox}
title
size="small"
position="standalone"
applyShadow={true}
applyBlur={true}
disabled={false}
focus={true}
/>
</FloatingButtonGroup>
);
};

19
docs/src/ui/input/button/floatingIconButtonCode.js Normal file
View File

@ -0,0 +1,19 @@
import { FloatingIconButton } from "@/ui/input/button/components/FloatingIconButton";
import { IconSearch } from "@tabler/icons-react";
export const MyComponent = () => {
return (
<FloatingIconButton
className
Icon={IconSearch}
size="small"
position="standalone"
applyShadow={true}
applyBlur={true}
disabled={false}
focus={false}
onClick={() => console.log("click")}
isActive={true}
/>
);
};

24
docs/src/ui/input/button/floatingIconButtonGroupCode.js Normal file
View File

@ -0,0 +1,24 @@
import { FloatingIconButtonGroup } from "@/ui/input/button/components/FloatingIconButtonGroup";
import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";
export const MyComponent = () => {
const iconButtons = [
{
Icon: IconClipboardText,
onClick: () => console.log("Button 1 clicked"),
isActive: true,
},
{
Icon: IconCheckbox,
onClick: () => console.log("Button 2 clicked"),
isActive: true,
},
];
return (
<FloatingIconButtonGroup
className
size="small"
iconButtons={iconButtons} />
);
};

14
docs/src/ui/input/button/lightButtonCode.js Normal file
View File

@ -0,0 +1,14 @@
import { LightButton } from "@/ui/input/button/components/LightButton";
export const MyComponent = () => {
return <LightButton
className
icon={null}
title="Click Me"
accent="secondary"
active={false}
disabled={false}
focus={true}
onClick={()=>console.log('click')}
/>;
};

19
docs/src/ui/input/button/lightIconButtonCode.js Normal file
View File

@ -0,0 +1,19 @@
import { LightIconButton } from "@/ui/input/button/components/LightIconButton";
import { IconSearch } from "@tabler/icons-react";
export const MyComponent = () => {
return (
<LightIconButton
className
testId="test1"
Icon={IconSearch}
title="Click Me"
size="small"
accent="secondary"
active={true}
disabled={false}
focus={true}
onClick={() => console.log("click")}
/>
);
};

14
docs/src/ui/input/button/mainButtonCode.js Normal file
View File

@ -0,0 +1,14 @@
import { MainButton } from "@/ui/input/button/components/MainButton";
import { IconCheckbox } from "@tabler/icons-react";
export const MyComponent = () => {
return (
<MainButton
title="Checkbox"
fullWidth={false}
variant="primary"
soon={false}
Icon={IconCheckbox}
/>
);
};

10
docs/src/ui/input/button/roundedIconButtonCode.js Normal file
View File

@ -0,0 +1,10 @@
import { RoundedIconButton } from "@/ui/input/button/components/RoundedIconButton";
import { IconSearch } from "@tabler/icons-react";
export const MyComponent = () => {
return (
<RoundedIconButton
Icon={IconSearch}
/>
);
};

10
docs/src/ui/input/color-scheme/colorSchemeCardCode.js Normal file
View File

@ -0,0 +1,10 @@
import { ColorSchemeCard } from "@/ui/input/color-scheme/components/ColorSchemeCard";
export const MyComponent = () => {
return (
<ColorSchemeCard
variant="dark"
selected={true}
/>
);
};

8
docs/src/ui/input/color-scheme/colorSchemePickerCode.js Normal file
View File

@ -0,0 +1,8 @@
import { ColorSchemePicker } from "@/ui/input/color-scheme/components/ColorSchemePicker";
export const MyComponent = () => {
return <ColorSchemePicker
value
onChange
/>;
};

18
docs/src/ui/input/components/autosizeTextInputCode.js Normal file
View File

@ -0,0 +1,18 @@
import { RecoilRoot } from "recoil";
import { AutosizeTextInput } from "@/ui/input/components/AutosizeTextInput";
export const MyComponent = () => {
return (
<RecoilRoot>
<AutosizeTextInput
onValidate={() => console.log("onValidate function fired")}
minRows={1}
placeholder="Write a comment"
onFocus={() => console.log("onFocus function fired")}
variant="icon"
buttonTitle
value="Task: "
/>
</RecoilRoot>
);
};

15
docs/src/ui/input/components/checkboxCode.js Normal file
View File

@ -0,0 +1,15 @@
import { Checkbox } from "@/ui/input/components/Checkbox";
export const MyComponent = () => {
return (
<Checkbox
checked={true}
indeterminate={false}
onChange={() => console.log("onChange function fired")}
onCheckedChange={() => console.log("onCheckedChange function fired")}
variant="primary"
size="small"
shape="squared"
/>
);
};

27
docs/src/ui/input/components/entityTitleDoubleTextInputCode.js Normal file
View File

@ -0,0 +1,27 @@
import { RecoilRoot } from "recoil";
import React, { useState } from "react";
import { EntityTitleDoubleTextInput } from "@/ui/input/components/EntityTitleDoubleTextInput";
export const MyComponent = () => {
const [firstValue, setFirstValue] = useState("First Value");
const [secondValue, setSecondValue] = useState("This is a long long test text");
const handleInputChange = (newFirstValue, newSecondValue) => {
setFirstValue(newFirstValue);
setSecondValue(newSecondValue);
};
return (
<RecoilRoot>
<EntityTitleDoubleTextInput
firstValue={firstValue}
secondValue={secondValue}
firstValuePlaceholder="Enter First Value"
secondValuePlaceholder="Enter Second Value"
onChange={handleInputChange}
/>
</RecoilRoot>
);
};

23
docs/src/ui/input/components/iconPickerCode.js Normal file
View File

@ -0,0 +1,23 @@
import { RecoilRoot } from "recoil";
import React, { useState } from "react";
import { IconPicker } from "@/ui/input/components/IconPicker";
export const MyComponent = () => {
const [selectedIcon, setSelectedIcon] = useState("");
const handleIconChange = ({ iconKey, Icon }) => {
console.log("Selected Icon:", iconKey);
setSelectedIcon(iconKey);
};
return (
<RecoilRoot>
<IconPicker
disabled={false}
onChange={handleIconChange}
selectedIconKey={selectedIcon}
variant="primary"
/>
</RecoilRoot>
);
};

5
docs/src/ui/input/components/imageInputCode.js Normal file
View File

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

25
docs/src/ui/input/components/radioCode.js Normal file
View File

@ -0,0 +1,25 @@
import { Radio } from "@/ui/input/components/Radio";
export const MyComponent = () => {
const handleRadioChange = (event) => {
console.log("Radio button changed:", event.target.checked);
};
const handleCheckedChange = (checked) => {
console.log("Checked state changed:", checked);
};
return (
<Radio
checked={true}
value="Option 1"
onChange={handleRadioChange}
onCheckedChange={handleCheckedChange}
size="large"
disabled={false}
labelPosition="right"
/>
);
};

20
docs/src/ui/input/components/radioGroupCode.js Normal file
View File

@ -0,0 +1,20 @@
import React, { useState } from "react";
import { Radio } from "@/ui/input/components/Radio";
import { RadioGroup } from "@/ui/input/components/RadioGroup";
export const MyComponent = () => {
const [selectedValue, setSelectedValue] = useState("Option 1");
const handleChange = (event) => {
setSelectedValue(event.target.value);
};
return (
<RadioGroup value={selectedValue} onChange={handleChange}>
<Radio value="Option 1" />
<Radio value="Option 2" />
<Radio value="Option 3" />
</RadioGroup>
);
};

9
docs/src/ui/uiComponents.css Normal file
View File

@ -0,0 +1,9 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
body {
font-family: 'Inter', sans-serif;
}
html {
font-size: 13px;
}

2
front/src/modules/ui/display/pill/components/SoonPill.tsx
View File

@ -5,7 +5,7 @@ const StyledSoonPill = styled.span`
background: ${({ theme }) => theme.background.transparent.light}; background: ${({ theme }) => theme.background.transparent.light};
border-radius: 50px; border-radius: 50px;
color: ${({ theme }) => theme.font.color.light}; color: ${({ theme }) => theme.font.color.light};
display: flex; display: inline-block;
font-size: ${({ theme }) => theme.font.size.xs}; font-size: ${({ theme }) => theme.font.size.xs};
font-style: normal; font-style: normal;
font-weight: ${({ theme }) => theme.font.weight.medium}; font-weight: ${({ theme }) => theme.font.weight.medium};

2
front/src/modules/ui/display/tag/components/Tag.tsx
View File

@ -27,7 +27,7 @@ const StyledTag = styled.h3<{
background: ${({ color, theme }) => theme.tag.background[color]}; background: ${({ color, theme }) => theme.tag.background[color]};
border-radius: ${({ theme }) => theme.border.radius.sm}; border-radius: ${({ theme }) => theme.border.radius.sm};
color: ${({ color, theme }) => theme.tag.text[color]}; color: ${({ color, theme }) => theme.tag.text[color]};
display: flex; display: inline-block;
flex-direction: row; flex-direction: row;
font-size: ${({ theme }) => theme.font.size.md}; font-size: ${({ theme }) => theme.font.size.md};
font-style: normal; font-style: normal;

2
front/src/modules/ui/input/button/components/FloatingButtonGroup.tsx
View File

@ -8,7 +8,7 @@ const StyledFloatingButtonGroupContainer = styled.div`
border-radius: ${({ theme }) => theme.border.radius.md}; border-radius: ${({ theme }) => theme.border.radius.md};
box-shadow: ${({ theme }) => box-shadow: ${({ theme }) =>
`0px 2px 4px 0px ${theme.background.transparent.light}, 0px 0px 4px 0px ${theme.background.transparent.medium}`}; `0px 2px 4px 0px ${theme.background.transparent.light}, 0px 0px 4px 0px ${theme.background.transparent.medium}`};
display: flex; display: inline-flex;
`; `;
export type FloatingButtonGroupProps = Pick<FloatingButtonProps, 'size'> & { export type FloatingButtonGroupProps = Pick<FloatingButtonProps, 'size'> & {

2
front/src/modules/ui/input/button/components/FloatingIconButtonGroup.tsx
View File

@ -15,7 +15,7 @@ const StyledFloatingIconButtonGroupContainer = styled.div`
border-radius: ${({ theme }) => theme.border.radius.sm}; border-radius: ${({ theme }) => theme.border.radius.sm};
box-shadow: ${({ theme }) => box-shadow: ${({ theme }) =>
`0px 2px 4px 0px ${theme.background.transparent.light}, 0px 0px 4px 0px ${theme.background.transparent.medium}`}; `0px 2px 4px 0px ${theme.background.transparent.light}, 0px 0px 4px 0px ${theme.background.transparent.medium}`};
display: flex; display: inline-flex;
gap: 2px; gap: 2px;
padding: 2px; padding: 2px;
`; `;

28
front/tsup.ui.index.tsx
View File

@ -12,5 +12,31 @@ declare module '@emotion/react' {
export * from './src/modules/ui/display/checkmark/components/Checkmark'; export * from './src/modules/ui/display/checkmark/components/Checkmark';
export * from './src/modules/ui/display/checkmark/components/AnimatedCheckmark' export * from './src/modules/ui/display/checkmark/components/AnimatedCheckmark'
export * from './src/modules/ui/display/chip/components/Chip' export * from './src/modules/ui/display/chip/components/Chip'
export * from './src/modules/ui/display/chip/components/EntityChip'
export * from './src/modules/ui/display/icon/components/IconAddressBook'
export * from './src/modules/ui/display/pill/components/SoonPill'
export * from './src/modules/ui/display/tag/components/Tag'
export * from './src/modules/ui/display/tooltip/AppTooltip'
export * from './src/modules/ui/display/tooltip/OverflowingTextWithTooltip'
export * from './src/modules/ui/feedback/progress-bar/components/ProgressBar'
export * from './src/modules/ui/feedback/progress-bar/components/CircularProgressBar'
export * from './src/modules/ui/input/button/components/Button'
export * from './src/modules/ui/input/button/components/ButtonGroup'
export * from './src/modules/ui/input/button/components/FloatingButton'
export * from './src/modules/ui/input/button/components/FloatingButtonGroup'
export * from './src/modules/ui/input/button/components/FloatingIconButton'
export * from './src/modules/ui/input/button/components/FloatingIconButtonGroup'
export * from './src/modules/ui/input/button/components/LightButton'
export * from './src/modules/ui/input/button/components/LightIconButton'
export * from './src/modules/ui/input/button/components/MainButton'
export * from './src/modules/ui/input/button/components/RoundedIconButton'
export * from './src/modules/ui/input/color-scheme/components/ColorSchemeCard'
export * from './src/modules/ui/input/color-scheme/components/ColorSchemePicker'
export * from './src/modules/ui/input/components/AutosizeTextInput'
export * from './src/modules/ui/input/components/Checkbox'
export * from './src/modules/ui/input/components/EntityTitleDoubleTextInput'
export * from './src/modules/ui/input/components/IconPicker'
export * from './src/modules/ui/input/components/ImageInput'
export * from './src/modules/ui/input/components/Radio'
export * from './src/modules/ui/input/components/RadioGroup'
export * from './src/modules/ui/input/button/components/Button'; export * from './src/modules/ui/input/button/components/Button';
export * from './src/modules/ui/display/icon/components/IconAddressBook';