Unify Remaining Stores (#390)

#390

* - unified apiStore, blockStore, commentStore;

* - add unify few more stores;

* - rebase with main;

* - unified more stores;
- get mexit-autstore from indexedDB for extension initialise;

* - fix store imports and store types;

* - fix combobox imports;
- add types to config store variables;
- fix type errors for QuickLinkType and CategoryType;

* - fix typo in createHighlightTextPlugin

* - add changeset;

* - fix highlighted state typo;
- import inviteModalData, ComboTriggerType, RefactorPath and Shortcut imports;
- add types to states;

* - change type of itemLoading in combobox store;

* - fix Shortcut import in ShortcutTable.tsx;

* - remove version.store.ts;
- unify useAppStore.ts;

* useLayoutStore merge conflict fixed

* Add storage options in createStore

* localStorage undefined in worker fixed

* Use localstorage in app store instead of indexedDB

* Store fixes

* - [cherry-pick]: remove unwanted files for stores;
- [cherry-pick]fix the stores imports;

* - fix build errors;

* Get local storage with window type check

---------

Co-authored-by: Dinesh Singh <[email protected]>

Author: manavagr1108

.changeset/kind-rice-cover.md

@@ -0,0 +1,5 @@
+---
+'mexit': patch
+---
+
+unify all stores in webapp and extension

README.md

@@ -2,7 +2,7 @@
 
 ## Adding a New Theme or Shortcut
 
-When adding a new theme or shortcut, ensure to bump the version in the `apps/webapp/src/Stores/useThemeStore.ts` and `apps/webapp/src/Stores/useHelpStore.ts` files respectively
+When adding a new theme or shortcut, ensure to bump the version in the `apps/webapp/src/Stores/useThemeStore.ts` and `/libs/core/src/Stores/help.store.ts` files respectively
 
 ## Run - Dev
 

apps/extension/src/Components/Action/index.tsx

@@ -2,10 +2,9 @@ import React from 'react'
 
 import { DisplayShortcut } from '@workduck-io/mex-components'
 
-import { ActionType, cleanString, MexitAction, QuickLinkType } from '@mexit/core'
+import { ActionType, cleanString, MexitAction, QuickLinkType, useLayoutStore } from '@mexit/core'
 import { PrimaryText } from '@mexit/shared'
 
-import { useLayoutStore } from '../../Stores/useLayoutStore'
 import { useSputlitStore } from '../../Stores/useSputlitStore'
 
 import {

apps/extension/src/Components/Content/index.tsx

@@ -2,14 +2,13 @@ import React, { useEffect, useState } from 'react'
 
 import { createPlateEditor, createPlateUI } from '@udecode/plate'
 
-import { ELEMENT_TAG, getDefaultContent, NodeEditorContent, QuickLinkType } from '@mexit/core'
+import { ELEMENT_TAG, getDefaultContent, NodeEditorContent, QuickLinkType, useContentStore } from '@mexit/core'
 
 import { CopyTag } from '../../Editor/components/Tags/CopyTag'
 import { generateEditorPluginsWithComponents } from '../../Editor/plugins/index'
 import { useEditorStore } from '../../Hooks/useEditorStore'
 import { useSnippets } from '../../Hooks/useSnippets'
 import { useSputlitContext } from '../../Hooks/useSputlitContext'
-import { useContentStore } from '../../Stores/useContentStore'
 import { useSputlitStore } from '../../Stores/useSputlitStore'
 import { getDeserializeSelectionToNodes } from '../../Utils/deserialize'
 import Results from '../Results'

apps/extension/src/Components/Dibba/index.tsx

@@ -12,8 +12,12 @@ import {
   getMIcon,
   NodeEditorContent,
   QuickLinkType,
-  SEPARATOR
-} from '@mexit/core'
+  SEPARATOR,
+  useAuthStore,
+  useContentStore,
+  useLinkStore,
+useMetadataStore,  useSnippetStore
+ } from '@mexit/core'
 import {
   ActionTitle,
   CenteredIcon,
@@ -30,14 +34,9 @@ import {
 } from '@mexit/shared'
 
 import { ElementTypeBasedShortcut } from '../../Editor/components/ComboBox'
-import { useAuthStore } from '../../Hooks/useAuth'
 import { getPathFromNodeIdHookless } from '../../Hooks/useLinks'
 import usePointerMovedSinceMount from '../../Hooks/usePointerMovedSinceMount'
 import { useSputlitContext, VisualState } from '../../Hooks/useSputlitContext'
-import { useContentStore } from '../../Stores/useContentStore'
-import { useLinkStore } from '../../Stores/useLinkStore'
-import { useMetadataStore } from '../../Stores/useMetadataStore'
-import { useSnippetStore } from '../../Stores/useSnippetStore'
 import { getDibbaText } from '../../Utils/getDibbaText'
 import { copySnippetToClipboard, copyToClipboard, getUpcomingData, simulatePaste } from '../../Utils/pasteUtils'
 import EditorPreviewRenderer from '../EditorPreviewRenderer'

apps/extension/src/Components/Editor/EditorPreview.tsx

@@ -7,7 +7,7 @@ import Tippy from '@tippyjs/react/headless'
 
 import { SecondaryButton } from '@workduck-io/mex-components'
 
-import { API_BASE_URLS, generateTempId, getNameFromPath, mog, NodeEditorContent } from '@mexit/core'
+import { API_BASE_URLS, generateTempId, getNameFromPath, mog, NodeEditorContent, useContentStore , useMetadataStore } from '@mexit/core'
 import {
   EditorPreviewControls,
   EditorPreviewEditorWrapper,
@@ -20,8 +20,6 @@ import {
 // import { useRouting, ROUTE_PATHS, NavigationType } from '../../../Hooks/useRouting'
 // import { useTags } from '../../Hooks/useTags'
 import { useLinks } from '../../Hooks/useLinks'
-import { useContentStore } from '../../Stores/useContentStore'
-import { useMetadataStore } from '../../Stores/useMetadataStore'
 import { getElementById } from '../../Utils/cs-utils'
 import EditorPreviewRenderer from '../EditorPreviewRenderer'
 

apps/extension/src/Components/Editor/SnippetPreview.tsx

@@ -5,6 +5,7 @@ import magicLine from '@iconify/icons-ri/magic-line'
 import quillPenLine from '@iconify/icons-ri/quill-pen-line'
 import { useTheme } from 'styled-components'
 
+import { useContentStore,useMetadataStore, useSnippetStore  } from '@mexit/core'
 import {
   DefaultMIcons,
   EditorPreviewControls,
@@ -19,9 +20,6 @@ import {
 } from '@mexit/shared'
 
 import { useSnippets } from '../../Hooks/useSnippets'
-import { useContentStore } from '../../Stores/useContentStore'
-import { useMetadataStore } from '../../Stores/useMetadataStore'
-import { useSnippetStore } from '../../Stores/useSnippetStore'
 import { getElementById } from '../../Utils/cs-utils'
 import EditorPreviewRenderer from '../EditorPreviewRenderer'
 

apps/extension/src/Components/Editor/Todo/Todo.tsx

@@ -1,10 +1,8 @@
 import React, { useEffect, useMemo, useState } from 'react'
 
-import { getNextStatus, PriorityDataType, PriorityType, TodoStatus, TodoType } from '@mexit/core'
+import { getNextStatus, PriorityDataType, PriorityType, TodoStatus, TodoType, useTodoStore } from '@mexit/core'
 import { CheckBoxWrapper, MexIcon, StyledTodoStatus, TodoContainer, TodoOptions, TodoText } from '@mexit/shared'
 
-import { useTodoStore } from '../../../Stores/useTodoStore'
-
 import PrioritySelect from './PrioritySelect'
 
 export interface TodoControls {

apps/extension/src/Components/Floating/NoteSelector.tsx

@@ -7,12 +7,11 @@ import { debounce } from 'lodash'
 import { Button } from '@workduck-io/mex-components'
 import { tinykeys } from '@workduck-io/tinykeys'
 
-import { fuzzySearch } from '@mexit/core'
+import { fuzzySearch, useDataStore } from '@mexit/core'
 import { DefaultMIcons, IconDisplay, Input, SidebarListFilter } from '@mexit/shared'
 
 import { getTitleFromPath } from '../../Hooks/useLinks'
 import { isReadonly, usePermissions } from '../../Hooks/usePermissions'
-import useDataStore from '../../Stores/useDataStore'
 
 import { Dialog } from './Dialog'
 import { NoteItem, NoteItemsWrapper, SelectionList } from './NoteSelector.style'

apps/extension/src/Components/Form/index.tsx

@@ -6,11 +6,10 @@ import { useTheme } from 'styled-components'
 import { MexIcon } from '@workduck-io/mex-components'
 import { tinykeys } from '@workduck-io/tinykeys'
 
-import { mog, NodeEditorContent } from '@mexit/core'
+import { mog, NodeEditorContent , userPreferenceStore as useUserPreferenceStore } from '@mexit/core'
 import { FlexBetween } from '@mexit/shared'
 
 import { useSaveChanges } from '../../Hooks/useSaveChanges'
-import { useUserPreferenceStore } from '../../Stores/userPreferenceStore'
 import { useSputlitStore } from '../../Stores/useSputlitStore'
 import { FormBuilder } from '../../Types/Form'
 import { formToBlocks } from '../../Utils/evalSmartCapture'

apps/extension/src/Components/InternalEvents.tsx

@@ -6,14 +6,13 @@ import * as Sentry from '@sentry/react'
 import mixpanel from 'mixpanel-browser'
 import Highlighter from 'web-highlighter'
 
-import { API_BASE_URLS, mog } from '@mexit/core'
+import { API_BASE_URLS, mog, useHighlightStore } from '@mexit/core'
 import { getScrollbarWidth, isInputField } from '@mexit/shared'
 
 import { useEditorStore } from '../Hooks/useEditorStore'
 import { useInitLoader } from '../Hooks/useInitLoader'
 import { useReminderActionHandler } from '../Hooks/useReminderActionHandler'
 import { useSputlitContext, VisualState } from '../Hooks/useSputlitContext'
-import { useHighlightStore } from '../Stores/useHighlightStore'
 import { useSputlitStore } from '../Stores/useSputlitStore'
 import messagePassing from '../Sync'
 import { getDibbaText } from '../Utils/getDibbaText'

apps/extension/src/Components/ReminderArmer.tsx

@@ -1,7 +1,8 @@
 import React, { useEffect } from 'react'
 
+import { useReminderStore } from '@mexit/core'
+
 import { useReminders } from '../Hooks/useReminders'
-import { useReminderStore } from '../Stores/useReminderStore'
 
 const ReminderArmer = () => {
   const reminders = useReminderStore((state) => state.reminders)

apps/extension/src/Components/Renderers/Screenshot/Screenshot.tsx

@@ -9,10 +9,9 @@ import { Icon } from '@iconify/react'
 
 import { Button, IconButton, PrimaryButton } from '@workduck-io/mex-components'
 
-import { mog } from '@mexit/core'
+import { mog, useAuthStore } from '@mexit/core'
 import { useDebounceEffect } from '@mexit/shared'
 
-import { useAuthStore } from '../../../Hooks/useAuth'
 import { useSaveChanges } from '../../../Hooks/useSaveChanges'
 import { useSputlitStore } from '../../../Stores/useSputlitStore'
 import { uploadImageToCDN } from '../../../Sync/invokeOnWorker'
@@ -326,12 +325,9 @@ const Screenshot = () => {
       if (base64) {
         const imageURL = await uploadImageToCDN(base64)
         const appendContent = [
-          { type: 'p', children: [{ text: 'Screenshot' }] },
           { children: [{ text: '' }], type: 'img', url: imageURL },
           { text: '\n' },
-          { text: '[' },
-          { type: 'a', url: window.location.href, children: [{ text: 'Ref' }] },
-          { text: ' ]' }
+          { type: 'a', url: window.location.href, children: [{ text: 'Ref' }] }
         ]
         appendAndSave({ nodeid, content: appendContent, saveAndExit: true, notification: true })
         resetSpotlitState()

apps/extension/src/Components/Search/index.tsx

@@ -16,6 +16,9 @@ import {
   isParent,
   ListItemType,
   MAX_RECENT_ITEMS,
+  useDataStore,
+  useDescriptionStore,
+  useRecentsStore,
   withoutContinuousDelimiter
 } from '@mexit/core'
 import { IconDisplay, Loading, WDLogo } from '@mexit/shared'
@@ -27,10 +30,7 @@ import { useSaveChanges } from '../../Hooks/useSaveChanges'
 import { useSearch } from '../../Hooks/useSearch'
 import { useSearchProps } from '../../Hooks/useSearchProps'
 import { useSputlitContext } from '../../Hooks/useSputlitContext'
-import useDataStore from '../../Stores/useDataStore'
-import { useDescriptionStore } from '../../Stores/useDescriptionStore'
 // import events from "events"
-import { useRecentsStore } from '../../Stores/useRecentsStore'
 import { type SearchType, useSputlitStore } from '../../Stores/useSputlitStore'
 import { getListItemFromNode } from '../../Utils/helper'
 

apps/extension/src/Components/Sidebar/AddTags.tsx

@@ -1,10 +1,9 @@
 import React, { MetaHTMLAttributes, useMemo, useState } from 'react'
 
-import { Link, Tag } from '@mexit/core'
+import { Link, Tag, useLinkStore } from '@mexit/core'
 import { AddTagMenu, LinkShortenAndTagsWrapper, TagsLabel } from '@mexit/shared'
 
 import { useLinkURLs } from '../../Hooks/useURLs'
-import { useLinkStore } from '../../Stores/useLinkStore'
 
 const getGoodMeta = (document: Document) => {
   return {

apps/extension/src/Components/Sidebar/ContextInfoBar.tsx

@@ -1,9 +1,8 @@
 import React, { useMemo } from 'react'
 
+import { useHighlightStore } from '@mexit/core'
 import { CenteredFlex, DefaultMIcons, getMIcon, List, SnippetCards } from '@mexit/shared'
 
-import { useHighlightStore } from '../../Stores/useHighlightStore'
-
 import { AddTags } from './AddTags'
 import { GenericCard } from './GenericCard'
 import { HighlightGroups } from './HighlightGroup'

apps/extension/src/Components/Sidebar/DraggableToggle.tsx

@@ -7,10 +7,10 @@ import styled, { css } from 'styled-components'
 
 import { TitleWithShortcut } from '@workduck-io/mex-components'
 
+import { useLayoutStore } from '@mexit/core'
 import { WDLogo } from '@mexit/shared'
 
 import { useSidebarTransition } from '../../Hooks/useSidebarTransition'
-import { useLayoutStore } from '../../Stores/useLayoutStore'
 import { getElementById } from '../../Utils/cs-utils'
 
 const DragIcon = styled(Icon)<{ $show: boolean }>`

apps/extension/src/Components/Sidebar/NodeCard.tsx

@@ -3,7 +3,16 @@ import { ErrorBoundary } from 'react-error-boundary'
 
 import styled, { useTheme } from 'styled-components'
 
-import { API_BASE_URLS, convertContentToRawText, DefaultMIcons, mog, WORKSPACE_HEADER } from '@mexit/core'
+import {
+  API_BASE_URLS,
+  convertContentToRawText,
+  DefaultMIcons,
+  mog,
+  useAuthStore,
+  useContentStore,
+useMetadataStore,  useRecentsStore,
+  WORKSPACE_HEADER
+ } from '@mexit/core'
 import {
   CopyButton,
   GenericFlex,
@@ -14,12 +23,8 @@ import {
   SnippetContentPreview
 } from '@mexit/shared'
 
-import { useAuthStore } from '../../Hooks/useAuth'
 import { getTitleFromPath } from '../../Hooks/useLinks'
 import { useNodes } from '../../Hooks/useNodes'
-import { useContentStore } from '../../Stores/useContentStore'
-import { useMetadataStore } from '../../Stores/useMetadataStore'
-import { useRecentsStore } from '../../Stores/useRecentsStore'
 import SnippetPreview from '../Editor/SnippetPreview'
 
 export const NodeCardHeader = styled.div<{ $noHover?: boolean }>`

apps/extension/src/Components/Sidebar/NotesInfoBar.tsx

@@ -6,7 +6,7 @@ import { useTheme } from 'styled-components'
 
 import { Indexes } from '@workduck-io/mex-search'
 
-import { BASE_TASKS_PATH, fuzzySearch, ILink, isParent, mog } from '@mexit/core'
+import { BASE_TASKS_PATH, fuzzySearch, ILink, isParent, mog, useDataStore, useRecentsStore } from '@mexit/core'
 import {
   CenteredColumn,
   DefaultMIcons,
@@ -20,8 +20,6 @@ import {
 } from '@mexit/shared'
 
 import { useLinks } from '../../Hooks/useLinks'
-import useDataStore from '../../Stores/useDataStore'
-import { useRecentsStore } from '../../Stores/useRecentsStore'
 import { wSearchIndexWithRanking } from '../../Sync/invokeOnWorker'
 
 import { NodeCard } from './NodeCard'

apps/extension/src/Components/Sidebar/ShortenerComponent.tsx

@@ -5,7 +5,7 @@ import linkM from '@iconify/icons-ri/link-m'
 import { Icon } from '@iconify/react'
 import styled from 'styled-components'
 
-import { apiURLs, getFavicon } from '@mexit/core'
+import { apiURLs, getFavicon, useAuthStore, useLinkStore } from '@mexit/core'
 import {
   CopyButton,
   DefaultMIcons,
@@ -18,9 +18,7 @@ import {
   ShortenerTitle
 } from '@mexit/shared'
 
-import { useAuthStore } from '../../Hooks/useAuth'
 import { useLinkURLs } from '../../Hooks/useURLs'
-import { useLinkStore } from '../../Stores/useLinkStore'
 
 const ShortenerWrapper = styled(ShortenButton)`
   padding: ${({ theme }) => theme.spacing.small};

apps/extension/src/Components/Sidebar/SnippetCard.tsx

@@ -8,7 +8,7 @@ import { useTheme } from 'styled-components'
 
 import { tinykeys } from '@workduck-io/tinykeys'
 
-import { API_BASE_URLS, Snippet } from '@mexit/core'
+import { API_BASE_URLS, Snippet, useDescriptionStore } from '@mexit/core'
 import {
   GenericFlex,
   MexIcon,
@@ -19,7 +19,6 @@ import {
   SnippetContentPreview
 } from '@mexit/shared'
 
-import { useDescriptionStore } from '../../Stores/useDescriptionStore'
 import SnippetPreview from '../Editor/SnippetPreview'
 
 import { NodeCardHeader } from './NodeCard'

apps/extension/src/Components/Sidebar/SnippetsInfoBar.tsx

@@ -15,7 +15,8 @@ import {
   DefaultMIcons,
   ELEMENT_TAG,
   parseSnippet,
-  Snippet
+  Snippet,
+  useSnippetStore
 } from '@mexit/core'
 import {
   CenteredColumn,
@@ -31,7 +32,6 @@ import {
 import { CopyTag } from '../../Editor/components/Tags/CopyTag'
 import { generateEditorPluginsWithComponents } from '../../Editor/plugins/index'
 import { useSnippets } from '../../Hooks/useSnippets'
-import { useSnippetStore } from '../../Stores/useSnippetStore'
 import { wSearchIndexWithRanking } from '../../Sync/invokeOnWorker'
 import { copySnippetToClipboard, simulateOnChange, supportedDomains } from '../../Utils/pasteUtils'
 

apps/extension/src/Components/Sidebar/index.tsx

@@ -2,12 +2,11 @@ import React, { useEffect, useMemo } from 'react'
 
 import { tinykeys } from '@workduck-io/tinykeys'
 
+import { useAuthStore, useLayoutStore } from '@mexit/core'
 import { ExtInfobarMode, Group, InfoBarWrapper, LoginInfoBar, Tabs, WDLogo } from '@mexit/shared'
 
-import { useAuthStore } from '../../Hooks/useAuth'
 import { useRightSidebarShortcuts } from '../../Hooks/useRightSidebarShortcuts'
 import { useSidebarTransition } from '../../Hooks/useSidebarTransition'
-import { useLayoutStore } from '../../Stores/useLayoutStore'
 import { useRightSidebarItems } from '../../Stores/useRightSidebarItems'
 import { getElementById } from '../../Utils/cs-utils'
 import { RHSLogin } from '../Login'

apps/extension/src/Components/Sputlit/index.tsx

@@ -1,11 +1,9 @@
 import React, { useEffect, useRef } from 'react'
 
-import { ActionType, QuickLinkType } from '@mexit/core'
+import { ActionType, QuickLinkType, useAuthStore, useHighlightStore } from '@mexit/core'
 
-import { useAuthStore } from '../../Hooks/useAuth'
 import { useHighlighter } from '../../Hooks/useHighlighter'
 import { useSputlitContext, VisualState } from '../../Hooks/useSputlitContext'
-import { useHighlightStore } from '../../Stores/useHighlightStore'
 import { useSputlitStore } from '../../Stores/useSputlitStore'
 import Content from '../Content'
 import { SputlitLogin } from '../Login'