@junyiacademy/ui-test 0.0.11 → 1.4.0

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,24 +20,29 @@ 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`,
 }
 
 interface StyledFormControlProps {
   color: 'primary' | 'secondary'
-  width: number | 'auto'
+  width: number | string
+  selectMargin: number | string
   theme?: Theme
 }
 
 const StyledFormControl = styled(
-  ({ color: _color, width: _width, ...props }) => <FormControl {...props} />
-)(({ color, width, theme }: StyledFormControlProps) => ({
-  margin: theme.spacing(1),
-  width: width,
+  ({ color: _color, width: _width, selectMargin: _selectMargin, ...props }) => (
+    <FormControl {...props} />
+  )
+)(({ color, width, selectMargin, theme }: StyledFormControlProps) => ({
+  width,
+  margin: selectMargin,
   backgroundColor: 'white',
   '&:hover': {
     [`& :not(.${classes.outlineInputDisabled}):not(.${classes.outlineInputError}) .${classes.outlineInputNotchedOutline}`]: {
@@ -90,7 +94,9 @@ interface StyledOutlinedInputProps {
 const StyledOutlinedInput = styled((props) => (
   <OutlinedInput
     classes={{
+      root: classes.outlineInputRoot,
       input: classes.outlineInputInput,
+      focused: classes.outlineInputFocused,
       inputMarginDense: classes.outlineInputInputMarginDense,
       notchedOutline: classes.outlineInputNotchedOutline,
       disabled: classes.outlineInputDisabled,
@@ -99,16 +105,24 @@ const StyledOutlinedInput = styled((props) => (
     {...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,
-  },
-  [`& .${classes.outlineInputInputMarginDense}`]: {
-    padding: '14.5px 15px 14.5px 12px',
+    ['&:focus']: {
+      background: 'rgba(0,0,0,0)',
+    },
   },
 }))
 
 interface StyledSelectProps {
-  paperMaxHeight: number | 'auto'
+  paperMaxHeight: number | string
   hasAdornment: boolean
 }
 
@@ -131,7 +145,9 @@ const StyledSelect = styled(
           horizontal: 'left',
         },
         getContentAnchorEl: null,
-        classes: { paper: className },
+        classes: {
+          paper: className,
+        },
       }}
       {...props}
     />
@@ -143,45 +159,30 @@ const StyledSelect = styled(
   },
 }))
 
-export interface OutlinedSelectProps extends SelectProps {
-  color?: 'primary' | 'secondary'
-  size?: 'medium' | 'small'
-  width?: number | 'auto'
-  paperMaxHeight?: number | 'auto'
-  error?: boolean
-  hasLabel?: boolean
-  hasShrink?: boolean
-  placeholder: string
-  helperText?: string
-  disabled?: boolean
-  SelectProps?: object | Partial<SelectProps>
-  OutlinedInputProps?: Partial<OutlinedInputProps> & {
-    onChange: (e: ChangeEvent<HTMLInputElement>) => void
-  }
-}
-
-const OutlinedSelect = ({
+export const OutlinedSelect = ({
   placeholder,
+  helperText,
+  InputProps,
   SelectProps,
-  OutlinedInputProps,
   children,
   color = 'primary',
-  size = 'medium',
+  size = 'small',
   width = 'auto',
+  selectMargin = 0,
   paperMaxHeight = 'auto',
   error = false,
   hasLabel = true,
   hasShrink = false,
-  helperText = '',
   value = '',
   disabled = false,
-}: OutlinedSelectProps) => {
-  const hasAdornment = !!OutlinedInputProps?.startAdornment
+}: SelectProps) => {
+  const hasAdornment = !!InputProps?.startAdornment
   const hasHelperText = !!helperText
   return (
     <StyledFormControl
       size={size}
       width={width}
+      selectMargin={selectMargin}
       disabled={disabled}
       error={error}
       color={color}
@@ -204,7 +205,7 @@ const OutlinedSelect = ({
             color={color}
             label={hasLabel ? placeholder : undefined}
             disabled={disabled}
-            {...OutlinedInputProps}
+            {...InputProps}
           />
         }
         {...SelectProps}

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,40 +22,69 @@ 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' },
     },
     width: {
-      type: { name: 'number', required: false },
+      type: { name: 'number | string', required: false },
       description: `Adjust width`,
       table: {
-        type: { summary: 'number' },
+        type: { summary: 'number | string' },
         defaultValue: { summary: 'auto' },
       },
       control: { type: 'number' },
     },
+    selectMargin: {
+      type: { name: 'number | string', required: false },
+      description: `Adjust margin`,
+      table: {
+        type: { summary: 'number | string' },
+        defaultValue: { summary: '0' },
+      },
+      control: { type: 'number' },
+    },
     paperMaxHeight: {
-      type: { name: 'number', required: false },
+      type: { name: 'number | string', required: false },
       description: `Adjust select menu paper max height.`,
       table: {
-        type: { summary: 'number' },
+        type: { summary: 'number | string' },
         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: true },
+        defaultValue: { summary: false },
       },
       control: { type: 'boolean' },
     },
@@ -105,16 +133,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 +151,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 +172,7 @@ const StyledInputAdornment = styled(({ disabled: _disabled, ...props }) => (
     {...props}
   />
 ))(({ disabled, theme }: StyledInputAdornmentProps) => ({
+  height: '100%',
   [`&.${classes.inputAdornmentRoot}`]: {
     color: disabled
       ? theme.palette.action.disabled
@@ -147,7 +180,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 +189,7 @@ const StandardSelectWithMenu = (props: StandardSelectProps) => {
   }
 
   return (
-    <StandardSelect
+    <Select
       value={item}
       SelectProps={{
         onChange: (e) => {
@@ -164,38 +198,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 +295,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`,
@@ -28,15 +28,18 @@ const classes = {
 
 interface StyledFormControlProps {
   color: 'primary' | 'secondary'
-  width: number | 'auto'
+  width: number | string
+  selectMargin: number | string
   theme?: Theme
 }
 
-const StyledFormControl = styled(({ width: _width, ...props }) => (
-  <FormControl {...props} />
-))(({ width, theme }: StyledFormControlProps) => ({
+const StyledFormControl = styled(
+  ({ width: _width, selectMargin: _selectMargin, ...props }) => (
+    <FormControl {...props} />
+  )
+)(({ width, selectMargin, theme }: StyledFormControlProps) => ({
   width,
-  margin: theme.spacing(0, 4, 4, 4),
+  margin: selectMargin,
 }))
 
 interface StyledInputLabelProps {
@@ -64,7 +67,7 @@ const StyledInputLabel = styled(({ color: _color, ...props }) => (
 }))
 
 interface StyledSelectProps {
-  paperMaxHeight: number | 'auto'
+  paperMaxHeight: number | string
   hasAdornment: boolean
 }
 
@@ -102,6 +105,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 +114,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 +131,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 +138,15 @@ export function StandardSelect({
   SelectProps,
   children,
   color = 'primary',
-  size = 'medium',
+  size = 'small',
   width = 'auto',
+  selectMargin = '0',
   paperMaxHeight = 'auto',
   error = false,
   hasShrink = false,
   value = '',
   disabled = false,
-}: StandardSelectProps) {
+}: SelectProps) {
   const hasAdornment = !!InputProps?.startAdornment
   const hasHelperText = !!helperText
   return (
@@ -158,6 +154,7 @@ export function StandardSelect({
       color={color}
       size={size}
       width={width}
+      selectMargin={selectMargin}
       disabled={disabled}
       error={error}
     >

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

@@ -4,7 +4,7 @@ import {
   TopicFilter as JuiTopicFilter,
   TopicFilterProps as JuiTopicFilterProps,
 } from './TopicFilter'
-import { topicTree } from '../utils/topicTree'
+import { topicTree } from '../../utils/topicTree'
 
 export default {
   component: JuiTopicFilter,

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 { Theme, styled, useTheme } 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 Select from '../select/Select'
+import SelectMenuItem from '../menu-item/SelectMenuItem'
 
 // self-defined-configs
 const PLACEHOLDER = '請選擇'
@@ -52,6 +52,7 @@ export const TopicFilter = ({
   hasArrow,
   initSelectedTopicIds,
 }: TopicFilterProps) => {
+  const theme = useTheme()
   const [selectedTopicIds, setSelectedTopicIds] = useState([])
   const [layeredTopicList, setLayeredTopicList] = useState([])
   const [isFocusedList, setIsFocusedList] = useState([])
@@ -125,12 +126,14 @@ export const TopicFilter = ({
 
   if (layeredTopicList.length === 0) {
     return (
-      <OutlinedSelect
+      <Select
+        variant='outlined'
         size='small'
         width={220}
+        selectMargin={theme.spacing(1)}
         placeholder='載入資料中...'
         disabled
-      ></OutlinedSelect>
+      ></Select>
     )
   }
   return (
@@ -140,9 +143,11 @@ export const TopicFilter = ({
           isFocusedList[layerNumber] || !selectedTopicIds[layerNumber]
         return (
           <SelectWrapper key={layeredTopic.id}>
-            <OutlinedSelect
+            <Select
+              variant='outlined'
               size='small'
               width={220}
+              selectMargin={theme.spacing(1)}
               paperMaxHeight={412}
               hasLabel={hasLabel}
               placeholder={PLACEHOLDER}
@@ -150,7 +155,7 @@ export const TopicFilter = ({
               SelectProps={{
                 'data-testid': `layered-topic-${layerNumber}`,
               }}
-              OutlinedInputProps={{
+              InputProps={{
                 inputProps: {
                   'aria-label': `layered-topic-${layerNumber}`,
                 },
@@ -187,7 +192,7 @@ export const TopicFilter = ({
                   {childTopic.title}
                 </SelectMenuItem>
               ))}
-            </OutlinedSelect>
+            </Select>
             {hasArrow && layerNumber !== layeredTopicList.length - 1 && (
               <StyledArrowRightRoundedIcon
                 fontSize='large'

package/declarations/libs/ui/src/lib/alert/Alert.d.ts

@@ -1,13 +0,0 @@
-import React from 'react';
-import { AlertProps as MuiAlertProps } from '@material-ui/lab';
-export interface AlertProps extends MuiAlertProps {
-    severity?: 'success' | 'info' | 'warning' | 'error';
-    action?: boolean;
-    buttonLink?: string;
-    isNewTab?: boolean;
-    cross?: boolean;
-    handleCrossClick?: () => void;
-    children?: React.ReactNode;
-}
-export declare const JuiAlert: ({ severity, action, buttonLink, isNewTab, cross, handleCrossClick, children, ...otherProps }: AlertProps) => JSX.Element;
-export default JuiAlert;

package/declarations/libs/ui/src/lib/selection-item/SelectionItem.d.ts

@@ -1,10 +0,0 @@
-export interface SelectionItemProps {
-    handleInput: () => {};
-    label1: string;
-    value1: string;
-    label2: string;
-    value2: string;
-    isError: boolean;
-}
-export declare function SelectionItem({ handleInput, label1, value1, label2, value2, isError, }: SelectionItemProps): JSX.Element;
-export default SelectionItem;