Merge pull request #26 from ahmetarsiv/master

Bug fixed Export

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codenteq/interfeys",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "Codenteq Interfeys Design System",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",

src/accordion/Accordion.tsx

@@ -1,34 +1,15 @@
-import React, { useState, ReactNode, createContext, useContext } from 'react';
-import { motion } from 'framer-motion';
-
-interface AccordionProps {
-    children: ReactNode;
-}
+import React, { useState, ReactNode, createContext } from 'react';
 
 interface AccordionItemProps {
     children: ReactNode;
 }
 
-interface AccordionHeaderProps {
-    children: ReactNode;
-    className?: string;
-}
-
-interface AccordionBodyProps {
-    children: ReactNode;
-    className?: string;
-}
-
 const AccordionContext = createContext({
     isOpen: false,
     toggle: () => {},
 });
 
-export const AccordionList = ({ children }: AccordionProps) => {
-    return <div>{children}</div>;
-};
-
-export const Accordion = ({ children }: AccordionItemProps) => {
+const Accordion = ({ children }: AccordionItemProps) => {
     const [isOpen, setIsOpen] = useState(false);
 
     const toggle = () => setIsOpen(!isOpen);
@@ -42,50 +23,5 @@ export const Accordion = ({ children }: AccordionItemProps) => {
     );
 };
 
-export const AccordionHeader = ({
-    children,
-    className,
-}: AccordionHeaderProps) => {
-    const { isOpen, toggle } = useContext(AccordionContext);
-    return (
-        <div className="border-b border-gray-200 dark:border-gray-700">
-            <motion.button
-                type="button"
-                className={`flex items-center justify-between w-full py-5 ${className}`}
-                onClick={toggle}>
-                {children}
-                <svg
-                    className={`w-3 h-3 transform ${isOpen ? 'rotate-180' : ''}`}
-                    aria-hidden="true"
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="none"
-                    viewBox="0 0 10 6">
-                    <path
-                        stroke="currentColor"
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth="2"
-                        d="M9 5L5 1 1 5"
-                    />
-                </svg>
-            </motion.button>
-        </div>
-    );
-};
-
-export const AccordionBody = ({ children, className }: AccordionBodyProps) => {
-    const { isOpen } = useContext(AccordionContext);
-    return (
-        <motion.div
-            className={`${className} ${isOpen ? 'block' : 'hidden'}`}
-            initial={{ height: 0 }}
-            animate={{ height: isOpen ? 'auto' : 0 }}
-            transition={{ duration: 0.3 }}>
-            <div className={`py-5 ${isOpen ? 'block' : 'hidden'}`}>
-                {children}
-            </div>
-        </motion.div>
-    );
-};
-
+export { AccordionContext };
 export default Accordion;

src/accordion/AccordionBody.tsx

@@ -0,0 +1,25 @@
+import React, { useContext, ReactNode } from 'react';
+import { motion } from 'framer-motion';
+import { AccordionContext } from './Accordion';
+
+interface AccordionBodyProps {
+    children: ReactNode;
+    className?: string;
+}
+
+const AccordionBody = ({ children, className }: AccordionBodyProps) => {
+    const { isOpen } = useContext(AccordionContext);
+    return (
+        <motion.div
+            className={`${className} ${isOpen ? 'block' : 'hidden'}`}
+            initial={{ height: 0 }}
+            animate={{ height: isOpen ? 'auto' : 0 }}
+            transition={{ duration: 0.3 }}>
+            <div className={`py-5 ${isOpen ? 'block' : 'hidden'}`}>
+                {children}
+            </div>
+        </motion.div>
+    );
+};
+
+export default AccordionBody;

src/accordion/AccordionHeader.tsx

@@ -0,0 +1,38 @@
+import React, { useContext, ReactNode } from 'react';
+import { motion } from 'framer-motion';
+import { AccordionContext } from './Accordion';
+
+interface AccordionHeaderProps {
+    children: ReactNode;
+    className?: string;
+}
+
+const AccordionHeader = ({ children, className }: AccordionHeaderProps) => {
+    const { isOpen, toggle } = useContext(AccordionContext);
+    return (
+        <div className="border-b border-gray-200 dark:border-gray-700">
+            <motion.button
+                type="button"
+                className={`flex items-center justify-between w-full py-5 ${className}`}
+                onClick={toggle}>
+                {children}
+                <svg
+                    className={`w-3 h-3 transform ${isOpen ? 'rotate-180' : ''}`}
+                    aria-hidden="true"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 10 6">
+                    <path
+                        stroke="currentColor"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth="2"
+                        d="M9 5L5 1 1 5"
+                    />
+                </svg>
+            </motion.button>
+        </div>
+    );
+};
+
+export default AccordionHeader;

src/accordion/AccordionList.tsx

@@ -0,0 +1,11 @@
+import React, { ReactNode } from 'react';
+
+interface AccordionProps {
+    children: ReactNode;
+}
+
+const AccordionList = ({ children }: AccordionProps) => {
+    return <div>{children}</div>;
+};
+
+export default AccordionList;

src/index.ts

@@ -17,3 +17,6 @@ export { default as Drawer } from './drawer/Drawer';
 export { default as Dialog } from './dialog/Dialog';
 export { default as Popover } from './popover/Popover';
 export { default as Accordion } from './accordion/Accordion';
+export { default as AccordionBody } from './accordion/AccordionBody';
+export { default as AccordionHeader } from './accordion/AccordionHeader';
+export { default as AccordionList } from './accordion/AccordionList';

stories/Accordion.stories.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
+import type { Meta } from '@storybook/react';
 import {
+    Accordion,
     AccordionBody,
     AccordionHeader,
-    Accordion,
     AccordionList,
-} from '../src/accordion/Accordion';
-import type { Meta } from '@storybook/react';
+} from '../src/';
 
 const meta = {
     title: 'Components/Accordion',