@junyiacademy/ui-test 0.0.10 → 0.0.14

package/src/lib/select/{StandardSelect.stories.tsx → Select.stories.tsx}

@@ -3,14 +3,13 @@ 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 { StandardSelect, StandardSelectProps } from './StandardSelect'
+import { Select } from './Select'
 import SelectMenuItem from '../menu-item/SelectMenuItem'
-
-const PLACEHOLDER = '請選擇'
+import { SelectProps } from '../../interfaces'
 
 export default {
-  component: StandardSelect,
-  title: 'StandardSelect',
+  component: Select,
+  title: 'Select',
   argTypes: {
     color: {
       type: { name: 'string', required: false },
@@ -23,12 +22,22 @@ export default {
       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: 'medium' },
+        defaultValue: { summary: 'small' },
       },
       options: ['small', 'medium'],
       control: { type: 'radio' },
@@ -51,12 +60,22 @@ export default {
       },
       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: true },
+        defaultValue: { summary: false },
       },
       control: { type: 'boolean' },
     },
@@ -105,16 +124,17 @@ export default {
       },
       control: { type: 'text' },
     },
-    InputProps: {
+    SelectProps: {
       type: { name: 'any', required: false },
-      description: 'Attributes applied to inner Input element.',
+      description: 'Attributes applied to inner Select element.',
       table: {
         type: { summary: 'any' },
       },
     },
-    SelectProps: {
+    CommonInputProps: {
       type: { name: 'any', required: false },
-      description: 'Attributes applied to inner Select element.',
+      description:
+        'Attributes applied to to inner OutlinedInput element on OutlinedSelect or Input element on StandardSelect.',
       table: {
         type: { summary: 'any' },
       },
@@ -122,14 +142,17 @@ export default {
   },
 } as Meta
 
-const PREFIX = 'JuiStandardSelect'
+const PLACEHOLDER = 'Please select an option'
+const ERROR_PLACEHOLDER = 'Please select an option'
+const PREFIX = 'JuiSelect'
 
 const classes = {
   inputAdornmentRoot: `${PREFIX}-inputAdornmentRoot`,
 }
+
 interface StyledInputAdornmentProps {
-  theme: Theme
   disabled: boolean
+  theme?: Theme
 }
 
 const StyledInputAdornment = styled(({ disabled: _disabled, ...props }) => (
@@ -140,6 +163,7 @@ const StyledInputAdornment = styled(({ disabled: _disabled, ...props }) => (
     {...props}
   />
 ))(({ disabled, theme }: StyledInputAdornmentProps) => ({
+  height: '100%',
   [`&.${classes.inputAdornmentRoot}`]: {
     color: disabled
       ? theme.palette.action.disabled
@@ -147,7 +171,8 @@ const StyledInputAdornment = styled(({ disabled: _disabled, ...props }) => (
   },
 }))
 
-const StandardSelectWithMenu = (props: StandardSelectProps) => {
+// Standard Select start with here.
+const SelectWithMenu = (props: SelectProps) => {
   const [item, setItem] = useState<string>('')
 
   const handleChange = (event) => {
@@ -155,7 +180,7 @@ const StandardSelectWithMenu = (props: StandardSelectProps) => {
   }
 
   return (
-    <StandardSelect
+    <Select
       value={item}
       SelectProps={{
         onChange: (e) => {
@@ -164,38 +189,88 @@ const StandardSelectWithMenu = (props: StandardSelectProps) => {
       }}
       {...props}
     >
-      <SelectMenuItem width={300} value='' disabled>
+      <SelectMenuItem width={props.width} value='' disabled>
         {PLACEHOLDER}
       </SelectMenuItem>
-      <SelectMenuItem width={300} value={'Test'}>
-        This is a select menu item, This is a select menu item
+      <SelectMenuItem width={props.width} value='Option1'>
+        This is a select menu item
       </SelectMenuItem>
-      <SelectMenuItem width={300} value={'Example'}>
-        Example
+      <SelectMenuItem width={props.width} value='Option2'>
+        This is option 2
       </SelectMenuItem>
-    </StandardSelect>
+    </Select>
   )
 }
 
-const ValueOnlyStory: Story<StandardSelectProps> = (args) => (
-  <StandardSelectWithMenu {...args} />
+const ValueOnlyStory: Story<SelectProps> = (args) => (
+  <SelectWithMenu {...args} />
 )
 
 export const ValueOnly = ValueOnlyStory.bind({})
 
 ValueOnly.args = {
   color: 'primary',
-  size: 'medium',
-  width: 220,
+  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,
-  helperText: 'test',
   disabled: false,
 }
 
-const WithPrefixStory: Story<StandardSelectProps> = (args) => (
-  <StandardSelectWithMenu
+const WithPrefixStory: Story<SelectProps> = (args) => (
+  <SelectWithMenu
     InputProps={{
       startAdornment: (
         <StyledInputAdornment position='start' disabled={args.disabled}>
@@ -211,11 +286,12 @@ export const WithPrefix = WithPrefixStory.bind({})
 
 WithPrefix.args = {
   color: 'primary',
-  size: 'medium',
+  variant: 'standard',
+  size: 'small',
   width: 300,
   paperMaxHeight: 300,
   hasShrink: false,
   placeholder: PLACEHOLDER,
-  helperText: 'test',
+  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,8 @@ 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`,
@@ -102,6 +102,7 @@ interface StyledInputProps {
 const StyledInput = styled(({ color: _color, ...props }) => (
   <Input
     classes={{
+      input: classes.inputInput,
       disabled: classes.inputDisabled,
       underline: classes.inputUnderline,
       error: classes.inputError,
@@ -110,6 +111,11 @@ const StyledInput = styled(({ color: _color, ...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,
@@ -122,20 +128,6 @@ const StyledInput = styled(({ color: _color, ...props }) => (
   },
 }))
 
-export interface StandardSelectProps extends SelectProps {
-  color?: 'primary' | 'secondary'
-  size?: 'medium' | 'small'
-  width?: number | 'auto'
-  paperMaxHeight?: number | 'auto'
-  error?: boolean
-  hasShrink?: boolean
-  placeholder: string
-  helperText?: string
-  InputProps?: object & Partial<InputProps>
-  disabled?: boolean
-  SelectProps?: object | Partial<SelectProps>
-}
-
 export function StandardSelect({
   placeholder,
   helperText,
@@ -143,14 +135,14 @@ export function StandardSelect({
   SelectProps,
   children,
   color = 'primary',
-  size = 'medium',
+  size = 'small',
   width = 'auto',
   paperMaxHeight = 'auto',
   error = false,
   hasShrink = false,
   value = '',
   disabled = false,
-}: StandardSelectProps) {
+}: SelectProps) {
   const hasAdornment = !!InputProps?.startAdornment
   const hasHelperText = !!helperText
   return (

package/src/lib/{TopicFilter.stories.tsx → topic-filter/TopicFilter.stories.tsx}

@@ -1,10 +1,13 @@
 import React from 'react'
 import { Story, Meta } from '@storybook/react'
-import TopicFilter, { TopicFilterProps } from './TopicFilter'
-import { topicTree } from '../utils/topicTree'
+import {
+  TopicFilter as JuiTopicFilter,
+  TopicFilterProps as JuiTopicFilterProps,
+} from './TopicFilter'
+import { topicTree } from '../../utils/topicTree'
 
 export default {
-  component: TopicFilter,
+  component: JuiTopicFilter,
   title: 'TopicFilter',
   argTypes: {
     topicTree: {
@@ -63,15 +66,13 @@ export default {
   },
 } as Meta
 
-const TopicFilterWithOutlinedSelectStory: Story<TopicFilterProps> = (args) => (
-  <TopicFilter {...args} />
+const TopicFilterStory: Story<JuiTopicFilterProps> = (args) => (
+  <JuiTopicFilter {...args} />
 )
 
-export const TopicFilterWithOutlinedSelect = TopicFilterWithOutlinedSelectStory.bind(
-  {}
-)
+export const TopicFilter = TopicFilterStory.bind({})
 
-TopicFilterWithOutlinedSelect.args = {
+TopicFilter.args = {
   topicTree: topicTree,
   onTopicSelected: () => {},
   isLastLayer: (selectedTopic) => {

package/src/lib/{TopicFilter.tsx → topic-filter/TopicFilter.tsx}

@@ -1,9 +1,9 @@
 import React, { useState, useEffect } from 'react'
 import { Theme, styled } from '@material-ui/core/styles'
 import ArrowRightRoundedIcon from '@material-ui/icons/ArrowRightRounded'
-import type { ITopicTreeNode } from '../interfaces'
-import OutlinedSelect from './select/OutlinedSelect'
-import SelectMenuItem from './menu-item/SelectMenuItem'
+import type { ITopicTreeNode } from '../../interfaces'
+import OutlinedSelect from '../select/OutlinedSelect'
+import SelectMenuItem from '../menu-item/SelectMenuItem'
 
 // self-defined-configs
 const PLACEHOLDER = '請選擇'
@@ -45,7 +45,7 @@ export interface TopicFilterProps {
   initSelectedTopicIds: string[]
 }
 
-const TopicFilter = ({
+export const TopicFilter = ({
   topicTree,
   onTopicSelected,
   isLastLayer,
@@ -150,7 +150,7 @@ const TopicFilter = ({
               SelectProps={{
                 'data-testid': `layered-topic-${layerNumber}`,
               }}
-              OutlinedInputProps={{
+              InputProps={{
                 inputProps: {
                   'aria-label': `layered-topic-${layerNumber}`,
                 },

package/src/lib/TopicFilter.spec.tsx

@@ -1,10 +0,0 @@
-import { render } from '@testing-library/react'
-
-import TopicFilter from './TopicFilter'
-
-describe('TopicFilter', () => {
-  it('should render successfully', () => {
-    const { baseElement } = render(<TopicFilter />)
-    expect(baseElement).toBeTruthy()
-  })
-})

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

@@ -1,10 +0,0 @@
-import { render } from '@testing-library/react'
-
-import SelectMenuItem from './SelectMenuItem'
-
-describe('SelectMenuItem', () => {
-  it('should render successfully', () => {
-    const { baseElement } = render(<SelectMenuItem />)
-    expect(baseElement).toBeTruthy()
-  })
-})

package/src/lib/select/OutlinedSelect.spec.tsx

@@ -1,10 +0,0 @@
-import { render } from '@testing-library/react'
-
-import OutlinedSelect from './OutlinedSelect'
-
-describe('OutlinedSelect', () => {
-  it('should render successfully', () => {
-    const { baseElement } = render(<OutlinedSelect />)
-    expect(baseElement).toBeTruthy()
-  })
-})

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

@@ -1,238 +0,0 @@
-import React, { useState } from 'react'
-import { Story, Meta } from '@storybook/react'
-import { Theme, styled } from '@material-ui/core/styles'
-import { InputAdornment, OutlinedInputProps } from '@material-ui/core'
-import { Visibility } from '@material-ui/icons'
-import OutlinedSelect, { OutlinedSelectProps } from './OutlinedSelect'
-import SelectMenuItem from '../menu-item/SelectMenuItem'
-
-const PLACEHOLDER = '請選擇'
-
-export default {
-  component: OutlinedSelect,
-  title: 'OutlinedSelect',
-  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.',
-      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' },
-      },
-    },
-    OutlinedInputProps: {
-      type: { name: 'any', required: false },
-      description: 'Attributes applied to to inner OutlinedInput element.',
-      table: {
-        type: { summary: 'any' },
-      },
-    },
-  },
-} as Meta
-
-const PREFIX = 'JuiOutlinedSelect'
-
-const classes = {
-  outlineInputAdornmentRoot: `${PREFIX}-outlineInputAdornmentRoot`,
-}
-
-interface StyledInputAdornmentProps {
-  disabled: boolean
-  theme?: Theme
-}
-
-const StyledInputAdornment = styled(({ disabled: _disabled, ...props }) => (
-  <InputAdornment
-    classes={{
-      root: classes.outlineInputAdornmentRoot,
-    }}
-    {...props}
-  />
-))(({ disabled, theme }: StyledInputAdornmentProps) => ({
-  [`&.${classes.outlineInputAdornmentRoot}`]: {
-    color: disabled
-      ? theme.palette.action.disabled
-      : theme.palette.action.active,
-  },
-}))
-
-interface OutlinedSelectWithMenuProps {
-  startAdornment?: React.ReactNode
-}
-
-const OutlinedSelectWithMenu = ({
-  startAdornment,
-  ...props
-}: OutlinedSelectProps & OutlinedSelectWithMenuProps) => {
-  const [item, setItem] = useState<string>('')
-
-  const handleChange = (event) => {
-    setItem(event.target.value)
-  }
-  return (
-    <OutlinedSelect
-      OutlinedInputProps={{
-        onChange: (e) => {
-          handleChange(e)
-        },
-        startAdornment,
-      }}
-      value={item}
-      {...props}
-    >
-      <SelectMenuItem width={220} value='' disabled>
-        {PLACEHOLDER}
-      </SelectMenuItem>
-      <SelectMenuItem width={220} value='Test'>
-        This is a select menu item
-      </SelectMenuItem>
-      <SelectMenuItem width={220} value='Example'>
-        Example
-      </SelectMenuItem>
-    </OutlinedSelect>
-  )
-}
-
-const ValueOnlyStory: Story<OutlinedSelectProps> = (args) => (
-  <OutlinedSelectWithMenu {...args} />
-)
-
-export const ValueOnly = ValueOnlyStory.bind({})
-
-ValueOnly.args = {
-  color: 'primary',
-  size: 'medium',
-  width: 220,
-  paperMaxHeight: 412,
-  hasLabel: true,
-  placeholder: PLACEHOLDER,
-  helperText: 'test',
-  disabled: false,
-  SelectProps: {},
-}
-
-const WithPrefixStory: Story<OutlinedSelectProps> = (args) => (
-  <OutlinedSelectWithMenu
-    startAdornment={
-      <StyledInputAdornment position='start' disabled={args.disabled}>
-        <Visibility />
-      </StyledInputAdornment>
-    }
-    {...args}
-  />
-)
-
-export const WithPrefix = WithPrefixStory.bind({})
-
-WithPrefix.args = {
-  color: 'primary',
-  size: 'medium',
-  width: 220,
-  paperMaxHeight: 412,
-  hasLabel: true,
-  placeholder: PLACEHOLDER,
-  helperText: 'test',
-  disabled: false,
-  SelectProps: {},
-}