WIP - Card List

package.json

@@ -1,7 +1,9 @@
 {
   "name": "root",
   "private": true,
-  "workspaces": ["packages/*"],
+  "workspaces": [
+    "packages/*"
+  ],
   "devDependencies": {
     "@types/chrome": "^0.0.128",
     "@types/jest": "^26.0.21"

packages/graphql-lowcode/.gitignore

@@ -1 +1 @@
-node_modules
+node_module

packages/graphql-lowcode/package.json

@@ -8,11 +8,16 @@
     "test": "yarn jest"
   },
   "devDependencies": {
-    "@types/jest": "^26.0.23",
+    "@types/jest": "^26.0.24",
     "graphql": "^15.5.1",
-    "jest": "^27.0.5",
+    "jest": "^27.0.6",
     "ts-jest": "^27.0.3",
     "ts-node": "^10.0.0",
-    "typescript": "^4.3.4"
+    "typescript": "^4.3.5"
+  },
+  "dependencies": {
+    "@types/node": "^16.4.0",
+    "@types/react": "^17.0.14",
+    "@types/react-dom": "^17.0.9"
   }
 }

packages/templates/react-urql-graphql-codegen/.env

@@ -1 +1,2 @@
-REACT_APP_SCHEMA_ENDPOINT = "https://iteria-app-example01.herokuapp.com/v1/graphql"
+REACT_APP_SCHEMA_ENDPOINT = "https://iteria-app-example01.herokuapp.com/v1/graphql"
+SKIP_PREFLIGHT_CHECK=true

packages/templates/react-urql-graphql-codegen/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@material-ui/core": "^4.12.2",
     "dotenv": "^10.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -52,6 +53,5 @@
     "list-files": "^1.1.4",
     "path": "^0.12.7",
     "web-vitals": "^1.0.1"
-
   }
 }

packages/templates/react-urql-graphql-codegen/src/components/App.tsx

@@ -3,18 +3,28 @@ import Fetching from './Fetching'
 import Error from './Error'
 import ListPlaceholder from './ListPlaceholder'
 
-function App() {
+export default function App() {
   const [result] = useGeneratedQuery({
     variables: {}
   })
 
   const { fetching, error, data } = result
-  if (fetching) return <Fetching />;
-  if (error) return <Error error={error} />;
+
+  if (fetching) return (
+    <div className="Cage">
+      <Fetching />
+    </div>
+  );
+
+  if (error) return (
+    <div className="Cage">
+      <Error error={error} />
+    </div>
+  );
 
   return (
-    <ListPlaceholder customers={data?.customers} />
+    <div className="Cage">
+      <ListPlaceholder customers={ data?.customers } />
+    </div>
   );
 }
-
-export default App;

packages/templates/react-urql-graphql-codegen/src/components/Error.tsx

@@ -6,9 +6,9 @@ interface IError {
 const Error: React.FC<IError> = ({ error }) => {
 
   return (
-    <>
+    <div>
       {error}
-    </>
+    </div>
   )
 }
 

packages/templates/react-urql-graphql-codegen/src/components/Fetching.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 
-const Fetching: React.FC = ({ }) => {
+const Fetching: React.FC = () => {
 
   return (
-    <>
+    <div>
       fetching
-    </>
-  )
+    </div>
+  );
 }
 
 export default Fetching

packages/templates/react-urql-graphql-codegen/src/components/ListPlaceholder.tsx

@@ -1,18 +1,23 @@
 import React from 'react';
+import internal from 'stream';
 import { Customer } from '../generated';
+import  SimpleCard from './Simplecard';
 
 interface ICustomers {
   customers: Customer[] | undefined
 }
 const ListPlaceholder: React.FC<ICustomers> = ({ customers }) => {
   return (
-    <>
+    <div>
       {
         customers?.map((customer) => (
-          <p key={customer.id}>{customer.name}</p>
+          // customer.id; customer.name
+          <p key={customer.id}>{SimpleCard(customer.id, customer.name)}</p>
         ))
       }
-    </>
+
+
+    </div>
   )
 }
 

packages/templates/react-urql-graphql-codegen/src/components/Simplecard.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Card from '@material-ui/core/Card';
+import CardActions from '@material-ui/core/CardActions';
+import CardContent from '@material-ui/core/CardContent';
+import Button from '@material-ui/core/Button';
+import Typography from '@material-ui/core/Typography';
+
+const useStyles = makeStyles({
+  root: {
+    minWidth: 275,
+  },
+  bullet: {
+    display: 'inline-block',
+    margin: '0 2px',
+    transform: 'scale(0.8)',
+  },
+  title: {
+    fontSize: 14,
+  },
+  pos: {
+    marginBottom: 12,
+  },
+});
+
+export default function SimpleCard(customer_id: number, customer_name: string) {
+  const classes = useStyles();
+  const bull = <span className={classes.bullet}>•</span>;
+
+  return (
+    <Card className={classes.root}>
+      <CardContent>
+        <Typography variant="h5" component="h2">
+          {customer_name}
+        </Typography>
+        <Typography className={classes.pos} color="textSecondary">
+          {customer_id}
+        </Typography>
+      </CardContent>
+    </Card>
+  );
+}

packages/templates/react-urql-graphql-codegen/src/query.graphql

@@ -8,5 +8,6 @@ query generated {
     createdAt
     avatarUrl
     address
+    seq
   }
 }