Revert "Part 2: fixed linter issues"

.husky/pre-commit

@@ -1,7 +1,6 @@
-#!/usr/bin/env sh
+#!/bin/sh
 . "$(dirname -- "$0")/_/husky.sh"
 
 echo "Linting your changes..."
 npx pretty-quick --staged
-#! npm run lint
-
+npm run lint

package.json

@@ -33,7 +33,6 @@
     "clean": "rimraf dist",
     "chromatic": "chromatic --exit-zero-on-changes",
     "patch": "npm version patch",
-    "prepare": "husky install",
     "sb": "storybook dev -p 6006",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",

src/components/ui/Accordion/Accordion.stories.js

@@ -0,0 +1,28 @@
+import Accordion from './Accordion';
+import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+    title: 'UI/Data-Display/Accordion',
+    component: Accordion,
+    render: (args) => <SandboxEditor>
+        <div >
+            <div className='flex space-x-2'>
+                <Accordion {...args} />
+
+            </div>
+        </div>
+    </SandboxEditor>,
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const All = {
+    args: {
+        className: '',
+        items: [
+            {title: 'Section 1', content: 'Content for Section 1'},
+            {title: 'Section 2', content: 'Content for Section 2'},
+            // Add more items as needed
+        ],
+    },
+};

src/components/ui/Accordion/Accordion.tsx

@@ -1,42 +1,38 @@
-import React, { useState } from 'react'
-import AccordionRoot from './shards/AccordionRoot'
-import AccordionItem from './shards/AccordionItem'
-import AccordionHeader from './shards/AccordionHeader'
-import AccordionTrigger from './shards/AccordionTrigger'
-import AccordionContent from './shards/AccordionContent'
+import React, {useState} from 'react';
+import AccordionRoot from './shards/AccordionRoot';
+import AccordionItem from './shards/AccordionItem';
+import AccordionHeader from './shards/AccordionHeader';
+import AccordionTrigger from './shards/AccordionTrigger';
+import AccordionContent from './shards/AccordionContent';
 
 export type AccordionProps = {
-  items: { content: any }[]
+    items: {content: any}[];
 }
 
-const Accordion = ({ items }: AccordionProps) => {
-  const [activeIndex, setActiveIndex] = useState<number>(-1)
-  const handleClick = (index: number) => {
-    setActiveIndex(activeIndex === index ? -1 : index)
-  }
+const Accordion = ({items} : AccordionProps) => {
+    const [activeIndex, setActiveIndex] = useState<number>(-1);
+    const handleClick = (index: number) => {
+        setActiveIndex(activeIndex === index ? -1 : index);
+    };
 
-  return (
-    <AccordionRoot>
-      {items.map((item, index) => (
-        <AccordionItem value={index}>
-          <AccordionHeader>
-            <AccordionTrigger
-              handleClick={handleClick}
-              index={index}
-              activeIndex={activeIndex}
-            >
-              Item {index + 1}
-            </AccordionTrigger>
-          </AccordionHeader>
-          <AccordionContent index={index} activeIndex={activeIndex}>
-            {item.content}
-          </AccordionContent>
-        </AccordionItem>
-      ))}
-    </AccordionRoot>
-  )
-}
+    return (
+        <AccordionRoot>
+            {items.map((item, index) => (
+                <AccordionItem value={index}>
+                    <AccordionHeader>
+                        <AccordionTrigger handleClick={handleClick} index={index} activeIndex={activeIndex} >
+                            Item {index+1}
+                        </AccordionTrigger>
+                    </AccordionHeader>
+                    <AccordionContent index={index} activeIndex={activeIndex}>
+                        {item.content}
+                    </AccordionContent>
+                </AccordionItem>
+            ))}
+        </AccordionRoot>
+    );
+};
 
-Accordion.Root = AccordionRoot
+Accordion.Root = AccordionRoot;
 
-export default Accordion
+export default Accordion;

src/components/ui/Accordion/shards/AccordionContent.tsx

@@ -1,32 +1,28 @@
-import React from 'react'
-import { customClassSwitcher } from '~/core'
+import React from 'react';
+// @ts-ignore
+import {customClassSwitcher} from '~/core';
 
 type AccordionContentProps = {
-  children: React.ReactNode
-  index: number
-  activeIndex: number
-  customRootClass?: string
-}
+  children: React.ReactNode;
+  index: number,
+  activeIndex: number,
+  customRootClass? :string
+};
 
-const AccordionContent: React.FC<AccordionContentProps> = ({
-  children,
-  index,
-  activeIndex,
-  customRootClass
-}: AccordionContentProps) => {
-  const rootClass = customClassSwitcher(customRootClass, 'Accordion')
-  return (
-    <span className={`${rootClass}-content`}>
-      <div
-        id={`content-${index}`}
-        role="region"
-        aria-labelledby={`section-${index}`}
-        hidden={activeIndex !== index}
-      >
-        {children}
-      </div>
-    </span>
-  )
-}
+const AccordionContent: React.FC<AccordionContentProps> = ({children, index, activeIndex, customRootClass}: AccordionContentProps) => {
+    const rootClass = customClassSwitcher(customRootClass, 'Accordion');
+    return (
+        <span className={`${rootClass}-content`}>
+            <div
+                id={`content-${index}`}
+                role="region"
+                aria-labelledby={`section-${index}`}
+                hidden={activeIndex !== index}
+            >
+                {children}
+            </div>
+        </span>
+    );
+};
 
-export default AccordionContent
+export default AccordionContent;

src/components/ui/Accordion/shards/AccordionHeader.tsx

@@ -1,17 +1,19 @@
-import React from 'react'
-import { customClassSwitcher } from '~/core'
+import React from 'react';
+// @ts-ignore
+import {customClassSwitcher} from '~/core';
 
 export type AccordionHeaderProps = {
-  children: React.ReactNode
-  customHeaderClass?: string
+    children: React.ReactNode;
+    customHeaderClass?: string;
 }
 
-const AccordionHeader: React.FC<AccordionHeaderProps> = ({
-  children,
-  customHeaderClass = ''
-}) => {
-  const rootClass = customClassSwitcher(customHeaderClass, 'Accordion')
-  return <div className={`${rootClass}-header`}>{children}</div>
-}
+const AccordionHeader: React.FC<AccordionHeaderProps> = ({children, customHeaderClass=''}) => {
+    const rootClass = customClassSwitcher(customHeaderClass, 'Accordion');
+    return (
+        <div className={`${rootClass}-header`}>
+            {children}
+        </div>
+    );
+};
 
-export default AccordionHeader
+export default AccordionHeader;

src/components/ui/Accordion/shards/AccordionItem.tsx

@@ -1,18 +1,20 @@
-import React from 'react'
-import { customClassSwitcher } from '~/core'
+import React from 'react';
+// @ts-ignore
+import {customClassSwitcher} from '~/core';
 
 export type AccordionItemProps = {
-  children: React.ReactNode
-  customItemClass?: string
-  value?: number
+    children: React.ReactNode;
+    customItemClass?: string;
+    value?: number;
 }
 
-const AccordionItem: React.FC<AccordionItemProps> = ({
-  children,
-  customItemClass = ''
-}) => {
-  const rootClass = customClassSwitcher(customItemClass, 'Accordion')
-  return <div className={`${rootClass}-item`}>{children}</div>
-}
+const AccordionItem: React.FC<AccordionItemProps> = ({children, value, customItemClass=''}) => {
+    const rootClass = customClassSwitcher(customItemClass, 'Accordion');
+    return (
+        <div className={`${rootClass}-item`}>
+            {children}
+        </div>
+    );
+};
 
-export default AccordionItem
+export default AccordionItem;

src/components/ui/Accordion/shards/AccordionRoot.tsx

@@ -1,14 +1,19 @@
-import React from 'react'
-import { customClassSwitcher } from '~/core'
+import React from 'react';
+// @ts-ignore
+import {customClassSwitcher} from '~/core';
 
 export type AccordionRootProps = {
-  children: React.ReactNode
-  customRootClass?: string
+    children: React.ReactNode;
+    customRootClass?: string;
 }
 
-const AccordionRoot = ({ children, customRootClass }: AccordionRootProps) => {
-  const rootClass = customClassSwitcher(customRootClass, 'Accordion')
-  return <span className={`${rootClass}-root`}>{children}</span>
-}
+const AccordionRoot= ({children, customRootClass}: AccordionRootProps) => {
+    const rootClass = customClassSwitcher(customRootClass, 'Accordion');
+    return (
+        <span className={`${rootClass}-root`}>
+            {children}
+        </span>
+    );
+};
 
-export default AccordionRoot
+export default AccordionRoot;

src/components/ui/Accordion/shards/AccordionTrigger.tsx

@@ -1,33 +1,30 @@
-import React from 'react'
-import { customClassSwitcher } from '~/core'
+import React from 'react';
+// @ts-ignore
+import {customClassSwitcher} from '~/core';
 
 type AccordionTriggerProps = {
-  children: React.ReactNode
-  customRootClass?: string
-  index: number
-  activeIndex: number
+  children: React.ReactNode;
+  customRootClass?: string,
+  index: number,
+  activeIndex: number,
   handleClick: (index: number) => void
-}
+};
 
-const AccordionTrigger: React.FC<AccordionTriggerProps> = ({
-  children,
-  handleClick,
-  index,
-  activeIndex,
-  customRootClass
-}) => {
-  const rootClass = customClassSwitcher(customRootClass, 'Accordion')
-  return (
-    <span className={`${rootClass}-trigger`}>
-      <button
-        onClick={() => handleClick(index)}
-        aria-expanded={activeIndex === index}
-        aria-controls={`content-${index}`}
-      >
-        {children}
-      </button>
-    </span>
-  )
-}
+const AccordionTrigger: React.FC<AccordionTriggerProps> = ({children, handleClick, index, activeIndex, customRootClass}) => {
+    const rootClass = customClassSwitcher(customRootClass, 'Accordion');
+    return (
+        <span className={`${rootClass}-trigger`}>
 
-export default AccordionTrigger
+            <button
+                onClick={() => handleClick(index)}
+                aria-expanded={activeIndex === index}
+                aria-controls={`content-${index}`}
+            >
+                {children}
+            </button>
+
+        </span>
+    );
+};
+
+export default AccordionTrigger;