Skip to content

Commit

Permalink
docs(playground): first version
Browse files Browse the repository at this point in the history
  • Loading branch information
anymaniax committed Jan 16, 2023
1 parent 7147b72 commit c066483
Show file tree
Hide file tree
Showing 13 changed files with 3,673 additions and 26 deletions.
476 changes: 476 additions & 0 deletions docs/generated/endpoints.ts

Large diffs are not rendered by default.

10 changes: 9 additions & 1 deletion docs/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,18 +17,22 @@
"@mdx-js/mdx": "^1.6.18",
"@mdx-js/react": "^1.6.18",
"@mdx-js/tag": "^0.20.3",
"@monaco-editor/react": "^4.4.6",
"@next/mdx": "^10.0.1",
"@octokit/graphql": "^5.0.4",
"@reactions/component": "^2.0.2",
"@sentry/browser": "^5.27.3",
"@sentry/node": "^5.27.3",
"@tanstack/react-query": "^4.22.0",
"@zeit/fetch": "^6.0.0",
"@zeit/react-jsx-parser": "^2.0.0",
"async-sema": "^3.1.0",
"axios": "^1.2.2",
"body-scroll-lock": "^3.1.5",
"classnames": "^2.2.6",
"copy-to-clipboard": "^3.3.1",
"date-fns": "^2.16.1",
"dedent": "^0.7.0",
"docsearch.js": "^2.6.3",
"framer-motion": "^1.11.1",
"gray-matter": "^4.0.2",
Expand All @@ -40,11 +44,14 @@
"next-images": "^1.5.0",
"next-optimized-images": "^2.6.2",
"node-fetch": "^2.6.1",
"orval": "^6.11.0",
"prettier": "^2.8.3",
"prismjs": "^1.21.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-icons": "^3.11.0",
"react-live": "^2.2.2",
"react-select": "^5.7.0",
"rehype-format": "^3.0.1",
"rehype-stringify": "^7.0.0",
"remark": "^12.0.1",
Expand All @@ -58,7 +65,8 @@
"remark-unwrap-images": "^2.0.0",
"scroll-into-view-if-needed": "^2.2.26",
"semver-regex": "^3.1.1",
"unist-util-visit": "^2.0.3"
"unist-util-visit": "^2.0.3",
"yaml": "^2.2.1"
},
"devDependencies": {
"@babel/cli": "^7.11.6",
Expand Down
6 changes: 5 additions & 1 deletion docs/src/components/Nav.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import Link from 'next/link';
import * as React from 'react';
import { siteConfig } from 'siteConfig';
import logoSrc from '../images/orval-logo-horizontal.svg';
import { Search } from './Search';
Expand Down Expand Up @@ -28,6 +27,11 @@ export const Nav = () => (
<a className="leading-6 font-medium">Docs</a>
</Link>
</div>
<div>
<Link href="/playground">
<a className="leading-6 font-medium">Playground</a>
</Link>
</div>
<div>
<Link
href={`${siteConfig.repoUrl}/tree/master/samples`}
Expand Down
27 changes: 27 additions & 0 deletions docs/src/components/playground/CodegenOutput.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import { basename } from 'path';
import { useEffect, useState } from 'react';
import { Editor } from './Editor';

export const CodegenOutput = ({ outputArray, editorProps, error, height }) => {
const [index, setIndex] = useState(0);
const editorContent = error || outputArray?.[index].content || '';

useEffect(() => {
setIndex(0);
}, [outputArray]);

return (
<>
<div>
<div>
{outputArray?.map((outputItem, i) => (
<div onClick={() => setIndex(i)} key={outputItem.filename}>
{basename(outputItem.filename)}
</div>
))}
</div>
</div>
<Editor {...editorProps} value={editorContent} height={height} />
</>
);
};
25 changes: 25 additions & 0 deletions docs/src/components/playground/Editor.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import MonacoEditor from '@monaco-editor/react';

const canUseDOM = typeof window !== 'undefined';

export const Editor = ({ value, lang, readOnly, onEdit, height = 500 }) => {
if (!canUseDOM) {
return null;
}

return (
<MonacoEditor
height={height}
language={lang}
theme="vs-dark"
value={value}
options={{
readOnly,
minimap: {
enabled: false,
},
}}
onChange={onEdit}
/>
);
};
216 changes: 216 additions & 0 deletions docs/src/components/playground/Examples.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,216 @@
import dedent from 'dedent';

const SCHEMA = dedent(/* YAML */ `
openapi: '3.0.0'
info:
version: 1.0.0
title: Swagger Petstore
license:
name: MIT
servers:
- url: http://petstore.swagger.io/v1
paths:
/pets:
get:
summary: List all pets
operationId: listPets
tags:
- pets
parameters:
- name: limit
in: query
description: How many items to return at one time (max 100)
required: false
schema:
type: string
responses:
'200':
description: A paged array of pets
headers:
x-next:
description: A link to the next page of responses
schema:
type: string
content:
application/json:
schema:
$ref: '#/components/schemas/Pets'
default:
description: unexpected error
content:
application/json:
schema:
$ref: '#/components/schemas/Error'
post:
summary: Create a pet
operationId: createPets
tags:
- pets
requestBody:
required: true
content:
application/json:
schema:
type: object
required:
- 'name'
- 'tag'
properties:
name:
type: string
tag:
type: string
responses:
'200':
description: Created Pet
content:
application/json:
schema:
$ref: '#/components/schemas/Pet'
default:
description: unexpected error
content:
application/json:
schema:
$ref: '#/components/schemas/Error'
/pets/{petId}:
get:
summary: Info for a specific pet
operationId: showPetById
tags:
- pets
parameters:
- name: petId
in: path
required: true
description: The id of the pet to retrieve
schema:
type: string
- name: testId
in: path
required: true
description: The id of the pet to retrieve
schema:
type: string
responses:
'200':
description: Expected response to a valid request
content:
application/json:
schema:
$ref: '#/components/schemas/Pet'
default:
description: unexpected error
content:
application/json:
schema:
$ref: '#/components/schemas/Error'
components:
schemas:
Pet:
type: object
required:
- id
- name
oneOf:
- $ref: '#/components/schemas/Dog'
- $ref: '#/components/schemas/Cat'
properties:
'@id':
type: string
format: iri-reference
id:
type: integer
format: int64
name:
type: string
tag:
type: string
email:
type: string
format: email
callingCode:
type: string
enum: ['+33', '+420', '+33'] # intentional duplicated value
country:
type: string
enum: ["People's Republic of China", 'Uruguay']
Dog:
type: object
oneOf:
- $ref: '#/components/schemas/Labradoodle'
- $ref: '#/components/schemas/Dachshund'
required: ['type']
properties:
barksPerMinute:
type: integer
type:
type: string
enum:
- dog
discriminator:
propertyName: breed
mapping:
Labradoodle: '#/components/schemas/Labradoodle'
Dachshund: '#/components/schemas/Dachshund'
Labradoodle:
type: object
required: ['cuteness']
properties:
cuteness:
type: integer
Dachshund:
type: object
required: ['length']
properties:
length:
type: integer
Cat:
type: object
required: ['type']
properties:
petsRequested:
type: integer
type:
type: string
enum:
- cat
Pets:
type: array
items:
$ref: '#/components/schemas/Pet'
Error:
type: object
required:
- code
- message
properties:
code:
type: integer
format: int32
message:
type: string
`);

export const EXAMPLES = {
ReactQuery: [
{
name: 'Basic',
description: `This is the simplest example of generating output based on a specification.`,
tags: [],
config: dedent(/* JSON */ `{
"output": {
"client": "react-query",
"target": "./src/generated/endpoints.ts",
"mock": true
},
"input": {
"target": "./schema.yaml"
}
}
`),
schema: SCHEMA,
},
],
};
Loading

1 comment on commit c066483

@vercel
Copy link

@vercel vercel bot commented on c066483 Jan 16, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.