Merge branch 'main' into chore/docs_remove_subdirdocs

kadena-community · Oct 10, 2023 · 0f4b56c · 0f4b56c
2 parents 62548aa + 6cf0c27
commit 0f4b56c
Show file tree

Hide file tree

Showing 27 changed files with 194 additions and 103 deletions.
diff --git a/.changeset/hungry-eels-tie.md b/.changeset/hungry-eels-tie.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/.changeset/lovely-boxes-brake.md b/.changeset/lovely-boxes-brake.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/.changeset/nine-fireants-wonder.md b/.changeset/nine-fireants-wonder.md
@@ -0,0 +1,5 @@
+---
+'@kadena/react-ui': minor
+---
+
+Added variant and inline props to Notification component
diff --git a/.changeset/old-trains-pretend.md b/.changeset/old-trains-pretend.md
@@ -0,0 +1,5 @@
+---
+'@kadena/docs': minor
+---
+
+fix the render of sidemenu with hydration issues
diff --git a/packages/apps/docs/src/components/Blog/BlogItem/BlogItem.tsx b/packages/apps/docs/src/components/Blog/BlogItem/BlogItem.tsx
@@ -46,6 +46,7 @@ export const BlogItem: FC<IProps> = ({ item, size = 'default' }) => {
                     fill
                     style={{ objectFit: 'cover' }}
                     alt={item.title}
+                    sizes="100%"
                   />
                 )}
               </figure>

diff --git a/packages/apps/docs/src/components/BlogPostsStrip/StripItem.tsx b/packages/apps/docs/src/components/BlogPostsStrip/StripItem.tsx
@@ -31,6 +31,7 @@ export const StripItem: FC<IProps> = ({ post }) => {
                 src={post.headerImage}
                 fill
                 style={{ objectFit: 'cover' }}
+                sizes="100%"
                 alt={post.title}
               />
             ) : (

diff --git a/packages/apps/docs/src/components/BottomPageSection/components/Subscribe.tsx b/packages/apps/docs/src/components/BottomPageSection/components/Subscribe.tsx
@@ -51,14 +51,14 @@ export const Subscribe: FC = () => {
             </form>
 
             {Boolean(message) && (
-              <Notification.Root color="warning" expanded>
+              <Notification.Root color="warning" expanded variant="outlined">
                 {message}
               </Notification.Root>
             )}
           </>
         ) : (
           Boolean(message) && (
-            <Notification.Root color="positive" expanded>
+            <Notification.Root color="positive" expanded variant="outlined">
               {message}
             </Notification.Root>
           )

diff --git a/packages/apps/docs/src/components/Layout/components/Template/Template.tsx b/packages/apps/docs/src/components/Layout/components/Template/Template.tsx
@@ -26,7 +26,7 @@ export const Template: FC<IProps> = ({
   hideSideMenu = false,
 }) => {
   const { isMenuOpen, closeMenu } = useMenu();
-  const isMediumDevice = useMedia(breakpoints.md);
+  const isMediumDevice = useMedia(breakpoints.md, true);
   const [{ y }] = useWindowScroll();
   const mainContentRef = useRef<HTMLDivElement>(null);
   const [initialTopSpacing, setInitialTopSpacing] = useState('');
@@ -41,6 +41,7 @@ export const Template: FC<IProps> = ({
     const paddingTop = getComputedStyle(
       mainContentRef.current as HTMLDivElement,
     )?.paddingTop;
+
     // When we get css from computed style it comes with `px` suffix
     const onlyValue = paddingTop.split('px')[0];
     setInitialTopSpacing(onlyValue);
@@ -62,7 +63,7 @@ export const Template: FC<IProps> = ({
     //  to maintain the scrolling effect
     const paddingValue = parseInt(initialTopSpacing) - (y || 0);
 
-    if (paddingValue <= 0) return;
+    if (paddingValue <= 0 || isNaN(paddingValue)) return;
     setStyle({
       paddingTop: paddingValue,
     });

diff --git a/packages/apps/docs/src/components/Markdown/MDNotification/MDNotification.tsx b/packages/apps/docs/src/components/Markdown/MDNotification/MDNotification.tsx
@@ -22,6 +22,7 @@ export const MDNotification: FC<IProps> = ({ children, title = '', label }) => {
         title={title}
         expanded
         icon={getIcon(label)}
+        variant="outlined"
       >
         {children}
       </Notification.Root>

diff --git a/packages/apps/docs/src/components/Search/components/SearchResults.tsx b/packages/apps/docs/src/components/Search/components/SearchResults.tsx
@@ -104,6 +104,7 @@ export const SearchResults: FC<IProps> = ({
                 color={'negative'}
                 expanded={true}
                 icon="AlertBox"
+                variant="outlined"
               >
                 {semanticError}
               </Notification.Root>

diff --git a/packages/apps/docs/src/hooks/useMediaQuery.ts b/packages/apps/docs/src/hooks/useMediaQuery.ts
@@ -4,7 +4,9 @@ import { useEffect, useState } from 'react';
 
 const useMediaQuery = (queryName: keyof typeof breakpoints): boolean => {
   const query = breakpoints[queryName];
-  const getMatches = (query: string): boolean => {
+  const getMatches = (
+    query: (typeof breakpoints)[keyof typeof breakpoints],
+  ): boolean => {
     // Prevents SSR issues
     if (typeof window !== 'undefined') {
       return window.matchMedia(query).matches;

diff --git a/packages/apps/docs/src/hooks/useWindowScroll.ts b/packages/apps/docs/src/hooks/useWindowScroll.ts
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 
 export function useWindowScroll(): [
   {
@@ -11,7 +11,7 @@ export function useWindowScroll(): [
     y: 0,
   });
 
-  React.useLayoutEffect((): (() => void) => {
+  useEffect((): (() => void) => {
     const handleScroll = (): void => {
       setState({ x: window.scrollX, y: window.scrollY });
     };

diff --git a/packages/apps/graph-client/src/pages/event/[key].tsx b/packages/apps/graph-client/src/pages/event/[key].tsx
@@ -45,7 +45,7 @@ const Event: React.FC = () => {
           )}
 
           {error && (
-            <Notification.Root color="negative" icon="Close">
+            <Notification.Root color="negative" icon="Close" variant="outlined">
               Unknown error:
               <br />
               <br />

diff --git a/packages/apps/graph-client/src/pages/transaction/[key].tsx b/packages/apps/graph-client/src/pages/transaction/[key].tsx
@@ -43,7 +43,7 @@ const RequestKey: React.FC = () => {
             </div>
           )}
           {error && (
-            <Notification.Root color="negative" icon="Close">
+            <Notification.Root color="negative" icon="Close" variant="outlined">
               Unknown error:
               <br />
               <br />
@@ -58,20 +58,28 @@ const RequestKey: React.FC = () => {
               {/* center content inside the div */}
               <div style={{ display: 'flex', justifyContent: 'center' }}>
                 {transactionSubscription?.transaction?.badResult && (
-                  <Notification.Root color="negative" icon="Close">
+                  <Notification.Root
+                    color="negative"
+                    icon="Close"
+                    variant="outlined"
+                  >
                     Transaction failed with status:{' '}
                     {typeof transactionSubscription?.transaction?.badResult}
                   </Notification.Root>
                 )}
                 {transactionSubscription?.transaction?.goodResult && (
-                  <Notification.Root color="positive" icon="Check">
+                  <Notification.Root
+                    color="positive"
+                    icon="Check"
+                    variant="outlined"
+                  >
                     Transaction succeeded with status:{' '}
                     {transactionSubscription?.transaction?.goodResult}
                   </Notification.Root>
                 )}
                 {!transactionSubscription?.transaction?.goodResult &&
                   !transactionSubscription?.transaction?.badResult && (
-                    <Notification.Root color="warning">
+                    <Notification.Root color="warning" variant="outlined">
                       Unknown transaction status
                     </Notification.Root>
                   )}

diff --git a/packages/apps/tools/src/components/Global/FormStatusNotification/index.tsx b/packages/apps/tools/src/components/Global/FormStatusNotification/index.tsx
@@ -84,6 +84,7 @@ export const FormStatusNotification: FC<IFormStatusNotificationProps> = (
         expanded
         title={title ?? titles[status!]}
         onClose={onNotificationCloseClick}
+        variant="outlined"
       >
         {body ?? bodies[status!]}
         {children}

diff --git a/packages/apps/tools/src/pages/faucet/existing/index.tsx b/packages/apps/tools/src/pages/faucet/existing/index.tsx
@@ -146,6 +146,7 @@ const ExistingAccountFaucetPage: FC = () => {
             title={t(
               `The Faucet is not available on Mainnet. On other networks, the Faucet smart contract must be deployed to fund accounts. In the Module Explorer you can see if it's deployed: https://tools.kadena.io/transactions/module-explorer?module=user.coin-faucet&chain=1`,
             )}
+            variant="outlined"
           />
         ) : null}
       </div>

diff --git a/packages/apps/tools/src/pages/transactions/cross-chain-transfer-tracker/index.tsx b/packages/apps/tools/src/pages/transactions/cross-chain-transfer-tracker/index.tsx
@@ -218,6 +218,7 @@ const CrossChainTransferTracker: FC = () => {
             }}
             title="Warning"
             icon={'AlertBox'}
+            variant="outlined"
           >
             {txError}
             <Notification.Actions>

diff --git a/packages/libs/react-ui/package.json b/packages/libs/react-ui/package.json
@@ -49,6 +49,7 @@
     "classnames": "^2.3.1",
     "css-loader": "~6.8.1",
     "focus-trap-react": "~10.2.1",
+    "lodash.mapvalues": "^4.6.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
@@ -84,6 +85,7 @@
     "@testing-library/react": "~14.0.0",
     "@testing-library/user-event": "~14.4.3",
     "@types/jest": "^29.5.3",
+    "@types/lodash.mapvalues": "^4.6.7",
     "@types/node": "^18.17.14",
     "@types/react": "^18.2.15",
     "@types/react-dom": "18.2.7",

diff --git a/packages/libs/react-ui/src/components/Grid/Grid.css.ts b/packages/libs/react-ui/src/components/Grid/Grid.css.ts
@@ -1,6 +1,7 @@
 /* eslint @typescript-eslint/naming-convention: 0 */
 import { breakpoints, sprinkles } from '@theme/sprinkles.css';
 import { style, styleVariants } from '@vanilla-extract/css';
+import mapValues from 'lodash.mapvalues';
 
 export const gridContainerClass = style([
   {
@@ -55,12 +56,20 @@ const columnCount: Record<number, number> = {
   12: 12,
 };
 
-const containerColumnVariantsArray = Object.keys(breakpoints).map((key) => {
+export const containerColumnVariants = mapValues(breakpoints, (mediaQuery) => {
   return styleVariants(columnCount, (count) => {
+    if (mediaQuery === '') {
+      return [
+        {
+          gridTemplateColumns: `repeat(${count}, minmax(0, 1fr))`,
+        },
+      ];
+    }
+
     return [
       {
         '@media': {
-          [breakpoints[key]]: {
+          [mediaQuery]: {
             gridTemplateColumns: `repeat(${count}, minmax(0, 1fr))`,
           },
         },
@@ -69,30 +78,20 @@ const containerColumnVariantsArray = Object.keys(breakpoints).map((key) => {
   });
 });
 
-export const explicitColumnVariant = styleVariants(columnCount, (count) => {
-  return [
-    {
-      gridTemplateColumns: `repeat(${count}, minmax(0, 1fr))`,
-    },
-  ];
-});
-
-export type ResponsiveVariant = Record<string, Record<number, string>>;
-
-export const containerColumnVariants: ResponsiveVariant = {
-  sm: containerColumnVariantsArray[0],
-  md: containerColumnVariantsArray[1],
-  lg: containerColumnVariantsArray[2],
-  xl: containerColumnVariantsArray[3],
-  xxl: containerColumnVariantsArray[4],
-};
-
-const itemColumnVariantsArray = Object.keys(breakpoints).map((key) => {
+export const itemColumnVariants = mapValues(breakpoints, (mediaQuery) => {
   return styleVariants(columnCount, (count) => {
+    if (mediaQuery === '') {
+      return [
+        {
+          gridColumn: `span ${count}`,
+        },
+      ];
+    }
+
     return [
       {
         '@media': {
-          [breakpoints[key]]: {
+          [mediaQuery]: {
             gridColumn: `span ${count}`,
           },
         },
@@ -101,22 +100,6 @@ const itemColumnVariantsArray = Object.keys(breakpoints).map((key) => {
   });
 });
 
-export const explicitItemColumnVariant = styleVariants(columnCount, (count) => {
-  return [
-    {
-      gridColumn: `span ${count}`,
-    },
-  ];
-});
-
-export const itemColumnVariants: ResponsiveVariant = {
-  sm: itemColumnVariantsArray[0],
-  md: itemColumnVariantsArray[1],
-  lg: itemColumnVariantsArray[2],
-  xl: itemColumnVariantsArray[3],
-  xxl: itemColumnVariantsArray[4],
-};
-
 export type ResponsiveInputType =
   | number
-  | Record<keyof typeof breakpoints, keyof typeof columnCount>;
+  | Partial<Record<keyof typeof breakpoints, keyof typeof columnCount>>;
diff --git a/packages/libs/react-ui/src/components/Grid/Grid.stories.tsx b/packages/libs/react-ui/src/components/Grid/Grid.stories.tsx
@@ -5,7 +5,9 @@ import { ContentClass } from './stories.css';
 
 import { Grid } from '@components/Grid';
 import type { Meta, StoryObj } from '@storybook/react';
+import { sprinkles } from '@theme/sprinkles.css';
 import { vars } from '@theme/vars.css';
+import classNames from 'classnames';
 import React from 'react';
 
 const selectOptions: (keyof typeof vars.sizes | undefined)[] = [
@@ -39,6 +41,7 @@ const meta: Meta<
       control: { type: 'object' },
       description: 'Defines the number of columns.',
       options: {
+        xs: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
         sm: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
         md: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
         lg: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
@@ -50,6 +53,7 @@ const meta: Meta<
       control: { type: 'object' },
       description: 'Defines the column span.',
       options: {
+        xs: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
         sm: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
         md: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
         lg: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
@@ -191,6 +195,7 @@ export const GridRoot: Story = {
   args: {
     gap: '$xl',
     columns: {
+      xs: 1,
       sm: 2,
       md: 4,
       lg: 6,
@@ -287,19 +292,30 @@ export const GridItem: Story = {
     gap: '$xl',
     columns: 12,
     columnSpan: {
-      sm: 2,
-      md: 4,
-      lg: 6,
-      xl: 10,
-      xxl: 12,
+      xs: 5,
+      sm: 10,
+      md: 6,
+      lg: 4,
+      xl: 2,
+      xxl: 1,
     },
   },
   render: ({ gap, columns, columnSpan }) => (
     <>
       <Grid.Root gap={gap} columns={columns}>
-        {Array.from(new Array(12)).map((empty, i) => (
-          <Grid.Item key={i} columnSpan={columnSpan}>
-            <div className={ContentClass}>{i}</div>
+        <Grid.Item columnSpan={columnSpan}>
+          <div
+            className={classNames(
+              ContentClass,
+              sprinkles({ bg: '$primaryAccent' }),
+            )}
+          >
+            dynamic
+          </div>
+        </Grid.Item>
+        {Array.from(new Array(12)).map((_, i) => (
+          <Grid.Item key={i} columnSpan={1}>
+            <div className={ContentClass}>1</div>
           </Grid.Item>
         ))}
       </Grid.Root>