@morphemecms/cms 0.5.0 → 0.7.0

package/src/tagUses.test.mjs

@@ -0,0 +1,141 @@
+// Tests for src/tagUses.mjs. Run: node --test packages/editor/src/*.test.mjs
+import assert from 'node:assert/strict';
+import { test } from 'node:test';
+import { blockHtml } from '../lib/blocks.mjs';
+import { promotionTags, recordUse, tagUses, taggedWith } from './tagUses.mjs';
+
+const folders = {
+  blog: 'src/content/blog',
+  pages: 'src/content/pages',
+  testimonials: 'src/data/testimonials',
+  popups: 'src/data/popups',
+  fileRecords: 'src/data/files',
+};
+
+const andromeda = {
+  path: 'src/data/files/k3j9x2ab.json',
+  text: '{"src":"/images/uploads/2026/10/andromeda.webp","categories":["design"],"removed":["seo"]}',
+};
+
+/** A Markdown file with front matter categories. @param {string[]} categories */
+const md = (categories) => `---\ntitle: "T"\ncategories: ${JSON.stringify(categories)}\n---\nBody\n`;
+
+/** The paths of the files using a tag. @param {{ path: string; text: string }[]} files @param {string} slug */
+const pathsOf = (files, slug) => [...(tagUses(files, folders).get(slug)?.keys() ?? [])];
+
+test('a post counts for the tags in its front matter', () => {
+  const files = [{ path: 'src/content/blog/a.md', text: md(['seo']) }];
+  assert.deepEqual(pathsOf(files, 'seo'), ['src/content/blog/a.md']);
+});
+
+test('a page counts for the tags in its front matter', () => {
+  const files = [{ path: 'src/content/pages/about.md', text: md(['design']) }];
+  assert.deepEqual(pathsOf(files, 'design'), ['src/content/pages/about.md']);
+});
+
+test('a page with a posts block counts for the tags the block picks', () => {
+  const page = { path: 'src/content/pages/home.md', text: `Intro\n${blockHtml('posts', { categories: ['apps'] })}\n` };
+  assert.deepEqual(pathsOf([page], 'apps'), ['src/content/pages/home.md']);
+});
+
+test('a page with a testimonials block counts for the tag in its link', () => {
+  const page = { path: 'src/content/pages/home.md', text: `${blockHtml('testimonials', { link: 'seo' })}\n` };
+  assert.deepEqual(pathsOf([page], 'seo'), ['src/content/pages/home.md']);
+});
+
+test('a page that has a tag in its front matter and in a block is counted once', () => {
+  const page = {
+    path: 'src/content/pages/home.md',
+    text: `---\ncategories: ["seo"]\n---\n${blockHtml('posts', { categories: ['seo'] })}\n`,
+  };
+  assert.equal(tagUses([page], folders).get('seo')?.size, 1);
+});
+
+test('a testimonial counts for the tags in its categories', () => {
+  const file = { path: 'src/data/testimonials/x.json', text: '{"categories":["editing"]}' };
+  assert.deepEqual(pathsOf([file], 'editing'), ['src/data/testimonials/x.json']);
+});
+
+test('a promotion counts for the tags when it is shown on tagged posts', () => {
+  const tagged = { path: 'src/data/popups/p.json', text: '{"where":"tags","tags":["seo"]}' };
+  assert.deepEqual(pathsOf([tagged], 'seo'), ['src/data/popups/p.json']);
+});
+
+test('a promotion shown on all posts does not count for a tag', () => {
+  const all = { path: 'src/data/popups/p.json', text: '{"where":"all","tags":["seo"]}' };
+  assert.deepEqual(pathsOf([all], 'seo'), []);
+});
+
+test('a tag file is not a use', () => {
+  const file = { path: 'src/data/categories/seo.json', text: '{"categories":["seo"]}' };
+  assert.equal(tagUses([file], folders).size, 0);
+});
+
+test('a JSON file in the blog folder is ignored', () => {
+  const file = { path: 'src/content/blog/notes.json', text: '{"categories":["seo"]}' };
+  assert.equal(tagUses([file], folders).size, 0);
+});
+
+test('a testimonial with broken JSON is skipped without an error', () => {
+  const file = { path: 'src/data/testimonials/bad.json', text: '{' };
+  assert.equal(tagUses([file], folders).size, 0);
+});
+
+test('promotionTags gives the tags of a promotion shown on tagged posts', () => {
+  assert.deepEqual(promotionTags({ where: 'tags', tags: ['a', 2] }), ['a', '2']);
+});
+
+test('promotionTags gives no tags for a promotion shown elsewhere', () => {
+  assert.deepEqual(promotionTags({ where: 'pages', tags: ['a'] }), []);
+});
+
+test('promotionTags gives no tags without a tag list', () => {
+  assert.deepEqual(promotionTags({ where: 'tags' }), []);
+});
+
+test('taggedWith lists the pages and testimonials with a tag, not blocks', () => {
+  const about = { path: 'src/content/pages/about.md', text: md(['design']) };
+  const post = { path: 'src/content/blog/a.md', text: blockHtml('posts', { categories: ['design'] }) };
+  const testimonial = { path: 'src/data/testimonials/x.json', text: '{"categories":["design"]}' };
+  assert.deepEqual(taggedWith([about, post, testimonial], 'design', folders), {
+    posts: [],
+    pages: [about],
+    testimonials: [testimonial],
+    records: [],
+  });
+});
+
+test('a file record counts for the tags in its categories, not its removed tags', () => {
+  assert.deepEqual(pathsOf([andromeda], 'design'), ['src/data/files/k3j9x2ab.json']);
+  assert.deepEqual(pathsOf([andromeda], 'seo'), []);
+});
+
+test('a file record is not counted when the folders have no file records folder', () => {
+  const { fileRecords: _omitted, ...withoutRecords } = folders;
+  assert.equal(tagUses([andromeda], withoutRecords).size, 0);
+});
+
+test('a file record in a subfolder of the records folder is not counted', () => {
+  const nested = { path: 'src/data/files/sub/x.json', text: andromeda.text };
+  assert.equal(tagUses([nested], folders).size, 0);
+});
+
+test('taggedWith lists the file records with a tag in their categories', () => {
+  assert.deepEqual(taggedWith([andromeda], 'design', folders).records, [andromeda]);
+  assert.deepEqual(taggedWith([andromeda], 'seo', folders).records, []);
+});
+
+test('recordUse gives the Filer path and the file name of a file record', () => {
+  assert.deepEqual(recordUse(andromeda, 'src/data/files'), {
+    path: 'filer/images/uploads/2026/10/andromeda.webp',
+    name: 'andromeda.webp',
+  });
+});
+
+test('recordUse gives null for a file that is not a file record', () => {
+  assert.equal(recordUse({ path: 'src/content/pages/about.md', text: '' }, 'src/data/files'), null);
+});
+
+test('recordUse gives null for a file record with broken JSON', () => {
+  assert.equal(recordUse({ path: 'src/data/files/x.json', text: '{' }, 'src/data/files'), null);
+});

package/src/themeUi.ts

@@ -14,11 +14,13 @@ export {
 export { default as SiteCheckbox } from '@theme/ui/Checkbox';
 export { default as SiteChip, chipKinds } from '@theme/ui/Chip';
 export { default as SiteChipSet, chipSetLayouts } from '@theme/ui/ChipSet';
+export { bottomSheet as siteBottomSheet } from '@theme/ui/bottomSheetControl';
 export { default as SiteDialog, dialogModalClass as siteDialogModalClass } from '@theme/ui/Dialog';
 export {
   default as SiteBottomSheet,
   BottomSheetHeader as SiteBottomSheetHeader,
   bottomSheetCoverClass,
+  bottomSheetClass as siteBottomSheetClass,
   bottomSheetContainerClass as siteBottomSheetContainerClass,
   bottomSheetFitClass as siteBottomSheetFitClass,
   bottomSheetFullClass as siteBottomSheetFullClass,
@@ -47,9 +49,13 @@ export { placeMenu as sitePlaceMenu } from '@theme/ui/dropdownMenu.script';
 export { default as SiteExposedDropdownMenu } from '@theme/ui/ExposedDropdownMenu';
 export {
   NavigationDrawer as SiteNavigationDrawer,
+  NavigationDrawerBack as SiteNavigationDrawerBack,
+  focusNavigationDrawerItem as siteFocusNavigationDrawerItem,
   navigationDrawerDialogClass as siteNavigationDrawerDialogClass,
+  navigationDrawerKeys as siteNavigationDrawerKeys,
   NavigationDrawerItem as SiteNavigationDrawerItem,
   NavigationDrawerRow as SiteNavigationDrawerRow,
+  NavigationDrawerSection as SiteNavigationDrawerSection,
   NavigationDrawerSubitem as SiteNavigationDrawerSubitem,
   NavigationDrawerToggle as SiteNavigationDrawerToggle,
 } from '@theme/ui/NavigationDrawer';
@@ -61,12 +67,16 @@ export { default as SiteButtonGroup, buttonGroupKinds } from '@theme/ui/ButtonGr
 export { default as SiteSegmentedButton } from '@theme/ui/SegmentedButton';
 export { default as SiteSplitButton, splitButtonKinds } from '@theme/ui/SplitButton';
 export { default as SiteFabMenu, fabMenuKinds } from '@theme/ui/FabMenu';
+export { setUpFabMenu } from '@theme/ui/fabMenu.script';
 /** The theme's selection parts, dividers and side sheets, for "Dele" › "UI-komponenter" (SelectionParts.tsx). */
 export { default as SiteSwitch } from '@theme/ui/Switch';
+export { default as SiteSettingRow } from '@theme/ui/SettingRow';
 export { default as SiteRadioButton, RadioGroup as SiteRadioGroup } from '@theme/ui/RadioButton';
 export { default as SiteSlider } from '@theme/ui/Slider';
 export { default as SiteDivider } from '@theme/ui/Divider';
 export { default as SiteSideSheet } from '@theme/ui/SideSheet';
+export { sideSheetClass as siteSideSheetDialogClass } from '@theme/ui/SideSheet';
+export { sideSheet as siteSideSheet } from '@theme/ui/sideSheetControl';
 /** The theme's communication parts, for "Dele" › "UI-komponenter" (CommunicationParts.tsx). */
 export { default as SiteBadge } from '@theme/ui/Badge';
 export { default as SiteLoadingIndicator } from '@theme/ui/LoadingIndicator';

package/src/topBarSlot.tsx

@@ -0,0 +1,37 @@
+// Where the editor's top bar stands: one sticky place at the top of the content column, beside the full-height navigation
+// rail or drawer (`aside`; App.tsx wraps the layout in TopBarLayout), which Screen.tsx draws its bar into. Exposes
+// TopBarLayout and useTopBarSlot. It keeps `--top-bar-height` (the bar's height) on the layout, for the sections pane.
+import { createContext, useContext, useEffect, useState, type ReactNode } from 'react';
+
+const Slot = createContext<HTMLElement | null>(null);
+
+/** The element a Screen draws its top bar into, or null outside TopBarLayout (the bar is then drawn in the screen). */
+export const useTopBarSlot = () => useContext(Slot);
+
+/** The layout round the editor: `above` (what scrolls away over everything), then a row of `aside` (the rail or the drawer,
+ * full height) and the column of the bar's place and `children`, which are not drawn before the place is there, so a
+ * screen's bar does not first stand in the screen and then move. */
+export function TopBarLayout({ above, aside, children }: { above?: ReactNode; aside?: ReactNode; children: ReactNode }) {
+  const [slot, setSlot] = useState<HTMLDivElement | null>(null);
+  const [layout, setLayout] = useState<HTMLDivElement | null>(null);
+  useEffect(() => {
+    if (!slot || !layout) return;
+    const measure = () => layout.style.setProperty('--top-bar-height', `${slot.offsetHeight}px`);
+    measure();
+    const watch = new ResizeObserver(measure);
+    watch.observe(slot);
+    return () => watch.disconnect();
+  }, [slot, layout]);
+  return (
+    <div ref={setLayout} className="[--top-bar-height:4rem]">
+      {above}
+      <div className="flex">
+        {aside}
+        <div className="min-w-0 flex-1">
+          <div ref={setSlot} className="sticky top-0 z-20" />
+          <Slot.Provider value={slot}>{slot && children}</Slot.Provider>
+        </div>
+      </div>
+    </div>
+  );
+}