@shohojdhara/atomix 0.1.23-rc.0 → 0.1.24

package/CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.1.18] - 2025-07-03
+
+## [0.1.16] - 2025-07-02
+
 ### Added
 - Initial release of Atomix Design System
 - Core components library with React and vanilla JavaScript support

package/NPM_PUBLISHING.md

@@ -0,0 +1,221 @@
+# Atomix NPM Package
+
+This document provides information about the Atomix NPM package structure and how to use the source files and configuration files included in the package.
+
+## Package Structure
+
+The Atomix package includes the following directories and files:
+
+- `dist/` - Compiled and minified distribution files
+  - `css/` - CSS stylesheets
+  - `js/` - JavaScript bundles (UMD, CommonJS, ESM)
+  - `types/` - TypeScript declaration files
+- `src/` - Source code files
+  - `components/` - React component source files
+  - `lib/` - Utility functions and helpers
+  - `styles/` - SCSS source files
+- Configuration files
+  - `tsconfig.json` - TypeScript configuration
+  - `webpack.config.js` - Webpack configuration
+  - `babel.config.js` - Babel configuration
+  - `postcss.config.js` - PostCSS configuration
+- Documentation files
+  - `README.md` - Main documentation
+  - `CHANGELOG.md` - Version history
+  - `LICENSE` - License information
+
+## Using the Distribution Files
+
+For most use cases, you should use the pre-built distribution files in the `dist/` directory:
+
+```js
+// Using ES modules
+import { Button } from '@shohojdhara/atomix';
+
+// Using CommonJS modules
+const { Button } = require('@shohojdhara/atomix');
+
+// Import styles
+import '@shohojdhara/atomix/css';
+
+// Using React-specific components
+import AtomixReact from '@shohojdhara/atomix/react';
+```
+
+### TypeScript Support
+
+The package includes TypeScript declarations for all components and utilities:
+
+```typescript
+// Import with full TypeScript support
+import { Button, Card, useColorMode } from '@shohojdhara/atomix';
+
+// Component props are fully typed
+const MyButton: React.FC = () => (
+  <Button 
+    variant="primary" 
+    size="md"
+    onClick={() => console.log('Clicked!')}
+  >
+    Click Me
+  </Button>
+);
+```
+
+## Using Source Files
+
+If you need to customize the components or build process, you can use the source files directly:
+
+### Components
+
+```js
+// Import a component directly from source
+import Button from '@shohojdhara/atomix/src/components/Button';
+```
+
+### Styles
+
+```scss
+// Import all styles
+@import '@shohojdhara/atomix/src/styles/index.scss';
+
+// Or import specific component styles
+@import '@shohojdhara/atomix/src/components/Button/Button.scss';
+```
+
+## Using Configuration Files
+
+You can extend or reference the included configuration files in your own project:
+
+### TypeScript Configuration
+
+```json
+// In your tsconfig.json
+{
+  "extends": "@shohojdhara/atomix/tsconfig.json",
+  "compilerOptions": {
+    // Your custom options
+  }
+}
+```
+
+### Webpack Configuration
+
+```js
+// In your webpack.config.js
+const atomixWebpackConfig = require('@shohojdhara/atomix/webpack.config.js');
+const { merge } = require('webpack-merge');
+
+module.exports = merge(atomixWebpackConfig, {
+  // Your custom webpack configuration
+});
+```
+
+### Babel Configuration
+
+```js
+// In your babel.config.js
+module.exports = {
+  presets: [
+    ['@shohojdhara/atomix/babel.config.js'],
+    // Your custom presets
+  ],
+  // Your custom plugins
+};
+```
+
+## Building from Source
+
+If you want to build the package from source:
+
+```bash
+# Clone the repository
+git clone https://github.com/liimonx/atomix.git
+cd atomix
+
+# Install dependencies
+npm install
+
+# Build all components
+npm run build
+```
+
+## Developer Experience Improvements
+
+### Dynamic Version Handling
+
+The package now supports dynamic version handling through environment variables:
+
+```bash
+# Build with a specific version
+VERSION=0.1.1 npm run build
+```
+
+This allows for easier version management during development and CI/CD pipelines.
+
+### Version Management Scripts
+
+The package includes convenient scripts for version management:
+
+```bash
+# Bump patch version (0.1.0 -> 0.1.1)
+npm run version:patch
+
+# Bump minor version (0.1.0 -> 0.2.0)
+npm run version:minor
+
+# Bump major version (0.1.0 -> 1.0.0)
+npm run version:major
+```
+
+### Component-Level Imports
+
+For better tree-shaking, you can now import individual components directly:
+
+```js
+// Import specific components
+import Button from '@shohojdhara/atomix/Button';
+import Card from '@shohojdhara/atomix/Card';
+```
+
+### Local Testing
+
+To test the package locally in another project:
+
+```bash
+# In the Atomix project directory
+npm run link:local
+
+# In your test project directory
+npm link @shohojdhara/atomix
+```
+
+See the [example-project.md](./example-project.md) file for a complete example project that demonstrates how to use the package.
+
+### Release Candidate Workflow
+
+For testing before final releases, you can publish release candidates:
+
+```bash
+# Publish as a release candidate
+npm run publish:rc
+
+# Later, publish as the latest version
+npm run publish:latest
+```
+
+## Bundle Analysis
+
+To analyze the bundle size and composition:
+
+```bash
+# Run bundle analyzer
+npm run analyze:bundle
+
+# Check package size limits
+npm run analyze:size
+```
+
+## Contributing
+
+Contributions are welcome! Please see the [README.md](./README.md) file for more information on how to contribute to the project.

package/README.md

@@ -1,182 +1,72 @@
-# Atomix Design System
-
-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.
-
-## Features
-
-- 🚀 **Next.js Compatible** - Full SSR support with App Router
-- 🎨 **Modern Design** - Clean and contemporary design aesthetic
-- 📱 **Responsive** - Mobile-first responsive components
-- 🌓 **Theme Support** - Built-in dark/light theme support
-- ♿ **Accessible** - WCAG compliant components
-- 🛠️ **Customizable** - Extensive customization options
-- 📦 **Tree Shakeable** - Import only what you need
-- 🔧 **TypeScript** - Full TypeScript support
-
-## Webpack 5 & Next.js Compatibility
-
-Atomix is fully compatible with Webpack 5 and Next.js (including Turbopack). For projects using Webpack 5 or Next.js, you may need to add the following configuration to handle Node.js core modules:
-
-```js
-// For Next.js (in next.config.js)
-const nextConfig = {
-  webpack: (config, { isServer }) => {
-    // Handle TypeScript declaration files
-    config.module.rules.push({
-      test: /\.d\.ts$/,
-      use: ['ignore-loader'],
-      exclude: /node_modules/,
-    });
-
-    // Ignore TypeScript declaration file warnings
-    config.ignoreWarnings = [
-      ...(config.ignoreWarnings || []),
-      { module: /\.d\.ts$/ }
-    ];
-
-    if (!isServer) {
-      config.resolve.fallback = {
-        ...config.resolve.fallback,
-        crypto: false, // Provide empty mock for crypto
-      };
-    }
-    return config;
-  },
-  transpilePackages: ['@shohojdhara/atomix'],
-};
-
-// For Webpack 5 (in webpack.config.js)
-module.exports = {
-  resolve: {
-    fallback: {
-      crypto: false, // Provide empty mock for crypto
-    },
-  },
-  // Fix TypeScript declaration files issues
-  ignoreWarnings: [
-    {
-      module: /\.d\.ts$/,
-    },
-  ],
-};
-```
 
-## Installation
+# Atomix
 
-```bash
-npm install @shohojdhara/atomix
-# or
-yarn add @shohojdhara/atomix
-# or
-pnpm add @shohojdhara/atomix
-```
+**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.
 
-## Usage
+## ✨ Features
 
-### Basic CSS Import
+- **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.
 
-```tsx
-import { Button } from '@shohojdhara/atomix';
-import '@shohojdhara/atomix/css'; // Import styles
+## 📦 Installation
 
-function App() {
-  return (
-    <Button variant="primary">Click Me</Button>
-  );
-}
-```
-
-### Multiple CSS Integration Options
+To install Atomix, you can use npm or yarn:
 
-Atomix provides several ways to integrate CSS based on your project needs:
-
-#### 1. Traditional CSS Import
-```javascript
-import '@shohojdhara/atomix/css';
-// or minified version
-import '@shohojdhara/atomix/css/min';
+```bash
+npm install @shohojdhara/atomix
 ```
 
-#### 2. SCSS Source Access
-```scss
-@use '@shohojdhara/atomix/scss' as atomix;
-// or selective imports
-@use '@shohojdhara/atomix/src/styles/06-components/components.button';
+```bash
+yarn add @shohojdhara/atomix
 ```
 
+## 🚀 Usage
 
+To start using Atomix, import the CSS and the components you need.
 
-#### 3. CSS Modules
-```tsx
-import '@shohojdhara/atomix/css';
-import styles from './component.module.css';
+### CSS
 
-<Button className={`c-btn ${styles.customButton}`}>
-  Scoped Button
-</Button>
-```
+Import the CSS file in your main application file:
 
-📚 **[Complete CSS Integration Guide](./CSS_INTEGRATION_GUIDE.md)** - Detailed documentation for all CSS integration approaches.
-
-## CSS Variables
-
-```css
-:root {
-  /* Primary Colors */
-  --atomix-primary-50: #eff6ff;
-  --atomix-primary-500: #3b82f6;
-  --atomix-primary-900: #1e3a8a;
-  
-  /* Spacing */
-  --atomix-spacing-xs: 0.25rem;
-  --atomix-spacing-sm: 0.5rem;
-  --atomix-spacing-md: 1rem;
-}
+```javascript
+import '@shohojdhara/atomix/dist/css/atomix.css';
 ```
 
-### Theme Support
+### Components
+
+Import the components you want to use:
 
-```tsx
-// Set theme programmatically
-document.documentElement.setAttribute('data-atomix-theme', 'dark')
+```javascript
+import { Button, Card } from '@shohojdhara/atomix';
 
-// Or use CSS
-html[data-atomix-theme="dark"] {
-  /* Dark theme styles */
+function App() {
+  return (
+    <div>
+      <Button>Click me</Button>
+      <Card>
+        <h2>Card Title</h2>
+        <p>This is a simple card component.</p>
+      </Card>
+    </div>
+  );
 }
 ```
 
-## Browser Support
-
-- Chrome (latest)
-- Firefox (latest)
-- Safari (latest)
-- Edge (latest)
-
-## Documentation
-
-- 📚 [Full Documentation](https://liimonx.github.io/atomix)
-- 🎨 [Storybook](https://liimonx.github.io/atomix/storybook)
-- 🎨 **[CSS Integration Guide](./CSS_INTEGRATION_GUIDE.md)** - Complete guide for all CSS approaches
-- 🚀 [Next.js Integration Guide](./NEXTJS_INTEGRATION.md)
-- 📝 [Contributing Guide](./CONTRIBUTING.md)
-- 💡 [Examples](./examples/) - Working examples for different use cases
-
-## Contributing
-
-We welcome contributions! Please see our [Contributing Guide](./CONTRIBUTING.md) for details.
-
-## License
-
-MIT © [liimonx](https://github.com/liimonx)
-
-## Support
+## 🤝 Contributing
 
-- [GitHub Issues](https://github.com/liimonx/atomix/issues)
-- [Discussions](https://github.com/liimonx/atomix/discussions)
+We welcome contributions from the community. If you'd like to contribute, please follow these steps:
 
-## Quick Start
+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.
 
-### Next.js Integration
+## 📝 License
 
-```
+Atomix is licensed under the [Apache-2.0 License](LICENSE).