Revert "chore: Convert Components A-D to TS (WIP) (#138)"

This reverts commit 62d4420.

package.json

@@ -76,10 +76,8 @@
     "@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.js

@@ -0,0 +1,138 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+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 AccordionItemProps = {
+  title: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
+  content: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
+  renderHeader: PropTypes.func,
+  renderContent: PropTypes.func,
+};
+
+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({
+  name: 'AccordionItemIcon',
+  as: Icon,
+  style: ({ isOpen }) => css`
+    transition: 175ms transform;
+    transform: rotate(${isOpen ? 90 : 0}deg);
+  `,
+});
+
+const AccordionContent = createComponent({
+  name: 'AccordionItemContent',
+});
+
+const AccordionItem = ({ 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>
+);
+
+AccordionItem.propTypes = AccordionItemProps;
+
+export default class Accordion extends Component {
+  static propTypes = {
+    /**
+     * An array of AccordionItems
+     */
+    items: PropTypes.arrayOf(PropTypes.shape(AccordionItemProps)).isRequired,
+
+    /**
+     * Only one accordion cell open at a time
+     */
+    solo: PropTypes.bool,
+
+    /**
+     * Style passed to content container box
+     */
+    contentContainerStyle: PropTypes.shape(),
+  };
+
+  static Item = AccordionItem;
+
+  state = {
+    openList: [],
+  };
+
+  handleItemToggle = idx => {
+    const { solo } = this.props;
+    this.setState(({ openList }) => {
+      if (openList.indexOf(idx) >= 0) {
+        return { openList: openList.filter(i => i !== idx) };
+      }
+
+      return {
+        openList: solo ? [idx] : [...openList, idx],
+      };
+    });
+  };
+
+  render() {
+    const { items, children, contentContainerStyle } = this.props;
+    const { openList } = this.state;
+
+    return (
+      <AccordionContainer>
+        {children ||
+          items.map((item, i) => (
+            <AccordionItem
+              key={item.title}
+              contentContainerStyle={contentContainerStyle}
+              isOpen={openList.indexOf(i) >= 0}
+              {...item}
+              onToggle={() => this.handleItemToggle(i)}
+            />
+          ))}
+      </AccordionContainer>
+    );
+  }
+}

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

@@ -1,14 +1,11 @@
 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';
 
-export interface AlertProps {
-  variant?: string;
-  children?: string | React.ReactNode;
-}
-
-const StyledAlert = createComponent<AlertProps>({
+const StyledAlert = createComponent({
   name: 'Alert',
   style: ({ variant, theme }) => {
     const variantStyles = getComponentVariant(theme, 'Alert', variant);
@@ -27,14 +24,21 @@ const StyledAlert = createComponent<AlertProps>({
       }
 
       ${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<HTMLDivElement, AlertProps & React.ComponentProps<'div'>>(
-  ({ variant = 'primary', ...props }, ref) => <StyledAlert variant={variant} {...props} ref={ref} />
-);
+const Alert = React.forwardRef((props, ref) => <StyledAlert {...props} ref={ref} />);
+
+Alert.propTypes = {
+  variant: PropTypes.string,
+  ...propTypes.space,
+};
+
+Alert.defaultProps = {
+  variant: 'primary',
+};
 
 export default Alert;

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

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