@stoplight/elements-dev-portal 3.0.12-beta-0.1 → 3.0.13

package/src/components/NodeContent/NodeContent.tsx

@@ -1,235 +0,0 @@
-import {
-  CustomLinkComponent,
-  Docs,
-  DocsProps,
-  LinkHeading,
-  MarkdownComponentsProvider,
-  MockingProvider,
-  ReferenceResolver,
-  RouterTypeContext,
-} from '@stoplight/elements-core';
-import { CustomComponentMapping } from '@stoplight/markdown-viewer';
-import { dirname, resolve } from '@stoplight/path';
-import { NodeType } from '@stoplight/types';
-import * as React from 'react';
-import { useLocation } from 'react-router-dom';
-
-import { Node } from '../../types';
-
-// Props shared with elements-core Docs component
-type DocsBaseProps = Pick<
-  DocsProps,
-  'tryItCorsProxy' | 'tryItCredentialsPolicy' | 'nodeHasChanged' | 'nodeUnsupported'
->;
-type DocsLayoutProps = Pick<
-  Required<DocsProps>['layoutOptions'],
-  'compact' | 'hideTryIt' | 'hideTryItPanel' | 'hideSamples' | 'hideExport' | 'hideSecurityInfo' | 'hideServerInfo'
->;
-
-export type NodeContentProps = {
-  node: Node;
-  Link: CustomLinkComponent;
-
-  /**
-   * Allows to hide mocking button
-   */
-  hideMocking?: boolean;
-
-  /**
-   * Support for custom reference resolver
-   */
-  refResolver?: ReferenceResolver;
-
-  maxRefDepth?: number;
-
-  onExportRequest?: (type: 'original' | 'bundled') => void;
-} & DocsBaseProps &
-  DocsLayoutProps;
-
-export const NodeContent = ({
-  node,
-  Link,
-  hideMocking,
-  refResolver,
-  maxRefDepth,
-
-  // Docs base props
-  tryItCorsProxy,
-  tryItCredentialsPolicy,
-  nodeHasChanged,
-  nodeUnsupported,
-
-  // Docs layout props
-  compact,
-  hideTryIt,
-  hideSamples,
-  hideTryItPanel,
-  hideSecurityInfo,
-  hideServerInfo,
-
-  // Exporting
-  hideExport,
-  onExportRequest,
-}: NodeContentProps) => {
-  return (
-    <NodeLinkContext.Provider value={[node, Link]}>
-      <MarkdownComponentsProvider
-        value={{
-          a: LinkComponent,
-          // These override the default markdown-viewer components and modifies the
-          // rendering of hash routing hrefs for headings in elements-core for the BaseArticleComponent
-          h2: ({ color, ...props }) => <LinkHeading size={2} {...props} />,
-          h3: ({ color, ...props }) => <LinkHeading size={3} {...props} />,
-          h4: ({ color, ...props }) => <LinkHeading size={4} {...props} />,
-        }}
-      >
-        <MockingProvider mockUrl={node.links.mock_url} hideMocking={hideMocking}>
-          <Docs
-            nodeType={node.type as NodeType}
-            nodeData={node.data}
-            nodeTitle={node.title}
-            disableProps={node?.disableProps}
-            layoutOptions={{
-              compact,
-              hideTryIt: hideTryIt,
-              hideTryItPanel: hideTryItPanel,
-              hideSamples,
-              hideSecurityInfo: hideSecurityInfo,
-              hideServerInfo: hideServerInfo,
-              hideExport:
-                hideExport ||
-                (node.links.export_url ?? node.links.export_original_file_url ?? node.links.export_bundled_file_url) ===
-                  undefined,
-            }}
-            useNodeForRefResolving
-            refResolver={refResolver}
-            maxRefDepth={maxRefDepth}
-            tryItCorsProxy={tryItCorsProxy}
-            exportProps={
-              [NodeType.HttpService, NodeType.Model].includes(node.type as NodeType)
-                ? {
-                    original: onExportRequest
-                      ? { onPress: () => onExportRequest('original') }
-                      : { href: node.links.export_original_file_url ?? node.links.export_url },
-                    bundled: onExportRequest
-                      ? { onPress: () => onExportRequest('bundled') }
-                      : { href: node.links.export_bundled_file_url ?? getBundledUrl(node.links.export_url) },
-                  }
-                : undefined
-            }
-            tryItCredentialsPolicy={tryItCredentialsPolicy}
-            nodeHasChanged={nodeHasChanged}
-            nodeUnsupported={nodeUnsupported}
-          />
-        </MockingProvider>
-      </MarkdownComponentsProvider>
-    </NodeLinkContext.Provider>
-  );
-};
-
-const NodeLinkContext = React.createContext<[Node, CustomLinkComponent] | undefined>(undefined);
-
-const externalRegex = new RegExp('^(?:[a-z]+:)?//', 'i');
-const LinkComponent: CustomComponentMapping['a'] = ({ children, href, title }) => {
-  console.log('LinkComponent href-----', href);
-  const ctx = React.useContext(NodeLinkContext);
-  const routerKind = React.useContext(RouterTypeContext);
-
-  const { pathname } = useLocation();
-  const route = pathname.split('#')[0];
-
-  try {
-    if (href && externalRegex.test(href)) {
-      const baseURL = window.location.host;
-      const hrefURL = new URL(href).host;
-
-      if (baseURL === hrefURL) {
-        // Open URL in same tab if domain match
-        return (
-          <a href={href} title={title ? title : undefined}>
-            {children}
-          </a>
-        );
-      }
-      return (
-        <a href={href} target="_blank" rel="noreferrer" title={title ? title : undefined}>
-          {children}
-        </a>
-      );
-    }
-  } catch (error) {
-    console.error(error);
-  }
-
-  if (href && ctx) {
-    const [node, Link] = ctx;
-    console.log('LinkComponent node-----', node);
-
-    // Resolve relative file URI with
-    const { fileUri } = getNodeUriParts(node.uri);
-    const { fileUri: hrefFileUri } = getNodeUriParts(href);
-
-    let resolvedUri;
-    if (hrefFileUri) {
-      // if the href is targeting another file, resolve it against the dir path of current file
-      resolvedUri = resolve(dirname(fileUri), href);
-    } else {
-      // If the href does not include a file, resolve it relative to the current file
-      resolvedUri = resolve(fileUri, href);
-    }
-
-    const [resolvedUriWithoutAnchor, hash] = resolvedUri.split('#');
-    const decodedUrl = decodeURIComponent(href);
-    const decodedResolvedUriWithoutAnchor = decodeURIComponent(resolvedUriWithoutAnchor);
-    const [pagePathWithoutHash] = pathname.split('#');
-
-    let edge = node.outbound_edges.find(
-      edge => edge.uri === decodedUrl || edge.uri === decodedResolvedUriWithoutAnchor,
-    );
-
-    if (!edge) {
-      edge = node.outbound_edges.find(edge => pagePathWithoutHash === `/${edge.slug}`);
-    }
-
-    if (edge) {
-      const slug = routerKind === 'hash' ? `#${route.replace(node.slug, edge.slug)}` : edge.slug;
-      return <Link to={`${slug}${hash ? `#${hash}` : ''}`}>{children}</Link>;
-    }
-  }
-
-  const fullHref = routerKind === 'hash' ? `#${route}${href}` : href;
-  return <a href={fullHref}>{children}</a>;
-};
-
-function getBundledUrl(url: string | undefined) {
-  if (url === undefined) return undefined;
-  const bundledUrl = new URL(url);
-  const searchParams = new URLSearchParams(bundledUrl.search);
-  searchParams.append('deref', 'optimizedBundle');
-  bundledUrl.search = searchParams.toString();
-  return bundledUrl.toString();
-}
-
-// Extract out just the file portion of the node URI
-// This handles cases such as links to http_operation node uris, which include both the file + encoded pointer, e.g.
-//
-// /reference/openapi.json/paths/~1v2~1contact~1last_change/post#heading-anchor
-// fileUri = /reference/openapi.json
-// pointer = /paths/~1v2~1contact~1last_change/post#heading-anchor
-export const getNodeUriParts = (uri: string): { fileUri: string; pointer: string } => {
-  // Check: added console for debugging purpose
-  console.log('getNodeUriParts uri-----', uri, 'typeof uri:', typeof uri);
-  // Guard against undefined or non-string input
-  if (!uri || typeof uri !== 'string') return { fileUri: '', pointer: '' };
-  const parts = uri.split(/(\.yaml|\.yml|\.json|\.md)/);
-  if (parts === undefined || void 0) {
-    return { fileUri: '', pointer: '' };
-  }
-  if (!parts || parts.length === 1) {
-    return { fileUri: '', pointer: parts[0] || '' };
-  }
-
-  const fileUri = `${parts[0] || ''}${parts[1] || ''}`;
-
-  return { fileUri, pointer: parts[2] || '' };
-};

package/src/components/NodeContent/index.tsx

@@ -1 +0,0 @@
-export * from './NodeContent';

package/src/components/NotFound.tsx

@@ -1,11 +0,0 @@
-import { Box, Flex, Heading, VStack } from '@stoplight/mosaic';
-import React from 'react';
-
-export const NotFound = () => (
-  <Flex align="center" justify="center" flexGrow>
-    <VStack spacing={4} align="center">
-      <Heading size={1}>Not Found</Heading>
-      <Box as="p">Could not find what you are looking for</Box>
-    </VStack>
-  </Flex>
-);

package/src/components/Search/Search.stories.tsx

@@ -1,151 +0,0 @@
-import { faSearch, faSpinner } from '@fortawesome/free-solid-svg-icons';
-import { Box, Icon, Input, useModalState } from '@stoplight/mosaic';
-import { Story } from '@storybook/react';
-import * as React from 'react';
-
-import { useGetNodes } from '../../hooks/useGetNodes';
-import { useGetTableOfContents } from '../../hooks/useGetTableOfContents';
-import { useGetWorkspace } from '../../hooks/useGetWorkspace';
-import { NodeSearchResult } from '../../types';
-import { TableOfContents } from '../TableOfContents';
-import { Search, SearchResults } from './';
-
-type SearchWrapperProps = { projectIds: string[]; workspaceId: string; isInResponsiveMode?: boolean };
-// Wrapper to show how to use the node content hook
-const SearchWrapper = ({ projectIds, workspaceId }: SearchWrapperProps) => {
-  const { isOpen, open, close } = useModalState();
-  const [search, setSearch] = React.useState('');
-  const { data, isFetching } = useGetNodes({
-    search,
-    projectIds,
-    workspaceId,
-  });
-
-  const { data: workspace } = useGetWorkspace({
-    projectIds,
-  });
-
-  const handleClose = () => {
-    close();
-    setSearch('');
-  };
-
-  const handleClick = (searchResult: NodeSearchResult) => {
-    console.log('Search clicked', searchResult);
-    window.open(
-      `https://${workspace?.workspace.slug}.stoplight.io/docs/${searchResult.project_slug}${searchResult.uri}`,
-      '_blank',
-    );
-
-    handleClose();
-  };
-
-  return (
-    <>
-      <Input placeholder="Search..." onClick={open} />
-      <Search
-        isLoading={isFetching}
-        search={search}
-        searchResults={data}
-        onSearch={setSearch}
-        isOpen={isOpen}
-        onClose={handleClose}
-        onClick={handleClick}
-      />
-    </>
-  );
-};
-
-const EmbeddedSearchWrapper = ({ projectIds, workspaceId, isInResponsiveMode }: SearchWrapperProps) => {
-  const [search, setSearch] = React.useState('');
-  const { data, isFetching } = useGetNodes({
-    search,
-    projectIds,
-    workspaceId,
-  });
-
-  const { data: workspace } = useGetWorkspace({
-    projectIds,
-  });
-  const { data: tableOfContents } = useGetTableOfContents({ projectId: projectIds[0], branchSlug: '' });
-
-  const handleClick = (searchResult: NodeSearchResult) => {
-    console.log('Search clicked', searchResult);
-    window.open(
-      `https://${workspace?.workspace.slug}.stoplight.io/docs/${searchResult.project_slug}${searchResult.uri}`,
-      '_blank',
-    );
-  };
-
-  return (
-    <>
-      <Box bg="canvas" pos="sticky" style={{ top: 0 }}>
-        <Box bg="canvas" w="full" pt={3}>
-          <Input
-            appearance="minimal"
-            border
-            icon={<Box as={Icon} ml={1} icon={isFetching ? faSpinner : faSearch} spin={isFetching} />}
-            autoFocus
-            placeholder="Search..."
-            value={search}
-            onChange={e => {
-              setSearch(e.currentTarget.value);
-            }}
-            type="search"
-          />
-        </Box>
-      </Box>
-      <Box>
-        {isInResponsiveMode && !search && tableOfContents ? (
-          <TableOfContents
-            isInResponsiveMode={isInResponsiveMode}
-            tableOfContents={tableOfContents}
-            activeId="b3A6MTE0"
-            Link={({ children, ...props }) => {
-              return (
-                <a
-                  onClick={() => {
-                    console.log('Link clicked!', props);
-                  }}
-                >
-                  {children}
-                </a>
-              );
-            }}
-          />
-        ) : (
-          !search && isInResponsiveMode && <>Loading...</>
-        )}
-        {/* show search results first if not in responsive mode */}
-        {!isInResponsiveMode || (isInResponsiveMode && search) ? (
-          <Box p={5}>
-            <SearchResults searchResults={data} onClick={handleClick} isEmbedded={true} />
-          </Box>
-        ) : null}
-      </Box>
-    </>
-  );
-};
-export default {
-  title: 'Public/Search',
-  component: SearchWrapper,
-  argTypes: {
-    workspaceId: { table: { category: 'Input' } },
-    projectIds: { table: { category: 'Input' } },
-    platformUrl: { table: { category: 'Input' } },
-    isInResponsiveMode: { table: { category: 'Input' } },
-  },
-  args: {
-    projectIds: ['cHJqOjYwNjYx'],
-    workspaceId: 'd2s6NDE1NTU',
-    platformUrl: 'https://stoplight.io',
-    isInResponsiveMode: false,
-  },
-};
-
-export const Playground: Story<SearchWrapperProps> = args => <SearchWrapper {...args} />;
-export const EmbeddedSearch: Story<SearchWrapperProps> = args => <EmbeddedSearchWrapper {...args} />;
-
-Playground.storyName = 'Studio Demo';
-
-EmbeddedSearch.storyName = 'Embedded Search';

package/src/components/Search/Search.tsx

@@ -1,161 +0,0 @@
-import { faSearch, faSpinner } from '@fortawesome/free-solid-svg-icons';
-import {
-  NodeTypeColors,
-  NodeTypeIconDefs,
-  withMosaicProvider,
-  withPersistenceBoundary,
-  withQueryClientProvider,
-  withStyles,
-} from '@stoplight/elements-core';
-import { Box, Flex, Icon, Input, ListBox, ListBoxItem, Modal, ModalProps } from '@stoplight/mosaic';
-import { flow } from 'lodash';
-import * as React from 'react';
-
-import { NodeSearchResult } from '../../types';
-
-export type SearchProps = {
-  isLoading?: boolean;
-  search?: string;
-  searchResults?: NodeSearchResult[];
-  onSearch: (search: string) => void;
-  onClick: (result: NodeSearchResult) => void;
-  isOpen?: boolean;
-  onClose: ModalProps['onClose'];
-};
-
-export type SearchResultsListProps = {
-  searchResults?: NodeSearchResult[];
-  isEmbedded?: boolean;
-  showDivider?: boolean;
-  onClick: (result: NodeSearchResult) => void;
-};
-
-const SearchImpl = ({ isLoading, search, searchResults, isOpen, onClose, onClick, onSearch }: SearchProps) => {
-  const listBoxRef = React.useRef<HTMLDivElement>(null);
-
-  const onChange = React.useCallback(e => onSearch(e.currentTarget.value), [onSearch]);
-
-  const onKeyDown = React.useCallback(e => {
-    // Focus the search results on arrow down
-    if (e.key === 'ArrowDown') {
-      e.preventDefault();
-      listBoxRef.current?.focus();
-    }
-  }, []);
-
-  return (
-    <Modal
-      renderHeader={() => (
-        <Input
-          appearance="minimal"
-          borderB
-          size="lg"
-          icon={<Box as={Icon} ml={1} icon={isLoading ? faSpinner : faSearch} spin={isLoading} />}
-          autoFocus
-          placeholder="Search..."
-          value={search}
-          onChange={onChange}
-          onKeyDown={onKeyDown}
-        />
-      )}
-      isOpen={!!isOpen}
-      onClose={onClose}
-    >
-      <SearchResultsList searchResults={searchResults} onClick={onClick} />
-    </Modal>
-  );
-};
-
-export const SearchResultsList = ({
-  searchResults,
-  onClick,
-  isEmbedded,
-  showDivider = true,
-}: SearchResultsListProps) => {
-  const listBoxRef = React.useRef<HTMLDivElement>(null);
-  const onSelectionChange = React.useCallback(
-    keys => {
-      const selectedId = keys.values().next().value;
-      const selectedResult = searchResults?.find(
-        searchResult => `${searchResult.id}-${searchResult.project_id}` === selectedId,
-      );
-      if (selectedResult) {
-        onClick(selectedResult);
-      }
-    },
-    [searchResults, onClick],
-  );
-
-  return (
-    <>
-      {searchResults && searchResults.length > 0 ? (
-        <ListBox
-          ref={listBoxRef}
-          aria-label="Search"
-          overflowY="auto"
-          h={isEmbedded ? undefined : 80}
-          m={-5}
-          items={searchResults}
-          selectionMode="single"
-          onSelectionChange={onSelectionChange}
-        >
-          {(searchResult: NodeSearchResult) => {
-            return (
-              <ListBoxItem key={`${searchResult.id}-${searchResult.project_id}`} textValue={searchResult.title}>
-                <Box p={3} borderB={!showDivider ? undefined : true}>
-                  <Flex align="center">
-                    <Box
-                      as={Icon}
-                      w={4}
-                      icon={NodeTypeIconDefs[searchResult.type as keyof typeof NodeTypeIconDefs]}
-                      style={{ color: NodeTypeColors[searchResult.type as keyof typeof NodeTypeIconDefs] }}
-                    />
-
-                    <Box
-                      flex={1}
-                      fontSize="lg"
-                      dangerouslySetInnerHTML={{ __html: searchResult.highlighted.name ?? '' }}
-                      fontWeight="medium"
-                      textOverflow="overflow-ellipsis"
-                      mx={2}
-                    />
-
-                    <Box fontSize="sm" color="muted">
-                      {searchResult.project_name}
-                    </Box>
-                  </Flex>
-
-                  <Box
-                    dangerouslySetInnerHTML={{ __html: searchResult.highlighted.summary ?? '' }}
-                    color="muted"
-                    fontSize="sm"
-                    mt={1}
-                    ml={6}
-                  />
-                </Box>
-              </ListBoxItem>
-            );
-          }}
-        </ListBox>
-      ) : (
-        <Flex w="full" h={80} align="center" justify="center" m={-5}>
-          No search results
-        </Flex>
-      )}
-    </>
-  );
-};
-
-export const SearchResults = flow(
-  withStyles,
-  withPersistenceBoundary,
-  withMosaicProvider,
-  withQueryClientProvider,
-)(SearchResultsList);
-
-export const Search = flow(
-  withStyles,
-  withPersistenceBoundary,
-  withMosaicProvider,
-  withQueryClientProvider,
-)(SearchImpl);

package/src/components/Search/SearchOverlay.tsx

@@ -1,88 +0,0 @@
-import { faSearch, faSpinner } from '@fortawesome/free-solid-svg-icons';
-import type { CustomLinkComponent } from '@stoplight/elements-core';
-import { Box, Button, Flex, Icon, Input, Modal } from '@stoplight/mosaic';
-import * as React from 'react';
-import { Link } from 'react-router-dom';
-
-import { NodeSearchResult, ProjectTableOfContents } from '../../types';
-import { TableOfContents } from '../TableOfContents';
-import { SearchResults } from './Search';
-
-type SearchOverlayProps = {
-  isFetching: boolean;
-  search: string;
-  setSearch: (search: string) => void;
-  data?: NodeSearchResult[];
-  toc?: ProjectTableOfContents;
-  nodeSlug?: string;
-  projectSlug?: string;
-  branchSlug?: string;
-  isSearchShowing: boolean;
-  onClose: () => void;
-  onClick: (item?: NodeSearchResult) => void;
-};
-
-export const SearchOverlay = ({
-  isFetching,
-  search,
-  setSearch,
-  data,
-  toc,
-  nodeSlug,
-  projectSlug,
-  branchSlug,
-  isSearchShowing,
-  onClose,
-  onClick,
-}: SearchOverlayProps) => {
-  return (
-    <Modal isOpen={isSearchShowing} onClose={onClose}>
-      <Box className="sl-overlay" bg="canvas" overflowY="scroll" data-test="search-overlay">
-        <Flex alignItems="center" h="3xl" px={7} bg="canvas" borderB pos="sticky" zIndex={20}>
-          <Flex w="full">
-            <Box pt={1} pr={2}>
-              <Button
-                appearance="minimal"
-                onClick={() => {
-                  onClose();
-                }}
-                data-test="search-overlay-back-button"
-              >
-                <Icon icon={['fas', 'arrow-left']} color="gray" size="lg" />
-              </Button>
-            </Box>
-            <Input
-              border
-              data-test="docs-search-input"
-              display="inline-block"
-              appearance="minimal"
-              icon={<Box as={Icon} ml={1} icon={isFetching ? faSpinner : faSearch} spin={isFetching} />}
-              autoFocus
-              placeholder={projectSlug ? 'Search within the project' : 'Search...'}
-              value={search}
-              onChange={e => {
-                setSearch(e.currentTarget.value);
-              }}
-              type="search"
-              w="full"
-              size="lg"
-            />
-          </Flex>
-        </Flex>
-        <Box px={5} py={toc && !search ? 0 : 5} data-test="responsive-project-toc">
-          {toc && !search && projectSlug && (
-            <TableOfContents
-              tableOfContents={{ ...toc, hide_powered_by: true }}
-              activeId={nodeSlug || ''}
-              Link={Link as CustomLinkComponent}
-              onLinkClick={onClick}
-            />
-          )}
-          {search && (
-            <SearchResults searchResults={data} onClick={item => onClick(item)} isEmbedded={true} showDivider={false} />
-          )}
-        </Box>
-      </Box>
-    </Modal>
-  );
-};

package/src/components/Search/index.tsx

@@ -1 +0,0 @@
-export * from './Search';