LG-3814: MongoNav LiveExample + CodeDocs

.npmrc

@@ -1,2 +1,4 @@
 @lg-private:registry=https://artifactory.corp.mongodb.com/artifactory/api/npm/leafygreen-ui/
-//artifactory.corp.mongodb.com/artifactory/api/npm/leafygreen-ui/
+//artifactory.corp.mongodb.com/artifactory/api/npm/leafygreen-ui/:username=design-systems-team
+//artifactory.corp.mongodb.com/artifactory/api/npm/leafygreen-ui/:[email protected]
+//artifactory.corp.mongodb.com/artifactory/api/npm/leafygreen-ui/:always-auth=true

components/pages/example/LiveExample.styles.ts

@@ -7,7 +7,8 @@ export const liveExampleWrapperStyle = css`
   position: relative;
   display: flex;
   margin-bottom: initial;
-  overflow: hidden;
+  // 'overflow: hidden' will stop MongoNav's Menu's from being hidden
+  /* overflow: hidden; */
   // additional padding is added in storyContainerStyle
   padding: ${60 - spacing[3]}px;
 `;

components/pages/example/LiveExample.tsx

@@ -75,7 +75,8 @@ export const LiveExample = ({
     setShowCode(sc => !sc);
   };
 
-  const storyWrapperStyle = context.meta?.parameters?.wrapperStyle;
+  const storyContainerOverrideStyles =
+    context.meta?.parameters?.containerStyles;
 
   // Commented out as this variable is not needed when code examples are not enabled.
   // This line was causing issues as the page no longer has access to `window`.
@@ -109,9 +110,10 @@ export const LiveExample = ({
             className={cx(storyContainerStyle, {
               [blockContainerStyle]: useBlockWrapperFor.includes(componentName),
             })}
+            style={storyContainerOverrideStyles}
           >
             {isStateReady(context) && (
-              <div ref={storyWrapperRef} className={storyWrapperStyle}>
+              <div ref={storyWrapperRef}>
                 <LiveExampleDecorator meta={context.meta}>
                   <context.StoryFn {...context.knobValues} />
                 </LiveExampleDecorator>

layouts/ComponentLayout.tsx

@@ -165,7 +165,7 @@ function ComponentLayout({
       <div className={mainContentStyle}>
         <div className={cx([flexContainer, containerPadding])}>
           <H2 as="h1" className={pageHeaderStyle}>
-            {componentName}
+            {componentName.replaceAll('-', ' ')}
           </H2>
           {isMobile && component && session && (
             <ComponentLinks

package.json

@@ -61,7 +61,6 @@
     "@leafygreen-ui/marketing-modal": "^4.1.2",
     "@leafygreen-ui/menu": "^23.0.0",
     "@leafygreen-ui/modal": "^16.0.3",
-    "@leafygreen-ui/mongo-nav": "^12.2.0",
     "@leafygreen-ui/number-input": "^1.0.18",
     "@leafygreen-ui/pagination": "^1.0.18",
     "@leafygreen-ui/palette": "^4.0.8",
@@ -88,6 +87,7 @@
     "@leafygreen-ui/tokens": "^2.2.0",
     "@leafygreen-ui/tooltip": "^11.0.0",
     "@leafygreen-ui/typography": "^18.0.1",
+    "@lg-private/mongo-nav": "^13.1.2",
     "@lg-tools/cli": "^0.4.2",
     "@lg-tools/storybook": "^0.3.1",
     "@mdx-js/loader": "^2.1.0",

utils/_getComponentResources.tsx

@@ -4,6 +4,8 @@ import util from 'util';
 import markdownToHtml from 'utils/markdownToHtml';
 import { CustomComponentDoc } from 'utils/tsdoc.utils';
 
+import { PRIVATE_PACKAGES } from './constants';
+
 // eslint-disable-next-line import/no-anonymous-default-export, react/display-name
 export default function () {
   return null;
@@ -46,10 +48,16 @@ export async function getChangelog(
   componentName: string,
 ): Promise<string | null> {
   try {
+    let namespace = '@leafygreen-ui';
+
+    if (PRIVATE_PACKAGES.includes(componentName)) {
+      namespace = '@lg-private';
+    }
+
     const changelogMarkdown = await getFileContent(
       path.join(
         './node_modules',
-        `@leafygreen-ui/${componentName}`,
+        `${namespace}/${componentName}`,
         '/CHANGELOG.md',
       ),
     );
@@ -62,10 +70,16 @@ export async function getChangelog(
 
 export async function getReadme(componentName: string): Promise<string | null> {
   try {
+    let namespace = '@leafygreen-ui';
+
+    if (PRIVATE_PACKAGES.includes(componentName)) {
+      namespace = '@lg-private';
+    }
+
     const readmeMarkdown = await getFileContent(
       path.join(
         './node_modules',
-        `@leafygreen-ui/${componentName}`,
+        `${namespace}/${componentName}`,
         '/README.md',
       ),
       'utf-8',
@@ -81,14 +95,19 @@ export async function getReadme(componentName: string): Promise<string | null> {
 export async function getTSDoc(
   componentName: string,
 ): Promise<Array<CustomComponentDoc> | null> {
+  let namespace = '@leafygreen-ui';
   if (typeof componentName !== 'string') return null;
 
+  if (PRIVATE_PACKAGES.includes(componentName)) {
+    namespace = '@lg-private';
+  }
+
   try {
     return JSON.parse(
       await getFileContent(
         path.join(
           './node_modules',
-          `@leafygreen-ui/${componentName}`,
+          `${namespace}/${componentName}`,
           '/tsdoc.json',
         ),
         'utf-8',

utils/constants.ts

@@ -0,0 +1 @@
+export const PRIVATE_PACKAGES: Array<string> = ['mongo-nav'];

utils/getComponentStories.ts

@@ -1,5 +1,7 @@
 import { ComponentStoryFn, Meta } from '@storybook/react';
 
+import { PRIVATE_PACKAGES } from './constants';
+
 export type ModuleType = {
   default: Meta<any>;
 } & {
@@ -12,8 +14,14 @@ export type ModuleType = {
 export async function getComponentStories(
   kebabName: string,
 ): Promise<ModuleType | undefined> {
+  let namespace = '@leafygreen-ui';
+
+  if (PRIVATE_PACKAGES.includes(kebabName)) {
+    namespace = '@lg-private';
+  }
+
   try {
-    return import(`@leafygreen-ui/${kebabName}/stories.js`);
+    return import(`node_modules/${namespace}/${kebabName}/stories.js`);
   } catch (err) {
     console.warn(err);
     return;