@shohojdhara/atomix 0.1.30 → 0.2.2

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@shohojdhara/atomix",
-  "version": "0.1.30",
+  "version": "0.2.2",
   "description": "Atomix Design System - A modern component library for web applications",
   "type": "module",
   "sideEffects": false,
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
-  "style": "dist/index.css",
+  "style": "dist/atomix.css",
   "sass": "src/styles/index.scss",
   "exports": {
     ".": {
@@ -16,112 +16,130 @@
       "require": "./dist/index.js"
     },
     "./styles": {
-      "import": "./dist/index.css",
-      "require": "./dist/index.css"
+      "import": "./dist/atomix.css",
+      "require": "./dist/atomix.min.css"
     },
+    "./css": "./dist/atomix.css",
+    "./css/min": "./dist/atomix.min.css",
     "./scss": "./src/styles/index.scss",
+    "./scss/settings": "./src/styles/01-settings/_index.scss",
+    "./scss/tools": "./src/styles/02-tools/_index.scss",
+    "./scss/generic": "./src/styles/03-generic/_index.scss",
+    "./scss/elements": "./src/styles/04-elements/_index.scss",
+    "./scss/objects": "./src/styles/05-objects/_index.scss",
+    "./scss/components": "./src/styles/06-components/_index.scss",
+    "./scss/utilities": "./src/styles/99-utilities/_index.scss",
+    "./themes/*": "./dist/themes/*.css",
+    "./themes/*.min": "./dist/themes/*.min.css",
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@babel/runtime-corejs3": "^7.27.6",
-    "classnames": "^2.5.1",
-    "phosphor-react": "^1.4.1"
+    "@phosphor-icons/react": "2.1.10",
+    "classnames": "^2.3.0"
   },
   "devDependencies": {
-    "@arethetypeswrong/cli": "^0.18.2",
-    "@babel/core": "^7.26.10",
-    "@babel/plugin-transform-runtime": "^7.27.4",
-    "@babel/preset-env": "^7.26.9",
-    "@babel/preset-react": "^7.26.3",
-    "@babel/preset-typescript": "^7.27.0",
-    "@changesets/cli": "^2.29.5",
-    "@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",
-    "@storybook/blocks": "^8.0.0",
-    "@storybook/cli": "^8.0.0",
-    "@storybook/react": "^8.0.0",
-    "@storybook/react-webpack5": "^8.6.12",
-    "@storybook/test": "^8.0.0",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.3.0",
-    "@testing-library/user-event": "^14.6.1",
+    "@arethetypeswrong/cli": "^0.15.0",
+    "@babel/core": "^7.23.0",
+    "@babel/plugin-transform-runtime": "^7.23.0",
+    "@babel/preset-env": "^7.23.0",
+    "@babel/preset-react": "^7.23.0",
+    "@babel/preset-typescript": "^7.23.0",
+    "@babel/runtime-corejs3": "^7.23.0",
+    "@changesets/cli": "^2.26.0",
+    "@rollup/plugin-babel": "^6.0.0",
+    "@rollup/plugin-commonjs": "^25.0.0",
+    "@rollup/plugin-node-resolve": "^15.0.0",
+    "@rollup/plugin-terser": "^0.4.0",
+    "@rollup/plugin-typescript": "^11.0.0",
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/addon-interactions": "^8.6.14",
+    "@storybook/addon-links": "^8.6.14",
+    "@storybook/addon-measure": "^8.6.14",
+    "@storybook/addon-outline": "^8.6.14",
+    "@storybook/addon-viewport": "^8.6.14",
+    "@storybook/blocks": "^8.6.14",
+    "@storybook/cli": "^8.6.14",
+    "@storybook/components": "^8.6.14",
+    "@storybook/core-events": "^8.6.14",
+    "@storybook/manager-api": "^8.6.14",
+    "@storybook/preview-api": "^8.6.14",
+    "@storybook/react": "^8.6.14",
+    "@storybook/react-vite": "^8.6.14",
+    "@storybook/test": "^8.6.14",
+    "@storybook/theming": "^8.6.14",
+    "@storybook/types": "^8.6.14",
+    "@testing-library/jest-dom": "^5.16.0",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.0.0",
+    "@testing-library/dom": "^8.0.0",
     "@types/classnames": "^2.3.0",
+    "@types/jest": "^29.5.14",
     "@types/node": "^20.0.0",
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0",
-    "@typescript-eslint/eslint-plugin": "^8.34.0",
-    "@typescript-eslint/parser": "^8.34.0",
-    "@vitest/coverage-v8": "^3.2.4",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "@vitejs/plugin-react": "^4.0.0",
     "autoprefixer": "^10.4.21",
-    "babel-loader": "^10.0.0",
-    "caniuse-lite": "^1.0.30001721",
-    "core-js": "^3.43.0",
-    "css-loader": "^7.1.2",
-    "eslint": "^9.29.0",
-    "eslint-config-prettier": "^10.1.5",
-    "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-jsx-a11y": "^6.10.2",
-    "eslint-plugin-prettier": "^5.4.1",
-    "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "gh-pages": "^6.1.1",
-    "jsdom": "^26.1.0",
-    "postcss": "^8.4.24",
-    "postcss-flexbugs-fixes": "^5.0.2",
-    "postcss-import": "^16.1.0",
-    "postcss-loader": "^8.1.1",
-    "postcss-preset-env": "^10.2.3",
-    "prettier": "^3.5.3",
-    "rimraf": "^5.0.5",
-    "rollup": "^4.9.6",
-    "rollup-plugin-dts": "^6.1.0",
+    "babel-jest": "^29.0.0",
+    "concurrently": "^8.0.0",
+    "cssnano": "^6.0.0",
+    "eslint": "^8.0.0",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-jsx-a11y": "^6.7.0",
+    "eslint-plugin-react": "^7.33.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.0.0",
+    "jest-environment-jsdom": "^29.0.0",
+    "jsdom": "^22.0.0",
+    "postcss": "^8.4.31",
+    "postcss-flexbugs-fixes": "^5.0.0",
+    "postcss-import": "^15.0.0",
+    "postcss-preset-env": "^9.0.0",
+    "prettier": "^3.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "rimraf": "^5.0.0",
+    "rollup": "^3.0.0",
+    "rollup-plugin-dts": "^6.0.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",
-    "serve": "^14.2.1",
-    "size-limit": "^11.0.0",
-    "storybook": "^8.0.0",
-    "style-loader": "^4.0.0",
-    "terser": "^5.24.0",
-    "terser-webpack-plugin": "^5.3.14",
-    "tslib": "^2.6.2",
-    "typescript": "^5.0.4",
-    "vitest": "^3.2.4"
+    "rollup-plugin-postcss": "^4.0.0",
+    "sass": "^1.69.0",
+    "storybook": "^8.6.14",
+    "storybook-theme-switch-addon": "^1.0.2",
+    "terser": "^5.0.0",
+    "ts-jest": "^29.0.0",
+    "ts-node": "^10.9.0",
+    "tslib": "^2.6.0",
+    "typescript": "^5.0.0",
+    "vite": "^4.0.0",
+    "vitest": "^0.34.0"
   },
   "scripts": {
     "dev": "storybook dev -p 6006",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "build": "rollup -c",
-    "build:watch": "rollup -c -w",
-    "build:components": "npm run build",
-    "build:docs": "npm run build-storybook",
+    "build": "rollup -c && rollup -c rollup.styles.config.js",
+    "build:styles": "rollup -c rollup.styles.config.js",
+    "build:themes": "rollup -c rollup.styles.config.js",
+    "build:storybook": "storybook build",
+    "test": "vitest",
+    "test:coverage": "vitest --coverage",
+    "lint": "eslint src --ext .ts,.tsx,.js,.jsx",
+    "lint:fix": "eslint src --ext .ts,.tsx,.js,.jsx --fix",
+    "prettier": "prettier --write 'src/**/*.{ts,tsx,js,jsx,json,css,scss}'",
     "clean": "rimraf dist",
-    "prebuild": "npm run clean",
-    "prepublishOnly": "npm run ci",
-    "format": "prettier --write .",
-    "check-format": "prettier --check .",
-    "check-exports": "attw --pack . --ignore-rules=cjs-resolves-to-esm",
-    "lint": "tsc --noEmit",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "test:coverage": "vitest run --coverage",
-    "ci": "npm run build && npm run check-format && npm run check-exports && npm run lint && npm run test",
-    "local-release": "changeset version && changeset publish",
-    "preview:build": "npm run build-storybook && node scripts/prepare-deploy.js",
-    "preview:serve": "npm run preview:build && npx serve deploy -p 3000"
+    "clean:all": "rimraf dist && rimraf .storybook/dist && rimraf storybook-static",
+    "release": "changeset publish",
+    "changeset": "changeset",
+    "typecheck": "tsc --noEmit",
+    "attw": "attw --pack"
   },
   "files": [
     "dist",
     "src/styles",
+    "src/components/",
+    "src/lib",
+    "src/layouts",
     "README.md",
     "LICENSE",
     "CHANGELOG.md"
@@ -134,29 +152,38 @@
     "javascript",
     "typescript",
     "css",
-    "scss"
+    "scss",
+    "component-library",
+    "ui-components",
+    "react-components",
+    "typescript-components",
+    "modern-ui",
+    "accessible-components"
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/liimonx/atomix.git"
+    "url": "git+https://github.com/Shohojdhara/atomix.git"
   },
-  "author": "liimonx <liimonx@shohojdhara.org>",
+  "author": "liimonx <liimonx@boomdevs.com>",
   "license": "Apache-2.0",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/Shohojdhara"
+  },
   "bugs": {
-    "url": "https://github.com/liimonx/atomix/issues"
+    "url": "https://github.com/Shohojdhara/atomix/issues"
   },
-  "homepage": "https://github.com/liimonx/atomix#readme",
+  "homepage": "https://github.com/Shohojdhara/atomix#readme",
   "peerDependencies": {
-    "phosphor-react": "^1.4.1",
+    "@phosphor-icons/react": "2.1.10",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },
   "engines": {
-    "node": ">=16.0.0"
+    "node": ">=16.0.0",
+    "npm": ">=8.0.0"
   },
   "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/",
-    "scope": "@shohojdhara"
+    "access": "public"
   }
 }

package/src/components/Accordion/Accordion.stories.tsx

@@ -0,0 +1,271 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Accordion } from './Accordion';
+import { ACCORDION } from '../../lib/constants/components';
+
+// Extract class names without the leading dots
+const ACCORDION_CLASS = ACCORDION.SELECTORS.ACCORDION.replace('.', '');
+const HEADER_CLASS = ACCORDION.SELECTORS.HEADER.replace('.', '');
+const PANEL_CLASS = ACCORDION.SELECTORS.PANEL.replace('.', '');
+const BODY_CLASS = ACCORDION.SELECTORS.BODY.replace('.', '');
+const IS_OPEN_CLASS = ACCORDION.CLASSES.IS_OPEN;
+const IS_DISABLED_CLASS = ACCORDION.CLASSES.IS_DISABLED;
+
+const meta = {
+  title: 'Components/Accordion',
+  component: Accordion,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component:
+          'The Accordion component follows Atomix guidelines for accessibility, styling, and state. It supports both controlled and uncontrolled modes, custom icons, and full keyboard navigation.',
+      },
+    },
+  },
+  argTypes: {
+    iconPosition: {
+      control: { type: 'radio' },
+      options: ['right', 'left'],
+      description: 'Position of the icon',
+    },
+    defaultOpen: {
+      control: 'boolean',
+      description: 'Whether the accordion is initially open',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the accordion is disabled',
+    },
+    title: {
+      control: 'text',
+      description: 'Title of the accordion',
+    },
+    children: {
+      control: 'text',
+      description: 'Content inside the accordion',
+    },
+  },
+} satisfies Meta<typeof Accordion>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default Accordion (Closed)
+export const Default: Story = {
+  args: {
+    title: 'Accordion Title',
+    children: <p>This is the content of the accordion that appears when expanded.</p>,
+  },
+};
+
+// Open Accordion
+export const Open: Story = {
+  args: {
+    title: 'Open Accordion',
+    children: <p>This accordion is open, showing its content.</p>,
+    defaultOpen: true,
+  },
+};
+
+// Disabled Accordion
+export const Disabled: Story = {
+  args: {
+    title: 'Disabled Accordion',
+    children: <p>This accordion is disabled.</p>,
+    disabled: true,
+  },
+};
+
+// Icon on Left
+export const IconLeft: Story = {
+  args: {
+    title: 'Icon on Left',
+    children: <p>This accordion has the icon on the left side.</p>,
+    iconPosition: 'left',
+  },
+};
+
+// Custom Icon
+export const CustomIcon: Story = {
+  args: {
+    title: 'Custom Icon',
+    children: <p>This accordion uses a custom plus icon.</p>,
+    icon: (
+      <i className="c-accordion__icon">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <circle cx="12" cy="12" r="10" />
+          <line x1="12" y1="8" x2="12" y2="16" />
+          <line x1="8" y1="12" x2="16" y2="12" />
+        </svg>
+      </i>
+    ),
+  },
+};
+
+// Accordion Group
+export const AccordionGroup: Story = {
+  args: {
+    title: 'Accordion Group',
+    children: <p>Group example - see render function</p>,
+  },
+  render: () => (
+    <div>
+      <h2>Accordion Group</h2>
+      <div className="u-d-flex u-flex-column u-gap-3" style={{ width: '500px' }}>
+        <Accordion title="First Accordion" defaultOpen={true}>
+          <p>Content of the first accordion.</p>
+        </Accordion>
+
+        <Accordion title="Second Accordion">
+          <p>Content of the second accordion.</p>
+        </Accordion>
+
+        <Accordion title="Third Accordion">
+          <p>Content of the third accordion with more content.</p>
+          <p>Additional paragraph to demonstrate scrolling.</p>
+          <ul>
+            <li>List item 1</li>
+            <li>List item 2</li>
+            <li>List item 3</li>
+          </ul>
+        </Accordion>
+      </div>
+    </div>
+  ),
+};
+
+// All Variants
+export const AllVariants: Story = {
+  args: {
+    title: 'All Variants',
+    children: <p>See render function for all variants</p>,
+  },
+  render: () => (
+    <div>
+      <h2>All Accordion Variants</h2>
+      <div className="u-d-flex u-flex-column u-gap-5">
+        <div>
+          <h3>Default</h3>
+          <Accordion title="Default Accordion">
+            <p>This is the default accordion.</p>
+          </Accordion>
+        </div>
+
+        <div>
+          <h3>Initially Open</h3>
+          <Accordion title="Initially Open Accordion" defaultOpen={true}>
+            <p>This accordion starts in the open state.</p>
+          </Accordion>
+        </div>
+
+        <div>
+          <h3>Disabled</h3>
+          <Accordion title="Disabled Accordion" disabled={true}>
+            <p>This accordion is disabled and cannot be interacted with.</p>
+          </Accordion>
+        </div>
+
+        <div>
+          <h3>Icon on Left</h3>
+          <Accordion title="Icon on Left" iconPosition="left">
+            <p>This accordion has its icon positioned on the left.</p>
+          </Accordion>
+        </div>
+
+        <div>
+          <h3>Custom Icon</h3>
+          <Accordion
+            title="Custom Icon"
+            icon={
+              <i className="c-accordion__icon">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <circle cx="12" cy="12" r="10" />
+                  <line x1="12" y1="8" x2="12" y2="16" />
+                  <line x1="8" y1="12" x2="16" y2="12" />
+                </svg>
+              </i>
+            }
+          >
+            <p>This accordion uses a custom plus icon.</p>
+          </Accordion>
+        </div>
+
+        <div>
+          <h3>With Rich Content</h3>
+          <Accordion title="Rich Content">
+            <div>
+              <h4>Section Title</h4>
+              <p>
+                This accordion contains rich HTML content including headings, paragraphs, and lists.
+              </p>
+              <ul>
+                <li>
+                  List item with <a href="#">link</a>
+                </li>
+                <li>
+                  List item with <strong>bold text</strong>
+                </li>
+                <li>
+                  List item with <em>italic text</em>
+                </li>
+              </ul>
+              <div className="u-p-3 u-mt-3 u-bg-light u-border-radius-1">
+                <code>This is a code block inside the accordion</code>
+              </div>
+            </div>
+          </Accordion>
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+// Controlled Accordion
+export const Controlled: Story = {
+  args: {
+    title: 'Controlled Accordion',
+    children: <p>This accordion is controlled by external state.</p>,
+  },
+  render: () => {
+    const [open, setOpen] = React.useState(false);
+    return (
+      <div>
+        <button className="c-btn c-btn--primary u-mb-3" onClick={() => setOpen(prev => !prev)}>
+          Toggle Accordion (Controlled)
+        </button>
+        <Accordion title="Controlled Accordion" isOpen={open} onOpenChange={setOpen}>
+          <p>This accordion is controlled by external state.</p>
+        </Accordion>
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'This story demonstrates a controlled Accordion using the `isOpen` and `onOpenChange` props.',
+      },
+    },
+  },
+};