@cognam/shared-project v1.0.9

Shared Components Library - @cognam/shared-project

A collection of reusable React components built with Material-UI. This package helps maintain consistency across your React projects by centralizing commonly used UI components.

📦 Installation

npm install @cognam/shared-project

🚀 Usage

You can import individual components like this:

import { AppButton, CustomInput } from '@cognam/shared-project';

Or import all components at once:

import * as SharedComponents from '@cognam/shared-project';

🧩 Available Components

✅ AppButton

A Material-UI Button wrapper with consistent styling.

Props:

• size: 'small' | 'medium' | 'large'
• style: React.CSSProperties
• variant: 'text' | 'outlined' | 'contained'
• className: string
• color: 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning'
• disabled: boolean
• onClick: function
• children: React.ReactNode

🧱 BtnContainer

A container component to group and align buttons (typically right-aligned).

Props:

• className: string
• style: React.CSSProperties
• children: React.ReactNode

🔘 CustomCheckBox

A styled Material-UI Checkbox with an optional label.

Props:

• checked: boolean
• onChange: function
• name: string
• disabled: boolean
• label: string
• className: string

📝 CustomInput

An enhanced Material-UI TextField with optional input masking and rich configuration.

Props:

• testId: string
• type: string
• name: string
• value: string | number
• onChange: function
• onBlur: function
• startAdornment: React.ReactNode
• endAdornment: React.ReactNode
• label: string
• variant: 'standard' | 'outlined' | 'filled'
• error: boolean
• errorText: string
• helperText: string
• mask: string (requires react-input-mask)
• inputRef: React.Ref
• multiline: boolean
• rows: number
• autoFocus: boolean
• disabled: boolean
• select: boolean
• style: React.CSSProperties
• maxLength: number
• helper: boolean
• placeholder: string
• isNegative: boolean
• autoComplete: string

📝 SnackBar

import { SnackBar } from '@cognam/shared-project';

// In your root component
<SnackBar />

// To show a snackbar from anywhere in your app:
import { showErrorMessage } from '@cognam/shared-project';

// Dispatch the action (requires Redux setup)
dispatch(showErrorMessage("Your message", "200", 200));

## 🔗 License

MIT — Feel free to use and contribute.