Stage

.github/workflows/nextjs.yml

@@ -37,10 +37,10 @@ jobs:
       - uses: pnpm/action-setup@v2
         with:
           version: 8
-      - name: Use Node.js 18
+      - name: Use Node.js 22
         uses: actions/setup-node@v4
         with:
-          node-version: "18.x"
+          node-version: "22.x"
           cache: 'pnpm'
       - name: Restore cache
         uses: actions/cache@v4

.github/workflows/npm-publish-reusable.yml

@@ -45,7 +45,7 @@ jobs:
 
         - uses: actions/setup-node@v4
           with:
-            node-version: "18.x"
+            node-version: "22.x"
             cache: "pnpm"
 
         - name: Setup npmrc

apps/docs/.gitignore

@@ -1,2 +1,3 @@
 .next
 node_modules
+_pagefind/

apps/docs/.npmrc

@@ -0,0 +1 @@
+enable-pre-post-scripts=true

apps/docs/app/ThemeWrapperDynamic.tsx

@@ -0,0 +1,5 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+
+export const ThemeWrapper = dynamic(() => import('../components/internal/ThemeWrapper').then((mod) => mod.ThemeWrapper), { ssr: false });

apps/docs/app/[[...mdxPath]]/page.jsx

@@ -0,0 +1,26 @@
+/* eslint-disable react-hooks/rules-of-hooks -- false positive, useMDXComponents/useTOC are not react hooks */
+
+import { useMDXComponents } from 'nextra-theme-docs'
+import { generateStaticParamsFor, importPage } from 'nextra/pages'
+
+export const generateStaticParams = generateStaticParamsFor('mdxPath')
+
+export async function generateMetadata(props) {
+  const params = await props.params
+  const { metadata } = await importPage(params.mdxPath)
+  return metadata
+}
+
+export default async function Page(props) {
+  const params = await props.params
+  const result = await importPage(params.mdxPath)
+  const { default: MDXContent, useTOC, metadata, title } = result
+
+  const Wrapper = useMDXComponents().wrapper
+
+  return (
+    <Wrapper toc={useTOC?.() ?? []} metadata={metadata} title={title}>
+      <MDXContent {...props} params={params} />
+    </Wrapper>
+  )
+}

apps/docs/app/global.css

@@ -0,0 +1,182 @@
+@import "tailwindcss";
+@import 'tailwindcss/utilities' layer(utilities);
+@source "../components";
+@source "../content";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme {
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+
+  --font-sans: var(--font-inter);
+
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+
+  @keyframes accordion-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--radix-accordion-content-height);
+    }
+  }
+  @keyframes accordion-up {
+    from {
+      height: var(--radix-accordion-content-height);
+    }
+    to {
+      height: 0;
+    }
+  }
+}
+
+@utility container {
+  margin-inline: auto;
+  padding-inline: 2rem;
+  @media (width >= --theme(--breakpoint-sm)) {
+    max-width: none;
+  }
+  @media (width >= 1400px) {
+    max-width: 1400px;
+  }
+}
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 47.4% 11.2%;
+
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 47.4% 11.2%;
+
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 47.4% 11.2%;
+
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+
+    --destructive: 0 100% 50%;
+    --destructive-foreground: 210 40% 98%;
+
+    --ring: 215 20.2% 65.1%;
+
+    --radius: 0.5rem;
+
+    --light-display: visible;
+    --dark-display: none;
+  }
+
+  .dark {
+    --background: 0 0% 0%;
+    --foreground: 213 31% 91%;
+
+    --muted: 223 47% 11%;
+    --muted-foreground: 215.4 16.3% 56.9%;
+
+    --accent: 216 34% 17%;
+    --accent-foreground: 210 40% 98%;
+
+    --popover: 224 0% 4%;
+    --popover-foreground: 215 20.2% 65.1%;
+
+    --border: 0 0% 17%;
+    --input: 216 34% 17%;
+
+    --card: 0 0% 4%;
+    --card-foreground: 213 31% 91%;
+
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 1.2%;
+
+    --secondary: 222.2 47.4% 11.2%;
+    --secondary-foreground: 210 40% 98%;
+
+    --destructive: 0 63% 31%;
+    --destructive-foreground: 210 40% 98%;
+
+    --ring: 216 34% 17%;
+
+    --radius: 0.5rem;
+
+    --light-display: none;
+    --dark-display: visible;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings: "rlig" 1, "calt" 1;
+  }
+}
+
+.image--light {
+  display: var(--light-display);
+}
+
+.image--dark {
+  display: var(--dark-display);
+}
+@keyframes gradientAnimation {
+  0% {
+    border-image: linear-gradient(45deg, hsl(var(--muted)), hsl(var(--primary))) 1;
+  }
+
+  50% {
+    border-image: linear-gradient(45deg, hsl(var(--primary)), hsl(var(--muted))) 1;
+  }
+
+  100% {
+    border-image: linear-gradient(45deg, hsl(var(--muted)), hsl(var(--primary))) 1;
+  }
+}
+
+.animated-card {
+  animation: gradientAnimation 5s infinite;
+  border: 1px solid transparent;
+}

apps/docs/app/layout.jsx

@@ -0,0 +1,148 @@
+import { Footer, Layout, Navbar } from 'nextra-theme-docs'
+import { Head } from 'nextra/components'
+import { getPageMap } from 'nextra/page-map'
+// Required for theme styles, previously was imported under the hood
+import 'nextra-theme-docs/style.css'
+import './global.css';
+import { SlackIcon } from '../components/internal/icons/SlackIcon';
+import Image from 'next/image';
+import { Search } from 'nextra/components'
+import { inter } from '../src/fonts';
+import { ThemeWrapper } from './ThemeWrapperDynamic';
+
+/*
+      <>
+        <meta name="msapplication-TileColor" content="#111111" />
+        <meta name="theme-color" content="#111111" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta httpEquiv="Content-Language" content="en" />
+        <meta
+          name="description"
+          content="Enterwell UI library."
+        />
+        <meta
+          name="og:description"
+          content="Enterwell UI library."
+        />
+        <meta name="twitter:card" content="summary_large_image" />
+        <meta name="twitter:image" content={socialCard} />
+        <meta name="twitter:site:domain" content="enterwell.github.io" />
+        <meta name="twitter:url" content="https://enterwell.github.io/ui" />
+        <meta
+          name="og:title"
+          content={title ? title + ' - Enterwell UI' : 'Enterwell UI'}
+        />
+        <meta name="og:image" content={socialCard} />
+        <meta name="apple-mobile-web-app-title" content="Enterwell UI" />
+        <link rel="icon" href="/ui/favicon.png" type="image/png" />
+        <link
+          rel="icon"
+          href="/ui/favicon-dark.svg"
+          type="image/svg+xml"
+          media="(prefers-color-scheme: dark)"
+        />
+        <link
+          rel="icon"
+          href="/ui/favicon-dark.png"
+          type="image/png"
+          media="(prefers-color-scheme: dark)"
+        />
+      </>
+      */
+
+/** @type {import('next').Metadata} */
+export const metadata = {
+  description: 'Enterwell UI documentation',
+  title: 'Enterwell UI',
+  appLinks: {
+    web: { url: 'https://enterwell.github.io/ui' }
+  }
+  // socialCard: 'https://enterwell.github.io/ui/social-card.png',
+  // twitter: 'enterwell',
+  // image: 'https://enterwell.github.io/ui/social-card.png',
+  // favicon: '/ui/favicon.png',
+  // color: '#111111',
+  // themeColor: '#111111',
+  // msTileColor: '#111111',
+  // ogTitle: 'Enterwell UI',
+  // ogDescription: 'Enterwell UI library.',
+  // ogSiteName: 'Enterwell UI',
+  // ogImage: 'https://enterwell.github.io/ui/social-card.png',
+  // twitterCard: 'summary_large_image',
+  // twitterImage: 'https://enterwell.github.io/ui/social-card.png',
+  // twitterSite: 'enterwell',
+  // twitterDomain: 'enterwell.github.io',
+  // twitterUrl: 'https://enterwell.github.io/ui',
+  // appleMobileWebAppTitle: 'Enterwell UI',
+  // faviconDark: '/ui/favicon-dark.svg',
+  // faviconDarkPng: '/ui/favicon-dark.png', 
+}
+
+const navbar = <Navbar
+  logo={(
+    <div className="flex flex-row gap-1 items-center whitespace-nowrap">
+      <Image
+        alt="Enterwell"
+        className="image--dark"
+        width={40}
+        height={40}
+        src="https://enterwell.net/wp-content/uploads/2023/05/ew-logomark-monochrome-negative-64.x71089.svg" />
+      <Image
+        alt="Enterwell"
+        className="image--light"
+        width={40}
+        height={40}
+        src="https://enterwell.net/wp-content/uploads/2023/05/ew-logomark-monochrome-positive-64.x71089.svg" />
+      <span className="text-xs sm:text-sm md:text-lg">Enterwell {'<'}UI{' \\>'}</span>
+    </div>
+  )}
+  projectLink="https://github.com/enterwell/ui"
+  chatLink='https://enterwell.slack.com/archives/C03MRCRLFC0'
+  chatIcon={(<SlackIcon width={24} height={24} />)} />
+const footer = (
+  <Footer className="flex-col items-center md:items-start">
+    MIT {new Date().getFullYear()} - <a href="https://enterwell.net">Enterwell d.o.o.</a>
+  </Footer>
+)
+
+export default async function RootLayout({ children }) {
+  return (
+    <html
+      // Not required, but good for SEO
+      lang="en"
+      // Required to be set
+      dir="ltr"
+      // Suggested by `next-themes` package https://github.com/pacocoursey/next-themes#with-app
+      suppressHydrationWarning
+    >
+      <Head
+        backgroundColor={{
+          dark: 'rgb(0, 0, 0)',
+          light: 'rgb(255, 255, 255)'
+        }}
+        color={{
+          hue: { dark: 8, light: 8 },
+          saturation: { dark: 0, light: 0 }
+        }}
+      >
+        {/* Your additional tags should be passed as `children` of `<Head>` element */}
+      </Head>
+      <body className={`${inter.variable} font-sans`}>
+        <ThemeWrapper>
+          <Layout
+            search={<Search />}
+            navbar={navbar}
+            pageMap={await getPageMap()}
+            docsRepositoryBase="https://github.com/enterwell/ui/tree/stage/apps/docs"
+            editLink="Edit this page on GitHub"
+            sidebar={{ defaultMenuCollapseLevel: 1 }}
+            footer={footer}
+          // ...Your additional theme config options
+          >
+            {children}
+          </Layout>
+        </ThemeWrapper>
+      </body>
+    </html>
+  )
+}