@learningpool/ui 1.6.0-beta.9 → 1.6.1

package/src/stories/Components/Inputs/Select/Examples.stories.tsx

@@ -0,0 +1,803 @@
+import {
+  Box, Checkbox, Chip, Dialog, DialogActions, DialogContent, DialogTitle,
+  FormControl, FormHelperText, InputLabel, ListItemText, ListSubheader,
+  MenuItem, OutlinedInput
+} from '@mui/material'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import * as React from 'react'
+import { DOCS } from '../../../../docs'
+import Select, { SelectChangeEvent } from '../../../../lib/components/atoms/Select/Select'
+import Button from '../../../../lib/components/atoms/Button/Button'
+import AllCombinations from './AllCombinations'
+import MUINativeSelect from '@mui/material/NativeSelect'
+
+export default {
+  title: 'Components/Inputs/Select/Examples',
+  component: Select
+} as ComponentMeta<typeof Select>
+
+export const Default: ComponentStory<typeof Select> = (args): JSX.Element => {
+  const [age, setAge] = React.useState('')
+
+  const handleChange = (event: SelectChangeEvent): void => {
+    setAge(event.target.value)
+  }
+
+  return (
+    <Box sx={{ minWidth: 120 }}>
+      <FormControl fullWidth>
+        <InputLabel id="demo-simple-select-label">Age</InputLabel>
+        <Select
+          labelId="demo-simple-select-label"
+          id="demo-simple-select"
+          value={age}
+          label="Age"
+          onChange={handleChange}
+        >
+          <MenuItem value={10}>Ten</MenuItem>
+          <MenuItem value={20}>Twenty</MenuItem>
+          <MenuItem value={30}>Thirty</MenuItem>
+        </Select>
+      </FormControl>
+    </Box>
+  )
+}
+Default.parameters = {
+  docs: {
+    description: {
+      component: DOCS.Select.Default
+    }
+  },
+  controls: {
+    // exclude: /[a-zA-Z0-9]*/,
+    // hideNoControlsWarning: true
+  }
+}
+
+export const Variants: ComponentStory<typeof Select> = (args): JSX.Element => {
+  const [age, setAge] = React.useState('')
+
+  const handleChange = (event: SelectChangeEvent): void => {
+    setAge(event.target.value)
+  }
+
+  return (
+    <div>
+      <FormControl variant="standard" sx={{ m: 1, minWidth: 120 }}>
+        <InputLabel id="demo-simple-select-standard-label">Age</InputLabel>
+        <Select
+          labelId="demo-simple-select-standard-label"
+          id="demo-simple-select-standard"
+          value={age}
+          onChange={handleChange}
+          label="Age"
+        >
+          <MenuItem value="">
+            <em>None</em>
+          </MenuItem>
+          <MenuItem value={10}>Ten</MenuItem>
+          <MenuItem value={20}>Twenty</MenuItem>
+          <MenuItem value={30}>Thirty</MenuItem>
+        </Select>
+      </FormControl>
+      <FormControl variant="filled" sx={{ m: 1, minWidth: 120 }}>
+        <InputLabel id="demo-simple-select-filled-label">Age</InputLabel>
+        <Select
+          labelId="demo-simple-select-filled-label"
+          id="demo-simple-select-filled"
+          value={age}
+          onChange={handleChange}
+        >
+          <MenuItem value="">
+            <em>None</em>
+          </MenuItem>
+          <MenuItem value={10}>Ten</MenuItem>
+          <MenuItem value={20}>Twenty</MenuItem>
+          <MenuItem value={30}>Thirty</MenuItem>
+        </Select>
+      </FormControl>
+    </div>
+  )
+}
+Variants.parameters = {
+  docs: {
+    description: {
+      story: DOCS.Select.Variants
+    }
+  }
+}
+
+export const HelperText: ComponentStory<typeof Select> = (args): JSX.Element => {
+  const [age, setAge] = React.useState('')
+
+  const handleChange = (event: SelectChangeEvent): void => {
+    setAge(event.target.value)
+  }
+
+  return (
+    <div>
+      <FormControl sx={{ m: 1, minWidth: 120 }}>
+        <InputLabel id="demo-simple-select-helper-label">Age</InputLabel>
+        <Select
+          labelId="demo-simple-select-helper-label"
+          id="demo-simple-select-helper"
+          value={age}
+          label="Age"
+          onChange={handleChange}
+        >
+          <MenuItem value="">
+            <em>None</em>
+          </MenuItem>
+          <MenuItem value={10}>Ten</MenuItem>
+          <MenuItem value={20}>Twenty</MenuItem>
+          <MenuItem value={30}>Thirty</MenuItem>
+        </Select>
+        <FormHelperText>With label + helper text</FormHelperText>
+      </FormControl>
+      <FormControl sx={{ m: 1, minWidth: 120 }}>
+        <Select
+          value={age}
+          onChange={handleChange}
+          displayEmpty
+          inputProps={{ 'aria-label': 'Without label' }}
+        >
+          <MenuItem value="">
+            <em>None</em>
+          </MenuItem>
+          <MenuItem value={10}>Ten</MenuItem>
+          <MenuItem value={20}>Twenty</MenuItem>
+          <MenuItem value={30}>Thirty</MenuItem>
+        </Select>
+        <FormHelperText>Without label</FormHelperText>
+      </FormControl>
+    </div>
+  )
+}
+HelperText.parameters = {
+  docs: {
+    description: {
+      story: DOCS.Select.HelperText
+    }
+  }
+}
+
+export const AutoWidth: ComponentStory<typeof Select> = (args): JSX.Element => {
+  const [age, setAge] = React.useState('')
+
+  const handleChange = (event: SelectChangeEvent): void => {
+    setAge(event.target.value)
+  }
+
+  return (
+    <div>
+      <FormControl sx={{ m: 1, minWidth: 80 }}>
+        <InputLabel id="demo-simple-select-autowidth-label">Age</InputLabel>
+        <Select
+          labelId="demo-simple-select-autowidth-label"
+          id="demo-simple-select-autowidth"
+          value={age}
+          onChange={handleChange}
+          autoWidth
+          label="Age"
+        >
+          <MenuItem value="">
+            <em>None</em>
+          </MenuItem>
+          <MenuItem value={10}>Twenty</MenuItem>
+          <MenuItem value={21}>Twenty one</MenuItem>
+          <MenuItem value={22}>Twenty one and a half</MenuItem>
+        </Select>
+      </FormControl>
+    </div>
+  )
+}
+AutoWidth.parameters = {
+  docs: {
+    description: {
+      story: DOCS.Select.AutoWidth
+    }
+  },
+  controls: {
+    // exclude: /[a-zA-Z0-9]*/,
+    // hideNoControlsWarning: true
+  }
+}
+
+export const OtherProps: ComponentStory<typeof Select> = (args): JSX.Element => {
+  const [age, setAge] = React.useState('')
+
+  const handleChange = (event: SelectChangeEvent): void => {
+    setAge(event.target.value)
+  }
+
+  return (
+    <div>
+      <FormControl sx={{ m: 1, minWidth: 120 }} disabled>
+        <InputLabel id="demo-simple-select-disabled-label">Age</InputLabel>
+        <Select
+          labelId="demo-simple-select-disabled-label"
+          id="demo-simple-select-disabled"
+          value={age}
+          label="Age"
+          onChange={handleChange}
+        >
+          <MenuItem value="">
+            <em>None</em>
+          </MenuItem>
+          <MenuItem value={10}>Ten</MenuItem>
+          <MenuItem value={20}>Twenty</MenuItem>
+          <MenuItem value={30}>Thirty</MenuItem>
+        </Select>
+        <FormHelperText>Disabled</FormHelperText>
+      </FormControl>
+      <FormControl sx={{ m: 1, minWidth: 120 }} error>
+        <InputLabel id="demo-simple-select-error-label">Age</InputLabel>
+        <Select
+          labelId="demo-simple-select-error-label"
+          id="demo-simple-select-error"
+          value={age}
+          label="Age"
+          onChange={handleChange}
+          renderValue={(value) => value}
+        >
+          <MenuItem value="">
+            <em>None</em>
+          </MenuItem>
+          <MenuItem value={10}>Ten</MenuItem>
+          <MenuItem value={20}>Twenty</MenuItem>
+          <MenuItem value={30}>Thirty</MenuItem>
+        </Select>
+        <FormHelperText>Error</FormHelperText>
+      </FormControl>
+      <FormControl sx={{ m: 1, minWidth: 120 }}>
+        <InputLabel id="demo-simple-select-readonly-label">Age</InputLabel>
+        <Select
+          labelId="demo-simple-select-readonly-label"
+          id="demo-simple-select-readonly"
+          value={age}
+          label="Age"
+          onChange={handleChange}
+          inputProps={{ readOnly: true }}
+        >
+          <MenuItem value="">
+            <em>None</em>
+          </MenuItem>
+          <MenuItem value={10}>Ten</MenuItem>
+          <MenuItem value={20}>Twenty</MenuItem>
+          <MenuItem value={30}>Thirty</MenuItem>
+        </Select>
+        <FormHelperText>Read only</FormHelperText>
+      </FormControl>
+      <FormControl required sx={{ m: 1, minWidth: 120 }}>
+        <InputLabel id="demo-simple-select-required-label">Age</InputLabel>
+        <Select
+          labelId="demo-simple-select-required-label"
+          id="demo-simple-select-required"
+          value={age}
+          label="Age *"
+          onChange={handleChange}
+        >
+          <MenuItem value="">
+            <em>None</em>
+          </MenuItem>
+          <MenuItem value={10}>Ten</MenuItem>
+          <MenuItem value={20}>Twenty</MenuItem>
+          <MenuItem value={30}>Thirty</MenuItem>
+        </Select>
+        <FormHelperText>Required</FormHelperText>
+      </FormControl>
+    </div>
+  )
+}
+OtherProps.parameters = {
+  docs: {
+    description: {
+      story: DOCS.Select.OtherProps
+    }
+  },
+  controls: {
+    // exclude: /[a-zA-Z0-9]*/,
+    // hideNoControlsWarning: true
+  }
+}
+
+export const NativeSelect: ComponentStory<typeof MUINativeSelect> = (args): JSX.Element => {
+  return (
+    <Box sx={{ minWidth: 120 }}>
+      <FormControl fullWidth>
+        <InputLabel variant="standard" htmlFor="uncontrolled-native">
+          Age
+        </InputLabel>
+        <MUINativeSelect
+          defaultValue={30}
+          inputProps={{
+            name: 'age',
+            id: 'uncontrolled-native'
+          }}
+        >
+          <option value={10}>Ten</option>
+          <option value={20}>Twenty</option>
+          <option value={30}>Thirty</option>
+        </MUINativeSelect>
+      </FormControl>
+    </Box>
+  )
+}
+NativeSelect.parameters = {
+  docs: {
+    description: {
+      story: DOCS.Select.NativeSelect
+    }
+  },
+  controls: {
+    // exclude: /[a-zA-Z0-9]*/,
+    // hideNoControlsWarning: true
+  }
+}
+
+const ITEM_HEIGHT = 48
+const ITEM_PADDING_TOP = 8
+const MenuProps = {
+  PaperProps: {
+    style: {
+      maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
+      width: 250
+    }
+  }
+}
+
+const names = [
+  'Oliver Hansen',
+  'Van Henry',
+  'April Tucker',
+  'Ralph Hubbard',
+  'Omar Alexander',
+  'Carlos Abbott',
+  'Miriam Wagner',
+  'Bradley Wilkerson',
+  'Virginia Andrews',
+  'Kelly Snyder'
+]
+
+// function getStyles(name: string, personName: string[], theme: Theme) {
+//   return {
+//     fontWeight:
+//       personName.indexOf(name) === -1
+//         ? theme.typography.fontWeightRegular
+//         : theme.typography.fontWeightMedium,
+//   };
+// }
+
+export const MultipleSelect: ComponentStory<typeof Select> = (args): JSX.Element => {
+  // const theme = useTheme();
+  const [personName, setPersonName] = React.useState<string[]>([])
+
+  const handleChange = (event: SelectChangeEvent<typeof personName>): void => {
+    const {
+      target: { value }
+    } = event
+    setPersonName(
+      // On autofill we get a stringified value.
+      typeof value === 'string' ? value.split(',') : value
+    )
+  }
+
+  return (
+    <div>
+      <FormControl sx={{ m: 1, width: 300 }}>
+        <InputLabel id="demo-multiple-name-label">Name</InputLabel>
+        <Select
+          labelId="demo-multiple-name-label"
+          id="demo-multiple-name"
+          multiple
+          value={personName}
+          onChange={handleChange}
+          input={<OutlinedInput label="Name" />}
+          MenuProps={MenuProps}
+        >
+          {names.map((name) => (
+            <MenuItem
+              key={name}
+              value={name}
+              // style={getStyles(name, personName, theme)}
+            >
+              {name}
+            </MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+    </div>
+  )
+}
+MultipleSelect.parameters = {
+  docs: {
+    description: {
+      story: DOCS.Select.MultipleSelect
+    }
+  }
+}
+
+export const Checkmarks: ComponentStory<typeof Select> = (args): JSX.Element => {
+  const [personName, setPersonName] = React.useState<string[]>([])
+
+  const handleChange = (event: SelectChangeEvent<typeof personName>): void => {
+    const {
+      target: { value }
+    } = event
+    setPersonName(
+      // On autofill we get a stringified value.
+      typeof value === 'string' ? value.split(',') : value
+    )
+  }
+
+  return (
+    <div>
+      <FormControl sx={{ m: 1, width: 300 }}>
+        <InputLabel id="demo-multiple-checkbox-label">Tag</InputLabel>
+        <Select
+          labelId="demo-multiple-checkbox-label"
+          id="demo-multiple-checkbox"
+          multiple
+          value={personName}
+          onChange={handleChange}
+          input={<OutlinedInput label="Tag" />}
+          renderValue={(selected) => selected.join(', ')}
+          MenuProps={MenuProps}
+        >
+          {names.map((name) => (
+            <MenuItem key={name} value={name}>
+              <Checkbox checked={personName.includes(name)} />
+              <ListItemText primary={name} />
+            </MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+    </div>
+  )
+}
+Checkmarks.parameters = {
+  docs: {
+    description: {
+      story: DOCS.Select.Checkmarks
+    }
+  }
+}
+
+export const Chips: ComponentStory<typeof Select> = (args): JSX.Element => {
+  const [personName, setPersonName] = React.useState<string[]>([])
+
+  const handleChange = (event: SelectChangeEvent<typeof personName>): void => {
+    const {
+      target: { value }
+    } = event
+    setPersonName(
+      // On autofill we get a stringified value.
+      typeof value === 'string' ? value.split(',') : value
+    )
+  }
+
+  return (
+    <div>
+      <FormControl sx={{ m: 1, width: 300 }}>
+        <InputLabel id="demo-multiple-chip-label">Chip</InputLabel>
+        <Select
+          labelId="demo-multiple-chip-label"
+          id="demo-multiple-chip"
+          multiple
+          value={personName}
+          onChange={handleChange}
+          input={<OutlinedInput id="select-multiple-chip" label="Chip" />}
+          renderValue={(selected) => (
+            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
+              {selected.map((value) => (
+                <Chip key={value} label={value} />
+              ))}
+            </Box>
+          )}
+          MenuProps={MenuProps}
+        >
+          {names.map((name) => (
+            <MenuItem
+              key={name}
+              value={name}
+              // style={getStyles(name, personName, theme)}
+            >
+              {name}
+            </MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+    </div>
+  )
+}
+Chips.parameters = {
+  docs: {
+    description: {
+      story: DOCS.Select.Chips
+    }
+  }
+}
+
+export const Placeholder: ComponentStory<typeof Select> = (args): JSX.Element => {
+  const [personName, setPersonName] = React.useState<string[]>([])
+
+  const handleChange = (event: SelectChangeEvent<typeof personName>): void => {
+    const {
+      target: { value }
+    } = event
+    setPersonName(
+      // On autofill we get a stringified value.
+      typeof value === 'string' ? value.split(',') : value
+    )
+  }
+
+  return (
+    <div>
+      <FormControl sx={{ m: 1, width: 300, mt: 3 }}>
+        <Select
+          multiple
+          displayEmpty
+          value={personName}
+          onChange={handleChange}
+          input={<OutlinedInput />}
+          renderValue={(selected) => {
+            if (selected.length === 0) {
+              return <em>Placeholder</em>
+            }
+
+            return selected.join(', ')
+          }}
+          MenuProps={MenuProps}
+          inputProps={{ 'aria-label': 'Without label' }}
+        >
+          <MenuItem disabled value="">
+            <em>Placeholder</em>
+          </MenuItem>
+          {names.map((name) => (
+            <MenuItem
+              key={name}
+              value={name}
+              // style={getStyles(name, personName, theme)}
+            >
+              {name}
+            </MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+    </div>
+  )
+}
+Placeholder.parameters = {
+  docs: {
+    description: {
+      story: DOCS.Select.Placeholder
+    }
+  }
+}
+
+export const Native: ComponentStory<typeof Select> = (args): JSX.Element => {
+  const [personName, setPersonName] = React.useState<string[]>([])
+  const handleChangeMultiple = (event: React.ChangeEvent<HTMLSelectElement>): void => {
+    const { options } = event.target
+    const value: string[] = []
+    for (let i = 0, l = options.length; i < l; i += 1) {
+      if (options[i].selected) {
+        value.push(options[i].value)
+      }
+    }
+    setPersonName(value)
+  }
+
+  return (
+    <div>
+      <FormControl sx={{ m: 1, minWidth: 120, maxWidth: 300 }}>
+        <InputLabel shrink htmlFor="select-multiple-native">
+          Native
+        </InputLabel>
+        <Select
+          multiple
+          native
+          value={personName}
+          // @ts-expect-error Typings are not considering `native`
+          onChange={handleChangeMultiple}
+          label="Native"
+          inputProps={{
+            id: 'select-multiple-native'
+          }}
+        >
+          {names.map((name) => (
+            <option key={name} value={name}>
+              {name}
+            </option>
+          ))}
+        </Select>
+      </FormControl>
+    </div>
+  )
+}
+Native.parameters = {
+  docs: {
+    description: {
+      story: DOCS.Select.Native
+    }
+  }
+}
+
+export const Controlled: ComponentStory<typeof Select> = (args): JSX.Element => {
+  const [age, setAge] = React.useState<string | number>('')
+  const [open, setOpen] = React.useState(false)
+
+  const handleChange = (event: SelectChangeEvent<typeof age>): void => {
+    setAge(event.target.value)
+  }
+
+  const handleClose = (): void => {
+    setOpen(false)
+  }
+
+  const handleOpen = (): void => {
+    setOpen(true)
+  }
+
+  return (
+    <div>
+      <Button sx={{ display: 'block', mt: 2 }} onClick={handleOpen}>
+        Open the select
+      </Button>
+      <FormControl sx={{ m: 1, minWidth: 120 }}>
+        <InputLabel id="demo-controlled-open-select-label">Age</InputLabel>
+        <Select
+          labelId="demo-controlled-open-select-label"
+          id="demo-controlled-open-select"
+          open={open}
+          onClose={handleClose}
+          onOpen={handleOpen}
+          value={age}
+          label="Age"
+          onChange={handleChange}
+        >
+          <MenuItem value="">
+            <em>None</em>
+          </MenuItem>
+          <MenuItem value={10}>Ten</MenuItem>
+          <MenuItem value={20}>Twenty</MenuItem>
+          <MenuItem value={30}>Thirty</MenuItem>
+        </Select>
+      </FormControl>
+    </div>
+  )
+}
+Controlled.parameters = {
+  docs: {
+    description: {
+      story: DOCS.Select.Controlled
+    }
+  }
+}
+
+export const WithDialog: ComponentStory<typeof Select> = (args): JSX.Element => {
+  const [open, setOpen] = React.useState(false)
+  const [age, setAge] = React.useState<number | string>('')
+
+  const handleChange = (event: SelectChangeEvent<typeof age>): void => {
+    setAge(Number(event.target.value) || '')
+  }
+
+  const handleClickOpen = (): void => {
+    setOpen(true)
+  }
+
+  const handleClose = (event: React.SyntheticEvent<unknown>, reason?: string): void => {
+    if (reason !== 'backdropClick') {
+      setOpen(false)
+    }
+  }
+
+  return (
+    <div>
+      <Button onClick={handleClickOpen}>Open select dialog</Button>
+      <Dialog disableEscapeKeyDown open={open} onClose={handleClose}>
+        <DialogTitle>Fill the form</DialogTitle>
+        <DialogContent>
+          <Box component="form" sx={{ display: 'flex', flexWrap: 'wrap' }}>
+            <FormControl sx={{ m: 1, minWidth: 120 }}>
+              <InputLabel htmlFor="demo-dialog-native">Age</InputLabel>
+              <Select
+                native
+                value={age}
+                onChange={handleChange}
+                input={<OutlinedInput label="Age" id="demo-dialog-native" />}
+              >
+                <option aria-label="None" value="" />
+                <option value={10}>Ten</option>
+                <option value={20}>Twenty</option>
+                <option value={30}>Thirty</option>
+              </Select>
+            </FormControl>
+            <FormControl sx={{ m: 1, minWidth: 120 }}>
+              <InputLabel id="demo-dialog-select-label">Age</InputLabel>
+              <Select
+                labelId="demo-dialog-select-label"
+                id="demo-dialog-select"
+                value={age}
+                onChange={handleChange}
+                input={<OutlinedInput label="Age" />}
+              >
+                <MenuItem value="">
+                  <em>None</em>
+                </MenuItem>
+                <MenuItem value={10}>Ten</MenuItem>
+                <MenuItem value={20}>Twenty</MenuItem>
+                <MenuItem value={30}>Thirty</MenuItem>
+              </Select>
+            </FormControl>
+          </Box>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleClose}>Cancel</Button>
+          <Button onClick={handleClose}>Ok</Button>
+        </DialogActions>
+      </Dialog>
+    </div>
+  )
+}
+WithDialog.parameters = {
+  docs: {
+    description: {
+      story: DOCS.Select.WithDialog
+    }
+  }
+}
+
+export const Grouping: ComponentStory<typeof Select> = (args): JSX.Element => {
+  return (
+    <div>
+      <FormControl sx={{ m: 1, minWidth: 120 }}>
+        <InputLabel htmlFor="grouped-native-select">Grouping</InputLabel>
+        <Select native defaultValue="" id="grouped-native-select" label="Grouping">
+          <option aria-label="None" value="" />
+          <optgroup label="Category 1">
+            <option value={1}>Option 1</option>
+            <option value={2}>Option 2</option>
+          </optgroup>
+          <optgroup label="Category 2">
+            <option value={3}>Option 3</option>
+            <option value={4}>Option 4</option>
+          </optgroup>
+        </Select>
+      </FormControl>
+      <FormControl sx={{ m: 1, minWidth: 120 }}>
+        <InputLabel htmlFor="grouped-select">Grouping</InputLabel>
+        <Select defaultValue="" id="grouped-select" label="Grouping">
+          <MenuItem value="">
+            <em>None</em>
+          </MenuItem>
+          <ListSubheader>Category 1</ListSubheader>
+          <MenuItem value={1}>Option 1</MenuItem>
+          <MenuItem value={2}>Option 2</MenuItem>
+          <ListSubheader>Category 2</ListSubheader>
+          <MenuItem value={3}>Option 3</MenuItem>
+          <MenuItem value={4}>Option 4</MenuItem>
+        </Select>
+      </FormControl>
+    </div>
+  )
+}
+Grouping.parameters = {
+  docs: {
+    description: {
+      story: DOCS.Select.Grouping
+    }
+  }
+}
+
+export const All: ComponentStory<typeof AllCombinations> = (args): JSX.Element => (
+  <AllCombinations />
+)
+All.parameters = {
+  docs: {
+    description: {
+      story: DOCS.Select.All
+    }
+  }
+}