@junyiacademy/ui-test 0.0.14 → 1.5.0

package/src/lib/button-group/ButtonGroup.stories.tsx

@@ -1,59 +0,0 @@
-import React, { useState } from 'react'
-import { Story, Meta } from '@storybook/react'
-import { ButtonGroupProps as MuiButtonGroupProps } from '@material-ui/core'
-import { ButtonGroup } from './ButtonGroup'
-import { Button } from '../button/Button'
-
-const ButtonGroupWithState = (props: MuiButtonGroupProps) => {
-  const [activeId, setActiveId] = useState(null)
-
-  const buttons = ['JUI', 'MUI', 'Unstyled UI']
-
-  return (
-    <ButtonGroup {...props}>
-      {buttons.map((id) => (
-        <Button
-          key={id}
-          onClick={() => setActiveId(id)}
-          active={id === activeId}
-        >
-          {id}
-        </Button>
-      ))}
-    </ButtonGroup>
-  )
-}
-
-export default {
-  component: ButtonGroup,
-  title: 'ButtonGroup',
-  argTypes: {
-    variant: {
-      table: {
-        defaultValue: { summary: 'contained' },
-      },
-    },
-    color: {
-      table: {
-        defaultValue: { summary: 'default' },
-      },
-    },
-    disabled: {
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-  },
-} as Meta
-
-const Template: Story<MuiButtonGroupProps> = (args) => (
-  <ButtonGroupWithState {...args} />
-)
-
-export const Basic = Template.bind({})
-
-Basic.args = {
-  variant: 'contained',
-  color: 'default',
-  disabled: false,
-}

package/src/lib/button-group/ButtonGroup.tsx

@@ -1,37 +0,0 @@
-import React from 'react'
-import { styled, fade } from '@material-ui/core/styles'
-import {
-  ButtonGroup as MuiButtonGroup,
-  ButtonGroupProps as MuiButtonGroupProps,
-} from '@material-ui/core'
-
-const PREFIX = 'JuiButtonGroup'
-
-const classes = {
-  grouped: `${PREFIX}-grouped`,
-  groupedOutlinedPrimary: `${PREFIX}-groupedOutlinedPrimary`,
-  groupedOutlinedSecondary: `${PREFIX}-groupedOutlinedSecondary`,
-  disabled: `${PREFIX}-disabled`,
-}
-
-const StyledButtonGroup = styled(({ ...props }) => (
-  <MuiButtonGroup classes={classes} {...props} />
-))(({ theme }) => ({
-  [`& .${classes.groupedOutlinedPrimary}.${classes.grouped}.${classes.disabled}`]: {
-    borderColor: fade(theme.palette.primary.main, 0.5),
-    color: fade(theme.palette.primary.main, 0.5),
-  },
-  [`& .${classes.groupedOutlinedSecondary}.${classes.grouped}.${classes.disabled}`]: {
-    borderColor: fade(theme.palette.secondary.main, 0.5),
-    color: fade(theme.palette.secondary.main, 0.5),
-  },
-}))
-
-export const ButtonGroup = ({
-  children,
-  ...otherProps
-}: MuiButtonGroupProps) => (
-  <StyledButtonGroup {...otherProps}>{children}</StyledButtonGroup>
-)
-
-export default ButtonGroup

package/src/lib/menu-item/SelectMenuItem.stories.tsx

@@ -1,44 +0,0 @@
-import React from 'react'
-import { Story, Meta } from '@storybook/react'
-import { Menu } from '@material-ui/core'
-import SelectMenuItem, { SelectMenuItemProps } from './SelectMenuItem'
-
-export default {
-  component: SelectMenuItem,
-  title: 'SelectMenuItem',
-  argTypes: {
-    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: 'Control the disabled display state.',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: true },
-      },
-      control: { type: 'boolean' },
-      defaultValue: true,
-    },
-  },
-} as Meta
-
-const Template: Story<SelectMenuItemProps> = (args) => (
-  <Menu open={true}>
-    <SelectMenuItem {...args}>Test</SelectMenuItem>
-    <SelectMenuItem {...args}>Example</SelectMenuItem>
-  </Menu>
-)
-
-export const Primary = Template.bind({})
-
-Primary.args = {
-  value: '',
-  disabled: false,
-}

package/src/lib/menu-item/SelectMenuItem.tsx

@@ -1,45 +0,0 @@
-import React, { PropsWithChildren } from 'react'
-import { Theme, styled } from '@material-ui/core/styles'
-import { MenuItem, MenuItemProps } from '@material-ui/core'
-
-// self-defined-components
-const PREFIX = 'JuiSelectMenuItem'
-
-const classes = {
-  menuItemSelected: `${PREFIX}-menuItemSelected`,
-}
-
-interface StyledMenuItemProps {
-  width: number | 'auto'
-  theme?: Theme
-}
-
-const StyledMenuItem = styled(({ width: _width, ...props }) => (
-  <MenuItem classes={{ selected: classes.menuItemSelected }} {...props} />
-))(({ width, theme }: StyledMenuItemProps) => ({
-  width: width,
-  whiteSpace: 'unset',
-  color: theme.palette.text.primary,
-  [`& .${classes.menuItemSelected}`]: {
-    backgroundColor: theme.palette.grey[300],
-  },
-}))
-
-export interface SelectMenuItemProps extends MenuItemProps {
-  width: number | 'auto'
-  value?: any
-  disabled?: boolean
-}
-
-const SelectMenuItem = React.forwardRef<
-  HTMLLIElement,
-  PropsWithChildren<SelectMenuItemProps>
->(({ width, children, value = '', ...otherProps }, ref) => {
-  return (
-    <StyledMenuItem width={width} innerRef={ref} value={value} {...otherProps}>
-      {children}
-    </StyledMenuItem>
-  )
-})
-
-export default SelectMenuItem

package/src/lib/radio/Radio.stories.tsx

@@ -1,154 +0,0 @@
-import React, { useEffect } from 'react'
-import { Story, Meta } from '@storybook/react'
-import {
-  FormControl,
-  FormLabel,
-  FormHelperText,
-  RadioGroup,
-} from '@material-ui/core'
-import { Radio, RadioProps } from './Radio'
-
-export default {
-  component: Radio,
-  title: 'Radio',
-  argTypes: {
-    disabled: {
-      type: { name: 'boolean', required: false },
-      description: 'If true, the radio will be disabled.',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: false },
-      },
-      control: { type: 'boolean' },
-    },
-    labelPlacement: {
-      type: { name: 'string', required: false },
-      description: 'The position of the label.',
-      table: {
-        type: { summary: 'end' },
-        defaultValue: { summary: 'end' },
-        category: 'not comparable with caption',
-      },
-      options: ['end'],
-      control: { type: 'radio' },
-    },
-    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 | default' },
-        defaultValue: { summary: 'secondary' },
-      },
-      options: ['primary', 'secondary', 'default'],
-      control: { type: 'radio' },
-    },
-    size: {
-      type: { name: 'string', required: false },
-      description:
-        'The size of the radio. small is equivalent to the dense radio styling.',
-      table: {
-        type: { summary: 'medium | small' },
-        defaultValue: { summary: 'medium' },
-      },
-      options: ['medium', 'small'],
-      control: { type: 'radio' },
-    },
-  },
-} as Meta
-
-const WithLabelStory: Story<RadioProps> = (args) => <Radio {...args} />
-
-export const WithLabel = WithLabelStory.bind({})
-
-WithLabel.args = {
-  disabled: false,
-  labelPlacement: 'end',
-  color: 'secondary',
-  size: 'medium',
-  value: 'JUI',
-  label: 'JUI',
-}
-
-const RadioWithCaption = (props: RadioProps) => {
-  const [value, setValue] = React.useState('')
-
-  const handleRadioChange = (event) => {
-    setValue(event.target.value)
-  }
-
-  return (
-    <RadioGroup value={value} onChange={handleRadioChange}>
-      <Radio caption={value && 'caption'} {...props} />
-    </RadioGroup>
-  )
-}
-
-const WithCaptionStory: Story<RadioProps> = (args) => (
-  <RadioWithCaption {...args} />
-)
-
-export const WithCaption = WithCaptionStory.bind({})
-
-WithCaption.args = {
-  disabled: false,
-  labelPlacement: 'end',
-  color: 'secondary',
-  size: 'medium',
-  value: 'JUI',
-  label: 'JUI',
-}
-
-const RadioWithFormGroup = (props: RadioProps) => {
-  const options = ['JUI', 'MUI', 'MUIX']
-  const [value, setValue] = React.useState('')
-  const [error, setError] = React.useState(false)
-  const [helperText, setHelperText] = React.useState('Choose wisely')
-
-  const handleRadioChange = (event) => {
-    setValue(event.target.value)
-    setHelperText('')
-    setError(false)
-  }
-
-  useEffect(() => {
-    if (!value) {
-      return
-    }
-
-    if (value === 'JUI') {
-      setHelperText('You got it!')
-      setError(false)
-    } else {
-      setHelperText("I'm sorry to hear that.")
-      setError(true)
-    }
-  }, [value])
-
-  return (
-    <FormControl component='fieldset' error={error}>
-      <FormLabel component='legend'>
-        Choose the UI made by Junyiacademy
-      </FormLabel>
-      <RadioGroup name='ui' value={value} onChange={handleRadioChange}>
-        {options.map((option) => (
-          <Radio key={option} label={option} value={option} {...props} />
-        ))}
-      </RadioGroup>
-      <FormHelperText>{helperText}</FormHelperText>
-    </FormControl>
-  )
-}
-
-const WithFormGroupStory: Story<RadioProps> = (args) => (
-  <RadioWithFormGroup {...args} />
-)
-
-export const WithFormGroup = WithFormGroupStory.bind({})
-
-WithFormGroup.args = {
-  disabled: false,
-  labelPlacement: 'end',
-  color: 'secondary',
-  size: 'medium',
-}

package/src/lib/radio/Radio.tsx

@@ -1,93 +0,0 @@
-import React from 'react'
-import { styled } from '@material-ui/core/styles'
-import {
-  Radio as MuiRadio,
-  RadioProps as MuiRadioProps,
-  FormControlLabel,
-  FormControlLabelProps,
-  Typography,
-} from '@material-ui/core'
-
-const PREFIX = 'JuiRadio'
-
-const classes = {
-  formControlLabel: `${PREFIX}-formControl-label`,
-  formControlDisabled: `${PREFIX}-formControl-disabled`,
-  radioChecked: `${PREFIX}-radio-checked`,
-}
-
-const StyledFormControlLabel = styled((props) => (
-  <FormControlLabel
-    classes={{
-      label: classes.formControlLabel,
-      disabled: classes.formControlDisabled,
-    }}
-    {...props}
-  />
-))(({ theme }) => ({
-  [`& .${classes.formControlLabel}`]: {
-    color: theme.palette.text.secondary,
-    [`&.${classes.formControlDisabled}`]: {
-      color: theme.palette.text.disabled,
-    },
-  },
-  [`& .${classes.radioChecked} + .${classes.formControlLabel}`]: {
-    color: theme.palette.text.primary,
-  },
-}))
-
-const StyledRadio = styled((props) => (
-  <MuiRadio
-    classes={{
-      checked: classes.radioChecked,
-    }}
-    {...props}
-  />
-))(({ theme }) => ({
-  color: theme.palette.text.primary,
-}))
-
-const StyledTypography = styled(Typography)(({ theme }) => ({
-  color: theme.palette.text.disabled,
-  margin: '0 0 0 30px',
-}))
-
-export interface RadioProps extends FormControlLabelProps {
-  color?: 'primary' | 'secondary' | 'default'
-  size?: 'medium' | 'small'
-  caption?: string
-  formControlLabelProps?: Partial<FormControlLabelProps>
-  radioProps?: Partial<MuiRadioProps>
-}
-
-export const Radio = ({
-  checked,
-  disabled,
-  label,
-  labelPlacement,
-  value,
-  formControlLabelProps,
-  radioProps,
-  color = 'secondary',
-  size = 'medium',
-  caption = '',
-}: RadioProps) => {
-  return (
-    <>
-      <StyledFormControlLabel
-        control={<StyledRadio color={color} size={size} {...radioProps} />}
-        checked={checked}
-        disabled={disabled}
-        label={label}
-        labelPlacement={labelPlacement}
-        value={value}
-        {...formControlLabelProps}
-      />
-      {caption && (
-        <StyledTypography variant='body2'>{caption}</StyledTypography>
-      )}
-    </>
-  )
-}
-
-export default Radio

package/src/lib/select/OutlinedSelect.tsx

@@ -1,215 +0,0 @@
-import React from 'react'
-import { Theme, styled } from '@material-ui/core/styles'
-import {
-  InputLabel,
-  FormControl,
-  Select,
-  OutlinedInput,
-  FormHelperText,
-} from '@material-ui/core'
-import { SelectProps } from '../../interfaces'
-
-// self-defined-components
-const PREFIX = 'JuiOutlinedSelect'
-
-const classes = {
-  inputLabelFocused: `${PREFIX}-inputLabelFocused`,
-  inputLabelOutlined: `${PREFIX}-inputLabelOutlined`,
-  inputLabelMarginDense: `${PREFIX}-inputLabelMarginDense`,
-  inputLabelShrink: `${PREFIX}-inputLabelShrink`,
-  inputLabelError: `${PREFIX}-inputLabelError`,
-  inputLabelDisabled: `${PREFIX}-inputLabelDisabled`,
-  outlineInputInput: `${PREFIX}-input`,
-  outlineInputRoot: `${PREFIX}-inputRoot`,
-  outlineInputInputMarginDense: `${PREFIX}-inputMarginDense`,
-  outlineInputNotchedOutline: `${PREFIX}-notchedOutline`,
-  outlineInputDisabled: `${PREFIX}-inputDisabled`,
-  outlineInputError: `${PREFIX}-outlinedInputError`,
-  outlineInputFocused: `${PREFIX}-focused`,
-  selectPaper: `${PREFIX}-menuPaper`,
-}
-
-interface StyledFormControlProps {
-  color: 'primary' | 'secondary'
-  width: number | 'auto'
-  theme?: Theme
-}
-
-const StyledFormControl = styled(
-  ({ color: _color, width: _width, ...props }) => <FormControl {...props} />
-)(({ color, width, theme }: StyledFormControlProps) => ({
-  margin: theme.spacing(1),
-  width: width,
-  backgroundColor: 'white',
-  '&:hover': {
-    [`& :not(.${classes.outlineInputDisabled}):not(.${classes.outlineInputError}) .${classes.outlineInputNotchedOutline}`]: {
-      borderColor: theme.palette[color].main,
-    },
-  },
-}))
-
-interface StyledInputLabelProps {
-  color: 'primary' | 'secondary'
-  theme?: Theme
-}
-
-const StyledInputLabel = styled(({ color: _color, ...props }) => (
-  <InputLabel
-    classes={{
-      outlined: classes.inputLabelOutlined,
-      marginDense: classes.inputLabelMarginDense,
-      shrink: classes.inputLabelShrink,
-      focused: classes.inputLabelFocused,
-      disabled: classes.inputLabelDisabled,
-      error: classes.inputLabelError,
-    }}
-    {...props}
-  />
-))(({ color, theme }: StyledInputLabelProps) => ({
-  color: theme.palette.text.secondary,
-  [`&.${classes.inputLabelOutlined}`]: {
-    [`&:not(.${classes.inputLabelDisabled}) .${classes.inputLabelFocused}`]: {
-      color: theme.palette.action.active,
-    },
-    [`&.${classes.inputLabelMarginDense}:not(.${classes.inputLabelShrink})`]: {
-      transform: 'translate(12px, 16px) scale(1)',
-    },
-  },
-  [`&.${classes.inputLabelShrink}:not(.${classes.inputLabelError}):not(.${classes.inputLabelDisabled}).${classes.inputLabelFocused}`]: {
-    color: theme.palette[color].main,
-  },
-  [`&.${classes.inputLabelShrink}`]: {
-    backgroundColor: '#ffffff',
-    padding: '0 2px',
-  },
-}))
-
-interface StyledOutlinedInputProps {
-  theme?: Theme
-}
-
-const StyledOutlinedInput = styled((props) => (
-  <OutlinedInput
-    classes={{
-      root: classes.outlineInputRoot,
-      input: classes.outlineInputInput,
-      focused: classes.outlineInputFocused,
-      inputMarginDense: classes.outlineInputInputMarginDense,
-      notchedOutline: classes.outlineInputNotchedOutline,
-      disabled: classes.outlineInputDisabled,
-      error: classes.outlineInputError,
-    }}
-    {...props}
-  />
-))(({ theme }: StyledOutlinedInputProps) => ({
-  [`&.${classes.outlineInputRoot}`]: {
-    [`&.${classes.outlineInputError}.${classes.outlineInputFocused} .${classes.outlineInputNotchedOutline}`]: {
-      borderColor: `${theme.palette.error.main}`,
-    },
-    [`& .${classes.outlineInputInputMarginDense}`]: {
-      padding: '14.5px 15px 14.5px 12px',
-    },
-  },
-  [`& .${classes.outlineInputInput}`]: {
-    color: theme.palette.text.primary,
-    ['&:focus']: {
-      background: 'rgba(0,0,0,0)',
-    },
-  },
-}))
-
-interface StyledSelectProps {
-  paperMaxHeight: number | 'auto'
-  hasAdornment: boolean
-}
-
-const StyledSelect = styled(
-  ({
-    paperMaxHeight: _paperMaxHeight,
-    hasAdornment: _hasAdornment,
-    className,
-    ...props
-  }) => (
-    <Select
-      MenuProps={{
-        disableAutoFocusItem: true,
-        anchorOrigin: {
-          vertical: 2,
-          horizontal: 'left',
-        },
-        transformOrigin: {
-          vertical: 'top',
-          horizontal: 'left',
-        },
-        getContentAnchorEl: null,
-        classes: {
-          paper: className,
-        },
-      }}
-      {...props}
-    />
-  )
-)(({ hasAdornment, paperMaxHeight }: StyledSelectProps) => ({
-  '&': {
-    maxHeight: paperMaxHeight,
-    left: hasAdornment ? '24px !important' : '70px',
-  },
-}))
-
-export const OutlinedSelect = ({
-  placeholder,
-  helperText,
-  InputProps,
-  SelectProps,
-  children,
-  color = 'primary',
-  size = 'small',
-  width = 'auto',
-  paperMaxHeight = 'auto',
-  error = false,
-  hasLabel = true,
-  hasShrink = false,
-  value = '',
-  disabled = false,
-}: SelectProps) => {
-  const hasAdornment = !!InputProps?.startAdornment
-  const hasHelperText = !!helperText
-  return (
-    <StyledFormControl
-      size={size}
-      width={width}
-      disabled={disabled}
-      error={error}
-      color={color}
-    >
-      {hasLabel && (
-        <StyledInputLabel
-          color={color}
-          variant='outlined'
-          shrink={hasShrink ? true : undefined}
-        >
-          {placeholder}
-        </StyledInputLabel>
-      )}
-      <StyledSelect
-        value={value}
-        paperMaxHeight={paperMaxHeight}
-        hasAdornment={hasAdornment}
-        input={
-          <StyledOutlinedInput
-            color={color}
-            label={hasLabel ? placeholder : undefined}
-            disabled={disabled}
-            {...InputProps}
-          />
-        }
-        {...SelectProps}
-      >
-        {children}
-      </StyledSelect>
-      {hasHelperText && <FormHelperText>{helperText}</FormHelperText>}
-    </StyledFormControl>
-  )
-}
-
-export default OutlinedSelect