🧩​ Accordion => feature/server-components

examples/next/src/app/autocomplete/page.tsx

@@ -0,0 +1,44 @@
+import { Accordion, AccordionBody, AccordionHeader, AccordionItem } from '@trilogy-ds/react/lib/components/accordion'
+import '@trilogy-ds/styles/dist/default/trilogy.css'
+export default function Home() {
+  return (
+    <div>
+      <main>
+        <Accordion id='accordion-1'>
+          <AccordionItem id='ONE'>
+            <AccordionHeader>
+              <p>Hello World 1</p>
+            </AccordionHeader>
+            <AccordionBody data-id='totooooo-test-id'>
+              <p>Lorem ipsum dolor sit amet lorem</p>
+            </AccordionBody>
+          </AccordionItem>
+          <AccordionItem id='TWO'>
+            <AccordionHeader>
+              <p>Hello World 2</p>
+            </AccordionHeader>
+            <AccordionBody>
+              <p>Lorem ipsum dolor sit amet</p>
+            </AccordionBody>
+          </AccordionItem>
+          <AccordionItem id='THREE'>
+            <AccordionHeader>
+              <p>Hello World 2</p>
+            </AccordionHeader>
+            <AccordionBody>
+              <p>Collpased by default</p>
+            </AccordionBody>
+          </AccordionItem>
+          <AccordionItem disabled id='FOUR'>
+            <AccordionHeader>
+              <p>Hello World 3</p>
+            </AccordionHeader>
+            <AccordionBody>
+              <p>Lorem ipsum dolor sit amet</p>
+            </AccordionBody>
+          </AccordionItem>
+        </Accordion>
+      </main>
+    </div>
+  )
+}

packages/react/components/accordion/Accordion.native.tsx

@@ -1,7 +1,7 @@
-import * as React from "react"
-import { StyleSheet, View } from "react-native"
-import { AccordionProps } from "./AccordionProps"
-import { ComponentName } from "@/components/enumsComponentsName"
+import { AccordionProps } from '@/components/accordion/AccordionProps'
+import { ComponentName } from '@/components/enumsComponentsName'
+import * as React from 'react'
+import { StyleSheet, View } from 'react-native'
 
 /**
  * Accordion Component
@@ -10,7 +10,7 @@ import { ComponentName } from "@/components/enumsComponentsName"
 const Accordion = ({ ...others }: AccordionProps): JSX.Element => {
   const styles = StyleSheet.create({
     accordion: {
-      width: "100%",
+      width: '100%',
       minHeight: 10,
       borderRadius: 6,
     },

packages/react/components/accordion/Accordion.tsx

@@ -1,7 +1,7 @@
+import { AccordionProps } from '@/components/accordion/AccordionProps'
 import { hashClass } from '@/helpers/hashClassesHelpers'
 import clsx from 'clsx'
-import * as React from 'react'
-import { AccordionProps } from './AccordionProps'
+import React from 'react'
 
 /**
  * Accordion Component

packages/react/components/accordion/AccordionProps.ts

@@ -1,7 +1,4 @@
-/**
- * Accordion Interface
- */
-import { CommonProps } from '../../objects/facets/CommonProps'
+import { CommonProps } from '@/objects/facets/CommonProps'
 
 export interface AccordionProps extends CommonProps {
   children: React.ReactNode

packages/react/components/accordion/index.ts

@@ -1,6 +1,6 @@
-import Accordion from './Accordion'
-import AccordionItem from './item'
-import AccordionHeader from './item/header'
-import AccordionBody from './item/body'
+import Accordion from '@/components/accordion/Accordion'
+import AccordionItem from '@/components/accordion/item'
+import AccordionBody from '@/components/accordion/item/body'
+import AccordionHeader from '@/components/accordion/item/header'
 
-export { Accordion, AccordionItem, AccordionHeader, AccordionBody }
+export { Accordion, AccordionBody, AccordionHeader, AccordionItem }

packages/react/components/accordion/item/AccordionItem.tsx

@@ -1,8 +1,7 @@
-import { hashClass } from '@/helpers'
+import { AccordionItemProps } from '@/components/accordion/item/AccordionItemProps'
+import { hashClass } from '@/helpers/hashClassesHelpers'
 import clsx from 'clsx'
-import React, { useRef } from 'react'
-import shortid from 'shortid'
-import { AccordionItemProps, OnClickEvent } from './AccordionItemProps'
+import React from 'react'
 
 /**
  * Accordion Item Component
@@ -17,15 +16,12 @@ const AccordionItem = ({
   open,
   className,
   children,
-  id = shortid.generate(),
+  id = React.useId(),
   onClick,
   disabled,
   ...others
 }: AccordionItemProps): JSX.Element => {
-  const ref = useRef<HTMLDetailsElement>(null)
-
   const classes = hashClass(clsx('accordion-item', className))
-
   const ariaProps: { 'aria-disabled'?: boolean; tabIndex?: number } = {}
 
   if (disabled) {
@@ -34,16 +30,7 @@ const AccordionItem = ({
   }
 
   return (
-    <details
-      open={open}
-      {...ariaProps}
-      data-testid={id}
-      className={classes}
-      ref={ref}
-      id={id}
-      {...others}
-      onClick={(e: OnClickEvent) => (onClick ? onClick(e) : null)}
-    >
+    <details open={open} data-testid={id} className={classes} id={id} onClick={onClick} {...ariaProps} {...others}>
       {children}
     </details>
   )

packages/react/components/accordion/item/AccordionItemProps.ts

@@ -1,4 +1,4 @@
-import { CommonProps } from '../../../objects/facets/CommonProps'
+import { CommonProps } from '@/objects/facets/CommonProps'
 
 export type TargetElement = HTMLElement & {
   active?: boolean

packages/react/components/accordion/item/body/AccordionBody.native.tsx

@@ -1,16 +1,13 @@
-import * as React from "react"
-import { StyleSheet, View } from "react-native"
-import { AccordionBodyProps } from "./AccordionBodyProps"
-import { ComponentName } from "@/components/enumsComponentsName"
+import { AccordionBodyProps } from '@/components/accordion/item/body/AccordionBodyProps'
+import { ComponentName } from '@/components/enumsComponentsName'
+import * as React from 'react'
+import { StyleSheet, View } from 'react-native'
 
 /**
  * Accordion Body Component
  * @param children {React.ReactNode} Children for Accordion body
  */
-const AccordionBody = ({
-  children,
-  ...others
-}: AccordionBodyProps): JSX.Element => {
+const AccordionBody = ({ children, ...others }: AccordionBodyProps): JSX.Element => {
   const styles = StyleSheet.create({
     accordionBody: {},
   })

packages/react/components/accordion/item/body/AccordionBody.tsx

@@ -1,7 +1,7 @@
-import { hashClass } from '@/helpers'
+import { AccordionBodyProps } from '@/components/accordion/item/body/AccordionBodyProps'
+import { hashClass } from '@/helpers/hashClassesHelpers'
 import clsx from 'clsx'
-import * as React from 'react'
-import { AccordionBodyProps } from './AccordionBodyProps'
+import React from 'react'
 
 /**
  * Accordion Body Component

packages/react/components/accordion/item/body/AccordionBodyProps.ts

@@ -1,5 +1,5 @@
-import { CommonProps } from '../../../../objects/facets/CommonProps'
-import { Dev } from '@/objects'
+import { CommonProps } from '@/objects/facets/CommonProps'
+import { Dev } from '@/objects/facets/Dev'
 
 /**
  * Accordion Body Interface

packages/react/components/accordion/item/body/index.ts

@@ -1,3 +1,3 @@
-import AccordionBody from './AccordionBody'
+import AccordionBody from '@/components/accordion/item/body/AccordionBody'
 
 export default AccordionBody

packages/react/components/accordion/item/header/AccordionHeader.native.tsx

@@ -1,7 +1,7 @@
-import * as React from "react"
-import { StyleSheet, View } from "react-native"
-import { AccordionHeaderProps } from "./AccordionHeaderProps"
-import { ComponentName } from "@/components/enumsComponentsName"
+import { AccordionHeaderProps } from '@/components/accordion/item/header/AccordionHeaderProps'
+import { ComponentName } from '@/components/enumsComponentsName'
+import * as React from 'react'
+import { StyleSheet, View } from 'react-native'
 
 /**
  * Accordion Header
@@ -10,9 +10,9 @@ import { ComponentName } from "@/components/enumsComponentsName"
 const AccordionHeader = ({ children }: AccordionHeaderProps): JSX.Element => {
   const styles = StyleSheet.create({
     header: {
-      maxWidth: "95%",
-      minWidth: "95%",
-      width: "95%"
+      maxWidth: '95%',
+      minWidth: '95%',
+      width: '95%',
     },
   })
 

packages/react/components/accordion/item/header/AccordionHeader.tsx

@@ -1,7 +1,7 @@
-import { hashClass } from '@/helpers'
+import { AccordionHeaderProps } from '@/components/accordion/item/header/AccordionHeaderProps'
+import { hashClass } from '@/helpers/hashClassesHelpers'
 import clsx from 'clsx'
-import * as React from 'react'
-import { AccordionHeaderProps } from './AccordionHeaderProps'
+import React from 'react'
 
 /**
  * Accordion Header

packages/react/components/accordion/item/header/AccordionHeaderProps.ts

@@ -1,4 +1,4 @@
-import { CommonProps } from '../../../../objects/facets/CommonProps'
+import { CommonProps } from '@/objects/facets/CommonProps'
 
 /**
  * AccordionHeader Interface

packages/react/components/accordion/item/header/index.ts

@@ -1,3 +1,3 @@
-import AccordionHeader from './AccordionHeader'
+import AccordionHeader from '@/components/accordion/item/header/AccordionHeader'
 
 export default AccordionHeader

packages/react/components/accordion/item/index.ts

@@ -1,3 +1,3 @@
-import AccordionItem from './AccordionItem'
+import AccordionItem from '@/components/accordion/item/AccordionItem'
 
 export default AccordionItem