diff --git a/app/ChakraTheme.js b/app/ChakraTheme.js index 60acee4..52a04ef 100644 --- a/app/ChakraTheme.js +++ b/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; diff --git a/components/InstitutionTab/InstitutionTab.chakra.js b/components/InstitutionTab/InstitutionTab.chakra.js new file mode 100644 index 0000000..65af597 --- /dev/null +++ b/components/InstitutionTab/InstitutionTab.chakra.js @@ -0,0 +1,10 @@ +export const institutionTabStyle = { + borderRadius: "base", + _selected: { + bg: "black", + }, + justifyContent: "space-between", + _disabled: { + opacity: "1", + }, +}; diff --git a/components/InstitutionTab/InstitutionTab.jsx b/components/InstitutionTab/InstitutionTab.jsx index 467ecfe..8c5b948 100644 --- a/components/InstitutionTab/InstitutionTab.jsx +++ b/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; diff --git a/components/InstitutionTab/InstitutionTab.stories.jsx b/components/InstitutionTab/InstitutionTab.stories.jsx index cac72ba..7869b99 100644 --- a/components/InstitutionTab/InstitutionTab.stories.jsx +++ b/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 { diff --git a/components/InstitutionTab/Tabs.chakra.js b/components/InstitutionTab/Tabs.chakra.js deleted file mode 100644 index 74d6278..0000000 --- a/components/InstitutionTab/Tabs.chakra.js +++ /dev/null @@ -1,27 +0,0 @@ -import { createMultiStyleConfigHelpers, defineStyle } from "@chakra-ui/react"; - -const { definePartsStyle, defineMultiStyleConfig } = - createMultiStyleConfigHelpers(["tablist", "tab"]); - -export const tabsTheme = defineMultiStyleConfig({ - variants: { - grid: { - tab: { - borderRadius: "base", - _selected: { - bg: "black", - }, - justifyContent: "space-between", - _disabled: { - opacity: "1", - }, - }, - tablist: { - display: "grid", - gridTemplateColumns: "repeat(auto-fit, minmax(100px,1fr))", - gap: "3", - w: "100%", - }, - }, - }, -}); diff --git a/components/InstitutionTab/index.js b/components/InstitutionTab/index.js new file mode 100644 index 0000000..4f2e6fd --- /dev/null +++ b/components/InstitutionTab/index.js @@ -0,0 +1,2 @@ +export { InstitutionTab } from "./InstitutionTab"; +export { institutionTabStyle } from "./InstitutionTab.chakra"; diff --git a/components/InstitutionsTabsList/InstitutionTabsList.chakra.js b/components/InstitutionsTabsList/InstitutionTabsList.chakra.js new file mode 100644 index 0000000..8ef34c6 --- /dev/null +++ b/components/InstitutionsTabsList/InstitutionTabsList.chakra.js @@ -0,0 +1,3 @@ +export const InstitutionsTabsListStyle = { + display: "grid", +}; diff --git a/components/InstitutionsTabsList/InstitutionsTabsList.jsx b/components/InstitutionsTabsList/InstitutionsTabsList.jsx new file mode 100644 index 0000000..23a42e3 --- /dev/null +++ b/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 ( + <> + + {isKeyboardOpened || Institutions} + + + {institutions.map((institution, id) => ( + + ))} + {isKeyboardOpened + ? newInstitutionButtonCollapsed + : newInstitutionButtonExpanded} + + + + + ); +} + +const newInstitutionButtonExpanded = ( + +); + +const newInstitutionButtonCollapsed = ( + } + /> +); + +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; +} diff --git a/components/InstitutionsTabsList/InstitutionsTabsList.module.css b/components/InstitutionsTabsList/InstitutionsTabsList.module.css new file mode 100644 index 0000000..3d0fe51 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/components/InstitutionsTabsList/InstitutionsTabsList.stories.jsx b/components/InstitutionsTabsList/InstitutionsTabsList.stories.jsx new file mode 100644 index 0000000..3879568 --- /dev/null +++ b/components/InstitutionsTabsList/InstitutionsTabsList.stories.jsx @@ -0,0 +1,42 @@ +import InstitutionsTabsList from "./InstitutionsTabsList"; + +export default { + title: "RecordForm/InstitutionsTabsList", + component: InstitutionsTabsList, + decorators: [ + (Story) => ( + <> + + + + ), + ], +}; + +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: [], + }, + ], + }, +}; diff --git a/components/InstitutionsTabsList/index.js b/components/InstitutionsTabsList/index.js new file mode 100644 index 0000000..4c7ebfd --- /dev/null +++ b/components/InstitutionsTabsList/index.js @@ -0,0 +1,2 @@ +export { InstitutionsTabsList } from "./InstitutionsTabsList"; +export { InstitutionsTabsListStyle } from "./InstitutionTabsList.chakra";