@pushpak_jangela/pushpak-ui-cli 1.0.0 → 1.1.2

package/bin/index.js

@@ -4,6 +4,8 @@ const { Command } = require("commander");
 const chalk = require("chalk");
 const path = require("path");
 const fs = require("fs-extra");
+const inquirer = require("inquirer");
+const { execSync } = require("child_process");
 
 const program = new Command();
 
@@ -11,11 +13,8 @@ const program = new Command();
    Helpers
 -------------------------------------------------------- */
 
-function isTypeScriptProject(projectRoot) {
-  return fs.existsSync(path.join(projectRoot, "tsconfig.json"));
-}
-
-function ensureReactProject(srcDir) {
+function ensureReactProject(projectRoot) {
+  const srcDir = path.join(projectRoot, "src");
   if (!fs.existsSync(srcDir)) {
     console.log(
       chalk.red("❌ src folder not found. Run this inside a React project.")
@@ -30,98 +29,132 @@ function ensureReactProject(srcDir) {
 
 program
   .name("pushpak-ui")
-  .description("Pushpak UI CLI – React component & dashboard generator")
-  .version("1.0.0");
+  .description("Pushpak UI CLI – Component generator")
+  .version("1.1.0");
 
 /* -------------------------------------------------------
-   INIT → Install EVERYTHING
+   INIT (MAIN ENTRY)
 -------------------------------------------------------- */
 
 program
   .command("init")
-  .description("Install all UI components & dashboard")
-  .action(() => {
-    const projectRoot = process.cwd();
-    const srcDir = path.join(projectRoot, "src");
+  .description("Initialize Pushpak UI components")
+  .action(async () => {
+    await initProject();
+  });
 
-    ensureReactProject(srcDir);
+/* -------------------------------------------------------
+   INIT LOGIC
+-------------------------------------------------------- */
 
-    const isTS = isTypeScriptProject(projectRoot);
-    const lang = isTS ? "ts" : "js";
+async function initProject() {
+  const projectRoot = process.cwd();
 
-    console.log(
-      chalk.cyan(`ℹ Detected ${isTS ? "TypeScript" : "JavaScript"} project`)
-    );
+  ensureReactProject(projectRoot);
 
-    const componentsSrc = path.join(
-      __dirname,
-      `../templates/components/${lang}`
-    );
-    const dashboardSrc = path.join(
-      __dirname,
-      `../templates/dashboard/${lang}`
-    );
+  const answers = await askQuestions();
 
-    const componentsDest = path.join(srcDir, "components/ui");
-    const dashboardDest = path.join(srcDir, "dashboard");
+  const lang = answers.language === "TypeScript" ? "ts" : "js";
 
-    fs.ensureDirSync(componentsDest);
-    fs.ensureDirSync(dashboardDest);
+  for (const componentType of answers.componentTypes) {
+    for (const component of answers.components) {
+      copyComponent({
+        lang,
+        componentType,
+        componentName: component,
+        projectRoot,
+      });
+    }
+  }
 
-    fs.copySync(componentsSrc, componentsDest);
-    fs.copySync(dashboardSrc, dashboardDest);
+  if (answers.componentTypes.includes("muiComponent")) {
+    installMui();
+  }
 
-    console.log(chalk.green("✔ All UI components added"));
-    console.log(chalk.green("✔ Dashboard added"));
-  });
+  console.log(chalk.green("\n✅ Components installed successfully\n"));
+}
 
 /* -------------------------------------------------------
-   ADD → Install SINGLE component
+   INQUIRER QUESTIONS
 -------------------------------------------------------- */
 
-program
-  .command("add <component>")
-  .description("Install a single UI component")
-  .action((component) => {
-    const projectRoot = process.cwd();
-    const srcDir = path.join(projectRoot, "src");
-
-    ensureReactProject(srcDir);
+async function askQuestions() {
+  return inquirer.prompt([
+    {
+      type: "list",
+      name: "language",
+      message: "Which language do you want?",
+      choices: ["TypeScript", "JavaScript"],
+    },
+    {
+      type: "checkbox",
+      name: "componentTypes",
+      message: "Which component layers do you want?",
+      choices: [
+        { name: "uiComponent (Plain React)", value: "uiComponent" },
+        { name: "muiComponent (MUI-based)", value: "muiComponent" },
+      ],
+      validate: (value) =>
+        value.length > 0 || "Select at least one component type",
+    },
+    {
+      type: "checkbox",
+      name: "components",
+      message: "Select components to install",
+      choices: ["Button", "Select", "Input"],
+      validate: (value) =>
+        value.length > 0 || "Select at least one component",
+    },
+  ]);
+}
 
-    const isTS = isTypeScriptProject(projectRoot);
-    const lang = isTS ? "ts" : "js";
-    const ext = isTS ? "tsx" : "jsx";
+/* -------------------------------------------------------
+   COPY COMPONENT FOLDER
+-------------------------------------------------------- */
 
-    const componentSrc = path.join(
-      __dirname,
-      `../templates/components/${lang}/${component}.${ext}`
+function copyComponent({ lang, componentType, componentName, projectRoot }) {
+  const src = path.join(
+    __dirname,
+    "../templates/components",
+    lang,
+    componentType,
+    componentName
+  );
+
+  const dest = path.join(
+    projectRoot,
+    "src/components",
+    componentType,
+    componentName
+  );
+
+  if (!fs.existsSync(src)) {
+    console.log(
+      chalk.red(`❌ Missing template: ${componentType}/${componentName}`)
     );
+    return;
+  }
 
-    if (!fs.existsSync(componentSrc)) {
-      console.log(
-        chalk.red(`❌ Component "${component}" does not exist.`)
-      );
-      process.exit(1);
-    }
-
-    const destDir = path.join(srcDir, "components/ui");
-    const destFile = path.join(destDir, `${component}.${ext}`);
+  fs.ensureDirSync(dest);
+  fs.copySync(src, dest);
 
-    fs.ensureDirSync(destDir);
+  console.log(
+    chalk.green(`✔ Added ${componentType}/${componentName}`)
+  );
+}
 
-    if (fs.existsSync(destFile)) {
-      console.log(
-        chalk.yellow(`⚠ "${component}" already exists. Skipping.`)
-      );
-      return;
-    }
+/* -------------------------------------------------------
+   INSTALL MUI (ONLY IF SELECTED)
+-------------------------------------------------------- */
 
-    fs.copySync(componentSrc, destFile);
+function installMui() {
+  console.log(chalk.cyan("\n📦 Installing MUI dependencies...\n"));
 
-    console.log(
-      chalk.green(`✔ "${component}" component added`)
-    );
-  });
+  execSync(
+    "npm install @mui/material @mui/icons-material @emotion/react @emotion/styled",
+    { stdio: "inherit" }
+  );
+}
 
 /* -------------------------------------------------------
    Parse CLI

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushpak_jangela/pushpak-ui-cli",
-  "version": "1.0.0",
+  "version": "1.1.2",
   "bin": {
     "pushpak-ui": "bin/index.js"
   },
@@ -15,6 +15,7 @@
   "dependencies": {
     "chalk": "^4.1.2",
     "commander": "^14.0.2",
-    "fs-extra": "^11.3.3"
+    "fs-extra": "^11.3.3",
+    "inquirer": "^13.1.0"
   }
 }

package/templates/components/ts/muiComponents/SelectComponent/index.tsx

@@ -0,0 +1,244 @@
+// @ts-nocheck
+import React, { useCallback, useState } from "react";
+import { COLORS } from "@/constants/Enums";
+import FormControl from "@mui/material/FormControl";
+import FormHelperText from "@mui/material/FormHelperText";
+import FormLabel from "@mui/material/FormLabel";
+import InfoIcon from '@mui/icons-material/Info';
+import MenuItem from "@mui/material/MenuItem";
+import { RootState } from "@/redux/store";
+import { SelectChangeEvent } from "@mui/material/Select";
+import Stack from "@mui/material/Stack";
+import StyledSelect from "./StyledSelect";
+import { Tooltip } from "@mui/material";
+import Typography from "@mui/material/Typography";
+import { useSelector } from "react-redux";
+import { initializeFieldValidation, INSelectInputProps } from "./selectComponentProps";
+
+const INSelectInput: React.FC<INSelectInputProps> = ({
+    defaultOpen,
+    defaultValue,
+    disabled,
+    error,
+    helperText,
+    label,
+    menuItems,
+    onBlur,
+    onBlurValidator,
+    onFieldErrorChange,
+    onValueChange,
+    required,
+    selectVariant,
+    size,
+    sx,
+    value,
+    validatorOptions,
+    variant,
+    tooltipMsg,
+}) => {
+    const mode = useSelector((state: RootState) => state.appStylesState.mode);
+
+    const [fieldValue, setFieldValue] = useState(defaultValue ?? value ?? "");
+
+    let defaultPlaceHolder = label ? `Select ${label}` : "Select";
+
+    let updatedMenuItems = (menuItems.length > 0)
+        ? [{ "label": defaultPlaceHolder, "value": "" }, ...menuItems]
+        : [{ "label": defaultPlaceHolder, "value": "" }];
+
+    // const handleOnChange = useCallback(async (event: SelectChangeEvent<unknown>) => {
+    //     let result:any = event.target.value;
+
+    //     if (typeof onValueChange !== "undefined") onValueChange(result);
+    //     setFieldValue(result);
+
+    //     let validation = initializeFieldValidation();
+
+    //     if (typeof onFieldErrorChange !== "undefined") onFieldErrorChange(validation);
+    // }, [onValueChange, onFieldErrorChange]);
+
+    const handleOnChange = useCallback(async (event: SelectChangeEvent<unknown>) => {
+        let result = event.target.value as string;
+
+        if (typeof onValueChange !== "undefined") onValueChange(result);
+        setFieldValue(result);
+
+        let validation = initializeFieldValidation();
+
+        if (typeof onFieldErrorChange !== "undefined") onFieldErrorChange(validation);
+
+        if (
+            result !== "" &&
+            typeof onBlurValidator !== "undefined" &&
+            typeof validatorOptions !== "undefined" &&
+            typeof onFieldErrorChange !== "undefined"
+        ) {
+            await onBlurValidator(result, validatorOptions)
+                .then((result:any) => {
+                    onFieldErrorChange(result)
+                })
+        }
+    }, [onValueChange, onBlurValidator, onFieldErrorChange, validatorOptions]);
+
+    const handleOnBlur = useCallback(() => {
+        let result = fieldValue;
+
+        if (fieldValue == "") {
+            result = defaultValue ?? "";
+        }
+
+        if (typeof onFieldErrorChange !== "undefined") {
+            onFieldErrorChange(initializeFieldValidation());
+        }
+
+        if (
+            required &&
+            result === "" &&
+            typeof onFieldErrorChange !== "undefined"
+        ) {
+            onFieldErrorChange({
+                "helperText": `${label ?? "Field"} is mandatory`,
+                "isError": true,
+                "isVerified": false,
+                "isWarning": false,
+            });
+        }
+
+        if (typeof onBlur !== "undefined") onBlur();
+    }, [onBlur, onFieldErrorChange, fieldValue, defaultValue, label, required]);
+
+    return (
+        <>
+            <FormControl
+                error={error}
+                fullWidth
+                variant={variant ?? "filled"}
+            >
+                <FormLabel>
+                    <Stack
+                        display="flex"
+                        flexDirection="row"
+                        alignItems="flex-start"
+                        gap={1}
+                    >
+                        {
+                            label &&
+                            <Typography sx={{
+                                fontSize: "1rem", color: (mode === "dark") ? COLORS?.CL_DR_TY : COLORS?.BGD_DR_THEME,
+                                "&.MuiTypography-root": {
+                                    lineHeight: "1.4375em"
+                                },
+                            }} variant="caption">
+                                {required ? `${label} *` : label}
+                            </Typography>
+                        }
+
+                        {
+                            tooltipMsg &&
+                            <Tooltip title={tooltipMsg} placement="right-end">
+                                <InfoIcon style={{ color: 'gray', fontSize: '1rem' }} />
+                            </Tooltip>
+                        }
+                    </Stack>
+                </FormLabel>
+
+                <StyledSelect
+                    defaultOpen={defaultOpen}
+                    defaultValue={defaultValue}
+                    disabled={disabled}
+                    disableUnderline={variant ? variant === "filled" : true}
+                    displayEmpty
+                    error={error}
+                    fullWidth
+                    inputProps={{
+                        "sx": {
+                            "color": ((value ?? fieldValue) === "") ? "rgba(0, 0, 0, 0.5)" : "rgba(0, 0, 0, 1)",
+                            "fontStyle": ((value ?? fieldValue) === "") ? "italic" : "normal",
+                            "&.MuiTypography-root": {
+                                lineHeight: "1.4375em"
+                            },
+                        }
+                    }}
+                    MenuProps={{
+                        "MenuListProps": {
+                            "sx": {
+                                // "borderRadius": "5px",
+                                // "padding": "0px",
+                            }
+                        }
+                    }}
+                    onBlur={handleOnBlur}
+                    onChange={handleOnChange}
+                    required={required}
+                    selectVariant={selectVariant ?? "normal"}
+                    size={size}
+                    sx={{
+                        ...sx,
+                        border: error ? "1px solid #D03240" : "",
+                    }}
+                    value={value ?? fieldValue}
+                >
+                    {
+                        updatedMenuItems.map((item) => {
+                            return (
+                                <MenuItem
+                                    value={item.value}
+                                    key={item.value}
+                                    sx={{
+                                        "&.Mui-selected": {
+                                            "backgroundColor": "rgba(0, 172, 172, 0.2)",
+                                        },
+                                        "&:hover": {
+                                            "backgroundColor": "rgba(0, 172, 172, 0.1)",
+                                        },
+                                        "padding": "10px",
+                                    }}
+                                >
+                                    {item.label}
+                                </MenuItem>
+                            );
+                        })
+                    }
+                </StyledSelect>
+
+                <FormHelperText
+                    sx={{
+                        "color": "#d32f2f",
+                        padding: "0 0.6em",
+                    }}
+                >
+                    {
+                        helperText
+                            ?
+                            <Stack
+                                display="flex"
+                                flexDirection="row"
+                                alignItems="center"
+                                gap="5px"
+                                marginLeft="-15px"
+                                sx={{
+                                    "fontSize": "10px",
+                                }}
+                            >
+                                {/* {
+                                    error &&
+                                    <ErrorIcon
+                                        fontSize="inherit"
+                                        sx={{
+                                            "marginTop": '-2px',
+                                        }}
+                                    />
+                                } */}
+
+                                {helperText}
+                            </Stack>
+                            :
+                            ""
+                    }
+                </FormHelperText>
+            </FormControl>
+        </>
+    );
+};
+
+export default React.memo(INSelectInput);

package/templates/components/ts/muiComponents/SelectComponent/selectComponentProps.ts

@@ -0,0 +1,63 @@
+// @ts-nocheck
+import { SxProps } from "@mui/system";
+
+export interface MenuItem {
+  value: string | number;
+  label: string;
+}
+export interface FieldValidation {
+    helperText: string;
+    isError: boolean;
+    isVerified: boolean;
+    isWarning?: boolean;
+}
+
+export function initializeFieldValidation(): FieldValidation {
+    return (
+        {
+            "helperText": "",
+            "isError": false,
+            "isVerified": false,
+            "isWarning": false,
+        }
+    );
+}
+
+export function initializeVerifiedFieldValidation(): FieldValidation {
+    return (
+        {
+            "helperText": "",
+            "isError": false,
+            "isVerified": true,
+            "isWarning": false,
+        }
+    );
+}
+
+export type SelectVariant =
+    "normal" |
+    "pagination";
+
+export interface INSelectInputProps {
+    defaultOpen?: boolean;
+    defaultValue?: string|number;
+    disabled?: boolean;
+    error?: boolean;
+    helperText?: string;
+    label?: string;
+    menuItems: MenuItem[];
+    onBlur?: () => void;
+    onBlurValidator?: (value: string, dependencies: Object) => Promise<FieldValidation>;
+    onFieldErrorChange?: (error: FieldValidation) => void;
+    onValueChange?: (value: string|number) => void;
+    required?: boolean;
+    selectVariant?: SelectVariant;
+    size?: "small" | "medium";
+    sx?: SxProps;
+    value?: any;
+    validatorOptions?: Object;
+    variant?: "filled" | "outlined" | "standard";
+    warning?: boolean;
+    tooltip?:boolean;
+    tooltipMsg?:string;
+}

package/templates/components/ts/muiComponents/SelectComponent/styledSelectComponent.tsx

@@ -0,0 +1,63 @@
+// @ts-nocheck
+import Select, { SelectProps } from "@mui/material/Select";
+import React from "react";
+import { SxProps } from "@mui/system";
+import styled from "@mui/system/styled";
+import { SelectVariant } from "./selectComponentProps";
+
+type StyledSelectProps = SelectProps & {
+    selectVariant?: SelectVariant;
+    error?:boolean;
+}
+
+const NormalSelectField: SxProps = {
+    "& .MuiSelect-select": {
+        "fontSize":"0.8rem",
+        "fontStyle":"normal",
+        "&:focus": {
+            "backgroundColor": "rgba(255, 255, 255, 1)",
+            "borderRadius": "5px",
+        },
+        "padding": "0px",
+    },
+    "& .MuiFilledInput-root": {
+        "fontStyle":"normal",
+        "background": "rgba(255, 255, 255, 1)",
+        "border": "1px solid transparent",
+        "&.Mui-error": {
+            "border": "1px solid #D03240",
+        },
+
+    },
+    "&.MuiInputBase-root": {
+        "fontStyle":"normal",
+        "height":"4.5vh",
+        "&.Mui-focused": {
+            "backgroundColor": "rgba(255, 255, 255, 1)",
+        },
+        "&:hover": {
+            "backgroundColor": "rgba(255, 255, 255, 1)",
+        },
+        "borderRadius": "5px",
+        "padding": "10px",
+        "border": "1px solid rgba(0, 0, 0, 0.1)",
+    },
+   
+    "backgroundColor": "rgba(255, 255, 255, 1)",
+    "border": "1px solid rgba(0, 0, 0, 0.2)",
+};
+
+const StyledSelect = styled(Select, {
+    "shouldForwardProp": (prop:any) => prop !== "selectVariant"
+})<StyledSelectProps>(( { selectVariant, error } ) => {
+    return {
+        ...(selectVariant == "normal" && NormalSelectField), 
+        ...(error && {
+            "& .MuiFilledInput-root": {
+                border: "1px solid #D03240",
+            },
+        })
+    };
+});
+
+export default React.memo(StyledSelect);

package/templates/components/ts/uiComponents/SelectComponent/index.tsx

@@ -0,0 +1,124 @@
+// @ts-nocheck
+import React, { useCallback, useState } from "react";
+
+import { selectStyles } from "./styledSelectComponent";
+import { initializeFieldValidation, INSelectInputProps } from "./selectComponentProps";
+
+const INSelectInput: React.FC<INSelectInputProps> = ({
+  defaultValue,
+  disabled,
+  error,
+  helperText,
+  label,
+  menuItems,
+  onBlur,
+  onBlurValidator,
+  onFieldErrorChange,
+  onValueChange,
+  required,
+  value,
+  validatorOptions,
+  tooltipMsg,
+}) => {
+  const [fieldValue, setFieldValue] = useState(
+    defaultValue ?? value ?? ""
+  );
+  const [showTooltip, setShowTooltip] = useState(false);
+
+  const placeholder = label ? `Select ${label}` : "Select";
+
+  const handleChange = useCallback(
+    async (e: React.ChangeEvent<HTMLSelectElement>) => {
+      const selectedValue = e.target.value;
+
+      setFieldValue(selectedValue);
+      onValueChange?.(selectedValue);
+      onFieldErrorChange?.(initializeFieldValidation());
+
+      if (
+        selectedValue &&
+        onBlurValidator &&
+        validatorOptions &&
+        onFieldErrorChange
+      ) {
+        const validation = await onBlurValidator(
+          selectedValue,
+          validatorOptions
+        );
+        onFieldErrorChange(validation);
+      }
+    },
+    [onValueChange, onBlurValidator, validatorOptions, onFieldErrorChange]
+  );
+
+  const handleBlur = useCallback(() => {
+    const val = fieldValue || defaultValue || "";
+
+    onFieldErrorChange?.(initializeFieldValidation());
+
+    if (required && !val) {
+      onFieldErrorChange?.({
+        helperText: `${label ?? "Field"} is mandatory`,
+        isError: true,
+        isVerified: false,
+      });
+    }
+
+    onBlur?.();
+  }, [fieldValue, defaultValue, required, label, onBlur]);
+
+  return (
+    <div style={selectStyles.container}>
+      {label && (
+        <div style={selectStyles.labelRow}>
+          <span style={selectStyles.label}>
+            {required ? `${label} *` : label}
+          </span>
+
+          {tooltipMsg && (
+            <span
+              style={selectStyles.tooltipWrapper}
+              onMouseEnter={() => setShowTooltip(true)}
+              onMouseLeave={() => setShowTooltip(false)}
+            >
+              ⓘ
+              {showTooltip && (
+                <span style={selectStyles.tooltipText}>
+                  {tooltipMsg}
+                </span>
+              )}
+            </span>
+          )}
+        </div>
+      )}
+
+      <select
+        value={value ?? fieldValue}
+        disabled={disabled}
+        onChange={handleChange}
+        onBlur={handleBlur}
+        style={{
+          ...selectStyles.select,
+          ...(disabled ? selectStyles.selectDisabled : {}),
+          ...(error ? selectStyles.selectError : {}),
+        }}
+      >
+        <option value="" disabled>
+          {placeholder}
+        </option>
+
+        {menuItems.map((item) => (
+          <option key={item.value} value={item.value}>
+            {item.label}
+          </option>
+        ))}
+      </select>
+
+      {helperText && (
+        <div style={selectStyles.helperText}>{helperText}</div>
+      )}
+    </div>
+  );
+};
+
+export default React.memo(INSelectInput);

package/templates/components/ts/uiComponents/SelectComponent/selectComponentProps.ts

@@ -0,0 +1,46 @@
+
+export interface MenuItem {
+  value: string | number;
+  label: string;
+}
+
+export interface FieldValidation {
+  helperText: string;
+  isError: boolean;
+  isVerified: boolean;
+  isWarning?: boolean;
+}
+
+export function initializeFieldValidation(): FieldValidation {
+  return {
+    helperText: "",
+    isError: false,
+    isVerified: false,
+    isWarning: false,
+  };
+}
+
+export type SelectVariant = "normal" | "pagination";
+
+export interface INSelectInputProps {
+  defaultOpen?: boolean;
+  defaultValue?: string | number;
+  disabled?: boolean;
+  error?: boolean;
+  helperText?: string;
+  label?: string;
+  menuItems: MenuItem[];
+  onBlur?: () => void;
+  onBlurValidator?: (
+    value: string,
+    dependencies: Object
+  ) => Promise<FieldValidation>;
+  onFieldErrorChange?: (error: FieldValidation) => void;
+  onValueChange?: (value: string | number) => void;
+  required?: boolean;
+  selectVariant?: SelectVariant;
+  size?: "small" | "medium";
+  value?: any;
+  validatorOptions?: Object;
+  tooltipMsg?: string;
+}

package/templates/components/ts/uiComponents/SelectComponent/styledSelectComponent.tsx

@@ -0,0 +1,67 @@
+// select.styles.ts
+
+export const selectStyles = {
+  container: {
+    display: "flex",
+    flexDirection: "column" as const,
+    width: "100%",
+  },
+
+  labelRow: {
+    display: "flex",
+    alignItems: "center",
+    gap: "6px",
+    marginBottom: "6px",
+  },
+
+  label: {
+    fontSize: "14px",
+    fontWeight: 500,
+  },
+
+  tooltipWrapper: {
+    position: "relative" as const,
+    cursor: "pointer",
+    fontSize: "12px",
+    color: "gray",
+  },
+
+  tooltipText: {
+    position: "absolute" as const,
+    top: "-6px",
+    left: "18px",
+    backgroundColor: "#333",
+    color: "#fff",
+    padding: "6px 8px",
+    borderRadius: "4px",
+    fontSize: "11px",
+    whiteSpace: "nowrap" as const,
+    zIndex: 10,
+  },
+
+  select: {
+    height: "40px",
+    padding: "8px 10px",
+    fontSize: "14px",
+    borderRadius: "5px",
+    border: "1px solid rgba(0,0,0,0.2)",
+    backgroundColor: "#fff",
+    outline: "none",
+    cursor: "pointer",
+  },
+
+  selectDisabled: {
+    backgroundColor: "#f3f3f3",
+    cursor: "not-allowed",
+  },
+
+  selectError: {
+    border: "1px solid #d03240",
+  },
+
+  helperText: {
+    marginTop: "4px",
+    fontSize: "11px",
+    color: "#d03240",
+  },
+};