admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

input component ui docs (#2873)

Browse Source
This commit is contained in:
Nimra Ahmed
2023-12-09 14:39:50 +05:00
committed by GitHub
parent 9d4ed323a7
commit 3913e1b6a0
14 changed files with 467 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
docs/docs/contributor/frontend/ui-components/input/select.mdx Normal file
View File

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

164
docs/docs/contributor/frontend/ui-components/input/text-input.mdx
View File

@ -1,5 +1,5 @@
---
title: Text Inputs
title: Text
sidebar_position: 3
sidebar_custom_props:
icon: TbTextSize
@ -8,8 +8,102 @@ sidebar_custom_props:
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
@ -155,6 +249,74 @@ Displays a pair of text inputs side by side, allowing the user to edit two relat
</tbody>
</table>
</TabItem>
</Tabs>
## Text Area
Allows you to create multi-line text inputs.
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['@/ui/input/components/TextArea']}
componentCode={textAreaCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<td>disabled</td>
<td>boolean</td>
<td>Indicates whether the text area is disabled</td>
<td></td>
</tr>
<tr>
<td>minRows</td>
<td>number</td>
<td>Minimum number of visible rows for the text area. </td>
<td>1</td>
</tr>
<tr>
<td>onChange</td>
<td>function</td>
<td>Callback function triggered when the text area content changes</td>
<td></td>
</tr>
<tr>
<td>placeholder</td>
<td>string</td>
<td>Placeholder text displayed when the text area is empty</td>
<td></td>
</tr>
<tr>
<td>value</td>
<td>string</td>
<td>The current value of the text area</td>
<td>Empty string</td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>

71
docs/docs/contributor/frontend/ui-components/input/toggle.mdx Normal file
View File

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

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

@ -59,4 +59,7 @@ export {
TbUpload,
TbVariable,
TbSchema,
TbSelect,
TbToggleRight,
TbTextPlus,
} from "react-icons/tb";

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

@ -93,6 +93,8 @@ return (<ThemeProvider theme={lightTheme}>
"deep-equal": "latest",
"lodash.debounce": "latest",
"react-loading-skeleton": "latest",
"zod": "latest",
},
}}
>

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

@ -1,7 +1,7 @@
export { ThemeProvider } from '@emotion/react';
import * as react_jsx_runtime from 'react/jsx-runtime';
import * as React$1 from 'react';
import React__default, { ReactNode, MouseEvent, FunctionComponent, ComponentProps } from 'react';
import React__default, { ReactNode, MouseEvent, FunctionComponent, ComponentProps, InputHTMLAttributes } from 'react';
import { motion, AnimationControls } from 'framer-motion';
import { TablerIconsProps } from '@tabler/icons-react';
import { PlacesType, PositionStrategy } from 'react-tooltip';
@ -40,6 +40,8 @@ declare const lightTheme: {
xs: string;
sm: string;
md: string;
xl: string;
pill: string;
rounded: string;
};
color: {
@ -367,9 +369,6 @@ declare const mainColors: {
};
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;
@ -671,9 +670,63 @@ type RadioGroupProps = React__default.PropsWithChildren & {
};
declare const RadioGroup: ({ value, onChange, onValueChange, children, }: RadioGroupProps) => react_jsx_runtime.JSX.Element;
type SelectProps<Value extends string | number | null> = {
className?: string;
disabled?: boolean;
dropdownScopeId: string;
label?: string;
onChange?: (value: Value) => void;
options: {
value: Value;
label: string;
Icon?: IconComponent;
}[];
value?: Value;
};
declare const Select: <Value extends string | number | null>({ className, disabled, dropdownScopeId, label, onChange, options, value, }: SelectProps<Value>) => react_jsx_runtime.JSX.Element;
type TextAreaProps = {
disabled?: boolean;
minRows?: number;
onChange?: (value: string) => void;
placeholder?: string;
value?: string;
};
declare const TextArea: ({ disabled, placeholder, minRows, value, onChange, }: TextAreaProps) => react_jsx_runtime.JSX.Element;
type TextInputComponentProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onKeyDown'> & {
className?: string;
label?: string;
onChange?: (text: string) => void;
fullWidth?: boolean;
disableHotkeys?: boolean;
error?: string;
RightIcon?: IconComponent;
onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
};
declare const TextInput: React$1.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "onKeyDown"> & {
className?: string | undefined;
label?: string | undefined;
onChange?: ((text: string) => void) | undefined;
fullWidth?: boolean | undefined;
disableHotkeys?: boolean | undefined;
error?: string | undefined;
RightIcon?: IconComponent | undefined;
onKeyDown?: ((event: React.KeyboardEvent<HTMLInputElement>) => void) | undefined;
} & React$1.RefAttributes<HTMLInputElement>>;
type ToggleSize = 'small' | 'medium';
type ToggleProps = {
value?: boolean;
onChange?: (value: boolean) => void;
color?: string;
toggleSize?: ToggleSize;
};
declare const Toggle: ({ value, onChange, color, toggleSize, }: ToggleProps) => react_jsx_runtime.JSX.Element;
declare module '@emotion/react' {
interface Theme extends ThemeType {
}
}
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 };
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, Select, SelectProps, SoonPill, Tag, TextArea, TextAreaProps, TextInput, TextInputComponentProps, Toggle, ToggleProps, ToggleSize, TooltipPosition, darkTheme, lightTheme };

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

File diff suppressed because one or more lines are too long

26
docs/src/ui/input/components/selectCode.js Normal file
View File

@ -0,0 +1,26 @@
import { RecoilRoot } from "recoil";
import { Select } from "@/ui/input/components/Select";
import { IconComponent } from "@/ui/display/icon/types/IconComponent";
export const MyComponent = () => {
const handleSelectChange = (selectedValue) => {
console.log(`Selected: ${selectedValue}`);
};
return (
<RecoilRoot>
<Select
className
disabled={false}
dropdownScopeId="exampleDropdown"
label="Select an option"
onChange={handleSelectChange}
options={[
{ value: "option1", label: "Option A", Icon: IconComponent },
{ value: "option2", label: "Option B", Icon: IconComponent },
]}
value="option1"
/>
</RecoilRoot>
);
};

13
docs/src/ui/input/components/textAreaCode.js Normal file
View File

@ -0,0 +1,13 @@
import { TextArea } from "@/ui/input/components/TextArea";
export const MyComponent = () => {
return (
<TextArea
disabled={false}
minRows={4}
onChange={()=>console.log('On change function fired')}
placeholder="Enter text here"
value=""
/>
);
};

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

@ -0,0 +1,27 @@
import { RecoilRoot } from "recoil";
import { TextInput } from "@/ui/input/components/TextInput";
export const MyComponent = () => {
const handleChange = (text) => {
console.log("Input changed:", text);
};
const handleKeyDown = (event) => {
console.log("Key pressed:", event.key);
};
return (
<RecoilRoot>
<TextInput
className
label="Username"
onChange={handleChange}
fullWidth={false}
disableHotkeys={false}
error="Invalid username"
onKeyDown={handleKeyDown}
RightIcon={null}
/>
</RecoilRoot>
);
};

12
docs/src/ui/input/components/toggleCode.js Normal file
View File

@ -0,0 +1,12 @@
import { Toggle } from "@/ui/input/components/Toggle";
export const MyComponent = () => {
return (
<Toggle
value = {true}
onChange = {()=>console.log('On Change event')}
color="green"
toggleSize = "medium"
/>
);
};

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

@ -29,7 +29,7 @@ const StyledControlContainer = styled.div<{ disabled?: boolean }>`
color: ${({ disabled, theme }) =>
disabled ? theme.font.color.tertiary : theme.font.color.primary};
cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
display: flex;
display: inline-flex;
gap: ${({ theme }) => theme.spacing(1)};
height: ${({ theme }) => theme.spacing(8)};
justify-content: space-between;

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

@ -35,7 +35,7 @@ export type TextInputComponentProps = Omit<
};
const StyledContainer = styled.div<Pick<TextInputComponentProps, 'fullWidth'>>`
display: flex;
display: inline-flex;
flex-direction: column;
width: ${({ fullWidth }) => (fullWidth ? `100%` : 'auto')};
`;

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

@ -40,3 +40,7 @@ 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/components/Select'
export * from './src/modules/ui/input/components/TextArea'
export * from './src/modules/ui/input/components/TextInput'
export * from './src/modules/ui/input/components/Toggle'