Deploy 10.7.7 (#2398)

docs/CHANGELOG.md

@@ -1,5 +1,15 @@
 # docs
 
+## 10.7.7
+
+### Patch Changes
+
+- Deploy 10.7.7
+- Updated dependencies
+  - @heathmont/moon-cmdk-tw@10.7.7
+  - @heathmont/moon-core-tw@10.7.7
+  - @heathmont/moon-base-tw@10.7.7
+
 ## 10.7.6
 
 ### Patch Changes

docs/app/components/client/accordion/description.md

@@ -0,0 +1,3 @@
+An accordion is a vertical stack of interactive headings used to toggle the display of further information; each item can be 'collapsed' with just a short label visible or 'expanded' to show the full content.
+
+Based on [Radix UI](https://www.radix-ui.com/).

docs/app/components/client/accordion/examples/Default.tsx

@@ -0,0 +1,44 @@
+'use client'
+
+import React from 'react';
+import Accordion from '@heathmont/moon-core-tw/lib/es/accordion/Accordion';
+import { ControlsChevronDownSmall } from '@heathmont/moon-icons-tw';
+
+export const Default = () => (
+  <Accordion>
+    <Accordion.Item value="item-1">
+      <Accordion.Header className="moon-open:[&_svg]:rotate-180">
+        <Accordion.Button>
+          <span>Default</span>
+          <ControlsChevronDownSmall className="text-trunks text-moon-24 transition duration-200 moon-open:text-bulma" />
+        </Accordion.Button>
+      </Accordion.Header>
+      <Accordion.Content>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+        mollit anim id est laborum.
+      </Accordion.Content>
+    </Accordion.Item>
+    <Accordion.Item value="item-2">
+      <Accordion.Header className="moon-open:[&_svg]:rotate-180">
+        <Accordion.Button>
+          <span>Test accordion</span>
+          <ControlsChevronDownSmall className="text-trunks text-moon-24 transition duration-200 moon-open:text-bulma" />
+        </Accordion.Button>
+      </Accordion.Header>
+      <Accordion.Content>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+        mollit anim id est laborum.
+      </Accordion.Content>
+    </Accordion.Item>
+  </Accordion>
+);

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

@@ -0,0 +1,22 @@
+import { Default } from "./examples/Default";
+import { getExamples } from "@/app/utils/getExamples";
+import { MDX } from "@/components/MDX";
+
+export default async function Home() {
+  const { client } = await getExamples()
+  return (
+    <div className="flex flex-col gap-4 text-moon-14">
+      <h1>Accordion</h1>
+
+      <MDX markdown={client.accordion.description} />
+
+      <div className="space-y-2">
+        <h2>Default</h2>
+        <div className={'flex flex-wrap items-center justify-around p-4 gap-2 w-full bg-goku rounded-moon-s-sm'}>
+          <Default />
+        </div>
+        <pre className="bg-goku rounded-moon-s-sm p-4">{client.accordion.examples.Default}</pre>
+      </div>
+    </div>
+  )
+}

docs/app/components/client/button/description.md

@@ -0,0 +1,8 @@
+Buttons allow users to take actions and make choices with a single tap.
+
+Buttons communicate actions that users can take. They are typically placed throughout your UI, in places like:
+
+- Modal windows
+- Forms
+- Cards
+- Toolbars

docs/app/components/client/button/examples/Default.tsx

@@ -0,0 +1,5 @@
+'use client'
+
+import Button from '@heathmont/moon-core-tw/lib/es/button/Button';
+
+export const Default = () => <Button>Default</Button>;

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

@@ -0,0 +1,22 @@
+import { Default } from "@/app/components/client/button/examples/Default";
+import { getExamples } from "@/app/utils/getExamples";
+import { MDX } from "@/components/MDX";
+
+export default async function Home() {
+  const { client } = await getExamples()
+  return (
+    <div className="flex flex-col gap-4 text-moon-14">
+      <h1>Button</h1>
+
+      <MDX markdown={client.button.description} />
+
+      <div className="space-y-2">
+        <h2>Default</h2>
+        <div className={'flex flex-wrap items-center justify-around p-4 gap-2 w-full bg-goku rounded-moon-s-sm'}>
+          <Default />
+        </div>
+        <pre className="bg-goku rounded-moon-s-sm p-4">{client.button.examples.Default}</pre>
+      </div>
+    </div>
+  )
+}

docs/app/components/server/avatar/description.md

@@ -0,0 +1 @@
+The Avatar component is typically used to display images, icons, or initials representing people or other entities.

docs/app/components/avatar/page.tsx → docs/app/components/server/avatar/page.tsx

@@ -1,30 +1,32 @@
-import { Active } from "@/app/components/avatar/examples/Active";
-import { Default } from "@/app/components/avatar/examples/Default";
-import { getSourceCode } from "@/app/utils/getSourceCode";
+import { Active } from "@/app/components/server/avatar/examples/Active";
+import { Default } from "@/app/components/server/avatar/examples/Default";
+import { getExamples } from "@/app/utils/getExamples";
+import { MDX } from "@/components/MDX";
+
 
 export default async function Home() {
-  // TODO too much boilerplate code
-  const defaultCode = await getSourceCode('./app/components/avatar/examples/Default.tsx');
-  const activeCode = await getSourceCode('./app/components/avatar/examples/Active.tsx');
+  const { server } = await getExamples();
 
   return (
     <div className="flex flex-col gap-4 text-moon-14">
       <h1>Avatar</h1>
 
+      <MDX markdown={server.avatar.description} />
+
       <div className="space-y-2">
         <h2>Default</h2>
         <div className={'flex flex-wrap items-center justify-around p-4 gap-2 w-full bg-goku rounded-moon-s-sm'}>
           <Default />
         </div>
-        <pre className="bg-goku rounded-moon-s-sm p-4">{defaultCode}</pre>
+        <pre className="bg-goku rounded-moon-s-sm p-4">{server.avatar.examples.Default}</pre>
       </div>
 
       <div className="space-y-2">
         <h2>Active</h2>
         <div className={'flex flex-wrap items-center justify-around p-4 gap-2 w-full bg-goku rounded-moon-s-sm'}>
           <Active />
         </div>
-        <pre className="bg-goku rounded-moon-s-sm p-4">{activeCode}</pre>
+        <pre className="bg-goku rounded-moon-s-sm p-4">{server.avatar.examples.Active}</pre>
       </div>
     </div>
   )

docs/app/components/server/tag/description.md

@@ -0,0 +1,3 @@
+Tags represent a set of interactive keywords that help organize and categorize objects.
+
+Tags can be added or removed from an object.

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

@@ -1,19 +1,22 @@
-import { Default } from "@/app/components/tag/examples/Default";
-import { getSourceCode } from "@/app/utils/getSourceCode";
+import { Default } from "@/app/components/server/tag/examples/Default";
+import { getExamples } from "@/app/utils/getExamples";
+import { MDX } from "@/components/MDX";
 
 export default async function Home() {
-  const defaultCode = await getSourceCode('./app/components/tag/examples/Default.tsx');
+  const { server } = await getExamples();
 
   return (
     <div className="flex flex-col gap-4 text-moon-14">
       <h1>Tag</h1>
 
+      <MDX markdown={server.tag.description} />
+
       <div className="space-y-2">
         <h2>Default</h2>
         <div className={'flex flex-wrap items-center justify-around p-4 gap-2 w-full bg-goku rounded-moon-s-sm'}>
           <Default />
         </div>
-        <pre className="bg-goku rounded-moon-s-sm p-4">{defaultCode}</pre>
+        <pre className="bg-goku rounded-moon-s-sm p-4">{server.tag.examples.Default}</pre>
       </div>
     </div>
   )

docs/app/components/types.ts

@@ -0,0 +1,31 @@
+export interface Examples {
+  "client": {
+    "accordion": {
+      "description": "string",
+      "examples": {
+        "Default": "string"
+      }
+    },
+    "button": {
+      "description": "string",
+      "examples": {
+        "Default": "string"
+      }
+    }
+  },
+  "server": {
+    "avatar": {
+      "description": "string",
+      "examples": {
+        "Active": "string",
+        "Default": "string"
+      }
+    },
+    "tag": {
+      "description": "string",
+      "examples": {
+        "Default": "string"
+      }
+    }
+  }
+};

docs/app/page.tsx

@@ -1,7 +1,23 @@
-export default function Home() {
+import { getExamples } from "./utils/getExamples";
+import { MDX } from "@/components/MDX";
+import { CommandMenu } from "@/components/Search";
+
+export default async function Home() {
+  const examples = await getExamples();
+
+  const items = [
+    { label: "Aurum" },
+    { label: "Argentum" },
+    { label: "Zink" },
+    { label: "Plumbum" },
+    { label: "Test" }
+  ];
+
   return (
     <div className="">
       Moon Design System
+      <CommandMenu items={items} />
+      <MDX markdown={examples.client.button.description} />
     </div>
   )
 }

docs/app/utils/buildExamplesType.ts

@@ -0,0 +1,116 @@
+import { promises as fs } from 'fs';
+import path from 'path';
+
+export async function writeToFile({
+  contentToWrite,
+  path,
+}: {
+  contentToWrite: string,
+  path: string
+}) {
+  if (!contentToWrite) {
+    throw new Error('Content for writeToFile function must be provided.');
+  }
+  if (!path) {
+    throw new Error('Path for writeToFile function must be provided.');
+  }
+
+  try {
+    await fs.writeFile(path, contentToWrite, 'utf8');
+    console.log(`${path} file has been written successfully.`);
+  } catch (err) {
+    if (err instanceof Error) {
+      console.error('Error writing to file:', err.message);
+      throw err;
+    }
+  }
+}
+
+export async function hasSubfolders(_path: string) {
+  try {
+    const files = await fs.readdir(_path, { withFileTypes: true });
+
+    for (const file of files) {
+      if (file.isDirectory()) {
+        // There is at least one subdirectory
+        return true;
+      }
+    }
+    // No subdirectories found
+    return false;
+  } catch (err) {
+    if (err instanceof Error) {
+      console.error('Error checking folders:', err.message);
+      throw err;
+    }
+  }
+}
+
+type FilesTypes = Record<string, string>;
+
+export async function processFiles(
+  dirPath: string,
+  processCallback: (filePath: string) => Promise<FilesTypes>
+) {
+  const files = await fs.readdir(dirPath);
+  const result: Record<string, Record<string, unknown> | string[] | string> = {};
+
+  for (const file of files) {
+    const filePath = path.join(dirPath, file);
+    const stats = await fs.stat(filePath);
+
+    if (stats.isDirectory()) {
+      const _hasSubfolders = await hasSubfolders(filePath);
+      if (_hasSubfolders) {
+        result[file] = await processFiles(filePath, processCallback);
+      } else {
+        result[file] = await processCallback(filePath);
+      }
+    }
+    if (stats.isFile()) {
+      const extname = path.extname(filePath).toLowerCase();
+      const fileName = path.basename(filePath);
+      const fileNameWithoutExtension = path.parse(fileName).name
+
+      if (extname === '.md') {
+        result[fileNameWithoutExtension] = 'string';
+      }
+    }
+  }
+
+  return result;
+}
+
+export const getTemplate = (content: string) => {
+  return `export interface Examples ${content};
+`
+}
+
+const getFilesTypes = async (dirPath: string) => {
+  const files = await fs.readdir(dirPath);
+  const result: FilesTypes = {};
+
+  for (const file of files) {
+    const filePath = path.join(dirPath, file);
+    const fileName = path.basename(filePath);
+    const fileNameWithoutExtension = path.parse(fileName).name
+    result[fileNameWithoutExtension] = 'string';
+  }
+  return result;
+}
+
+
+export const buildExamplesType = async () => {
+  const components = (
+    await processFiles('./app/components/', getFilesTypes)
+  );
+
+  await writeToFile({
+    contentToWrite: getTemplate(JSON.stringify(components, null, 2)),
+    path: './app/components/types.ts'
+  });
+
+  return components;
+}
+
+buildExamplesType();