chore: remove deprecated APIs

.changeset/remove-deprecated-apis.md

@@ -0,0 +1,8 @@
+---
+'@astryxdesign/core': minor
+'@astryxdesign/cli': minor
+---
+
+[breaking] Remove long-deprecated compatibility APIs from core and CLI. Run `astryx upgrade` first to migrate the supported replacements for authoring imports, Dialog logical positions, Switch label spacing, and Table root props.
+
+@cixzhang

apps/sandbox/src/app/(raw)/pages/shell-lab/page.tsx

@@ -34,7 +34,7 @@ import {Badge} from '@astryxdesign/core/Badge';
 import {Button} from '@astryxdesign/core/Button';
 import {NavIcon} from '@astryxdesign/core/NavIcon';
 import {Banner} from '@astryxdesign/core/Banner';
-import {NavMenuItem} from '@astryxdesign/core/NavMenu';
+import {NavHeadingMenuItem} from '@astryxdesign/core/NavMenu';
 
 // =============================================================================
 // Configuration types
@@ -579,9 +579,9 @@ function SampleSideNav({
 
   const headingMenu = (
     <>
-      <NavMenuItem label="Sibling Product 1" onClick={() => {}} />
-      <NavMenuItem label="Sibling Product 2" onClick={() => {}} />
-      <NavMenuItem label="Sibling Product 3" onClick={() => {}} />
+      <NavHeadingMenuItem label="Sibling Product 1" onClick={() => {}} />
+      <NavHeadingMenuItem label="Sibling Product 2" onClick={() => {}} />
+      <NavHeadingMenuItem label="Sibling Product 3" onClick={() => {}} />
     </>
   );
 
@@ -630,9 +630,7 @@ function SampleSideNav({
         resizable={config.isResizable}
         header={heading}
         topContent={
-          config.showTopContent ? (
-            <SideNavItem label="Create New" />
-          ) : undefined
+          config.showTopContent ? <SideNavItem label="Create New" /> : undefined
         }
         footer={
           config.showFooter ? (
@@ -844,9 +842,9 @@ function SampleTopNav({
 
   const topNavHeadingMenu = (
     <>
-      <NavMenuItem label="Sibling Product 1" onClick={() => {}} />
-      <NavMenuItem label="Sibling Product 2" onClick={() => {}} />
-      <NavMenuItem label="Sibling Product 3" onClick={() => {}} />
+      <NavHeadingMenuItem label="Sibling Product 1" onClick={() => {}} />
+      <NavHeadingMenuItem label="Sibling Product 2" onClick={() => {}} />
+      <NavHeadingMenuItem label="Sibling Product 3" onClick={() => {}} />
     </>
   );
 
@@ -1043,16 +1041,8 @@ function ShellLabContent() {
                     href="#"
                     icon={DashboardIcon}
                   />
-                  <SideNavItem
-                    label="Projects"
-                    href="#"
-                    icon={ProjectsIcon}
-                  />
-                  <SideNavItem
-                    label="Messages"
-                    href="#"
-                    icon={MessagesIcon}
-                  />
+                  <SideNavItem label="Projects" href="#" icon={ProjectsIcon} />
+                  <SideNavItem label="Messages" href="#" icon={MessagesIcon} />
                 </SideNavSection>
               </MobileNav>
             ),

apps/sandbox/src/app/(sandbox)/pages/doc-preview/DocPreview.tsx

@@ -8,7 +8,7 @@ import {VStack} from '@astryxdesign/core/Layout';
 import {Text} from '@astryxdesign/core/Text';
 import {Divider} from '@astryxdesign/core/Divider';
 import type {DefinedTheme} from '@astryxdesign/core/theme';
-import type {ReferenceDoc, ReferenceSection} from '@astryxdesign/core';
+import type {ReferenceDoc, ReferenceSection} from '@astryxdesign/cli/authoring';
 import {SectionRenderer} from './SectionRenderer';
 import {
   ColorTokenTable,
@@ -137,10 +137,7 @@ export function DocPreview({
             {doc.title}
           </Text>
           {version && (
-            <Text
-              type="supporting"
-              color="secondary"
-              xstyle={styles.version}>
+            <Text type="supporting" color="secondary" xstyle={styles.version}>
               v{version}
             </Text>
           )}

apps/sandbox/src/app/(sandbox)/pages/doc-preview/SectionRenderer.tsx

@@ -6,7 +6,10 @@ import {useMemo} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {VStack} from '@astryxdesign/core/Layout';
 import {Heading} from '@astryxdesign/core/Text';
-import type {ReferenceSection, ReferenceContentBlock} from '@astryxdesign/core';
+import type {
+  ReferenceSection,
+  ReferenceContentBlock,
+} from '@astryxdesign/cli/authoring';
 import {ContentBlockRenderer} from './content-blocks';
 
 const styles = stylex.create({

apps/sandbox/src/app/(sandbox)/pages/doc-preview/content-blocks/ContentBlockRenderer.tsx

@@ -2,7 +2,7 @@
 
 'use client';
 
-import type {ReferenceContentBlock} from '@astryxdesign/core';
+import type {ReferenceContentBlock} from '@astryxdesign/cli/authoring';
 import {ProseBlock} from './ProseBlock';
 import {CodeBlock} from './CodeBlock';
 import {TableBlock} from './TableBlock';

apps/sandbox/src/app/(sandbox)/pages/doc-preview/page.tsx

@@ -1,61 +1,61 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-"use client";
+'use client';
 
-import { useState, useEffect } from "react";
-import * as stylex from "@stylexjs/stylex";
-import { HStack } from "@astryxdesign/core/Layout";
-import { Text } from "@astryxdesign/core/Text";
+import {useState, useEffect} from 'react';
+import * as stylex from '@stylexjs/stylex';
+import {HStack} from '@astryxdesign/core/Layout';
+import {Text} from '@astryxdesign/core/Text';
 import {
   SegmentedControl,
   SegmentedControlItem,
-} from "@astryxdesign/core/SegmentedControl";
-import { Spinner } from "@astryxdesign/core/Spinner";
-import type { ReferenceDoc } from "@astryxdesign/core";
-import { DocPreview } from "./DocPreview";
-import { ThemeContext } from "@astryxdesign/core/theme";
-import { useContext } from "react";
+} from '@astryxdesign/core/SegmentedControl';
+import {Spinner} from '@astryxdesign/core/Spinner';
+import type {ReferenceDoc} from '@astryxdesign/cli/authoring';
+import {DocPreview} from './DocPreview';
+import {ThemeContext} from '@astryxdesign/core/theme';
+import {useContext} from 'react';
 
 const styles = stylex.create({
   page: {
-    minHeight: "100vh",
+    minHeight: '100vh',
   },
   topBar: {
-    position: "sticky",
+    position: 'sticky',
     top: 0,
     zIndex: 10,
-    backgroundColor: "var(--color-background-body)",
-    borderBottom: "1px solid var(--color-border)",
-    padding: "12px 32px",
+    backgroundColor: 'var(--color-background-body)',
+    borderBottom: '1px solid var(--color-border)',
+    padding: '12px 32px',
   },
   loading: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
     padding: 64,
   },
 });
 
 /** Foundational doc topics — the section docs that have tokenCategory */
 const TOPICS = [
-  { value: "color", label: "Color" },
-  { value: "spacing", label: "Spacing" },
-  { value: "typography", label: "Typography" },
-  { value: "elevation", label: "Elevation" },
-  { value: "shape", label: "Shape" },
-  { value: "motion", label: "Motion" },
+  {value: 'color', label: 'Color'},
+  {value: 'spacing', label: 'Spacing'},
+  {value: 'typography', label: 'Typography'},
+  {value: 'elevation', label: 'Elevation'},
+  {value: 'shape', label: 'Shape'},
+  {value: 'motion', label: 'Motion'},
 ] as const;
 
 export default function DocPreviewPage() {
-  const [topic, setTopic] = useState<string>("color");
+  const [topic, setTopic] = useState<string>('color');
   const [docs, setDocs] = useState<Record<string, ReferenceDoc>>({});
   const [version, setVersion] = useState('');
   const [loading, setLoading] = useState(true);
 
   // Load pre-generated doc data
   useEffect(() => {
-    import("../../../../generated/foundationDocs.json")
-      .then((mod) => {
+    import('../../../../generated/foundationDocs.json')
+      .then(mod => {
         const data = mod.default as Record<string, unknown>;
         setVersion((data.__version as string) ?? '');
         const {__version: _, ...topics} = data;
@@ -79,9 +79,8 @@ export default function DocPreviewPage() {
             value={topic}
             onChange={setTopic}
             label="Doc topic"
-            size="sm"
-          >
-            {TOPICS.map((t) => (
+            size="sm">
+            {TOPICS.map(t => (
               <SegmentedControlItem
                 key={t.value}
                 value={t.value}
@@ -96,7 +95,9 @@ export default function DocPreviewPage() {
           <Spinner size="md" />
         </div>
       ) : doc ? (
-        ctx?.theme ? <DocPreview doc={doc} version={version} theme={ctx.theme} /> : null
+        ctx?.theme ? (
+          <DocPreview doc={doc} version={version} theme={ctx.theme} />
+        ) : null
       ) : (
         <div {...stylex.props(styles.loading)}>
           <Text color="secondary">No doc found for &quot;{topic}&quot;</Text>

apps/storybook/stories/Dialog.stories.tsx

@@ -468,7 +468,7 @@ function PositionedModalExample() {
       <Dialog
         isOpen={isOpen}
         onOpenChange={open => setIsOpen(open)}
-        position={{top: 100, right: 20}}
+        position={{top: 100, end: 20}}
         width={350}>
         <Layout
           header={
@@ -480,7 +480,7 @@ function PositionedModalExample() {
           content={
             <LayoutContent>
               <Text type="body">
-                This modal is positioned at top: 100px, right: 20px instead of
+                This modal is positioned at top: 100px, end: 20px instead of
                 being centered.
               </Text>
             </LayoutContent>

packages/cli/api/template/list/list.mjs

@@ -27,8 +27,6 @@ export function templateList(templates, options = {}) {
     data: filtered.map(t => ({
       id: t.dirName,
       name: t.name,
-      // `displayName` retained for back-compat with existing consumers.
-      displayName: t.name,
       description: t.description,
       type: t.type,
       package: pkgOf(t),

packages/cli/api/template/skeleton/skeleton.mjs

@@ -42,7 +42,6 @@ const SPATIAL_PROPS = [
   'rowGap',
   'columnGap',
   'columns',
-  'minChildWidth',
   'hasDivider',
   'defaultHasDividers',
   'variant',

packages/cli/api/template/template.type.mjs

@@ -26,7 +26,6 @@
  * @typedef {object} TemplateListEntry
  * @property {string} id - Stable template id (relative path under the templates root, minus the .doc.* suffix).
  * @property {string} name
- * @property {string} displayName - (deprecated) Alias of `name`, retained for back-compat.
  * @property {string} description
  * @property {'page' | 'block'} type
  * @property {string} package - Owning package; core (built-in) templates report '@astryxdesign/core'.

packages/cli/assets/codemods/transforms/next/__tests__/next-codemods.test.mjs

@@ -0,0 +1,64 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import {describe, expect, it} from 'vitest';
+import jscodeshift from 'jscodeshift';
+
+const j = jscodeshift.withParser('tsx');
+const api = {jscodeshift: j, stats: () => {}, report: () => {}};
+async function apply(name, source) {
+  const {default: transform} = await import(`../${name}.mjs`);
+  return transform({source, path: 'test.tsx'}, api) ?? source;
+}
+
+describe('next codemods', () => {
+  it('renames TopNavHeading href to headingHref without touching TopNavItem', async () => {
+    const input = `import {TopNavHeading, TopNavItem} from '@astryxdesign/core/TopNav';
+const x = <><TopNavHeading heading="App" href="/" /><TopNavItem label="Home" href="/" /></>;`;
+    const output = await apply(
+      'rename-topnavheading-href-to-headinghref',
+      input,
+    );
+    expect(output).toContain('headingHref="/"');
+    expect(output).toContain('<TopNavItem label="Home" href="/"');
+  });
+
+  it('migrates Grid minChildWidth to columns minWidth fit mode', async () => {
+    const input = `import {Grid} from '@astryxdesign/core/Grid';
+const x = <Grid minChildWidth={160} gap={4} />;`;
+    const output = await apply('migrate-grid-minchildwidth-to-columns', input);
+    expect(output).toContain('columns={{');
+    expect(output).toContain('minWidth: 160');
+    expect(output).toContain("repeat: 'fit'");
+    expect(output).not.toContain('minChildWidth');
+  });
+
+  it('renames NavMenuItem imports and JSX', async () => {
+    const input = `import {NavMenuItem, type NavMenuItemProps} from '@astryxdesign/core/NavMenu';
+const item: NavMenuItemProps = {};
+const x = <NavMenuItem label="Legacy" />;`;
+    const output = await apply(
+      'migrate-navmenuitem-to-navheadingmenuitem',
+      input,
+    );
+    expect(output).toContain('NavHeadingMenuItem');
+    expect(output).toContain('NavHeadingMenuItemProps');
+    expect(output).not.toContain('NavMenuItem');
+  });
+
+  it('repoints lab CodeBlock imports to core CodeBlock subpath', async () => {
+    const input = `import {CodeBlock, Drawer} from '@astryxdesign/lab';
+const x = <CodeBlock code="x" />;`;
+    const output = await apply('migrate-lab-codeblock-imports', input);
+    expect(output).toContain("from '@astryxdesign/core/CodeBlock'");
+    expect(output).toMatch(/import \{\s*Drawer\s*\} from '@astryxdesign\/lab'/);
+  });
+
+  it('removes deprecated transition token imports', async () => {
+    const input = `import {transitionVars, durationVars, type TransitionVarName} from '@astryxdesign/core/theme';
+const d = durationVars;`;
+    const output = await apply('remove-theme-transition-token-imports', input);
+    expect(output).toContain('durationVars');
+    expect(output).not.toContain('transitionVars');
+    expect(output).not.toContain('TransitionVarName');
+  });
+});

packages/cli/assets/codemods/transforms/next/index.mjs

@@ -0,0 +1,52 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file next transform manifest
+ *
+ * Staged codemods for the next release. The Version Packages PR promotes this
+ * file into the resolved version folder.
+ */
+
+import renameTopNavHeadingHrefToHeadingHref, {
+  meta as renameTopNavHeadingHrefToHeadingHrefMeta,
+} from './rename-topnavheading-href-to-headinghref.mjs';
+import migrateGridMinChildWidthToColumns, {
+  meta as migrateGridMinChildWidthToColumnsMeta,
+} from './migrate-grid-minchildwidth-to-columns.mjs';
+import migrateNavMenuItemToNavHeadingMenuItem, {
+  meta as migrateNavMenuItemToNavHeadingMenuItemMeta,
+} from './migrate-navmenuitem-to-navheadingmenuitem.mjs';
+import migrateLabCodeBlockImports, {
+  meta as migrateLabCodeBlockImportsMeta,
+} from './migrate-lab-codeblock-imports.mjs';
+import removeThemeTransitionTokenImports, {
+  meta as removeThemeTransitionTokenImportsMeta,
+} from './remove-theme-transition-token-imports.mjs';
+
+export default [
+  {
+    name: 'rename-topnavheading-href-to-headinghref',
+    transform: renameTopNavHeadingHrefToHeadingHref,
+    meta: renameTopNavHeadingHrefToHeadingHrefMeta,
+  },
+  {
+    name: 'migrate-grid-minchildwidth-to-columns',
+    transform: migrateGridMinChildWidthToColumns,
+    meta: migrateGridMinChildWidthToColumnsMeta,
+  },
+  {
+    name: 'migrate-navmenuitem-to-navheadingmenuitem',
+    transform: migrateNavMenuItemToNavHeadingMenuItem,
+    meta: migrateNavMenuItemToNavHeadingMenuItemMeta,
+  },
+  {
+    name: 'migrate-lab-codeblock-imports',
+    transform: migrateLabCodeBlockImports,
+    meta: migrateLabCodeBlockImportsMeta,
+  },
+  {
+    name: 'remove-theme-transition-token-imports',
+    transform: removeThemeTransitionTokenImports,
+    meta: removeThemeTransitionTokenImportsMeta,
+  },
+];