tiwari-shell 1.0.0

package/README.md

@@ -0,0 +1,73 @@
+# React + TypeScript + Vite
+
+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) uses [Oxc](https://oxc.rs)
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

package/dist/components/Header/Header.d.ts

@@ -0,0 +1,3 @@
+import type { HeaderProps } from "../../types/layout";
+export default function Header({ userName, userImageSrc, searchPlaceholder, onSearchChange, onNotificationClick, onProfileClick, }: HeaderProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Header.d.ts.map

package/dist/components/Header/Header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/components/Header/Header.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEtD,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,QAAiB,EACjB,YAAY,EACZ,iBAA4B,EAC5B,cAAc,EACd,mBAAmB,EACnB,cAAc,GACf,EAAE,WAAW,2CA2Cb"}

package/dist/components/Header/Header.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image from "next/image";
+import { Bell, ChevronDown, Search } from "lucide-react";
+export default function Header({ userName = "User", userImageSrc, searchPlaceholder = "Search", onSearchChange, onNotificationClick, onProfileClick, }) {
+    return (_jsxs("header", { className: "zs-header", children: [_jsxs("div", { className: "zs-header-search", children: [_jsx(Search, { size: 14, className: "zs-header-search-icon" }), _jsx("input", { type: "text", placeholder: searchPlaceholder, className: "zs-header-search-input", onChange: (event) => onSearchChange?.(event.target.value) })] }), _jsxs("div", { className: "zs-header-actions", children: [_jsx("button", { type: "button", "aria-label": "Notifications", className: "zs-header-icon-button", onClick: onNotificationClick, children: _jsx(Bell, { size: 18 }) }), _jsx("div", { className: "zs-header-divider" }), _jsxs("button", { type: "button", className: "zs-header-profile-button", onClick: onProfileClick, children: [_jsx(Image, { src: userImageSrc, alt: "User profile", width: 28, height: 28, className: "zs-header-profile-image" }), _jsx("span", { className: "zs-header-profile-name", children: userName }), _jsx(ChevronDown, { size: 16, className: "zs-header-profile-chevron" })] })] })] }));
+}

package/dist/components/Header/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Header } from "./Header";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Header/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Header/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC"}

package/dist/components/Header/index.js

@@ -0,0 +1 @@
+export { default as Header } from "./Header";

package/dist/components/Layout/Layout.d.ts

@@ -0,0 +1,3 @@
+import type { AppLayoutProps } from "../../types/layout";
+export default function AppLayout({ children, header, sidebar }: AppLayoutProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Layout.d.ts.map

package/dist/components/Layout/Layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Layout.d.ts","sourceRoot":"","sources":["../../../src/components/Layout/Layout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAIzD,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,cAAc,2CAQ9E"}

package/dist/components/Layout/Layout.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Header } from "../Header";
+import { Sidebar } from "../Sidebar";
+export default function AppLayout({ children, header, sidebar }) {
+    return (_jsxs("div", { className: "zs-layout-root", children: [_jsx(Sidebar, { ...sidebar }), _jsx(Header, { ...header }), _jsx("main", { className: "zs-layout-content", children: children })] }));
+}

package/dist/components/Layout/index.d.ts

@@ -0,0 +1,2 @@
+export { default as AppLayout } from "./Layout";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Layout/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,UAAU,CAAC"}

package/dist/components/Layout/index.js

@@ -0,0 +1 @@
+export { default as AppLayout } from "./Layout";

package/dist/components/Sidebar/Sidebar.d.ts

@@ -0,0 +1,3 @@
+import type { SidebarProps } from "../../types/layout";
+export default function Sidebar({ logoSrc, logoAlt, navItems, }: SidebarProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Sidebar.d.ts.map

package/dist/components/Sidebar/Sidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/Sidebar.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAkB,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAuCvE,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAC9B,OAAO,EACP,OAAwB,EACxB,QAAQ,GACT,EAAE,YAAY,2CA6Bd"}

package/dist/components/Sidebar/Sidebar.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image from "next/image";
+import Link from "next/link";
+import { useSidebarSelection } from "../../hooks/useSidebarSelection";
+function SidebarItem({ item, isSelected, }) {
+    const className = [
+        "zs-sidebar-item",
+        isSelected ? "zs-sidebar-item-selected" : "zs-sidebar-item-default",
+        item.disabled ? "zs-sidebar-item-disabled" : "",
+    ]
+        .filter(Boolean)
+        .join(" ");
+    const iconSrc = isSelected && item.activeIcon ? item.activeIcon : item.icon;
+    const textClassName = isSelected
+        ? "zs-sidebar-item-label-active"
+        : "zs-sidebar-item-label";
+    if (!item.href || item.disabled) {
+        return (_jsxs("div", { "aria-disabled": "true", className: className, children: [_jsx(Image, { src: iconSrc, alt: item.label, width: 20, height: 20 }), _jsx("span", { className: textClassName, children: item.label })] }));
+    }
+    return (_jsxs(Link, { href: item.href, className: className, children: [_jsx(Image, { src: iconSrc, alt: item.label, width: 20, height: 20 }), _jsx("span", { className: textClassName, children: item.label })] }));
+}
+export default function Sidebar({ logoSrc, logoAlt = "Company icon", navItems, }) {
+    const isSelected = useSidebarSelection();
+    return (_jsxs("aside", { className: "zs-sidebar", children: [_jsx("div", { className: "zs-sidebar-logo-wrap", children: _jsx("div", { className: "zs-sidebar-logo-pill", children: _jsx(Image, { src: logoSrc, alt: logoAlt, width: 26, height: 26, className: "zs-sidebar-logo-image" }) }) }), _jsx("div", { className: "zs-sidebar-body", children: _jsx("nav", { className: "zs-sidebar-nav", children: navItems.map((item) => (_jsx(SidebarItem, { item: item, isSelected: isSelected(item) }, `${item.label}-${item.href ?? "disabled"}`))) }) })] }));
+}

package/dist/components/Sidebar/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Sidebar } from "./Sidebar";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Sidebar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC"}

package/dist/components/Sidebar/index.js

@@ -0,0 +1 @@
+export { default as Sidebar } from "./Sidebar";

package/dist/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { useSidebarSelection } from "./useSidebarSelection";
+//# sourceMappingURL=index.d.ts.map

package/dist/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/hooks/index.js

@@ -0,0 +1 @@
+export { useSidebarSelection } from "./useSidebarSelection";

package/dist/hooks/useSidebarSelection.d.ts

@@ -0,0 +1,3 @@
+import type { SidebarNavItem } from "../types/layout";
+export declare function useSidebarSelection(): (item: SidebarNavItem) => boolean;
+//# sourceMappingURL=useSidebarSelection.d.ts.map

package/dist/hooks/useSidebarSelection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSidebarSelection.d.ts","sourceRoot":"","sources":["../../src/hooks/useSidebarSelection.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEtD,wBAAgB,mBAAmB,IAAI,CAAC,IAAI,EAAE,cAAc,KAAK,OAAO,CAcvE"}

package/dist/hooks/useSidebarSelection.js

@@ -0,0 +1,14 @@
+"use client";
+import { usePathname } from "next/navigation";
+export function useSidebarSelection() {
+    const pathname = usePathname();
+    return (item) => {
+        if (item.href && pathname === item.href) {
+            return true;
+        }
+        if (!item.startsWith || item.startsWith.length === 0) {
+            return false;
+        }
+        return item.startsWith.some((prefix) => pathname.startsWith(prefix));
+    };
+}

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+import "./styles/layout.css";
+export { Header } from "./components/Header";
+export { Sidebar } from "./components/Sidebar";
+export { AppLayout } from "./components/Layout";
+export { useSidebarSelection } from "./hooks";
+export type { AppLayoutProps, HeaderProps, ImageSource, SidebarNavItem, SidebarProps } from "./types";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,qBAAqB,CAAC;AAE7B,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAE9C,YAAY,EAAE,cAAc,EAAE,WAAW,EAAE,WAAW,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC"}

package/dist/index.js

@@ -0,0 +1,5 @@
+import "./styles/layout.css";
+export { Header } from "./components/Header";
+export { Sidebar } from "./components/Sidebar";
+export { AppLayout } from "./components/Layout";
+export { useSidebarSelection } from "./hooks";

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+export type { AppLayoutProps, HeaderProps, ImageSource, SidebarNavItem, SidebarProps, } from "./layout";
+//# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,cAAc,EACd,WAAW,EACX,WAAW,EACX,cAAc,EACd,YAAY,GACb,MAAM,UAAU,CAAC"}

package/dist/types/index.js

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

package/dist/types/layout.d.ts

@@ -0,0 +1,30 @@
+import type { ReactNode } from "react";
+import type { StaticImageData } from "next/image";
+export type ImageSource = string | StaticImageData;
+export interface HeaderProps {
+    userName?: string;
+    userImageSrc: ImageSource;
+    searchPlaceholder?: string;
+    onSearchChange?: (value: string) => void;
+    onNotificationClick?: () => void;
+    onProfileClick?: () => void;
+}
+export interface SidebarNavItem {
+    label: string;
+    href?: string;
+    icon: ImageSource;
+    activeIcon?: ImageSource;
+    startsWith?: string[];
+    disabled?: boolean;
+}
+export interface SidebarProps {
+    logoSrc: ImageSource;
+    logoAlt?: string;
+    navItems: SidebarNavItem[];
+}
+export interface AppLayoutProps {
+    children: ReactNode;
+    header: HeaderProps;
+    sidebar: SidebarProps;
+}
+//# sourceMappingURL=layout.d.ts.map

package/dist/types/layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../src/types/layout.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAElD,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,eAAe,CAAC;AAEnD,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,WAAW,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;IACjC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,WAAW,CAAC;IAClB,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,WAAW,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,cAAc,EAAE,CAAC;CAC5B;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,EAAE,WAAW,CAAC;IACpB,OAAO,EAAE,YAAY,CAAC;CACvB"}

package/dist/types/layout.js

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

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "tiwari-shell",
+  "version": "1.0.0",
+  "description": "Shared shell layout components for Next.js applications",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": ["dist"],
+  "sideEffects": false,
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -p tsconfig.build.json",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "lucide-react": "^0.554.0"
+  },
+  "peerDependencies": {
+    "next": ">=14",
+    "react": ">=18.2.0",
+    "react-dom": ">=18.2.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@types/node": "^24.12.3",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "eslint": "^10.3.0",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.6.0",
+    "typescript": "~6.0.2",
+    "typescript-eslint": "^8.59.2",
+    "vite": "^8.0.12"
+  }
+}