refactor: remove components used in demo without MUI

striker-ui/components/Header.tsx

@@ -2,7 +2,7 @@ import AppBar from '@material-ui/core/AppBar';
 import { makeStyles, createStyles } from '@material-ui/core/styles';
 import { Grid } from '@material-ui/core';
 import Image from 'next/image';
-import { ICONS, ICON_SIZE } from '../../lib/consts/ICONS';
+import { ICONS, ICON_SIZE } from '../lib/consts/ICONS';
 
 const useStyles = makeStyles((theme) =>
   createStyles({

striker-ui/components/atoms/Button.tsx

@@ -1,106 +0,0 @@
-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 { ButtonImageProps } from '../../types/ButtonImageProps';
-import { ButtonProps } from '../../types/ButtonProps';
-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,
-  onClick,
-}) => {
-  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'} {...{ onClick }}>
-        {imageElement}
-        {separatorElement}
-        {labelElement}
-      </StyledButton>
-    );
-  }
-
-  return resultElement;
-};
-
-export default Button;

striker-ui/components/atoms/Label.tsx

@@ -1,24 +0,0 @@
-import { FunctionComponent } from 'react';
-import styled from 'styled-components';
-
-import DEFAULT_THEME from '../../lib/consts/DEFAULT_THEME';
-
-const StyledLabel = styled.h2`
-  padding: 0;
-  margin: 0;
-
-  color: ${(props) => props.theme.colors.primary};
-
-  font-size: 1em;
-  font-weight: normal;
-`;
-
-StyledLabel.defaultProps = {
-  theme: DEFAULT_THEME,
-};
-
-const Label: FunctionComponent<LabelProps> = ({ text }) => {
-  return <StyledLabel>{text}</StyledLabel>;
-};
-
-export default Label;

striker-ui/components/atoms/SimpleLink.tsx

@@ -1,20 +0,0 @@
-import { FunctionComponent } from 'react';
-import Link from 'next/link';
-
-import { SimpleLinkProps } from '../../types/SimpleLinkProps';
-
-const SimpleLink: FunctionComponent<SimpleLinkProps> = ({
-  linkProps,
-  anchorProps = {},
-  children,
-}) => {
-  return (
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    <Link {...{ passRef: true, ...linkProps }}>
-      {/* eslint-disable-next-line react/jsx-props-no-spreading */}
-      <a {...anchorProps}>{children}</a>
-    </Link>
-  );
-};
-
-export default SimpleLink;

striker-ui/components/atoms/ToggleSwitch.tsx

@@ -1,86 +0,0 @@
-import { FunctionComponent, useEffect, useState } from 'react';
-import styled from 'styled-components';
-
-import DEFAULT_THEME from '../../lib/consts/DEFAULT_THEME';
-
-import { ToggleSwitchProps } from '../../types/ToggleSwitchProps';
-
-const StyledCheckbox = styled.input`
-  display: none;
-`;
-
-const StyledToggleSwitchBase = styled.div<ToggleSwitchProps>`
-  display: flex;
-
-  align-items: center;
-
-  width: 3em;
-  height: 1.5em;
-
-  transition-property: background-color, border-color;
-  transition-duration: 1s;
-
-  background-color: ${(props) =>
-    props.checked ? '#d02724' : props.theme.colors.tertiary};
-
-  border-style: solid;
-  border-width: 0.2em;
-
-  border-color: ${(props) =>
-    props.checked ? '#d02724' : props.theme.colors.tertiary};
-
-  > * {
-    flex-basis: 45%;
-    height: 100%;
-  }
-`;
-
-const StyledToggleSwitchLever = styled.div<ToggleSwitchProps>`
-  background-color: ${(props) => props.theme.colors.primary};
-
-  transition: margin-left 1s;
-
-  margin-left: ${(props) => (props.checked ? '55%' : '0')};
-`;
-
-StyledCheckbox.defaultProps = {
-  theme: DEFAULT_THEME,
-};
-
-StyledToggleSwitchBase.defaultProps = {
-  theme: DEFAULT_THEME,
-};
-
-StyledToggleSwitchLever.defaultProps = {
-  theme: DEFAULT_THEME,
-};
-
-const ToggleSwitch: FunctionComponent<ToggleSwitchProps> = ({
-  checked = false,
-  disabled,
-}) => {
-  const [on, setOn] = useState<boolean>(checked);
-
-  // Update the toggle switch when supplied props change
-  useEffect(() => {
-    setOn(checked);
-  }, [checked]);
-
-  return (
-    <StyledToggleSwitchBase
-      {...{
-        onClick: () => {
-          setOn(!on);
-        },
-        checked: on,
-      }}
-    >
-      <StyledToggleSwitchLever {...{ checked: on }} />
-      <StyledCheckbox
-        {...{ checked: on, disabled, readOnly: true, type: 'checkbox' }}
-      />
-    </StyledToggleSwitchBase>
-  );
-};
-
-export default ToggleSwitch;

striker-ui/components/molecules/List.tsx

@@ -1,64 +0,0 @@
-import { FunctionComponent } from 'react';
-import styled from 'styled-components';
-
-import DEFAULT_THEME from '../../lib/consts/DEFAULT_THEME';
-import Label from '../atoms/Label';
-
-const StyledList = styled.div<ListProps>`
-  display: flex;
-
-  flex-direction: ${(props) => (props.isAlignHorizontal ? 'row' : 'column')};
-
-  border-style: solid;
-  border-color: ${(props) => props.theme.colors.tertiary};
-
-  border-width: ${(props) =>
-    props.isAlignHorizontal ? '1px 1px 1px 0' : '0 1px 1px 1px'};
-
-  > * {
-    display: flex;
-
-    align-items: center;
-
-    color: ${(props) => props.theme.colors.tertiary};
-
-    border-style: solid;
-    border-color: ${(props) => props.theme.colors.tertiary};
-
-    border-width: ${(props) =>
-      props.isAlignHorizontal ? '0 0 0 1px' : '1px 0 0 0'};
-
-    padding: 1em;
-  }
-`;
-
-const StyledListContainer = styled.div`
-  > :first-child {
-    margin-bottom: 1em;
-
-    padding-left: 0;
-  }
-`;
-
-StyledList.defaultProps = {
-  theme: DEFAULT_THEME,
-};
-
-StyledListContainer.defaultProps = {
-  theme: DEFAULT_THEME,
-};
-
-const List: FunctionComponent<ListProps> = ({
-  isAlignHorizontal,
-  labelText,
-  children,
-}) => {
-  return (
-    <StyledListContainer>
-      {labelText !== undefined && <Label text={labelText} />}
-      <StyledList {...{ isAlignHorizontal }}>{children}</StyledList>
-    </StyledListContainer>
-  );
-};
-
-export default List;

striker-ui/components/organisms/PageCenterContainer.tsx

@@ -1,22 +0,0 @@
-import styled from 'styled-components';
-
-import DEFAULT_THEME from '../../lib/consts/DEFAULT_THEME';
-
-const PageCenterContainer = styled.div`
-  width: 50%;
-
-  padding-top: 1em;
-
-  margin-left: auto;
-  margin-right: auto;
-
-  > :not(:first-child) {
-    margin-top: 1em;
-  }
-`;
-
-PageCenterContainer.defaultProps = {
-  theme: DEFAULT_THEME,
-};
-
-export default PageCenterContainer;

striker-ui/components/organisms/PageContainer.tsx

@@ -1,16 +0,0 @@
-import styled from 'styled-components';
-
-import DEFAULT_THEME from '../../lib/consts/DEFAULT_THEME';
-
-const PageContainer = styled.div`
-  min-height: 100vh;
-  width: 100vw;
-
-  background-color: ${(props) => props.theme.colors.secondary};
-`;
-
-PageContainer.defaultProps = {
-  theme: DEFAULT_THEME,
-};
-
-export default PageContainer;