@junyiacademy/ui-test 1.4.0 → 1.5.1

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

@@ -3,65 +3,46 @@ 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("@material-ui/core/styles");
-const core_1 = require("@material-ui/core");
+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");
 // self-defined-components
-const PREFIX = 'JuiTextField';
-const classes = {
-    inputLabelError: `${PREFIX}-inputLabel-error`,
-    inputLabelDisabled: `${PREFIX}-inputLabel-disabled`,
-    inputLabelShrink: `${PREFIX}-inputLabel-shrink`,
-    inputLabelFocused: `${PREFIX}-inputLabel-focused`,
-    inputNotchedOutline: `${PREFIX}-input-notchedOutline`,
-    inputUnderline: `${PREFIX}-input-underline`,
-    inputColorSecondary: `${PREFIX}-input-colorSecondary`,
-    inputDisabled: `${PREFIX}-input-disabled`,
-    inputError: `${PREFIX}-input-error`,
-    inputFocused: `${PREFIX}-input-focused`,
-};
-const StyledTextField = styles_1.styled((_a) => {
-    var { hasEndAdornment, InputLabelProps, InputProps } = _a, otherProps = tslib_1.__rest(_a, ["hasEndAdornment", "InputLabelProps", "InputProps"]);
-    return (react_1.default.createElement(core_1.TextField, Object.assign({ InputLabelProps: Object.assign(Object.assign({}, InputLabelProps), { classes: {
-                error: classes.inputLabelError,
-                disabled: classes.inputLabelDisabled,
-                shrink: classes.inputLabelShrink,
-                focused: classes.inputLabelFocused,
-            }, 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'
-                ? { notchedOutline: classes.inputNotchedOutline }
-                : { underline: classes.inputUnderline })) }) }, otherProps)));
-})(({ theme }) => ({
-    [`& .${classes.inputLabelError}`]: {
-        [`&:not(.${classes.inputLabelShrink})`]: {
+const StyledTextField = styles_1.styled(material_1.TextField)(({ theme }) => ({
+    [`& .${InputLabel_1.inputLabelClasses.error}`]: {
+        [`&:not(.${InputLabel_1.inputLabelClasses.shrink})`]: {
             color: theme.palette.text.secondary,
         },
-        [`&.${classes.inputLabelDisabled}`]: {
+        [`&.${InputLabel_1.inputLabelClasses.disabled}`]: {
             color: theme.palette.text.disabled,
         },
     },
-    [`& .${classes.inputLabelError}.${classes.inputLabelFocused}`]: {
+    [`& .${InputLabel_1.inputLabelClasses.error}.${InputLabel_1.inputLabelClasses.focused}`]: {
         color: theme.palette.error.main,
     },
     // For variant: standard | filled
-    [`& .${classes.inputUnderline}:not(.${classes.inputDisabled})`]: {
+    [`& .${Input_1.inputClasses.underline}:not(.${Input_1.inputClasses.disabled})`]: {
         [`&:hover:before`]: {
             borderColor: theme.palette.primary.main,
         },
-        [`&.${classes.inputColorSecondary}:hover:before`]: {
+        [`&.${Input_1.inputClasses.colorSecondary}:hover:before`]: {
             borderColor: theme.palette.secondary.main,
         },
     },
     // For variant: outlined
-    [`& .${classes.inputDisabled} .${classes.inputNotchedOutline}`]: {
+    [`& .${Input_1.inputClasses.disabled} .${OutlinedInput_1.outlinedInputClasses.notchedOutline}`]: {
         borderStyle: 'dotted',
     },
-    [`& .${classes.inputError}.${classes.inputFocused} .${classes.inputNotchedOutline}`]: {
+    [`& .${Input_1.inputClasses.error}.${Input_1.inputClasses.focused} .${OutlinedInput_1.outlinedInputClasses.notchedOutline}`]: {
         borderColor: theme.palette.error.main,
     },
-    [`& :not(.${classes.inputDisabled}):not(.${classes.inputError})`]: {
-        [`&:hover .${classes.inputNotchedOutline}`]: {
+    [`&.${TextField_1.textFieldClasses.root} :not(.${Input_1.inputClasses.disabled}):not(.${Input_1.inputClasses.error})`]: {
+        [`&:hover .${OutlinedInput_1.outlinedInputClasses.notchedOutline}`]: {
             borderColor: theme.palette.primary.main,
         },
-        [`&.${classes.inputColorSecondary}:hover .${classes.inputNotchedOutline}`]: {
+        [`&.${Input_1.inputClasses.colorSecondary}:hover .${OutlinedInput_1.outlinedInputClasses.notchedOutline}`]: {
             borderColor: theme.palette.secondary.main,
         },
     },
@@ -69,7 +50,14 @@ const StyledTextField = styles_1.styled((_a) => {
 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);
-    return react_1.default.createElement(StyledTextField, Object.assign({ hasEndAdornment: hasEndAdornment }, props));
+    return (react_1.default.createElement(StyledTextField, Object.assign({ InputLabelProps: Object.assign(Object.assign({}, props.InputLabelProps), { classes: {
+                error: InputLabel_1.inputLabelClasses.error,
+                disabled: InputLabel_1.inputLabelClasses.disabled,
+                shrink: InputLabel_1.inputLabelClasses.shrink,
+                focused: InputLabel_1.inputLabelClasses.focused,
+            }, shrink: hasEndAdornment ? true : undefined }), InputProps: Object.assign(Object.assign({}, props.InputProps), { classes: Object.assign({ colorSecondary: Input_1.inputClasses.colorSecondary, disabled: Input_1.inputClasses.disabled, error: Input_1.inputClasses.error, focused: Input_1.inputClasses.focused }, ((props === null || props === void 0 ? void 0 : props.variant) === 'outlined'
+                ? { notchedOutline: OutlinedInput_1.outlinedInputClasses.notchedOutline }
+                : { underline: Input_1.inputClasses.underline })) }) }, props)));
 };
 exports.TextField = TextField;
 exports.default = exports.TextField;

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

@@ -3,30 +3,18 @@ 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 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 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 StyledSelect = styles_1.styled(Select_1.default)(({ theme }) => ({
+    width: 220,
+    margin: theme.spacing(1),
 }));
 const TopicFilter = ({ topicTree, onTopicSelected, isLastLayer, hasArrow, initSelectedTopicIds, }) => {
-    const theme = styles_1.useTheme();
     const [selectedTopicIds, setSelectedTopicIds] = react_1.useState([]);
     const [layeredTopicList, setLayeredTopicList] = react_1.useState([]);
     const [isFocusedList, setIsFocusedList] = react_1.useState([]);
@@ -83,12 +71,19 @@ const TopicFilter = ({ topicTree, onTopicSelected, isLastLayer, hasArrow, initSe
         setLayeredTopicList([topicTree]);
     }, [topicTree]);
     if (layeredTopicList.length === 0) {
-        return (react_1.default.createElement(Select_1.default, { variant: 'outlined', size: 'small', width: 220, selectMargin: theme.spacing(1), placeholder: '\u8F09\u5165\u8CC7\u6599\u4E2D...', disabled: true }));
+        return (react_1.default.createElement(StyledSelect, { variant: 'outlined', size: 'small', placeholder: '\u8F09\u5165\u8CC7\u6599\u4E2D...', disabled: true }));
     }
-    return (react_1.default.createElement(FiltersWrapper, null, layeredTopicList.map((layeredTopic, layerNumber) => {
+    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(SelectWrapper, { key: layeredTopic.id },
-            react_1.default.createElement(Select_1.default, { variant: 'outlined', size: 'small', width: 220, selectMargin: theme.spacing(1), paperMaxHeight: 412, hasLabel: hasLabel, placeholder: PLACEHOLDER, value: (selectedTopicIds === null || selectedTopicIds === void 0 ? void 0 : selectedTopicIds[layerNumber]) || '', SelectProps: {
+        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', paperMaxHeight: 412, hasLabel: hasLabel, placeholder: PLACEHOLDER, value: (selectedTopicIds === null || selectedTopicIds === void 0 ? void 0 : selectedTopicIds[layerNumber]) || '', SelectProps: {
                     'data-testid': `layered-topic-${layerNumber}`,
                 }, InputProps: {
                     inputProps: {
@@ -112,9 +107,13 @@ const TopicFilter = ({ topicTree, onTopicSelected, isLastLayer, hasArrow, initSe
                         });
                     },
                 } },
-                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' }))));
+                react_1.default.createElement(SelectMenuItem_1.default, { disabled: true }, PLACEHOLDER),
+                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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@junyiacademy/ui-test",
-  "version": "1.4.0",
+  "version": "1.5.1",
   "description": "junyiacademy ui library",
   "main": "./dist/libs/ui/src/index.js",
   "typings": "./declarations/libs/ui/src/index.d.ts",
@@ -17,8 +17,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@material-ui/core": "4.9.10",
-    "@material-ui/icons": "4.9.1",
+    "@emotion/react": "11.7.1",
+    "@emotion/styled": "11.6.0",
+    "@mui/icons-material": "5.2.5",
+    "@mui/material": "5.2.7",
+    "@mui/styles": "5.2.3",
     "react": "17.0.2"
   },
   "devDependencies": {

package/.eslintrc.json

@@ -1,24 +0,0 @@
-{
-  "extends": ["plugin:@nrwl/nx/react", "../../.eslintrc.json"],
-  "ignorePatterns": ["!**/*"],
-  "overrides": [
-    {
-      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
-      "parserOptions": {
-        "project": [
-          "libs/ui/tsconfig.*?.json",
-          "libs/ui/.storybook/tsconfig.json"
-        ]
-      },
-      "rules": {}
-    },
-    {
-      "files": ["*.ts", "*.tsx"],
-      "rules": {}
-    },
-    {
-      "files": ["*.js", "*.jsx"],
-      "rules": {}
-    }
-  ]
-}

package/.storybook/main.js

@@ -1,9 +0,0 @@
-const rootMain = require('../../../.storybook/main')
-
-// Use the following syntax to add addons!
-// rootMain.addons.push('');
-rootMain.stories.push(
-  ...['../src/lib/**/*.stories.mdx', '../src/lib/**/*.stories.@(js|jsx|ts|tsx)']
-)
-
-module.exports = rootMain

package/.storybook/preview.js

@@ -1,10 +0,0 @@
-import { ThemeProvider } from '@material-ui/core/styles'
-import theme from '../src/styles/theme'
-
-export const decorators = [
-  (Story) => (
-    <ThemeProvider theme={theme}>
-      <Story />
-    </ThemeProvider>
-  ),
-]

package/.storybook/tsconfig.json

@@ -1,14 +0,0 @@
-{
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "emitDecoratorMetadata": true,
-    "outDir": ""
-  },
-  "exclude": [
-    "../**/*.spec.ts",
-    "../**/*.spec.js",
-    "../**/*.spec.tsx",
-    "../**/*.spec.jsx"
-  ],
-  "include": ["../src/**/*", "*.js"]
-}

package/.storybook/webpack.config.js

@@ -1,84 +0,0 @@
-const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin')
-const rootWebpackConfig = require('../../../.storybook/webpack.config')
-/**
- * Export a function. Accept the base config as the only param.
- *
- * @param {Parameters<typeof rootWebpackConfig>[0]} options
- */
-module.exports = async ({ config, mode }) => {
-  config = await rootWebpackConfig({ config, mode })
-
-  const tsPaths = new TsconfigPathsPlugin({
-    configFile: './tsconfig.base.json',
-  })
-
-  config.resolve.plugins
-    ? config.resolve.plugins.push(tsPaths)
-    : (config.resolve.plugins = [tsPaths])
-
-  // Found this here: https://github.com/nrwl/nx/issues/2859
-  // And copied the part of the solution that made it work
-
-  const svgRuleIndex = config.module.rules.findIndex((rule) => {
-    const { test } = rule
-
-    return test.toString().startsWith('/\\.(svg|ico')
-  })
-  config.module.rules[
-    svgRuleIndex
-  ].test = /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/
-
-  config.module.rules.push(
-    {
-      test: /\.(png|jpe?g|gif|webp)$/,
-      loader: require.resolve('url-loader'),
-      options: {
-        limit: 10000, // 10kB
-        name: '[name].[hash:7].[ext]',
-      },
-    },
-    {
-      test: /\.svg$/,
-      oneOf: [
-        // If coming from JS/TS file, then transform into React component using SVGR.
-        {
-          issuer: {
-            test: /\.[jt]sx?$/,
-          },
-          use: [
-            {
-              loader: require.resolve('@svgr/webpack'),
-              options: {
-                svgo: false,
-                titleProp: true,
-                ref: true,
-              },
-            },
-            {
-              loader: require.resolve('url-loader'),
-              options: {
-                limit: 10000, // 10kB
-                name: '[name].[hash:7].[ext]',
-                esModule: false,
-              },
-            },
-          ],
-        },
-        // Fallback to plain URL loader.
-        {
-          use: [
-            {
-              loader: require.resolve('url-loader'),
-              options: {
-                limit: 10000, // 10kB
-                name: '[name].[hash:7].[ext]',
-              },
-            },
-          ],
-        },
-      ],
-    }
-  )
-
-  return config
-}

package/jest.config.js

@@ -1,9 +0,0 @@
-module.exports = {
-  displayName: 'ui',
-  preset: '../../jest.preset.js',
-  transform: {
-    '^.+\\.[tj]sx?$': 'babel-jest',
-  },
-  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
-  coverageDirectory: '../../coverage/libs/ui',
-}

package/src/index.ts

@@ -1,7 +0,0 @@
-export { default as TopicFilter } from './lib/topic-filter/TopicFilter'
-export { default as SelectMenuItem } from './lib/menu-item/SelectMenuItem'
-export { default as Button } from './lib/button/Button'
-export { default as ButtonGroup } from './lib/button-group/ButtonGroup'
-export { default as Radio } from './lib/radio/Radio'
-export { default as TextField } from './lib/text-field/TextField'
-export { default as Select } from './lib/select/Select'

package/src/interfaces/index.tsx

@@ -1,34 +0,0 @@
-import { ChangeEvent } from 'react'
-import {
-  SelectProps as MuiSelectProp,
-  InputProps as MuiInputProps,
-  OutlinedInputProps,
-} from '@material-ui/core'
-
-export interface ITopicTreeNode {
-  childTopics: ITopicTreeNode[]
-  id: string
-  isContentTopic: boolean
-  key: string
-  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 | string
-  selectMargin?: number | string
-  paperMaxHeight?: number | string
-  error?: boolean
-  hasLabel?: boolean
-  hasShrink?: boolean
-  disabled?: boolean
-}

package/src/lib/button/Button.stories.tsx

@@ -1,50 +0,0 @@
-import React from 'react'
-import { Story, Meta } from '@storybook/react'
-import { Button, ButtonProps } from './Button'
-
-export default {
-  component: Button,
-  title: 'Button',
-  argTypes: {
-    active: {
-      description: 'The Button is active or not.',
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    variant: {
-      table: {
-        defaultValue: { summary: 'contained' },
-      },
-    },
-    color: {
-      table: {
-        defaultValue: { summary: 'default' },
-      },
-    },
-    disabled: {
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    size: {
-      table: {
-        defaultValue: { summary: 'medium' },
-      },
-    },
-  },
-} as Meta
-
-const Template: Story<ButtonProps> = (args) => (
-  <Button {...args}>I'm a Button</Button>
-)
-
-export const TextOnly = Template.bind({})
-
-TextOnly.args = {
-  active: false,
-  variant: 'contained',
-  color: 'default',
-  disabled: false,
-  size: 'medium',
-}

package/src/lib/button/Button.tsx

@@ -1,85 +0,0 @@
-import React from 'react'
-import { styled, fade, Theme } from '@material-ui/core/styles'
-import {
-  Button as MuiButton,
-  ButtonProps as MuiButtonProps,
-} from '@material-ui/core'
-
-// self-defined-components
-const PREFIX = 'JuiButton'
-
-const classes = {
-  outlinedPrimary: `${PREFIX}-outlinedPrimary`,
-  outlinedSecondary: `${PREFIX}-outlinedSecondary`,
-  textPrimary: `${PREFIX}-textPrimary`,
-  textSecondary: `${PREFIX}-textSecondary`,
-  disabled: `${PREFIX}-disabled`,
-}
-
-interface StyleFuncProps {
-  active?: boolean
-  theme?: Theme
-}
-
-const StyledButton = styled(({ active: _active, ...other }) => (
-  <MuiButton classes={classes} {...other} />
-))(({ active, theme }: StyleFuncProps) => ({
-  [`&.${classes.outlinedPrimary}`]: {
-    backgroundColor: active
-      ? theme.palette.primary.main
-      : theme.palette.common.white,
-    color: active ? theme.palette.common.white : theme.palette.primary.main,
-    borderColor: theme.palette.primary.main,
-    '&:hover': {
-      backgroundColor: active
-        ? theme.palette.primary.main
-        : fade(theme.palette.primary.main, 0.1),
-    },
-    [`&.${classes.disabled}`]: {
-      backgroundColor: theme.palette.common.white,
-      borderColor: theme.palette.action.disabledBackground,
-      color: theme.palette.action.disabled,
-    },
-  },
-  [`&.${classes.outlinedSecondary}`]: {
-    backgroundColor: active
-      ? theme.palette.secondary.main
-      : theme.palette.common.white,
-    color: active ? theme.palette.common.white : theme.palette.secondary.main,
-    borderColor: theme.palette.secondary.main,
-    '&:hover': {
-      backgroundColor: active
-        ? theme.palette.secondary.main
-        : fade(theme.palette.secondary.main, 0.1),
-    },
-    [`&.${classes.disabled}`]: {
-      backgroundColor: theme.palette.common.white,
-      borderColor: theme.palette.action.disabledBackground,
-      color: theme.palette.action.disabled,
-    },
-  },
-  [`&.${classes.textPrimary}`]: {
-    '&:hover': {
-      backgroundColor: fade(theme.palette.primary.main, 0.1),
-    },
-  },
-  [`&.${classes.textSecondary}`]: {
-    '&:hover': {
-      backgroundColor: fade(theme.palette.secondary.main, 0.1),
-    },
-  },
-}))
-
-export interface ButtonProps extends MuiButtonProps {
-  active?: boolean
-}
-
-export const Button = ({ active, children, ...otherProps }: ButtonProps) => {
-  return (
-    <StyledButton active={active} {...otherProps}>
-      {children}
-    </StyledButton>
-  )
-}
-
-export default Button

package/src/lib/button-group/ButtonGroup.stories.tsx

@@ -1,59 +0,0 @@
-import React, { useState } from 'react'
-import { Story, Meta } from '@storybook/react'
-import { ButtonGroupProps as MuiButtonGroupProps } from '@material-ui/core'
-import { ButtonGroup } from './ButtonGroup'
-import { Button } from '../button/Button'
-
-const ButtonGroupWithState = (props: MuiButtonGroupProps) => {
-  const [activeId, setActiveId] = useState(null)
-
-  const buttons = ['JUI', 'MUI', 'Unstyled UI']
-
-  return (
-    <ButtonGroup {...props}>
-      {buttons.map((id) => (
-        <Button
-          key={id}
-          onClick={() => setActiveId(id)}
-          active={id === activeId}
-        >
-          {id}
-        </Button>
-      ))}
-    </ButtonGroup>
-  )
-}
-
-export default {
-  component: ButtonGroup,
-  title: 'ButtonGroup',
-  argTypes: {
-    variant: {
-      table: {
-        defaultValue: { summary: 'contained' },
-      },
-    },
-    color: {
-      table: {
-        defaultValue: { summary: 'default' },
-      },
-    },
-    disabled: {
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-  },
-} as Meta
-
-const Template: Story<MuiButtonGroupProps> = (args) => (
-  <ButtonGroupWithState {...args} />
-)
-
-export const Basic = Template.bind({})
-
-Basic.args = {
-  variant: 'contained',
-  color: 'default',
-  disabled: false,
-}

package/src/lib/button-group/ButtonGroup.tsx

@@ -1,37 +0,0 @@
-import React from 'react'
-import { styled, fade } from '@material-ui/core/styles'
-import {
-  ButtonGroup as MuiButtonGroup,
-  ButtonGroupProps as MuiButtonGroupProps,
-} from '@material-ui/core'
-
-const PREFIX = 'JuiButtonGroup'
-
-const classes = {
-  grouped: `${PREFIX}-grouped`,
-  groupedOutlinedPrimary: `${PREFIX}-groupedOutlinedPrimary`,
-  groupedOutlinedSecondary: `${PREFIX}-groupedOutlinedSecondary`,
-  disabled: `${PREFIX}-disabled`,
-}
-
-const StyledButtonGroup = styled(({ ...props }) => (
-  <MuiButtonGroup classes={classes} {...props} />
-))(({ theme }) => ({
-  [`& .${classes.groupedOutlinedPrimary}.${classes.grouped}.${classes.disabled}`]: {
-    borderColor: fade(theme.palette.primary.main, 0.5),
-    color: fade(theme.palette.primary.main, 0.5),
-  },
-  [`& .${classes.groupedOutlinedSecondary}.${classes.grouped}.${classes.disabled}`]: {
-    borderColor: fade(theme.palette.secondary.main, 0.5),
-    color: fade(theme.palette.secondary.main, 0.5),
-  },
-}))
-
-export const ButtonGroup = ({
-  children,
-  ...otherProps
-}: MuiButtonGroupProps) => (
-  <StyledButtonGroup {...otherProps}>{children}</StyledButtonGroup>
-)
-
-export default ButtonGroup