32 |
46 | {ctx.parameters.forcedLightMode && (
47 |
48 | forced light mode
49 |
50 | )}
51 |
52 | );
53 | };
54 |
--------------------------------------------------------------------------------
/.storybook/main.ts:
--------------------------------------------------------------------------------
1 | import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
2 | import { Configuration } from 'webpack';
3 | import { StorybookConfig } from '@storybook/nextjs';
4 |
5 | export default {
6 | stories: ['../packages/*/src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
7 | addons: [
8 | '@storybook/addon-essentials',
9 | '@storybook/addon-links',
10 | 'storybook-dark-mode', // addon to have toolbar for dark/light mode
11 | ],
12 | typescript: {
13 | reactDocgen: false,
14 | },
15 | env(config) {
16 | return config;
17 | },
18 | webpackFinal(config: Configuration) {
19 | config.resolve ||= {};
20 | config.resolve.plugins ||= [];
21 | config.resolve.plugins.push(
22 | new TsconfigPathsPlugin({
23 | extensions: config.resolve.extensions,
24 | }),
25 | );
26 | config.resolve.fallback = {
27 | ...config.resolve.fallback,
28 | url: false,
29 | };
30 |
31 | config.module?.rules?.unshift({
32 | test: /\.svg$/,
33 | loader: '@svgr/webpack',
34 | options: {
35 | svgo: false, // otherwise setting SVG component width/height will don't affect
36 | },
37 | });
38 |
39 | return config;
40 | },
41 | framework: {
42 | name: '@storybook/nextjs',
43 | options: {},
44 | },
45 | core: {
46 | disableTelemetry: true,
47 | },
48 | staticDirs: ['./public'],
49 | } satisfies StorybookConfig;
50 |
--------------------------------------------------------------------------------
/.storybook/preview.tsx:
--------------------------------------------------------------------------------
1 | import { ThemeProvider } from 'next-themes';
2 | import { useDarkMode } from 'storybook-dark-mode';
3 | import { Preview } from '@storybook/react';
4 | import { themes } from '@storybook/theming';
5 | import './global.css';
6 |
7 | export const parameters: Preview['parameters'] = {
8 | actions: { argTypesRegex: '^on[A-Z].*' },
9 | options: {
10 | storySort: {
11 | method: 'alphabetical',
12 | order: ['Components', ['Headers'], 'Projects'],
13 | },
14 | },
15 | darkMode: {
16 | // Override the default dark theme
17 | dark: { ...themes.normal, appBg: 'white' },
18 | // Override the default light theme
19 | light: { ...themes.normal, appBg: 'white' },
20 | classTarget: 'html',
21 | },
22 | // Remove padding from storybook in mobile
23 | layout: 'fullscreen',
24 | nextjs: {
25 | appDirectory: true,
26 | },
27 | };
28 |
29 | export const decorators: Preview['decorators'] = [
30 | Story => {
31 | const theme = useDarkMode() ? 'dark' : 'light';
32 | return (
33 |
69 |
70 |
72 |
74 | ),
75 | ],
76 | };
77 |
78 | export const Link: StoryObj
70 |
72 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
73 |
20 | {cards.map(card => (
21 |
27 |
33 | ))}
34 |
35 |
28 |
32 | {card.category}
29 |{card.title}
30 |{card.description}
31 | {
29 | if (consented === 'closing') {
30 | setConsented('yes');
31 | }
32 | }}
33 | >
34 |
61 | );
62 | }
63 |
--------------------------------------------------------------------------------
/packages/components/src/components/decorations/arch-decoration-gradient-defs.svg:
--------------------------------------------------------------------------------
1 |
27 |
--------------------------------------------------------------------------------
/packages/components/src/components/decorations/arch-decoration.svg:
--------------------------------------------------------------------------------
1 |
15 |
--------------------------------------------------------------------------------
/packages/components/src/components/decorations/decorations.stories.tsx:
--------------------------------------------------------------------------------
1 | import { Meta, StoryObj } from '@storybook/react';
2 | import {
3 | ArchDecoration,
4 | ArchDecorationGradientDefs,
5 | DecorationIsolation,
6 | HighlightDecoration,
7 | LargeHiveIconDecoration,
8 | } from './index';
9 |
10 | const meta: Meta = {
11 | title: 'Components/Decorations',
12 | component: ArchDecoration,
13 | decorators: [
14 | Story => (
15 |
35 |
40 | 36 | This site uses cookies for analytics and improving your experience. 37 |
{' '} 38 |By using our services, you consent to cookies.
39 |
41 |
47 | Privacy Policy
48 |
49 | {
52 | setConsented('closing');
53 | localStorage.setItem('cookies', 'true');
54 | }}
55 | className="px-4 py-2"
56 | >
57 | Allow
58 |
59 |
60 |
16 |
17 |
19 |
20 | ),
21 | ],
22 | };
23 |
24 | export default meta;
25 |
26 | export const ArchDecorationStory: StoryObj
27 |
28 | Explore Hive 360° GraphQL Ecosystem to reach full potential
29 |
30 |
34 | Learn more
35 |
37 |
38 | -
39 | {FOUR_MAIN_PRODUCTS.map(product => (
40 |
16 | {title && (
17 |
55 |
18 |
33 | )}
34 | 19 | {title} 20 |
21 | {description && ( 22 |
23 | {description}
24 |
25 | )}
26 | {link && (
27 |
35 | {items.map(item => (
36 |
54 |
37 |
52 | ))}
53 | {item.title}
39 |
40 | {item.description}
41 |
42 | {item.link && (
43 |
42 |
46 | ),
47 | ],
48 | play(ctx) {
49 | const anchor = ctx.canvasElement.querySelector('a')!;
50 | anchor.click();
51 | if (window.location.hash !== '#open-source-graphql-management-platform') {
52 | throw new Error('Expected hash to be set');
53 | }
54 | if (window.scrollY !== 0) {
55 | throw new Error('Expected scroll to be at top');
56 | }
57 | },
58 | };
59 |
--------------------------------------------------------------------------------
/packages/components/src/components/heading.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { ComponentPropsWithoutRef } from 'react';
4 | import { cn } from '../cn';
5 |
6 | export interface HeadingProps extends ComponentPropsWithoutRef<'h1'> {
7 | as: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div' | 'p' | 'span';
8 | size: 'xl' | 'lg' | 'md' | 'sm' | 'xs';
9 | }
10 | export function Heading({ as: _as, size, className, children, ...rest }: HeadingProps) {
11 | const Level = _as || 'h2';
12 |
13 | let sizeStyle = '';
14 | switch (size) {
15 | // TODO: This should probably be a class, not a component, because the design expects
16 | // an equivalent of `heading-sm lg:heading-xl.`
17 | case 'xl':
18 | sizeStyle = 'text-4xl leading-[1.2] md:text-6xl md:leading-[1.1875] tracking-[-0.64px]';
19 | break;
20 | case 'lg':
21 | sizeStyle = 'text-4xl leading-[1.2] md:text-[56px] md:leading-[1.14286] tracking-[-0.56px]';
22 | break;
23 | case 'md':
24 | sizeStyle = 'text-4xl leading-[1.2] md:text-5xl md:leading-[1.16667] tracking-[-0.48px]';
25 | break;
26 | case 'sm':
27 | sizeStyle = 'text-[40px] leading-[1.2] tracking-[-0.2px]';
28 | break;
29 | case 'xs':
30 | sizeStyle = 'text-[32px]/[1.25] tracking-[-0.16px]';
31 | break;
32 | }
33 |
34 | const id =
35 | typeof children === 'string' ? children.replace(/[\s.,]+/g, '-').toLowerCase() : undefined;
36 |
37 | return (
38 |
43 |
45 |
22 |
31 |
24 |
30 | 25 | {title} 26 |
27 |{description}
28 | {link && } 29 |
30 |
76 |
31 |
47 | 32 | {title} 33 |
34 |35 | {description} 36 |
37 | {link && ( 38 |
53 | {mounted && (
54 |
75 |
27 | {props.top}
28 |
29 | {props.heading}
30 |
31 |
47 | );
48 | };
49 |
--------------------------------------------------------------------------------
/packages/components/src/components/hive-footer/index.stories.tsx:
--------------------------------------------------------------------------------
1 | import { Meta, StoryObj } from '@storybook/react';
2 | import { hiveThemeDecorator } from '../../../../../.storybook/hive-theme-decorator';
3 | import { CodegenIcon } from '../icons';
4 | import { HiveFooter, HiveFooterProps } from './index';
5 |
6 | export default {
7 | title: 'Hive/HiveFooter',
8 | component: HiveFooter,
9 | decorators: [hiveThemeDecorator],
10 | argTypes: {
11 | items: {
12 | resources: {
13 | name: 'Resources Links',
14 | description: "Use this to add current site's links to the footer.",
15 | },
16 | },
17 | },
18 | } satisfies Meta32 | {props.text} 33 |
34 |-
35 | {props.checkmarks.map(text => (
36 |
-
37 |
38 | {text} 39 |
40 | ))}
41 |
43 | {props.children}
44 |
45 |
44 |
47 | ),
48 | description: 'End-to-end type safety',
49 | },
50 | };
51 |
--------------------------------------------------------------------------------
/packages/components/src/components/hive-layout-config.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * @internal Don't expose this to websites.
3 | */
4 | export const __LANDING_WIDTHS_ID = 'hive-l-widths';
5 |
6 | export interface HiveLayoutConfigProps {
7 | widths: 'landing-narrow' | 'docs-wide';
8 | }
9 |
10 | /**
11 | * @see {@link HiveLayout} from `@theguild/components/server` for documentation.
12 | */
13 | export function HiveLayoutConfig({ widths }: HiveLayoutConfigProps) {
14 | return widths === 'landing-narrow' ? : null;
15 | }
16 |
--------------------------------------------------------------------------------
/packages/components/src/components/hive-navigation/graphql-conf-card.tsx:
--------------------------------------------------------------------------------
1 | import { StaticImageData } from 'next/image';
2 | import { ArrowIcon } from '../icons';
3 | import { Image } from '../image';
4 | import { NavigationMenuLink } from './navigation-menu';
5 |
6 | export interface GraphQLConfCardProps {
7 | image: StaticImageData;
8 | }
9 | export function GraphQLConfCard({ image }: GraphQLConfCardProps) {
10 | return (
11 | 20 | September 10-12 | San Francisco CA 21 |
22 |23 | The official GraphQL conference hosted by GraphQL Foundation. 24 |
25 | 26 | Watch The Guild at GraphQLConf 2024 27 |-
16 | {Object.entries(icons).map(([name, Icon]) => (
17 |
-
21 |
22 | {name}
23 |
24 | ))}
25 |
{heading}
59 |{children}
60 |
9 | {title && (
10 |
36 | 11 | {title} 12 |
13 | )} 14 |
15 | {items.map((item, index) => (
16 |
20 |
33 | ))}
34 |
35 | 21 | {item.title} 22 |
23 |24 | {item.description} 25 |
26 | {item.link && ( 27 |
77 |
78 | {/* eslint-disable-next-line tailwindcss/no-custom-classname */}
79 | {commands[index]}
80 |
81 |
82 |
33 |
35 | ),
36 | ],
37 | };
38 |
39 | export default meta;
40 |
41 | type Story = StoryObj
13 | -
25 | {productsLexicographically.map(product => (
26 |
42 | {children}
43 |
44 | );
45 | };
46 |
47 | const moveFocusWithLeftAndRight = (event: React.KeyboardEventComplete GraphQL Federation Stack
28 |-
29 | {FOUR_MAIN_PRODUCTS.map(product => (
30 |
Our libraries to support all your GraphQL needs
34 |-
35 | {SIX_HIGHLIGHTED_PRODUCTS.map(product => (
36 |