diff --git a/app/ChakraTheme.js b/app/ChakraTheme.js
index 84ee169..60acee4 100644
--- a/app/ChakraTheme.js
+++ b/app/ChakraTheme.js
@@ -2,6 +2,7 @@
// 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 = {
@@ -9,7 +10,16 @@ const config = {
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
index f4bd77c..07a3ff7 100644
--- 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
index f07f761..fdfd7b3 100644
--- 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 (
+
{children}
diff --git a/components/AssetContainer/AssetContainer.jsx b/components/AssetContainer/AssetContainer.jsx
index 6404409..f7d7812 100644
--- a/components/AssetContainer/AssetContainer.jsx
+++ b/components/AssetContainer/AssetContainer.jsx
@@ -26,7 +26,7 @@ export default function AssetContainer({ asset, isExpanded }) {
{isExpanded && Amount}
setAmount(parse(val))}
- value={numFormat(asset.amount)}
+ value={numFormat(asset?.amount ?? 0)}
name="amount"
>
diff --git a/components/InstitutionTab/InstitutionTab.jsx b/components/InstitutionTab/InstitutionTab.jsx
new file mode 100644
index 0000000..467ecfe
--- /dev/null
+++ 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
+ ) => (
+
+ {name}
+
+
+ )
+);
+
+function TabRightSection({ state, isDeleted }) {
+ if (isDeleted) {
+ return (
+ }
+ />
+ );
+ } else if (state === "updated" || state === "new") {
+ return (
+
+ {state === "updated" ? "UPD" : "NEW"}
+
+ );
+ } else return false;
+}
+
+export default IntitutionTab;
diff --git a/components/InstitutionTab/InstitutionTab.module.css b/components/InstitutionTab/InstitutionTab.module.css
new file mode 100644
index 0000000..715c965
--- /dev/null
+++ 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;
+}
\ No newline at end of file
diff --git a/components/InstitutionTab/InstitutionTab.stories.jsx b/components/InstitutionTab/InstitutionTab.stories.jsx
new file mode 100644
index 0000000..cac72ba
--- /dev/null
+++ 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) => (
+
+
+
+
+
+
+ ),
+ ],
+};
+
+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
new file mode 100644
index 0000000..74d6278
--- /dev/null
+++ 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
new file mode 100644
index 0000000..f790fb7
--- /dev/null
+++ 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) => (
+
+ Custom Tab
+
+));
+...
+
+```
+
+```js
+const IntitutionTab = forwardRef(
+ (
+ { name = "Unnamed institution", isDeleted = false, state = null, ...props },
+ ref
+ ) => {
+...
+
+```
\ No newline at end of file