Fix hooks and Vara UI fixes (#1465)

gear-tech · Dec 14, 2023 · ccb4ff6 · ccb4ff6
1 parent cf492e4
commit ccb4ff6
Show file tree

Hide file tree

Showing 13 changed files with 93 additions and 36 deletions.
diff --git a/utils/gear-hooks/package.json b/utils/gear-hooks/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gear-js/react-hooks",
-  "version": "0.9.4",
+  "version": "0.9.5",
   "description": "React hooks used across Gear applications",
   "author": "Gear Technologies",
   "license": "GPL-3.0",
@@ -25,26 +25,28 @@
     "@polkadot/api": "10.10.1",
     "@polkadot/extension-dapp": "0.46.5",
     "react": "18.2.0",
+    "react-dom": "18.2.0"
+  },
+  "dependencies": {
+    "@polkadot/extension-inject": "0.46.5",
+    "@polkadot/util": "12.5.1",
+    "@substrate/connect": "0.7.33",
+    "bignumber.js": "9.1.2",
+    "nanoid": "5.0.1",
     "react-transition-group": "4.4.5"
   },
   "devDependencies": {
     "@gear-js/api": "0.35.2",
     "@polkadot/api": "10.10.1",
     "@polkadot/extension-dapp": "0.46.5",
-    "@polkadot/extension-inject": "0.46.5",
     "@polkadot/types": "10.10.1",
-    "@polkadot/util": "12.5.1",
     "@rollup/plugin-commonjs": "25.0.5",
     "@rollup/plugin-node-resolve": "15.2.3",
-    "@substrate/connect": "0.7.33",
     "@types/react": "18.2.28",
     "@types/react-dom": "18.2.13",
     "@types/react-transition-group": "4.4.7",
-    "bignumber.js": "9.1.2",
-    "nanoid": "5.0.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-transition-group": "4.4.5",
     "rollup": "4.0.2",
     "rollup-plugin-peer-deps-external": "2.2.4",
     "rollup-plugin-terser": "7.0.2",

diff --git a/utils/gear-hooks/src/context/Account.tsx b/utils/gear-hooks/src/context/Account.tsx
@@ -1,4 +1,4 @@
-import type { InjectedAccountWithMeta, InjectedExtension, Unsubcall } from '@polkadot/extension-inject/types';
+import { InjectedAccountWithMeta, InjectedExtension, Unsubcall } from '@polkadot/extension-inject/types';
 import { web3Accounts, web3AccountsSubscribe, web3Enable } from '@polkadot/extension-dapp';
 import { decodeAddress } from '@gear-js/api';
 import { useState, createContext, useEffect, useMemo } from 'react';

diff --git a/utils/gear-hooks/src/context/Api.tsx b/utils/gear-hooks/src/context/Api.tsx
@@ -1,4 +1,4 @@
-import { GearApi, VARA_GENESIS } from '@gear-js/api';
+import { GearApi } from '@gear-js/api';
 import { WsProvider, ScProvider } from '@polkadot/api';
 import * as Sc from '@substrate/connect';
 import { createContext, useEffect, useMemo, useRef, useState } from 'react';

diff --git a/utils/gear-hooks/src/types/index.ts b/utils/gear-hooks/src/types/index.ts
@@ -1,4 +1,4 @@
-import type { InjectedAccountWithMeta } from '@polkadot/extension-inject/types';
+import { InjectedAccountWithMeta } from '@polkadot/extension-inject/types';
 import { HexString } from '@polkadot/util/types';
 import {
   AlertType,

diff --git a/utils/vara-ui/package-lock.json b/utils/vara-ui/package-lock.json
diff --git a/utils/vara-ui/package.json b/utils/vara-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gear-js/vara-ui",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "type": "module",
   "description": "React UI components used across Vara applications",
   "author": "Gear Technologies",

diff --git a/utils/vara-ui/src/components/button/button.module.css b/utils/vara-ui/src/components/button/button.module.css
@@ -15,6 +15,8 @@
 
   display: inline-flex;
   align-items: center;
+  justify-content: center;
+  gap: 10px;
 
   font-weight: 700;
   line-height: 18px;
@@ -36,11 +38,14 @@
     animation: blink 1s linear infinite forwards;
     background-size: 200%;
   }
+}
 
-  /* flex gap */
-  > *:not(:last-child) {
-    margin-right: 10px;
-  }
+.block {
+  width: 100%;
+}
+
+.noWrap {
+  white-space: nowrap;
 }
 
 .primary {

diff --git a/utils/vara-ui/src/components/button/button.stories.ts b/utils/vara-ui/src/components/button/button.stories.ts
@@ -7,7 +7,7 @@ type Story = StoryObj<Type>;
 const meta: Meta<Type> = {
   title: 'Button',
   component: Button,
-  args: { children: 'Button', text: 'Button' },
+  args: { children: 'Button' },
 };
 
 const Primary: Story = {

diff --git a/utils/vara-ui/src/components/button/button.tsx b/utils/vara-ui/src/components/button/button.tsx
@@ -1,4 +1,4 @@
-import { ButtonHTMLAttributes, FunctionComponent, SVGProps, forwardRef } from 'react';
+import { ButtonHTMLAttributes, FunctionComponent, ReactNode, SVGProps, forwardRef } from 'react';
 import cx from 'clsx';
 import styles from './button.module.css';
 
@@ -8,18 +8,27 @@ type BaseProps = ButtonHTMLAttributes<HTMLButtonElement> & {
   color?: 'primary' | 'dark' | 'light' | 'border' | 'transparent';
   size?: 'default' | 'small';
   isLoading?: boolean;
+  block?: boolean;
+  noWrap?: boolean;
 };
 
 type TextProps = BaseProps & {
   text: string;
+  children?: never;
 };
 
 type IconProps = BaseProps & {
   icon: FunctionComponent<SVGProps<SVGSVGElement> & { title?: string | undefined }>;
+  children?: never;
 };
 
-// TODO: omit text and icon if children specified?
-type Props = TextProps | IconProps;
+type ChildrenProps = BaseProps & {
+  children: ReactNode;
+  text?: never;
+  icon?: never;
+};
+
+type Props = TextProps | IconProps | ChildrenProps;
 
 const Button = forwardRef<HTMLButtonElement, Props>((props, ref) => {
   const {
@@ -32,6 +41,8 @@ const Button = forwardRef<HTMLButtonElement, Props>((props, ref) => {
     color = 'primary',
     size = 'default',
     children,
+    block,
+    noWrap,
     ...attrs
   } = props;
 
@@ -45,6 +56,8 @@ const Button = forwardRef<HTMLButtonElement, Props>((props, ref) => {
         disabled && styles.disabled,
         isLoading && styles.loading,
         !text && styles.noText,
+        block && styles.block,
+        noWrap && styles.noWrap,
         className,
       )}
       disabled={disabled || isLoading}

diff --git a/utils/vara-ui/src/components/modal/modal.module.css b/utils/vara-ui/src/components/modal/modal.module.css
@@ -16,17 +16,16 @@
 .modal {
   display: flex;
   flex-direction: column;
+  gap: 20px;
   width: 100%;
   max-width: 400px;
-  max-height: calc(100vh - 128px);
-  padding: 32px;
+  padding: 30px 32px;
   background-color: rgba(246, 248, 248, 1);
   border-radius: 4px;
   filter: drop-shadow(0px 4px 4px #00000011);
 }
 
 .header {
-  margin-bottom: 20px;
   display: flex;
   justify-content: space-between;
 }
@@ -42,11 +41,6 @@
   color: #000;
 }
 
-.button {
-  align-self: flex-start;
-}
-
 .body {
-  flex: 1;
   overflow-y: auto;
 }
diff --git a/utils/vara-ui/src/components/modal/modal.stories.ts b/utils/vara-ui/src/components/modal/modal.stories.ts
@@ -10,8 +10,21 @@ const meta: Meta<Type> = {
 };
 
 const Default: Story = {
-  args: { heading: 'Heading', children: 'Some modal text', close: () => {} },
+  args: {
+    heading: 'Heading',
+    children: 'Some modal text',
+    close: () => {},
+  },
+};
+
+const Scroll: Story = {
+  args: {
+    heading: 'Heading',
+    children:
+      'Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text',
+    footer: 'Footer',
+  },
 };
 
 export default meta;
-export { Default };
+export { Default, Scroll };
diff --git a/utils/vara-ui/src/components/modal/modal.tsx b/utils/vara-ui/src/components/modal/modal.tsx
@@ -1,6 +1,7 @@
-import { ReactNode, useEffect, useState, MouseEvent } from 'react';
+import { ReactNode, useEffect, useState, MouseEvent, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import cx from 'clsx';
+
 import { ReactComponent as CrossSVG } from '../../assets/images/cross.svg';
 import { Button } from '../button';
 import styles from './modal.module.css';
@@ -10,10 +11,33 @@ type Props = {
   close: () => void;
   children?: ReactNode;
   className?: string;
+  footer?: ReactNode;
 };
 
-const Modal = ({ heading, close, children, className }: Props) => {
+// TODO: same as in gear-js/ui
+function useHeight() {
+  const [height, setHeight] = useState(0);
+
+  const ref = useCallback((node: HTMLDivElement | null) => {
+    if (node) setHeight(node.getBoundingClientRect().height);
+  }, []);
+
+  return [height, ref] as const;
+}
+
+function useMaxHeight() {
+  const [modalHeight, modalRef] = useHeight();
+  const [bodyHeight, bodyRef] = useHeight();
+
+  const padding = 32;
+  const bodyStyle = { maxHeight: `calc(100vh - ${modalHeight - bodyHeight + 2 * padding}px)` };
+
+  return { bodyStyle, modalRef, bodyRef };
+}
+
+const Modal = ({ heading, close, children, className, footer }: Props) => {
   const [root, setRoot] = useState<HTMLDivElement>();
+  const { bodyStyle, modalRef, bodyRef } = useMaxHeight();
 
   const handleOverlayClick = ({ target, currentTarget }: MouseEvent) => {
     if (target === currentTarget) close();
@@ -32,14 +56,20 @@ const Modal = ({ heading, close, children, className }: Props) => {
 
   const component = (
     <div className={styles.overlay} onClick={handleOverlayClick}>
-      <div className={styles.modal}>
+      <div className={styles.modal} ref={modalRef}>
         <header className={styles.header}>
           <h3 className={styles.heading}>{heading}</h3>
 
           <Button icon={CrossSVG} color="transparent" onClick={close} className={styles.button} />
         </header>
 
-        {children && <div className={cx(styles.body, className)}>{children}</div>}
+        {children && (
+          <div className={cx(styles.body, className)} style={bodyStyle} ref={bodyRef}>
+            {children}
+          </div>
+        )}
+
+        {footer && <footer className={styles.footer}>{footer}</footer>}
       </div>
     </div>
   );

diff --git a/yarn.lock b/yarn.lock
@@ -1894,7 +1894,7 @@ __metadata:
     "@polkadot/api": 10.10.1
     "@polkadot/extension-dapp": 0.46.5
     react: 18.2.0
-    react-transition-group: 4.4.5
+    react-dom: 18.2.0
   languageName: unknown
   linkType: soft