@junyiacademy/ui-test 0.0.4 → 0.0.8

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

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

package/dist/libs/ui/src/lib/selection-item/SelectionItem.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectionItem = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const core_1 = require("@material-ui/core");
+const Radio_1 = require("../radio/Radio");
+function SelectionItem({ handleInput, label1, value1, label2, value2, isError, }) {
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(core_1.RadioGroup, { onChange: handleInput },
+            react_1.default.createElement(Radio_1.Radio, { label: label1, value: value1 }),
+            react_1.default.createElement(Radio_1.Radio, { label: label2, value: value2 })),
+        isError && react_1.default.createElement(core_1.FormHelperText, null, "\u8ACB\u9078\u64C7")));
+}
+exports.SelectionItem = SelectionItem;
+exports.default = SelectionItem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@junyiacademy/ui-test",
-  "version": "0.0.4",
+  "version": "0.0.8",
   "description": "junyiacademy ui library",
   "main": "./dist/libs/ui/src/index.js",
   "typings": "./declarations/libs/ui/src/index.d.ts",

package/src/lib/TopicFilter.tsx

@@ -11,10 +11,6 @@ const PLACEHOLDER = '請選擇'
 // self-defined-components
 const PREFIX = 'JuiTopicFilter'
 
-const classes = {
-  root: `${PREFIX}-arrowIcon`,
-}
-
 const FiltersWrapper = styled('div')({
   display: 'flex',
   alignItems: 'center',
@@ -30,15 +26,13 @@ interface StyledArrowRightRoundedIconProps {
   theme?: Theme
 }
 
-const StyledArrowRightRoundedIcon = styled((props) => (
-  <ArrowRightRoundedIcon classes={classes} {...props} />
-))(({ theme }: StyledArrowRightRoundedIconProps) => ({
-  [`&.${classes.root}`]: {
+const StyledArrowRightRoundedIcon = styled(ArrowRightRoundedIcon)(
+  ({ theme }: StyledArrowRightRoundedIconProps) => ({
     margin: theme.spacing(-1, -1.5),
     fontSize: theme.spacing(7),
     color: '#444',
-  },
-}))
+  })
+)
 
 export interface TopicFilterProps {
   topicTree: ITopicTreeNode
@@ -149,12 +143,9 @@ const TopicFilter = ({
             <OutlinedSelect
               size='small'
               width={220}
-              selectPaperMaxHeight={412}
-              error={false}
+              paperMaxHeight={412}
               hasLabel={hasLabel}
-              hasShrink={false}
               placeholder={PLACEHOLDER}
-              hasAdornment={false}
               value={selectedTopicIds?.[layerNumber] || ''}
               SelectProps={{
                 'data-testid': `layered-topic-${layerNumber}`,

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

@@ -6,7 +6,6 @@ import { MenuItem, MenuItemProps } from '@material-ui/core'
 const PREFIX = 'JuiSelectMenuItem'
 
 const classes = {
-  menuItemRoot: `${PREFIX}-menuItem`,
   menuItemSelected: `${PREFIX}-menuItemSelected`,
 }
 
@@ -16,18 +15,13 @@ interface StyledMenuItemProps {
 }
 
 const StyledMenuItem = styled(({ width: _width, ...props }) => (
-  <MenuItem
-    classes={{ root: classes.menuItemRoot, selected: classes.menuItemSelected }}
-    {...props}
-  />
+  <MenuItem classes={{ selected: classes.menuItemSelected }} {...props} />
 ))(({ width, theme }: StyledMenuItemProps) => ({
-  [`&.${classes.menuItemRoot}`]: {
-    width: width,
-    whiteSpace: 'unset',
-    color: theme.palette.text.primary,
-  },
+  width: width,
+  whiteSpace: 'unset',
+  color: theme.palette.text.primary,
   [`& .${classes.menuItemSelected}`]: {
-    backgroundColor: '#E0E0E0',
+    backgroundColor: theme.palette.grey[300],
   },
 }))
 

package/src/lib/radio/Radio.stories.tsx

@@ -25,10 +25,11 @@ export default {
       type: { name: 'string', required: false },
       description: 'The position of the label.',
       table: {
-        type: { summary: 'bottom | end | start | top' },
+        type: { summary: 'end' },
         defaultValue: { summary: 'end' },
+        category: 'not comparable with caption',
       },
-      options: ['bottom', 'end', 'start', 'top'],
+      options: ['end'],
       control: { type: 'radio' },
     },
     color: {

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

@@ -1,5 +1,8 @@
 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 OutlinedSelect, { OutlinedSelectProps } from './OutlinedSelect'
 import SelectMenuItem from '../menu-item/SelectMenuItem'
 
@@ -29,7 +32,6 @@ export default {
       },
       options: ['small', 'medium'],
       control: { type: 'radio' },
-      defaultValue: 'medium',
     },
     width: {
       type: { name: 'number', required: false },
@@ -39,7 +41,6 @@ export default {
         defaultValue: { summary: 'auto' },
       },
       control: { type: 'number' },
-      defaultValue: '220',
     },
     paperMaxHeight: {
       type: { name: 'number', required: false },
@@ -49,27 +50,24 @@ export default {
         defaultValue: { summary: 'auto' },
       },
       control: { type: 'number' },
-      defaultValue: '412',
     },
-    hasLabel: {
+    hasInputLabel: {
       type: { name: 'boolean', required: false },
-      description: 'Control the label display state.',
+      description: 'If true, the label is displayed.',
       table: {
         type: { summary: 'boolean' },
         defaultValue: { summary: true },
       },
       control: { type: 'boolean' },
-      defaultValue: true,
     },
     hasShrink: {
       type: { name: 'boolean', required: false },
-      description: 'Control the label always on display.',
+      description: 'If true, the label is displayed and shrunk.',
       table: {
         type: { summary: 'boolean' },
         defaultValue: { summary: false },
       },
       control: { type: 'boolean' },
-      defaultValue: false,
     },
     placeholder: {
       type: { name: 'string', required: true },
@@ -79,7 +77,6 @@ export default {
         defaultValue: { summary: '請選擇' },
       },
       control: { type: 'text' },
-      defaultValue: '請選擇',
     },
     value: {
       type: { name: 'any', required: false },
@@ -108,33 +105,14 @@ export default {
       },
       control: { type: 'boolean' },
     },
-    hasHelperText: {
-      type: { name: 'boolean', required: false },
-      description: 'If true, the helper text will be displayed.',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: false },
-      },
-      control: { type: 'boolean' },
-    },
     helperText: {
       type: { name: 'string', required: true },
-      description: `The helper text.`,
+      description: `Display the helper text.`,
       table: {
         type: { summary: 'string' },
-        defaultValue: { summary: 'Helper text.' },
+        defaultValue: { summary: '' },
       },
       control: { type: 'text' },
-      defaultValue: 'Helper text.',
-    },
-    hasAdornment: {
-      type: { name: 'boolean', required: false },
-      description: 'If true, the prefix adornment will be displayed.',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: false },
-      },
-      control: { type: 'boolean' },
     },
     SelectProps: {
       type: { name: 'any', required: false },
@@ -153,39 +131,66 @@ export default {
   },
 } as Meta
 
-const OutlinedSelectWithMenu = (props: OutlinedSelectProps) => {
-  const [item, setItem] = useState<string>('')
+const PREFIX = 'JuiOutlinedSelect'
 
-  const handleChange = (event) => {
-    setItem(event.target.value)
-  }
+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,
+  },
+}))
+
+const OutlinedSelectWithMenu = (props: OutlinedSelectProps) => {
   return (
-    <OutlinedSelect
-      value={item}
-      OutlinedInputProps={{
-        onChange: (e) => {
-          handleChange(e)
-        },
-      }}
-      {...props}
-    >
+    <OutlinedSelect {...props}>
       <SelectMenuItem width={220} value='' disabled>
         {PLACEHOLDER}
       </SelectMenuItem>
-      <SelectMenuItem width={220} value={'Test'}>
+      <SelectMenuItem width={220} value='Test'>
         This is a select menu item
       </SelectMenuItem>
-      <SelectMenuItem width={220} value={'Example'}>
+      <SelectMenuItem width={220} value='Example'>
         Example
       </SelectMenuItem>
     </OutlinedSelect>
   )
 }
 
-const ValueOnlyStory: Story<OutlinedSelectProps> = (args) => (
-  <OutlinedSelectWithMenu {...args} />
-)
+const ValueOnlyStory: Story<OutlinedSelectProps> = (args) => {
+  const [item, setItem] = useState<string>('')
+
+  const handleChange = (event) => {
+    setItem(event.target.value)
+  }
+  return (
+    <OutlinedSelectWithMenu
+      OutlinedInputProps={{
+        onChange: (e) => {
+          handleChange(e)
+        },
+      }}
+      value={item}
+      {...args}
+    />
+  )
+}
 
 export const ValueOnly = ValueOnlyStory.bind({})
 
@@ -194,18 +199,36 @@ ValueOnly.args = {
   size: 'medium',
   width: 220,
   paperMaxHeight: 412,
-  hasLabel: true,
+  hasInputLabel: true,
   placeholder: PLACEHOLDER,
-  hasHelperText: false,
   helperText: 'test',
-  hasAdornment: false,
   disabled: false,
   SelectProps: {},
 }
 
-const WithPrefixStory: Story<OutlinedSelectProps> = (args) => (
-  <OutlinedSelectWithMenu {...args} />
-)
+const WithPrefixStory: Story<OutlinedSelectProps> = (args) => {
+  const [item, setItem] = useState<string>('')
+
+  const handleChange = (event) => {
+    setItem(event.target.value)
+  }
+  return (
+    <OutlinedSelectWithMenu
+      OutlinedInputProps={{
+        onChange: (e) => {
+          handleChange(e)
+        },
+        startAdornment: (
+          <StyledInputAdornment position='start' disabled={args.disabled}>
+            <Visibility />
+          </StyledInputAdornment>
+        ),
+      }}
+      value={item}
+      {...args}
+    />
+  )
+}
 
 export const WithPrefix = WithPrefixStory.bind({})
 
@@ -214,11 +237,9 @@ WithPrefix.args = {
   size: 'medium',
   width: 220,
   paperMaxHeight: 412,
-  hasLabel: true,
+  hasInputLabel: true,
   placeholder: PLACEHOLDER,
-  hasHelperText: false,
   helperText: 'test',
-  hasAdornment: true,
   disabled: false,
   SelectProps: {},
 }

package/src/lib/select/OutlinedSelect.tsx

@@ -8,28 +8,23 @@ import {
   SelectProps,
   OutlinedInputProps,
   FormHelperText,
-  InputAdornment,
 } from '@material-ui/core'
-import VisibilityIcon from '@material-ui/icons/Visibility'
 
 // self-defined-components
 const PREFIX = 'JuiOutlinedSelect'
 
 const classes = {
-  inputLabelRoot: `${PREFIX}-inputLabel`,
   inputLabelFocused: `${PREFIX}-inputLabelFocused`,
   inputLabelOutlined: `${PREFIX}-inputLabelOutlined`,
   inputLabelMarginDense: `${PREFIX}-inputLabelMarginDense`,
   inputLabelShrink: `${PREFIX}-inputLabelShrink`,
   inputLabelError: `${PREFIX}-inputLabelError`,
   inputLabelDisabled: `${PREFIX}-inputLabelDisabled`,
-  outlineInputRoot: `${PREFIX}-outlineInput`,
   outlineInputInput: `${PREFIX}-input`,
   outlineInputInputMarginDense: `${PREFIX}-inputMarginDense`,
   outlineInputNotchedOutline: `${PREFIX}-notchedOutline`,
   outlineInputDisabled: `${PREFIX}-inputDisabled`,
   outlineInputError: `${PREFIX}-outlinedInputError`,
-  outlineInputAdornmentRoot: `${PREFIX}-outlineInputAdornmentRoot`,
   selectPaper: `${PREFIX}-menuPaper`,
 }
 
@@ -60,7 +55,6 @@ interface StyledInputLabelProps {
 const StyledInputLabel = styled(({ color: _color, ...props }) => (
   <InputLabel
     classes={{
-      root: classes.inputLabelRoot,
       outlined: classes.inputLabelOutlined,
       marginDense: classes.inputLabelMarginDense,
       shrink: classes.inputLabelShrink,
@@ -71,9 +65,7 @@ const StyledInputLabel = styled(({ color: _color, ...props }) => (
     {...props}
   />
 ))(({ color, theme }: StyledInputLabelProps) => ({
-  [`& .${classes.inputLabelRoot}`]: {
-    color: theme.palette.text.secondary,
-  },
+  color: theme.palette.text.secondary,
   [`&.${classes.inputLabelOutlined}`]: {
     [`&:not(.${classes.inputLabelDisabled}) .${classes.inputLabelFocused}`]: {
       color: theme.palette.action.active,
@@ -85,16 +77,16 @@ const StyledInputLabel = styled(({ color: _color, ...props }) => (
   [`&.${classes.inputLabelShrink}:not(.${classes.inputLabelError}):not(.${classes.inputLabelDisabled}).${classes.inputLabelFocused}`]: {
     color: theme.palette[color].main,
   },
-  [`&.${classes.inputLabelShrink}.${classes.inputLabelError}:not(.${classes.inputLabelDisabled})`]: {
-    color: theme.palette.error.main,
-  },
-  [`&.${classes.inputLabelMarginDense}`]: {},
   [`&.${classes.inputLabelShrink}`]: {
     backgroundColor: '#ffffff',
     padding: '0 2px',
   },
 }))
 
+interface StyledOutlinedInputProps {
+  theme?: Theme
+}
+
 const StyledOutlinedInput = styled((props) => (
   <OutlinedInput
     classes={{
@@ -106,25 +98,23 @@ const StyledOutlinedInput = styled((props) => (
     }}
     {...props}
   />
-))({
+))(({ theme }: StyledOutlinedInputProps) => ({
   [`& .${classes.outlineInputInput}`]: {
-    color: 'rgba(0, 0, 0, 0.87)',
+    color: theme.palette.text.primary,
   },
   [`& .${classes.outlineInputInputMarginDense}`]: {
     padding: '14.5px 15px 14.5px 12px',
   },
-  [`&.${classes.outlineInputNotchedOutline}`]: {},
-  [`&.${classes.outlineInputDisabled}`]: {},
-})
+}))
 
 interface StyledSelectProps {
-  selectPaperMaxHeight: number | 'auto'
+  paperMaxHeight: number | 'auto'
   hasAdornment: boolean
 }
 
 const StyledSelect = styled(
   ({
-    selectPaperMaxHeight: _selectPaperMaxHeight,
+    paperMaxHeight: _paperMaxHeight,
     hasAdornment: _hasAdornment,
     className,
     ...props
@@ -146,45 +136,23 @@ const StyledSelect = styled(
       {...props}
     />
   )
-)(({ hasAdornment, selectPaperMaxHeight }: StyledSelectProps) => ({
+)(({ hasAdornment, paperMaxHeight }: StyledSelectProps) => ({
   '&&': {
-    maxHeight: selectPaperMaxHeight,
+    maxHeight: paperMaxHeight,
     left: hasAdornment ? '24px !important' : '70px',
   },
 }))
 
-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,
-  },
-}))
-
 export interface OutlinedSelectProps {
   color?: 'primary' | 'secondary'
   size?: 'medium' | 'small'
   width?: number | 'auto'
-  selectPaperMaxHeight?: number | 'auto'
+  paperMaxHeight?: number | 'auto'
   error?: boolean
   hasLabel?: boolean
   hasShrink?: boolean
   placeholder: string
-  hasHelperText?: boolean
   helperText?: string
-  hasAdornment?: boolean
   value?: unknown
   disabled?: boolean
   SelectProps?: object | Partial<SelectProps>
@@ -198,20 +166,20 @@ const OutlinedSelect = ({
   color = 'primary',
   size = 'medium',
   width = 'auto',
-  selectPaperMaxHeight = 'auto',
+  paperMaxHeight = 'auto',
   error = false,
   hasLabel = true,
   hasShrink = false,
   placeholder,
-  hasHelperText = false,
   helperText = '',
-  hasAdornment = false,
   value = '',
   disabled = false,
   SelectProps,
   OutlinedInputProps,
   children,
 }: OutlinedSelectProps) => {
+  const hasAdornment = !!OutlinedInputProps?.startAdornment
+  const hasHelperText = !!helperText
   return (
     <StyledFormControl
       size={size}
@@ -220,41 +188,28 @@ const OutlinedSelect = ({
       error={error}
       color={color}
     >
-      {hasShrink && (
-        <StyledInputLabel color={color} variant='outlined' shrink>
-          {placeholder}
-        </StyledInputLabel>
-      )}
-      {hasLabel && !hasShrink && (
-        <StyledInputLabel color={color} variant='outlined'>
-          {placeholder}
-        </StyledInputLabel>
-      )}
+      {hasLabel ? (
+        hasShrink ? (
+          <StyledInputLabel color={color} variant='outlined' shrink>
+            {placeholder}
+          </StyledInputLabel>
+        ) : (
+          <StyledInputLabel color={color} variant='outlined'>
+            {placeholder}
+          </StyledInputLabel>
+        )
+      ) : null}
       <StyledSelect
         value={value}
-        selectPaperMaxHeight={selectPaperMaxHeight}
+        paperMaxHeight={paperMaxHeight}
         hasAdornment={hasAdornment}
         input={
-          hasAdornment ? (
-            <StyledOutlinedInput
-              color={color}
-              label={hasLabel ? placeholder : undefined}
-              disabled={disabled}
-              startAdornment={
-                <StyledInputAdornment position='start' disabled={disabled}>
-                  <VisibilityIcon />
-                </StyledInputAdornment>
-              }
-              {...OutlinedInputProps}
-            />
-          ) : (
-            <StyledOutlinedInput
-              color={color}
-              label={hasLabel ? placeholder : undefined}
-              disabled={disabled}
-              {...OutlinedInputProps}
-            />
-          )
+          <StyledOutlinedInput
+            color={color}
+            label={hasLabel ? placeholder : undefined}
+            disabled={disabled}
+            {...OutlinedInputProps}
+          />
         }
         {...SelectProps}
       >