Refactor: update import statements to use absolute paths

- Replace '@' alias with full package imports throughout the project - Remove module-resolver plugin from Babel config - Remove path aliases from tsconfig.json This change ensures better compatibility when the package is consumed by external projects.
white-label-loyalty · Aug 27, 2024 · 6c15d23 · 6c15d23
1 parent 91fc3bb
commit 6c15d23
Show file tree

Hide file tree

Showing 28 changed files with 89 additions and 187 deletions.
diff --git a/babel.config.js b/babel.config.js
@@ -4,17 +4,5 @@ module.exports = {
     "@babel/preset-react",
     "@babel/preset-typescript",
   ],
-  plugins: [
-    "@babel/plugin-proposal-export-namespace-from",
-    "react-native-web",
-    [
-      "module-resolver",
-      {
-        root: ["./lib"],
-        alias: {
-          "@": "./lib",
-        },
-      },
-    ],
-  ],
+  plugins: ["@babel/plugin-proposal-export-namespace-from", "react-native-web"],
 };
diff --git a/lib/components/atoms/Button/index.tsx b/lib/components/atoms/Button/index.tsx
@@ -1,9 +1,9 @@
-import { useTheme } from "@/context/ThemeContext";
-import { Variant } from "@/types/theme";
-import { useResponsiveScale } from "@/utils/responsiveScaling";
-import { createVariantSystem } from "@/utils/variant";
 import React from "react";
 import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { useTheme } from "../../../context/ThemeContext";
+import { Variant } from "../../../types/theme";
+import { useResponsiveScale } from "../../../utils/responsiveScaling";
+import { createVariantSystem } from "../../../utils/variant";
 
 type ButtonProps = {
   title: string;

diff --git a/lib/components/atoms/LoadingIndicator/index.tsx b/lib/components/atoms/LoadingIndicator/index.tsx
@@ -1,6 +1,6 @@
-import { useTheme } from "@/context/ThemeContext";
 import React from "react";
 import { ActivityIndicator, StyleSheet, View } from "react-native";
+import { useTheme } from "../../../context/ThemeContext";
 
 type LoadingIndicatorProps = {
   // Define your props here

diff --git a/lib/components/atoms/ProgressBar/index.tsx b/lib/components/atoms/ProgressBar/index.tsx
@@ -1,8 +1,8 @@
-import { useTheme } from "@/context/ThemeContext";
-import { Size, ThemeObject, Variant } from "@/types/theme";
-import { createVariantSystem } from "@/utils/variant";
 import React from "react";
 import { StyleSheet, View, ViewStyle } from "react-native";
+import { useTheme } from "../../../context/ThemeContext";
+import { Size, ThemeObject, Variant } from "../../../types/theme";
+import { createVariantSystem } from "../../../utils/variant";
 
 export type ProgressBarProps = {
   percentage: number;

diff --git a/lib/components/atoms/Text/index.tsx b/lib/components/atoms/Text/index.tsx
@@ -1,12 +1,12 @@
-import { useTheme } from "@/context/ThemeContext";
-import { createResponsiveStyle } from "@/utils/responsiveHelper";
 import React from "react";
 import {
   Text as RNText,
   TextProps as RNTextProps,
   StyleSheet,
   TextStyle,
 } from "react-native";
+import { useTheme } from "../../../context/ThemeContext";
+import { createResponsiveStyle } from "../../../utils/responsiveHelper";
 
 type TextVariant =
   | "eyebrow"

diff --git a/lib/components/atoms/Tile/index.tsx b/lib/components/atoms/Tile/index.tsx
@@ -1,8 +1,8 @@
-import { useSectionContext } from "@/components/organisms/Section";
-import { useTheme } from "@/context/ThemeContext";
 import Color from "color";
 import React from "react";
 import { StyleSheet, View } from "react-native";
+import { useTheme } from "../../../context/ThemeContext";
+import { useSectionContext } from "../../organisms/Section";
 import LoadingIndicator from "../LoadingIndicator";
 
 type TileProps = {

diff --git a/lib/components/atoms/TileContainer/index.tsx b/lib/components/atoms/TileContainer/index.tsx
@@ -1,12 +1,3 @@
-import {
-  BadgeTile,
-  BannerTile,
-  ContentTile,
-  PointsTile,
-  RewardCategoryTile,
-  RewardTile,
-  TierTile,
-} from "@/components/organisms";
 import {
   BadgeTileConfig,
   BannerTileConfig,
@@ -17,8 +8,18 @@ import {
   TierTileConfig,
   Tile,
   TileType,
-} from "@/types/tile";
-import { useResponsiveScale } from "@/utils/responsiveScaling";
+} from "../../../types/tile";
+import { useResponsiveScale } from "../../../utils/responsiveScaling";
+import {
+  BadgeTile,
+  BannerTile,
+  ContentTile,
+  PointsTile,
+  RewardCategoryTile,
+  RewardTile,
+  TierTile,
+} from "../../organisms";
+
 import React from "react";
 import { StyleSheet, View } from "react-native";
 

diff --git a/lib/components/atoms/index.ts b/lib/components/atoms/index.ts
@@ -4,6 +4,7 @@ import Image from "./Image";
 import LoadingIndicator from "./LoadingIndicator";
 import ProgressBar from "./ProgressBar";
 import Text from "./Text";
+import Tile from "./Tile";
 import TileContainer from "./TileContainer";
 
 export {
@@ -13,5 +14,6 @@ export {
   LoadingIndicator,
   ProgressBar,
   Text,
+  Tile,
   TileContainer,
 };
diff --git a/lib/components/molecules/Carousel/index.tsx b/lib/components/molecules/Carousel/index.tsx
@@ -1,9 +1,3 @@
-import { Icon } from "@/components/atoms";
-import { SectionHeader } from "@/components/molecules";
-import { BannerTile } from "@/components/organisms/";
-import { useTheme } from "@/context/ThemeContext";
-import { Section } from "@/types/section";
-import { BannerTileConfig, Tile, TileType } from "@/types/tile";
 import React, { useRef, useState } from "react";
 import {
   NativeScrollEvent,
@@ -13,6 +7,12 @@ import {
   TouchableOpacity,
   View,
 } from "react-native";
+import { useTheme } from "../../../context/ThemeContext";
+import { Section } from "../../../types/section";
+import { BannerTileConfig, Tile, TileType } from "../../../types/tile";
+import { Icon } from "../../atoms";
+import { SectionHeader } from "../../molecules";
+import { BannerTile } from "../../organisms";
 
 type CarouselProps = {
   section: Section;

diff --git a/lib/components/molecules/Grid/index.tsx b/lib/components/molecules/Grid/index.tsx
@@ -1,9 +1,9 @@
-import { TileContainer } from "@/components/atoms";
-import { Section as SectionData } from "@/types/section";
-import { Tile, TileHeight, TileType } from "@/types/tile";
-import { useResponsiveScale } from "@/utils/responsiveScaling";
 import React from "react";
 import { StyleSheet, useWindowDimensions, View } from "react-native";
+import { Section as SectionData } from "../../../types/section";
+import { Tile, TileHeight, TileType } from "../../../types/tile";
+import { useResponsiveScale } from "../../../utils/responsiveScaling";
+import { TileContainer } from "../../atoms";
 import SectionHeader from "../SectionHeader";
 
 type GridProps = {

diff --git a/lib/components/molecules/ProgressIndicator/index.tsx b/lib/components/molecules/ProgressIndicator/index.tsx
@@ -1,8 +1,8 @@
-import { Icon, ProgressBar } from "@/components/atoms";
-import { useTheme } from "@/context/ThemeContext";
-import { Size, Variant } from "@/types/theme";
 import React from "react";
 import { StyleSheet, View } from "react-native";
+import { useTheme } from "../../../context/ThemeContext";
+import { Size, Variant } from "../../../types/theme";
+import { Icon, ProgressBar } from "../../atoms";
 
 export type ProgressIndicatorProps = {
   currentPoints: number;

diff --git a/lib/components/molecules/SectionHeader/index.tsx b/lib/components/molecules/SectionHeader/index.tsx
@@ -1,6 +1,6 @@
-import { Text } from "@/components/atoms";
 import React from "react";
 import { StyleSheet, View } from "react-native";
+import { Text } from "../../atoms";
 
 type SectionHeaderProps = {
   title?: string;

diff --git a/lib/components/molecules/index.ts b/lib/components/molecules/index.ts
@@ -1,5 +1,5 @@
 import Carousel from "./Carousel";
+import Grid from "./Grid";
 import ProgressIndicator from "./ProgressIndicator";
 import SectionHeader from "./SectionHeader";
-export { Carousel, ProgressIndicator, SectionHeader , Grid};
-import Grid from './Grid';
+export { Carousel, Grid, ProgressIndicator, SectionHeader };
diff --git a/lib/components/organisms/BadgeTile/index.tsx b/lib/components/organisms/BadgeTile/index.tsx
@@ -1,8 +1,8 @@
-import { Icon, Text } from "@/components/atoms";
-import Tile from "@/components/atoms/Tile";
-import { useSectionContext } from "@/components/organisms/Section";
-import { BadgeTileConfig } from "@/types/tile";
-import { createResponsiveStyle } from "@/utils/responsiveHelper";
+import { BadgeTileConfig } from "../../../types/tile";
+import { createResponsiveStyle } from "../../../utils/responsiveHelper";
+import { Icon, Text, Tile } from "../../atoms";
+import { useSectionContext } from "../Section";
+
 import React from "react";
 import { Image, StyleSheet, View } from "react-native";
 

diff --git a/lib/components/organisms/BannerTile/index.tsx b/lib/components/organisms/BannerTile/index.tsx
@@ -1,8 +1,8 @@
-import { Button, Text } from "@/components/atoms";
-import { useTheme } from "@/context/ThemeContext";
-import { BannerTileConfig } from "@/types/tile";
 import React from "react";
 import { Image, Linking, StyleSheet, View } from "react-native";
+import { useTheme } from "../../../context/ThemeContext";
+import { BannerTileConfig } from "../../../types/tile";
+import { Button, Text } from "../../atoms";
 
 type BannerTileProps = {
   configuration: BannerTileConfig;

diff --git a/lib/components/organisms/ContentTile/index.tsx b/lib/components/organisms/ContentTile/index.tsx
@@ -1,10 +1,10 @@
-import { Text } from "@/components/atoms";
-import Tile from "@/components/atoms/Tile";
-import { useSectionContext } from "@/components/organisms/Section";
-import { ContentTileConfig } from "@/types/tile";
-import { createResponsiveStyle } from "@/utils/responsiveHelper";
 import React from "react";
 import { Image, StyleSheet, View } from "react-native";
+import { ContentTileConfig } from "../../../types/tile";
+import { createResponsiveStyle } from "../../../utils/responsiveHelper";
+import { Text, Tile } from "../../atoms";
+
+import { useSectionContext } from "../Section";
 type ContentTileProps = {
   configuration: ContentTileConfig;
 };

diff --git a/lib/components/organisms/PointsTile/index.tsx b/lib/components/organisms/PointsTile/index.tsx
@@ -1,9 +1,8 @@
-import { Text } from "@/components/atoms";
-import Tile from "@/components/atoms/Tile";
-import { useTheme } from "@/context/ThemeContext";
-import { PointsTileConfig } from "@/types/tile";
 import React from "react";
 import { Image, StyleSheet, View } from "react-native";
+import { useTheme } from "../../../context/ThemeContext";
+import { PointsTileConfig } from "../../../types/tile";
+import { Text, Tile } from "../../atoms";
 import { useSectionContext } from "../Section";
 
 type PointsTileProps = {

diff --git a/lib/components/organisms/RewardCategoryTile/index.tsx b/lib/components/organisms/RewardCategoryTile/index.tsx
@@ -1,8 +1,7 @@
-import Tile from "@/components/atoms/Tile";
-import { useTheme } from "@/context/ThemeContext";
-import { RewardCategoryTileConfig } from "@/types/tile";
 import React from "react";
 import { Image, StyleSheet, Text, View } from "react-native";
+import { useTheme } from "../../../context/ThemeContext";
+import { RewardCategoryTileConfig } from "../../../types/tile";
 
 type RewardCategoryTileProps = {
   configuration: RewardCategoryTileConfig;

diff --git a/lib/components/organisms/RewardTile/index.tsx b/lib/components/organisms/RewardTile/index.tsx
@@ -1,11 +1,11 @@
+import React, { createContext, useContext } from "react";
+import { RewardTileConfig } from "../../../types/tile";
 import {
   Button as ButtonAtom,
   Image as ImageAtom,
   Text,
-} from "@/components/atoms";
-import Tile from "@/components/atoms/Tile";
-import { RewardTileConfig } from "@/types/tile";
-import React, { createContext, useContext } from "react";
+  Tile,
+} from "../../atoms";
 
 type RewardTileContextType = {
   configuration: RewardTileConfig;

diff --git a/lib/components/organisms/Section/index.tsx b/lib/components/organisms/Section/index.tsx
@@ -1,8 +1,9 @@
-import { Icon } from "@/components/atoms";
-import { Carousel, Grid } from "@/components/molecules";
-import { useSDK } from "@/context/SDKContext";
-import { useTheme } from "@/context/ThemeContext";
-import { Section as SectionData, SectionType } from "@/types/section";
+import { useSDK } from "../../../context/SDKContext";
+import { useTheme } from "../../../context/ThemeContext";
+import { Section as SectionData, SectionType } from "../../../types/section";
+import { Icon } from "../../atoms";
+import { Carousel, Grid } from "../../molecules";
+
 import React, { createContext, useContext, useEffect, useState } from "react";
 import { StyleSheet, Text, View } from "react-native";
 

diff --git a/lib/components/organisms/TierTile/index.tsx b/lib/components/organisms/TierTile/index.tsx
@@ -1,23 +1,18 @@
 // @ts-nocheck
-import { Text } from "@/components/atoms";
-import Tile from "@/components/atoms/Tile";
-import { ProgressIndicator } from "@/components/molecules";
-import { useSectionContext } from "@/components/organisms/Section";
-import { useTheme } from "@/context/ThemeContext";
-import { TierTileConfig, TierTileType } from "@/types/tile";
-import { useResponsiveScale } from "@/utils/responsiveScaling";
+// TODO: Fix this file
 import React from "react";
 import { View } from "react-native";
+import { useTheme } from "../../../context/ThemeContext";
+import { TierTileConfig, TierTileType } from "../../../types/tile";
+import { useResponsiveScale } from "../../../utils/responsiveScaling";
+import { Text, Tile } from "../../atoms";
+import { ProgressIndicator } from "../../molecules";
 
 type TierTileProps = {
   configuration: TierTileConfig;
 };
 
 const TierTile: React.FC<TierTileProps> = ({ configuration }) => {
-  const { ms, ps } = useResponsiveScale();
-  const { loading } = useSectionContext();
-  const { theme } = useTheme();
-
   if (!configuration?.tier) return null;
 
   const renderTierTileContent = () => {

diff --git a/lib/context/SDKContext.tsx b/lib/context/SDKContext.tsx
@@ -1,6 +1,6 @@
-import { Section } from "@/types/section";
-import { Tile } from "@/types/tile";
 import React, { createContext, ReactNode, useContext } from "react";
+import { Section } from "../types/section";
+import { Tile } from "../types/tile";
 
 type SDKConfig = {
   apiKey: string;

diff --git a/lib/context/ThemeContext.tsx b/lib/context/ThemeContext.tsx
@@ -1,16 +1,16 @@
-import { defaultTheme, sizes } from "@/utils/styling";
-import {
-  getDerivedColor,
-  getDerivedColorPercentages,
-  getReadableTextColor,
-} from "@/utils/themeHelpers";
 import React, { createContext, useContext, useEffect, useState } from "react";
 import {
   BaseThemeObject,
   ThemeContextType,
   ThemeObject,
   ThemeProviderProps,
 } from "../types/theme";
+import { defaultTheme } from "../utils/styling";
+import {
+  getDerivedColor,
+  getDerivedColorPercentages,
+  getReadableTextColor,
+} from "../utils/themeHelpers";
 
 const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
 

diff --git a/lib/types/theme.ts b/lib/types/theme.ts
@@ -1,6 +1,6 @@
-import { sizes } from "@/utils/styling";
-import { DerivedColors } from "@/utils/themeHelpers";
 import { ReactNode } from "react";
+import { sizes } from "../utils/styling";
+import { DerivedColors } from "../utils/themeHelpers";
 
 export type BaseThemeObject = {
   accent: string;

diff --git a/lib/utils/styling.ts b/lib/utils/styling.ts
@@ -1,4 +1,4 @@
-import { BaseThemeObject } from "@/types/theme";
+import { BaseThemeObject } from "../types/theme";
 
 export const sizes = {
   borderRadius: 15,

diff --git a/package.json b/package.json
@@ -35,7 +35,6 @@
     "@types/react-dom": "^18.2.7",
     "@types/react-native": "^0.72.2",
     "babel-loader": "^9.1.3",
-    "babel-plugin-module-resolver": "^5.0.2",
     "babel-plugin-react-native-web": "^0.19.9",
     "chromatic": "^11.7.1",
     "concurrently": "^8.2.2",

diff --git a/tsconfig.json b/tsconfig.json
@@ -14,11 +14,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-native",
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["lib/*"]
-    }
+    "jsx": "react-native"
   },
   "include": ["lib"]
 }