@junyiacademy/ui-test 0.0.9 → 0.0.13

package/src/lib/select/OutlinedSelect.tsx

@@ -1,14 +1,13 @@
-import React, { ChangeEvent } from 'react'
+import React from 'react'
 import { Theme, styled } from '@material-ui/core/styles'
 import {
   InputLabel,
   FormControl,
   Select,
   OutlinedInput,
-  SelectProps,
-  OutlinedInputProps,
   FormHelperText,
 } from '@material-ui/core'
+import { SelectProps } from '../../interfaces'
 
 // self-defined-components
 const PREFIX = 'JuiOutlinedSelect'
@@ -21,10 +20,12 @@ const classes = {
   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`,
 }
 
@@ -45,6 +46,9 @@ const StyledFormControl = styled(
       borderColor: theme.palette[color].main,
     },
   },
+  [`& .${classes.outlineInputError}.${classes.outlineInputFocused} .${classes.outlineInputNotchedOutline}`]: {
+    borderColor: `${theme.palette.error.main}`,
+  },
 }))
 
 interface StyledInputLabelProps {
@@ -90,6 +94,8 @@ interface StyledOutlinedInputProps {
 const StyledOutlinedInput = styled((props) => (
   <OutlinedInput
     classes={{
+      root: classes.outlineInputRoot,
+      focused: classes.outlineInputFocused,
       input: classes.outlineInputInput,
       inputMarginDense: classes.outlineInputInputMarginDense,
       notchedOutline: classes.outlineInputNotchedOutline,
@@ -99,8 +105,14 @@ const StyledOutlinedInput = styled((props) => (
     {...props}
   />
 ))(({ theme }: StyledOutlinedInputProps) => ({
+  [`&.${classes.outlineInputRoot}.${classes.outlineInputFocused}`]: {
+    backgroundColor: theme.palette.action.selected,
+  },
   [`& .${classes.outlineInputInput}`]: {
     color: theme.palette.text.primary,
+    ['&:focus']: {
+      background: 'rgba(0,0,0,0)',
+    },
   },
   [`& .${classes.outlineInputInputMarginDense}`]: {
     padding: '14.5px 15px 14.5px 12px',
@@ -131,38 +143,26 @@ const StyledSelect = styled(
           horizontal: 'left',
         },
         getContentAnchorEl: null,
-        classes: { paper: className },
+        classes: {
+          paper: className,
+        },
       }}
       {...props}
     />
   )
 )(({ hasAdornment, paperMaxHeight }: StyledSelectProps) => ({
-  '&&': {
+  '&': {
     maxHeight: paperMaxHeight,
     left: hasAdornment ? '24px !important' : '70px',
   },
 }))
 
-export interface OutlinedSelectProps {
-  color?: 'primary' | 'secondary'
-  size?: 'medium' | 'small'
-  width?: number | 'auto'
-  paperMaxHeight?: number | 'auto'
-  error?: boolean
-  hasLabel?: boolean
-  hasShrink?: boolean
-  placeholder: string
-  helperText?: string
-  value?: unknown
-  disabled?: boolean
-  SelectProps?: object | Partial<SelectProps>
-  OutlinedInputProps?: Partial<OutlinedInputProps> & {
-    onChange: (e: ChangeEvent<HTMLInputElement>) => void
-  }
-  children?: React.ReactNode
-}
-
-const OutlinedSelect = ({
+export const OutlinedSelect = ({
+  placeholder,
+  helperText,
+  InputProps,
+  SelectProps,
+  children,
   color = 'primary',
   size = 'medium',
   width = 'auto',
@@ -170,15 +170,10 @@ const OutlinedSelect = ({
   error = false,
   hasLabel = true,
   hasShrink = false,
-  placeholder,
-  helperText = '',
   value = '',
   disabled = false,
-  SelectProps,
-  OutlinedInputProps,
-  children,
-}: OutlinedSelectProps) => {
-  const hasAdornment = !!OutlinedInputProps?.startAdornment
+}: SelectProps) => {
+  const hasAdornment = !!InputProps?.startAdornment
   const hasHelperText = !!helperText
   return (
     <StyledFormControl
@@ -188,17 +183,15 @@ const OutlinedSelect = ({
       error={error}
       color={color}
     >
-      {hasLabel ? (
-        hasShrink ? (
-          <StyledInputLabel color={color} variant='outlined' shrink>
-            {placeholder}
-          </StyledInputLabel>
-        ) : (
-          <StyledInputLabel color={color} variant='outlined'>
-            {placeholder}
-          </StyledInputLabel>
-        )
-      ) : null}
+      {hasLabel && (
+        <StyledInputLabel
+          color={color}
+          variant='outlined'
+          shrink={hasShrink ? true : undefined}
+        >
+          {placeholder}
+        </StyledInputLabel>
+      )}
       <StyledSelect
         value={value}
         paperMaxHeight={paperMaxHeight}
@@ -208,7 +201,7 @@ const OutlinedSelect = ({
             color={color}
             label={hasLabel ? placeholder : undefined}
             disabled={disabled}
-            {...OutlinedInputProps}
+            {...InputProps}
           />
         }
         {...SelectProps}

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

@@ -0,0 +1,421 @@
+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' },
+    },
+    size: {
+      type: { name: 'string', required: false },
+      description: `Adjust size`,
+      table: {
+        type: { summary: 'medium | small' },
+        defaultValue: { summary: 'medium' },
+      },
+      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,
+  },
+}))
+
+// Outlined Select start with here.
+interface OutlinedSelectWithMenuProps {
+  startAdornment?: React.ReactNode
+}
+
+const OutlinedSelectWithMenu = ({
+  startAdornment,
+  ...props
+}: SelectProps & OutlinedSelectWithMenuProps) => {
+  const [item, setItem] = useState<string>('')
+
+  const handleChange = (event) => {
+    setItem(event.target.value)
+  }
+  return (
+    <Select
+      variant='outlined'
+      InputProps={{
+        onChange: (e) => {
+          handleChange(e)
+        },
+        startAdornment,
+      }}
+      value={item}
+      {...props}
+    >
+      <SelectMenuItem width={props.width} value='' disabled>
+        {PLACEHOLDER}
+      </SelectMenuItem>
+      <SelectMenuItem width={props.width} value='Test'>
+        This is a select menu item
+      </SelectMenuItem>
+      <SelectMenuItem width={props.width} value='Example'>
+        Example
+      </SelectMenuItem>
+    </Select>
+  )
+}
+
+const OutlinedValueOnlyStory: Story<SelectProps> = (args) => (
+  <OutlinedSelectWithMenu {...args} />
+)
+
+export const OutlinedValueOnly = OutlinedValueOnlyStory.bind({})
+
+OutlinedValueOnly.args = {
+  color: 'primary',
+  size: 'medium',
+  width: 220,
+  paperMaxHeight: 412,
+  hasLabel: true,
+  placeholder: PLACEHOLDER,
+  helperText: 'Pick your choice',
+  disabled: false,
+  SelectProps: {},
+}
+
+const OutlinedSelectWithError = ({
+  startAdornment,
+  ...props
+}: SelectProps & OutlinedSelectWithMenuProps) => {
+  const [item, setItem] = useState<string>('')
+
+  const handleChange = (event) => {
+    setItem(event.target.value)
+  }
+  return (
+    <Select
+      variant='outlined'
+      InputProps={{
+        onChange: (e) => {
+          handleChange(e)
+        },
+        startAdornment,
+      }}
+      value={item}
+      error={item === ''}
+      helperText={item === '' ? ERROR_PLACEHOLDER : ''}
+      {...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 OutlinedWithErrorStory: Story<SelectProps> = (args) => (
+  <OutlinedSelectWithError {...args} />
+)
+
+export const OutlinedWithError = OutlinedWithErrorStory.bind({})
+
+OutlinedWithError.args = {
+  color: 'primary',
+  size: 'medium',
+  width: 220,
+  paperMaxHeight: 412,
+  hasLabel: true,
+  placeholder: PLACEHOLDER,
+  disabled: false,
+  SelectProps: {},
+}
+
+const OutlinedWithPrefixStory: Story<SelectProps> = (args) => (
+  <OutlinedSelectWithMenu
+    startAdornment={
+      <StyledInputAdornment position='start' disabled={args.disabled}>
+        <Visibility />
+      </StyledInputAdornment>
+    }
+    {...args}
+  />
+)
+
+export const OutlinedWithPrefix = OutlinedWithPrefixStory.bind({})
+
+OutlinedWithPrefix.args = {
+  color: 'primary',
+  size: 'medium',
+  width: 220,
+  paperMaxHeight: 412,
+  hasLabel: true,
+  placeholder: PLACEHOLDER,
+  helperText: 'Pick your choice',
+  disabled: false,
+  SelectProps: {},
+}
+
+// Standard Select start with here.
+const StandardSelectWithMenu = (props: SelectProps) => {
+  const [item, setItem] = useState<string>('')
+
+  const handleChange = (event) => {
+    setItem(event.target.value)
+  }
+
+  return (
+    <Select
+      variant='standard'
+      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 StandardValueOnlyStory: Story<SelectProps> = (args) => (
+  <StandardSelectWithMenu {...args} />
+)
+
+export const StandardValueOnly = StandardValueOnlyStory.bind({})
+
+StandardValueOnly.args = {
+  color: 'primary',
+  size: 'medium',
+  width: 300,
+  paperMaxHeight: 300,
+  hasShrink: false,
+  placeholder: PLACEHOLDER,
+  helperText: 'Pick your choice',
+  disabled: false,
+}
+
+const StandardSelectWithError = (props: SelectProps) => {
+  const [item, setItem] = useState<string>('')
+
+  const handleChange = (event) => {
+    setItem(event.target.value)
+  }
+
+  return (
+    <Select
+      variant='standard'
+      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 StandardWithErrorStory: Story<SelectProps> = (args) => (
+  <StandardSelectWithError {...args} />
+)
+
+export const StandardWithError = StandardWithErrorStory.bind({})
+
+StandardWithError.args = {
+  color: 'primary',
+  size: 'medium',
+  width: 300,
+  paperMaxHeight: 300,
+  hasShrink: false,
+  placeholder: PLACEHOLDER,
+  disabled: false,
+}
+
+const StandardWithPrefixStory: Story<SelectProps> = (args) => (
+  <StandardSelectWithMenu
+    InputProps={{
+      startAdornment: (
+        <StyledInputAdornment position='start' disabled={args.disabled}>
+          <Visibility />
+        </StyledInputAdornment>
+      ),
+    }}
+    {...args}
+  />
+)
+
+export const StandardWithPrefix = StandardWithPrefixStory.bind({})
+
+StandardWithPrefix.args = {
+  color: 'primary',
+  size: 'medium',
+  width: 300,
+  paperMaxHeight: 300,
+  hasShrink: false,
+  placeholder: PLACEHOLDER,
+  helperText: 'Pick your choice',
+  disabled: false,
+}

package/src/lib/select/Select.tsx

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

@@ -4,12 +4,10 @@ import {
   InputLabel,
   FormControl,
   Select,
-  SelectProps,
   Input,
-  InputProps,
   FormHelperText,
-  InputAdornment,
 } from '@material-ui/core'
+import { SelectProps } from '../../interfaces'
 
 // self-defined-components
 const PREFIX = 'JuiStandardSelect'
@@ -18,6 +16,9 @@ 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`,
@@ -92,7 +93,6 @@ const StyledSelect = styled(
     maxHeight: paperMaxHeight,
     left: hasAdornment ? '48px !important' : '70px',
   },
-  [`&.${classes.selectDisabled}`]: {},
 }))
 
 interface StyledInputProps {
@@ -103,6 +103,9 @@ interface StyledInputProps {
 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,
@@ -111,6 +114,14 @@ const StyledInput = styled(({ color: _color, ...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,
@@ -123,37 +134,21 @@ const StyledInput = styled(({ color: _color, ...props }) => (
   },
 }))
 
-export interface StandardSelectProps {
-  color?: 'primary' | 'secondary'
-  size?: 'medium' | 'small'
-  width?: number | 'auto'
-  paperMaxHeight?: number | 'auto'
-  error?: boolean
-  hasShrink?: boolean
-  placeholder: string
-  helperText?: string
-  InputProps?: object & Partial<InputProps>
-  value?: unknown
-  disabled?: boolean
-  SelectProps?: object | Partial<SelectProps>
-  children?: React.ReactNode
-}
-
 export function StandardSelect({
+  placeholder,
+  helperText,
+  InputProps,
+  SelectProps,
+  children,
   color = 'primary',
   size = 'medium',
   width = 'auto',
   paperMaxHeight = 'auto',
   error = false,
   hasShrink = false,
-  placeholder,
-  helperText,
-  InputProps,
   value = '',
-  SelectProps,
   disabled = false,
-  children,
-}: StandardSelectProps) {
+}: SelectProps) {
   const hasAdornment = !!InputProps?.startAdornment
   const hasHelperText = !!helperText
   return (
@@ -164,13 +159,9 @@ export function StandardSelect({
       disabled={disabled}
       error={error}
     >
-      {hasShrink ? (
-        <StyledInputLabel color={color} shrink>
-          {placeholder}
-        </StyledInputLabel>
-      ) : (
-        <StyledInputLabel color={color}>{placeholder}</StyledInputLabel>
-      )}
+      <StyledInputLabel color={color} shrink={hasShrink ? true : undefined}>
+        {placeholder}
+      </StyledInputLabel>
       <StyledSelect
         value={value}
         paperMaxHeight={paperMaxHeight}