Release latest fixes to Staging

packages/common-components/package.json

@@ -43,6 +43,7 @@
   "devDependencies": {
     "@babel/core": "^7.12.10",
     "@rollup/plugin-commonjs": "^17.0.0",
+    "@rollup/plugin-image": "^2.0.6",
     "@rollup/plugin-node-resolve": "^10.0.0",
     "@storybook/addon-actions": "^5.3.21",
     "@storybook/addon-contexts": "^5.3.19",

packages/common-components/rollup.config.js

@@ -6,6 +6,7 @@ import svgr from "@svgr/rollup"
 import url from "rollup-plugin-url"
 import babel from "rollup-plugin-babel"
 import postcss from "rollup-plugin-postcss"
+import image from "@rollup/plugin-image"
 
 export default {
   input: "./src/index.ts",
@@ -14,30 +15,31 @@ export default {
     dir: "dist/",
     exports: "named",
     sourcemap: true,
-    strict: true,
+    strict: true
   },
   plugins: [
+    image(),
     peerDepsExternal(),
     resolve(),
     commonjs(),
     typescript(),
     postcss({
-      plugins: [],
+      plugins: []
     }),
     url(),
     svgr(),
     babel({
       exclude: "node_modules/**",
       presets: ["@babel/preset-react", "@babel/preset-env"],
-      plugins: ["emotion"],
-    }),
+      plugins: ["emotion"]
+    })
   ],
   external: [
     "react",
     "react-dom",
     "@material-ui/styles",
     "formik",
     "react-toast-notifications",
-    "@chainsafe/common-theme",
-  ],
+    "@chainsafe/common-theme"
+  ]
 }

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

@@ -1,6 +1,7 @@
 import React from "react"
 import { makeStyles, createStyles, ITheme } from "@chainsafe/common-theme"
 import clsx from "clsx"
+import ChainSafePng from "./logo.png"
 
 const useStyles = makeStyles(({ overrides }: ITheme) =>
   createStyles({
@@ -17,7 +18,7 @@ const ChainsafeFilesLogo: React.FC<{ className?: string }> = ({
   const classes = useStyles()
   return (
     <img
-      src="ChainSafe-logo.png"
+      src={ChainSafePng}
       alt="Chainsafe Logo"
       className={clsx(classes.root, className)}
     />

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

@@ -1,4 +1,4 @@
-import React, { ReactNode, useState } from "react"
+import React, { ReactNode, useCallback, useState } from "react"
 import { ITheme, makeStyles, createStyles } from "@chainsafe/common-theme"
 import { Typography } from "../Typography"
 import clsx from "clsx"
@@ -35,6 +35,7 @@ const useStyles = makeStyles(
         }px`,
         color: palette.additional["gray"][9],
         cursor: "pointer",
+        display: "flex",
         "&.basic": {
           backgroundColor: palette.additional["gray"][2],
           ...overrides?.ExpansionPanel?.heading?.basic?.root,
@@ -56,6 +57,9 @@ const useStyles = makeStyles(
         },
         ...overrides?.ExpansionPanel?.heading?.root
       },
+      flexGrow: {
+        flex: 1
+      },
       content: {
         overflow: "hidden",
         color: palette.additional["gray"][8],
@@ -90,37 +94,54 @@ export interface IExpansionPanelProps {
   children?: ReactNode | ReactNode[] | null
   active?: boolean
   variant?: "basic" | "borderless"
+  iconPosition?: "left" | "right"
   toggle?: (state: boolean) => void
+  injectedClasses?: {
+    root?: string
+    heading?: string
+    content?: string
+  }
 }
 
-const ExpansionPanel: React.FC<IExpansionPanelProps> = ({
-  children,
-  header,
-  variant = "basic",
-  toggle,
-  active
-}: IExpansionPanelProps) => {
+const ExpansionPanel = ({ children, header, iconPosition, variant = "basic", toggle, active, injectedClasses }: IExpansionPanelProps) => {
   const classes = useStyles()
   const [activeInternal, setActive] = useState(!!active)
-  const handleToggle = () => {
+  const handleToggle = useCallback(() => {
     toggle && toggle(!activeInternal)
     setActive(!activeInternal)
-  }
+  }, [activeInternal, toggle])
+
   return (
-    <div className={clsx(classes.root, variant)}>
+    <div className={clsx(classes.root, variant, injectedClasses?.root)}>
       <section
-        onClick={() => handleToggle()}
-        className={clsx(classes.heading, variant, {
-          ["active"]: active != undefined ? active : activeInternal
-        })}
+        onClick={handleToggle}
+        className={clsx(
+          classes.heading,
+          variant,
+          injectedClasses?.heading,
+          {
+            ["active"]: active !== undefined ? active : activeInternal
+          }
+        )}
       >
-        <DirectionalRightIcon className={classes.icon} />
+        {iconPosition === "left" && <DirectionalRightIcon className={classes.icon} />}
         <Typography>{header}</Typography>
+        {iconPosition === "right" && (
+          <>
+            <div className={classes.flexGrow} />
+            <DirectionalRightIcon className={classes.icon} />
+          </>
+        )}
       </section>
       <section
-        className={clsx(classes.content, variant, {
-          ["active"]: active != undefined ? active : activeInternal
-        })}
+        className={clsx(
+          classes.content,
+          variant,
+          injectedClasses?.content,
+          {
+            ["active"]: active !== undefined ? active : activeInternal
+          }
+        )}
       >
         {children}
       </section>

packages/common-components/src/TextInput/FormikTextInput.tsx

@@ -38,12 +38,7 @@ const FormikTextInput = React.forwardRef(
         name={field.name}
         value={field.value}
         placeholder={placeholder}
-        captionMessage={
-          <>
-            {captionMessage && captionMessage}
-            {meta.touched && meta.error && `${meta.error}`}
-          </>
-        }
+        captionMessage={meta.error ? `${meta.error}` : captionMessage ? captionMessage : null}
         state={meta.error ? "error" : undefined}
         onChange={helpers.setValue}
         autoFocus={autoFocus}

packages/common-components/src/Toaster/ToasterWrapper.tsx

@@ -1,23 +1,19 @@
-import React from "react"
+import React, { useCallback } from "react"
 import ToasterContent from "./ToasterContent"
-import {
-  useToasts,
-  AppearanceTypes,
-  Placement
-} from "react-toast-notifications"
+import { useToasts, AppearanceTypes, Placement } from "react-toast-notifications"
 
 export interface IToasterMessage {
   message: string
   description?: string
   appearance?: AppearanceTypes
   autoDismiss?: boolean
-  onDismiss?(id: string): void
+  onDismiss?: (id: string) => void
 }
 
 export const useToaster = () => {
   const { addToast } = useToasts()
 
-  const addToastMessage = (config: IToasterMessage) => {
+  const addToastMessage = useCallback((config: IToasterMessage) => {
     addToast(
       <ToasterContent
         message={config.message}
@@ -29,7 +25,7 @@ export const useToaster = () => {
         onDismiss: config.onDismiss
       }
     )
-  }
+  }, [addToast])
 
   return {
     addToastMessage

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

@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useMemo } from "react"
 import { action } from "@storybook/addon-actions"
 import { boolean, withKnobs, text } from "@storybook/addon-knobs"
 import { Breadcrumb } from "../Breadcrumb"
@@ -15,26 +15,29 @@ export const actionsData = {
   homeClicked: action("Clicked link")
 }
 
-export const BreadcrumbStory = (): React.ReactNode => (
-  <>
-    <Breadcrumb
-      homeOnClick={() => actionsData.homeClicked()}
-      showDropDown={boolean("show dropdown", true)}
-      crumbs={[
-        {
-          text: text("breadcrumb 2", "Level 1 Clickable"),
-          onClick: () => actionsData.linkClick()
-        },
-        {
-          text: "Level 2"
-        },
-        {
-          text: "Level 3"
-        },
-        {
-          text: "Level 4"
-        }
-      ]}
-    />
-  </>
-)
+export const BreadcrumbStory = (): React.ReactNode => {
+  const crumbs = useMemo(() => ([
+    {
+      text: text("breadcrumb 2", "Level 1 Clickable"),
+      onClick: () => actionsData.linkClick()
+    },
+    {
+      text: "Level 2"
+    },
+    {
+      text: "Level 3"
+    },
+    {
+      text: "Level 4"
+    }
+  ]), [])
+
+  return (
+    <>
+      <Breadcrumb
+        homeOnClick={() => actionsData.homeClicked()}
+        showDropDown={boolean("show dropdown", true)}
+        crumbs={crumbs}
+      />
+    </>
+  )}

packages/common-components/src/types.d.ts

@@ -0,0 +1 @@
+declare module "*.png"

packages/common-themes/src/Defaults/GlobalStyling.ts

@@ -3,6 +3,7 @@ import { DefaultThemeConfig, defaultFontFamilyStack } from "./ThemeConfig"
 
 export const DefaultGlobalStyling = {
   ":root": {
+    "--ready": "true",
     ...DefaultPalette.root
   },
   html: {

packages/common-themes/src/Defaults/ThemeConfig.ts

@@ -191,8 +191,8 @@ const DefaultThemeConfig: IThemeConfig = {
     blocker: 10000
   },
   shadows: {
-    shadow1: `0px 1px 4px ${fade(DefaultPalette.additional.gray[10], 0.15)}`,
-    shadow2: `0px 2px 8px ${fade(DefaultPalette.additional.gray[10], 0.25)}`
+    shadow1: `0px 1px 4px ${fade("#000000", 0.15)}`, // Gray[10] // TODO: #875
+    shadow2: `0px 2px 8px ${fade("#000000", 0.25)}` // Gray[10] // TODO: #875
   }
 }
 

packages/common-themes/src/Hooks/useDoubleClick.ts

@@ -16,6 +16,7 @@ export function useDoubleClick(actionSingleClick: () => void, actionDoubleClick:
     // the duration between this click and the previous one
     // is less than the value of delay = double-click
     if (clickCount === 2) {
+      setClickCount(0)
       actionDoubleClick && actionDoubleClick()
     }
 

packages/common-themes/src/utils/colorManipulator.ts

@@ -88,22 +88,38 @@ export function decomposeColor(color: string): IColorObject {
 
   if (["rgb", "rgba", "hsl", "hsla", "var"].indexOf(type) === -1) {
     throw new Error(
-      "Material-UI: Unsupported `%s` color.\n" +
+      `ChainSafe themes: Unsupported ${type} color.\n` +
         "We support the following formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), var()."
     )
   }
 
   let colorToParse = `${color}`
 
   if (type === "var") {
-    colorToParse = getComputedStyle(document.documentElement).getPropertyValue(color.substr(marker + 1, color.length - 1))
+    // Check if loaded
+    if (!getComputedStyle(document.documentElement).getPropertyValue("--ready")) {
+      // throw new Error(
+      //   "Css variable not loaded yet"
+      // )
+      // TODO: #875: Resolve variables not being loaded in time issue
+      console.debug("Css variable not loaded yet")
+    }
+
+    colorToParse = getComputedStyle(document.documentElement).getPropertyValue(color.replace("var(", "").replace(")", ""))
+    if (colorToParse.charAt(0) === "#") {
+      return decomposeColor(
+        hexToRgb(
+          colorToParse
+        )
+      )
+    }
   }
 
   const valuesStrings = colorToParse
     .substring(marker + 1, colorToParse.length - 1)
     .split(",")
-  const values = valuesStrings.map((value) => parseFloat(value))
 
+  const values = valuesStrings.map((value) => parseFloat(value))
   return { type: type as ColorFormat, values: values as ColorValues }
 }