Merge pull request #21 from skorphil/static-tablist

Made static InstitutionsTabsList

app/ChakraTheme.js

@@ -1,25 +1,30 @@
-// theme.js
-
-// 1. import `extendTheme` function
 import { extendTheme } from "@chakra-ui/react";
-import { tabsTheme } from "../components/InstitutionTab/Tabs.chakra";
 
-// 2. Add your color mode config
+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";
+
+const tabsVariant = defineMultiStyleConfig({
+  variants: {
+    grid: {
+      tab: institutionTabStyle,
+      tablist: InstitutionsTabsListStyle,
+    },
+  },
+});
+
 const config = {
   initialColorMode: "dark",
   useSystemColorMode: false,
 };
 
-const tab = {
-  // how to style complex components?
-};
-
-// 3. extend the theme
 const theme = extendTheme({
   config,
   components: {
-    Tabs: tabsTheme,
+    Tabs: tabsVariant,
   },
 });
-console.log(theme);
+// console.log(theme);
 export default theme;

components/InstitutionTab/InstitutionTab.chakra.js

@@ -0,0 +1,10 @@
+export const institutionTabStyle = {
+  borderRadius: "base",
+  _selected: {
+    bg: "black",
+  },
+  justifyContent: "space-between",
+  _disabled: {
+    opacity: "1",
+  },
+};

components/InstitutionTab/InstitutionTab.jsx

@@ -2,7 +2,7 @@ import { IconButton, Tab, forwardRef, Box } from "@chakra-ui/react";
 import { CgUndo } from "react-icons/cg";
 import classes from "./InstitutionTab.module.css";
 
-const IntitutionTab = forwardRef(
+export const InstitutionTab = forwardRef(
   (
     { name = "Unnamed institution", isDeleted = false, state = null, ...props },
     ref
@@ -37,5 +37,3 @@ function TabRightSection({ state, isDeleted }) {
     );
   } else return false;
 }
-
-export default IntitutionTab;

components/InstitutionTab/InstitutionTab.stories.jsx

@@ -1,4 +1,4 @@
-import InstitutionTab from "./InstitutionTab";
+import { InstitutionTab } from "./InstitutionTab";
 import { Tabs, TabList } from "@chakra-ui/react";
 
 export default {

components/InstitutionTab/index.js

@@ -0,0 +1,2 @@
+export { InstitutionTab } from "./InstitutionTab";
+export { institutionTabStyle } from "./InstitutionTab.chakra";

components/InstitutionsTabsList/InstitutionTabsList.chakra.js

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

components/InstitutionsTabsList/InstitutionsTabsList.jsx

@@ -0,0 +1,87 @@
+"use client";
+
+import { InstitutionTab } from "../InstitutionTab";
+import {
+  Tabs,
+  TabList,
+  Heading,
+  Button,
+  Box,
+  IconButton,
+} from "@chakra-ui/react";
+import { useLayoutEffect, useState } from "react";
+import classes from "./InstitutionsTabsList.module.css";
+import { CgMathPlus } from "react-icons/cg";
+
+export default function InstitutionsTabsList({
+  institutions,
+  simulateKeyboard = false,
+}) {
+  const { height } = useVisualViewportSize();
+  const isKeyboardOpened =
+    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}
+        >
+          <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>
+    </>
+  );
+}
+
+const newInstitutionButtonExpanded = (
+  <Button variant="outline">
+    <Box as="span" overflow="hidden">
+      Add institution
+    </Box>
+  </Button>
+);
+
+const newInstitutionButtonCollapsed = (
+  <IconButton
+    variant="outline"
+    aria-label="Add institution"
+    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.module.css

@@ -0,0 +1,14 @@
+.grid {
+    gap: var(--chakra-sizes-3)
+    /* display property is overriden with flex by chakra theme, 
+    so specified grid there (InstitutionTabsList.chakra.js) */
+}
+
+.expanded {
+    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+}
+
+.collapsed {
+    grid-auto-flow: column;
+    width: fit-content;
+}

components/InstitutionsTabsList/InstitutionsTabsList.stories.jsx

@@ -0,0 +1,42 @@
+import InstitutionsTabsList from "./InstitutionsTabsList";
+
+export default {
+  title: "RecordForm/InstitutionsTabsList",
+  component: InstitutionsTabsList,
+  decorators: [
+    (Story) => (
+      <>
+        <Story />
+        <input type="text" placeholder="test keyboard" />
+      </>
+    ),
+  ],
+};
+
+export const Default = {
+  args: {
+    simulateKeyboard: false,
+    institutions: [
+      {
+        name: "City Bank",
+        country: "it",
+        assets: [],
+      },
+      {
+        name: "Wells & Fargo",
+        country: "",
+        assets: [],
+      },
+      {
+        name: "Bank Of America",
+        country: "",
+        assets: [],
+      },
+      {
+        name: "Raiffeisen Bank",
+        country: "",
+        assets: [],
+      },
+    ],
+  },
+};

components/InstitutionsTabsList/index.js

@@ -0,0 +1,2 @@
+export { InstitutionsTabsList } from "./InstitutionsTabsList";
+export { InstitutionsTabsListStyle } from "./InstitutionTabsList.chakra";