From baace23719a150552782da86b75ba97d0f5b8cce Mon Sep 17 00:00:00 2001
From: Tsu-ba-me <ynho.li.aa.e@gmail.com>
Date: Fri, 19 Feb 2021 00:18:44 -0500
Subject: [PATCH] feat(striker-ui): add atom Button

---
 striker-ui/components/atoms/Button.tsx | 103 +++++++++++++++++++++++++
 striker-ui/types/ButtonImageProps.d.ts |   4 +
 striker-ui/types/ButtonProps.d.ts      |  10 +++
 3 files changed, 117 insertions(+)
 create mode 100644 striker-ui/components/atoms/Button.tsx
 create mode 100644 striker-ui/types/ButtonImageProps.d.ts
 create mode 100644 striker-ui/types/ButtonProps.d.ts

diff --git a/striker-ui/components/atoms/Button.tsx b/striker-ui/components/atoms/Button.tsx
new file mode 100644
index 00000000..74e7e8ac
--- /dev/null
+++ b/striker-ui/components/atoms/Button.tsx
@@ -0,0 +1,103 @@
+import { FunctionComponent } from 'react';
+import Image from 'next/image';
+import Link from 'next/link';
+import styled from 'styled-components';
+
+import DEFAULT_THEME from '../../lib/consts/DEFAULT_THEME';
+
+import Label from './Label';
+
+const DEFAULT_BUTTON_IMAGE_SIZE = 30;
+
+const StyledButton = styled.button`
+  display: flex;
+
+  flex-direction: row;
+  flex-wrap: nowrap;
+`;
+
+const StyledSeparator = styled.div`
+  margin-right: 0.5em;
+`;
+
+StyledButton.defaultProps = {
+  theme: DEFAULT_THEME,
+};
+
+const getButtonImageElement: (
+  imageProps?: ButtonImageProps,
+) => JSX.Element | undefined = (imageProps) => {
+  let imageElement: JSX.Element | undefined;
+
+  if (imageProps) {
+    const {
+      src,
+      width = DEFAULT_BUTTON_IMAGE_SIZE,
+      height = DEFAULT_BUTTON_IMAGE_SIZE,
+    } = imageProps;
+
+    imageElement = <Image {...{ src, width, height }} />;
+  }
+
+  return imageElement;
+};
+
+const getButtonLabelElement: (
+  labelProps?: LabelProps,
+) => JSX.Element | undefined = (labelProps) => {
+  let labelElement: JSX.Element | undefined;
+
+  if (labelProps) {
+    const { text } = labelProps;
+
+    labelElement = <Label {...{ text }} />;
+  }
+
+  return labelElement;
+};
+
+const Button: FunctionComponent<ButtonProps> = ({
+  imageProps,
+  isSubmit,
+  labelProps,
+  linkProps,
+}) => {
+  const imageElement: JSX.Element | undefined = getButtonImageElement(
+    imageProps,
+  );
+
+  const labelElement: JSX.Element | undefined = getButtonLabelElement(
+    labelProps,
+  );
+
+  const separatorElement: JSX.Element | undefined =
+    imageElement && labelElement ? <StyledSeparator /> : undefined;
+
+  let resultElement: JSX.Element;
+
+  if (linkProps) {
+    const { href, passHref = true } = linkProps;
+
+    resultElement = (
+      <Link {...{ href, passHref }}>
+        <StyledButton as="a">
+          {imageElement}
+          {separatorElement}
+          {labelElement}
+        </StyledButton>
+      </Link>
+    );
+  } else {
+    resultElement = (
+      <StyledButton type={isSubmit ? 'submit' : 'button'}>
+        {imageElement}
+        {separatorElement}
+        {labelElement}
+      </StyledButton>
+    );
+  }
+
+  return resultElement;
+};
+
+export default Button;
diff --git a/striker-ui/types/ButtonImageProps.d.ts b/striker-ui/types/ButtonImageProps.d.ts
new file mode 100644
index 00000000..9c484f74
--- /dev/null
+++ b/striker-ui/types/ButtonImageProps.d.ts
@@ -0,0 +1,4 @@
+import { ImageProps } from 'next/image';
+
+type ButtonImageProps = Omit<ImageProps, 'width' | 'height'> &
+  Partial<Pick<ImageProps, 'width' | 'height'>>;
diff --git a/striker-ui/types/ButtonProps.d.ts b/striker-ui/types/ButtonProps.d.ts
new file mode 100644
index 00000000..333b5f67
--- /dev/null
+++ b/striker-ui/types/ButtonProps.d.ts
@@ -0,0 +1,10 @@
+import { LinkProps } from 'next/link';
+
+import { ButtonImageProps } from './ButtonImageProps';
+
+type ButtonProps = {
+  imageProps?: ButtonImageProps;
+  isSubmit?: boolean;
+  labelProps?: LabelProps;
+  linkProps?: LinkProps;
+};