Boilerplate

app/lib/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "react-sol",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "rollup -c -w"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^25.0.8",
+    "@rollup/plugin-node-resolve": "^15.3.1",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@types/react": "^18.3.27",
+    "@types/react-dom": "^18.3.7",
+    "autoprefixer": "^10.4.23",
+    "postcss": "^8.5.6",
+    "rollup": "^4.20.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "typescript": "^5.5.4"
+  }
+}

app/lib/rollup.config.js

@@ -0,0 +1,25 @@
+import typescript from '@rollup/plugin-typescript';
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import postcss from 'rollup-plugin-postcss';
+import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+
+export default {
+    input: 'src/index.ts',
+    output: [
+        { file: 'dist/index.cjs.js', format: 'cjs', sourcemap: true },
+        { file: 'dist/index.esm.js', format: 'esm', sourcemap: true }
+    ],
+    plugins: [
+        peerDepsExternal(),
+        resolve(),
+        commonjs(),
+        typescript({ tsconfig: './tsconfig.json' }),
+        postcss({
+            modules: true,          // keep using CSS modules
+            extract: 'index.css',   // <-- emit dist/index.css
+            extensions: ['.css']
+        })
+    ],
+    external: ['react', 'react-dom']
+};

app/lib/src/components/Button/Button.module.css

@@ -0,0 +1,27 @@
+.btn {
+    padding: 8px 16px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 14px;
+    transition: background-color 0.2s;
+}
+
+.btnPrimary {
+    background: #007bff;
+    color: white;
+}
+
+.btnPrimary:hover:not(:disabled) {
+    background: #0056b3;
+}
+
+.btnSecondary {
+    background: #6c757d;
+    color: white;
+}
+
+.btn:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}

app/lib/src/components/Button/Button.tsx

@@ -0,0 +1,28 @@
+// src/components/Button/Button.tsx
+import React from 'react';
+import styles from './Button.module.css';
+
+type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant?: 'primary' | 'secondary';
+};
+
+export const Button: React.FC<ButtonProps> = ({
+                                                  variant = 'primary',
+                                                  className,
+                                                  children,
+                                                  ...props
+                                              }) => {
+    const variantClass =
+        variant === 'primary' ? styles.btnPrimary : styles.btnSecondary;
+
+    return (
+        <button
+            className={[styles.btn, variantClass, className]
+                .filter(Boolean)
+                .join(' ')}
+            {...props}
+        >
+            {children}
+        </button>
+    );
+};

app/lib/src/global.d.ts

@@ -0,0 +1,7 @@
+// src/global.d.ts
+declare module '*.module.css' {
+    const classes: { [key: string]: string };
+    export default classes;
+}
+
+declare module '*.css';

app/lib/src/index.ts

@@ -0,0 +1 @@
+export { Button } from './components/Button/Button';

app/lib/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "jsx": "react-jsx",
+    "declaration": true,
+    "outDir": "./dist",
+    "strict": true,
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "skipLibCheck": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}