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",