@junyiacademy/ui-test 0.0.7 → 0.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/package.json +1 -1
  2. package/src/index.ts +4 -1
  3. package/src/lib/TopicFilter.spec.tsx +10 -0
  4. package/src/lib/TopicFilter.stories.tsx +80 -0
  5. package/src/lib/TopicFilter.tsx +204 -0
  6. package/src/lib/menu-item/SelectMenuItem.spec.tsx +10 -0
  7. package/src/lib/menu-item/SelectMenuItem.stories.tsx +44 -0
  8. package/src/lib/menu-item/SelectMenuItem.tsx +45 -0
  9. package/src/lib/radio/Radio.stories.tsx +3 -2
  10. package/src/lib/radio/Radio.tsx +1 -1
  11. package/src/lib/select/OutlinedSelect.spec.tsx +10 -0
  12. package/src/lib/select/OutlinedSelect.stories.tsx +245 -0
  13. package/src/lib/select/OutlinedSelect.tsx +223 -0
  14. package/src/lib/select/StandardSelect.stories.tsx +221 -0
  15. package/src/lib/select/StandardSelect.tsx +188 -0
  16. package/src/lib/text-field/TextField.stories.tsx +35 -1
  17. package/src/utils/topicTree.ts +91 -1
  18. package/declarations/libs/ui/src/index.d.ts +0 -5
  19. package/declarations/libs/ui/src/interfaces/index.d.ts +0 -8
  20. package/declarations/libs/ui/src/lib/TopicFilter.d.ts +0 -13
  21. package/declarations/libs/ui/src/lib/button/Button.d.ts +0 -6
  22. package/declarations/libs/ui/src/lib/button-group/ButtonGroup.d.ts +0 -3
  23. package/declarations/libs/ui/src/lib/menu-item/SelectMenuItem.d.ts +0 -9
  24. package/declarations/libs/ui/src/lib/radio/Radio.d.ts +0 -10
  25. package/declarations/libs/ui/src/lib/select/OutlinedSelect.d.ts +0 -15
  26. package/declarations/libs/ui/src/lib/select/StandardSelect.d.ts +0 -20
  27. package/declarations/libs/ui/src/lib/text-field/TextField.d.ts +0 -3
  28. package/dist/libs/ui/src/index.js +0 -16
  29. package/dist/libs/ui/src/interfaces/index.js +0 -2
  30. package/dist/libs/ui/src/lib/TopicFilter.js +0 -122
  31. package/dist/libs/ui/src/lib/button/Button.js +0 -71
  32. package/dist/libs/ui/src/lib/button-group/ButtonGroup.js +0 -33
  33. package/dist/libs/ui/src/lib/menu-item/SelectMenuItem.js +0 -24
  34. package/dist/libs/ui/src/lib/radio/Radio.js +0 -43
  35. package/dist/libs/ui/src/lib/select/OutlinedSelect.js +0 -65
  36. package/dist/libs/ui/src/lib/select/StandardSelect.js +0 -97
  37. package/dist/libs/ui/src/lib/text-field/TextField.js +0 -75
  38. package/src/lib/selection-item/SelectionItem.tsx +0 -33
@@ -1,97 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.StandardSelect = void 0;
4
- const tslib_1 = require("tslib");
5
- const react_1 = tslib_1.__importDefault(require("react"));
6
- const styles_1 = require("@material-ui/core/styles");
7
- const core_1 = require("@material-ui/core");
8
- // self-defined-components
9
- const PREFIX = 'JuiStandardSelect';
10
- const classes = {
11
- inputLabelRoot: `${PREFIX}-inputLabel`,
12
- inputLabelFocused: `${PREFIX}-inputLabelFocused`,
13
- inputLabelMarginDense: `${PREFIX}-inputLabelMarginDense`,
14
- inputLabelError: `${PREFIX}-inputLabelError`,
15
- inputRoot: `${PREFIX}-inputRoot`,
16
- inputUnderline: `${PREFIX}-inputUnderline`,
17
- inputError: `${PREFIX}-inputError`,
18
- inputDisabled: `${PREFIX}-inputDisabled`,
19
- inputAdornmentRoot: `${PREFIX}-inputAdornmentRoot`,
20
- selectPaper: `${PREFIX}-menuPaper`,
21
- selectDisabled: `${PREFIX}-selectDisabled`,
22
- };
23
- const StyledFormControl = styles_1.styled((_a) => {
24
- var { width: _width } = _a, props = tslib_1.__rest(_a, ["width"]);
25
- return (react_1.default.createElement(core_1.FormControl, Object.assign({}, props)));
26
- })(({ width, theme }) => ({
27
- width,
28
- margin: theme.spacing(0, 4, 4, 4),
29
- }));
30
- const StyledInputLabel = styles_1.styled((_a) => {
31
- var { color: _color } = _a, props = tslib_1.__rest(_a, ["color"]);
32
- return (react_1.default.createElement(core_1.InputLabel, Object.assign({ classes: {
33
- root: classes.inputLabelRoot,
34
- focused: classes.inputLabelFocused,
35
- error: classes.inputLabelError,
36
- } }, props)));
37
- })(({ color, theme }) => ({
38
- [`&.${classes.inputLabelRoot}`]: {
39
- color: theme.palette.text.disabled,
40
- margin: theme.spacing(0, 10, 1.5, 0),
41
- [`&.${classes.inputLabelFocused}`]: {
42
- color: theme.palette[color].main,
43
- },
44
- [`&.${classes.inputLabelError}`]: {
45
- color: theme.palette.error.main,
46
- },
47
- },
48
- }));
49
- const StyledSelect = styles_1.styled((_a) => {
50
- var { paperMaxHeight: _selectPaperHeight, hasAdornment: _hasAdornment, className } = _a, props = tslib_1.__rest(_a, ["paperMaxHeight", "hasAdornment", "className"]);
51
- return (react_1.default.createElement(core_1.Select, Object.assign({ MenuProps: {
52
- classes: { paper: className },
53
- transformOrigin: {
54
- vertical: 'top',
55
- horizontal: 'left',
56
- },
57
- getContentAnchorEl: null,
58
- } }, props)));
59
- })(({ hasAdornment, paperMaxHeight }) => ({
60
- '&&': {
61
- maxHeight: paperMaxHeight,
62
- left: hasAdornment ? '48px !important' : '70px',
63
- },
64
- [`&.${classes.selectDisabled}`]: {},
65
- }));
66
- const StyledInput = styles_1.styled((_a) => {
67
- var { color: _color } = _a, props = tslib_1.__rest(_a, ["color"]);
68
- return (react_1.default.createElement(core_1.Input, Object.assign({ classes: {
69
- disabled: classes.inputDisabled,
70
- root: classes.inputRoot,
71
- underline: classes.inputUnderline,
72
- error: classes.inputError,
73
- } }, props)));
74
- })(({ color, theme }) => ({
75
- [`&.${classes.inputRoot}`]: {
76
- color: theme.palette.text.primary,
77
- },
78
- [`&.${classes.inputUnderline}:not(.${classes.inputDisabled}):not(.${classes.inputError})`]: {
79
- [`&:after,&:hover:before`]: {
80
- borderBottomColor: theme.palette[color].main,
81
- },
82
- },
83
- [`&.${classes.inputUnderline}.${classes.inputError}:not(.${classes.inputDisabled})`]: {
84
- [`&:after,&:hover:before`]: {
85
- borderBottomColor: theme.palette.error.main,
86
- },
87
- },
88
- }));
89
- function StandardSelect({ color = 'primary', size = 'medium', width = 'auto', paperMaxHeight = 'auto', error = false, hasShrink = false, placeholder, hasHelperText = false, helperText, InputProps, value = '', SelectProps, disabled = false, children, }) {
90
- const hasAdornment = !!(InputProps === null || InputProps === void 0 ? void 0 : InputProps.startAdornment);
91
- return (react_1.default.createElement(StyledFormControl, { color: color, size: size, width: width, disabled: disabled, error: error },
92
- hasShrink ? (react_1.default.createElement(StyledInputLabel, { color: color, shrink: true }, placeholder)) : (react_1.default.createElement(StyledInputLabel, { color: color }, placeholder)),
93
- react_1.default.createElement(StyledSelect, Object.assign({ value: value, paperMaxHeight: paperMaxHeight, hasAdornment: hasAdornment, input: react_1.default.createElement(StyledInput, Object.assign({ color: color }, InputProps)) }, SelectProps), children),
94
- hasHelperText && react_1.default.createElement(core_1.FormHelperText, null, helperText)));
95
- }
96
- exports.StandardSelect = StandardSelect;
97
- exports.default = StandardSelect;
@@ -1,75 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.TextField = void 0;
4
- const tslib_1 = require("tslib");
5
- const react_1 = tslib_1.__importDefault(require("react"));
6
- const styles_1 = require("@material-ui/core/styles");
7
- const core_1 = require("@material-ui/core");
8
- // self-defined-components
9
- const PREFIX = 'JuiTextField';
10
- const classes = {
11
- inputLabelError: `${PREFIX}-inputLabel-error`,
12
- inputLabelDisabled: `${PREFIX}-inputLabel-disabled`,
13
- inputLabelShrink: `${PREFIX}-inputLabel-shrink`,
14
- inputLabelFocused: `${PREFIX}-inputLabel-focused`,
15
- inputNotchedOutline: `${PREFIX}-input-notchedOutline`,
16
- inputUnderline: `${PREFIX}-input-underline`,
17
- inputColorSecondary: `${PREFIX}-input-colorSecondary`,
18
- inputDisabled: `${PREFIX}-input-disabled`,
19
- inputError: `${PREFIX}-input-error`,
20
- inputFocused: `${PREFIX}-input-focused`,
21
- };
22
- const StyledTextField = styles_1.styled((_a) => {
23
- var { hasEndAdornment, InputLabelProps, InputProps } = _a, otherProps = tslib_1.__rest(_a, ["hasEndAdornment", "InputLabelProps", "InputProps"]);
24
- return (react_1.default.createElement(core_1.TextField, Object.assign({ InputLabelProps: Object.assign(Object.assign({}, InputLabelProps), { classes: {
25
- error: classes.inputLabelError,
26
- disabled: classes.inputLabelDisabled,
27
- shrink: classes.inputLabelShrink,
28
- focused: classes.inputLabelFocused,
29
- }, shrink: hasEndAdornment ? true : undefined }), InputProps: Object.assign(Object.assign({}, InputProps), { classes: Object.assign({ colorSecondary: classes.inputColorSecondary, disabled: classes.inputDisabled, error: classes.inputError, focused: classes.inputFocused }, ((otherProps === null || otherProps === void 0 ? void 0 : otherProps.variant) === 'outlined'
30
- ? { notchedOutline: classes.inputNotchedOutline }
31
- : { underline: classes.inputUnderline })) }) }, otherProps)));
32
- })(({ theme }) => ({
33
- [`& .${classes.inputLabelError}`]: {
34
- [`&:not(.${classes.inputLabelShrink})`]: {
35
- color: theme.palette.text.secondary,
36
- },
37
- [`&.${classes.inputLabelDisabled}`]: {
38
- color: theme.palette.text.disabled,
39
- },
40
- },
41
- [`& .${classes.inputLabelError}.${classes.inputLabelFocused}`]: {
42
- color: theme.palette.error.main,
43
- },
44
- // For variant: standard | filled
45
- [`& .${classes.inputUnderline}:not(.${classes.inputDisabled})`]: {
46
- [`&:hover:before`]: {
47
- borderColor: theme.palette.primary.main,
48
- },
49
- [`&.${classes.inputColorSecondary}:hover:before`]: {
50
- borderColor: theme.palette.secondary.main,
51
- },
52
- },
53
- // For variant: outlined
54
- [`& .${classes.inputDisabled} .${classes.inputNotchedOutline}`]: {
55
- borderStyle: 'dotted',
56
- },
57
- [`& .${classes.inputError}.${classes.inputFocused} .${classes.inputNotchedOutline}`]: {
58
- borderColor: theme.palette.error.main,
59
- },
60
- [`& :not(.${classes.inputDisabled}):not(.${classes.inputError})`]: {
61
- [`&:hover .${classes.inputNotchedOutline}`]: {
62
- borderColor: theme.palette.primary.main,
63
- },
64
- [`&.${classes.inputColorSecondary}:hover .${classes.inputNotchedOutline}`]: {
65
- borderColor: theme.palette.secondary.main,
66
- },
67
- },
68
- }));
69
- const TextField = (props) => {
70
- var _a;
71
- const hasEndAdornment = !!((_a = props === null || props === void 0 ? void 0 : props.InputProps) === null || _a === void 0 ? void 0 : _a.endAdornment);
72
- return react_1.default.createElement(StyledTextField, Object.assign({ hasEndAdornment: hasEndAdornment }, props));
73
- };
74
- exports.TextField = TextField;
75
- exports.default = exports.TextField;
@@ -1,33 +0,0 @@
1
- import React from 'react'
2
- import { RadioGroup, FormHelperText } from '@material-ui/core'
3
- import { Radio } from '../radio/Radio'
4
-
5
- export interface SelectionItemProps {
6
- handleInput: () => {}
7
- label1: string
8
- value1: string
9
- label2: string
10
- value2: string
11
- isError: boolean
12
- }
13
-
14
- export function SelectionItem({
15
- handleInput,
16
- label1,
17
- value1,
18
- label2,
19
- value2,
20
- isError,
21
- }: SelectionItemProps) {
22
- return (
23
- <>
24
- <RadioGroup onChange={handleInput}>
25
- <Radio label={label1} value={value1} />
26
- <Radio label={label2} value={value2} />
27
- </RadioGroup>
28
- {isError && <FormHelperText>請選擇</FormHelperText>}
29
- </>
30
- )
31
- }
32
-
33
- export default SelectionItem