@shohojdhara/atomix 0.1.27 → 0.1.28

package/package.json

@@ -1,50 +1,24 @@
 {
   "name": "@shohojdhara/atomix",
-  "version": "0.1.27",
+  "version": "0.1.28",
   "description": "Atomix Design System - A modern component library for web applications",
-  "main": "dist/js/atomix.react.cjs.js",
-  "module": "dist/js/atomix.react.esm.js",
-  "unpkg": "dist/js/atomix.react.umd.js",
-  "jsdelivr": "dist/js/atomix.react.umd.js",
-  "browser": "dist/js/atomix.react.umd.js",
-  "types": "dist/types/index.d.ts",
-  "sideEffects": [
-    "*.css",
-    "*.scss",
-    "./dist/css/**/*"
-  ],
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "style": "dist/index.css",
+  "sass": "src/styles/index.scss",
   "exports": {
     ".": {
-      "types": "./dist/types/index.d.ts",
-      "import": "./dist/js/atomix.react.esm.js",
-      "require": "./dist/js/atomix.react.cjs.js",
-      "browser": "./dist/js/atomix.react.umd.js",
-      "default": "./dist/js/atomix.react.esm.js"
-    },
-    "./package.json": "./package.json",
-    "./css": {
-      "types": "./css.d.ts",
-      "default": "./dist/css/atomix.css"
-    },
-    "./css/min": {
-      "types": "./css.d.ts",
-      "default": "./dist/css/atomix.min.css"
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
     },
+    "./styles": "./dist/index.css",
+    "./styles.css": "./dist/index.css",
+    "./dist/index.css": "./dist/index.css",
     "./scss": "./src/styles/index.scss",
-    "./dist/types/*": "./dist/types/*",
-    "./components/*": {
-      "types": "./dist/types/components/*.d.ts",
-      "import": "./dist/js/components/*.js",
-      "require": "./dist/js/components/*.js",
-      "default": "./dist/js/components/*.js"
-    }
-  },
-  "typesVersions": {
-    "*": {
-      "*": [
-        "./dist/types/index.d.ts"
-      ]
-    }
+    "./package.json": "./package.json"
   },
   "dependencies": {
     "@babel/runtime-corejs3": "^7.27.6",
@@ -57,7 +31,11 @@
     "@babel/preset-env": "^7.26.9",
     "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.27.0",
-    "@size-limit/preset-app": "^11.0.0",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^11.1.6",
     "@storybook/addon-essentials": "^8.0.0",
     "@storybook/addon-interactions": "^8.0.0",
     "@storybook/addon-links": "^8.0.0",
@@ -75,11 +53,8 @@
     "autoprefixer": "^10.4.21",
     "babel-loader": "^10.0.0",
     "caniuse-lite": "^1.0.30001721",
-    "clean-webpack-plugin": "^4.0.0",
     "core-js": "^3.43.0",
     "css-loader": "^7.1.2",
-    "css-minimizer-webpack-plugin": "^5.0.1",
-    "cssnano": "^6.1.2",
     "eslint": "^9.29.0",
     "eslint-config-prettier": "^10.1.5",
     "eslint-plugin-import": "^2.31.0",
@@ -88,9 +63,6 @@
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
     "gh-pages": "^6.1.1",
-    "html-webpack-plugin": "^5.6.3",
-    "mini-css-extract-plugin": "^2.9.2",
-    "npm-run-all": "^4.1.5",
     "postcss": "^8.4.24",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-import": "^16.1.0",
@@ -98,6 +70,11 @@
     "postcss-preset-env": "^10.2.3",
     "prettier": "^3.5.3",
     "rimraf": "^5.0.5",
+    "rollup": "^4.9.6",
+    "rollup-plugin-dts": "^6.1.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "sass": "^1.89.2",
     "sass-embedded": "^1.87.0",
     "sass-loader": "^16.0.5",
     "size-limit": "^11.0.0",
@@ -105,60 +82,25 @@
     "style-loader": "^4.0.0",
     "terser": "^5.24.0",
     "terser-webpack-plugin": "^5.3.14",
-    "typescript": "^5.0.4",
-    "webpack": "^5.99.7",
-    "webpack-bundle-analyzer": "^4.10.2",
-    "webpack-cli": "^6.0.1",
-    "webpack-dev-server": "^5.2.1",
-    "webpack-node-externals": "^3.0.0"
+    "tslib": "^2.6.2",
+    "typescript": "^5.0.4"
   },
   "scripts": {
     "dev": "storybook dev -p 6006",
-    "build": "npm-run-all clean:dist build:styles build:react build:types fix:exports",
-    "fix:exports": "node scripts/fix-exports.js",
-    "build:react": "webpack --mode production --env target=components --env format=all",
-    "build:styles": "webpack --mode production --env target=styles",
-    "build:types": "npm run clean:types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types && node scripts/fix-types.js",
-    "build:cjs": "webpack --mode production --env target=components --env format=cjs",
-    "build:esm": "webpack --mode production --env target=components --env format=esm",
-    "build:umd": "webpack --mode production --env target=components --env format=umd",
-    "clean:dist": "rimraf dist",
-    "clean:types": "rimraf dist/types",
-    "clean:all": "npm-run-all clean:dist clean:types",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "predeploy": "npm run build-storybook && node scripts/prepare-deploy.js",
-    "deploy": "gh-pages -d deploy",
-    "analyze:bundle": "webpack --mode production --env target=components --env format=all --env analyze=true",
-    "analyze:size": "size-limit",
-    "analyze": "npm-run-all analyze:bundle analyze:size",
-    "lint": "eslint --ext .js,.jsx,.ts,.tsx src/",
-    "lint:fix": "eslint --ext .js,.jsx,.ts,.tsx src/ --fix",
-    "format": "prettier --write 'src/**/*.{js,jsx,ts,tsx,json,css,scss}'",
-    "format:check": "prettier --check 'src/**/*.{js,jsx,ts,tsx,json,css,scss}'",
-    "typecheck": "tsc --noEmit",
-    "test": "echo \"No tests specified\" && exit 0",
-    "prepublishOnly": "npm run build",
-    "prepack": "npm run build",
-    "test:publish": "npm pack --dry-run",
-    "publish:rc": "npm publish --tag next",
-    "publish:latest": "npm publish",
-    "version:patch": "npm version patch",
-    "version:minor": "npm version minor",
-    "version:major": "npm version major",
-    "release:patch": "node scripts/release.js patch",
-    "release:minor": "node scripts/release.js minor",
-    "release:major": "node scripts/release.js major"
+    "build": "rollup -c",
+    "build:watch": "rollup -c -w",
+    "clean": "rimraf dist",
+    "prebuild": "npm run clean",
+    "prepublishOnly": "npm run build"
   },
   "files": [
-    "src",
     "dist",
-    "index.d.ts",
-    "css.d.ts",
+    "src/styles",
     "README.md",
     "LICENSE",
-    "CHANGELOG.md",
-    "NPM_PUBLISHING.md"
+    "CHANGELOG.md"
   ],
   "keywords": [
     "ui",

package/NPM_PUBLISHING.md

@@ -1,221 +0,0 @@
-# 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/css.d.ts

@@ -1,10 +0,0 @@
-// Type definitions for CSS imports
-declare module '@shohojdhara/atomix/css' {
-  const content: void;
-  export default content;
-}
-
-declare module '@shohojdhara/atomix/css/min' {
-  const content: void;
-  export default content;
-}