Add new code preview for app [MDS-771]

docs/app/@types/global.d.ts

@@ -0,0 +1,3 @@
+type SC<P = Record<string, unknown>> = (
+  props: P & { children?: React.ReactNode }
+) => Promise<JSX.Element | null>;

docs/app/components/server/accordion/page.tsx

@@ -2,7 +2,7 @@ import { ContentOutsideSizes } from '@/app/components/server/accordion/examples/
 import { Default } from '@/app/components/server/accordion/examples/Default';
 import { Disabled } from '@/app/components/server/accordion/examples/Disabled';
 import { Sizes } from '@/app/components/server/accordion/examples/Sizes';
-import ExampleSection from '@/app/components/shared/ExampleSection';
+import ExampleSection from '@/app/components/shared/exampleSection/ExampleSection';
 import QuickNav from '@/app/components/shared/QuickNav';
 import { getExamples } from '@/app/utils/getExamples';
 import { MDX } from '@/components/MDX';
@@ -11,7 +11,7 @@ export default async function Accordion() {
   const { server } = await getExamples();
   const examplesList = Object.keys(server.accordion.examples);
   return (
-    <div className="w-full max-w-7xl flex flex-col gap-4 text-moon-14">
+    <div className="w-full max-w-3xl flex flex-col gap-12 text-moon-14">
       <h1 className="font-medium text-moon-32">Accordion</h1>
       <MDX markdown={server.accordion.description} />
       <QuickNav items={examplesList} />

docs/app/components/server/button/page.tsx

@@ -6,7 +6,7 @@ import { Icons } from '@/app/components/server/button/examples/Icons';
 import { Multiline } from '@/app/components/server/button/examples/Multiline';
 import { Sizes } from '@/app/components/server/button/examples/Sizes';
 import { Variants } from '@/app/components/server/button/examples/Variants';
-import ExampleSection from '@/app/components/shared/ExampleSection';
+import ExampleSection from '@/app/components/shared/exampleSection/ExampleSection';
 import QuickNav from '@/app/components/shared/QuickNav';
 import { getExamples } from '@/app/utils/getExamples';
 import { MDX } from '@/components/MDX';
@@ -15,12 +15,13 @@ export default async function Button() {
   const { server } = await getExamples();
   const examplesList = Object.keys(server.button.examples);
   return (
-    <div className="w-full max-w-7xl flex flex-col gap-4 text-moon-14">
+    <div className="w-full max-w-3xl flex flex-col gap-12 text-moon-14">
       <h1 className="font-medium text-moon-32">Button</h1>
       <MDX markdown={server.button.description} />
       <QuickNav items={examplesList} />
       <ExampleSection
         title="Default"
+        description="Buttons in moon.io have specific functions and their appearance indicates those functions to the user. To ensure that the buttons communicate the right actions, it is essential to use the appropriate variants consistently across products."
         component={<Default />}
         code={server.button.examples.Default}
       />

docs/app/components/server/checkbox/page.tsx

@@ -1,5 +1,5 @@
 import { Default } from '@/app/components/server/checkbox/examples/Default';
-import ExampleSection from '@/app/components/shared/ExampleSection';
+import ExampleSection from '@/app/components/shared/exampleSection/ExampleSection';
 import QuickNav from '@/app/components/shared/QuickNav';
 import { getExamples } from '@/app/utils/getExamples';
 import { MDX } from '@/components/MDX';
@@ -8,7 +8,7 @@ export default async function Checkbox() {
   const { server } = await getExamples();
   const examplesList = Object.keys(server.checkbox.examples);
   return (
-    <div className="w-full max-w-7xl flex flex-col gap-4 text-moon-14">
+    <div className="w-full max-w-3xl flex flex-col gap-12 text-moon-14">
       <h1 className="font-medium text-moon-32">Checkbox</h1>
       <MDX markdown={server.checkbox.description} />
       <QuickNav items={examplesList} />

docs/app/components/server/chip/page.tsx

@@ -1,5 +1,5 @@
 import { Default } from '@/app/components/server/chip/examples/Default';
-import ExampleSection from '@/app/components/shared/ExampleSection';
+import ExampleSection from '@/app/components/shared/exampleSection/ExampleSection';
 import QuickNav from '@/app/components/shared/QuickNav';
 import { getExamples } from '@/app/utils/getExamples';
 import { MDX } from '@/components/MDX';
@@ -8,7 +8,7 @@ export default async function Chip() {
   const { server } = await getExamples();
   const examplesList = Object.keys(server.chip.examples);
   return (
-    <div className="w-full max-w-7xl flex flex-col gap-4 text-moon-14">
+    <div className="w-full max-w-3xl flex flex-col gap-12 text-moon-14">
       <h1 className="font-medium text-moon-32">Chip</h1>
       <MDX markdown={server.chip.description} />
       <QuickNav items={examplesList} />

docs/app/components/server/input/page.tsx

@@ -1,5 +1,5 @@
 import { Default } from '@/app/components/server/input/examples/Default';
-import ExampleSection from '@/app/components/shared/ExampleSection';
+import ExampleSection from '@/app/components/shared/exampleSection/ExampleSection';
 import QuickNav from '@/app/components/shared/QuickNav';
 import { getExamples } from '@/app/utils/getExamples';
 import { MDX } from '@/components/MDX';
@@ -8,7 +8,7 @@ export default async function Input() {
   const { server } = await getExamples();
   const examplesList = Object.keys(server.input.examples);
   return (
-    <div className="w-full max-w-7xl flex flex-col gap-4 text-moon-14">
+    <div className="w-full max-w-3xl flex flex-col gap-12 text-moon-14">
       <h1 className="font-medium text-moon-32">Input</h1>
       <MDX markdown={server.input.description} />
       <QuickNav items={examplesList} />

docs/app/components/server/loader/page.tsx

@@ -1,5 +1,5 @@
 import { Default } from '@/app/components/server/loader/examples/Default';
-import ExampleSection from '@/app/components/shared/ExampleSection';
+import ExampleSection from '@/app/components/shared/exampleSection/ExampleSection';
 import QuickNav from '@/app/components/shared/QuickNav';
 import { getExamples } from '@/app/utils/getExamples';
 import { MDX } from '@/components/MDX';
@@ -8,7 +8,7 @@ export default async function Loader() {
   const { server } = await getExamples();
   const examplesList = Object.keys(server.loader.examples);
   return (
-    <div className="w-full max-w-7xl flex flex-col gap-4 text-moon-14">
+    <div className="w-full max-w-3xl flex flex-col gap-12 text-moon-14">
       <h1 className="font-medium text-moon-32">Loader</h1>
       <MDX markdown={server.loader.description} />
       <QuickNav items={examplesList} />

docs/app/components/server/nativeSelect/page.tsx

@@ -1,5 +1,5 @@
 import { Default } from '@/app/components/server/nativeSelect/examples/Default';
-import ExampleSection from '@/app/components/shared/ExampleSection';
+import ExampleSection from '@/app/components/shared/exampleSection/ExampleSection';
 import QuickNav from '@/app/components/shared/QuickNav';
 import { getExamples } from '@/app/utils/getExamples';
 import { MDX } from '@/components/MDX';
@@ -8,7 +8,7 @@ export default async function NativeSelect() {
   const { server } = await getExamples();
   const examplesList = Object.keys(server.nativeSelect.examples);
   return (
-    <div className="w-full max-w-7xl flex flex-col gap-4 text-moon-14">
+    <div className="w-full max-w-3xl flex flex-col gap-12 text-moon-14">
       <h1 className="font-medium text-moon-32">NativeSelect</h1>
       <MDX markdown={server.nativeSelect.description} />
       <QuickNav items={examplesList} />

docs/app/components/server/pagination/page.tsx

@@ -1,5 +1,5 @@
 import { Default } from '@/app/components/server/pagination/examples/Default';
-import ExampleSection from '@/app/components/shared/ExampleSection';
+import ExampleSection from '@/app/components/shared/exampleSection/ExampleSection';
 import QuickNav from '@/app/components/shared/QuickNav';
 import { getExamples } from '@/app/utils/getExamples';
 import { MDX } from '@/components/MDX';
@@ -8,7 +8,7 @@ export default async function Pagination() {
   const { server } = await getExamples();
   const examplesList = Object.keys(server.pagination.examples);
   return (
-    <div className="w-full max-w-7xl flex flex-col gap-4 text-moon-14">
+    <div className="w-full max-w-3xl flex flex-col gap-12 text-moon-14">
       <h1 className="font-medium text-moon-32">Pagination</h1>
       <MDX markdown={server.pagination.description} />
       <QuickNav items={examplesList} />

docs/app/components/server/table/page.tsx

@@ -1,5 +1,5 @@
 import { Default } from '@/app/components/server/table/examples/Default';
-import ExampleSection from '@/app/components/shared/ExampleSection';
+import ExampleSection from '@/app/components/shared/exampleSection/ExampleSection';
 import QuickNav from '@/app/components/shared/QuickNav';
 import { getExamples } from '@/app/utils/getExamples';
 import { MDX } from '@/components/MDX';
@@ -8,7 +8,7 @@ export default async function Table() {
   const { server } = await getExamples();
   const examplesList = Object.keys(server.table.examples);
   return (
-    <div className="w-full max-w-7xl flex flex-col gap-4 text-moon-14">
+    <div className="w-full max-w-3xl flex flex-col gap-12 text-moon-14">
       <h1 className="font-medium text-moon-32">Table</h1>
       <MDX markdown={server.table.description} />
       <QuickNav items={examplesList} />

docs/app/components/server/tabs/page.tsx

@@ -1,5 +1,5 @@
 import { Default } from '@/app/components/server/tabs/examples/Default';
-import ExampleSection from '@/app/components/shared/ExampleSection';
+import ExampleSection from '@/app/components/shared/exampleSection/ExampleSection';
 import QuickNav from '@/app/components/shared/QuickNav';
 import { getExamples } from '@/app/utils/getExamples';
 import { MDX } from '@/components/MDX';
@@ -8,7 +8,7 @@ export default async function Tabs() {
   const { server } = await getExamples();
   const examplesList = Object.keys(server.tabs.examples);
   return (
-    <div className="w-full max-w-7xl flex flex-col gap-4 text-moon-14">
+    <div className="w-full max-w-3xl flex flex-col gap-12 text-moon-14">
       <h1 className="font-medium text-moon-32">Tabs</h1>
       <MDX markdown={server.tabs.description} />
       <QuickNav items={examplesList} />

docs/app/components/server/tag/page.tsx

@@ -1,5 +1,5 @@
 import { Default } from '@/app/components/server/tag/examples/Default';
-import ExampleSection from '@/app/components/shared/ExampleSection';
+import ExampleSection from '@/app/components/shared/exampleSection/ExampleSection';
 import QuickNav from '@/app/components/shared/QuickNav';
 import { getExamples } from '@/app/utils/getExamples';
 import { MDX } from '@/components/MDX';
@@ -8,7 +8,7 @@ export default async function Tag() {
   const { server } = await getExamples();
   const examplesList = Object.keys(server.tag.examples);
   return (
-    <div className="w-full max-w-7xl flex flex-col gap-4 text-moon-14">
+    <div className="w-full max-w-3xl flex flex-col gap-12 text-moon-14">
       <h1 className="font-medium text-moon-32">Tag</h1>
       <MDX markdown={server.tag.description} />
       <QuickNav items={examplesList} />

docs/app/components/shared/ComponentPreview.tsx → docs/app/components/shared/exampleSection/ComponentPreview.tsx

@@ -1,7 +1,7 @@
 const ComponentPreview = ({ component }: { component: JSX.Element }) => (
   <div
     className={
-      'flex flex-wrap items-center justify-around p-4 gap-2 w-full bg-gohan rounded-moon-s-sm'
+      'flex flex-wrap items-center justify-around p-8 gap-2 w-full rounded-t-moon-s-sm border border-beerus bg-goku'
     }
   >
     {component}

docs/app/components/shared/exampleSection/ExampleSection.tsx

@@ -0,0 +1,28 @@
+import { mergeClassnames } from '@heathmont/moon-base-tw';
+import CodePreview from './codePreview/CodePreview';
+import ComponentPreview from './ComponentPreview';
+import HeaderSection from './HeaderSection';
+
+type Props = {
+  title: string;
+  description?: string | JSX.Element;
+  component: JSX.Element;
+  code: string;
+};
+
+const ExampleSection: SC<Props> = async ({
+  title,
+  description,
+  component,
+  code,
+}) => (
+  <div className={mergeClassnames('flex flex-col gap-4 relative')}>
+    <HeaderSection title={title} description={description} />
+    <div className="bg-gohan rounded-moon-i-sm overflow-hidden mt-2">
+      <ComponentPreview component={component} />
+      <CodePreview code={code} />
+    </div>
+  </div>
+);
+
+export default ExampleSection;

docs/app/components/shared/exampleSection/HeaderSection.tsx

@@ -0,0 +1,24 @@
+import { GenericLink } from '@heathmont/moon-icons-tw';
+
+type Props = {
+  title?: string;
+  description?: string | JSX.Element;
+};
+const HeaderSection = ({ title, description }: Props) => (
+  <>
+    <h2 id={title} className="text-moon-20 font-medium ">
+      <a
+        href={`#${title}`}
+        className="flex items-center gap-3 [&:hover_svg]:opacity-100 cursor-pointer"
+      >
+        {title}
+        <GenericLink className="text-piccolo text-moon-16 opacity-0 transition-opacity" />
+      </a>
+    </h2>
+    {description && (
+      <div className="text-moon-16 text-bulma">{description}</div>
+    )}
+  </>
+);
+
+export default HeaderSection;

docs/app/components/shared/exampleSection/codePreview/CodeCopy.tsx

@@ -0,0 +1,51 @@
+import { useState, useCallback } from 'react';
+import { IconButton, Snackbar } from '@heathmont/moon-core-tw';
+import { FilesCopy, GenericCheckAlternative } from '@heathmont/moon-icons-tw';
+
+const CodeCopy = ({ code }: { code: string }) => {
+  const [snackbar, setSnackbar] = useState('');
+
+  const openSnackbarHandler = useCallback(
+    (type: string) => {
+      if (snackbar) {
+        setSnackbar('');
+        setTimeout(() => {
+          setSnackbar(type);
+        }, 400);
+      } else {
+        setSnackbar(type);
+      }
+    },
+    [snackbar]
+  );
+
+  const copyCode = () => {
+    if (navigator?.clipboard) {
+      navigator.clipboard.writeText(code ? code : '');
+      openSnackbarHandler('top-right');
+    }
+  };
+  return (
+    <>
+      <span className="absolute top-2 right-2 cursor-pointer z-1">
+        <IconButton
+          onClick={copyCode}
+          variant="ghost"
+          icon={<FilesCopy className="text-moon-24 text-bulma stroke-1" />}
+        />
+      </span>
+      <Snackbar
+        isOpen={snackbar === 'top-right'}
+        onOpenChange={setSnackbar}
+        position="top-right"
+      >
+        <Snackbar.Message className="flex gap-2">
+          <GenericCheckAlternative className="text-moon-24 text-roshi stroke-2" />
+          Copy code
+        </Snackbar.Message>
+      </Snackbar>
+    </>
+  );
+};
+
+export default CodeCopy;

docs/app/components/shared/exampleSection/codePreview/CodePreview.tsx

@@ -0,0 +1,11 @@
+import CodePreviewWrapper from './wrapper/CodePreviewWrapper';
+
+const CodePreview = ({ code }: { code: string }) => {
+  return (
+    <CodePreviewWrapper code={code}>
+      <pre id="code">{code}</pre>
+    </CodePreviewWrapper>
+  );
+};
+
+export default CodePreview;

docs/app/components/shared/exampleSection/codePreview/wrapper/CodePreviewWrapper.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import { mergeClassnames } from '@heathmont/moon-base-tw';
+import ToggleCodeBtn from './ToggleCodeBtn';
+import CodeCopy from '../CodeCopy';
+
+const CodePreviewWrapper = ({
+  children,
+  code,
+}: {
+  children?: React.ReactNode;
+  code: string;
+}) => {
+  const [expand, setExpand] = useState(false);
+  const [height, setHeight] = useState(0);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const clickHandler = () => {
+    setExpand(!expand);
+  };
+  useEffect(() => {
+    if (wrapperRef) {
+      setHeight(wrapperRef?.current?.querySelector('#code')?.clientHeight || 0);
+    }
+  }, []);
+  return (
+    <div
+      ref={wrapperRef}
+      className={mergeClassnames(
+        'relative text-bulma p-4 pb-0 md:pr-12 overflow-hidden border border-t-0 border-beerus rounded-b-moon-s-sm'
+      )}
+    >
+      <div
+        className={mergeClassnames(
+          'max-h-32 transition-[max-height] duration-150 ease-in-out overflow-hidden overflow-x-scroll pb-10 pt-10 md:pt-0',
+          expand && 'max-h-96 overflow-scroll'
+        )}
+      >
+        {children}
+      </div>
+      <CodeCopy code={code} />
+      {height > 72 && (
+        <ToggleCodeBtn expand={expand} clickHandler={clickHandler} />
+      )}
+    </div>
+  );
+};
+
+export default CodePreviewWrapper;