Formatted, converted tab to component

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" />
+    }
   />
 );

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>
   );

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">

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}

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>
   );
 };

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")}
+            <StyledTab name="Code" iconName="code" />
-            {tab("Sampling Settings", "cog")}
+            <StyledTab name="Sampling Settings" iconName="cog" />
-            {tab("View Settings", "squareBar")}
+            <StyledTab name="View Settings" iconName="squareBar" />
-            {tab("Input Variables", "dollar")}
+            <StyledTab name="Input Variables" iconName="dollar" />
           </Tab.List>
         </div>
         <div className="flex" style={{ height: height + "px" }}>

packages/components/tailwind.config.js

@@ -3,7 +3,5 @@ module.exports = {
   theme: {
     extend: {},
   },
-  plugins: [
+  plugins: [require("@tailwindcss/forms")],
-    require('@tailwindcss/forms'),
-  ],
 };