Refactor project structure

afterdusk · Apr 26, 2021 · 6f95559 · 6f95559
1 parent 72e843d
commit 6f95559
Show file tree

Hide file tree

Showing 9 changed files with 135 additions and 99 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,8 +1,10 @@
 import React, { FC, ReactElement } from "react";
 import styled from "styled-components";
-import Format from "./components/Format";
+import FormatConverter from "./converter/FormatConverter";
 import BigNumber from "bignumber.js";
 import * as Constants from "./Constants";
+import Header from "./ui/Header";
+import Footer from "./ui/Footer";
 
 const Wrapper = styled.div`
   width: 100%;
@@ -28,84 +30,24 @@ const Wrapper = styled.div`
   -moz-osx-font-smoothing: grayscale;
 `;
 
-const Header = styled.header``;
-
-const Title = styled.h1`
-  font-size: 2.4rem;
-`;
-
 const Divider = styled.hr`
   width: 100%;
 `;
 
-const Footer = styled.footer`
-  padding: 1rem;
-  font-size: 1rem;
-`;
-
-const VersionNumber = styled.div`
-  font-size: 1.4rem;
-`;
-
-const Text = styled.p``;
-
-const Link = styled.a`
-  color: ${Constants.ACCENT_COLOR};
-  text-decoration: none;
-`;
-
-type TextWithLinkProps = {
-  pre: string;
-  link: string;
-  post: string;
-  url: string;
-};
-
-const TextWithLink: FC<TextWithLinkProps> = (
-  props: TextWithLinkProps
-): ReactElement => (
-  <Text>
-    {props.pre}
-    <Link href={props.url}>{props.link}</Link>
-    {props.post}
-  </Text>
-);
-
 const App: FC = (): ReactElement => {
   // configure bignumber.js library
   BigNumber.set({ DECIMAL_PLACES: Constants.BIGNUMBER_DECIMAL_PLACES });
 
   return (
     <Wrapper>
-      <Header>
-        <Title>{Constants.APP_TITLE}</Title>
-      </Header>
-      <Format {...Constants.FP32} />
-      <Format {...Constants.FP64} />
-      <Format {...Constants.FP16} />
-      <Format {...Constants.BF16} />
-      <Format {...Constants.TF32} />
+      <Header />
+      <FormatConverter {...Constants.FP32} />
+      <FormatConverter {...Constants.FP64} />
+      <FormatConverter {...Constants.FP16} />
+      <FormatConverter {...Constants.BF16} />
+      <FormatConverter {...Constants.TF32} />
       <Divider />
-      <Footer>
-        <VersionNumber>
-          <TextWithLink
-            {...Constants.BUILD_SOURCE_TEXT}
-            url={Constants.BUILD_SOURCE_URL}
-          />
-        </VersionNumber>
-        <TextWithLink
-          {...Constants.UI_ACKNOWLEDGEMENT_TEXT}
-          url={Constants.UI_ACKNOWLEDGEMENT_URL}
-        />
-        <TextWithLink
-          {...Constants.BIGNUM_ACKNOWLEDGEMENT_TEXT}
-          url={Constants.BIGNUM_ACKNOWLEDGEMENT_URL}
-        />
-        <TextWithLink
-          {...Constants.ISSUES_CONTRIBUTION_TEXT}
-          url={Constants.ISSUES_CONTRIBUTION_URL}
-        />
-      </Footer>
+      <Footer />
     </Wrapper>
   );
 };

diff --git a/src/components/BitPanel.tsx → src/converter/BitPanel.tsx b/src/components/BitPanel.tsx → src/converter/BitPanel.tsx
@@ -1,7 +1,7 @@
 import React, { FC, ReactElement } from "react";
 import BitSegment from "./BitSegment";
 import styled from "styled-components";
-import * as Flop from "../Flop";
+import * as Flop from "./Flop";
 
 const Wrapper = styled.div`
   min-width: 36rem; // TODO: Handle this more elegantly
@@ -11,7 +11,7 @@ const Wrapper = styled.div`
   overflow-x: auto;
 `;
 
-type BitPanelProps = {
+interface BitPanelProps {
   name: string;
   sign: boolean[];
   exponent: boolean[];
@@ -23,7 +23,7 @@ type BitPanelProps = {
     exponent: boolean[],
     significand: boolean[]
   ) => void;
-};
+}
 
 const BitPanel: FC<BitPanelProps> = (props: BitPanelProps): ReactElement => {
   return (

diff --git a/src/components/BitSegment.tsx → src/converter/BitSegment.tsx b/src/components/BitSegment.tsx → src/converter/BitSegment.tsx
@@ -11,8 +11,9 @@ const Wrapper = styled.div`
 `;
 
 const Title = styled.h4`
-  font-size: 1.4rem;
   margin: 0;
+
+  font-size: 1.4rem;
 `;
 
 const Field = styled.p`
@@ -35,13 +36,13 @@ const BitField = styled.div`
 
 const BitCheckbox = styled.input``;
 
-type SegmentProps = {
+interface SegmentProps {
   name: string;
   value: string;
   decimal: string;
   bits: boolean[];
   updateBits: (bits: boolean[]) => void;
-};
+}
 
 const BitSegment: FC<SegmentProps> = (props: SegmentProps): ReactElement => (
   <Wrapper>

diff --git a/src/Flop.ts → src/converter/Flop.ts b/src/Flop.ts → src/converter/Flop.ts
@@ -1,5 +1,5 @@
 import BigNumber from "bignumber.js";
-import * as Constants from "./Constants";
+import * as Constants from "../Constants";
 
 /**
  * Represents a floating-point value.

diff --git a/src/components/Format.tsx → src/converter/FormatConverter.tsx b/src/components/Format.tsx → src/converter/FormatConverter.tsx
@@ -2,7 +2,7 @@ import React, { FC, ReactElement, useEffect, useState } from "react";
 import Panel from "./Panel";
 import BitPanel from "./BitPanel";
 import styled from "styled-components";
-import * as Flop from "../Flop";
+import * as Flop from "./Flop";
 
 const Wrapper = styled.div`
   max-width: 100%;
@@ -16,13 +16,15 @@ const Title = styled.h2`
   font-size: 1.8rem;
 `;
 
-type FormatProps = {
+interface FormatConverterProps {
   name: string;
   exponentWidth: number;
   significandWidth: number;
-};
+}
 
-const Format: FC<FormatProps> = (props: FormatProps): ReactElement => {
+const FormatConverter: FC<FormatConverterProps> = (
+  props: FormatConverterProps
+): ReactElement => {
   const [flop, setFlop] = useState<null | Flop.Flop>(null);
   const [flop754, setFlop754] = useState(
     Flop.defaultFlop754(props.exponentWidth)
@@ -60,6 +62,22 @@ const Format: FC<FormatProps> = (props: FormatProps): ReactElement => {
   return (
     <Wrapper>
       <Title>{props.name}</Title>
+      <BitPanel
+        {...props}
+        sign={sign}
+        exponent={exponent}
+        exponentValue={Flop.getExponent(flop754)}
+        significand={significand}
+        significandValue={
+          (Flop.isSubnormal(flop754) ? "(subnormal) " : "") +
+          Flop.getSignificand(flop754)
+        }
+        updateValue={(
+          sign: boolean[],
+          exponent: boolean[],
+          significand: boolean[]
+        ) => onFlop754Update(Flop.generateFlop754(sign, exponent, significand))}
+      />
       <Panel
         clearInput={flop === null}
         stored={Flop.stringifyFlop(storedFlop)}
@@ -81,24 +99,8 @@ const Format: FC<FormatProps> = (props: FormatProps): ReactElement => {
           )
         }
       />
-      <BitPanel
-        {...props}
-        sign={sign}
-        exponent={exponent}
-        exponentValue={Flop.getExponent(flop754)}
-        significand={significand}
-        significandValue={
-          (Flop.isSubnormal(flop754) ? "(subnormal) " : "") +
-          Flop.getSignificand(flop754)
-        }
-        updateValue={(
-          sign: boolean[],
-          exponent: boolean[],
-          significand: boolean[]
-        ) => onFlop754Update(Flop.generateFlop754(sign, exponent, significand))}
-      />
     </Wrapper>
   );
 };
 
-export default Format;
+export default FormatConverter;
diff --git a/src/components/Panel.tsx → src/converter/Panel.tsx b/src/components/Panel.tsx → src/converter/Panel.tsx
@@ -1,7 +1,7 @@
 import React, { FC, useState, ReactElement, useEffect } from "react";
 import styled from "styled-components";
 import * as Constants from "../Constants";
-import * as Flop from "../Flop";
+import * as Flop from "./Flop";
 
 const Wrapper = styled.div`
   box-sizing: border-box;
@@ -33,14 +33,14 @@ const InputField = styled.input`
   }
 `;
 
-type PanelProps = {
+interface PanelProps {
   clearInput: boolean;
   stored: string;
   error: string;
   bits: boolean[];
   updateInputValue: (inputValue: string) => void;
   updateValue: (bits: boolean[]) => void;
-};
+}
 
 const Panel: FC<PanelProps> = (props: PanelProps): ReactElement => {
   const [decimalInput, setDecimalInput] = useState("");

diff --git a/src/ui/Footer.tsx b/src/ui/Footer.tsx
@@ -0,0 +1,43 @@
+import React, { FC, ReactElement } from "react";
+import styled from "styled-components";
+import * as Constants from "../Constants";
+import TextWithLink from "./TestWithLink";
+
+const Wrapper = styled.footer`
+  padding: 1rem;
+`;
+
+const VersionNumber = styled.div`
+  font-size: 1.4rem;
+`;
+
+const Acknowledgements = styled.div`
+  font-size: 1rem;
+`;
+
+const Footer: FC = (): ReactElement => (
+  <Wrapper>
+    <VersionNumber>
+      <TextWithLink
+        {...Constants.BUILD_SOURCE_TEXT}
+        url={Constants.BUILD_SOURCE_URL}
+      />
+    </VersionNumber>
+    <Acknowledgements>
+      <TextWithLink
+        {...Constants.UI_ACKNOWLEDGEMENT_TEXT}
+        url={Constants.UI_ACKNOWLEDGEMENT_URL}
+      />
+      <TextWithLink
+        {...Constants.BIGNUM_ACKNOWLEDGEMENT_TEXT}
+        url={Constants.BIGNUM_ACKNOWLEDGEMENT_URL}
+      />
+      <TextWithLink
+        {...Constants.ISSUES_CONTRIBUTION_TEXT}
+        url={Constants.ISSUES_CONTRIBUTION_URL}
+      />
+    </Acknowledgements>
+  </Wrapper>
+);
+
+export default Footer;
diff --git a/src/ui/Header.tsx b/src/ui/Header.tsx
@@ -0,0 +1,19 @@
+import React, { FC, ReactElement } from "react";
+import styled from "styled-components";
+import * as Constants from "../Constants";
+
+const Wrapper = styled.header`
+  padding: 1rem;
+`;
+
+const Title = styled.h1`
+  font-size: 2.4rem;
+`;
+
+const Footer: FC = (): ReactElement => (
+  <Wrapper>
+    <Title>{Constants.APP_TITLE}</Title>
+  </Wrapper>
+);
+
+export default Footer;
diff --git a/src/ui/TestWithLink.tsx b/src/ui/TestWithLink.tsx
@@ -0,0 +1,29 @@
+import React, { FC, ReactElement } from "react";
+import styled from "styled-components";
+import * as Constants from "../Constants";
+
+const Text = styled.p``;
+
+const Link = styled.a`
+  color: ${Constants.ACCENT_COLOR};
+  text-decoration: none;
+`;
+
+type TextWithLinkProps = {
+  pre: string;
+  link: string;
+  post: string;
+  url: string;
+};
+
+const TextWithLink: FC<TextWithLinkProps> = (
+  props: TextWithLinkProps
+): ReactElement => (
+  <Text>
+    {props.pre}
+    <Link href={props.url}>{props.link}</Link>
+    {props.post}
+  </Text>
+);
+
+export default TextWithLink;