@junyiacademy/ui-test 0.0.13 → 1.4.2

package/src/lib/select/StandardSelect.tsx

@@ -1,179 +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`,
-  inputRoot: `${PREFIX}-inputRoot`,
-  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={{
-      root: classes.inputRoot,
-      focused: classes.inputFocused,
-      input: classes.inputInput,
-      disabled: classes.inputDisabled,
-      underline: classes.inputUnderline,
-      error: classes.inputError,
-    }}
-    {...props}
-  />
-))(({ color, theme }: StyledInputProps) => ({
-  color: theme.palette.text.primary,
-  [`&.${classes.inputRoot}.${classes.inputFocused}`]: {
-    backgroundColor: theme.palette.action.selected,
-  },
-  [`& .${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 = 'medium',
-  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?',
-}

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

@@ -1,93 +0,0 @@
-import React from 'react'
-import { styled } from '@material-ui/core/styles'
-import { TextField as MuiTextField, TextFieldProps } from '@material-ui/core'
-
-// self-defined-components
-const PREFIX = 'JuiTextField'
-
-const classes = {
-  inputLabelError: `${PREFIX}-inputLabel-error`,
-  inputLabelDisabled: `${PREFIX}-inputLabel-disabled`,
-  inputLabelShrink: `${PREFIX}-inputLabel-shrink`,
-  inputLabelFocused: `${PREFIX}-inputLabel-focused`,
-  inputNotchedOutline: `${PREFIX}-input-notchedOutline`,
-  inputUnderline: `${PREFIX}-input-underline`,
-  inputColorSecondary: `${PREFIX}-input-colorSecondary`,
-  inputDisabled: `${PREFIX}-input-disabled`,
-  inputError: `${PREFIX}-input-error`,
-  inputFocused: `${PREFIX}-input-focused`,
-}
-
-const StyledTextField = styled(
-  ({ hasEndAdornment, InputLabelProps, InputProps, ...otherProps }) => (
-    <MuiTextField
-      InputLabelProps={{
-        ...InputLabelProps,
-        classes: {
-          error: classes.inputLabelError,
-          disabled: classes.inputLabelDisabled,
-          shrink: classes.inputLabelShrink,
-          focused: classes.inputLabelFocused,
-        },
-        shrink: hasEndAdornment ? true : undefined,
-      }}
-      InputProps={{
-        ...InputProps,
-        classes: {
-          colorSecondary: classes.inputColorSecondary,
-          disabled: classes.inputDisabled,
-          error: classes.inputError,
-          focused: classes.inputFocused,
-          ...(otherProps?.variant === 'outlined'
-            ? { notchedOutline: classes.inputNotchedOutline }
-            : { underline: classes.inputUnderline }),
-        },
-      }}
-      {...otherProps}
-    />
-  )
-)(({ theme }) => ({
-  [`& .${classes.inputLabelError}`]: {
-    [`&:not(.${classes.inputLabelShrink})`]: {
-      color: theme.palette.text.secondary,
-    },
-    [`&.${classes.inputLabelDisabled}`]: {
-      color: theme.palette.text.disabled,
-    },
-  },
-  [`& .${classes.inputLabelError}.${classes.inputLabelFocused}`]: {
-    color: theme.palette.error.main,
-  },
-  // For variant: standard | filled
-  [`& .${classes.inputUnderline}:not(.${classes.inputDisabled})`]: {
-    [`&:hover:before`]: {
-      borderColor: theme.palette.primary.main,
-    },
-    [`&.${classes.inputColorSecondary}:hover:before`]: {
-      borderColor: theme.palette.secondary.main,
-    },
-  },
-  // For variant: outlined
-  [`& .${classes.inputDisabled} .${classes.inputNotchedOutline}`]: {
-    borderStyle: 'dotted',
-  },
-  [`& .${classes.inputError}.${classes.inputFocused} .${classes.inputNotchedOutline}`]: {
-    borderColor: theme.palette.error.main,
-  },
-  [`& :not(.${classes.inputDisabled}):not(.${classes.inputError})`]: {
-    [`&:hover .${classes.inputNotchedOutline}`]: {
-      borderColor: theme.palette.primary.main,
-    },
-    [`&.${classes.inputColorSecondary}:hover .${classes.inputNotchedOutline}`]: {
-      borderColor: theme.palette.secondary.main,
-    },
-  },
-}))
-
-export const TextField = (props: TextFieldProps) => {
-  const hasEndAdornment = !!props?.InputProps?.endAdornment
-
-  return <StyledTextField hasEndAdornment={hasEndAdornment} {...props} />
-}
-
-export default TextField

package/src/lib/topic-filter/TopicFilter.stories.tsx

@@ -1,83 +0,0 @@
-import React from 'react'
-import { Story, Meta } from '@storybook/react'
-import {
-  TopicFilter as JuiTopicFilter,
-  TopicFilterProps as JuiTopicFilterProps,
-} from './TopicFilter'
-import { topicTree } from '../../utils/topicTree'
-
-export default {
-  component: JuiTopicFilter,
-  title: 'TopicFilter',
-  argTypes: {
-    topicTree: {
-      type: { name: 'object', required: false },
-      description: 'Topic tree data list',
-      table: {
-        type: { summary: 'object' },
-        defaultValue: { summary: topicTree },
-      },
-      control: { type: 'object' },
-    },
-    onTopicSelected: {
-      type: { name: 'function', required: false },
-      description: 'Callback fired when the topic selected.',
-      table: {
-        type: {
-          summary: `(
-          topic: Topic,
-          selectedInfo: { layerNumber: number; selectedTopicIds: string[] }
-        ) => void`,
-        },
-        defaultValue: { summary: () => {} },
-      },
-      control: { type: 'function' },
-    },
-    isLastLayer: {
-      type: { name: 'function', required: false },
-      description: 'Callback for checking selected topic is last layer or not.',
-      table: {
-        type: {
-          summary: `(topic: Topic) => boolean`,
-        },
-        defaultValue: { summary: () => false },
-      },
-      control: { type: 'function' },
-    },
-    hasArrow: {
-      type: { name: 'boolean', required: false },
-      description: 'Control the arrow display state.',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: true },
-      },
-      control: { type: 'boolean' },
-      defaultValue: true,
-    },
-    initSelectedTopicIds: {
-      type: { name: 'array', required: false },
-      description: ``,
-      table: {
-        type: { summary: 'array' },
-        defaultValue: { summary: [] },
-      },
-      control: { type: 'array' },
-    },
-  },
-} as Meta
-
-const TopicFilterStory: Story<JuiTopicFilterProps> = (args) => (
-  <JuiTopicFilter {...args} />
-)
-
-export const TopicFilter = TopicFilterStory.bind({})
-
-TopicFilter.args = {
-  topicTree: topicTree,
-  onTopicSelected: () => {},
-  isLastLayer: (selectedTopic) => {
-    return selectedTopic.isContentTopic
-  },
-  hasArrow: true,
-  initSelectedTopicIds: [],
-}