Finish migrate

aeharding · Nov 23, 2024 · 6efd876 · 6efd876
1 parent b5c42e9
commit 6efd876
Show file tree

Hide file tree

Showing 39 changed files with 524 additions and 825 deletions.
diff --git a/package.json b/package.json
@@ -65,8 +65,6 @@
     "@ionic/core": "npm:[email protected]",
     "@ionic/react": "8.4.0",
     "@ionic/react-router": "8.4.0",
-    "@linaria/core": "^6.2.0",
-    "@linaria/react": "^6.2.1",
     "@mantine/hooks": "^7.14.0",
     "@reduxjs/toolkit": "^2.3.0",
     "capacitor-android-nav-mode": "^1.0.0",
@@ -122,8 +120,6 @@
     "virtua": "^0.37.0"
   },
   "devDependencies": {
-    "@babel/preset-react": "^7.25.9",
-    "@babel/preset-typescript": "^7.26.0",
     "@capacitor/cli": "^6.1.2",
     "@eslint/js": "^9.14.0",
     "@ionic/cli": "^7.2.0",
@@ -139,7 +135,6 @@
     "@types/ua-parser-js": "^0.7.39",
     "@vitejs/plugin-legacy": "^5.4.3",
     "@vitejs/plugin-react": "^4.3.3",
-    "@wyw-in-js/vite": "^0.5.5",
     "babel-plugin-react-compiler": "0.0.0-experimental-19c7e06-20241113",
     "eslint": "^9.14.0",
     "eslint-config-prettier": "^9.1.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/features/post/actions/ActionButton.tsx b/src/features/post/actions/ActionButton.tsx
@@ -1,9 +1,9 @@
 import { ButtonHTMLAttributes } from "react";
 
+import { cx } from "#/helpers/css";
+
 import styles from "./ActionButton.module.css";
 
-export function ActionButton(
-  props: Omit<ButtonHTMLAttributes<HTMLButtonElement>, "className">,
-) {
-  return <button {...props} className={styles.button} />;
+export function ActionButton(props: ButtonHTMLAttributes<HTMLButtonElement>) {
+  return <button {...props} className={cx(styles.button, props.className)} />;
 }
diff --git a/src/features/post/shared/VoteButton.module.css b/src/features/post/shared/VoteButton.module.css
@@ -1,8 +1,8 @@
 .active {
   color: var(--ion-color-primary-contrast);
   background: var(--sv-background);
+}
 
-  &.entering {
-    animation: var(--bounce-animation);
-  }
+.entering {
+  composes: bounce from "#/features/shared/bounce.module.css";
 }
diff --git a/src/features/post/shared/VoteButton.tsx b/src/features/post/shared/VoteButton.tsx
@@ -12,7 +12,6 @@ import {
   VOTE_COLORS,
   bgColorToVariable,
 } from "#/features/settings/appearance/themes/votesTheme/VotesTheme";
-import "#/features/shared/bounce.css";
 import { cx, sv } from "#/helpers/css";
 import { getVoteErrorMessage } from "#/helpers/lemmyErrors";
 import useAppToast from "#/helpers/useAppToast";

diff --git a/src/features/settings/tags/TagsSettings.tsx b/src/features/settings/tags/TagsSettings.tsx
@@ -1,7 +1,7 @@
 import { IonList } from "@ionic/react";
 
+import sharedStyles from "#/features/shared/shared.module.css";
 import { cx } from "#/helpers/css";
-import emptyStateIconStyles from "#/routes/pages/shared/emptyStateIconStyles";
 import { useAppSelector } from "#/store";
 
 import Browse from "./Browse";
@@ -35,7 +35,7 @@ export default function TagsSettings() {
           </IonList>
         </>
       ) : (
-        <TagSvg className={cx(emptyStateIconStyles, "ion-margin-top")} />
+        <TagSvg className={cx(sharedStyles.emptyStateIcon, "ion-margin-top")} />
       )}
     </>
   );

diff --git a/src/features/shared/bounce.css → src/features/shared/bounce.module.css b/src/features/shared/bounce.css → src/features/shared/bounce.module.css
@@ -1,5 +1,5 @@
-body {
-  --bounce-animation: bounce 175ms linear;
+.bounce {
+  animation: bounce 175ms linear;
 }
 
 @keyframes bounce {

diff --git a/src/features/shared/shared.module.css b/src/features/shared/shared.module.css
@@ -55,3 +55,14 @@
   text-align: center;
   color: var(--ion-color-medium);
 }
+
+.emptyStateIcon {
+  opacity: 0.1;
+  width: 300px;
+  height: 300px;
+  position: relative;
+  left: 50%;
+  transform: translateX(-50%);
+
+  flex-shrink: 0;
+}
diff --git a/src/features/shared/sliding/ActionContents.module.css b/src/features/shared/sliding/ActionContents.module.css
@@ -0,0 +1,19 @@
+.icon {
+  margin-block: 24px;
+
+  color: white;
+
+  &::after {
+    content: var(--sv-slash);
+    position: absolute;
+    height: var(--sv-slashHeight);
+    width: 3px;
+    background: white;
+    font-size: 1.7em;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%) rotate(-45deg);
+    transform-origin: center;
+    box-shadow: 0 0 0 2px var(--sv-bgColorVar);
+  }
+}
diff --git a/src/features/shared/sliding/ActionContents.tsx b/src/features/shared/sliding/ActionContents.tsx
@@ -1,53 +1,32 @@
 import { IonIcon } from "@ionic/react";
-import { styled } from "@linaria/react";
 import { bookmark, mailUnread } from "ionicons/icons";
-import { memo } from "react";
 
+import { sv } from "#/helpers/css";
+
+import styles from "./ActionContents.module.css";
 import { SlidingItemAction } from "./SlidingItem";
 
 const custom_slash_lengths: Record<string, number> = {
   [bookmark]: 35,
   [mailUnread]: 40,
 };
 
-const Icon = styled(IonIcon)<{
-  icon: string;
-  slash: boolean;
-  bgColorVar: string;
-}>`
-  margin-block: 24px;
-
-  color: white;
-
-  &::after {
-    content: ${({ slash }) => (slash ? '""' : "none")};
-    position: absolute;
-    height: ${({ icon }) => custom_slash_lengths[icon] ?? 30}px;
-    width: 3px;
-    background: white;
-    font-size: 1.7em;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%) rotate(-45deg);
-    transform-origin: center;
-    box-shadow: 0 0 0 2px ${({ bgColorVar }) => bgColorVar};
-  }
-`;
-
 interface ActionContentsProps {
   action: SlidingItemAction | undefined;
 }
 
-function ActionContents({ action }: ActionContentsProps) {
+export default function ActionContents({ action }: ActionContentsProps) {
   if (!action) return;
 
   return (
-    <Icon
+    <IonIcon
+      className={styles.icon}
       icon={action.icon}
-      slash={action.slash ?? false}
-      bgColorVar={`var(--ion-color-${action.bgColor}`}
+      style={sv({
+        bgColorVar: `var(--ion-color-${action.bgColor}`,
+        slash: action.slash ? '""' : "none",
+        slashHeight: `${custom_slash_lengths[action.icon] ?? 30}px`,
+      })}
     />
   );
 }
-
-export default memo(ActionContents);
diff --git a/src/features/shared/sliding/SlidingItem.module.css b/src/features/shared/sliding/SlidingItem.module.css
@@ -0,0 +1,42 @@
+.slidingItem {
+  overflow: initial; /* sticky */
+
+  --ion-item-border-color: transparent;
+}
+
+.itemOption {
+  width: 100%;
+  align-items: flex-end;
+
+  /* ensure subpixel rounding never causes background color to show through */
+  margin-bottom: 0.5px;
+  margin-top: 0.5px;
+}
+
+.optionContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 2rem;
+  width: min(60px, 11vw);
+
+  opacity: 0.5;
+
+  position: sticky;
+  top: 0;
+  bottom: 0;
+
+  :global(.item-options-start) & {
+    margin-right: auto;
+  }
+
+  :global(.item-options-end) & {
+    margin-left: auto;
+  }
+}
+
+.optionContainerActive {
+  composes: bounce from "#/features/shared/bounce.module.css";
+
+  opacity: 1;
+}
diff --git a/src/features/shared/sliding/SlidingItem.tsx b/src/features/shared/sliding/SlidingItem.tsx
@@ -1,62 +1,20 @@
 import { ImpactStyle } from "@capacitor/haptics";
 import { IonItemSlidingCustomEvent, ItemSlidingCustomEvent } from "@ionic/core";
 import { IonItemOption, IonItemOptions, IonItemSliding } from "@ionic/react";
-import { css } from "@linaria/core";
-import { styled } from "@linaria/react";
 import React, {
   useEffect,
   experimental_useEffectEvent as useEffectEvent,
   useRef,
   useState,
 } from "react";
 
+import { cx } from "#/helpers/css";
 import useHapticFeedback from "#/helpers/useHapticFeedback";
 import { OLongSwipeTriggerPointType } from "#/services/db";
 import { useAppSelector } from "#/store";
 
 import ActionContents from "./ActionContents";
-
-const StyledIonItemSliding = styled(IonItemSliding)`
-  overflow: initial; // sticky
-
-  --ion-item-border-color: transparent;
-`;
-
-const StyledIonItemOption = styled(IonItemOption)`
-  width: 100%;
-  align-items: flex-end;
-
-  // ensure subpixel rounding never causes background color to show through
-  margin-bottom: 0.5px;
-  margin-top: 0.5px;
-`;
-
-const OptionContainer = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 2rem;
-  width: min(60px, 11vw);
-
-  opacity: 0.5;
-
-  position: sticky;
-  top: 0;
-  bottom: 0;
-
-  .item-options-start & {
-    margin-right: auto;
-  }
-
-  .item-options-end & {
-    margin-left: auto;
-  }
-`;
-
-const optionContainerActiveCss = css`
-  opacity: 1;
-`;
-/* ${bounceAnimation} */ // TODO
+import styles from "./SlidingItem.module.css";
 
 export interface SlidingItemAction {
   /**
@@ -265,16 +223,17 @@ export default function SlidingItem({
 
     return (
       <IonItemOptions side="start">
-        <StyledIonItemOption color={startActionColor}>
-          <OptionContainer
-            className={
-              activeItemIndex < 0 ? optionContainerActiveCss : undefined
-            }
+        <IonItemOption className={styles.itemOption} color={startActionColor}>
+          <div
+            className={cx(
+              styles.optionContainer,
+              activeItemIndex < 0 ? styles.optionContainerActive : undefined,
+            )}
             slot="top"
           >
             <ActionContents action={startAction} />
-          </OptionContainer>
-        </StyledIonItemOption>
+          </div>
+        </IonItemOption>
       </IonItemOptions>
     );
   })();
@@ -286,32 +245,33 @@ export default function SlidingItem({
 
     return (
       <IonItemOptions side="end">
-        <StyledIonItemOption color={endActionColor}>
-          <OptionContainer
-            className={
-              activeItemIndex > 0 ? optionContainerActiveCss : undefined
-            }
+        <IonItemOption className={styles.itemOption} color={endActionColor}>
+          <div
+            className={cx(
+              styles.optionContainer,
+              activeItemIndex > 0 ? styles.optionContainerActive : undefined,
+            )}
             slot="top"
           >
             <ActionContents action={endAction} />
-          </OptionContainer>
-        </StyledIonItemOption>
+          </div>
+        </IonItemOption>
       </IonItemOptions>
     );
   })();
 
   return (
-    <StyledIonItemSliding
+    <IonItemSliding
+      className={cx(styles.slidingItem, className)}
       onIonDrag={onIonDrag}
       onTouchStart={onDragStart}
       onMouseDown={onDragStart}
-      className={className}
     >
       {startItems}
 
       {endItems}
 
       {children}
-    </StyledIonItemSliding>
+    </IonItemSliding>
   );
 }
diff --git a/src/features/user/LoggedOut.tsx b/src/features/user/LoggedOut.tsx
@@ -4,7 +4,7 @@ import { useContext } from "react";
 import { PageContext } from "#/features/auth/PageContext";
 import { accountsListEmptySelector } from "#/features/auth/authSelectors";
 import AppContent from "#/features/shared/AppContent";
-import emptyStateIconStyles from "#/routes/pages/shared/emptyStateIconStyles";
+import sharedStyles from "#/features/shared/shared.module.css";
 import { useAppSelector } from "#/store";
 
 import styles from "./LoggedOut.module.css";
@@ -50,7 +50,7 @@ export default function LoggedOut() {
           </IonButton>
         )}
       </div>
-      <IncognitoSvg className={emptyStateIconStyles} />
+      <IncognitoSvg className={sharedStyles.emptyStateIcon} />
     </AppContent>
   );
 }