Dynamically load available familyStyles (#51)

* families and styles in dropdown selects

* capitalize Kit

* halfway styling for putting family and styles in dropdowns

* WIP: cleanup and generalize familyStyles

* update familyStyles on initial kit metadata query

* handle duotone custom icons

* add fak and fakd to dropdowns when it's a kit

* remove style filter and wire-up familyStyle dropdowns

* remove obsolete code pertaining to hardcoded familyStyles and prefixes

* fix pathData for iconUpload in test

* WIP: compute familyStyle path segments from prefixes without hardcoding

* remove obsolete test expectations

* remove obsolete IconPrefix import

* don't use watch after al

* fix onKeyUp to only issue a new query with the query changes

* change the defaultSearchResult to stop hardcoding pro familyStyles

* dynamically build the defaultIcons query result to avoid harcoding pro familyStyles

* handle duotone legacy form for familyStyle path segments

* remove obsolete slots

* rebuild auto-generated readmes

* exclude custom icon familyStyles when building default icon search results

* include kit and kit-duotone on family drop down only when present in the kit

* format labels for drop down options

* update handleQuery to take optional second arg for variables

* for search input field, respond to onInput instead of onKeyUp

* add selected attr to style drop down

necessary to ensure that it re-renders when this.selectedFamily or this.selectedState changes

* fix test

* auto-formatting

* update readmes from rebuild

* update changelog

* Update CHANGELOG to show new QueryHandler type signature

* auto-formatting

* Update CHANGELOG to mention duotone custom icons

* update version and deps

---------

Co-authored-by: Frances Botsford <[email protected]>

CHANGELOG.md

@@ -5,6 +5,73 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/) and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ---
+## [0.7.0](https://github.com/FortAwesome/fa-icon-chooser/releases/tag/0.7.0) - 2024-06-05
+
+### Changed
+
+- Family and style selection are now based on drop down selections, and the available
+  values are retrieved from the GraphQL API. This removes the hardcoding of familyStyles
+  and lets the icon chooser work with all available familyStyles for the active version
+  of Font Awesome.
+- Several slots for messages to indicate the unavailability of certain familyStyles
+  have been removed. They are no longer used, now that the UI only includes in
+  the drop down selectors available familyStyle combinations for the active version
+  of Font Awesome.
+
+  The following slots have been removed:
+  - `light-requires-pro`
+  - `thin-requires-pro`
+  - `duotone-requires-pro`
+  - `sharp-solid-requires-pro`
+  - `sharp-regular-requires-pro`
+  - `sharp-light-requires-pro`
+  - `uploaded-requires-pro`
+  - `sharp-solid-style-filter-sr-message`
+  - `sharp-regular-style-filter-sr-message`
+  - `sharp-light-style-filter-sr-message`
+  - `solid-style-filter-sr-message`
+  - `regular-style-filter-sr-message`
+  - `light-style-filter-sr-message`
+  - `thin-style-filter-sr-message`
+  - `duotone-style-filter-sr-message`
+  - `brands-style-filter-sr-message`
+  - `uploaded-style-filter-sr-message`
+
+- The `QueryHandler` type now takes a second optional argument for variables.
+  (See also Breaking Changes)o
+
+### Fixed
+- Duotone custom icons in kits now work correctly.
+
+### Breaking Changes
+
+- The icon chooser's queries now use variables, instead of interpolating all values
+  into a single query document string. Thus, any `QueryHandler` callback must be updated
+  to handle the query variables.
+
+  Its type signature is now:
+
+  ```typescript
+  export type QueryHandler = (document: string, variables?: object) => Promise<any>;
+  ```
+
+  Suggestion:
+
+  ```javascript
+  async function handleQuery(query, variables) {
+    const headers = buildHeaders()
+    const url = getApiUrl()
+    const body = JSON.stringify({query, variables})
+
+    return fetch(url, {
+      method: "POST",
+      headers,
+      body
+    })
+  }
+  ```
+
+
 ## [0.6.0](https://github.com/FortAwesome/fa-icon-chooser/releases/tag/0.6.0) - 2023-07-12
 
 ### Changed
@@ -44,4 +111,4 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ### Added
 
-- Initial version
+- Initial version

packages/fa-icon-chooser-react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fortawesome/fa-icon-chooser-react",
   "sideEffects": false,
-  "version": "0.6.0",
+  "version": "0.7.0",
   "license": "MIT",
   "private": false,
   "description": "React specific wrapper for @fortawesome/fa-icon-chooser",
@@ -35,7 +35,7 @@
     "typescript": "^4.3.2"
   },
   "dependencies": {
-    "@fortawesome/fa-icon-chooser": "0.6.0"
+    "@fortawesome/fa-icon-chooser": "0.7.0"
   },
   "peerDependencies": {
     "react": "^16 || ^17 || ^18",