@stoplight/elements-core 9.0.10 → 9.0.12-beta-0.1

package/dist/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@stoplight/elements-core",
+  "version": "9.0.12-beta-0.1",
+  "main": "./index.js",
+  "sideEffects": [
+    "web-components.min.js",
+    "src/web-components/**",
+    "**/*.css"
+  ],
+  "files": [
+    "**/*"
+  ],
+  "author": "Stoplight <support@stoplight.io>",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/stoplightio/elements"
+  },
+  "license": "Apache-2.0",
+  "engines": {
+    "node": ">=16"
+  },
+  "peerDependencies": {
+    "react": ">=16.8",
+    "react-dom": ">=16.8"
+  },
+  "dependencies": {
+    "@stoplight/http-spec": "^7.1.0",
+    "@stoplight/json": "^3.21.0",
+    "@stoplight/json-schema-ref-parser": "^9.2.7",
+    "@stoplight/json-schema-sampler": "0.3.0",
+    "@stoplight/json-schema-tree": "^4.0.0",
+    "@stoplight/json-schema-viewer": "4.16.3",
+    "@stoplight/markdown-viewer": "^5.7.1",
+    "@stoplight/mosaic": "^1.53.5",
+    "@stoplight/mosaic-code-editor": "^1.53.5",
+    "@stoplight/mosaic-code-viewer": "^1.53.5",
+    "@stoplight/path": "^1.3.2",
+    "@stoplight/react-error-boundary": "^3.0.0",
+    "@stoplight/types": "^14.1.1",
+    "@stoplight/yaml": "^4.3.0",
+    "classnames": "^2.2.6",
+    "httpsnippet-lite": "^3.0.5",
+    "jotai": "1.3.9",
+    "json-schema": "^0.4.0",
+    "lodash": "^4.17.21",
+    "nanoid": "^3.1.32",
+    "prop-types": "^15.7.2",
+    "react-query": "^3.34.19",
+    "react-router-dom": "^6.28.0",
+    "tslib": "^2.1.0",
+    "urijs": "^1.19.11",
+    "util": "^0.12.4",
+    "xml-formatter": "^3.6.3"
+  },
+  "type": "commonjs",
+  "exports": {
+    ".": {
+      "require": "./index.js",
+      "import": "./index.mjs"
+    }
+  },
+  "typings": "index.d.ts",
+  "module": "./index.esm.js"
+}

package/dist/styled.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export declare const Styled: ({ children }: {
+    children: React.ReactNode;
+}) => JSX.Element;
+export declare function withStyles<T>(Component: React.ComponentType<T>): React.FC<T>;

package/jest.config.js

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

package/package.json

@@ -1,28 +1,61 @@
 {
   "name": "@stoplight/elements-core",
-  "version": "9.0.10",
-  "main": "./index.js",
+  "version": "9.0.12-beta-0.1",
   "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": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs"
+    }
+  },
+  "files": [
+    "**/*"
+  ],
   "engines": {
     "node": ">=16"
   },
+  "scripts": {
+    "build": "yarn build.react",
+    "postbuild": "yarn build.styles",
+    "build.react": "sl-scripts bundle",
+    "build.styles": "postcss src/styles.css -o dist/styles.min.css && cp src/core.css dist",
+    "build.docs": "storybook build -o dist-storybook",
+    "commit": "git-cz",
+    "release": "sl-scripts release",
+    "release.docs": "sl-scripts release:docs",
+    "release.dryRun": "sl-scripts release --dry-run --debug",
+    "storybook": "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"
+    ]
+  },
   "dependencies": {
     "@stoplight/http-spec": "^7.1.0",
     "@stoplight/json": "^3.21.0",
@@ -52,13 +85,40 @@
     "util": "^0.12.4",
     "xml-formatter": "^3.6.3"
   },
-  "type": "commonjs",
-  "exports": {
-    ".": {
-      "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/classnames": "^2.2.10",
+    "@types/enzyme": "3.x.x",
+    "@types/enzyme-adapter-react-16": "1.x.x",
+    "@types/json-schema": "^7.0.11",
+    "@types/lodash": "^4.14.202",
+    "@types/prop-types": "^15.7.5",
+    "@types/react": "16.9.56",
+    "@types/react-dom": "16.9.12",
+    "@types/react-router-dom": "^5.3.3",
+    "@types/react-router-hash-link": "^1.2.1",
+    "@types/urijs": "^1.19.19",
+    "enzyme": "3.x.x",
+    "enzyme-adapter-react-16": "1.x.x",
+    "enzyme-to-json": "3.x.x",
+    "jest-fetch-mock": "^3.0.3",
+    "react": "16.14.0",
+    "react-dom": "16.14.0",
+    "react-test-renderer": "^16.8.0",
+    "resolve-url-loader": "^5.0.0",
+    "storybook": "next",
+    "style-loader": "^3.3.3"
+  },
+  "publishConfig": {
+    "directory": "dist"
   },
-  "typings": "index.d.ts",
-  "module": "./index.esm.js"
-}
+  "release": {
+    "extends": "@stoplight/scripts/release"
+  }
+}

package/src/__fixtures__/articles/basic.md

@@ -0,0 +1,10 @@
+---
+title: Stoplight Flavored Markdown
+---
+
+# Stoplight Flavored Markdown (smd)
+
+### The Two Laws
+
+1. smd is human readable. A human with a simple text editor can easily read and comprehend smd.
+2. smd degrades gracefully. An smd document rendered on `github.com` should be readable and clean.

package/src/__fixtures__/articles/kitchen-sink.md

@@ -0,0 +1,318 @@
+---
+title: Stoplight Flavored Markdown
+---
+
+# Stoplight Flavored Markdown (smd)
+
+### The Two Laws
+
+1. smd is human readable. A human with a simple text editor can easily read and comprehend smd.
+2. smd degrades gracefully. An smd document rendered on `github.com` should be readable and clean.
+
+### The Approach
+
+1. Stoplight flavored markdown extends github flavor markdown with inline comment annotations.
+2. The value inside of the annotations is a yaml object, and the annotation affects the following markdown block.
+
+By leveraging comments to store annotations, Stoplight flavored markdown degrades gracefully to any other markdown renderer (Github, for example).
+
+> [MDX](https://github.com/mdx-js/mdx) is an interesting project that might allow our users to add more interactivity to their docs, at the cost of complexity (this is a more advanced use case). We would have to figure out a way to introduce this WITHOUT impacting those users that do not need the feature.
+
+## Tabs
+
+A smd tab container is a `tab` annotation, followed by the tab content, and closed by a final `tab-end` annotation.
+
+Tab containers cannot be nested.
+
+<!--
+type: tab
+title: My First Tab
+-->
+
+The contents of tab 1.
+
+<!--
+type: tab
+title: My Second Tab
+-->
+
+The contents of tab 2.
+
+<!-- type: tab-end -->
+
+#### Markdown Sample
+
+```md
+<!--
+type: tab
+title: My First Tab
+-->
+
+The contents of tab 1.
+
+<!--
+type: tab
+title: My Second Tab
+-->
+
+The contents of tab 2.
+
+<!-- type: tab-end -->
+```
+
+## Callouts
+
+A callout is a md block quote with an optional annotation that indicates intent.
+
+<!-- theme: danger -->
+
+> ### Danger Will Robinson!
+>
+> Here is my danger callout!
+
+<!-- theme: warning -->
+
+> ### Watch Out!
+>
+> Here is my warning callout!
+
+<!-- theme: success -->
+
+> ### Mission Accomplished!
+>
+> Here is my success callout!
+
+<!-- theme: info -->
+
+> ### A thing to know
+>
+> Here is my info callout
+
+#### Markdown Sample
+
+```md
+<!-- theme: danger -->
+
+> ### Danger Will Robinson!
+>
+> Here is my danger callout!
+
+<!-- theme: warning -->
+
+> ### Watch Out!
+>
+> Here is my warning callout!
+
+<!-- theme: success -->
+
+> ### Mission Accomplished!
+>
+> Here is my success callout!
+
+<!-- theme: info -->
+
+> ### A thing to know
+>
+> Here is my info callout
+```
+
+## Code Blocks
+
+A smd code block is md code fence with an optional annotation to tweak the presentation of the code block.
+
+<!--
+title: "Fibonacci In Javascript"
+lineNumbers: false
+highlightLines: [[1,2], [4,5]]
+-->
+
+```javascript
+function fibonacci(num) {
+  var a = 1,
+    b = 0,
+    temp;
+
+  while (num >= 0) {
+    temp = a;
+    a = a + b;
+    b = temp;
+    num--;
+  }
+
+  return b;
+}
+```
+
+## JSON Schema
+
+A smd json schema block is a smd code block with the `json_schema` language tag. The contents of the code fence should
+be the json schema object to be rendered.
+
+<!-- type: json_schema -->
+
+```json
+{
+  "title": "Todo Full",
+  "allOf": [
+    {
+      "title": "Todo Partial",
+      "type": "object",
+      "properties": {
+        "name": {
+          "type": "string"
+        },
+        "completed": {
+          "type": [
+            "boolean",
+            "null"
+          ]
+        }
+      },
+      "required": [
+        "name",
+        "completed"
+      ],
+      "x-tags": [
+        "Todos"
+      ]
+    },
+    {
+      "type": "object",
+      "properties": {
+        "id": {
+          "type": "integer",
+          "minimum": 0,
+          "maximum": 1000000
+        },
+        "completed_at": {
+          "type": [
+            "string",
+            "null"
+          ],
+          "format": "date-time"
+        },
+        "created_at": {
+          "type": "string",
+          "format": "date-time"
+        },
+        "updated_at": {
+          "type": "string",
+          "format": "date-time"
+        },
+        "user": {
+          "title": "User",
+          "type": "object",
+          "properties": {
+            "name": {
+              "type": "string",
+              "description": "The user's full name."
+            },
+            "age": {
+              "type": "number",
+              "minimum": 0,
+              "maximum": 150
+            },
+            "type": {
+              "type": "string",
+              "enum": ["STANDARD", "ADMIN"],
+              "x-enum-descriptions": {
+                "STANDARD": "A standard user",
+                "ADMIN": "A user with administrative powers"
+              }
+            }
+          },
+          "required": [
+            "name",
+            "age"
+          ],
+          "x-tags": [
+            "Todos"
+          ]
+        }
+      },
+      "required": [
+        "id",
+        "user"
+      ]
+    }
+  ],
+  "x-tags": [
+    "Todos"
+  ]
+}
+```
+
+## HTTP Try It Out
+
+A smd http try it out block is a smd code block with the `http` language tag. The contents of the code fence should
+be the http object to be rendered.
+
+### Raw Http Request
+
+<!-- type: http -->
+
+```json
+{
+  "method": "get",
+  "url": "/gifs/search",
+  "baseUrl": "http://api.giphy.com/v1",
+  "headers": {},
+  "query": {
+    "api_key": ["dc6zaTOxFJmzC"],
+    "limit": ["1"],
+    "q": ["cats"]
+  }
+}
+```
+
+````md
+<!-- type: http -->
+
+```json
+{
+  "method": "get",
+  "url": "/gifs/search",
+  "baseUrl": "http://api.giphy.com/v1",
+  "headers": {},
+  "query": {
+    "api_key": ["dc6zaTOxFJmzC"],
+    "limit": ["1"],
+    "q": ["cats"]
+  }
+}
+```
+````
+
+### From a remote Http Operation
+
+<!-- type: http -->
+
+```json
+{
+  "$ref": "https://stoplight.io/api/v1/projects/demo/external-api/nodes/zoom.yaml/paths/~1meetings~1%7BmeetingId%7D/get?deref=optimizedBundle"
+}
+```
+
+````md
+<!-- type: http -->
+
+```json
+{
+  "$ref": "https://stoplight.io/api/v1/projects/demo/external-api/nodes/zoom.yaml/paths/~1meetings~1%7BmeetingId%7D/get?deref=optimizedBundle"
+}
+```
+````
+
+## Raw HTML
+
+```
+<div>Hello world!</div>
+```
+
+<div>Hello world!</div>
+
+## Inline Links
+
+[foo], [foo][], [bar][foo].
+
+[foo]: http://example.com 'Example Domain'