added InstitutionsList ststic component

Added component
Small changes to InstitutionContainer

.storybook/preview-head.html

@@ -0,0 +1,4 @@
+<meta
+  name="viewport"
+  content="width=device-width,initial-scale=1,interactive-widget=resizes-content"
+/>

app/ChakraTheme.js

@@ -1,16 +1,19 @@
 import { extendTheme } from "@chakra-ui/react";
-
 import { createMultiStyleConfigHelpers, defineStyle } from "@chakra-ui/react";
-const { definePartsStyle, defineMultiStyleConfig } =
-  createMultiStyleConfigHelpers(["tablist", "tab"]);
+
 import { institutionTabStyle } from "../components/InstitutionTab";
-import { InstitutionsTabsListStyle } from "../components/InstitutionsTabsList/InstitutionTabsList.chakra";
+import { institutionsTabsListStyle } from "../components/InstitutionsTabsList";
+import { institutionsListStyle } from "../components/InstitutionsList";
+
+const { definePartsStyle, defineMultiStyleConfig } =
+  createMultiStyleConfigHelpers(["tablist", "tab", "root"]);
 
 const tabsVariant = defineMultiStyleConfig({
   variants: {
     grid: {
       tab: institutionTabStyle,
-      tablist: InstitutionsTabsListStyle,
+      tablist: institutionsTabsListStyle,
+      root: institutionsListStyle,
     },
   },
 });

app/hooks.js

@@ -0,0 +1,23 @@
+"use client";
+
+import { useLayoutEffect, useState } from "react";
+
+export function useVisualViewportSize() {
+  // TODO make more abstracted logic, which can distinguish between mobile device and tabs
+  const [visualViewport, setVisualViewport] = useState([0, 0]);
+  useLayoutEffect(() => {
+    function updateVisualViewportSize() {
+      setVisualViewport({
+        width: window.visualViewport.width,
+        height: window.visualViewport.height,
+      });
+    }
+    window.visualViewport.addEventListener("resize", () =>
+      setTimeout(updateVisualViewportSize, 200)
+    );
+    updateVisualViewportSize();
+    return () => window.removeEventListener("resize", updateVisualViewportSize);
+  }, []);
+
+  return visualViewport;
+}

components/InstitutionContainer/InstitutionContainer.jsx

@@ -14,7 +14,7 @@ import {
 import AssetContainer from "../AssetContainer/AssetContainer";
 import { CgMinimizeAlt } from "react-icons/cg";
 
-export default function InstitutionContainer({
+export function InstitutionContainer({
   institution,
   assetContainer,
   isExpanded,
@@ -26,11 +26,16 @@ export default function InstitutionContainer({
         pos="relative"
         spacing={isExpanded ? 8 : 4}
         borderRadius={isExpanded || "lg"}
-        margin={isExpanded || 2}
         padding={isExpanded ? 2 : 3}
         bg="whiteAlpha.50"
+        h="100%"
+        minHeight={isExpanded && "100vh"}
       >
-        {isExpanded || <Heading size="sm">CityBank</Heading>}
+        {isExpanded || (
+          <Heading flexShrink={0} size="sm">
+            {institution.name}
+          </Heading>
+        )}
         {isExpanded && (
           <HStack w="100%" align="end" spacing={3}>
             <InstitutionNameInput />
@@ -39,7 +44,7 @@ export default function InstitutionContainer({
         )}
         <AssetsList isExpanded={isExpanded} institution={institution} />
         {isExpanded || (
-          <Button variant="outline" w="100%">
+          <Button flexShrink={0} variant="outline" w="100%">
             Edit
           </Button>
         )}
@@ -74,7 +79,8 @@ const ExpandedHeader = () => {
 const AssetsList = ({ isExpanded, institution }) => {
   return (
     <VStack
-      maxHeight={isExpanded ? false : "166px"}
+      height="100%"
+      // maxHeight={isExpanded ? false : "166px"}
       w="100%"
       overflow="auto"
       spacing={isExpanded ? 6 : 2}
@@ -90,7 +96,7 @@ const AssetsList = ({ isExpanded, institution }) => {
 
       {isExpanded && (
         <>
-          <Button>Add Asset</Button>
+          <Button flexShrink={0}>Add Asset</Button>
           <ButtonGroup alignSelf="end">
             <Button variant="outline">Delete</Button>
             <Button variant="outline">Reset</Button>

components/InstitutionContainer/InstitutionContainer.stories.jsx

@@ -1,4 +1,4 @@
-import InstitutionContainer from "./InstitutionContainer";
+import { InstitutionContainer } from "./InstitutionContainer";
 
 const meta = {
   title: "RecordForm/InstitutionContainer",

components/InstitutionContainer/index.js

@@ -0,0 +1 @@
+export { InstitutionContainer } from "./InstitutionContainer";

components/InstitutionsList/InstitutionList.chakra.js

@@ -0,0 +1,4 @@
+export const institutionsListStyle = {
+  display: "flex",
+  flexDirection: "column",
+};

components/InstitutionsList/InstitutionsList.jsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { InstitutionsTabsList } from "../InstitutionsTabsList";
+import { InstitutionContainer } from "../InstitutionContainer";
+import { Tabs, TabPanels, TabPanel } from "@chakra-ui/react";
+import { useVisualViewportSize } from "../../app/hooks";
+import classes from "./InstitutionsList.module.css";
+
+function InstitutionsList({
+  institutions,
+  isExpanded,
+  simulateKeyboard = false,
+}) {
+  const { height } = useVisualViewportSize();
+  const isKeyboardOpened = simulateKeyboard || height < 650;
+
+  return (
+    <Tabs
+      // className={classes.institutionsList}
+      h={isKeyboardOpened && height}
+      // display="flex"
+      // flexDir="column"
+      variant="grid"
+      padding={isExpanded || 2}
+    >
+      <TabPanels flexGrow={isKeyboardOpened && 1} flexShrink={1} minH="200px">
+        {institutions.map((institution, index) => (
+          <TabPanel
+            p={0}
+            key={"tab-panel-" + index}
+            h={isKeyboardOpened ? "100%" : "230px"}
+          >
+            <InstitutionContainer
+              isExpanded={isExpanded}
+              institution={institution}
+            />
+          </TabPanel>
+        ))}
+      </TabPanels>
+      {isExpanded || (
+        <InstitutionsTabsList
+          simulateKeyboard={isKeyboardOpened}
+          institutions={institutions}
+        />
+      )}
+    </Tabs>
+  );
+}
+
+export { InstitutionsList };

components/InstitutionsList/InstitutionsList.stories.jsx

@@ -0,0 +1,100 @@
+import { InstitutionsList } from "./InstitutionsList";
+
+const meta = {
+  title: "RecordForm/InstitutionsList",
+  component: InstitutionsList,
+};
+export default meta;
+
+export const Default = {
+  args: {
+    simulateKeyboard: false,
+    isExpanded: false,
+    institutions: [
+      {
+        name: "City Bank",
+        country: "it",
+        assets: [
+          {
+            amount: 10000,
+            currency: "usd",
+            isEarning: false,
+            description: "My Visa debit card",
+          },
+          {
+            amount: 300000,
+            currency: "eur",
+            isEarning: true,
+            description: "My Deposit",
+          },
+          {
+            amount: 1000,
+            currency: "cny",
+            isEarning: true,
+            description: "",
+          },
+          {
+            amount: 5000,
+            currency: "chf",
+            isEarning: false,
+            description: "",
+          },
+        ],
+      },
+      {
+        name: "Wells & Fargo",
+        country: "",
+        assets: [
+          {
+            amount: 6443,
+            currency: "brl",
+            isEarning: false,
+            description: "Debit card",
+          },
+          {
+            amount: 8765,
+            currency: "eur",
+            isEarning: true,
+            description: "My Deposit",
+          },
+          {
+            amount: 1234,
+            currency: "cny",
+            isEarning: true,
+            description: "",
+          },
+        ],
+      },
+      {
+        name: "Bank Of America",
+        country: "",
+        assets: [
+          {
+            amount: 1700,
+            currency: "usd",
+            isEarning: false,
+            description: "My Visa debit card",
+          },
+          {
+            amount: 376000,
+            currency: "usd",
+            isEarning: true,
+            description: "My Deposit",
+          },
+        ],
+      },
+      {
+        name: "Raiffeisen Bank",
+        country: "",
+        assets: [
+          {
+            amount: 888,
+            currency: "usd",
+            isEarning: false,
+            description: "My Visa debit card",
+          },
+        ],
+      },
+    ],
+  },
+};

components/InstitutionsList/index.js

@@ -0,0 +1,2 @@
+export { InstitutionsList } from "./InstitutionsList";
+export { institutionsListStyle } from "./InstitutionList.chakra";

components/InstitutionsTabsList/InstitutionsTabsList.chakra.js

@@ -0,0 +1,3 @@
+export const institutionsTabsListStyle = {
+  display: "grid",
+};

components/InstitutionsTabsList/InstitutionsTabsList.jsx

@@ -9,11 +9,12 @@ import {
   Box,
   IconButton,
 } from "@chakra-ui/react";
-import { useLayoutEffect, useState } from "react";
+
 import classes from "./InstitutionsTabsList.module.css";
 import { CgMathPlus } from "react-icons/cg";
+import { useVisualViewportSize } from "../../app/hooks";
 
-export default function InstitutionsTabsList({
+export function InstitutionsTabsList({
   institutions,
   simulateKeyboard = false,
 }) {
@@ -22,33 +23,31 @@ export default function InstitutionsTabsList({
     simulateKeyboard || (window.innerHeight - height > 200 ? true : false);
 
   return (
-    <>
-      <Tabs variant="grid" my={isKeyboardOpened || 3}>
-        {isKeyboardOpened || <Heading>Institutions</Heading>}
-        <Box
-          overflowX={isKeyboardOpened && "auto"}
-          px={isKeyboardOpened && 2}
-          py={2}
+    <Box my={isKeyboardOpened || 3}>
+      {isKeyboardOpened || <Heading size="md">Record Institutions</Heading>}
+      <Box
+        overflowX={isKeyboardOpened && "auto"}
+        px={isKeyboardOpened && 2}
+        py={2}
+      >
+        <TabList
+          key="tablist"
+          className={`${classes.grid} ${isKeyboardOpened ? classes.collapsed : classes.expanded}`}
         >
-          <TabList
-            key="tablist"
-            className={`${classes.grid} ${isKeyboardOpened ? classes.collapsed : classes.expanded}`}
-          >
-            {institutions.map((institution, id) => (
-              <InstitutionTab
-                width={isKeyboardOpened && "180px"}
-                key={`institutionTab-${id}`}
-                name={institution.name}
-                state="new"
-              />
-            ))}
-            {isKeyboardOpened
-              ? newInstitutionButtonCollapsed
-              : newInstitutionButtonExpanded}
-          </TabList>
-        </Box>
-      </Tabs>
-    </>
+          {institutions.map((institution, id) => (
+            <InstitutionTab
+              width={isKeyboardOpened && "180px"}
+              key={`institutionTab-${id}`}
+              name={institution.name}
+              state="new"
+            />
+          ))}
+          {isKeyboardOpened
+            ? newInstitutionButtonCollapsed
+            : newInstitutionButtonExpanded}
+        </TabList>
+      </Box>
+    </Box>
   );
 }
 
@@ -67,21 +66,3 @@ const newInstitutionButtonCollapsed = (
     icon={<CgMathPlus />}
   />
 );
-
-function useVisualViewportSize() {
-  // TODO make more abstracted logic, which can distinguish between mobile device and tabs
-  const [visualViewport, setVisualViewport] = useState([0, 0]);
-  useLayoutEffect(() => {
-    function updateVisualViewportSize() {
-      setVisualViewport({
-        width: window.visualViewport.width,
-        height: window.visualViewport.height,
-      });
-    }
-    window.visualViewport.addEventListener("resize", updateVisualViewportSize);
-    updateVisualViewportSize();
-    return () => window.removeEventListener("resize", updateVisualViewportSize);
-  }, []);
-
-  return visualViewport;
-}

components/InstitutionsTabsList/InstitutionsTabsList.stories.jsx

@@ -1,12 +1,15 @@
-import InstitutionsTabsList from "./InstitutionsTabsList";
+import { Tabs } from "@chakra-ui/react";
+import { InstitutionsTabsList } from "./InstitutionsTabsList";
 
 export default {
   title: "RecordForm/InstitutionsTabsList",
   component: InstitutionsTabsList,
   decorators: [
     (Story) => (
       <>
-        <Story />
+        <Tabs variant="grid">
+          <Story />
+        </Tabs>
         <input type="text" placeholder="test keyboard" />
       </>
     ),