@stoplight/elements 9.0.11 → 9.0.12-beta-0.2

package/src/utils/oas/types.ts

@@ -0,0 +1,34 @@
+import { IHttpOperation, IHttpService, IHttpWebhookOperation, NodeType } from '@stoplight/types';
+import { JSONSchema7 } from 'json-schema';
+
+export enum NodeTypes {
+  Paths = 'paths',
+  Path = 'path',
+  Operation = 'operation',
+  Webhooks = 'webhooks',
+  Webhook = 'webhook',
+  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 | WebhookNode | SchemaNode;
+export type OperationNode = Node<NodeType.HttpOperation, IHttpOperation>;
+export type WebhookNode = Node<NodeType.HttpWebhook, IHttpWebhookOperation>;
+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,26 @@
+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' },
+  hideTryItPanel: { type: 'boolean' },
+  hideTryIt: { type: 'boolean' },
+  hideSamples: { type: 'boolean' },
+  hideServerInfo: { type: 'boolean' },
+  hideSecurityInfo: { type: 'boolean' },
+  hideSchemas: { type: 'boolean' },
+  hideInternal: { type: 'boolean' },
+  hideExport: { type: 'boolean' },
+  logo: { type: 'string' },
+  tryItCredentialsPolicy: { type: 'string' },
+  tryItCorsProxy: { type: 'string' },
+  maxRefDepth: { type: 'number' },
+  renderExtensionAddon: { type: 'function' },
+  outerRouter: { type: 'boolean' },
+});

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');