@junyiacademy/ui-test 0.0.14 → 1.5.0

package/src/lib/select/Select.stories.tsx

@@ -1,297 +0,0 @@
-import React, { useState } from 'react'
-import { Story, Meta } from '@storybook/react'
-import { Theme, styled } from '@material-ui/core/styles'
-import { InputAdornment } from '@material-ui/core'
-import { Visibility } from '@material-ui/icons'
-import { Select } from './Select'
-import SelectMenuItem from '../menu-item/SelectMenuItem'
-import { SelectProps } from '../../interfaces'
-
-export default {
-  component: Select,
-  title: 'Select',
-  argTypes: {
-    color: {
-      type: { name: 'string', required: false },
-      description:
-        'The color of the component. It supports those theme colors that make sense for this component.',
-      table: {
-        type: { summary: 'primary | secondary' },
-        defaultValue: { summary: 'primary' },
-      },
-      options: ['primary', 'secondary'],
-      control: { type: 'radio' },
-    },
-    variant: {
-      type: { name: 'string', required: false },
-      description: 'The variant to use.',
-      table: {
-        type: { summary: 'standard | outlined' },
-        defaultValue: { summary: 'standard' },
-      },
-      options: ['standard', 'outlined'],
-      control: { type: 'radio' },
-    },
-    size: {
-      type: { name: 'string', required: false },
-      description: `Adjust size`,
-      table: {
-        type: { summary: 'medium | small' },
-        defaultValue: { summary: 'small' },
-      },
-      options: ['small', 'medium'],
-      control: { type: 'radio' },
-    },
-    width: {
-      type: { name: 'number', required: false },
-      description: `Adjust width`,
-      table: {
-        type: { summary: 'number' },
-        defaultValue: { summary: 'auto' },
-      },
-      control: { type: 'number' },
-    },
-    paperMaxHeight: {
-      type: { name: 'number', required: false },
-      description: `Adjust select menu paper max height.`,
-      table: {
-        type: { summary: 'number' },
-        defaultValue: { summary: 'auto' },
-      },
-      control: { type: 'number' },
-    },
-    hasLabel: {
-      type: { name: 'boolean', required: false },
-      description:
-        'If true, the label is displayed. Always true on StandardSelect.',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: true },
-      },
-      control: { type: 'boolean' },
-    },
-    hasShrink: {
-      type: { name: 'boolean', required: false },
-      description: 'If true, the label is displayed and shrunk.',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: false },
-      },
-      control: { type: 'boolean' },
-    },
-    placeholder: {
-      type: { name: 'string', required: true },
-      description: `The label title`,
-      table: {
-        type: { summary: 'string' },
-        defaultValue: { summary: '請選擇' },
-      },
-      control: { type: 'text' },
-    },
-    value: {
-      type: { name: 'any', required: false },
-      description: `The input value. Providing an empty string will select no options. This prop is required when the native prop is false (default). Set to an empty string '' if you don't want any of the available options to be selected.
-      If the value is an object it must have reference equality with the option in order to be selected. If the value is not an object, the string representation must match with the string representation of the option in order to be selected.`,
-      table: {
-        type: { summary: 'any' },
-        defaultValue: { summary: '' },
-      },
-    },
-    disabled: {
-      type: { name: 'boolean', required: false },
-      description: 'If true, the input element will be disabled.',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: false },
-      },
-      control: { type: 'boolean' },
-    },
-    error: {
-      type: { name: 'boolean', required: false },
-      description: 'If true, the label will be displayed in an error state.',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: false },
-      },
-      control: { type: 'boolean' },
-    },
-    helperText: {
-      type: { name: 'string', required: true },
-      description: `Display the helper text.`,
-      table: {
-        type: { summary: 'string' },
-        defaultValue: { summary: '' },
-      },
-      control: { type: 'text' },
-    },
-    SelectProps: {
-      type: { name: 'any', required: false },
-      description: 'Attributes applied to inner Select element.',
-      table: {
-        type: { summary: 'any' },
-      },
-    },
-    CommonInputProps: {
-      type: { name: 'any', required: false },
-      description:
-        'Attributes applied to to inner OutlinedInput element on OutlinedSelect or Input element on StandardSelect.',
-      table: {
-        type: { summary: 'any' },
-      },
-    },
-  },
-} as Meta
-
-const PLACEHOLDER = 'Please select an option'
-const ERROR_PLACEHOLDER = 'Please select an option'
-const PREFIX = 'JuiSelect'
-
-const classes = {
-  inputAdornmentRoot: `${PREFIX}-inputAdornmentRoot`,
-}
-
-interface StyledInputAdornmentProps {
-  disabled: boolean
-  theme?: Theme
-}
-
-const StyledInputAdornment = styled(({ disabled: _disabled, ...props }) => (
-  <InputAdornment
-    classes={{
-      root: classes.inputAdornmentRoot,
-    }}
-    {...props}
-  />
-))(({ disabled, theme }: StyledInputAdornmentProps) => ({
-  height: '100%',
-  [`&.${classes.inputAdornmentRoot}`]: {
-    color: disabled
-      ? theme.palette.action.disabled
-      : theme.palette.action.active,
-  },
-}))
-
-// Standard Select start with here.
-const SelectWithMenu = (props: SelectProps) => {
-  const [item, setItem] = useState<string>('')
-
-  const handleChange = (event) => {
-    setItem(event.target.value)
-  }
-
-  return (
-    <Select
-      value={item}
-      SelectProps={{
-        onChange: (e) => {
-          handleChange(e)
-        },
-      }}
-      {...props}
-    >
-      <SelectMenuItem width={props.width} value='' disabled>
-        {PLACEHOLDER}
-      </SelectMenuItem>
-      <SelectMenuItem width={props.width} value='Option1'>
-        This is a select menu item
-      </SelectMenuItem>
-      <SelectMenuItem width={props.width} value='Option2'>
-        This is option 2
-      </SelectMenuItem>
-    </Select>
-  )
-}
-
-const ValueOnlyStory: Story<SelectProps> = (args) => (
-  <SelectWithMenu {...args} />
-)
-
-export const ValueOnly = ValueOnlyStory.bind({})
-
-ValueOnly.args = {
-  color: 'primary',
-  variant: 'standard',
-  size: 'small',
-  width: 300,
-  paperMaxHeight: 300,
-  hasShrink: false,
-  placeholder: PLACEHOLDER,
-  helperText: 'Pick your choice',
-  disabled: false,
-}
-
-const SelectWithError = (props: SelectProps) => {
-  const [item, setItem] = useState<string>('')
-
-  const handleChange = (event) => {
-    setItem(event.target.value)
-  }
-
-  return (
-    <Select
-      value={item}
-      SelectProps={{
-        onChange: (e) => {
-          handleChange(e)
-        },
-      }}
-      error={item === ''}
-      helperText={item === '' ? ERROR_PLACEHOLDER : ''}
-      {...props}
-    >
-      <SelectMenuItem width={props.width} value='' disabled>
-        {PLACEHOLDER}
-      </SelectMenuItem>
-      <SelectMenuItem width={props.width} value={'Test'}>
-        This is a select menu item, This is a select menu item
-      </SelectMenuItem>
-      <SelectMenuItem width={props.width} value={'Example'}>
-        Example
-      </SelectMenuItem>
-    </Select>
-  )
-}
-
-const WithErrorStory: Story<SelectProps> = (args) => (
-  <SelectWithError {...args} />
-)
-
-export const WithError = WithErrorStory.bind({})
-
-WithError.args = {
-  color: 'primary',
-  variant: 'standard',
-  size: 'small',
-  width: 300,
-  paperMaxHeight: 300,
-  hasShrink: false,
-  placeholder: PLACEHOLDER,
-  disabled: false,
-}
-
-const WithPrefixStory: Story<SelectProps> = (args) => (
-  <SelectWithMenu
-    InputProps={{
-      startAdornment: (
-        <StyledInputAdornment position='start' disabled={args.disabled}>
-          <Visibility />
-        </StyledInputAdornment>
-      ),
-    }}
-    {...args}
-  />
-)
-
-export const WithPrefix = WithPrefixStory.bind({})
-
-WithPrefix.args = {
-  color: 'primary',
-  variant: 'standard',
-  size: 'small',
-  width: 300,
-  paperMaxHeight: 300,
-  hasShrink: false,
-  placeholder: PLACEHOLDER,
-  helperText: 'Pick your choice',
-  disabled: false,
-}

package/src/lib/select/Select.tsx

@@ -1,13 +0,0 @@
-import React from 'react'
-import { OutlinedSelect } from './OutlinedSelect'
-import { StandardSelect } from './StandardSelect'
-import { SelectProps } from '../../interfaces'
-
-export function Select({ variant, ...props }: SelectProps) {
-  if (variant === 'outlined') {
-    return <OutlinedSelect {...props} />
-  }
-  return <StandardSelect {...props} />
-}
-
-export default Select

package/src/lib/select/StandardSelect.tsx

@@ -1,173 +0,0 @@
-import React from 'react'
-import { Theme, styled } from '@material-ui/core/styles'
-import {
-  InputLabel,
-  FormControl,
-  Select,
-  Input,
-  FormHelperText,
-} from '@material-ui/core'
-import { SelectProps } from '../../interfaces'
-
-// self-defined-components
-const PREFIX = 'JuiStandardSelect'
-
-const classes = {
-  inputLabelFocused: `${PREFIX}-inputLabelFocused`,
-  inputLabelMarginDense: `${PREFIX}-inputLabelMarginDense`,
-  inputLabelError: `${PREFIX}-inputLabelError`,
-  inputFocused: `${PREFIX}-inputFocused`,
-  inputInput: `${PREFIX}-input`,
-  inputUnderline: `${PREFIX}-inputUnderline`,
-  inputError: `${PREFIX}-inputError`,
-  inputDisabled: `${PREFIX}-inputDisabled`,
-  inputAdornmentRoot: `${PREFIX}-inputAdornmentRoot`,
-  selectPaper: `${PREFIX}-menuPaper`,
-  selectDisabled: `${PREFIX}-selectDisabled`,
-}
-
-interface StyledFormControlProps {
-  color: 'primary' | 'secondary'
-  width: number | 'auto'
-  theme?: Theme
-}
-
-const StyledFormControl = styled(({ width: _width, ...props }) => (
-  <FormControl {...props} />
-))(({ width, theme }: StyledFormControlProps) => ({
-  width,
-  margin: theme.spacing(0, 4, 4, 4),
-}))
-
-interface StyledInputLabelProps {
-  color: 'primary' | 'secondary'
-  theme?: Theme
-}
-
-const StyledInputLabel = styled(({ color: _color, ...props }) => (
-  <InputLabel
-    classes={{
-      focused: classes.inputLabelFocused,
-      error: classes.inputLabelError,
-    }}
-    {...props}
-  />
-))(({ color, theme }: StyledInputLabelProps) => ({
-  color: theme.palette.text.disabled,
-  margin: theme.spacing(0, 10, 1.5, 0),
-  [`&.${classes.inputLabelFocused}`]: {
-    color: theme.palette[color].main,
-  },
-  [`&.${classes.inputLabelError}`]: {
-    color: theme.palette.error.main,
-  },
-}))
-
-interface StyledSelectProps {
-  paperMaxHeight: number | 'auto'
-  hasAdornment: boolean
-}
-
-const StyledSelect = styled(
-  ({
-    paperMaxHeight: _selectPaperHeight,
-    hasAdornment: _hasAdornment,
-    className,
-    ...props
-  }) => (
-    <Select
-      MenuProps={{
-        classes: { paper: className },
-        transformOrigin: {
-          vertical: 'top',
-          horizontal: 'left',
-        },
-        getContentAnchorEl: null,
-      }}
-      {...props}
-    />
-  )
-)(({ hasAdornment, paperMaxHeight }: StyledSelectProps) => ({
-  '&&': {
-    maxHeight: paperMaxHeight,
-    left: hasAdornment ? '48px !important' : '70px',
-  },
-}))
-
-interface StyledInputProps {
-  color: 'primary' | 'secondary'
-  theme: Theme
-}
-
-const StyledInput = styled(({ color: _color, ...props }) => (
-  <Input
-    classes={{
-      input: classes.inputInput,
-      disabled: classes.inputDisabled,
-      underline: classes.inputUnderline,
-      error: classes.inputError,
-    }}
-    {...props}
-  />
-))(({ color, theme }: StyledInputProps) => ({
-  color: theme.palette.text.primary,
-  [`& .${classes.inputInput}`]: {
-    ['&:focus']: {
-      background: 'rgba(0,0,0,0)',
-    },
-  },
-  [`&.${classes.inputUnderline}:not(.${classes.inputDisabled}):not(.${classes.inputError})`]: {
-    [`&:after,&:hover:before`]: {
-      borderBottomColor: theme.palette[color].main,
-    },
-  },
-  [`&.${classes.inputUnderline}.${classes.inputError}:not(.${classes.inputDisabled})`]: {
-    [`&:after,&:hover:before`]: {
-      borderBottomColor: theme.palette.error.main,
-    },
-  },
-}))
-
-export function StandardSelect({
-  placeholder,
-  helperText,
-  InputProps,
-  SelectProps,
-  children,
-  color = 'primary',
-  size = 'small',
-  width = 'auto',
-  paperMaxHeight = 'auto',
-  error = false,
-  hasShrink = false,
-  value = '',
-  disabled = false,
-}: SelectProps) {
-  const hasAdornment = !!InputProps?.startAdornment
-  const hasHelperText = !!helperText
-  return (
-    <StyledFormControl
-      color={color}
-      size={size}
-      width={width}
-      disabled={disabled}
-      error={error}
-    >
-      <StyledInputLabel color={color} shrink={hasShrink ? true : undefined}>
-        {placeholder}
-      </StyledInputLabel>
-      <StyledSelect
-        value={value}
-        paperMaxHeight={paperMaxHeight}
-        hasAdornment={hasAdornment}
-        input={<StyledInput color={color} {...InputProps} />}
-        {...SelectProps}
-      >
-        {children}
-      </StyledSelect>
-      {hasHelperText && <FormHelperText>{helperText}</FormHelperText>}
-    </StyledFormControl>
-  )
-}
-
-export default StandardSelect

package/src/lib/text-field/TextField.stories.tsx

@@ -1,160 +0,0 @@
-import React, { useEffect } from 'react'
-import { Story, Meta } from '@storybook/react'
-import { InputAdornment, TextFieldProps } from '@material-ui/core'
-import { Visibility } from '@material-ui/icons'
-import { TextField } from './TextField'
-
-export default {
-  component: TextField,
-  title: 'TextFiled',
-  argTypes: {
-    color: {
-      type: { name: 'string', required: false },
-      description:
-        'The color of the component. It supports those theme colors that make sense for this component.',
-      table: {
-        type: { summary: 'primary | secondary' },
-        defaultValue: { summary: 'primary' },
-      },
-      options: ['primary', 'secondary'],
-      control: { type: 'radio' },
-    },
-    variant: {
-      type: { name: 'string', required: false },
-      description: 'The variant to use.',
-      table: {
-        type: { summary: 'standard | filled | outlined' },
-        defaultValue: { summary: 'standard' },
-      },
-      options: ['standard', 'filled', 'outlined'],
-      control: { type: 'radio' },
-    },
-    size: {
-      type: { name: 'string', required: false },
-      description: 'The size of the text field.',
-      table: {
-        type: { summary: 'small | medium' },
-        defaultValue: { summary: 'small' },
-      },
-      options: ['small', 'medium'],
-      control: { type: 'radio' },
-    },
-    disabled: {
-      type: { name: 'boolean', required: false },
-      description: 'If true, the input element will be disabled.',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: false },
-      },
-      control: { type: 'boolean' },
-    },
-    error: {
-      type: { name: 'boolean', required: false },
-      description: 'If true, the label will be displayed in an error state.',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: false },
-      },
-      control: { type: 'boolean' },
-    },
-    label: {
-      type: { name: 'string', required: false },
-      description: 'The label content.',
-    },
-  },
-} as Meta
-
-const ValueOnlyStory: Story<TextFieldProps> = (args) => <TextField {...args} />
-
-export const ValueOnly = ValueOnlyStory.bind({})
-
-ValueOnly.args = {
-  variant: 'standard',
-  color: 'primary',
-  disabled: false,
-  error: false,
-  size: 'small',
-  label: 'Which UI?',
-}
-
-const TextFieldWithError = (props: TextFieldProps) => {
-  const [value, setValue] = React.useState('')
-  const [isError, setIsError] = React.useState(false)
-
-  const handleChange = (event) => {
-    setValue(event.target.value)
-  }
-
-  useEffect(() => {
-    if (value.length > 3) {
-      setIsError(true)
-      return
-    }
-    setIsError(false)
-    return
-  }, [value])
-
-  return <TextField error={isError} onChange={handleChange} {...props} />
-}
-
-const WithErrorStory: Story<TextFieldProps> = (args) => (
-  <TextFieldWithError {...args} />
-)
-
-export const WithError = WithErrorStory.bind({})
-
-WithError.args = {
-  variant: 'standard',
-  color: 'primary',
-  disabled: false,
-  size: 'small',
-  label: 'No more than 3 words',
-}
-
-const WithSuffixStory: Story<TextFieldProps> = (args) => (
-  <TextField
-    {...args}
-    InputProps={{
-      endAdornment: (
-        <InputAdornment position='end'>
-          <Visibility />
-        </InputAdornment>
-      ),
-    }}
-  />
-)
-
-export const WithSuffix = WithSuffixStory.bind({})
-
-WithSuffix.args = {
-  variant: 'standard',
-  color: 'primary',
-  disabled: false,
-  error: false,
-  size: 'small',
-  label: 'Which UI?',
-}
-
-const WithPrefixStory: Story<TextFieldProps> = (args) => (
-  <TextField
-    {...args}
-    InputProps={{
-      startAdornment: (
-        <InputAdornment disableTypography position='start'>
-          Kg
-        </InputAdornment>
-      ),
-    }}
-  />
-)
-
-export const WithPrefix = WithPrefixStory.bind({})
-
-WithPrefix.args = {
-  variant: 'standard',
-  color: 'primary',
-  disabled: false,
-  error: false,
-  size: 'small',
-  label: 'Which UI?',
-}