dev: Now fully utilizing React Server Components

do-ob-io · Jun 28, 2024 · 03e842b · 03e842b
1 parent 26dfe27
commit 03e842b
Show file tree

Hide file tree

Showing 12 changed files with 219 additions and 205 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -1,25 +1,57 @@
-import type { StorybookConfig } from '@storybook/react-vite';
-// import { resolve } from 'node:path';
-// import { mergeConfig } from 'vite';
+import type { StorybookConfig } from '@storybook/nextjs';
+import { resolve } from 'node:path';
+import { globSync } from 'glob';
+
+const tsFiles = globSync(resolve(__dirname, '../packages/ui/src/*.ts'));
+const tsFilesObject = tsFiles.reduce((acc, filePath) => {
+  const fileName = filePath.split('/').pop()?.replace('.ts', '');
+  if (fileName) {
+    acc[`@do-ob/ui/${fileName}`] = filePath;
+  }
+  return acc;
+}, {});
 
 const config: StorybookConfig = {
   stories: [
     '../packages/ui/src/**/*.stories.@(js|jsx|mjs|ts|tsx)'
   ],
+
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
     '@storybook/addon-a11y',
     '@storybook/addon-themes',
+    '@chromatic-com/storybook'
   ],
+
   framework: {
     name: '@storybook/nextjs',
-    options: {
-    },
+    options: {},
   },
+
   features: {
     experimentalRSC: true,
-  }
+  },
+
+  docs: {},
+
+  typescript: {
+    reactDocgen: 'react-docgen-typescript'
+  },
+
+  webpackFinal: async (config) => {
+    if (config.resolve) {
+      config.resolve.alias = {
+        ...config.resolve.alias,
+        // 👇 Internal modules
+        ...tsFilesObject,
+      };
+    }
+
+    return config;
+  },
+
 };
+
 export default config;
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -1,7 +1,6 @@
-import React from 'react';
 import type { Preview } from '@storybook/react';
-import { withThemeByClassName } from '@storybook/addon-themes';
-import { DoobUiProvider } from '../packages/ui/src/provider';
+// import { withThemeByClassName } from '@storybook/addon-themes';
+import { withDoob } from './provider';
 import '../global.css';
 
 const preview: Preview = {
@@ -12,24 +11,20 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
-  }
+  },
+
+  // tags: [ 'autodocs' ]
 };
 
 export const decorators = [
-  withThemeByClassName({
-    themes: {
-      light: 'light',
-      dark: 'dark',
-    },
-    defaultTheme: 'light',
-  }),
-  (Story) => (
-    <DoobUiProvider navigate={(path) => { history.pushState({}, '', path); }}>
-      <div style={{ minHeight: '100vh' }}>
-        <Story />
-      </div>
-    </DoobUiProvider>
-  ),
+  // withThemeByClassName({
+  //   themes: {
+  //     light: 'light',
+  //     dark: 'dark',
+  //   },
+  //   defaultTheme: 'light',
+  // }),
+  withDoob,
 ];
 
 export default preview;
diff --git a/.storybook/provider.tsx b/.storybook/provider.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { DoobUiProvider } from '../packages/ui/src/provider';
+
+export const withDoob = (Story) => (
+  <DoobUiProvider navigate={(path) => { history.pushState({}, '', path); }}>
+    <div style={{ minHeight: '100vh' }}>
+      {Story()}
+    </div>
+  </DoobUiProvider>
+);
diff --git a/package.json b/package.json
@@ -1,13 +1,10 @@
 {
-  "name": "@do-ob/ui",
+  "name": "do-ob",
   "private": true,
   "version": "0.0.0",
   "description": "do-ob workspace for mild components",
   "packageManager": "[email protected]",
   "type": "module",
-  "exports": {
-    ".": "./packages/ui/src/index.ts"
-  },
   "scripts": {
     "build": "pnpm --filter './packages/*' build",
     "watch": "pnpm --filter './packages/*' watch",
@@ -20,22 +17,22 @@
   "author": "",
   "license": "MIT",
   "devDependencies": {
+    "@chromatic-com/storybook": "^1",
     "@do-ob/core": "^1.1.0",
     "@do-ob/eslint-config": "^2.3.0",
     "@do-ob/ts-config": "^2.0.0",
     "@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.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",
+    "@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/test": "^8.2.0-alpha.10",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/typography": "^0.5.13",
     "@types/node": "^20.12.12",
@@ -49,13 +46,14 @@
     "eslint-plugin-react-compiler": "0.0.0-experimental-51a85ea-20240601",
     "eslint-plugin-react-hooks": "^4.6.2",
     "framer-motion": "^11.2.10",
+    "glob": "^10.4.2",
     "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.10",
+    "storybook": "^8.2.0-alpha.10",
     "tailwind-merge": "^2.3.0",
     "tailwindcss": "^3.4.3",
     "tailwindcss-animate": "^1.0.7",

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -8,9 +8,12 @@
   "files": [
     "dist"
   ],
+  "imports": {
+    "#*": ["./*", "./*.ts", "./*.tsx"]
+  },
   "exports": {
     ".": {
-      "require": "./dist/*.js",
+      "require": "./dist/index.js",
       "import": "./dist/index.js",
       "types": "./dist/index.d.ts"
     },

diff --git a/packages/ui/src/widgets.ts b/packages/ui/src/widgets.ts
@@ -7,4 +7,5 @@ export { HeroArticles } from './widgets/HeroArticles/HeroArticles';
 export { HeroStandard } from './widgets/Hero/HeroStandard';
 // export { HeroPrompt } from './widgets/Hero/HeroPrompt';
 export { Brand, type BrandProps } from './widgets/Brand/Brand';
-export { Header, type HeaderProps } from './widgets/Header/Header';
+export { Header } from './widgets/Header/Header';
+export type { HeaderProps } from './widgets/Header/Header.types';
diff --git a/packages/ui/src/widgets/Brand/Brand.stories.tsx b/packages/ui/src/widgets/Brand/Brand.stories.tsx
@@ -12,15 +12,15 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
-    image: 'https://github.com/do-ob-io/shared/blob/main/do-ob-logo-readme.png?raw=true',
+    logo: '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',
   }
 };
 
 export const WithHREF: Story = {
   args: {
-    image: 'https://github.com/do-ob-io/shared/blob/main/do-ob-logo-readme.png?raw=true',
+    logo: '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: '/'

diff --git a/packages/ui/src/widgets/Brand/Brand.tsx b/packages/ui/src/widgets/Brand/Brand.tsx
@@ -16,9 +16,14 @@ export interface BrandProps {
   nameShort?: string;
 
   /**
-   * The brand image.
+   * The brand logo.
    */
-  image?: string | null;
+  logo?: string | null;
+
+  /**
+   * The dimensions of the logo.
+   */
+  logoSize?: [number, number];
 
   /**
    * Size of the branding
@@ -63,7 +68,8 @@ const textSizes = {
 export function Brand({
   name,
   nameShort,
-  image = null,
+  logo = null,
+  logoSize,
   size = 'md',
   href,
   className,
@@ -80,11 +86,11 @@ export function Brand({
       'flex flex-row flex-nowrap items-center gap-4 whitespace-nowrap p-0',
       className
     )} variant={href ? 'light' : undefined} {...props}>
-      {image && <Image
-        src={image}
+      {logo && <Image
+        src={logo}
         alt="Brand"
-        width={imageSizes[size]}
-        height={imageSizes[size]}
+        width={logoSize?.[0] ?? imageSizes[size]}
+        height={logoSize?.[1] ?? imageSizes[size]}
         objectFit="contain"
         priority
         className={cn(

diff --git a/packages/ui/src/widgets/Header/Header.stories.tsx b/packages/ui/src/widgets/Header/Header.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 // import { Suspense } from 'react';
 import { Header } from './Header';
-import { Link } from '@do-ob/ui/types';
+import { Link, SocialLinks } from '@do-ob/ui/types';
 
 const meta = {
   component: Header,
@@ -92,11 +92,35 @@ const links: Link[] = [
   },
 ];
 
+const socials: SocialLinks = [
+  {
+    type: 'facebook',
+    url: 'https://facebook.com',
+  },
+  {
+    type: 'instagram',
+    url: 'https://instagram.com',
+  },
+  {
+    type: 'linkedin',
+    url: 'https://linkedin.com',
+  },
+  {
+    type: 'x',
+    url: 'https://x.com',
+  },
+  {
+    type: 'youtube',
+    url: 'https://youtube.com',
+  },
+];
+
 export const Standard: Story = {
   args: {
     variant: 'standard',
+    socials,
     brand: {
-      image: 'https://github.com/do-ob-io/shared/blob/main/do-ob-logo-readme.png?raw=true',
+      logo: 'https://github.com/do-ob-io/shared/blob/main/do-ob-logo-readme.png?raw=true',
     },
     navigation: {
       links,
@@ -107,8 +131,9 @@ export const Standard: Story = {
 export const Extended: Story = {
   args: {
     variant: 'extended',
+    socials,
     brand: {
-      image: 'https://github.com/do-ob-io/shared/blob/main/do-ob-logo-readme.png?raw=true',
+      logo: 'https://github.com/do-ob-io/shared/blob/main/do-ob-logo-readme.png?raw=true',
     },
     navigation: {
       links,

diff --git a/packages/ui/src/widgets/Header/Header.types.ts b/packages/ui/src/widgets/Header/Header.types.ts
@@ -1,3 +1,4 @@
+import { SocialLinks } from '@do-ob/ui/types';
 import type { BrandProps, NavigationProps } from '@do-ob/ui/widgets';
 
 export interface HeaderProps {
@@ -16,6 +17,11 @@ export interface HeaderProps {
    */
   navigation?: NavigationProps;
 
+  /**
+   * Social links.
+   */
+  socials?: SocialLinks;
+
   /**
    * Maximum width of the header.
    */

diff --git a/packages/ui/src/widgets/Header/HeaderExtended.tsx b/packages/ui/src/widgets/Header/HeaderExtended.tsx
@@ -29,9 +29,17 @@ export function HeaderExtended({
         '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 className="[grid-area:brand]">
+          <Brand href={brand?.href ?? '/'} {...brand}/>
+        </div>
+        <div className="px-6 [grid-area:nav]">
+          <Navigation {...navigation} style={{ flex: 2 }}/>
+        </div>
+        <div className="[grid-area:tools]">
+          <div className="flex size-full items-center justify-end">
+            <button className="bg-blue-500">Test</button>
+          </div>
+        </div>
       </div>
     </header>
   );