doccupine 0.0.97 → 0.0.99

package/dist/templates/code.js

@@ -1,202 +0,0 @@
-export const codeTemplate = `"use client";
-"use client";
-import styled from "styled-components";
-import { Theme, styledCode } from "cherry-styled-components/src/lib";
-import { rgba } from "polished";
-import { unified } from "unified";
-import rehypeParse from "rehype-parse";
-import rehypeHighlight from "rehype-highlight";
-import rehypeStringify from "rehype-stringify";
-import { editableContent } from "@/app/components/layout/SharedStyled";
-
-interface CodeProps extends React.HTMLAttributes<HTMLDivElement> {
-  code: string;
-  language?: string;
-  theme?: Theme;
-}
-
-const CodeWrapper = styled.span<{ theme: Theme }>\`
-  position: relative;
-  z-index: 2;
-  display: block;
-  width: 100%;
-  border-radius: \${({ theme }) => theme.spacing.radius.lg};
-  border: solid 1px
-    \${({ theme }) =>
-      theme.isDark ? rgba(theme.colors.dark, 0.2) : rgba(theme.colors.dark, 0)};
-\`;
-
-const TopBar = styled.div<{ theme: Theme }>\`
-  background: #0d1117;
-  border-top-left-radius: \${({ theme }) => theme.spacing.radius.lg};
-  border-top-right-radius: \${({ theme }) => theme.spacing.radius.lg};
-  border-bottom: solid 1px \${rgba("#ffffff", 0.1)};
-  height: 33px;
-  width: 100%;
-  display: flex;
-  justify-content: flex-start;
-  gap: 5px;
-  padding: 10px;
-\`;
-
-const Dot = styled.span<{ theme: Theme }>\`
-  margin: auto 0;
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  background: \${rgba("#ffffff", 0.1)};
-\`;
-
-const Body = styled.div<{ theme: Theme }>\`
-  background: #0d1117;
-  border-bottom-left-radius: \${({ theme }) => theme.spacing.radius.lg};
-  border-bottom-right-radius: \${({ theme }) => theme.spacing.radius.lg};
-  color: #ffffff;
-  padding: 20px;
-  font-family: \${({ theme }) => theme.fonts.mono};
-  text-align: left;
-  overflow-x: auto;
-  overflow-y: auto;
-  max-height: calc(100svh - 400px);
-  \${({ theme }) => styledCode(theme)};
-
-  &[contenteditable="true"] {
-    \${editableContent};
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-  }
-
-  & .hljs {
-    color: #c9d1d9;
-    background: #0d1117;
-  }
-
-  & .hljs-doctag,
-  & .hljs-keyword,
-  & .hljs-meta .hljs-keyword,
-  & .hljs-template-tag,
-  & .hljs-template-variable,
-  & .hljs-type,
-  & .hljs-variable.language_ {
-    color: #ff7b72;
-  }
-
-  & .hljs-title,
-  & .hljs-title.class_,
-  & .hljs-title.class_.inherited__,
-  & .hljs-title.function_ {
-    color: #d2a8ff;
-  }
-
-  & .hljs-attr,
-  & .hljs-attribute,
-  & .hljs-literal,
-  & .hljs-meta,
-  & .hljs-number,
-  & .hljs-operator,
-  & .hljs-selector-attr,
-  & .hljs-selector-class,
-  & .hljs-selector-id,
-  & .hljs-variable {
-    color: #79c0ff;
-  }
-
-  & .hljs-meta .hljs-string,
-  & .hljs-regexp,
-  & .hljs-string {
-    color: #a5d6ff;
-  }
-
-  & .hljs-built_in,
-  & .hljs-symbol {
-    color: #ffa657;
-  }
-
-  & .hljs-code,
-  & .hljs-comment,
-  & .hljs-formula {
-    color: #8b949e;
-  }
-
-  & .hljs-name,
-  & .hljs-quote,
-  & .hljs-selector-pseudo,
-  & .hljs-selector-tag {
-    color: #7ee787;
-  }
-
-  & .hljs-subst {
-    color: #c9d1d9;
-  }
-
-  & .hljs-section {
-    color: #1f6feb;
-    font-weight: 700;
-  }
-
-  & .hljs-bullet {
-    color: #f2cc60;
-  }
-
-  & .hljs-emphasis {
-    color: #c9d1d9;
-    font-style: italic;
-  }
-
-  & .hljs-strong {
-    color: #c9d1d9;
-    font-weight: 700;
-  }
-
-  & .hljs-addition {
-    color: #aff5b4;
-    background-color: #033a16;
-  }
-
-  & .hljs-deletion {
-    color: #ffdcd7;
-    background-color: #67060c;
-  }
-\`;
-
-const escapeHtml = (unsafe: string): string => {
-  return unsafe
-    .replace(/&/g, "&amp;")
-    .replace(/</g, "&lt;")
-    .replace(/>/g, "&gt;")
-    .replace(/"/g, "&quot;")
-    .replace(/'/g, "&#039;");
-};
-
-const highlightCode = (code: string, language: string): string => {
-  const escapedCode = escapeHtml(code);
-  const result = unified()
-    .use(rehypeParse, { fragment: true })
-    .use(rehypeHighlight, {
-      detect: true,
-      ignoreMissing: true,
-    })
-    .use(rehypeStringify)
-    .processSync(
-      \`<pre><code class="language-\${language}">\${escapedCode}</code></pre>\`,
-    );
-
-  return String(result);
-};
-
-function Code({ code, language = "javascript", ...props }: CodeProps) {
-  const highlightedCode = highlightCode(code, language);
-  return (
-    <CodeWrapper>
-      <TopBar>
-        <Dot />
-        <Dot />
-        <Dot />
-      </TopBar>
-      <Body dangerouslySetInnerHTML={{ __html: highlightedCode }} {...props} />
-    </CodeWrapper>
-  );
-}
-
-export { Code };
-`;

package/dist/templates/code.mdx.d.ts

@@ -1 +0,0 @@
-export declare const codeMdxTemplate = "---\ntitle: \"Code\"\ndescription: \"Doccupine CLI commands\"\ndate: \"2025-01-15\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 3\n---\n# Code\nLearn how to display inline code and code blocks in documentation.\n\n## Adding Code Samples\nBoth inline code snippets and full code blocks are supported. Code blocks offer customization for syntax highlighting and more to improve readability and user experience.\n\n### Inline Code\nHighlight code within text by wrapping it with backticks:\n\n```text\nEnclose any `word` or `phrase` in backticks to format it as code.\n```\n\nEnclose any `word` or `phrase` in backticks to format it as code.\n\n## Code Blocks\nTo present larger code samples, use triple backticks for fenced code blocks. Each block can be copied, and\u2014if assistant features are enabled\u2014users can request explanations.\n\nYou may specify the language for highlighting:\n\n~~~text\n```java\nclass HelloWorld {\n    public static void main(String[] args) {\n        System.out.println(\"Hello, World!\");\n    }\n}\n```\n~~~\n\n\n```java\nclass HelloWorld {\n    public static void main(String[] args) {\n        System.out.println(\"Hello, World!\");\n    }\n}\n```";

package/dist/templates/code.mdx.js

@@ -1,46 +0,0 @@
-export const codeMdxTemplate = `---
-title: "Code"
-description: "Doccupine CLI commands"
-date: "2025-01-15"
-category: "Components"
-categoryOrder: 1
-order: 3
----
-# Code
-Learn how to display inline code and code blocks in documentation.
-
-## Adding Code Samples
-Both inline code snippets and full code blocks are supported. Code blocks offer customization for syntax highlighting and more to improve readability and user experience.
-
-### Inline Code
-Highlight code within text by wrapping it with backticks:
-
-\`\`\`text
-Enclose any \`word\` or \`phrase\` in backticks to format it as code.
-\`\`\`
-
-Enclose any \`word\` or \`phrase\` in backticks to format it as code.
-
-## Code Blocks
-To present larger code samples, use triple backticks for fenced code blocks. Each block can be copied, and—if assistant features are enabled—users can request explanations.
-
-You may specify the language for highlighting:
-
-~~~text
-\`\`\`java
-class HelloWorld {
-    public static void main(String[] args) {
-        System.out.println("Hello, World!");
-    }
-}
-\`\`\`
-~~~
-
-
-\`\`\`java
-class HelloWorld {
-    public static void main(String[] args) {
-        System.out.println("Hello, World!");
-    }
-}
-\`\`\``;

package/dist/templates/commands.mdx.d.ts

@@ -1 +0,0 @@
-export declare const commandsMdxTemplate = "---\ntitle: \"Commands\"\ndescription: \"Doccupine CLI commands\"\ndate: \"2025-01-15\"\ncategory: \"General\"\ncategoryOrder: 0\norder: 1\n---\n# Commands\n\nIn this page, you can find all the commands available in Doccupine CLI.\n\n## Run Doccupine CLI\n\nCreate a new directory for your project and navigate to it in your terminal. Run the following command to create a new Doccupine project:\n\n~~~bash\nnpx doccupine\n~~~\n\nOnce you run the command, Doccupine will ask you to select a directory to store your MDX files. Choose the directory where you want to create your documentation files.\nAfter selecting the directory, Doccupine will ask you to enter the name of the directory for the generated website. Enter the name of the directory where you want to create your website.\n\nThis will start the development server on port 3000. Open your browser and navigate to http://localhost:3000 to view your documentation.\n\n## Generate the website\n\n~~~bash\nnpx doccupine build\n~~~\n\nThis will generate the build files for your documentation website without starting the development server. You can then deploy the generated files to a hosting service of your choice.\n\n## Show current configuration\n\n~~~bash\nnpx doccupine config --show\n~~~\n\nThis will show the current configuration for Doccupine.\n\n## Reset configuration\n\n~~~bash\nnpx doccupine config --reset\n~~~\n  \nThis will reset the current configuration for Doccupine.";

package/dist/templates/commands.mdx.js

@@ -1,48 +0,0 @@
-export const commandsMdxTemplate = `---
-title: "Commands"
-description: "Doccupine CLI commands"
-date: "2025-01-15"
-category: "General"
-categoryOrder: 0
-order: 1
----
-# Commands
-
-In this page, you can find all the commands available in Doccupine CLI.
-
-## Run Doccupine CLI
-
-Create a new directory for your project and navigate to it in your terminal. Run the following command to create a new Doccupine project:
-
-~~~bash
-npx doccupine
-~~~
-
-Once you run the command, Doccupine will ask you to select a directory to store your MDX files. Choose the directory where you want to create your documentation files.
-After selecting the directory, Doccupine will ask you to enter the name of the directory for the generated website. Enter the name of the directory where you want to create your website.
-
-This will start the development server on port 3000. Open your browser and navigate to http://localhost:3000 to view your documentation.
-
-## Generate the website
-
-~~~bash
-npx doccupine build
-~~~
-
-This will generate the build files for your documentation website without starting the development server. You can then deploy the generated files to a hosting service of your choice.
-
-## Show current configuration
-
-~~~bash
-npx doccupine config --show
-~~~
-
-This will show the current configuration for Doccupine.
-
-## Reset configuration
-
-~~~bash
-npx doccupine config --reset
-~~~
-  
-This will reset the current configuration for Doccupine.`;

package/dist/templates/components/ClickOutside.d.ts

@@ -1 +0,0 @@
-export declare const clickOutsideTemplate = "import { RefObject, useCallback, useEffect } from \"react\";\n\nexport function useOnClickOutside(\n  refs: RefObject<HTMLElement | null>[],\n  cb: () => void,\n) {\n  // Stable callback ref to avoid re-subscribing on every render\n  const handleClickOutside = useCallback(\n    (event: MouseEvent) => {\n      if (\n        refs.every(\n          (ref) => !ref.current || !ref.current.contains(event.target as Node),\n        )\n      ) {\n        cb();\n      }\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [...refs, cb],\n  );\n\n  useEffect(() => {\n    document.addEventListener(\"mousedown\", handleClickOutside);\n    return () => {\n      document.removeEventListener(\"mousedown\", handleClickOutside);\n    };\n  }, [handleClickOutside]);\n}\n";

package/dist/templates/components/ClickOutside.js

@@ -1,29 +0,0 @@
-export const clickOutsideTemplate = `import { RefObject, useCallback, useEffect } from "react";
-
-export function useOnClickOutside(
-  refs: RefObject<HTMLElement | null>[],
-  cb: () => void,
-) {
-  // Stable callback ref to avoid re-subscribing on every render
-  const handleClickOutside = useCallback(
-    (event: MouseEvent) => {
-      if (
-        refs.every(
-          (ref) => !ref.current || !ref.current.contains(event.target as Node),
-        )
-      ) {
-        cb();
-      }
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [...refs, cb],
-  );
-
-  useEffect(() => {
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [handleClickOutside]);
-}
-`;

package/dist/templates/components/layout/ClientThemeProvider.d.ts

@@ -1 +0,0 @@
-export declare const clientThemeProviderTemplate = "\"use client\";\nimport React, { useCallback, useContext, useEffect, useState } from \"react\";\nimport { ThemeProvider as StyledThemeProvider } from \"styled-components\";\nimport { Theme } from \"@/app/theme\";\nimport { GlobalStyles } from \"@/components/layout/GlobalStyles\";\n\ntype ThemeMode = \"light\" | \"dark\";\n\ntype ThemeContextValue = {\n  /** The styled-components theme object \u2014 same reference in both modes;\n      the values it points to are CSS variables that flip per active class. */\n  theme: Theme;\n  /** Active mode, derived from the \"dark\" class on <html>. */\n  mode: ThemeMode;\n  /** Update the active mode: flips the class and persists the cookie. */\n  setMode: (m: ThemeMode) => void;\n};\n\nconst ThemeContext = React.createContext<ThemeContextValue | null>(null);\n\nfunction useThemeOverride() {\n  const ctx = useContext(ThemeContext);\n  if (!ctx) {\n    throw new Error(\"useThemeOverride must be used within ClientThemeProvider\");\n  }\n  return ctx;\n}\n\nfunction readMode(): ThemeMode {\n  if (typeof document === \"undefined\") return \"light\";\n  return document.documentElement.classList.contains(\"dark\") ? \"dark\" : \"light\";\n}\n\nfunction ClientThemeProvider({\n  children,\n  theme,\n}: {\n  children: React.ReactNode;\n  theme: Theme;\n}) {\n  // Mode lives in React state so consumers (e.g. ThemeToggle) re-render when\n  // the user toggles. The visual swap itself is driven entirely by the\n  // \"dark\" class on <html> + CSS variables \u2014 React doesn't drive paint.\n  // The lazy initializer reads the class set by the theme-init blocking\n  // script (SSR returns \"light\"); no rendered markup branches on mode, so\n  // reading the DOM during the hydration render can't cause a mismatch.\n  const [mode, setModeState] = useState<ThemeMode>(readMode);\n\n  useEffect(() => {\n    // Backfill the cookie if the theme-init script didn't get to write one\n    // (rare \u2014 e.g. cookies disabled at first paint).\n    try {\n      const has = document.cookie\n        .split(\";\")\n        .some((c) => c.trim().startsWith(\"theme=\"));\n      if (!has) {\n        const m = readMode();\n        document.cookie = `theme=${m};path=/;max-age=31536000;SameSite=Lax`;\n      }\n    } catch {}\n  }, []);\n\n  const setMode = useCallback((next: ThemeMode) => {\n    if (typeof document !== \"undefined\") {\n      document.documentElement.classList.toggle(\"dark\", next === \"dark\");\n      document.documentElement.style.colorScheme = next;\n      try {\n        document.cookie = `theme=${next};path=/;max-age=31536000;SameSite=Lax`;\n      } catch {}\n    }\n    setModeState(next);\n  }, []);\n\n  return (\n    <ThemeContext.Provider value={{ theme, mode, setMode }}>\n      <StyledThemeProvider theme={theme}>\n        <GlobalStyles />\n        {children}\n      </StyledThemeProvider>\n    </ThemeContext.Provider>\n  );\n}\n\nexport { ClientThemeProvider, useThemeOverride };\n";

package/dist/templates/components/layout/ClientThemeProvider.js

@@ -1,85 +0,0 @@
-export const clientThemeProviderTemplate = `"use client";
-import React, { useCallback, useContext, useEffect, useState } from "react";
-import { ThemeProvider as StyledThemeProvider } from "styled-components";
-import { Theme } from "@/app/theme";
-import { GlobalStyles } from "@/components/layout/GlobalStyles";
-
-type ThemeMode = "light" | "dark";
-
-type ThemeContextValue = {
-  /** The styled-components theme object — same reference in both modes;
-      the values it points to are CSS variables that flip per active class. */
-  theme: Theme;
-  /** Active mode, derived from the "dark" class on <html>. */
-  mode: ThemeMode;
-  /** Update the active mode: flips the class and persists the cookie. */
-  setMode: (m: ThemeMode) => void;
-};
-
-const ThemeContext = React.createContext<ThemeContextValue | null>(null);
-
-function useThemeOverride() {
-  const ctx = useContext(ThemeContext);
-  if (!ctx) {
-    throw new Error("useThemeOverride must be used within ClientThemeProvider");
-  }
-  return ctx;
-}
-
-function readMode(): ThemeMode {
-  if (typeof document === "undefined") return "light";
-  return document.documentElement.classList.contains("dark") ? "dark" : "light";
-}
-
-function ClientThemeProvider({
-  children,
-  theme,
-}: {
-  children: React.ReactNode;
-  theme: Theme;
-}) {
-  // Mode lives in React state so consumers (e.g. ThemeToggle) re-render when
-  // the user toggles. The visual swap itself is driven entirely by the
-  // "dark" class on <html> + CSS variables — React doesn't drive paint.
-  // The lazy initializer reads the class set by the theme-init blocking
-  // script (SSR returns "light"); no rendered markup branches on mode, so
-  // reading the DOM during the hydration render can't cause a mismatch.
-  const [mode, setModeState] = useState<ThemeMode>(readMode);
-
-  useEffect(() => {
-    // Backfill the cookie if the theme-init script didn't get to write one
-    // (rare — e.g. cookies disabled at first paint).
-    try {
-      const has = document.cookie
-        .split(";")
-        .some((c) => c.trim().startsWith("theme="));
-      if (!has) {
-        const m = readMode();
-        document.cookie = \`theme=\${m};path=/;max-age=31536000;SameSite=Lax\`;
-      }
-    } catch {}
-  }, []);
-
-  const setMode = useCallback((next: ThemeMode) => {
-    if (typeof document !== "undefined") {
-      document.documentElement.classList.toggle("dark", next === "dark");
-      document.documentElement.style.colorScheme = next;
-      try {
-        document.cookie = \`theme=\${next};path=/;max-age=31536000;SameSite=Lax\`;
-      } catch {}
-    }
-    setModeState(next);
-  }, []);
-
-  return (
-    <ThemeContext.Provider value={{ theme, mode, setMode }}>
-      <StyledThemeProvider theme={theme}>
-        <GlobalStyles />
-        {children}
-      </StyledThemeProvider>
-    </ThemeContext.Provider>
-  );
-}
-
-export { ClientThemeProvider, useThemeOverride };
-`;

package/dist/templates/components/layout/CopyButton.d.ts

@@ -1 +0,0 @@
-export declare const copyButtonTemplate = "\"use client\";\nimport { useState } from \"react\";\nimport styled from \"styled-components\";\nimport { Icon } from \"@/components/layout/Icon\";\nimport { mq, Theme } from \"@/app/theme\";\n\ninterface CopyButtonProps {\n  content: string;\n}\n\nconst StyledCopyWrapper = styled.div`\n  position: relative;\n  padding-top: 70px;\n\n  ${mq(\"lg\")} {\n    padding-top: 80px;\n  }\n`;\n\nconst StyledCopyButton = styled.button<{ theme: Theme; $copied: boolean }>`\n  background: transparent;\n  border: solid 1px\n    ${({ theme, $copied }) =>\n      $copied ? theme.colors.success : theme.colors.grayLight};\n  color: ${({ theme, $copied }) =>\n    $copied ? theme.colors.success : theme.colors.primary};\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  padding: 4px 8px;\n  font-size: 12px;\n  font-family: ${({ theme }) => theme.fonts.mono};\n  cursor: pointer;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  margin-right: -6px;\n\n  & svg.lucide {\n    color: ${({ theme, $copied }) =>\n      $copied ? theme.colors.success : theme.colors.primary};\n  }\n\n  &:hover {\n    border-color: ${({ theme, $copied }) =>\n      $copied ? theme.colors.success : theme.colors.primary};\n  }\n\n  &:active {\n    transform: scale(0.95);\n  }\n`;\n\nfunction CopyButton({ content }: CopyButtonProps) {\n  const [copied, setCopied] = useState(false);\n\n  const handleCopyContent = async () => {\n    try {\n      await navigator.clipboard.writeText(content);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    } catch (err) {\n      console.error(\"Failed to copy:\", err);\n    }\n  };\n\n  return (\n    <StyledCopyWrapper>\n      <StyledCopyButton onClick={handleCopyContent} $copied={copied}>\n        {copied ? (\n          <>\n            <Icon name=\"check\" size={12} />\n            <span>Copied!</span>\n          </>\n        ) : (\n          <>\n            <Icon name=\"copy\" size={12} />\n            <span>Copy Content</span>\n          </>\n        )}\n      </StyledCopyButton>\n    </StyledCopyWrapper>\n  );\n}\n\nexport { CopyButton };";

package/dist/templates/components/layout/CopyButton.js

@@ -1,85 +0,0 @@
-export const copyButtonTemplate = `"use client";
-import { useState } from "react";
-import styled from "styled-components";
-import { Icon } from "@/components/layout/Icon";
-import { mq, Theme } from "@/app/theme";
-
-interface CopyButtonProps {
-  content: string;
-}
-
-const StyledCopyWrapper = styled.div\`
-  position: relative;
-  padding-top: 70px;
-
-  \${mq("lg")} {
-    padding-top: 80px;
-  }
-\`;
-
-const StyledCopyButton = styled.button<{ theme: Theme; $copied: boolean }>\`
-  background: transparent;
-  border: solid 1px
-    \${({ theme, $copied }) =>
-      $copied ? theme.colors.success : theme.colors.grayLight};
-  color: \${({ theme, $copied }) =>
-    $copied ? theme.colors.success : theme.colors.primary};
-  border-radius: \${({ theme }) => theme.spacing.radius.xs};
-  padding: 4px 8px;
-  font-size: 12px;
-  font-family: \${({ theme }) => theme.fonts.mono};
-  cursor: pointer;
-  transition: all 0.2s ease;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  margin-right: -6px;
-
-  & svg.lucide {
-    color: \${({ theme, $copied }) =>
-      $copied ? theme.colors.success : theme.colors.primary};
-  }
-
-  &:hover {
-    border-color: \${({ theme, $copied }) =>
-      $copied ? theme.colors.success : theme.colors.primary};
-  }
-
-  &:active {
-    transform: scale(0.95);
-  }
-\`;
-
-function CopyButton({ content }: CopyButtonProps) {
-  const [copied, setCopied] = useState(false);
-
-  const handleCopyContent = async () => {
-    try {
-      await navigator.clipboard.writeText(content);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch (err) {
-      console.error("Failed to copy:", err);
-    }
-  };
-
-  return (
-    <StyledCopyWrapper>
-      <StyledCopyButton onClick={handleCopyContent} $copied={copied}>
-        {copied ? (
-          <>
-            <Icon name="check" size={12} />
-            <span>Copied!</span>
-          </>
-        ) : (
-          <>
-            <Icon name="copy" size={12} />
-            <span>Copy Content</span>
-          </>
-        )}
-      </StyledCopyButton>
-    </StyledCopyWrapper>
-  );
-}
-
-export { CopyButton };`;

package/dist/templates/components/layout/RenderMarkdown.d.ts

@@ -1 +0,0 @@
-export declare const renderMarkdownTemplate = "import React from \"react\";\nimport { StyledMarkdownContainer } from \"@/components/layout/DocsComponents\";\nimport { MDXRemote } from \"next-mdx-remote/rsc\";\nimport remarkGfm from \"remark-gfm\";\nimport { useMDXComponents } from \"@/components/MDXComponents\";\n\nfunction extractAllTextFromChildren(children: React.ReactNode): string {\n  if (children == null) return \"\";\n\n  if (typeof children === \"string\") return children;\n  if (typeof children === \"number\") return String(children);\n  if (typeof children === \"boolean\") return \"\";\n\n  if (Array.isArray(children)) {\n    return children.map(extractAllTextFromChildren).join(\"\");\n  }\n\n  if (React.isValidElement(children)) {\n    const element = children as React.ReactElement<any>;\n    return extractAllTextFromChildren(element.props.children);\n  }\n\n  return \"\";\n}\n\nfunction normalizeMarkdownSpacing(input: string): string {\n  return (\n    input\n      // Ensure a blank line before headings\n      .replace(/([^\\n])(#[\\s]+)/g, '$1\\n\\n$2')\n\n      // Ensure a blank line before fenced code blocks\n      .replace(/([^\\n])(~~~|```)/g, '$1\\n\\n$2')\n\n      // Ensure a blank line before images/links if they start a line\n      .replace(/([^\\n])(!\\[)/g, '$1\\n\\n$2')\n  );\n}\n\nfunction RenderMarkdown({ children }: { children: React.ReactNode }) {\n  const childrenAsString = extractAllTextFromChildren(children);\n  const normalizedChildren = normalizeMarkdownSpacing(childrenAsString);\n  const components = useMDXComponents({});\n\n  return (\n    <StyledMarkdownContainer>\n      <MDXRemote\n        source={normalizedChildren}\n        options={{\n          mdxOptions: {\n            remarkPlugins: [remarkGfm],\n          },\n        }}\n        components={components}\n      />\n    </StyledMarkdownContainer>\n  );\n}\n\nexport { RenderMarkdown };\n";

package/dist/templates/components/layout/RenderMarkdown.js

@@ -1,61 +0,0 @@
-export const renderMarkdownTemplate = `import React from "react";
-import { StyledMarkdownContainer } from "@/components/layout/DocsComponents";
-import { MDXRemote } from "next-mdx-remote/rsc";
-import remarkGfm from "remark-gfm";
-import { useMDXComponents } from "@/components/MDXComponents";
-
-function extractAllTextFromChildren(children: React.ReactNode): string {
-  if (children == null) return "";
-
-  if (typeof children === "string") return children;
-  if (typeof children === "number") return String(children);
-  if (typeof children === "boolean") return "";
-
-  if (Array.isArray(children)) {
-    return children.map(extractAllTextFromChildren).join("");
-  }
-
-  if (React.isValidElement(children)) {
-    const element = children as React.ReactElement<any>;
-    return extractAllTextFromChildren(element.props.children);
-  }
-
-  return "";
-}
-
-function normalizeMarkdownSpacing(input: string): string {
-  return (
-    input
-      // Ensure a blank line before headings
-      .replace(/([^\\n])(#[\\s]+)/g, '$1\\n\\n$2')
-
-      // Ensure a blank line before fenced code blocks
-      .replace(/([^\\n])(~~~|\`\`\`)/g, '$1\\n\\n$2')
-
-      // Ensure a blank line before images/links if they start a line
-      .replace(/([^\\n])(!\\[)/g, '$1\\n\\n$2')
-  );
-}
-
-function RenderMarkdown({ children }: { children: React.ReactNode }) {
-  const childrenAsString = extractAllTextFromChildren(children);
-  const normalizedChildren = normalizeMarkdownSpacing(childrenAsString);
-  const components = useMDXComponents({});
-
-  return (
-    <StyledMarkdownContainer>
-      <MDXRemote
-        source={normalizedChildren}
-        options={{
-          mdxOptions: {
-            remarkPlugins: [remarkGfm],
-          },
-        }}
-        components={components}
-      />
-    </StyledMarkdownContainer>
-  );
-}
-
-export { RenderMarkdown };
-`;

package/dist/templates/components/layout/Stepts.d.ts

@@ -1 +0,0 @@
-export declare const stepsTemplate = "\"use client\";\nimport React from \"react\";\nimport styled, { useTheme } from \"styled-components\";\nimport { styledText, Theme } from \"cherry-styled-components/src/lib\";\nimport { rgba } from \"polished\";\nimport { Icon, IconProps } from \"@/components/layout/Icon\";\n\nconst StyledStepsContainer = styled.div<{ theme: Theme }>`\n  position: relative;\n  width: 100%;\n`;\n\nconst StyledStep = styled.div<{ theme: Theme }>`\n  background: ${({ theme }) => theme.colors.light};\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  padding: 0 0 20px 52px;\n  margin: 0;\n  position: relative;\n  ${({ theme }) => styledText(theme)}\n  color: ${({ theme }) => theme.colors.grayDark};\n\n  &::after {\n    content: \"\";\n    position: absolute;\n    left: 16px;\n    top: 0;\n    width: 1px;\n    height: 100%;\n    background: ${({ theme }) => theme.colors.primary};\n    background: linear-gradient(\n      180deg,\n      ${({ theme }) => theme.colors.primary},\n      ${({ theme }) => rgba(theme.colors.primary, 0)}\n    );\n    border-radius: 4px;\n  }\n`;\n\nconst StepNumber = styled.div<{ theme: Theme }>`\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  background: ${({ theme }) => theme.colors.primary};\n  color: ${({ theme }) => theme.colors.light};\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-weight: 700;\n  margin-bottom: 12px;\n  ${({ theme }) => styledText(theme)};\n  position: absolute;\n  left: 0;\n  top: 0;\n  z-index: 1;\n`;\n\nconst StyledStepTitle = styled.h3<{ theme: Theme }>`\n  margin: 0 0 10px 0;\n  padding: 2px 0 0 0;\n  color: ${({ theme }) => theme.colors.dark};\n  ${({ theme }) => styledText(theme)};\n`;\n\nconst StepContent = styled.div<{ theme: Theme }>`\n  color: ${({ theme }) => theme.colors.grayDark};\n  ${({ theme }) => styledText(theme)};\n\n  & > .code-wrapper {\n    margin: 10px 0;\n  }\n`;\n\ninterface StepProps extends React.HTMLAttributes<HTMLDivElement> {\n  title: string;\n  children: React.ReactNode;\n  icon?: IconProps;\n}\n\nfunction Step({ title, children, icon, ...props }: StepProps) {\n  return null;\n}\n\ninterface StepsProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n}\n\nfunction Steps({ children, ...props }: StepsProps) {\n  const theme = useTheme() as Theme;\n\n  const steps = React.Children.toArray(children).filter(\n    (child): child is React.ReactElement<StepProps> =>\n      React.isValidElement(child),\n  );\n\n  return (\n    <StyledStepsContainer theme={theme}>\n      {steps.map((step, index) => {\n        const { title, children: stepContent, icon } = step.props;\n\n        return (\n          <StyledStep key={index} theme={theme}>\n            <StepNumber theme={theme}>{index + 1}</StepNumber>\n            {icon && <Icon name={icon} color={theme.colors.primary} />}\n            <StyledStepTitle theme={theme}>{title}</StyledStepTitle>\n            <StepContent theme={theme}>{stepContent}</StepContent>\n          </StyledStep>\n        );\n      })}\n    </StyledStepsContainer>\n  );\n}\n\nexport { Steps, Step };\n";