doccupine 0.0.1

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

@@ -0,0 +1,444 @@
+export const docsComponentsTemplate = `"use client";
+import { mq, Theme } from "@/app/theme";
+import {
+  resetButton,
+  styledStrong,
+  styledText,
+} from "cherry-styled-components/src/lib";
+import Link from "next/link";
+import { rgba } from "polished";
+import React from "react";
+import styled, { css } from "styled-components";
+import { interactiveStyles } from "./SharedStyled";
+
+interface DocsProps {
+  children: React.ReactNode;
+}
+
+const StyledDocsWrapper = styled.div<{ theme: Theme }>\`
+  position: relative;
+\`;
+
+const StyledDocsSidebar = styled.div<{ theme: Theme }>\`
+  position: sticky;
+  top: 90px;
+  min-width: 200px;
+  float: left;
+  z-index: 999;
+
+  \${mq("lg")} {
+    z-index: 2;
+  }
+\`;
+
+const StyledDocsContainer = styled.div<{ theme: Theme }>\`
+  position: relative;
+  padding: 0;
+  width: 100%;
+
+  & pre {
+    max-width: 100%;
+  }
+
+  \${mq("lg")} {
+    padding-left: 230px;
+  }
+
+  & ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+
+    & li {
+      text-indent: 0;
+      display: block;
+      position: relative;
+      padding: 0 0 0 15px;
+      margin: 0;
+      \${({ theme }) => styledText(theme)};
+      min-height: 23px;
+
+      $mq: "lg" {
+        min-height: 27px;
+      }
+
+      &::before {
+        content: "";
+        display: block;
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: \${({ theme }) => theme.colors.primary};
+        position: absolute;
+        top: 8px;
+        left: 2px;
+
+        \${mq("lg")} {
+          top: 10px;
+        }
+      }
+    }
+  }
+
+  & ol {
+    padding: 0;
+    margin: 0;
+
+    & > li {
+      position: relative;
+      padding: 0;
+      counter-increment: item;
+      padding: 0;
+      margin: 0;
+      \${({ theme }) => styledText(theme)};
+
+      &::before {
+        content: counter(item) ".";
+        display: inline-block;
+        margin: 0 4px 0 0;
+        font-weight: 700;
+        color: \${({ theme }) => theme.colors.primary};
+        min-width: max-content;
+      }
+    }
+  }
+\`;
+
+export const StyledMarkdownContainer = styled.div\`
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  flex-wrap: wrap;
+  flex: 1;
+\`;
+
+interface Props {
+  theme?: Theme;
+  $isActive?: boolean;
+}
+
+export const StyledSidebar = styled.nav<Props>\`
+  position: fixed;
+  overflow-y: auto;
+  max-height: calc(100svh - 70px);
+  width: 100%;
+  background: \${({ theme }) => theme.colors.light};
+  z-index: 99;
+  top: 70px;
+  height: 100%;
+  padding: 20px;
+  opacity: 0;
+  pointer-events: none;
+  transition: all 0.3s ease;
+  transform: translateY(30px);
+  left: 0;
+
+  \${mq("lg")} {
+    width: 220px;
+    left: 20px;
+    background: transparent;
+    padding: 20px 20px 20px 0;
+    opacity: 1;
+    pointer-events: all;
+    transform: translateY(0);
+  }
+
+  \${mq("xl")} {
+    width: 220px;
+    left: calc(50% - 610px);
+  }
+
+  \${mq("xxl")} {
+    width: 220px;
+    left: calc(50% - 690px);
+  }
+
+  \${({ $isActive }) =>
+    $isActive &&
+    css\`
+      transform: translateY(0);
+      opacity: 1;
+      pointer-events: all;
+    \`}
+\`;
+
+export const StyledSidebarList = styled.ul\`
+  list-style: none;
+  margin: 0;
+  padding: 0;
+\`;
+
+export const StyledStrong = styled.strong<{ theme: Theme }>\`
+  font-weight: 600;
+  \${({ theme }) => styledStrong(theme)};
+\`;
+
+export const StyledSidebarListItem = styled.li\`
+  display: flex;
+  gap: 10px;
+  clear: both;
+\`;
+
+export const StyledSidebarListItemLink = styled(Link)<Props>\`
+  text-decoration: none;
+  font-size: \${({ theme }) => theme.fontSizes.strong.xs};
+  line-height: 1.6;
+  color: \${({ theme }) =>
+    theme.isDark ? theme.colors.grayDark : theme.colors.primary};
+  padding: 5px 0 5px 20px;
+  display: flex;
+  transition: all 0.3s ease;
+  border-left: solid 1px \${({ theme }) => theme.colors.grayLight};
+
+  \${mq("lg")} {
+    font-size: \${({ theme }) => theme.fontSizes.strong.lg};
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      color: \${({ theme }) =>
+        theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark};
+      border-color: \${({ theme }) => theme.colors.info};
+    }
+  }
+
+  \${({ $isActive, theme }) =>
+    $isActive &&
+    \`
+			color: \${theme.colors.dark};
+			border-color: \${theme.colors.info};
+			font-weight: 600;
+	\`};
+\`;
+
+export const StyleMobileBar = styled.button<Props>\`
+  \${resetButton};
+  position: fixed;
+  z-index: 1000;
+  bottom: 0;
+  right: 20px;
+  font-size: \${({ theme }) => theme.fontSizes.strong.lg};
+  line-height: \${({ theme }) => theme.fontSizes.strong.lg};
+  box-shadow: \${({ theme }) => theme.shadows.sm};
+  background: \${({ theme }) =>
+    theme.isDark
+      ? rgba(theme.colors.grayLight, 0.7)
+      : rgba(theme.colors.light, 0.7)};
+  color: \${({ theme }) =>
+    theme.isDark ? theme.colors.dark : theme.colors.primary};
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  padding: 30px;
+  border-radius: 100px;
+  margin: 0 0 20px 0;
+  font-weight: 600;
+  display: flex;
+  justify-content: flex-start;
+  width: auto;
+
+  \${mq("lg")} {
+    display: none;
+  }
+
+  \${({ $isActive }) => $isActive && \`position: fixed; \`};
+\`;
+
+export const StyledMobileBurger = styled.span<Props>\`
+  display: block;
+  margin: auto 0;
+  width: 18px;
+  height: 18px;
+  position: relative;
+  overflow: hidden;
+  background: transparent;
+  position: relative;
+
+  &::before,
+  &::after {
+    content: "";
+    display: block;
+    position: absolute;
+    width: 18px;
+    height: 3px;
+    border-radius: 3px;
+    background: \${({ theme }) =>
+      theme.isDark ? theme.colors.dark : theme.colors.primary};
+    transition: all 0.3s ease;
+  }
+
+  &::before {
+    top: 3px;
+  }
+
+  &::after {
+    bottom: 3px;
+  }
+
+  \${({ $isActive }) =>
+    $isActive &&
+    css\`
+      &::before {
+        transform: translateY(5px) rotate(45deg);
+      }
+
+      &::after {
+        transform: translateY(-4px) rotate(-45deg);
+      }
+    \`};
+\`;
+
+export const StyledInlineButton = styled.button<{ theme: Theme }>\`
+  \${resetButton};
+  \${interactiveStyles};
+  color: \${({ theme }) => theme.colors.primary};
+  vertical-align: middle;
+  border: solid 1px \${({ theme }) => theme.colors.grayLight};
+  border-radius: \${({ theme }) => theme.spacing.radius.xs};
+  padding: 0;
+  width: 18px;
+  height: 18px;
+  display: flex;
+  margin: auto 0;
+  transition: all 0.3s ease;
+
+  @media (hover: hover) {
+    &:hover {
+      color: \${({ theme }) => theme.colors.light};
+      background: \${({ theme }) => theme.colors.primary};
+      border-color: \${({ theme }) => theme.colors.primary};
+    }
+  }
+
+  & svg {
+    vertical-align: middle;
+    width: 12px;
+    height: 12px;
+    margin: auto;
+  }
+\`;
+
+export const StyledPlusButton = styled.button<{ theme: Theme }>\`
+  \${resetButton};
+  color: \${({ theme }) => theme.colors.primary};
+  vertical-align: middle;
+  padding: 0;
+  width: 100%;
+  height: 18px;
+  display: flex;
+  margin: auto 0;
+  transition: all 0.3s ease;
+  position: relative;
+  margin: 20px 0 0 0;
+
+  &::before {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 100%;
+    height: 1px;
+    border-radius: 3px;
+    background: \${({ theme }) => theme.colors.grayLight};
+    transition: all 0.3s ease;
+    z-index: -1;
+  }
+
+  &::after {
+    content: "";
+    display: block;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 18px;
+    height: 18px;
+    border: solid 1px \${({ theme }) => theme.colors.grayLight};
+    border-radius: \${({ theme }) => theme.spacing.radius.xs};
+    background: \${({ theme }) => theme.colors.light};
+    transition: all 0.3s ease;
+    z-index: -1;
+  }
+
+  box-shadow: 0 0 0 0px \${({ theme }) => theme.colors.primary};
+
+  @media (hover: hover) {
+    &:hover {
+      &::after {
+        border-color: \${({ theme }) => theme.colors.primary};
+      }
+    }
+  }
+
+  &:focus {
+    &::after {
+      border-color: \${({ theme }) => theme.colors.primary};
+      box-shadow: 0 0 0 4px \${({ theme }) => theme.colors.primaryLight};
+    }
+  }
+
+  &:active {
+    &::after {
+      box-shadow: 0 0 0 2px \${({ theme }) => theme.colors.primaryLight};
+    }
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      color: \${({ theme }) => theme.colors.light};
+
+      &::after {
+        background: \${({ theme }) => theme.colors.primary};
+        border-color: \${({ theme }) => theme.colors.primary};
+      }
+    }
+  }
+
+  & svg {
+    vertical-align: middle;
+    width: 14px;
+    height: 14px;
+    margin: auto;
+  }
+\`;
+
+export const StyledFullHeightInput = styled.div\`
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  flex: 1;
+
+  & > span {
+    height: 100%;
+    width: 100%;
+  }
+
+  & textarea {
+    height: 100%;
+  }
+\`;
+
+export const StyledEditorWrapper = styled.div\`
+  flex: 1;
+
+  &:empty {
+    display: none;
+  }
+\`;
+
+function DocsWrapper({ children }: DocsProps) {
+  return <StyledDocsWrapper>{children}</StyledDocsWrapper>;
+}
+
+function DocsSidebar({ children }: DocsProps) {
+  return <StyledDocsSidebar>{children}</StyledDocsSidebar>;
+}
+
+function DocsContainer({ children }: DocsProps) {
+  return <StyledDocsContainer>{children}</StyledDocsContainer>;
+}
+
+export { DocsWrapper, DocsSidebar, DocsContainer };
+`;

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

@@ -0,0 +1 @@
+export declare const footerTemplate = "\"use client\";\nimport React from \"react\";\n\nfunction Footer() {\n  return <footer> </footer>;\n}\nexport { Footer };\n";

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

@@ -0,0 +1,8 @@
+export const footerTemplate = `"use client";
+import React from "react";
+
+function Footer() {
+  return <footer> </footer>;
+}
+export { Footer };
+`;

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

@@ -0,0 +1 @@
+export declare const headerTemplate = "\"use client\";\nimport {\n  Flex,\n  MaxWidth,\n  resetButton,\n  styledText,\n} from \"cherry-styled-components/src/lib\";\nimport React, { \n  useCallback,\n  useContext,\n  useRef,\n  useState,\n  Suspense\n} from \"react\";\nimport styled, { css } from \"styled-components\";\nimport Link from \"next/link\";\nimport { rgba } from \"polished\";\nimport { mq, Theme } from \"@/app/theme\";\nimport { ToggleTheme, ToggleThemeLoading } from \"@/components/layout/ThemeToggle\";\nimport {\n  StyledTinyDesktopOnly,\n  StyledTinyMobileOnly,\n} from \"@/components/layout/SharedStyled\";\nimport { useOnClickOutside } from \"@/components/ClickOutside\";\nimport { Logo } from \"@/components/layout/Pictograms\";\n\nconst StyledHeader = styled.header<{ theme: Theme }>`\n  position: sticky;\n  top: 0;\n  padding: 20px;\n  margin: 0;\n  z-index: 1000;\n\n  &::before,\n  &::after {\n    display: block;\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    pointer-events: none;\n    background: ${({ theme }) => theme.colors.light};\n    z-index: -2;\n  }\n\n  &::after {\n    background: ${({ theme }) => rgba(theme.colors.primaryLight, 0.1)};\n    z-index: -1;\n  }\n\n  & .logo {\n    display: flex;\n\n    & svg {\n      margin: auto;\n    }\n  }\n`;\n\nconst StyledLink = styled(Link)<{ theme: Theme }>`\n  text-decoration: none;\n  margin: auto 0;\n  color: ${({ theme }) => theme.colors.primary};\n  font-weight: 500;\n\n  @media (hover: hover) {\n    &:hover {\n      color: ${({ theme }) => theme.colors.primaryDark};\n    }\n  }\n`;\n\nexport const StyledMobileBurger = styled.button<{\n  theme: Theme;\n  $isActive: boolean;\n}>`\n  ${resetButton};\n  display: block;\n  margin: auto 0;\n  width: 18px;\n  height: 18px;\n  position: relative;\n  overflow: hidden;\n  background: transparent;\n  position: relative;\n\n  ${mq(\"lg\")} {\n    display: none;\n  }\n\n  &::before,\n  &::after {\n    content: \"\";\n    display: block;\n    position: absolute;\n    width: 18px;\n    height: 2px;\n    border-radius: 3px;\n    background: ${({ theme }) => theme.colors.primary};\n    transition: all 0.3s ease;\n  }\n\n  &::before {\n    top: 4px;\n  }\n\n  &::after {\n    bottom: 4px;\n  }\n\n  ${({ $isActive }) =>\n    $isActive &&\n    css`\n      &::before {\n        transform: translateY(4px) rotate(45deg);\n      }\n\n      &::after {\n        transform: translateY(-4px) rotate(-45deg);\n      }\n    `};\n`;\n\nconst StyledMobileMenu = styled.ul<{ theme: Theme; $isActive: boolean }>`\n  list-style: none;\n  padding: 70px 0 0 0;\n  margin: 0;\n  position: fixed;\n  top: 0;\n  left: 0;\n  background: ${({ theme }) => theme.colors.light};\n  pointer-events: none;\n  opacity: 0;\n  width: 100%;\n  height: 100dvh;\n  transition: all 0.3s ease;\n  z-index: 800;\n  transform: translateY(40px) scale(1.2);\n  display: block;\n\n  ${({ $isActive }) =>\n    $isActive &&\n    css`\n      pointer-events: all;\n      opacity: 1;\n      transform: translateY(0) scale(1);\n    `};\n\n  & li {\n    display: block;\n    width: 100%;\n    padding: 0;\n    margin: 0;\n    border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n\n    &.languages {\n      display: flex;\n      justify-content: center;\n      gap: 10px;\n    }\n\n    & a,\n    & button {\n      ${({ theme }) => styledText(theme)};\n      font-family: ${({ theme }) => theme.fonts.text};\n      font-weight: 500;\n      appearance: none;\n      background: transparent;\n      border: none;\n      color: ${({ theme }) => theme.colors.dark};\n      display: flex;\n      margin: 0;\n      padding: 20px;\n      font-weight: 500;\n      text-decoration: none;\n      cursor: pointer;\n    }\n\n    & button {\n      flex: 1;\n      border-right: solid 1px ${({ theme }) => theme.colors.grayLight};\n      text-align: center;\n      justify-content: center;\n\n      &:last-of-type {\n        border-right: none;\n      }\n    }\n  }\n`;\n\nconst StyledMenu = styled.div<{ theme: Theme }>`\n  display: none;\n\n  ${mq(\"lg\")} {\n    display: flex;\n    gap: 20px;\n  }\n`;\n\nconst StyledDivider = styled.div<{ theme: Theme }>`\n  width: 1px;\n  height: calc(100% - 10px);\n  margin: auto 0;\n  background: ${({ theme }) => theme.colors.grayLight};\n`;\n\nconst StyledWrapper = styled.div<{ theme: Theme }>`\n  margin: auto 0;\n`;\n\nfunction Header() {\n  const [isOptionActive, setIsOptionActive] = useState(false);\n  const [isLangActive, setIsLangActive] = useState(false);\n  const [isMobileMenuActive, setIsMobileMenuActive] = useState(false);\n\n  const wrapperRef = useRef<HTMLSpanElement>(null);\n  const elmRef = useRef<HTMLDivElement>(null);\n  const langRef = useRef<HTMLSpanElement>(null);\n  const closeMenu = useCallback(() => {\n    setIsOptionActive(false);\n    setIsLangActive(false);\n  }, []);\n\n  useOnClickOutside(\n    [elmRef, wrapperRef],\n    isOptionActive ? closeMenu : () => {},\n  );\n  useOnClickOutside([langRef, wrapperRef], isLangActive ? closeMenu : () => {});\n\n  return (\n    <>\n      <StyledHeader>\n        <MaxWidth $size={1000}>\n          <Flex $justifyContent=\"space-between\" $wrap=\"nowrap\">\n            <Link href=\"/\" className=\"logo\" aria-label=\"Logo\">\n              <StyledTinyDesktopOnly>\n                <Logo />\n              </StyledTinyDesktopOnly>\n              <StyledTinyMobileOnly>\n                <Logo />\n              </StyledTinyMobileOnly>\n            </Link>\n            <StyledWrapper>\n              <span ref={wrapperRef}>\n                <Flex $gap={20} $wrap=\"wrap\">\n                  <StyledMenu>\n                  <StyledLink href=\"https://doccupine.com\" target=\"_blank\">\n                    Doccupine\n                  </StyledLink>\n                  </StyledMenu>\n                  <Suspense fallback={<ToggleThemeLoading />}>\n                    <ToggleTheme />\n                  </Suspense>\n                  <StyledMobileBurger\n                    $isActive={isMobileMenuActive}\n                    onClick={() => setIsMobileMenuActive(!isMobileMenuActive)}\n                    aria-label=\"Burger Menu\"\n                  />\n                </Flex>\n              </span>\n            </StyledWrapper>\n          </Flex>\n        </MaxWidth>\n      </StyledHeader>\n      <StyledMobileMenu $isActive={isMobileMenuActive}>\n        <li onClick={() => setIsMobileMenuActive(false)}>\n          <a href=\"https://doccupine.com\" target=\"_blank\">\n            Doccupine\n          </a>\n        </li>\n      </StyledMobileMenu>\n    </>\n  );\n}\n\nexport { Header };\n";