Merge pull request #6 from shubhadip/treeshake

refactor: treeshake components

package.json

@@ -20,6 +20,24 @@
     "src/*",
     "types/*"
   ],
+  "exports": {
+    "./apptextbox": {
+      "import": "./dist/apptextbox.js",
+      "require": "./dist/apptextbox.cjs"
+    },
+    "./appbutton": {
+      "import": "./dist/appbutton.js",
+      "require": "./dist/appbutton.cjs"
+    },
+    "./svgicons": {
+      "import": "./dist/svgicons.js",
+      "require": "./dist/svgicons.cjs"
+    },
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build && cp -r ./src/lib ./dist && cp tailwind.config.cjs ./dist/tailwind-base.config.js",
@@ -43,14 +61,14 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "vite-plugin-css-injected-by-js": "^3.3.0"
   },
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "tailwindcss": "^3.3.2"
   },
-  "module": "./dist/index.es.js",
   "types": "dist/lib/index.d.ts",
   "devDependencies": {
     "@commitlint/cli": "^17.5.0",
@@ -123,6 +141,7 @@
     "vite": "^4.3.2",
     "vite-plugin-dts": "^2.3.0",
     "vite-plugin-istanbul": "^4.0.1",
+    "vite-plugin-lib-inject-css": "^1.3.0",
     "vite-tsconfig-paths": "^4.2.0"
   },
   "lint-staged": {

src/assets/css/watch-tailwind.css

@@ -554,6 +554,14 @@ video {
   top: 2.5rem;
 }
 
+.left-4 {
+  left: 1rem;
+}
+
+.right-4 {
+  right: 1rem;
+}
+
 .-mt-2 {
   margin-top: -0.5rem;
 }
@@ -578,6 +586,11 @@ video {
   border-radius: 0.5rem;
 }
 
+.bg-sky-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(56 189 248 / var(--tw-bg-opacity));
+}
+
 .text-center {
   text-align: center;
 }

src/lib/app-button/index.tsx

@@ -25,7 +25,7 @@ export const AppButton = (props: IButtonProps): JSX.Element => {
 		customTitleClass?: string;
 	}): JSX.Element | null => {
 		return props.title ? (
-			<p className={[styles.title, customTitleClass].join(' ')}>{title}</p>
+			<div className={[styles.title, customTitleClass].join(' ')}>{title}</div>
 		) : null;
 	};
 

src/lib/index.ts

@@ -1,7 +1,2 @@
-import { AppButton } from './app-button';
-import { AppTextBox } from './app-textbox';
-import { Eye, TailessArrow } from './svgicons';
-
 import { ButtonThemes, AppDialogVariant } from './types/enums';
-
-export { ButtonThemes, AppDialogVariant, AppButton, AppTextBox, Eye, TailessArrow };
+export { ButtonThemes, AppDialogVariant };

src/stories/app-button.stories.tsx

@@ -1,5 +1,6 @@
 import { expect } from '@storybook/jest';
-import { AppButton, ButtonThemes } from '../lib';
+import { ButtonThemes } from '../lib';
+import { AppButton } from '../lib/app-button';
 import type { Meta, StoryObj } from '@storybook/react';
 import { waitFor, within, userEvent } from '@storybook/testing-library';
 

src/stories/app-textbox.stories.tsx

@@ -1,5 +1,5 @@
 import { expect } from '@storybook/jest';
-import { AppTextBox } from '../lib/index.ts';
+import { AppTextBox } from '../lib/app-textbox';
 import type { Meta, StoryObj } from '@storybook/react';
 import { within, userEvent, waitFor } from '@storybook/testing-library';
 

src/tests/app-button.spec.ts

@@ -1,7 +1,7 @@
 import { test, expect } from '@playwright/test';
 
 test('Primary Button Test Case', async ({ page }) => {
-	await page.goto('http://localhost:6006/iframe.html?id=appbutton--primary');
+	await page.goto('http://localhost:6006/iframe.html?args=&id=stories-app-button--primary&viewMode=story');
 	const titleLocator = page.locator("[class*='_title_']");
 	expect(await titleLocator.textContent()).toBe('Button');
 });

vite.config.ts

@@ -2,10 +2,12 @@ import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import path from 'path';
 import IstanbulPlugin from 'vite-plugin-istanbul';
+import { libInjectCss } from 'vite-plugin-lib-inject-css';
 
 export default defineConfig({
 	plugins: [
 		react(),
+		libInjectCss(),
 		IstanbulPlugin({
 			include: 'src/*',
 			exclude: ['node_modules', 'test/'],
@@ -17,14 +19,20 @@ export default defineConfig({
 		minify: true,
 		cssCodeSplit: true,
 		lib: {
-			entry: path.resolve(__dirname, 'src/lib/index.ts'),
-			name: 'react-component-library',
-			formats: ['es'],
-			fileName: (format) => `index.${format}.js`,
+			entry: {
+				appbutton: path.resolve(__dirname, 'src/lib/app-button/index.tsx'),
+				apptextbox: path.resolve(__dirname, 'src/lib/app-textbox/index.tsx'),
+				svgicons: path.resolve(__dirname, 'src/lib/svgicons/index.tsx'),
+				index: path.resolve(__dirname, 'src/lib/index.ts')
+			},
+			formats: ['es', 'cjs'],
 		},
 		rollupOptions: {
 			external: ['react', 'react-dom'],
 			output: {
+				preserveModules: false,
+				manualChunks: undefined,
+				inlineDynamicImports: false,
 				globals: {
 					react: 'React',
 					'react-dom': 'ReactDOM',