@learningpool/ui 1.6.3 → 1.6.6

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

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