@junyiacademy/ui-test 0.0.11 → 0.0.12

package/declarations/libs/ui/src/index.d.ts

@@ -1,4 +1,4 @@
-export { default as TopicFilter } from './lib/TopicFilter';
+export { default as TopicFilter } from './lib/topic-filter/TopicFilter';
 export { default as SelectMenuItem } from './lib/menu-item/SelectMenuItem';
 export { default as OutlinedSelect } from './lib/select/OutlinedSelect';
 export { default as Button } from './lib/button/Button';

package/declarations/libs/ui/src/interfaces/index.d.ts

@@ -1,3 +1,5 @@
+import { ChangeEvent } from 'react';
+import { SelectProps as MuiSelectProp, InputProps as MuiInputProps, OutlinedInputProps } from '@material-ui/core';
 export interface ITopicTreeNode {
     childTopics: ITopicTreeNode[];
     id: string;
@@ -6,3 +8,19 @@ export interface ITopicTreeNode {
     tags: string[];
     title: string;
 }
+export interface SelectProps extends MuiSelectProp {
+    placeholder: string;
+    helperText?: string;
+    InputProps?: (Partial<OutlinedInputProps> & {
+        onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+    }) | (object & Partial<MuiInputProps>);
+    SelectProps?: object | Partial<MuiSelectProp>;
+    color?: 'primary' | 'secondary';
+    size?: 'medium' | 'small';
+    width?: number | 'auto';
+    paperMaxHeight?: number | 'auto';
+    error?: boolean;
+    hasLabel?: boolean;
+    hasShrink?: boolean;
+    disabled?: boolean;
+}

package/declarations/libs/ui/src/lib/menu-item/SelectMenuItem.d.ts

@@ -5,5 +5,5 @@ export interface SelectMenuItemProps extends MenuItemProps {
     value?: any;
     disabled?: boolean;
 }
-declare const SelectMenuItem: React.ForwardRefExoticComponent<Pick<React.PropsWithChildren<SelectMenuItemProps>, "button" | "slot" | "style" | "title" | "color" | "width" | "alignItems" | "translate" | "hidden" | "dense" | "disabled" | "classes" | "className" | "children" | "value" | "onChange" | "onKeyUp" | "onKeyDown" | "onBlur" | "onFocus" | "defaultValue" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "autoFocus" | "innerRef" | "key" | "selected" | "ContainerComponent" | "ContainerProps" | "disableGutters" | "divider" | "focusVisibleClassName"> & React.RefAttributes<HTMLLIElement>>;
+declare const SelectMenuItem: React.ForwardRefExoticComponent<Pick<React.PropsWithChildren<SelectMenuItemProps>, "classes" | "disabled" | "value" | "onChange" | "children" | "onKeyUp" | "onKeyDown" | "onBlur" | "onFocus" | "defaultValue" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "autoFocus" | "innerRef" | "button" | "width" | "alignItems" | "dense" | "key" | "selected" | "ContainerComponent" | "ContainerProps" | "disableGutters" | "divider" | "focusVisibleClassName"> & React.RefAttributes<HTMLLIElement>>;
 export default SelectMenuItem;

package/declarations/libs/ui/src/lib/select/OutlinedSelect.d.ts

@@ -1,20 +1,3 @@
-import { ChangeEvent } from 'react';
-import { SelectProps, OutlinedInputProps } from '@material-ui/core';
-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;
-    };
-}
-declare const OutlinedSelect: ({ placeholder, SelectProps, OutlinedInputProps, children, color, size, width, paperMaxHeight, error, hasLabel, hasShrink, helperText, value, disabled, }: OutlinedSelectProps) => JSX.Element;
+import { SelectProps } from '../../interfaces';
+export declare const OutlinedSelect: ({ placeholder, helperText, InputProps, SelectProps, children, color, size, width, paperMaxHeight, error, hasLabel, hasShrink, value, disabled, }: SelectProps) => JSX.Element;
 export default OutlinedSelect;

package/declarations/libs/ui/src/lib/select/Select.d.ts

@@ -0,0 +1,3 @@
+import { SelectProps } from '../../interfaces';
+export declare function Select({ variant, ...props }: SelectProps): JSX.Element;
+export default Select;

package/declarations/libs/ui/src/lib/select/StandardSelect.d.ts

@@ -1,16 +1,3 @@
-import { SelectProps, InputProps } from '@material-ui/core';
-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 declare function StandardSelect({ placeholder, helperText, InputProps, SelectProps, children, color, size, width, paperMaxHeight, error, hasShrink, value, disabled, }: StandardSelectProps): JSX.Element;
+import { SelectProps } from '../../interfaces';
+export declare function StandardSelect({ placeholder, helperText, InputProps, SelectProps, children, color, size, width, paperMaxHeight, error, hasShrink, value, disabled, }: SelectProps): JSX.Element;
 export default StandardSelect;

package/declarations/libs/ui/src/lib/topic-filter/TopicFilter.d.ts

@@ -0,0 +1,13 @@
+import type { ITopicTreeNode } from '../../interfaces';
+export interface TopicFilterProps {
+    topicTree: ITopicTreeNode;
+    onTopicSelected: (topic: ITopicTreeNode, selectedInfo: {
+        layerNumber: number;
+        selectedTopicIds: string[];
+    }) => void;
+    isLastLayer: (topic: ITopicTreeNode) => boolean;
+    hasArrow: boolean;
+    initSelectedTopicIds: string[];
+}
+export declare const TopicFilter: ({ topicTree, onTopicSelected, isLastLayer, hasArrow, initSelectedTopicIds, }: TopicFilterProps) => JSX.Element;
+export default TopicFilter;

package/dist/libs/ui/src/index.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StandardSelect = exports.TextField = exports.Radio = exports.ButtonGroup = exports.Button = exports.OutlinedSelect = exports.SelectMenuItem = exports.TopicFilter = void 0;
-var TopicFilter_1 = require("./lib/TopicFilter");
+var TopicFilter_1 = require("./lib/topic-filter/TopicFilter");
 Object.defineProperty(exports, "TopicFilter", { enumerable: true, get: function () { return __importDefault(TopicFilter_1).default; } });
 var SelectMenuItem_1 = require("./lib/menu-item/SelectMenuItem");
 Object.defineProperty(exports, "SelectMenuItem", { enumerable: true, get: function () { return __importDefault(SelectMenuItem_1).default; } });

package/dist/libs/ui/src/lib/select/OutlinedSelect.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.OutlinedSelect = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const styles_1 = require("@material-ui/core/styles");
@@ -14,10 +15,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`,
 };
 const StyledFormControl = styles_1.styled((_a) => {
@@ -32,6 +35,9 @@ const StyledFormControl = styles_1.styled((_a) => {
             borderColor: theme.palette[color].main,
         },
     },
+    [`& .${classes.outlineInputError}.${classes.outlineInputFocused} .${classes.outlineInputNotchedOutline}`]: {
+        borderColor: `${theme.palette.error.main}`,
+    },
 }));
 const StyledInputLabel = styles_1.styled((_a) => {
     var { color: _color } = _a, props = tslib_1.__rest(_a, ["color"]);
@@ -62,14 +68,22 @@ const StyledInputLabel = styles_1.styled((_a) => {
     },
 }));
 const StyledOutlinedInput = styles_1.styled((props) => (react_1.default.createElement(core_1.OutlinedInput, Object.assign({ classes: {
+        root: classes.outlineInputRoot,
+        focused: classes.outlineInputFocused,
         input: classes.outlineInputInput,
         inputMarginDense: classes.outlineInputInputMarginDense,
         notchedOutline: classes.outlineInputNotchedOutline,
         disabled: classes.outlineInputDisabled,
         error: classes.outlineInputError,
     } }, props))))(({ theme }) => ({
+    [`&.${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',
@@ -88,7 +102,9 @@ const StyledSelect = styles_1.styled((_a) => {
                 horizontal: 'left',
             },
             getContentAnchorEl: null,
-            classes: { paper: className },
+            classes: {
+                paper: className,
+            },
         } }, props)));
 })(({ hasAdornment, paperMaxHeight }) => ({
     '&': {
@@ -96,12 +112,13 @@ const StyledSelect = styles_1.styled((_a) => {
         left: hasAdornment ? '24px !important' : '70px',
     },
 }));
-const OutlinedSelect = ({ placeholder, SelectProps, OutlinedInputProps, children, color = 'primary', size = 'medium', width = 'auto', paperMaxHeight = 'auto', error = false, hasLabel = true, hasShrink = false, helperText = '', value = '', disabled = false, }) => {
-    const hasAdornment = !!(OutlinedInputProps === null || OutlinedInputProps === void 0 ? void 0 : OutlinedInputProps.startAdornment);
+const OutlinedSelect = ({ placeholder, helperText, InputProps, SelectProps, children, color = 'primary', size = 'medium', width = 'auto', paperMaxHeight = 'auto', error = false, hasLabel = true, hasShrink = false, value = '', disabled = false, }) => {
+    const hasAdornment = !!(InputProps === null || InputProps === void 0 ? void 0 : InputProps.startAdornment);
     const hasHelperText = !!helperText;
     return (react_1.default.createElement(StyledFormControl, { size: size, width: width, disabled: disabled, error: error, color: color },
         hasLabel && (react_1.default.createElement(StyledInputLabel, { color: color, variant: 'outlined', shrink: hasShrink ? true : undefined }, placeholder)),
-        react_1.default.createElement(StyledSelect, Object.assign({ value: value, paperMaxHeight: paperMaxHeight, hasAdornment: hasAdornment, input: react_1.default.createElement(StyledOutlinedInput, Object.assign({ color: color, label: hasLabel ? placeholder : undefined, disabled: disabled }, OutlinedInputProps)) }, SelectProps), children),
+        react_1.default.createElement(StyledSelect, Object.assign({ value: value, paperMaxHeight: paperMaxHeight, hasAdornment: hasAdornment, input: react_1.default.createElement(StyledOutlinedInput, Object.assign({ color: color, label: hasLabel ? placeholder : undefined, disabled: disabled }, InputProps)) }, SelectProps), children),
         hasHelperText && react_1.default.createElement(core_1.FormHelperText, null, helperText)));
 };
-exports.default = OutlinedSelect;
+exports.OutlinedSelect = OutlinedSelect;
+exports.default = exports.OutlinedSelect;

package/dist/libs/ui/src/lib/select/Select.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Select = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const OutlinedSelect_1 = require("./OutlinedSelect");
+const StandardSelect_1 = require("./StandardSelect");
+function Select(_a) {
+    var { variant } = _a, props = tslib_1.__rest(_a, ["variant"]);
+    if (variant === 'outlined') {
+        return react_1.default.createElement(OutlinedSelect_1.OutlinedSelect, Object.assign({}, props));
+    }
+    return react_1.default.createElement(StandardSelect_1.StandardSelect, Object.assign({}, props));
+}
+exports.Select = Select;
+exports.default = Select;

package/dist/libs/ui/src/lib/select/StandardSelect.js

@@ -11,6 +11,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`,
@@ -60,12 +63,23 @@ const StyledSelect = styles_1.styled((_a) => {
 const StyledInput = styles_1.styled((_a) => {
     var { color: _color } = _a, props = tslib_1.__rest(_a, ["color"]);
     return (react_1.default.createElement(core_1.Input, Object.assign({ classes: {
+            root: classes.inputRoot,
+            focused: classes.inputFocused,
+            input: classes.inputInput,
             disabled: classes.inputDisabled,
             underline: classes.inputUnderline,
             error: classes.inputError,
         } }, props)));
 })(({ color, theme }) => ({
     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,

package/dist/libs/ui/src/lib/topic-filter/TopicFilter.js

@@ -0,0 +1,120 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TopicFilter = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const styles_1 = require("@material-ui/core/styles");
+const ArrowRightRounded_1 = tslib_1.__importDefault(require("@material-ui/icons/ArrowRightRounded"));
+const OutlinedSelect_1 = tslib_1.__importDefault(require("../select/OutlinedSelect"));
+const SelectMenuItem_1 = tslib_1.__importDefault(require("../menu-item/SelectMenuItem"));
+// self-defined-configs
+const PLACEHOLDER = '請選擇';
+// self-defined-components
+const PREFIX = 'JuiTopicFilter';
+const FiltersWrapper = styles_1.styled('div')({
+    display: 'flex',
+    alignItems: 'center',
+    flexWrap: 'wrap',
+});
+const SelectWrapper = styles_1.styled('div')({
+    display: 'flex',
+    alignItems: 'center',
+});
+const StyledArrowRightRoundedIcon = styles_1.styled(ArrowRightRounded_1.default)(({ theme }) => ({
+    margin: theme.spacing(-1, -1.5),
+    fontSize: theme.spacing(7),
+    color: '#444',
+}));
+const TopicFilter = ({ topicTree, onTopicSelected, isLastLayer, hasArrow, initSelectedTopicIds, }) => {
+    const [selectedTopicIds, setSelectedTopicIds] = react_1.useState([]);
+    const [layeredTopicList, setLayeredTopicList] = react_1.useState([]);
+    const [isFocusedList, setIsFocusedList] = react_1.useState([]);
+    const initSelectedLayers = () => {
+        const newLayeredTopicList = initSelectedTopicIds.reduce((topicListAccumulator, topicId, index) => {
+            var _a, _b;
+            const selectedTopic = (_b = (_a = topicListAccumulator[index]) === null || _a === void 0 ? void 0 : _a.childTopics) === null || _b === void 0 ? void 0 : _b.find((childTopic) => childTopic.id === topicId);
+            if (!selectedTopic) {
+                return topicListAccumulator;
+            }
+            if (isLastLayer(selectedTopic)) {
+                return topicListAccumulator;
+            }
+            return [...topicListAccumulator, selectedTopic];
+        }, [topicTree]);
+        setLayeredTopicList(newLayeredTopicList);
+        setSelectedTopicIds(initSelectedTopicIds.slice(0, newLayeredTopicList.length));
+        setIsFocusedList(Array(newLayeredTopicList.length).fill(false));
+    };
+    const handleChange = (e, layerNumber, layeredTopic) => {
+        const selectedTopic = layeredTopic.childTopics.find((childTopic) => childTopic.id === e.target.value);
+        const newSelectedTopicIds = [
+            ...selectedTopicIds.slice(0, layerNumber),
+            selectedTopic.id,
+        ];
+        setSelectedTopicIds(newSelectedTopicIds);
+        onTopicSelected(selectedTopic, {
+            layerNumber,
+            selectedTopicIds: newSelectedTopicIds,
+        });
+        if (isLastLayer(selectedTopic)) {
+            setLayeredTopicList((prevTopicList) => prevTopicList.slice(0, layerNumber + 1));
+            setIsFocusedList((prevList) => prevList.slice(0, layerNumber + 1));
+        }
+        else {
+            setLayeredTopicList((prevTopicList) => [
+                ...prevTopicList.slice(0, layerNumber + 1),
+                selectedTopic,
+            ]);
+            setIsFocusedList((prevList) => [
+                ...prevList.slice(0, layerNumber + 1),
+                false,
+            ]);
+        }
+    };
+    react_1.useEffect(() => {
+        if (!topicTree || Object.keys(topicTree).length === 0) {
+            return;
+        }
+        if (initSelectedTopicIds.length !== 0) {
+            initSelectedLayers();
+            return;
+        }
+        setLayeredTopicList([topicTree]);
+    }, [topicTree]);
+    if (layeredTopicList.length === 0) {
+        return (react_1.default.createElement(OutlinedSelect_1.default, { size: 'small', width: 220, placeholder: '\u8F09\u5165\u8CC7\u6599\u4E2D...', disabled: true }));
+    }
+    return (react_1.default.createElement(FiltersWrapper, null, layeredTopicList.map((layeredTopic, layerNumber) => {
+        const hasLabel = isFocusedList[layerNumber] || !selectedTopicIds[layerNumber];
+        return (react_1.default.createElement(SelectWrapper, { key: layeredTopic.id },
+            react_1.default.createElement(OutlinedSelect_1.default, { size: 'small', width: 220, paperMaxHeight: 412, hasLabel: hasLabel, placeholder: PLACEHOLDER, value: (selectedTopicIds === null || selectedTopicIds === void 0 ? void 0 : selectedTopicIds[layerNumber]) || '', SelectProps: {
+                    'data-testid': `layered-topic-${layerNumber}`,
+                }, InputProps: {
+                    inputProps: {
+                        'aria-label': `layered-topic-${layerNumber}`,
+                    },
+                    onChange: (e) => {
+                        handleChange(e, layerNumber, layeredTopic);
+                    },
+                    onFocus: () => {
+                        setIsFocusedList((prevList) => {
+                            const newList = [...prevList];
+                            newList[layerNumber] = true;
+                            return newList;
+                        });
+                    },
+                    onBlur: () => {
+                        setIsFocusedList((prevList) => {
+                            const newList = [...prevList];
+                            newList[layerNumber] = false;
+                            return newList;
+                        });
+                    },
+                } },
+                react_1.default.createElement(SelectMenuItem_1.default, { width: 220, disabled: true }, PLACEHOLDER),
+                layeredTopic.childTopics.map((childTopic) => (react_1.default.createElement(SelectMenuItem_1.default, { width: 220, key: childTopic.id, value: childTopic.id, "data-testid": `layered-menuitem-${layerNumber}`, "data-is-content-topic": childTopic.isContentTopic }, childTopic.title)))),
+            hasArrow && layerNumber !== layeredTopicList.length - 1 && (react_1.default.createElement(StyledArrowRightRoundedIcon, { fontSize: 'large', "data-testid": 'topic-filter-arrow' }))));
+    })));
+};
+exports.TopicFilter = TopicFilter;
+exports.default = exports.TopicFilter;

package/package.json

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

package/src/index.ts

@@ -1,4 +1,4 @@
-export { default as TopicFilter } from './lib/TopicFilter'
+export { default as TopicFilter } from './lib/topic-filter/TopicFilter'
 export { default as SelectMenuItem } from './lib/menu-item/SelectMenuItem'
 export { default as OutlinedSelect } from './lib/select/OutlinedSelect'
 export { default as Button } from './lib/button/Button'

package/src/interfaces/index.tsx

@@ -1,3 +1,10 @@
+import { ChangeEvent } from 'react'
+import {
+  SelectProps as MuiSelectProp,
+  InputProps as MuiInputProps,
+  OutlinedInputProps,
+} from '@material-ui/core'
+
 export interface ITopicTreeNode {
   childTopics: ITopicTreeNode[]
   id: string
@@ -6,3 +13,21 @@ export interface ITopicTreeNode {
   tags: string[]
   title: string
 }
+export interface SelectProps extends MuiSelectProp {
+  placeholder: string
+  helperText?: string
+  InputProps?:
+    | (Partial<OutlinedInputProps> & {
+        onChange: (e: ChangeEvent<HTMLInputElement>) => void
+      })
+    | (object & Partial<MuiInputProps>)
+  SelectProps?: object | Partial<MuiSelectProp>
+  color?: 'primary' | 'secondary'
+  size?: 'medium' | 'small'
+  width?: number | 'auto'
+  paperMaxHeight?: number | 'auto'
+  error?: boolean
+  hasLabel?: boolean
+  hasShrink?: boolean
+  disabled?: boolean
+}

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,7 +143,9 @@ const StyledSelect = styled(
           horizontal: 'left',
         },
         getContentAnchorEl: null,
-        classes: { paper: className },
+        classes: {
+          paper: className,
+        },
       }}
       {...props}
     />
@@ -143,27 +157,11 @@ 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',
@@ -172,11 +170,10 @@ const OutlinedSelect = ({
   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
@@ -204,7 +201,7 @@ const OutlinedSelect = ({
             color={color}
             label={hasLabel ? placeholder : undefined}
             disabled={disabled}
-            {...OutlinedInputProps}
+            {...InputProps}
           />
         }
         {...SelectProps}

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

@@ -1,16 +1,15 @@
 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 { InputAdornment } from '@material-ui/core'
 import { Visibility } from '@material-ui/icons'
-import OutlinedSelect, { OutlinedSelectProps } from './OutlinedSelect'
+import { Select } from './Select'
 import SelectMenuItem from '../menu-item/SelectMenuItem'
-
-const PLACEHOLDER = '請選擇'
+import { SelectProps } from '../../interfaces'
 
 export default {
-  component: OutlinedSelect,
-  title: 'OutlinedSelect',
+  component: Select,
+  title: 'Select',
   argTypes: {
     color: {
       type: { name: 'string', required: false },
@@ -53,7 +52,8 @@ export default {
     },
     hasLabel: {
       type: { name: 'boolean', required: false },
-      description: 'If true, the label is displayed.',
+      description:
+        'If true, the label is displayed. Always true on StandardSelect.',
       table: {
         type: { summary: 'boolean' },
         defaultValue: { summary: true },
@@ -121,9 +121,10 @@ export default {
         type: { summary: 'any' },
       },
     },
-    OutlinedInputProps: {
+    CommonInputProps: {
       type: { name: 'any', required: false },
-      description: 'Attributes applied to to inner OutlinedInput element.',
+      description:
+        'Attributes applied to to inner OutlinedInput element on OutlinedSelect or Input element on StandardSelect.',
       table: {
         type: { summary: 'any' },
       },
@@ -131,10 +132,12 @@ export default {
   },
 } as Meta
 
-const PREFIX = 'JuiOutlinedSelect'
+const PLACEHOLDER = 'Please select an option'
+const ERROR_PLACEHOLDER = 'Please select an option'
+const PREFIX = 'JuiSelect'
 
 const classes = {
-  outlineInputAdornmentRoot: `${PREFIX}-outlineInputAdornmentRoot`,
+  inputAdornmentRoot: `${PREFIX}-inputAdornmentRoot`,
 }
 
 interface StyledInputAdornmentProps {
@@ -145,18 +148,20 @@ interface StyledInputAdornmentProps {
 const StyledInputAdornment = styled(({ disabled: _disabled, ...props }) => (
   <InputAdornment
     classes={{
-      root: classes.outlineInputAdornmentRoot,
+      root: classes.inputAdornmentRoot,
     }}
     {...props}
   />
 ))(({ disabled, theme }: StyledInputAdornmentProps) => ({
-  [`&.${classes.outlineInputAdornmentRoot}`]: {
+  height: '100%',
+  [`&.${classes.inputAdornmentRoot}`]: {
     color: disabled
       ? theme.palette.action.disabled
       : theme.palette.action.active,
   },
 }))
 
+// Outlined Select start with here.
 interface OutlinedSelectWithMenuProps {
   startAdornment?: React.ReactNode
 }
@@ -164,15 +169,16 @@ interface OutlinedSelectWithMenuProps {
 const OutlinedSelectWithMenu = ({
   startAdornment,
   ...props
-}: OutlinedSelectProps & OutlinedSelectWithMenuProps) => {
+}: SelectProps & OutlinedSelectWithMenuProps) => {
   const [item, setItem] = useState<string>('')
 
   const handleChange = (event) => {
     setItem(event.target.value)
   }
   return (
-    <OutlinedSelect
-      OutlinedInputProps={{
+    <Select
+      variant='outlined'
+      InputProps={{
         onChange: (e) => {
           handleChange(e)
         },
@@ -181,38 +187,91 @@ const OutlinedSelectWithMenu = ({
       value={item}
       {...props}
     >
-      <SelectMenuItem width={220} value='' disabled>
+      <SelectMenuItem width={props.width} value='' disabled>
         {PLACEHOLDER}
       </SelectMenuItem>
-      <SelectMenuItem width={220} value='Test'>
+      <SelectMenuItem width={props.width} value='Test'>
         This is a select menu item
       </SelectMenuItem>
-      <SelectMenuItem width={220} value='Example'>
+      <SelectMenuItem width={props.width} value='Example'>
         Example
       </SelectMenuItem>
-    </OutlinedSelect>
+    </Select>
   )
 }
 
-const ValueOnlyStory: Story<OutlinedSelectProps> = (args) => (
+const OutlinedValueOnlyStory: Story<SelectProps> = (args) => (
   <OutlinedSelectWithMenu {...args} />
 )
 
-export const ValueOnly = ValueOnlyStory.bind({})
+export const OutlinedValueOnly = OutlinedValueOnlyStory.bind({})
 
-ValueOnly.args = {
+OutlinedValueOnly.args = {
   color: 'primary',
   size: 'medium',
   width: 220,
   paperMaxHeight: 412,
   hasLabel: true,
   placeholder: PLACEHOLDER,
-  helperText: 'test',
+  helperText: 'Pick your choice',
   disabled: false,
   SelectProps: {},
 }
 
-const WithPrefixStory: Story<OutlinedSelectProps> = (args) => (
+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}>
@@ -223,16 +282,140 @@ const WithPrefixStory: Story<OutlinedSelectProps> = (args) => (
   />
 )
 
-export const WithPrefix = WithPrefixStory.bind({})
+export const OutlinedWithPrefix = OutlinedWithPrefixStory.bind({})
 
-WithPrefix.args = {
+OutlinedWithPrefix.args = {
   color: 'primary',
   size: 'medium',
   width: 220,
   paperMaxHeight: 412,
   hasLabel: true,
   placeholder: PLACEHOLDER,
-  helperText: 'test',
+  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`,
@@ -102,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,
@@ -110,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,
@@ -122,20 +134,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,
@@ -150,7 +148,7 @@ export function StandardSelect({
   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}

@@ -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 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 = '請選擇'
@@ -150,7 +150,7 @@ export 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/StandardSelect.stories.tsx

@@ -1,221 +0,0 @@
-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 { StandardSelect, StandardSelectProps } from './StandardSelect'
-import SelectMenuItem from '../menu-item/SelectMenuItem'
-
-const PLACEHOLDER = '請選擇'
-
-export default {
-  component: StandardSelect,
-  title: 'StandardSelect',
-  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' },
-    },
-    hasShrink: {
-      type: { name: 'boolean', required: false },
-      description: 'If true, the label is displayed and shrunk.',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: true },
-      },
-      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' },
-    },
-    InputProps: {
-      type: { name: 'any', required: false },
-      description: 'Attributes applied to inner Input element.',
-      table: {
-        type: { summary: 'any' },
-      },
-    },
-    SelectProps: {
-      type: { name: 'any', required: false },
-      description: 'Attributes applied to inner Select element.',
-      table: {
-        type: { summary: 'any' },
-      },
-    },
-  },
-} as Meta
-
-const PREFIX = 'JuiStandardSelect'
-
-const classes = {
-  inputAdornmentRoot: `${PREFIX}-inputAdornmentRoot`,
-}
-interface StyledInputAdornmentProps {
-  theme: Theme
-  disabled: boolean
-}
-
-const StyledInputAdornment = styled(({ disabled: _disabled, ...props }) => (
-  <InputAdornment
-    classes={{
-      root: classes.inputAdornmentRoot,
-    }}
-    {...props}
-  />
-))(({ disabled, theme }: StyledInputAdornmentProps) => ({
-  [`&.${classes.inputAdornmentRoot}`]: {
-    color: disabled
-      ? theme.palette.action.disabled
-      : theme.palette.action.active,
-  },
-}))
-
-const StandardSelectWithMenu = (props: StandardSelectProps) => {
-  const [item, setItem] = useState<string>('')
-
-  const handleChange = (event) => {
-    setItem(event.target.value)
-  }
-
-  return (
-    <StandardSelect
-      value={item}
-      SelectProps={{
-        onChange: (e) => {
-          handleChange(e)
-        },
-      }}
-      {...props}
-    >
-      <SelectMenuItem width={300} value='' disabled>
-        {PLACEHOLDER}
-      </SelectMenuItem>
-      <SelectMenuItem width={300} value={'Test'}>
-        This is a select menu item, This is a select menu item
-      </SelectMenuItem>
-      <SelectMenuItem width={300} value={'Example'}>
-        Example
-      </SelectMenuItem>
-    </StandardSelect>
-  )
-}
-
-const ValueOnlyStory: Story<StandardSelectProps> = (args) => (
-  <StandardSelectWithMenu {...args} />
-)
-
-export const ValueOnly = ValueOnlyStory.bind({})
-
-ValueOnly.args = {
-  color: 'primary',
-  size: 'medium',
-  width: 220,
-  paperMaxHeight: 300,
-  hasShrink: false,
-  placeholder: PLACEHOLDER,
-  helperText: 'test',
-  disabled: false,
-}
-
-const WithPrefixStory: Story<StandardSelectProps> = (args) => (
-  <StandardSelectWithMenu
-    InputProps={{
-      startAdornment: (
-        <StyledInputAdornment position='start' disabled={args.disabled}>
-          <Visibility />
-        </StyledInputAdornment>
-      ),
-    }}
-    {...args}
-  />
-)
-
-export const WithPrefix = WithPrefixStory.bind({})
-
-WithPrefix.args = {
-  color: 'primary',
-  size: 'medium',
-  width: 300,
-  paperMaxHeight: 300,
-  hasShrink: false,
-  placeholder: PLACEHOLDER,
-  helperText: 'test',
-  disabled: false,
-}