feat: Enforce types

.gitignore

@@ -18,6 +18,7 @@
 # misc
 .DS_Store
 *.pem
+.yarn
 
 # debug
 npm-debug.log*

.storybook/preview.tsx

@@ -6,8 +6,8 @@ import * as NextImage from 'next/image';
 import { RouterContext } from 'next/dist/shared/lib/router-context';
 
 import { makeStore } from '../redux/store';
-import themeMUI from '../theme/muiTheme';
-import theme from '../theme';
+import { muiTheme } from '../theme/muiTheme';
+import { theme } from '../theme';
 
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
@@ -24,6 +24,7 @@ export const parameters = {
     query: {},
     push() {},
   },
+  layout: 'fullscreen',
 };
 
 const store = makeStore();
@@ -32,8 +33,12 @@ export const decorators = [
   (Story) => (
     <Provider store={store}>
       <ThemeProvider theme={theme}>
-        <ThemeProviderMUI theme={themeMUI}>
-          <Story />
+        <ThemeProviderMUI theme={muiTheme}>
+          <div
+            style={{ display: 'flex', flexDirection: 'column', height: '100vh', width: '100vw' }}
+          >
+            <Story />
+          </div>
         </ThemeProviderMUI>
       </ThemeProvider>
     </Provider>

.vscode/settings.json

@@ -4,8 +4,8 @@
     "source.fixAll.eslint": true
   },
   "workbench.colorCustomizations": {
-    "activityBar.background": "#3C356B",
-    "titleBar.activeBackground": "#3C356B",
+    "activityBar.background": "#299c9c",
+    "titleBar.activeBackground": "#299c9c",
     "titleBar.activeForeground": "#FFFFFF"
   },
   "[json]": {
@@ -17,4 +17,4 @@
   "[typescriptreact]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   }
-}
+}

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

api/index.ts

@@ -0,0 +1,5 @@
+import axios from 'axios';
+
+export const githubApi = axios.create({
+  baseURL: 'https://api.github.com',
+});

components/ClusterRunningMessage/ClusterRunningMessage.stories.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Story } from '@storybook/react';
+
+import ClusterRunningMessage from './ClusterRunningMessage';
+
+export default {
+  title: 'Components/ClusterRunningMessage',
+  component: ClusterRunningMessage,
+};
+
+const DefaultTemplate: Story = () => <ClusterRunningMessage />;
+
+export const Default = DefaultTemplate.bind({});

containers/clusterForms/local/ready/localReady.styled.ts → components/ClusterRunningMessage/ClusterRunningMessage.styled.tsx

@@ -1,11 +1,11 @@
-import NextLink from 'next/link';
 import styled from 'styled-components';
+import NextLink from 'next/link';
 
-export const Container = styled.div`
-  align-items: center;
+import Column from '../column/Column';
+
+export const Container = styled(Column)`
   color: ${({ theme }) => theme.colors.volcanicSand};
-  display: flex;
-  flex-direction: column;
+  align-items: center;
   width: 100%;
 `;
 
@@ -21,4 +21,8 @@ export const Link = styled(NextLink)`
 export const Title = styled.div`
   margin: 40px 0 16px 0;
   width: 382px;
+
+  strong {
+    font-size: 16px;
+  }
 `;

components/ClusterRunningMessage/ClusterRunningMessage.tsx

@@ -0,0 +1,29 @@
+import React, { FC } from 'react';
+import Image from 'next/image';
+import styled from 'styled-components';
+
+import Typography from '../typography';
+import boxImgSrc from '../../public/static/box.svg';
+
+import { Container, Description, Link, Title } from './ClusterRunningMessage.styled';
+
+const boxImageSrc = process.env.STORYBOOK_MODE ? boxImgSrc : '/static/box.svg';
+
+const ClusterRunningMessage: FC = (props) => (
+  <Container {...props}>
+    <Image alt="box" src={boxImageSrc} width={170} height={160} />
+    <Title>
+      <Typography variant="body1">
+        Cluster <strong>{'<cluster identifier>'}</strong> is now up and running.
+      </Typography>
+    </Title>
+    <Description>
+      <Typography variant="body2" align="center">
+        You’ll now be able to add and manage clusters, in addition to adding team members.{' '}
+        <Link href="#">Here’s how</Link>
+      </Typography>
+    </Description>
+  </Container>
+);
+
+export default styled(ClusterRunningMessage)``;

components/Column/Column.tsx

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+import Row from '../row/Row';
+
+export default styled(Row)`
+  flex-direction: column;
+`;

components/FormContainer/FormContainer.stories.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Story } from '@storybook/react';
+
+import FormContainer from './FormContainer';
+
+export default {
+  title: 'Components/FormContainer',
+  component: FormContainer,
+};
+
+const DefaultTemplate: Story = () => <FormContainer style={{ margin: 50 }} />;
+
+export const Default = DefaultTemplate.bind({});

components/FormContainer/FormContainer.tsx

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+import { Box } from '@mui/material';
+
+export default styled(Box)`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: fit-content;
+  padding: 30px 20px;
+  background-color: ${({ theme }) => theme.colors.white};
+  border-radius: 8px;
+  box-shadow: 0px 1px 1px rgba(100, 116, 139, 0.06), 0px 1px 2px rgba(100, 116, 139, 0.1);
+`;

components/InstallationButtons/InstallationButtons.stories.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Story } from '@storybook/react';
+
+import { noop } from '../../utils/noop';
+
+import InstallationButtons from './InstallationButtons';
+
+export default {
+  title: 'Components/InstallationButtons',
+  component: InstallationButtons,
+  argTypes: {
+    showBackButton: {
+      defaultValue: true,
+      control: { type: 'boolean' },
+    },
+  },
+};
+
+const DefaultTemplate: Story = (args) => {
+  return <InstallationButtons onNextButtonClick={noop} onBackButtonClick={noop} {...args} />;
+};
+
+export const Default = DefaultTemplate.bind({});

components/InstallationButtons/InstallationButtons.styled.tsx

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+
+import Row from '../row/Row';
+
+export const Container = styled(Row)`
+  width: 100%;
+  align-items: center;
+  background-color: ${({ theme }) => theme.colors.white};
+  gap: 16px;
+  justify-content: flex-end;
+  height: 64px;
+  border-top: ${({ theme }) => `1px solid ${theme.colors.lightGrey}`};
+
+  & button {
+    text-transform: capitalize;
+  }
+
+  #next {
+    margin-right: 80px;
+  }
+`;

components/InstallationButtons/InstallationButtons.tsx

@@ -0,0 +1,43 @@
+import React, { FC } from 'react';
+import styled from 'styled-components';
+
+import Button from '../button/Button';
+
+import { Container } from './InstallationButtons.styled';
+
+export interface InstallationButtonsProps {
+  showBackButton?: boolean;
+  onBackButtonClick?: () => void;
+  onNextButtonClick?: () => void;
+  nextButtonText?: string;
+  nextButtonDisabled?: boolean;
+}
+
+const InstallationButtons: FC<InstallationButtonsProps> = ({
+  showBackButton,
+  onBackButtonClick,
+  onNextButtonClick,
+  nextButtonText = 'Next',
+  nextButtonDisabled,
+  ...rest
+}) => (
+  <Container {...rest}>
+    {showBackButton && (
+      <Button variant="outlined" color="primary" onClick={onBackButtonClick}>
+        Back
+      </Button>
+    )}
+
+    <Button
+      variant="contained"
+      color="primary"
+      onClick={onNextButtonClick}
+      id="next"
+      disabled={nextButtonDisabled}
+    >
+      {nextButtonText}
+    </Button>
+  </Container>
+);
+
+export default styled(InstallationButtons)``;

components/InstallationCard/InstallationCard.stories.tsx

@@ -0,0 +1,40 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { Story } from '@storybook/react';
+
+import { INSTALLATION_CARD_OPTIONS } from '../../constants';
+import Column from '../column/Column';
+import { InstallationType } from '../../types/redux';
+
+import InstallationCard from './InstallationCard';
+
+export default {
+  title: 'Components/InstallationCard',
+  component: InstallationCard,
+};
+
+const DefaultTemplate: Story = () => {
+  const [activeInstallType, setActiveInstallType] = useState<InstallationType>(
+    InstallationType.LOCAL,
+  );
+
+  return (
+    <Container>
+      {Object.entries(INSTALLATION_CARD_OPTIONS).map(([optionInstallType, info]) => (
+        <InstallationCard
+          key={optionInstallType}
+          info={info}
+          onClick={() => setActiveInstallType(optionInstallType as InstallationType)}
+          active={activeInstallType === optionInstallType}
+        />
+      ))}
+    </Container>
+  );
+};
+
+const Container = styled(Column)`
+  align-items: center;
+  gap: 20px;
+`;
+
+export const Default = DefaultTemplate.bind({});

components/InstallationCard/InstallationCard.styled.tsx

@@ -0,0 +1,40 @@
+import styled, { css } from 'styled-components';
+
+import Column from '../column/Column';
+import { PASTEL_LIGHT_BLUE } from '../../constants/colors';
+
+export const Card = styled(Column)<{ isActive: boolean }>`
+  background-color: ${({ theme }) => theme.colors.white};
+  box-sizing: border-box;
+  cursor: pointer;
+
+  align-items: flex-start;
+  padding: 20px;
+  gap: 10px;
+
+  width: 500px;
+  height: 116px;
+
+  border: 1px solid ${PASTEL_LIGHT_BLUE};
+  border-radius: 12px;
+
+  ${({ theme, isActive }) =>
+    isActive &&
+    css`
+      border: 2px solid ${theme.colors.primary};
+    `}
+`;
+
+export const CardDescription = styled.div<{ isActive?: boolean }>`
+  color: ${({ theme }) => theme.colors.saltboxBlue};
+  max-width: 394px;
+  letter-spacing: 0 !important;
+
+  ${({ isActive, theme }) =>
+    isActive &&
+    css`
+      color: ${theme.colors.volcanicSand};
+    `}
+`;
+
+export const CardTitle = styled.div``;