npm - @shohojdhara/atomix - Versions diffs - 0.1.17 → 0.1.18 - Mend

@shohojdhara/atomix 0.1.17 → 0.1.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (704) hide show

package/README.md CHANGED Viewed

@@ -1,173 +1,222 @@
 # Atomix Design System
-Atomix is a modern component library for React web applications.
+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
 ## Installation
 ```bash
 npm install @shohojdhara/atomix
+# or
+yarn add @shohojdhara/atomix
+# or
+pnpm add @shohojdhara/atomix
 ```
-## Usage
+## Quick Start
-### Importing Components
+### Next.js Integration
 ```tsx
-// Import specific components
-import { Button, Card } from '@shohojdhara/atomix';
-// Or import the default export
-import Atomix from '@shohojdhara/atomix';
-const { Button, Card } = Atomix;
+// app/layout.tsx (App Router)
+import '@shohojdhara/atomix/css'
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
 ```
-### Importing Types
 ```tsx
-// Import component props types directly
-import { ButtonProps, CardProps } from '@shohojdhara/atomix';
-// Import specific types
-import { Size, ThemeColor } from '@shohojdhara/atomix/types/common';
-import { CardProps } from '@shohojdhara/atomix/types/components';
+// app/page.tsx
+import { Button, Hero, Card } from '@shohojdhara/atomix'
-// Import all common types
-import * as AtomixTypes from '@shohojdhara/atomix/types';
+export default function HomePage() {
+  return (
+    <Hero
+      title="Welcome to Next.js with Atomix"
+      subtitle="Modern UI Components"
+      alignment="center"
+      actions={<Button variant="primary" label="Get Started" />}
+    />
+  )
+}
 ```
-### CSS Styles
+For detailed Next.js integration guide, see [NEXTJS_INTEGRATION.md](./NEXTJS_INTEGRATION.md).
+### React Applications
 ```tsx
-// Import default CSS
-import '@shohojdhara/atomix/css';
+// Import CSS
+import '@shohojdhara/atomix/css'
-// Or minified CSS
-import '@shohojdhara/atomix/css/min';
+// Import components
+import { Button, Card, Modal } from '@shohojdhara/atomix'
-// Or import SCSS for customization
-import '@shohojdhara/atomix/scss';
+function App() {
+  return (
+    <div>
+      <Card>
+        <div className="c-card__body">
+          <h3 className="c-card__title">Welcome to Atomix</h3>
+          <p className="c-card__text">Modern UI components for React</p>
+          <Button variant="primary" label="Get Started" />
+        </div>
+      </Card>
+    </div>
+  )
+}
 ```
-## Documentation
-For full documentation, visit [our Storybook](https://liimonx.github.io/atomix).
-Atomix is a modern, flexible design system that provides both React components and vanilla JavaScript functionality for building beautiful web applications.
+## Usage Options
-## NPM Package
+### Import Styles
-The Atomix npm package now includes source files and configuration files, allowing for more customization options. See [NPM_PUBLISHING.md](./NPM_PUBLISHING.md) for more details on how to use these files.
+```tsx
+// Default CSS
+import '@shohojdhara/atomix/css'
-## Installation
+// Minified CSS
+import '@shohojdhara/atomix/css/min'
-```bash
-npm install atomix
-# or
-yarn add atomix
+// SCSS for customization
+import '@shohojdhara/atomix/scss'
 ```
-## Usage
-### React Components
+### Import Components
-```jsx
-import React from 'react';
-import { Button, Modal, Tooltip } from '@shohojdhara/atomix';
-// or import directly
-import { Button, Modal, Tooltip } from '@shohojdhara/atomix';
-// Import the CSS
-import '@shohojdhara/atomix/css';
+```tsx
+// Named imports (recommended for tree shaking)
+import { Button, Card, Modal } from '@shohojdhara/atomix'
-function App() {
-  return (
-    <div>
-      <Button variant="primary" size="md">Click Me</Button>
-      <Tooltip content="This is a tooltip">Hover me</Tooltip>
-    </div>
-  );
-}
+// Default import
+import Atomix from '@shohojdhara/atomix'
+const { Button, Card } = Atomix
 ```
 ### TypeScript Support
-Atomix includes comprehensive TypeScript declarations for all components and utilities:
 ```tsx
-import React from 'react';
-import { Button, Card, useColorMode } from '@shohojdhara/atomix';
+import { ButtonProps, CardProps, Size, ThemeColor } from '@shohojdhara/atomix'
-// Component props are fully typed
-const MyComponent: React.FC = () => {
-  // Typed hooks
-  const { colorMode, setColorMode } = useColorMode();
-  return (
-    <Card title="TypeScript Example" className="my-card">
-      <Button
-        variant="primary"
-        size="md"
-        onClick={() => setColorMode(colorMode === 'dark' ? 'light' : 'dark')}
-      >
-        Toggle Theme
-      </Button>
-    </Card>
-  );
+// Component with typed props
+const MyButton: React.FC<ButtonProps> = (props) => {
+  return <Button {...props} />
 }
 ```
-### Vanilla JavaScript
-```html
-<!DOCTYPE html>
-<html>
-<head>
-  <title>Atomix Example</title>
-  <!-- Include the CSS -->
-  <link rel="stylesheet" href="node_modules/atomix/dist/css/atomix-0.1.0.styles.css">
-</head>
-<body>
-  <!-- Button component -->
-  <button class="c-btn c-btn--primary c-btn--md">Click Me</button>
+## Available Components
+### Core Components
+- **Button** - Versatile button component with multiple variants
+- **Card** - Flexible content container
+- **Badge** - Status and labeling component
+- **Avatar** - User profile images and placeholders
+### Navigation
+- **Navbar** - Application navigation bar
+- **Breadcrumb** - Navigation breadcrumbs
+- **Pagination** - Data pagination controls
+- **Steps** - Step-by-step navigation
+### Form Components
+- **Input** - Text input fields
+- **Select** - Dropdown selection
+- **Checkbox** - Checkbox inputs
+- **Radio** - Radio button inputs
+- **Toggle** - Switch toggle controls
+### Feedback
+- **Modal** - Dialog and overlay modals
+- **Tooltip** - Contextual tooltips
+- **Popover** - Rich contextual popovers
+- **Messages** - Alert and notification messages
+- **Progress** - Progress indicators
+### Data Display
+- **DataTable** - Feature-rich data tables
+- **List** - Structured lists
+- **Accordion** - Collapsible content sections
+- **Tabs** - Tabbed content organization
+### Layout
+- **Hero** - Hero sections with background support
+- **Grid** - Responsive grid system
+- **Container** - Content containers
+And many more! See our [Storybook](https://liimonx.github.io/atomix/storybook) for the complete component library.
+## Customization
+### CSS Variables
+```css
+:root {
+  /* Primary Colors */
+  --atomix-primary-50: #eff6ff;
+  --atomix-primary-500: #3b82f6;
+  --atomix-primary-900: #1e3a8a;
-  <!-- Tooltip component -->
-  <div class="c-tooltip" data-tooltip="This is a tooltip">
-    <span class="c-tooltip__trigger">Hover me</span>
-  </div>
-  <!-- Include the JavaScript -->
-  <script src="node_modules/atomix/dist/js/atomix-0.1.0.vanilla.js"></script>
-  <script>
-    // Initialize all components
-    document.addEventListener('DOMContentLoaded', function() {
-      // Atomix is available as a global variable
-      Atomix.initializeAll();
-      // Or initialize specific components
-      // Atomix.Button.initializeAll();
-      // Atomix.Tooltip.initializeAll();
-    });
-  </script>
-</body>
-</html>
+  /* Spacing */
+  --atomix-spacing-xs: 0.25rem;
+  --atomix-spacing-sm: 0.5rem;
+  --atomix-spacing-md: 1rem;
+}
 ```
-Alternatively, you can import the vanilla JS version in your JavaScript files:
+### Theme Support
-```js
-// Import the vanilla JS version
-import Atomix from 'atomix/vanilla';
+```tsx
+// Set theme programmatically
+document.documentElement.setAttribute('data-atomix-theme', 'dark')
-// Initialize all components
-document.addEventListener('DOMContentLoaded', function() {
-  Atomix.initializeAll();
-});
+// Or use CSS
+html[data-atomix-theme="dark"] {
+  /* Dark theme styles */
+}
 ```
+## Browser Support
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
 ## Documentation
-For detailed documentation and examples, visit our [documentation site](https://github.com/liimonx/atomix).
+- 📚 [Full Documentation](https://liimonx.github.io/atomix)
+- 🎨 [Storybook](https://liimonx.github.io/atomix/storybook)
+- 🚀 [Next.js Integration Guide](./NEXTJS_INTEGRATION.md)
+- 📝 [Contributing Guide](./CONTRIBUTING.md)
+## Contributing
+We welcome contributions! Please see our [Contributing Guide](./CONTRIBUTING.md) for details.
 ## License
-MIT
+MIT © [liimonx](https://github.com/liimonx)
+## Support
+- [GitHub Issues](https://github.com/liimonx/atomix/issues)
+- [Discussions](https://github.com/liimonx/atomix/discussions)

package/babel.config.js ADDED Viewed

@@ -0,0 +1,58 @@
+module.exports = {
+  presets: [
+    ['@babel/preset-env', {
+      targets: {
+        browsers: [
+          'last 2 versions',
+          'not dead',
+          'not IE 11',
+          '> 1%'
+        ],
+        node: '16'
+      },
+      useBuiltIns: 'usage',
+      corejs: 3,
+      bugfixes: true,
+      loose: false,
+      modules: false,
+      debug: process.env.NODE_ENV === 'development'
+    }],
+    ['@babel/preset-react', {
+      runtime: 'automatic',
+      development: process.env.NODE_ENV === 'development',
+      importSource: 'react'
+    }],
+    ['@babel/preset-typescript', {
+      isTSX: true,
+      allExtensions: true,
+      allowDeclareFields: true,
+      allowNamespaces: true,
+      optimizeConstEnums: true
+    }]
+  ],
+  plugins: [
+    ['@babel/plugin-transform-runtime', {
+      corejs: 3,
+      helpers: true,
+      regenerator: true
+    }]
+  ],
+  env: {
+    production: {
+      compact: true,
+      comments: false,
+      minified: true
+    },
+    test: {
+      presets: [
+        ['@babel/preset-env', { targets: { node: 'current' } }]
+      ]
+    }
+  },
+  ignore: [
+    '**/*.d.ts',
+    '**/*.test.ts',
+    '**/*.test.tsx',
+    'node_modules'
+  ]
+};

package/css.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+// 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;
+}