ready for build

Author: tareq1988

README.md

@@ -14,67 +14,21 @@ yarn add @wedevs/tail-react
 
 ## Usage
 
-Once installed, you can import and use the components in your React application as follows:
-
-```jsx
-import React from 'react';
-import { Button, Table } from '@wedevs/tail-react';
-
-const App = () => {
-  return (
-    <div>
-      <Button variant="primary" style="fill" size="medium" onClick={() => alert('Button clicked!')}>
-        Click Me
-      </Button>
-
-      <Table>
-        <Table.Header>
-          <th>ID</th>
-          <th>Name</th>
-          <th>Age</th>
-        </Table.Header>
-        <Table.Body
-          items={users}
-          renderRow={(item) => (
-            <tr key={item.id}>
-              <td>{item.id}</td>
-              <td>{item.name}</td>
-              <td>{item.age}</td>
-            </tr>
-          )}
-        />
-      </Table>
-    </div>
-  );
-};
-
-export default App;
+On your `tailwind.config.js` file, update the content entry:
+
+```diff
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
++    "node_modules/tail-react/dist/index.js"
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [
++    import('@tailwindcss/forms'),
+  ],
+}
 ```
-
-## Components
-
-The component library includes the following components:
-
-- `Button`: A customizable button component with various styles and sizes.
-
-- `Table`: A flexible and customizable table component for displaying data in tabular format.
-
-## Customization
-
-The components are built with Tailwind CSS, providing you with the flexibility to customize their appearance by leveraging Tailwind's utility classes. You can also pass custom CSS classes using the `className` prop to apply additional styles specific to your project.
-
-## Documentation
-
-For detailed information on each component and its available props, please refer to the documentation provided with the component library.
-
-## License
-
-This component library is open-source and distributed under the MIT License. You are free to use, modify, and distribute it in your projects.
-
-## Contributing
-
-Contributions to this component library are welcome! If you find any issues or have suggestions for improvements, please open an issue or submit a pull request on the project's GitHub repository.
-
-## Acknowledgments
-
-A special thanks to the Tailwind CSS and React communities for their efforts in creating and maintaining these powerful tools. Their contributions have made it easier for developers like us to create beautiful and functional user interfaces.

package.json

@@ -1,8 +1,37 @@
 {
   "name": "tail-react",
-  "private": true,
-  "version": "0.0.0",
+  "version": "0.1.0",
+  "description": "A React UI component library based on Tailwind CSS",
+  "author": "Tareq Hasan",
+  "license": "MIT",
+  "homepage": "https://github.com/weDevsOfficial/tail-react",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/weDevsOfficial/tail-react.git"
+  },
+  "bugs": {
+    "url": "https://github.com/weDevsOfficial/tail-react/issues"
+  },
+  "keywords": [
+    "react",
+    "tailwind",
+    "tailwindcss",
+    "tailwindcss-components",
+    "tailwindcss-react"
+  ],
   "type": "module",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.umd.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.umd.cjs"
+    }
+  },
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
@@ -19,6 +48,7 @@
   },
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.4",
+    "@types/node": "^20.4.7",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
@@ -28,9 +58,11 @@
     "eslint": "^8.45.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
+    "path": "^0.12.7",
     "postcss": "^8.4.27",
     "tailwindcss": "^3.3.3",
     "typescript": "^5.0.2",
-    "vite": "^4.4.5"
+    "vite": "^4.4.5",
+    "vite-plugin-dts": "^3.4.0"
   }
 }

src/App.tsx

@@ -1,20 +1,20 @@
 import ButtonExample from '@/Components/Button/Example';
-import TableExample from '@/Components/Table/Example';
 import DropdownExample from '@/Components/Dropdown/Example';
+import TableExample from '@/Components/Table/Example';
 import TextExample from '@/Components/TextField/Example';
-import ModalExample from './Components/Modal/Example';
 import ContextulExample from './Components/ContextualHelp/Example';
+import ModalExample from './Components/Modal/Example';
 import SwitchExample from './Components/SwitchInput/Example';
 
 const App = () => {
   return (
     <div className="container mx-auto p-12">
-      {/* <TextExample /> */}
-      {/* <DropdownExample /> */}
-      {/* <TableExample /> */}
-      {/* <ButtonExample /> */}
-      {/* <ModalExample /> */}
-      {/* <ContextulExample /> */}
+      <TextExample />
+      <DropdownExample />
+      <TableExample />
+      <ButtonExample />
+      <ModalExample />
+      <ContextulExample />
       <SwitchExample />
     </div>
   );

src/Components/ContextualHelp/ContextualHelp.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect, PropsWithChildren } from 'react';
+import { useState, useRef, useEffect, PropsWithChildren } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { Transition } from '@headlessui/react';
 import { QuestionMarkCircleIcon } from '@heroicons/react/24/outline';

src/Components/ContextualHelp/Example.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { ContextualHelp } from './ContextualHelp';
 
 const ContextulExample = () => {

src/Components/Modal/ConfirmModal.tsx

@@ -57,4 +57,4 @@ const ConfirmModal = ({
   );
 };
 
-export default ConfirmModal;
+export { ConfirmModal };

src/Components/Modal/Example.tsx

@@ -1,8 +1,8 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 import { Modal, ModalActions, ModalBody, ModalHeader } from './Modal';
 import { Button } from '@/Components/Button';
-import ConfirmModal from './ConfirmModal';
+import { ConfirmModal } from './ConfirmModal';
 
 const ModalExample = () => {
   const [isOpen, setIsOpen] = useState(false);

src/Components/Modal/index.ts

@@ -1 +1,2 @@
 export * from './Modal';
+export * from './ConfirmModal';

src/Components/SwitchInput/SwitchInput.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, ReactNode } from 'react';
+import { useState, useEffect, ReactNode } from 'react';
 import { Switch } from '@headlessui/react';
 import classNames from 'classnames';
 

src/Components/TextField/Example.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment, useState } from 'react';
+import { Fragment, useState } from 'react';
 import TextField from './TextField';
 import { EnvelopeIcon, UserIcon } from '@heroicons/react/24/outline';
 

src/Components/index.ts

@@ -0,0 +1,7 @@
+export * from './Button';
+export * from './ContextualHelp';
+export * from './Dropdown';
+export * from './Modal';
+export * from './SwitchInput';
+export * from './Table';
+export * from './TextField';

src/index.ts

@@ -0,0 +1 @@
+export * from './Components';

tsconfig.json

@@ -23,6 +23,7 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["src"],
+  "include": ["src/**/*"],
+  "exclude": ["src/App.tsx", "src/Components/**/Example.tsx"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

vite.config.ts

@@ -1,12 +1,35 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+import dts from 'vite-plugin-dts';
+import { resolve } from 'path';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    react(),
+    dts({
+      insertTypesEntry: true,
+    }),
+  ],
   resolve: {
     alias: {
       '@': '/src',
     },
   },
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/index.ts'),
+      name: 'tail-react',
+      fileName: 'index',
+    },
+    rollupOptions: {
+      external: ['react', 'react-dom'],
+      output: {
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM',
+        },
+      },
+    },
+  },
 });