Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Sistent] Select component doc #6177

Merged
merged 11 commits into from
Feb 20, 2025
Prev Previous commit
Next Next commit
add code section
Signed-off-by: nganphan123 <[email protected]>
nganphan123 committed Jan 29, 2025
commit 248dce67050cffa43827854da2d469d7900d0867
277 changes: 277 additions & 0 deletions src/sections/Projects/Sistent/components/select/code.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,277 @@
import React from "react";

import { Button, SistentThemeProvider } from "@layer5/sistent";
import { CodeBlock } from "./code-block";
import { FaArrowRight } from "@react-icons/all-files/fa/FaArrowRight";
import { SistentLayout } from "../../sistent-layout";

import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
import SectionNav from "./section-nav";
import Header from "./header";
import { FormControl, InputLabel, MenuItem, Select } from "@mui/material";

const codes = {
"variant-outlined": `<SistentThemeProvider>
<Select>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</SistentThemeProvider>`,

"variant-filled": `<SistentThemeProvider>
<Select variant="filled">
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</SistentThemeProvider>`,

"variant-standard": `<SistentThemeProvider>
<Select variant="standard">
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</SistentThemeProvider>`,

"size-auto": `<SistentThemeProvider>
<Select autoWidth>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</SistentThemeProvider>`,

"size-small": `<SistentThemeProvider>
<Select size="small">
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</SistentThemeProvider>`,

"size-fullwidth": `<SistentThemeProvider>
<Select fullWidth>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</SistentThemeProvider>`,

"behavior-error-disabled": `<SistentThemeProvider>
<Select disabled>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
<Select error>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</SistentThemeProvider>`,

"behavior-required": `<SistentThemeProvider>
<FormControl required>
<InputLabel id="demo-select-label-outlined">Age</InputLabel>
<Select
labelId="demo-select-label-outlined"
label="Age"
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
</SistentThemeProvider>`,
};

const ButtonCode = () => {
const { isDark } = useStyledDarkMode();

return (
<SistentLayout title="Button">
<div className="content">
<Header />
<SectionNav />

<div className="main-content">
<a id="Select variants">
<h2>Select variants</h2>
</a>
<p>
The select comes in three types: Outlined, Filled, and Standard. To
specify the variant, pass a value to the variant prop.
</p>
<h3>Outlined</h3>
<p>
If not specified, the default variant of the select if outlined.
</p>
<div className="showcase">
<div className="items">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<Select defaultValue={10}>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</SistentThemeProvider>
</div>
<CodeBlock
name="outlined-selection"
code={codes["variant-outlined"]}
/>
</div>
<h3>Filled</h3>
<div className="showcase">
<div className="items">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<Select defaultValue={10} variant="filled">
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</SistentThemeProvider>
</div>
<CodeBlock name="filled-selection" code={codes["variant-filled"]} />
</div>
<h3>Standard</h3>
<div className="showcase">
<div className="items">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<Select defaultValue={10} variant="standard">
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</SistentThemeProvider>
</div>
<CodeBlock
name="standard-selection"
code={codes["variant-standard"]}
/>
</div>
<a id="Sizes">
<h2>Sizes</h2>
</a>
<p>
There are 3 size option for the select component: autowidth, small,
and fullWidth. Depending on the size of the select, different prop
can be passed to the component.
</p>
<h3>Autowidth</h3>
<p>
An autoWidth option is passed to the component to enable this
attribute
</p>
<div className="showcase">
<div className="items">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<Select defaultValue={10} autoWidth>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</SistentThemeProvider>
</div>
<CodeBlock name="size-auto" code={codes["size-auto"]} />
</div>
<h3>Small</h3>
<p>
To generate small select, pass a size prop with a value of small
</p>
<div className="showcase">
<div className="items">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<Select defaultValue={10} size="small">
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</SistentThemeProvider>
</div>
<CodeBlock name="size-small" code={codes["size-small"]} />
</div>
<h3>Full width</h3>
<p>
The select will expand the full width of its parent when passed
fullWidth prop
</p>
<div className="showcase">
<div className="items">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<Select defaultValue={10} fullWidth>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</SistentThemeProvider>
</div>
<CodeBlock name="size-fullwidth" code={codes["size-fullwidth"]} />
</div>
<a id="Customize behaviors">
<h2>Customize behaviors</h2>
</a>
<p>
Additional props such as error, required, and disabled can be passed
to the select component to customize its behavior.
</p>
<div className="showcase">
<div className="items">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<Select disabled defaultValue={10}>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
<Select error defaultValue={10}>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</SistentThemeProvider>
</div>
<CodeBlock
name="behavior-error-disabled"
code={codes["behavior-error-disabled"]}
/>
</div>
<div className="showcase">
<div className="items">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<FormControl sx={{ width: "200px" }} required>
<InputLabel id="demo-select-label-outlined">Age</InputLabel>
<Select
labelId="demo-select-label-outlined"
id="demo-select-outlined"
label="Age"
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
</SistentThemeProvider>
</div>
<CodeBlock name="adding-icons" code={codes["behavior-required"]} />
<p>
<strong>NOTE:</strong>
</p>
<p>
When the select component is marked as required, an asterisk is
added to the label to indicate this to the user. It is recommended
to use this feature in conjunction with the label for better
clarity.
</p>
</div>
<a id="Customize select area">
<h2>Customize select area</h2>
</a>
</div>
</div>
</SistentLayout>
);
};

export default ButtonCode;