@asaleh37/ui-base 1.0.4 → 1.0.6

package/eslint.config.js

@@ -0,0 +1,29 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      "@typescript-eslint/no-explicit-any": "off",
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asaleh37/ui-base",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "",
   "license": "ISC",
   "author": "Ahmed Saleh Mohamed",
@@ -9,7 +9,8 @@
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "scripts": {
-    "build": "rollup -c --bundleConfigAsCjs"
+    "build": "rollup -c --bundleConfigAsCjs",
+    "dev": "vite"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^28.0.3",
@@ -21,10 +22,54 @@
     "rollup-plugin-dts": "^6.2.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "tslib": "^2.8.1",
-    "typescript": "^5.8.3"
+    "@eslint/js": "^9.19.0",
+    "@types/react-dom": "^19.0.3",
+    "@types/react-i18next": "^7.8.3",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.19.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.18",
+    "globals": "^15.14.0",
+    "typescript": "~5.7.2",
+    "typescript-eslint": "^8.22.0",
+    "vite": "^6.1.0"
   },
   "dependencies": {
     "rollup": "^4.41.1",
-    "rollup-plugin-postcss": "^4.0.2"
+    "rollup-plugin-postcss": "^4.0.2",
+    "@emotion/cache": "^11.14.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-brands-svg-icons": "^6.7.2",
+    "@fortawesome/free-regular-svg-icons": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
+    "@hookform/resolvers": "^4.1.0",
+    "@mui/icons-material": "^6.4.8",
+    "@mui/material": "^6.4.4",
+    "@mui/x-charts": "^7.27.0",
+    "@mui/x-data-grid-premium": "^8.3.0",
+    "@mui/x-date-pickers": "^7.27.0",
+    "@mui/x-license": "^8.3.0",
+    "@mui/x-tree-view": "^7.26.0",
+    "@react-spring/web": "^9.7.5",
+    "@reduxjs/toolkit": "^2.5.1",
+    "axios": "^1.8.1",
+    "i18next": "^24.2.2",
+    "i18next-browser-languagedetector": "^8.0.3",
+    "i18next-http-backend": "^3.0.2",
+    "moment": "^2.30.1",
+    "oidc-client-ts": "^3.1.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-hook-form": "^7.54.2",
+    "react-i18next": "^15.4.0",
+    "react-redux": "^9.2.0",
+    "react-router-dom": "^7.1.5",
+    "react-toastify": "^11.0.5",
+    "stylis": "^4.3.6",
+    "stylis-plugin-rtl": "^2.1.1",
+    "zod": "^3.24.2"
   }
 }

package/src/components/BaseApp.tsx

@@ -0,0 +1,28 @@
+import { Provider } from "react-redux";
+import { store } from "../redux/store";
+import { Counter } from "./Counter";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { fab } from "@fortawesome/free-brands-svg-icons";
+import { far } from "@fortawesome/free-regular-svg-icons";
+import { fas } from "@fortawesome/free-solid-svg-icons";
+import { LicenseInfo } from "@mui/x-license";
+
+LicenseInfo.setLicenseKey(
+  "c2bd611fa642666253500ab9c8e4f78fTz0xMTE4MjEsRT0xNzc2OTg4Nzk5MDAwLFM9cHJlbWl1bSxMTT1zdWJzY3JpcHRpb24sUFY9aW5pdGlhbCxLVj0y"
+);
+import "react-toastify/dist/ReactToastify.css";
+
+library.add(fab);
+library.add(far);
+library.add(fas);
+
+export type BaseAppProps = {};
+
+export const BaseApp: React.FC<BaseAppProps> = (props) => {
+  return (
+    <Provider store={store}>
+      <div>Base App</div>
+      <Counter />
+    </Provider>
+  );
+};

package/src/components/Counter.tsx

@@ -0,0 +1,32 @@
+import { useDispatch, useSelector } from "react-redux";
+import { RootState } from "../redux/store";
+import { Button } from "@mui/material";
+import { CounterActions } from "../redux/CounterSlice";
+
+export const Counter: React.FC = () => {
+  const counter = useSelector((state: RootState) => state.counter.value);
+  const dispatch = useDispatch();
+  return (
+    <>
+      <div>Counter : {counter}</div>
+      <Button
+        variant="contained"
+        color="success"
+        onClick={() => {
+          dispatch(CounterActions.increament());
+        }}
+      >
+        increment
+      </Button>
+      <Button
+        variant="contained"
+        color="error"
+        onClick={() => {
+          dispatch(CounterActions.decreament());
+        }}
+      >
+        decrement
+      </Button>
+    </>
+  );
+};

package/src/components/index.ts

@@ -1,2 +1 @@
-export * from "./Comp1/Comp1";
-export * from "./Comp2/Comp2";
+export * from "./BaseApp";

package/src/redux/CounterSlice.ts

@@ -0,0 +1,17 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const CounterSlice = createSlice({
+  name: "counter",
+  initialState: { value: 0 },
+  reducers: {
+    increament: (state) => {
+      state.value = state.value + 1;
+    },
+    decreament: (state) => {
+      state.value = state.value - 1;
+    },
+  },
+});
+
+export const CounterActions = CounterSlice.actions;
+export default CounterSlice.reducer;

package/src/redux/store.ts

@@ -0,0 +1,20 @@
+import { configureStore } from "@reduxjs/toolkit";
+import CounterReducer from "./CounterSlice";
+// import AppLayoutReducer from "./features/common/AppLayoutSlice";
+// import UserSessionReducer from "./features/common/UserSessionSlice";
+// import LoadingMaskReducer from "./features/common/LoadingMaskSlice";
+// import CommonStoreReducer from "./features/business/CommonStoreSlice";
+
+export const store = configureStore({
+  reducer: {
+    // AppLayout: AppLayoutReducer,
+    // UserSession: UserSessionReducer,
+    // loadingMask: LoadingMaskReducer,
+    // commonStores: CommonStoreReducer,
+    counter: CounterReducer,
+  },
+});
+
+// Infer the `RootState` and `AppDispatch` types from the store itself
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;

package/src/components/Comp1/Comp1.tsx

@@ -1,3 +0,0 @@
-export const Comp1: React.FC<string> = (name) => {
-  return <div>Comp1 :{name}</div>;
-};

package/src/components/Comp2/Comp2.tsx

@@ -1,3 +0,0 @@
-export const Comp2: React.FC<string> = (name) => {
-  return <div>Comp2 :{name}</div>;
-};