{
5 | matchedProps: Pick;
6 | remainingProps: Pick>;
7 | }
8 | /**
9 | * Convenience method to split the Box props.
10 | *
11 | * Useful for when you want to pass all of the Box props to the root Box and
12 | * pass the remaining props to a child element (e.g: disabled, readOnly, required, etc).
13 | */
14 | export declare function splitBoxProps
(props: P): SplitBoxProps
;
15 | declare type Omit, K extends keyof T> = Pick>;
16 | interface Dictionary {
17 | [key: string]: T;
18 | }
19 | export interface SplitProps {
20 | matchedProps: Pick;
21 | remainingProps: Omit;
22 | }
23 | /**
24 | * Utility to split props based on an array of keys
25 | */
26 | export declare function splitProps
, K extends keyof P>(props: P, keys: K[]): SplitProps;
27 | export {};
28 |
--------------------------------------------------------------------------------
/.yalc/@stoplight/mosaic/index.d.ts:
--------------------------------------------------------------------------------
1 | export * from './enhancers';
2 | export * from './hooks';
3 | export * from './utils';
4 | export * from './styles';
5 | export * from './components/Article';
6 | export * from './components/Avatar';
7 | export * from './components/Box';
8 | export * from './components/Button';
9 | export * from './components/Card';
10 | export * from './components/Code';
11 | export * from './components/Container';
12 | export * from './components/Modal';
13 | export * from './components/Divider';
14 | export * from './components/EntityName';
15 | export * from './components/Flex';
16 | export * from './components/Grid';
17 | export * from './components/Heading';
18 | export * from './components/Icon';
19 | export * from './components/Image';
20 | export * from './components/Input';
21 | export * from './components/Link';
22 | export * from './components/LinkHeading';
23 | export * from './components/Menu';
24 | export * from './components/NoSsr';
25 | export * from './components/Overlay';
26 | export * from './components/Panel';
27 | export * from './components/Paragraph';
28 | export * from './components/Popover';
29 | export * from './components/Pressable';
30 | export * from './components/Prose';
31 | export * from './components/Provider';
32 | export * from './components/InvertTheme';
33 | export * from './components/Tabs';
34 | export * from './components/Text';
35 | export * from './components/Tooltip';
36 | export * from './components/TreeItem';
37 | export * from './components/Select';
38 | export * from './components/Stack';
39 |
--------------------------------------------------------------------------------
/.yalc/@stoplight/mosaic/components/Box/types.d.ts:
--------------------------------------------------------------------------------
1 | import { HTMLAttributes } from 'react';
2 | import { IBorderProps, IColorProps, IFlexProps, IInteractivityProps, ILayoutProps, IMarginProps, IPaddingProps, IPositionProps, IRingProps, IShadowProps, ISizeProps, ITypographyProps } from '../../enhancers';
3 | declare type EnhancerProps = ITypographyProps & ISizeProps & IMarginProps & IPaddingProps & IShadowProps & IColorProps & IBorderProps & IRingProps & IInteractivityProps & IFlexProps & IPositionProps & ILayoutProps;
4 | /**
5 | * Generic component props with "as" prop
6 | * @template P Additional props
7 | * @template T React component or string element
8 | */
9 | export declare type BoxOwnProps = EnhancerProps & {
10 | /**
11 | * Replaces the underlying element
12 | */
13 | as?: E;
14 | className?: string;
15 | role?: string;
16 | noFocusRing?: boolean;
17 | };
18 | /**
19 | * Box supports standard HTML attributes
20 | * Box re-defines some props like color, so omit here to prevent clash
21 | */
22 | export interface IBoxHTMLAttributes extends Omit, 'color'> {
23 | }
24 | export declare type BoxProps = BoxOwnProps & Omit, keyof BoxOwnProps>;
25 | export declare type PolymorphicComponentProps = P & BoxProps;
26 | export declare type PolymorphicComponent = (props: PolymorphicComponentProps) => JSX.Element;
27 | export {};
28 |
--------------------------------------------------------------------------------
/.yalc/@stoplight/mosaic/enhancers/color.d.ts:
--------------------------------------------------------------------------------
1 | import { Pseudo } from './pseudo';
2 | import { EnhancerFn } from './types';
3 | export declare type IntentVals = 'default' | 'success' | 'warning' | 'danger';
4 | export declare type SemanticColorVals = 'link' | 'link-dark' | 'code' | 'on-code' | 'primary' | 'primary-tint' | 'primary-light' | 'primary-dark' | 'on-primary' | 'success' | 'success-tint' | 'success-light' | 'success-dark' | 'on-success' | 'warning' | 'warning-tint' | 'warning-light' | 'warning-dark' | 'on-warning' | 'danger' | 'danger-tint' | 'danger-light' | 'danger-dark' | 'on-danger';
5 | export declare type TextColorVals = 'current' | 'body' | 'muted' | 'light' | 'heading' | 'paragraph' | 'canvas' | 'canvas-pure' | 'canvas-50' | 'canvas-100' | 'canvas-200' | 'canvas-300' | 'canvas-dialog' | SemanticColorVals;
6 | export declare type PlaceholderColorVals = true | 'primary' | 'success' | 'warning' | 'danger';
7 | export interface ITextColorProps {
8 | color?: TextColorVals | Pseudo;
9 | }
10 | export interface IPlaceholderProps {
11 | placeholderColor?: PlaceholderColorVals;
12 | }
13 | export declare type BackgroundColorVals = 'canvas' | 'canvas-pure' | 'canvas-50' | 'canvas-100' | 'canvas-200' | 'canvas-300' | 'canvas-dialog' | 'transparent' | SemanticColorVals;
14 | export interface IBackgroundColorProps {
15 | bg?: BackgroundColorVals | Pseudo;
16 | }
17 | export interface IColorProps extends ITextColorProps, IPlaceholderProps, IBackgroundColorProps {
18 | }
19 | export declare const colorPropNames: Array;
20 | export declare const colorProps: EnhancerFn;
21 |
--------------------------------------------------------------------------------
/layouts/StoplightProjectLayout.tsx:
--------------------------------------------------------------------------------
1 | import { Box, containerSizes, Flex } from '@stoplight/mosaic';
2 | import { useRouter } from 'next/router';
3 | import * as React from 'react';
4 |
5 | import { StoplightProjectSidebar } from '../components/StoplightProjectSidebar';
6 | import { getLayout as getSiteLayout } from './SiteLayout';
7 |
8 | interface StoplightProjectLayoutProps {
9 | title?: string;
10 | description?: string;
11 | children: React.ReactNode;
12 | sidebar?: boolean;
13 | }
14 |
15 | const SIDEBAR_WIDTH = 300;
16 |
17 | export function StoplightProjectLayout(props: StoplightProjectLayoutProps) {
18 | const { children } = props;
19 |
20 | const { query } = useRouter();
21 | const nodeUri = typeof query.docsPath === 'string' ? query.docsPath : query.docsPath?.join('/');
22 | const projectSlug = typeof query.projectSlug === 'string' ? query.projectSlug : query.projectSlug?.join('/');
23 |
24 | React.useEffect(() => console.info('StoplightProjectLayout.mount'), []);
25 |
26 | return (
27 |
28 |
37 |
38 |
39 |
40 |
41 | {children}
42 |
43 |
44 | );
45 | }
46 |
47 | export const getLayout = page => getSiteLayout({page});
48 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "stoplight-dev-portal",
3 | "version": "1.0.0",
4 | "private": true,
5 | "license": "MIT",
6 | "scripts": {
7 | "dev": "next",
8 | "build": "next build",
9 | "start": "next start",
10 | "lint": "yarn prettier.check && eslint --ext .js,.jsx,.ts,.tsx .",
11 | "prettier.check": "prettier --ignore-path .eslintignore --check '**/*.{js,jsx,ts,tsx,md}'",
12 | "lint.fix": "prettier --ignore-path .eslintignore --write '**/*.{js,jsx,ts,tsx,md}'; eslint --ext .js,.jsx,.ts,.tsx . --fix",
13 | "type-check": "tsc",
14 | "deduplicate": "yarn-deduplicate --strategy fewer && yarn"
15 | },
16 | "dependencies": {
17 | "@stoplight/mosaic": "file:.yalc/@stoplight/mosaic",
18 | "@stoplight/elements": "7.0.0-alpha.3",
19 | "framer-motion": "^3.3.0",
20 | "mobx": "^6.1.7",
21 | "next": "^10.0.7",
22 | "next-seo": "^4.19.0",
23 | "nprogress": "^0.2.0",
24 | "react": "^17.0.1",
25 | "react-dom": "^17.0.1"
26 | },
27 | "devDependencies": {
28 | "@next/bundle-analyzer": "^10.0.7",
29 | "@stoplight/eslint-config": "^2.0.0",
30 | "@types/node": "^14.14.28",
31 | "@types/nprogress": "^0.2.0",
32 | "@types/react": "^17.0.2",
33 | "@types/react-dom": "^17.0.1",
34 | "@typescript-eslint/eslint-plugin": "^4.15.1",
35 | "@typescript-eslint/parser": "^4.15.1",
36 | "eslint": "^7.20.0",
37 | "eslint-plugin-import": "^2.22.1",
38 | "eslint-plugin-jest": "^24.1.5",
39 | "eslint-plugin-prettier": "^3.3.1",
40 | "eslint-plugin-react": "^7.22.0",
41 | "eslint-plugin-react-hooks": "^4.2.0",
42 | "eslint-plugin-simple-import-sort": "^7.0.0",
43 | "next-compose-plugins": "^2.2.1",
44 | "prettier": "^2.2.1",
45 | "typescript": "~4.1.5"
46 | }
47 | }
--------------------------------------------------------------------------------
/.yalc/@stoplight/mosaic/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@stoplight/mosaic",
3 | "version": "0.0.0-23684a30",
4 | "sideEffects": false,
5 | "peerDependencies": {
6 | "react": ">= 16.8"
7 | },
8 | "resolutions": {
9 | "@react-stately/collections": "npm:@stoplight/react-stately-collections@^3.3.0",
10 | "@react-stately/list": "npm:@stoplight/react-stately-list@^3.2.2"
11 | },
12 | "dependencies": {
13 | "@fortawesome/fontawesome-svg-core": "^1.2.34",
14 | "@fortawesome/free-solid-svg-icons": "^5.15.2",
15 | "@fortawesome/react-fontawesome": "^0.1.14",
16 | "@react-aria/button": "^3.3.1",
17 | "@react-aria/dialog": "^3.1.2",
18 | "@react-aria/focus": "^3.2.3",
19 | "@react-aria/interactions": "^3.3.3",
20 | "@react-aria/listbox": "^3.2.4",
21 | "@react-aria/overlays": "^3.6.1",
22 | "@react-aria/select": "^3.3.0",
23 | "@react-aria/separator": "^3.1.1",
24 | "@react-aria/ssr": "^3.0.1",
25 | "@react-aria/tooltip": "^3.1.1",
26 | "@react-aria/utils": "^3.6.0",
27 | "@react-hook/size": "^2.1.1",
28 | "@react-hook/window-size": "^3.0.7",
29 | "@react-spectrum/utils": "^3.5.1",
30 | "@react-stately/collections": "npm:@stoplight/react-stately-collections@^3.3.0",
31 | "@react-stately/list": "npm:@stoplight/react-stately-list@^3.2.2",
32 | "@react-stately/select": "^3.1.1",
33 | "@react-stately/tooltip": "^3.0.2",
34 | "clsx": "^1.1.1",
35 | "copy-to-clipboard": "^3.3.1",
36 | "deepmerge": "^4.2.2",
37 | "lodash.get": "^4.4.2",
38 | "polished": "^4.0.5",
39 | "reakit": "npm:@stoplight/reakit@~1.3.5",
40 | "ts-keycode-enum": "^1.0.6",
41 | "zustand": "^3.3.1"
42 | },
43 | "main": "./core.umd.js",
44 | "module": "./core.esm.js",
45 | "typings": "./index.d.ts"
46 | }
47 |
--------------------------------------------------------------------------------
/.yalc/@stoplight/mosaic/enhancers/border.d.ts:
--------------------------------------------------------------------------------
1 | import { SemanticColorVals } from './color';
2 | import { OpacityVals } from './interactivity';
3 | import { Pseudo } from './pseudo';
4 | import { EnhancerFn } from './types';
5 | export declare type OutlineVals = 'none';
6 | export declare type BorderColorVals = 'light' | 'dark' | 'button' | 'input' | 'transparent' | SemanticColorVals;
7 | export declare type BorderWidthVals = true | 0 | 2 | 4 | 8;
8 | export declare type RoundedVals = true | 'none' | 'sm' | 'lg' | 'xl' | 'full' | 'b' | 't' | 'l' | 'r' | 'b-none' | 't-none' | 'l-none' | 'r-none' | 'b-sm' | 't-sm' | 'l-sm' | 'r-sm' | 'b-lg' | 't-lg' | 'l-lg' | 'r-lg' | 'b-xl' | 't-xl' | 'l-xl' | 'r-xl' | 'b-full' | 't-full' | 'l-full' | 'r-full';
9 | export interface IBorderProps {
10 | outline?: OutlineVals;
11 | borderColor?: BorderColorVals | Pseudo;
12 | border?: BorderWidthVals;
13 | borderT?: BorderWidthVals;
14 | borderR?: BorderWidthVals;
15 | borderL?: BorderWidthVals;
16 | borderB?: BorderWidthVals;
17 | rounded?: RoundedVals;
18 | }
19 | export declare const borderPropNames: Array;
20 | export declare const borderProps: EnhancerFn;
21 | export declare type RingWidthVals = true | false;
22 | export declare type RingColorVals = 'primary' | 'success' | 'warning' | 'danger';
23 | export declare type RingOpacityVals = OpacityVals;
24 | export interface IRingProps {
25 | ring?: RingWidthVals | Pseudo;
26 | ringColor?: RingColorVals | Pseudo;
27 | ringOpacity?: RingOpacityVals | Pseudo;
28 | }
29 | export declare const ringPropNames: Array;
30 | export declare const ringProps: EnhancerFn;
31 |
--------------------------------------------------------------------------------
/.yalc/@stoplight/mosaic/components/Avatar/Avatar.d.ts:
--------------------------------------------------------------------------------
1 | import React, { CSSProperties } from 'react';
2 | import { IMarginProps } from '../../enhancers';
3 | import { IIconProps } from '../Icon';
4 | declare type BaseAvatarProps = IMarginProps & {
5 | size?: 'sm' | 'md' | 'lg';
6 | className?: string;
7 | bg?: CSSProperties['backgroundColor'];
8 | };
9 | export declare type ImageAvatarProps = BaseAvatarProps & {
10 | imageUrl: string;
11 | };
12 | export declare type IconAvatarProps = BaseAvatarProps & {
13 | icon: IIconProps['icon'];
14 | };
15 | export declare type LetterAvatarProps = BaseAvatarProps & {
16 | letter: string;
17 | };
18 | export declare type BlankAvatarProps = BaseAvatarProps & {
19 | blank: true;
20 | };
21 | export declare type AvatarProps = ImageAvatarProps | IconAvatarProps | LetterAvatarProps | BlankAvatarProps;
22 | export declare const Avatar: React.MemoExoticComponent) | (IMarginProps & {
29 | size?: 'sm' | 'md' | 'lg';
30 | className?: string;
31 | bg?: CSSProperties['backgroundColor'];
32 | } & {
33 | icon: IIconProps['icon'];
34 | } & React.RefAttributes) | (IMarginProps & {
35 | size?: 'sm' | 'md' | 'lg';
36 | className?: string;
37 | bg?: CSSProperties['backgroundColor'];
38 | } & {
39 | letter: string;
40 | } & React.RefAttributes) | (IMarginProps & {
41 | size?: 'sm' | 'md' | 'lg';
42 | className?: string;
43 | bg?: CSSProperties['backgroundColor'];
44 | } & {
45 | blank: true;
46 | } & React.RefAttributes)>>;
47 | export {};
48 |
--------------------------------------------------------------------------------
/.yalc/@stoplight/mosaic/enhancers/flex.d.ts:
--------------------------------------------------------------------------------
1 | import { EnhancerFn } from './types';
2 | export declare type FlexVals = 1 | 'auto' | 'initial' | 'none';
3 | export declare type FlexDirectionVals = 'row' | 'row-reverse' | 'col' | 'col-reverse';
4 | export declare type FlexWrapVals = true | 'reverse' | 'no-wrap';
5 | export declare type FlexGrowVals = true | 0;
6 | export declare type FlexShrinkVals = true | 0;
7 | export declare type JustifyContentVals = 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly';
8 | export declare type JustifyItemsVals = 'auto' | 'start' | 'end' | 'center' | 'stretch';
9 | export declare type JustifySelfVals = 'auto' | 'start' | 'end' | 'center' | 'stretch';
10 | export declare type AlignContentVals = 'center' | 'flex-start' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
11 | export declare type AlignItemsVals = 'start' | 'end' | 'center' | 'baseline' | 'stretch';
12 | export declare type AlignSelfVals = 'auto' | 'flex-start' | 'flex-end' | 'center' | 'stretch';
13 | export interface IFlexProps {
14 | flex?: FlexVals;
15 | flexDirection?: FlexDirectionVals;
16 | flexWrap?: FlexWrapVals;
17 | flexGrow?: FlexGrowVals;
18 | flexShrink?: FlexShrinkVals;
19 | justifyContent?: JustifyContentVals;
20 | justifyItems?: JustifyItemsVals;
21 | justifySelf?: JustifySelfVals;
22 | alignContent?: AlignContentVals;
23 | alignItems?: AlignItemsVals;
24 | alignSelf?: AlignSelfVals;
25 | }
26 | export interface IFlexShorthandProps {
27 | align?: IFlexProps['alignItems'];
28 | justify?: IFlexProps['justifyContent'];
29 | wrap?: IFlexProps['flexWrap'];
30 | direction?: IFlexProps['flexDirection'];
31 | grow?: IFlexProps['flexGrow'];
32 | shrink?: IFlexProps['flexShrink'];
33 | }
34 | export declare const flexPropNames: Array;
35 | export declare const flexProps: EnhancerFn;
36 |
--------------------------------------------------------------------------------
/.yalc/@stoplight/mosaic/enhancers/typography.d.ts:
--------------------------------------------------------------------------------
1 | import { EnhancerFn } from './types';
2 | export declare type FontSizeVals = '2xs' | 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';
3 | export declare type LineHeights = 'none' | 'tight' | 'snug' | 'normal' | 'relaxed' | 'loose';
4 | export declare type LetterSpacing = 'tight' | 'normal' | 'wide';
5 | export declare type ParagraphSizes = 'paragraph-leading' | 'paragraph' | 'paragraph-small' | 'paragraph-tiny';
6 | export declare type FontFamilyVals = 'ui' | 'prose' | 'mono';
7 | export declare type FontWeightVals = 'normal' | 'light' | 'medium' | 'semibold' | 'bold';
8 | export declare type FontStyleVals = 'italic' | 'non-italic';
9 | export declare type TextAlign = 'left' | 'center' | 'right' | 'justify';
10 | export declare type TextDecoration = 'underline' | 'line-through' | 'no-underline';
11 | export declare type TextTransform = 'uppercase' | 'lowercase' | 'capitalize' | 'normal-case';
12 | export declare type TextOverflow = 'truncate' | 'overflow-ellipsis' | 'overflow-clip';
13 | export declare type VerticalAlign = 'baseline' | 'top' | 'middle' | 'bottom' | 'text-top' | 'text-bottom';
14 | export declare type Whitespace = 'normal' | 'nowrap' | 'pre' | 'pre-line' | 'pre-wrap';
15 | export declare type WordBreak = 'normal' | 'words' | 'all';
16 | export interface ITypographyProps {
17 | fontSize?: FontSizeVals | ParagraphSizes;
18 | lineHeight?: LineHeights | ParagraphSizes;
19 | letterSpacing?: LetterSpacing;
20 | fontFamily?: FontFamilyVals;
21 | fontWeight?: FontWeightVals;
22 | fontStyle?: FontStyleVals;
23 | textAlign?: TextAlign;
24 | textDecoration?: TextDecoration;
25 | textTransform?: TextTransform;
26 | textOverflow?: TextOverflow;
27 | verticalAlign?: VerticalAlign;
28 | whitespace?: Whitespace;
29 | wordBreak?: WordBreak;
30 | }
31 | export declare const typographyPropNames: Array;
32 | export declare const typographyProps: EnhancerFn;
33 |
--------------------------------------------------------------------------------
/.yalc/@stoplight/mosaic/components/Panel/Panel.d.ts:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { PolymorphicComponentProps } from '../Box';
3 | export declare type PanelOwnProps = {
4 | /**
5 | * The contents of the panel.
6 | *
7 | * A Panel.Titlebar must be the first child element.
8 | */
9 | children: React.ReactNode;
10 | /**
11 | * Wether the panel should be rounded. Applies rounded "lg" and overflow hidden.
12 | *
13 | * Usually only use this on root panel components, not nested panel components.
14 | */
15 | rounded?: boolean;
16 | /**
17 | * Controls how the panel will appear.
18 | *
19 | * @default 'default'
20 | */
21 | appearance?: 'default' | 'minimal';
22 | /**
23 | * Enable collapsing
24 | */
25 | isCollapsible?: boolean;
26 | /**
27 | * Identifier to use for aria controls when collapse is enabled
28 | */
29 | id?: string;
30 | /**
31 | * Controls whether to show the panel contents or not by default in.
32 | *
33 | * If defaultIsOpen is provided the panel will be uncontrolled.
34 | */
35 | defaultIsOpen?: boolean;
36 | /**
37 | * Controls whether to show the panel contents or not.
38 | *
39 | * If no onChange is provided, isOpen will be used as the default value (uncontrolled).
40 | */
41 | isOpen?: boolean;
42 | /**
43 | * Called when the collapsed state changes.
44 | *
45 | * When not provided, the component will control it's own state internally (uncontrolled).
46 | */
47 | onChange?: (value: boolean) => void;
48 | };
49 | export declare type PanelProps = PolymorphicComponentProps<'div', PanelOwnProps>;
50 | export declare const Panel: {
51 | ({ appearance, id, className, children, isCollapsible, isOpen: isOpenProp, defaultIsOpen, onChange, rounded, ...extraProps }: PanelProps): JSX.Element;
52 | Titlebar: React.NamedExoticComponent;
53 | Content: React.FC>>;
54 | };
55 |
--------------------------------------------------------------------------------
/.yalc/@stoplight/mosaic/components/Menu/MenuItem.d.ts:
--------------------------------------------------------------------------------
1 | import React, { ReactNode } from 'react';
2 | export declare type MenuItemProps = {
3 | /**
4 | * The text to display in the menu item.
5 | */
6 | text: ReactNode;
7 | /**
8 | * Optional element to render on the right side of the menu item. Use this to display keyboard shortcut, badge counts, etc.
9 | */
10 | meta?: ReactNode;
11 | /**
12 | * Render menu item with extra space on the left side. Useful to align menus when some items are checkbox items.
13 | */
14 | indent?: boolean;
15 | /**
16 | * If true or false is provided, menu item will render with indent={true}, and a checkbox icon when true.
17 | */
18 | checked?: boolean;
19 | /**
20 | * If provided, the menu item will render as a link with target="_blank". href must be an absolute url.
21 | */
22 | href?: string;
23 | /**
24 | * When disabled is true the MenuItem is rendered as semi-transparent and cannot be interacted with.
25 | */
26 | disabled?: boolean;
27 | /**
28 | * Optional additional logic to run when MenuItem is clicked (or triggered in any way, such as via keyboard shortcut).
29 | */
30 | onClick?: (event: React.MouseEvent) => void;
31 | /**
32 | * For use when nesting menus, if you want the submenu to have a particular label. Gets forwarded through to the `Menu.label` prop.
33 | */
34 | label?: string;
35 | /**
36 | * If children are supplied then this MenuItem will render a submenu when active. Must contain `MenuItem`, `MenuDivider`, or `MenuRadioGroup` components.
37 | */
38 | children?: React.ReactNode;
39 | /**
40 | * Not for external use, this property is used by the Menu component when rendering submenus.
41 | *
42 | * @private
43 | */
44 | __hasSubmenu?: boolean;
45 | /**
46 | * Not for external use, this property is used by the menu component when rendering items.
47 | *
48 | * @private
49 | */
50 | __active?: boolean;
51 | };
52 | export declare const MenuItem: React.ForwardRefExoticComponent>;
53 |
--------------------------------------------------------------------------------
/.yalc/@stoplight/mosaic/components/Tooltip/Tooltip.d.ts:
--------------------------------------------------------------------------------
1 | import { MutableRefObject, ReactElement } from 'react';
2 | import { MaybeRenderProp, Placement } from '../../utils';
3 | /**
4 | * Expose a select set of props to customize the popover wrapper
5 | */
6 | declare type TooltipBoxProps = {};
7 | export declare type TooltipProps = {
8 | /**
9 | * The element that will trigger the Tooltip. Should be a button in most cases. Can use a function for more control.
10 | */
11 | renderTrigger: MaybeRenderProp<{
12 | isOpen: boolean;
13 | }, ReactElement>;
14 | /**
15 | * The content to render in the Tooltip. Can use a function to access Tooltip state and for more control over close.
16 | */
17 | children: MaybeRenderProp<{
18 | close: () => void;
19 | }>;
20 | /**
21 | * The ref of the element the Tooltip should visually attach itself to.
22 | */
23 | triggerRef?: MutableRefObject;
24 | /**
25 | * The delay time for the tooltip to show up, in milliseconds. Defaults to 500.
26 | */
27 | delay?: number;
28 | /**
29 | * Whether the tooltip should be disabled, independent from the trigger.
30 | */
31 | isDisabled?: boolean;
32 | /**
33 | * Whether the Tooltip is open (controlled mode).
34 | */
35 | isOpen?: boolean;
36 | /**
37 | * Wether to default the Tooltip to open (uncontrolled mode).
38 | */
39 | defaultOpen?: boolean;
40 | /**
41 | * Called when the Tooltip opens.
42 | */
43 | onOpen?: () => void;
44 | /**
45 | * Called when the Tooltip closes.
46 | */
47 | onClose?: () => void;
48 | /**
49 | * The placement of the Tooltip overlay with respect to its trigger element. Defaults to `bottom`.
50 | */
51 | placement?: Placement;
52 | /**
53 | * Whether the element should flip its orientation (e.g. top to bottom or left to right) when there is insufficient
54 | * room for it to render completely. Defaults to true.
55 | */
56 | shouldFlip?: boolean;
57 | /**
58 | * The additional offset applied along the main axis between the element and its anchor element.
59 | */
60 | offset?: number;
61 | /**
62 | * The additional offset applied along the cross axis between the element and its anchor element.
63 | */
64 | crossOffset?: number;
65 | /**
66 | * Pass true to render the tooltip without an arrow.
67 | */
68 | hideArrow?: boolean;
69 | } & TooltipBoxProps;
70 | export declare const Tooltip: (props: TooltipProps) => JSX.Element;
71 | export {};
72 |
--------------------------------------------------------------------------------
/pages/docs/[projectSlug]/[[...docsPath]].tsx:
--------------------------------------------------------------------------------
1 | import { Box } from '@stoplight/mosaic';
2 | import { GetStaticPaths, GetStaticProps, InferGetStaticPropsType } from 'next';
3 | import dynamic from 'next/dynamic';
4 | import { useRouter } from 'next/router';
5 | import * as React from 'react';
6 |
7 | import { ErrorBoundary } from '../../../components/ErrorBoundary';
8 | import { PageTransition } from '../../../components/PageTransition';
9 | import { fetchNode } from '../../../handlers/node';
10 | import { getLayout } from '../../../layouts/StoplightProjectLayout';
11 |
12 | // @ts-expect-error : TODO need to fix the typings or wrap + re-export this component
13 | const DocsContent = dynamic(() => import('@stoplight/elements/components/Docs').then(mod => mod.Docs), { ssr: false });
14 |
15 | type ThenArg = T extends PromiseLike ? U : T;
16 |
17 | export const getStaticProps: GetStaticProps<{
18 | node: ThenArg>;
19 | }> = async ctx => {
20 | const { docsPath, projectSlug } = ctx.params;
21 |
22 | let node;
23 | try {
24 | node = await fetchNode({
25 | projectSlug: typeof projectSlug === 'string' ? projectSlug : projectSlug.join('/'),
26 | nodeUri: typeof docsPath === 'string' ? docsPath : docsPath.join('/'),
27 | });
28 | } catch (e) {
29 | // TODO: throw error with a code so we can distinguish not found from other errors
30 | console.error('docs.fetchNode.getStaticProps', e);
31 | return {
32 | notFound: true,
33 | };
34 | }
35 |
36 | return {
37 | // 1 min
38 | revalidate: 60,
39 | props: {
40 | node,
41 | },
42 | };
43 | };
44 |
45 | export const getStaticPaths: GetStaticPaths = async () => {
46 | return {
47 | paths: [],
48 | // this generates static pages on demand, with re-build according to `revalidate` seconds prop above
49 | fallback: 'blocking',
50 | };
51 | };
52 |
53 | function DocsPage({ node }: InferGetStaticPropsType) {
54 | React.useEffect(() => console.info('DocsPage.mount'), []);
55 | console.info('DocsPage.render');
56 |
57 | const router = useRouter();
58 | if (router.isFallback) {
59 | return