Add test lib - 1st try

.eslintignore

@@ -0,0 +1,3 @@
+/build/*
+/node_modules/*
+/public/*

.eslintrc.js

@@ -1,6 +1,9 @@
 /** @type {import('eslint').Linter.Config} */
 module.exports = {
   extends: ["@remix-run/eslint-config", "@remix-run/eslint-config/node"],
+  rules: {
+    "@typescript-eslint/consistent-type-imports": "off",
+  },
 };
 
 // NOTE!!!!

.github/actions/setup/action.yml

@@ -0,0 +1,13 @@
+name: "Setup Action"
+description: "Setup env for running actions"
+runs:
+  using: "composite"
+  steps:
+    - name: Use Node.js
+      uses: actions/setup-node@v2
+      with:
+        node-version: "20.5.1"
+
+    - name: Install Dependencies
+      run: yarn install
+      shell: bash

.github/workflows/lint.yml

@@ -0,0 +1,16 @@
+name: Lint
+
+on: [push]
+
+jobs:
+  run:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Setup Repo
+        uses: ./.github/actions/setup
+
+      - name: Run linting
+        run: yarn lint

.github/workflows/typecheck.yml

@@ -0,0 +1,16 @@
+name: Typescript Type Check
+
+on: [push]
+
+jobs:
+  run:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Setup Repo
+        uses: ./.github/actions/setup
+
+      - name: Run tsc
+        run: yarn tsc

.gitignore

@@ -3,5 +3,5 @@ node_modules
 /.cache
 /build
 /public/build
-.env
-/app/@types
+# .env
+

.vscode/extensions.json

@@ -5,6 +5,7 @@
     "graphql.vscode-graphql",
     "graphql.vscode-graphql-syntax",
     "esbenp.prettier-vscode",
-    "bradlc.vscode-tailwindcss"
+    "bradlc.vscode-tailwindcss",
+    "github.vscode-github-actions"
   ]
 }

README.md

@@ -1,13 +1,11 @@
-# Welcome to Remix!
-
-- [Remix Docs](https://remix.run/docs)
+# Welcome to Performa!
 
 ## Development
 
 From your terminal:
 
 ```sh
-npm run dev
+yarn dev
 ```
 
 This starts your app in development mode, rebuilding assets on file changes.
@@ -17,13 +15,13 @@ This starts your app in development mode, rebuilding assets on file changes.
 First, build your app for production:
 
 ```sh
-npm run build
+yarn build
 ```
 
 Then run the app in production mode:
 
 ```sh
-npm start
+yarn start
 ```
 
 Now you'll need to pick a host to deploy it to.
@@ -56,3 +54,21 @@ rm -rf app
 # copy your app over
 cp -R ../my-old-remix-app/app app
 ```
+
+## Generate GraphQL types
+
+run `yarn graphql`
+if it fails, run `yarn graphql --verbose`
+Note: GraphQL is introspective. This means you can query a GraphQL schema for details about itself.
+
+## Helps / Docs
+
+- GraphQL Integration
+  - https://www.apollographql.com/blog/apollo-client/how-to-use-apollo-client-with-remix/
+- Authentication:
+  - Remix Auth: https://github.com/sergiodxa/remix-auth
+  - Google Auth Strategy: https://github.com/pbteja1998/remix-auth-google
+
+# TODOs
+
+Check todos here: https://github.com/mahmoudmoravej/testui/issues/2

app/@types/fragment-masking.ts

@@ -0,0 +1,66 @@
+import { ResultOf, DocumentTypeDecoration, TypedDocumentNode } from '@graphql-typed-document-node/core';
+import { FragmentDefinitionNode } from 'graphql';
+import { Incremental } from './graphql';
+
+
+export type FragmentType<TDocumentType extends DocumentTypeDecoration<any, any>> = TDocumentType extends DocumentTypeDecoration<
+  infer TType,
+  any
+>
+  ? [TType] extends [{ ' $fragmentName'?: infer TKey }]
+    ? TKey extends string
+      ? { ' $fragmentRefs'?: { [key in TKey]: TType } }
+      : never
+    : never
+  : never;
+
+// return non-nullable if `fragmentType` is non-nullable
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>>
+): TType;
+// return nullable if `fragmentType` is nullable
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | null | undefined
+): TType | null | undefined;
+// return array of non-nullable if `fragmentType` is array of non-nullable
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>>
+): ReadonlyArray<TType>;
+// return array of nullable if `fragmentType` is array of nullable
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>> | null | undefined
+): ReadonlyArray<TType> | null | undefined;
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>> | null | undefined
+): TType | ReadonlyArray<TType> | null | undefined {
+  return fragmentType as any;
+}
+
+
+export function makeFragmentData<
+  F extends DocumentTypeDecoration<any, any>,
+  FT extends ResultOf<F>
+>(data: FT, _fragment: F): FragmentType<F> {
+  return data as FragmentType<F>;
+}
+export function isFragmentReady<TQuery, TFrag>(
+  queryNode: DocumentTypeDecoration<TQuery, any>,
+  fragmentNode: TypedDocumentNode<TFrag>,
+  data: FragmentType<TypedDocumentNode<Incremental<TFrag>, any>> | null | undefined
+): data is FragmentType<typeof fragmentNode> {
+  const deferredFields = (queryNode as { __meta__?: { deferredFields: Record<string, (keyof TFrag)[]> } }).__meta__
+    ?.deferredFields;
+
+  if (!deferredFields) return true;
+
+  const fragDef = fragmentNode.definitions[0] as FragmentDefinitionNode | undefined;
+  const fragName = fragDef?.name?.value;
+
+  const fields = (fragName && deferredFields[fragName]) || [];
+  return fields.length > 0 && fields.every(field => data && field in data);
+}