@junyiacademy/ui-test 0.0.11 → 1.4.0

package/dist/libs/ui/src/lib/alert/Alert.js

@@ -1,72 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.JuiAlert = void 0;
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
-const styles_1 = require("@material-ui/core/styles");
-const Alert_1 = tslib_1.__importDefault(require("@material-ui/lab/Alert"));
-const Button_1 = require("../button/Button");
-const CheckCircleOutline_1 = tslib_1.__importDefault(require("@material-ui/icons/CheckCircleOutline"));
-// self-defined-components
-const PREFIX = 'JuiAlert';
-const alertClasses = {
-    alertRoot: `${PREFIX}-alertRoot`,
-    alertMessage: `${PREFIX}-alertMessage`,
-};
-const buttonClasses = {
-    buttonRoot: `${PREFIX}-buttonRoot`,
-};
-const StyledAlert = styles_1.styled((_a) => {
-    var props = tslib_1.__rest(_a, []);
-    return (react_1.default.createElement(Alert_1.default, Object.assign({ classes: {
-            root: alertClasses.alertRoot,
-            message: alertClasses.alertMessage,
-        } }, props)));
-})({
-    [`&.${alertClasses.alertRoot}`]: {
-        height: '48px',
-        padding: '0 16px',
-        alignItems: 'center',
-    },
-    [`& .${alertClasses.alertMessage}`]: {
-        display: 'flex',
-        width: '100%',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-    },
-});
-const StyledButton = styles_1.styled((_a) => {
-    var { severity: _severity } = _a, props = tslib_1.__rest(_a, ["severity"]);
-    return (react_1.default.createElement(Button_1.Button, Object.assign({ classes: { root: buttonClasses.buttonRoot } }, props)));
-})(({ severity }) => ({
-    [`&.${buttonClasses.buttonRoot}`]: {
-        padding: '4px 10px',
-        margin: '0 0 0 20px',
-        minWidth: '74px',
-        color: severity === 'info'
-            ? 'rgb(13, 60, 97)'
-            : severity === 'error'
-                ? 'rgb(97, 26, 21)'
-                : severity === 'success'
-                    ? 'rgb(30, 70, 32)'
-                    : 'rgb(102, 60, 0)',
-        fontWeight: '700',
-    },
-}));
-const JuiAlert = (_a) => {
-    var { severity = 'info', action = false, buttonLink = '', isNewTab = true, cross = false, handleCrossClick, children } = _a, otherProps = tslib_1.__rest(_a, ["severity", "action", "buttonLink", "isNewTab", "cross", "handleCrossClick", "children"]);
-    const handleButtonClick = () => {
-        window.open(buttonLink, `${isNewTab ? '_blank' : '_self'}`);
-    };
-    const AlertChildren = () => {
-        return (react_1.default.createElement(react_1.default.Fragment, null,
-            children,
-            action && (react_1.default.createElement(StyledButton, { severity: severity, size: 'small', onClick: handleButtonClick }, "ACTION"))));
-    };
-    if (cross) {
-        return (react_1.default.createElement(StyledAlert, Object.assign({ severity: severity, iconMapping: { success: react_1.default.createElement(CheckCircleOutline_1.default, { fontSize: 'inherit' }) }, onClose: handleCrossClick }, otherProps), AlertChildren()));
-    }
-    return (react_1.default.createElement(StyledAlert, Object.assign({ severity: severity, iconMapping: { success: react_1.default.createElement(CheckCircleOutline_1.default, { fontSize: 'inherit' }) } }, otherProps), AlertChildren()));
-};
-exports.JuiAlert = JuiAlert;
-exports.default = exports.JuiAlert;

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

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

package/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/OutlinedSelect.stories.tsx

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