fix(Overview): API Reference overview section design fixes (#8832)

teambit · Apr 25, 2024 · 5ca6062 · 5ca6062
1 parent 668e025
commit 5ca6062
Show file tree

Hide file tree

Showing 7 changed files with 102 additions and 53 deletions.
diff --git a/scopes/api-reference/api-reference/api-reference.ui.runtime.tsx b/scopes/api-reference/api-reference/api-reference.ui.runtime.tsx
@@ -26,14 +26,20 @@ import { decoratorRenderer } from '@teambit/api-reference.renderers.decorator';
 import { SchemaNodeConstructor, SchemaRegistry, Schemas } from '@teambit/semantics.entities.semantic-schema';
 import { CodeAspect, CodeUI } from '@teambit/code';
 import { TaggedExports } from '@teambit/tagged-exports';
+import { WorkspaceAspect, WorkspaceUI } from '@teambit/workspace';
 
 import { APIReferenceAspect } from './api-reference.aspect';
 
 export type APINodeRendererSlot = SlotRegistry<APINodeRenderer[]>;
 export class APIReferenceUI {
-  constructor(private host: string, private apiNodeRendererSlot: APINodeRendererSlot, private code: CodeUI) {}
+  constructor(
+    private host: string,
+    private apiNodeRendererSlot: APINodeRendererSlot,
+    private code: CodeUI,
+    private workspace: WorkspaceUI
+  ) {}
 
-  static dependencies = [ComponentAspect, CodeAspect];
+  static dependencies = [ComponentAspect, CodeAspect, WorkspaceAspect];
   static runtime = UIRuntime;
   static slots = [Slot.withType<APINodeRenderer[]>()];
 
@@ -49,7 +55,7 @@ export class APIReferenceUI {
   TaggedAPIPage = ({ componentId }: { componentId: string }) => {
     return (
       <APIRefRenderersProvider nodeRenderers={flatten(this.apiNodeRendererSlot.values())}>
-        <TaggedExports componentId={componentId} />
+        <TaggedExports componentId={componentId} showBanner={Boolean(this.workspace)} />
       </APIRefRenderersProvider>
     );
   };
@@ -86,14 +92,14 @@ export class APIReferenceUI {
   ];
 
   static async provider(
-    [componentUI, codeUI]: [ComponentUI, CodeUI],
+    [componentUI, codeUI, workspaceUI]: [ComponentUI, CodeUI, WorkspaceUI],
     _,
     [apiNodeRendererSlot]: [APINodeRendererSlot],
     harmony: Harmony
   ) {
     const { config } = harmony;
     const host = String(config.get('teambit.harmony/bit'));
-    const apiReferenceUI = new APIReferenceUI(host, apiNodeRendererSlot, codeUI);
+    const apiReferenceUI = new APIReferenceUI(host, apiNodeRendererSlot, codeUI, workspaceUI);
     apiReferenceUI.registerAPINodeRenderer(apiReferenceUI.apiNodeRenderers);
     const apiReferenceSection = new APIRefSection(apiReferenceUI);
     componentUI.registerNavigation(apiReferenceSection.navigationLink, apiReferenceSection.order);

diff --git a/...ence/overview/api-reference-table-of-contents/api-reference.table-of-contents.module.scss b/...ence/overview/api-reference-table-of-contents/api-reference.table-of-contents.module.scss
@@ -1,31 +1,75 @@
 .apiRefToc {
   display: flex;
-  gap: 48px;
+  flex-direction: column;
+  gap: 20px;
 }
 
 .apiRefTocGroup {
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-  align-items: flex-start;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  gap: 12px;
 }
 
-.apiRefTocGroupItem {
-  display: flex;
-  gap: 8px;
-  justify-content: center;
-  align-items: center;
+.apiRefTocGroupC {
+  display: grid;
+  grid-template-columns: 180px 1fr;
+}
+
+@media (min-width: 600px) {
+  .apiRefTocGroup {
+    grid-template-columns: repeat(1, 1fr);
+  }
+}
+
+@media (min-width: 800px) {
+  .apiRefTocGroup {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (min-width: 1000px) {
+  .apiRefTocGroup {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (min-width: 1200px) {
+  .apiRefTocGroup {
+    grid-template-columns: repeat(4, 1fr);
+  }
 }
 
-.apiRefTocGroupItemName {
+@media (min-width: 1400px) {
+  .apiRefTocGroup {
+    grid-template-columns: repeat(5, 1fr);
+  }
+}
+
+.apiRefTocGroupName {
   display: flex;
-  font-size: 16px;
 }
 
 .apiRefTocGroupIcon {
-  display: flex;
-  > img {
-    height: 16px;
-    width: 16px;
-  }
+  width: 16px;
+  height: 16px;
+  padding: 0px 8px;
+}
+
+.apiRefTocGroupItem {
+  padding: 8px;
+  font-size: 16px;
+  align-items: flex-start;
+}
+
+.apiRefTocLink {
+  text-decoration: none;
+}
+
+.apiRefTocGroupNameContainer {
+  display: grid;
+  font-size: 16px;
+  font-weight: 500;
+  align-items: flex-start;
+  grid-column: 1;
+  padding: 8px 0px;
 }
diff --git a/...pi-reference/overview/api-reference-table-of-contents/api-reference.table-of-contents.tsx b/...pi-reference/overview/api-reference-table-of-contents/api-reference.table-of-contents.tsx
@@ -19,42 +19,33 @@ export function APIReferenceTableOfContents({ apiModel, className }: APIReferenc
 
   return (
     <div className={classNames(styles.apiRefToc, className)}>
-      {apiNodesGroupedByType.map(([type, nodes]) => {
-        const chunkedNodes = chunkArray(nodes.sort(sortAPINodes), 3);
-        return chunkedNodes.map((nodeGroup, groupIndex) => (
-          <div
-            key={`${type}-${groupIndex}`}
-            className={classNames(styles.apiRefTocGroup, { [styles.extraPadding]: groupIndex !== 0 })}
-          >
-            {nodeGroup.map((node) => (
-              <div key={`${type}-${node.api.name}`} className={styles.apiRefTocGroupItem}>
-                <div className={styles.apiRefTocGroupIcon}>{<img src={node.renderer.icon?.url} />}</div>
+      {apiNodesGroupedByType.map(([type, nodes]) => (
+        <div key={type} className={styles.apiRefTocGroupC}>
+          <div key={type} className={styles.apiRefTocGroupNameContainer}>
+            <h3 className={styles.apiRefTocGroupName}>
+              <img className={styles.apiRefTocGroupIcon} src={nodes[0]?.renderer?.icon?.url} alt={`${type} icon`} />
+              <span>{nodes[0]?.renderer?.nodeType}</span>
+            </h3>
+          </div>
+          <div key={type} className={styles.apiRefTocGroup}>
+            {nodes.sort(sortAPINodes).map((node) => (
+              <div key={node.api.name} className={styles.apiRefTocGroupItem}>
                 <div className={styles.apiRefTocGroupItemName}>
-                  <Link href={`~api-reference?selectedAPI=${node.api.name}`}>{node.api.name}</Link>
+                  <Link className={styles.apiRefTocLink} href={`~api-reference?selectedAPI=${node.api.name}`}>
+                    {node.api.name}
+                  </Link>
                 </div>
               </div>
             ))}
           </div>
-        ));
-      })}
+        </div>
+      ))}
     </div>
   );
 }
 
 function sortGroupedAPINodes(a: [string, APINode<SchemaNode>[]], b: [string, APINode<SchemaNode>[]]) {
   const [aType] = a;
   const [bType] = b;
-
-  if (aType < bType) return -1;
-  if (aType > bType) return 1;
-
-  return 0;
-}
-
-function chunkArray<T>(array: T[], size: number): T[][] {
-  const chunkedArr: T[][] = [];
-  for (let i = 0; i < array.length; i += size) {
-    chunkedArr.push(array.slice(i, i + size));
-  }
-  return chunkedArr;
+  return aType.localeCompare(bType);
 }
diff --git a/scopes/api-reference/tagged-exports/tagged-exports.module.scss b/scopes/api-reference/tagged-exports/tagged-exports.module.scss
@@ -23,11 +23,11 @@
 
 .banner {
   display: flex;
-  justify-content: center;
   align-items: center;
+  width: fit-content;
   background-color: rgba(247, 247, 245, 0.631372549);
   border-radius: 8px;
-  padding: 16px;
+  padding: 16px 32px;
   font-size: 16px;
   gap: 8px;
   > img {

diff --git a/scopes/api-reference/tagged-exports/tagged-exports.tsx b/scopes/api-reference/tagged-exports/tagged-exports.tsx
@@ -11,9 +11,10 @@ import styles from './tagged-exports.module.scss';
 
 export type TaggedExportsProps = {
   componentId: string;
+  showBanner?: boolean;
 } & React.HTMLAttributes<HTMLDivElement>;
 
-export function TaggedExports({ componentId, ...rest }: TaggedExportsProps) {
+export function TaggedExports({ componentId, showBanner, ...rest }: TaggedExportsProps) {
   const renderers = useAPIRefRenderers();
   const api = useAPI(componentId, renderers.nodeRenderers);
   const showTableOfContents = api.apiModel?.taggedAPINodes.length === 0;
@@ -65,7 +66,7 @@ export function TaggedExports({ componentId, ...rest }: TaggedExportsProps) {
           })}
         </div>
       )}
-      {!loading && (
+      {!loading && showBanner && (
         <div className={styles.banner}>
           <img style={{ width: 16 }} src="https://static.bit.dev/bit-icons/lightbulb-thinking.svg" />
           <span>

diff --git a/scopes/docs/docs/overview/overview.module.scss b/scopes/docs/docs/overview/overview.module.scss
@@ -2,6 +2,10 @@
   overflow: auto;
   --bit-h-lg: 36px;
 
+  &.noOverflow {
+    overflow: hidden;
+  }
+
   .componentOverviewBlock {
     padding: 50px 40px 10px 40px;
     max-width: 1440px;

diff --git a/scopes/docs/docs/overview/overview.tsx b/scopes/docs/docs/overview/overview.tsx
@@ -81,7 +81,10 @@ export function Overview({ titleBadges, overviewOptions, previewProps, getEmptyS
   }, [component.id.toString(), defaultLoadingState]);
 
   return (
-    <div className={styles.overviewWrapper} key={`${component.id.toString()}`}>
+    <div
+      className={classNames(styles.overviewWrapper, isLoading && styles.noOverflow)}
+      key={`${component.id.toString()}`}
+    >
       {showHeader && (
         <ComponentOverview
           className={classNames(styles.componentOverviewBlock, !isScaling && styles.legacyPreview)}