@shohojdhara/atomix 0.1.16 → 0.1.18

package/src/components/SectionIntro/scripts/index.ts

@@ -26,7 +26,7 @@ const DEFAULT_OPTIONS: SectionIntroOptions = {
   alignment: 'left',
   showOverlay: false,
   size: 'md',
-  skeleton: false
+  skeleton: false,
 };
 
 /**
@@ -47,7 +47,7 @@ class SectionIntro implements SectionIntroInstance {
     this.$element =
       typeof selector === 'string'
         ? document.querySelector<HTMLElement>(selector)
-        : selector as HTMLElement;
+        : (selector as HTMLElement);
     this.options = { ...DEFAULT_OPTIONS, ...options } as SectionIntroOptions;
     this._initialize();
   }
@@ -59,40 +59,49 @@ class SectionIntro implements SectionIntroInstance {
     if (!this.$element) return;
 
     // Apply alignment classes if needed
-    if (this.options.alignment === 'center' && !this.$element.classList.contains(SECTION_INTRO.CLASSES.CENTER)) {
+    if (
+      this.options.alignment === 'center' &&
+      !this.$element.classList.contains(SECTION_INTRO.CLASSES.CENTER)
+    ) {
       this.$element.classList.add(SECTION_INTRO.CLASSES.CENTER);
     }
 
     // Apply size classes if specified
-    if (this.options.size === 'sm' && !this.$element.classList.contains(SECTION_INTRO.CLASSES.SMALL)) {
+    if (
+      this.options.size === 'sm' &&
+      !this.$element.classList.contains(SECTION_INTRO.CLASSES.SMALL)
+    ) {
       this.$element.classList.add(SECTION_INTRO.CLASSES.SMALL);
-    } else if (this.options.size === 'lg' && !this.$element.classList.contains(SECTION_INTRO.CLASSES.LARGE)) {
+    } else if (
+      this.options.size === 'lg' &&
+      !this.$element.classList.contains(SECTION_INTRO.CLASSES.LARGE)
+    ) {
       this.$element.classList.add(SECTION_INTRO.CLASSES.LARGE);
     }
 
     // Add background image if provided
     if (this.options.backgroundImageSrc) {
       let bgElement = this.$element.querySelector('.c-sectionintro__bg');
-      
+
       // Create background element if it doesn't exist
       if (!bgElement) {
         bgElement = document.createElement('div');
         bgElement.className = 'c-sectionintro__bg';
-        
+
         const imgElement = document.createElement('img');
         imgElement.className = 'c-sectionintro__bg-image';
         imgElement.src = this.options.backgroundImageSrc;
         imgElement.alt = 'Background';
-        
+
         bgElement.appendChild(imgElement);
-        
+
         // Add overlay if needed
         if (this.options.showOverlay) {
           const overlayElement = document.createElement('div');
           overlayElement.className = 'c-sectionintro__overlay';
           bgElement.appendChild(overlayElement);
         }
-        
+
         // Insert at the beginning of the element
         this.$element.insertBefore(bgElement, this.$element.firstChild);
       }
@@ -104,14 +113,14 @@ class SectionIntro implements SectionIntroInstance {
    */
   public destroy(): void {
     if (!this.$element) return;
-    
+
     // Remove alignment classes
     this.$element.classList.remove(SECTION_INTRO.CLASSES.CENTER);
-    
+
     // Remove size classes
     this.$element.classList.remove(SECTION_INTRO.CLASSES.SMALL);
     this.$element.classList.remove(SECTION_INTRO.CLASSES.LARGE);
-    
+
     // Remove background if it was dynamically added
     if (this.options.backgroundImageSrc) {
       const bgElement = this.$element.querySelector('.c-sectionintro__bg');
@@ -128,13 +137,18 @@ class SectionIntro implements SectionIntroInstance {
  * @param {Object} options - Custom options to override defaults
  * @returns {SectionIntroInstance[]} Array of SectionIntro instances
  */
-export function initializeSectionIntros(selector = SECTION_INTRO.SELECTORS.SECTION_INTRO, options = {}): SectionIntroInstance[] {
+export function initializeSectionIntros(
+  selector = SECTION_INTRO.SELECTORS.SECTION_INTRO,
+  options = {}
+): SectionIntroInstance[] {
   const sectionIntroInstances: SectionIntroInstance[] = [];
-  const sectionIntroElements = document.querySelectorAll<HTMLElement>(typeof selector === 'string' ? selector : SECTION_INTRO.SELECTORS.SECTION_INTRO);
+  const sectionIntroElements = document.querySelectorAll<HTMLElement>(
+    typeof selector === 'string' ? selector : SECTION_INTRO.SELECTORS.SECTION_INTRO
+  );
 
   if (!sectionIntroElements.length) return sectionIntroInstances;
 
-  sectionIntroElements.forEach((element) => {
+  sectionIntroElements.forEach(element => {
     try {
       const instance = new SectionIntro(element, options);
       sectionIntroInstances.push(instance);

package/src/components/Spinner/Spinner.stories.tsx

@@ -11,19 +11,17 @@ const meta = {
   argTypes: {
     variant: {
       control: { type: 'select' },
-      options: [
-        'primary', 'secondary', 'success', 'info', 'warning', 'error', 'light', 'dark'
-      ],
-      description: 'The color variant of the spinner'
+      options: ['primary', 'secondary', 'success', 'info', 'warning', 'error', 'light', 'dark'],
+      description: 'The color variant of the spinner',
     },
     size: {
       control: { type: 'select' },
       options: ['sm', 'md', 'lg'],
-      description: 'The size of the spinner'
+      description: 'The size of the spinner',
     },
     fullscreen: {
       control: 'boolean',
-      description: 'Whether the spinner should be centered and fixed in the viewport'
+      description: 'Whether the spinner should be centered and fixed in the viewport',
     },
   },
 } satisfies Meta<typeof Spinner>;
@@ -65,4 +63,4 @@ export const ColorVariants: Story = {
       <Spinner variant="dark" />
     </div>
   ),
-}; 
+};

package/src/components/Spinner/Spinner.tsx

@@ -9,14 +9,19 @@ export const Spinner: React.FC<SpinnerProps> = ({
   fullscreen = false,
   className = '',
 }) => {
-  const { generateSpinnerClass } = useSpinner({ 
-    size, variant, fullscreen 
+  const { generateSpinnerClass } = useSpinner({
+    size,
+    variant,
+    fullscreen,
   });
-  
-  const spinnerClass = generateSpinnerClass({ 
-    size, variant, fullscreen, className 
+
+  const spinnerClass = generateSpinnerClass({
+    size,
+    variant,
+    fullscreen,
+    className,
   });
-  
+
   return (
     <div className={spinnerClass} role="status">
       <span className={SPINNER.VISUALLY_HIDDEN}>Loading...</span>

package/src/components/Spinner/index.ts

@@ -1,2 +1,2 @@
-export {   Spinner } from './Spinner'; 
-export type { SpinnerProps } from './Spinner';
+export { Spinner } from './Spinner';
+export type { SpinnerProps } from './Spinner';

package/src/components/Steps/Steps.stories.tsx

@@ -19,7 +19,7 @@ export default {
   },
 } as Meta<typeof Steps>;
 
-const Template: StoryFn<typeof Steps> = (args) => (
+const Template: StoryFn<typeof Steps> = args => (
   <div style={{ padding: '30px' }}>
     <Steps {...args} />
   </div>
@@ -57,30 +57,30 @@ Vertical.args = {
 export const WithCustomContent = Template.bind({});
 WithCustomContent.args = {
   items: [
-    { 
-      number: 1, 
-      text: 'Registration', 
-      content: <p style={{ marginTop: '10px', fontSize: '0.85em' }}>Create your account</p>
+    {
+      number: 1,
+      text: 'Registration',
+      content: <p style={{ marginTop: '10px', fontSize: '0.85em' }}>Create your account</p>,
     },
-    { 
-      number: 2, 
-      text: 'Personal Info', 
-      content: <p style={{ marginTop: '10px', fontSize: '0.85em' }}>Tell us about yourself</p>
+    {
+      number: 2,
+      text: 'Personal Info',
+      content: <p style={{ marginTop: '10px', fontSize: '0.85em' }}>Tell us about yourself</p>,
     },
-    { 
-      number: 3, 
-      text: 'Preferences', 
-      content: <p style={{ marginTop: '10px', fontSize: '0.85em' }}>Select your preferences</p>
+    {
+      number: 3,
+      text: 'Preferences',
+      content: <p style={{ marginTop: '10px', fontSize: '0.85em' }}>Select your preferences</p>,
     },
-    { 
-      number: 4, 
-      text: 'Payment', 
-      content: <p style={{ marginTop: '10px', fontSize: '0.85em' }}>Add payment information</p>
+    {
+      number: 4,
+      text: 'Payment',
+      content: <p style={{ marginTop: '10px', fontSize: '0.85em' }}>Add payment information</p>,
     },
-    { 
-      number: 5, 
-      text: 'Confirmation', 
-      content: <p style={{ marginTop: '10px', fontSize: '0.85em' }}>Complete your signup</p>
+    {
+      number: 5,
+      text: 'Confirmation',
+      content: <p style={{ marginTop: '10px', fontSize: '0.85em' }}>Complete your signup</p>,
     },
   ],
   activeIndex: 1,
@@ -91,25 +91,25 @@ WithCustomContent.args = {
 export const WithIcons = Template.bind({});
 WithIcons.args = {
   items: [
-    { 
-      number: <i className="icon-lux-user" style={{ fontSize: '16px' }}></i>, 
-      text: 'Account'
+    {
+      number: <i className="icon-lux-user" style={{ fontSize: '16px' }}></i>,
+      text: 'Account',
     },
-    { 
-      number: <i className="icon-lux-settings" style={{ fontSize: '16px' }}></i>, 
-      text: 'Settings'
+    {
+      number: <i className="icon-lux-settings" style={{ fontSize: '16px' }}></i>,
+      text: 'Settings',
     },
-    { 
-      number: <i className="icon-lux-calendar" style={{ fontSize: '16px' }}></i>, 
-      text: 'Schedule'
+    {
+      number: <i className="icon-lux-calendar" style={{ fontSize: '16px' }}></i>,
+      text: 'Schedule',
     },
-    { 
-      number: <i className="icon-lux-card" style={{ fontSize: '16px' }}></i>, 
-      text: 'Payment'
+    {
+      number: <i className="icon-lux-card" style={{ fontSize: '16px' }}></i>,
+      text: 'Payment',
     },
-    { 
-      number: <i className="icon-lux-check" style={{ fontSize: '16px' }}></i>, 
-      text: 'Complete'
+    {
+      number: <i className="icon-lux-check" style={{ fontSize: '16px' }}></i>,
+      text: 'Complete',
     },
   ],
   activeIndex: 1,
@@ -119,7 +119,7 @@ WithIcons.args = {
 // Interactive steps with buttons for navigation
 const InteractiveSteps: React.FC = () => {
   const [activeStep, setActiveStep] = React.useState(0);
-  
+
   const items = [
     { number: 1, text: 'Step 1' },
     { number: 2, text: 'Step 2' },
@@ -127,24 +127,20 @@ const InteractiveSteps: React.FC = () => {
     { number: 4, text: 'Step 4' },
     { number: 5, text: 'Step 5' },
   ];
-  
+
   return (
     <div>
-      <Steps 
-        items={items}
-        activeIndex={activeStep}
-        onStepChange={setActiveStep}
-      />
+      <Steps items={items} activeIndex={activeStep} onStepChange={setActiveStep} />
       <div style={{ marginTop: '30px', display: 'flex', gap: '10px' }}>
-        <button 
-          className="c-btn c-btn--primary" 
+        <button
+          className="c-btn c-btn--primary"
           onClick={() => setActiveStep(Math.max(0, activeStep - 1))}
           disabled={activeStep === 0}
         >
           Previous
         </button>
-        <button 
-          className="c-btn c-btn--primary" 
+        <button
+          className="c-btn c-btn--primary"
           onClick={() => setActiveStep(Math.min(items.length - 1, activeStep + 1))}
           disabled={activeStep === items.length - 1}
         >
@@ -159,4 +155,4 @@ export const Interactive: StoryFn<typeof Steps> = () => (
   <div style={{ padding: '30px' }}>
     <InteractiveSteps />
   </div>
-); 
+);

package/src/components/Steps/Steps.tsx

@@ -6,12 +6,12 @@ export interface StepItem {
    * The number for the step
    */
   number: number | string | ReactNode;
-  
+
   /**
    * The text label for the step
    */
   text: string;
-  
+
   /**
    * Optional custom content for the step
    */
@@ -23,22 +23,22 @@ export interface StepsProps {
    * Array of step items
    */
   items: StepItem[];
-  
+
   /**
    * Current active step index (0-based)
    */
   activeIndex?: number;
-  
+
   /**
    * Whether to display steps vertically
    */
   vertical?: boolean;
-  
+
   /**
    * Called when active step changes
    */
   onStepChange?: (index: number) => void;
-  
+
   /**
    * Additional CSS class
    */
@@ -58,7 +58,7 @@ export const Steps: React.FC<StepsProps> = ({
   const [currentStep, setCurrentStep] = useState(activeIndex);
   const stepsRef = useRef<HTMLDivElement>(null);
   const stepsInstance = useRef<any>(null);
-  
+
   useEffect(() => {
     // Only run on client-side
     if (typeof window === 'undefined' || !stepsRef.current) return undefined;
@@ -68,11 +68,11 @@ export const Steps: React.FC<StepsProps> = ({
       if (stepsRef.current) {
         stepsInstance.current = new StepsClass(stepsRef.current, {
           activeIndex: currentStep,
-          vertical
+          vertical,
         });
       }
     });
-    
+
     // Cleanup on unmount
     return () => {
       if (stepsInstance.current) {
@@ -85,54 +85,54 @@ export const Steps: React.FC<StepsProps> = ({
   useEffect(() => {
     if (currentStep !== activeIndex) {
       setCurrentStep(activeIndex);
-      
+
       if (stepsInstance.current) {
         stepsInstance.current.setActive(activeIndex);
       }
     }
   }, [activeIndex]);
-  
+
   // Method to go to next step
   const goToNextStep = () => {
     const nextIndex = currentStep + 1;
     if (nextIndex < items.length) {
       setCurrentStep(nextIndex);
-      
+
       if (stepsInstance.current) {
         stepsInstance.current.next();
       }
-      
+
       if (onStepChange) {
         onStepChange(nextIndex);
       }
     }
   };
-  
+
   // Method to go to previous step
   const goToPreviousStep = () => {
     const prevIndex = currentStep - 1;
     if (prevIndex >= 0) {
       setCurrentStep(prevIndex);
-      
+
       if (stepsInstance.current) {
         stepsInstance.current.previous();
       }
-      
+
       if (onStepChange) {
         onStepChange(prevIndex);
       }
     }
   };
-  
+
   return (
-    <div 
+    <div
       className={`c-steps ${vertical ? STEPS.CLASSES.VERTICAL : ''} ${className}`}
       ref={stepsRef}
       role="navigation"
       aria-label="Steps"
     >
       {items.map((item, index) => (
-        <div 
+        <div
           key={`step-${index}`}
           className={`c-steps__item ${index <= currentStep ? STEPS.CLASSES.ACTIVE : ''} ${index < currentStep ? STEPS.CLASSES.COMPLETED : ''}`}
           aria-current={index === currentStep ? 'step' : undefined}
@@ -151,4 +151,4 @@ export const Steps: React.FC<StepsProps> = ({
 
 Steps.displayName = 'Steps';
 
-export default Steps;
+export default Steps;

package/src/components/Steps/index.ts

@@ -1,3 +1,3 @@
 export { Steps } from './Steps';
 export type { StepsProps, StepItem } from './Steps';
-export { default } from './Steps'; 
+export { default } from './Steps';

package/src/components/Steps/scripts/index.ts

@@ -24,7 +24,7 @@ interface StepsInstance {
  */
 const DEFAULT_OPTIONS: StepsOptions = {
   activeIndex: 0,
-  vertical: false
+  vertical: false,
 };
 
 /**
@@ -47,7 +47,7 @@ class Steps implements StepsInstance {
     this.$element =
       typeof selector === 'string'
         ? document.querySelector<HTMLElement>(selector)
-        : selector as HTMLElement;
+        : (selector as HTMLElement);
     this.options = { ...DEFAULT_OPTIONS, ...options } as StepsOptions;
     this.$items = null;
     this.activeIndex = this.options.activeIndex || 0;
@@ -61,12 +61,12 @@ class Steps implements StepsInstance {
     if (!this.$element) return;
 
     this._initializeElements();
-    
+
     // Set vertical mode if specified
     if (this.options.vertical && !this.$element.classList.contains(STEPS.CLASSES.VERTICAL)) {
       this.$element.classList.add(STEPS.CLASSES.VERTICAL);
     }
-    
+
     this.setActive(this.activeIndex);
   }
 
@@ -75,7 +75,7 @@ class Steps implements StepsInstance {
    */
   private _initializeElements(): void {
     if (!this.$element) return;
-    
+
     this.$items = this.$element.querySelectorAll<HTMLElement>(STEPS.SELECTORS.ITEM);
   }
 
@@ -85,7 +85,7 @@ class Steps implements StepsInstance {
    */
   public setActive(index: number): void {
     if (!this.$items || index < 0 || index >= this.$items.length) return;
-    
+
     // Update all items
     this.$items.forEach((item, i) => {
       if (i < index) {
@@ -102,7 +102,7 @@ class Steps implements StepsInstance {
         item.classList.remove(STEPS.CLASSES.COMPLETED);
       }
     });
-    
+
     this.activeIndex = index;
   }
 
@@ -144,7 +144,7 @@ export function initializeSteps(selector = STEPS.SELECTORS.STEPS, options = {}):
 
   if (!stepsElements.length) return stepsInstances;
 
-  stepsElements.forEach((element) => {
+  stepsElements.forEach(element => {
     try {
       const instance = new Steps(element, options);
       stepsInstances.push(instance);
@@ -156,4 +156,4 @@ export function initializeSteps(selector = STEPS.SELECTORS.STEPS, options = {}):
   return stepsInstances;
 }
 
-export default Steps; 
+export default Steps;

package/src/components/Tab/Tab.stories.tsx

@@ -14,7 +14,7 @@ export default {
   },
 } as Meta<typeof Tab>;
 
-const Template: StoryFn<typeof Tab> = (args) => (
+const Template: StoryFn<typeof Tab> = args => (
   <div style={{ maxWidth: '600px', margin: '0 auto', padding: '30px' }}>
     <Tab {...args} />
   </div>
@@ -82,8 +82,12 @@ WithRichContent.args = {
           <table style={{ width: '100%', borderCollapse: 'collapse' }}>
             <thead>
               <tr>
-                <th style={{ border: '1px solid #ddd', padding: '8px', textAlign: 'left' }}>Property</th>
-                <th style={{ border: '1px solid #ddd', padding: '8px', textAlign: 'left' }}>Value</th>
+                <th style={{ border: '1px solid #ddd', padding: '8px', textAlign: 'left' }}>
+                  Property
+                </th>
+                <th style={{ border: '1px solid #ddd', padding: '8px', textAlign: 'left' }}>
+                  Value
+                </th>
               </tr>
             </thead>
             <tbody>
@@ -106,11 +110,15 @@ WithRichContent.args = {
         <div>
           <h3>Customer Reviews</h3>
           <div style={{ padding: '10px', marginBottom: '10px', backgroundColor: '#f9f9f9' }}>
-            <p style={{ marginBottom: '5px' }}><strong>John D.</strong> ★★★★★</p>
+            <p style={{ marginBottom: '5px' }}>
+              <strong>John D.</strong> ★★★★★
+            </p>
             <p>Great product, highly recommended!</p>
           </div>
           <div style={{ padding: '10px', backgroundColor: '#f9f9f9' }}>
-            <p style={{ marginBottom: '5px' }}><strong>Sarah T.</strong> ★★★★☆</p>
+            <p style={{ marginBottom: '5px' }}>
+              <strong>Sarah T.</strong> ★★★★☆
+            </p>
             <p>Very good quality and fast shipping.</p>
           </div>
         </div>
@@ -118,4 +126,4 @@ WithRichContent.args = {
     },
   ],
   activeIndex: 0,
-}; 
+};