react-simple-dashboard 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 rajat455
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,162 @@
+# react-simple-dashboard
+✨ Main Features ->
+
+Customizable Layouts: Vertical, Mini, and Horizontal layout support.
+
+Theme Presets: Multiple color presetes (Default, Cyan, Purple, Blue, Yellow, Red ,...any).
+
+Dark & Light Mode: Inbuilt mode switching support.
+
+Contrast Mode: Heigh-Contrast visual expression with Grey background.
+
+RTL Support: For right to left Layout support.
+
+TypeScript Ready: Enough Type support and Auto compliment.
+
+Responsive: Ready for mobile and desktop or any size device.
+
+
+📦 Installation ->
+
+Run:npm install react-simple-dashboard @mui/material @emotion/react @emotion/styled
+
+
+🛠️ Customization (Props)
+
+ThemeProvider ->
+.-------------------------------------------------------------------.
+| Prop         | Type               | Description                   |
+|-------------------------------------------------------------------|
+| themeOptions | ThemeOption        | Options for Dashboard Visuals |  
+| settings     | SettingsValueProps | For Close Drawer.             |
+'-------------------------------------------------------------------'
+
+SettingDrawer ->
+.-----------------------------------------------------------.
+| Prop             | Type     | Description                 |             
+|------------------|----------------------------------------| 
+| open             | boolean  | is Drawer open or not.      |           
+| onClose          | function | For Close Drawer.           |    
+| onChangeSettings | function | Calls when settings change. |
+'-----------------------------------------------------------'
+
+
+HOW TO USE IT ->
+(./App.js)
+
+import { useMemo, useState } from 'react';
+import { 
+  ThemeProvider, 
+  DashboardLayout, 
+  SettingsDrawer, 
+  navConfig, 
+  fonts, 
+  colorPresets 
+} from 'react-simple-dashboard';
+
+const defaultAvatar = "your Image";
+
+function App() {
+  const [openSettings, setOpenSettings] = useState(false);
+  const settings = {
+    themeMode: "light",
+    themeColorPresets: "default",
+    themeFont: 'Public Sans',
+    themeFontSize: 17,
+    themeLayout: "vertical",
+    isContrast: false,
+    reverseLayout: false,
+    state:{} // For Access Your State With Redering Methods by Settings Argument (renderLogo, renderFooter, rednerIcons, rednerNavItems) //
+  };
+  const ThemeOptions = useMemo(() => ({
+    navigationList: [...navConfig],
+    fonts: [...fonts],
+    colorPresets: colorPresets,
+
+    renderLogo: (theme) => (
+      <svg width="40" height="40" viewBox="0 0 512 512">
+      </svg>
+    ),
+
+     renderNavItem: (item, theme, settings) => {
+        const vertical = settings.themeLayout === "vertical"
+        const mini = settings.themeLayout === "mini"
+        const horizontal = settings.themeLayout === "horizontal"
+        const { reverseLayout } = settings
+
+        return <ListItem key={item.heading} disablePadding sx={{ display: 'block', mb: 0.5 }}>
+          <ListItemButton
+            selected={item.selected}
+            sx={{
+              minHeight: horizontal ? 32 : 44,
+              borderRadius: 1,
+              display: 'flex',
+              maxWidth: "100%",
+              flexDirection: !mini ? (reverseLayout ? "row-reverse" : "row") : "column",
+              justifyContent: !mini ? (reverseLayout ? "end" : 'start') : 'center',
+              alignItems: 'center',
+              paddingY: horizontal ? 0 : 0.5,
+              gap: (!mini && !reverseLayout && !horizontal ? 0.7 : !mini && reverseLayout && !horizontal ? 1.5 : 0.7),
+              paddingLeft: !mini && !horizontal ? (reverseLayout ? 1 : 1.5) : 1,
+              paddingRight: !mini && !horizontal ? (reverseLayout ? 1.5 : 1) : 1,
+              paddingTop: horizontal ? 0 : (!mini ? 0.5 : 1)
+            }}
+          >
+            <ListItemIcon sx={{
+              minWidth: 0,
+              mr: (!mini && !horizontal && vertical) ? (!reverseLayout ? 0.8 : 0) : 0,
+              justifyContent: 'center',
+              alignItems: "center",
+              color: item.selected ? (theme.palette.mode === "light" ? "primary.main" : "primary.light") : "text.secondary",
+            }}>
+              {item.icon}
+            </ListItemIcon>
+            <ListItemText style={{ marginTop: 0, marginBottom: 3, flex: "unset" }} primary={item.heading} primaryTypographyProps={{ minWidth: "max-content", fontWeight: item.selected ? (!mini ? 600 : 700) : (!mini ? 500 : 600), color: item.selected ? (theme.palette.mode === "light" ? "primary.main" : "primary.light") : "text.secondary", sx: { lineHeight: "16px", fontSize: !mini ? theme.typography.body2.fontSize : `calc(${theme.typography.subtitle2.fontSize} - 1px)` } }} />
+          </ListItemButton>
+        </ListItem>
+      },
+
+    renderFooter: (theme) => (
+      <div style={{ textAlign: 'center', padding: '20px' }}>
+        <p>Rajat Jayswal</p>
+        <button>Sign Out</button>
+      </div>
+    ),
+
+    sideBarHeader: {
+      renderTitle: () => "Dashboard",
+      renderIcons: (theme, settings) => (
+        // Header's icons (Notifications, Settings,...All)
+        <button onClick={() => setOpenSettings(true)}>Settings</button>
+      )
+    }
+  }), []);
+  return (
+
+    <ThemeProvider themeOptions={ThemeOptions} settings={settings}>
+
+      <DashboardLayout themeOptions={ThemeOptions}>
+
+        <h1>Welcome to Dashboard</h1>
+
+      </DashboardLayout>
+
+      <SettingsDrawer
+
+        themeOptions={ThemeOptions}
+
+        open={openSettings}
+
+        onClose={() => setOpenSettings(false)}
+
+        onChangeSettings={(newSettings) => console.log(newSettings)}
+
+      />
+    </ThemeProvider>
+  );
+}
+export default App;
+
+
+📄 License ->
+MIT © 2026 rajat455

package/dist/index.d.ts

@@ -0,0 +1,423 @@
+import { default as default_2 } from 'react';
+import { JSX } from 'react/jsx-runtime';
+import { MUIStyledCommonProps } from '@mui/system';
+import { ReactNode } from 'react';
+import { StyledComponent } from '@emotion/styled';
+import { SwitchProps } from '@mui/material';
+import { Theme } from '@mui/material';
+
+export declare const AntSwitch: StyledComponent<SwitchProps & MUIStyledCommonProps<Theme>, {}, {}>;
+
+export declare type ColorPreset = 'default' | "cyan" | "purple" | "blue" | "yellow" | "red";
+
+declare interface ColorPresets {
+    main: string;
+    name: ColorPreset;
+    light: string;
+    dark: string;
+    lighter: string;
+    contrastText: string;
+    darker: string;
+}
+
+export declare const colorPresets: ColorPresets[];
+
+export declare const commonBlack = "#000000";
+
+export declare const commonWhite = "#FFFFFF";
+
+export declare function CustomeAvatar({ src, border, width, height }: Props_7): JSX.Element;
+
+export declare function CustomeSlider({ onChange, marks, min, max, value, ...other }: any): JSX.Element;
+
+export declare function CustomeThemeProvider({ children, themeOptions }: Props_2): JSX.Element;
+
+export declare function DashboardLayout({ children, themeOptions }: Props_3): JSX.Element;
+
+declare interface Fonts {
+    name: string;
+    main: string;
+}
+
+export declare const fonts: Fonts[];
+
+export declare const getCustomShadows: (palette: any) => {
+    primary: string;
+    secondary: string;
+    error: string;
+    success: string;
+    info: string;
+    warning: string;
+    0: string;
+    1: string;
+    2: string;
+    3: string;
+    4: string;
+    5: string;
+    6: string;
+    7: string;
+    8: string;
+    9: string;
+    10: string;
+    11: string;
+    12: string;
+    13: string;
+    14: string;
+    15: string;
+    16: string;
+    17: string;
+    18: string;
+    19: string;
+    20: string;
+    21: string;
+    22: string;
+    23: string;
+    24: string;
+    z1: string;
+    z4: string;
+    z8: string;
+    z12: string;
+    z16: string;
+    z20: string;
+    z24: string;
+    dialog: string;
+    card: string;
+    dropDown: string;
+};
+
+export declare const getPalette: (colorPresets: ColorPresets[], themeMode: ThemeMode, themeColorPresets: ColorPreset, isContrast: boolean) => {
+    mode: ThemeMode;
+    primary: {
+        main: string;
+        name: ColorPreset;
+        light: string;
+        dark: string;
+        lighter: string;
+        contrastText: string;
+        darker: string;
+    };
+    grey: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        A100: string;
+        A200: string;
+        A400: string;
+        A700: string;
+    };
+    secondary: {
+        main: string;
+        contrastText: string;
+    };
+    info: {
+        lighter: string;
+        light: string;
+        main: string;
+        dark: string;
+        darker: string;
+        contrastText: string;
+    };
+    success: {
+        lighter: string;
+        light: string;
+        main: string;
+        dark: string;
+        darker: string;
+        contrastText: string;
+    };
+    error: {
+        lighter: string;
+        light: string;
+        main: string;
+        dark: string;
+        darker: string;
+        contrastText: string;
+    };
+    warning: {
+        lighter: string;
+        light: string;
+        main: string;
+        dark: string;
+        darker: string;
+        contrastText: string;
+    };
+    background: {
+        default: string;
+        paper: string;
+        neutral: string;
+    };
+    divider: string;
+    common: {
+        black: string;
+        white: string;
+    };
+    action: {
+        active: string;
+        hover: string;
+        selected: string;
+        focus: string;
+        disabledBackground: string;
+        disabled: string;
+    };
+    text: {
+        primary: string;
+        secondary: string;
+        disabled: string;
+    };
+};
+
+export declare const getTypography: (themeFont: any, themeFontSize: number) => {
+    fontFamily: any;
+    fontSize: number;
+    fontWeightRegular: number;
+    fontWeightMedium: number;
+    fontWeightBold: number;
+    h1: {
+        fontWeight: number;
+        lineHeight: number;
+        fontSize: string;
+    };
+    h2: {
+        fontWeight: number;
+        lineHeight: number;
+        fontSize: string;
+    };
+    h3: {
+        fontWeight: number;
+        lineHeight: number;
+        fontSize: string;
+    };
+    h4: {
+        fontWeight: number;
+        lineHeight: number;
+        fontSize: string;
+    };
+    h5: {
+        fontWeight: number;
+        lineHeight: number;
+        fontSize: string;
+    };
+    h6: {
+        fontWeight: number;
+        lineHeight: number;
+        fontSize: string;
+    };
+    subtitle1: {
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: number;
+    };
+    subtitle2: {
+        fontSize: string;
+        fontWeight: number;
+        textTransform: string;
+    };
+    body1: {
+        fontSize: string;
+        lineHeight: number;
+    };
+    body2: {
+        fontSize: string;
+        lineHeight: number;
+        fontWeight: number;
+    };
+    caption: {
+        fontWeight: number;
+        lineHeight: number;
+        fontSize: string;
+    };
+    button: {
+        fontWeight: number;
+        fontSize: string;
+        textTransform: string;
+    };
+};
+
+export declare const HEADER: Header_2;
+
+export declare function Header({ themeOptions }: Props_4): JSX.Element;
+
+declare interface Header_2 {
+    H_MOBILE: number;
+    H_DESKTOP: number;
+}
+
+export declare const Icons: {
+    App: JSX.Element;
+    ecommerce: JSX.Element;
+    analytics: JSX.Element;
+    banking: JSX.Element;
+    booking: JSX.Element;
+    file: JSX.Element;
+    course: JSX.Element;
+    user: JSX.Element;
+    product: JSX.Element;
+    order: JSX.Element;
+    invoice: JSX.Element;
+    blog: JSX.Element;
+    job: JSX.Element;
+    tour: JSX.Element;
+    fileManager: JSX.Element;
+    mail: JSX.Element;
+    chat: JSX.Element;
+    calendar: JSX.Element;
+    permission: JSX.Element;
+    notification: JSX.Element;
+    contact: JSX.Element;
+    settings: JSX.Element;
+    fullScreen: JSX.Element;
+    windowScreen: JSX.Element;
+    reset: JSX.Element;
+    close: JSX.Element;
+    nightMode: JSX.Element;
+    contrast: JSX.Element;
+    rightToLeft: JSX.Element;
+    compact: JSX.Element;
+    info: JSX.Element;
+    layout1: JSX.Element;
+    layout2: JSX.Element;
+    layout3: JSX.Element;
+    menu: JSX.Element;
+    arrowLeft: JSX.Element;
+    arrowRight: JSX.Element;
+    fonts: JSX.Element;
+    colorPresets: JSX.Element;
+};
+
+export declare const NAV: Nav;
+
+declare interface Nav {
+    WIDTH: number;
+    WIDTH_MIN: number;
+}
+
+export declare const navConfig: NavigationList[];
+
+export declare interface NavigationList {
+    href: string;
+    heading: string;
+    selected?: boolean;
+    icon?: any;
+}
+
+export declare function NavVertical({ themeOptions }: Props_5): JSX.Element;
+
+export declare const paletteGray: {
+    50: string;
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    700: string;
+    800: string;
+    900: string;
+    A100: string;
+    A200: string;
+    A400: string;
+    A700: string;
+};
+
+declare interface Props {
+    children: ReactNode;
+    settings: SettingsValueProps;
+    themeOptions: ThemeOptions;
+}
+
+declare interface Props_2 {
+    children: default_2.ReactNode;
+    themeOptions: ThemeOptions;
+}
+
+declare interface Props_3 {
+    children: ReactNode;
+    themeOptions: ThemeOptions;
+}
+
+declare interface Props_4 {
+    themeOptions: ThemeOptions;
+}
+
+declare interface Props_5 {
+    themeOptions: ThemeOptions;
+}
+
+declare interface Props_6 {
+    open: boolean;
+    onClose: () => void;
+    themeOptions: ThemeOptions;
+    onChangeSettings?: (settings: SettingsValueProps) => void;
+}
+
+declare interface Props_7 {
+    border?: number;
+    width: number;
+    height: number;
+    sx?: any;
+    src: string;
+}
+
+export declare function pxToRem(value: number): string;
+
+export declare function SettingsDrawer({ open, onClose, onChangeSettings, themeOptions }: Props_6): JSX.Element;
+
+export declare const SettingsProvider: ({ children, defaultSettings }: {
+    children: ReactNode;
+    defaultSettings: SettingsValueProps;
+}) => JSX.Element;
+
+export declare interface SettingsValueProps {
+    themeMode: ThemeMode;
+    themeColorPresets: ColorPreset;
+    themeFont: string;
+    themeFontSize: number;
+    themeLayout: ThemeLayout;
+    isContrast: boolean;
+    isFullScreen: boolean;
+    reverseLayout: boolean;
+    state?: any;
+}
+
+export declare type ThemeLayout = 'vertical' | 'mini' | 'horizontal';
+
+export declare type ThemeMode = "light" | "dark";
+
+export declare interface ThemeOptions {
+    fonts: Fonts[];
+    colorPresets: ColorPresets[];
+    renderLogo?: (theme: any, settings: SettingsValueProps) => ReactNode;
+    renderNavItem?: (navItem: any, theme: any, settings: SettingsValueProps) => ReactNode;
+    navigationList?: NavigationList[];
+    renderFooter?: (theme: any, settings: SettingsValueProps) => ReactNode;
+    sideBarHeader?: {
+        title: string;
+        renderTitle: (theme: any, settings: SettingsValueProps) => ReactNode | string;
+        renderIcons: (theme: any, settings: SettingsValueProps) => ReactNode;
+    };
+}
+
+export declare function ThemeProvider({ settings, children, themeOptions }: Props): JSX.Element;
+
+export declare const useSettings: () => {
+    settings: SettingsValueProps;
+    onChangeMode: (_mode: ThemeMode) => void;
+    onChangeColor: (_color: string) => void;
+    onChangeLayout: (_layout: ThemeLayout) => void;
+    onResizeFont: (_fontSize: number) => void;
+    onChangeFont: (_fontName: string) => void;
+    onResetSettings: (_oldSettings?: SettingsValueProps) => void;
+    onChangeState: (_newState: any) => void;
+    toggleContrast: () => void;
+    toggleReverseLayout: () => void;
+    toggleFullScreen: () => void;
+};
+
+export { }