@abmrifat1/js-ui-component-library 0.0.0-stage → 1.0.0

package/README.md

@@ -1,3 +1,30 @@
-# Temporary Holding Version
+# React + TypeScript + Vite
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default {
+  // other rules...
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: ['./tsconfig.json', './tsconfig.node.json'],
+    tsconfigRootDir: __dirname,
+  },
+}
+```
+
+- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
+- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list

package/dist/App.d.ts

@@ -0,0 +1,2 @@
+declare function App(): import('react').JSX.Element;
+export default App;

package/dist/Button.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    align?: 'left' | 'center' | 'right';
+    size?: 'small' | 'large' | 'full';
+    color?: 'blue' | 'red' | 'white';
+    outline?: 'primary' | 'default';
+    children: React.ReactNode;
+}
+export declare const Button: React.FC<ButtonProps>;

package/dist/index.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),u=({align:l="center",size:t="small",color:e="blue",outline:n="default",children:f,style:o,...i})=>{const s={display:"flex",width:"100%",justifyContent:l==="left"?"flex-start":l==="right"?"flex-end":"center",marginBottom:"16px"},d={display:"inline-flex",alignItems:"center",justifyContent:"center",width:t==="full"?"100%":"auto",padding:t==="small"?"6px 12px":"12px 24px",fontSize:t==="small"?"14px":t==="large"?"18px":"16px",border:n==="primary"?"2px solid #007bff":"1px solid #ccc",backgroundColor:e==="blue"?"#007bff":e==="red"?"#dc3545":"#ffffff",color:e==="white"?"#000000":"#ffffff",cursor:"pointer",borderRadius:"4px",...o};return r.jsx("div",{style:s,children:r.jsx("button",{style:d,...i,children:f})})};exports.Button=u;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { Button } from './Button';
+export type { ButtonProps } from './Button';

package/dist/index.esm.js

@@ -0,0 +1,34 @@
+import { jsx as l } from "react/jsx-runtime";
+const s = ({
+  align: f = "center",
+  size: t = "small",
+  color: e = "blue",
+  outline: r = "default",
+  children: n,
+  style: o,
+  ...p
+}) => {
+  const d = {
+    display: "flex",
+    width: "100%",
+    justifyContent: f === "left" ? "flex-start" : f === "right" ? "flex-end" : "center",
+    marginBottom: "16px"
+  }, i = {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: t === "full" ? "100%" : "auto",
+    padding: t === "small" ? "6px 12px" : "12px 24px",
+    fontSize: t === "small" ? "14px" : t === "large" ? "18px" : "16px",
+    border: r === "primary" ? "2px solid #007bff" : "1px solid #ccc",
+    backgroundColor: e === "blue" ? "#007bff" : e === "red" ? "#dc3545" : "#ffffff",
+    color: e === "white" ? "#000000" : "#ffffff",
+    cursor: "pointer",
+    borderRadius: "4px",
+    ...o
+  };
+  return /* @__PURE__ */ l("div", { style: d, children: /* @__PURE__ */ l("button", { style: i, ...p, children: n }) });
+};
+export {
+  s as Button
+};

package/dist/main.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,46 @@
 {
   "name": "@abmrifat1/js-ui-component-library",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.0.0",
+  "description": "Reusable React ui component with align, size, color, and outline props.",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.cjs.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": ["dist"],
+  "sideEffects": false,
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "prepublishOnly": "npm run build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "^26.6.5",
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15",
+    "@typescript-eslint/eslint-plugin": "^6.10.0",
+    "@typescript-eslint/parser": "^6.10.0",
+    "@vitejs/plugin-react": "^4.2.0",
+    "eslint": "^8.53.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.4",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.0",
+    "vite-plugin-dts": "^5.1.2"
+  }
+}