@junyiacademy/ui-test 1.4.0 → 1.4.1

package/src/lib/text-field/TextField.tsx

@@ -1,93 +0,0 @@
-import React from 'react'
-import { styled } from '@material-ui/core/styles'
-import { TextField as MuiTextField, TextFieldProps } from '@material-ui/core'
-
-// 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 = styled(
-  ({ hasEndAdornment, InputLabelProps, InputProps, ...otherProps }) => (
-    <MuiTextField
-      InputLabelProps={{
-        ...InputLabelProps,
-        classes: {
-          error: classes.inputLabelError,
-          disabled: classes.inputLabelDisabled,
-          shrink: classes.inputLabelShrink,
-          focused: classes.inputLabelFocused,
-        },
-        shrink: hasEndAdornment ? true : undefined,
-      }}
-      InputProps={{
-        ...InputProps,
-        classes: {
-          colorSecondary: classes.inputColorSecondary,
-          disabled: classes.inputDisabled,
-          error: classes.inputError,
-          focused: classes.inputFocused,
-          ...(otherProps?.variant === 'outlined'
-            ? { notchedOutline: classes.inputNotchedOutline }
-            : { underline: classes.inputUnderline }),
-        },
-      }}
-      {...otherProps}
-    />
-  )
-)(({ theme }) => ({
-  [`& .${classes.inputLabelError}`]: {
-    [`&:not(.${classes.inputLabelShrink})`]: {
-      color: theme.palette.text.secondary,
-    },
-    [`&.${classes.inputLabelDisabled}`]: {
-      color: theme.palette.text.disabled,
-    },
-  },
-  [`& .${classes.inputLabelError}.${classes.inputLabelFocused}`]: {
-    color: theme.palette.error.main,
-  },
-  // For variant: standard | filled
-  [`& .${classes.inputUnderline}:not(.${classes.inputDisabled})`]: {
-    [`&:hover:before`]: {
-      borderColor: theme.palette.primary.main,
-    },
-    [`&.${classes.inputColorSecondary}:hover:before`]: {
-      borderColor: theme.palette.secondary.main,
-    },
-  },
-  // For variant: outlined
-  [`& .${classes.inputDisabled} .${classes.inputNotchedOutline}`]: {
-    borderStyle: 'dotted',
-  },
-  [`& .${classes.inputError}.${classes.inputFocused} .${classes.inputNotchedOutline}`]: {
-    borderColor: theme.palette.error.main,
-  },
-  [`& :not(.${classes.inputDisabled}):not(.${classes.inputError})`]: {
-    [`&:hover .${classes.inputNotchedOutline}`]: {
-      borderColor: theme.palette.primary.main,
-    },
-    [`&.${classes.inputColorSecondary}:hover .${classes.inputNotchedOutline}`]: {
-      borderColor: theme.palette.secondary.main,
-    },
-  },
-}))
-
-export const TextField = (props: TextFieldProps) => {
-  const hasEndAdornment = !!props?.InputProps?.endAdornment
-
-  return <StyledTextField hasEndAdornment={hasEndAdornment} {...props} />
-}
-
-export default TextField

package/src/lib/topic-filter/TopicFilter.stories.tsx

@@ -1,83 +0,0 @@
-import React from 'react'
-import { Story, Meta } from '@storybook/react'
-import {
-  TopicFilter as JuiTopicFilter,
-  TopicFilterProps as JuiTopicFilterProps,
-} from './TopicFilter'
-import { topicTree } from '../../utils/topicTree'
-
-export default {
-  component: JuiTopicFilter,
-  title: 'TopicFilter',
-  argTypes: {
-    topicTree: {
-      type: { name: 'object', required: false },
-      description: 'Topic tree data list',
-      table: {
-        type: { summary: 'object' },
-        defaultValue: { summary: topicTree },
-      },
-      control: { type: 'object' },
-    },
-    onTopicSelected: {
-      type: { name: 'function', required: false },
-      description: 'Callback fired when the topic selected.',
-      table: {
-        type: {
-          summary: `(
-          topic: Topic,
-          selectedInfo: { layerNumber: number; selectedTopicIds: string[] }
-        ) => void`,
-        },
-        defaultValue: { summary: () => {} },
-      },
-      control: { type: 'function' },
-    },
-    isLastLayer: {
-      type: { name: 'function', required: false },
-      description: 'Callback for checking selected topic is last layer or not.',
-      table: {
-        type: {
-          summary: `(topic: Topic) => boolean`,
-        },
-        defaultValue: { summary: () => false },
-      },
-      control: { type: 'function' },
-    },
-    hasArrow: {
-      type: { name: 'boolean', required: false },
-      description: 'Control the arrow display state.',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: true },
-      },
-      control: { type: 'boolean' },
-      defaultValue: true,
-    },
-    initSelectedTopicIds: {
-      type: { name: 'array', required: false },
-      description: ``,
-      table: {
-        type: { summary: 'array' },
-        defaultValue: { summary: [] },
-      },
-      control: { type: 'array' },
-    },
-  },
-} as Meta
-
-const TopicFilterStory: Story<JuiTopicFilterProps> = (args) => (
-  <JuiTopicFilter {...args} />
-)
-
-export const TopicFilter = TopicFilterStory.bind({})
-
-TopicFilter.args = {
-  topicTree: topicTree,
-  onTopicSelected: () => {},
-  isLastLayer: (selectedTopic) => {
-    return selectedTopic.isContentTopic
-  },
-  hasArrow: true,
-  initSelectedTopicIds: [],
-}

package/src/lib/topic-filter/TopicFilter.tsx

@@ -1,209 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import { Theme, styled, useTheme } from '@material-ui/core/styles'
-import ArrowRightRoundedIcon from '@material-ui/icons/ArrowRightRounded'
-import type { ITopicTreeNode } from '../../interfaces'
-import Select from '../select/Select'
-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[]
-}
-
-export const TopicFilter = ({
-  topicTree,
-  onTopicSelected,
-  isLastLayer,
-  hasArrow,
-  initSelectedTopicIds,
-}: TopicFilterProps) => {
-  const theme = useTheme()
-  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 (
-      <Select
-        variant='outlined'
-        size='small'
-        width={220}
-        selectMargin={theme.spacing(1)}
-        placeholder='載入資料中...'
-        disabled
-      ></Select>
-    )
-  }
-  return (
-    <FiltersWrapper>
-      {layeredTopicList.map((layeredTopic, layerNumber) => {
-        const hasLabel =
-          isFocusedList[layerNumber] || !selectedTopicIds[layerNumber]
-        return (
-          <SelectWrapper key={layeredTopic.id}>
-            <Select
-              variant='outlined'
-              size='small'
-              width={220}
-              selectMargin={theme.spacing(1)}
-              paperMaxHeight={412}
-              hasLabel={hasLabel}
-              placeholder={PLACEHOLDER}
-              value={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
-                  })
-                },
-              }}
-            >
-              <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>
-              ))}
-            </Select>
-            {hasArrow && layerNumber !== layeredTopicList.length - 1 && (
-              <StyledArrowRightRoundedIcon
-                fontSize='large'
-                data-testid='topic-filter-arrow'
-              ></StyledArrowRightRoundedIcon>
-            )}
-          </SelectWrapper>
-        )
-      })}
-    </FiltersWrapper>
-  )
-}
-
-export default TopicFilter

package/src/styles/theme.ts

@@ -1,60 +0,0 @@
-/**
- * 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.
- */
-
-import { createMuiTheme } from '@material-ui/core/styles'
-
-declare module '@material-ui/core/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']
-    }
-  }
-}
-
-// Create a theme instance.
-const theme = createMuiTheme({
-  typography: {
-    fontFamily: ['Noto Sans TC', 'Helvetica', 'Arial', 'sans-serif'].join(','),
-  },
-  palette: {
-    primary: {
-      light: '#82C0FF',
-      main: '#4990E2',
-      dark: '#0063B0',
-    },
-    secondary: {
-      light: '#FFD759',
-      main: '#F5A623',
-      dark: '#BD7700',
-      contrastText: '#FFFFFF',
-    },
-    green: {
-      primary: {
-        light: '#9DD49E',
-        main: '#5CB85D',
-        dark: '#218838',
-      },
-      blueGreen: {
-        main: '#19A696',
-      },
-      grassGreen: {
-        main: '#80BB5A',
-      },
-    },
-  },
-})
-
-export default theme

package/src/utils/topicTree.ts

@@ -1,197 +0,0 @@
-import { ITopicTreeNode } from '../interfaces'
-
-export const topicTree: ITopicTreeNode = {
-  childTopics: [
-    {
-      childTopics: [
-        {
-          childTopics: [
-            {
-              childTopics: [
-                {
-                  childTopics: [],
-                  id: 'j-m1ach1',
-                  isContentTopic: true,
-                  key:
-                    'ag5zfmp1bnlpYWNhZGVteXJmCxIFVG9waWMiKHpWQ01BOGpXQTU5SW1zSi1sdWJSQTJlV0QzbHpuZUZiY1BwMUZWOVoMCxIFVG9waWMiKFlWUkdyck1reDdXU3lSb3pQYXU4RDlDTnZ4Ukx3MjhYU2ZCcTF0LTEM',
-                  tags: [],
-                  title: '【一上】數到 10',
-                },
-                {
-                  childTopics: [],
-                  id: 'j-m1ach2',
-                  isContentTopic: true,
-                  key:
-                    'ag5zfmp1bnlpYWNhZGVteXJmCxIFVG9waWMiKHpWQ01BOGpXQTU5SW1zSi1sdWJSQTJlV0QzbHpuZUZiY1BwMUZWOVoMCxIFVG9waWMiKHRXZlVrTHNpSjRYcHlMTGFDa2QtVTRDWkRjcjMwZ3JSTGtSUUNNazgM',
-                  tags: [],
-                  title: '【一上】比長短1',
-                },
-                {
-                  childTopics: [],
-                  id: 'j-m1ach3',
-                  isContentTopic: true,
-                  key:
-                    'ag5zfmp1bnlpYWNhZGVteXJmCxIFVG9waWMiKHpWQ01BOGpXQTU5SW1zSi1sdWJSQTJlV0QzbHpuZUZiY1BwMUZWOVoMCxIFVG9waWMiKHRXZlVrTHNpSjRYcHlMTGFDa2QtVTRDWkRjcjMwZ3JSTGtSUUNNazgM',
-                  tags: [],
-                  title: '【一上】比長短2',
-                },
-                {
-                  childTopics: [],
-                  id: 'j-m1ach4',
-                  isContentTopic: true,
-                  key:
-                    'ag5zfmp1bnlpYWNhZGVteXJmCxIFVG9waWMiKHpWQ01BOGpXQTU5SW1zSi1sdWJSQTJlV0QzbHpuZUZiY1BwMUZWOVoMCxIFVG9waWMiKHRXZlVrTHNpSjRYcHlMTGFDa2QtVTRDWkRjcjMwZ3JSTGtSUUNNazgM',
-                  tags: [],
-                  title: '【一上】比長短3',
-                },
-                {
-                  childTopics: [],
-                  id: 'j-m1ach5',
-                  isContentTopic: true,
-                  key:
-                    'ag5zfmp1bnlpYWNhZGVteXJmCxIFVG9waWMiKHpWQ01BOGpXQTU5SW1zSi1sdWJSQTJlV0QzbHpuZUZiY1BwMUZWOVoMCxIFVG9waWMiKHRXZlVrTHNpSjRYcHlMTGFDa2QtVTRDWkRjcjMwZ3JSTGtSUUNNazgM',
-                  tags: [],
-                  title: '【一上】比長短4',
-                },
-                {
-                  childTopics: [],
-                  id: 'j-m1ach6',
-                  isContentTopic: true,
-                  key:
-                    'ag5zfmp1bnlpYWNhZGVteXJmCxIFVG9waWMiKHpWQ01BOGpXQTU5SW1zSi1sdWJSQTJlV0QzbHpuZUZiY1BwMUZWOVoMCxIFVG9waWMiKHRXZlVrTHNpSjRYcHlMTGFDa2QtVTRDWkRjcjMwZ3JSTGtSUUNNazgM',
-                  tags: [],
-                  title: '【一上】比長短5',
-                },
-                {
-                  childTopics: [],
-                  id: 'j-m1ach7',
-                  isContentTopic: true,
-                  key:
-                    'ag5zfmp1bnlpYWNhZGVteXJmCxIFVG9waWMiKHpWQ01BOGpXQTU5SW1zSi1sdWJSQTJlV0QzbHpuZUZiY1BwMUZWOVoMCxIFVG9waWMiKHRXZlVrTHNpSjRYcHlMTGFDa2QtVTRDWkRjcjMwZ3JSTGtSUUNNazgM',
-                  tags: [],
-                  title: '【一上】比長短6',
-                },
-                {
-                  childTopics: [],
-                  id: 'j-m1ach8',
-                  isContentTopic: true,
-                  key:
-                    'ag5zfmp1bnlpYWNhZGVteXJmCxIFVG9waWMiKHpWQ01BOGpXQTU5SW1zSi1sdWJSQTJlV0QzbHpuZUZiY1BwMUZWOVoMCxIFVG9waWMiKHRXZlVrTHNpSjRYcHlMTGFDa2QtVTRDWkRjcjMwZ3JSTGtSUUNNazgM',
-                  tags: [],
-                  title: '【一上】比長短7',
-                },
-                {
-                  childTopics: [],
-                  id: 'j-m1ach9',
-                  isContentTopic: true,
-                  key:
-                    'ag5zfmp1bnlpYWNhZGVteXJmCxIFVG9waWMiKHpWQ01BOGpXQTU5SW1zSi1sdWJSQTJlV0QzbHpuZUZiY1BwMUZWOVoMCxIFVG9waWMiKHRXZlVrTHNpSjRYcHlMTGFDa2QtVTRDWkRjcjMwZ3JSTGtSUUNNazgM',
-                  tags: [],
-                  title: '【一上】比長短8',
-                },
-                {
-                  childTopics: [],
-                  id: 'j-m1ach10',
-                  isContentTopic: true,
-                  key:
-                    'ag5zfmp1bnlpYWNhZGVteXJmCxIFVG9waWMiKHpWQ01BOGpXQTU5SW1zSi1sdWJSQTJlV0QzbHpuZUZiY1BwMUZWOVoMCxIFVG9waWMiKHRXZlVrTHNpSjRYcHlMTGFDa2QtVTRDWkRjcjMwZ3JSTGtSUUNNazgM',
-                  tags: [],
-                  title: '【一上】比長短9',
-                },
-                {
-                  childTopics: [],
-                  id: 'j-m1ach11',
-                  isContentTopic: true,
-                  key:
-                    'ag5zfmp1bnlpYWNhZGVteXJmCxIFVG9waWMiKHpWQ01BOGpXQTU5SW1zSi1sdWJSQTJlV0QzbHpuZUZiY1BwMUZWOVoMCxIFVG9waWMiKHRXZlVrTHNpSjRYcHlMTGFDa2QtVTRDWkRjcjMwZ3JSTGtSUUNNazgM',
-                  tags: [],
-                  title: '【一上】比長短10',
-                },
-                {
-                  childTopics: [],
-                  id: 'j-m1ach12',
-                  isContentTopic: true,
-                  key:
-                    'ag5zfmp1bnlpYWNhZGVteXJmCxIFVG9waWMiKHpWQ01BOGpXQTU5SW1zSi1sdWJSQTJlV0QzbHpuZUZiY1BwMUZWOVoMCxIFVG9waWMiKHRXZlVrTHNpSjRYcHlMTGFDa2QtVTRDWkRjcjMwZ3JSTGtSUUNNazgM',
-                  tags: [],
-                  title: '【一上】比長短11',
-                },
-              ],
-              id: 'math-grade-1-a',
-              isContentTopic: false,
-              key:
-                'ag5zfmp1bnlpYWNhZGVteXJmCxIFVG9waWMiKHpWQ01BOGpXQTU5SW1zSi1sdWJSQTJlV0QzbHpuZUZiY1BwMUZWOVoMCxIFVG9waWMiKHN2MlIzS0VwaXlVeWdJQnhyYzBYakZ0RDZhU0JraGFJbGctU19qZFoM',
-              tags: [],
-              title: '均一版',
-            },
-          ],
-          id: 'math-1',
-          isContentTopic: false,
-          key:
-            'ag5zfmp1bnlpYWNhZGVteXJmCxIFVG9waWMiKHpWQ01BOGpXQTU5SW1zSi1sdWJSQTJlV0QzbHpuZUZiY1BwMUZWOVoMCxIFVG9waWMiKEVzRnVINFdtalZBRmdQUkpjeWtaWFVnSlR2OEc2RzVsWnA1a0ZEVV8M',
-          tags: ['grouping_eleme'],
-          title: '一年級',
-        },
-        {
-          childTopics: [
-            {
-              childTopics: [
-                {
-                  childTopics: [],
-                  id: 'n-m2ach1',
-                  isContentTopic: true,
-                  key:
-                    'ag5zfmp1bnlpYWNhZGVteXJmCxIFVG9waWMiKHpWQ01BOGpXQTU5SW1zSi1sdWJSQTJlV0QzbHpuZUZiY1BwMUZWOVoMCxIFVG9waWMiKExzUnEyWUgzUEduZmVzWm1oVXdxLU5tdmxjZmx4aWJXbkVKN0JVcXYM',
-                  tags: [],
-                  title: '【二上】第一單元 數到 300',
-                },
-                {
-                  childTopics: [],
-                  id: 'n-m2ach2',
-                  isContentTopic: true,
-                  key:
-                    'ag5zfmp1bnlpYWNhZGVteXJmCxIFVG9waWMiKHpWQ01BOGpXQTU5SW1zSi1sdWJSQTJlV0QzbHpuZUZiY1BwMUZWOVoMCxIFVG9waWMiKFJuTDZLWXhxS0xNQ3VPU3BkUXZBOVN6YkRrVTNqdVNRSFdjbTEwc2UM',
-                  tags: [],
-                  title: '【二上】第二單元 二位數的加法',
-                },
-                {
-                  childTopics: [],
-                  id: 'n-m2ach3',
-                  isContentTopic: true,
-                  key:
-                    'ag5zfmp1bnlpYWNhZGVteXJmCxIFVG9waWMiKHpWQ01BOGpXQTU5SW1zSi1sdWJSQTJlV0QzbHpuZUZiY1BwMUZWOVoMCxIFVG9waWMiKHpYUWFzZXNPbS16V1BVeG9qeVFRQXlfZzA5Wm44ajdVZnM1dU85UWkM',
-                  tags: [],
-                  title: '【二上】第三單元 幾公分',
-                },
-              ],
-              id: 'n-m2a',
-              isContentTopic: false,
-              key:
-                'ag5zfmp1bnlpYWNhZGVteXJmCxIFVG9waWMiKHpWQ01BOGpXQTU5SW1zSi1sdWJSQTJlV0QzbHpuZUZiY1BwMUZWOVoMCxIFVG9waWMiKHl3QXRqNW1xMmk2QTRfR0JzWlpXQnVRQW1fYW5ZTEV4MkJ2ZUlYSmUM',
-              tags: [],
-              title: '南一版',
-            },
-          ],
-          id: 'math-2',
-          isContentTopic: false,
-          key:
-            'ag5zfmp1bnlpYWNhZGVteXJmCxIFVG9waWMiKHpWQ01BOGpXQTU5SW1zSi1sdWJSQTJlV0QzbHpuZUZiY1BwMUZWOVoMCxIFVG9waWMiKE92cm9EU1N4c3FZM2J6MzMzZ05XWFR6RGFLMDJudHlIaHFtN1VRcXIM',
-          tags: ['grouping_eleme'],
-          title: '二年級',
-        },
-      ],
-      id: 'course-compare',
-      isContentTopic: false,
-      key:
-        'ag5zfmp1bnlpYWNhZGVteXJmCxIFVG9waWMiKHpWQ01BOGpXQTU5SW1zSi1sdWJSQTJlV0QzbHpuZUZiY1BwMUZWOVoMCxIFVG9waWMiKDFCSmFuVjVsTWlUUWZaU21MeE9FU3BZbVlmcktkNHJWN3Q5WU1VWjQM',
-      tags: ['has-pre-exam', 'has-post-exam'],
-      title: '數學',
-    },
-  ],
-  id: 'root',
-  isContentTopic: false,
-  key:
-    'ag5zfmp1bnlpYWNhZGVteXIzCxIFVG9waWMiKHpWQ01BOGpXQTU5SW1zSi1sdWJSQTJlV0QzbHpuZUZiY1BwMUZWOVoM',
-  tags: [],
-  title: '知識樹',
-}