diff --git a/package-lock.json b/package-lock.json
index 80bd76c5b6b8199feb121ce0da4f7e042b8e88af..790d099b51f95f09a498568be9d57e750ec8b88e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,6 +21,7 @@
"next": "13.4.19",
"postcss": "8.4.29",
"react": "18.2.0",
+ "react-accessible-accordion": "^5.0.0",
"react-dom": "18.2.0",
"react-redux": "^8.1.2",
"tailwind-merge": "^1.14.0",
@@ -10308,6 +10309,15 @@
"node": ">=0.10.0"
}
},
+ "node_modules/react-accessible-accordion": {
+ "version": "5.0.0",
+ "resolved": "https://registry.npmjs.org/react-accessible-accordion/-/react-accessible-accordion-5.0.0.tgz",
+ "integrity": "sha512-MT2obYpTgLIIfPr9d7hEyvPB5rg8uJcHpgA83JSRlEUHvzH48+8HJPvzSs+nM+XprTugDgLfhozO5qyJpBvYRQ==",
+ "peerDependencies": {
+ "react": "^16.3.2 || ^17.0.0 || ^18.0.0",
+ "react-dom": "^16.3.3 || ^17.0.0 || ^18.0.0"
+ }
+ },
"node_modules/react-dom": {
"version": "18.2.0",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
diff --git a/package.json b/package.json
index ba33ffe0d572091683ee3d35a956907d38a82725..c4ee3467a915fbdc7f06a1716ac8ec02826fe8d4 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
"next": "13.4.19",
"postcss": "8.4.29",
"react": "18.2.0",
+ "react-accessible-accordion": "^5.0.0",
"react-dom": "18.2.0",
"react-redux": "^8.1.2",
"tailwind-merge": "^1.14.0",
@@ -79,9 +80,9 @@
"lint-staged": "^14.0.1",
"prettier": "^3.0.3",
"prettier-2": "npm:prettier@^2",
+ "prettier-plugin-tailwindcss": "^0.5.4",
"typescript": "^5.2.2",
- "zod-fixture": "^2.5.0",
- "prettier-plugin-tailwindcss": "^0.5.4"
+ "zod-fixture": "^2.5.0"
},
"config": {
"commitizen": {
diff --git a/pages/_app.tsx b/pages/_app.tsx
index f0e8ed0cf72767f1f7198d9eb7c5ed36575ded60..d767f29ca9bff1e622a7e7d4fd8723c6ed9b3050 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,5 +1,6 @@
import { AppWrapper } from '@/components/AppWrapper';
import type { AppProps } from 'next/app';
+import '@/styles/index.css';
const MyApp = ({ Component, pageProps }: AppProps): JSX.Element => (
<AppWrapper>
diff --git a/pages/index.tsx b/pages/index.tsx
index 929f13282f87b83a95e22a173b80847366a920fb..0c103a3f5ee878df66fdedc789539a641d538fc0 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,4 +1,3 @@
import { MinervaSPA } from '@/components/SPA';
-import '@/styles/index.css';
export default MinervaSPA;
diff --git a/pages/redux-api-poc.tsx b/pages/redux-api-poc.tsx
deleted file mode 100644
index 2811cf8aaf9a75b3364ca34aba8533bbaf5031c0..0000000000000000000000000000000000000000
--- a/pages/redux-api-poc.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { useSelector } from 'react-redux';
-import { selectSearchValue } from '@/redux/search/search.selectors';
-import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
-import { getDrugs } from '@/redux/drugs/drugs.thunks';
-import { getMirnas } from '@/redux/mirnas/mirnas.thunks';
-
-const ReduxPage = (): JSX.Element => {
- const dispatch = useAppDispatch();
- const searchValue = useSelector(selectSearchValue);
-
- const triggerSyncUpdate = (): void => {
- dispatch(getDrugs('aspirin'));
- dispatch(getMirnas('hsa-miR-302b-3p'));
- };
-
- return (
- <div>
- {searchValue}
- <button type="button" onClick={triggerSyncUpdate}>
- sync update
- </button>
- </div>
- );
-};
-
-export default ReduxPage;
diff --git a/src/shared/.gitkeep b/src/shared/.gitkeep
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/src/shared/Accordion/Accordion.component.tsx b/src/shared/Accordion/Accordion.component.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f0de2a3e2d506006d8211936ca45c70ad0b11f1d
--- /dev/null
+++ b/src/shared/Accordion/Accordion.component.tsx
@@ -0,0 +1,31 @@
+import { Accordion as Ac } from 'react-accessible-accordion';
+import { DivAttributes } from 'react-accessible-accordion/dist/types/helpers/types';
+
+type ID = string | number;
+
+type AccordionProps = Pick<DivAttributes, Exclude<keyof DivAttributes, 'onChange'>> & {
+ children: React.ReactNode;
+ preExpanded?: ID[];
+ allowMultipleExpanded?: boolean;
+ allowZeroExpanded?: boolean;
+ onChange?(args: ID[]): void;
+};
+
+export const Accordion = ({
+ children,
+ preExpanded,
+ allowMultipleExpanded,
+ allowZeroExpanded,
+ onChange,
+ ...rest
+}: AccordionProps): JSX.Element => (
+ <Ac
+ preExpanded={preExpanded}
+ allowMultipleExpanded={allowMultipleExpanded}
+ allowZeroExpanded={allowZeroExpanded}
+ onChange={onChange}
+ {...rest}
+ >
+ {children}
+ </Ac>
+);
diff --git a/src/shared/Accordion/AccordionItem/AccordionItem.component.tsx b/src/shared/Accordion/AccordionItem/AccordionItem.component.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..36c4f38212b6218af2c96722eddadfe4a4f28d60
--- /dev/null
+++ b/src/shared/Accordion/AccordionItem/AccordionItem.component.tsx
@@ -0,0 +1,27 @@
+import { twMerge } from 'tailwind-merge';
+import { AccordionItem as AccItem } from 'react-accessible-accordion';
+
+interface AccordionItemProps extends React.HTMLAttributes<HTMLDivElement> {
+ uuid?: string | number;
+ activeClassName?: string;
+ dangerouslySetExpanded?: boolean;
+ children: React.ReactNode;
+ className?: string;
+}
+
+export const AccordionItem = ({
+ uuid: customUuid,
+ dangerouslySetExpanded,
+ children,
+ className,
+ ...rest
+}: AccordionItemProps): JSX.Element => (
+ <AccItem
+ uuid={customUuid}
+ dangerouslySetExpanded={dangerouslySetExpanded}
+ className={twMerge('border-b', className)}
+ {...rest}
+ >
+ {children}
+ </AccItem>
+);
diff --git a/src/shared/Accordion/AccordionItem/index.ts b/src/shared/Accordion/AccordionItem/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4940ad3798b4680b2387e4176f99da18f200b9b3
--- /dev/null
+++ b/src/shared/Accordion/AccordionItem/index.ts
@@ -0,0 +1 @@
+export { AccordionItem } from './AccordionItem.component';
diff --git a/src/shared/Accordion/AccordionItemButton/AccordionItemButton.component.tsx b/src/shared/Accordion/AccordionItemButton/AccordionItemButton.component.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..32942ae9a996c6f83c3402b9f904a4d27e1351a3
--- /dev/null
+++ b/src/shared/Accordion/AccordionItemButton/AccordionItemButton.component.tsx
@@ -0,0 +1,14 @@
+import { Icon } from '@/shared/Icon';
+import { AccordionItemButton as AIB } from 'react-accessible-accordion';
+import './AccordionItemButton.style.css';
+
+interface AccordionItemButtonProps {
+ children: React.ReactNode;
+}
+
+export const AccordionItemButton = ({ children }: AccordionItemButtonProps): JSX.Element => (
+ <AIB className="accordion-button flex flex-row flex-nowrap justify-between">
+ {children}
+ <Icon name="chevron-down" className="arrow-button h-6 w-6 fill-font-500" />
+ </AIB>
+);
diff --git a/src/shared/Accordion/AccordionItemButton/AccordionItemButton.style.css b/src/shared/Accordion/AccordionItemButton/AccordionItemButton.style.css
new file mode 100644
index 0000000000000000000000000000000000000000..ee300f20ba887d33a867a0524f9683a95d85d4cf
--- /dev/null
+++ b/src/shared/Accordion/AccordionItemButton/AccordionItemButton.style.css
@@ -0,0 +1,3 @@
+.accordion-button[aria-expanded='true'] > .arrow-button {
+ @apply rotate-180;
+}
diff --git a/src/shared/Accordion/AccordionItemButton/index.ts b/src/shared/Accordion/AccordionItemButton/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..24541a1a7e94146b4272f1cab555d154410328d0
--- /dev/null
+++ b/src/shared/Accordion/AccordionItemButton/index.ts
@@ -0,0 +1 @@
+export { AccordionItemButton } from './AccordionItemButton.component';
diff --git a/src/shared/Accordion/AccordionItemHeading/AccordionItemHeading.component.tsx b/src/shared/Accordion/AccordionItemHeading/AccordionItemHeading.component.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a2e1af342ff60b3754101ccda2a603e4537d0f9c
--- /dev/null
+++ b/src/shared/Accordion/AccordionItemHeading/AccordionItemHeading.component.tsx
@@ -0,0 +1,9 @@
+import { AccordionItemHeading as AIH } from 'react-accessible-accordion';
+
+interface AccordionItemHeadingProps {
+ children: React.ReactNode;
+}
+
+export const AccordionItemHeading = ({ children }: AccordionItemHeadingProps): JSX.Element => (
+ <AIH className="py-4">{children}</AIH>
+);
diff --git a/src/shared/Accordion/AccordionItemHeading/index.ts b/src/shared/Accordion/AccordionItemHeading/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9eb4999c4036bdac50d39ae9bce8703253bda605
--- /dev/null
+++ b/src/shared/Accordion/AccordionItemHeading/index.ts
@@ -0,0 +1 @@
+export { AccordionItemHeading } from './AccordionItemHeading.component';
diff --git a/src/shared/Accordion/AccordionItemPanel/AccordionItemPanel.component.tsx b/src/shared/Accordion/AccordionItemPanel/AccordionItemPanel.component.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d0ef686da639ebe64570fac06c6eee25deb7af8d
--- /dev/null
+++ b/src/shared/Accordion/AccordionItemPanel/AccordionItemPanel.component.tsx
@@ -0,0 +1,9 @@
+import { AccordionItemPanel as AIP } from 'react-accessible-accordion';
+
+interface AccordionItemPanelProps {
+ children: React.ReactNode;
+}
+
+export const AccordionItemPanel = ({ children }: AccordionItemPanelProps): JSX.Element => (
+ <AIP className="pb-4">{children}</AIP>
+);
diff --git a/src/shared/Accordion/AccordionItemPanel/index.ts b/src/shared/Accordion/AccordionItemPanel/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d45a4338adc9e58627329999b07169fd2ace0673
--- /dev/null
+++ b/src/shared/Accordion/AccordionItemPanel/index.ts
@@ -0,0 +1 @@
+export { AccordionItemPanel } from './AccordionItemPanel.component';
diff --git a/src/shared/Accordion/index.ts b/src/shared/Accordion/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..244e2026c57a60a8de98cbe435a8239fdfec1ccc
--- /dev/null
+++ b/src/shared/Accordion/index.ts
@@ -0,0 +1,5 @@
+export { AccordionItem } from '@/shared/Accordion/AccordionItem';
+export { AccordionItemButton } from '@/shared/Accordion/AccordionItemButton';
+export { AccordionItemHeading } from '@/shared/Accordion/AccordionItemHeading';
+export { Accordion } from './Accordion.component';
+export { AccordionItemPanel } from '@/shared/Accordion/AccordionItemPanel';