@junyiacademy/ui-test 1.6.0 → 1.6.3

package/{declarations/libs/ui/src → dist}/interfaces/index.d.ts

@@ -1,5 +1,5 @@
 import { ChangeEvent } from 'react';
-import { SelectProps as MuiSelectProp, InputProps as MuiInputProps, OutlinedInputProps } from '@mui/material';
+import { SelectProps as MuiSelectProp, InputProps as MuiInputProps, FormControlProps as MuiFormControlProps, InputLabelProps as MuiInputLabelProps, OutlinedInputProps, FormHelperTextProps as MuiFormHelperTextProps } from '@mui/material';
 export interface ITopicTreeNode {
     childTopics: ITopicTreeNode[];
     id: string;
@@ -10,10 +10,13 @@ export interface ITopicTreeNode {
 }
 export interface SelectProps extends MuiSelectProp {
     helperText?: string;
+    FormControlProps?: Partial<MuiFormControlProps>;
+    InputLabelProps?: Partial<MuiInputLabelProps>;
     InputProps?: (Partial<OutlinedInputProps> & {
         onChange: (e: ChangeEvent<HTMLInputElement>) => void;
     }) | (object & Partial<MuiInputProps>);
     SelectProps?: object | Partial<MuiSelectProp>;
+    FormHelperTextProps?: Partial<MuiFormHelperTextProps>;
     color?: 'primary' | 'secondary';
     size?: 'medium' | 'small';
     paperMaxHeight?: number | string;

package/dist/lib/radio/Radio.d.ts

@@ -0,0 +1,11 @@
+import { RadioProps as MuiRadioProps, FormControlLabelProps as MuiFormControlLabelProps, TypographyProps as MuiTypographyProps } from '@mui/material';
+export interface RadioProps extends MuiFormControlLabelProps {
+    color?: 'primary' | 'secondary' | 'default';
+    size?: 'medium' | 'small';
+    caption?: string;
+    FormControlLabelProps?: Partial<MuiFormControlLabelProps>;
+    RadioProps?: Partial<MuiRadioProps>;
+    TypographyProps?: Partial<MuiTypographyProps>;
+}
+export declare const Radio: ({ checked, disabled, label, labelPlacement, value, FormControlLabelProps, RadioProps, TypographyProps, color, size, caption, }: RadioProps) => JSX.Element;
+export default Radio;

package/dist/lib/select/OutlinedSelect.d.ts

@@ -0,0 +1,3 @@
+import { SelectProps as ISelectProps } from '../../interfaces';
+export declare const OutlinedSelect: ({ label, helperText, FormControlProps, InputLabelProps, InputProps, SelectProps, FormHelperTextProps, className, children, color, size, paperMaxHeight, error, hasLabel, hasShrink, value, disabled, }: ISelectProps) => JSX.Element;
+export default OutlinedSelect;

package/dist/lib/select/StandardSelect.d.ts

@@ -0,0 +1,3 @@
+import { SelectProps as ISelectProps } from '../../interfaces';
+export declare function StandardSelect({ label, helperText, FormControlProps, InputLabelProps, InputProps, SelectProps, FormHelperTextProps, className, children, color, size, paperMaxHeight, error, hasShrink, value, disabled, }: ISelectProps): JSX.Element;
+export default StandardSelect;

package/dist/lib/text-field/TextField.d.ts

@@ -0,0 +1,3 @@
+import { TextFieldProps as MuiTextFieldProps } from '@mui/material';
+export declare const TextField: (props: MuiTextFieldProps) => JSX.Element;
+export default TextField;

package/dist/styles/theme.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) 2020 Junyi Academy.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+declare module '@mui/material/styles/createPalette' {
+    interface Palette {
+        green: {
+            primary: Palette['primary'];
+            blueGreen: Palette['primary'];
+            grassGreen: Palette['primary'];
+        };
+    }
+    interface PaletteOptions {
+        green: {
+            primary: PaletteOptions['primary'];
+            blueGreen: PaletteOptions['primary'];
+            grassGreen: PaletteOptions['primary'];
+        };
+    }
+}
+declare const theme: import("@mui/material/styles").Theme;
+export default theme;

package/dist/utils/topicTree.d.ts

@@ -0,0 +1,2 @@
+import { ITopicTreeNode } from '../interfaces';
+export declare const topicTree: ITopicTreeNode;

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@junyiacademy/ui-test",
-  "version": "1.6.0",
+  "version": "1.6.3",
   "description": "junyiacademy ui library",
-  "main": "./dist/libs/ui/src/index.js",
-  "typings": "./declarations/libs/ui/src/index.d.ts",
+  "main": "./dist/lib/index.js",
+  "typings": "./dist/lib/index.d.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "tsc --build --clean && tsc --build"

package/declarations/libs/ui/src/lib/TopicFilter.d.ts

@@ -1,13 +0,0 @@
-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/declarations/libs/ui/src/lib/radio/Radio.d.ts

@@ -1,10 +0,0 @@
-import { RadioProps as MuiRadioProps, FormControlLabelProps } from '@mui/material';
-export interface RadioProps extends FormControlLabelProps {
-    color?: 'primary' | 'secondary' | 'default';
-    size?: 'medium' | 'small';
-    caption?: string;
-    formControlLabelProps?: Partial<FormControlLabelProps>;
-    radioProps?: Partial<MuiRadioProps>;
-}
-export declare const Radio: ({ checked, disabled, label, labelPlacement, value, formControlLabelProps, radioProps, color, size, caption, }: RadioProps) => JSX.Element;
-export default Radio;

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

@@ -1,3 +0,0 @@
-import { SelectProps } from '../../interfaces';
-export declare const OutlinedSelect: ({ label, helperText, InputProps, SelectProps, className, children, color, size, paperMaxHeight, error, hasLabel, hasShrink, value, disabled, }: SelectProps) => JSX.Element;
-export default OutlinedSelect;

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

@@ -1,3 +0,0 @@
-import { SelectProps } from '../../interfaces';
-export declare function StandardSelect({ label, helperText, InputProps, SelectProps, className, children, color, size, paperMaxHeight, error, hasShrink, value, disabled, }: SelectProps): JSX.Element;
-export default StandardSelect;

package/declarations/libs/ui/src/lib/text-field/TextField.d.ts

@@ -1,3 +0,0 @@
-import { TextFieldProps } from '@mui/material';
-export declare const TextField: (props: TextFieldProps) => JSX.Element;
-export default TextField;

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

@@ -1,20 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Select = exports.TextField = exports.Radio = exports.ButtonGroup = exports.Button = exports.SelectMenuItem = exports.TopicFilter = void 0;
-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; } });
-var Button_1 = require("./lib/button/Button");
-Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return __importDefault(Button_1).default; } });
-var ButtonGroup_1 = require("./lib/button-group/ButtonGroup");
-Object.defineProperty(exports, "ButtonGroup", { enumerable: true, get: function () { return __importDefault(ButtonGroup_1).default; } });
-var Radio_1 = require("./lib/radio/Radio");
-Object.defineProperty(exports, "Radio", { enumerable: true, get: function () { return __importDefault(Radio_1).default; } });
-var TextField_1 = require("./lib/text-field/TextField");
-Object.defineProperty(exports, "TextField", { enumerable: true, get: function () { return __importDefault(TextField_1).default; } });
-var Select_1 = require("./lib/select/Select");
-Object.defineProperty(exports, "Select", { enumerable: true, get: function () { return __importDefault(Select_1).default; } });

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

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/libs/ui/src/lib/TopicFilter.js

@@ -1,120 +0,0 @@
-"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}`,
-                }, OutlinedInputProps: {
-                    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/dist/libs/ui/src/lib/button/Button.js

@@ -1,44 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Button = void 0;
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
-const styles_1 = require("@mui/material/styles");
-const material_1 = require("@mui/material");
-const Button_1 = require("@mui/material/Button");
-//utils
-const Capitalize_1 = tslib_1.__importDefault(require("../../utils/Capitalize"));
-const StyledButton = styles_1.styled(material_1.Button, {
-    shouldForwardProp: (prop) => prop !== 'active',
-})(({ active, color = 'primary', theme }) => ({
-    // For variant: outlined
-    [`&.${Button_1.buttonClasses.outlined}${Capitalize_1.default(color)}`]: {
-        backgroundColor: active
-            ? theme.palette[color].main
-            : theme.palette.common.white,
-        color: active ? theme.palette.common.white : theme.palette[color].main,
-        borderColor: theme.palette[color].main,
-        '&:hover': {
-            backgroundColor: active
-                ? theme.palette[color].main
-                : styles_1.alpha(theme.palette[color].main, 0.1),
-        },
-        [`&.${Button_1.buttonClasses.disabled}`]: {
-            backgroundColor: theme.palette.common.white,
-            borderColor: theme.palette.action.disabledBackground,
-            color: theme.palette.action.disabled,
-        },
-    },
-    // For variant: text
-    [`&.${Button_1.buttonClasses.text}${Capitalize_1.default(color)}`]: {
-        '&:hover': {
-            backgroundColor: styles_1.alpha(theme.palette[color].main, 0.1),
-        },
-    },
-}));
-const Button = (_a) => {
-    var { active, children } = _a, otherProps = tslib_1.__rest(_a, ["active", "children"]);
-    return (react_1.default.createElement(StyledButton, Object.assign({ active: active }, otherProps), children));
-};
-exports.Button = Button;
-exports.default = exports.Button;

package/dist/libs/ui/src/lib/button-group/ButtonGroup.js

@@ -1,23 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ButtonGroup = void 0;
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
-const styles_1 = require("@mui/material/styles");
-const material_1 = require("@mui/material");
-const ButtonGroup_1 = require("@mui/material/ButtonGroup");
-//utils
-const Capitalize_1 = tslib_1.__importDefault(require("../../utils/Capitalize"));
-// self-defined-components
-const StyledButtonGroup = styles_1.styled(material_1.ButtonGroup)(({ color = 'primary', theme }) => ({
-    [`& .${ButtonGroup_1.buttonGroupClasses.groupedOutlined}${Capitalize_1.default(color)}.${ButtonGroup_1.buttonGroupClasses.grouped}.${ButtonGroup_1.buttonGroupClasses.disabled}`]: {
-        borderColor: styles_1.alpha(theme.palette[color].main, 0.5),
-        color: styles_1.alpha(theme.palette[color].main, 0.5),
-    },
-}));
-const ButtonGroup = (_a) => {
-    var { children } = _a, otherProps = tslib_1.__rest(_a, ["children"]);
-    return (react_1.default.createElement(StyledButtonGroup, Object.assign({}, otherProps), children));
-};
-exports.ButtonGroup = ButtonGroup;
-exports.default = exports.ButtonGroup;

package/dist/libs/ui/src/lib/menu-item/SelectMenuItem.js

@@ -1,20 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
-const material_1 = require("@mui/material");
-const MenuItem_1 = require("@mui/material/MenuItem");
-const SelectMenuItem = (_a) => {
-    var { children, value = '' } = _a, otherProps = tslib_1.__rest(_a, ["children", "value"]);
-    return (react_1.default.createElement(material_1.MenuItem, Object.assign({ sx: (theme) => ({
-            whiteSpace: 'unset',
-            color: theme.palette.text.primary,
-            [`&.${MenuItem_1.menuItemClasses.selected}`]: {
-                backgroundColor: theme.palette.grey[300],
-                '&:hover': {
-                    backgroundColor: theme.palette.grey[200],
-                },
-            },
-        }), value: value }, otherProps), children));
-};
-exports.default = SelectMenuItem;

package/dist/libs/ui/src/lib/radio/Radio.js

@@ -1,33 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Radio = void 0;
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
-const styles_1 = require("@mui/material/styles");
-const material_1 = require("@mui/material");
-const FormControlLabel_1 = require("@mui/material/FormControlLabel");
-const Radio_1 = require("@mui/material/Radio");
-// self-defined-components
-const StyledFormControlLabel = styles_1.styled(material_1.FormControlLabel)(({ theme }) => ({
-    [`& .${FormControlLabel_1.formControlLabelClasses.label}`]: {
-        color: theme.palette.text.secondary,
-        [`&.${FormControlLabel_1.formControlLabelClasses.disabled}`]: {
-            color: theme.palette.text.disabled,
-        },
-    },
-    [`& .${Radio_1.radioClasses.checked} + .${FormControlLabel_1.formControlLabelClasses.label}`]: {
-        color: theme.palette.text.primary,
-    },
-}));
-const Radio = ({ checked, disabled, label, labelPlacement, value, formControlLabelProps, radioProps, color = 'secondary', size = 'medium', caption = '', }) => {
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(StyledFormControlLabel, Object.assign({ control: react_1.default.createElement(material_1.Radio, Object.assign({ sx: (theme) => ({
-                    color: theme.palette.text.primary,
-                }), color: color, size: size }, radioProps)), checked: checked, disabled: disabled, label: label, labelPlacement: labelPlacement, value: value }, formControlLabelProps)),
-        caption && (react_1.default.createElement(material_1.Typography, { sx: (theme) => ({
-                color: theme.palette.text.disabled,
-                margin: '0 0 0 30px',
-            }), variant: 'body2' }, caption))));
-};
-exports.Radio = Radio;
-exports.default = exports.Radio;

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

@@ -1,82 +0,0 @@
-"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("@mui/material/styles");
-const material_1 = require("@mui/material");
-const FormHelperText_1 = require("@mui/material/FormHelperText");
-const InputLabel_1 = require("@mui/material/InputLabel");
-const OutlinedInput_1 = require("@mui/material/OutlinedInput");
-const InputBase_1 = require("@mui/material/InputBase");
-const StyledInputLabel = styles_1.styled(material_1.InputLabel, {
-    shouldForwardProp: (prop) => prop !== 'color',
-})(({ color, theme }) => ({
-    color: theme.palette.text.secondary,
-    [`&.${InputLabel_1.inputLabelClasses.outlined}`]: {
-        [`&:not(.${InputLabel_1.inputLabelClasses.disabled}) .${InputLabel_1.inputLabelClasses.focused}`]: {
-            color: theme.palette.action.active,
-        },
-        [`&.${InputLabel_1.inputLabelClasses.sizeSmall}:not(.${InputLabel_1.inputLabelClasses.shrink})`]: {
-            transform: 'translate(12px, 12px) scale(1)',
-        },
-    },
-    [`&.${InputLabel_1.inputLabelClasses.shrink}:not(.${InputLabel_1.inputLabelClasses.error}):not(.${InputLabel_1.inputLabelClasses.disabled}).${InputLabel_1.inputLabelClasses.focused}`]: {
-        color: theme.palette[color].main,
-    },
-    [`&.${InputLabel_1.inputLabelClasses.shrink}`]: {
-        backgroundColor: '#ffffff',
-        padding: '0 2px',
-    },
-}));
-const StyledOutlinedInput = styles_1.styled(material_1.OutlinedInput)(({ theme }) => ({
-    [`&.${OutlinedInput_1.outlinedInputClasses.root}`]: {
-        [`&.${OutlinedInput_1.outlinedInputClasses.error}.${OutlinedInput_1.outlinedInputClasses.focused} .${OutlinedInput_1.outlinedInputClasses.notchedOutline}`]: {
-            borderColor: `${theme.palette.error.main}`,
-        },
-        [`& .${InputBase_1.inputBaseClasses.inputSizeSmall}`]: {
-            padding: '12.5px 15px 12.5px 12px',
-        },
-    },
-    [`& .${OutlinedInput_1.outlinedInputClasses.input}`]: {
-        color: theme.palette.text.primary,
-        '&:focus': {
-            background: 'rgba(0,0,0,0)',
-        },
-    },
-}));
-const OutlinedSelect = ({ label, helperText, InputProps, SelectProps, className, children, color = 'primary', size = 'small', paperMaxHeight = 'auto', error = false, hasLabel = true, hasShrink = false, value = '', disabled = false, }) => {
-    const hasHelperText = !!helperText;
-    return (react_1.default.createElement(material_1.FormControl, { sx: (theme) => ({
-            backgroundColor: 'white',
-            '&:hover': {
-                [`& :not(.${OutlinedInput_1.outlinedInputClasses.disabled}):not(.${OutlinedInput_1.outlinedInputClasses.error}) .${OutlinedInput_1.outlinedInputClasses.notchedOutline}`]: {
-                    borderColor: theme.palette[color].main,
-                },
-            },
-        }), size: size, disabled: disabled, error: error, color: color, className: className },
-        hasLabel && (react_1.default.createElement(StyledInputLabel, { color: color, shrink: hasShrink ? true : undefined }, label)),
-        react_1.default.createElement(material_1.Select, Object.assign({ value: value, label: hasLabel ? label : undefined, MenuProps: {
-                PaperProps: {
-                    sx: {
-                        maxHeight: paperMaxHeight,
-                    },
-                },
-                disableAutoFocusItem: true,
-                anchorOrigin: {
-                    vertical: 2,
-                    horizontal: 'left',
-                },
-                transformOrigin: {
-                    vertical: 'top',
-                    horizontal: 'left',
-                },
-            }, input: react_1.default.createElement(StyledOutlinedInput, Object.assign({ color: color, label: hasLabel ? label : undefined, disabled: disabled }, InputProps)) }, SelectProps), children),
-        hasHelperText && (react_1.default.createElement(material_1.FormHelperText, { sx: {
-                [`&.${FormHelperText_1.formHelperTextClasses.root}`]: {
-                    marginLeft: 0,
-                },
-            } }, helperText))));
-};
-exports.OutlinedSelect = OutlinedSelect;
-exports.default = exports.OutlinedSelect;

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

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

@@ -1,65 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StandardSelect = void 0;
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
-const styles_1 = require("@mui/material/styles");
-const material_1 = require("@mui/material");
-const InputLabel_1 = require("@mui/material/InputLabel");
-const Input_1 = require("@mui/material/Input");
-const StyledInputLabel = styles_1.styled(material_1.InputLabel, {
-    shouldForwardProp: (prop) => prop !== 'color',
-})(({ color, theme }) => ({
-    [`&.${InputLabel_1.inputLabelClasses.root}`]: {
-        color: theme.palette.text.disabled,
-    },
-    [`&.${InputLabel_1.inputLabelClasses.focused}`]: {
-        color: theme.palette[color].main,
-    },
-    [`&.${InputLabel_1.inputLabelClasses.error}`]: {
-        color: theme.palette.error.main,
-    },
-}));
-const StyledInput = styles_1.styled(material_1.Input, {
-    shouldForwardProp: (prop) => prop !== 'color',
-})(({ color, theme }) => ({
-    color: theme.palette.text.primary,
-    [`& .${Input_1.inputClasses.input}`]: {
-        '&:focus': {
-            background: 'rgba(0,0,0,0)',
-        },
-    },
-    [`&.${Input_1.inputClasses.underline}:not(.${Input_1.inputClasses.disabled}):not(.${Input_1.inputClasses.error})`]: {
-        '&:after,&:hover:before': {
-            borderBottomColor: theme.palette[color].main,
-        },
-    },
-    [`&.${Input_1.inputClasses.underline}.${Input_1.inputClasses.error}:not(.${Input_1.inputClasses.disabled})`]: {
-        '&:after,&:hover:before': {
-            borderBottomColor: theme.palette.error.main,
-        },
-    },
-}));
-function StandardSelect({ label, helperText, InputProps, SelectProps, className, children, color = 'primary', size = 'small', paperMaxHeight = 'auto', error = false, hasShrink = false, value = '', disabled = false, }) {
-    const hasHelperText = !!helperText;
-    return (react_1.default.createElement(material_1.FormControl, { variant: 'standard', color: color, size: size, disabled: disabled, error: error, className: className },
-        react_1.default.createElement(StyledInputLabel, { color: color, shrink: hasShrink ? true : undefined }, label),
-        react_1.default.createElement(material_1.Select, Object.assign({ label: label, value: value, MenuProps: {
-                PaperProps: {
-                    sx: {
-                        maxHeight: paperMaxHeight,
-                    },
-                },
-                anchorOrigin: {
-                    vertical: 2,
-                    horizontal: 'left',
-                },
-                transformOrigin: {
-                    vertical: 'top',
-                    horizontal: 'left',
-                },
-            }, input: react_1.default.createElement(StyledInput, Object.assign({ color: color }, InputProps)) }, SelectProps), children),
-        hasHelperText && react_1.default.createElement(material_1.FormHelperText, null, helperText)));
-}
-exports.StandardSelect = StandardSelect;
-exports.default = StandardSelect;

package/dist/libs/ui/src/lib/text-field/TextField.js

@@ -1,68 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextField = void 0;
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
-const styles_1 = require("@mui/material/styles");
-const material_1 = require("@mui/material");
-const TextField_1 = require("@mui/material/TextField");
-const Input_1 = require("@mui/material/Input");
-const InputLabel_1 = require("@mui/material/InputLabel");
-const OutlinedInput_1 = require("@mui/material/OutlinedInput");
-const FormHelperText_1 = require("@mui/material/FormHelperText");
-//utils
-const Capitalize_1 = tslib_1.__importDefault(require("../../utils/Capitalize"));
-// self-defined-components
-const StyledTextField = styles_1.styled(material_1.TextField)(({ label, color = 'primary', theme }) => ({
-    [`& .${InputLabel_1.inputLabelClasses.error}`]: {
-        [`&:not(.${InputLabel_1.inputLabelClasses.shrink})`]: {
-            color: theme.palette.text.secondary,
-        },
-        [`&.${InputLabel_1.inputLabelClasses.disabled}`]: {
-            color: theme.palette.text.disabled,
-        },
-    },
-    [`& .${InputLabel_1.inputLabelClasses.error}.${InputLabel_1.inputLabelClasses.focused}`]: {
-        color: theme.palette.error.main,
-    },
-    // For variant: standard | filled
-    [`& .${Input_1.inputClasses.underline}:not(.${Input_1.inputClasses.disabled})`]: {
-        [`&.MuiInputBase-color${Capitalize_1.default(color)}:hover:before`]: {
-            borderColor: theme.palette[color].main,
-        },
-    },
-    // For variant: outlined
-    [`& .${Input_1.inputClasses.disabled} .${OutlinedInput_1.outlinedInputClasses.notchedOutline}`]: {
-        borderStyle: 'dotted',
-    },
-    [`& .${Input_1.inputClasses.error}.${Input_1.inputClasses.focused} .${OutlinedInput_1.outlinedInputClasses.notchedOutline}`]: {
-        borderColor: theme.palette.error.main,
-    },
-    [`&.${TextField_1.textFieldClasses.root} :not(.${Input_1.inputClasses.disabled}):not(.${Input_1.inputClasses.error})`]: {
-        [`&.MuiInputBase-color${Capitalize_1.default(color)}:hover .${OutlinedInput_1.outlinedInputClasses.notchedOutline}`]: {
-            borderColor: theme.palette[color].main,
-        },
-    },
-    [`& .${OutlinedInput_1.outlinedInputClasses.notchedOutline}`]: {
-        '& > legend': {
-            maxWidth: label === '' && 0,
-        },
-    },
-}));
-const TextField = (props) => {
-    var _a;
-    const hasEndAdornment = !!((_a = props === null || props === void 0 ? void 0 : props.InputProps) === null || _a === void 0 ? void 0 : _a.endAdornment);
-    const { InputLabelProps, InputProps } = props, otherProps = tslib_1.__rest(props, ["InputLabelProps", "InputProps"]);
-    return (react_1.default.createElement(StyledTextField, Object.assign({ InputLabelProps: Object.assign(Object.assign({}, InputLabelProps), { shrink: hasEndAdornment ? true : undefined }), FormHelperTextProps: {
-            sx: (theme) => ({
-                [`&.${FormHelperText_1.formHelperTextClasses.root}`]: {
-                    marginLeft: 0,
-                    [`&.${Input_1.inputClasses.error}`]: {
-                        color: theme.palette.error.main,
-                    },
-                },
-            }),
-        }, InputProps: Object.assign({}, InputProps) }, otherProps)));
-};
-exports.TextField = TextField;
-exports.default = exports.TextField;

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

@@ -1,120 +0,0 @@
-"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("@mui/material/styles");
-const ArrowRightRounded_1 = tslib_1.__importDefault(require("@mui/icons-material/ArrowRightRounded"));
-const material_1 = require("@mui/material");
-const Select_1 = tslib_1.__importDefault(require("../select/Select"));
-const SelectMenuItem_1 = tslib_1.__importDefault(require("../menu-item/SelectMenuItem"));
-// self-defined-configs
-const LABEL = '請選擇';
-const StyledSelect = styles_1.styled(Select_1.default)(({ theme }) => ({
-    width: 220,
-    margin: theme.spacing(1),
-}));
-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(StyledSelect, { variant: 'outlined', size: 'small', label: '\u8F09\u5165\u8CC7\u6599\u4E2D...', disabled: true }));
-    }
-    return (react_1.default.createElement(material_1.Box, { sx: {
-            display: 'flex',
-            alignItems: 'center',
-            flexWrap: 'wrap',
-        } }, layeredTopicList.map((layeredTopic, layerNumber) => {
-        const hasLabel = isFocusedList[layerNumber] || !selectedTopicIds[layerNumber];
-        return (react_1.default.createElement(material_1.Box, { sx: {
-                display: 'flex',
-                alignItems: 'center',
-            }, key: layeredTopic.id },
-            react_1.default.createElement(StyledSelect, { variant: 'outlined', size: 'small', label: LABEL, paperMaxHeight: 412, hasLabel: hasLabel, 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, { disabled: true, value: '' }, LABEL),
-                layeredTopic.childTopics.map((childTopic) => (react_1.default.createElement(SelectMenuItem_1.default, { 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(ArrowRightRounded_1.default, { sx: (theme) => ({
-                    margin: theme.spacing(-1, -1.5),
-                    fontSize: theme.spacing(7),
-                    color: '#444',
-                }), fontSize: 'large', "data-testid": 'topic-filter-arrow' }))));
-    })));
-};
-exports.TopicFilter = TopicFilter;
-exports.default = exports.TopicFilter;

package/dist/libs/ui/src/utils/Capitalize.js

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-function capitalize(string) {
-    return `${string.charAt(0).toUpperCase()}${string.slice(1)}`;
-}
-exports.default = capitalize;