@shohojdhara/atomix 0.1.30 → 0.2.1

package/README.md

@@ -1,72 +1,184 @@
+# Atomix Design System
 
-# Atomix
+> A modern, accessible design system and component library for building beautiful user interfaces.
 
-**Atomix** is a modern component library for Web, React and Next.js applications with full SSR support. It provides a comprehensive set of UI components built with accessibility, performance, and developer experience in mind.
+[![npm version](https://img.shields.io/npm/v/@shohojdhara/atomix)](https://www.npmjs.com/package/@shohojdhara/atomix)
+[![License](https://img.shields.io/npm/l/@shohojdhara/atomix)](https://github.com/Shohojdhara/atomix/blob/main/LICENSE)
+[![Downloads](https://img.shields.io/npm/dm/@shohojdhara/atomix)](https://www.npmjs.com/package/@shohojdhara/atomix)
 
-## ✨ Features
+## Overview
 
-- **Comprehensive Component Library**: A rich set of UI components to build modern web applications.
-- **Full SSR Support**: Seamless integration with server-side rendering frameworks like Next.js.
-- **Accessibility First**: Built with accessibility in mind, following WAI-ARIA standards.
-- **High Performance**: Optimized for performance with a small bundle size.
-- **Developer Friendly**: Easy to use with a simple and intuitive API.
-- **Themeable**: Easily customize the look and feel to match your brand.
-- **TypeScript Support**: Written in TypeScript with predictable static types.
+Atomix is a modern, accessible design system and component library for building beautiful user interfaces. It provides a comprehensive set of 40+ production-ready components with consistent design language, accessibility compliance, and performance optimization.
 
-## 📦 Installation
+### Key Features
 
-To install Atomix, you can use npm or yarn:
+- **40+ Production-Ready Components**: Buttons, cards, forms, navigation, and more
+- **Design System Compliance**: Consistent design language with design tokens
+- **Accessibility First**: WCAG 2.1 AA compliant components
+- **TypeScript Support**: Full TypeScript definitions for all components
+- **Responsive Design**: Mobile-first responsive components
+- **Dark Mode Support**: Built-in dark mode support for all components
+- **Tree-Shaking Support**: Optimized for modern bundlers
+- **Multiple Themes**: Multiple built-in themes with easy customization
+- **React & Vanilla JavaScript**: Support for both React and vanilla JavaScript
+
+## Installation
 
 ```bash
 npm install @shohojdhara/atomix
 ```
 
-```bash
-yarn add @shohojdhara/atomix
+## Usage
+
+### React
+
+```jsx
+import { Button } from '@shohojdhara/atomix';
+import '@shohojdhara/atomix/css';
+
+function App() {
+  return <Button variant="primary">Hello World</Button>;
+}
 ```
 
-## 🚀 Usage
+## Styles
 
-To start using Atomix, import the CSS and the components you need.
+Atomix provides comprehensive styling through CSS or SCSS:
 
 ### CSS
 
-Import the CSS file in your main application file:
+```js
+// Import the main CSS file
+import '@shohojdhara/atomix/css';
+
+// Or import the minified version
+import '@shohojdhara/atomix/css/min';
+```
+
+### SCSS
+
+```scss
+// Import the main SCSS file
+@use '~@shohojdhara/atomix/scss' as atomix;
 
-```javascript
-import '@shohojdhara/atomix/dist/css/atomix.css';
+// Or import individual modules
+@use '~@shohojdhara/atomix/scss/settings' as settings;
+@use '~@shohojdhara/atomix/scss/tools' as tools;
+@use '~@shohojdhara/atomix/scss/components' as components;
 ```
 
-### Components
+## Themes
 
-Import the components you want to use:
+Atomix comes with multiple built-in themes:
 
-```javascript
-import { Button, Card } from '@shohojdhara/atomix';
+```js
+// Import a specific theme
+import '@shohojdhara/atomix/themes/boomdevs';
+
+// Or use the theme switcher
+import { ThemeSwitcher } from '@shohojdhara/atomix';
 
 function App() {
   return (
-    <div>
-      <Button>Click me</Button>
-      <Card>
-        <h2>Card Title</h2>
-        <p>This is a simple card component.</p>
-      </Card>
-    </div>
+    <ThemeSwitcher>
+      <Button variant="primary">Themed Button</Button>
+    </ThemeSwitcher>
   );
 }
 ```
 
-## 🤝 Contributing
+Available themes:
+- Default (shaj-default)
+- BoomDevs
+- Esrar
+- Mashroom
+- Yabai
+
+## Build Process
+
+The Atomix Design System uses a comprehensive build process to generate optimized assets:
+
+### Main Build
+
+```bash
+npm run build
+```
+
+This command will:
+1. Build the main JavaScript library (ESM and CJS formats)
+2. Generate TypeScript definitions
+3. Build the main CSS styles (`dist/atomix.css` and `dist/atomix.min.css`)
+4. Build all themes in `dist/themes/`
+
+### Individual Builds
+
+```bash
+# Build only the main styles
+npm run build:styles
+
+# Build only the themes
+npm run build:themes
+
+# Build only the main library
+npm run rollup -c
+```
+
+### Development
+
+```bash
+# Start Storybook for component development
+npm run dev
+
+# Run tests
+npm test
+
+# Run tests in watch mode
+npm run test:watch
+
+# Generate test coverage
+npm run test:coverage
+```
+
+## Components
+
+Atomix provides 40+ production-ready components organized into categories:
+
+- **Actions**: [Button](src/components/Button), [Dropdown](src/components/Dropdown), [Pagination](src/components/Pagination)
+- **Data Display**: [Badge](src/components/Badge), [Card](src/components/Card), [Table](src/components/Table)
+- **Feedback**: [Alert](src/components/Alert), [Loader](src/components/Loader), [Progress](src/components/Progress)
+- **Forms**: [Checkbox](src/components/Checkbox), [Input](src/components/Input), [Select](src/components/Select)
+- **Navigation**: [Breadcrumb](src/components/Breadcrumb), [Navbar](src/components/Navbar), [Tabs](src/components/Tabs)
+- **Surfaces**: [Accordion](src/components/Accordion), [Callout](src/components/Callout), [Modal](src/components/Modal)
+- **Utilities**: [ColorModeToggle](src/components/ColorModeToggle), [Portal](src/components/Portal), [ThemeProvider](src/components/ThemeProvider)
+
+## Design Tokens
+
+Atomix uses design tokens for consistent design language:
+
+- **Colors**: Consistent color palette with light and dark mode variants
+- **Spacing**: Consistent spacing scale based on 4px grid
+- **Typography**: Consistent typography scale with responsive adjustments
+- **Borders**: Consistent border radius and width system
+- **Shadows**: Consistent shadow system for depth and elevation
+
+## Accessibility
+
+All Atomix components are built with accessibility in mind:
+
+- **WCAG 2.1 AA Compliant**: All components meet WCAG 2.1 AA standards
+- **Keyboard Navigation**: Full keyboard navigation support
+- **Screen Reader Support**: Proper ARIA attributes and semantic HTML
+- **Focus Management**: Consistent focus indicators and management
+- **Color Contrast**: Proper color contrast ratios for readability
+
+## Browser Support
+
+Atomix supports all modern browsers:
 
-We welcome contributions from the community. If you'd like to contribute, please follow these steps:
+## Contributing
 
-1. **Fork the repository**: Fork the repository to your own GitHub account.
-2. **Create a branch**: Create a new branch for your feature or bug fix.
-3. **Make your changes**: Make your changes and commit them with a clear and concise message.
-4. **Push your changes**: Push your changes to your forked repository.
-5. **Create a pull request**: Create a pull request to the main repository.
+Contributions are welcome! Please read our [contributing guidelines](CONTRIBUTING.md) for details on our code of conduct and development process.
 
-## 📝 License
+## License
 
-Atomix is licensed under the [Apache-2.0 License](LICENSE).
+Apache 2.0 © [Shohojdhara](https://github.com/Shohojdhara)