Merge pull request #36 from sillsdev/separate_core_component

fix: dialog buttons and header should not be baked into the component (#36)

components/language-chooser/react/common/language-chooser-react-hook/useLanguageChooser.ts

@@ -191,5 +191,5 @@ export const useLanguageChooser = (
 };
 
 export function defaultDisplayName(language: ILanguage) {
-  return stripDemarcation(language.autonym || language.exonym || "");
+  return stripDemarcation(language.autonym || language.exonym);
 }

components/language-chooser/react/language-chooser-react-mui/README.md

@@ -13,52 +13,39 @@ Initially developed for use in [BloomDesktop](https://github.com/BloomBooks/Bloo
 
 ### Installation
 
-Requires interfaces, methods, etc. from [@ethnolib/find-language](../../common/find-language/README.md).
 Install with npm:
 
 ```
-npm i @ethnolib/find-language
 npm i @ethnolib/language-chooser-react-mui
 ```
 
 ### Sizing
 
-Designed to be used in a dialog. The desired height and width need to be set on the parent dialog (see example below).
+The LanguageChooser will grow to fit the size of its parent. Height and width should be set on the parent. An explicit size should be set on its parent. Our recommended size is 1084x586 (to fit on a low-end notebook with windows task bar) but it will work in a variety of sizes.
 
 ### Props
 
 - `searchResultModifier: (
   results: FuseResult<ILanguage>[],
   searchString: string
 ) => ILanguage[]` - Can be used to add, remove, and modify results. See [find-language](../../common/find-language/README.md) for details.
-- `initialState: IOrthography` - The initial state of selections with which to populate the LanguageChooser when it is first opened, e.g. if the user has already selected a language and is modifying it.
-- `onClose: (languageSelection: IOrthography | undefined) => void` - This is called when the user clicks the "OK" or "Cancel" button to close the dialog.
+- `initialSearchString?: string`
+- `initialSelectionLanguageTag?: string` - The Language Chooser will open with the language information captured by this language tag being already selected. If the user has already previously selected a language and is using the LanguageChooser to modify their selection, use this to prepopulate with their preexisting selection.
 
-### Example
+  - We expect this to be a language tag which was output either by this Language Chooser or by the [libPalasso](https://github.com/sillsdev/libpalaso)-based language picker. **The language subtag must be the default language subtag for the language** (the first part of the "tag" field of langtags.json), which may be a 2-letter code even if an equivalent ISO 639-3 code exists. May not corectly handle irregular codes, extension codes, langtags with both macrolanguage code and language code, and other comparably unusual nuances of BCP-47.
 
-```
-/** @jsxImportSource @emotion/react */
-import { css } from "@emotion/react";
-import { Dialog } from "@mui/material";
-import { LanguageChooser } from "@ethnolib/language-chooser-react-mui";
-
-  <Dialog
-    open={open}
-    maxWidth={"md"}
-    fullWidth={true}
-    css={css`
-      .MuiDialog-paper {
-        height: 586px;
-      }
-    `}
-  >
-    <LanguageChooser
-      searchResultModifier={defaultSearchResultModifier}
-      initialState={{} as IOrthography}
-      onClose={handleClose}
-    />
-  </Dialog>
-```
+  - If the initialSelectionLanguageTag does not have an explicit script subtag, the Language Chooser will select the script implied by the language subtag and region subtag if present. For example, if initialSelectionLanguageTag is "uz" (Uzbek), Latin script will be selected because "uz" is an equivalent language tag to "uz-Latn". If initialSelectionLanguageTag is "uz-AF" (Uzbek, Afghanistan), Arabic script will be selected because "uz-AF" is an equivalent language tag to "uz-Arab-AF".
+
+  - **If an initialSelectionLanguageTag is provided, an initialSearchString must also be provided such that the initially selected language is a result of the search string in order for the selected card to be visible.**
+
+- `initialCustomDisplayName?: string` - If using initialSelectionLanguageTag to prepopulate with a language, this field can be used to prepopulate a customized display name for the language.
+- `onSelectionChange?: (orthographyInfo: IOrthography | undefined, languageTag: string | undefined) => void` - Whenever the user makes or unselects a complete language selection, this function will be called with the selected language information or undefined, respectively.
+- `rightPanelComponent?: React.ReactNode` - A slot for a component to go in the space on the upper right side of the language chooser. See the Storybook Dialog Demo -> Additional Right Panel Component for an example.
+- `actionButtons?: React.ReactNode` - A slot for dialog action buttons, e.g. Ok and Cancel. See the [LanguageChooserDialog.tsx](./src/demos/LanguageChooserDialog.tsx) example.
+
+### Demos
+
+Run the storybook examples in the [demos](./src/demos/) locally with `nx storybook @ethnolib/language-chooser-react-mui" or try them out at [https://sillsdev.github.io/EthnoLib/](https://sillsdev.github.io/EthnoLib/)
 
 ## Development
 

components/language-chooser/react/language-chooser-react-mui/src/CustomizeLanguageDialog.tsx

@@ -287,7 +287,7 @@ export const CustomizeLanguageDialog: React.FunctionComponent<{
         `}
       >
         <div
-          id="buttons-container"
+          id="customize-dialog-action-buttons-container"
           css={css`
             // position: absolute;
             width: 100%;
@@ -320,10 +320,12 @@ export const CustomizeLanguageDialog: React.FunctionComponent<{
                   } as IRegion,
                   dialect: dialogSelectedDialect,
                 } as ICustomizableLanguageDetails,
-                {
-                  code: dialogSelectedScript?.id,
-                  name: dialogSelectedScript?.label,
-                } as IScript
+                dialogSelectedScript?.id
+                  ? ({
+                      code: dialogSelectedScript?.id,
+                      name: dialogSelectedScript?.label,
+                    } as IScript)
+                  : undefined
               );
               props.onClose();
             }}