Merge pull request #250 from jellydn/246-withswagger-doesnt-include-s…

…chema-stored-in-non-pages-folder-to-serve-in-vercel

Support load yaml/json files on public folder

.changes/header.tpl.md

@@ -0,0 +1,7 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html),
+and is generated by [Changie](https://github.com/miniscruff/changie).

.changie.yaml

@@ -0,0 +1,19 @@
+changesDir: .changes
+unreleasedDir: unreleased
+headerPath: header.tpl.md
+versionHeaderPath: ""
+versionFooterPath: ""
+changelogPath: CHANGELOG.md
+versionExt: md
+versionFormat: '## {{.Version}} - {{.Time.Format "2006-01-02"}}'
+kindFormat: '### {{.Kind}}'
+changeFormat: '* {{.Body}}'
+headerFormat: ""
+footerFormat: ""
+kinds:
+- label: Added
+- label: Changed
+- label: Deprecated
+- label: Removed
+- label: Fixed
+- label: Security

CHANGELOG.md

@@ -0,0 +1,9 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html),
+and is generated by [Changie](https://github.com/miniscruff/changie).
+
+No releases yet, this file will be updated when generating your first release.

README.md

@@ -1,7 +1,9 @@
 # Welcome to next-swagger-doc 👋
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+
 [![All Contributors](https://img.shields.io/badge/all_contributors-6-orange.svg?style=flat-square)](#contributors-)
+
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 [![Version](https://img.shields.io/npm/v/next-swagger-doc.svg)](https://npmjs.org/package/next-swagger-doc)
@@ -44,25 +46,29 @@ yarn add next-swagger-doc swagger-ui-react
 
 ```typescript
 import { GetStaticProps, InferGetStaticPropsType } from 'next';
-
 import { createSwaggerSpec } from 'next-swagger-doc';
-import SwaggerUI from 'swagger-ui-react';
+import dynamic from 'next/dynamic';
 import 'swagger-ui-react/swagger-ui.css';
 
-const ApiDoc = ({ spec }: InferGetStaticPropsType<typeof getStaticProps>) => {
+const SwaggerUI = dynamic<{
+  spec: any;
+}>(import('swagger-ui-react'), { ssr: false });
+
+function ApiDoc({ spec }: InferGetStaticPropsType<typeof getStaticProps>) {
   return <SwaggerUI spec={spec} />;
-};
+}
 
-export const getStaticProps: GetStaticProps = async ctx => {
+export const getStaticProps: GetStaticProps = async () => {
   const spec: Record<string, any> = createSwaggerSpec({
     definition: {
       openapi: '3.0.0',
       info: {
-        title: 'NextJS Swagger',
-        version: '0.1.0',
+        title: 'Next Swagger API Example',
+        version: '1.0',
       },
     },
   });
+
   return {
     props: {
       spec,

example/README.md

@@ -1,5 +1,11 @@
 This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 
+## Link package
+
+```sh
+npx link
+```
+
 ## Getting Started
 
 First, run the development server:

example/link.config.json

@@ -0,0 +1,5 @@
+{
+	"packages": [
+		"../"
+	]
+}

example/next.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  compiler: {
+    // ssr and displayName are configured by default
+    styledComponents: true,
+    removeConsole: true,
+    swcMinify: true,
+  },
+};

example/package.json

@@ -4,29 +4,35 @@
   "private": true,
   "scripts": {
     "build": "next build",
+    "postbuild": "cpy 'models/**/*.swagger.yaml' public/openapi --flat",
     "dev": "next dev",
     "openapi:yaml": "typeconv -f ts -t oapi --oapi-format yaml --output-extension 'swagger.yaml' --output-directory 'models/openapi' 'models/*.ts'",
     "start": "next start"
   },
   "dependencies": {
+    "@stoplight/elements": "7.5.18",
+    "@xstyled/styled-components": "^3.6.0",
+    "@xstyled/system": "^3.6.0",
     "isarray": "2.0.5",
     "next": "12.1.5",
-    "next-swagger-doc": "0.3.0",
+    "next-swagger-doc": "*",
     "react": "18.1.0",
     "react-dom": "18.1.0",
+    "styled-components": "^5.3.5",
     "swagger-ui-react": "latest"
   },
   "devDependencies": {
     "@trivago/prettier-plugin-sort-imports": "3.2.0",
     "@types/node": "16.11.31",
     "@types/react": "18.0.8",
-    "@types/react-dom": "18.0.2",
+    "@types/react-dom": "18.0.3",
     "@types/swagger-jsdoc": "6.0.1",
     "@typescript-eslint/eslint-plugin": "5.21.0",
+    "cpy-cli": "^4.1.0",
     "eslint": "8.14.0",
     "eslint-config-next": "12.1.5",
     "prettier": "2.6.2",
     "typeconv": "1.7.0",
-    "typescript": "4.6.3"
+    "typescript": "4.6.4"
   }
-}
+}

example/pages/_app.tsx

@@ -1,5 +1,3 @@
-import '../styles/globals.css';
-
 function MyApp({ Component, pageProps }) {
   return <Component {...pageProps} />;
 }

example/pages/api-doc.tsx

@@ -4,7 +4,7 @@ import dynamic from 'next/dynamic';
 import 'swagger-ui-react/swagger-ui.css';
 
 const SwaggerUI = dynamic<{
-  spec: any;
+  spec: Record<string, any>;
 }>(import('swagger-ui-react'), { ssr: false });
 
 function ApiDoc({ spec }: InferGetStaticPropsType<typeof getStaticProps>) {

example/pages/index.tsx

@@ -6,7 +6,7 @@ const SwaggerUI = dynamic<{ url: string }>(import('swagger-ui-react'), {
   ssr: false,
 });
 
-export default function Home() {
+export default function Index() {
   return (
     <div>
       <Head>

example/pages/playground.tsx

@@ -0,0 +1,58 @@
+import '@stoplight/elements/styles.min.css';
+import {
+  Preflight,
+  ThemeProvider,
+  defaultTheme,
+  x,
+} from '@xstyled/styled-components';
+import dynamic from 'next/dynamic';
+import Head from 'next/head';
+
+const APIDocumentUI = dynamic<{
+  apiDescriptionUrl: string;
+  layout?: 'sidebar' | 'stacked';
+  router?: 'history' | 'memory' | 'hash' | 'static';
+}>(
+  import('@stoplight/elements').then(({ API }) => API),
+  {
+    ssr: false,
+    loading: () => <p>Loading...</p>,
+  },
+);
+
+const theme = {
+  ...defaultTheme,
+  // Customize your theme here
+  colors: {
+    text: '#000',
+    background: '#fff',
+    primary: '#07c',
+    modes: {
+      dark: {
+        text: '#fff',
+        background: '#000',
+        primary: '#0cf',
+      },
+    },
+  },
+};
+
+export default function Playground() {
+  return (
+    <ThemeProvider theme={theme}>
+      <x.div h="100vh" mx="auto">
+        <Preflight />
+        <Head>
+          <title>Next Swagger Doc Demo App</title>
+          <meta name="description" content="Generated by create next app" />
+          <link rel="icon" href="/favicon.ico" />
+        </Head>
+        <APIDocumentUI
+          apiDescriptionUrl="/api/doc"
+          layout="sidebar"
+          router="hash"
+        />
+      </x.div>
+    </ThemeProvider>
+  );
+}

example/public/.gitignore

@@ -0,0 +1 @@
+openapi

example/styled.d.ts

@@ -0,0 +1,19 @@
+// import original module declarations
+import {
+  ITheme,
+  DefaultTheme as XStyledDefaultTheme,
+} from '@xstyled/styled-components';
+import '@xstyled/system';
+import 'styled-components';
+
+interface AppTheme extends ITheme, XStyledDefaultTheme {
+  /* Customize your theme */
+}
+
+// and extend them!
+declare module '@xstyled/system' {
+  export interface Theme extends AppTheme {}
+}
+declare module 'styled-components' {
+  export interface DefaultTheme extends AppTheme {}
+}

example/tsconfig.json

@@ -21,6 +21,7 @@
   },
   "include": [
     "next-env.d.ts",
+    "styled.d.ts",
     "**/*.ts",
     "**/*.tsx"
   ],