@mx-cartographer/experiences 4.0.13 → 4.0.14-alpha.JB1

package/src/categories/components/CategorySelector.tsx

@@ -0,0 +1,80 @@
+import React from 'react'
+import { css } from '@mxenabled/cssinjs'
+import { observer } from 'mobx-react-lite'
+
+import CategoryList from './CategoryList'
+import { SearchBox, useCategoryStore, useGlobalCopyStore } from '../../common'
+import { useCategoryUiStore } from '../context/hooks'
+
+export interface CategorySelectorProps {
+  initialSelected?: string
+  onSelect: (guid: string) => void
+  showSelected?: boolean
+  unselectable?: string[]
+  unselectableText?: string
+}
+
+const CategorySelector: React.FC<CategorySelectorProps> = ({
+  initialSelected,
+  onSelect = undefined,
+  showSelected = true,
+  unselectable = [],
+  unselectableText = 'Unselectable',
+}) => {
+  const styles = getStyles()
+  const { categories, loadCategories } = useCategoryStore()
+  const { common: copy } = useGlobalCopyStore()
+
+  const {
+    searchValue,
+    setOnSelect,
+    setSearchValue,
+    setSelectedGuid,
+    setShowSelected,
+    setUnselectable,
+    setUnselectableText,
+  } = useCategoryUiStore()
+
+  React.useEffect(() => {
+    if (onSelect) {
+      setOnSelect(onSelect)
+    }
+  })
+
+  React.useEffect(() => {
+    if (!categories.length) {
+      loadCategories()
+    }
+  }, [])
+
+  React.useEffect(() => {
+    if (initialSelected) {
+      setSelectedGuid(initialSelected)
+    }
+    setShowSelected(showSelected)
+    setUnselectable(unselectable)
+    setUnselectableText(unselectableText)
+  }, [initialSelected, showSelected, unselectable, unselectableText])
+
+  return (
+    <div className={`mx-cat-category-selector ${styles}`}>
+      <SearchBox
+        ariaLabel={copy.search_aria}
+        cancelAriaLabel={copy.cancel_search_aria}
+        onChange={(value) => setSearchValue(value)}
+        placeholder={copy.search_placeholder}
+        searchValue={searchValue}
+      />
+      <CategoryList />
+    </div>
+  )
+}
+
+const getStyles = () =>
+  css({
+    display: 'flex',
+    flexDirection: 'column',
+    width: '100%',
+  })
+
+export default observer(CategorySelector)

package/src/categories/components/CategorySelectorDrawer.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import { Drawer, useGlobalCopyStore } from '../../common'
+
+import CategorySelector from './CategorySelector'
+
+import type { CategorySelectorProps } from './CategorySelector'
+
+export interface CategorySelectorDrawerProps extends CategorySelectorProps {
+  disableScroll?: boolean
+  id?: string
+  onClose: () => void
+  title: string
+  showDrawer: boolean
+}
+
+const CategorySelectorDrawer: React.FC<CategorySelectorDrawerProps> = ({
+  id,
+  onClose,
+  title,
+  showDrawer,
+  ...categorySelectorProps
+}) => {
+  const { common: commonCopy } = useGlobalCopyStore()
+
+  return (
+    <Drawer
+      ariaLabelClose={commonCopy.close_aria}
+      className="mx-cat-category-selector-drawer"
+      id={id}
+      isOpen={showDrawer}
+      onClose={onClose}
+      title={title}
+    >
+      <CategorySelector {...categorySelectorProps} />
+    </Drawer>
+  )
+}
+
+export default observer(CategorySelectorDrawer)

package/src/categories/components/CustomCategories/AddSubcategory.tsx

@@ -0,0 +1,65 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import ListItem from '@mui/material/ListItem'
+import ListItemButton from '@mui/material/ListItemButton'
+import ListItemText from '@mui/material/ListItemText'
+
+import type { Category } from '../../../common/types'
+
+import CustomCategoryModal, { CustomCategoryModalType } from './CustomCategoryModal'
+
+import { ON_CLICK_EVENTS } from '../../constants/OnClickEvents'
+import { useCategoryStore, useEvent, useGlobalCopyStore } from '../../../common'
+import { useCategoryUiStore } from '../../context/hooks'
+
+interface AddSubcategoryProps {
+  parentCategory: Category
+}
+
+const AddSubcategory: React.FC<AddSubcategoryProps> = ({ parentCategory }) => {
+  const [showAdd, setShowAdd] = React.useState(false)
+  const { addCategory } = useCategoryStore()
+  const { categories: copy } = useGlobalCopyStore()
+  const { onEvent } = useEvent()
+  const { setShouldDisableDrawerScroll } = useCategoryUiStore()
+
+  const handleAdd = async (name: string) => {
+    await addCategory(name.trim(), parentCategory.guid)
+    onEvent(ON_CLICK_EVENTS.ON_SUBCATEGORY_ADDED)
+    setShowAdd(false)
+  }
+
+  const handleAdding = async () => {
+    onEvent(ON_CLICK_EVENTS.ON_SUBCATEGORY_ADD_CLICK)
+    setShouldDisableDrawerScroll(true)
+    setShowAdd(true)
+  }
+
+  const handleModalClose = () => {
+    setShowAdd(false)
+    onEvent(ON_CLICK_EVENTS.ON_SUBCATEGORY_ADD_CANCEL_CLICK)
+  }
+
+  return (
+    <ListItem disableGutters={true} disablePadding={true}>
+      <ListItemButton onClick={handleAdding} sx={{ ml: 60 }}>
+        <ListItemText
+          primary={copy.add_subcategory_button}
+          primaryTypographyProps={{ color: 'primary', fontWeight: 'normal', variant: 'Body' }}
+        />
+      </ListItemButton>
+
+      {showAdd && (
+        <CustomCategoryModal
+          isOpen={showAdd}
+          onClose={handleModalClose}
+          onSave={handleAdd}
+          type={CustomCategoryModalType.ADD}
+        />
+      )}
+    </ListItem>
+  )
+}
+
+export default observer(AddSubcategory)

package/src/categories/components/CustomCategories/CustomCategoryModal.tsx

@@ -0,0 +1,99 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+import { Text } from '@kyper/mui'
+import { TextField } from '@kyper/mui'
+
+import { Dialog, useGlobalCopyStore } from '../../../common'
+import { buildDynamicCopy } from '../../../common/utils'
+import type { DynamicCopyElement } from '../../../common/types'
+import DialogContent from '@mui/material/DialogContent'
+
+import { useCategoryUiStore } from '../../context/hooks'
+
+export enum CustomCategoryModalType {
+  ADD = 'add',
+  EDIT = 'edit',
+  DELETE = 'delete',
+}
+
+interface CustomCategoryModalProps {
+  categoryName?: string
+  onClose: () => void
+  onSave: (name: string) => void
+  isOpen: boolean
+  type: CustomCategoryModalType
+}
+
+const CustomCategoryModal: React.FC<CustomCategoryModalProps> = ({
+  categoryName = '',
+  onClose,
+  onSave,
+  isOpen,
+  type,
+}) => {
+  const [name, setName] = React.useState(categoryName)
+  const { categories: copy } = useGlobalCopyStore()
+  const { setShouldDisableDrawerScroll } = useCategoryUiStore()
+
+  let headingText = ''
+  let primaryText: DynamicCopyElement = []
+
+  const isDeleteType = type === CustomCategoryModalType.DELETE
+
+  switch (type) {
+    case CustomCategoryModalType.ADD:
+      headingText = copy.add_subcategory_title
+      break
+    case CustomCategoryModalType.EDIT:
+      headingText = buildDynamicCopy(copy.edit_subcategory_title, categoryName) as string
+      break
+    case CustomCategoryModalType.DELETE:
+      headingText = copy.delete_subcategory_heading
+      primaryText = buildDynamicCopy(
+        copy.all_transactions_in_this_subcategory,
+        <Text bold={true}>
+          {buildDynamicCopy(copy.all_parent_category, categoryName) as string}
+        </Text>,
+      ) as DynamicCopyElement
+      break
+  }
+
+  return (
+    <Dialog
+      copy={{
+        title: headingText,
+      }}
+      disablePrimaryButton={!name}
+      isOpen={isOpen}
+      onClose={() => {
+        setShouldDisableDrawerScroll(false)
+        onClose()
+      }}
+      onPrimaryAction={() => {
+        setShouldDisableDrawerScroll(false)
+        onSave(name)
+      }}
+    >
+      <DialogContent>
+        {isDeleteType ? (
+          <Text>{primaryText as string}</Text>
+        ) : (
+          <TextField
+            aria-label={
+              type === CustomCategoryModalType.EDIT
+                ? copy.edit_subcategory_aria
+                : copy.add_subcategory_aria
+            }
+            name="modify-subcategory"
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setName(e.target.value)}
+            placeholder={copy.input_placeholder}
+            sx={{ width: '100%' }}
+            value={name}
+          />
+        )}
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export default observer(CustomCategoryModal)

package/src/categories/components/CustomCategories/DeleteSubcategory.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import CustomCategoryModal, { CustomCategoryModalType } from './CustomCategoryModal'
+
+import { useCategoryStore, useEvent } from '../../../common'
+import type { Category } from '../../../common'
+
+import { ON_CLICK_EVENTS } from '../../constants/OnClickEvents'
+
+interface DeleteSubcategoryProps {
+  parentCategory: Category
+  showDelete: boolean
+  setShowDelete: (isOpen: boolean) => void
+  subCategory: Category
+}
+
+const DeleteSubcategory: React.FC<DeleteSubcategoryProps> = ({
+  parentCategory,
+  showDelete,
+  setShowDelete,
+  subCategory,
+}) => {
+  const { onEvent } = useEvent()
+  const { removeCategory } = useCategoryStore()
+
+  const handleClose = () => {
+    setShowDelete(false)
+    onEvent(ON_CLICK_EVENTS.ON_SUBCATEGORY_DELETE_CLICK)
+  }
+
+  const handleDelete = async () => {
+    onEvent(ON_CLICK_EVENTS.ON_SUBCATEGORY_DELETED)
+    await removeCategory(subCategory.guid)
+    setShowDelete(false)
+  }
+
+  return (
+    <CustomCategoryModal
+      categoryName={parentCategory.name}
+      isOpen={showDelete}
+      onClose={handleClose}
+      onSave={handleDelete}
+      type={CustomCategoryModalType.DELETE}
+    />
+  )
+}
+
+export default observer(DeleteSubcategory)

package/src/categories/components/CustomCategories/RenameSubcategory.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import type { Category } from '../../../common/types'
+
+import CustomCategoryModal from './CustomCategoryModal'
+
+import { CustomCategoryModalType } from './CustomCategoryModal'
+import { ON_CLICK_EVENTS } from '../../constants/OnClickEvents'
+import { useCategoryStore, useEvent } from '../../../common'
+
+interface RenameSubcategoryProps {
+  setShowRename: (show: boolean) => void
+  subCategory: Category
+  showRename: boolean
+}
+
+const RenameSubcategory: React.FC<RenameSubcategoryProps> = ({
+  setShowRename,
+  subCategory,
+  showRename,
+}) => {
+  const { updateCategory } = useCategoryStore()
+  const { onEvent } = useEvent()
+
+  const handleRename = async (name: string) => {
+    await updateCategory({ ...subCategory, name })
+    onEvent(ON_CLICK_EVENTS.ON_SUBCATEGORY_SAVED)
+    setShowRename(false)
+  }
+
+  const handleModalClose = () => {
+    setShowRename(false)
+    onEvent(ON_CLICK_EVENTS.ON_SUBCATEGORY_EDIT_CANCEL_CLICK)
+  }
+
+  return (
+    <CustomCategoryModal
+      categoryName={subCategory.name}
+      isOpen={showRename}
+      onClose={handleModalClose}
+      onSave={handleRename}
+      type={CustomCategoryModalType.EDIT}
+    />
+  )
+}
+
+export default observer(RenameSubcategory)

package/src/categories/components/CustomCategories/index.ts

@@ -0,0 +1,4 @@
+export { default as AddSubcategory } from './AddSubcategory'
+export { default as DeleteSubcategory } from './DeleteSubcategory'
+export { default as RenameSubcategory } from './RenameSubcategory'
+export { default as CustomCategoryModal } from './CustomCategoryModal'

package/src/categories/components/SubcategoryList.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import Collapse from '@mui/material/Collapse'
+import Divider from '@mui/material/Divider'
+import List from '@mui/material/List'
+
+import type { Category } from '../../common/types'
+import AddSubcategory from './CustomCategories/AddSubcategory'
+import SubcategoryRow from './SubcategoryRow'
+import { useCategoryUiStore } from '../context/hooks'
+
+interface SubcategoryListProps {
+  categories: Category[]
+  parentCategory: Category
+}
+
+const SubcategoryList: React.FC<SubcategoryListProps> = ({ categories, parentCategory }) => {
+  const { expandedGuid, searchValue } = useCategoryUiStore()
+  const isExpanded = parentCategory.guid === expandedGuid
+  const isFiltered = Boolean(searchValue)
+
+  return (
+    <Collapse
+      in={isExpanded || isFiltered}
+      sx={{ backgroundColor: 'background.default' }}
+      timeout="auto"
+      unmountOnExit={true}
+    >
+      <List
+        aria-labelledby={`category-${parentCategory.guid}`}
+        className="mx-cat-subcategory-list"
+        id={`subcategories-${parentCategory.guid}`}
+      >
+        {categories.map((category) => (
+          <React.Fragment key={category.guid}>
+            <SubcategoryRow parentCategory={parentCategory} subCategory={category} />
+            <Divider sx={{ ml: 58 }} />
+          </React.Fragment>
+        ))}
+        {!isFiltered && <AddSubcategory parentCategory={parentCategory} />}
+      </List>
+    </Collapse>
+  )
+}
+
+export default observer(SubcategoryList)

package/src/categories/components/SubcategoryRow.tsx

@@ -0,0 +1,123 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import Box from '@mui/material/Box'
+import Chip from '@mui/material/Chip'
+import IconButton from '@mui/material/IconButton'
+import ListItem from '@mui/material/ListItem'
+import ListItemButton from '@mui/material/ListItemButton'
+import ListItemText from '@mui/material/ListItemText'
+
+import CheckCircleIcon from '@mui/icons-material/CheckCircle'
+import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined'
+import EditOutlinedIcon from '@mui/icons-material/EditOutlined'
+
+import { buildDynamicCopy } from '../../common/utils'
+import type { Category } from '../../common/types'
+
+import RenameSubcategory from './CustomCategories/RenameSubcategory'
+import DeleteSubcategory from './CustomCategories/DeleteSubcategory'
+
+import { useEvent, useGlobalCopyStore } from '../../common'
+import { useCategoryUiStore } from '../context/hooks'
+import { ON_CLICK_EVENTS } from '../constants/OnClickEvents'
+
+interface SubcategoryRowProps {
+  parentCategory: Category
+  subCategory: Category
+}
+
+const SubcategoryRow: React.FC<SubcategoryRowProps> = ({ parentCategory, subCategory }) => {
+  const {
+    onSelect,
+    selectedGuid,
+    setSelectedGuid,
+    setShouldDisableDrawerScroll,
+    showSelected,
+    unselectable,
+    unselectableText,
+  } = useCategoryUiStore()
+  const { categories: copy } = useGlobalCopyStore()
+  const { onEvent } = useEvent()
+
+  const [showRename, setShowRename] = React.useState(false)
+  const [showDelete, setShowDelete] = React.useState(false)
+
+  const isCustom = Boolean(subCategory.revision)
+  const isSelected = subCategory.guid === selectedGuid
+  const isSelectable = !unselectable.some((item) => item === subCategory.guid)
+  const handleClick = () => {
+    if (isSelectable) {
+      // Internal state
+      setSelectedGuid(subCategory.guid)
+      // External notification
+      onSelect(subCategory.guid)
+      onEvent(ON_CLICK_EVENTS.ON_CATEGORY_SELECTED)
+    }
+  }
+
+  return (
+    <ListItem
+      className="mx-cat-subcategory-row"
+      disableGutters={true}
+      disablePadding={true}
+      sx={{ pl: 58 }}
+    >
+      <ListItemButton
+        aria-pressed={isSelected}
+        color="secondary"
+        onClick={handleClick}
+        sx={{ height: 44 }}
+      >
+        <ListItemText
+          primary={subCategory.name}
+          primaryTypographyProps={{ fontWeight: 'normal', variant: 'Body' }}
+        />
+        {showSelected && isSelected && <CheckCircleIcon fontSize="small" />}
+        {!isSelectable && <Chip label={unselectableText} />}
+      </ListItemButton>
+      {isCustom && (
+        <Box className={`mx-cat-subcategory-edit-container`} sx={{ marginRight: 24 }}>
+          <IconButton
+            aria-label={buildDynamicCopy(copy.edit_subcategory_aria, subCategory.name) as string}
+            onClick={() => {
+              setShowRename(true)
+              setShouldDisableDrawerScroll(true)
+              onEvent(ON_CLICK_EVENTS.ON_SUBCATEGORY_EDIT_CLICK)
+            }}
+          >
+            <EditOutlinedIcon color="secondary" />
+          </IconButton>
+          <IconButton
+            aria-label={buildDynamicCopy(copy.delete_subcategory_aria, subCategory.name) as string}
+            edge="end"
+            onClick={() => {
+              setShowDelete(true)
+              setShouldDisableDrawerScroll(true)
+              onEvent(ON_CLICK_EVENTS.ON_SUBCATEGORY_DELETE_CLICK)
+            }}
+          >
+            <DeleteOutlinedIcon color="secondary" />
+          </IconButton>
+        </Box>
+      )}
+      {showDelete && (
+        <DeleteSubcategory
+          parentCategory={parentCategory}
+          setShowDelete={setShowDelete}
+          showDelete={showDelete}
+          subCategory={subCategory}
+        />
+      )}
+      {showRename && (
+        <RenameSubcategory
+          setShowRename={setShowRename}
+          showRename={showRename}
+          subCategory={subCategory}
+        />
+      )}
+    </ListItem>
+  )
+}
+
+export default observer(SubcategoryRow)

package/src/categories/constants/Analytics.ts

@@ -0,0 +1,89 @@
+import { ON_CLICK_EVENTS } from './OnClickEvents'
+
+export const ANALYTICS_ACTIONS = {
+  ADD: 'Add',
+  CATEGORY_COLLAPSED: 'Category Collapsed',
+  CATEGORY_EXPANDED: 'Category Expanded',
+  CLOSE: 'Close',
+  EDIT: 'Edit',
+  SAVE: 'Save',
+  SELECT: 'Select',
+}
+
+export const ANALYTICS_CATEGORIES = {
+  CATEGORY: 'Category',
+  SUBCATEGORY: 'Subcategory',
+}
+
+export const ANALYTICS_LABELS = {
+  ADD_SUBCATEGORY: 'Add Subcategory',
+  DELETE_SUBCATEGORY: 'Delete Subcategory',
+  EDIT_SUBCATEGORY: 'Edit Subcategory',
+  PARENT_CATEGORY: 'Parent Category',
+  SUBCATEGORY: 'Subcategory',
+}
+
+export const ANALYTICS_EVENTS = {
+  // Categories
+  [ON_CLICK_EVENTS.ON_CATEGORY_EXPANDED]: {
+    action: ANALYTICS_ACTIONS.CATEGORY_EXPANDED,
+    category: ANALYTICS_CATEGORIES.CATEGORY,
+    label: ANALYTICS_LABELS.PARENT_CATEGORY,
+  },
+  [ON_CLICK_EVENTS.ON_CATEGORY_COLLAPSED]: {
+    action: ANALYTICS_ACTIONS.CATEGORY_COLLAPSED,
+    category: ANALYTICS_CATEGORIES.CATEGORY,
+    label: ANALYTICS_LABELS.PARENT_CATEGORY,
+  },
+  [ON_CLICK_EVENTS.ON_CATEGORY_SELECTED]: {
+    action: ANALYTICS_ACTIONS.SELECT,
+    category: ANALYTICS_CATEGORIES.CATEGORY,
+    label: ANALYTICS_LABELS.PARENT_CATEGORY,
+  },
+
+  // Add subcategory
+  [ON_CLICK_EVENTS.ON_SUBCATEGORY_ADD_CLICK]: {
+    action: ANALYTICS_ACTIONS.ADD,
+    category: ANALYTICS_CATEGORIES.SUBCATEGORY,
+    label: ANALYTICS_LABELS.ADD_SUBCATEGORY,
+  },
+  [ON_CLICK_EVENTS.ON_SUBCATEGORY_ADD_CANCEL_CLICK]: {
+    action: ANALYTICS_ACTIONS.CLOSE,
+    category: ANALYTICS_CATEGORIES.SUBCATEGORY,
+    label: ANALYTICS_LABELS.ADD_SUBCATEGORY,
+  },
+  [ON_CLICK_EVENTS.ON_SUBCATEGORY_ADDED]: {
+    action: ANALYTICS_ACTIONS.SAVE,
+    category: ANALYTICS_CATEGORIES.SUBCATEGORY,
+    label: ANALYTICS_LABELS.ADD_SUBCATEGORY,
+  },
+
+  // Edit subcategory
+  [ON_CLICK_EVENTS.ON_SUBCATEGORY_EDIT_CLICK]: {
+    action: ANALYTICS_ACTIONS.SELECT,
+    category: ANALYTICS_CATEGORIES.SUBCATEGORY,
+    label: ANALYTICS_LABELS.EDIT_SUBCATEGORY,
+  },
+  [ON_CLICK_EVENTS.ON_SUBCATEGORY_SAVED]: {
+    action: ANALYTICS_ACTIONS.SAVE,
+    category: ANALYTICS_CATEGORIES.SUBCATEGORY,
+    label: ANALYTICS_LABELS.EDIT_SUBCATEGORY,
+  },
+  [ON_CLICK_EVENTS.ON_SUBCATEGORY_EDIT_CANCEL_CLICK]: {
+    action: ANALYTICS_ACTIONS.CLOSE,
+    category: ANALYTICS_CATEGORIES.SUBCATEGORY,
+    label: ANALYTICS_LABELS.EDIT_SUBCATEGORY,
+  },
+
+  // Delete subcategory
+  [ON_CLICK_EVENTS.ON_SUBCATEGORY_DELETE_CLICK]: {
+    action: ANALYTICS_ACTIONS.SELECT,
+    category: ANALYTICS_CATEGORIES.SUBCATEGORY,
+    label: ANALYTICS_LABELS.DELETE_SUBCATEGORY,
+  },
+  [ON_CLICK_EVENTS.ON_SUBCATEGORY_DELETED]: {
+    action: ANALYTICS_ACTIONS.SAVE,
+    category: ANALYTICS_CATEGORIES.SUBCATEGORY,
+    label: ANALYTICS_LABELS.DELETE_SUBCATEGORY,
+  },
+}

package/src/categories/constants/OnClickEvents.ts

@@ -0,0 +1,13 @@
+export const ON_CLICK_EVENTS = {
+  ON_CATEGORY_EXPANDED: 'onCategoryExpanded',
+  ON_CATEGORY_COLLAPSED: 'onCategoryCollapsed',
+  ON_CATEGORY_SELECTED: 'onCategorySelected',
+  ON_SUBCATEGORY_ADD_CLICK: 'onSubcategoryAddClick',
+  ON_SUBCATEGORY_ADD_CANCEL_CLICK: 'onSubcategoryAddCancelClick',
+  ON_SUBCATEGORY_ADDED: 'onSubcategoryAdded',
+  ON_SUBCATEGORY_EDIT_CLICK: 'onSubcategoryEditClick',
+  ON_SUBCATEGORY_EDIT_CANCEL_CLICK: 'onSubcategoryEditCancelClick',
+  ON_SUBCATEGORY_DELETE_CLICK: 'onSubcategoryDeleteClick',
+  ON_SUBCATEGORY_DELETED: 'onSubcategoryDeleted',
+  ON_SUBCATEGORY_SAVED: 'onSubcategorySaved',
+}

package/src/categories/context/hooks.ts

@@ -0,0 +1,12 @@
+import React from 'react'
+import { GlobalDataContext, useCategoryStore } from '../../common'
+
+export const useCategoryUiStore = () => {
+  const context = React.useContext(GlobalDataContext)
+
+  if (!context) {
+    throw new Error('useCategoryUiStore() must be used within the GlobalDataContext')
+  }
+
+  return useCategoryStore().uiStore
+}

package/src/categories/index.ts

@@ -0,0 +1,5 @@
+export { default as CategorySelector } from './components/CategorySelector'
+export { default as CategorySelectorDrawer } from './components/CategorySelectorDrawer'
+export { default as CategoryRow } from './components/CategoryRow'
+export { CategoryStore } from './stores/CategoryStore'
+export { useCategoryUiStore } from './context/hooks'