@pantheon-systems/pds-toolkit-react 1.0.0-dev.20 → 1.0.0-dev.200

package/_dist/mocks/data/navigation-items.d.ts

@@ -0,0 +1,357 @@
+import React from 'react';
+export declare const dialogMsgBase = "Activated menu item => ";
+import { UserMenuItem } from '@components/navigation/UserMenu/UserMenu';
+export declare const blogMenuItems: {
+    linkContent: React.JSX.Element;
+}[];
+export declare const dashboardNavSampleMenuItems: ({
+    icon: string;
+    linkContent: React.JSX.Element;
+    links?: undefined;
+    isActive?: undefined;
+} | {
+    icon: string;
+    linkContent: string;
+    links: {
+        linkContent: React.JSX.Element;
+    }[];
+    isActive?: undefined;
+} | {
+    icon: string;
+    linkContent: React.JSX.Element;
+    isActive: boolean;
+    links?: undefined;
+})[];
+export declare const dashboardNavSampleMenuItemsRR: ({
+    icon: string;
+    linkContent: React.JSX.Element;
+    links?: undefined;
+} | {
+    icon: string;
+    linkContent: React.JSX.Element;
+    links: {
+        linkContent: React.JSX.Element;
+    }[];
+})[];
+export declare const dashboardSegmentedButtonItems: {
+    label: string;
+    value: string;
+}[];
+export declare const documentationMenuItems: ({
+    label: string;
+    links: {
+        linkContent: React.JSX.Element;
+    }[];
+    linkContent?: undefined;
+} | {
+    linkContent: React.JSX.Element;
+    label?: undefined;
+    links?: undefined;
+})[];
+export declare const helpMenuItems: ({
+    label: string;
+    callback: (item: any) => void;
+    isSeparator?: undefined;
+    isHeading?: undefined;
+} | {
+    isSeparator: boolean;
+    label?: undefined;
+    callback?: undefined;
+    isHeading?: undefined;
+} | {
+    label: string;
+    isHeading: boolean;
+    callback?: undefined;
+    isSeparator?: undefined;
+})[];
+export declare const micrositeMenuItems: ({
+    label: string;
+    links: {
+        linkContent: React.JSX.Element;
+    }[];
+    linkContent?: undefined;
+} | {
+    linkContent: React.JSX.Element;
+    label?: undefined;
+    links?: undefined;
+})[];
+export declare const navMenuSampleMenuItems: ({
+    label: string;
+    links: ({
+        linkContent: React.JSX.Element;
+        isSeparator?: undefined;
+    } | {
+        isSeparator: boolean;
+        linkContent?: undefined;
+    })[];
+    linkContent?: undefined;
+    isActive?: undefined;
+} | {
+    linkContent: React.JSX.Element;
+    isActive: boolean;
+    label?: undefined;
+    links?: undefined;
+} | {
+    linkContent: React.JSX.Element;
+    label?: undefined;
+    links?: undefined;
+    isActive?: undefined;
+})[];
+export declare const navMenuSampleMenuItemsRR: ({
+    label: string;
+    links: ({
+        linkContent: React.JSX.Element;
+        isSeparator?: undefined;
+    } | {
+        isSeparator: boolean;
+        linkContent?: undefined;
+    })[];
+    linkContent?: undefined;
+} | {
+    linkContent: React.JSX.Element;
+    label?: undefined;
+    links?: undefined;
+})[];
+export declare const sampleSites: ({
+    id: string;
+    machineName: string;
+    name: string;
+    status: string;
+    type: string;
+} | {
+    id: string;
+    name: string;
+    status: string;
+    type: string;
+    machineName?: undefined;
+} | {
+    id: string;
+    machineName: string;
+    name: string;
+    status: string;
+    type?: undefined;
+})[];
+export declare const sideNavSampleMenuItems: ({
+    linkContent: React.JSX.Element;
+    links?: undefined;
+} | {
+    linkContent: string;
+    links: ({
+        linkContent: React.JSX.Element;
+        isActive?: undefined;
+    } | {
+        linkContent: React.JSX.Element;
+        isActive: boolean;
+    })[];
+})[];
+export declare const sideNavSampleMenuItemsRR: ({
+    linkContent: React.JSX.Element;
+    links?: undefined;
+} | {
+    linkContent: string;
+    links: {
+        linkContent: React.JSX.Element;
+    }[];
+})[];
+export declare const sideNavSampleMenuItemsMultidev: ({
+    linkContent: React.JSX.Element;
+    isActive: boolean;
+} | {
+    linkContent: React.JSX.Element;
+    isActive?: undefined;
+})[];
+export declare const sideNavSampleMenuItemsCode: ({
+    linkContent: React.JSX.Element;
+    isActive: boolean;
+} | {
+    linkContent: React.JSX.Element;
+    isActive?: undefined;
+})[];
+export declare const sideNavCompactSampleMenuItems: ({
+    linkContent: React.JSX.Element;
+    links?: undefined;
+    isActive?: undefined;
+} | {
+    linkContent: string;
+    links: {
+        linkContent: React.JSX.Element;
+    }[];
+    isActive?: undefined;
+} | {
+    linkContent: React.JSX.Element;
+    isActive: boolean;
+    links: ({
+        linkContent: string;
+        links: {
+            linkContent: React.JSX.Element;
+        }[];
+    } | {
+        linkContent: React.JSX.Element;
+        links?: undefined;
+    })[];
+})[];
+export declare const sideNavCompactSampleMenuItemsRR: ({
+    linkContent: React.JSX.Element;
+    links?: undefined;
+} | {
+    linkContent: string;
+    links: {
+        linkContent: React.JSX.Element;
+    }[];
+} | {
+    linkContent: React.JSX.Element;
+    links: ({
+        linkContent: string;
+        links: {
+            linkContent: React.JSX.Element;
+        }[];
+    } | {
+        linkContent: React.JSX.Element;
+        links?: undefined;
+    })[];
+})[];
+export declare const tabMenuSampleMenuItems: ({
+    dropdownSettings: {
+        buttonLabel: string;
+        filterLabel: string;
+        filterPlaceholder: string;
+        minFilterItems: number;
+        noResultsText: string;
+    };
+    icon: string;
+    linkContent: React.JSX.Element;
+    links: {
+        linkContent: React.JSX.Element;
+    }[];
+    isActive?: undefined;
+} | {
+    icon: string;
+    linkContent: React.JSX.Element;
+    isActive: boolean;
+    dropdownSettings?: undefined;
+    links?: undefined;
+} | {
+    icon: string;
+    linkContent: React.JSX.Element;
+    dropdownSettings?: undefined;
+    links?: undefined;
+    isActive?: undefined;
+})[];
+export declare const tabMenuSampleMenuItemsMultidev: ({
+    dropdownSettings: {
+        buttonLabel: string;
+        filterLabel: string;
+        filterPlaceholder: string;
+        minFilterItems: number;
+        noResultsText: string;
+    };
+    icon: string;
+    linkContent: React.JSX.Element;
+    links: ({
+        linkContent: React.JSX.Element;
+        isActive?: undefined;
+    } | {
+        linkContent: React.JSX.Element;
+        isActive: boolean;
+    })[];
+    promoteActiveChildLink: boolean;
+} | {
+    icon: string;
+    linkContent: React.JSX.Element;
+    dropdownSettings?: undefined;
+    links?: undefined;
+    promoteActiveChildLink?: undefined;
+})[];
+export declare const userMenuSampleItems: UserMenuItem[];
+export declare const workspaceItemsSimple: ({
+    displayName: string;
+    workspaceId: string;
+    workspaceLink: React.JSX.Element;
+    imageSrc?: undefined;
+    planTier?: undefined;
+    isUnprivileged?: undefined;
+    isActive?: undefined;
+} | {
+    displayName: string;
+    imageSrc: string;
+    planTier: string;
+    workspaceId: string;
+    workspaceLink: React.JSX.Element;
+    isUnprivileged?: undefined;
+    isActive?: undefined;
+} | {
+    displayName: string;
+    imageSrc: string;
+    planTier: string;
+    workspaceId: string;
+    workspaceLink: React.JSX.Element;
+    isUnprivileged: boolean;
+    isActive?: undefined;
+} | {
+    displayName: string;
+    planTier: string;
+    workspaceId: string;
+    workspaceLink: React.JSX.Element;
+    isActive: boolean;
+    imageSrc?: undefined;
+    isUnprivileged?: undefined;
+} | {
+    displayName: string;
+    planTier: string;
+    workspaceId: string;
+    workspaceLink: React.JSX.Element;
+    imageSrc?: undefined;
+    isUnprivileged?: undefined;
+    isActive?: undefined;
+})[];
+export declare const workspaceItemsPersonal: ({
+    displayName: string;
+    workspaceId: string;
+    workspaceLink: React.JSX.Element;
+    isActive: boolean;
+    imageSrc?: undefined;
+    planTier?: undefined;
+} | {
+    displayName: string;
+    imageSrc: string;
+    planTier: string;
+    workspaceId: string;
+    workspaceLink: React.JSX.Element;
+    isActive?: undefined;
+} | {
+    displayName: string;
+    planTier: string;
+    workspaceId: string;
+    workspaceLink: React.JSX.Element;
+    isActive?: undefined;
+    imageSrc?: undefined;
+})[];
+export declare const workspaceItemsLonger: ({
+    displayName: string;
+    workspaceId: string;
+    workspaceLink: React.JSX.Element;
+    imageSrc?: undefined;
+    planTier?: undefined;
+    isActive?: undefined;
+} | {
+    displayName: string;
+    imageSrc: string;
+    planTier: string;
+    workspaceId: string;
+    workspaceLink: React.JSX.Element;
+    isActive?: undefined;
+} | {
+    displayName: string;
+    planTier: string;
+    workspaceId: string;
+    workspaceLink: React.JSX.Element;
+    imageSrc?: undefined;
+    isActive?: undefined;
+} | {
+    displayName: string;
+    planTier: string;
+    workspaceId: string;
+    workspaceLink: React.JSX.Element;
+    isActive: boolean;
+    imageSrc?: undefined;
+})[];

package/_dist/mocks/markup/dashboard-main-content.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+export declare const DemoDashboardInnerHeaderLeft: ({ slot: _slot, }: {
+    slot?: string;
+}) => React.JSX.Element;
+export declare const DemoDashboardInnerHeaderRight: ({ slot: _slot, }: {
+    slot?: string;
+}) => React.JSX.Element;
+export declare const DemoDashboardInnerHeaderBelow: ({ slot: _slot, }: {
+    slot?: string;
+}) => React.JSX.Element;
+export declare const DemoDashboardInnerSidebar: ({ slot: _slot, }: {
+    slot?: string;
+}) => React.JSX.Element;
+export declare const DemoDashboardMainContent: ({ slot: _slot, }: {
+    slot?: string;
+}) => React.JSX.Element;

package/_dist/mocks/markup/dashboard-navigation.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export declare const DemoDashboardSidebarNav: ({ slot: _slot }: {
+    slot?: string;
+}) => React.JSX.Element;
+export declare const DemoDashboardFooter: ({ slot: _slot }: {
+    slot?: string;
+}) => React.JSX.Element;
+export declare const DemoDashboardNavbar: ({ isAdmin, slot: _slot, }: {
+    isAdmin?: boolean;
+    slot?: string;
+}) => React.JSX.Element;

package/_dist/mocks/markup/modal.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ModalWithForm: () => React.JSX.Element;

package/_dist/mocks/markup/panel-row-content.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare const PanelRowDemoItemsLeft: ({ slot: _slot }: {
+    slot?: string;
+}) => React.JSX.Element;
+export declare const PanelRowDemoItemsRight: ({ slot: _slot }: {
+    slot?: string;
+}) => React.JSX.Element;

package/_dist/utilities/context-providers/ResponsiveContext/ResponsiveContext.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const ResponsiveContext: React.Context<any>;
+export declare const ResponsiveContextProvider: ({ children, mobileMenuMaxWidth, }: {
+    children: any;
+    mobileMenuMaxWidth?: number;
+}) => React.JSX.Element;

package/_dist/utilities/hooks/useWindowWidth.d.ts

@@ -0,0 +1 @@
+export declare const useWindowWidth: () => number;

package/_dist/vars/spacing.d.ts

@@ -0,0 +1,17 @@
+export const SPACING_2XL: 1.953;
+export const SPACING_2XS: 0.512;
+export const SPACING_3XL: 2.441;
+export const SPACING_3XS: 0.41;
+export const SPACING_4XL: 3.052;
+export const SPACING_4XS: 0.328;
+export const SPACING_5XL: 3.815;
+export const SPACING_5XS: 0.25;
+export const SPACING_6XL: 4.678;
+export const SPACING_6XS: 0.125;
+export const SPACING_7XL: 5.96;
+export const SPACING_8XL: 7.451;
+export const SPACING_L: 1.25;
+export const SPACING_M: 1;
+export const SPACING_S: 0.8;
+export const SPACING_XL: 1.563;
+export const SPACING_XS: 0.64;

package/_dist/vars/z-index.d.ts

@@ -0,0 +1,5 @@
+export const Z_INDEX_NAVIGATION: 100;
+export const Z_INDEX_DROPDOWN: 200;
+export const Z_INDEX_NOTIFICATIONS: 300;
+export const Z_INDEX_OVERLAY: 400;
+export const Z_INDEX_MODAL: 500;

package/package.json

@@ -1,42 +1,65 @@
 {
 	"name": "@pantheon-systems/pds-toolkit-react",
 	"technology": "React",
-	"version": "1.0.0-dev.20",
+	"version": "1.0.0-dev.200",
 	"description": "PDS toolkit built using the React framework",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/pantheon-systems/pds-toolkit-react.git"
 	},
 	"author": "Pantheon Systems",
+	"engines": {
+		"node": ">=18.0.0 <=22.x"
+	},
 	"bugs": {
 		"url": "https://github.com/pantheon-systems/pds-toolkit-react/issues"
 	},
 	"homepage": "https://github.com/pantheon-systems/pds-toolkit-react#readme",
-	"main": "_dist/cjs/index.js",
-	"module": "_dist/esm/index.js",
+	"module": "_dist/index.js",
+	"types": "_dist/index.d.ts",
+	"exports": {
+		".": {
+			"types": "./_dist/index.d.ts",
+			"import": "./_dist/index.js"
+		},
+		"./*": "./_dist/*"
+	},
 	"files": [
 		"_dist"
 	],
+	"sideEffects": [
+		"*.css"
+	],
+	"type": "module",
 	"scripts": {
-		"build": "rollup -c",
-		"postbuild": "npm run build:css && npm run build:css:components && npm run build:css:layouts",
+		"build": "npm run vite build && npm run build:types || true",
+		"build:types": "tsc -p tsconfig.build.json",
+		"prebuild": "vendor-copy",
+		"postbuild": "npm run build:css && npm run build:css:components && npm run build:css:layouts && npm run build:css:packageExtraCss",
 		"build:css": "postcss src/core.css -o _dist/css/pds-core.css",
 		"build:css:components": "postcss src/components/index.css -o _dist/css/pds-components.css",
 		"build:css:layouts": "postcss src/layouts/index.css -o _dist/css/pds-layouts.css",
+		"build:css:packageExtraCss": "node scripts/package-extra-css.js",
 		"build:css:watch": "npm run build:css -- -w",
+		"typecheck:tsc": "tsc --noEmit",
+		"typecheck:attw": "attw --pack . --ignore-rules cjs-resolves-to-esm no-resolution internal-resolution-error",
+		"typecheck:publint": "npx publint",
+		"typecheck": "npm run typecheck:attw && npm run typecheck:publint && npm run typecheck:tsc",
 		"prestorybook": "npm run build:css",
 		"storybook": "storybook dev -p 6006",
 		"prestorybook:build": "npm run build:css",
 		"storybook:build": "storybook build",
 		"develop": "concurrently --raw --kill-others \"npm run storybook\" \"npm run build:css:watch\"",
-		"eslint": "eslint --ext .jsx --ext .js",
-		"eslint:all": "eslint src --ext .jsx --ext .js --cache",
+		"predevelop": "vendor-copy",
+		"eslint": "eslint --ext .jsx,.tsx,.js,.ts",
+		"eslint:all": "eslint src --ext .jsx,.tsx,.js,.ts --cache",
+		"format:fix": "prettier . --write && npm run eslint:all -- --fix",
 		"pretest": "npm run build:css",
 		"test": "playwright test",
 		"pretest:vrt": "npm run build:css",
-		"test:vrt": "playwright test --project 'vrt:chromium' 'vrt:firefox' 'vrt:webkit' 'vrt:Mobile Chrome' 'vrt:Mobile Safari'",
-		"pretest:vrt:update-snapshots": "npm run build:css",
-		"test:vrt:update-snapshots": "npm run test:vrt -- --update-snapshots",
+		"test:vrt": "playwright test --project 'firefox' 'safari' 'iphone'",
+		"pretest:vrt:update": "npm run build:css",
+		"test:vrt:update": "npm run test:vrt -- --update-snapshots",
 		"pretest:a11y:generate": "npm run build:css",
 		"test:a11y:generate": "npm run storybook:build && npx sb extract && node __tests__/a11y/a11y.generate-tests.js",
 		"test:a11y": "playwright test --project 'a11y'",
@@ -48,72 +71,91 @@
 		"generate:foundation": "plop foundation",
 		"generate:pattern": "plop pattern",
 		"generate:utility": "plop utility",
-		"prepare": "husky install"
+		"prepare": "husky install",
+		"build-storybook": "storybook build",
+		"vite": "vite"
 	},
 	"devDependencies": {
+		"@arethetypeswrong/cli": "^0.15.3",
 		"@axe-core/playwright": "^4.7.0",
 		"@babel/preset-env": "^7.21.5",
 		"@babel/preset-react": "^7.18.6",
 		"@csstools/postcss-design-tokens": "^2.0.4",
 		"@csstools/postcss-global-data": "^1.0.3",
-		"@floating-ui/react-dom": "~1.3.0",
-		"@pantheon-systems/pds-design-tokens": "^1.0.0-dev.75",
 		"@playwright/test": "^1.36.2",
-		"@rollup/plugin-babel": "^6.0.3",
-		"@rollup/plugin-commonjs": "^24.1.0",
-		"@rollup/plugin-node-resolve": "^15.0.2",
-		"@storybook/addon-a11y": "^7.4.0",
-		"@storybook/addon-essentials": "^7.4.0",
-		"@storybook/addon-interactions": "^7.4.0",
-		"@storybook/addon-links": "^7.4.0",
-		"@storybook/addon-postcss": "^2.0.0",
-		"@storybook/addon-styling": "^1.3.7",
-		"@storybook/blocks": "^7.4.0",
-		"@storybook/manager-api": "^7.4.0",
-		"@storybook/react": "^7.4.0",
-		"@storybook/react-webpack5": "^7.4.0",
-		"@storybook/testing-library": "^0.2.0",
-		"@storybook/theming": "^7.4.0",
+		"@storybook/addon-a11y": "^8.2.4",
+		"@storybook/addon-essentials": "^8.2.4",
+		"@storybook/addon-interactions": "^8.2.4",
+		"@storybook/addon-links": "^8.2.4",
+		"@storybook/addon-webpack5-compiler-swc": "^1.0.2",
+		"@storybook/blocks": "^8.2.4",
+		"@storybook/react": "^8.2.4",
+		"@storybook/react-vite": "^8.2.4",
+		"@storybook/react-webpack5": "^8.2.4",
+		"@storybook/test": "^8.2.4",
+		"@storybook/theming": "^8.2.4",
+		"@typescript-eslint/eslint-plugin": "^7.7.0",
+		"@typescript-eslint/parser": "^7.7.0",
+		"@vitejs/plugin-react": "^4.3.0",
 		"axe-html-reporter": "^2.2.3",
 		"concurrently": "^8.0.1",
 		"cssnano": "^6.0.1",
-		"eslint": "^8.40.0",
-		"eslint-config-prettier": "^8.8.0",
+		"eslint": "^8.57.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-prettier": "^5.1.3",
 		"eslint-plugin-react": "^7.32.2",
-		"eslint-plugin-storybook": "^0.6.13",
+		"eslint-plugin-storybook": "^0.8.0",
+		"fast-glob": "^3.3.2",
 		"husky": "^8.0.3",
 		"lint-staged": "^13.2.3",
 		"plop": "^3.1.2",
-		"postcss": "^8.4.23",
+		"postcss": "^8.4.38",
 		"postcss-cli": "^10.1.0",
 		"postcss-custom-media": "^9.1.3",
 		"postcss-import": "^15.1.0",
 		"postcss-insert": "^1.0.0",
+		"postcss-loader": "^8.1.1",
 		"postcss-nested": "^6.0.1",
-		"prettier": "^2.8.8",
+		"prettier": "3.2.5",
+		"prettier-plugin-css-order": "^2.1.2",
 		"prop-types": "^15.8.1",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
-		"rollup": "^2.79.1",
-		"rollup-plugin-peer-deps-external": "^2.2.4",
-		"rollup-plugin-postcss": "^4.0.2",
-		"rollup-plugin-terser": "^7.0.2",
-		"storybook": "^7.4.0",
-		"storybook-dark-mode": "^3.0.1"
+		"storybook": "^8.2.4",
+		"storybook-dark-mode": "^4.0.1",
+		"typescript": "^5.4.5",
+		"vendor-copy": "^3.0.1",
+		"vite": "^5.2.11",
+		"vite-plugin-lib-inject-css": "^2.1.1",
+		"vite-tsconfig-paths": "^4.3.2"
 	},
 	"peerDependencies": {
 		"react": "^16.0.0 || ^17.0.0 || ^18.0.0"
 	},
 	"dependencies": {
 		"@floating-ui/react": "^0.24.3",
-		"@tippy.js/react": "^3.1.1",
+		"@floating-ui/react-dom": "~1.3.0",
+		"@pantheon-systems/pds-design-tokens": "^1.0.0-dev.140",
+		"@reactuses/core": "^5.0.15",
 		"focus-trap-react": "^10.2.1",
+		"hash-sum": "^2.0.0",
+		"react-hotkeys-hook": "^4.5.1",
 		"react-router-dom": "^6.13.0",
-		"tippy.js": "^6.3.7"
+		"react-toastify": "^9.0.3"
 	},
 	"lint-staged": {
-		"src/**/*.{js,jsx}": [
+		"src/**/*.{js,jsx,ts,tsx}": [
 			"npm run eslint"
 		]
-	}
+	},
+	"vendorCopy": [
+		{
+			"from": "node_modules/@pantheon-systems/pds-design-tokens/build/css/pds-design-tokens-dark-mode.css",
+			"to": "public/design-tokens/pds-design-tokens-dark-mode.css"
+		},
+		{
+			"from": "node_modules/@pantheon-systems/pds-design-tokens/build/css/pds-design-tokens-light-mode.css",
+			"to": "public/design-tokens/pds-design-tokens-light-mode.css"
+		}
+	]
 }