New plugin search color scheme (#1756)

Co-authored-by: Dimitri POSTOLOV <[email protected]>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

.changeset/@theguild_components-1756-dependencies.md

@@ -0,0 +1,6 @@
+---
+"@theguild/components": patch
+---
+dependencies updates:
+  - Removed dependency [`@theguild/[email protected]` ↗︎](https://www.npmjs.com/package/@theguild/tailwind-config/v/0.5.0) (from `dependencies`)
+  - Added dependency [`@theguild/tailwind-config@0.6.0-alpha-20241106003557-2c94714753ba2342f442f836b4683119985ee2c5` ↗︎](https://www.npmjs.com/package/@theguild/tailwind-config/v/0.6.0) (to `peerDependencies`)

.changeset/pink-grapes-compete.md

@@ -0,0 +1,5 @@
+---
+'@theguild/components': minor
+---
+
+Add green colorScheme to MarketplaceSearch and MarketplaceList, change display to grid

.eslintrc.cjs

@@ -47,6 +47,7 @@ module.exports = {
         'aa-SourceHeaderTitle',
         'hive-focus',
         'hive-focus-within',
+        '@container', // Tailwind ESLint Plugin doesn't see the Container Queries classes but it does see prefixes like @sm:
       ],
     },
   },

.storybook/hive-theme-decorator.tsx

@@ -5,17 +5,10 @@ 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/PPNeueMontreal-Regular.woff2', weight: '400' },
+    { path: '../fonts/PPNeueMontreal-Medium.woff2', weight: '500' },
     { path: '../fonts/NeueMontreal-Bold.otf', weight: '700' },
-    { path: '../fonts/NeueMontreal-BoldItalic.otf', weight: '700', style: 'italic' },
   ],
   variable: '--font-sans',
 });
@@ -28,7 +21,7 @@ export const hiveThemeDecorator = (Story: () => React.ReactNode, ctx: StoryConte
         className={cn(
           'text-green-1000',
           neueMontreal.variable,
-          ctx.parameters.forcedLightMode && 'light',
+          ctx.parameters.forcedLightMode ? 'light' : 'dark:text-white',
         )}
         style={{
           fontFamily: 'var(--font-sans)',

package.json

@@ -32,7 +32,7 @@
     "@svgr/webpack": "8.1.0",
     "@theguild/eslint-config": "0.12.1",
     "@theguild/prettier-config": "2.0.7",
-    "@theguild/tailwind-config": "0.5.0",
+    "@theguild/tailwind-config": "0.6.0-alpha-20241106003557-2c94714753ba2342f442f836b4683119985ee2c5",
     "@types/jest-image-snapshot": "6.4.0",
     "@types/react": "18.3.12",
     "@types/react-paginate": "7.1.4",

packages/components/package.json

@@ -58,6 +58,7 @@
     "types:check": "tsc --noEmit"
   },
   "peerDependencies": {
+    "@theguild/tailwind-config": "0.6.0-alpha-20241106003557-2c94714753ba2342f442f836b4683119985ee2c5",
     "next": "^13 || ^14 || ^15.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
@@ -66,7 +67,6 @@
     "@giscus/react": "3.0.0",
     "@next/bundle-analyzer": "15.0.2",
     "@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",
@@ -81,6 +81,7 @@
   "devDependencies": {
     "@svgr/babel-plugin-remove-jsx-attribute": "^8.0.0",
     "@theguild/editor": "workspace:*",
+    "@theguild/tailwind-config": "0.6.0-alpha-20241106003557-2c94714753ba2342f442f836b4683119985ee2c5",
     "@types/dedent": "0.7.2",
     "@types/react": "18.3.12",
     "@types/react-dom": "18.3.1",

packages/components/src/components/explore-main-product-cards.stories.ts

@@ -0,0 +1,19 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { hiveThemeDecorator } from '../../../../.storybook/hive-theme-decorator';
+import {
+  ExploreMainProductCards,
+  ExploreMainProductCardsProps,
+} from './explore-main-product-cards';
+
+export default {
+  title: 'Hive/ExploreMainProductCards',
+  component: ExploreMainProductCards,
+  decorators: [hiveThemeDecorator],
+  parameters: {
+    forcedLightMode: true,
+  },
+} satisfies Meta;
+
+export const Default: StoryObj<ExploreMainProductCardsProps> = {
+  name: 'ExploreMainProductCards',
+};

packages/components/src/components/explore-main-product-cards.tsx

@@ -0,0 +1,37 @@
+import { HTMLAttributes } from 'react';
+import { cn } from '../cn';
+import { PRODUCTS } from '../products';
+import { Heading } from './heading';
+import { ArrowIcon } from './icons';
+import { TextLink } from './text-link';
+import { MainProductCard } from './tools-and-libraries-cards';
+
+export interface ExploreMainProductCardsProps extends HTMLAttributes<HTMLDivElement> {}
+
+export function ExploreMainProductCards({ className, ...rest }: ExploreMainProductCardsProps) {
+  return (
+    <section
+      className={cn(
+        'relative isolate flex flex-wrap gap-6 px-4 py-6 lg:gap-12 lg:py-24 xl:px-[120px]',
+        className,
+      )}
+      {...rest}
+    >
+      <div className="[@media(min-width:1490px)]:w-[293px]">
+        <Heading as="h2" size="xs" className="text-pretty">
+          Explore Hive 360° GraphQL Ecosystem to reach full potential
+        </Heading>
+        {/* TODO: Replace with a link to the Libraries page */}
+        <TextLink href="https://github.com/the-guild-org" className="mt-4 lg:mt-6">
+          Learn more
+          <ArrowIcon />
+        </TextLink>
+      </div>
+      <ul className="-mx-12 -my-2 flex shrink-0 grow gap-[22px] overflow-auto px-12 py-2 [@media(max-width:1490px)]:w-full [@media(min-width:1490px)]:overflow-visible [&>:nth-child(n+4)]:[@media(min-width:1490px)]:hidden">
+        {[PRODUCTS.HIVE, PRODUCTS.YOGA, PRODUCTS.MESH, PRODUCTS.CODEGEN].map(product => (
+          <MainProductCard key={product.name} as="li" product={product} />
+        ))}
+      </ul>
+    </section>
+  );
+}

packages/components/src/components/heading.tsx

@@ -3,7 +3,7 @@ import { cn } from '../cn';
 
 export interface HeadingProps extends ComponentPropsWithoutRef<'h1'> {
   as: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div' | 'p' | 'span';
-  size: 'xl' | 'lg' | 'md' | 'sm';
+  size: 'xl' | 'lg' | 'md' | 'sm' | 'xs';
 }
 export function Heading({ as: _as, size, className, children, ...rest }: HeadingProps) {
   const Level = _as || 'h2';
@@ -24,6 +24,9 @@ export function Heading({ as: _as, size, className, children, ...rest }: Heading
     case 'sm':
       sizeStyle = 'text-[40px] leading-[1.2] tracking-[-0.2px]';
       break;
+    case 'xs':
+      sizeStyle = 'text-[32px]/[1.25] tracking-[-0.16px]';
+      break;
   }
 
   const id =

packages/components/src/components/index.ts

@@ -26,10 +26,15 @@ export {
   type GraphQLConfCardProps,
 } from './hive-navigation';
 export { HiveFooter } from './hive-footer';
-export { ToolsAndLibrariesCards } from './tools-and-libraries-cards';
+export {
+  ToolsAndLibrariesCards,
+  MainProductCard,
+  AncillaryProductCard,
+} from './tools-and-libraries-cards';
 export * from './decorations';
 export * from './call-to-action';
 export * from './cookies-consent';
 export * from './heading';
 export * from './info-card';
 export * from './stud';
+export * from './explore-main-product-cards';

packages/components/src/components/marketplace-list.stories.tsx

@@ -0,0 +1,56 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { hiveThemeDecorator } from '../../../../.storybook/hive-theme-decorator';
+import { MarketplaceList } from './marketplace-list';
+import { Default as MarketplaceSearchDefaultStory } from './marketplace-search.stories';
+
+const meta: Meta<typeof MarketplaceList> = {
+  title: 'Components/MarketplaceList',
+  component: MarketplaceList,
+  argTypes: {
+    title: {
+      name: 'Title',
+    },
+    placeholder: {
+      name: 'No Results Placeholder',
+    },
+    pagination: {
+      name: 'Products / Page',
+    },
+    items: {
+      name: 'Items',
+    },
+    colorScheme: {
+      control: {
+        type: 'select',
+      },
+      options: ['green', 'black'],
+    },
+  },
+  decorators: [
+    hiveThemeDecorator,
+    Story => (
+      <div className="p-2">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof MarketplaceList>;
+
+export const Default: Story = {
+  name: 'MarketplaceList',
+  args: {
+    title: 'Trending & Last Update',
+    placeholder: 'There are no items available...',
+    pagination: 4,
+    items: MarketplaceSearchDefaultStory.args?.primaryList?.items ?? [],
+  },
+};
+
+export const Green: Story = {
+  name: 'MarketplaceList Green',
+  args: { ...Default.args, colorScheme: 'green' },
+};