made static InstitutionTab

used forwardRef, chakra's theme, css module
skorphil · Feb 3, 2024 · 674d7c0 · 674d7c0
1 parent 68320f6
commit 674d7c0
Show file tree

Hide file tree

Showing 9 changed files with 271 additions and 6 deletions.
diff --git a/app/ChakraTheme.js b/app/ChakraTheme.js
@@ -2,14 +2,24 @@
 
 // 1. import `extendTheme` function
 import { extendTheme } from "@chakra-ui/react";
+import { tabsTheme } from "../components/InstitutionTab/Tabs.chakra";
 
 // 2. Add your color mode config
 const config = {
   initialColorMode: "dark",
   useSystemColorMode: false,
 };
 
-// 3. extend the theme
-const theme = extendTheme({ config });
+const tab = {
+  // how to style complex components?
+};
 
+// 3. extend the theme
+const theme = extendTheme({
+  config,
+  components: {
+    Tabs: tabsTheme,
+  },
+});
+console.log(theme);
 export default theme;
diff --git a/app/globals.css b/app/globals.css
@@ -5,9 +5,9 @@
     "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",
     "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
 
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
+  --foreground-rgb: 230, 230, 230;
+  --background-start-rgb: 26, 32, 44;
+  --background-end-rgb: 26, 32, 44;
 
   --primary-glow: conic-gradient(
     from 180deg at 50% 50%,

diff --git a/app/layout.jsx b/app/layout.jsx
@@ -1,6 +1,8 @@
 import { Inter } from "next/font/google";
 import "./globals.css";
 import { Providers } from "./providers";
+import { ColorModeScript } from "@chakra-ui/react";
+import theme from "./ChakraTheme";
 
 export const metadata = {
   title: "Create Next App",
@@ -11,6 +13,7 @@ export default function RootLayout({ children }) {
   return (
     <html lang="en">
       <body>
+        <ColorModeScript initialColorMode={theme.config.initialColorMode} />
         <Providers>{children}</Providers>
       </body>
     </html>

diff --git a/components/AssetContainer/AssetContainer.jsx b/components/AssetContainer/AssetContainer.jsx
@@ -26,7 +26,7 @@ export default function AssetContainer({ asset, isExpanded }) {
         {isExpanded && <FormLabel>Amount</FormLabel>}
         <NumberInput
           onChange={(val) => setAmount(parse(val))}
-          value={numFormat(asset.amount)}
+          value={numFormat(asset?.amount ?? 0)}
           name="amount"
         >
           <NumberInputField px={2} />

diff --git a/components/InstitutionTab/InstitutionTab.jsx b/components/InstitutionTab/InstitutionTab.jsx
@@ -0,0 +1,41 @@
+import { IconButton, Tab, forwardRef, Box } from "@chakra-ui/react";
+import { CgUndo } from "react-icons/cg";
+import classes from "./InstitutionTab.module.css";
+
+const IntitutionTab = forwardRef(
+  (
+    { name = "Unnamed institution", isDeleted = false, state = null, ...props },
+    ref
+  ) => (
+    <Tab
+      isDisabled={isDeleted}
+      className={`${classes.tab} ${isDeleted && classes.deleted}`}
+      ref={ref}
+      {...props}
+    >
+      <Box className={classes.tabName}>{name}</Box>
+      <TabRightSection state={state} isDeleted={isDeleted} />
+    </Tab>
+  )
+);
+
+function TabRightSection({ state, isDeleted }) {
+  if (isDeleted) {
+    return (
+      <IconButton
+        marginRight={-4}
+        variant="ghost"
+        aria-label="Restore institution"
+        icon={<CgUndo className={classes.deleteIcon} />}
+      />
+    );
+  } else if (state === "updated" || state === "new") {
+    return (
+      <Box className={classes.stateIcon} marginRight={-2}>
+        {state === "updated" ? "UPD" : "NEW"}
+      </Box>
+    );
+  } else return false;
+}
+
+export default IntitutionTab;
diff --git a/components/InstitutionTab/InstitutionTab.module.css b/components/InstitutionTab/InstitutionTab.module.css
@@ -0,0 +1,46 @@
+.deleted {
+    text-decoration: line-through;
+    color: var(--chakra-colors-gray-500);
+}
+
+.deleteIcon {
+    width: var(--chakra-sizes-6);
+    height: var(--chakra-sizes-6);
+
+    color: var(--chakra-colors-gray-300);
+
+    pointer-events: auto;
+
+}
+
+.stateIcon {
+    flex-shrink: 0;
+    width: var(--chakra-sizes-7);
+    padding: 2px;
+
+    font-weight: var(--chakra-fontWeights-extrabold);
+    font-size: var(--chakra-fontSizes-2xs);
+    color:var(--chakra-colors-black);
+
+    border-radius: var(--chakra-radii-base);
+    background-color: var(--chakra-colors-gray-500);
+}
+
+.tab {
+    justify-content: space-between;
+    height: var(--chakra-sizes-10);
+    padding-left: var(--chakra-sizes-1);
+    gap: var(--chakra-sizes-3);
+
+    text-overflow:ellipsis;
+    white-space:nowrap;
+
+    border-radius: var(--chakra-radii-lg);  
+}
+
+.tabName {
+    flex-shrink: 1;
+    max-width: 100%;
+    min-width: var(--chakra-sizes-1);
+    overflow: hidden;
+}
diff --git a/components/InstitutionTab/InstitutionTab.stories.jsx b/components/InstitutionTab/InstitutionTab.stories.jsx
@@ -0,0 +1,49 @@
+import InstitutionTab from "./InstitutionTab";
+import { Tabs, TabList } from "@chakra-ui/react";
+
+export default {
+  title: "RecordForm/InstitutionTab",
+  component: InstitutionTab,
+  decorators: [
+    (Story) => (
+      <Tabs variant="grid">
+        <TabList>
+          <Story />
+          <Story />
+        </TabList>
+      </Tabs>
+    ),
+  ],
+};
+
+export const Default = {
+  args: {
+    isDeleted: false,
+    state: null,
+    name: "Wells & Fargo",
+  },
+};
+
+export const Updated = {
+  args: {
+    isDeleted: false,
+    state: "updated",
+    name: "Wells & Fargo",
+  },
+};
+
+export const New = {
+  args: {
+    isDeleted: false,
+    state: "new",
+    name: "Wells & Fargo",
+  },
+};
+
+export const Deleted = {
+  args: {
+    isDeleted: true,
+    state: "updated",
+    name: "Wells & Fargo",
+  },
+};
diff --git a/components/InstitutionTab/Tabs.chakra.js b/components/InstitutionTab/Tabs.chakra.js
@@ -0,0 +1,27 @@
+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/docs.md b/components/InstitutionTab/docs.md
@@ -0,0 +1,89 @@
+## Altering components style in chakra ui
+[Build your own design system with chakraui | Youtube](https://youtu.be/epJuxo8FKFA?si=UEmVtkfPLerimLkN&t=1210)
+
+The fundamental approach:
+1. Create components style file, according to Chakra style API
+2. Use methods `definePartsStyle`, `defineMultiStyleConfig`
+3. extend chacra's `theme` appending component styles with `extendTheme` ([theme.js](app/ChakraTheme.js))
+4. pass `theme` as prop to `ChakraProvider`
+
+
+Tabs is a multipart component - [chackra docs | styling-multipart-components](https://chakra-ui.com/docs/styled-system/component-style#styling-multipart-components) and require `definePartsStyle`, `defineMultiStyleConfig` methods
+
+
+- [ ] How to use props do be passed to styles?
+
+Chakra tab custom styles
+```js
+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: "flex-start",
+      },
+      tablist: {
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fit, minmax(100px,1fr))",
+        gap: "3",
+        w: "100%",
+      },
+    },
+  },
+});
+```
+
+
+ChakraTheme.js
+```js
+import { tabsTheme } from "../components/InstitutionTab/Tabs.chakra";
+...
+const theme = extendTheme({
+  config,
+  components: {
+    Tabs: tabsTheme,
+  },
+});
+
+export default theme;
+```
+
+
+## ForwardRef to extend component
+`forwardRef` https://chakra-ui.com/community/recipes/as-prop#option-1-using-forwardref-from-chakra-uireact
+
+Seems to work
+
+```js
+const IntitutionTab = forwardRef((props, ref) => (
+  <Tab px="4" py="5" rounded="sm" shadow="lg" ref={ref} {...props}>
+    Custom Tab
+  </Tab>
+));
+...
+<IntitutionTab bg="red" />
+```
+
+```js
+const IntitutionTab = forwardRef(
+  (
+    { name = "Unnamed institution", isDeleted = false, state = null, ...props },
+    ref
+  ) => {
+...
+<Tab
+        isDisabled={isDeleted}
+        paddingRight={rightSection && 1}
+        className={`${classes.tab} ${isDeleted && classes.deleted}`}
+        ref={ref}
+        {...props}
+      >
+```