feat(panel): convert to TypeScript and export types

src/Panel/Panel.spec.js → src/Panel/Panel.spec.tsx

@@ -1,12 +1,11 @@
-import React from 'react';
 import { render } from '@testing-library/react';
 
-import Panel from './Panel';
+import { Panel } from './Panel';
 
 describe('<Panel />', () => {
   it('should render panel', () => {
     const { container } = render(<Panel />);
-    const panel = container.firstChild;
+    const panel = container.firstElementChild;
 
     expect(panel).toBeInTheDocument();
   });
@@ -15,7 +14,7 @@ describe('<Panel />', () => {
     const { container } = render(
       <Panel style={{ backgroundColor: 'papayawhip' }} />
     );
-    const panel = container.firstChild;
+    const panel = container.firstElementChild;
 
     expect(panel).toHaveAttribute('style', 'background-color: papayawhip;');
   });
@@ -34,7 +33,7 @@ describe('<Panel />', () => {
   it('should render custom props', () => {
     const customProps = { title: 'panel' };
     const { container } = render(<Panel {...customProps} />);
-    const panel = container.firstChild;
+    const panel = container.firstElementChild;
 
     expect(panel).toHaveAttribute('title', 'panel');
   });

src/Panel/Panel.stories.js → src/Panel/Panel.stories.tsx

@@ -1,7 +1,6 @@
-import React from 'react';
-import styled from 'styled-components';
-
+import { ComponentMeta } from '@storybook/react';
 import { Panel } from 'react95';
+import styled from 'styled-components';
 
 const Wrapper = styled.div`
   padding: 5rem;
@@ -22,7 +21,7 @@ export default {
   title: 'Panel',
   component: Panel,
   decorators: [story => <Wrapper>{story()}</Wrapper>]
-};
+} as ComponentMeta<typeof Panel>;
 
 export function Default() {
   return (

src/Panel/Panel.js → src/Panel/Panel.tsx

@@ -1,13 +1,21 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import propTypes from 'prop-types';
 import styled, { css } from 'styled-components';
 import {
   createBorderStyles,
   createBoxStyles,
   createWellBorderStyles
 } from '../common';
+import { CommonStyledProps } from '../types';
 
-const createPanelStyles = (variant = 'default') => {
+type PanelProps = {
+  children?: React.ReactNode;
+  shadow?: boolean;
+  variant?: 'outside' | 'inside' | 'well';
+} & React.HTMLAttributes<HTMLDivElement> &
+  CommonStyledProps;
+
+const createPanelStyles = (variant: PanelProps['variant']) => {
   switch (variant) {
     case 'well':
       return css`
@@ -24,17 +32,19 @@ const createPanelStyles = (variant = 'default') => {
   }
 };
 
-const StyledPanel = styled.div`
+const StyledPanel = styled.div<Required<Pick<PanelProps, 'variant'>>>`
   position: relative;
   font-size: 1rem;
   ${({ variant }) => createPanelStyles(variant)}
   ${createBoxStyles()}
 `;
 
-const Panel = React.forwardRef(function Panel(props, ref) {
-  const { children, variant, ...otherProps } = props;
+const Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(
+  { children, shadow = false, variant = 'outside', ...otherProps },
+  ref
+) {
   return (
-    <StyledPanel ref={ref} variant={variant} {...otherProps}>
+    <StyledPanel ref={ref} shadow={shadow} variant={variant} {...otherProps}>
       {children}
     </StyledPanel>
   );
@@ -52,4 +62,4 @@ Panel.propTypes = {
   shadow: propTypes.bool
 };
 
-export default Panel;
+export { Panel, PanelProps };

src/index.ts

@@ -20,7 +20,7 @@ export { default as List } from './List/List';
 export { default as ListItem } from './ListItem/ListItem';
 export { default as LoadingIndicator } from './LoadingIndicator/LoadingIndicator';
 export { default as NumberField } from './NumberField/NumberField';
-export { default as Panel } from './Panel/Panel';
+export * from './Panel/Panel';
 export { default as Progress } from './Progress/Progress';
 export { default as Radio } from './Radio/Radio';
 export { default as Select } from './Select/Select';