Skip to content

Commit 42c02b2

Browse files
WesSouzaarturbien
authored andcommitted
feat(panel): convert to TypeScript and export types
1 parent 878a07e commit 42c02b2

File tree

4 files changed

+25
-17
lines changed

4 files changed

+25
-17
lines changed

src/Panel/Panel.spec.js renamed to src/Panel/Panel.spec.tsx

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
1-
import React from 'react';
21
import { render } from '@testing-library/react';
32

4-
import Panel from './Panel';
3+
import { Panel } from './Panel';
54

65
describe('<Panel />', () => {
76
it('should render panel', () => {
87
const { container } = render(<Panel />);
9-
const panel = container.firstChild;
8+
const panel = container.firstElementChild;
109

1110
expect(panel).toBeInTheDocument();
1211
});
@@ -15,7 +14,7 @@ describe('<Panel />', () => {
1514
const { container } = render(
1615
<Panel style={{ backgroundColor: 'papayawhip' }} />
1716
);
18-
const panel = container.firstChild;
17+
const panel = container.firstElementChild;
1918

2019
expect(panel).toHaveAttribute('style', 'background-color: papayawhip;');
2120
});
@@ -34,7 +33,7 @@ describe('<Panel />', () => {
3433
it('should render custom props', () => {
3534
const customProps = { title: 'panel' };
3635
const { container } = render(<Panel {...customProps} />);
37-
const panel = container.firstChild;
36+
const panel = container.firstElementChild;
3837

3938
expect(panel).toHaveAttribute('title', 'panel');
4039
});

src/Panel/Panel.stories.js renamed to src/Panel/Panel.stories.tsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
import React from 'react';
2-
import styled from 'styled-components';
3-
1+
import { ComponentMeta } from '@storybook/react';
42
import { Panel } from 'react95';
3+
import styled from 'styled-components';
54

65
const Wrapper = styled.div`
76
padding: 5rem;
@@ -22,7 +21,7 @@ export default {
2221
title: 'Panel',
2322
component: Panel,
2423
decorators: [story => <Wrapper>{story()}</Wrapper>]
25-
};
24+
} as ComponentMeta<typeof Panel>;
2625

2726
export function Default() {
2827
return (

src/Panel/Panel.js renamed to src/Panel/Panel.tsx

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,21 @@
1-
import React from 'react';
1+
import React, { forwardRef } from 'react';
22
import propTypes from 'prop-types';
33
import styled, { css } from 'styled-components';
44
import {
55
createBorderStyles,
66
createBoxStyles,
77
createWellBorderStyles
88
} from '../common';
9+
import { CommonStyledProps } from '../types';
910

10-
const createPanelStyles = (variant = 'default') => {
11+
type PanelProps = {
12+
children?: React.ReactNode;
13+
shadow?: boolean;
14+
variant?: 'outside' | 'inside' | 'well';
15+
} & React.HTMLAttributes<HTMLDivElement> &
16+
CommonStyledProps;
17+
18+
const createPanelStyles = (variant: PanelProps['variant']) => {
1119
switch (variant) {
1220
case 'well':
1321
return css`
@@ -24,17 +32,19 @@ const createPanelStyles = (variant = 'default') => {
2432
}
2533
};
2634

27-
const StyledPanel = styled.div`
35+
const StyledPanel = styled.div<Required<Pick<PanelProps, 'variant'>>>`
2836
position: relative;
2937
font-size: 1rem;
3038
${({ variant }) => createPanelStyles(variant)}
3139
${createBoxStyles()}
3240
`;
3341

34-
const Panel = React.forwardRef(function Panel(props, ref) {
35-
const { children, variant, ...otherProps } = props;
42+
const Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(
43+
{ children, shadow = false, variant = 'outside', ...otherProps },
44+
ref
45+
) {
3646
return (
37-
<StyledPanel ref={ref} variant={variant} {...otherProps}>
47+
<StyledPanel ref={ref} shadow={shadow} variant={variant} {...otherProps}>
3848
{children}
3949
</StyledPanel>
4050
);
@@ -52,4 +62,4 @@ Panel.propTypes = {
5262
shadow: propTypes.bool
5363
};
5464

55-
export default Panel;
65+
export { Panel, PanelProps };

src/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export { default as List } from './List/List';
2020
export { default as ListItem } from './ListItem/ListItem';
2121
export { default as LoadingIndicator } from './LoadingIndicator/LoadingIndicator';
2222
export { default as NumberField } from './NumberField/NumberField';
23-
export { default as Panel } from './Panel/Panel';
23+
export * from './Panel/Panel';
2424
export { default as Progress } from './Progress/Progress';
2525
export { default as Radio } from './Radio/Radio';
2626
export { default as Select } from './Select/Select';

0 commit comments

Comments
 (0)