add formulas and fix dark mode bad select colors

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lingdocs/pashto-inflector",
-  "version": "2.1.7",
+  "version": "2.1.8",
   "author": "lingdocs.com",
   "description": "A Pashto inflection and verb conjugation engine, inculding React components for displaying Pashto text, inflections, and conjugations",
   "homepage": "https://verbs.lingdocs.com",

src/App.tsx

@@ -26,7 +26,7 @@ import * as T from "./types";
 import { isNounEntry } from "./lib/type-predicates";
 import defualtTextOptions from "./lib/default-text-options";
 import PhraseBuilder from "./components/vp-explorer/VPExplorer";
-import { useStickyState } from "./library";
+import useStickyState from "./lib/useStickyState";
 type VerbType = "simple" | "stative compound" | "dynamic compound";
 const verbTypes: VerbType[] = [
     "simple",

src/components/EntrySelect.tsx

@@ -7,7 +7,7 @@ import {
     makeVerbSelectOption,
 } from "./np-picker/picker-tools";
 
-const customStyles: StylesConfig = {
+export const customStyles: StylesConfig = {
     menuPortal: (base) => ({
         ...base,
         zIndex: 99999,
@@ -19,17 +19,12 @@ const customStyles: StylesConfig = {
     option: (provided, state) => ({
         ...provided,
         padding: "10px 5px",
+        color: "#121418",
     }),
     input: (base) => ({
         ...base,
         padding: 0,
     }),
-    singleValue: (provided, state) => {
-        const opacity = state.isDisabled ? 0.5 : 1;
-        const transition = 'opacity 300ms';
-
-        return { ...provided, opacity, transition };
-    }
 }
 
 function EntrySelect<E extends T.DictionaryEntry | T.VerbEntry>(props: ({
@@ -108,7 +103,7 @@ function EntrySelect<E extends T.DictionaryEntry | T.VerbEntry>(props: ({
             styles={customStyles}
             isSearchable={true}
             value={value}
-            // @ts-ignore
+            // @ts-ignore - gets messed up when using customStyles
             onChange={onChange}
             className="mb-2"
             options={options}

src/components/np-picker/picker-tools.tsx

@@ -23,11 +23,6 @@ import {
     translatePhonetics,
 } from "../../lib/translate-phonetics";
 
-export const zIndexProps = {
-    menuPortalTarget: document.body, 
-    styles: { menuPortal: (base: any) => ({ ...base, zIndex: 9999 }) },
-};
-
 export function makeVerbSelectOption(e: T.VerbEntry, opts: T.TextOptions): { value: string, label: string | JSX.Element } {
     const engV = getEnglishVerb(e.entry);
     const eng = engV || truncateEnglish(e.entry.e);

src/components/vp-explorer/TensePicker.tsx

@@ -1,67 +1,83 @@
 import Select from "react-select";
-import {
-    zIndexProps,
-} from "../np-picker/picker-tools";
 import * as T from "../../types";
 import ButtonSelect from "../ButtonSelect";
 import { isImperativeTense, isModalTense, isPerfectTense, isVerbTense } from "../../lib/type-predicates";
 import { ensure2ndPersSubjPronounAndNoConflict } from "../../lib/phrase-building/vp-tools";
+import useStickyState from "../../lib/useStickyState";
+import { customStyles } from "../EntrySelect";
 
-const verbTenseOptions: { label: string | JSX.Element, value: T.VerbTense }[] = [{
+const verbTenseOptions: { label: string | JSX.Element, value: T.VerbTense, formula: string }[] = [{
     label: <div><i className="fas fa-video mr-2" />present</div>,
     value: "presentVerb",
+    formula: "imperfective stem + present verb ending",
 }, {
     label: <div><i className="fas fa-camera mr-2" />subjunctive</div>,
     value: "subjunctiveVerb",
+    formula: "perfective stem + present verb ending",
 }, {
     label: <div><i className="fas fa-video mr-2" />imperfective future</div>,
     value: "imperfectiveFuture",
+    formula: "ba + present",
 }, {
     label: <div><i className="fas fa-camera mr-2" />perfective future</div>,
     value: "perfectiveFuture",
+    formula: "ba + subjunctive",
 }, {
     label: <div><i className="fas fa-video mr-2" />continuous past</div>,
     value: "imperfectivePast",
+    formula: "imperfective root + past verb ending",
 }, {
     label: <div><i className="fas fa-camera mr-2" />simple past</div>,
     value: "perfectivePast",
+    formula: "perfective root + past verb ending",
 }, {
     label: <div><i className="fas fa-video mr-2" />habitual continual past</div>,
     value: "habitualImperfectivePast",
+    formula: "ba + contiunous past",
 }, {
     label: <div><i className="fas fa-camera mr-2" />habitual simple past</div>,
     value: "habitualPerfectivePast",
+    formula: "ba + simple past",
 }];
 
-const perfectTenseOptions: { label: string | JSX.Element, value: T.PerfectTense }[] = [{
+const perfectTenseOptions: { label: string | JSX.Element, value: T.PerfectTense, formula: string }[] = [{
     label: "Present Perfect",
     value: "presentPerfect",
+    formula: "past participle + present equative",
 }, {
     label: "Habitual Perfect",
     value: "habitualPerfect",
+    formula: "past participle + habitual equative",
 }, {
     label: "Subjunctive Perfect",
     value: "subjunctivePerfect",
+    formula: "past participle + subjunctive equative",
 }, {
     label: "Future Perfect",
     value: "futurePerfect",
+    formula: "past participle + future equative",
 }, {
     label: "Past Perfect",
     value: "pastPerfect",
+    formula: "past participle + past equative",
 }, {
     label: `"Would Be" Perfect`,
     value: "wouldBePerfect",
+    formula: `past participle + "would be" equative`,
 }, {
     label: "Past Subjunctive Perfect",
     value: "pastSubjunctivePerfect",
+    formula: "past participle + past subjunctive equative",
 }];
 
-const imperativeTenseOptions: { label: string | JSX.Element, value: T.ImperativeTense }[] = [{
+const imperativeTenseOptions: { label: string | JSX.Element, value: T.ImperativeTense, formula: string }[] = [{
     label: <div><i className="fas fa-video mr-2" />imperfective imperative</div>,
     value: "imperfectiveImperative",
+    formula: "imperfective stem + imperative ending",
 }, {
     label: <div><i className="fas fa-camera mr-2" />perfective imperative</div>,
     value: "perfectiveImperative",
+    formula: "perfective stem + imperative ending",
 }];
 
 export function getRandomTense(o?: T.PerfectTense | T.VerbTense | T.ModalTense | T.ImperativeTense): T.PerfectTense | T.VerbTense | T.ModalTense | T.ImperativeTense {
@@ -92,6 +108,7 @@ function TensePicker(props: ({
     onChange: (p: T.VPSelection) => void,
     mode: "charts" | "phrases" | "quiz",
 }) {
+    const [showFormula, setShowFormula] = useStickyState<boolean>(false, "showFormula");
     function onTenseSelect(o: { value: T.VerbTense | T.PerfectTense | T.ImperativeTense } | null) {
         if ("vpsComplete" in props) return;
         const value = o?.value ? o.value : undefined;
@@ -199,9 +216,15 @@ function TensePicker(props: ({
         : verbTenseOptions;
     const showImperativeOption = ("vps" in props && props.vps.verb.voice === "active")
         || ("vpsComplete" in props && props.vpsComplete.verb.voice !== "active");
+    const canShowFormula = "vps" in props && props.vps.verb.tenseCategory !== "modal";
     return <div>
         <div style={{ maxWidth: "300px", minWidth: "250px", margin: "0 auto" }}>
+            <div className="d-flex flex-row justify-content-between align-items-center">
                 <div className="h5">Tense:</div>
+                {canShowFormula && <div className="clickable mb-2 small" onClick={() => setShowFormula(x => !x)}>
+                    🧪 {!showFormula ? "Show" : "Hide"} Formula
+                </div>}
+            </div>
             {("vpsComplete" in props || props.vps.verb) && <div className="mb-2">
                 <ButtonSelect
                     small
@@ -237,7 +260,8 @@ function TensePicker(props: ({
                 ? <div style={{ fontSize: "larger" }} className="mb-3">
                     {[...verbTenseOptions, ...perfectTenseOptions, ...imperativeTenseOptions].find(o => o.value === props.vpsComplete.verb.tense)?.label}
                 </div>
-            : <Select
+            : <>
+                <Select
                     isSearchable={false}
                     // for some reason can't use tOptions with find here;
                     value={props.vps.verb && ([...verbTenseOptions, ...perfectTenseOptions, ...imperativeTenseOptions].find(o => o.value === props.vps.verb[
@@ -247,12 +271,14 @@ function TensePicker(props: ({
                             ? "imperativeTense"
                             : "verbTense"
                     ]))}
+                    // @ts-ignore - gets messed up when using customStyles
                     onChange={onTenseSelect}
                     className="mb-2"
                     options={tOptions}
-                {...zIndexProps}
+                    styles={customStyles}
-            />}
+                />
-            {"vps" in props && props.vps.verb && (props.mode !== "quiz") && <div className="d-flex flex-row justify-content-between align-items-center mt-3 mb-1" style={{ width: "100%" }}>
+            </>}
+            {"vps" in props && props.vps.verb && (props.mode !== "quiz") && <div className="d-flex flex-row justify-content-between align-items-center mt-2 mb-1" style={{ width: "100%" }}>
                 <div className="btn btn-light clickable" onClick={moveTense("back")}>
                     <i className="fas fa-chevron-left" />
                 </div>
@@ -272,6 +298,23 @@ function TensePicker(props: ({
                     <i className="fas fa-chevron-right" />
                 </div>
             </div>}
+            {(canShowFormula && "vps" in props && showFormula && props.vps.verb.tenseCategory !== "modal") && (() => {
+                // TODO: Be able to show modal formulas too
+                const curr = (props.vps.verb.tenseCategory === "imperative" && props.vps.verb.negative)
+                    ? imperativeTenseOptions.find(x => x.value === "imperfectiveImperative")
+                    : [...verbTenseOptions, ...perfectTenseOptions, ...imperativeTenseOptions].find(o => o.value === props.vps.verb[
+                        props.vps.verb.tenseCategory === "perfect"
+                            ? "perfectTense"
+                            : props.vps.verb.tenseCategory === "imperative"
+                            ? "imperativeTense"
+                            : "verbTense"
+                    ]);
+                if (curr && "formula" in curr) {
+                    return <div style={{ width: "250px", overflowY: "auto" }}>
+                        <samp>{curr.formula}</samp>
+                    </div>
+                }
+            })()}
         </div>
     </div>;
 }

src/components/vp-explorer/VPDisplay.tsx

@@ -5,7 +5,7 @@ import {
     isPastTense,
     completeVPSelection,
 } from "../../lib/phrase-building/vp-tools";
-import { useStickyState } from "../../library";
+import useStickyState from "../../lib/useStickyState";
 import Examples from "../Examples";
 
 function VPDisplay({ VP, opts }: { VP: T.VPSelection, opts: T.TextOptions }) {

src/lib/convert-spelling.ts

@@ -47,7 +47,9 @@ export function revertSpelling(input: string, spelling: T.Spelling): string {
       : "ي"}(?![\u0621-\u065f\u0670-\u06d3\u06d5])`, "g"), "ي")
     .replace(/ے(?![\u0621-\u065f\u0670-\u06d3\u06d5])/g, "ی")
     .replace(/ائ(?![\u0621-\u065f\u0670-\u06d3\u06d5])/g, "ای")
+    .replace(/اے(?![\u0621-\u065f\u0670-\u06d3\u06d5])/g, "ای")
     .replace(/وئ(?![\u0621-\u065f\u0670-\u06d3\u06d5])/g, "وی")
+    .replace(/وے(?![\u0621-\u065f\u0670-\u06d3\u06d5])/g, "وی")
     .replace(/(?:ائی|ائي)(?=[\u0621-\u065f\u0670-\u06d3\u06d5])/g, "اي")
     .replace(/(?:وئی|وئي)(?=[\u0621-\u065f\u0670-\u06d3\u06d5])/g, "وي")
     .replace(/ائ(?=ي|ی|ې)/g, "اي")

src/lib/phrase-building/render-vp.ts

@@ -27,7 +27,7 @@ import {
     isPerfectTense,
 } from "../type-predicates";
 import { renderEnglishVPBase } from "./english-vp-rendering";
-import { personGender } from "../../library";
+import { personGender } from "../../lib/misc-helpers";
 
 // TODO: ISSUE GETTING SPLIT HEAD NOT MATCHING WITH FUTURE VERBS