@jpmorganchase/elemental 1.0.0

package/src/hooks/useExportDocumentProps.tsx

@@ -0,0 +1,48 @@
+import { safeStringify } from '@stoplight/yaml';
+import saver from 'file-saver';
+import * as React from 'react';
+
+import { isJson } from '../utils/oas';
+
+export function useExportDocumentProps({
+  originalDocument,
+  bundledDocument,
+}: {
+  originalDocument: string | object;
+  bundledDocument: unknown;
+}) {
+  const isJsonDocument = typeof originalDocument === 'object' || (!!originalDocument && isJson(originalDocument));
+
+  const exportDocument = React.useCallback(
+    (document: string) => {
+      const type = isJsonDocument ? 'json' : 'yaml';
+      const blob = new Blob([document], {
+        type: `application/${type}`,
+      });
+      saver.saveAs(blob, `document.${type}`);
+    },
+    [isJsonDocument],
+  );
+
+  const exportOriginalDocument = React.useCallback(() => {
+    const stringifiedDocument =
+      typeof originalDocument === 'object' ? JSON.stringify(originalDocument, null, 2) : originalDocument || '';
+    exportDocument(stringifiedDocument);
+  }, [originalDocument, exportDocument]);
+
+  const exportBundledDocument = React.useCallback(() => {
+    const stringifiedDocument = isJsonDocument
+      ? JSON.stringify(bundledDocument, null, 2)
+      : safeStringify(bundledDocument);
+    exportDocument(stringifiedDocument);
+  }, [bundledDocument, isJsonDocument, exportDocument]);
+
+  return {
+    original: {
+      onPress: exportOriginalDocument,
+    },
+    bundled: {
+      onPress: exportBundledDocument,
+    },
+  };
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export type { APIProps } from './containers/API';
+export { API } from './containers/API';

package/src/styles.css

@@ -0,0 +1 @@
+@import "../../elements-core/src/styles.css";

package/src/utils/oas/__tests__/oas.spec.ts

@@ -0,0 +1,272 @@
+import { transformOasToServiceNode } from '../';
+
+const oas3Document = {
+  'x-stoplight': { id: 'abc' },
+  openapi: '3.0.0',
+  info: {
+    title: 'oas3',
+    version: '1.0.0',
+  },
+  tags: [{ name: 'operation-tag' }, { name: 'model-tag' }],
+  paths: {
+    '/todos': {
+      get: {
+        summary: 'Get Todos',
+        tags: ['operation-tag'],
+      },
+    },
+  },
+  components: {
+    schemas: {
+      Todo: {
+        type: 'object',
+        properties: {
+          id: {
+            type: 'integer',
+          },
+        },
+        title: 'Todo',
+        'x-tags': ['model-tag'],
+      },
+    },
+  },
+};
+
+const oas2Document = {
+  'x-stoplight': { id: 'abc' },
+  swagger: '2.0.0',
+  info: {
+    title: 'oas2',
+    version: '1.0.0',
+  },
+  tags: [{ name: 'operation-tag' }, { name: 'model-tag' }],
+  paths: {
+    '/todos': {
+      get: {
+        summary: 'Get Todos',
+        tags: ['operation-tag'],
+      },
+    },
+  },
+  definitions: {
+    Todo: {
+      type: 'object',
+      properties: {
+        id: {
+          type: 'integer',
+        },
+      },
+      title: 'Todo',
+      'x-tags': ['model-tag'],
+    },
+  },
+};
+
+describe('computeOasNodes', () => {
+  it('should return null for invalid document', () => {
+    expect(transformOasToServiceNode({})).toBeNull();
+  });
+
+  it('should return oas nodes for oas3 document', () => {
+    expect(transformOasToServiceNode(oas3Document)).toStrictEqual({
+      type: 'http_service',
+      uri: '/',
+      name: 'oas3',
+      data: {
+        id: 'abc',
+        version: '1.0.0',
+        name: 'oas3',
+        tags: [
+          {
+            id: 'd3404a8f3b495',
+            name: 'operation-tag',
+          },
+          {
+            id: 'd0460398c5f2b',
+            name: 'model-tag',
+          },
+        ],
+      },
+      tags: ['operation-tag', 'model-tag'],
+      children: [
+        {
+          type: 'http_operation',
+          uri: '/paths/todos/get',
+          data: {
+            id: 'c35bc6b301d97',
+            method: 'get',
+            path: '/todos',
+            summary: 'Get Todos',
+            responses: [],
+            servers: [],
+            request: {
+              body: {
+                id: '704ac0beb3748',
+                contents: [],
+              },
+              headers: [],
+              query: [],
+              cookie: [],
+              path: [],
+            },
+            tags: [
+              {
+                id: 'd3404a8f3b495',
+                name: 'operation-tag',
+              },
+            ],
+            security: [],
+            extensions: {},
+          },
+          name: 'Get Todos',
+          tags: ['operation-tag'],
+        },
+        {
+          type: 'model',
+          uri: '/schemas/Todo',
+          data: {
+            type: 'object',
+            properties: {
+              id: {
+                type: 'integer',
+              },
+            },
+            title: 'Todo',
+            'x-tags': ['model-tag'],
+          },
+          name: 'Todo',
+          tags: ['model-tag'],
+        },
+      ],
+    });
+  });
+
+  it('should return oas nodes for oas2 document', () => {
+    expect(transformOasToServiceNode(oas2Document)).toStrictEqual({
+      type: 'http_service',
+      uri: '/',
+      name: 'oas2',
+      data: {
+        id: 'abc',
+        name: 'oas2',
+        tags: [
+          {
+            id: 'd3404a8f3b495',
+            name: 'operation-tag',
+          },
+          {
+            id: 'd0460398c5f2b',
+            name: 'model-tag',
+          },
+        ],
+        version: '1.0.0',
+      },
+      tags: ['operation-tag', 'model-tag'],
+      children: [
+        {
+          type: 'http_operation',
+          uri: '/paths/todos/get',
+          data: {
+            id: 'c35bc6b301d97',
+            method: 'get',
+            path: '/todos',
+            summary: 'Get Todos',
+            responses: [],
+            servers: [],
+            request: {
+              cookie: [],
+              headers: [],
+              path: [],
+              query: [],
+            },
+            tags: [
+              {
+                id: 'd3404a8f3b495',
+                name: 'operation-tag',
+              },
+            ],
+            security: [],
+            extensions: {},
+          },
+          name: 'Get Todos',
+          tags: ['operation-tag'],
+        },
+        {
+          type: 'model',
+          uri: '/schemas/Todo',
+          data: {
+            type: 'object',
+            properties: {
+              id: {
+                type: 'integer',
+              },
+            },
+            title: 'Todo',
+            'x-tags': ['model-tag'],
+          },
+          name: 'Todo',
+          tags: ['model-tag'],
+        },
+      ],
+    });
+  });
+
+  it('should fallback to operationId', () => {
+    expect(
+      transformOasToServiceNode({
+        'x-stoplight': { id: 'def' },
+        openapi: '3.0.0',
+        info: {
+          title: 'oas3',
+          version: '1.0.0',
+        },
+        paths: {
+          '/todos': {
+            get: {
+              operationId: 'get-todos',
+            },
+          },
+        },
+      }),
+    ).toEqual({
+      type: 'http_service',
+      uri: '/',
+      name: 'oas3',
+      tags: [],
+      data: {
+        id: 'def',
+        version: '1.0.0',
+        name: 'oas3',
+      },
+      children: [
+        {
+          type: 'http_operation',
+          uri: '/operations/get-todos',
+          data: {
+            id: 'a61f53c324669',
+            iid: 'get-todos',
+            method: 'get',
+            path: '/todos',
+            responses: [],
+            servers: [],
+            request: {
+              body: {
+                id: '67f97b0ec0ef8',
+                contents: [],
+              },
+              headers: [],
+              query: [],
+              cookie: [],
+              path: [],
+            },
+            tags: [],
+            security: [],
+            extensions: {},
+          },
+          tags: [],
+          name: 'get-todos',
+        },
+      ],
+    });
+  });
+});

package/src/utils/oas/index.ts

@@ -0,0 +1,150 @@
+import { slugify } from '@stoplight/elements-core';
+import type {
+  Oas2HttpOperationTransformer,
+  Oas2HttpServiceTransformer,
+  Oas3HttpOperationTransformer,
+  Oas3HttpServiceTransformer,
+} from '@stoplight/http-spec/oas';
+import { transformOas2Operation, transformOas2Service } from '@stoplight/http-spec/oas2';
+import { transformOas3Operation, transformOas3Service } from '@stoplight/http-spec/oas3';
+import { encodePointerFragment, pointerToPath } from '@stoplight/json';
+import { NodeType } from '@stoplight/types';
+import { get, isObject, last } from 'lodash';
+import { OpenAPIObject } from 'openapi3-ts';
+import { Spec } from 'swagger-schema-official';
+
+import { oas2SourceMap } from './oas2';
+import { oas3SourceMap } from './oas3';
+import { ISourceNodeMap, NodeTypes, ServiceChildNode, ServiceNode } from './types';
+
+const isOas2 = (parsed: unknown): parsed is Spec =>
+  isObject(parsed) &&
+  'swagger' in parsed &&
+  Number.parseInt(String((parsed as Partial<{ swagger: unknown }>).swagger)) === 2;
+
+const isOas3 = (parsed: unknown): parsed is OpenAPIObject =>
+  isObject(parsed) &&
+  'openapi' in parsed &&
+  Number.parseFloat(String((parsed as Partial<{ openapi: unknown }>).openapi)) >= 3;
+
+const isOas31 = (parsed: unknown): parsed is OpenAPIObject =>
+  isObject(parsed) &&
+  'openapi' in parsed &&
+  Number.parseFloat(String((parsed as Partial<{ openapi: unknown }>).openapi)) === 3.1;
+
+const OAS_MODEL_REGEXP = /((definitions|components)\/?(schemas)?)\//;
+
+export function transformOasToServiceNode(apiDescriptionDocument: unknown) {
+  if (isOas31(apiDescriptionDocument)) {
+    return computeServiceNode(
+      { ...apiDescriptionDocument, jsonSchemaDialect: 'http://json-schema.org/draft-07/schema#' },
+      oas3SourceMap,
+      transformOas3Service,
+      transformOas3Operation,
+    );
+  }
+  if (isOas3(apiDescriptionDocument)) {
+    return computeServiceNode(apiDescriptionDocument, oas3SourceMap, transformOas3Service, transformOas3Operation);
+  } else if (isOas2(apiDescriptionDocument)) {
+    return computeServiceNode(apiDescriptionDocument, oas2SourceMap, transformOas2Service, transformOas2Operation);
+  }
+
+  return null;
+}
+
+function computeServiceNode(
+  document: Spec | OpenAPIObject,
+  map: ISourceNodeMap[],
+  transformService: Oas2HttpServiceTransformer | Oas3HttpServiceTransformer,
+  transformOperation: Oas2HttpOperationTransformer | Oas3HttpOperationTransformer,
+) {
+  const serviceDocument = transformService({ document });
+  const serviceNode: ServiceNode = {
+    type: NodeType.HttpService,
+    uri: '/',
+    name: serviceDocument.name,
+    data: serviceDocument,
+    tags: serviceDocument.tags?.map(tag => tag.name) || [],
+    children: computeChildNodes(document, document, map, transformOperation),
+  };
+
+  return serviceNode;
+}
+
+function computeChildNodes(
+  document: Spec | OpenAPIObject,
+  data: unknown,
+  map: ISourceNodeMap[],
+  transformer: Oas2HttpOperationTransformer | Oas3HttpOperationTransformer,
+  parentUri: string = '',
+) {
+  const nodes: ServiceChildNode[] = [];
+
+  if (!isObject(data)) return nodes;
+
+  for (const key of Object.keys(data)) {
+    const sanitizedKey = encodePointerFragment(key);
+    const match = findMapMatch(sanitizedKey, map);
+    if (match) {
+      const uri = `${parentUri}/${sanitizedKey}`;
+
+      const jsonPath = pointerToPath(`#${uri}`);
+      if (match.type === NodeTypes.Operation && jsonPath.length === 3) {
+        const path = String(jsonPath[1]);
+        const method = String(jsonPath[2]);
+        const operationDocument = transformer({ document, path, method });
+        let parsedUri;
+        const encodedPath = String(encodePointerFragment(path));
+
+        if (operationDocument.iid) {
+          parsedUri = `/operations/${operationDocument.iid}`;
+        } else {
+          parsedUri = uri.replace(encodedPath, slugify(path));
+        }
+
+        nodes.push({
+          type: NodeType.HttpOperation,
+          uri: parsedUri,
+          data: operationDocument,
+          name: operationDocument.summary || operationDocument.iid || operationDocument.path,
+          tags: operationDocument.tags?.map(tag => tag.name) || [],
+        });
+      } else if (match.type === NodeTypes.Model) {
+        const schemaDocument = get(document, jsonPath);
+        const parsedUri = uri.replace(OAS_MODEL_REGEXP, 'schemas/');
+
+        nodes.push({
+          type: NodeType.Model,
+          uri: parsedUri,
+          data: schemaDocument,
+          name: schemaDocument.title || last(uri.split('/')) || '',
+          tags: schemaDocument['x-tags'] || [],
+        });
+      }
+
+      if (match.children) {
+        nodes.push(...computeChildNodes(document, data[key], match.children, transformer, uri));
+      }
+    }
+  }
+
+  return nodes;
+}
+
+function findMapMatch(key: string | number, map: ISourceNodeMap[]): ISourceNodeMap | void {
+  if (typeof key === 'number') return;
+  for (const entry of map) {
+    if (!!entry.match?.match(key) || (entry.notMatch !== void 0 && !entry.notMatch.match(key))) {
+      return entry;
+    }
+  }
+}
+
+export function isJson(value: string) {
+  try {
+    JSON.parse(value);
+  } catch (e) {
+    return false;
+  }
+  return true;
+}

package/src/utils/oas/oas2.ts

@@ -0,0 +1,31 @@
+import { ISourceNodeMap, NodeTypes } from './types';
+
+export const oas2SourceMap: ISourceNodeMap[] = [
+  {
+    match: 'paths',
+    type: NodeTypes.Paths,
+    children: [
+      {
+        notMatch: '^x-',
+        type: NodeTypes.Path,
+        children: [
+          {
+            match: 'get|post|put|delete|options|head|patch|trace',
+            type: NodeTypes.Operation,
+          },
+        ],
+      },
+    ],
+  },
+
+  {
+    match: 'definitions',
+    type: NodeTypes.Models,
+    children: [
+      {
+        notMatch: '^x-',
+        type: NodeTypes.Model,
+      },
+    ],
+  },
+];

package/src/utils/oas/oas3.ts

@@ -0,0 +1,37 @@
+import { ISourceNodeMap, NodeTypes } from './types';
+
+export const oas3SourceMap: ISourceNodeMap[] = [
+  {
+    match: 'paths',
+    type: NodeTypes.Paths,
+    children: [
+      {
+        notMatch: '^x-',
+        type: NodeTypes.Path,
+        children: [
+          {
+            match: 'get|post|put|delete|options|head|patch|trace',
+            type: NodeTypes.Operation,
+          },
+        ],
+      },
+    ],
+  },
+
+  {
+    match: 'components',
+    type: NodeTypes.Components,
+    children: [
+      {
+        match: 'schemas',
+        type: NodeTypes.Models,
+        children: [
+          {
+            notMatch: '^x-',
+            type: NodeTypes.Model,
+          },
+        ],
+      },
+    ],
+  },
+];

package/src/utils/oas/types.ts

@@ -0,0 +1,31 @@
+import { IHttpOperation, IHttpService, NodeType } from '@stoplight/types';
+import { JSONSchema7 } from 'json-schema';
+
+export enum NodeTypes {
+  Paths = 'paths',
+  Path = 'path',
+  Operation = 'operation',
+  Components = 'components',
+  Models = 'models',
+  Model = 'model',
+}
+
+export interface ISourceNodeMap {
+  type: string;
+  match?: string;
+  notMatch?: string;
+  children?: ISourceNodeMap[];
+}
+
+type Node<T, D> = {
+  type: T;
+  uri: string;
+  name: string;
+  data: D;
+  tags: string[];
+};
+
+export type ServiceNode = Node<NodeType.HttpService, IHttpService> & { children: ServiceChildNode[] };
+export type ServiceChildNode = OperationNode | SchemaNode;
+export type OperationNode = Node<NodeType.HttpOperation, IHttpOperation>;
+export type SchemaNode = Node<NodeType.Model, JSONSchema7>;

package/src/web-components/__stories__/Api.stories.tsx

@@ -0,0 +1,63 @@
+import '../index';
+
+import { parse } from '@stoplight/yaml';
+import React from 'react';
+
+import { zoomApiYaml } from '../../__fixtures__/api-descriptions/zoomApiYaml';
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      'elements-api': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    }
+  }
+}
+
+const Template = (props: any) => <elements-api {...props} />;
+
+export default {
+  title: 'web-components/API',
+  argTypes: {
+    apiDescriptionUrl: {
+      control: 'text',
+    },
+    apiDescriptionDocument: { control: 'text' },
+    layout: {
+      control: { type: 'inline-radio', options: ['sidebar', 'stacked'] },
+      defaultValue: 'sidebar',
+    },
+  },
+};
+
+export const TodosAPI = Template.bind({});
+TodosAPI.args = {
+  apiDescriptionUrl: 'https://raw.githubusercontent.com/stoplightio/elements/main/demo/src/reference/todo.v1.yaml',
+};
+
+export const TodosAPIWithFixHeight = (props: any) => (
+  <div style={{ height: 400 }}>
+    <elements-api {...props} />
+  </div>
+);
+TodosAPIWithFixHeight.args = {
+  apiDescriptionUrl: 'https://raw.githubusercontent.com/stoplightio/elements/main/demo/src/reference/todo.v1.yaml',
+};
+TodosAPIWithFixHeight.storyName = 'TodosAPI with fixed height';
+
+export const ZoomApi = Template.bind({});
+ZoomApi.args = {
+  apiDescriptionUrl: 'https://raw.githubusercontent.com/stoplightio/Public-APIs/master/reference/zoom/openapi.yaml',
+};
+ZoomApi.storyName = 'Complex API with inline `$ref`s';
+
+export const APIWithYamlProvidedDirectly = Template.bind({});
+APIWithYamlProvidedDirectly.args = {
+  apiDescriptionDocument: zoomApiYaml,
+};
+APIWithYamlProvidedDirectly.storyName = 'API With Yaml Provided Directly';
+
+export const APIWithJSONProvidedDirectly = Template.bind({});
+APIWithJSONProvidedDirectly.args = {
+  apiDescriptionDocument: JSON.stringify(parse(zoomApiYaml), null, '  '),
+};
+APIWithJSONProvidedDirectly.storyName = 'API With JSON Provided Directly';

package/src/web-components/components.ts

@@ -0,0 +1,20 @@
+import { createElementClass } from '@stoplight/elements-core';
+
+import { API } from '../index';
+
+export const ApiElement = createElementClass(API, {
+  apiDescriptionUrl: { type: 'string', defaultValue: '' },
+  apiDescriptionDocument: { type: 'string', defaultValue: '' },
+  basePath: { type: 'string' },
+  staticRouterPath: { type: 'string' },
+  router: { type: 'string' },
+  layout: { type: 'string' },
+  hideTryIt: { type: 'boolean' },
+  hideSchemas: { type: 'boolean' },
+  hideInternal: { type: 'boolean' },
+  hideExport: { type: 'boolean' },
+  logo: { type: 'string' },
+  tryItCredentialsPolicy: { type: 'string' },
+  tryItCorsProxy: { type: 'string' },
+  tryItOutDefaultServer: { type: 'string' },
+});

package/src/web-components/index.ts

@@ -0,0 +1,3 @@
+import { ApiElement } from './components';
+
+window.customElements.define('elements-api', ApiElement);

package/tsconfig.build.json

@@ -0,0 +1,18 @@
+{
+  "extends": "./tsconfig.json",
+  "include": [
+    "src"
+  ],
+  "exclude": [
+    "**/__*__/**"
+  ],
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "dist",
+    "moduleResolution": "node",
+    "paths": {
+      "@stoplight/elements-core": ["../elements-core/dist"],
+      "@stoplight/elements-core/*": ["../elements-core/dist/*"],
+    }
+  }
+}

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.json",
+
+  "include": ["src"],
+
+  "exclude": ["**/__fixtures__/**", "**/__stories__/**", "**/__tests__/**"]
+}

package/web-components.config.js

@@ -0,0 +1 @@
+module.exports = require('../../web-components.webpack.config');