Merge branch 'master'

Kanaries · Jun 19, 2023 · 85c2cb9 · 85c2cb9
2 parents 7263bb0 + ebc28e8
commit 85c2cb9
Show file tree

Hide file tree

Showing 20 changed files with 796 additions and 641 deletions.
diff --git a/packages/rath-client/package.json b/packages/rath-client/package.json
@@ -11,8 +11,6 @@
   "dependencies": {
     "@antv/g6": "^4.8.4",
     "@babel/parser": "^7.19.6",
-    "@emotion/react": "^11.10.4",
-    "@emotion/styled": "^11.10.4",
     "@fluentui/font-icons-mdl2": "^8.5.4",
     "@fluentui/react": "^8.94.4",
     "@fluentui/react-components": "^9.19.0",
@@ -22,7 +20,6 @@
     "@kanaries/graphic-walker": "0.3.7",
     "@kanaries/loa": "^0.0.16",
     "@kanaries/web-data-loader": "0.1.7",
-    "@material-ui/core": "^5.0.0-beta.5",
     "@vercel/analytics": "^1.0.0",
     "@zip.js/zip.js": "^2.6.60",
     "airtable": "^0.11.4",

diff --git a/packages/rath-client/src/components/connectionStatus.tsx b/packages/rath-client/src/components/connectionStatus.tsx
@@ -1,26 +1,32 @@
 import React from 'react';
-import { Box, Step, StepLabel, Stepper } from '@material-ui/core';
 import { IECStatus } from '../interfaces';
 import { ENGINE_CONNECTION_STAGES } from '../constants';
+import Stepper from './stepper';
 
 interface ConnectionStatusProps {
     status: IECStatus;
 }
 const ConnectionStatus: React.FC<ConnectionStatusProps> = props => {
     const { status } = props;
     return <div style={{ margin: '2em 0em 1em 0em' }}>
-        <Box sx={{ width: '100%' }}>
-        <Stepper alternativeLabel>
-            {ENGINE_CONNECTION_STAGES.map((stage) => {
-                const currentStage = ENGINE_CONNECTION_STAGES.findIndex((s) => s.name === status);
-                return <Step key={stage.name + stage.stage} completed={currentStage >= stage.stage} active={currentStage >= stage.stage} style={{ textAlign: 'center'}}>
-                        <StepLabel>{stage.name}</StepLabel>
-                        <p>{stage.description}</p>
-                    </Step>
-                    }
-                )}
-        </Stepper>
-        </Box>
+        <Stepper.Box>
+            <Stepper>
+                {ENGINE_CONNECTION_STAGES.map((stage) => {
+                    const currentStage = ENGINE_CONNECTION_STAGES.findIndex((s) => s.name === status);
+                    return (
+                        <Stepper.Step
+                            key={stage.name + stage.stage}
+                            completed={currentStage >= stage.stage}
+                            active={currentStage >= stage.stage}
+                            style={{ textAlign: 'center' }}
+                        >
+                            <Stepper.StepLabel>{stage.name}</Stepper.StepLabel>
+                            <p>{stage.description}</p>
+                        </Stepper.Step>
+                    );
+                })}
+            </Stepper>
+        </Stepper.Box>
     </div>
 }
 

diff --git a/packages/rath-client/src/components/divider/index.tsx b/packages/rath-client/src/components/divider/index.tsx
@@ -0,0 +1,16 @@
+import styled from "styled-components";
+
+
+const Divider = styled.hr`
+    margin: 0;
+    flex-shrink: 0;
+    border-width: 0;
+    border-top-width: thin;
+    border-color: inherit;
+    opacity: 0.12;
+    border-style: solid;
+    color: inherit;
+`;
+
+
+export default Divider;
diff --git a/packages/rath-client/src/components/pagination/components.tsx b/packages/rath-client/src/components/pagination/components.tsx
@@ -0,0 +1,198 @@
+import styled from "styled-components";
+
+
+const Container = styled.div`
+    margin-block: 1.75rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+`;
+
+const ContentSm = styled.div`
+    flex-grow: 1;
+    flex-shrink: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    @media (min-width: 1024px) {
+        display: none;
+    }
+`;
+
+const ContentLg = styled.div`
+    flex-grow: 1;
+    flex-shrink: 1;
+    display: none;
+    @media (min-width: 1024px) {
+        display: flex;
+    }
+    align-items: center;
+    justify-content: space-between;
+    overflow: hidden;
+    > * + * {
+        margin-left: -1px;
+    }
+`;
+
+const Description = styled.div`
+    flex-grow: 1;
+    flex-shrink: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    > p {
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+        color: #4b5563;
+        opacity: 0.6;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+`;
+
+const TabList = styled.div`
+    flex-grow: 0;
+    flex-shrink: 0;
+    display: inline-flex;
+    position: relative;
+    padding: 2px;
+    :not(:first-child) {
+        margin-left: 1rem;
+    }
+`;
+
+const CurrentTab = styled.div`
+    flex-grow: 0;
+    flex-shrink: 0;
+    width: max-content;
+    min-width: 2em;
+    cursor: default;
+    padding: 0.75rem 1rem;
+    font-size: 1rem;
+    font-weight: 600;
+    line-height: 1.25rem;
+    letter-spacing: 0.025em;
+    text-align: center;
+    white-space: break-all;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+`;
+
+const Tab = styled.div`
+    flex-grow: 0;
+    flex-shrink: 0;
+    width: max-content;
+    min-width: 2em;
+    cursor: pointer;
+    padding: 0.75rem 1rem;
+    font-size: 1rem;
+    font-weight: 600;
+    line-height: 1.25rem;
+    letter-spacing: 0.025em;
+    text-align: center;
+    white-space: break-all;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0.75;
+    &:hover {
+        opacity: 1;
+        color: #6366f1;
+    }
+    &:focus {
+        opacity: 1;
+        color: #6366f1;
+        outline: 2px solid transparent;
+        outline-offset: 2px;
+        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.5);
+    }
+`;
+
+const Ellipsis = styled.div`
+    flex-grow: 0;
+    flex-shrink: 0;
+    width: max-content;
+    min-width: 2em;
+    cursor: default;
+    padding: 0.75rem 1rem;
+    font-size: 1rem;
+    font-weight: 600;
+    line-height: 1.25rem;
+    letter-spacing: 0.025em;
+    text-align: center;
+    white-space: break-all;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0.75;
+`;
+
+const Button = styled.div`
+    flex-grow: 0;
+    flex-shrink: 0;
+    width: max-content;
+    min-width: 2em;
+    cursor: pointer;
+    padding: 0.75rem 1rem;
+    font-size: 1rem;
+    font-weight: 600;
+    line-height: 1.25rem;
+    letter-spacing: 0.025em;
+    text-align: center;
+    white-space: break-all;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0.75;
+    &[aria-disabled="false"]:hover {
+        opacity: 1;
+        color: #6366f1;
+    }
+    &[aria-disabled="false"]:focus {
+        opacity: 1;
+        color: #6366f1;
+        outline: 2px solid transparent;
+        outline-offset: 2px;
+        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.5);
+    }
+    &[aria-disabled="true"] {
+        cursor: default;
+    }
+    > * + * {
+        margin-left: 0.5rem;
+    }
+    > span {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border-width: 0;
+    }
+    > i {
+        width: 1.25rem;
+        height: 1.25rem;
+    }
+`;
+
+
+const PaginationComponents = {
+    Container,
+    ContentSm,
+    ContentLg,
+    Description,
+    TabList,
+    CurrentTab,
+    Tab,
+    Ellipsis,
+    Button,
+};
+
+
+export default PaginationComponents;