chore!: remove direct imports & publish types (#1485)

Author: joshuaellis

.changeset/quiet-roses-rule.md

@@ -0,0 +1,5 @@
+---
+'@strapi/design-system': major
+---
+
+chore!: remove direct imports. Users should import everything from the root of the project instead.

BREAKING_CHANGES.md

@@ -0,0 +1,15 @@
+# Breaking Changes Migration guide
+
+## What is this?
+
+This is a living document of all the breaking changes in v2 of the design system. If you've added a breaking change, you'll be expected to update this document accordingly.
+
+## Changelog
+
+### Remove direct imports
+
+Users can no longer `import { Combobox } from '@strapi/design-system/Combobox'`, instead they should import _all_ things from the root of the project.
+
+### Published types
+
+`@strapi/design-system` now comes with typescript definitions. This means you can remove any overrides you may have. They've been tested against the CMS, if you feel there are mistakes, please open a PR to fix them.

docs/package.json

@@ -24,7 +24,8 @@
     "@storybook/react-vite": "^7.5.3",
     "@storybook/theming": "7.5.3",
     "eslint-plugin-mdx": "^2.2.0",
-    "storybook": "^7.5.3"
+    "storybook": "^7.5.3",
+    "vite": "^5.0.2"
   },
   "scripts": {
     "build": "storybook build",

docs/styled.d.ts

@@ -1,5 +1,4 @@
 import 'styled-components';
-import type { StrapiTheme } from '@strapi/design-system';
 
 declare module 'styled-components' {
   /**

package.json

@@ -28,23 +28,24 @@
     "prerelease:exit": "changeset pre exit",
     "release:add": "changeset add",
     "release:publish": "turbo run build lint test:ts test && changeset publish",
-    "release:version": "changeset version && yarn"
+    "release:version": "changeset version && yarn",
+    "watch": "turbo run watch"
   },
   "devDependencies": {
     "@changesets/changelog-git": "0.2.0",
     "@changesets/cli": "2.26.2",
     "@commitlint/cli": "18.4.3",
     "@commitlint/config-conventional": "18.4.3",
     "@juggle/resize-observer": "^3.4.0",
-    "@rollup/plugin-typescript": "^11.1.5",
     "@strapi/eslint-config": "^0.2.0",
+    "@strapi/pack-up": "4.15.5",
     "@swc/core": "^1.3.100",
     "@swc/jest": "^0.2.29",
     "@testing-library/jest-dom": "6.1.5",
     "@testing-library/react": "14.1.2",
     "@testing-library/user-event": "^14.5.1",
-    "@tsconfig/node16": "^16.1.1",
     "@types/jest": "^29.5.10",
+    "@types/node": "20.10.0",
     "@types/react": "18.2.41",
     "@types/react-dom": "18.2.17",
     "@typescript-eslint/eslint-plugin": "^6.13.2",
@@ -72,11 +73,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "^5.0.5",
-    "tiny-glob": "^0.2.9",
     "turbo": "1.10.16",
-    "typescript": "^5.3.2",
-    "vite": "^5.0.4",
-    "vite-plugin-dts": "^3.6.4"
+    "typescript": "^5.3.2"
   },
   "packageManager": "[email protected]",
   "engines": {

packages/primitives/.eslintrc

@@ -2,12 +2,12 @@
   "root": true,
   "extends": ["@strapi/eslint-config/front/typescript"],
   "parserOptions": {
-    "project": ["./tsconfig.eslint.json"]
+    "project": ["./tsconfig.json"]
   },
   "settings": {
     "import/resolver": {
       "typescript": {
-        "project": "./tsconfig.eslint.json"
+        "project": "./tsconfig.json"
       }
     }
   },

packages/primitives/package.json

@@ -3,22 +3,22 @@
   "version": "1.13.2",
   "license": "MIT",
   "sideEffects": false,
-  "main": "./dist/ui-primitives.js",
-  "module": "./dist/ui-primitives.mjs",
+  "source": "./src/index.ts",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "files": [
     "dist"
   ],
   "scripts": {
-    "prebuild": "rimraf dist",
-    "build": "yarn build:prod",
-    "build:prod": "vite build",
+    "build": "pack-up build",
     "clean": "rimraf dist node_modules",
     "lint": "eslint . --ext .js,.jsx,.tsx,.ts",
     "format": "yarn lint --fix",
     "test": "jest -c jest.config.mjs",
     "test:ts": "tsc --noEmit",
-    "test:watch": "jest -c jest.config.mjs --watchAll"
+    "test:watch": "jest -c jest.config.mjs --watchAll",
+    "watch": "pack-up watch"
   },
   "dependencies": {
     "@radix-ui/number": "^1.0.1",

packages/primitives/tsconfig.build.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./dist"
+  },
+  "exclude": ["**/*.test.tsx", "**/*.test.ts"],
+  "include": ["src"]
+}

packages/primitives/tsconfig.eslint.json

@@ -2,28 +2,20 @@
   "compilerOptions": {
     "target": "ESNext",
     "module": "ESNext",
-    "moduleResolution": "node",
+    "moduleResolution": "Bundler",
     "useDefineForClassFields": true,
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
     "allowJs": false,
     "skipLibCheck": true,
-    "esModuleInterop": false,
+    "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "resolveJsonModule": true,
-    "isolatedModules": true,
     "noEmit": true,
-    "outDir": "dist",
-    "declaration": true,
+    "noImplicitAny": true,
     "jsx": "react-jsx",
-    "types": ["vite/client"]
+    "types": ["jest", "@testing-library/jest-dom"]
   },
-  "exclude": ["**/*.test.tsx", "**/*.test.ts"],
-  "include": ["src"],
-  "references": [
-    {
-      "path": "./tsconfig.node.json"
-    }
-  ]
+  "include": ["src"]
 }

packages/primitives/tsconfig.json

@@ -4,7 +4,7 @@
   "parser": "@typescript-eslint/parser",
   "plugins": ["@typescript-eslint", "prettier"],
   "parserOptions": {
-    "project": ["./tsconfig.eslint.json"]
+    "project": ["./tsconfig.json"]
   },
   "rules": {
     "consistent-return": "off",

packages/primitives/tsconfig.node.json

@@ -0,0 +1,9 @@
+declare module '*.png' {
+  const value: any;
+  export default value;
+}
+
+declare module '*.svg' {
+  const value: any;
+  export default value;
+}

packages/primitives/vite.config.ts

@@ -3,25 +3,10 @@
   "version": "1.13.2",
   "license": "MIT",
   "sideEffects": false,
+  "source": "./src/index.ts",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
-  "exports": {
-    "./package.json": "./package.json",
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js",
-      "default": "./dist/index.js"
-    },
-    "./v2": {
-      "types": "./dist/v2/index.d.ts",
-      "import": "./dist/v2/index.mjs",
-      "require": "./dist/v2/index.js",
-      "default": "./dist/v2/index.js"
-    },
-    "./*": "./dist/*"
-  },
   "files": [
     "dist"
   ],
@@ -37,7 +22,6 @@
     "@uiw/react-codemirror": "^4.21.21",
     "aria-hidden": "^1.2.3",
     "compute-scroll-into-view": "^3.1.0",
-    "prop-types": "^15.8.1",
     "react-remove-scroll": "^2.5.7"
   },
   "devDependencies": {
@@ -58,8 +42,7 @@
     "styled-components": "^5.2.1"
   },
   "scripts": {
-    "build": "yarn clean && yarn build:prod",
-    "build:prod": "vite build",
+    "build": "pack-up build",
     "clean": "rimraf dist node_modules",
     "generate:types": "tsc --noEmit false --declaration --emitDeclarationOnly --declarationDir dist",
     "lint": "eslint . --ext .tsx,.ts",
@@ -70,7 +53,8 @@
     "test:e2e": "playwright test",
     "test:e2e:ci": "cross-env CI=true playwright test",
     "test:e2e:watch": "chokidar '**/__tests__/*.e2e.js' -c 'npm run test:e2e -- --retries=0 {path}'",
-    "test:e2e:debug": "cross-env PWDEBUG=1 playwright test"
+    "test:e2e:debug": "cross-env PWDEBUG=1 playwright test",
+    "watch": "pack-up watch"
   },
   "gitHead": "c74900b0ee3525510d266dc83c9743cb24dafced"
 }

packages/strapi-design-system/.eslintrc

@@ -2,7 +2,7 @@ import { useRef, useState, useEffect } from 'react';
 
 export const useTooltipHandlers = (delay: number) => {
   const [visible, setVisible] = useState(false);
-  const timerRef = useRef<number | null>(null);
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
 
   const clearTimer = () => {
     if (typeof timerRef.current === 'number') {

packages/strapi-design-system/module.d.ts

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./dist"
+  },
+  "exclude": ["**/*.test.tsx", "**/*.test.ts", "**/__tests__/**/*"],
+  "include": ["src", "styled.d.ts", "module.d.ts"]
+}

packages/strapi-design-system/package.json

@@ -15,17 +15,11 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx",
-    "types": ["vite/client", "jest", "@testing-library/jest-dom"],
+    "types": ["node", "jest", "@testing-library/jest-dom"],
     "baseUrl": ".",
     "paths": {
       "@test/*": ["./test/*"]
     }
   },
-  "exclude": ["**/*.test.tsx", "**/*.test.ts"],
-  "include": ["src", "styled.d.ts"],
-  "references": [
-    {
-      "path": "./tsconfig.node.json"
-    }
-  ]
+  "include": ["src", "test", "styled.d.ts", "module.d.ts", "*.config.ts", "*.config.mjs"]
 }