chore: types A-D (#152)

* chore: converted Box component to TS

* update style type in utils

* chore: alert

* chore: Box done

* chore: upto Card

* chore: export types

* chore: upto Collapse

* export transition status from react-transition-group

* chore: upto dropdown

* fix: ts spec/story errors

package.json

@@ -76,8 +76,10 @@
     "@storybook/react": "5.3.18",
     "@types/jest": "^25.2.2",
     "@types/lodash": "^4.14.150",
+    "@types/react-transition-group": "^4.4.0",
     "@types/styled-components": "^5.1.0",
     "@types/yup": "^0.29.4",
+    "@types/styled-system": "^5.1.10",
     "babel-jest": "^24.1.0",
     "babel-loader": "^8.0.6",
     "babel-preset-react-app": "^9.1.2",

src/Accordion/Accordion.tsx

@@ -0,0 +1,133 @@
+import React, { useState, useCallback } from 'react';
+import { css } from 'styled-components';
+import Collapse from '../Collapse';
+import { createComponent } from '../utils';
+import Box from '../Box';
+import Icon from '../Icon';
+import Flex from '../Flex';
+
+const AccordionContainer = createComponent({
+  name: 'Accordion',
+});
+
+const AccordionItemContainer = createComponent({
+  name: 'AccordionItem',
+});
+
+const AccordionHeader = createComponent({
+  name: 'AccordionItemHeader',
+  tag: 'header',
+  style: css`
+    padding: 0.75rem 1rem;
+    cursor: pointer;
+  `,
+});
+
+const AccordionTitle = createComponent({
+  name: 'AccordionItemTitle',
+  tag: 'span',
+  style: css``,
+});
+
+const AccordionIcon = createComponent<{ isOpen?: boolean }, typeof Icon>({
+  name: 'AccordionItemIcon',
+  as: Icon,
+  style: ({ isOpen }) => css`
+    transition: 175ms transform;
+    transform: rotate(${isOpen ? 90 : 0}deg);
+  `,
+});
+
+const AccordionContent = createComponent({
+  name: 'AccordionItemContent',
+});
+
+interface AccordionItemProps extends Partial<Pick<AccordionProps, 'contentContainerStyle'>> {
+  title: string;
+  isOpen?: boolean;
+  content: React.ReactNode | string;
+  onToggle?: () => void;
+  renderHeader?: (p: Pick<AccordionItemProps, 'isOpen' | 'title' | 'onToggle'>) => React.ReactNode;
+  renderContent?: (p: Pick<AccordionItemProps, 'isOpen' | 'content'>) => React.ReactNode;
+}
+
+const AccordionItem: React.FC<AccordionItemProps> = ({
+  isOpen,
+  title,
+  content,
+  contentContainerStyle,
+  renderHeader,
+  renderContent,
+  onToggle,
+}) => (
+  <AccordionItemContainer>
+    <Collapse
+      isOpen={isOpen}
+      renderTrigger={() =>
+        renderHeader ? (
+          renderHeader({ isOpen, title, onToggle })
+        ) : (
+          <AccordionHeader onClick={onToggle}>
+            <Flex>
+              <Box flex={1}>
+                <AccordionTitle>{title}</AccordionTitle>
+              </Box>
+              <AccordionIcon name="chevron-right" isOpen={isOpen} />
+            </Flex>
+          </AccordionHeader>
+        )
+      }>
+      {renderContent ? (
+        renderContent({ isOpen, content })
+      ) : (
+        <AccordionContent style={contentContainerStyle}>{content}</AccordionContent>
+      )}
+    </Collapse>
+  </AccordionItemContainer>
+);
+
+export interface AccordionProps {
+  items: AccordionItemProps[];
+  solo?: boolean;
+  contentContainerStyle?: React.CSSProperties;
+}
+
+export interface AccordionStaticMembers {
+  Item: typeof AccordionItem;
+}
+
+const Accordion: React.FC<AccordionProps> & AccordionStaticMembers = ({
+  items,
+  solo,
+  contentContainerStyle,
+  children,
+}) => {
+  const [openList, setOpenList] = useState<number[]>([]);
+
+  const handleItemToggle = useCallback(
+    (idx: number) => {
+      if (openList.indexOf(idx) >= 0) setOpenList(openList.filter(i => i !== idx));
+      else setOpenList(solo ? [idx] : [...openList, idx]);
+    },
+    [solo, openList]
+  );
+
+  return (
+    <AccordionContainer>
+      {children ||
+        items.map((item, i) => (
+          <AccordionItem
+            key={item.title}
+            contentContainerStyle={contentContainerStyle}
+            {...item}
+            isOpen={openList.indexOf(i) >= 0}
+            onToggle={() => handleItemToggle(i)}
+          />
+        ))}
+    </AccordionContainer>
+  );
+};
+
+Accordion.Item = AccordionItem;
+
+export default Accordion;

src/Alert/Alert.stories.js → src/Alert/Alert.stories.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import Alert from './Alert';
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { text } from '@storybook/addon-knobs';
+import Alert from './Alert';
 
 export default {
   title: 'Components|Alert',
@@ -17,7 +18,7 @@ export const Basic = () => {
       </Alert>
       <Alert variant="info">This is a generic informational message.</Alert>
       <Alert variant="danger">
-        <strong>Oops!</strong> Something wen't wrong.
+        <strong>Oops!</strong> Something went wrong.
       </Alert>
       <Alert variant="warning">
         <strong>Caution!</strong> There be dragons.

src/Alert/Alert.js → src/Alert/Alert.tsx

@@ -1,11 +1,14 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { css } from 'styled-components';
 import { space } from 'styled-system';
-import propTypes from '@styled-system/prop-types';
 import { getComponentVariant, createComponent } from '../utils';
 
-const StyledAlert = createComponent({
+export interface AlertProps {
+  variant?: string;
+  children?: string | React.ReactNode;
+}
+
+const StyledAlert = createComponent<AlertProps>({
   name: 'Alert',
   style: ({ variant, theme }) => {
     const variantStyles = getComponentVariant(theme, 'Alert', variant);
@@ -24,21 +27,14 @@ const StyledAlert = createComponent({
       }
 
       ${variantStyles}
-      ${space};
+      ${space}
     `;
   },
 });
 
 /** Alerts are typically used to display meaningful copy to users - typically notifying the user of an important message. */
-const Alert = React.forwardRef((props, ref) => <StyledAlert {...props} ref={ref} />);
-
-Alert.propTypes = {
-  variant: PropTypes.string,
-  ...propTypes.space,
-};
-
-Alert.defaultProps = {
-  variant: 'primary',
-};
+const Alert = React.forwardRef<HTMLDivElement, AlertProps & React.ComponentProps<'div'>>(
+  ({ variant = 'primary', ...props }, ref) => <StyledAlert variant={variant} {...props} ref={ref} />
+);
 
 export default Alert;