Flex utility (#21)

* Flex utility
kubk · Mar 9, 2024 · 280c807 · 280c807
1 parent 7417713
commit 280c807
Show file tree

Hide file tree

Showing 19 changed files with 221 additions and 269 deletions.
diff --git a/src/main.tsx b/src/main.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import { App } from "./screens/app.tsx";
 import "./index.css";
-import '@xelene/tgui/dist/styles.css';
+import "@xelene/tgui/dist/styles.css";
 import "@mdi/font/css/materialdesignicons.min.css";
 import WebApp from "@twa-dev/sdk";
 

diff --git a/src/screens/component-catalog/pie-chart-canvas-story.tsx b/src/screens/component-catalog/pie-chart-canvas-story.tsx
@@ -1,15 +1,9 @@
 import { PieChartCanvas } from "../user-statistics/pie-chart-canvas.tsx";
-import { css } from "@emotion/css";
+import { Flex } from "../../ui/flex.tsx";
 
 export const PieChartCanvasStory = () => {
   return (
-    <div
-      className={css({
-        display: "flex",
-        gap: 16,
-        flexDirection: "column",
-      })}
-    >
+    <Flex gap={16} direction={"column"}>
       <PieChartCanvas
         data={[
           { interval_range: "1-2", frequency: 10 },
@@ -38,6 +32,6 @@ export const PieChartCanvasStory = () => {
         width={200}
         height={200}
       />
-    </div>
+    </Flex>
   );
 };
diff --git a/src/screens/deck-catalog/deck-catalog.tsx b/src/screens/deck-catalog/deck-catalog.tsx
@@ -20,6 +20,7 @@ import { DeckAddedLabel } from "./deck-added-label.tsx";
 import { t, translateCategory } from "../../translations/t.ts";
 import { enumValues } from "../../lib/typescript/enum-values.ts";
 import { Screen } from "../shared/screen.tsx";
+import { Flex } from "../../ui/flex.tsx";
 
 export const DeckCatalog = observer(() => {
   const store = useDeckCatalogStore();
@@ -34,7 +35,7 @@ export const DeckCatalog = observer(() => {
 
   return (
     <Screen title={t("deck_catalog")}>
-      <div className={css({ display: "flex", gap: 4 })}>
+      <Flex gap={4}>
         <div className={css({ color: theme.hintColor })}>{t("category")}</div>
         <Select
           value={store.filters.categoryId.value}
@@ -51,9 +52,9 @@ export const DeckCatalog = observer(() => {
               : []
           }
         />
-      </div>
+      </Flex>
 
-      <div className={css({ display: "flex", gap: 4 })}>
+      <Flex gap={4}>
         <div className={css({ color: theme.hintColor })}>
           {t("translated_to")}
         </div>
@@ -65,7 +66,7 @@ export const DeckCatalog = observer(() => {
             label: languageFilterToNativeName(key),
           }))}
         />
-      </div>
+      </Flex>
 
       {(() => {
         if (store.decks?.state === "pending") {

diff --git a/src/screens/deck-form/card-form-view.tsx b/src/screens/deck-form/card-form-view.tsx
@@ -25,6 +25,7 @@ import { WysiwygField } from "../../ui/wysiwyg-field/wysiwig-field.tsx";
 import { userStore } from "../../store/user-store.ts";
 import { Input } from "../../ui/input.tsx";
 import { FormattingSwitcher } from "./formatting-switcher.tsx";
+import { Flex } from "../../ui/flex.tsx";
 
 type Props = {
   cardFormStore: CardFormStoreInterface;
@@ -59,13 +60,7 @@ export const CardFormView = observer((props: Props) => {
 
   return (
     <Screen title={cardForm.id ? t("edit_card") : t("add_card")}>
-      <div
-        className={css({
-          display: "flex",
-          flexDirection: "column",
-          gap: 16,
-        })}
-      >
+      <Flex direction={"column"} gap={16}>
         <Label
           text={t("card_front_title")}
           isPlain
@@ -93,7 +88,7 @@ export const CardFormView = observer((props: Props) => {
           )}
           <HintTransparent>{t("card_back_side_hint")}</HintTransparent>
         </Label>
-      </div>
+      </Flex>
 
       <CardRow>
         <span>{t("card_advanced")}</span>

diff --git a/src/screens/deck-form/card-list.tsx b/src/screens/deck-form/card-list.tsx
@@ -13,6 +13,7 @@ import { t } from "../../translations/t.ts";
 import { Screen } from "../shared/screen.tsx";
 import { removeAllTags } from "../../lib/sanitize-html/remove-all-tags.ts";
 import { tapScale } from "../../lib/animations/tap-scale.ts";
+import { Flex } from "../../ui/flex.tsx";
 
 export const CardList = observer(() => {
   const deckFormStore = useDeckFormStore();
@@ -35,13 +36,7 @@ export const CardList = observer(() => {
             field={deckFormStore.cardFilter.text}
             placeholder={t("search_card")}
           />
-          <div
-            className={css({
-              display: "flex",
-              marginLeft: 12,
-              gap: 8,
-            })}
-          >
+          <Flex ml={12} gap={8}>
             <span>{t("sort_by")}</span>
             {[
               {
@@ -80,7 +75,7 @@ export const CardList = observer(() => {
                 </button>
               );
             })}
-          </div>
+          </Flex>
         </>
       )}
       {deckFormStore.filteredCards.map((cardForm, i) => (

diff --git a/src/screens/deck-form/deck-form.tsx b/src/screens/deck-form/deck-form.tsx
@@ -27,6 +27,7 @@ import { deckListStore } from "../../store/deck-list-store.ts";
 import { reset } from "../../ui/reset.ts";
 import { Screen } from "../shared/screen.tsx";
 import { CenteredUnstyledButton } from "../../ui/centered-unstyled-button.tsx";
+import { Flex } from "../../ui/flex.tsx";
 
 export const DeckForm = observer(() => {
   const deckFormStore = useDeckFormStore();
@@ -110,14 +111,7 @@ export const DeckForm = observer(() => {
         />
       </CardRow>
       {deckFormStore.isSpeakingCardEnabled ? (
-        <div
-          className={css({
-            display: "flex",
-            justifyContent: "space-between",
-            marginLeft: 12,
-            marginRight: 12,
-          })}
-        >
+        <Flex justifyContent={"space-between"} ml={12} mr={12}>
           <div>
             <div className={css({ fontSize: 14, color: theme.hintColor })}>
               {t("voice_language")}
@@ -149,7 +143,7 @@ export const DeckForm = observer(() => {
               />
             ) : null}
           </div>
-        </div>
+        </Flex>
       ) : (
         <>
           <HintTransparent>{t("card_speak_description")}</HintTransparent>

diff --git a/src/screens/deck-list/main-screen.tsx b/src/screens/deck-list/main-screen.tsx
@@ -18,21 +18,15 @@ import { ViewMoreDecksToggle } from "./view-more-decks-toggle.tsx";
 import { t } from "../../translations/t.ts";
 import { links } from "../shared/links.ts";
 import { tapScale } from "../../lib/animations/tap-scale.ts";
+import { Flex } from "../../ui/flex.tsx";
 
 export const MainScreen = observer(() => {
   useMount(() => {
     deckListStore.loadFirstTime(WebApp.initDataUnsafe.start_param);
   });
 
   return (
-    <div
-      className={css({
-        display: "flex",
-        flexDirection: "column",
-        gap: 12,
-        paddingBottom: 16,
-      })}
-    >
+    <Flex direction={"column"} gap={12} pb={16}>
       <div>
         <ListHeader
           text={t("my_decks")}
@@ -42,13 +36,7 @@ export const MainScreen = observer(() => {
             ) : undefined
           }
         />
-        <div
-          className={css({
-            display: "flex",
-            flexDirection: "column",
-            gap: 6,
-          })}
-        >
+        <Flex direction={"column"} gap={6}>
           {deckListStore.isMyInfoLoading &&
             range(deckListStore.skeletonLoaderData.myDecksCount).map((i) => (
               <DeckLoading key={i} />
@@ -131,18 +119,12 @@ export const MainScreen = observer(() => {
           {deckListStore.areAllDecksReviewed && (
             <Hint>{t("all_decks_reviewed")}</Hint>
           )}
-        </div>
+        </Flex>
       </div>
 
       <div>
         <ListHeader text={t("public_decks")} />
-        <div
-          className={css({
-            display: "flex",
-            flexDirection: "column",
-            gap: 6,
-          })}
-        >
+        <Flex direction={"column"} gap={6}>
           {deckListStore.myInfo ? (
             <>
               {deckListStore.publicDecks.map((deck) => (
@@ -175,7 +157,7 @@ export const MainScreen = observer(() => {
             range(deckListStore.skeletonLoaderData.publicCount).map((i) => (
               <DeckLoading key={i} />
             ))}
-        </div>
+        </Flex>
       </div>
 
       {deckListStore.myInfo && (
@@ -215,6 +197,6 @@ export const MainScreen = observer(() => {
           </div>
         </>
       )}
-    </div>
+    </Flex>
   );
 });
diff --git a/src/screens/deck-or-folder-choose/choice.tsx b/src/screens/deck-or-folder-choose/choice.tsx
@@ -1,5 +1,6 @@
 import { css, cx } from "@emotion/css";
 import { theme } from "../../ui/theme.tsx";
+import { Flex } from "../../ui/flex.tsx";
 
 type Props = {
   icon: string;
@@ -26,17 +27,10 @@ export const Choice = (props: Props) => {
         cursor: "pointer",
       })}
     >
-      <div
-        className={css({
-          display: "flex",
-          alignItems: "center",
-          gap: 8,
-          justifyContent: "center",
-        })}
-      >
+      <Flex alignItems={"center"} gap={8} justifyContent={"center"}>
         <i className={cx(icon, css({ color: "inherit" }))} />
         <h3 className={css({ color: "inherit" })}>{title}</h3>
-      </div>
+      </Flex>
       <span className={css({ fontSize: 14 })}>{description}</span>
     </div>
   );

diff --git a/src/screens/deck-or-folder-choose/deck-or-folder-choose.tsx b/src/screens/deck-or-folder-choose/deck-or-folder-choose.tsx
@@ -1,34 +1,25 @@
 import { observer } from "mobx-react-lite";
-import { css } from "@emotion/css";
 import { Choice } from "./choice.tsx";
 import { screenStore } from "../../store/screen-store.ts";
 import { useBackButton } from "../../lib/telegram/use-back-button.tsx";
 import { t } from "../../translations/t.ts";
+import { Flex } from "../../ui/flex.tsx";
 
 export const DeckOrFolderChoose = observer(() => {
   useBackButton(() => {
     screenStore.back();
   });
 
   return (
-    <div
-      className={css({
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
-        marginTop: 100,
-        gap: 12,
-      })}
+    <Flex
+      direction={"column"}
+      alignItems={"center"}
+      justifyContent={"center"}
+      mt={100}
+      gap={12}
     >
       <h3>{t("choose_what_to_create")}</h3>
-      <div
-        className={css({
-          display: "flex",
-          flexDirection: "column",
-          gap: 8,
-        })}
-      >
+      <Flex direction={"column"} gap={8}>
         <Choice
           icon={"mdi mdi-cards-outline mdi-36px"}
           title={t("deck")}
@@ -45,7 +36,7 @@ export const DeckOrFolderChoose = observer(() => {
             screenStore.go({ type: "folderForm" });
           }}
         />
-      </div>
-    </div>
+      </Flex>
+    </Flex>
   );
 });
diff --git a/src/screens/deck-review/deck-finished.tsx b/src/screens/deck-review/deck-finished.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 import { observer } from "mobx-react-lite";
 import { DeckFinishedModal } from "./deck-finished-modal.tsx";
-import { css } from "@emotion/css";
 import { useReviewStore } from "./store/review-store-context.tsx";
 import { useMount } from "../../lib/react/use-mount.ts";
 import { screenStore } from "../../store/screen-store.ts";
@@ -11,6 +10,7 @@ import { t } from "../../translations/t.ts";
 import { getEncouragingMessage } from "../../translations/get-encouraging-message.tsx";
 import { WantMoreCardsButton } from "./want-more-cards-button.tsx";
 import { deckListStore } from "../../store/deck-list-store.ts";
+import { Flex } from "../../ui/flex.tsx";
 
 type Props = {
   type: "deck" | "repeat_all";
@@ -33,13 +33,7 @@ export const DeckFinished = observer((props: Props) => {
 
   return (
     <DeckFinishedModal>
-      <div
-        className={css({
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-        })}
-      >
+      <Flex direction={"column"} alignItems={"center"}>
         <p>
           {type === "deck" ? t("review_deck_finished") : t("review_all_cards")}
         </p>
@@ -50,7 +44,7 @@ export const DeckFinished = observer((props: Props) => {
         ) : (
           <p>{getEncouragingMessage()} 😊</p>
         )}
-      </div>
+      </Flex>
     </DeckFinishedModal>
   );
 });