Migrated Developer Docs (#5683)
- Migrated developer docs to Twenty website - Modified User Guide and Docs layout to include sections and subsections **Section Example:** <img width="549" alt="Screenshot 2024-05-30 at 15 44 42" src="https://github.com/twentyhq/twenty/assets/102751374/41bd4037-4b76-48e6-bc79-48d3d6be9ab8"> **Subsection Example:** <img width="557" alt="Screenshot 2024-05-30 at 15 44 55" src="https://github.com/twentyhq/twenty/assets/102751374/f14c65a9-ab0c-4530-b624-5b20fc00511a"> - Created different components (Tabs, Tables, Editors etc.) for the mdx files **Tabs & Editor** <img width="665" alt="Screenshot 2024-05-30 at 15 47 39" src="https://github.com/twentyhq/twenty/assets/102751374/5166b5c7-b6cf-417d-9f29-b1f674c1c531"> **Tables** <img width="698" alt="Screenshot 2024-05-30 at 15 57 39" src="https://github.com/twentyhq/twenty/assets/102751374/2bbfe937-ec19-4004-ab00-f7a56e96db4a"> <img width="661" alt="Screenshot 2024-05-30 at 16 03 32" src="https://github.com/twentyhq/twenty/assets/102751374/ae95b47c-dd92-44f9-b535-ccdc953f71ff"> - Created a crawler for Twenty Developers (now that it will be on the twenty website). Once this PR is merged and the website is re-deployed, we need to start crawling and make sure the index name is ‘twenty-developer’ - Added a dropdown menu in the header to access User Guide and Developers + added Developers to footer https://github.com/twentyhq/twenty/assets/102751374/1bd1fbbd-1e65-4461-b18b-84d4ddbb8ea1 - Made new layout responsive Please fill in the information for each mdx file so that it can appear on its card, as well as in the ‘In this article’ section. Example with ‘Getting Started’ in the User Guide: <img width="786" alt="Screenshot 2024-05-30 at 16 29 39" src="https://github.com/twentyhq/twenty/assets/102751374/2714b01d-a664-4ddc-9291-528632ee12ea"> Example with info and sectionInfo filled in for 'Getting Started': <img width="620" alt="Screenshot 2024-05-30 at 16 33 57" src="https://github.com/twentyhq/twenty/assets/102751374/bc69e880-da6a-4b7e-bace-1effea866c11"> Please keep in mind that the images that are being used for Developers are the same as those found in User Guide and may not match the article. --------- Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
This commit is contained in:
Ady Beraud
210
packages/twenty-website/src/content/twenty-ui/input/text.mdx
Normal file
210
packages/twenty-website/src/content/twenty-ui/input/text.mdx
Normal file
@ -0,0 +1,210 @@
|
||||
---
|
||||
title: Text
|
||||
icon: TbTextSize
|
||||
image: /images/user-guide/notes/notes_header.png
|
||||
---
|
||||
|
||||
## Text Input
|
||||
|
||||
Allows users to enter and edit text.
|
||||
|
||||
<ArticleTabs label1="Usage" label2="Props">
|
||||
|
||||
<ArticleTab>
|
||||
|
||||
<SandpackEditor content={`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>
|
||||
);
|
||||
};
|
||||
`} />
|
||||
|
||||
|
||||
</ArticleTab>
|
||||
|
||||
<ArticleTab>
|
||||
|
||||
<ArticlePropsTable options={[
|
||||
['className', 'string', 'Optional name for additional styling', ''],
|
||||
['label', 'string', 'Represents the label for the input', ''],
|
||||
['onChange', 'function', 'The function called when the input value changes', ''],
|
||||
['fullWidth', 'boolean', 'Indicates whether the input should take up 100% of the width', ''],
|
||||
['disableHotkeys', 'boolean', 'Indicates whether hotkeys are enabled for the input', '`false`'],
|
||||
['error', 'string', 'Represents the error message to be displayed. When provided, it also adds an icon error on the right side of the input', ''],
|
||||
['onKeyDown', 'function', 'Called when a key is pressed down while the input field is focused. Receives a `React.KeyboardEvent` as an argument', ''],
|
||||
['RightIcon', 'IconComponent', 'An optional icon component displayed on the right side of the input', '']
|
||||
]} />
|
||||
|
||||
|
||||
The component also accepts other HTML input element props.
|
||||
|
||||
</ArticleTab>
|
||||
|
||||
</ArticleTabs>
|
||||
|
||||
|
||||
## Autosize Text Input
|
||||
|
||||
Text input component that automatically adjusts its height based on the content.
|
||||
|
||||
<ArticleTabs label1="Usage" label2="Props">
|
||||
|
||||
<ArticleTab>
|
||||
|
||||
<SandpackEditor content={`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>
|
||||
);
|
||||
};`} />
|
||||
|
||||
|
||||
</ArticleTab>
|
||||
|
||||
<ArticleTab>
|
||||
|
||||
<ArticlePropsTable options={[
|
||||
['onValidate', 'function', 'The callback function you want to trigger when the user validates the input', ''],
|
||||
['minRows', 'number', 'The minimum number of rows for the text area', '1'],
|
||||
['placeholder', 'string', 'The placeholder text you want to display when the text area is empty', ''],
|
||||
['onFocus', 'function', 'The callback function you want to trigger when the text area gains focus', ''],
|
||||
['variant', 'string', 'The variant of the input. Options include: `default`, `icon`, and `button`', 'default'],
|
||||
['buttonTitle', 'string', 'The title for the button (only applicable for the button variant)', ''],
|
||||
['value', 'string', 'The initial value for the text area', 'Empty string']
|
||||
]} />
|
||||
|
||||
|
||||
</ArticleTab>
|
||||
|
||||
</ArticleTabs>
|
||||
|
||||
|
||||
## Entity Title Double Text Input
|
||||
|
||||
Displays a pair of text inputs side by side, allowing the user to edit two related values simultaneously.
|
||||
|
||||
<ArticleTabs label1="Usage" label2="Props">
|
||||
|
||||
<ArticleTab>
|
||||
|
||||
<SandpackEditor content={`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(
|
||||
"Second Value"
|
||||
);
|
||||
|
||||
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>
|
||||
);
|
||||
};`} />
|
||||
|
||||
|
||||
</ArticleTab>
|
||||
|
||||
<ArticleTab>
|
||||
|
||||
<ArticlePropsTable options={[
|
||||
['firstValue', 'string', 'The value for the first text input'],
|
||||
['secondValue', 'string', 'The value for the second text input'],
|
||||
['firstValuePlaceholder', 'string', 'Placeholder text for the first text input, displayed when the input is empty'],
|
||||
['secondValuePlaceholder', 'string', 'Placeholder text for the second text input, displayed when the input is empty'],
|
||||
['onChange', 'function', 'The callback function you want to trigger when the text input changes']
|
||||
]} />
|
||||
|
||||
|
||||
</ArticleTab>
|
||||
</ArticleTabs>
|
||||
|
||||
|
||||
## Text Area
|
||||
|
||||
Allows you to create multi-line text inputs.
|
||||
|
||||
<ArticleTabs label1="Usage" label2="Props">
|
||||
<ArticleTab>
|
||||
|
||||
<SandpackEditor content={`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=""
|
||||
/>
|
||||
);
|
||||
};`} />
|
||||
|
||||
|
||||
</ArticleTab>
|
||||
|
||||
<ArticleTab>
|
||||
|
||||
<ArticlePropsTable options={[
|
||||
['disabled', 'boolean', 'Indicates whether the text area is disabled', ''],
|
||||
['minRows', 'number', 'Minimum number of visible rows for the text area.', '1'],
|
||||
['onChange', 'function', 'Callback function triggered when the text area content changes', ''],
|
||||
['placeholder', 'string', 'Placeholder text displayed when the text area is empty', ''],
|
||||
['value', 'string', 'The current value of the text area', 'Empty string']
|
||||
]} />
|
||||
|
||||
|
||||
</ArticleTab>
|
||||
</ArticleTabs>
|
||||
Reference in New Issue
Block a user