From 9a8caacd4e85d6a01e2e090b82f7deaaea479a38 Mon Sep 17 00:00:00 2001 From: Haider Alshamma Date: Thu, 9 Jan 2025 11:41:06 -0500 Subject: [PATCH] docs: create an example using the AsyncSelect with ApolloClient --- package.json | 2 + .../AsyncSelect.lazyQuery.story.tsx | 59 ++++++++++ src/AsyncSelect/AsyncSelect.query.story.tsx | 48 ++++++++ src/AsyncSelect/AsyncSelect.story.tsx | 3 +- yarn.lock | 111 +++++++++++++++++- 5 files changed, 220 insertions(+), 3 deletions(-) create mode 100644 src/AsyncSelect/AsyncSelect.lazyQuery.story.tsx create mode 100644 src/AsyncSelect/AsyncSelect.query.story.tsx diff --git a/package.json b/package.json index b502cd852..184b55aae 100644 --- a/package.json +++ b/package.json @@ -61,6 +61,7 @@ "typescript": "4.9.5" }, "devDependencies": { + "@apollo/client": "^3.11.8", "@babel/core": "^7.0.0-0", "@babel/plugin-proposal-private-methods": "^7.10.4", "@babel/plugin-proposal-private-property-in-object": "^7.10.4", @@ -117,6 +118,7 @@ "enzyme-to-json": "3.4.4", "eslint": "6.8.0", "eslint-plugin-prettier": "^3.1.4", + "graphql": "15.8.0", "http-server": "^14.0.0", "husky": "^4.3.0", "jest": "29.7.0", diff --git a/src/AsyncSelect/AsyncSelect.lazyQuery.story.tsx b/src/AsyncSelect/AsyncSelect.lazyQuery.story.tsx new file mode 100644 index 000000000..26714f71b --- /dev/null +++ b/src/AsyncSelect/AsyncSelect.lazyQuery.story.tsx @@ -0,0 +1,59 @@ +import { ApolloClient, InMemoryCache, gql, ApolloProvider, useLazyQuery } from "@apollo/client"; +import React, { useCallback } from "react"; +import { AsyncSelect } from "../index"; + +export default { + title: "Components/AsyncSelect/LazyQuery", +}; + +interface Country { + name: string; +} + +const client = new ApolloClient({ + uri: "https://countries.trevorblades.com/", + cache: new InMemoryCache(), +}); + +const GET_COUNTRIES = gql` + query { + countries { + name + } + } +`; + +const AsyncSelectWithApollo = () => { + const [getCountries, { loading, data }] = useLazyQuery(GET_COUNTRIES); + + const loadOptions = useCallback( + async (inputValue: string) => { + // Trigger the query + await getCountries(); + + if (data?.countries) { + return data.countries + .filter((country: Country) => country.name.toLowerCase().includes(inputValue.toLowerCase())) + .map((country: Country) => ({ + label: country.name, + value: country.name, + })); + } + + return []; + }, + [data, getCountries] + ); + + return ; +}; + +export const WithApolloClientExample = () => ( + + + +); + +WithApolloClientExample.story = { + name: "With Apollo Client Example", +}; diff --git a/src/AsyncSelect/AsyncSelect.query.story.tsx b/src/AsyncSelect/AsyncSelect.query.story.tsx new file mode 100644 index 000000000..65474e5d3 --- /dev/null +++ b/src/AsyncSelect/AsyncSelect.query.story.tsx @@ -0,0 +1,48 @@ +import { ApolloClient, InMemoryCache, gql, ApolloProvider } from "@apollo/client"; +import React from "react"; +import { AsyncSelect } from "../index"; + +export default { + title: "Components/AsyncSelect/ClientQuery", +}; + +const client = new ApolloClient({ + uri: "https://countries.trevorblades.com/", + cache: new InMemoryCache(), +}); + +interface Country { + name: string; +} + +const GET_COUNTRIES = gql` + query { + countries { + name + } + } +`; + +const loadCountryOptions = async (inputValue: string) => { + try { + const { data } = await client.query({ + query: GET_COUNTRIES, + }); + + return data.countries + .filter((country: Country) => country.name.toLowerCase().includes(inputValue.toLowerCase())) + .map((country: Country) => ({ + label: country.name, + value: country.name, + })); + } catch (error) { + console.error("Error loading countries:", error); + return []; + } +}; + +export const WithApolloClientExample = () => ( + + + +); diff --git a/src/AsyncSelect/AsyncSelect.story.tsx b/src/AsyncSelect/AsyncSelect.story.tsx index bd4ef9733..e6dfb7ab2 100644 --- a/src/AsyncSelect/AsyncSelect.story.tsx +++ b/src/AsyncSelect/AsyncSelect.story.tsx @@ -1,9 +1,8 @@ import React, { useRef } from "react"; import { action } from "@storybook/addon-actions"; import { useState } from "react"; -import { AsyncSelect, Button } from "../index"; +import { AsyncSelect, Button, Flex } from "../index"; import { loadMatchingProvinces } from "./fixtures"; -import { Flex } from "../Flex"; export default { title: "Components/AsyncSelect", diff --git a/yarn.lock b/yarn.lock index e0b049876..54e45dc1b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10,6 +10,26 @@ "@jridgewell/gen-mapping" "^0.3.0" "@jridgewell/trace-mapping" "^0.3.9" +"@apollo/client@^3.11.8": + version "3.12.4" + resolved "https://registry.yarnpkg.com/@apollo/client/-/client-3.12.4.tgz#d8b5753459dfb5642129247c02956fe5b5ad8f11" + integrity sha512-S/eC9jxEW9Jg1BjD6AZonE1fHxYuvC3gFHop8FRQkUdeK63MmBD5r0DOrN2WlJbwha1MSD6A97OwXwjaujEQpA== + dependencies: + "@graphql-typed-document-node/core" "^3.1.1" + "@wry/caches" "^1.0.0" + "@wry/equality" "^0.5.6" + "@wry/trie" "^0.5.0" + graphql-tag "^2.12.6" + hoist-non-react-statics "^3.3.2" + optimism "^0.18.0" + prop-types "^15.7.2" + rehackt "^0.1.0" + response-iterator "^0.2.6" + symbol-observable "^4.0.0" + ts-invariant "^0.10.3" + tslib "^2.3.0" + zen-observable-ts "^1.2.5" + "@arcanis/slice-ansi@^1.0.2": version "1.1.1" resolved "https://registry.yarnpkg.com/@arcanis/slice-ansi/-/slice-ansi-1.1.1.tgz#0ee328a68996ca45854450033a3d161421dc4f55" @@ -3254,6 +3274,11 @@ resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6" integrity sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw== +"@graphql-typed-document-node/core@^3.1.1": + version "3.2.0" + resolved "https://registry.yarnpkg.com/@graphql-typed-document-node/core/-/core-3.2.0.tgz#5f3d96ec6b2354ad6d8a28bf216a1d97b5426861" + integrity sha512-mB9oAsNCm9aM3/SOv4YtBMqZbYj10R7dkq8byBqxGY/ncFwhf2oQzMV+LCRlWoDSEBJ3COiR1yeDvMtsoOsuFQ== + "@hapi/hoek@^9.0.0": version "9.2.0" resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-9.2.0.tgz#f3933a44e365864f4dad5db94158106d511e8131" @@ -7221,6 +7246,34 @@ object.fromentries "^2.0.0" prop-types "^15.7.0" +"@wry/caches@^1.0.0": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@wry/caches/-/caches-1.0.1.tgz#8641fd3b6e09230b86ce8b93558d44cf1ece7e52" + integrity sha512-bXuaUNLVVkD20wcGBWRyo7j9N3TxePEWFZj2Y+r9OoUzfqmavM84+mFykRicNsBqatba5JLay1t48wxaXaWnlA== + dependencies: + tslib "^2.3.0" + +"@wry/context@^0.7.0": + version "0.7.4" + resolved "https://registry.yarnpkg.com/@wry/context/-/context-0.7.4.tgz#e32d750fa075955c4ab2cfb8c48095e1d42d5990" + integrity sha512-jmT7Sb4ZQWI5iyu3lobQxICu2nC/vbUhP0vIdd6tHC9PTfenmRmuIFqktc6GH9cgi+ZHnsLWPvfSvc4DrYmKiQ== + dependencies: + tslib "^2.3.0" + +"@wry/equality@^0.5.6": + version "0.5.7" + resolved "https://registry.yarnpkg.com/@wry/equality/-/equality-0.5.7.tgz#72ec1a73760943d439d56b7b1e9985aec5d497bb" + integrity sha512-BRFORjsTuQv5gxcXsuDXx6oGRhuVsEGwZy6LOzRRfgu+eSfxbhUQ9L9YtSEIuIjY/o7g3iWFjrc5eSY1GXP2Dw== + dependencies: + tslib "^2.3.0" + +"@wry/trie@^0.5.0": + version "0.5.0" + resolved "https://registry.yarnpkg.com/@wry/trie/-/trie-0.5.0.tgz#11e783f3a53f6e4cd1d42d2d1323f5bc3fa99c94" + integrity sha512-FNoYzHawTMk/6KMQoEG5O4PuioX19UbwdQKF44yw0nLfOypfQdjtfZzo/UIJWAJ23sNIFbD1Ug9lbaDGMwbqQA== + dependencies: + tslib "^2.3.0" + "@xstate/react@^3.0.1": version "3.2.2" resolved "https://registry.yarnpkg.com/@xstate/react/-/react-3.2.2.tgz#ddf0f9d75e2c19375b1e1b7335e72cb99762aed8" @@ -13404,6 +13457,18 @@ grapheme-splitter@^1.0.4: resolved "https://registry.yarnpkg.com/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz#9cf3a665c6247479896834af35cf1dbb4400767e" integrity sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ== +graphql-tag@^2.12.6: + version "2.12.6" + resolved "https://registry.yarnpkg.com/graphql-tag/-/graphql-tag-2.12.6.tgz#d441a569c1d2537ef10ca3d1633b48725329b5f1" + integrity sha512-FdSNcu2QQcWnM2VNvSCCDCVS5PpPqpzgFT8+GXzqJuoDd0CBncxCY278u4mhRO7tMgo2JjgJA5aZ+nWSQ/Z+xg== + dependencies: + tslib "^2.1.0" + +graphql@15.8.0: + version "15.8.0" + resolved "https://registry.yarnpkg.com/graphql/-/graphql-15.8.0.tgz#33410e96b012fa3bdb1091cc99a94769db212b38" + integrity sha512-5gghUc24tP9HRznNpV2+FIoq3xKkj5dTQqf4v0CpdPbFVwFkWoxOM+o+2OC9ZSvjEMTjfmG9QT+gcvggTwW1zw== + gud@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/gud/-/gud-1.0.0.tgz#a489581b17e6a70beca9abe3ae57de7a499852c0" @@ -13708,7 +13773,7 @@ hmac-drbg@^1.0.1: minimalistic-assert "^1.0.0" minimalistic-crypto-utils "^1.0.1" -hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1: +hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2: version "3.3.2" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== @@ -18160,6 +18225,16 @@ opener@^1.5.1, opener@^1.5.2: resolved "https://registry.yarnpkg.com/opener/-/opener-1.5.2.tgz#5d37e1f35077b9dcac4301372271afdeb2a13598" integrity sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A== +optimism@^0.18.0: + version "0.18.1" + resolved "https://registry.yarnpkg.com/optimism/-/optimism-0.18.1.tgz#5cf16847921413dbb0ac809907370388b9c6335f" + integrity sha512-mLXNwWPa9dgFyDqkNi54sjDyNJ9/fTI6WGBLgnXku1vdKY/jovHfZT5r+aiVeFFLOz+foPNOm5YJ4mqgld2GBQ== + dependencies: + "@wry/caches" "^1.0.0" + "@wry/context" "^0.7.0" + "@wry/trie" "^0.5.0" + tslib "^2.3.0" + optionator@^0.8.1, optionator@^0.8.3: version "0.8.3" resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.3.tgz#84fa1d036fe9d3c7e21d99884b601167ec8fb495" @@ -20389,6 +20464,11 @@ regjsparser@^0.6.4: dependencies: jsesc "~0.5.0" +rehackt@^0.1.0: + version "0.1.0" + resolved "https://registry.yarnpkg.com/rehackt/-/rehackt-0.1.0.tgz#a7c5e289c87345f70da8728a7eb878e5d03c696b" + integrity sha512-7kRDOuLHB87D/JESKxQoRwv4DzbIdwkAGQ7p6QKGdVlY1IZheUnVhlk/4UZlNUVxdAXpyxikE3URsG067ybVzw== + relateurl@^0.2.7: version "0.2.7" resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9" @@ -20602,6 +20682,11 @@ resolve@^2.0.0-next.3: is-core-module "^2.2.0" path-parse "^1.0.6" +response-iterator@^0.2.6: + version "0.2.11" + resolved "https://registry.yarnpkg.com/response-iterator/-/response-iterator-0.2.11.tgz#6d3e4f12d2e212f28bc742bc639a37939a4483ca" + integrity sha512-5tdhcAeGMSyM0/FoxAYjoOxQZ2tRR2H/S/t6kGRXu6iiWcGY5UnZgkVANbTwBVUSGqWu0ADctmoi6lOCIF8uKQ== + responselike@^2.0.0: version "2.0.1" resolved "https://registry.yarnpkg.com/responselike/-/responselike-2.0.1.tgz#9a0bc8fdc252f3fb1cca68b016591059ba1422bc" @@ -22133,6 +22218,11 @@ swap-case@^1.1.0: lower-case "^1.1.1" upper-case "^1.1.1" +symbol-observable@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-4.0.0.tgz#5b425f192279e87f2f9b937ac8540d1984b39205" + integrity sha512-b19dMThMV4HVFynSAM1++gBHAbk2Tc/osgLIBZMKsyqh34jb2e8Os7T6ZW/Bt3pJFdBTd2JwAnAAEQV7rSNvcQ== + symbol-tree@^3.2.4: version "3.2.4" resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2" @@ -22608,6 +22698,13 @@ ts-essentials@^2.0.3: resolved "https://registry.yarnpkg.com/ts-essentials/-/ts-essentials-2.0.12.tgz#c9303f3d74f75fa7528c3d49b80e089ab09d8745" integrity sha512-3IVX4nI6B5cc31/GFFE+i8ey/N2eA0CZDbo6n0yrz0zDX8ZJ8djmU1p+XRz7G3is0F3bB3pu2pAroFdAWQKU3w== +ts-invariant@^0.10.3: + version "0.10.3" + resolved "https://registry.yarnpkg.com/ts-invariant/-/ts-invariant-0.10.3.tgz#3e048ff96e91459ffca01304dbc7f61c1f642f6c" + integrity sha512-uivwYcQaxAucv1CzRp2n/QdYPo4ILf9VXgH19zEIjFx2EJufV16P0JtJVpYHy89DItG6Kwj2oIUjrcK5au+4tQ== + dependencies: + tslib "^2.1.0" + ts-jest@^26.1.1: version "26.5.6" resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-26.5.6.tgz#c32e0746425274e1dfe333f43cd3c800e014ec35" @@ -23937,6 +24034,18 @@ yocto-queue@^0.1.0: resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b" integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q== +zen-observable-ts@^1.2.5: + version "1.2.5" + resolved "https://registry.yarnpkg.com/zen-observable-ts/-/zen-observable-ts-1.2.5.tgz#6c6d9ea3d3a842812c6e9519209365a122ba8b58" + integrity sha512-QZWQekv6iB72Naeake9hS1KxHlotfRpe+WGNbNx5/ta+R3DNjVO2bswf63gXlWDcs+EMd7XY8HfVQyP1X6T4Zg== + dependencies: + zen-observable "0.8.15" + +zen-observable@0.8.15: + version "0.8.15" + resolved "https://registry.yarnpkg.com/zen-observable/-/zen-observable-0.8.15.tgz#96415c512d8e3ffd920afd3889604e30b9eaac15" + integrity sha512-PQ2PC7R9rslx84ndNBZB/Dkv8V8fZEpk83RLgXtYd0fwUgEjseMn1Dgajh2x6S8QbZAFa9p2qVCEuYZNgve0dQ== + zwitch@^1.0.0: version "1.0.5" resolved "https://registry.yarnpkg.com/zwitch/-/zwitch-1.0.5.tgz#d11d7381ffed16b742f6af7b3f223d5cd9fe9920"