@junyiacademy/ui-test 0.0.6 → 0.0.10

package/src/lib/TopicFilter.tsx

@@ -0,0 +1,204 @@
+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'
+
+// self-defined-configs
+const PLACEHOLDER = '請選擇'
+
+// self-defined-components
+const PREFIX = 'JuiTopicFilter'
+
+const FiltersWrapper = styled('div')({
+  display: 'flex',
+  alignItems: 'center',
+  flexWrap: 'wrap',
+})
+
+const SelectWrapper = styled('div')({
+  display: 'flex',
+  alignItems: 'center',
+})
+
+interface StyledArrowRightRoundedIconProps {
+  theme?: Theme
+}
+
+const StyledArrowRightRoundedIcon = styled(ArrowRightRoundedIcon)(
+  ({ theme }: StyledArrowRightRoundedIconProps) => ({
+    margin: theme.spacing(-1, -1.5),
+    fontSize: theme.spacing(7),
+    color: '#444',
+  })
+)
+
+export interface TopicFilterProps {
+  topicTree: ITopicTreeNode
+  onTopicSelected: (
+    topic: ITopicTreeNode,
+    selectedInfo: { layerNumber: number; selectedTopicIds: string[] }
+  ) => void
+  isLastLayer: (topic: ITopicTreeNode) => boolean
+  hasArrow: boolean
+  initSelectedTopicIds: string[]
+}
+
+const TopicFilter = ({
+  topicTree,
+  onTopicSelected,
+  isLastLayer,
+  hasArrow,
+  initSelectedTopicIds,
+}: TopicFilterProps) => {
+  const [selectedTopicIds, setSelectedTopicIds] = useState([])
+  const [layeredTopicList, setLayeredTopicList] = useState([])
+  const [isFocusedList, setIsFocusedList] = useState([])
+  const initSelectedLayers = () => {
+    const newLayeredTopicList = initSelectedTopicIds.reduce(
+      (topicListAccumulator, topicId, index) => {
+        const selectedTopic = topicListAccumulator[index]?.childTopics?.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,
+      ])
+    }
+  }
+
+  useEffect(() => {
+    if (!topicTree || Object.keys(topicTree).length === 0) {
+      return
+    }
+    if (initSelectedTopicIds.length !== 0) {
+      initSelectedLayers()
+      return
+    }
+    setLayeredTopicList([topicTree])
+  }, [topicTree])
+
+  if (layeredTopicList.length === 0) {
+    return (
+      <OutlinedSelect
+        size='small'
+        width={220}
+        placeholder='載入資料中...'
+        disabled
+      ></OutlinedSelect>
+    )
+  }
+  return (
+    <FiltersWrapper>
+      {layeredTopicList.map((layeredTopic, layerNumber) => {
+        const hasLabel =
+          isFocusedList[layerNumber] || !selectedTopicIds[layerNumber]
+        return (
+          <SelectWrapper key={layeredTopic.id}>
+            <OutlinedSelect
+              size='small'
+              width={220}
+              paperMaxHeight={412}
+              hasLabel={hasLabel}
+              placeholder={PLACEHOLDER}
+              value={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
+                  })
+                },
+              }}
+            >
+              <SelectMenuItem width={220} disabled>
+                {PLACEHOLDER}
+              </SelectMenuItem>
+              {layeredTopic.childTopics.map((childTopic) => (
+                <SelectMenuItem
+                  width={220}
+                  key={childTopic.id}
+                  value={childTopic.id}
+                  data-testid={`layered-menuitem-${layerNumber}`}
+                  data-is-content-topic={childTopic.isContentTopic}
+                >
+                  {childTopic.title}
+                </SelectMenuItem>
+              ))}
+            </OutlinedSelect>
+            {hasArrow && layerNumber !== layeredTopicList.length - 1 && (
+              <StyledArrowRightRoundedIcon
+                fontSize='large'
+                data-testid='topic-filter-arrow'
+              ></StyledArrowRightRoundedIcon>
+            )}
+          </SelectWrapper>
+        )
+      })}
+    </FiltersWrapper>
+  )
+}
+
+export default TopicFilter

package/src/lib/menu-item/SelectMenuItem.spec.tsx

@@ -0,0 +1,10 @@
+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/menu-item/SelectMenuItem.stories.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import { Story, Meta } from '@storybook/react'
+import { Menu } from '@material-ui/core'
+import SelectMenuItem, { SelectMenuItemProps } from './SelectMenuItem'
+
+export default {
+  component: SelectMenuItem,
+  title: 'SelectMenuItem',
+  argTypes: {
+    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: 'Control the disabled display state.',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: true },
+      },
+      control: { type: 'boolean' },
+      defaultValue: true,
+    },
+  },
+} as Meta
+
+const Template: Story<SelectMenuItemProps> = (args) => (
+  <Menu open={true}>
+    <SelectMenuItem {...args}>Test</SelectMenuItem>
+    <SelectMenuItem {...args}>Example</SelectMenuItem>
+  </Menu>
+)
+
+export const Primary = Template.bind({})
+
+Primary.args = {
+  value: '',
+  disabled: false,
+}

package/src/lib/menu-item/SelectMenuItem.tsx

@@ -0,0 +1,45 @@
+import React, { PropsWithChildren } from 'react'
+import { Theme, styled } from '@material-ui/core/styles'
+import { MenuItem, MenuItemProps } from '@material-ui/core'
+
+// self-defined-components
+const PREFIX = 'JuiSelectMenuItem'
+
+const classes = {
+  menuItemSelected: `${PREFIX}-menuItemSelected`,
+}
+
+interface StyledMenuItemProps {
+  width: number | 'auto'
+  theme?: Theme
+}
+
+const StyledMenuItem = styled(({ width: _width, ...props }) => (
+  <MenuItem classes={{ selected: classes.menuItemSelected }} {...props} />
+))(({ width, theme }: StyledMenuItemProps) => ({
+  width: width,
+  whiteSpace: 'unset',
+  color: theme.palette.text.primary,
+  [`& .${classes.menuItemSelected}`]: {
+    backgroundColor: theme.palette.grey[300],
+  },
+}))
+
+export interface SelectMenuItemProps extends MenuItemProps {
+  width: number | 'auto'
+  value?: any
+  disabled?: boolean
+}
+
+const SelectMenuItem = React.forwardRef<
+  HTMLLIElement,
+  PropsWithChildren<SelectMenuItemProps>
+>(({ width, children, value = '', ...otherProps }, ref) => {
+  return (
+    <StyledMenuItem width={width} innerRef={ref} value={value} {...otherProps}>
+      {children}
+    </StyledMenuItem>
+  )
+})
+
+export default SelectMenuItem

package/src/lib/radio/Radio.stories.tsx

@@ -25,10 +25,11 @@ export default {
       type: { name: 'string', required: false },
       description: 'The position of the label.',
       table: {
-        type: { summary: 'bottom | end | start | top' },
+        type: { summary: 'end' },
         defaultValue: { summary: 'end' },
+        category: 'not comparable with caption',
       },
-      options: ['bottom', 'end', 'start', 'top'],
+      options: ['end'],
       control: { type: 'radio' },
     },
     color: {

package/src/lib/select/OutlinedSelect.spec.tsx

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

@@ -0,0 +1,238 @@
+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: {},
+}