@theguild/components v7 (#1587)

Co-authored-by: Piotr Monwid-Olechnowicz <[email protected]>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Saihajpreet Singh <[email protected]>
Co-authored-by: Dotan Simha <[email protected]>

.changeset/@theguild_components-1587-dependencies.md

@@ -0,0 +1,7 @@
+---
+"@theguild/components": patch
+---
+dependencies updates:
+  - Added dependency [`@radix-ui/react-navigation-menu@^1.2.0` ↗︎](https://www.npmjs.com/package/@radix-ui/react-navigation-menu/v/1.2.0) (to `dependencies`)
+  - Added dependency [`@theguild/[email protected]` ↗︎](https://www.npmjs.com/package/@theguild/tailwind-config/v/0.5.0) (to `dependencies`)
+  - Added dependency [`tailwind-merge@^2.5.2` ↗︎](https://www.npmjs.com/package/tailwind-merge/v/2.5.2) (to `dependencies`)

.changeset/curvy-planets-hear.md

@@ -0,0 +1,7 @@
+---
+'@theguild/components': major
+---
+
+Opted out of compound unified logo for Hive Platform
+
+- Removed `GuildUnifiedLogo` from external exports

.changeset/ninety-pianos-rescue.md

@@ -0,0 +1,5 @@
+---
+'@theguild/components': patch
+---
+
+fix descriptions

.changeset/two-ducks-carry.md

@@ -0,0 +1,5 @@
+---
+"@theguild/components": minor
+---
+
+Add CookiesConsent and DecorationIsolation, remove hover delay from HiveNavigation.

.changeset/unlucky-lions-scream.md

@@ -0,0 +1,5 @@
+---
+'@theguild/components': minor
+---
+
+Add HiveNavigation

.changeset/violet-actors-ring.md

@@ -0,0 +1,5 @@
+---
+'@theguild/components': minor
+---
+
+Add icons for Codegen, Hive, Mesh and Yoga

.changeset/warm-crabs-fix.md

@@ -0,0 +1,5 @@
+---
+"@theguild/components": minor
+---
+
+Move reusable landing page sections to `@theguild/components`

.changeset/wet-bugs-shout.md

@@ -0,0 +1,5 @@
+---
+"@theguild/components": patch
+---
+
+Prevent scrolling to headings on click

.changeset/young-rats-smile.md

@@ -0,0 +1,5 @@
+---
+"@theguild/components": patch
+---
+
+Fix Hive landing components styles

.eslintrc.cjs

@@ -8,7 +8,7 @@ module.exports = {
     '@theguild/eslint-config/yml',
     // '@theguild/eslint-config/mdx',
     'plugin:tailwindcss/recommended',
-    'plugin:storybook/recommended',
+    // 'plugin:storybook/recommended', // broken in ESLint 9
   ],
   parserOptions: {
     project: ['tsconfig.eslint.json', 'website/tsconfig.json', 'packages/*/tsconfig.json'],
@@ -33,7 +33,8 @@ module.exports = {
   },
   settings: {
     tailwindcss: {
-      config: 'tailwind.config.cjs',
+      callees: ['clsx', 'cn', 'cva', 'cx'],
+      config: 'tailwind.config.ts',
       whitelist: [
         // TODO: find a way to fix it and remove these classes since they are imported somewhere and are used
         'line',
@@ -44,6 +45,8 @@ module.exports = {
         'aa-ItemContentSubtitle',
         'aa-SourceHeader',
         'aa-SourceHeaderTitle',
+        'hive-focus',
+        'hive-focus-within',
       ],
     },
   },

.github/workflows/ci.yml

@@ -3,8 +3,7 @@ name: CI
 on:
   push:
     branches: [main]
-  # eslint-disable-next-line yml/no-empty-mapping-value
-  pull_request:
+  pull_request: {}
 
 jobs:
   build:

.github/workflows/pr.yml

@@ -1,8 +1,7 @@
 name: PR
 
 on:
-  # eslint-disable-next-line yml/no-empty-mapping-value
-  pull_request:
+  pull_request: {}
 
 jobs:
   dependencies:

.prettierrc.cjs

@@ -3,4 +3,5 @@ const { plugins, ...prettierConfig } = require('@theguild/prettier-config');
 module.exports = {
   ...prettierConfig,
   plugins: [...plugins, 'prettier-plugin-tailwindcss'],
+  tailwindFunctions: ['cn', 'clsx'],
 };

.storybook/design-system-docs-decorator.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { StoryContext } from '@storybook/react/*';
+import { ArrowIcon } from '../packages/components/src/components/icons';
+import { hiveThemeDecorator } from './hive-theme-decorator';
+
+export function designSystemDocsDecorator(Story: () => React.ReactNode, ctx: StoryContext) {
+  return hiveThemeDecorator(
+    () => (
+      <div className="h-screen overflow-auto bg-white p-8 text-green-1000 xl:p-16 dark:bg-green-1000 dark:text-white">
+        <header className="flex flex-row items-center text-5xl tracking-[-0.288px]">
+          <HiveIconMark className="mr-6" />
+          <p>Core Elements</p>
+          <ArrowIcon className="mx-4 shrink font-medium" />
+          <h1 className="font-medium">{ctx.title.split('/').pop()}</h1>
+          <p className="ml-auto text-sm leading-6 tracking-[-0.084px]">Hive</p>
+        </header>
+        <hr className="my-6 border-t border-t-beige-200" />
+        <section className="flex flex-col xl:px-6">
+          <Story />
+        </section>
+      </div>
+    ),
+    ctx,
+  );
+}
+
+function HiveIconMark(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg width="80" height="80" viewBox="0 0 80 80" fill="none" {...props}>
+      <rect width="80" height="80" rx="16" fill="url(#paint0_linear_630_754)" />
+      <path
+        d="M48.4021 19H31.5979L19 31.5979V48.4021L31.5979 61H48.4021L61 48.4021V31.5979L48.4021 19ZM58.3178 42.291L42.2894 58.3194C41.0244 59.5844 38.9739 59.5844 37.709 58.3194L21.6822 42.291C20.4172 41.0261 20.4172 38.9755 21.6822 37.7106L37.709 21.6822C38.9739 20.4172 41.0244 20.4172 42.2894 21.6822L58.3178 37.7106C59.5828 38.9755 59.5828 41.0261 58.3178 42.291Z"
+        fill="white"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_630_754"
+          x1="40"
+          y1="0"
+          x2="40"
+          y2="80"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#217164" />
+          <stop offset="1" stopColor="#08594E" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}

.storybook/global.css

@@ -1,10 +1 @@
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
-
-input::-webkit-search-decoration,
-input::-webkit-search-cancel-button,
-input::-webkit-search-results-button,
-input::-webkit-search-results-decoration {
-  -webkit-appearance: none;
-}
+@import '../packages/components/style.css';

.storybook/hive-theme-decorator.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+// @ts-expect-error We have `next` because of `@theguild/components`.
+import localFont from 'next/font/local';
+import { StoryContext } from '@storybook/react';
+import { cn } from '../packages/components/src/cn';
+
+const neueMontreal = localFont({
+  // TODO: Swap to variable version.
+  // TODO: We only use 400 and 500 weights, right?
+  src: [
+    { path: '../fonts/NeueMontreal-Light.otf', weight: '300' },
+    { path: '../fonts/NeueMontreal-Light.otf', style: 'italic' },
+    { path: '../fonts/NeueMontreal-Regular.otf', weight: '400' },
+    { path: '../fonts/NeueMontreal-Italic.otf', weight: '400', style: 'italic' },
+    { path: '../fonts/NeueMontreal-Medium.otf', weight: '500' },
+    { path: '../fonts/NeueMontreal-MediumItalic.otf', weight: '500', style: 'italic' },
+    { path: '../fonts/NeueMontreal-Bold.otf', weight: '700' },
+    { path: '../fonts/NeueMontreal-BoldItalic.otf', weight: '700', style: 'italic' },
+  ],
+  variable: '--font-sans',
+});
+
+export const hiveThemeDecorator = (Story: () => React.ReactNode, ctx: StoryContext) => {
+  return (
+    <>
+      <div
+        data-hive-theme-decorator
+        className={cn(
+          'text-green-1000',
+          neueMontreal.variable,
+          ctx.parameters.forcedLightMode && 'light',
+        )}
+        style={{
+          fontFamily: 'var(--font-sans)',
+          padding: ctx.parameters.padding === true ? '2rem' : ctx.parameters.padding,
+          backgroundColor: ctx.parameters.forcedLightMode ? 'white' : '',
+        }}
+      >
+        <Story />
+        <style>{`
+        :root, .light {
+          --nextra-bg: 255, 255, 255;
+          --nextra-primary-hue: 191deg;
+          --nextra-primary-saturation: 40%;
+        }
+        .dark {
+          --nextra-primary-hue: 67.1deg;
+    --nextra-primary-saturation: 100%;
+          --nextra-bg: 17, 17, 17;
+        }
+      `}</style>
+      </div>
+      {ctx.parameters.forcedLightMode && (
+        <small className="absolute right-2 top-2 hidden text-[10px] text-black dark:block">
+          forced light mode
+        </small>
+      )}
+    </>
+  );
+};

.storybook/main.ts

@@ -45,4 +45,5 @@ export default {
   core: {
     disableTelemetry: true,
   },
+  staticDirs: ['./public'],
 } satisfies StorybookConfig;

.vscode/settings.json

@@ -0,0 +1,9 @@
+{
+  "tailwindCSS.experimental.classRegex": [
+    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
+    ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"],
+    ["cn\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"],
+    ["clsx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
+  ],
+  "eslint.useFlatConfig": false
+}

package.json

@@ -5,11 +5,12 @@
   "packageManager": "[email protected]",
   "scripts": {
     "build": "turbo run build",
-    "build-storybook": "pnpm --filter @theguild/remark-mermaid build && storybook build",
+    "build-storybook": "storybook build",
     "build:css": "NODE_ENV=production tailwindcss --config tailwind.config.ts --postcss --output packages/components/style.css",
     "dev": "turbo run dev --parallel",
     "lint": "ESLINT_USE_FLAT_CONFIG=false eslint --cache --ignore-path .gitignore .",
     "lint:prettier": "prettier --cache --check .",
+    "prebuild-storybook": "pnpm build --filter=@theguild/remark-\\*",
     "prepare": "husky install",
     "prerelease": "pnpm build",
     "prettier": "pnpm lint:prettier --write",
@@ -36,7 +37,6 @@
     "@types/react": "18.3.11",
     "@types/react-paginate": "7.1.4",
     "@types/webpack": "5.28.5",
-    "concurrently": "9.0.1",
     "css-loader": "7.1.2",
     "eslint": "9.12.0",
     "eslint-plugin-storybook": "0.9.0",
@@ -56,8 +56,9 @@
     "storybook-dark-mode": "4.0.2",
     "style-loader": "4.0.0",
     "tailwindcss": "3.4.13",
+    "tailwindcss-animate": "^1.0.7",
     "tsconfig-paths-webpack-plugin": "4.1.0",
-    "tsup": "8.2.4",
+    "tsup": "8.3.0",
     "tsx": "4.19.1",
     "turbo": "2.1.3",
     "typescript": "5.6.2",
@@ -79,14 +80,13 @@
   },
   "pnpm": {
     "overrides": {
-      "hast-util-to-estree": "^3.0.0",
       "@theguild/remark-npm2yarn": "workspace:*",
       "@theguild/remark-mermaid": "workspace:*",
       "esbuild": "0.24.0",
-      "eslint-plugin-react-hooks": "5.1.0-rc-06d0b89e-20240801"
+      "eslint-plugin-react-hooks": "5.0.0"
     },
     "patchedDependencies": {
-      "tsup@8.2.4": "patches/[email protected]"
+      "tsup@8.3.0": "patches/[email protected]"
     }
   }
 }

packages/components/package.json

@@ -65,20 +65,24 @@
   "dependencies": {
     "@giscus/react": "3.0.0",
     "@next/bundle-analyzer": "14.2.15",
+    "@radix-ui/react-navigation-menu": "^1.2.0",
+    "@theguild/tailwind-config": "0.5.0",
     "clsx": "2.1.1",
     "fuzzy": "0.1.3",
     "next-videos": "1.5.0",
-    "nextra": "3.0.0-alpha.41",
-    "nextra-theme-docs": "3.0.0-alpha.41",
+    "nextra": "3.0.8",
+    "nextra-theme-docs": "3.0.8",
     "react-paginate": "8.2.0",
     "react-player": "2.16.0",
     "remark-mdx-disable-explicit-jsx": "0.1.0",
-    "semver": "^7.3.8"
+    "semver": "^7.3.8",
+    "tailwind-merge": "^2.5.2"
   },
   "devDependencies": {
     "@svgr/babel-plugin-remove-jsx-attribute": "^8.0.0",
     "@theguild/editor": "workspace:*",
     "@types/dedent": "0.7.2",
+    "@types/react": "18.3.11",
     "@types/react-dom": "18.3.0",
     "@types/semver": "7.5.8",
     "dedent": "1.5.3",

packages/components/src/cn.ts

@@ -0,0 +1,8 @@
+import { ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export type { ClassValue };
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

packages/components/src/components/anchor.tsx

@@ -3,28 +3,41 @@ import NextLink from 'next/link';
 import clsx from 'clsx';
 import { ILink } from '../types/components';
 
-export const Anchor = forwardRef<HTMLAnchorElement, ILink>(function Anchor(
+export interface AnchorProps extends ILink {}
+export const Anchor = forwardRef<HTMLAnchorElement, AnchorProps>(function Anchor(
   { href = '', children, newWindow, sameSite, className, ...props },
   forwardedRef,
 ): ReactElement {
-  if (sameSite) {
-    const url = new URL(href);
-    href = url.pathname + url.search + url.hash;
-  }
-  const classes = clsx(className, 'outline-none focus-visible:ring transition');
-  if (newWindow && /^https?:\/\//.test(href)) {
-    return (
-      <a
-        ref={forwardedRef}
-        href={href}
-        target="_blank"
-        rel="noreferrer"
-        className={classes}
-        {...props}
-      >
-        {children}
-      </a>
-    );
+  const classes = clsx(className, 'outline-none transition focus-visible:ring');
+
+  if (typeof href === 'string') {
+    if (sameSite) {
+      const url = new URL(href);
+      href = url.pathname + url.search + url.hash;
+    }
+
+    if (href.startsWith('#')) {
+      return (
+        <a ref={forwardedRef} href={href} className={classes} {...props}>
+          {children}
+        </a>
+      );
+    }
+
+    if (newWindow && /^https?:\/\//.test(href)) {
+      return (
+        <a
+          ref={forwardedRef}
+          href={href}
+          target="_blank"
+          rel="noreferrer"
+          className={classes}
+          {...props}
+        >
+          {children}
+        </a>
+      );
+    }
   }
 
   return (