major updates

- rename index.tsx by package name in package directory
- unmark dashboards item as arrival in sidebar
- update read.me file
- update prettier and eslint config

.eslintrc → .eslintrc.json

@@ -1,4 +1,5 @@
 {
+  "root": true,
   "extends": ["plugin:prettier/recommended", "next/core-web-vitals"],
   "plugins": ["unused-imports"],
   "rules": {

README.md

@@ -23,14 +23,14 @@ Each component contains 2 sub-directories
 ## 📋 Add a new component
 To add a new component :
 
-Create your new directory in **packages/{yourComponentName}** Inside your folder, you will create 2 subfolders and one file
+Create your new directory in **src/packages/{yourComponentName}** Inside your folder, you will create 2 subfolders and one file
 
 - **examples** : will contains examples for your component in TypeScript**  
 - **snippets** : Will contains examples in plain React and will be used as code snippet to copy
-- **index.tsx** will contains the logic of your components
+- **{your component name}.tsx** will contains the logic of your components
 
 
-Create your new file(route) in **pages/components/{yourComponentName}**. Then you will import all the examples and snippets for your component
+Create your new file(route) in **src/pages/components/{your component name}**. Then you will import all the examples and snippets for your component
 
 
 ## Browser Support

contributing.md

@@ -18,7 +18,7 @@ Create your new directory in **packages/{yourComponentName}** Inside your folder
 
 - **examples** : will contains examples for your component in TypeScript**
 - **snippets** : Will contains examples in plain React and will be used as code snippet to copy
-- **index.tsx** will contains the logic of your components
+- **accordion.tsx** will contains the logic of your components
 
 
 Create your new file(route) in **pages/components/{yourComponentName}**. Then you will import all the examples and snippets for your component

src/website/hooks/useDisclosure.tsx → src/packages/_utils/useToggle.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 
-const useDisclosure = () => {
+const useToggle = () => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
 
   const toggle = () => {
@@ -9,4 +9,4 @@ const useDisclosure = () => {
   return { toggle, isOpen };
 };
 
-export default useDisclosure;
+export default useToggle;

src/packages/accordion/examples/gray.tsx

@@ -1,4 +1,8 @@
-import { Accordion, AccordionItem, AccordionPanel } from '@/packages/accordion';
+import {
+  Accordion,
+  AccordionItem,
+  AccordionPanel,
+} from '@/packages/accordion/accordion';
 
 export default function AccordionGrayColor() {
   return (

src/packages/accordion/examples/green.tsx

@@ -1,4 +1,8 @@
-import { Accordion, AccordionItem, AccordionPanel } from '@/packages/accordion';
+import {
+  Accordion,
+  AccordionItem,
+  AccordionPanel,
+} from '@/packages/accordion/accordion';
 
 export default function AccordionGreenColor() {
   return (

src/packages/accordion/examples/indigo.tsx

@@ -1,4 +1,8 @@
-import { Accordion, AccordionItem, AccordionPanel } from '@/packages/accordion';
+import {
+  Accordion,
+  AccordionItem,
+  AccordionPanel,
+} from '@/packages/accordion/accordion';
 
 export default function AccordionIndigoColor() {
   return (

src/packages/autocomplete/examples/index.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import Autocomplete from '../index';
+import Autocomplete from '../autocomplete';
 
 const AutoCompleteExample = () => {
   const [value, setValue] = useState('');

src/packages/button/example/RoundedButton.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import Button from '../index';
+import Button from '../button';
 
 const RoundedButtons: FC = () => (
   <div className="mb-12">

src/packages/button/example/SizedButton.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import Button from '../index';
+import Button from '../button';
 
 const SizedButtons: FC = () => (
   <div className="mb-12">

src/packages/button/example/animateButton.tsx

@@ -1,4 +1,4 @@
-import Button from '../index';
+import Button from '../button';
 import { FC } from 'react';
 
 const Icon = () => (

src/packages/button/example/defaultButton.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import Button from '../index';
+import Button from '../button';
 
 const DefaultButtons: FC = () => (
   <div className="mb-12">

src/packages/button/example/disabledButton.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import Button from '../index';
+import Button from '../button';
 
 const DisabledButtons: FC = () => (
   <div className="mb-12">

src/packages/button/example/outlineButton.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import Button from '../index';
+import Button from '../button';
 
 const OutlineButtons: FC = () => (
   <div className="mb-12">

src/packages/card/example/multiple.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { Card, CardBody, CardTitle, CardText } from '../index';
+import { Card, CardBody, CardTitle, CardText } from '../card';
 import Image from 'next/image';
 
 const MultipleCard: FC = () => (

src/packages/card/example/single.tsx

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import Image from 'next/image';
-import { Card, CardBody, CardText, CardTitle } from '../index';
+import { Card, CardBody, CardText, CardTitle } from '../card';
 
 const SingleCard: FC = () => (
   <div className="mb-12">

src/packages/code/examples/black.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import Code from '../index';
+import Code from '../code';
 
 const BlackCode: FC = () => (
   <div className="mb-12">

src/packages/code/examples/blueOutline.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import Code from '../index';
+import Code from '../code';
 
 const BlueOutlineCode: FC = () => (
   <div className="mb-12">

src/packages/code/examples/default.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import Code from '../index';
+import Code from '../code';
 
 const DefaultCode: FC = () => (
   <div className="mb-12">

src/packages/code/examples/indigo.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import Code from '../index';
+import Code from '../code';
 
 const IndigoCode: FC = () => (
   <div className="mb-12">

src/packages/code/examples/withoutCopy.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import Code from '../index';
+import Code from '../code';
 
 const WithoutCopyCode: FC = () => (
   <div className="mb-12">

src/packages/collapse/example/first.tsx

@@ -1,6 +1,6 @@
 import { FC, useState } from 'react';
-import Collapse from '../index';
-import Button from '@/packages/button';
+import Collapse from '../collapse';
+import Button from '@/packages/button/button';
 
 const CollapseFirst: FC = () => {
   const [isOpen, setIsOpen] = useState(false);

src/packages/collapse/example/second.tsx

@@ -1,6 +1,6 @@
 import { FC, useState } from 'react';
-import Collapse from '../index';
-import Button from '@/packages/button';
+import Collapse from '../collapse';
+import Button from '@/packages/button/button';
 
 const CollapseSecond: FC = () => {
   const [isOpen, setIsOpen] = useState(false);

src/packages/curtain-menu/example/left.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
-import Button from '@/packages/button';
-import { Menu, MenuContainer, MenuItem } from '../index';
+import Button from '@/packages/button/button';
+import { Menu, MenuContainer, MenuItem } from '../curtainMenu';
 
 export const CurtainMenuLeft = () => {
   const [open, setOpen] = useState<boolean>(false);

src/packages/curtain-menu/example/top.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
-import Button from '@/packages/button';
-import { Menu, MenuContainer, MenuItem } from '../index';
+import Button from '@/packages/button/button';
+import { Menu, MenuContainer, MenuItem } from '../curtainMenu';
 
 export const CurtainMenuTop = () => {
   const [open, setOpen] = useState<boolean>(false);

src/packages/drawer/examples/bottom.tsx

@@ -1,10 +1,10 @@
 import { FC } from 'react';
-import Button from '@/packages/button';
-import useDisclosure from '@/website/hooks/useDisclosure';
-import { Drawer, DrawerBody, DrawerFooter, DrawerHeader } from '../index';
+import Button from '@/packages/button/button';
+import useToggle from '@/packages/_utils/useToggle';
+import { Drawer, DrawerBody, DrawerFooter, DrawerHeader } from '../drawer';
 
 const DrawerBottom: FC = () => {
-  const { toggle, isOpen } = useDisclosure();
+  const { toggle, isOpen } = useToggle();
   return (
     <div className="mb-8">
       <h2 className="mb-3 mt-12 text-gray-600 text-lg font-bold md:text-2xl">

src/packages/drawer/examples/left.tsx

@@ -1,10 +1,10 @@
 import { FC } from 'react';
-import Button from '@/packages/button';
-import useDisclosure from '@/website/hooks/useDisclosure';
-import { Drawer, DrawerBody, DrawerFooter, DrawerHeader } from '../index';
+import Button from '@/packages/button/button';
+import useToggle from '@/packages/_utils/useToggle';
+import { Drawer, DrawerBody, DrawerFooter, DrawerHeader } from '../drawer';
 
 const DrawerLeft: FC = () => {
-  const { toggle, isOpen } = useDisclosure();
+  const { toggle, isOpen } = useToggle();
   return (
     <div className="mb-8">
       <h2 className="mb-3 mt-12 text-gray-600 text-lg font-bold md:text-2xl">

src/packages/drawer/examples/right.tsx

@@ -1,10 +1,10 @@
 import { FC } from 'react';
-import Button from '@/packages/button';
-import useDisclosure from '@/website/hooks/useDisclosure';
-import { Drawer, DrawerBody, DrawerFooter, DrawerHeader } from '../index';
+import Button from '@/packages/button/button';
+import useToggle from '@/packages/_utils/useToggle';
+import { Drawer, DrawerBody, DrawerFooter, DrawerHeader } from '../drawer';
 
 const DrawerRight: FC = () => {
-  const { toggle, isOpen } = useDisclosure();
+  const { toggle, isOpen } = useToggle();
   return (
     <div className="mb-8">
       <h2 className="mb-3 mt-12 text-gray-600 text-lg font-bold md:text-2xl">

src/packages/drawer/examples/simple.tsx

@@ -1,10 +1,10 @@
 import { FC } from 'react';
-import Button from '@/packages/button';
-import useDisclosure from '@/website/hooks/useDisclosure';
-import { Drawer } from '../index';
+import Button from '@/packages/button/button';
+import useToggle from '@/packages/_utils/useToggle';
+import { Drawer } from '../drawer';
 
 const DrawerSimple: FC = () => {
-  const { toggle, isOpen } = useDisclosure();
+  const { toggle, isOpen } = useToggle();
   return (
     <div className="mb-8">
       <h2 className="mb-3 mt-12 text-gray-600 text-lg font-bold md:text-2xl">

src/packages/drawer/examples/top.tsx

@@ -1,10 +1,10 @@
 import { FC } from 'react';
-import Button from '@/packages/button';
-import useDisclosure from '@/website/hooks/useDisclosure';
-import { Drawer, DrawerBody, DrawerFooter, DrawerHeader } from '../index';
+import Button from '@/packages/button/button';
+import useToggle from '@/packages/_utils/useToggle';
+import { Drawer, DrawerBody, DrawerFooter, DrawerHeader } from '../drawer';
 
 const DrawerTop: FC = () => {
-  const { toggle, isOpen } = useDisclosure();
+  const { toggle, isOpen } = useToggle();
   return (
     <div className="mb-8">
       <h2 className="mb-3 mt-12 text-gray-600 text-lg font-bold md:text-2xl">

src/packages/dropdown/example/basic.tsx

@@ -1,5 +1,10 @@
 import { FC } from 'react';
-import { Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from '../index';
+import {
+  Dropdown,
+  DropdownMenu,
+  DropdownToggle,
+  DropdownItem,
+} from '../dropdown';
 
 const BasicDropdown: FC = () => (
   <div className="mb-8">

src/packages/dropdown/example/with-divider.tsx

@@ -5,7 +5,7 @@ import {
   DropdownToggle,
   DropdownItem,
   DropdownDivider,
-} from '../index';
+} from '../dropdown';
 
 const DropdownWithDivider: FC = () => (
   <div className="mb-8">

src/packages/ecommerce/pricing-table/examples/index.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import Price, { CheckIcon, CloseIcon } from '../index';
+import Price, { CheckIcon, CloseIcon } from '../pricingTable';
 
 const PricingTableExample: FC = () => (
   <Price>

src/packages/field/examples/default.tsx

@@ -1,4 +1,4 @@
-import Field, { LockIcon } from '../index';
+import Field, { LockIcon } from '../field';
 
 const DefaultFieldExample = () => (
   <div className="mt-16">

src/packages/field/examples/withFormik.tsx

@@ -1,6 +1,6 @@
 import { useFormik } from 'formik';
 import * as Yup from 'yup';
-import Field, { LockIcon } from '../index';
+import Field, { LockIcon } from '../field';
 
 /* Yup validation schema*/
 const validateSchema = Yup.object().shape({

src/packages/field/examples/withReactHookForm.tsx

@@ -1,5 +1,5 @@
 import { useForm } from 'react-hook-form';
-import Field from '../index';
+import Field from '../field';
 
 const FieldWithReactHookForm = () => {
   const {

src/packages/hamburger-menu/example/variantOne.tsx

@@ -7,7 +7,7 @@ import {
   HamburgerMenuNav,
   HamburgerMenuItem,
   HamburgerMenuLink,
-} from '../index';
+} from '../hamburgerMenu';
 
 const HamburgerMenuVariantOne = () => {
   const [open, setOpen] = useState<boolean>(false);

src/packages/hamburger-menu/example/variantThree.tsx

@@ -7,7 +7,7 @@ import {
   HamburgerMenuNav,
   HamburgerMenuItem,
   HamburgerMenuLink,
-} from '../index';
+} from '../hamburgerMenu';
 
 const HamburgerMenuVariantThree = () => {
   const [open, setOpen] = useState<boolean>(false);

src/packages/hamburger-menu/example/variantTwo.tsx

@@ -7,7 +7,7 @@ import {
   HamburgerMenuNav,
   HamburgerMenuItem,
   HamburgerMenuLink,
-} from '../index';
+} from '../hamburgerMenu';
 
 const HamburgerMenuVariantTwo = () => {
   const [open, setOpen] = useState<boolean>(false);

src/packages/jumbotron/example/simple.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import Jumbotron from '../index';
+import Jumbotron from '../jumbotron';
 
 const JumbotronComponent: FC = () => (
   <div>

src/packages/jumbotron/example/withBackground.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import Jumbotron from '../index';
+import Jumbotron from '../jumbotron';
 
 const JumbotronWithBackgroundComponent: FC = () => (
   <div>

src/packages/list-group/example/colored.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { ListGroup, ListGroupItem } from '../index';
+import { ListGroup, ListGroupItem } from '../listGroup';
 
 const ColoredListGroupComponent: FC = () => (
   <div className="mb-12">

src/packages/list-group/example/link.tsx

@@ -1,4 +1,4 @@
-import { ListGroup, ListGroupItem } from '../index';
+import { ListGroup, ListGroupItem } from '../listGroup';
 
 const ListGroupLinkComponent = () => (
   <div className="mb-12">

src/packages/list-group/example/simple.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { ListGroup, ListGroupItem } from '../index';
+import { ListGroup, ListGroupItem } from '../listGroup';
 
 const ListGroupComponent: FC = () => (
   <div className="mb-12">