Merge pull request #526 from gadget-inc/feature/autoform

feature/autoform

Author: danroberts

.eslintrc.js

@@ -2,7 +2,12 @@ module.exports = {
   extends: "@gadgetinc/eslint-config",
   parserOptions: {
     tsconfigRootDir: __dirname,
-    project: ["./packages/*/tsconfig.json", "./scripts/tsconfig.json", "./packages/blog-example/tsconfig.node.json"],
+    project: [
+      "./packages/*/tsconfig.json",
+      "./packages/react/cypress/tsconfig.json",
+      "./scripts/tsconfig.json",
+      "./packages/blog-example/tsconfig.node.json",
+    ],
   },
   settings: {
     "import/extensions": [".js", ".jsx"],

.github/workflows/test.yml

@@ -14,6 +14,17 @@ jobs:
         run: pnpm test
       - name: Build example package
         run: pnpm --filter=blog-example build-vite
+  test-cypress:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/setup-test-env
+      - name: Build all packages (so they can require each other)
+        run: pnpm build
+      - name: Cypress info
+        run: pnpm exec cypress info
+      - name: Run cypress tests
+        run: pnpm --filter=react exec cypress run --browser chrome --component --env JS_CLIENTS_TEST_API_KEY=${{secrets.CYPRESS_JS_CLIENTS_TEST_API_KEY}}
   lint:
     runs-on: ubuntu-latest
     steps:

.gitignore

@@ -14,4 +14,11 @@ packages/*/dist
 packages/sample-app
 *.orig
 cypress.env.json
-packages/shopify-extensions/react
+packages/shopify-extensions/react
+# generated graphql queries
+packages/react/src/internal/gql
+
+#generate package.json to make submodules lookup work
+packages/react/auto
+
+*storybook.log

Contributing.md

@@ -1,13 +1,45 @@
-# Development environment
+# Contributing
 
-We require `node` and `pnpm` to exist. If you're a nix user, we have a flake.nix present that installs the same version of the development tools we use for everyone.
+## Development environment
 
-# Building TypeScript
+We require `node` and `pnpm` to exist. If you're a nix user, we have a `flake.nix` present that installs the same version of the development tools we use for everyone.
+
+## Building TypeScript
 
 - You can run `pnpm build` to build all the projects in the repo
 - You can run `pnpm watch` to start the TypeScript watcher process for all the projects in the repo which will recompile files as you change them
 
-# Prereleasing
+## Running Cypress tests
+
+For running the Cypress tests, you need an API key for communicating with a Gadget app this repo uses for testing. You can ask a Gadget staff member for an existing key, or fork the test app and use your own API key for [this app](https://app.gadget.dev/auth/fork?domain=js-clients-test--development.gadget.app).
+
+To open Cypress and execute tests interactively, run:
+
+```react
+pnpm -F=react run cypress:open
+```
+
+To run Cypress on the command line, run:
+
+```react
+pnpm -F=react run cypress:run
+```
+
+## Regenerating GraphQL queries
+
+Most of the GraphQL queries this library makes are assembled dynamically at runtime based on the user's application and the metadata that comes from their API client. For queries we issue against our static part of the GraphQL schema that each application shares though (under `gadgetMeta { ... }`), we have an automatic type-safe GraphQL query generator in place using `graphql-codegen`.
+
+You can author queries using the `graphql` helper, and then generate types for their return values with
+
+```
+pnpm -F=react gql-gen
+```
+
+Note that it uses the real Gadget app's GraphQL schema to generate types. The URL for the schema is defined in the `packages/react/codegen.ts` file. You may need to add `NODE_TLS_REJECT_UNAUTHORIZED=0` environment variable before running the command if you're having issues with the SSL certificate and you're using a self-signed certificate.
+
+See the [`graphql-codegen`](https://the-guild.dev/graphql/codegen/docs/guides/react-vue#writing-graphql-queries) docs for more info.
+
+## Prereleasing
 
 It can be annoying to work with these packages via `pnpm link` sometimes, so we also support building and releasing the package to a git SHA which can then be installed conventionally in another repo. To push a prerelease, run `pnpm --filter=@gadgetinc/api-client-core prerelease`. This will:
 
@@ -16,7 +48,7 @@ It can be annoying to work with these packages via `pnpm link` sometimes, so we
 - push that to the remote git repo
 - and log out a version you can then refer to from other repos
 
-# Checking test bundle sizes
+## Checking test bundle sizes
 
 We have a small project setup for evaluating what the bundled size of these dependencies might be together. Run:
 
@@ -28,7 +60,7 @@ to build the test bundles.
 
 You can then view the built test bundle size reports at `packages/test-bundles/dist/<bundle>-stats.html` or import the `<bundle>-webpack-stats.json` file into your favourite bundle size analysis tool.
 
-# Releasing
+## Releasing
 
 Releasing is done automatically via [our release workflow](.github/workflows/release.yml). Any commits to the main branch that changes one of our `packages/**/package.json` versions will automatically be published.
 

package.json

@@ -26,6 +26,7 @@
     "@gadget-client/app-with-no-user-model": "^1.10.0",
     "@gadget-client/bulk-actions-test": "^1.113.0",
     "@gadget-client/full-auth": "^1.9.0",
+    "@gadget-client/js-clients-test": "1.498.0-development.854",
     "@gadget-client/kitchen-sink": "1.5.0-development.200",
     "@gadget-client/related-products-example": "^1.865.0",
     "@gadget-client/zxcv-deeply-nested": "^1.212.0",

packages/api-client-core/src/GadgetConnection.ts

@@ -50,7 +50,7 @@ export interface GadgetConnectionOptions {
   authenticationMode?: AuthenticationModeOptions;
   websocketsEndpoint?: string;
   subscriptionClientOptions?: GadgetSubscriptionClientOptions;
-  websocketImplementation?: typeof WebSocket;
+  websocketImplementation?: typeof globalThis.WebSocket;
   fetchImplementation?: typeof globalThis.fetch;
   environment?: string;
   requestPolicy?: ClientOptions["requestPolicy"];
@@ -84,10 +84,10 @@ export class GadgetConnection {
   static version = "<prerelease>" as const;
 
   // Options used when generating new GraphQL clients for the base connection and for for transactions
-  private endpoint: string;
+  readonly endpoint: string;
   private subscriptionClientOptions?: SubscriptionClientOptions;
   private websocketsEndpoint: string;
-  private websocketImplementation?: typeof WebSocket;
+  private websocketImplementation?: typeof globalThis.WebSocket;
   private _fetchImplementation: typeof globalThis.fetch;
   private environment: string;
   private exchanges: Required<Exchanges>;

packages/react/.storybook/main.js

@@ -0,0 +1,16 @@
+/** @type { import('@storybook/react-vite').StorybookConfig } */
+const config = {
+  stories: ["../spec/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-onboarding",
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@chromatic-com/storybook",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+};
+export default config;

packages/react/.storybook/preview.js

@@ -0,0 +1,15 @@
+/** @type { import('@storybook/react').Preview } */
+import "@shopify/polaris/build/esm/styles.css";
+
+const preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

packages/react/codegen.ts

@@ -0,0 +1,21 @@
+import type { CodegenConfig } from "@graphql-codegen/cli";
+
+const config: CodegenConfig = {
+  schema: "https://js-clients-test--development.gadget.app/api/graphql",
+  documents: ["src/**/*.tsx"],
+  ignoreNoDocuments: true, // for better experience with the watcher
+  emitLegacyCommonJSImports: false,
+  generates: {
+    "./src/internal/gql/": {
+      preset: "client",
+      presetConfig: {
+        fragmentMasking: false,
+      },
+      config: {
+        useTypeImports: true,
+      },
+    },
+  },
+};
+
+export default config;

packages/react/cypress.config.ts

@@ -0,0 +1,25 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  component: {
+    devServer: {
+      framework: "react",
+      bundler: "vite",
+      viteConfig: {
+        define: {
+          process: { env: { ...process.env } },
+        },
+      },
+    },
+    setupNodeEvents(on, config) {
+      on("before:browser:launch", (_browser, launchOptions) => {
+        if (process.env["CI"]) {
+          // try to fix https://github.com/cypress-io/cypress/issues/29860
+          launchOptions.args.push("--disable-gpu");
+        }
+        return launchOptions;
+      });
+    },
+  },
+  retries: process.env["CI"] ? 2 : 0,
+});