Add type defs to Button component

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

package.json

@@ -17,6 +17,7 @@
     "@types/node": "^12.0.0",
     "@types/react": "^16.9.53",
     "@types/react-dom": "^16.9.8",
+    "@types/react-router-dom": "^5.1.6",
     "classnames": "^2.2.6",
     "csvtojson": "^2.0.10",
     "date-fns": "^2.16.1",
@@ -25,8 +26,8 @@
     "react-dom": "^17.0.1",
     "react-dropzone": "^11.2.4",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "4.0.1",
-    "typescript": "^4.0.3",
+    "react-scripts": "^4.0.1",
+    "typescript": "^4.1.2",
     "web-vitals": "^0.2.4"
   },
   "scripts": {

src/components/button.test.tsx

@@ -0,0 +1,63 @@
+import { render } from '@testing-library/react';
+import { debug } from 'console';
+import { MemoryRouter as Router } from 'react-router-dom';
+import { Button } from './button';
+
+const LABELS = { children: 'hello' };
+
+test('renders <Button /> with required props', () => {
+  const { getByText } = render(<Button>{LABELS.children}</Button>);
+  expect(getByText(LABELS.children)).toBeInTheDocument();
+});
+
+test('renders as custom element with `as` prop', () => {
+  const element = 'span';
+  const { getByText } = render(<Button as={element}>{LABELS.children}</Button>);
+  expect(getByText(LABELS.children).nodeName).toEqual(element.toUpperCase());
+});
+
+test('renders as Link with `to` prop', () => {
+  const element = 'a';
+  const { getByText } = render(
+    <Router>
+      <Button to="/">{LABELS.children}</Button>
+    </Router>
+  );
+  expect(getByText(LABELS.children).nodeName).toEqual(element.toUpperCase());
+});
+
+test('renders as anchor with `href` prop', () => {
+  const element = 'a';
+  const { getByText } = render(
+    <Router>
+      <Button href="/">{LABELS.children}</Button>
+    </Router>
+  );
+  expect(getByText(LABELS.children).nodeName).toEqual(element.toUpperCase());
+});
+
+describe('<Button.Group />', () => {
+  test('renders with required props', () => {
+    const { getByText } = render(
+      <Button.Group>
+        <Button>1</Button>
+        <Button>{LABELS.children}</Button>
+        <Button>3</Button>
+      </Button.Group>
+    );
+    expect(getByText(LABELS.children)).toBeInTheDocument();
+  });
+
+  // skipped, i don't know why this throws for a jest worker error :shrug:
+  test('renders custom element with `as` prop', () => {
+    const element = 'span';
+    const { getByRole } = render(
+      <Button.Group as={element}>
+        <Button href="/hello">{LABELS.children}</Button>
+        <Button href="/hello">{LABELS.children}</Button>
+        <Button href="/hello">{LABELS.children}</Button>
+      </Button.Group>
+    );
+    expect(getByRole('group').nodeName).toEqual(element.toUpperCase());
+  });
+});

src/components/button.tsx

@@ -0,0 +1,61 @@
+import cx from 'classnames';
+import { Link } from 'react-router-dom';
+import styles from './button.module.scss';
+
+interface ButtonProps {
+  as?: any;
+  href?: string;
+  to?: string;
+  className?: string;
+  appearance?: 'primary' | 'secondary' | 'ghost';
+  size?: 'small' | 'large';
+  theme?: 'light' | 'dark';
+  [props: string]: any;
+}
+
+export function Button({
+  href,
+  to,
+  className,
+  size,
+  as = 'button',
+  appearance = 'primary',
+  theme = 'light',
+  ...props
+}: ButtonProps) {
+  let Element = as;
+  if (to) Element = Link;
+  if (href) Element = 'a';
+  return (
+    <Element
+      {...props}
+      to={to}
+      href={href}
+      {...(Element === 'button' ? { type: 'button' } : {})}
+      className={cx(
+        styles.button,
+        {
+          [styles[`button--${theme}`]]: theme,
+          [styles[`button--${theme}--${appearance}`]]: theme && appearance,
+          [styles[`button--${size}`]]: !!size,
+          'is-active': !!props['aria-pressed'],
+        },
+        className
+      )}
+    />
+  );
+}
+
+interface ButtonGroupProps {
+  as?: any;
+  className?: string;
+  [props: string]: any;
+}
+
+function Group({ as: Element = 'div', className, ...props }: ButtonGroupProps) {
+  return (
+    <Element role="group" {...props} className={cx(styles.group, className)} />
+  );
+}
+
+Button.Group = Group;

yarn.lock

@@ -1953,6 +1953,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/history@*":
+  version "4.7.8"
+  resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.8.tgz#49348387983075705fe8f4e02fb67f7daaec4934"
+  integrity sha512-S78QIYirQcUoo6UJZx9CSP0O2ix9IaeAXwQi26Rhr/+mg7qqPy8TzaxHSUut7eGjL8WmLccT7/MXf304WjqHcA==
+
 "@types/html-minifier-terser@^5.0.0":
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz#3c9ee980f1a10d6021ae6632ca3e79ca2ec4fb50"
@@ -2047,6 +2052,31 @@
   dependencies:
     "@types/react" "^16"
 
+"@types/react-router-dom@^5.1.6":
+  version "5.1.6"
+  resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.1.6.tgz#07b14e7ab1893a837c8565634960dc398564b1fb"
+  integrity sha512-gjrxYqxz37zWEdMVvQtWPFMFj1dRDb4TGOcgyOfSXTrEXdF92L00WE3C471O3TV/RF1oskcStkXsOU0Ete4s/g==
+  dependencies:
+    "@types/history" "*"
+    "@types/react" "*"
+    "@types/react-router" "*"
+
+"@types/react-router@*":
+  version "5.1.8"
+  resolved "https://registry.yarnpkg.com/@types/react-router/-/react-router-5.1.8.tgz#4614e5ba7559657438e17766bb95ef6ed6acc3fa"
+  integrity sha512-HzOyJb+wFmyEhyfp4D4NYrumi+LQgQL/68HvJO+q6XtuHSDvw6Aqov7sCAhjbNq3bUPgPqbdvjXC5HeB2oEAPg==
+  dependencies:
+    "@types/history" "*"
+    "@types/react" "*"
+
+"@types/react@*":
+  version "17.0.0"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.0.tgz#5af3eb7fad2807092f0046a1302b7823e27919b8"
+  integrity sha512-aj/L7RIMsRlWML3YB6KZiXB3fV2t41+5RBGYF8z+tAKU43Px8C3cYUZsDvf1/+Bm4FK21QWBrDutu8ZJ/70qOw==
+  dependencies:
+    "@types/prop-types" "*"
+    csstype "^3.0.2"
+
 "@types/react@^16", "@types/react@^16.9.53":
   version "16.14.2"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.14.2.tgz#85dcc0947d0645349923c04ccef6018a1ab7538c"
@@ -10215,7 +10245,7 @@ react-router@5.2.0:
     tiny-invariant "^1.0.2"
     tiny-warning "^1.0.0"
 
-react-scripts@4.0.1:
+react-scripts@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-4.0.1.tgz#34974c0f4cfdf1655906c95df6a04d80db8b88f0"
   integrity sha512-NnniMSC/wjwhcJAyPJCWtxx6CWONqgvGgV9+QXj1bwoW/JI++YF1eEf3Upf/mQ9KmP57IBdjzWs1XvnPq7qMTQ==
@@ -12150,7 +12180,7 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
-typescript@^4.0.3:
+typescript@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.1.2.tgz#6369ef22516fe5e10304aae5a5c4862db55380e9"
   integrity sha512-thGloWsGH3SOxv1SoY7QojKi0tc+8FnOmiarEGMbd/lar7QOEd3hvlx3Fp5y6FlDUGl9L+pd4n2e+oToGMmhRQ==