Merge pull request #1806 from ChainSafe/dev

Release 2021-12-06

.eslintrc.json

@@ -38,10 +38,8 @@
     "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": "warn",
     "react/prop-types": 0,
-    "react/jsx-max-props-per-line": [2, {
-      "maximum": 1,
-      "when": "always"
-    }],
+    "react/jsx-max-props-per-line": ["error", { "maximum": 1, "when": "always" }],
+    "react/jsx-first-prop-new-line": ["error", "multiline-multiprop"],
     "react/jsx-fragments": "error",
     "arrow-spacing": "error",
     "space-infix-ops": "error",

.github/pull_request_template.md

@@ -0,0 +1,15 @@
+closes #
+
+---
+
+Submission checklist: 
+
+<!-- Remove anything below that is not applicable -->   
+
+#### Layout
+- [] Change looks good in the desktop web ui
+- - [] Change looks good in the mobile web ui
+
+#### Theme
+- [] Components / elements inspected in light mode 
+- [] Components / elements inspected in dark mode 

README.md

@@ -20,10 +20,6 @@ Theme context and other utilities for generating and using the theming capabilit
 
 The UI for Chainsafe Files
 
-#### **`packages/gaming-ui`**
-
-The UI for Chainsafe Gaming
-
 #### **`packages/storage-ui`**
 
 The UI for Chainsafe Storage

package.json

@@ -20,7 +20,7 @@
     "eslint": "^6.8.0",
     "eslint-plugin-cypress": "^2.11.3",
     "eslint-plugin-no-only-tests": "^2.6.0",
-    "eslint-plugin-react": "^7.22.0",
+    "eslint-plugin-react": "^7.27.1",
     "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-ternary": "^1.0.4",
     "npm-run-all": "^4.1.5",
@@ -38,9 +38,6 @@
     "build:files-ui": "yarn wsrun -p files-ui -c build",
     "release:files-ui": "yarn wsrun -p files-ui -c release",
     "start:files-ui": "yarn wsrun -p files-ui -c start",
-    "build:gaming-ui": "yarn wsrun -p gaming-ui -c build",
-    "release:gaming-ui": "yarn wsrun -p gaming-ui -c release",
-    "start:gaming-ui": "yarn wsrun -p gaming-ui -c start",
     "build:storage-ui": "yarn wsrun -p storage-ui -c build",
     "release:storage-ui": "yarn wsrun -p storage-ui -c release",
     "start:storage-ui": "yarn wsrun -p storage-ui -c start",

packages/common-components/package.json

@@ -10,7 +10,7 @@
   },
   "scripts": {
     "storybook": "start-storybook -p 6006",
-    "build:storybook": "build-storybook",
+    "build:storybook": "(export NODE_OPTIONS=--openssl-legacy-provider; build-storybook)",
     "build": "rollup -c",
     "start": "rollup -c -w",
     "lint": "eslint './{src, cypress}/**/*.{js,jsx,ts,tsx}'"

packages/common-components/src/Button/Button.tsx

@@ -93,7 +93,7 @@ const useStyles = makeStyles(
           fill: palette.common.white.main
         },
         "&:hover": {
-          backgroundColor: palette.primary.main,
+          backgroundColor: palette.primary.hover,
           color: palette.common.white.main,
           ...overrides?.Button?.variants?.secondary?.hover
         },
@@ -109,6 +109,20 @@ const useStyles = makeStyles(
         },
         ...overrides?.Button?.variants?.secondary?.root
       },
+      text: {
+        backgroundColor: "transparent",
+        color: palette.additional["gray"][9],
+        "&:hover": {
+          ...overrides?.Button?.variants?.text?.hover
+        },
+        "&:focus": {
+          ...overrides?.Button?.variants?.text?.focus
+        },
+        "&:active": {
+          ...overrides?.Button?.variants?.text?.active
+        },
+        ...overrides?.Button?.variants?.text?.root
+      },
       tertiary: {
         backgroundColor: palette.additional["gray"][3],
         color: palette.common.black.main,
@@ -293,7 +307,7 @@ interface IButtonProps extends Omit<ReactButton, "size"> {
   className?: string
   children?: ReactNode | ReactNode[]
   fullsize?: boolean
-  variant?: "link" | "primary" | "secondary" |"tertiary" | "outline" | "dashed" | "danger"
+  variant?: "link" | "primary" | "secondary" |"tertiary" | "outline" | "dashed" | "danger" | "text"
   iconButton?: boolean
   size?: "large" | "medium" | "small"
   type?: "button" | "submit" | "reset"
@@ -347,7 +361,7 @@ const Button: React.FC<IButtonProps> = ({
       {loading && (
         <>
           <Loading
-            type="inherit"
+            type="initial"
             size={16}
           />
         </>

packages/common-components/src/CheckboxInput/CheckboxInput.tsx

@@ -10,6 +10,7 @@ const useStyles = makeStyles(
       root: {
         cursor: "pointer",
         display: "flex",
+        alignItems: "center",
         ...overrides?.CheckboxInput?.root
       },
       checkbox: {

packages/common-components/src/Icons/icons/Sort.icon.tsx

@@ -0,0 +1,7 @@
+import * as React from "react"
+import createSvgIcon from "../createSvgIcon"
+import { ReactComponent as SortSvg } from "../svgs/sort.svg"
+
+export { SortSvg }
+
+export default createSvgIcon(<SortSvg />)

packages/common-components/src/Icons/index.ts

@@ -64,6 +64,7 @@ export { default as SearchIcon, SearchSvg } from "./icons/Search.icon"
 export { default as SettingIcon, SettingSvg } from "./icons/Setting.icon"
 export { default as ShareAltIcon, ShareAltSvg } from "./icons/ShareAlt.icon"
 export { default as StarIcon, StarSvg } from "./icons/Star.icon"
+export { default as SortIcon, SortSvg } from "./icons/Sort.icon"
 export { default as SunIcon, SunSvg } from "./icons/Sun.icon"
 export { default as TableIcon, TableSvg } from "./icons/Table.icon"
 export { default as UpdateIcon, UpdateSvg } from "./icons/Update.icon"

packages/common-components/src/Modal/Modal.tsx

@@ -94,6 +94,7 @@ const useStyles = makeStyles(
         margin: "auto",
         maxHeight: "100%",
         overflow: "auto",
+        alignItems: "center",
         "&.xs": {
           width: `calc(100% - ${constants.generalUnit * 2}px)`,
           maxWidth: breakpoints.width("xs"),

packages/common-components/src/SelectInput/SelectInput.tsx

@@ -8,7 +8,6 @@ const useStyles = makeStyles(
   ({ animation, constants, palette, overrides }: ITheme) =>
     createStyles({
       root: {
-        margin: 5,
         display: "block",
         ...overrides?.SelectInput?.root
       },

packages/common-components/src/Spinner/Loading.tsx

@@ -1,8 +1,8 @@
-import React from "react"
+import React, { useMemo } from "react"
 import { ITheme, useTheme } from "@chainsafe/common-theme"
 
 export interface ILoadingProps {
-  type?: "inherit" | "primary" | "dark" | "light"
+  type?: "initial" | "primary" | "dark" | "light"
   size?: number
   className?: string
 }
@@ -13,6 +13,42 @@ const Loading: React.FC<ILoadingProps> = ({
   className
 }) => {
   const theme: ITheme = useTheme()
+
+  const uniqueKey = `${Math.random()}-${Math.random()}`
+
+  const {
+    start,
+    end
+  } = useMemo(() => {
+    switch (type) {
+      case "primary":
+        return {
+          start: theme.palette.primary.main,
+          end: "transparent"
+        }
+      case "light":
+        return {
+          start: theme.palette.common.white.main,
+          end: "transparent"
+        }
+      case "dark":
+        return {
+          start: theme.palette.common.black.main,
+          end: "transparent"
+        }
+      case "initial":
+        return {
+          start: "#FFFFFF",
+          end: "transparent"
+        }
+      default:
+        return {
+          start: "#FFFFFF",
+          end: "transparent"
+        }
+    }
+  }, [type, theme.palette])
+
   return (
     <svg
       width={size}
@@ -22,35 +58,27 @@ const Loading: React.FC<ILoadingProps> = ({
     >
       <defs>
         <linearGradient
-          id="gradient"
+          id={`gradient-${uniqueKey}`}
           x1="0%"
           y1="0%"
           x2="0%"
           y2="100%"
         >
           <stop
             offset="0%"
-            stopColor={
-              type === "primary"
-                ? theme.palette.primary.main
-                : type === "dark"
-                  ? theme.palette.common.black.main
-                  : theme.palette.additional["gray"][5]
-            }
+            stopColor={start}
           />
           <stop
             offset="100%"
-            stopColor={
-              type === "light" ? theme.palette.common.white.main : "transparent"
-            }
+            stopColor={end}
           />
         </linearGradient>
       </defs>
       <circle
         cx="50"
         cy="50"
         r="47"
-        stroke="url(#gradient)"
+        stroke={`url(#gradient-${uniqueKey})`}
         strokeWidth="6"
         fill="none"
         transform="rotate(90 50 50)"

packages/common-components/src/Toasts/ToastContent.tsx

@@ -105,7 +105,8 @@ const ToastContent = ({ toast, onClose }: ToastContentProps) => {
             />
             {onProgressCancel &&
               onProgressCancelLoading
-              ? <Loading size={16}
+              ? <Loading
+                size={16}
                 className={classes.progressCrossButton} />
               : <CloseCirceSvg
                 className={classes.progressCrossButton}

packages/common-components/src/stories/Button.stories.tsx

@@ -15,12 +15,14 @@ export const actionsData = {
   onClick: action("onClickButton")
 }
 
-type VariantOption = "primary" | "secondary" | "tertiary" | "outline" | "dashed" | "danger" | undefined;
+type VariantOption = "primary" | "secondary" | "tertiary" | "link" | "text" | "outline" | "dashed" | "danger" | undefined;
 const variantOptions: VariantOption[] = [
   "primary",
   "outline",
   "dashed",
   "danger",
+  "link",
+  "text",
   undefined
 ]
 

packages/common-components/src/stories/Tabs.stories.tsx

@@ -13,7 +13,8 @@ export const TabsDemo = (): React.ReactNode => {
       activeKey={tab}
       onTabSelect={setTab}
     >
-      <TabPane title="tab 1"
+      <TabPane
+        title="tab 1"
         tabKey="1"
       >
         first

packages/common-components/src/stories/Toasts.stories.tsx

@@ -107,10 +107,11 @@ const ToastNotificationDemo: React.FC<{toast: ToastParams}> = ({ toast }) => {
       <br />
       {toasts.map((toast) => (
         toast.progress && toast.progress < 80 ? (
-          <button onClick={() => updateToast(toast.id, {
-            ...toast,
-            progress: toast.progress !== undefined ? toast.progress + 20 : undefined
-          })}>
+          <button
+            onClick={() => updateToast(toast.id, {
+              ...toast,
+              progress: toast.progress !== undefined ? toast.progress + 20 : undefined
+            })}>
             increase progress toast
           </button>
         ) : null

packages/common-theme/src/Overrides/Button.ts

@@ -42,6 +42,18 @@ export interface IButtonOverride {
       focus?: Record<string, any>
       active?: Record<string, any>
     }
+    link?: {
+      root?: Record<string, any>
+      hover?: Record<string, any>
+      focus?: Record<string, any>
+      active?: Record<string, any>
+    }
+    text?: {
+      root?: Record<string, any>
+      hover?: Record<string, any>
+      focus?: Record<string, any>
+      active?: Record<string, any>
+    }
   }
   state?: {
     danger?: {