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

package/jest.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  ...require('../../jest.config'),
+  reporters: [
+    'default',
+    [
+      'jest-junit',
+      { suiteName: 'elements-dev-portal', outputFile: '<rootDir>/../../test-results/elements-dev-portal/results.xml' },
+    ],
+  ],
+};

package/package.json

@@ -1,34 +1,72 @@
 {
   "name": "@stoplight/elements-dev-portal",
-  "version": "3.0.11",
+  "version": "3.0.12-beta-0.1",
   "description": "UI components for composing beautiful developer documentation.",
   "keywords": [],
-  "main": "./index.js",
   "sideEffects": [
     "web-components.min.js",
     "src/web-components/**",
     "**/*.css"
   ],
-  "files": [
-    "**/*"
-  ],
+  "homepage": "https://github.com/stoplightio/elements",
+  "bugs": "https://github.com/stoplightio/elements/issues",
   "author": "Stoplight <support@stoplight.io>",
   "repository": {
     "type": "git",
     "url": "https://github.com/stoplightio/elements"
   },
   "license": "Apache-2.0",
+  "type": "commonjs",
+  "main": "./dist/index.js",
+  "module": "./dist/index.esm.js",
+  "exports": {
+    "./styles.min.css": "./styles.min.css",
+    "./web-components.min.js": "./web-components.min.js",
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs"
+    }
+  },
+  "files": [
+    "**/*"
+  ],
   "engines": {
     "node": ">=16"
   },
+  "scripts": {
+    "build": "yarn version.set && yarn build.react && yarn build.webcomponents",
+    "postbuild": "yarn build.styles",
+    "build.react": "sl-scripts bundle",
+    "build.webcomponents": "node --max-old-space-size=4096 ./../../node_modules/webpack/bin/webpack.js -c ./web-components.config.js",
+    "build.docs": "storybook build -c .storybook -o dist-storybook",
+    "build.styles": "postcss src/styles.css -o dist/styles.min.css",
+    "version.set": "replace \"appVersion = '.*'\" \"appVersion = '$npm_package_version'\" src/version.ts --silent",
+    "commit": "git-cz",
+    "release": "sl-scripts release",
+    "release.docs": "sl-scripts release:docs",
+    "release.dryRun": "sl-scripts release --dry-run --debug",
+    "storybook": "yarn version.set && storybook dev -p 9001",
+    "test": "jest",
+    "test.prod": "yarn test --coverage --maxWorkers=2",
+    "test.update": "yarn test --updateSnapshot",
+    "test.watch": "yarn test --watch",
+    "test.packaging": "node --input-type=commonjs -e \"require('./dist/index.js')\" && node --input-type=module -e \"import './dist/index.mjs'\"",
+    "type-check": "tsc --noEmit"
+  },
   "peerDependencies": {
     "react": ">=16.8",
     "react-dom": ">=16.8"
   },
+  "rollup": {
+    "bundleDeps": [
+      "@fortawesome/free-solid-svg-icons",
+      "use-debounce"
+    ]
+  },
   "dependencies": {
-    "@stoplight/elements-core": "~9.0.11",
     "@stoplight/markdown-viewer": "^5.7.1",
     "@stoplight/mosaic": "^1.53.5",
+    "@stoplight/elements-core": "~9.0.12-beta-0.1",
     "@stoplight/path": "^1.3.2",
     "@stoplight/types": "^14.0.0",
     "classnames": "^2.2.6",
@@ -37,15 +75,31 @@
     "react-router-dom": "^6.28.0",
     "use-debounce": "^6.0.1"
   },
-  "type": "commonjs",
-  "exports": {
-    "./styles.min.css": "./styles.min.css",
-    "./web-components.min.js": "./web-components.min.js",
-    ".": {
-      "require": "./index.js",
-      "import": "./index.mjs"
-    }
+  "devDependencies": {
+    "@fortawesome/free-solid-svg-icons": "^6.1.1",
+    "@stoplight/scripts": "10.0.0",
+    "@testing-library/dom": "^7.26.5",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^11.1.1",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/user-event": "^12.2.0",
+    "@types/lodash": "4.17.7",
+    "@types/react": "16.9.56",
+    "@types/react-dom": "16.9.12",
+    "@types/react-router-dom": "^5.3.3",
+    "react": "16.14.0",
+    "react-dom": "16.14.0",
+    "react-test-renderer": "^16.8.0",
+    "replace": "^1.2.2",
+    "resolve-url-loader": "^5.0.0",
+    "storybook": "next",
+    "style-loader": "^3.3.3",
+    "ts-loader": "^9.2.8"
+  },
+  "publishConfig": {
+    "directory": "dist"
   },
-  "typings": "index.d.ts",
-  "module": "./index.esm.js"
-}
+  "release": {
+    "extends": "@stoplight/scripts/release"
+  }
+}

package/src/__fixtures__/branches.json

@@ -0,0 +1,28 @@
+{
+  "items": [
+    {
+      "id": "YnI6NDc4MDUy",
+      "name": null,
+      "slug": "master",
+      "is_default": true,
+      "is_published": true,
+      "project_id": "cHJqOjM1ODEw"
+    },
+    {
+      "id": "YnI6OTYwNDM4",
+      "name": null,
+      "slug": "v2",
+      "is_default": false,
+      "is_published": true,
+      "project_id": "cHJqOjM1ODEw"
+    },
+    {
+      "id": "YnI6OTYwNDM5",
+      "name": null,
+      "slug": "feat/toc-file",
+      "is_default": false,
+      "is_published": true,
+      "project_id": "cHJqOjM1ODEw"
+    }
+  ]
+}

package/src/__fixtures__/node-content.json

@@ -0,0 +1,257 @@
+{
+  "id": "b3A6Mzg5NDM2",
+  "branch_node_id": 21,
+  "type": "http_operation",
+  "uri": "/reference/todos/todo.v1.yaml/paths/~1todos/post",
+  "slug": "b3A6Mzg5NDM2-create-todo",
+  "title": "Create Todo",
+  "branch": "master",
+  "summary": "This creates a Todo object\n\n*Markdown is supported in descriptions. Add information here for users to get accustomed to endpoints*",
+  "project_id": "cHJqOjExOTY",
+  "branch_id": "YnI6MTAyODA",
+  "data": {
+    "id": "?http-operation-id?",
+    "iid": "post-todos",
+    "description": "This creates a Todo object\n\n*Markdown is supported in descriptions. Add information here for users to get accustomed to endpoints*",
+    "method": "post",
+    "path": "/todos",
+    "summary": "Create Todo",
+    "responses": [
+      {
+        "code": "201",
+        "description": "New Todo Created",
+        "headers": [],
+        "contents": [
+          {
+            "mediaType": "multipart/form-data",
+            "schema": {
+              "description": "I'm a model's description.",
+              "type": "object",
+              "x-examples": {},
+              "title": "Todo",
+              "properties": {
+                "id": {
+                  "type": "number",
+                  "minimum": 0,
+                  "maximum": 9999,
+                  "description": "ID of the task",
+                  "readOnly": true
+                },
+                "name": { "type": "string", "minLength": 1, "maxLength": 100, "description": "Name of the task" },
+                "completed": {
+                  "type": "boolean",
+                  "default": false,
+                  "description": "Boolean indicating if the task has been completed or not"
+                },
+                "completed_at": {
+                  "type": "string",
+                  "format": "date-time",
+                  "description": "Time when the task was completed",
+                  "readOnly": true
+                },
+                "created_at": {
+                  "type": "string",
+                  "format": "date-time",
+                  "description": "Time when the task was created",
+                  "readOnly": true
+                },
+                "updated_at": {
+                  "type": "string",
+                  "format": "date-time",
+                  "description": "Time when the task was updated",
+                  "readOnly": true
+                }
+              },
+              "required": ["id", "name", "completed_at", "created_at", "updated_at"],
+              "$schema": "http://json-schema.org/draft-07/schema#"
+            },
+            "examples": [
+              {
+                "key": "Example Todo",
+                "value": {
+                  "id": 0,
+                  "name": "string",
+                  "completed": true,
+                  "completed_at": "2019-08-24T14:15:22Z",
+                  "created_at": "2019-08-24T14:15:22Z",
+                  "updated_at": "2019-08-24T14:15:22Z"
+                }
+              }
+            ],
+            "encodings": []
+          }
+        ]
+      },
+      {
+        "code": "403",
+        "description": "Action not allowed",
+        "headers": [],
+        "contents": [
+          {
+            "mediaType": "application/json",
+            "schema": {
+              "type": "object",
+              "properties": { "message": { "type": "string" } },
+              "required": ["message"],
+              "$schema": "http://json-schema.org/draft-07/schema#"
+            },
+            "examples": [],
+            "encodings": []
+          }
+        ]
+      },
+      {
+        "code": "404",
+        "description": "Resource not found",
+        "headers": [],
+        "contents": [
+          {
+            "mediaType": "application/json",
+            "schema": {
+              "title": "Error",
+              "type": "object",
+              "description": "A standard error object.",
+              "x-tags": ["Common"],
+              "properties": { "status": { "type": "string", "description": "A code." }, "error": { "type": "string" } },
+              "required": ["status", "error"],
+              "$schema": "http://json-schema.org/draft-07/schema#"
+            },
+            "examples": [],
+            "encodings": []
+          }
+        ]
+      }
+    ],
+    "servers": [
+      { "description": "Production", "url": "https://todos.stoplight.io" },
+      { "description": "Sandbox", "url": "https://todos-sandbox.stoplight.io" }
+    ],
+    "request": {
+      "body": {
+        "description": "Name of the Todo",
+        "contents": [
+          {
+            "mediaType": "application/json",
+            "schema": {
+              "description": "I'm a model's description.",
+              "type": "object",
+              "x-examples": {},
+              "title": "Todo",
+              "properties": {
+                "id": {
+                  "type": "number",
+                  "minimum": 0,
+                  "maximum": 9999,
+                  "description": "ID of the task",
+                  "readOnly": true
+                },
+                "name": { "type": "string", "minLength": 1, "maxLength": 100, "description": "Name of the task" },
+                "completed": {
+                  "type": "boolean",
+                  "default": false,
+                  "description": "Boolean indicating if the task has been completed or not"
+                },
+                "completed_at": {
+                  "type": "string",
+                  "format": "date-time",
+                  "description": "Time when the task was completed",
+                  "readOnly": true
+                },
+                "created_at": {
+                  "type": "string",
+                  "format": "date-time",
+                  "description": "Time when the task was created",
+                  "readOnly": true
+                },
+                "updated_at": {
+                  "type": "string",
+                  "format": "date-time",
+                  "description": "Time when the task was updated",
+                  "readOnly": true
+                }
+              },
+              "required": ["id", "name", "completed_at", "created_at", "updated_at"],
+              "$schema": "http://json-schema.org/draft-07/schema#"
+            },
+            "examples": [],
+            "encodings": []
+          }
+        ]
+      },
+      "headers": [
+        {
+          "name": "Content-Type",
+          "required": true,
+          "description": "application/json",
+          "schema": {
+            "type": "string",
+            "default": "application/json",
+            "$schema": "http://json-schema.org/draft-07/schema#"
+          },
+          "examples": []
+        }
+      ],
+      "query": [],
+      "cookie": [],
+      "path": []
+    },
+    "tags": [],
+    "security": [
+      [
+        {
+          "key": "API Key",
+          "description": "Just use `123`. It's super secure ;)",
+          "type": "apiKey",
+          "name": "apikey",
+          "in": "query"
+        }
+      ]
+    ]
+  },
+  "links": { "mock_url": "https://stoplight.io/mocks/demo/studio-demo/389434/todos" },
+  "outbound_edges": [
+    {
+      "id": "c2NoOjkxNDY1MDA",
+      "type": "model",
+      "slug": "c2NoOjkxNDY1MDA-todo",
+      "title": "Todo",
+      "uri": "/reference/todos/todo.v1.yaml/components/schemas/Todos"
+    },
+    {
+      "id": "YXBpOjM4OTQzNA",
+      "type": "http_service",
+      "slug": "YXBpOjM4OTQzNA-to-dos",
+      "title": "To-dos",
+      "uri": "/reference/todos/todo.v1.yaml"
+    },
+    {
+      "id": "YXBpOjM4OTQzNA",
+      "type": "http_service",
+      "slug": "YXBpOjM4OTQzNA-to-dos",
+      "title": "To-dos",
+      "uri": "/reference/todos/todo.v1.yaml"
+    },
+    {
+      "id": "YXBpOjM4OTQzNA",
+      "type": "http_service",
+      "slug": "YXBpOjM4OTQzNA-to-dos",
+      "title": "To-dos",
+      "uri": "/reference/todos/todo.v1.yaml"
+    },
+    {
+      "id": "c2NoOjkxNDY1MDA",
+      "type": "model",
+      "slug": "c2NoOjkxNDY1MDA-todo",
+      "title": "Todo",
+      "uri": "/reference/todos/todo.v1.yaml/components/schemas/Todos"
+    },
+    {
+      "id": "YXBpOjM4OTQzNA",
+      "type": "http_service",
+      "slug": "YXBpOjM4OTQzNA-to-dos",
+      "title": "To-dos",
+      "uri": "/reference/todos/todo.v1.yaml"
+    }
+  ],
+  "inbound_edges": []
+}

package/src/__fixtures__/table-of-contents.json

@@ -0,0 +1,144 @@
+{
+  "showPoweredBy": true,
+  "items": [
+    { "id": "ZG9jOjE", "title": "Introduction", "type": "article", "slug": "ZG9jOjE-introduction", "meta": "" },
+    { "id": "ZG9jOjI", "title": "UI Overview", "type": "article", "slug": "ZG9jOjI-ui-overview", "meta": "" },
+    { "title": "markdown" },
+    { "id": "ZG9jOjM", "title": "Markdown Basics", "type": "article", "slug": "ZG9jOjM-markdown-basics", "meta": "" },
+    {
+      "id": "ZG9jOjQ",
+      "title": "Stoplight Flavored Markdown (SMD)",
+      "type": "article",
+      "slug": "ZG9jOjQ-stoplight-flavored-markdown-smd",
+      "meta": ""
+    },
+    { "title": "APIS" },
+    {
+      "id": "YXBpOjEy",
+      "title": "Swagger Petstore",
+      "type": "http_service",
+      "slug": "YXBpOjEy-swagger-petstore",
+      "meta": "",
+      "items": [
+        {
+          "title": "pets",
+          "items": [
+            {
+              "id": "b3A6MTU",
+              "title": "Create a pet",
+              "type": "http_operation",
+              "slug": "b3A6MTU-create-a-pet",
+              "meta": "post"
+            },
+            {
+              "id": "b3A6MTY",
+              "title": "Info for a specific pet",
+              "type": "http_operation",
+              "slug": "b3A6MTY-info-for-a-specific-pet",
+              "meta": "get"
+            },
+            {
+              "id": "b3A6MTQ",
+              "title": "List all pets",
+              "type": "http_operation",
+              "slug": "b3A6MTQ-list-all-pets",
+              "meta": "get"
+            }
+          ]
+        },
+        {
+          "title": "Schemas",
+          "items": [{ "id": "c2NoOjg", "title": "Pets", "type": "model", "slug": "c2NoOjg-pets", "meta": "" }]
+        }
+      ]
+    },
+    {
+      "id": "YXBpOjM4OTQzNA",
+      "title": "To-dos",
+      "type": "http_service",
+      "slug": "YXBpOjM4OTQzNA-to-dos",
+      "meta": "",
+      "items": [
+        {
+          "id": "b3A6Mzg5NDM1",
+          "title": "List Todos",
+          "type": "http_operation",
+          "slug": "b3A6Mzg5NDM1-list-todos",
+          "meta": "get"
+        },
+        {
+          "id": "b3A6Mzg5NDM2",
+          "title": "Create Todo",
+          "type": "http_operation",
+          "slug": "b3A6Mzg5NDM2-create-todo",
+          "meta": "post"
+        },
+        {
+          "id": "b3A6Mzg5NDM4",
+          "title": "Get Todo",
+          "type": "http_operation",
+          "slug": "b3A6Mzg5NDM4-get-todo",
+          "meta": "get"
+        },
+        {
+          "id": "b3A6OTE0NjUxMA",
+          "title": "Replace Todo",
+          "type": "http_operation",
+          "slug": "b3A6OTE0NjUxMA-replace-todo",
+          "meta": "put"
+        },
+        {
+          "id": "b3A6Mzg5NDM5",
+          "title": "Delete Todo",
+          "type": "http_operation",
+          "slug": "b3A6Mzg5NDM5-delete-todo",
+          "meta": "delete"
+        },
+        {
+          "id": "b3A6Mzg5NDQw",
+          "title": "Update Todo",
+          "type": "http_operation",
+          "slug": "b3A6Mzg5NDQw-update-todo",
+          "meta": "patch"
+        },
+        {
+          "title": "Users",
+          "items": [
+            {
+              "id": "b3A6OTE0NjUxMw",
+              "title": "Get User",
+              "type": "http_operation",
+              "slug": "b3A6OTE0NjUxMw-get-user",
+              "meta": "get"
+            },
+            {
+              "id": "b3A6OTE0NjUxNA",
+              "title": "Delete User",
+              "type": "http_operation",
+              "slug": "b3A6OTE0NjUxNA-delete-user",
+              "meta": "delete"
+            },
+            {
+              "id": "b3A6OTE0NjUxNQ",
+              "title": "Create User",
+              "type": "http_operation",
+              "slug": "b3A6OTE0NjUxNQ-create-user",
+              "meta": "post"
+            }
+          ]
+        },
+        {
+          "title": "Schemas",
+          "items": [
+            { "id": "c2NoOjkxNDY1MDA", "title": "Todo", "type": "model", "slug": "c2NoOjkxNDY1MDA-todo", "meta": "" },
+            { "id": "c2NoOjkxNDY1MDE", "title": "User", "type": "model", "slug": "c2NoOjkxNDY1MDE-user", "meta": "" }
+          ]
+        }
+      ]
+    },
+    { "title": "Schemas" },
+    { "id": "c2NoOjU", "title": "Error", "type": "model", "slug": "c2NoOjU-error", "meta": "" },
+    { "id": "c2NoOjY", "title": "Category", "type": "model", "slug": "c2NoOjY-category", "meta": "" },
+    { "id": "c2NoOjc", "title": "Pet", "type": "model", "slug": "c2NoOjc-pet", "meta": "" }
+  ]
+}

package/src/components/BranchSelector/BranchSelector.spec.tsx

@@ -0,0 +1,61 @@
+import { Provider as MosaicProvider } from '@stoplight/mosaic';
+import { screen } from '@testing-library/dom';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import * as React from 'react';
+
+import { Branch } from '../../types';
+import { BranchSelector } from './BranchSelector';
+
+export const branches: Branch[] = [
+  {
+    id: 0,
+    slug: 'main',
+    is_default: true,
+    is_published: false,
+    name: 'main-name',
+  },
+  {
+    id: 1,
+    slug: 'beta',
+    is_default: false,
+    is_published: false,
+  },
+  {
+    id: 2,
+    slug: 'feature-branch',
+    is_default: false,
+    is_published: false,
+  },
+];
+
+const BranchSelectorWrapper: React.FC = () => {
+  const [branchSlug, setBranchSlug] = React.useState('main');
+
+  return (
+    <MosaicProvider>
+      <BranchSelector branchSlug={branchSlug} branches={branches} onChange={branch => setBranchSlug(branch.slug)} />
+    </MosaicProvider>
+  );
+};
+
+function getBranchSelector() {
+  return screen.getByRole('button');
+}
+
+describe('Branch selector', () => {
+  it('shows the default branch by default', () => {
+    render(<BranchSelectorWrapper />);
+
+    expect(getBranchSelector()).toHaveTextContent('main-name');
+  });
+
+  it('selects a branch', () => {
+    render(<BranchSelectorWrapper />);
+
+    userEvent.click(getBranchSelector());
+    userEvent.click(screen.getByRole('menuitemradio', { name: 'beta' }));
+
+    expect(getBranchSelector()).toHaveTextContent('beta');
+  });
+});

package/src/components/BranchSelector/BranchSelector.stories.tsx

@@ -0,0 +1,41 @@
+import { Box } from '@stoplight/mosaic';
+import { Story } from '@storybook/react';
+import * as React from 'react';
+
+import { useGetBranches } from '../../hooks/useGetBranches';
+import { BranchSelector } from './';
+
+// Wrapper to show how to use the node content hook
+const BranchSelectorWrapper = ({ projectId }: { projectId: string }) => {
+  const [branchSlug, setBranchSlug] = React.useState('master');
+  const { data } = useGetBranches({ projectId });
+
+  if (data) {
+    return (
+      <Box mt={10} w={40}>
+        <BranchSelector branchSlug={branchSlug} branches={data.items} onChange={branch => setBranchSlug(branch.slug)} />
+      </Box>
+    );
+  }
+
+  return <Box>Loading</Box>;
+};
+
+export default {
+  title: 'Public/BranchSelector',
+  component: BranchSelectorWrapper,
+  argTypes: {
+    projectId: { table: { category: 'Input' } },
+    platformUrl: { table: { category: 'Input' } },
+  },
+  args: {
+    projectId: 'cHJqOjYwNjYx',
+    platformUrl: 'https://stoplight.io',
+  },
+};
+
+export const Playground: Story<{ nodeSlug: string; projectId: string; branchSlug?: string }> = args => (
+  <BranchSelectorWrapper {...args} />
+);
+
+Playground.storyName = 'Studio Demo';