@sps-woodland/core 8.50.1 → 8.51.0

package/vite.subpaths.config.mjs

@@ -0,0 +1,246 @@
+import path from "node:path";
+import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
+import { defineConfig } from "vite";
+import pkg from "./package.json" with { type: "json" };
+import { getVanillaExtractPluginProps } from "../../../scripts/vanilla-extract-plugin-props.mjs";
+
+const packageVersion = process.env.PREDICTED_VERSION || pkg.version;
+
+/**
+ * @sps-woodland/core subpath build.
+ *
+ * Builds families that were migrated into core. Each
+ * family is exposed as a subpath export (@sps-woodland/core/<family>) with its
+ * own entry. Outputs land in ./lib/<family>/ alongside the legacy single-entry
+ * build's ./lib/index.* outputs — different paths, no conflicts. emptyOutDir is
+ * false so neither build wipes the other's output.
+ */
+
+const entries = {
+  "insight-card/index": path.resolve(__dirname, "src/insight-card/index.ts"),
+
+  // Page Title — barrel for CSS generation + family-equality (selectChildren/modChildren);
+  // flat subpath for PageSubtitle (PageTitle is name-clashed, barrel-only).
+  "page-title/index": path.resolve(__dirname, "src/page-title/index.ts"),
+  "page-title/page-subtitle/PageSubtitle": path.resolve(__dirname, "src/page-title/page-subtitle/PageSubtitle.tsx"),
+
+  // Filter Tiles — barrel + flat subpaths for both components (no name clash).
+  "filter-tiles/index": path.resolve(__dirname, "src/filter-tiles/index.ts"),
+  "filter-tiles/filter-tile/FilterTile": path.resolve(__dirname, "src/filter-tiles/filter-tile/FilterTile.tsx"),
+  "filter-tiles/filter-tile-set/FilterTileSet": path.resolve(__dirname, "src/filter-tiles/filter-tile-set/FilterTileSet.tsx"),
+
+  // Key Value Set — barrel + flat for KeyValueSetItem (KeyValueSet is name-clashed, barrel-only).
+  "key-value-set/index": path.resolve(__dirname, "src/key-value-set/index.ts"),
+  "key-value-set/key-value-set-item/KeyValueSetItem": path.resolve(__dirname, "src/key-value-set/key-value-set-item/KeyValueSetItem.tsx"),
+
+  // Sorting Header — barrel + flat for SortingHeaderCell. SortingHeader uses
+  // selectChildren/modChildren so Gotcha #11 applies.
+  "sorting-header/index": path.resolve(__dirname, "src/sorting-header/index.ts"),
+  "sorting-header/sorting-header-cell/SortingHeaderCell": path.resolve(__dirname, "src/sorting-header/sorting-header-cell/SortingHeaderCell.tsx"),
+
+  // Content Tiles — barrel + flat subpaths for both components (no name clash).
+  // ContentTile uses selectChildren with a custom predicate (Metadata.get(child).name === "Tag"),
+  // so Gotcha #11 doesn't apply here.
+  "content-tiles/index": path.resolve(__dirname, "src/content-tiles/index.ts"),
+  "content-tiles/content-tile/ContentTile": path.resolve(__dirname, "src/content-tiles/content-tile/ContentTile.tsx"),
+  "content-tiles/content-tile-list/ContentTileList": path.resolve(__dirname, "src/content-tiles/content-tile-list/ContentTileList.tsx"),
+
+  // Matrix — barrel + flat subpaths for all 5 child components. Matrix.tsx
+  // renders children directly (no selectChildren), so Gotcha #11 doesn't apply.
+  "matrix/index": path.resolve(__dirname, "src/matrix/index.ts"),
+  "matrix/matrix-head/MatrixHead": path.resolve(__dirname, "src/matrix/matrix-head/MatrixHead.tsx"),
+  "matrix/matrix-header/MatrixHeader": path.resolve(__dirname, "src/matrix/matrix-header/MatrixHeader.tsx"),
+  "matrix/matrix-body/MatrixBody": path.resolve(__dirname, "src/matrix/matrix-body/MatrixBody.tsx"),
+  "matrix/matrix-row/MatrixRow": path.resolve(__dirname, "src/matrix/matrix-row/MatrixRow.tsx"),
+  "matrix/matrix-cell/MatrixCell": path.resolve(__dirname, "src/matrix/matrix-cell/MatrixCell.tsx"),
+
+  // Photo — barrel + flat for PhotoCarousel (Photo is name-clashed, barrel-only).
+  // PhotoCarousel uses selectChildren({ type: Photo }) — Gotcha #11 applies.
+  "photo/index": path.resolve(__dirname, "src/photo/index.ts"),
+  "photo/photo-carousel/PhotoCarousel": path.resolve(__dirname, "src/photo/photo-carousel/PhotoCarousel.tsx"),
+
+  // Dropdowns — barrel + flat subpaths for Dropdown, OptionList, Option.
+  // OptionList uses selectChildren({ type: Option }) and Dropdown uses modChildren — Gotcha #11 applies.
+  "dropdowns/index": path.resolve(__dirname, "src/dropdowns/index.ts"),
+  "dropdowns/dropdown/Dropdown": path.resolve(__dirname, "src/dropdowns/dropdown/Dropdown.tsx"),
+  "dropdowns/option-list/OptionList": path.resolve(__dirname, "src/dropdowns/option-list/OptionList.tsx"),
+  "dropdowns/option-list/Option": path.resolve(__dirname, "src/dropdowns/option-list/Option.tsx"),
+
+  // Side Nav — barrel + flat for the children (SideNav is name-clashed, barrel-only).
+  // SideNav uses selectChildren + modChildren; navContext.ts is internal-only (shared between
+  // SideNav and SideNavItem via relative imports), not exported.
+  "side-nav/index": path.resolve(__dirname, "src/side-nav/index.ts"),
+  "side-nav/side-nav-item/SideNavItem": path.resolve(__dirname, "src/side-nav/side-nav-item/SideNavItem.tsx"),
+  "side-nav/side-nav-header/SideNavHeader": path.resolve(__dirname, "src/side-nav/side-nav-header/SideNavHeader.tsx"),
+  "side-nav/side-nav-section/SideNavSection": path.resolve(__dirname, "src/side-nav/side-nav-section/SideNavSection.tsx"),
+
+  // Product Bar — barrel + flat for non-clashing children (ProductBar is name-clashed, barrel-only).
+  // ProductBar uses selectChildren — Gotcha #11 applies. Internal-only helpers (ProductBarOverflowMenu,
+  // usePriorityPlus hook) live in the family but aren't exported.
+  "product-bar/index": path.resolve(__dirname, "src/product-bar/index.ts"),
+  "product-bar/product-bar-tab/ProductBarTab": path.resolve(__dirname, "src/product-bar/product-bar-tab/ProductBarTab.tsx"),
+  "product-bar/product-bar-name/ProductBarName": path.resolve(__dirname, "src/product-bar/product-bar-name/ProductBarName.tsx"),
+  "product-bar/slack-link/SlackLink": path.resolve(__dirname, "src/product-bar/slack-link/SlackLink.tsx"),
+
+  // Editable Table — barrel only (EditableTable is name-clashed). Uses a plain .css file (not
+  // vanilla-extract); the stylesheet is built by a separate vite.editable-table.config.mjs that
+  // runs postcss-import to inline the handsontable styles. Brings @handsontable/react +
+  // @handsontable/react-wrapper + handsontable as regular deps on core.
+  "editable-table/index": path.resolve(__dirname, "src/editable-table/index.ts"),
+
+  // Action Bar — barrel + flat for ActionBarAdditionalContent (ActionBar is name-clashed, barrel-only).
+  "action-bar/index": path.resolve(__dirname, "src/action-bar/index.ts"),
+  "action-bar/action-bar-additional-content/ActionBarAdditionalContent": path.resolve(__dirname, "src/action-bar/action-bar-additional-content/ActionBarAdditionalContent.tsx"),
+
+  // Content Row — barrel + flat for ContentRowCol/Expansion/RowListAutoLayout (ContentRow is
+  // name-clashed, barrel-only). ContentRow uses selectChildren on ContentRowCol/Expansion —
+  // Gotcha #11 applies.
+  "content-row/index": path.resolve(__dirname, "src/content-row/index.ts"),
+  "content-row/content-row-col/ContentRowCol": path.resolve(__dirname, "src/content-row/content-row-col/ContentRowCol.tsx"),
+  "content-row/content-row-expansion/ContentRowExpansion": path.resolve(__dirname, "src/content-row/content-row-expansion/ContentRowExpansion.tsx"),
+  "content-row/row-list-auto-layout/RowListAutoLayout": path.resolve(__dirname, "src/content-row/row-list-auto-layout/RowListAutoLayout.tsx"),
+
+  // File Upload — barrel only (FileUpload is name-clashed). Internal mime-type.enum.ts is
+  // colocated and not exported.
+  "file-upload/index": path.resolve(__dirname, "src/file-upload/index.ts"),
+
+  // Focused Task — barrel + flat for FocusedTaskActions (FocusedTask is name-clashed, barrel-only;
+  // useFocusedTask hook is barrel-only). Uses react-aria + react-stately.
+  "focused-task/index": path.resolve(__dirname, "src/focused-task/index.ts"),
+  "focused-task/focused-task-actions/FocusedTaskActions": path.resolve(__dirname, "src/focused-task/focused-task-actions/FocusedTaskActions.tsx"),
+
+  // Modal — barrel + flat for ModalFooter (Modal is name-clashed, barrel-only; useModal hook is
+  // barrel-only). Uses react-aria + react-stately.
+  "modal/index": path.resolve(__dirname, "src/modal/index.ts"),
+  "modal/modal-footer/ModalFooter": path.resolve(__dirname, "src/modal/modal-footer/ModalFooter.tsx"),
+
+  // Product Bar Vertical — barrel + flat for the 3 children (ProductBarVertical is name-clashed).
+  // ProductBarVertical uses selectChildren + modChildren — Gotcha #11 applies.
+  "product-bar-vertical/index": path.resolve(__dirname, "src/product-bar-vertical/index.ts"),
+  "product-bar-vertical/product-bar-vertical-header/ProductBarVerticalHeader": path.resolve(__dirname, "src/product-bar-vertical/product-bar-vertical-header/ProductBarVerticalHeader.tsx"),
+  "product-bar-vertical/product-bar-vertical-item/ProductBarVerticalItem": path.resolve(__dirname, "src/product-bar-vertical/product-bar-vertical-item/ProductBarVerticalItem.tsx"),
+  "product-bar-vertical/product-bar-vertical-section/ProductBarVerticalSection": path.resolve(__dirname, "src/product-bar-vertical/product-bar-vertical-section/ProductBarVerticalSection.tsx"),
+
+  // Progress Indicators — barrel + flat subpaths for each component (no name clash).
+  // ProgressBarStep uses SpsTooltip from @spscommerce/ds-react (already declared on core).
+  "progress-indicators/index": path.resolve(__dirname, "src/progress-indicators/index.ts"),
+  "progress-indicators/progress-bar/ProgressBar": path.resolve(__dirname, "src/progress-indicators/progress-bar/ProgressBar.tsx"),
+  "progress-indicators/progress-bar/progress-bar-step/ProgressBarStep": path.resolve(__dirname, "src/progress-indicators/progress-bar/progress-bar-step/ProgressBarStep.tsx"),
+  "progress-indicators/progress-ring/ProgressRing": path.resolve(__dirname, "src/progress-indicators/progress-ring/ProgressRing.tsx"),
+
+  // Growler — barrel only (wrapper API doesn't differentiate). Bundles sonner + nanoid.
+  // Exposes GrowlerEmitter, growl, GrowlerListProvider, Growler.
+  "growler/index": path.resolve(__dirname, "src/growler/index.ts"),
+
+  // List Bar — barrel + 6 flat subpaths (ListBar is name-clashed, barrel-only).
+  // Cross-family imports: Button, Tag, Tabs (Phase 4, still in @sps-woodland/react).
+  "list-bar/index": path.resolve(__dirname, "src/list-bar/index.ts"),
+  "list-bar/list-bar/ListBarSearch": path.resolve(__dirname, "src/list-bar/list-bar/ListBarSearch.tsx"),
+  "list-bar/list-bar/ListBarSearchInfo": path.resolve(__dirname, "src/list-bar/list-bar/ListBarSearchInfo.tsx"),
+  "list-bar/list-bar/ListBarSortBy": path.resolve(__dirname, "src/list-bar/list-bar/ListBarSortBy.tsx"),
+  "list-bar/list-bar/InputGroupWrapper": path.resolve(__dirname, "src/list-bar/list-bar/InputGroupWrapper.tsx"),
+  "list-bar/search-results-bar/SearchResultsBar": path.resolve(__dirname, "src/list-bar/search-results-bar/SearchResultsBar.tsx"),
+  "list-bar/advanced-search/AdvancedSearch": path.resolve(__dirname, "src/list-bar/advanced-search/AdvancedSearch.tsx"),
+
+  // Cards — barrel + flat for Card pieces. Cross-family: Tabs (Phase 4, still in react).
+  "cards/index": path.resolve(__dirname, "src/cards/index.ts"),
+  "cards/card/Card": path.resolve(__dirname, "src/cards/card/Card.tsx"),
+  "cards/card-header/CardHeader": path.resolve(__dirname, "src/cards/card-header/CardHeader.tsx"),
+  "cards/card-footer/CardFooter": path.resolve(__dirname, "src/cards/card-footer/CardFooter.tsx"),
+  "cards/card-title/CardTitle": path.resolve(__dirname, "src/cards/card-title/CardTitle.tsx"),
+
+  // Add To List — barrel only (AddToList is name-clashed, barrel-only). Internal helpers ItemsList
+  // and ListItem are not exported. Cross-family: Card, Tag, ZeroState, ScrollableContainer,
+  // FeedbackBlock (all Phase 4, still in react).
+  "add-to-list/index": path.resolve(__dirname, "src/add-to-list/index.ts"),
+
+  // Column Manager — barrel only (ColumnManager is name-clashed; useColumnManager is a hook).
+  // No .css.ts of its own — styles come from @sps-woodland/tokens sprinkles, so no per-family CSS
+  // config, no style.css export. Depends on AddToList (now in core/add-to-list).
+  "column-manager/index": path.resolve(__dirname, "src/column-manager/index.ts"),
+
+  // Rich Text Editor — barrel only (RichTextEditor is name-clashed). Bundles 9 unified/rehype/
+  // remark/unist-util-visit runtime deps (declared as regular deps on core; externalized at
+  // build time, resolved at consumer install time — same pattern as growler/editable-table).
+  // SVG icons live in icons/ and are inlined as data URLs by vite's default asset handling.
+  // Cross-family: Button (Phase 4, still in @sps-woodland/react).
+  "rich-text-editor/index": path.resolve(__dirname, "src/rich-text-editor/index.ts"),
+
+  // Feedback Block — barrel only (FeedbackBlock is name-clashed, single-component family).
+  // Phase 4 dependency-leaf (no cross-family deps).
+  "feedback-block/index": path.resolve(__dirname, "src/feedback-block/index.ts"),
+
+  // Scrollable Container — barrel only (single-component family). Phase 4 dependency-leaf
+  // (no cross-family deps). Consumed by cards-wrapper aggregator and add-to-list/ItemsList.
+  "scrollable-container/index": path.resolve(__dirname, "src/scrollable-container/index.ts"),
+
+  // Zero State — barrel only (single-component family). Phase 4 dependency-leaf.
+  // Brings @sps-woodland/illustrations (BUILDING_LARGE) — already a core peer.
+  "zero-state/index": path.resolve(__dirname, "src/zero-state/index.ts"),
+
+  // Tabs — barrel + flat for Tab and TabPanel (Tabs is name-clashed). Tabs uses
+  // selectChildren({ type: Tab }), Tab uses modChildren — Gotcha #11 applies.
+  // Brings 3 granular react-aria/stately/types packages: @react-aria/tabs,
+  // @react-stately/tabs, @react-types/tabs (declared as regular deps on core).
+  "tabs/index": path.resolve(__dirname, "src/tabs/index.ts"),
+  "tabs/tab/Tab": path.resolve(__dirname, "src/tabs/tab/Tab.tsx"),
+  "tabs/tab-panel/TabPanel": path.resolve(__dirname, "src/tabs/tab-panel/TabPanel.tsx"),
+
+  // Tags — barrel + flat for Tag, ClickableTag, SplitTag. All three are independent
+  // siblings (no selectChildren among them), so Gotcha #11 doesn't apply here.
+  "tags/index": path.resolve(__dirname, "src/tags/index.ts"),
+  "tags/tag/Tag": path.resolve(__dirname, "src/tags/tag/Tag.tsx"),
+  "tags/clickable-tag/ClickableTag": path.resolve(__dirname, "src/tags/clickable-tag/ClickableTag.tsx"),
+  "tags/split-tag/SplitTag": path.resolve(__dirname, "src/tags/split-tag/SplitTag.tsx"),
+
+  // Buttons — barrel + flat for Button (the only component in the family).
+  // Brings 4 granular @react-aria packages as regular core deps: @react-aria/button,
+  // @react-aria/focus, @react-aria/interactions, @react-aria/utils. Closes Phase 4 —
+  // last family to migrate from @sps-woodland/react.
+  "buttons/index": path.resolve(__dirname, "src/buttons/index.ts"),
+  "buttons/button/Button": path.resolve(__dirname, "src/buttons/button/Button.tsx"),
+};
+
+export default defineConfig({
+  plugins: [
+    vanillaExtractPlugin(
+      getVanillaExtractPluginProps({
+        packageName: pkg.name,
+        packageVersion,
+      })
+    ),
+  ],
+  build: {
+    lib: {
+      entry: entries,
+      formats: ["es"],
+      fileName: (format, entryName) => `${entryName}.js`,
+    },
+    outDir: path.resolve(__dirname, "./lib"),
+    emptyOutDir: false,
+    rollupOptions: {
+      external: [
+        ...Object.keys(pkg.peerDependencies || {}),
+        /^@sps-woodland\//,
+        /^@spscommerce\//,
+        /^@ariakit\//,
+        /^@react-aria\//,
+        /^@react-stately\//,
+        /^@react-types\//,
+        /^@handsontable\//,
+        /^handsontable/,
+        /^react/,
+        /^react-dom/,
+        /^sonner/,
+        /^unified/,
+        /^rehype-/,
+        /^remark-/,
+        /^unist-/,
+      ],
+      output: {
+        preserveModules: true,
+        preserveModulesRoot: "src",
+      },
+    },
+  },
+});

package/vite.tabs.config.mjs

@@ -0,0 +1,43 @@
+/**
+ * Vite config for building tabs CSS separately.
+ */
+import path from "node:path";
+import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
+import { defineConfig } from "vite";
+import pkg from "./package.json" with { type: "json" };
+import { getVanillaExtractPluginProps } from "../../../scripts/vanilla-extract-plugin-props.mjs";
+
+const packageVersion = process.env.PREDICTED_VERSION || pkg.version;
+
+export default defineConfig({
+  plugins: [
+    vanillaExtractPlugin(
+      getVanillaExtractPluginProps({
+        packageName: pkg.name,
+        packageVersion,
+      })
+    ),
+  ],
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, "src/tabs/index.ts"),
+      name: "Tabs",
+      fileName: "index",
+      cssFileName: "style",
+    },
+    outDir: path.resolve(__dirname, "./lib/tabs"),
+    emptyOutDir: false,
+    rollupOptions: {
+      external: [
+        ...Object.keys(pkg.peerDependencies || {}),
+        /^@sps-woodland\//,
+        /^@spscommerce\//,
+        /^@react-aria\//,
+        /^@react-stately\//,
+        /^@react-types\//,
+        /^react/,
+        /^react-dom/,
+      ],
+    },
+  },
+});

package/vite.tags.config.mjs

@@ -0,0 +1,40 @@
+/**
+ * Vite config for building tags CSS separately.
+ */
+import path from "node:path";
+import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
+import { defineConfig } from "vite";
+import pkg from "./package.json" with { type: "json" };
+import { getVanillaExtractPluginProps } from "../../../scripts/vanilla-extract-plugin-props.mjs";
+
+const packageVersion = process.env.PREDICTED_VERSION || pkg.version;
+
+export default defineConfig({
+  plugins: [
+    vanillaExtractPlugin(
+      getVanillaExtractPluginProps({
+        packageName: pkg.name,
+        packageVersion,
+      })
+    ),
+  ],
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, "src/tags/index.ts"),
+      name: "Tags",
+      fileName: "index",
+      cssFileName: "style",
+    },
+    outDir: path.resolve(__dirname, "./lib/tags"),
+    emptyOutDir: false,
+    rollupOptions: {
+      external: [
+        ...Object.keys(pkg.peerDependencies || {}),
+        /^@sps-woodland\//,
+        /^@spscommerce\//,
+        /^react/,
+        /^react-dom/,
+      ],
+    },
+  },
+});

package/vite.zero-state.config.mjs

@@ -0,0 +1,40 @@
+/**
+ * Vite config for building zero-state CSS separately.
+ */
+import path from "node:path";
+import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
+import { defineConfig } from "vite";
+import pkg from "./package.json" with { type: "json" };
+import { getVanillaExtractPluginProps } from "../../../scripts/vanilla-extract-plugin-props.mjs";
+
+const packageVersion = process.env.PREDICTED_VERSION || pkg.version;
+
+export default defineConfig({
+  plugins: [
+    vanillaExtractPlugin(
+      getVanillaExtractPluginProps({
+        packageName: pkg.name,
+        packageVersion,
+      })
+    ),
+  ],
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, "src/zero-state/index.ts"),
+      name: "ZeroState",
+      fileName: "index",
+      cssFileName: "style",
+    },
+    outDir: path.resolve(__dirname, "./lib/zero-state"),
+    emptyOutDir: false,
+    rollupOptions: {
+      external: [
+        ...Object.keys(pkg.peerDependencies || {}),
+        /^@sps-woodland\//,
+        /^@spscommerce\//,
+        /^react/,
+        /^react-dom/,
+      ],
+    },
+  },
+});