chore: [v2] code cleanup (#432)

Author: stevenle

docs/layouts/base.tsx

@@ -1,6 +1,7 @@
+/* eslint-disable import/order */
+
 import {Head} from '@blinkk/root';
 import {ComponentChildren} from 'preact';
-
 import {GlobalFooter} from '@/templates/global-footer/global-footer.js';
 import {GlobalHeader} from '@/templates/global-header/global-header.js';
 import '@/styles/global.scss';

docs/root-cms.d.ts

@@ -350,4 +350,4 @@ export interface TemplatePoweredByFields {
   }[];
   /** Body copy */
   body?: RootCMSRichText;
-}
+}

packages/eslint-config-root/index.js

@@ -57,14 +57,26 @@ module.exports = {
               'parent',
               'sibling',
               'index',
+              'unknown',
             ],
             pathGroups: [
               {
                 pattern: '@/**',
                 group: 'internal',
               },
+              {
+                pattern: '**/*.{css,scss}',
+                group: 'unknown',
+              },
+              {
+                pattern: '*.{css,scss}',
+                group: 'unknown',
+                patternOptions: {matchBase: true},
+                position: 'after',
+              },
             ],
             pathGroupsExcludedImportTypes: ['builtin'],
+            warnOnUnassignedImports: true,
             'newlines-between': 'ignore',
             alphabetize: {
               order: 'asc',

packages/root-cms/ui/components/ActionLogs/ActionLogs.tsx

@@ -1,9 +1,10 @@
 import {Button, Loader, Table, Tooltip} from '@mantine/core';
 import {Timestamp} from 'firebase/firestore';
 import {useEffect, useState} from 'preact/hooks';
-import {Action, listActions} from '../../utils/actions.js';
+import {Action, listActions} from '@/db/actions.js';
+import {getSpreadsheetUrl} from '@/utils/gsheets.js';
+import {stringifyObj} from '@/utils/objects.js';
 import './ActionsLogs.css';
-import {getSpreadsheetUrl} from '../../utils/gsheets.js';
 
 export interface ActionLogsProps {
   className?: string;
@@ -145,29 +146,3 @@ function formatDate(timestamp: Timestamp) {
     timeStyle: 'medium',
   });
 }
-
-/** A pretty printer for JavaScript objects. */
-function stringifyObj(obj: any) {
-  function format(obj: any): string {
-    if (obj === null) {
-      return 'null';
-    }
-    if (typeof obj === 'undefined') {
-      return 'undefined';
-    }
-    if (typeof obj === 'string') {
-      return `"${obj.replaceAll('"', '\\"')}"`;
-    }
-    if (typeof obj !== 'object') {
-      return String(obj);
-    }
-    if (Array.isArray(obj)) {
-      return `[${obj.map(format).join(', ')}]`;
-    }
-    const entries: string[] = Object.entries(obj).map(([key, value]) => {
-      return `${key}: ${format(value)}`;
-    });
-    return `{${entries.join(', ')}}`;
-  }
-  return format(obj);
-}

packages/root-cms/ui/components/AssetUploader/AssetUploader.tsx

@@ -2,9 +2,9 @@ import {TextInput} from '@mantine/core';
 import {showNotification} from '@mantine/notifications';
 import {IconFileUpload} from '@tabler/icons-preact';
 import {useEffect, useRef, useState} from 'preact/hooks';
-import {Text} from '../../components/Text/Text.js';
-import {joinClassNames} from '../../utils/classes.js';
-import {UploadFileOptions, uploadFileToGCS} from '../../utils/gcs.js';
+import {Text} from '@/components/Text/Text.js';
+import {joinClassNames} from '@/utils/classes.js';
+import {UploadFileOptions, uploadFileToGCS} from '@/utils/gcs.js';
 import './AssetUploader.css';
 
 export const IMAGE_MIMETYPES = [
@@ -62,30 +62,29 @@ export function AssetUploader(props: AssetUploaderProps) {
     }
   }
 
-  const handleDragEnter = (e: DragEvent) => {
-    e.preventDefault();
-    setIsDragging(true);
-  };
+  useEffect(() => {
+    const dropzone = ref.current;
+    const handleDragEnter = (e: DragEvent) => {
+      e.preventDefault();
+      setIsDragging(true);
+    };
 
-  const handleDragLeave = (e: DragEvent) => {
-    e.preventDefault();
-    setIsDragging(false);
-  };
+    const handleDragLeave = (e: DragEvent) => {
+      e.preventDefault();
+      setIsDragging(false);
+    };
 
-  const handleDrop = (e: DragEvent) => {
-    e.preventDefault();
-    setIsDragging(false);
+    const handleDrop = (e: DragEvent) => {
+      e.preventDefault();
+      setIsDragging(false);
 
-    const files = e.dataTransfer?.files || [];
-    const file = files[0];
-    if (file) {
-      console.log('file dropped:', file);
-      uploadFile(file);
-    }
-  };
-
-  useEffect(() => {
-    const dropzone = ref.current;
+      const files = e.dataTransfer?.files || [];
+      const file = files[0];
+      if (file) {
+        console.log('file dropped:', file);
+        uploadFile(file);
+      }
+    };
     document.addEventListener('dragenter', handleDragEnter);
     document.addEventListener('dragover', handleDragEnter);
     document.addEventListener('dragleave', handleDragLeave);
@@ -160,7 +159,6 @@ AssetUploader.FilePreview = (props: {asset: any}) => {
 
 AssetUploader.ImagePreview = (props: {asset: any}) => {
   const asset = props.asset;
-  console.log(asset);
   return (
     <div className="AssetUploader__ImagePreview">
       <div className="AssetUploader__ImagePreview__image">

packages/root-cms/ui/components/CopyDocModal/CopyDocModal.tsx

@@ -3,11 +3,12 @@ import {ContextModalProps, useModals} from '@mantine/modals';
 import {showNotification} from '@mantine/notifications';
 import {useState} from 'preact/hooks';
 import {route} from 'preact-router';
-import {useModalTheme} from '../../hooks/useModalTheme.js';
-import {cmsCopyDoc} from '../../utils/doc.js';
-import {isSlugValid, normalizeSlug} from '../../utils/slug.js';
-import {SlugInput} from '../SlugInput/SlugInput.js';
-import {Text} from '../Text/Text.js';
+import {SlugInput} from '@/components/SlugInput/SlugInput.js';
+import {Text} from '@/components/Text/Text.js';
+import {dbCopyDoc} from '@/db/docs.js';
+import {useModalTheme} from '@/hooks/useModalTheme.js';
+import {isSlugValid, normalizeSlug} from '@/utils/slug.js';
+
 import './CopyDocModal.css';
 
 const MODAL_ID = 'CopyDocModal';
@@ -60,7 +61,7 @@ export function CopyDocModal(modalProps: ContextModalProps<CopyDocModalProps>) {
 
     const toDocId = `${toCollectionId}/${cleanSlug}`;
     try {
-      await cmsCopyDoc(fromDocId, toDocId, {overwrite: confirmOverwrite});
+      await dbCopyDoc(fromDocId, toDocId, {overwrite: confirmOverwrite});
       context.closeModal(id);
       showNotification({
         title: 'Copied!',

packages/root-cms/ui/components/DataSourceForm/DataSourceForm.tsx

@@ -8,7 +8,6 @@ import {
 import {showNotification} from '@mantine/notifications';
 import {useEffect, useRef, useState} from 'preact/hooks';
 import {route} from 'preact-router';
-import {useGapiClient} from '../../hooks/useGapiClient.js';
 import {
   DataSource,
   DataSourceType,
@@ -17,10 +16,11 @@ import {
   addDataSource,
   getDataSource,
   updateDataSource,
-} from '../../utils/data-source.js';
-import {parseSpreadsheetUrl} from '../../utils/gsheets.js';
-import {notifyErrors} from '../../utils/notifications.js';
-import {isSlugValid} from '../../utils/slug.js';
+} from '@/db/data-sources.js';
+import {useGapiClient} from '@/hooks/useGapiClient.js';
+import {parseSpreadsheetUrl} from '@/utils/gsheets.js';
+import {notifyErrors} from '@/utils/notifications.js';
+import {isSlugValid} from '@/utils/slug.js';
 import './DataSourceForm.css';
 
 const HTTP_URL_HELP = 'Enter the URL to make the HTTP request.';

packages/root-cms/ui/components/DataSourceStatusButton/DataSourceStatusButton.tsx

@@ -2,13 +2,13 @@ import {Button, Tooltip} from '@mantine/core';
 import {showNotification, updateNotification} from '@mantine/notifications';
 import {Timestamp} from 'firebase/firestore';
 import {useState} from 'preact/hooks';
-import {useGapiClient} from '../../hooks/useGapiClient.js';
+import {TimeSinceActionTooltip} from '@/components/TimeSinceActionTooltip/TimeSinceActionTooltip.js';
 import {
   DataSource,
   publishDataSource,
   syncDataSource,
-} from '../../utils/data-source.js';
-import {TimeSinceActionTooltip} from '../TimeSinceActionTooltip/TimeSinceActionTooltip.js';
+} from '@/db/data-sources.js';
+import {useGapiClient} from '@/hooks/useGapiClient.js';
 import './DataSourceStatusButton.css';
 
 export interface DataSourceStatusButtonProps {

packages/root-cms/ui/components/DocActionsMenu/DocActionsMenu.tsx

@@ -12,20 +12,20 @@ import {
   IconLockOpen,
   IconTrash,
 } from '@tabler/icons-preact';
-import {useModalTheme} from '../../hooks/useModalTheme.js';
+import {useCopyDocModal} from '@/components/CopyDocModal/CopyDocModal.js';
+import {useLockPublishingModal} from '@/components/LockPublishingModal/LockPublishingModal.js';
+import {Text} from '@/components/Text/Text.js';
+import {useVersionHistoryModal} from '@/components/VersionHistoryModal/VersionHistoryModal.js';
 import {
   CMSDoc,
-  cmsDeleteDoc,
-  cmsRevertDraft,
-  cmsUnpublishDoc,
-  cmsUnscheduleDoc,
+  dbDeleteDoc,
+  dbRevertDraft,
+  dbUnpublishDoc,
+  dbUnscheduleDoc,
   testIsScheduled,
   testPublishingLocked,
-} from '../../utils/doc.js';
-import {useCopyDocModal} from '../CopyDocModal/CopyDocModal.js';
-import {useLockPublishingModal} from '../LockPublishingModal/LockPublishingModal.js';
-import {Text} from '../Text/Text.js';
-import {useVersionHistoryModal} from '../VersionHistoryModal/VersionHistoryModal.js';
+} from '@/db/docs.js';
+import {useModalTheme} from '@/hooks/useModalTheme.js';
 
 export interface DocActionEvent {
   action: 'copy' | 'delete' | 'revert-draft' | 'unpublish' | 'unschedule';
@@ -74,7 +74,7 @@ export function DocActionsMenu(props: DocActionsMenuProps) {
           loading: true,
           autoClose: false,
         });
-        await cmsRevertDraft(docId);
+        await dbRevertDraft(docId);
         updateNotification({
           id: notificationId,
           title: 'Discarded draft edited',
@@ -116,7 +116,7 @@ export function DocActionsMenu(props: DocActionsMenuProps) {
           loading: true,
           autoClose: false,
         });
-        await cmsUnpublishDoc(docId);
+        await dbUnpublishDoc(docId);
         updateNotification({
           id: notificationId,
           title: 'Unpublished!',
@@ -157,7 +157,7 @@ export function DocActionsMenu(props: DocActionsMenuProps) {
           loading: true,
           autoClose: false,
         });
-        await cmsUnscheduleDoc(docId);
+        await dbUnscheduleDoc(docId);
         updateNotification({
           id: notificationId,
           title: 'Unscheduled!',
@@ -199,7 +199,7 @@ export function DocActionsMenu(props: DocActionsMenuProps) {
           loading: true,
           autoClose: false,
         });
-        await cmsDeleteDoc(docId);
+        await dbDeleteDoc(docId);
         updateNotification({
           id: notificationId,
           title: 'Deleted!',

packages/root-cms/ui/components/DocDiffViewer/DocDiffViewer.tsx

@@ -1,13 +1,13 @@
 import {Button, Loader} from '@mantine/core';
 import {Differ, Viewer as JsonDiffViewer} from 'json-diff-kit';
 import {useEffect, useState} from 'preact/hooks';
-import {CMSDoc, cmsReadDocVersion, unmarshalData} from '../../utils/doc.js';
-
-import 'json-diff-kit/dist/viewer.css';
+import {CMSDoc, unmarshalData} from '@/db/docs.js';
+import {dbGetDocVersion} from '@/db/versions.js';
+import {joinClassNames} from '@/utils/classes.js';
+import {getTimeAgo} from '@/utils/time.js';
 import 'json-diff-kit/dist/viewer-monokai.css';
+import 'json-diff-kit/dist/viewer.css';
 import './DocDiffViewer.css';
-import {getTimeAgo} from '../../utils/time.js';
-import {joinClassNames} from '../../utils/classes.js';
 
 export interface DocVersionId {
   /** Doc id, e.g. `Pages/foo`. */
@@ -44,8 +44,8 @@ export function DocDiffViewer(props: DocDiffViewerProps) {
   async function init() {
     setLoading(true);
     const [leftDoc, rightDoc] = await Promise.all([
-      cmsReadDocVersion(left.docId, left.versionId),
-      cmsReadDocVersion(right.docId, right.versionId),
+      dbGetDocVersion(left.docId, left.versionId),
+      dbGetDocVersion(right.docId, right.versionId),
     ]);
     setLeftDoc(leftDoc);
     setRightDoc(rightDoc);