Skip to content

Commit

Permalink
dev: Half added RSC support
Browse files Browse the repository at this point in the history
  • Loading branch information
eric-crowell committed Jun 28, 2024
1 parent 85d5d29 commit 26dfe27
Show file tree
Hide file tree
Showing 12 changed files with 2,968 additions and 401 deletions.
24 changes: 8 additions & 16 deletions .storybook/main.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import type { StorybookConfig } from '@storybook/react-vite';
import { resolve } from 'node:path';
import { mergeConfig } from 'vite';
// import { resolve } from 'node:path';
// import { mergeConfig } from 'vite';

const config: StorybookConfig = {
stories: [
Expand All @@ -14,20 +14,12 @@ const config: StorybookConfig = {
'@storybook/addon-themes',
],
framework: {
name: '@storybook/react-vite',
options: {},
},
viteFinal: (config) => {
return mergeConfig(config, {
resolve: {
alias: [
{
find: /^@do-ob\/ui(\/?.*)/,
replacement: resolve('packages/ui/src$1'),
},
],
},
});
name: '@storybook/nextjs',
options: {
},
},
features: {
experimentalRSC: true,
}
};
export default config;
22 changes: 12 additions & 10 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -26,15 +26,16 @@
"@do-ob/vite-lib-config": "^3.0.1",
"@eslint/compat": "^1.1.0",
"@heroicons/react": "^2.1.3",
"@storybook/addon-a11y": "8.2.0-alpha.9",
"@storybook/addon-essentials": "8.2.0-alpha.9",
"@storybook/addon-interactions": "8.2.0-alpha.9",
"@storybook/addon-links": "8.2.0-alpha.9",
"@storybook/addon-themes": "8.2.0-alpha.9",
"@storybook/blocks": "8.2.0-alpha.9",
"@storybook/react": "8.2.0-alpha.9",
"@storybook/react-vite": "8.2.0-alpha.9",
"@storybook/test": "8.2.0-alpha.9",
"@storybook/addon-a11y": "8.2.0-alpha.10",
"@storybook/addon-essentials": "8.2.0-alpha.10",
"@storybook/addon-interactions": "8.2.0-alpha.10",
"@storybook/addon-links": "8.2.0-alpha.10",
"@storybook/addon-themes": "8.2.0-alpha.10",
"@storybook/blocks": "8.2.0-alpha.10",
"@storybook/nextjs": "8.2.0-alpha.10",
"@storybook/react": "8.2.0-alpha.10",
"@storybook/react-vite": "8.2.0-alpha.10",
"@storybook/test": "8.2.0-alpha.10",
"@tailwindcss/container-queries": "^0.1.1",
"@tailwindcss/typography": "^0.5.13",
"@types/node": "^20.12.12",
Expand All @@ -48,12 +49,13 @@
"eslint-plugin-react-compiler": "0.0.0-experimental-51a85ea-20240601",
"eslint-plugin-react-hooks": "^4.6.2",
"framer-motion": "^11.2.10",
"next": "15.0.0-rc.0",
"postcss": "^8.4.38",
"react": "19.0.0-rc-8971381549-20240625",
"react-aria": "nightly",
"react-aria-components": "nightly",
"react-dom": "19.0.0-rc-8971381549-20240625",
"storybook": "8.2.0-alpha.9",
"storybook": "8.2.0-alpha.10",
"tailwind-merge": "^2.3.0",
"tailwindcss": "^3.4.3",
"tailwindcss-animate": "^1.0.7",
Expand Down
13 changes: 12 additions & 1 deletion packages/ui/src/components/Button/Button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,15 @@ const sizeStyles: Record<NonNullable<ButtonProps['size']>, string> = {
lg: 'px-6 h-14 text-xl',
};

/**
* Define tailwind classes for the sizes in non-text context.
*/
const sizeComponetStyles: Record<NonNullable<ButtonProps['size']>, string> = {
sm: 'px-2 min-h-8 text-sm',
md: 'px-4 min-h-11 text-base',
lg: 'px-6 min-h-14 text-xl',
};

/**
* Define tailwind classes for the sizes.
*/
Expand Down Expand Up @@ -68,7 +77,9 @@ export function Button<
const Tag = as ?? (href ? AriaLink : AriaButton);

const variantClasses = variantStyles[variant];
const sizeClasses = iconify ? sizeIconStyles[size] : sizeStyles[size];
const sizeClasses = iconify ?
sizeIconStyles[size] :
(typeof children === 'string' ? sizeStyles[size] : sizeComponetStyles[size]);
const colorClasses = (() => {
switch (variant) {
case 'filled':
Expand Down
9 changes: 9 additions & 0 deletions packages/ui/src/widgets/Brand/Brand.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,3 +17,12 @@ export const Default: Story = {
nameShort: 'My Short Name',
}
};

export const WithHREF: Story = {
args: {
image: 'https://github.com/do-ob-io/shared/blob/main/do-ob-logo-readme.png?raw=true',
name: 'My Really Long Band Name',
nameShort: 'My Short Name',
href: '/'
}
};
24 changes: 17 additions & 7 deletions packages/ui/src/widgets/Brand/Brand.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Image } from '@do-ob/ui/components';
import { Button, Image } from '@do-ob/ui/components';
import { cn } from '@do-ob/ui/utility';

/**
Expand All @@ -25,6 +25,11 @@ export interface BrandProps {
*/
size?: 'sm' | 'md' | 'lg';

/**
* Hyperlink for the branding.
*/
href?: string;

/**
* Class names for the slots.
*/
Expand Down Expand Up @@ -60,16 +65,21 @@ export function Brand({
nameShort,
image = null,
size = 'md',
href,
className,
classNames = {},
...props
}: BrandProps & React.HTMLAttributes<HTMLDivElement>) {
console.log('test');

const Tag = href?.length ? Button : 'div' as React.ElementType;
console.log('Tag', Tag);

return (
<div className={cn(
'flex flex-row flex-nowrap items-center gap-4 whitespace-nowrap',
<Tag className={cn(
'flex flex-row flex-nowrap items-center gap-4 whitespace-nowrap p-0',
className
)} {...props}>
)} variant={href ? 'light' : undefined} {...props}>
{image && <Image
src={image}
alt="Brand"
Expand All @@ -83,21 +93,21 @@ export function Brand({
)}
/>}
{(name && name?.length) ? (<h1 className={cn(
'hidden tracking-tight lg:inline',
'hidden tracking-tight text-background-fg dark:text-background-dark-fg lg:inline',
textSizes[size],
'whitespace-nowrap leading-none',
classNames.name,
)}>
{name}
</h1>) : null}
{(name && name?.length) ? (<h1 className={cn(
'inline whitespace-nowrap leading-tight tracking-tight lg:hidden',
'inline whitespace-nowrap leading-tight tracking-tight text-background-fg dark:text-background-dark-fg lg:hidden',
textSizes[size],
classNames.name,
)}>
{nameShort ?? name}
</h1>) : null}
</div>
</Tag>
);
}

23 changes: 22 additions & 1 deletion packages/ui/src/widgets/Header/Header.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,18 @@
import type { Meta, StoryObj } from '@storybook/react';

// import { Suspense } from 'react';
import { Header } from './Header';
import { Link } from '@do-ob/ui/types';

const meta = {
component: Header,
// decorators: [
// Story => (
// <Suspense>
// <Story />
// </Suspense>
// ),
// ],
} satisfies Meta<typeof Header>;

export default meta;
Expand Down Expand Up @@ -84,8 +92,21 @@ const links: Link[] = [
},
];

export const Default: Story = {
export const Standard: Story = {
args: {
variant: 'standard',
brand: {
image: 'https://github.com/do-ob-io/shared/blob/main/do-ob-logo-readme.png?raw=true',
},
navigation: {
links,
}
}
};

export const Extended: Story = {
args: {
variant: 'extended',
brand: {
image: 'https://github.com/do-ob-io/shared/blob/main/do-ob-logo-readme.png?raw=true',
},
Expand Down
60 changes: 13 additions & 47 deletions packages/ui/src/widgets/Header/Header.tsx
Original file line number Diff line number Diff line change
@@ -1,54 +1,20 @@
import { cn } from '@do-ob/ui/utility';
import { Brand, BrandProps, Navigation, NavigationProps } from '@do-ob/ui/widgets';
import type { HeaderProps } from './Header.types';

export interface HeaderProps {
/**
* Branding properties.
*/
brand?: BrandProps;

/**
* Navigation properties.
*/
navigation?: NavigationProps;

/**
* Maximum width of the header.
*/
maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
}
const variants: Record<NonNullable<HeaderProps['variant']>, () => Promise<React.ComponentType<HeaderProps>>> = {
standard: async () => (await import('./HeaderStandard')).HeaderStandard,
extended: async () => (await import('./HeaderExtended')).HeaderExtended,
};

const maxWidthScreenStyles = {
sm: 'max-w-screen-sm',
md: 'max-w-screen-md',
lg: 'max-w-screen-lg',
xl: 'max-w-screen-xl',
'2xl': 'max-w-screen-2xl',
const getVariant = async (variant: NonNullable<HeaderProps['variant']>) => {
return (await variants[variant]());
};

export function Header({
brand,
navigation,
maxWidth = '2xl',
className,
export async function Header({
variant = 'standard',
...props
}: HeaderProps & React.HTMLAttributes<HTMLDivElement>) {
return (
<header
className={cn(
'flex w-full items-center justify-center',
className
)}
{...props}
>
<div className={cn(
'flex w-full items-center justify-center gap-4 px-6 py-4',
maxWidthScreenStyles[maxWidth]
)}>
<Brand {...brand}/>
<Navigation {...navigation} style={{ flex: 2 }}/>
<div className="size-full bg-green-500" style={{ flex: 1 }}>&nbsp;</div>
</div>
</header>
);

const HeaderComponent = await getVariant(variant);

return <HeaderComponent {...props} />;
}
23 changes: 23 additions & 0 deletions packages/ui/src/widgets/Header/Header.types.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import type { BrandProps, NavigationProps } from '@do-ob/ui/widgets';

export interface HeaderProps {
/**
* Branding properties.
*/
brand?: BrandProps;

/**
* The variant of the header.
*/
variant?: 'standard' | 'extended';

/**
* Navigation properties.
*/
navigation?: NavigationProps;

/**
* Maximum width of the header.
*/
maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
}
38 changes: 38 additions & 0 deletions packages/ui/src/widgets/Header/HeaderExtended.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import { cn } from '@do-ob/ui/utility';
import { Brand, Navigation } from '@do-ob/ui/widgets';
import type { HeaderProps } from './Header.types';

const maxWidthScreenStyles = {
sm: 'max-w-screen-sm',
md: 'max-w-screen-md',
lg: 'max-w-screen-lg',
xl: 'max-w-screen-xl',
'2xl': 'max-w-screen-2xl',
};

export function HeaderExtended({
brand,
navigation,
maxWidth = '2xl',
className,
...props
}: HeaderProps & React.HTMLAttributes<HTMLDivElement>) {
return (
<header
className={cn(
'flex w-full items-center justify-center gap-4 px-6 py-4',
className
)}
{...props}
>
<div className={cn(
'grid w-full grid-cols-2 grid-rows-2 items-center justify-center [grid-template-areas:"brand_tools""nav_nav"]',
maxWidthScreenStyles[maxWidth]
)}>
<Brand href={brand?.href ?? '/'} className="[grid-area:brand]" {...brand}/>
<Navigation {...navigation} className="[grid-area:nav]" style={{ flex: 2 }}/>
<div className="size-full bg-green-500 [grid-area:tools]" style={{ flex: 1 }}>&nbsp;</div>
</div>
</header>
);
}
38 changes: 38 additions & 0 deletions packages/ui/src/widgets/Header/HeaderStandard.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import { cn } from '@do-ob/ui/utility';
import { Brand, Navigation } from '@do-ob/ui/widgets';
import type { HeaderProps } from './Header.types';

const maxWidthScreenStyles = {
sm: 'max-w-screen-sm',
md: 'max-w-screen-md',
lg: 'max-w-screen-lg',
xl: 'max-w-screen-xl',
'2xl': 'max-w-screen-2xl',
};

export function HeaderStandard({
brand,
navigation,
maxWidth = '2xl',
className,
...props
}: HeaderProps & React.HTMLAttributes<HTMLDivElement>) {
return (
<header
className={cn(
'flex w-full items-center justify-center',
className
)}
{...props}
>
<div className={cn(
'flex w-full items-center justify-center gap-4 px-6 py-4',
maxWidthScreenStyles[maxWidth]
)}>
<Brand href={brand?.href ?? '/'} {...brand}/>
<Navigation {...navigation} style={{ flex: 2 }}/>
<div className="size-full bg-green-500" style={{ flex: 1 }}>&nbsp;</div>
</div>
</header>
);
}
Loading

0 comments on commit 26dfe27

Please sign in to comment.