move to yarn; use wirebird-client

Author: corporateanon

.github/workflows/npm-publish.yml

@@ -13,9 +13,9 @@ jobs:
               with:
                   node-version: 14
                   registry-url: https://registry.npmjs.org/
-            - run: npm ci
-            - run: npm run lint
-            - run: npm run test
-            - run: npm publish --access=public
+            - run: yarn
+            - run: yarn lint
+            - run: yarn test
+            - run: yarn publish --access=public
               env:
                   NODE_AUTH_TOKEN: ${{secrets.npm_token}}

.github/workflows/npm-test.yml

@@ -11,16 +11,15 @@ jobs:
               with:
                   node-version: 14
                   registry-url: https://registry.npmjs.org/
-            - run: npm ci
-            - run: npm run lint
+            - run: yarn
+            - run: yarn lint
     test:
         runs-on: ubuntu-latest
-        needs: lint
         steps:
             - uses: actions/checkout@v2
             - uses: actions/setup-node@v1
               with:
                   node-version: 14
                   registry-url: https://registry.npmjs.org/
-            - run: npm ci
-            - run: npm run test
+            - run: yarn
+            - run: yarn test

client/IndexPage.tsx

@@ -1,4 +1,4 @@
-import { MonitorEvent } from 'http-inspector';
+import { MonitorEvent } from 'wirebird-client';
 import React, { FC, useCallback } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';

components/Collapsible.tsx

@@ -1,4 +1,4 @@
-import { fade } from '@material-ui/core/styles/colorManipulator';
+import { alpha } from '@material-ui/core/styles/colorManipulator';
 import makeStyles from '@material-ui/core/styles/makeStyles';
 import Typography from '@material-ui/core/Typography/Typography';
 import Accordion from '@material-ui/core/Accordion';
@@ -20,7 +20,7 @@ const useStyles = makeStyles(
                 '$force &': {
                     minHeight: 33,
                 },
-                backgroundColor: fade('rgb(0,0,0)', 0.07),
+                backgroundColor: alpha('rgb(0,0,0)', 0.07),
             },
             summaryContent: {
                 '$force &': {

components/EventDetailsView.tsx

@@ -6,7 +6,7 @@ import CloseIcon from '@material-ui/icons/Close';
 import TabContext from '@material-ui/lab/TabContext';
 import TabList from '@material-ui/lab/TabList';
 import TabPanel from '@material-ui/lab/TabPanel';
-import { MonitorEvent } from 'http-inspector';
+import { MonitorEvent } from 'wirebird-client';
 import React, { FC, useCallback, useState } from 'react';
 import { Headers } from '../utils/Headers';
 import { ContentView } from './ContentView';

components/HeadersView.tsx

@@ -1,4 +1,4 @@
-import { eventToCurl } from 'http-inspector';
+import { eventToCurl } from 'wirebird-client';
 import {
     MonitorEvent,
     LoggerHeaders,

components/MasterDetailsView.tsx

@@ -1,5 +1,5 @@
 import makeStyles from '@material-ui/core/styles/makeStyles';
-import { MonitorEvent } from 'http-inspector';
+import { MonitorEvent } from 'wirebird-client';
 import React, { FC, useCallback } from 'react';
 import { ColumnsSelection } from '../utils/Columns';
 import { emptyObject } from '../utils/emptyObject';

components/RequestsTable.tsx

@@ -1,9 +1,8 @@
 import makeStyles from '@material-ui/core/styles/makeStyles';
 import classnames from 'classnames';
-import { MonitorEvent } from 'http-inspector';
+import { MonitorEvent } from 'wirebird-client';
 import React, { FC, useCallback, useMemo } from 'react';
 import DataGrid, { Column } from 'react-data-grid';
-import 'react-data-grid/dist/react-data-grid.css';
 import { ColumnsSelection } from '../utils/Columns';
 import { emptyObject } from '../utils/emptyObject';
 import { shortenURL } from '../utils/shortenURL';

components/Theme.tsx

@@ -1,4 +1,4 @@
-import createMuiTheme from '@material-ui/core/styles/createMuiTheme';
+import { createTheme } from '@material-ui/core/styles';
 import ThemeProvider from '@material-ui/styles/ThemeProvider';
 import React, { FC, useMemo } from 'react';
 import { useDarkTheme } from '../utils/useDarkTheme';
@@ -7,7 +7,7 @@ export const Theme: FC = ({ children }) => {
     const isDarkTheme = useDarkTheme();
     const theme = useMemo(
         () =>
-            createMuiTheme({
+            createTheme({
                 palette: {
                     type: isDarkTheme ? 'dark' : 'light',
                 },