Skip to content

Commit 6fe270f

Browse files
kotAPIkotAPI
authored
Revert "Part 2: fixed linter issues" (#349)
1 parent 1f00675 commit 6fe270f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+1069
-634
lines changed

‎.husky/pre-commit‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
#!/usr/bin/env sh
1+
#!/bin/sh
22
. "$(dirname -- "$0")/_/husky.sh"
33

44
echo "Linting your changes..."
55
npx pretty-quick --staged
6-
#! npm run lint
7-
6+
npm run lint

‎package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,6 @@
3333
"clean": "rimraf dist",
3434
"chromatic": "chromatic --exit-zero-on-changes",
3535
"patch": "npm version patch",
36-
"prepare": "husky install",
3736
"sb": "storybook dev -p 6006",
3837
"storybook": "storybook dev -p 6006",
3938
"build-storybook": "storybook build",

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import Accordion from './Accordion';
2+
import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
3+
4+
// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
5+
export default {
6+
title: 'UI/Data-Display/Accordion',
7+
component: Accordion,
8+
render: (args) => <SandboxEditor>
9+
<div >
10+
<div className='flex space-x-2'>
11+
<Accordion {...args} />
12+
13+
</div>
14+
</div>
15+
</SandboxEditor>,
16+
};
17+
18+
// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
19+
export const All = {
20+
args: {
21+
className: '',
22+
items: [
23+
{title: 'Section 1', content: 'Content for Section 1'},
24+
{title: 'Section 2', content: 'Content for Section 2'},
25+
// Add more items as needed
26+
],
27+
},
28+
};

‎src/components/ui/Accordion/Accordion.tsx‎

Lines changed: 31 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,38 @@
1-
import React, { useState } from 'react'
2-
import AccordionRoot from './shards/AccordionRoot'
3-
import AccordionItem from './shards/AccordionItem'
4-
import AccordionHeader from './shards/AccordionHeader'
5-
import AccordionTrigger from './shards/AccordionTrigger'
6-
import AccordionContent from './shards/AccordionContent'
1+
import React, {useState} from 'react';
2+
import AccordionRoot from './shards/AccordionRoot';
3+
import AccordionItem from './shards/AccordionItem';
4+
import AccordionHeader from './shards/AccordionHeader';
5+
import AccordionTrigger from './shards/AccordionTrigger';
6+
import AccordionContent from './shards/AccordionContent';
77

88
export type AccordionProps = {
9-
items: { content: any }[]
9+
items: {content: any}[];
1010
}
1111

12-
const Accordion = ({ items }: AccordionProps) => {
13-
const [activeIndex, setActiveIndex] = useState<number>(-1)
14-
const handleClick = (index: number) => {
15-
setActiveIndex(activeIndex === index ? -1 : index)
16-
}
12+
const Accordion = ({items} : AccordionProps) => {
13+
const [activeIndex, setActiveIndex] = useState<number>(-1);
14+
const handleClick = (index: number) => {
15+
setActiveIndex(activeIndex === index ? -1 : index);
16+
};
1717

18-
return (
19-
<AccordionRoot>
20-
{items.map((item, index) => (
21-
<AccordionItem value={index}>
22-
<AccordionHeader>
23-
<AccordionTrigger
24-
handleClick={handleClick}
25-
index={index}
26-
activeIndex={activeIndex}
27-
>
28-
Item {index + 1}
29-
</AccordionTrigger>
30-
</AccordionHeader>
31-
<AccordionContent index={index} activeIndex={activeIndex}>
32-
{item.content}
33-
</AccordionContent>
34-
</AccordionItem>
35-
))}
36-
</AccordionRoot>
37-
)
38-
}
18+
return (
19+
<AccordionRoot>
20+
{items.map((item, index) => (
21+
<AccordionItem value={index}>
22+
<AccordionHeader>
23+
<AccordionTrigger handleClick={handleClick} index={index} activeIndex={activeIndex} >
24+
Item {index+1}
25+
</AccordionTrigger>
26+
</AccordionHeader>
27+
<AccordionContent index={index} activeIndex={activeIndex}>
28+
{item.content}
29+
</AccordionContent>
30+
</AccordionItem>
31+
))}
32+
</AccordionRoot>
33+
);
34+
};
3935

40-
Accordion.Root = AccordionRoot
36+
Accordion.Root = AccordionRoot;
4137

42-
export default Accordion
38+
export default Accordion;

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

Lines changed: 24 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,28 @@
1-
import React from 'react'
2-
import { customClassSwitcher } from '~/core'
1+
import React from 'react';
2+
// @ts-ignore
3+
import {customClassSwitcher} from '~/core';
34

45
type AccordionContentProps = {
5-
children: React.ReactNode
6-
index: number
7-
activeIndex: number
8-
customRootClass?: string
9-
}
6+
children: React.ReactNode;
7+
index: number,
8+
activeIndex: number,
9+
customRootClass? :string
10+
};
1011

11-
const AccordionContent: React.FC<AccordionContentProps> = ({
12-
children,
13-
index,
14-
activeIndex,
15-
customRootClass
16-
}: AccordionContentProps) => {
17-
const rootClass = customClassSwitcher(customRootClass, 'Accordion')
18-
return (
19-
<span className={`${rootClass}-content`}>
20-
<div
21-
id={`content-${index}`}
22-
role="region"
23-
aria-labelledby={`section-${index}`}
24-
hidden={activeIndex !== index}
25-
>
26-
{children}
27-
</div>
28-
</span>
29-
)
30-
}
12+
const AccordionContent: React.FC<AccordionContentProps> = ({children, index, activeIndex, customRootClass}: AccordionContentProps) => {
13+
const rootClass = customClassSwitcher(customRootClass, 'Accordion');
14+
return (
15+
<span className={`${rootClass}-content`}>
16+
<div
17+
id={`content-${index}`}
18+
role="region"
19+
aria-labelledby={`section-${index}`}
20+
hidden={activeIndex !== index}
21+
>
22+
{children}
23+
</div>
24+
</span>
25+
);
26+
};
3127

32-
export default AccordionContent
28+
export default AccordionContent;

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

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
1-
import React from 'react'
2-
import { customClassSwitcher } from '~/core'
1+
import React from 'react';
2+
// @ts-ignore
3+
import {customClassSwitcher} from '~/core';
34

45
export type AccordionHeaderProps = {
5-
children: React.ReactNode
6-
customHeaderClass?: string
6+
children: React.ReactNode;
7+
customHeaderClass?: string;
78
}
89

9-
const AccordionHeader: React.FC<AccordionHeaderProps> = ({
10-
children,
11-
customHeaderClass = ''
12-
}) => {
13-
const rootClass = customClassSwitcher(customHeaderClass, 'Accordion')
14-
return <div className={`${rootClass}-header`}>{children}</div>
15-
}
10+
const AccordionHeader: React.FC<AccordionHeaderProps> = ({children, customHeaderClass=''}) => {
11+
const rootClass = customClassSwitcher(customHeaderClass, 'Accordion');
12+
return (
13+
<div className={`${rootClass}-header`}>
14+
{children}
15+
</div>
16+
);
17+
};
1618

17-
export default AccordionHeader
19+
export default AccordionHeader;

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

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,20 @@
1-
import React from 'react'
2-
import { customClassSwitcher } from '~/core'
1+
import React from 'react';
2+
// @ts-ignore
3+
import {customClassSwitcher} from '~/core';
34

45
export type AccordionItemProps = {
5-
children: React.ReactNode
6-
customItemClass?: string
7-
value?: number
6+
children: React.ReactNode;
7+
customItemClass?: string;
8+
value?: number;
89
}
910

10-
const AccordionItem: React.FC<AccordionItemProps> = ({
11-
children,
12-
customItemClass = ''
13-
}) => {
14-
const rootClass = customClassSwitcher(customItemClass, 'Accordion')
15-
return <div className={`${rootClass}-item`}>{children}</div>
16-
}
11+
const AccordionItem: React.FC<AccordionItemProps> = ({children, value, customItemClass=''}) => {
12+
const rootClass = customClassSwitcher(customItemClass, 'Accordion');
13+
return (
14+
<div className={`${rootClass}-item`}>
15+
{children}
16+
</div>
17+
);
18+
};
1719

18-
export default AccordionItem
20+
export default AccordionItem;

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

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,19 @@
1-
import React from 'react'
2-
import { customClassSwitcher } from '~/core'
1+
import React from 'react';
2+
// @ts-ignore
3+
import {customClassSwitcher} from '~/core';
34

45
export type AccordionRootProps = {
5-
children: React.ReactNode
6-
customRootClass?: string
6+
children: React.ReactNode;
7+
customRootClass?: string;
78
}
89

9-
const AccordionRoot = ({ children, customRootClass }: AccordionRootProps) => {
10-
const rootClass = customClassSwitcher(customRootClass, 'Accordion')
11-
return <span className={`${rootClass}-root`}>{children}</span>
12-
}
10+
const AccordionRoot= ({children, customRootClass}: AccordionRootProps) => {
11+
const rootClass = customClassSwitcher(customRootClass, 'Accordion');
12+
return (
13+
<span className={`${rootClass}-root`}>
14+
{children}
15+
</span>
16+
);
17+
};
1318

14-
export default AccordionRoot
19+
export default AccordionRoot;

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

Lines changed: 25 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,30 @@
1-
import React from 'react'
2-
import { customClassSwitcher } from '~/core'
1+
import React from 'react';
2+
// @ts-ignore
3+
import {customClassSwitcher} from '~/core';
34

45
type AccordionTriggerProps = {
5-
children: React.ReactNode
6-
customRootClass?: string
7-
index: number
8-
activeIndex: number
6+
children: React.ReactNode;
7+
customRootClass?: string,
8+
index: number,
9+
activeIndex: number,
910
handleClick: (index: number) => void
10-
}
11+
};
1112

12-
const AccordionTrigger: React.FC<AccordionTriggerProps> = ({
13-
children,
14-
handleClick,
15-
index,
16-
activeIndex,
17-
customRootClass
18-
}) => {
19-
const rootClass = customClassSwitcher(customRootClass, 'Accordion')
20-
return (
21-
<span className={`${rootClass}-trigger`}>
22-
<button
23-
onClick={() => handleClick(index)}
24-
aria-expanded={activeIndex === index}
25-
aria-controls={`content-${index}`}
26-
>
27-
{children}
28-
</button>
29-
</span>
30-
)
31-
}
13+
const AccordionTrigger: React.FC<AccordionTriggerProps> = ({children, handleClick, index, activeIndex, customRootClass}) => {
14+
const rootClass = customClassSwitcher(customRootClass, 'Accordion');
15+
return (
16+
<span className={`${rootClass}-trigger`}>
3217

33-
export default AccordionTrigger
18+
<button
19+
onClick={() => handleClick(index)}
20+
aria-expanded={activeIndex === index}
21+
aria-controls={`content-${index}`}
22+
>
23+
{children}
24+
</button>
25+
26+
</span>
27+
);
28+
};
29+
30+
export default AccordionTrigger;

0 commit comments

Comments
 (0)