chore: convert components to ts

.gitignore

@@ -9,3 +9,4 @@ lib
 coverage
 .yalc
 yalc.lock
+.env

jest.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-  setupFilesAfterEnv: ['<rootDir>/test/setup.js'],
+  setupFilesAfterEnv: ['<rootDir>/src/test/setup.ts'],
   moduleFileExtensions: ['ts', 'tsx', 'js'],
   testMatch: ['<rootDir>/src/**/*.spec.(ts|js|tsx|jsx)'],
   moduleNameMapper: {

package.json

@@ -3,7 +3,7 @@
   "description": "React component library built on top of styled-components and styled-system",
   "version": "5.3.9",
   "main": "lib/index.js",
-  "types": "lib/main.d.ts",
+  "types": "lib/index.d.ts",
   "files": [
     "lib"
   ],
@@ -17,7 +17,7 @@
   "scripts": {
     "clean": "rimraf lib",
     "watch": "yarn rollup --watch",
-    "build": "npm run clean && babel src --out-dir lib --extensions '.ts,.tsx,.js,.jsx'",
+    "build": "npm run clean && tsc --noEmit false --project tsconfig.build.json",
     "docs": "start-storybook -p 1234",
     "dev": "start-storybook -p 1234",
     "docs:build": "rimraf dist && build-storybook -o dist",
@@ -26,13 +26,15 @@
     "preview": "nodemon -w src -x 'yalc publish --push --changed'",
     "rollup": "rollup -c",
     "test": "jest",
+    "types": "tsc -w",
     "lint": "eslint src",
     "release": "npm run build && standard-version",
     "chromatic": "chromatic --exit-zero-on-changes --auto-accept-changes main"
   },
   "dependencies": {
     "@styled-system/prop-types": "^5.1.2",
     "@testing-library/react": "^9.1.3",
+    "@types/react-transition-group": "^4.4.0",
     "chromatic": "^4.0.3",
     "cleave.js": "~1.6.0",
     "libphonenumber-js": "^1.7.52",
@@ -74,7 +76,11 @@
     "@storybook/react": "5.3.18",
     "@types/jest": "^25.2.2",
     "@types/lodash": "^4.14.150",
+    "@types/react-portal": "^4.0.2",
+    "@types/react-transition-group": "^4.4.0",
     "@types/styled-components": "^5.1.0",
+    "@types/styled-system": "^5.1.10",
+    "@types/yup": "^0.29.4",
     "babel-jest": "^24.1.0",
     "babel-loader": "^8.0.6",
     "babel-preset-react-app": "^9.1.2",

src/@types/react-animations/index.d.ts

@@ -0,0 +1 @@
+declare module 'react-animations' {}

src/@types/styled.d.ts

@@ -1,25 +1,8 @@
 // import original module declarations
 import 'styled-components';
-import { ThemeColors, ThemeBreakpoints, ThemeTypography, ThemeSizes, ThemeVariants } from 'src/types';
+import { Theme } from 'types';
 
 // and extend them!
 declare module 'styled-components' {
-  export interface DefaultTheme extends Theme {
-    classPrefix: string;
-    space: number[];
-    gridWidth: number;
-    gridGutter: number;
-    gridColumns: number;
-    radii: number[];
-    radius: number;
-    shadow: {
-      soft: string;
-      hard: string;
-    };
-    colors: ThemeColors;
-    breakpoints: ThemeBreakpoints;
-    typography: ThemeTypography;
-    sizes: ThemeSizes;
-    variants: ThemeVariants;
-  }
+  export interface DefaultTheme extends Theme {}
 }

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.