@nestbotics/nct_frontend_common_components
Version:
A collection of reusable React components with theme management and styling utilities
123 lines (103 loc) • 3.83 kB
TypeScript
import * as React from 'react';
import { SxProps, Theme as MuiTheme } from '@mui/material';
// Theme types
export interface ThemeColors {
grey: Record<number, string>;
primary: Record<number, string>;
greenAccent: Record<number, string>;
redAccent: Record<number, string>;
blueAccent: Record<number, string>;
}
export interface ColorModeContextType {
toggleColorMode: () => void;
}
export declare const ColorModeContext: React.Context<ColorModeContextType>;
export declare const useMode: () => { theme: MuiTheme; colorMode: ColorModeContextType };
export declare const tokens: (mode: 'light' | 'dark') => ThemeColors;
// Component Props
export interface HeaderProps {
title?: string;
subtitle?: string;
}
export interface SidebarProps {
className?: string;
}
export interface ButtonProps {
variant?: 'primary' | 'secondary' | 'tertiary';
children: React.ReactNode;
onClick?: () => void;
disabled?: boolean;
}
export interface CustomButtonProps extends ButtonProps {
color?: string;
size?: 'small' | 'medium' | 'large';
}
export interface CustomTextFieldProps {
label?: string;
value?: string;
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
error?: boolean;
helperText?: string;
}
// Style Provider types
export interface StyleVariant {
fontSize: string;
fontWeight: number;
lineHeight: string;
}
export interface StyleProviderProps {
children: React.ReactNode;
}
export interface UseStyleVariantsReturn {
variants: Record<string, StyleVariant>;
getVariant: (variantName: string) => StyleVariant;
}
// User Data Context types
export interface UserData {
token: string;
name: string;
userName: string;
logintime: string;
}
export interface UserDataContextType {
user: UserData;
setUser: (user: UserData) => void;
activeFields: Record<string, boolean>;
toggleActiveField: (field: string) => void;
resetActiveFields: () => void;
}
export interface UserDataProviderProps {
children: React.ReactNode;
}
// Component Exports
export declare const Header: React.FC<HeaderProps>;
export declare const Footer: React.FC;
export declare const Sidebar: React.FC<SidebarProps>;
export declare const Button: React.FC<ButtonProps>;
export declare const CustomButton: React.FC<CustomButtonProps>;
export declare const CustomTextField: React.FC<CustomTextFieldProps>;
export declare const GenericDataGrid: React.FC<any>;
export declare const DynamicTable: React.FC<any>;
export declare const SaveButton: React.FC<ButtonProps>;
export declare const CancelButton: React.FC<ButtonProps>;
export declare const DeleteButton: React.FC<ButtonProps>;
// Provider Exports
export declare const StyleProvider: React.FC<StyleProviderProps>;
export declare const UserDataProvider: React.FC<UserDataProviderProps>;
// Hook Exports
export declare const useStyleVariants: () => UseStyleVariantsReturn;
// Utility Exports
export declare const getVariantStyle: (variantName: string, additionalStyles?: any) => any;
export declare const createSxWithVariant: (variantName: string, additionalSx?: SxProps<MuiTheme>) => SxProps<MuiTheme>;
// Theme Exports
export declare const Theme: any;
export declare const darkTheme: MuiTheme;
export declare const lightTheme: MuiTheme;
// CSS Generator Utilities
export declare const styleObjectToCss: (styleObject: any, selector: string) => string;
export declare const generateVariantCss: (variants: Record<string, StyleVariant>) => string;
export declare const generateButtonCss: (buttonStyles: any) => string;
export declare const generateDataGridCss: (dataGridStyles: any) => string;
export declare const generateResponsiveCss: (breakpoints: any, styles: any) => string;
export declare const exportCssFile: (cssContent: string, filename?: string) => void;
export declare const generateCompleteCss: (config?: any) => string;