Merge pull request #3 from zimmerman-team/chore/publish-1st-version

chore: set up config files to publish library

.gitignore

@@ -3,6 +3,9 @@
 # dependencies
 /node_modules
 dist
+zimmerman-DS.d.ts
+zimmerman-DS.js
+zimmerman-DS.js.map
 .env
 /.pnp
 .pnp.js

chromatic.config.json

@@ -0,0 +1,5 @@
+{
+  "onlyChanged": true,
+  "projectId": "Project:66cd1b47dde91377fdb2a1d8",
+  "zip": true
+}

package.json

@@ -2,25 +2,11 @@
   "name": "zimmerman-design-system",
   "version": "0.1.0",
   "private": false,
-  "dependencies": {
-    "@emotion/react": "^11.13.3",
-    "@emotion/styled": "^11.13.0",
-    "@mui/material": "^5.16.7",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^13.0.0",
-    "@testing-library/user-event": "^13.2.1",
-    "@types/jest": "^27.0.1",
-    "@types/node": "^16.7.13",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-scripts": "5.0.1",
-    "typescript": "^4.4.2",
-    "web-vitals": "^2.1.0"
-  },
   "scripts": {
-    "build": "rollup -c --bundleConfigAsCjs",
+    "_make-bundle": "rollup --config",
+    "_clear": "rimraf dist/*",
+    "_tsc": "tsc",
+    "build": "run-s _clear _tsc _make-bundle",
     "watch": "rollup --watch -c --bundleConfigAsCjs",
     "clean": "rimraf ./dist",
     "prebuild": "yarn clean",
@@ -57,10 +43,9 @@
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@chromatic-com/storybook": "^1.7.0",
-    "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^11.1.6",
     "@storybook/addon-a11y": "^8.2.9",
     "@storybook/addon-coverage": "0.0.7",
     "@storybook/addon-essentials": "^8.2.9",
@@ -76,15 +61,41 @@
     "auto": "^11.2.0",
     "chromatic": "^11.7.1",
     "eslint-plugin-storybook": "^0.8.0",
+    "npm-run-all": "^4.1.5",
     "prop-types": "^15.8.1",
     "rollup": "^4.21.1",
     "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "storybook": "^8.2.9",
-    "webpack": "^5.94.0"
+    "webpack": "^5.94.0",
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@mui/material": "^5.16.7",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^13.0.0",
+    "@testing-library/user-event": "^13.2.1",
+    "@types/jest": "^27.0.1",
+    "@types/node": "^16.7.13",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-scripts": "5.0.1",
+    "typescript": "^4.4.2",
+    "web-vitals": "^2.1.0"
+  },
+
+  "peerDependencies": {
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@mui/material": "^5.16.7",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
+
   "description": "A design system library that contains components share across projects in the Zimmerman organisation",
-  "main": "dist/cjs/index.js",
+  "main": "dist/index.js",
+  "types": "dist/types/index.d.ts",
   "repository": "https://github.com/zimmerman-team/zimmerman-design-system.git",
   "author": "okorie2 <[email protected]>",
   "license": "MIT"

rollup.config.mjs

@@ -0,0 +1,26 @@
+import typescript from '@rollup/plugin-typescript';
+import dts from "rollup-plugin-dts";
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+
+const config = [
+  {
+    input: 'src/index.ts',
+    output: {
+      file: 'zimmerman-DS.js',
+      format: 'esm',
+      sourcemap: true,
+    },
+    external: ['react', 'react-dom', '@emotion/react', '@mui/material'],
+    plugins: [typescript({ tsconfig: './tsconfig.json' }), nodeResolve(), commonjs(), peerDepsExternal(),]
+  }, {
+    input: 'dist/types/index.d.ts',
+    output: {
+      file: 'zimmerman-DS.d.ts',
+      format: 'es'
+    },
+    plugins: [dts() ]
+  }
+];
+export default config;

src/components/buttons/button.stories.ts

@@ -22,7 +22,7 @@ export const Filled: Story = {
   args: {
     filled: true,
     label: "Button",
-    radius: "rounded",
+    radius: "circle",
     backgroundColor: "#000",
     color: "white",
     onClick: fn(),

src/components/buttons/button.tsx

@@ -17,7 +17,7 @@ type ButtonProps = {
   radius: "rounded" | "sharp" | "circle";
 };
 
-export default function Button(props: ButtonProps) {
+export default function MyButton(props: ButtonProps) {
   const { filled, backgroundColor, size, label, onClick, icon, color, radius } =
     props;
   const radiusSize = {

src/components/buttons/index.ts

@@ -1 +1 @@
-export * from "./button";
+export { default as Button } from "./button";

tsconfig.json

@@ -1,6 +1,9 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "es5",  
+    "declaration": true,
+    "outDir": "dist",
+    "declarationDir": "dist/types",
     "lib": [
       "dom",
       "dom.iterable",
@@ -17,10 +20,10 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "noEmit": true,
+    // "noEmit": true,
     "jsx": "react-jsx"
   },
   "include": [
-    "src"
+    "src/**/*"
   ]
 }