feat: integrate openapi generator

.env.development

@@ -1 +1,2 @@
-NEXT_PUBLIC_BASE_URL='/api'
+NEXT_PUBLIC_BASE_URL='https://hp-api.fly.dev/api/v1'
+NEXT_PUBLIC_API_MOCKING=disabled

.spectral.js

@@ -0,0 +1,102 @@
+const ibmCloudValidationRules = require('@ibm-cloud/openapi-ruleset') // Note 1
+const {
+  pathSegmentCaseConvention,
+  propertyCaseConvention,
+  enumCaseConvention,
+  operationIdCaseConvention,
+  parameterCaseConvention,
+} = require('@ibm-cloud/openapi-ruleset/src/functions')
+const {
+  schemas,
+  paths,
+  operations,
+  parameters,
+} = require('@ibm-cloud/openapi-ruleset-utilities/src/collections')
+
+module.exports = {
+  extends: ibmCloudValidationRules,
+  rules: {
+    'response-example-provided': 'off',
+    'operation-description': 'off',
+    'property-description': 'off',
+    'schema-description': 'off',
+    'response-error-response-schema': 'off',
+    'array-boundary': 'off',
+    'string-boundary': 'off',
+    'pagination-style': 'off',
+    'property-case-convention': {
+      description: 'Property names must follow camel case convention',
+      message: '{{error}}',
+      given: schemas,
+      resolved: true,
+      severity: 'error',
+      then: {
+        function: propertyCaseConvention,
+        functionOptions: {
+          type: 'camel',
+        },
+      },
+    },
+    'path-segment-case-convention': {
+      description: 'Path segments must follow camel case convention',
+      message: '{{error}}',
+      given: paths,
+      severity: 'error',
+      then: {
+        function: pathSegmentCaseConvention,
+        functionOptions: {
+          type: 'camel',
+        },
+      },
+    },
+    'enum-case-convention': {
+      description: 'Enum values must follow a specified case convention',
+      message: '{{error}}',
+      given: schemas,
+      severity: 'error',
+      then: {
+        function: enumCaseConvention,
+        functionOptions: {
+          type: 'camel',
+        },
+      },
+    },
+    'operation-id-case-convention': {
+      description: 'Operation ids must follow a specified case convention',
+      message: '{{error}}',
+      given: operations,
+      severity: 'error',
+      then: {
+        function: operationIdCaseConvention,
+        functionOptions: {
+          type: 'camel',
+        },
+      },
+    },
+    'parameter-case-convention': {
+      description: 'Parameter names must follow case conventions',
+      message: '{{error}}',
+      given: parameters,
+      severity: 'error',
+      resolved: true,
+      then: {
+        function: parameterCaseConvention,
+        functionOptions: {
+          query: {
+            type: 'camel',
+          },
+
+          path: {
+            type: 'camel',
+          },
+          header: {
+            type: 'pascal',
+            separator: {
+              char: '-',
+            },
+          },
+        },
+      },
+    },
+  },
+}

docs/GETTING_STARTED.md

@@ -24,6 +24,7 @@ to see your project.
 ├── public                       # Public folder
 │   └── img                      # Images used by the app
 ├── types                        # Shared TypeScript interfaces
+├── api                          # Generated API interfaces from Swagger
 ├── components                   # Shared components
 │   └── X
 │       └── X.tsx
@@ -41,7 +42,9 @@ to see your project.
 │   └── tests
 │── cypress                      # Cypress configuration and tests
 ├── tailwind.config.js           # Tailwind CSS configuration
-└── tsconfig.json                # TypeScript configuration
+├── tsconfig.json                # TypeScript configuration
+├── .spectral.js                 # Orval validator rules for Swagger
+└── orval.config.js              # Orval api generator configuration
 ```
 
 ### Develop UI components
@@ -60,23 +63,26 @@ The UI document then should be live at
 
 If your team use Swagger to document APIs, we support a node script to generate
 TypeScript interfaces via your Swagger scheme. In
-[package.json](../package.json), change the default path to the location of your
-Swagger JSON doc.
-
-```
-- "fetch-definitions": "swagger-typescript-api --no-client -p ./libs/swagger.json -o ./types -n schema.ts",
-+ "fetch-definitions": "swagger-typescript-api --no-client -p your-api-swagger-json -o ./types -n schema.ts",
+[orval.config.js](../orval.config.js), change the default path to the location
+of your Swagger JSON doc.
+
+```diff
+input: {
+-  target: 'https://hp-api.fly.dev/swagger/doc.json',
++  target: 'your-api-swagger-json',
+  ...
+}
 ```
 
 Then, you can run the script locally to generate TypeScript definitions for the
 APIs:
 
 ```bash
-pnpm fetch-definitions
+pnpm generate:api
 ```
 
-The generated interfaces will be located at
-[types/schema.ts](../types/schema.ts).
+The generated models and api clients will be located at [api](../src/api)
+folder.
 
 ## Read on:
 

orval.config.js

@@ -0,0 +1,39 @@
+import { faker } from '@faker-js/faker'
+import { defineConfig } from 'orval'
+
+export default defineConfig({
+  app: {
+    output: {
+      mode: 'tags-split',
+      workspace: './src/api',
+      target: './app.ts',
+      schemas: './model',
+      client: 'swr',
+      mock: true,
+      prettier: true,
+      override: {
+        mutator: {
+          path: './mutator/requester.ts',
+          name: 'requester',
+        },
+        mock: {
+          properties: {
+            email: () => faker.internet.email(),
+            'data.email': () => faker.internet.email(),
+            'data.[].email': () => faker.internet.email(),
+            avatar: () => faker.image.avatar(),
+            'data.avatar': () => faker.image.avatar(),
+            'data.[].avatar': () => faker.image.avatar(),
+          },
+        },
+      },
+    },
+    input: {
+      target: 'https://hp-api.fly.dev/swagger/doc.json',
+      validation: false,
+    },
+    hooks: {
+      afterAllFilesWrite: 'eslint ./src/api --ext .ts,.tsx,.js --fix', // run lint fix after all files are written
+    },
+  },
+})

package.json

@@ -15,10 +15,10 @@
     "generate-icons": "node ./scripts/generate-icon-components.js",
     "storybook": "storybook dev -p 6006 -s ./public",
     "build-storybook": "storybook build -s ./public",
-    "fetch-definitions": "swagger-typescript-api --no-client -p ./libs/swagger.json -o ./types -n schema.ts",
     "cypress:open": "cypress open",
     "release": "standard-version -a",
-    "preinstall": "npx only-allow pnpm"
+    "preinstall": "npx only-allow pnpm",
+    "generate:api": "orval --config ./orval.config.js"
   },
   "dependencies": {
     "@babel/eslint-parser": "^7.22.10",
@@ -48,6 +48,12 @@
     "@commitlint/config-conventional": "^17.3.0",
     "@dwarvesf/react-eslint-config": "^1.0.1",
     "@prettier/plugin-xml": "^3.2.0",
+    "@babel/core": "^7.22.5",
+    "@babel/helper-plugin-utils": "^7.20.2",
+    "@babel/preset-react": "^7.22.5",
+    "@faker-js/faker": "^8.0.2",
+    "@ibm-cloud/openapi-ruleset": "0.45.5",
+    "@ibm-cloud/openapi-ruleset-utilities": "0.0.1",
     "@storybook/addon-actions": "^7.0.12",
     "@storybook/addon-essentials": "^7.0.12",
     "@storybook/addon-links": "^7.0.12",
@@ -90,6 +96,8 @@
     "jest": "^29.3.1",
     "jest-environment-jsdom": "^29.3.1",
     "lint-staged": "^14.0.0",
+    "msw": "^1.2.3",
+    "orval": "^6.17.0",
     "postcss": "^8.4.20",
     "prettier": "^2.8.1",
     "rimraf": "^3.0.2",
@@ -98,7 +106,6 @@
     "stylelint": "^15.10.2",
     "stylelint-config-prettier": "^9.0.4",
     "stylelint-config-standard": "^34.0.0",
-    "swagger-typescript-api": "^13.0.3",
     "tailwindcss": "3.2.4",
     "tailwindcss-animate": "^1.0.5",
     "ts-jest": "^29.0.3",
@@ -125,5 +132,8 @@
   "packageManager": "[email protected]",
   "engines": {
     "pnpm": ">=8.2.0"
+  },
+  "msw": {
+    "workerDirectory": "public"
   }
-}
+}