@stoplight/elements-core 9.0.25-beta-0.1 → 9.0.25-beta-0.2

package/src/utils/securitySchemes.ts

@@ -0,0 +1,117 @@
+import {
+  HttpSecurityScheme,
+  IApiKeySecurityScheme,
+  IBasicSecurityScheme,
+  IBearerSecurityScheme,
+  IOauth2Flow,
+  IOauth2SecurityScheme,
+  IOauthFlowObjects,
+} from '@stoplight/types';
+import { entries, keys } from 'lodash';
+
+import {
+  isOauth2AuthorizationCodeFlow,
+  isOauth2ClientCredentialsOrPasswordFlow,
+  isOAuth2ImplicitFlow,
+} from './oas/security';
+
+const oauthFlowNames: Record<keyof IOauthFlowObjects, string> = {
+  implicit: 'Implicit',
+  authorizationCode: 'Authorization Code',
+  clientCredentials: 'Client Credentials',
+  password: 'Password',
+};
+
+export function getDefaultDescription(scheme: HttpSecurityScheme) {
+  switch (scheme.type) {
+    case 'apiKey':
+      return getApiKeyDescription(scheme);
+    case 'http':
+      switch (scheme.scheme) {
+        case 'basic':
+          return getBasicAuthDescription(scheme);
+        case 'bearer':
+          return getBearerAuthDescription(scheme);
+        case 'digest':
+          return getDigestAuthDescription(scheme);
+      }
+    case 'oauth2':
+      return getOAuthDescription(scheme);
+  }
+
+  return '';
+}
+
+export function getOptionalAuthDescription() {
+  return `Providing Auth is optional; requests may be made without an included Authorization header.`;
+}
+
+function getApiKeyDescription(scheme: IApiKeySecurityScheme) {
+  const { in: inProperty, name } = scheme;
+  return `An API key is a token that you provide when making API calls. Include the token in a ${inProperty} parameter called \`${name}\`.
+
+  Example: ${inProperty === 'query' ? `\`?${name}=123\`` : `\`${name}: 123\``}${getSecuritySchemeRoles(scheme)}`;
+}
+
+function getBasicAuthDescription(schema: IBasicSecurityScheme) {
+  return `Basic authentication is a simple authentication scheme built into the HTTP protocol.
+  To use it, send your HTTP requests with an Authorization header that contains the word Basic
+  followed by a space and a base64-encoded string \`username:password\`.
+
+  Example: \`Authorization: Basic ZGVtbzpwQDU1dzByZA==\`${getSecuritySchemeRoles(schema)}`;
+}
+
+function getBearerAuthDescription(schema: IBearerSecurityScheme) {
+  return `Provide your bearer token in the Authorization header when making requests to protected resources.
+
+  Example: \`Authorization: Bearer 123\`${getSecuritySchemeRoles(schema)}`;
+}
+
+function getDigestAuthDescription(schema: IBasicSecurityScheme) {
+  return `Provide your encrypted digest scheme data in the Authorization header when making requests to protected resources.
+
+  Example: \`Authorization: Digest username=guest, realm="test", nonce="2", uri="/uri", response="123"\`${getSecuritySchemeRoles(
+    schema,
+  )}`;
+}
+
+function getOAuthDescription(scheme: IOauth2SecurityScheme) {
+  const flows = keys(scheme.flows);
+  return flows
+    .map(flow =>
+      getOAuthFlowDescription(
+        oauthFlowNames[flow as keyof typeof oauthFlowNames],
+        scheme.flows[flow as keyof IOauthFlowObjects]!,
+      ),
+    )
+    .join('\n\n');
+}
+
+function getOAuthFlowDescription(title: string, flow: IOauth2Flow) {
+  let description = `**${title} OAuth Flow**`;
+
+  description +=
+    isOAuth2ImplicitFlow(flow) || isOauth2AuthorizationCodeFlow(flow)
+      ? `\n\nAuthorize URL: ${flow.authorizationUrl}`
+      : '';
+
+  description +=
+    isOauth2AuthorizationCodeFlow(flow) || isOauth2ClientCredentialsOrPasswordFlow(flow)
+      ? `\n\nToken URL: ${flow.tokenUrl}`
+      : '';
+
+  description += flow.refreshUrl ? `\n\nRefresh URL: ${flow.refreshUrl}` : '';
+
+  const scopes = entries(flow.scopes);
+  if (scopes.length) {
+    description += `\n\nScopes:
+${scopes.map(([key, value]) => `- \`${key}\` - ${value}`).join('\n')}`;
+  }
+
+  return description;
+}
+
+function getSecuritySchemeRoles(scheme: HttpSecurityScheme) {
+  const scopes = scheme.extensions?.['x-scopes'];
+  return Array.isArray(scopes) ? `\n\nRoles: ${scopes.map(scope => `\`${scope}\``).join(', ')}` : '';
+}

package/src/utils/string.ts

@@ -0,0 +1,15 @@
+import { curry } from 'lodash';
+
+export const caseInsensitivelyEquals = curry((a: string, b: string) => a.toUpperCase() === b.toUpperCase());
+
+export function slugify(name: string) {
+  return name
+    .replace(/\/|{|}|\s/g, '-')
+    .replace(/-{2,}/, '-')
+    .replace(/^-/, '')
+    .replace(/-$/, '');
+}
+
+export const resolveRelativeLink = (slug?: string) => {
+  return slug ? slug.replace(/^\//, '') : '.';
+};

package/src/utils/tests/chooseOption.ts

@@ -0,0 +1,7 @@
+import { screen } from '@testing-library/dom';
+import userEvent, { TargetElement } from '@testing-library/user-event';
+
+export function chooseOption(select: TargetElement, option: string) {
+  userEvent.click(select);
+  userEvent.selectOptions(screen.getByRole('listbox'), screen.getByRole('option', { name: option }));
+}

package/src/web-components/createElementClass.ts

@@ -0,0 +1,154 @@
+import { safeParse, safeStringify } from '@stoplight/json';
+import { Optional } from '@stoplight/types';
+import { isEqual, mapValues } from 'lodash';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+type TypeNameMap<T> = T extends string
+  ? 'string'
+  : T extends number
+  ? 'number'
+  : T extends boolean
+  ? 'boolean'
+  : T extends undefined
+  ? 'undefined'
+  : T extends Function
+  ? 'function'
+  : 'object';
+
+type PropDescriptor<T> = {
+  type: TypeNameMap<T>;
+} & (T extends undefined ? { defaultValue?: undefined } : { defaultValue: T });
+
+type PropDescriptorMap<P> = {
+  [K in keyof Complete<P>]: PropDescriptor<P[K]>;
+};
+
+type Complete<T> = {
+  [P in keyof Required<T>]: Pick<T, P> extends Required<Pick<T, P>> ? T[P] : T[P] | undefined;
+};
+
+export const createElementClass = <P extends Record<string, any>>(
+  Component: React.ComponentType<P>,
+  propDescriptors: PropDescriptorMap<P>,
+): new () => HTMLElement => {
+  return class extends HTMLElement {
+    private _mountPoint: HTMLElement | undefined;
+    private _props: Partial<P> = {};
+
+    static get observedAttributes() {
+      return Object.keys(propDescriptors);
+    }
+
+    constructor() {
+      super();
+
+      // define getters and setters for all properties
+      Object.defineProperties(
+        this,
+        mapValues(propDescriptors, (_, key) => ({
+          get: () => {
+            return this._props[key as keyof P];
+          },
+          set: (newValue: any) => {
+            if (this._props[key as keyof P] === newValue) {
+              return;
+            }
+            this._props[key as keyof P] = newValue;
+            this._renderComponent();
+            this._safeWriteAttribute(key as keyof P & string, newValue);
+          },
+          enumerable: true,
+        })),
+      );
+    }
+
+    attributeChangedCallback(name: string) {
+      if (propDescriptors[name as keyof P]) {
+        const newPropValue = this._safeReadAttribute(name as keyof P & string);
+        if (!isEqual(this._props[name as keyof P], newPropValue)) {
+          this._props[name as keyof P] = newPropValue;
+          this._renderComponent();
+        }
+      }
+    }
+
+    connectedCallback() {
+      this._mountPoint = document.createElement('div');
+      this._mountPoint.style.height = '100%';
+      this.appendChild(this._mountPoint);
+
+      for (const key in propDescriptors) {
+        if (propDescriptors.hasOwnProperty(key)) {
+          this._props[key] = this._safeReadAttribute(key);
+        }
+      }
+
+      this._renderComponent();
+    }
+
+    disconnectedCallback() {
+      if (this._mountPoint) {
+        // Trigger unmount lifecycle without using unmountComponentAtNode which is deprecated
+        ReactDOM.render(null as any, this._mountPoint);
+        this.removeChild(this._mountPoint);
+        this._mountPoint = undefined;
+      }
+    }
+
+    private _safeReadAttribute<A extends keyof P & string>(attrName: A): Optional<P[A]> {
+      if (!this.hasAttribute(attrName) || !propDescriptors[attrName]) {
+        return undefined;
+      }
+      const attrValue = this.getAttribute(attrName);
+      const type = propDescriptors[attrName].type;
+      if (type === 'string') {
+        return (attrValue ?? undefined) as Optional<P[A]>;
+      }
+      if (type === 'number') {
+        return (attrValue ? Number(attrValue) : undefined) as Optional<P[A]>;
+      }
+      if (type === 'boolean') {
+        return (attrValue ? Boolean(attrValue) : undefined) as Optional<P[A]>;
+      }
+      if (type === 'object') {
+        return safeParse(attrValue ?? '') as Optional<P[A]>;
+      }
+
+      return undefined;
+    }
+
+    private _safeWriteAttribute<A extends keyof P & string>(attrName: A, newValue: P[A]) {
+      if (!propDescriptors[attrName]) {
+        return;
+      }
+
+      if (!newValue) {
+        this.removeAttribute(attrName);
+        return;
+      }
+
+      const type = propDescriptors[attrName].type;
+      this.setAttribute(attrName, stringifyValue(newValue));
+
+      function stringifyValue(val: P[A]): string {
+        if (type === 'string' || type === 'number' || type === 'boolean') {
+          return String(val);
+        }
+
+        if (type === 'object') {
+          return safeStringify(val) || '';
+        }
+
+        return '';
+      }
+    }
+
+    private _renderComponent() {
+      if (this._mountPoint) {
+        const props = mapValues(propDescriptors, (descriptor, key) => this._props[key] ?? descriptor.defaultValue);
+        ReactDOM.render(React.createElement(Component, props), this._mountPoint);
+      }
+    }
+  };
+};

package/tsconfig.build.json

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

package/tsconfig.json

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