Start organising the home layout

storybookjs · Jun 22, 2024 · 730e5f4 · 730e5f4
1 parent 5c2b9df
commit 730e5f4
Show file tree

Hide file tree

Showing 11 changed files with 203 additions and 196 deletions.
diff --git a/apps/addon-catalog/app/page.tsx b/apps/addon-catalog/app/page.tsx
@@ -1,12 +1,12 @@
-import { useMemo } from 'react';
 import Link from 'next/link';
 
-import { Icon, TagLink, TagList } from '@repo/ui';
+import { Icon } from '@repo/ui';
 import { AddonItem } from '../components/addon-item';
 import { AddonsGrid } from '../components/addons-grid';
 import { RecipesList } from '../components/recipes-list';
 import { buildTagLinks } from '../lib/build-tag-links';
 import { fetchHomeData } from '../lib/fetch-home-data';
+import { TagList } from '../components/tag-list';
 
 const PageHeaderContainer = (props: any) => <header {...props} />;
 // ${pageMargins}
@@ -78,9 +78,6 @@ const PageHeader = () => (
   </PageHeaderContainer>
 );
 
-const PopularTagsList = (props: any) => <TagList {...props} />;
-// margin-bottom: calc(70px - 32px - 10px);
-
 const SectionHeader = (props: any) => <div {...props} />;
 // display: flex;
 // align-items: center;
@@ -113,7 +110,7 @@ export default async function Home() {
     popularAddons = [],
     popularRecipes = [],
     trendingTags = [],
-    vta = { id: 'vta' },
+    vta,
   } = (await fetchHomeData()) || {};
   // console.log({ popularAddons, popularRecipes, trendingTags, vta })
 
@@ -122,38 +119,34 @@ export default async function Home() {
 
   return (
     <>
-      {/* TODO */}
-      {/* <SocialGraph
-        title={`Integrations | ${title}`}
-        desc="Integrations enable advanced functionality and unlock new workflows. Contributed by core maintainers and the amazing developer community."
-        url={`${home}/integrations`}
-        image={ogImageAddons}
-      /> */}
-      {/* TODO */}
-      {/* <IntegrationsLayout currentPath="/integrations/" RenderHeader={PageHeader}> */}
-      <PopularTagsList
-        limit={6}
-        tags={tagLinks.map(({ link, name }) => (
-          <TagLink key={link} href={link}>
-            {name}
-          </TagLink>
-        ))}
-      />
-
-      <div>
-        <h3>New to Storybook 8</h3>
-      </div>
-      <AddonCallout key={vta.id} orientation="horizontal" {...vta} />
-
-      <PopularAddons title="Popular addons" addonItems={popularAddons} />
-
-      <section>
+      <div className="mb-8 mt-12 flex items-start justify-between">
         <div>
-          <h3>Popular recipes</h3>
+          <h1 className="mb-4 text-5xl">Integrations</h1>
+          <p>
+            Integrate your tools with Storybook to connect workflows and unlock
+            advanced features.
+          </p>
         </div>
-        <PopularRecipes recipeItems={popularRecipes} />
-      </section>
-      {/* </IntegrationsLayout> */}
+        <button className="text-md h-12 flex-shrink-0 rounded-full bg-blue-500 px-6 text-white">
+          Add your integration
+        </button>
+      </div>
+      <div className="flex flex-col md:flex-row">
+        <div className="w-[220px] flex-shrink-0">Sidebar</div>
+        <div className="flex-1">
+          <TagList tagLinks={tagLinks} />
+          <h3 className="mb-4 mt-12 text-2xl">New to Storybook 8</h3>
+          {vta && <AddonItem key={vta.id} orientation="horizontal" {...vta} />}
+          <h3 className="mb-4 mt-12 text-2xl">Popular addons</h3>
+          <div className="grid grid-cols-2 gap-4">
+            {popularAddons.map((addon) => (
+              <AddonItem key={addon.id} orientation="vertical" {...addon} />
+            ))}
+          </div>
+          <h3 className="mb-4 mt-12 text-2xl">Popular recipes</h3>
+          <PopularRecipes recipeItems={popularRecipes} />
+        </div>
+      </div>
     </>
   );
 }
diff --git a/apps/addon-catalog/components/addon-item.tsx b/apps/addon-catalog/components/addon-item.tsx
@@ -1,17 +1,14 @@
+'use client';
+
 import Link, { LinkProps } from 'next/link';
 import humanFormat from 'human-format';
 import { AvatarList } from '@repo/ui';
-import emptySVG from '../images/addon-empty.svg';
 import { VerifiedBadge } from './verified-badge';
+import { cn } from '@repo/utils';
+import Image from 'next/image';
 
 type Orientation = 'vertical' | 'horizontal';
 
-interface Author {
-  id: string;
-  name?: string;
-  avatarUrl?: string;
-}
-
 interface AddonItemProps {
   icon?: string;
   name?: string;
@@ -64,42 +61,42 @@ const ClickIntercept = (props: LinkProps) => <Link {...props} />;
 // bottom: 0;
 // z-index: 1;
 
-const Image = ({
-  isLoading,
-  orientation,
-  src,
-  ...props
-}: {
-  children?: React.ReactNode;
-  isLoading?: boolean;
-  orientation?: Orientation;
-  src: string;
-}) => <div {...props} />;
-// flex: none;
-// width: 48px;
-// height: 48px;
-// margin-right: ${spacing.padding.medium}px;
-// background-image: url(${(props: any) => props.src});
-// background-size: contain;
-// background-position: center;
-// background-repeat: no-repeat;
+// const Image = ({
+//   isLoading,
+//   orientation,
+//   src,
+//   ...props
+// }: {
+//   children?: React.ReactNode;
+//   isLoading?: boolean;
+//   orientation?: Orientation;
+//   src: string;
+// }) => <div {...props} />;
+// // flex: none;
+// // width: 48px;
+// // height: 48px;
+// // margin-right: ${spacing.padding.medium}px;
+// // background-image: url(${(props: any) => props.src});
+// // background-size: contain;
+// // background-position: center;
+// // background-repeat: no-repeat;
 
-// ${(props) =>
-//   props.isLoading &&
-//   css`
-//     ${inlineGlow}
-//   `}
+// // ${(props) =>
+// //   props.isLoading &&
+// //   css`
+// //     ${inlineGlow}
+// //   `}
 
-// @media (min-width: ${breakpoint * 1.5}px) {
-//   width: 64px;
-//   height: 64px;
+// // @media (min-width: ${breakpoint * 1.5}px) {
+// //   width: 64px;
+// //   height: 64px;
 
-//   ${(props) =>
-//     props.orientation === 'vertical' &&
-//     `
-//       margin-bottom: 16px;
-//     `}
-// }
+// //   ${(props) =>
+// //     props.orientation === 'vertical' &&
+// //     `
+// //       margin-bottom: 16px;
+// //     `}
+// // }
 
 const Title = ({
   isLoading,
@@ -221,54 +218,70 @@ export const AddonItem = ({
   from,
   status,
   ...props
-}: AddonItemProps) => (
-  <AddonItemWrapper orientation={orientation} {...props}>
-    {!isLoading && <Link href={`/addons/${name}/`} />}
-    <AddonInfo orientation={orientation}>
-      <Image
+}: AddonItemProps) => {
+  return (
+    <div className={cn('border border-zinc-300')} {...props}>
+      {!isLoading && <Link href={`/addons/${name}/`} />}
+      <AddonInfo orientation={orientation}>
+        {/* <Image
         orientation={orientation}
         isLoading={isLoading}
         src={icon && icon !== '' ? icon : emptySVG}
-      />
-      <div>
-        <Title isLoading={isLoading}>
-          <span>{isLoading ? 'loading' : displayName || name}</span>
-          {appearance &&
-            ['official', 'integrators'].includes(appearance) &&
-            status !== 'deprecated' && (
-              <VerifiedBadge
-                appearance={appearance}
-                creator={verifiedCreator}
-              />
-            )}
-        </Title>
-        <Description isLoading={isLoading}>
-          <span>
-            {isLoading ? 'loading description of addon' : description}
-          </span>
-        </Description>
+      /> */}
+        <div>
+          <Title isLoading={isLoading}>
+            <span>{isLoading ? 'loading' : displayName || name}</span>
+            {appearance &&
+              ['official', 'integrators'].includes(appearance) &&
+              status !== 'deprecated' && (
+                <VerifiedBadge
+                  appearance={appearance}
+                  creator={verifiedCreator}
+                />
+              )}
+          </Title>
+          <Description isLoading={isLoading}>
+            <span>
+              {isLoading ? 'loading description of addon' : description}
+            </span>
+          </Description>
+        </div>
+      </AddonInfo>
+      <Spacer />
+      <div className={cn('flex')}>
+        <Stats
+          size="small"
+          count={
+            isLoading
+              ? undefined
+              : humanFormat(weeklyDownloads || 0, {
+                  decimals: 1,
+                  separator: '',
+                })
+          }
+          text={isLoading ? undefined : 'Downloads'}
+          noPlural
+          isLoading={isLoading}
+        />
+        <div className="flex items-center">
+          {authors?.slice(0, 3).map((author) => (
+            <div
+              key={author.id}
+              className="relative -ml-2 h-8 w-8 overflow-hidden rounded-full"
+            >
+              {author.avatarUrl && (
+                <Image
+                  src={`https:${author.avatarUrl}`}
+                  alt={author.name || ''}
+                  fill={true}
+                  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+                />
+              )}
+            </div>
+          ))}
+          <div className="ml-2">+ 8</div>
+        </div>
       </div>
-    </AddonInfo>
-    <Spacer />
-    <Meta>
-      <Stats
-        size="small"
-        count={
-          isLoading
-            ? undefined
-            : humanFormat(weeklyDownloads || 0, {
-                decimals: 1,
-                separator: '',
-              })
-        }
-        text={isLoading ? undefined : 'Downloads'}
-        noPlural
-        isLoading={isLoading}
-      />
-      <Authors
-        users={isLoading ? undefined : authors || []}
-        isLoading={isLoading}
-      />
-    </Meta>
-  </AddonItemWrapper>
-);
+    </div>
+  );
+};
diff --git a/apps/addon-catalog/components/addons-grid.tsx b/apps/addon-catalog/components/addons-grid.tsx
@@ -40,10 +40,6 @@ export const AddonsGrid = ({
   ...props
 }: AddonsGridProps) => (
   <section>
-    <SectionHeader>
-      <Title>{title}</Title>
-      {actions}
-    </SectionHeader>
     <Grid {...props}>
       {addonItems.map((addon) => (
         <AddonItem

diff --git a/packages/ui/src/tag-item/index.tsx → ...don-catalog/components/tag-item/index.tsx b/packages/ui/src/tag-item/index.tsx → ...don-catalog/components/tag-item/index.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
 interface TagItemProps {
   children?: React.ReactNode;
   isLoading?: boolean;
@@ -11,6 +9,7 @@ function randomString(min: number, max: number): string {
     .toString(36)
     .slice(1);
 }
+
 export const TagItem = ({ isLoading, children, ...rest }: TagItemProps) => (
   <div {...rest} {...(isLoading && { 'aria-label': 'Loading tag' })}>
     {isLoading ? randomString(5, 12) : children}

diff --git a/packages/ui/src/tag-link/index.tsx → ...don-catalog/components/tag-link/index.tsx b/packages/ui/src/tag-link/index.tsx → ...don-catalog/components/tag-link/index.tsx
diff --git a/apps/addon-catalog/components/tag-list/index.tsx b/apps/addon-catalog/components/tag-list/index.tsx
@@ -0,0 +1,51 @@
+'use client';
+
+import React, { useState } from 'react';
+import Link from 'next/link';
+
+interface TagProps {
+  name: string;
+  link: string;
+}
+
+interface TagListProps {
+  tagLinks: TagProps[];
+}
+
+export const TagList = ({ tagLinks }: TagListProps) => {
+  const [moreTagsVisible, setMoreTagsVisible] = useState(false);
+
+  const primaryTags = tagLinks.slice(0, 6);
+  const moreTags = tagLinks.slice(6);
+
+  return (
+    <div className="flex flex-row items-center gap-2">
+      {primaryTags.map(({ name, link }) => (
+        <TagItem key={link} name={name} link={link} />
+      ))}
+      {moreTagsVisible &&
+        moreTags.map(({ name, link }) => (
+          <TagItem key={link} name={name} link={link} />
+        ))}
+      {moreTags.length > 0 && !moreTagsVisible && (
+        <button
+          onClick={() => {
+            setMoreTagsVisible(true);
+          }}
+          type="button"
+        >
+          {`+ ${moreTags.length} more`}
+        </button>
+      )}
+    </div>
+  );
+};
+
+const TagItem = ({ name, link }: TagProps) => (
+  <Link
+    href={link}
+    className="flex h-7 items-center justify-center rounded bg-blue-100 px-2"
+  >
+    {name}
+  </Link>
+);