@imksh/create 1.0.30 → 1.0.31

package/templates/layers/react/typescript/src/components/ui/Input.tsx

@@ -0,0 +1,58 @@
+import React, { InputHTMLAttributes, ReactNode } from "react";
+import { X } from "lucide-react";
+
+export interface InputProps extends Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  "size"
+> {
+  icon?: ReactNode;
+  wrapperClassName?: string;
+  onClear?: () => void;
+  size?: "xs" | "sm" | "md" | "lg";
+}
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      icon,
+      wrapperClassName = "",
+      onClear,
+      className = "",
+      value,
+      size,
+      ...props
+    },
+    ref,
+  ) => {
+    const sizeClass = size ? `input-${size}` : "";
+    return (
+      <div className={`relative ${wrapperClassName}`}>
+        {icon && (
+          <div className="absolute left-3 top-1/2 -translate-y-1/2 text-base-content/50 pointer-events-none flex items-center justify-center z-10">
+            {icon}
+          </div>
+        )}
+        <input
+          ref={ref}
+          value={value}
+          className={`input input-bordered w-full ${sizeClass} ${icon ? "pl-10" : ""} ${
+            onClear && value ? "pr-10" : ""
+          } ${className}`}
+          {...props}
+        />
+        {onClear && value && (
+          <button
+            type="button"
+            onClick={onClear}
+            className="absolute right-3 top-1/2 -translate-y-1/2 text-base-content/40 hover:text-base-content transition-colors flex items-center justify-center"
+            aria-label="Clear input"
+          >
+            <X size={16} />
+          </button>
+        )}
+      </div>
+    );
+  },
+);
+
+Input.displayName = "Input";

package/templates/layers/react/typescript/src/components/ui/Sidebar.tsx

@@ -2,14 +2,18 @@ import { NavLink } from "react-router-dom";
 import { IoClose } from "react-icons/io5";
 import { useUiStore } from "../../store/useUiStore";
 import { navigation } from "../../config/navigation";
-import { ChevronLeft, ChevronRight, Moon, Sun } from "lucide-react";
+import { Moon, Sun } from "lucide-react";
 import appConfig from "../../config/appConfig";
 import { motion, AnimatePresence } from "framer-motion";
 import useWindowSize from "../../hooks/useWindowSize";
+import { useAuthStore } from "../../store/useAuthStore";
+import { GoSidebarCollapse, GoSidebarExpand } from "react-icons/go";
+import { CiLogout } from "react-icons/ci";
 
 const Sidebar = () => {
-  const { open, close, collapsed, toggleCollapsed } = useUiStore();
-  const { theme, toggleTheme } = useUiStore();
+  const { open, close, collapsed, toggleCollapsed, theme, toggleTheme } =
+    useUiStore();
+  const { logout, user } = useAuthStore();
   const { width } = useWindowSize();
   const isMobile = width < 1024; // lg breakpoint
 
@@ -44,7 +48,7 @@ const Sidebar = () => {
               h-screen bg-base-200 border-r border-base-300
               flex flex-col overflow-hidden
               transition-[width] duration-300
-              ${collapsed ? "w-20" : "w-[75%] md:w-[16%] md:max-w-60"}
+              ${collapsed ? "w-18" : "w-[75%] md:w-[16%] md:max-w-60"}
             `}
           >
             {/* Header */}
@@ -79,68 +83,127 @@ const Sidebar = () => {
             </div>
 
             {/* Navigation */}
-            <nav className="flex-1 overflow-y-auto p-2.5 space-y-1" data-lenis-prevent>
-              {navigation.map((item) => {
-                const Icon = item.icon;
+            <nav
+              className="flex-1 overflow-y-auto p-2.5 space-y-1"
+              data-lenis-prevent
+            >
+              {navigation
+                .filter((item) => {
+                  const orgRole = (user as any)?.orgRole;
+                  const isUserAdmin =
+                    user?.role === "ADMIN" ||
+                    orgRole === "OWNER" ||
+                    orgRole === "ADMIN";
+
+                  // Check if item is hidden for this role
+                  if (item.hiddenForRoles) {
+                    if (
+                      isUserAdmin &&
+                      (item.hiddenForRoles.includes("OWNER") ||
+                        item.hiddenForRoles.includes("ADMIN"))
+                    ) {
+                      return false;
+                    }
+                    if (orgRole && item.hiddenForRoles.includes(orgRole)) {
+                      return false;
+                    }
+                  }
+
+                  if (!item.allowedRoles) return true; // visible to all
+                  // System-level ADMIN always gets full access
+                  if (user?.role === "ADMIN") return true;
+                  // If orgRole not yet resolved, show all items (fail open for admins)
+                  if (!orgRole) return true;
+                  return item.allowedRoles.includes(orgRole);
+                })
+                .map((item) => {
+                  const Icon = item.icon;
 
-                return (
-                  <NavLink
-                    key={item.path}
-                    to={item.path}
-                    onClick={isMobile ? close : undefined}
-                    className={({ isActive }) =>
-                      `flex items-center gap-3 rounded-box px-4 py-3 duration-0  h-12 
+                  return (
+                    <NavLink
+                      key={item.path}
+                      to={item.path}
+                      onClick={isMobile ? close : undefined}
+                      className={({ isActive }) =>
+                        `flex items-center gap-3 rounded-box px-4 py-3 duration-0  h-12 
                       ${
                         isActive
                           ? "bg-primary text-primary-content"
                           : "hover:bg-base-300"
                       } ${collapsed ? "justify-center px-0" : ""}`
-                    }
-                    title={collapsed ? item.title : ""}
-                  >
-                    <Icon
-                      size={18}
-                      className={`shrink-0 ${collapsed && "mr-auto"}`}
-                    />
+                      }
+                      title={collapsed ? item.title : ""}
+                    >
+                      <Icon
+                        size={18}
+                        className={`shrink-0 ${collapsed && "mr-auto"}`}
+                      />
 
-                    {!collapsed && (
-                      <span className="font-medium transition-all duration-0 whitespace-nowrap">
-                        {item.title}
-                      </span>
-                    )}
-                  </NavLink>
-                );
-              })}
+                      {!collapsed && (
+                        <span className="font-medium transition-all duration-0 whitespace-nowrap">
+                          {item.title}
+                        </span>
+                      )}
+                    </NavLink>
+                  );
+                })}
             </nav>
 
-            {/* Footer with Collapse Button */}
-            <button
-              onClick={toggleTheme}
-              className={`w-full flex items-center gap-3 px-3 py-2.5 md:px-4 text-sm font-semibold transition-all duration-150 text-base-content/60 hover:text-base-content hover:bg-base-300/60 justify-between rounded-none ${collapsed ? "justify-center" : ""}`}
-              title="Toggle Theme"
+            {/* Footer with Actions */}
+            <div
+              className={`p-3 border-t border-base-300/50 shrink-0 flex gap-2 ${
+                collapsed
+                  ? "flex-col items-center justify-center"
+                  : "flex-row items-center justify-between"
+              }`}
             >
-              {!collapsed && <span>{theme === "dark" ? "Dark" : "Light"}</span>}
-              <span className="btn btn-xs btn-ghost btn-circle ">
-                {theme === "dark" ? (
-                  <Sun size={16} className="shrink-0 " />
-                ) : (
-                  <Moon size={16} className="shrink-0" />
-                )}
-              </span>
-            </button>
-            <div className="p-3 border-t border-base-300/50 shrink-0 flex flex-col gap-2">
               <button
-                onClick={toggleCollapsed}
-                className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-semibold transition-all duration-150 text-base-content/60 hover:text-base-content hover:bg-base-300/60 ${collapsed ? "justify-center" : ""}`}
-                title={collapsed ? "Expand Sidebar" : "Collapse Sidebar"}
+                onClick={() => {
+                  logout();
+                  close();
+                }}
+                className={`btn btn-sm btn-circle btn-soft btn-error ${collapsed ? "hidden" : "flex"}`}
+                title="Logout"
               >
-                {collapsed ? (
-                  <ChevronRight size={18} className="shrink-0 mr-auto" />
-                ) : (
-                  <ChevronLeft size={18} className="shrink-0" />
-                )}
-                {!collapsed && <span className="truncate">Collapse</span>}
+                <CiLogout size={18} />
               </button>
+
+              <div
+                className={`flex items-center gap-2 ${collapsed ? "flex-col" : ""}`}
+              >
+                <button
+                  onClick={toggleTheme}
+                  className="flex items-center gap-3 hover:opacity-80 transition-opacity"
+                  title="Toggle Theme"
+                >
+                  <div
+                    className={`btn btn-sm btn-circle btn-primary btn-soft pointer-events-none ${collapsed ? "hidden" : "flex"}`}
+                  >
+                    {theme === "dark" ? (
+                      <Sun size={16} className="shrink-0" />
+                    ) : (
+                      <Moon size={16} className="shrink-0" />
+                    )}
+                  </div>
+                  {!collapsed && (
+                    <span className="md:hidden font-medium text-sm text-base-content/80">
+                      {theme === "dark" ? "Dark Mode" : "Light Mode"}
+                    </span>
+                  )}
+                </button>
+
+                <button
+                  onClick={toggleCollapsed}
+                  className="btn btn-sm btn-circle btn-outline border-none text-base-content/70 hover:text-base-content hover:bg-base-300/60 hidden md:flex"
+                  title={collapsed ? "Expand Sidebar" : "Collapse Sidebar"}
+                >
+                  {collapsed ? (
+                    <GoSidebarExpand size={18} />
+                  ) : (
+                    <GoSidebarCollapse size={18} />
+                  )}
+                </button>
+              </div>
             </div>
           </motion.aside>
         )}

package/templates/layers/react/typescript/src/components/ui/SidebarHeader.tsx

@@ -8,7 +8,10 @@ interface SidebarHeaderProps {
   actions?: React.ReactNode;
 }
 
-const SidebarHeader = ({ title = "Dashboard", actions = null }: SidebarHeaderProps) => {
+const SidebarHeader = ({
+  title = "Dashboard",
+  actions = null,
+}: SidebarHeaderProps) => {
   const { toggleSidebar, breadcrumbs } = useUiStore();
 
   return (
@@ -28,9 +31,7 @@ const SidebarHeader = ({ title = "Dashboard", actions = null }: SidebarHeaderPro
         )}
       </div>
 
-      <div className="flex items-center gap-2">
-        {actions}
-      </div>
+      <div className="flex items-center gap-2">{actions}</div>
     </header>
   );
 };

package/templates/layers/react/typescript/src/config/appConfig.ts

@@ -1,11 +1,11 @@
 const appConfig = {
   app: {
-    name: "React App",
+    name: "My App",
     logo: "./logo.png",
-    shortName: "React",
+    shortName: "App",
     description: "A React application built with @imksh/create",
     version: "1.0.0",
-    author: "Karan Sharma",
+    author: "",
   },
 
   api: {

package/templates/layers/react/typescript/src/hooks/useWindowSize.ts

@@ -2,11 +2,10 @@ import { useState, useEffect } from "react";
 
 const useWindowSize = () => {
   const [size, setSize] = useState({
-    width: window.innerWidth,
-    height: window.innerHeight,
+    width: typeof window !== "undefined" ? window.innerWidth : 1024,
+    height: typeof window !== "undefined" ? window.innerHeight : 768,
   });
 
-
   useEffect(() => {
     const handleResize = () => {
       setSize({

package/templates/layers/react-native/base/src/config/appConfig.ts

@@ -5,7 +5,7 @@ const appConfig = {
     shortName: "Mobile App",
     description: "A mobile application built with @imksh/create",
     version: "1.0.0",
-    author: "Karan Sharma",
+    author: "",
   },
 
   api: {

package/templates/presets/electron/preset.json

@@ -0,0 +1,9 @@
+{
+  "description": "Electron + React (JavaScript) with Vite",
+  "layers": [
+    "react/base",
+    "react/javascript",
+    "electron/base",
+    "electron/javascript"
+  ]
+}

package/templates/presets/electron-ts/preset.json

@@ -0,0 +1,9 @@
+{
+  "description": "Electron + React (TypeScript) with Vite",
+  "layers": [
+    "react/base",
+    "react/typescript",
+    "electron/base",
+    "electron/typescript"
+  ]
+}

package/templates/layers/react/javascript/src/components/ui/sidebar.jsx

@@ -1,169 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { NavLink } from "react-router-dom";
-import { IoClose } from "react-icons/io5";
-import { useUiStore } from "../../store/useUiStore";
-import { navigation } from "../../config/navigation";
-import { ChevronLeft, ChevronRight, Moon, Sun } from "lucide-react";
-import appConfig from "../../config/appConfig";
-import { motion, AnimatePresence } from "framer-motion";
-import useWindowSize from "../../hooks/useWindowSize";
-const Sidebar = () => {
-  const { open, close, collapsed, toggleCollapsed } = useUiStore();
-  const { theme, toggleTheme } = useUiStore();
-  const { width } = useWindowSize();
-  const isMobile = width < 1024;
-  const showSidebar = !isMobile || open;
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [
-      /* @__PURE__ */ jsx(AnimatePresence, {
-        children:
-          isMobile &&
-          open &&
-          /* @__PURE__ */ jsx(motion.div, {
-            initial: { opacity: 0 },
-            animate: { opacity: 1 },
-            exit: { opacity: 0 },
-            transition: { duration: 0.2 },
-            className: "fixed inset-0 bg-base-100/40 z-40 lg:hidden",
-            onClick: close,
-          }),
-      }),
-      /* @__PURE__ */ jsx(AnimatePresence, {
-        children:
-          showSidebar &&
-          /* @__PURE__ */ jsxs(motion.aside, {
-            initial: isMobile ? { x: "-100%" } : false,
-            animate: { x: 0 },
-            exit: isMobile ? { x: "-100%" } : void 0,
-            transition: { type: "tween", duration: 0.25, ease: "easeInOut" },
-            className: `
-              fixed lg:static top-0 left-0 z-50
-              h-screen bg-base-200 border-r border-base-300
-              flex flex-col overflow-hidden
-              transition-[width] duration-300
-              ${collapsed ? "w-20" : "w-[75%] md:w-[16%] md:max-w-60"}
-            `,
-            children: [
-              /* @__PURE__ */ jsxs("div", {
-                className:
-                  "h-16 border-b border-base-300 flex items-center justify-between px-5",
-                children: [
-                  /* @__PURE__ */ jsxs("div", {
-                    className: "flex items-center gap-3",
-                    children: [
-                      appConfig.app.logo
-                        ? /* @__PURE__ */ jsx("img", {
-                            src: appConfig.app.logo,
-                            alt: "",
-                            className: "w-8 h-8 rounded-lg",
-                          })
-                        : /* @__PURE__ */ jsx("div", {
-                            className: "flex items-center",
-                            children: /* @__PURE__ */ jsx("div", {
-                              className:
-                                "bg-primary w-8 h-8 rounded-lg flex items-center justify-center text-primary-content font-bold",
-                              children: appConfig.app.name.charAt(0),
-                            }),
-                          }),
-                      /* @__PURE__ */ jsx("h1", {
-                        className: `text-xl font-black text-primary whitespace-nowrap overflow-hidden ${collapsed ? "hidden" : ""}`,
-                        children: appConfig.app.name,
-                      }),
-                    ],
-                  }),
-                  /* @__PURE__ */ jsx("button", {
-                    className: `btn btn-sm btn-circle btn-ghost md:hidden ${collapsed ? "hidden" : ""}`,
-                    onClick: close,
-                    children: /* @__PURE__ */ jsx(IoClose, { size: 20 }),
-                  }),
-                ],
-              }),
-              /* @__PURE__ */ jsx("nav", {
-                className: "flex-1 overflow-y-auto p-2.5 space-y-1",
-                "data-lenis-prevent": true,
-                children: navigation.map((item) => {
-                  const Icon = item.icon;
-                  return /* @__PURE__ */ jsxs(
-                    NavLink,
-                    {
-                      to: item.path,
-                      onClick: isMobile ? close : void 0,
-                      className: ({
-                        isActive,
-                      }) => `flex items-center gap-3 rounded-box px-4 py-3 duration-0  h-12 
-                      ${isActive ? "bg-primary text-primary-content" : "hover:bg-base-300"} ${collapsed ? "justify-center px-0" : ""}`,
-                      title: collapsed ? item.title : "",
-                      children: [
-                        /* @__PURE__ */ jsx(Icon, {
-                          size: 18,
-                          className: `shrink-0 ${collapsed && "mr-auto"}`,
-                        }),
-                        !collapsed &&
-                          /* @__PURE__ */ jsx("span", {
-                            className:
-                              "font-medium transition-all duration-0 whitespace-nowrap",
-                            children: item.title,
-                          }),
-                      ],
-                    },
-                    item.path,
-                  );
-                }),
-              }),
-              /* @__PURE__ */ jsxs("button", {
-                onClick: toggleTheme,
-                className: `w-full flex items-center gap-3 px-3 py-2.5 md:px-4 text-sm font-semibold transition-all duration-150 text-base-content/60 hover:text-base-content hover:bg-base-300/60 justify-between rounded-none ${collapsed ? "justify-center" : ""}`,
-                title: "Toggle Theme",
-                children: [
-                  !collapsed &&
-                    /* @__PURE__ */ jsx("span", {
-                      children: theme === "dark" ? "Dark" : "Light",
-                    }),
-                  /* @__PURE__ */ jsx("span", {
-                    className: "btn btn-xs btn-ghost btn-circle ",
-                    children:
-                      theme === "dark"
-                        ? /* @__PURE__ */ jsx(Sun, {
-                            size: 16,
-                            className: "shrink-0 ",
-                          })
-                        : /* @__PURE__ */ jsx(Moon, {
-                            size: 16,
-                            className: "shrink-0",
-                          }),
-                  }),
-                ],
-              }),
-              /* @__PURE__ */ jsx("div", {
-                className:
-                  "p-3 border-t border-base-300/50 shrink-0 flex flex-col gap-2",
-                children: /* @__PURE__ */ jsxs("button", {
-                  onClick: toggleCollapsed,
-                  className: `w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-semibold transition-all duration-150 text-base-content/60 hover:text-base-content hover:bg-base-300/60 ${collapsed ? "justify-center" : ""}`,
-                  title: collapsed ? "Expand Sidebar" : "Collapse Sidebar",
-                  children: [
-                    collapsed
-                      ? /* @__PURE__ */ jsx(ChevronRight, {
-                          size: 18,
-                          className: "shrink-0 mr-auto",
-                        })
-                      : /* @__PURE__ */ jsx(ChevronLeft, {
-                          size: 18,
-                          className: "shrink-0",
-                        }),
-                    !collapsed &&
-                      /* @__PURE__ */ jsx("span", {
-                        className: "truncate",
-                        children: "Collapse",
-                      }),
-                  ],
-                }),
-              }),
-            ],
-          }),
-      }),
-    ],
-  });
-};
-var sidebar_default = Sidebar;
-export { sidebar_default as default };