init

.eslintrc.cjs

@@ -11,6 +11,7 @@ module.exports = {
   },
   plugins: ['react-refresh'],
   rules: {
-    'react-refresh/only-export-components': 'warn'
+    'react-refresh/only-export-components': 'warn',
+    
   }
 };

package.json

@@ -9,13 +9,18 @@
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "build-library": "rollup -c"
   },
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.21.8",
+    "@babel/preset-env": "^7.21.5",
+    "@babel/preset-react": "^7.18.6",
+    "@rollup/plugin-babel": "^6.0.3",
     "@storybook/addon-essentials": "^7.0.15",
     "@storybook/addon-interactions": "^7.0.15",
     "@storybook/addon-links": "^7.0.15",
@@ -33,6 +38,16 @@
     "eslint-plugin-react-refresh": "^0.3.4",
     "eslint-plugin-storybook": "^0.6.12",
     "prop-types": "^15.8.1",
+    "rollup": "^3.23.0",
+    "rollup-plugin-babel": "^4.4.0",
+    "rollup-plugin-commonjs": "^10.1.0",
+    "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-sass": "^1.12.19",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-typescript2": "^0.34.1",
+    "rollup-plugin-uglify": "^6.0.4",
     "storybook": "^7.0.15",
     "typescript": "^5.0.2",
     "vite": "^4.3.2"

rollup.config.js

@@ -0,0 +1,37 @@
+import commonjs from 'rollup-plugin-commonjs';
+import resolve from 'rollup-plugin-node-resolve';
+import { terser } from 'rollup-plugin-terser';
+import typescript from 'rollup-plugin-typescript2';
+import postcss from 'rollup-plugin-postcss';
+import babel from '@rollup/plugin-babel';
+
+export default {
+  input: 'src/index.ts',
+  output: [
+    {
+      file: 'dist/library.js',
+      format: 'cjs',
+      sourcemap: true,
+    },
+    {
+      file: 'dist/library.min.js',
+      format: 'cjs',
+      sourcemap: true,
+      plugins: [terser()],
+    },
+  ],
+  plugins: [
+    babel({
+        babelHelpers: 'bundled',
+        exclude: 'node_modules/**', // Exclude any unnecessary directories
+      }),
+    resolve(),
+    commonjs(),
+    typescript({
+      tsconfig: 'tsconfig.json',
+      allowImportPathExtension: true,
+    }),
+    postcss()
+  ],
+  external: ['react', 'react-dom', 'react/jsx-runtime'], // Specify any external dependencies here
+};

src/index.ts

@@ -0,0 +1 @@
+export { default as MyComponent } from './stories/Button';

src/main.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
+import App from './App'
 import './index.css'
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(

src/stories/Button.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import './button.css';
 
 interface ButtonProps {
@@ -46,3 +45,5 @@ export const Button = ({
     </button>
   );
 };
+
+export default Button;

src/stories/Header.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { Button } from './Button';
 import './header.css';
 

tsconfig.json

@@ -6,11 +6,13 @@
     "skipLibCheck": true,
 
     /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
+    "allowJs": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "noEmit": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "noEmit": true,
     "jsx": "react-jsx",
 
     /* Linting */