Skip to content

Commit

Permalink
Merge pull request #19 from skorphil/InstitutionTab-static
Browse files Browse the repository at this point in the history
made static InstitutionTab
  • Loading branch information
skorphil authored Feb 3, 2024
2 parents 68320f6 + 674d7c0 commit 1a1cd75
Show file tree
Hide file tree
Showing 9 changed files with 271 additions and 6 deletions.
14 changes: 12 additions & 2 deletions app/ChakraTheme.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
6 changes: 3 additions & 3 deletions app/globals.css
Original file line number Diff line number Diff line change
Expand Up @@ -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%,
Expand Down
3 changes: 3 additions & 0 deletions app/layout.jsx
Original file line number Diff line number Diff line change
@@ -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",
Expand All @@ -11,6 +13,7 @@ export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<ColorModeScript initialColorMode={theme.config.initialColorMode} />
<Providers>{children}</Providers>
</body>
</html>
Expand Down
2 changes: 1 addition & 1 deletion components/AssetContainer/AssetContainer.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
Expand Down
41 changes: 41 additions & 0 deletions components/InstitutionTab/InstitutionTab.jsx
Original file line number Diff line number Diff line change
@@ -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;
46 changes: 46 additions & 0 deletions components/InstitutionTab/InstitutionTab.module.css
Original file line number Diff line number Diff line change
@@ -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;
}
49 changes: 49 additions & 0 deletions components/InstitutionTab/InstitutionTab.stories.jsx
Original file line number Diff line number Diff line change
@@ -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",
},
};
27 changes: 27 additions & 0 deletions components/InstitutionTab/Tabs.chakra.js
Original file line number Diff line number Diff line change
@@ -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%",
},
},
},
});
89 changes: 89 additions & 0 deletions components/InstitutionTab/docs.md
Original file line number Diff line number Diff line change
@@ -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}
>
```

0 comments on commit 1a1cd75

Please sign in to comment.