Make urql a peerDependency. Update examples to use pure CSS. (#224)

teamwalnut · Nov 12, 2020 · e7eeabc · e7eeabc
1 parent 50c26ae
commit e7eeabc
Show file tree

Hide file tree

Showing 48 changed files with 833 additions and 2,043 deletions.
diff --git a/examples/1-execute-query-mutation/bsconfig.json b/examples/1-execute-query-mutation/bsconfig.json
@@ -20,8 +20,6 @@
     "reason-urql",
     "wonka",
     "reason-react",
-    "bs-css-emotion",
-    "bs-css",
     "@reasonml-community/graphql-ppx"
   ],
   "refmt": 3,

diff --git a/examples/1-execute-query-mutation/package.json b/examples/1-execute-query-mutation/package.json
@@ -2,7 +2,7 @@
   "name": "1-execute-query-mutation",
   "version": "0.1.0",
   "description": "An example of how to execute one off queries and mutations using reason-urql.",
-  "main": "index.bs.js",
+  "main": "src/index.bs.js",
   "author": "Parker Ziegler <[email protected]>",
   "license": "MIT",
   "scripts": {
@@ -13,9 +13,11 @@
   },
   "dependencies": {
     "@reasonml-community/graphql-ppx": "^1.0.1",
-    "bs-css-emotion": "^1.2.0",
+    "graphql": "^15.4.0",
+    "react": "^16.8.0",
     "reason-react": "^0.7.0",
-    "reason-urql": "link:../../"
+    "reason-urql": "link:../../",
+    "urql": "~1.10.0"
   },
   "devDependencies": {
     "bs-platform": "7.3.2",

diff --git a/examples/1-execute-query-mutation/public/index.html b/examples/1-execute-query-mutation/public/index.html
@@ -2,8 +2,11 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
-    <title>reason-urql</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, minimum-scale=1"
+    />
+    <title>reason-urql: Client.execute* methods</title>
     <style type="text/css">
       html {
         font-size: 10px;

diff --git a/examples/1-execute-query-mutation/yarn.lock b/examples/1-execute-query-mutation/yarn.lock
diff --git a/examples/2-query/bsconfig.json b/examples/2-query/bsconfig.json
@@ -17,13 +17,7 @@
     }
   ],
   "suffix": ".bs.js",
-  "bs-dependencies": [
-    "reason-urql",
-    "wonka",
-    "reason-react",
-    "bs-css-emotion",
-    "bs-css"
-  ],
+  "bs-dependencies": ["reason-urql", "wonka", "reason-react"],
   "refmt": 3,
   "warnings": {
     "error": "+5"

diff --git a/examples/2-query/package.json b/examples/2-query/package.json
@@ -1,9 +1,9 @@
 {
   "name": "2-query",
   "version": "0.1.0",
-  "description": "An example of how to use queries in reason-urql.",
-  "main": "index.bs.js",
-  "author": "Kara Stubbs <[email protected]>",
+  "description": "An example of how to use the useQuery hook in reason-urql.",
+  "main": "src/index.bs.js",
+  "author": "Kara Stubbs <[email protected]>, Parker Ziegler <[email protected]>",
   "license": "MIT",
   "scripts": {
     "build": "bsb -make-world",
@@ -12,9 +12,12 @@
     "start:demo": "webpack-dev-server"
   },
   "dependencies": {
-    "bs-css-emotion": "^1.2.0",
+    "@reasonml-community/graphql-ppx": "^1.0.1",
+    "graphql": "^15.4.0",
+    "react": "^16.8.0",
     "reason-react": "^0.7.0",
-    "reason-urql": "link:../../"
+    "reason-urql": "link:../../",
+    "urql": "~1.10.0"
   },
   "devDependencies": {
     "@baransu/graphql_ppx_re": "^0.7.1",

diff --git a/examples/2-query/public/index.css b/examples/2-query/public/index.css
@@ -0,0 +1,106 @@
+.dex-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: auto;
+}
+
+.dex {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border-radius: 5px;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
+
+.dex > * + * {
+  margin-top: 1rem;
+}
+
+.dex__image-container {
+  padding: 4rem 8rem 0;
+}
+
+.dex__image {
+  display: inline-block;
+  max-width: 100%;
+  height: 12rem;
+  width: 12rem;
+}
+
+.dex__text {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  align-self: stretch;
+  padding: 2rem 8rem;
+  background: #f25050;
+  color: #ffffff;
+  border-top: 2px solid hsl(210, 23%, 95%);
+}
+
+.dex__title {
+  font-size: 2rem;
+  margin: 0;
+  padding: 0.5rem;
+}
+
+.dex__subtitle {
+  font-size: 1.5rem;
+  margin: 0;
+  padding: 0.25rem;
+}
+
+.dex__stats {
+  font-size: 1.2rem;
+}
+
+.sidebar-container {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  grid-template-columns: minmax(20rem, 20%) 1fr;
+}
+
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  background: #f25050;
+  padding: 1rem;
+  overflow: auto;
+}
+
+.sidebar__search {
+  font-size: 1.6rem;
+  margin-bottom: 1rem;
+  padding: 0.5rem;
+  border: none;
+}
+
+.sidebar__list {
+  margin: 0 -1rem;
+  padding-left: 0;
+}
+
+.sidebar__list-item {
+  list-style-type: none;
+  cursor: pointer;
+}
+
+.sidebar__list-item:hover {
+  background: #f29441;
+}
+
+.sidebar__button {
+  font-size: 1.4rem;
+  color: #ffffff;
+  background: none;
+  border: none;
+  width: 100%;
+  padding: 1rem;
+  text-align: left;
+  cursor: pointer;
+}
diff --git a/examples/2-query/public/index.html b/examples/2-query/public/index.html
@@ -2,16 +2,30 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <title>reason-urql</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, minimum-scale=1"
+    />
+    <title>reason-urql: useQuery</title>
     <style type="text/css">
+      html {
+        font-size: 10px;
+        font-family: "DM Mono", monospace;
+      }
+
       body {
         margin: 0;
       }
+
+      * {
+        box-sizing: border-box;
+      }
     </style>
     <link
-      href="https://fonts.googleapis.com/css?family=Space+Mono"
+      href="https://fonts.googleapis.com/css?family=DM+Mono&display=swap"
       rel="stylesheet"
     />
+    <link href="./index.css" rel="stylesheet" />
   </head>
   <body>
     <div id="root"></div>

diff --git a/examples/2-query/src/Container.re b/examples/2-query/src/Container.re
@@ -31,13 +31,13 @@ let make = () => {
   | Fetching => <div> "Loading"->React.string </div>
   | Data(data) =>
     switch (data##pokemons) {
-    | Some(pokemons) => <PokemonList pokemons={pokemons->flattenPokemon} />
+    | Some(pokemon) => <PokemonList pokemon={pokemon->flattenPokemon} />
     | None => <div> "No Data"->React.string </div>
     }
   | PartialData(data, e) =>
     <div>
       {switch (data##pokemons) {
-       | Some(pokemons) => <PokemonList pokemons={pokemons->flattenPokemon} />
+       | Some(pokemon) => <PokemonList pokemon={pokemon->flattenPokemon} />
        | None => <div> "No Data"->React.string </div>
        }}
       <p>

diff --git a/examples/2-query/src/Pokemon.re b/examples/2-query/src/Pokemon.re
@@ -1,5 +1,4 @@
 open ReasonUrql;
-open PokemonStyles;
 
 module GetPokemon = [%graphql
   {|
@@ -44,19 +43,17 @@ let make = (~pokemon: string) => {
           Some(height),
           Some(weight),
         ) =>
-        <section className=Styles.dexContainer>
-          <div className=Styles.dex>
-            <div className=Styles.dexImageContainer>
-              <img className=Styles.dexImage src=image />
+        <section className="dex-container">
+          <div className="dex">
+            <div className="dex__image-container">
+              <img className="dex__image" src=image />
             </div>
-            <div className=Styles.dexText>
-              <h1 className=Styles.dexTitle> name->React.string </h1>
-              <h2 className=Styles.dexSubTitle>
-                classification->React.string
-              </h2>
+            <div className="dex__text">
+              <h1 className="dex__title"> name->React.string </h1>
+              <h2 className="dex__subtitle"> classification->React.string </h2>
               {switch (height##maximum, weight##maximum) {
                | (Some(heightMax), Some(weightMax)) =>
-                 <div>
+                 <div className="dex__stats">
                    <p> {("Height: " ++ heightMax)->React.string} </p>
                    <p> {("Weight: " ++ weightMax)->React.string} </p>
                  </div>

diff --git a/examples/2-query/src/PokemonList.re b/examples/2-query/src/PokemonList.re
@@ -1,9 +1,5 @@
-open PokemonListStyles;
-
 type state = {
-  listOfPokemons: array(string),
-  textInput: string,
-  filteredList: list(string),
+  search: string,
   selectedPokemon: option(string),
 };
 
@@ -12,8 +8,8 @@ type action =
   | SelectPokemon(string);
 
 /* Filters pokemon list by input. */
-let filterPokemonList = (~pokemonArray: array(string), ~input: string) =>
-  pokemonArray
+let filterPokemon = (input: string, pokemon: array(string)) =>
+  pokemon
   |> Array.to_list
   |> List.filter(pokemon =>
        Js.String.includes(
@@ -23,59 +19,44 @@ let filterPokemonList = (~pokemonArray: array(string), ~input: string) =>
      );
 
 [@react.component]
-let make = (~pokemons) => {
+let make = (~pokemon) => {
   let (state, dispatch) =
     React.useReducer(
       (state, action) =>
         switch (action) {
-        | ChangeInput(textInput) => {
-            ...state,
-            textInput,
-            filteredList:
-              filterPokemonList(
-                ~pokemonArray=state.listOfPokemons,
-                ~input=textInput,
-              ),
-          }
+        | ChangeInput(search) => {...state, search}
         | SelectPokemon(selectedPokemon) => {
             ...state,
             selectedPokemon: Some(selectedPokemon),
           }
         },
-      {
-        listOfPokemons: pokemons,
-        textInput: "",
-        filteredList: filterPokemonList(~pokemonArray=pokemons, ~input=""),
-        selectedPokemon: Some("Bulbasaur"),
-      },
-    );
-
-  let buildPokemonList =
-    React.useCallback0((pokemonList: list(string)) =>
-      pokemonList
-      |> List.map(pokemon =>
-           <li key=pokemon className=Styles.listItem>
-             <button
-               className=Styles.button
-               onClick={_event => dispatch(SelectPokemon(pokemon))}>
-               pokemon->React.string
-             </button>
-           </li>
-         )
+      {search: "", selectedPokemon: Some("Bulbasaur")},
     );
 
-  <div className=Styles.container>
-    <section className=Styles.aside>
+  <div className="sidebar-container">
+    <section className="sidebar">
       <input
-        className=Styles.search
-        value={state.textInput}
+        className="sidebar__search"
+        value={state.search}
         onChange={event =>
           dispatch(ChangeInput(event->ReactEvent.Form.target##value))
         }
         placeholder="Search for a Pokemon..."
       />
-      <ul className=Styles.list>
-        {buildPokemonList(state.filteredList)->Array.of_list->React.array}
+      <ul className="sidebar__list">
+        {pokemon
+         |> filterPokemon(state.search)
+         |> List.map(pokemon =>
+              <li key=pokemon className="sidebar__list-item">
+                <button
+                  className="sidebar__button"
+                  onClick={_event => dispatch(SelectPokemon(pokemon))}>
+                  pokemon->React.string
+                </button>
+              </li>
+            )
+         |> Array.of_list
+         |> React.array}
       </ul>
     </section>
     {switch (state.selectedPokemon) {