From 800a832a061f2d8888aea6d5f1c78974cba6aff8 Mon Sep 17 00:00:00 2001
From: Ozzie Gooen <ozzieagooen@gmail.com>
Date: Wed, 1 Jun 2022 20:13:19 -0700
Subject: [PATCH] Formatted, converted tab to component

---
 packages/components/src/components/Alert.tsx  | 19 +++++++++++++++----
 .../src/components/DistributionChart.tsx      |  4 ++--
 .../src/components/FunctionChart.tsx          |  4 +++-
 .../src/components/SquiggleChart.tsx          |  4 ++--
 .../src/components/SquiggleEditor.tsx         |  6 +++++-
 .../src/components/SquigglePlayground.tsx     | 19 ++++++++++++-------
 packages/components/tailwind.config.js        |  4 +---
 7 files changed, 40 insertions(+), 20 deletions(-)

diff --git a/packages/components/src/components/Alert.tsx b/packages/components/src/components/Alert.tsx
index d610e3a9..4e1dc646 100644
--- a/packages/components/src/components/Alert.tsx
+++ b/packages/components/src/components/Alert.tsx
@@ -1,5 +1,9 @@
 import * as React from "react";
-import { XCircleIcon, InformationCircleIcon, CheckCircleIcon } from "@heroicons/react/solid";
+import {
+  XCircleIcon,
+  InformationCircleIcon,
+  CheckCircleIcon,
+} from "@heroicons/react/solid";
 
 export const Alert: React.FC<{
   heading: string;
@@ -53,7 +57,12 @@ export const MessageAlert: React.FC<{
     backgroundColor="bg-slate-100"
     headingColor="text-slate-700"
     bodyColor="text-slate-700"
-    icon={<InformationCircleIcon className="h-5 w-5 text-slate-400" aria-hidden="true" />}
+    icon={
+      <InformationCircleIcon
+        className="h-5 w-5 text-slate-400"
+        aria-hidden="true"
+      />
+    }
   />
 );
 
@@ -67,6 +76,8 @@ export const SuccessAlert: React.FC<{
     backgroundColor="bg-green-50"
     headingColor="text-green-800"
     bodyColor="text-green-700"
-    icon={<CheckCircleIcon className="h-5 w-5 text-green-400" aria-hidden="true" />}
+    icon={
+      <CheckCircleIcon className="h-5 w-5 text-green-400" aria-hidden="true" />
+    }
   />
-);
\ No newline at end of file
+);
diff --git a/packages/components/src/components/DistributionChart.tsx b/packages/components/src/components/DistributionChart.tsx
index 52f17c91..7dcb3bb1 100644
--- a/packages/components/src/components/DistributionChart.tsx
+++ b/packages/components/src/components/DistributionChart.tsx
@@ -173,12 +173,12 @@ const SummaryTable: React.FC<SummaryTableProps> = ({
   let TableHeadCell: React.FC<{ children: React.ReactNode }> = ({
     children,
   }) => (
-    <th className="border border-slate-200 bg-slate-50 pt-1 pb-1 pl-2 pr-2 text-slate-500 font-semibold">
+    <th className="border border-slate-200 bg-slate-50 py-1 px-2 text-slate-500 font-semibold">
       {children}
     </th>
   );
   let Cell: React.FC<{ children: React.ReactNode }> = ({ children }) => (
-    <td className="border border-slate-200 pt-1 pb-1 pl-2 pr-2 text-slate-900 ">
+    <td className="border border-slate-200 py-1 px-2 text-slate-900 ">
       {children}
     </td>
   );
diff --git a/packages/components/src/components/FunctionChart.tsx b/packages/components/src/components/FunctionChart.tsx
index c330785f..d826fd44 100644
--- a/packages/components/src/components/FunctionChart.tsx
+++ b/packages/components/src/components/FunctionChart.tsx
@@ -65,7 +65,9 @@ export const FunctionChart: React.FC<FunctionChartProps> = ({
         />
       );
     case "Error":
-      return <ErrorAlert heading="Error">The function failed to be run</ErrorAlert>;
+      return (
+        <ErrorAlert heading="Error">The function failed to be run</ErrorAlert>
+      );
     default:
       return (
         <MessageAlert heading="Function Display Not Supported">
diff --git a/packages/components/src/components/SquiggleChart.tsx b/packages/components/src/components/SquiggleChart.tsx
index 44465b74..2ec31bae 100644
--- a/packages/components/src/components/SquiggleChart.tsx
+++ b/packages/components/src/components/SquiggleChart.tsx
@@ -158,10 +158,10 @@ const SquiggleItem: React.FC<SquiggleItemProps> = ({
         <VariableBox heading="Array" showTypes={showTypes}>
           {expression.value.map((r, i) => (
             <div key={i} className="flex flex-row pt-1">
-              <div className="flex-none bg-slate-100 rounded-sm pl-1" style={{"paddingRight": "0.25rem"}}>
+              <div className="flex-none bg-slate-100 rounded-sm px-1">
                 <h3 className="text-slate-400 font-mono">{i}</h3>
               </div>
-              <div className="pl-2 pr-2 mb-2 grow ">
+              <div className="px-2 mb-2 grow ">
                 <SquiggleItem
                   key={i}
                   expression={r}
diff --git a/packages/components/src/components/SquiggleEditor.tsx b/packages/components/src/components/SquiggleEditor.tsx
index 4c478335..bd90c6b1 100644
--- a/packages/components/src/components/SquiggleEditor.tsx
+++ b/packages/components/src/components/SquiggleEditor.tsx
@@ -181,7 +181,11 @@ export let SquigglePartial: React.FC<SquigglePartialProps> = ({
           height={20}
         />
       </div>
-      {error !== null ? <ErrorAlert heading="Error">{error}</ErrorAlert> : <></>}
+      {error !== null ? (
+        <ErrorAlert heading="Error">{error}</ErrorAlert>
+      ) : (
+        <></>
+      )}
     </div>
   );
 };
diff --git a/packages/components/src/components/SquigglePlayground.tsx b/packages/components/src/components/SquigglePlayground.tsx
index 97b3604d..cff11825 100644
--- a/packages/components/src/components/SquigglePlayground.tsx
+++ b/packages/components/src/components/SquigglePlayground.tsx
@@ -104,7 +104,12 @@ function classNames(...classes: string[]) {
   return classes.filter(Boolean).join(" ");
 }
 
-let tab = (key: string, iconName: string) => {
+type StyledTabProps = {
+  name: string;
+  iconName: string;
+};
+
+const StyledTab: React.FC<StyledTabProps> = ({ name, iconName }) => {
   let iconStyle = (isSelected: boolean) =>
     classNames(
       "-ml-0.5 mr-2 h-4 w-4 ",
@@ -120,7 +125,7 @@ let tab = (key: string, iconName: string) => {
     }[iconName]);
 
   return (
-    <Tab key={key} as={Fragment}>
+    <Tab key={name} as={Fragment}>
       {({ selected }) => (
         <button className="flex rounded-md focus:outline-none focus-visible:ring-offset-gray-100 ">
           <span
@@ -139,7 +144,7 @@ let tab = (key: string, iconName: string) => {
                   : "text-gray-600 group-hover:text-gray-900"
               }
             >
-              {key}
+              {name}
             </span>
           </span>
         </button>
@@ -368,10 +373,10 @@ let SquigglePlayground: FC<PlaygroundProps> = ({
       <div className=" flex-col flex">
         <div className="pb-4">
           <Tab.List className="p-0.5 rounded-md bg-slate-100 hover:bg-slate-200 inline-flex">
-            {tab("Code", "code")}
-            {tab("Sampling Settings", "cog")}
-            {tab("View Settings", "squareBar")}
-            {tab("Input Variables", "dollar")}
+            <StyledTab name="Code" iconName="code" />
+            <StyledTab name="Sampling Settings" iconName="cog" />
+            <StyledTab name="View Settings" iconName="squareBar" />
+            <StyledTab name="Input Variables" iconName="dollar" />
           </Tab.List>
         </div>
         <div className="flex" style={{ height: height + "px" }}>
diff --git a/packages/components/tailwind.config.js b/packages/components/tailwind.config.js
index 89944004..f100dc69 100644
--- a/packages/components/tailwind.config.js
+++ b/packages/components/tailwind.config.js
@@ -3,7 +3,5 @@ module.exports = {
   theme: {
     extend: {},
   },
-  plugins: [
-    require('@tailwindcss/forms'),
-  ],
+  plugins: [require("@tailwindcss/forms")],
 };