@junyiacademy/ui-test 0.0.13 → 1.4.2

package/src/lib/button/Button.stories.tsx

@@ -1,50 +0,0 @@
-import React from 'react'
-import { Story, Meta } from '@storybook/react'
-import { Button, ButtonProps } from './Button'
-
-export default {
-  component: Button,
-  title: 'Button',
-  argTypes: {
-    active: {
-      description: 'The Button is active or not.',
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    variant: {
-      table: {
-        defaultValue: { summary: 'contained' },
-      },
-    },
-    color: {
-      table: {
-        defaultValue: { summary: 'default' },
-      },
-    },
-    disabled: {
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    size: {
-      table: {
-        defaultValue: { summary: 'medium' },
-      },
-    },
-  },
-} as Meta
-
-const Template: Story<ButtonProps> = (args) => (
-  <Button {...args}>I'm a Button</Button>
-)
-
-export const TextOnly = Template.bind({})
-
-TextOnly.args = {
-  active: false,
-  variant: 'contained',
-  color: 'default',
-  disabled: false,
-  size: 'medium',
-}

package/src/lib/button/Button.tsx

@@ -1,85 +0,0 @@
-import React from 'react'
-import { styled, fade, Theme } from '@material-ui/core/styles'
-import {
-  Button as MuiButton,
-  ButtonProps as MuiButtonProps,
-} from '@material-ui/core'
-
-// self-defined-components
-const PREFIX = 'JuiButton'
-
-const classes = {
-  outlinedPrimary: `${PREFIX}-outlinedPrimary`,
-  outlinedSecondary: `${PREFIX}-outlinedSecondary`,
-  textPrimary: `${PREFIX}-textPrimary`,
-  textSecondary: `${PREFIX}-textSecondary`,
-  disabled: `${PREFIX}-disabled`,
-}
-
-interface StyleFuncProps {
-  active?: boolean
-  theme?: Theme
-}
-
-const StyledButton = styled(({ active: _active, ...other }) => (
-  <MuiButton classes={classes} {...other} />
-))(({ active, theme }: StyleFuncProps) => ({
-  [`&.${classes.outlinedPrimary}`]: {
-    backgroundColor: active
-      ? theme.palette.primary.main
-      : theme.palette.common.white,
-    color: active ? theme.palette.common.white : theme.palette.primary.main,
-    borderColor: theme.palette.primary.main,
-    '&:hover': {
-      backgroundColor: active
-        ? theme.palette.primary.main
-        : fade(theme.palette.primary.main, 0.1),
-    },
-    [`&.${classes.disabled}`]: {
-      backgroundColor: theme.palette.common.white,
-      borderColor: theme.palette.action.disabledBackground,
-      color: theme.palette.action.disabled,
-    },
-  },
-  [`&.${classes.outlinedSecondary}`]: {
-    backgroundColor: active
-      ? theme.palette.secondary.main
-      : theme.palette.common.white,
-    color: active ? theme.palette.common.white : theme.palette.secondary.main,
-    borderColor: theme.palette.secondary.main,
-    '&:hover': {
-      backgroundColor: active
-        ? theme.palette.secondary.main
-        : fade(theme.palette.secondary.main, 0.1),
-    },
-    [`&.${classes.disabled}`]: {
-      backgroundColor: theme.palette.common.white,
-      borderColor: theme.palette.action.disabledBackground,
-      color: theme.palette.action.disabled,
-    },
-  },
-  [`&.${classes.textPrimary}`]: {
-    '&:hover': {
-      backgroundColor: fade(theme.palette.primary.main, 0.1),
-    },
-  },
-  [`&.${classes.textSecondary}`]: {
-    '&:hover': {
-      backgroundColor: fade(theme.palette.secondary.main, 0.1),
-    },
-  },
-}))
-
-export interface ButtonProps extends MuiButtonProps {
-  active?: boolean
-}
-
-export const Button = ({ active, children, ...otherProps }: ButtonProps) => {
-  return (
-    <StyledButton active={active} {...otherProps}>
-      {children}
-    </StyledButton>
-  )
-}
-
-export default Button

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