2021-03-09 12:39:13 +00:00
|
|
|
/**
|
|
|
|
* Copyright (c) 2021 lingdocs.com
|
|
|
|
*
|
2022-11-05 11:29:31 +00:00
|
|
|
* This source code is licensed under the GPL3 license found in the
|
2021-03-09 12:39:13 +00:00
|
|
|
* LICENSE file in the root directory of this source tree.
|
|
|
|
*
|
|
|
|
*/
|
|
|
|
|
2022-10-24 08:19:01 +00:00
|
|
|
import { useEffect, useState } from "react";
|
|
|
|
|
2022-10-08 16:50:46 +00:00
|
|
|
import ButtonSelect from "./components/src/ButtonSelect";
|
2023-07-22 14:13:52 +00:00
|
|
|
import { Modal } from "react-bootstrap";
|
2021-03-09 12:39:13 +00:00
|
|
|
import * as T from "./types";
|
2022-10-08 16:50:46 +00:00
|
|
|
import defualtTextOptions from "./lib/src/default-text-options";
|
|
|
|
import useStickyState from "./components/src/useStickyState";
|
|
|
|
import EPExplorer from "./components/src/ep-explorer/EPExplorer";
|
2022-10-24 08:19:01 +00:00
|
|
|
import VPBuilderDemo from "./demo-components/VPBuilderDemo";
|
|
|
|
import { entryFeeder } from "./demo-components/entryFeeder";
|
|
|
|
import { Hider } from "./components/library";
|
|
|
|
import InflectionDemo from "./demo-components/InflectionDemo";
|
|
|
|
import SpellingDemo from "./demo-components/SpellingDemo";
|
2022-04-26 07:11:46 +00:00
|
|
|
|
2021-03-09 12:39:13 +00:00
|
|
|
function App() {
|
2023-07-22 14:13:52 +00:00
|
|
|
const [showingTextOptions, setShowingTextOptions] = useStickyState<boolean>(
|
|
|
|
false,
|
|
|
|
"showTextOpts1"
|
|
|
|
);
|
|
|
|
const [textOptions, setTextOptions] = useStickyState<T.TextOptions>(
|
|
|
|
defualtTextOptions,
|
|
|
|
"textOpts1"
|
|
|
|
);
|
|
|
|
const [theme, setTheme] = useStickyState<"light" | "dark">("light", "theme1");
|
|
|
|
const [showing, setShowing] = useState<string>("");
|
|
|
|
function handleHiderClick(label: string) {
|
|
|
|
setShowing((os) => (os === label ? "" : label));
|
|
|
|
}
|
|
|
|
useEffect(() => {
|
|
|
|
document.documentElement.setAttribute("data-theme", theme);
|
|
|
|
}, [theme]);
|
2023-03-31 13:45:06 +00:00
|
|
|
|
2023-07-22 14:13:52 +00:00
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<main className="flex-shrink-0 mb-4">
|
|
|
|
<div className="container" style={{ maxWidth: "800px" }}>
|
|
|
|
<div
|
|
|
|
style={{
|
|
|
|
position: "absolute",
|
|
|
|
top: "1.5rem",
|
|
|
|
right: "1.5rem",
|
|
|
|
display: "flex",
|
|
|
|
flexDirection: "row",
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<div
|
|
|
|
className="clickable mr-3"
|
|
|
|
onClick={() => setTheme(theme === "light" ? "dark" : "light")}
|
|
|
|
>
|
|
|
|
<i
|
|
|
|
className={`fa-lg fas fa-${theme === "light" ? "sun" : "moon"}`}
|
|
|
|
/>
|
2021-03-09 12:39:13 +00:00
|
|
|
</div>
|
2023-07-22 14:13:52 +00:00
|
|
|
<div
|
|
|
|
className="clickable"
|
|
|
|
onClick={() => setShowingTextOptions(true)}
|
|
|
|
>
|
|
|
|
<i className="fa-lg fas fa-cog" />
|
2021-03-09 12:39:13 +00:00
|
|
|
</div>
|
2023-07-22 14:13:52 +00:00
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
className="text-center mb-4"
|
|
|
|
style={{ marginTop: "3rem", marginBottom: "1rem" }}
|
|
|
|
>
|
|
|
|
<h1 className="display-4 mt-2">
|
|
|
|
<code>Pashto Inflector</code>
|
|
|
|
</h1>
|
|
|
|
<p
|
|
|
|
className="lead my-3"
|
|
|
|
style={{ maxWidth: "600px", margin: "0 auto" }}
|
|
|
|
>
|
|
|
|
An open source TypeScript/React library for Pashto inflection,
|
|
|
|
verb conjugation, phrase generation, text conversion, and more
|
|
|
|
</p>
|
|
|
|
<p>
|
|
|
|
Used in the{" "}
|
|
|
|
<a href="https://dictionary.lingdocs.com">
|
|
|
|
LingDocs Pashto Dictionary
|
|
|
|
</a>{" "}
|
|
|
|
and{" "}
|
|
|
|
<a href="https://grammar.lingdocs.com">LingDocs Pashto Grammar</a>
|
|
|
|
</p>
|
|
|
|
<p>
|
|
|
|
by <a href="https://adueck.github.io">Adam Dueck</a> - GPLv3
|
|
|
|
licensed{" "}
|
|
|
|
<a href="https://github.com/lingdocs/pashto-inflector">
|
|
|
|
Source Code
|
|
|
|
</a>{" "}
|
|
|
|
on GitHub
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<h2 className="mb-3">Demos:</h2>
|
|
|
|
<Hider
|
|
|
|
label="Verb Conjugation / Verb Phrase Engine"
|
|
|
|
hLevel={3}
|
|
|
|
showing={showing === "verbs"}
|
|
|
|
handleChange={() => handleHiderClick("verbs")}
|
|
|
|
>
|
|
|
|
<VPBuilderDemo opts={textOptions} />
|
|
|
|
</Hider>
|
|
|
|
<Hider
|
|
|
|
label="Equative Phrase Engine"
|
|
|
|
hLevel={3}
|
|
|
|
showing={showing === "equatives"}
|
|
|
|
handleChange={() => handleHiderClick("equatives")}
|
|
|
|
>
|
|
|
|
<div className="mt-4" style={{ paddingBottom: "20px" }}>
|
|
|
|
<EPExplorer opts={textOptions} entryFeeder={entryFeeder} />
|
|
|
|
</div>
|
|
|
|
</Hider>
|
|
|
|
<Hider
|
|
|
|
label="Inflection Engine"
|
|
|
|
hLevel={3}
|
|
|
|
showing={showing === "inflection"}
|
|
|
|
handleChange={() => handleHiderClick("inflection")}
|
|
|
|
>
|
|
|
|
<InflectionDemo opts={textOptions} />
|
|
|
|
</Hider>
|
|
|
|
<Hider
|
|
|
|
label="Spelling Conversion / Diacritics Engine"
|
|
|
|
hLevel={3}
|
|
|
|
showing={showing === "spelling"}
|
|
|
|
handleChange={() => handleHiderClick("spelling")}
|
|
|
|
>
|
|
|
|
<SpellingDemo opts={textOptions} onChange={setTextOptions} />
|
|
|
|
</Hider>
|
|
|
|
</div>
|
|
|
|
</main>
|
|
|
|
<Modal
|
|
|
|
show={showingTextOptions}
|
|
|
|
onHide={() => setShowingTextOptions(false)}
|
|
|
|
>
|
|
|
|
<Modal.Header closeButton>
|
|
|
|
<Modal.Title>Settings</Modal.Title>
|
|
|
|
</Modal.Header>
|
|
|
|
<Modal.Body>
|
|
|
|
<h6>Pashto Spelling</h6>
|
|
|
|
<ButtonSelect
|
|
|
|
options={[
|
|
|
|
{ label: "Afghan", value: "Afghan" },
|
|
|
|
{ label: "Pakistani ي", value: "Pakistani ي" },
|
|
|
|
{ label: "Pakistani ی", value: "Pakistani ی" },
|
|
|
|
]}
|
|
|
|
value={textOptions.spelling}
|
|
|
|
handleChange={(p) => {
|
|
|
|
setTextOptions({
|
|
|
|
...textOptions,
|
|
|
|
spelling: p,
|
|
|
|
});
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
<h6 className="mt-3">Diacritics</h6>
|
|
|
|
<ButtonSelect
|
|
|
|
options={[
|
|
|
|
{ label: "On", value: "true" },
|
|
|
|
{ label: "Off", value: "false" },
|
|
|
|
]}
|
|
|
|
value={textOptions.diacritics.toString()}
|
|
|
|
handleChange={(p) =>
|
|
|
|
setTextOptions({ ...textOptions, diacritics: p === "true" })
|
|
|
|
}
|
|
|
|
/>
|
|
|
|
<h6 className="mt-3">Pashto Text Size</h6>
|
|
|
|
<ButtonSelect
|
|
|
|
options={[
|
|
|
|
{ label: "Normal", value: "normal" },
|
|
|
|
{ label: "Large", value: "larger" },
|
|
|
|
{ label: "X-Large", value: "largest" },
|
|
|
|
]}
|
|
|
|
value={textOptions.pTextSize}
|
|
|
|
handleChange={(p) =>
|
|
|
|
setTextOptions({ ...textOptions, pTextSize: p })
|
|
|
|
}
|
|
|
|
/>
|
|
|
|
<h6 className="mt-3">Phonetics</h6>
|
|
|
|
<ButtonSelect
|
|
|
|
options={[
|
|
|
|
{ label: "LingDocs", value: "lingdocs" },
|
|
|
|
{ label: "IPA", value: "ipa" },
|
|
|
|
{ label: "ALAC", value: "alalc" },
|
|
|
|
// { label: "None", value: "none" },
|
|
|
|
]}
|
|
|
|
value={textOptions.phonetics}
|
|
|
|
handleChange={(p) =>
|
|
|
|
setTextOptions({ ...textOptions, phonetics: p })
|
|
|
|
}
|
|
|
|
/>
|
|
|
|
</Modal.Body>
|
|
|
|
<Modal.Footer>
|
|
|
|
<button
|
|
|
|
type="button"
|
|
|
|
className="btn btn-primary clb"
|
|
|
|
onClick={() => setShowingTextOptions(false)}
|
|
|
|
>
|
|
|
|
Close
|
|
|
|
</button>
|
|
|
|
</Modal.Footer>
|
|
|
|
</Modal>
|
|
|
|
{/* <footer className="footer mt-auto py-3" style={{ backgroundColor: "#f5f5f5" }}>
|
2021-03-09 12:39:13 +00:00
|
|
|
<div className="container">
|
2022-10-24 08:19:01 +00:00
|
|
|
<span className="text-muted">Copyright © 2022 <a href="https://www.lingdocs.com">lingdocs.com</a> - <a href="https://github.com/lingdocs/pashto-inflector/blob/master/LICENSE">MIT License</a></span>
|
2021-03-09 12:39:13 +00:00
|
|
|
</div>
|
2022-10-24 08:19:01 +00:00
|
|
|
</footer> */}
|
2021-03-09 12:39:13 +00:00
|
|
|
</>
|
2023-07-22 14:13:52 +00:00
|
|
|
);
|
2021-03-09 12:39:13 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
export default App;
|