From a676646c68457d29c350210e3327da60670e7d35 Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Tue, 1 Aug 2023 11:26:36 +0200 Subject: [PATCH 01/47] feat: add Logo component --- .../react-ui/src/components/Logo/index.tsx | 27 +++++++++ .../react-ui/src/components/Logo/readme.md | 2 + .../src/components/Logo/variants/Kadena.tsx | 51 +++++++++++++++++ .../Logo/variants/KadenaDevTools.tsx | 55 +++++++++++++++++++ .../components/Logo/variants/KadenaDocs.tsx | 55 +++++++++++++++++++ 5 files changed, 190 insertions(+) create mode 100644 packages/libs/react-ui/src/components/Logo/index.tsx create mode 100644 packages/libs/react-ui/src/components/Logo/readme.md create mode 100644 packages/libs/react-ui/src/components/Logo/variants/Kadena.tsx create mode 100644 packages/libs/react-ui/src/components/Logo/variants/KadenaDevTools.tsx create mode 100644 packages/libs/react-ui/src/components/Logo/variants/KadenaDocs.tsx diff --git a/packages/libs/react-ui/src/components/Logo/index.tsx b/packages/libs/react-ui/src/components/Logo/index.tsx new file mode 100644 index 0000000000..b0a42df187 --- /dev/null +++ b/packages/libs/react-ui/src/components/Logo/index.tsx @@ -0,0 +1,27 @@ +import { KadenaLogo } from './variants/Kadena'; +import { KadenaDevToolsLogo } from './variants/KadenaDevTools'; +import { KadenaDocsLogo } from './variants/KadenaDocs'; + +import React, { FC, SVGProps } from 'react'; + +type LogoVariant = 'default' | 'DevTools' | 'Docs'; + +const renderSwitch = ( + logo: LogoVariant = 'default', +): FC> => { + switch (logo) { + case 'Docs': + return KadenaDocsLogo; + case 'DevTools': + return KadenaDevToolsLogo; + default: + return KadenaLogo; + } +}; + +const Logo: FC<{ variant?: LogoVariant }> = ({ variant }) => { + const LogoComponent = renderSwitch(variant); + return ; +}; + +export default Logo; diff --git a/packages/libs/react-ui/src/components/Logo/readme.md b/packages/libs/react-ui/src/components/Logo/readme.md new file mode 100644 index 0000000000..b06600de10 --- /dev/null +++ b/packages/libs/react-ui/src/components/Logo/readme.md @@ -0,0 +1,2 @@ +This is just an idea. +Todo: finetune this and add all the logos etc. diff --git a/packages/libs/react-ui/src/components/Logo/variants/Kadena.tsx b/packages/libs/react-ui/src/components/Logo/variants/Kadena.tsx new file mode 100644 index 0000000000..5be8768362 --- /dev/null +++ b/packages/libs/react-ui/src/components/Logo/variants/Kadena.tsx @@ -0,0 +1,51 @@ +import * as React from 'react'; +import { SVGProps } from 'react'; + +export const KadenaLogo: React.FC> = () => ( + + + + + + + + + + + + + + + + + + + + +); diff --git a/packages/libs/react-ui/src/components/Logo/variants/KadenaDevTools.tsx b/packages/libs/react-ui/src/components/Logo/variants/KadenaDevTools.tsx new file mode 100644 index 0000000000..f5e44c5082 --- /dev/null +++ b/packages/libs/react-ui/src/components/Logo/variants/KadenaDevTools.tsx @@ -0,0 +1,55 @@ +import * as React from 'react'; +import { SVGProps } from 'react'; + +const KadenaDevToolsLogo: React.FC> = () => ( + + + + + + + + + + + + + + + + +); + +export { KadenaDevToolsLogo }; diff --git a/packages/libs/react-ui/src/components/Logo/variants/KadenaDocs.tsx b/packages/libs/react-ui/src/components/Logo/variants/KadenaDocs.tsx new file mode 100644 index 0000000000..4e10582343 --- /dev/null +++ b/packages/libs/react-ui/src/components/Logo/variants/KadenaDocs.tsx @@ -0,0 +1,55 @@ +import * as React from 'react'; +import { SVGProps } from 'react'; + +const KadenaDocsLogo: React.FC> = () => ( + + + + + + + + + + + + + + + + +); + +export { KadenaDocsLogo }; From 9ef5805fea9de4a992c38736c1a5d6ddfa5d3b5d Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Tue, 1 Aug 2023 13:07:17 +0200 Subject: [PATCH 02/47] feat: export logo variants --- packages/libs/react-ui/src/components/Logo/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/libs/react-ui/src/components/Logo/index.tsx b/packages/libs/react-ui/src/components/Logo/index.tsx index b0a42df187..f20e1ab0ef 100644 --- a/packages/libs/react-ui/src/components/Logo/index.tsx +++ b/packages/libs/react-ui/src/components/Logo/index.tsx @@ -4,7 +4,7 @@ import { KadenaDocsLogo } from './variants/KadenaDocs'; import React, { FC, SVGProps } from 'react'; -type LogoVariant = 'default' | 'DevTools' | 'Docs'; +export type LogoVariant = 'default' | 'DevTools' | 'Docs'; const renderSwitch = ( logo: LogoVariant = 'default', From 055b3a1b83a5f42d68fcaf66675c24bf4201dbc8 Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Tue, 1 Aug 2023 13:07:51 +0200 Subject: [PATCH 03/47] feat: navHeader --- .../src/components/NavHeader/NavHeader.css.ts | 64 ++++++++++++++ .../NavHeader/NavHeader.stories.tsx | 88 +++++++++++++++++++ .../components/NavHeader/NavHeader.test.tsx | 0 .../src/components/NavHeader/NavHeader.tsx | 17 ++++ .../components/NavHeader/NavHeaderLink.tsx | 22 +++++ .../components/NavHeader/NavHeaderLogo.tsx | 21 +++++ .../src/components/NavHeader/index.ts | 22 +++++ 7 files changed, 234 insertions(+) create mode 100644 packages/libs/react-ui/src/components/NavHeader/NavHeader.css.ts create mode 100644 packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx create mode 100644 packages/libs/react-ui/src/components/NavHeader/NavHeader.test.tsx create mode 100644 packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx create mode 100644 packages/libs/react-ui/src/components/NavHeader/NavHeaderLink.tsx create mode 100644 packages/libs/react-ui/src/components/NavHeader/NavHeaderLogo.tsx create mode 100644 packages/libs/react-ui/src/components/NavHeader/index.ts diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.css.ts b/packages/libs/react-ui/src/components/NavHeader/NavHeader.css.ts new file mode 100644 index 0000000000..e2f8cd2705 --- /dev/null +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeader.css.ts @@ -0,0 +1,64 @@ +import { sprinkles, vars } from '../../styles'; + +import { style } from '@vanilla-extract/css'; + +export const containerClass = style([ + sprinkles({ + alignItems: 'stretch', + backgroundColor: '$gray90', + display: 'flex', + flexDirection: 'row', + flexWrap: 'nowrap', + justifyContent: 'flex-start', + }), + { + selectors: { + '&:hover': { + textDecoration: 'none', + }, + '&:active': { + color: vars.colors.$negativeContrast, + }, + }, + }, +]); + +export const logoClass = style([ + sprinkles({ + display: 'flex', + marginRight: '$8', + }), +]); + +export const navClass = style([ + sprinkles({ + alignItems: 'stretch', + display: 'flex', + justifyContent: 'center', + }), +]); + +export const linkClass = style([ + sprinkles({ + alignItems: 'center', + color: '$gray40', + display: 'flex', + fontSize: '$sm', + marginRight: '$10', + marginX: '$1', + textDecoration: 'none', + }), + { + alignSelf: 'center', + }, + { + selectors: { + '&:hover': { + textDecoration: 'none', + }, + '&:active': { + textDecoration: 'none', + }, + }, + }, +]); diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx new file mode 100644 index 0000000000..f02b33b210 --- /dev/null +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx @@ -0,0 +1,88 @@ +import type { INavHeaderContainerProps } from './NavHeader'; +import { navClass } from './NavHeader.css'; +import { Target } from './NavHeaderLink'; +import { INavHeaderLogoProps } from './NavHeaderLogo'; +import { NavHeader } from './'; + +import type { LogoVariant } from '@components/Logo'; +import type { Meta, StoryObj } from '@storybook/react'; +import React from 'react'; + +type StoryProps = { linksCount: number } & INavHeaderContainerProps & + INavHeaderLogoProps; + +const links: { title: string; href: string; target?: Target }[] = [ + { + title: 'Faucet', + href: '/faucet', + }, + { + title: 'Transactions', + href: '/transactions', + }, + { + title: 'Balance', + href: '/balance', + }, +]; + +const meta: Meta = { + title: 'NavHeader', + parameters: { + controls: { + hideNoControlsWarning: true, + sort: 'requiredFirst', + }, + }, + argTypes: { + brand: { + options: ['default', 'DevTools', 'Docs'] as LogoVariant[], + control: { + type: 'select', + }, + }, + linksCount: { + control: { type: 'range', min: 1, max: links.length, step: 1 }, + }, + }, +}; + +type Story = StoryObj; + +export const Dynamic: Story = { + name: 'NavHeader', + args: { brand: 'default', linksCount: links.length }, + render: ({ brand, linksCount }) => { + const navItems = links.slice(0, linksCount); + return ( + + + + {/* Home + About + Contact */} + {/* + Hello World */} + + ); + }, +}; + +export default meta; diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.test.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeader.test.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx new file mode 100644 index 0000000000..93c6b83f8f --- /dev/null +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx @@ -0,0 +1,17 @@ +import { containerClass } from './NavHeader.css'; + +import React, { FC } from 'react'; + +export interface INavHeaderContainerProps { + children: React.ReactNode; +} + +export const NavHeaderContainer: FC = ({ + children, +}) => { + return ( +
+ {children} +
+ ); +}; diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeaderLink.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeaderLink.tsx new file mode 100644 index 0000000000..3b7b7fcfdb --- /dev/null +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeaderLink.tsx @@ -0,0 +1,22 @@ +import { linkClass } from './NavHeader.css'; + +import React, { FC } from 'react'; + +export type Target = '_self' | '_blank'; +export interface INavHeaderLinkProps { + title: string; + href: string; + target?: Target; +} + +export const NavHeaderLink: FC = ({ + title, + href, + target = '_self', +}) => { + return ( + + {title} + + ); +}; diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeaderLogo.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeaderLogo.tsx new file mode 100644 index 0000000000..d246639913 --- /dev/null +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeaderLogo.tsx @@ -0,0 +1,21 @@ +import { logoClass } from './NavHeader.css'; + +import { Link } from '@components/Link'; +import Logo, { LogoVariant } from '@components/Logo'; +import React, { FC } from 'react'; + +export interface INavHeaderLogoProps { + brand?: LogoVariant; +} + +export const NavHeaderLogo: FC = ({ + brand = 'default', +}) => { + return ( +
+ + + +
+ ); +}; diff --git a/packages/libs/react-ui/src/components/NavHeader/index.ts b/packages/libs/react-ui/src/components/NavHeader/index.ts new file mode 100644 index 0000000000..d1928a585f --- /dev/null +++ b/packages/libs/react-ui/src/components/NavHeader/index.ts @@ -0,0 +1,22 @@ +import type { INavHeaderContainerProps } from './NavHeader'; +import { NavHeaderContainer } from './NavHeader'; +import type { INavHeaderLinkProps } from './NavHeaderLink'; +import { NavHeaderLink } from './NavHeaderLink'; +import type { INavHeaderLogoProps } from './NavHeaderLogo'; +import { NavHeaderLogo } from './NavHeaderLogo'; + +import { FC } from 'react'; + +export type { INavHeaderContainerProps }; + +interface INavHeader { + Root: FC; + Logo: FC; + Link: FC; +} + +export const NavHeader: INavHeader = { + Root: NavHeaderContainer, + Logo: NavHeaderLogo, + Link: NavHeaderLink, +}; From cc326573f752a21db661000e53aaaad5446c6517 Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Tue, 1 Aug 2023 13:17:51 +0200 Subject: [PATCH 04/47] feat: add nav item selector styles --- .../src/components/NavHeader/NavHeader.css.ts | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.css.ts b/packages/libs/react-ui/src/components/NavHeader/NavHeader.css.ts index e2f8cd2705..df5132fbb0 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeader.css.ts +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeader.css.ts @@ -26,7 +26,7 @@ export const containerClass = style([ export const logoClass = style([ sprinkles({ display: 'flex', - marginRight: '$8', + marginRight: '$6', }), ]); @@ -41,22 +41,31 @@ export const navClass = style([ export const linkClass = style([ sprinkles({ alignItems: 'center', + borderRadius: '$sm', color: '$gray40', display: 'flex', fontSize: '$sm', - marginRight: '$10', + marginRight: '$6', marginX: '$1', textDecoration: 'none', }), { alignSelf: 'center', + padding: '4px 8px 4px 4px', }, { selectors: { '&:hover': { + color: vars.colors.$white, + textDecoration: 'none', + }, + '&:focus': { + color: vars.colors.$blue40, textDecoration: 'none', }, '&:active': { + color: vars.colors.$gray90, + backgroundColor: vars.colors.$white, textDecoration: 'none', }, }, From 884b53414953bcf5ce6db9d0b4774cb2bd231f1c Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Tue, 1 Aug 2023 13:30:40 +0200 Subject: [PATCH 05/47] fix: remove unnecessary ts-ignore --- .../src/components/NavFooter/FooterLink.tsx | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/packages/libs/react-ui/src/components/NavFooter/FooterLink.tsx b/packages/libs/react-ui/src/components/NavFooter/FooterLink.tsx index 6663f24ad7..44b18c40e8 100644 --- a/packages/libs/react-ui/src/components/NavFooter/FooterLink.tsx +++ b/packages/libs/react-ui/src/components/NavFooter/FooterLink.tsx @@ -14,11 +14,16 @@ export const FooterLink: FC = ({ children }) => { }; const clones = React.Children.map(children, (child) => { - // @ts-ignore - return React.cloneElement(child, { - classNames: [linkClass], - style: colorStyles, - }); + return React.cloneElement( + child as React.ReactElement< + any, + string | React.JSXElementConstructor + >, + { + className: [linkClass], + style: colorStyles, + }, + ); }); return ( From b793fe5f44740acbac43e558b27fefca97c42a21 Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Tue, 1 Aug 2023 13:30:57 +0200 Subject: [PATCH 06/47] feat: add basic test --- .../src/components/NavHeader/NavHeader.test.tsx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.test.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeader.test.tsx index e69de29bb2..8f9aa7c132 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeader.test.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeader.test.tsx @@ -0,0 +1,14 @@ +import { NavHeader } from '@components/NavHeader'; +import { render } from '@testing-library/react'; +import React from 'react'; + +describe('NavHeader', () => { + it('renders correctly', () => { + const { getByTestId } = render( + Hello, Header!, + ); + + const navHeaderContainer = getByTestId('kda-navheader'); + expect(navHeaderContainer).toBeInTheDocument(); + }); +}); From 6528c12473d2d401b4eb037ddc1b5daf49010542 Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Tue, 1 Aug 2023 13:52:08 +0200 Subject: [PATCH 07/47] refactor: keep things simple... --- .../NavHeader/NavHeader.stories.tsx | 52 +++++-------------- .../components/NavHeader/NavHeader.test.tsx | 2 +- .../src/components/NavHeader/NavHeader.tsx | 36 ++++++++++--- .../components/NavHeader/NavHeaderLink.tsx | 22 -------- .../components/NavHeader/NavHeaderLogo.tsx | 21 -------- .../src/components/NavHeader/index.ts | 24 +-------- 6 files changed, 47 insertions(+), 110 deletions(-) delete mode 100644 packages/libs/react-ui/src/components/NavHeader/NavHeaderLink.tsx delete mode 100644 packages/libs/react-ui/src/components/NavHeader/NavHeaderLogo.tsx diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx index f02b33b210..eaabdb1f0b 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx @@ -1,17 +1,13 @@ -import type { INavHeaderContainerProps } from './NavHeader'; -import { navClass } from './NavHeader.css'; -import { Target } from './NavHeaderLink'; -import { INavHeaderLogoProps } from './NavHeaderLogo'; +import type { INavHeaderProps, INavItemTarget } from './NavHeader'; import { NavHeader } from './'; import type { LogoVariant } from '@components/Logo'; import type { Meta, StoryObj } from '@storybook/react'; import React from 'react'; -type StoryProps = { linksCount: number } & INavHeaderContainerProps & - INavHeaderLogoProps; +type StoryProps = { linksCount: number } & INavHeaderProps; -const links: { title: string; href: string; target?: Target }[] = [ +const items: { title: string; href: string; target?: INavItemTarget }[] = [ { title: 'Faucet', href: '/faucet', @@ -27,12 +23,17 @@ const links: { title: string; href: string; target?: Target }[] = [ ]; const meta: Meta = { - title: 'NavHeader', + title: 'Navigation/NavHeader', parameters: { controls: { hideNoControlsWarning: true, sort: 'requiredFirst', }, + docs: { + description: { + component: 'Note: maximum navigation items is currently limited.\n\nPending design update to support more items.' + }, + }, }, argTypes: { brand: { @@ -42,7 +43,7 @@ const meta: Meta = { }, }, linksCount: { - control: { type: 'range', min: 1, max: links.length, step: 1 }, + control: { type: 'range', min: 1, max: items.length, step: 1 }, }, }, }; @@ -51,36 +52,11 @@ type Story = StoryObj; export const Dynamic: Story = { name: 'NavHeader', - args: { brand: 'default', linksCount: links.length }, - render: ({ brand, linksCount }) => { - const navItems = links.slice(0, linksCount); + args: { brand: 'default', linksCount: items.length }, + render: ({ brand, linksCount } ) => { + const navItems = items.slice(0, linksCount); return ( - - - - {/* Home - About - Contact */} - {/* - Hello World */} - + ); }, }; diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.test.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeader.test.tsx index 8f9aa7c132..567a1001f9 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeader.test.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeader.test.tsx @@ -5,7 +5,7 @@ import React from 'react'; describe('NavHeader', () => { it('renders correctly', () => { const { getByTestId } = render( - Hello, Header!, + , ); const navHeaderContainer = getByTestId('kda-navheader'); diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx index 93c6b83f8f..4b1f8e34fc 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx @@ -1,17 +1,41 @@ -import { containerClass } from './NavHeader.css'; +import { Link } from '@components/Link'; +import { containerClass, linkClass, logoClass, navClass } from './NavHeader.css'; import React, { FC } from 'react'; +import Logo, { LogoVariant } from '@components/Logo'; -export interface INavHeaderContainerProps { - children: React.ReactNode; +export type INavItemTarget = '_self' | '_blank'; +export type INavItems = { title: string; href: string; target?: INavItemTarget }[]; + +export interface INavHeaderProps { + // children: React.ReactNode; + brand?: LogoVariant; + items?: INavItems; } -export const NavHeaderContainer: FC = ({ - children, + +export const NavHeader: FC = ({ + // children, + brand, + items, }) => { return (
- {children} +
+ + + +
+
); }; diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeaderLink.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeaderLink.tsx deleted file mode 100644 index 3b7b7fcfdb..0000000000 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeaderLink.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { linkClass } from './NavHeader.css'; - -import React, { FC } from 'react'; - -export type Target = '_self' | '_blank'; -export interface INavHeaderLinkProps { - title: string; - href: string; - target?: Target; -} - -export const NavHeaderLink: FC = ({ - title, - href, - target = '_self', -}) => { - return ( - - {title} - - ); -}; diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeaderLogo.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeaderLogo.tsx deleted file mode 100644 index d246639913..0000000000 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeaderLogo.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { logoClass } from './NavHeader.css'; - -import { Link } from '@components/Link'; -import Logo, { LogoVariant } from '@components/Logo'; -import React, { FC } from 'react'; - -export interface INavHeaderLogoProps { - brand?: LogoVariant; -} - -export const NavHeaderLogo: FC = ({ - brand = 'default', -}) => { - return ( -
- - - -
- ); -}; diff --git a/packages/libs/react-ui/src/components/NavHeader/index.ts b/packages/libs/react-ui/src/components/NavHeader/index.ts index d1928a585f..e4bf19be27 100644 --- a/packages/libs/react-ui/src/components/NavHeader/index.ts +++ b/packages/libs/react-ui/src/components/NavHeader/index.ts @@ -1,22 +1,2 @@ -import type { INavHeaderContainerProps } from './NavHeader'; -import { NavHeaderContainer } from './NavHeader'; -import type { INavHeaderLinkProps } from './NavHeaderLink'; -import { NavHeaderLink } from './NavHeaderLink'; -import type { INavHeaderLogoProps } from './NavHeaderLogo'; -import { NavHeaderLogo } from './NavHeaderLogo'; - -import { FC } from 'react'; - -export type { INavHeaderContainerProps }; - -interface INavHeader { - Root: FC; - Logo: FC; - Link: FC; -} - -export const NavHeader: INavHeader = { - Root: NavHeaderContainer, - Logo: NavHeaderLogo, - Link: NavHeaderLink, -}; +export type { INavHeaderProps } from './NavHeader'; +export { NavHeader } from './NavHeader'; From 504eaaf05f13bb53612c93e63a6774636f3a1c86 Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Tue, 1 Aug 2023 14:00:37 +0200 Subject: [PATCH 08/47] refactor: single source for Logo variants --- packages/libs/react-ui/src/components/Logo/index.tsx | 1 + .../src/components/NavHeader/NavHeader.stories.tsx | 9 ++++++--- .../libs/react-ui/src/components/NavHeader/NavHeader.tsx | 6 ++---- 3 files changed, 9 insertions(+), 7 deletions(-) diff --git a/packages/libs/react-ui/src/components/Logo/index.tsx b/packages/libs/react-ui/src/components/Logo/index.tsx index f20e1ab0ef..121f3fa969 100644 --- a/packages/libs/react-ui/src/components/Logo/index.tsx +++ b/packages/libs/react-ui/src/components/Logo/index.tsx @@ -5,6 +5,7 @@ import { KadenaDocsLogo } from './variants/KadenaDocs'; import React, { FC, SVGProps } from 'react'; export type LogoVariant = 'default' | 'DevTools' | 'Docs'; +export const logoVariants = ['default', 'DevTools', 'Docs'] as LogoVariant[] const renderSwitch = ( logo: LogoVariant = 'default', diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx index eaabdb1f0b..9e4564dd9e 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx @@ -1,7 +1,7 @@ import type { INavHeaderProps, INavItemTarget } from './NavHeader'; import { NavHeader } from './'; -import type { LogoVariant } from '@components/Logo'; +import { logoVariants } from '@components/Logo'; import type { Meta, StoryObj } from '@storybook/react'; import React from 'react'; @@ -37,10 +37,13 @@ const meta: Meta = { }, argTypes: { brand: { - options: ['default', 'DevTools', 'Docs'] as LogoVariant[], + options: logoVariants, control: { type: 'select', }, + table: { + defaultValue: { summary: logoVariants[0] }, + } }, linksCount: { control: { type: 'range', min: 1, max: items.length, step: 1 }, @@ -52,7 +55,7 @@ type Story = StoryObj; export const Dynamic: Story = { name: 'NavHeader', - args: { brand: 'default', linksCount: items.length }, + args: { brand: logoVariants[0], linksCount: items.length }, render: ({ brand, linksCount } ) => { const navItems = items.slice(0, linksCount); return ( diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx index 4b1f8e34fc..f8031af69a 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx @@ -2,21 +2,19 @@ import { Link } from '@components/Link'; import { containerClass, linkClass, logoClass, navClass } from './NavHeader.css'; import React, { FC } from 'react'; -import Logo, { LogoVariant } from '@components/Logo'; +import Logo, { LogoVariant, logoVariants } from '@components/Logo'; export type INavItemTarget = '_self' | '_blank'; export type INavItems = { title: string; href: string; target?: INavItemTarget }[]; export interface INavHeaderProps { - // children: React.ReactNode; brand?: LogoVariant; items?: INavItems; } export const NavHeader: FC = ({ - // children, - brand, + brand = logoVariants[0], items, }) => { return ( From a0117ad726dd8b2b2c60e4cb4e1cd67519e88250 Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Tue, 1 Aug 2023 14:04:13 +0200 Subject: [PATCH 09/47] refactor: tidy up --- .../components/NavHeader/NavHeader.stories.tsx | 15 +++++++-------- .../src/components/NavHeader/NavHeader.tsx | 3 ++- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx index 9e4564dd9e..d1c8d50c57 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx @@ -1,13 +1,11 @@ -import type { INavHeaderProps, INavItemTarget } from './NavHeader'; +import type { INavHeaderProps, INavItems } from './NavHeader'; import { NavHeader } from './'; import { logoVariants } from '@components/Logo'; import type { Meta, StoryObj } from '@storybook/react'; import React from 'react'; -type StoryProps = { linksCount: number } & INavHeaderProps; - -const items: { title: string; href: string; target?: INavItemTarget }[] = [ +const navItems: INavItems = [ { title: 'Faucet', href: '/faucet', @@ -22,6 +20,8 @@ const items: { title: string; href: string; target?: INavItemTarget }[] = [ }, ]; +type StoryProps = { linksCount: number } & INavHeaderProps; + const meta: Meta = { title: 'Navigation/NavHeader', parameters: { @@ -46,7 +46,7 @@ const meta: Meta = { } }, linksCount: { - control: { type: 'range', min: 1, max: items.length, step: 1 }, + control: { type: 'range', min: 1, max: navItems.length, step: 1 }, }, }, }; @@ -55,11 +55,10 @@ type Story = StoryObj; export const Dynamic: Story = { name: 'NavHeader', - args: { brand: logoVariants[0], linksCount: items.length }, + args: { brand: logoVariants[0], linksCount: navItems.length }, render: ({ brand, linksCount } ) => { - const navItems = items.slice(0, linksCount); return ( - + ); }, }; diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx index f8031af69a..0aef8ef46b 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx @@ -5,7 +5,8 @@ import React, { FC } from 'react'; import Logo, { LogoVariant, logoVariants } from '@components/Logo'; export type INavItemTarget = '_self' | '_blank'; -export type INavItems = { title: string; href: string; target?: INavItemTarget }[]; +export type INavItem = { title: string; href: string; target?: INavItemTarget }; +export type INavItems = INavItem[]; export interface INavHeaderProps { brand?: LogoVariant; From 63c9164e80fc2cc7aa3e252b27c1a95045025be0 Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Tue, 1 Aug 2023 14:05:49 +0200 Subject: [PATCH 10/47] chore: Logo readme update --- packages/libs/react-ui/src/components/Logo/readme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/libs/react-ui/src/components/Logo/readme.md b/packages/libs/react-ui/src/components/Logo/readme.md index b06600de10..c4b163b81b 100644 --- a/packages/libs/react-ui/src/components/Logo/readme.md +++ b/packages/libs/react-ui/src/components/Logo/readme.md @@ -1,2 +1,2 @@ -This is just an idea. +This is just an idea to ensure we all get the brand logos from the same source and can easily maintain them and ensure their quality. Todo: finetune this and add all the logos etc. From 88c1980c589aeea0cba4358b3b88606c82e10333 Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Tue, 1 Aug 2023 14:10:45 +0200 Subject: [PATCH 11/47] style: tweak size and margins --- .../libs/react-ui/src/components/NavHeader/NavHeader.css.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.css.ts b/packages/libs/react-ui/src/components/NavHeader/NavHeader.css.ts index df5132fbb0..6168210081 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeader.css.ts +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeader.css.ts @@ -9,6 +9,7 @@ export const containerClass = style([ display: 'flex', flexDirection: 'row', flexWrap: 'nowrap', + height: '$16', justifyContent: 'flex-start', }), { @@ -27,7 +28,11 @@ export const logoClass = style([ sprinkles({ display: 'flex', marginRight: '$6', + marginLeft: '$3' }), + { + alignSelf: 'center' + } ]); export const navClass = style([ From 9b0f2430b31bd361601532beab748b82ab9fdd16 Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Tue, 1 Aug 2023 14:42:48 +0200 Subject: [PATCH 12/47] chore: formatting (prettier) --- .../react-ui/src/components/Logo/index.tsx | 2 +- .../react-ui/src/components/Logo/readme.md | 5 ++- .../src/components/NavHeader/NavHeader.css.ts | 6 +-- .../NavHeader/NavHeader.stories.tsx | 15 ++++---- .../components/NavHeader/NavHeader.test.tsx | 4 +- .../src/components/NavHeader/NavHeader.tsx | 37 ++++++++++++------- 6 files changed, 39 insertions(+), 30 deletions(-) diff --git a/packages/libs/react-ui/src/components/Logo/index.tsx b/packages/libs/react-ui/src/components/Logo/index.tsx index 121f3fa969..b1de41b03f 100644 --- a/packages/libs/react-ui/src/components/Logo/index.tsx +++ b/packages/libs/react-ui/src/components/Logo/index.tsx @@ -5,7 +5,7 @@ import { KadenaDocsLogo } from './variants/KadenaDocs'; import React, { FC, SVGProps } from 'react'; export type LogoVariant = 'default' | 'DevTools' | 'Docs'; -export const logoVariants = ['default', 'DevTools', 'Docs'] as LogoVariant[] +export const logoVariants = ['default', 'DevTools', 'Docs'] as LogoVariant[]; const renderSwitch = ( logo: LogoVariant = 'default', diff --git a/packages/libs/react-ui/src/components/Logo/readme.md b/packages/libs/react-ui/src/components/Logo/readme.md index c4b163b81b..f41015254f 100644 --- a/packages/libs/react-ui/src/components/Logo/readme.md +++ b/packages/libs/react-ui/src/components/Logo/readme.md @@ -1,2 +1,3 @@ -This is just an idea to ensure we all get the brand logos from the same source and can easily maintain them and ensure their quality. -Todo: finetune this and add all the logos etc. +This is just an idea to ensure we all get the brand logos from the same source +and can easily maintain them and ensure their quality. Todo: finetune this and +add all the logos etc. diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.css.ts b/packages/libs/react-ui/src/components/NavHeader/NavHeader.css.ts index 6168210081..c0e27c1888 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeader.css.ts +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeader.css.ts @@ -28,11 +28,11 @@ export const logoClass = style([ sprinkles({ display: 'flex', marginRight: '$6', - marginLeft: '$3' + marginLeft: '$3', }), { - alignSelf: 'center' - } + alignSelf: 'center', + }, ]); export const navClass = style([ diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx index d1c8d50c57..d49db8b5d5 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx @@ -31,22 +31,25 @@ const meta: Meta = { }, docs: { description: { - component: 'Note: maximum navigation items is currently limited.\n\nPending design update to support more items.' + component: + 'Note: maximum navigation items is currently limited.\n\nPending design update to support more items.', }, }, }, argTypes: { brand: { - options: logoVariants, control: { type: 'select', }, + description: 'Logo variant', + options: logoVariants, table: { defaultValue: { summary: logoVariants[0] }, - } + }, }, linksCount: { control: { type: 'range', min: 1, max: navItems.length, step: 1 }, + description: 'Sample navigation items', }, }, }; @@ -56,10 +59,8 @@ type Story = StoryObj; export const Dynamic: Story = { name: 'NavHeader', args: { brand: logoVariants[0], linksCount: navItems.length }, - render: ({ brand, linksCount } ) => { - return ( - - ); + render: ({ brand, linksCount }) => { + return ; }, }; diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.test.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeader.test.tsx index 567a1001f9..9184da4272 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeader.test.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeader.test.tsx @@ -4,9 +4,7 @@ import React from 'react'; describe('NavHeader', () => { it('renders correctly', () => { - const { getByTestId } = render( - , - ); + const { getByTestId } = render(); const navHeaderContainer = getByTestId('kda-navheader'); expect(navHeaderContainer).toBeInTheDocument(); diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx index 0aef8ef46b..6d4bb753d4 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx @@ -1,5 +1,10 @@ import { Link } from '@components/Link'; -import { containerClass, linkClass, logoClass, navClass } from './NavHeader.css'; +import { + containerClass, + linkClass, + logoClass, + navClass, +} from './NavHeader.css'; import React, { FC } from 'react'; import Logo, { LogoVariant, logoVariants } from '@components/Logo'; @@ -13,7 +18,6 @@ export interface INavHeaderProps { items?: INavItems; } - export const NavHeader: FC = ({ brand = logoVariants[0], items, @@ -21,19 +25,24 @@ export const NavHeader: FC = ({ return (
- - - -
+ + + +
); From 29223ff19287f00228934993127778d09f3b13ef Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Tue, 1 Aug 2023 16:38:46 +0200 Subject: [PATCH 13/47] feat: add optional children sample --- .../src/components/NavHeader/NavHeader.css.ts | 14 +++++++++- .../NavHeader/NavHeader.stories.children.tsx | 19 +++++++++++++ .../NavHeader/NavHeader.stories.tsx | 28 +++++++++++++------ .../src/components/NavHeader/NavHeader.tsx | 12 ++++++-- 4 files changed, 61 insertions(+), 12 deletions(-) create mode 100644 packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.children.tsx diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.css.ts b/packages/libs/react-ui/src/components/NavHeader/NavHeader.css.ts index c0e27c1888..98d7698fea 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeader.css.ts +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeader.css.ts @@ -6,6 +6,7 @@ export const containerClass = style([ sprinkles({ alignItems: 'stretch', backgroundColor: '$gray90', + color: '$gray40', display: 'flex', flexDirection: 'row', flexWrap: 'nowrap', @@ -69,10 +70,21 @@ export const linkClass = style([ textDecoration: 'none', }, '&:active': { - color: vars.colors.$gray90, backgroundColor: vars.colors.$white, + color: vars.colors.$gray90, textDecoration: 'none', }, }, }, ]); + +export const childrenClass = style([ + sprinkles({ + display: 'flex', + marginLeft: 'auto', + marginRight: '$3', + }), + { + alignSelf: 'center', + }, +]); diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.children.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.children.tsx new file mode 100644 index 0000000000..b8da99e55a --- /dev/null +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.children.tsx @@ -0,0 +1,19 @@ +import { Button } from '@components/Button'; +import React, { FC } from 'react'; + +export const NavHeaderChildren: FC = () => { + return ( + <> + + + ); +}; diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx index d49db8b5d5..637d7cf7d5 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx @@ -4,23 +4,27 @@ import { NavHeader } from './'; import { logoVariants } from '@components/Logo'; import type { Meta, StoryObj } from '@storybook/react'; import React from 'react'; +import { NavHeaderChildren } from './NavHeader.stories.children'; const navItems: INavItems = [ { title: 'Faucet', - href: '/faucet', + href: '#', }, { title: 'Transactions', - href: '/transactions', + href: '#', }, { title: 'Balance', - href: '/balance', + href: '#', }, ]; -type StoryProps = { linksCount: number } & INavHeaderProps; +type StoryProps = { + linksCount: number; + renderChildren: boolean; +} & INavHeaderProps; const meta: Meta = { title: 'Navigation/NavHeader', @@ -42,14 +46,18 @@ const meta: Meta = { type: 'select', }, description: 'Logo variant', - options: logoVariants, + options: ['-', ...logoVariants], table: { defaultValue: { summary: logoVariants[0] }, }, }, linksCount: { control: { type: 'range', min: 1, max: navItems.length, step: 1 }, - description: 'Sample navigation items', + description: 'Adjust sample navigation items count', + }, + renderChildren: { + control: { type: 'boolean' }, + description: 'Populate children with sample content?', }, }, }; @@ -59,8 +67,12 @@ type Story = StoryObj; export const Dynamic: Story = { name: 'NavHeader', args: { brand: logoVariants[0], linksCount: navItems.length }, - render: ({ brand, linksCount }) => { - return ; + render: ({ brand, linksCount, renderChildren = false }) => { + return ( + + {renderChildren && } + + ); }, }; diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx index 6d4bb753d4..9c2a4de19c 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx @@ -1,6 +1,7 @@ import { Link } from '@components/Link'; import { containerClass, + childrenClass, linkClass, logoClass, navClass, @@ -15,19 +16,23 @@ export type INavItems = INavItem[]; export interface INavHeaderProps { brand?: LogoVariant; + children?: React.ReactNode; items?: INavItems; } export const NavHeader: FC = ({ brand = logoVariants[0], + children, items, }) => { return (
- - - + {logoVariants.includes(brand) && ( + + + + )}
+
{children}
); }; From 389cc8551374cd9f08d7600241522cce0da7a675 Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Wed, 2 Aug 2023 11:29:00 +0200 Subject: [PATCH 14/47] feat: add glow effect --- .../src/components/NavHeader/NavHeader.css.ts | 53 +++++++++-- .../NavHeader/NavHeader.stories.tsx | 8 +- .../src/components/NavHeader/NavHeader.tsx | 89 +++++++++++++++---- .../src/components/NavHeader/assets/glow.tsx | 53 +++++++++++ 4 files changed, 176 insertions(+), 27 deletions(-) create mode 100644 packages/libs/react-ui/src/components/NavHeader/assets/glow.tsx diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.css.ts b/packages/libs/react-ui/src/components/NavHeader/NavHeader.css.ts index 98d7698fea..233fa5a1b3 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeader.css.ts +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeader.css.ts @@ -12,6 +12,8 @@ export const containerClass = style([ flexWrap: 'nowrap', height: '$16', justifyContent: 'flex-start', + position: 'relative', + overflow: 'hidden', }), { selectors: { @@ -33,10 +35,11 @@ export const logoClass = style([ }), { alignSelf: 'center', + zIndex: 1, }, ]); -export const navClass = style([ +export const navWrapperClass = style([ sprinkles({ alignItems: 'stretch', display: 'flex', @@ -44,6 +47,19 @@ export const navClass = style([ }), ]); +export const navListClass = style([ + sprinkles({ + alignItems: 'stretch', + display: 'flex', + justifyContent: 'center', + }), + { + listStyle: 'none', + alignSelf: 'center', + zIndex: 1, + }, +]); + export const linkClass = style([ sprinkles({ alignItems: 'center', @@ -57,20 +73,36 @@ export const linkClass = style([ }), { alignSelf: 'center', - padding: '4px 8px 4px 4px', + padding: '4px 8px 4px 8px', + transition: 'background 0.1s ease', + fontWeight: vars.fontWeights.$semiBold, }, { selectors: { + '&:active': { + color: vars.colors.$gray90, + textDecoration: 'none', + }, '&:hover': { color: vars.colors.$white, textDecoration: 'none', }, - '&:focus': { + '&:focus-visible': { color: vars.colors.$blue40, textDecoration: 'none', }, - '&:active': { - backgroundColor: vars.colors.$white, + }, + }, +]); + +export const activeLinkClass = style([ + { + backgroundColor: vars.colors.$white, + color: vars.colors.$gray90, + }, + { + selectors: { + '&:hover': { color: vars.colors.$gray90, textDecoration: 'none', }, @@ -88,3 +120,14 @@ export const childrenClass = style([ alignSelf: 'center', }, ]); + +export const glowClass = style([ + { + position: 'absolute', + top: 0, + left: 0, + zIndex: 0, + pointerEvents: 'none', + transition: 'all 0.3s ease', + }, +]); diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx index 637d7cf7d5..ee2267644f 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx @@ -9,15 +9,15 @@ import { NavHeaderChildren } from './NavHeader.stories.children'; const navItems: INavItems = [ { title: 'Faucet', - href: '#', + href: '#faucet', }, { title: 'Transactions', - href: '#', + href: '#transactions', }, { title: 'Balance', - href: '#', + href: '#balance', }, ]; @@ -57,7 +57,7 @@ const meta: Meta = { }, renderChildren: { control: { type: 'boolean' }, - description: 'Populate children with sample content?', + description: 'Populate (right-hand side) children with sample content?', }, }, }; diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx index 9c2a4de19c..4cf99d1107 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx @@ -3,12 +3,18 @@ import { containerClass, childrenClass, linkClass, + activeLinkClass, logoClass, - navClass, + navWrapperClass, + navListClass, + glowClass, } from './NavHeader.css'; -import React, { FC } from 'react'; +import classNames from 'classnames'; + +import React, { FC, useState, useRef, useEffect } from 'react'; import Logo, { LogoVariant, logoVariants } from '@components/Logo'; +import { NavGlow } from './assets/glow'; export type INavItemTarget = '_self' | '_blank'; export type INavItem = { title: string; href: string; target?: INavItemTarget }; @@ -25,29 +31,76 @@ export const NavHeader: FC = ({ children, items, }) => { + const headerRef = useRef(null); + const logoRef = useRef(null); + const navRef = useRef(null); + const glowRef = useRef(null); + + const [glowX, setGlowX] = useState(0); + const [activeNav, setActiveNav] = useState(0); + + useEffect(() => { + const activeNavElement = navRef.current?.querySelector( + `li:nth-child(${activeNav}) a`, + ); + const headerBounds = headerRef.current?.getBoundingClientRect(); + const logoBounds = logoRef.current?.getBoundingClientRect(); + const activeNavBounds = activeNavElement?.getBoundingClientRect(); + const glowBounds = glowRef.current?.getBoundingClientRect(); + + console.log(activeNavElement); + + setGlowX( + activeNav === 0 + ? -logoBounds!.x + headerBounds!.x / 2 + logoBounds!.width / 2 - 20 + : activeNavBounds!.x - + headerBounds!.x - + glowBounds!.width / 2 + + activeNavBounds!.width / 2, + ); + }, [logoRef, glowX, activeNav]); return ( -
-
+
+
+ +
+
{logoVariants.includes(brand) && ( )}
-
diff --git a/packages/libs/react-ui/src/components/NavHeader/assets/glow.tsx b/packages/libs/react-ui/src/components/NavHeader/assets/glow.tsx new file mode 100644 index 0000000000..2b14dd539d --- /dev/null +++ b/packages/libs/react-ui/src/components/NavHeader/assets/glow.tsx @@ -0,0 +1,53 @@ +import * as React from 'react'; +import { SVGProps } from 'react'; + +export const NavGlow: React.FC> = () => ( + + + + + + + + + + + + + + + + +); From 0760a8b86ab6f2a9c0a7a97339d8c8e4560de47c Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Wed, 2 Aug 2023 11:30:36 +0200 Subject: [PATCH 15/47] chore: remove console.log --- packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx index 4cf99d1107..e29f9e5845 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx @@ -48,8 +48,6 @@ export const NavHeader: FC = ({ const activeNavBounds = activeNavElement?.getBoundingClientRect(); const glowBounds = glowRef.current?.getBoundingClientRect(); - console.log(activeNavElement); - setGlowX( activeNav === 0 ? -logoBounds!.x + headerBounds!.x / 2 + logoBounds!.width / 2 - 20 From eda2054b058dadf179573ca2d7f7566a97baf9b6 Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Wed, 2 Aug 2023 12:11:03 +0200 Subject: [PATCH 16/47] chore: optimisations (review feedback) --- .../src/components/NavHeader/NavHeader.css.ts | 4 ++-- .../NavHeader/NavHeader.stories.children.tsx | 22 +++++++++---------- 2 files changed, 12 insertions(+), 14 deletions(-) diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.css.ts b/packages/libs/react-ui/src/components/NavHeader/NavHeader.css.ts index 233fa5a1b3..8e4004d104 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeader.css.ts +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeader.css.ts @@ -67,15 +67,15 @@ export const linkClass = style([ color: '$gray40', display: 'flex', fontSize: '$sm', + fontWeight: '$semiBold', marginRight: '$6', marginX: '$1', textDecoration: 'none', }), { alignSelf: 'center', - padding: '4px 8px 4px 8px', + padding: `${vars.sizes.$1} ${vars.sizes.$2}`, transition: 'background 0.1s ease', - fontWeight: vars.fontWeights.$semiBold, }, { selectors: { diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.children.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.children.tsx index b8da99e55a..d4cccc2cc7 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.children.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.children.tsx @@ -3,17 +3,15 @@ import React, { FC } from 'react'; export const NavHeaderChildren: FC = () => { return ( - <> - - + ); }; From 011d78ea22ebba5023e36c656acb709894a6549d Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Wed, 2 Aug 2023 12:28:39 +0200 Subject: [PATCH 17/47] refactor: glow positioning and link style --- .../libs/react-ui/src/components/NavHeader/NavHeader.css.ts | 2 +- packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.css.ts b/packages/libs/react-ui/src/components/NavHeader/NavHeader.css.ts index 8e4004d104..2bc51134ca 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeader.css.ts +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeader.css.ts @@ -75,7 +75,7 @@ export const linkClass = style([ { alignSelf: 'center', padding: `${vars.sizes.$1} ${vars.sizes.$2}`, - transition: 'background 0.1s ease', + transition: 'background 0.1s ease, color 0.1s ease', }, { selectors: { diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx index e29f9e5845..dfaa8a2682 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx @@ -50,7 +50,7 @@ export const NavHeader: FC = ({ setGlowX( activeNav === 0 - ? -logoBounds!.x + headerBounds!.x / 2 + logoBounds!.width / 2 - 20 + ? -glowBounds!.width / 2 : activeNavBounds!.x - headerBounds!.x - glowBounds!.width / 2 + From 7b0cdb5b8b6ef2228e654ef07e2f17d72147d051 Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Wed, 2 Aug 2023 12:30:25 +0200 Subject: [PATCH 18/47] refactor: remove unused code --- .../libs/react-ui/src/components/NavHeader/NavHeader.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx index dfaa8a2682..8ddddc78d9 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx @@ -32,7 +32,6 @@ export const NavHeader: FC = ({ items, }) => { const headerRef = useRef(null); - const logoRef = useRef(null); const navRef = useRef(null); const glowRef = useRef(null); @@ -44,7 +43,6 @@ export const NavHeader: FC = ({ `li:nth-child(${activeNav}) a`, ); const headerBounds = headerRef.current?.getBoundingClientRect(); - const logoBounds = logoRef.current?.getBoundingClientRect(); const activeNavBounds = activeNavElement?.getBoundingClientRect(); const glowBounds = glowRef.current?.getBoundingClientRect(); @@ -56,7 +54,7 @@ export const NavHeader: FC = ({ glowBounds!.width / 2 + activeNavBounds!.width / 2, ); - }, [logoRef, glowX, activeNav]); + }, [glowX, activeNav]); return (
= ({ >
-
+
{logoVariants.includes(brand) && ( From 262de16d4bd67199f1d66ba25f1d7d3b9247befd Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Wed, 2 Aug 2023 12:31:27 +0200 Subject: [PATCH 19/47] refactor: semantics --- packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx index 8ddddc78d9..94c9341e80 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx @@ -46,8 +46,10 @@ export const NavHeader: FC = ({ const activeNavBounds = activeNavElement?.getBoundingClientRect(); const glowBounds = glowRef.current?.getBoundingClientRect(); + const noActiveNav = activeNav === 0; + setGlowX( - activeNav === 0 + noActiveNav ? -glowBounds!.width / 2 : activeNavBounds!.x - headerBounds!.x - From 288425bbf477ce4e65ec7ccf3d290041859c0b7b Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Wed, 2 Aug 2023 12:33:26 +0200 Subject: [PATCH 20/47] fix: jsx svg tag naming --- .../react-ui/src/components/NavHeader/assets/glow.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/libs/react-ui/src/components/NavHeader/assets/glow.tsx b/packages/libs/react-ui/src/components/NavHeader/assets/glow.tsx index 2b14dd539d..b07b9255ae 100644 --- a/packages/libs/react-ui/src/components/NavHeader/assets/glow.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/assets/glow.tsx @@ -23,9 +23,9 @@ export const NavGlow: React.FC> = () => ( width="256" height="158" filterUnits="userSpaceOnUse" - color-interpolation-filters="sRGB" + colorInterpolationFilters="sRGB" > - + > = () => ( y2="35.5324" gradientUnits="userSpaceOnUse" > - - + + From 6aa054ea38d1108cf58bf22d48414c403d05cd12 Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Wed, 2 Aug 2023 12:36:42 +0200 Subject: [PATCH 21/47] chore: add note to test file --- .../libs/react-ui/src/components/NavHeader/NavHeader.test.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.test.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeader.test.tsx index 9184da4272..e2a0b74e53 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeader.test.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeader.test.tsx @@ -2,6 +2,8 @@ import { NavHeader } from '@components/NavHeader'; import { render } from '@testing-library/react'; import React from 'react'; +// ? Since we're (likely) using Chromatic soon, I'll hold off on adding more tests here. + describe('NavHeader', () => { it('renders correctly', () => { const { getByTestId } = render(); From 490530b2750b8e306c859e430382f4ced03f47a5 Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Wed, 2 Aug 2023 12:39:23 +0200 Subject: [PATCH 22/47] refactor: semantics --- .../src/components/NavHeader/NavHeader.css.ts | 8 ++++---- .../NavHeader/NavHeader.stories.children.tsx | 2 +- .../src/components/NavHeader/NavHeader.stories.tsx | 7 ++++--- .../react-ui/src/components/NavHeader/NavHeader.tsx | 12 ++++++------ 4 files changed, 15 insertions(+), 14 deletions(-) diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.css.ts b/packages/libs/react-ui/src/components/NavHeader/NavHeader.css.ts index 2bc51134ca..8fa521d724 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeader.css.ts +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeader.css.ts @@ -54,8 +54,8 @@ export const navListClass = style([ justifyContent: 'center', }), { - listStyle: 'none', alignSelf: 'center', + listStyle: 'none', zIndex: 1, }, ]); @@ -123,11 +123,11 @@ export const childrenClass = style([ export const glowClass = style([ { - position: 'absolute', - top: 0, left: 0, - zIndex: 0, pointerEvents: 'none', + position: 'absolute', + top: 0, transition: 'all 0.3s ease', + zIndex: 0, }, ]); diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.children.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.children.tsx index d4cccc2cc7..a0872fcb20 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.children.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.children.tsx @@ -7,9 +7,9 @@ export const NavHeaderChildren: FC = () => { as="button" icon="Link" onClick={() => {}} + style={{ marginLeft: '1rem' }} title="test title" variant="positive" - style={{ marginLeft: '1rem' }} > Connect your wallet diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx index ee2267644f..eb32520c41 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx @@ -1,9 +1,10 @@ +import type { Meta, StoryObj } from '@storybook/react'; import type { INavHeaderProps, INavItems } from './NavHeader'; -import { NavHeader } from './'; -import { logoVariants } from '@components/Logo'; -import type { Meta, StoryObj } from '@storybook/react'; import React from 'react'; + +import { logoVariants } from '@components/Logo'; +import { NavHeader } from './'; import { NavHeaderChildren } from './NavHeader.stories.children'; const navItems: INavItems = [ diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx index 94c9341e80..f59d88bf12 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx @@ -1,13 +1,13 @@ import { Link } from '@components/Link'; import { - containerClass, + activeLinkClass, childrenClass, + containerClass, + glowClass, linkClass, - activeLinkClass, logoClass, - navWrapperClass, navListClass, - glowClass, + navWrapperClass, } from './NavHeader.css'; import classNames from 'classnames'; @@ -31,9 +31,9 @@ export const NavHeader: FC = ({ children, items, }) => { + const glowRef = useRef(null); const headerRef = useRef(null); const navRef = useRef(null); - const glowRef = useRef(null); const [glowX, setGlowX] = useState(0); const [activeNav, setActiveNav] = useState(0); @@ -42,9 +42,9 @@ export const NavHeader: FC = ({ const activeNavElement = navRef.current?.querySelector( `li:nth-child(${activeNav}) a`, ); - const headerBounds = headerRef.current?.getBoundingClientRect(); const activeNavBounds = activeNavElement?.getBoundingClientRect(); const glowBounds = glowRef.current?.getBoundingClientRect(); + const headerBounds = headerRef.current?.getBoundingClientRect(); const noActiveNav = activeNav === 0; From b740de3567c73b47a5e87fe868f33471fe247e13 Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Wed, 2 Aug 2023 13:04:00 +0200 Subject: [PATCH 23/47] refactor: remove non-null assertions --- .../react-ui/src/components/NavHeader/NavHeader.tsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx index f59d88bf12..ad5a7c0cce 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx @@ -46,15 +46,17 @@ export const NavHeader: FC = ({ const glowBounds = glowRef.current?.getBoundingClientRect(); const headerBounds = headerRef.current?.getBoundingClientRect(); + if (!activeNavBounds || !glowBounds || !headerBounds) return; + const noActiveNav = activeNav === 0; setGlowX( noActiveNav - ? -glowBounds!.width / 2 - : activeNavBounds!.x - - headerBounds!.x - - glowBounds!.width / 2 + - activeNavBounds!.width / 2, + ? -glowBounds.width / 2 + : activeNavBounds.x - + headerBounds.x - + glowBounds.width / 2 + + activeNavBounds.width / 2, ); }, [glowX, activeNav]); return ( From f8e6133bdc09df1f95556ae8f3cbcd4205eef780 Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Wed, 2 Aug 2023 13:10:14 +0200 Subject: [PATCH 24/47] refactor: glow effect --- .../src/components/NavHeader/NavHeader.tsx | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx index ad5a7c0cce..cf17c2ba9f 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx @@ -46,18 +46,16 @@ export const NavHeader: FC = ({ const glowBounds = glowRef.current?.getBoundingClientRect(); const headerBounds = headerRef.current?.getBoundingClientRect(); - if (!activeNavBounds || !glowBounds || !headerBounds) return; - const noActiveNav = activeNav === 0; - setGlowX( - noActiveNav - ? -glowBounds.width / 2 - : activeNavBounds.x - - headerBounds.x - - glowBounds.width / 2 + - activeNavBounds.width / 2, - ); + if (noActiveNav && glowBounds) setGlowX(-glowBounds.width / 2); + else if (activeNavBounds && glowBounds && headerBounds) + setGlowX( + activeNavBounds.x - + headerBounds.x - + glowBounds.width / 2 + + activeNavBounds.width / 2, + ); }, [glowX, activeNav]); return (
Date: Wed, 2 Aug 2023 14:21:25 +0200 Subject: [PATCH 25/47] refactor: glow effect animation timing --- .../components/NavHeader/NavHeader.stories.tsx | 12 ++++++++++-- .../src/components/NavHeader/NavHeader.tsx | 17 +++++++++++++++-- 2 files changed, 25 insertions(+), 4 deletions(-) diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx index eb32520c41..3446b7a809 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx @@ -20,6 +20,14 @@ const navItems: INavItems = [ title: 'Balance', href: '#balance', }, + { + title: 'Learn Pact', + href: '#pact', + }, + { + title: 'Marmalade', + href: '#marmalade', + }, ]; type StoryProps = { @@ -37,7 +45,7 @@ const meta: Meta = { docs: { description: { component: - 'Note: maximum navigation items is currently limited.\n\nPending design update to support more items.', + 'Note: maximum navigation items is currently limited (not technically enforced).\n\nPending design update to support more items.', }, }, }, @@ -67,7 +75,7 @@ type Story = StoryObj; export const Dynamic: Story = { name: 'NavHeader', - args: { brand: logoVariants[0], linksCount: navItems.length }, + args: { brand: logoVariants[0], linksCount: 3 }, render: ({ brand, linksCount, renderChildren = false }) => { return ( diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx index cf17c2ba9f..6d4e89d28f 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx @@ -17,7 +17,11 @@ import Logo, { LogoVariant, logoVariants } from '@components/Logo'; import { NavGlow } from './assets/glow'; export type INavItemTarget = '_self' | '_blank'; -export type INavItem = { title: string; href: string; target?: INavItemTarget }; +export type INavItem = { + title: string; + href: string; + target?: INavItemTarget; +}; export type INavItems = INavItem[]; export interface INavHeaderProps { @@ -37,6 +41,7 @@ export const NavHeader: FC = ({ const [glowX, setGlowX] = useState(0); const [activeNav, setActiveNav] = useState(0); + const prevGlowX = useRef(glowX); useEffect(() => { const activeNavElement = navRef.current?.querySelector( @@ -57,6 +62,11 @@ export const NavHeader: FC = ({ activeNavBounds.width / 2, ); }, [glowX, activeNav]); + + useEffect(() => { + prevGlowX.current = glowX; + }, [glowX]); + return (
= ({ >
From 5df8f95e89c6003904b93b23974ec3b7dad2fd03 Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Wed, 2 Aug 2023 17:46:45 +0200 Subject: [PATCH 26/47] refactor: logo name change --- packages/libs/react-ui/src/components/Logo/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/libs/react-ui/src/components/Logo/index.tsx b/packages/libs/react-ui/src/components/Logo/index.tsx index b1de41b03f..bd9569be28 100644 --- a/packages/libs/react-ui/src/components/Logo/index.tsx +++ b/packages/libs/react-ui/src/components/Logo/index.tsx @@ -4,11 +4,11 @@ import { KadenaDocsLogo } from './variants/KadenaDocs'; import React, { FC, SVGProps } from 'react'; -export type LogoVariant = 'default' | 'DevTools' | 'Docs'; -export const logoVariants = ['default', 'DevTools', 'Docs'] as LogoVariant[]; +export type LogoVariant = 'Kadena' | 'DevTools' | 'Docs'; +export const logoVariants = ['Kadena', 'DevTools', 'Docs'] as LogoVariant[]; const renderSwitch = ( - logo: LogoVariant = 'default', + logo: LogoVariant = 'Kadena', ): FC> => { switch (logo) { case 'Docs': From 5843c56ba14d6ee2af11aa3ebe7714e606410097 Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Thu, 3 Aug 2023 09:30:44 +0200 Subject: [PATCH 27/47] refactor: separate glow effect into custom hook --- .../src/components/NavHeader/NavHeader.tsx | 45 ++++---------- .../src/components/NavHeader/useGlow.tsx | 58 +++++++++++++++++++ 2 files changed, 70 insertions(+), 33 deletions(-) create mode 100644 packages/libs/react-ui/src/components/NavHeader/useGlow.tsx diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx index 6d4e89d28f..59bfc37198 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx @@ -12,9 +12,10 @@ import { import classNames from 'classnames'; -import React, { FC, useState, useRef, useEffect } from 'react'; +import React, { FC, useRef } from 'react'; import Logo, { LogoVariant, logoVariants } from '@components/Logo'; import { NavGlow } from './assets/glow'; +import useGlow from './useGlow'; export type INavItemTarget = '_self' | '_blank'; export type INavItem = { @@ -35,37 +36,15 @@ export const NavHeader: FC = ({ children, items, }) => { - const glowRef = useRef(null); - const headerRef = useRef(null); - const navRef = useRef(null); - - const [glowX, setGlowX] = useState(0); - const [activeNav, setActiveNav] = useState(0); - const prevGlowX = useRef(glowX); - - useEffect(() => { - const activeNavElement = navRef.current?.querySelector( - `li:nth-child(${activeNav}) a`, - ); - const activeNavBounds = activeNavElement?.getBoundingClientRect(); - const glowBounds = glowRef.current?.getBoundingClientRect(); - const headerBounds = headerRef.current?.getBoundingClientRect(); - - const noActiveNav = activeNav === 0; - - if (noActiveNav && glowBounds) setGlowX(-glowBounds.width / 2); - else if (activeNavBounds && glowBounds && headerBounds) - setGlowX( - activeNavBounds.x - - headerBounds.x - - glowBounds.width / 2 + - activeNavBounds.width / 2, - ); - }, [glowX, activeNav]); - - useEffect(() => { - prevGlowX.current = glowX; - }, [glowX]); + const { + glowX, + prevGlowX, + activeNav, + setActiveNav, + glowRef, + headerRef, + navRef, + } = useGlow(); return (
= ({ className={glowClass} style={{ transform: `translateX(${glowX}px)`, - transitionDuration: `${Math.abs(glowX - prevGlowX.current) * 2}ms`, + transitionDuration: `${Math.abs(glowX - prevGlowX) * 2}ms`, }} ref={glowRef} > diff --git a/packages/libs/react-ui/src/components/NavHeader/useGlow.tsx b/packages/libs/react-ui/src/components/NavHeader/useGlow.tsx new file mode 100644 index 0000000000..5ac36ad4d5 --- /dev/null +++ b/packages/libs/react-ui/src/components/NavHeader/useGlow.tsx @@ -0,0 +1,58 @@ +import { useState, useRef, useEffect } from 'react'; + +interface IUseGlowReturn { + glowX: number; + prevGlowX: number; + activeNav: number; + setActiveNav: React.Dispatch>; + glowRef: React.RefObject; + headerRef: React.RefObject; + navRef: React.RefObject; +} + +const useGlow = (): IUseGlowReturn => { + const glowRef = useRef(null); + const headerRef = useRef(null); + const navRef = useRef(null); + + const [glowX, setGlowX] = useState(0); + const [activeNav, setActiveNav] = useState(0); + const prevGlowRef = useRef(glowX); + let prevGlowX = 0; + + useEffect(() => { + const activeNavElement = navRef.current?.querySelector( + `li:nth-child(${activeNav}) a`, + ); + const activeNavBounds = activeNavElement?.getBoundingClientRect(); + const glowBounds = glowRef.current?.getBoundingClientRect(); + const headerBounds = headerRef.current?.getBoundingClientRect(); + + const noActiveNav = activeNav === 0; + + if (noActiveNav && glowBounds) setGlowX(-glowBounds.width / 2); + else if (activeNavBounds && glowBounds && headerBounds) + setGlowX( + activeNavBounds.x - + headerBounds.x - + glowBounds.width / 2 + + activeNavBounds.width / 2, + ); + }, [glowX, activeNav]); + + useEffect(() => { + prevGlowX = prevGlowRef.current; + }, [glowX]); + + return { + glowX, + prevGlowX, + activeNav, + setActiveNav, + glowRef, + headerRef, + navRef, + }; +}; + +export default useGlow; From 0df2bce32499aa4c5819ad052a5eb619ed2d6b85 Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Thu, 3 Aug 2023 09:44:03 +0200 Subject: [PATCH 28/47] fix: useGlow refactor mistake --- .../libs/react-ui/src/components/NavHeader/NavHeader.tsx | 2 +- .../libs/react-ui/src/components/NavHeader/useGlow.tsx | 7 +++---- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx index 59bfc37198..89f41ccee6 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx @@ -12,7 +12,7 @@ import { import classNames from 'classnames'; -import React, { FC, useRef } from 'react'; +import React, { FC } from 'react'; import Logo, { LogoVariant, logoVariants } from '@components/Logo'; import { NavGlow } from './assets/glow'; import useGlow from './useGlow'; diff --git a/packages/libs/react-ui/src/components/NavHeader/useGlow.tsx b/packages/libs/react-ui/src/components/NavHeader/useGlow.tsx index 5ac36ad4d5..79cf6ba39b 100644 --- a/packages/libs/react-ui/src/components/NavHeader/useGlow.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/useGlow.tsx @@ -17,8 +17,7 @@ const useGlow = (): IUseGlowReturn => { const [glowX, setGlowX] = useState(0); const [activeNav, setActiveNav] = useState(0); - const prevGlowRef = useRef(glowX); - let prevGlowX = 0; + const prevGlowX = useRef(glowX); useEffect(() => { const activeNavElement = navRef.current?.querySelector( @@ -41,12 +40,12 @@ const useGlow = (): IUseGlowReturn => { }, [glowX, activeNav]); useEffect(() => { - prevGlowX = prevGlowRef.current; + prevGlowX.current = glowX; }, [glowX]); return { glowX, - prevGlowX, + prevGlowX: prevGlowX.current, activeNav, setActiveNav, glowRef, From f4fbd24e88b80d353dbdbc5959b84afd4cbdb4df Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Thu, 3 Aug 2023 09:56:29 +0200 Subject: [PATCH 29/47] refactor: semantics --- .../src/components/NavHeader/NavHeader.tsx | 19 +++++++++++-------- .../src/components/NavHeader/useGlow.tsx | 7 +++++-- 2 files changed, 16 insertions(+), 10 deletions(-) diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx index 89f41ccee6..798429d6d0 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx @@ -1,4 +1,11 @@ +import classNames from 'classnames'; +import React, { FC } from 'react'; + +import type { LogoVariant } from '@components/Logo'; + import { Link } from '@components/Link'; +import Logo, { logoVariants } from '@components/Logo'; + import { activeLinkClass, childrenClass, @@ -10,10 +17,6 @@ import { navWrapperClass, } from './NavHeader.css'; -import classNames from 'classnames'; - -import React, { FC } from 'react'; -import Logo, { LogoVariant, logoVariants } from '@components/Logo'; import { NavGlow } from './assets/glow'; import useGlow from './useGlow'; @@ -38,7 +41,7 @@ export const NavHeader: FC = ({ }) => { const { glowX, - prevGlowX, + animationDuration, activeNav, setActiveNav, glowRef, @@ -49,16 +52,16 @@ export const NavHeader: FC = ({ return (
diff --git a/packages/libs/react-ui/src/components/NavHeader/useGlow.tsx b/packages/libs/react-ui/src/components/NavHeader/useGlow.tsx index 79cf6ba39b..e46bba0a36 100644 --- a/packages/libs/react-ui/src/components/NavHeader/useGlow.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/useGlow.tsx @@ -2,7 +2,7 @@ import { useState, useRef, useEffect } from 'react'; interface IUseGlowReturn { glowX: number; - prevGlowX: number; + animationDuration: number; activeNav: number; setActiveNav: React.Dispatch>; glowRef: React.RefObject; @@ -18,6 +18,7 @@ const useGlow = (): IUseGlowReturn => { const [glowX, setGlowX] = useState(0); const [activeNav, setActiveNav] = useState(0); const prevGlowX = useRef(glowX); + const glowAnimationSpeed = useRef(0); useEffect(() => { const activeNavElement = navRef.current?.querySelector( @@ -43,9 +44,11 @@ const useGlow = (): IUseGlowReturn => { prevGlowX.current = glowX; }, [glowX]); + glowAnimationSpeed.current = Math.abs(glowX - prevGlowX.current) * 2; + return { glowX, - prevGlowX: prevGlowX.current, + animationDuration: glowAnimationSpeed.current, activeNav, setActiveNav, glowRef, From 8c5c33ce1e40242bccd734746da724c44d178832 Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Thu, 3 Aug 2023 10:57:26 +0200 Subject: [PATCH 30/47] refactor: restructure to support nextjs Link --- .../src/components/NavHeader/NavHeader.css.ts | 1 - .../NavHeader/NavHeader.stories.tsx | 26 +++++-- .../src/components/NavHeader/NavHeader.tsx | 67 +------------------ .../components/NavHeader/NavHeaderContent.tsx | 11 +++ .../NavHeader/NavHeaderNavigation.tsx | 66 ++++++++++++++++++ .../src/components/NavHeader/index.ts | 5 ++ .../src/components/NavHeader/useGlow.tsx | 20 ++++-- 7 files changed, 119 insertions(+), 77 deletions(-) create mode 100644 packages/libs/react-ui/src/components/NavHeader/NavHeaderContent.tsx create mode 100644 packages/libs/react-ui/src/components/NavHeader/NavHeaderNavigation.tsx diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.css.ts b/packages/libs/react-ui/src/components/NavHeader/NavHeader.css.ts index 8fa521d724..b6e346f1ae 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeader.css.ts +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeader.css.ts @@ -30,7 +30,6 @@ export const containerClass = style([ export const logoClass = style([ sprinkles({ display: 'flex', - marginRight: '$6', marginLeft: '$3', }), { diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx index 3446b7a809..802c59537d 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx @@ -5,6 +5,9 @@ import React from 'react'; import { logoVariants } from '@components/Logo'; import { NavHeader } from './'; +import { NavHeaderNavigation } from './'; +import { NavHeaderContent } from './'; + import { NavHeaderChildren } from './NavHeader.stories.children'; const navItems: INavItems = [ @@ -32,7 +35,7 @@ const navItems: INavItems = [ type StoryProps = { linksCount: number; - renderChildren: boolean; + renderContent: boolean; } & INavHeaderProps; const meta: Meta = { @@ -64,7 +67,7 @@ const meta: Meta = { control: { type: 'range', min: 1, max: navItems.length, step: 1 }, description: 'Adjust sample navigation items count', }, - renderChildren: { + renderContent: { control: { type: 'boolean' }, description: 'Populate (right-hand side) children with sample content?', }, @@ -76,10 +79,23 @@ type Story = StoryObj; export const Dynamic: Story = { name: 'NavHeader', args: { brand: logoVariants[0], linksCount: 3 }, - render: ({ brand, linksCount, renderChildren = false }) => { + render: ({ brand, linksCount, renderContent = false }) => { return ( - - {renderChildren && } + + + {navItems.slice(0, linksCount).map((item, index) => { + return ( + + {item.title} + + ); + })} + + {renderContent && ( + + + + )} ); }, diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx index 798429d6d0..22ebe79a21 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx @@ -1,4 +1,3 @@ -import classNames from 'classnames'; import React, { FC } from 'react'; import type { LogoVariant } from '@components/Logo'; @@ -6,19 +5,7 @@ import type { LogoVariant } from '@components/Logo'; import { Link } from '@components/Link'; import Logo, { logoVariants } from '@components/Logo'; -import { - activeLinkClass, - childrenClass, - containerClass, - glowClass, - linkClass, - logoClass, - navListClass, - navWrapperClass, -} from './NavHeader.css'; - -import { NavGlow } from './assets/glow'; -import useGlow from './useGlow'; +import { containerClass, logoClass } from './NavHeader.css'; export type INavItemTarget = '_self' | '_blank'; export type INavItem = { @@ -37,34 +24,9 @@ export interface INavHeaderProps { export const NavHeader: FC = ({ brand = logoVariants[0], children, - items, }) => { - const { - glowX, - animationDuration, - activeNav, - setActiveNav, - glowRef, - headerRef, - navRef, - } = useGlow(); - return ( -
-
- -
+
{logoVariants.includes(brand) && ( @@ -72,30 +34,7 @@ export const NavHeader: FC = ({ )}
- -
{children}
+ {children}
); }; diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeaderContent.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeaderContent.tsx new file mode 100644 index 0000000000..55e03db519 --- /dev/null +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeaderContent.tsx @@ -0,0 +1,11 @@ +import { childrenClass } from './NavHeader.css'; + +import React, { FC } from 'react'; + +export interface INavHeaderContentProps { + children: React.ReactNode; +} + +export const NavHeaderContent: FC = ({ children }) => { + return
{children}
; +}; diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeaderNavigation.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeaderNavigation.tsx new file mode 100644 index 0000000000..acba6c380d --- /dev/null +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeaderNavigation.tsx @@ -0,0 +1,66 @@ +import classNames from 'classnames'; +import React, { FC } from 'react'; + +import type { LogoVariant } from '@components/Logo'; + +import { + activeLinkClass, + linkClass, + navListClass, + navWrapperClass, + glowClass, +} from './NavHeader.css'; + +import { NavGlow } from './assets/glow'; +import useGlow from './useGlow'; + +export type INavItemTarget = '_self' | '_blank'; +export type INavItem = { + title: string; + href: string; + target?: INavItemTarget; +}; +export type INavItems = INavItem[]; + +export interface INavHeaderNavigationProps { + children: React.ReactNode; +} + +export const NavHeaderNavigation: FC = ({ + children, +}) => { + const { glowX, animationDuration, glowRef, navRef, activeNav, setActiveNav } = + useGlow(); + + return ( + + ); +}; diff --git a/packages/libs/react-ui/src/components/NavHeader/index.ts b/packages/libs/react-ui/src/components/NavHeader/index.ts index e4bf19be27..14fa3fae87 100644 --- a/packages/libs/react-ui/src/components/NavHeader/index.ts +++ b/packages/libs/react-ui/src/components/NavHeader/index.ts @@ -1,2 +1,7 @@ export type { INavHeaderProps } from './NavHeader'; +export type { INavHeaderNavigationProps } from './NavHeaderNavigation'; +export type { INavHeaderContentProps } from './NavHeaderContent'; + export { NavHeader } from './NavHeader'; +export { NavHeaderNavigation } from './NavHeaderNavigation'; +export { NavHeaderContent } from './NavHeaderContent'; diff --git a/packages/libs/react-ui/src/components/NavHeader/useGlow.tsx b/packages/libs/react-ui/src/components/NavHeader/useGlow.tsx index e46bba0a36..7f1278b3a2 100644 --- a/packages/libs/react-ui/src/components/NavHeader/useGlow.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/useGlow.tsx @@ -3,16 +3,14 @@ import { useState, useRef, useEffect } from 'react'; interface IUseGlowReturn { glowX: number; animationDuration: number; - activeNav: number; - setActiveNav: React.Dispatch>; glowRef: React.RefObject; - headerRef: React.RefObject; navRef: React.RefObject; + activeNav: number; + setActiveNav: React.Dispatch>; } const useGlow = (): IUseGlowReturn => { const glowRef = useRef(null); - const headerRef = useRef(null); const navRef = useRef(null); const [glowX, setGlowX] = useState(0); @@ -26,7 +24,7 @@ const useGlow = (): IUseGlowReturn => { ); const activeNavBounds = activeNavElement?.getBoundingClientRect(); const glowBounds = glowRef.current?.getBoundingClientRect(); - const headerBounds = headerRef.current?.getBoundingClientRect(); + const headerBounds = navRef.current?.parentElement?.getBoundingClientRect(); const noActiveNav = activeNav === 0; @@ -46,14 +44,22 @@ const useGlow = (): IUseGlowReturn => { glowAnimationSpeed.current = Math.abs(glowX - prevGlowX.current) * 2; - return { + console.log({ glowX, animationDuration: glowAnimationSpeed.current, activeNav, + glowRef, + navRef, setActiveNav, + }); + + return { + glowX, + animationDuration: glowAnimationSpeed.current, + activeNav, glowRef, - headerRef, navRef, + setActiveNav, }; }; From e8414e7a82ee2b4b3046b326ab38f674b84ad4c6 Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Thu, 3 Aug 2023 11:02:20 +0200 Subject: [PATCH 31/47] refactor: sprinkles --- .../react-ui/src/components/NavHeader/NavHeader.css.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.css.ts b/packages/libs/react-ui/src/components/NavHeader/NavHeader.css.ts index b6e346f1ae..6ffd19517d 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeader.css.ts +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeader.css.ts @@ -95,10 +95,10 @@ export const linkClass = style([ ]); export const activeLinkClass = style([ - { - backgroundColor: vars.colors.$white, - color: vars.colors.$gray90, - }, + sprinkles({ + backgroundColor: '$white', + color: '$gray90', + }), { selectors: { '&:hover': { From 45487aeb32ccd5cecd00338947e4365f2ed4e9ab Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Thu, 3 Aug 2023 11:06:37 +0200 Subject: [PATCH 32/47] chore: clean up --- .../src/components/NavHeader/NavHeader.css.ts | 2 +- .../src/components/NavHeader/NavHeaderNavigation.tsx | 6 ++---- .../react-ui/src/components/NavHeader/useGlow.tsx | 12 ++++++------ 3 files changed, 9 insertions(+), 11 deletions(-) diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.css.ts b/packages/libs/react-ui/src/components/NavHeader/NavHeader.css.ts index 6ffd19517d..a824503dec 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeader.css.ts +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeader.css.ts @@ -12,8 +12,8 @@ export const containerClass = style([ flexWrap: 'nowrap', height: '$16', justifyContent: 'flex-start', - position: 'relative', overflow: 'hidden', + position: 'relative', }), { selectors: { diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeaderNavigation.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeaderNavigation.tsx index acba6c380d..65eba44ba2 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeaderNavigation.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeaderNavigation.tsx @@ -1,14 +1,12 @@ import classNames from 'classnames'; import React, { FC } from 'react'; -import type { LogoVariant } from '@components/Logo'; - import { activeLinkClass, + glowClass, linkClass, navListClass, navWrapperClass, - glowClass, } from './NavHeader.css'; import { NavGlow } from './assets/glow'; @@ -16,9 +14,9 @@ import useGlow from './useGlow'; export type INavItemTarget = '_self' | '_blank'; export type INavItem = { - title: string; href: string; target?: INavItemTarget; + title: string; }; export type INavItems = INavItem[]; diff --git a/packages/libs/react-ui/src/components/NavHeader/useGlow.tsx b/packages/libs/react-ui/src/components/NavHeader/useGlow.tsx index 7f1278b3a2..4d55670284 100644 --- a/packages/libs/react-ui/src/components/NavHeader/useGlow.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/useGlow.tsx @@ -1,11 +1,11 @@ import { useState, useRef, useEffect } from 'react'; interface IUseGlowReturn { - glowX: number; + activeNav: number; animationDuration: number; glowRef: React.RefObject; + glowX: number; navRef: React.RefObject; - activeNav: number; setActiveNav: React.Dispatch>; } @@ -45,19 +45,19 @@ const useGlow = (): IUseGlowReturn => { glowAnimationSpeed.current = Math.abs(glowX - prevGlowX.current) * 2; console.log({ - glowX, - animationDuration: glowAnimationSpeed.current, activeNav, + animationDuration: glowAnimationSpeed.current, glowRef, + glowX, navRef, setActiveNav, }); return { - glowX, - animationDuration: glowAnimationSpeed.current, activeNav, + animationDuration: glowAnimationSpeed.current, glowRef, + glowX, navRef, setActiveNav, }; From da0d83afb9f86f0ce45c98002859a0b3dd6b89e3 Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Thu, 3 Aug 2023 11:12:04 +0200 Subject: [PATCH 33/47] chore: remove console log --- .../libs/react-ui/src/components/NavHeader/useGlow.tsx | 9 --------- 1 file changed, 9 deletions(-) diff --git a/packages/libs/react-ui/src/components/NavHeader/useGlow.tsx b/packages/libs/react-ui/src/components/NavHeader/useGlow.tsx index 4d55670284..09536f3824 100644 --- a/packages/libs/react-ui/src/components/NavHeader/useGlow.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/useGlow.tsx @@ -44,15 +44,6 @@ const useGlow = (): IUseGlowReturn => { glowAnimationSpeed.current = Math.abs(glowX - prevGlowX.current) * 2; - console.log({ - activeNav, - animationDuration: glowAnimationSpeed.current, - glowRef, - glowX, - navRef, - setActiveNav, - }); - return { activeNav, animationDuration: glowAnimationSpeed.current, From b71a4305a35126c490ea0c030d3e65fe69d0acf7 Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Thu, 3 Aug 2023 11:22:34 +0200 Subject: [PATCH 34/47] chore: rename Logo component --- .../react-ui/src/components/{Logo => BrandLogo}/index.tsx | 4 ++-- .../react-ui/src/components/{Logo => BrandLogo}/readme.md | 0 .../src/components/{Logo => BrandLogo}/variants/Kadena.tsx | 0 .../{Logo => BrandLogo}/variants/KadenaDevTools.tsx | 0 .../components/{Logo => BrandLogo}/variants/KadenaDocs.tsx | 0 .../react-ui/src/components/NavHeader/NavHeader.stories.tsx | 2 +- packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx | 4 ++-- 7 files changed, 5 insertions(+), 5 deletions(-) rename packages/libs/react-ui/src/components/{Logo => BrandLogo}/index.tsx (87%) rename packages/libs/react-ui/src/components/{Logo => BrandLogo}/readme.md (100%) rename packages/libs/react-ui/src/components/{Logo => BrandLogo}/variants/Kadena.tsx (100%) rename packages/libs/react-ui/src/components/{Logo => BrandLogo}/variants/KadenaDevTools.tsx (100%) rename packages/libs/react-ui/src/components/{Logo => BrandLogo}/variants/KadenaDocs.tsx (100%) diff --git a/packages/libs/react-ui/src/components/Logo/index.tsx b/packages/libs/react-ui/src/components/BrandLogo/index.tsx similarity index 87% rename from packages/libs/react-ui/src/components/Logo/index.tsx rename to packages/libs/react-ui/src/components/BrandLogo/index.tsx index bd9569be28..5ce7dba6cb 100644 --- a/packages/libs/react-ui/src/components/Logo/index.tsx +++ b/packages/libs/react-ui/src/components/BrandLogo/index.tsx @@ -20,9 +20,9 @@ const renderSwitch = ( } }; -const Logo: FC<{ variant?: LogoVariant }> = ({ variant }) => { +const BrandLogo: FC<{ variant?: LogoVariant }> = ({ variant }) => { const LogoComponent = renderSwitch(variant); return ; }; -export default Logo; +export default BrandLogo; diff --git a/packages/libs/react-ui/src/components/Logo/readme.md b/packages/libs/react-ui/src/components/BrandLogo/readme.md similarity index 100% rename from packages/libs/react-ui/src/components/Logo/readme.md rename to packages/libs/react-ui/src/components/BrandLogo/readme.md diff --git a/packages/libs/react-ui/src/components/Logo/variants/Kadena.tsx b/packages/libs/react-ui/src/components/BrandLogo/variants/Kadena.tsx similarity index 100% rename from packages/libs/react-ui/src/components/Logo/variants/Kadena.tsx rename to packages/libs/react-ui/src/components/BrandLogo/variants/Kadena.tsx diff --git a/packages/libs/react-ui/src/components/Logo/variants/KadenaDevTools.tsx b/packages/libs/react-ui/src/components/BrandLogo/variants/KadenaDevTools.tsx similarity index 100% rename from packages/libs/react-ui/src/components/Logo/variants/KadenaDevTools.tsx rename to packages/libs/react-ui/src/components/BrandLogo/variants/KadenaDevTools.tsx diff --git a/packages/libs/react-ui/src/components/Logo/variants/KadenaDocs.tsx b/packages/libs/react-ui/src/components/BrandLogo/variants/KadenaDocs.tsx similarity index 100% rename from packages/libs/react-ui/src/components/Logo/variants/KadenaDocs.tsx rename to packages/libs/react-ui/src/components/BrandLogo/variants/KadenaDocs.tsx diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx index 802c59537d..149b00e695 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx @@ -3,7 +3,7 @@ import type { INavHeaderProps, INavItems } from './NavHeader'; import React from 'react'; -import { logoVariants } from '@components/Logo'; +import { logoVariants } from '@components/BrandLogo'; import { NavHeader } from './'; import { NavHeaderNavigation } from './'; import { NavHeaderContent } from './'; diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx index 22ebe79a21..ba0a01cb5a 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx @@ -1,9 +1,9 @@ import React, { FC } from 'react'; -import type { LogoVariant } from '@components/Logo'; +import type { LogoVariant } from '@components/BrandLogo'; import { Link } from '@components/Link'; -import Logo, { logoVariants } from '@components/Logo'; +import Logo, { logoVariants } from '@components/BrandLogo'; import { containerClass, logoClass } from './NavHeader.css'; From 04d0edf276f6fbfc85f0735ac7711975b4037281 Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Thu, 3 Aug 2023 11:30:46 +0200 Subject: [PATCH 35/47] chore: linting --- .../components/NavHeader/NavHeader.stories.tsx | 12 ++++-------- .../src/components/NavHeader/NavHeader.tsx | 12 +++++------- .../NavHeader/NavHeaderNavigation.tsx | 17 ++++++++--------- .../src/components/NavHeader/useGlow.tsx | 2 +- 4 files changed, 18 insertions(+), 25 deletions(-) diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx index 149b00e695..eb698bd4f0 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx @@ -1,14 +1,10 @@ -import type { Meta, StoryObj } from '@storybook/react'; import type { INavHeaderProps, INavItems } from './NavHeader'; - -import React from 'react'; +import { NavHeaderChildren } from './NavHeader.stories.children'; +import { NavHeader, NavHeaderContent, NavHeaderNavigation } from './'; import { logoVariants } from '@components/BrandLogo'; -import { NavHeader } from './'; -import { NavHeaderNavigation } from './'; -import { NavHeaderContent } from './'; - -import { NavHeaderChildren } from './NavHeader.stories.children'; +import type { Meta, StoryObj } from '@storybook/react'; +import React from 'react'; const navItems: INavItems = [ { diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx index ba0a01cb5a..89fe8fb986 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx @@ -1,18 +1,16 @@ -import React, { FC } from 'react'; +import { containerClass, logoClass } from './NavHeader.css'; import type { LogoVariant } from '@components/BrandLogo'; - -import { Link } from '@components/Link'; import Logo, { logoVariants } from '@components/BrandLogo'; - -import { containerClass, logoClass } from './NavHeader.css'; +import { Link } from '@components/Link'; +import React, { FC } from 'react'; export type INavItemTarget = '_self' | '_blank'; -export type INavItem = { +export interface INavItem { title: string; href: string; target?: INavItemTarget; -}; +} export type INavItems = INavItem[]; export interface INavHeaderProps { diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeaderNavigation.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeaderNavigation.tsx index 65eba44ba2..3c48c71348 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeaderNavigation.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeaderNavigation.tsx @@ -1,6 +1,4 @@ -import classNames from 'classnames'; -import React, { FC } from 'react'; - +import { NavGlow } from './assets/glow'; import { activeLinkClass, glowClass, @@ -8,16 +6,17 @@ import { navListClass, navWrapperClass, } from './NavHeader.css'; - -import { NavGlow } from './assets/glow'; import useGlow from './useGlow'; +import classNames from 'classnames'; +import React, { FC } from 'react'; + export type INavItemTarget = '_self' | '_blank'; -export type INavItem = { +export interface INavItem { href: string; target?: INavItemTarget; title: string; -}; +} export type INavItems = INavItem[]; export interface INavHeaderNavigationProps { @@ -47,8 +46,8 @@ export const NavHeaderNavigation: FC = ({
  • setActiveNav(index + 1)}> {React.cloneElement( child as React.ReactElement< - any, - string | React.JSXElementConstructor + HTMLElement, + string | React.JSXElementConstructor >, { className: classNames(linkClass, { diff --git a/packages/libs/react-ui/src/components/NavHeader/useGlow.tsx b/packages/libs/react-ui/src/components/NavHeader/useGlow.tsx index 09536f3824..9c5d7aab5b 100644 --- a/packages/libs/react-ui/src/components/NavHeader/useGlow.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/useGlow.tsx @@ -1,4 +1,4 @@ -import { useState, useRef, useEffect } from 'react'; +import { useEffect, useRef, useState } from 'react'; interface IUseGlowReturn { activeNav: number; From a23371ee249e8857966b25d1fe46a6092cf4efa6 Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Thu, 3 Aug 2023 11:59:34 +0200 Subject: [PATCH 36/47] feat: story controls --- .../NavHeader/NavHeader.stories.tsx | 35 ++++++++++++++++--- 1 file changed, 31 insertions(+), 4 deletions(-) diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx index eb698bd4f0..5f0dde792e 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx @@ -6,7 +6,7 @@ import { logoVariants } from '@components/BrandLogo'; import type { Meta, StoryObj } from '@storybook/react'; import React from 'react'; -const navItems: INavItems = [ +const sampleNavItems: INavItems = [ { title: 'Faucet', href: '#faucet', @@ -32,6 +32,8 @@ const navItems: INavItems = [ type StoryProps = { linksCount: number; renderContent: boolean; + useCustomNavigation: boolean; + customNavigation: INavItems; } & INavHeaderProps; const meta: Meta = { @@ -59,9 +61,22 @@ const meta: Meta = { defaultValue: { summary: logoVariants[0] }, }, }, + useCustomNavigation: { + control: { type: 'boolean' }, + description: 'Add your own navigation items instead of the sample ones?', + }, linksCount: { - control: { type: 'range', min: 1, max: navItems.length, step: 1 }, + control: { type: 'range', min: 1, max: sampleNavItems.length, step: 1 }, description: 'Adjust sample navigation items count', + if: { arg: 'useCustomNavigation', neq: true }, + }, + customNavigation: { + defaultValue: [], + description: 'Custom navigation items', + control: { + type: 'array', + }, + if: { arg: 'useCustomNavigation', eq: true }, }, renderContent: { control: { type: 'boolean' }, @@ -74,8 +89,20 @@ type Story = StoryObj; export const Dynamic: Story = { name: 'NavHeader', - args: { brand: logoVariants[0], linksCount: 3 }, - render: ({ brand, linksCount, renderContent = false }) => { + args: { + brand: logoVariants[0], + linksCount: 3, + customNavigation: sampleNavItems, + }, + render: ({ + brand, + useCustomNavigation, + customNavigation, + linksCount, + renderContent = false, + }) => { + const navItems = useCustomNavigation ? customNavigation : sampleNavItems; + console.log(navItems); return ( From 1ce63cb90957685fa9da28adbeb11bf700d37d3a Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Thu, 3 Aug 2023 12:01:32 +0200 Subject: [PATCH 37/47] chore: remove console log --- .../libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx index 5f0dde792e..5b2222f912 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx @@ -102,7 +102,6 @@ export const Dynamic: Story = { renderContent = false, }) => { const navItems = useCustomNavigation ? customNavigation : sampleNavItems; - console.log(navItems); return ( From 3467e6cbea0cd98d8444401a169d7175abd03155 Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Fri, 4 Aug 2023 07:54:05 +0200 Subject: [PATCH 38/47] chore: use ts extension for hook --- .../src/components/NavHeader/{useGlow.tsx => useGlow.ts} | 1 + 1 file changed, 1 insertion(+) rename packages/libs/react-ui/src/components/NavHeader/{useGlow.tsx => useGlow.ts} (99%) diff --git a/packages/libs/react-ui/src/components/NavHeader/useGlow.tsx b/packages/libs/react-ui/src/components/NavHeader/useGlow.ts similarity index 99% rename from packages/libs/react-ui/src/components/NavHeader/useGlow.tsx rename to packages/libs/react-ui/src/components/NavHeader/useGlow.ts index 9c5d7aab5b..1e99f68fcd 100644 --- a/packages/libs/react-ui/src/components/NavHeader/useGlow.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/useGlow.ts @@ -15,6 +15,7 @@ const useGlow = (): IUseGlowReturn => { const [glowX, setGlowX] = useState(0); const [activeNav, setActiveNav] = useState(0); + const prevGlowX = useRef(glowX); const glowAnimationSpeed = useRef(0); From 4c81aa6238ecc78034de97434b1498a55dee38c9 Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Fri, 4 Aug 2023 13:09:56 +0200 Subject: [PATCH 39/47] refactor: use alignItems instead of alignSelf --- .../react-ui/src/components/NavHeader/NavHeader.css.ts | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.css.ts b/packages/libs/react-ui/src/components/NavHeader/NavHeader.css.ts index a824503dec..c95cd11523 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeader.css.ts +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeader.css.ts @@ -16,6 +16,7 @@ export const containerClass = style([ position: 'relative', }), { + alignItems: 'center', selectors: { '&:hover': { textDecoration: 'none', @@ -33,7 +34,6 @@ export const logoClass = style([ marginLeft: '$3', }), { - alignSelf: 'center', zIndex: 1, }, ]); @@ -53,7 +53,6 @@ export const navListClass = style([ justifyContent: 'center', }), { - alignSelf: 'center', listStyle: 'none', zIndex: 1, }, @@ -72,7 +71,6 @@ export const linkClass = style([ textDecoration: 'none', }), { - alignSelf: 'center', padding: `${vars.sizes.$1} ${vars.sizes.$2}`, transition: 'background 0.1s ease, color 0.1s ease', }, @@ -115,9 +113,6 @@ export const childrenClass = style([ marginLeft: 'auto', marginRight: '$3', }), - { - alignSelf: 'center', - }, ]); export const glowClass = style([ From db6d9a4c52db615700f3c153472fa76c06b875b2 Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Mon, 7 Aug 2023 12:24:33 +0200 Subject: [PATCH 40/47] refactor: structure --- .../NavHeader/NavHeader.stories.children.tsx | 17 -------- .../NavHeader/NavHeader.stories.tsx | 43 +++++++++++-------- .../components/NavHeader/NavHeader.test.tsx | 2 +- .../src/components/NavHeader/NavHeader.tsx | 4 +- .../src/components/NavHeader/index.ts | 25 ++++++++--- 5 files changed, 46 insertions(+), 45 deletions(-) delete mode 100644 packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.children.tsx diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.children.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.children.tsx deleted file mode 100644 index a0872fcb20..0000000000 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.children.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { Button } from '@components/Button'; -import React, { FC } from 'react'; - -export const NavHeaderChildren: FC = () => { - return ( - - ); -}; diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx index 5b2222f912..14d0ebb834 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx @@ -1,8 +1,8 @@ -import type { INavHeaderProps, INavItems } from './NavHeader'; -import { NavHeaderChildren } from './NavHeader.stories.children'; -import { NavHeader, NavHeaderContent, NavHeaderNavigation } from './'; +import type { INavHeaderContainerProps, INavItems } from './NavHeader'; +import { NavHeader } from './'; import { logoVariants } from '@components/BrandLogo'; +import { Button } from '@components/Button'; import type { Meta, StoryObj } from '@storybook/react'; import React from 'react'; @@ -23,18 +23,14 @@ const sampleNavItems: INavItems = [ title: 'Learn Pact', href: '#pact', }, - { - title: 'Marmalade', - href: '#marmalade', - }, ]; type StoryProps = { linksCount: number; - renderContent: boolean; + renderSampleContent: boolean; useCustomNavigation: boolean; customNavigation: INavItems; -} & INavHeaderProps; +} & INavHeaderContainerProps; const meta: Meta = { title: 'Navigation/NavHeader', @@ -78,7 +74,7 @@ const meta: Meta = { }, if: { arg: 'useCustomNavigation', eq: true }, }, - renderContent: { + renderSampleContent: { control: { type: 'boolean' }, description: 'Populate (right-hand side) children with sample content?', }, @@ -99,12 +95,12 @@ export const Dynamic: Story = { useCustomNavigation, customNavigation, linksCount, - renderContent = false, + renderSampleContent = false, }) => { const navItems = useCustomNavigation ? customNavigation : sampleNavItems; return ( - - + + {navItems.slice(0, linksCount).map((item, index) => { return ( @@ -112,13 +108,22 @@ export const Dynamic: Story = { ); })} - - {renderContent && ( - - - + + {renderSampleContent && ( + + + )} - + ); }, }; diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.test.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeader.test.tsx index e2a0b74e53..700d9cc762 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeader.test.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeader.test.tsx @@ -6,7 +6,7 @@ import React from 'react'; describe('NavHeader', () => { it('renders correctly', () => { - const { getByTestId } = render(); + const { getByTestId } = render(); const navHeaderContainer = getByTestId('kda-navheader'); expect(navHeaderContainer).toBeInTheDocument(); diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx index 89fe8fb986..10e4b68692 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx @@ -13,13 +13,13 @@ export interface INavItem { } export type INavItems = INavItem[]; -export interface INavHeaderProps { +export interface INavHeaderContainerProps { brand?: LogoVariant; children?: React.ReactNode; items?: INavItems; } -export const NavHeader: FC = ({ +export const NavHeaderContainer: FC = ({ brand = logoVariants[0], children, }) => { diff --git a/packages/libs/react-ui/src/components/NavHeader/index.ts b/packages/libs/react-ui/src/components/NavHeader/index.ts index 14fa3fae87..89b34a27a2 100644 --- a/packages/libs/react-ui/src/components/NavHeader/index.ts +++ b/packages/libs/react-ui/src/components/NavHeader/index.ts @@ -1,7 +1,20 @@ -export type { INavHeaderProps } from './NavHeader'; -export type { INavHeaderNavigationProps } from './NavHeaderNavigation'; -export type { INavHeaderContentProps } from './NavHeaderContent'; +import type { INavHeaderContainerProps } from './NavHeader'; +import { NavHeaderContainer } from './NavHeader'; +import type { INavHeaderContentProps } from './NavHeaderContent'; +import { NavHeaderContent } from './NavHeaderContent'; +import type { INavHeaderNavigationProps } from './NavHeaderNavigation'; +import { NavHeaderNavigation } from './NavHeaderNavigation'; -export { NavHeader } from './NavHeader'; -export { NavHeaderNavigation } from './NavHeaderNavigation'; -export { NavHeaderContent } from './NavHeaderContent'; +import { FC } from 'react'; + +export interface INavHeaderProps { + Root: FC; + Navigation: FC; + Content: FC; +} + +export const NavHeader: INavHeaderProps = { + Root: NavHeaderContainer, + Navigation: NavHeaderNavigation, + Content: NavHeaderContent, +}; From 3831e3400b6f3b20f31347587c7f2adcde8877cd Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Mon, 7 Aug 2023 16:15:34 +0200 Subject: [PATCH 41/47] refactor: NavHeader.Link component --- .../components/NavHeader/NavHeader.stories.tsx | 12 +++++------- .../src/components/NavHeader/NavHeaderLink.tsx | 16 ++++++++++++++++ .../react-ui/src/components/NavHeader/index.ts | 4 ++++ 3 files changed, 25 insertions(+), 7 deletions(-) create mode 100644 packages/libs/react-ui/src/components/NavHeader/NavHeaderLink.tsx diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx index 14d0ebb834..769032b429 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx @@ -101,13 +101,11 @@ export const Dynamic: Story = { return ( - {navItems.slice(0, linksCount).map((item, index) => { - return ( - - {item.title} - - ); - })} + {navItems.slice(0, linksCount).map((item, index) => ( + + {item.title} + + ))} {renderSampleContent && ( diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeaderLink.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeaderLink.tsx new file mode 100644 index 0000000000..1acc0c22aa --- /dev/null +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeaderLink.tsx @@ -0,0 +1,16 @@ +import { linkClass } from './NavHeader.css'; + +import React, { FC } from 'react'; + +export interface INavHeaderLinkProps { + children: React.ReactNode; + href: string; +} + +export const NavHeaderLink: FC = ({ children, href }) => { + return ( + + {children} + + ); +}; diff --git a/packages/libs/react-ui/src/components/NavHeader/index.ts b/packages/libs/react-ui/src/components/NavHeader/index.ts index 89b34a27a2..7c09964be9 100644 --- a/packages/libs/react-ui/src/components/NavHeader/index.ts +++ b/packages/libs/react-ui/src/components/NavHeader/index.ts @@ -2,6 +2,8 @@ import type { INavHeaderContainerProps } from './NavHeader'; import { NavHeaderContainer } from './NavHeader'; import type { INavHeaderContentProps } from './NavHeaderContent'; import { NavHeaderContent } from './NavHeaderContent'; +import type { INavHeaderLinkProps } from './NavHeaderLink'; +import { NavHeaderLink } from './NavHeaderLink'; import type { INavHeaderNavigationProps } from './NavHeaderNavigation'; import { NavHeaderNavigation } from './NavHeaderNavigation'; @@ -10,11 +12,13 @@ import { FC } from 'react'; export interface INavHeaderProps { Root: FC; Navigation: FC; + Link: FC; Content: FC; } export const NavHeader: INavHeaderProps = { Root: NavHeaderContainer, Navigation: NavHeaderNavigation, + Link: NavHeaderLink, Content: NavHeaderContent, }; From 48444ff23d67a847fdd9ea38bee7a14e39cd46c2 Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Tue, 8 Aug 2023 09:49:19 +0200 Subject: [PATCH 42/47] refactor: apply style to header Link component directly --- .../src/components/NavHeader/NavHeaderLink.tsx | 17 ++++++++++++++--- .../NavHeader/NavHeaderNavigation.tsx | 10 +++++----- 2 files changed, 19 insertions(+), 8 deletions(-) diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeaderLink.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeaderLink.tsx index 1acc0c22aa..76c2aaf3ee 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeaderLink.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeaderLink.tsx @@ -1,15 +1,26 @@ -import { linkClass } from './NavHeader.css'; +import { activeLinkClass, linkClass } from './NavHeader.css'; +import classNames from 'classnames'; import React, { FC } from 'react'; export interface INavHeaderLinkProps { children: React.ReactNode; href: string; + active?: boolean; } -export const NavHeaderLink: FC = ({ children, href }) => { +export const NavHeaderLink: FC = ({ + children, + href, + active, +}) => { return ( - + {children} ); diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeaderNavigation.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeaderNavigation.tsx index 3c48c71348..14f2495a32 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeaderNavigation.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeaderNavigation.tsx @@ -6,6 +6,7 @@ import { navListClass, navWrapperClass, } from './NavHeader.css'; +import { INavHeaderLinkProps } from './NavHeaderLink'; import useGlow from './useGlow'; import classNames from 'classnames'; @@ -46,13 +47,12 @@ export const NavHeaderNavigation: FC = ({
  • setActiveNav(index + 1)}> {React.cloneElement( child as React.ReactElement< - HTMLElement, - string | React.JSXElementConstructor + HTMLElement & INavHeaderLinkProps, + | string + | React.JSXElementConstructor >, { - className: classNames(linkClass, { - [activeLinkClass]: activeNav === index + 1, - }), + active: activeNav === index + 1, }, )}
    • From 904f7be6a25c7f2869447d26bd716c2cfa09eefc Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Tue, 8 Aug 2023 09:57:18 +0200 Subject: [PATCH 43/47] refactor: cleanup --- .../src/components/NavHeader/NavHeaderNavigation.tsx | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeaderNavigation.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeaderNavigation.tsx index 14f2495a32..54fe9d7bb7 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeaderNavigation.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeaderNavigation.tsx @@ -1,15 +1,8 @@ import { NavGlow } from './assets/glow'; -import { - activeLinkClass, - glowClass, - linkClass, - navListClass, - navWrapperClass, -} from './NavHeader.css'; +import { glowClass, navListClass, navWrapperClass } from './NavHeader.css'; import { INavHeaderLinkProps } from './NavHeaderLink'; import useGlow from './useGlow'; -import classNames from 'classnames'; import React, { FC } from 'react'; export type INavItemTarget = '_self' | '_blank'; From d1c170cee8210169ba97a78552c9b3b18d934e83 Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Tue, 8 Aug 2023 09:58:33 +0200 Subject: [PATCH 44/47] feat: focused style of active nav item --- .../libs/react-ui/src/components/NavHeader/NavHeader.css.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.css.ts b/packages/libs/react-ui/src/components/NavHeader/NavHeader.css.ts index c95cd11523..9db2d53689 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeader.css.ts +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeader.css.ts @@ -103,6 +103,11 @@ export const activeLinkClass = style([ color: vars.colors.$gray90, textDecoration: 'none', }, + '&:focus-visible': { + background: vars.colors.$blue40, + color: vars.colors.$gray90, + textDecoration: 'none', + }, }, }, ]); From 7de731e71f4067976ff5e0495d5193168feb1d44 Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Tue, 8 Aug 2023 10:33:45 +0200 Subject: [PATCH 45/47] refactor: BrandLogo component types --- packages/libs/react-ui/src/components/BrandLogo/index.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/libs/react-ui/src/components/BrandLogo/index.tsx b/packages/libs/react-ui/src/components/BrandLogo/index.tsx index 5ce7dba6cb..b5985c0a5a 100644 --- a/packages/libs/react-ui/src/components/BrandLogo/index.tsx +++ b/packages/libs/react-ui/src/components/BrandLogo/index.tsx @@ -5,7 +5,11 @@ import { KadenaDocsLogo } from './variants/KadenaDocs'; import React, { FC, SVGProps } from 'react'; export type LogoVariant = 'Kadena' | 'DevTools' | 'Docs'; -export const logoVariants = ['Kadena', 'DevTools', 'Docs'] as LogoVariant[]; +export const logoVariants: LogoVariant[] = ['Kadena', 'DevTools', 'Docs']; + +export interface IBrandLogoProps { + variant?: LogoVariant; +} const renderSwitch = ( logo: LogoVariant = 'Kadena', @@ -20,7 +24,7 @@ const renderSwitch = ( } }; -const BrandLogo: FC<{ variant?: LogoVariant }> = ({ variant }) => { +const BrandLogo: FC = ({ variant }) => { const LogoComponent = renderSwitch(variant); return ; }; From 8a8a5afa0430c6582b7916ddea28e51ce82c16ab Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Tue, 8 Aug 2023 17:48:05 +0200 Subject: [PATCH 46/47] feat: strict children types --- .../src/components/NavHeader/NavHeader.stories.tsx | 12 ++++++------ .../react-ui/src/components/NavHeader/NavHeader.tsx | 5 +++-- .../src/components/NavHeader/NavHeaderLink.tsx | 2 +- .../src/components/NavHeader/NavHeaderNavigation.tsx | 6 +++--- 4 files changed, 13 insertions(+), 12 deletions(-) diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx index 769032b429..353430e7ea 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx @@ -81,9 +81,9 @@ const meta: Meta = { }, }; -type Story = StoryObj; +type IStory = StoryObj; -export const Dynamic: Story = { +export const Dynamic: IStory = { name: 'NavHeader', args: { brand: logoVariants[0], @@ -107,8 +107,8 @@ export const Dynamic: Story = { ))} - {renderSampleContent && ( - + + {renderSampleContent && ( - - )} + )} + ); }, diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx index 10e4b68692..b375677d7b 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx @@ -1,9 +1,10 @@ import { containerClass, logoClass } from './NavHeader.css'; +import { INavHeaderProps } from '.'; import type { LogoVariant } from '@components/BrandLogo'; import Logo, { logoVariants } from '@components/BrandLogo'; import { Link } from '@components/Link'; -import React, { FC } from 'react'; +import React, { FC, FunctionComponentElement } from 'react'; export type INavItemTarget = '_self' | '_blank'; export interface INavItem { @@ -15,7 +16,7 @@ export type INavItems = INavItem[]; export interface INavHeaderContainerProps { brand?: LogoVariant; - children?: React.ReactNode; + children?: FunctionComponentElement[]; items?: INavItems; } diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeaderLink.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeaderLink.tsx index 76c2aaf3ee..aa3fcf3908 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeaderLink.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeaderLink.tsx @@ -4,7 +4,7 @@ import classNames from 'classnames'; import React, { FC } from 'react'; export interface INavHeaderLinkProps { - children: React.ReactNode; + children: string; href: string; active?: boolean; } diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeaderNavigation.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeaderNavigation.tsx index 54fe9d7bb7..758de21275 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeaderNavigation.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeaderNavigation.tsx @@ -3,7 +3,7 @@ import { glowClass, navListClass, navWrapperClass } from './NavHeader.css'; import { INavHeaderLinkProps } from './NavHeaderLink'; import useGlow from './useGlow'; -import React, { FC } from 'react'; +import React, { FC, FunctionComponentElement } from 'react'; export type INavItemTarget = '_self' | '_blank'; export interface INavItem { @@ -14,7 +14,7 @@ export interface INavItem { export type INavItems = INavItem[]; export interface INavHeaderNavigationProps { - children: React.ReactNode; + children: FunctionComponentElement[]; } export const NavHeaderNavigation: FC = ({ @@ -40,7 +40,7 @@ export const NavHeaderNavigation: FC = ({
  • setActiveNav(index + 1)}> {React.cloneElement( child as React.ReactElement< - HTMLElement & INavHeaderLinkProps, + HTMLElement | INavHeaderLinkProps, | string | React.JSXElementConstructor >, From e8dba458dd0e63e08975e837f6f6950e3cf81de9 Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Wed, 9 Aug 2023 10:00:44 +0200 Subject: [PATCH 47/47] chore: be more specific on children type of INavHeaderContainerProps --- .../libs/react-ui/src/components/NavHeader/NavHeader.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx index b375677d7b..a7d85ee7c8 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx @@ -1,5 +1,6 @@ import { containerClass, logoClass } from './NavHeader.css'; -import { INavHeaderProps } from '.'; +import { INavHeaderContentProps } from './NavHeaderContent'; +import { INavHeaderNavigationProps } from './NavHeaderNavigation'; import type { LogoVariant } from '@components/BrandLogo'; import Logo, { logoVariants } from '@components/BrandLogo'; @@ -16,7 +17,9 @@ export type INavItems = INavItem[]; export interface INavHeaderContainerProps { brand?: LogoVariant; - children?: FunctionComponentElement[]; + children?: FunctionComponentElement< + INavHeaderNavigationProps | INavHeaderContentProps + >[]; items?: INavItems; }