Shared components and utilities for ASafariM web applications
npm install @asafarim/sharedsh
Install the component library
pnpm add @asafarim/shared
Install with theme system (recommended)
pnpm add @asafarim/shared @asafarim/react-themes
or with npm
npm install @asafarim/shared @asafarim/react-themes
`
🎨 Import Styles
Important: Components require CSS imports to display correctly.
`tsx
// Import styles in your main entry file
import '@asafarim/shared/dist/styles.css';
// Then use components
import { ButtonComponent, SearchItems, DDItems, InputFields } from '@asafarim/shared';
`
📖 For detailed styling instructions, see STYLING.md
---
💻 Code Usage Examples
$3
`tsx
import React from 'react';
import { ThemeProvider } from '@asafarim/react-themes';
import {
ButtonComponent,
SearchItems,
DDItems,
InputFields,
HeaderComponent,
DefaultPageHeader,
HeroPageHeader,
CallToActionPageHeader,
FancyPageHeader
} from '@asafarim/shared';
import '@asafarim/react-themes/styles.css';
import '@asafarim/shared/dist/styles.css';
function App() {
return (
{/ Your components here /}
);
}
`
$3
`tsx
import React, { useState } from 'react';
import { ThemeProvider } from '@asafarim/react-themes';
import {
ButtonComponent,
SearchItems,
DDItems,
InputFields,
HeaderComponent,
DefaultPageHeader,
HeroPageHeader,
CallToActionPageHeader,
FancyPageHeader,
PackageLinks
} from '@asafarim/shared';
import '@asafarim/react-themes/styles.css';
import '@asafarim/shared/dist/styles.css';
function App() {
const [searchTerm, setSearchTerm] = useState('');
const [selectedFramework, setSelectedFramework] = useState('');
const [formData, setFormData] = useState({
name: '',
email: '',
message: ''
});
const frameworkOptions = [
{ value: 'react', label: 'React' },
{ value: 'vue', label: 'Vue.js' },
{ value: 'angular', label: 'Angular' },
{ value: 'svelte', label: 'Svelte' }
];
return (
{/ Header Components /}
title="My Application"
subtitle="Welcome to our platform"
logoText="MA"
leftContent={
Dashboard
Analytics
}
rightContent={
Profile
}
/>
{/ Hero Header for Landing Page /}
title="Welcome to Our Platform"
subtitle="The ultimate solution for your business needs"
backgroundGradient="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
cta={
Get Started
Learn More
}
/>
{/ Main Content /}
{/ Search and Filter Section /}
searchTerm={searchTerm}
onSearchChange={setSearchTerm}
placeholder="Search components..."
searchType="default"
/>
selectedValue={selectedFramework}
onValueChange={setSelectedFramework}
items={frameworkOptions}
dropdownType="outlined"
placeholder="Select framework..."
/>
{/ Form Section /}
Contact Form
type="text"
styling="default"
label="Full Name"
placeholder="Enter your name"
value={formData.name}
onChange={(value) => setFormData(prev => ({ ...prev, name: value }))}
required
/>
styling="outlined"
label="Email Address"
placeholder="user@example.com"
value={formData.email}
onChange={(value) => setFormData(prev => ({ ...prev, email: value }))}
validation={{ required: true, pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/ }}
validateOnChange
helperText="Enter a valid email address"
/>
styling="minimal"
label="Message"
placeholder="Share your thoughts..."
value={formData.message}
onChange={(value) => setFormData(prev => ({ ...prev, message: value }))}
rows={4}
validation={{ maxLength: 500 }}
showCharacterCount
helperText="Maximum 500 characters"
/>
{/ Action Buttons /}
Submit Form
Save Draft
Cancel
{/ Package Links /}
packageName="@asafarim/shared"
githubPath="packages/shared"
demoPath="packages/shared"
/>
{/ Call to Action Header /}
title="Ready to Get Started?"
subtitle="Join thousands of developers using our platform"
ctaButton={
Start Free Trial
}
/>
{/ Fancy Header for Premium Section /}
title="Enterprise Solutions"
subtitle="Built for scale, designed for success"
gradient="linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%)"
leftContent={
Solutions
Industries
}
rightContent={
Contact Sales
}
/>
);
}
export default App;
`
$3
#### Header Components
`tsx
// Base Header Component (Highly Customizable)
type="default"
title="My Application"
subtitle="Welcome to our platform"
logoText="MA"
size="md"
align="space-between"
elevation="medium"
showBorder
showShadow
leftContent={Dashboard }
rightContent={Profile }
/>
// Pre-configured Header Variants
title="Dashboard"
subtitle="Welcome back, User"
logoText="D"
leftContent={/ navigation items /}
rightContent={/ user actions /}
/>
title="Welcome to Our Platform"
subtitle="The ultimate solution for your business needs"
backgroundGradient="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
cta={/ call-to-action buttons /}
/>
title="Premium Features"
subtitle="Unlock the full potential of our platform"
ctaButton={Upgrade Now }
/>
title="Enterprise Solutions"
subtitle="Built for scale, designed for success"
gradient="linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%)"
/>
`
#### Form Components
`tsx
// Search Component
searchTerm={searchTerm}
onSearchChange={setSearchTerm}
placeholder="Search components..."
searchType="default"
/>
// Dropdown Component
selectedValue={selectedValue}
onValueChange={setSelectedValue}
items={[
{ value: 'react', label: 'React' },
{ value: 'vue', label: 'Vue.js' },
{ value: 'angular', label: 'Angular' }
]}
dropdownType="outlined"
placeholder="Select framework..."
/>
// Input Fields
type="text"
styling="default"
label="Full Name"
placeholder="Enter your name"
value={name}
onChange={setName}
required
/>
styling="outlined"
label="Email Address"
placeholder="user@example.com"
value={email}
onChange={setEmail}
validation={{ required: true, pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/ }}
validateOnChange
/>
`
#### Button Component
`tsx
// Different Variants
Primary Button
Secondary Button
Success Button
Disabled Button
Loading Button
// With Icons
variant="primary"
leftIcon={📧}
rightIcon={→}
>
Send Email
`
---
🌐 Live Demo & Documentation
- Live Demo: alisafari-it.github.io/shared
- Source: github.com/AliSafari-IT/shared
Explore all components with interactive examples, theme switching, and comprehensive prop documentation.
---
🧩 Components
This library currently includes five main components, each with multiple variants and comprehensive theme integration:
| Component | Description | Styles | Status |
|-----------|-------------|---------|--------|
| PackageLinks | Display links to npm, GitHub, and demos | Theme-aware styling | ✅ Ready |
| ButtonComponent | Versatile button with 9 variants, 5 sizes | Primary, Secondary, Success, Danger, Warning, Info, Outline, Ghost, Link | ✅ Ready |
| SearchItems | Flexible search input with clear functionality | Default, Compact, Outlined, Minimal | ✅ Ready |
| DDItems | Dropdown/select with customizable options | Default, Compact, Outlined, Minimal | ✅ Ready |
| InputFields | Comprehensive form input with 10+ input types | Default, Compact, Outlined, Minimal | ✅ Ready |
| HeaderComponent | Highly customizable header component | Default, Compact, Outlined, Minimal | ✅ Ready |
| Header Wrappers | Pre-configured header variants | DefaultPageHeader, HeroPageHeader, CallToActionPageHeader, FancyPageHeader | ✅ Ready |
$3
A flexible, theme-aware component for displaying links to npm packages, GitHub repositories, and live demos.
#### Usage
`tsx
import React from 'react';
import { ThemeProvider } from '@asafarim/react-themes';
import { PackageLinks } from '@asafarim/shared';
import '@asafarim/react-themes/styles.css';
function App() {
return (
packageName="@asafarim/display-code"
githubPath="packages/display-code"
demoPath="packages/display-code"
/>
);
}
`
#### Props
| Prop | Type | Required | Description |
|--------------|--------|----------|--------------------------------------------------------------------|
| packageName | string | Yes | The npm package name (e.g., @asafarim/display-code) |
| githubPath | string | Yes | Path to the package in the GitHub repo (e.g., packages/display-code) |
| demoPath | string | No | Path to the demo in GitHub Pages (e.g., packages/display-code) |
$3
A versatile, professional button component with multiple variants, sizes, and states. Features modern glass morphism effects and full accessibility support.
#### Usage
`tsx
import { ButtonComponent } from '@asafarim/shared';
function App() {
return (
Primary Button
Loading Button
Disabled Button
);
}
`
#### Props
| Prop | Type | Default | Description |
|--------------|-----------------------------------------|-------------|------------------------------------------------|
| variant | 'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'outline' \| 'ghost' \| 'link' | 'primary' | Button visual style variant |
| size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | 'md' | Button size |
| loading | boolean | false | Shows loading spinner |
| disabled | boolean | false | Disables the button |
| fullWidth | boolean | false | Makes button full width |
| leftIcon | ReactNode | - | Icon displayed on the left |
| rightIcon | ReactNode | - | Icon displayed on the right |
| onClick | (event: MouseEvent) => void | - | Click handler |
| type | 'button' \| 'submit' \| 'reset' | 'button' | Button HTML type |
| className | string | - | Additional CSS classes |
| children | ReactNode | - | Button content |
$3
A flexible search input component with multiple visual styles and built-in clear functionality. Perfect for filtering, searching, and form inputs.
#### Usage
`tsx
import { SearchItems } from '@asafarim/shared';
function App() {
const [searchTerm, setSearchTerm] = useState('');
return (
searchTerm={searchTerm}
onSearchChange={setSearchTerm}
placeholder="Search components..."
searchType="default"
/>
searchTerm={searchTerm}
onSearchChange={setSearchTerm}
placeholder="Filter results..."
searchType="outlined"
/>
);
}
`
#### Props
| Prop | Type | Default | Description |
|----------------|-----------------------------------------|---------------------|------------------------------------------------|
| searchTerm | string | - | Current search value (controlled) |
| onSearchChange | (value: string) => void | - | Callback when search value changes |
| placeholder | string | "Search projects..." | Placeholder text for the input |
| className | string | "search-input" | CSS class name for the input element |
| searchType | 'default' \| 'compact' \| 'outlined' \| 'minimal' | 'default' | Visual style variant |
$3
A dropdown/select component with customizable options and multiple visual styles. Ideal for forms, filters, and selection controls.
#### Usage
`tsx
import { DDItems } from '@asafarim/shared';
function App() {
const [selectedValue, setSelectedValue] = useState('');
const options = [
{ value: 'react', label: 'React' },
{ value: 'vue', label: 'Vue.js' },
{ value: 'angular', label: 'Angular' },
];
return (
selectedValue={selectedValue}
onValueChange={setSelectedValue}
items={options}
dropdownType="default"
placeholder="Select framework..."
/>
selectedValue={selectedValue}
onValueChange={setSelectedValue}
items={options}
dropdownType="outlined"
placeholder="Choose option..."
/>
);
}
`
#### Props
| Prop | Type | Default | Description |
|----------------|-----------------------------------------|---------------------|------------------------------------------------|
| selectedValue | string | - | Currently selected value (controlled) |
| onValueChange | (value: string) => void | - | Callback when selection changes |
| items | DropdownItem[] | - | Array of options with value and label |
| dropdownType | 'default' \| 'compact' \| 'outlined' \| 'minimal' | 'default' | Visual style variant |
| className | string | "filter-select" | CSS class name for the select element |
| placeholder | string | "Select an option" | Placeholder text when no option selected |
#### DropdownItem Interface
`tsx
interface DropdownItem {
value: string;
label: string;
}
`
$3
A comprehensive form input component supporting 10+ input types with validation, states, and accessibility features. Perfect for building robust forms with consistent styling.
#### Usage
Demonstrating both the generic InputFields API and static subcomponents:
`tsx
import React, { useState } from 'react';
import { InputFields } from '@asafarim/shared';
function App() {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [comments, setComments] = useState('');
const [volume, setVolume] = useState('50');
return (
{/ Generic API /}
type="text"
styling="default"
label="Full Name"
placeholder="Enter your name"
value={name}
onChange={setName}
required
/>
{/ Static subcomponents /}
styling="outlined"
label="Email Address"
placeholder="user@example.com"
value={email}
onChange={setEmail}
validation={{ required: true, pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/ }}
validateOnChange
icon="📧"
iconPosition="left"
helperText="Enter a valid email address"
/>
styling="minimal"
label="Comments"
placeholder="Share your thoughts..."
value={comments}
onChange={setComments}
rows={4}
validation={{ maxLength: 500 }}
showCharacterCount
helperText="Maximum 500 characters"
/>
styling="default"
label="Volume"
min={0}
max={100}
step={1}
value={volume}
onChange={setVolume}
/>
);
}
`
#### Props
| Prop | Type | Default | Description |
|----------------|-----------------------------------------|---------------------|------------------------------------------------|
| type | InputFieldType | 'text' | Input type (text, email, password, number, tel, url, search, date, time, textarea, range) |
| styling | 'default' \| 'compact' \| 'outlined' \| 'minimal' | 'default' | Visual style variant |
| label | string | - | Input label text |
| placeholder | string | - | Placeholder text |
| value | string | - | Input value (controlled) |
| onChange | (value: string, name?: string) => void | - | Change handler function |
| validation | ValidationRule | - | Validation configuration |
| error | string | - | Error message to display |
| success | boolean | false | Success state styling |
| loading | boolean | false | Loading state with spinner |
| disabled | boolean | false | Disabled state |
| readOnly | boolean | false | Read-only state |
| required | boolean | false | Required field indicator |
| size | 'sm' \| 'md' \| 'lg' | 'md' | Input size |
| icon | React.ReactNode | - | Icon element |
| iconPosition | 'left' \| 'right' | 'left' | Icon position |
| helperText | string | - | Helper text below input |
| showCharacterCount | boolean | false | Show character counter |
#### InputFieldType
`tsx
type InputFieldType =
| 'text' | 'email' | 'password' | 'number' | 'tel'
| 'url' | 'search' | 'date' | 'time' | 'textarea' | 'range';
`
#### ValidationRule Interface
`tsx
interface ValidationRule {
required?: boolean;
minLength?: number;
maxLength?: number;
pattern?: RegExp;
custom?: (value: string) => string | null;
}
`
$3
A highly customizable header component with multiple types, sizes, and layout options. Perfect for creating application headers, navigation bars, and page headers with full theme integration.
#### Usage
`tsx
import { HeaderComponent } from '@asafarim/shared';
function App() {
return (
type="default"
title="My Application"
subtitle="Welcome to our platform"
logoText="MA"
size="md"
align="space-between"
elevation="medium"
showBorder
showShadow
leftContent={Dashboard }
rightContent={Profile }
/>
type="minimal"
title="Landing Page"
subtitle="The ultimate solution"
transparent
align="center"
size="lg"
centerContent={Get Started }
/>
);
}
`
#### Props
| Prop | Type | Default | Description |
|----------------|-----------------------------------------|---------------------|------------------------------------------------|
| type | 'default' \| 'compact' \| 'outlined' \| 'minimal' | 'default' | Header visual style variant |
| title | string | - | Main header title |
| subtitle | string | - | Optional subtitle |
| logo | ReactNode | - | Logo icon component |
| logoText | string | - | Logo text (fallback) |
| size | 'sm' \| 'md' \| 'lg' | 'md' | Header size |
| align | 'left' \| 'center' \| 'right' \| 'space-between' | 'left' | Content alignment |
| elevation | 'none' \| 'low' \| 'medium' \| 'high' | 'none' | Shadow elevation |
| fixed | boolean | false | Fixed positioning |
| transparent | boolean | false | Transparent background |
| showBorder | boolean | false | Show bottom border |
| showShadow | boolean | false | Show shadow |
| backgroundColor | string | - | Custom background color |
| textColor | string | - | Custom text color |
| leftContent | ReactNode | - | Left side content |
| rightContent | ReactNode | - | Right side content |
| centerContent | ReactNode | - | Center content |
| onLogoClick | () => void | - | Logo click handler |
| onTitleClick | () => void | - | Title click handler |
| className | string | - | Additional CSS classes |
| style | React.CSSProperties | - | Inline styles |
$3
A pre-configured header component optimized for standard page layouts with balanced design and medium elevation.
#### Usage
`tsx
import { DefaultPageHeader } from '@asafarim/shared';
function App() {
return (
title="Dashboard"
subtitle="Welcome back, User"
logoText="D"
leftContent={
Dashboard
Analytics
}
rightContent={
Profile
}
onLogoClick={() => console.log('Logo clicked')}
onTitleClick={() => console.log('Title clicked')}
/>
);
}
`
#### Props
| Prop | Type | Default | Description |
|----------------|-----------------------------------------|---------------------|------------------------------------------------|
| title | string | - | Main header title |
| subtitle | string | - | Optional subtitle |
| logo | ReactNode | - | Logo icon component |
| logoText | string | - | Logo text (fallback) |
| leftContent | ReactNode | - | Left side content |
| rightContent | ReactNode | - | Right side content |
| centerContent | ReactNode | - | Center content |
| onLogoClick | () => void | - | Logo click handler |
| onTitleClick | () => void | - | Title click handler |
| fixed | boolean | false | Fixed positioning |
| className | string | - | Additional CSS classes |
| style | React.CSSProperties | - | Inline styles |
$3
A hero-style header component designed for landing pages with background support and prominent call-to-action integration.
#### Usage
`tsx
import { HeroPageHeader } from '@asafarim/shared';
function App() {
return (
title="Welcome to Our Platform"
subtitle="The ultimate solution for your business needs"
logoText="P"
backgroundGradient="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
cta={
Get Started
Learn More
}
leftContent={About }
rightContent={Contact }
/>
);
}
`
#### Props
| Prop | Type | Default | Description |
|--------------------|-----------------------------------------|---------------------|------------------------------------------------|
| title | string | - | Hero title |
| subtitle | string | - | Hero subtitle |
| logo | ReactNode | - | Logo icon component |
| logoText | string | - | Logo text (fallback) |
| backgroundImage | string | - | Background image URL |
| backgroundGradient | string | - | CSS gradient string |
| cta | ReactNode | - | Call-to-action component |
| leftContent | ReactNode | - | Left side content |
| rightContent | ReactNode | - | Right side content |
| onLogoClick | () => void | - | Logo click handler |
| onTitleClick | () => void | - | Title click handler |
| className | string | - | Additional CSS classes |
| style | React.CSSProperties | - | Inline styles |
$3
A conversion-focused header component optimized for user engagement and sign-up flows with prominent call-to-action button placement.
#### Usage
`tsx
import { CallToActionPageHeader } from '@asafarim/shared';
function App() {
return (
title="Premium Features"
subtitle="Unlock the full potential of our platform"
logoText="PF"
ctaButton={
Upgrade Now
}
leftContent={
Features
Pricing
}
centerContent={Limited time offer!}
/>
);
}
`
#### Props
| Prop | Type | Default | Description |
|----------------|-----------------------------------------|---------------------|------------------------------------------------|
| title | string | - | Header title |
| subtitle | string | - | Header subtitle |
| logo | ReactNode | - | Logo icon component |
| logoText | string | - | Logo text (fallback) |
| ctaButton | ReactNode | - | Required CTA button |
| leftContent | ReactNode | - | Left side content |
| centerContent | ReactNode | - | Center content |
| onLogoClick | () => void | - | Logo click handler |
| onTitleClick | () => void | - | Title click handler |
| fixed | boolean | false | Fixed positioning |
| className | string | - | Additional CSS classes |
| style | React.CSSProperties | - | Inline styles |
$3
A premium header component with gradient styling and visual impact, perfect for high-impact designs and corporate websites.
#### Usage
`tsx
import { FancyPageHeader } from '@asafarim/shared';
function App() {
return (
title="Enterprise Solutions"
subtitle="Built for scale, designed for success"
logoText="ES"
gradient="linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%)"
leftContent={
Solutions
Industries
}
rightContent={
Contact Sales
}
/>
);
}
`
#### Props
| Prop | Type | Default | Description |
|----------------|-----------------------------------------|---------------------|------------------------------------------------|
| title | string | - | Header title |
| subtitle | string | - | Header subtitle |
| logo | ReactNode | - | Logo icon component |
| logoText | string | - | Logo text (fallback) |
| icon | ReactNode | - | Icon component |
| gradient | string | - | Custom gradient background |
| leftContent | ReactNode | - | Left side content |
| rightContent | ReactNode | - | Right side content |
| centerContent | ReactNode | - | Center content |
| onLogoClick | () => void | - | Logo click handler |
| onTitleClick | () => void | - | Title click handler |
| fixed | boolean | false | Fixed positioning |
| className | string | - | Additional CSS classes |
| style | React.CSSProperties | - | Inline styles |
$3
A specialized header component designed for admin interfaces and dashboards with built-in stats, pagination, and action buttons.
#### Usage
`tsx
import { AdminHeader, ButtonComponent } from '@asafarim/shared';
function App() {
return (
title="User Management"
subtitle="Manage all user accounts and permissions"
icon={
}
totalCount={1247}
itemName="Users"
currentPage={1}
totalPages={5}
showPagination={true}
actions={
Add User
Export
Settings
}
/>
);
}
`
#### Props
| Prop | Type | Default | Description |
|----------------|-----------------------------------------|---------------------|------------------------------------------------|
| title | string | - | Main header title |
| subtitle | string | - | Optional subtitle |
| icon | ReactNode | - | Custom icon component |
| totalCount | number | - | Total number of items |
| itemName | string | - | Name of the item type (e.g., "Users", "Products") |
| currentPage | number | 1 | Current page number |
| totalPages | number | 1 | Total number of pages |
| showPagination | boolean | false | Show pagination information |
| actions | ReactNode | - | Action buttons or elements |
| className | string | - | Additional CSS classes |
| style | React.CSSProperties | - | Inline styles |
---
🎨 Theme Integration
This library is designed to work seamlessly with @asafarim/react-themes for automatic dark/light mode switching and consistent theming across your application.
$3
- 🌙 Automatic Dark/Light Mode: Respects system preferences with manual override
- 🎨 CSS Variables: Consistent design system with customizable variables
- ⚡ Smooth Transitions: Seamless theme switching animations
- 📱 Responsive Design: Mobile-first approach with touch-friendly controls
- ♿ Accessibility: WCAG 2.1 AA compliant with keyboard navigation support
- 🎯 Multiple Variants: Each component offers different visual styles
- 🔧 TypeScript Support: Full type definitions for better developer experience
- 📦 Tree Shaking: Optimized bundle size with selective imports
$3
#### Form & Input Components
- SearchItems: 4 visual styles, built-in clear button, focus states
- DDItems: 4 visual styles, custom dropdown arrow, keyboard navigation
- ButtonComponent: 9 variants, 5 sizes, loading states, icon support
#### Display Components
- PackageLinks: Automatic link generation, responsive layout, icon integration
$3
`tsx
import React, { useState } from 'react';
import { ThemeProvider } from '@asafarim/react-themes';
import { PackageLinks, ButtonComponent, SearchItems, DDItems } from '@asafarim/shared';
import '@asafarim/react-themes/styles.css';
function App() {
const [searchTerm, setSearchTerm] = useState('');
const [selectedFramework, setSelectedFramework] = useState('');
const frameworkOptions = [
{ value: 'react', label: 'React' },
{ value: 'vue', label: 'Vue.js' },
{ value: 'angular', label: 'Angular' },
];
return (
Click me!
searchTerm={searchTerm}
onSearchChange={setSearchTerm}
placeholder="Search components..."
searchType="outlined"
/>
selectedValue={selectedFramework}
onValueChange={setSelectedFramework}
items={frameworkOptions}
dropdownType="outlined"
placeholder="Select framework..."
/>
packageName="@asafarim/shared"
githubPath="https://github.com/AliSafari-IT/shared"
/>
);
}
`
---
🛠️ Development
$3
`sh
pnpm install
pnpm build
`
$3
`sh
Install demo dependencies
pnpm demo:install
Start demo in dev mode
pnpm demo:dev
Build demo for production
pnpm demo:build
Preview production build
pnpm demo:preview
`
---
📁 Project Structure
`
shared/
├── src/ # Library source code
│ ├── components/ # React components
│ │ ├── Button/ # ButtonComponent
│ │ ├── Links/ # PackageLinks
│ │ ├── SearchBox/ # SearchItems
│ │ ├── Dropdowns/ # DDItems
│ │ └── Inputs/ # InputFields
│ ├── styles/ # Global CSS variables and theme system
│ ├── index.ts # Entry point
│ └── types.d.ts # TypeScript definitions
├── demo/ # Demo app (Vite + React)
│ ├── src/
│ │ ├── components/ # Demo components
│ │ │ ├── Overview.tsx
│ │ │ ├── PackageLinksDemo.tsx
│ │ │ ├── ButtonComponentDemo.tsx
│ │ │ ├── SearchItemsDemo.tsx
│ │ │ ├── DDItemsDemo.tsx
│ │ │ └── InputFieldsDemo.tsx
│ │ └── pages/
│ └── dist/ # Built demo
├── dist/ # Built library
├── package.json # v1.1.1
├── rollup.config.js # Build configuration
└── tsconfig.json # TypeScript configuration
`
---
🚢 Deployment
- The demo is auto-deployed to GitHub Pages on every push to main
- Workflow: Build library → Build demo → Deploy to https://alisafari-it.github.io/shared/
- Package is published to npm with public access
---
📦 Version History
$3
- ✨ Added ButtonComponent with professional styling and glass morphism effects
- 🎨 Enhanced theme integration with comprehensive CSS variable system
- 📱 Improved responsive design and accessibility features
- 🔧 Fixed build configuration for better CSS handling
$3
- � Initial release with PackageLinks component
- 📚 Basic demo application and documentation
---
🤝 Contributing
1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request
---
�📄 License
MIT © AliSafari-IT
---
🔗 Related Packages
- @asafarim/react-themes - Theme system integration
- @asafarim/display-code - Code syntax highlighting component
---
📖 Quick Reference
$3
`tsx
import {
PackageLinks, // Link display component
ButtonComponent, // Versatile button with variants
SearchItems, // Search input with styles
DDItems, // Dropdown/select component
InputFields // Comprehensive form input with 10+ types
} from '@asafarim/shared';
`
$3
`tsx
// Basic form with all components
function ContactForm() {
const [search, setSearch] = useState('');
const [category, setCategory] = useState('');
const [email, setEmail] = useState('');
const [message, setMessage] = useState('');
return (
);
}
`
$3
- Button Variants: primary, secondary, success, danger, warning, info, outline, ghost, link
- Button Sizes: xs, sm, md, lg, xl
- Search/Dropdown/Input Types: default, compact, outlined, minimal
- Input Field Types: text, email, password, number, tel, url, search, date, time, textarea`, ...