Fix types so TSC runs, merge all contexts into one context

white-label-loyalty · Sep 17, 2024 · 7f5d44b · 7f5d44b
1 parent a4ebdf9
commit 7f5d44b
Show file tree

Hide file tree

Showing 30 changed files with 955 additions and 1,007 deletions.
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -1,8 +1,7 @@
 import type { Preview } from '@storybook/react';
-import React from 'react';
+import * as React from 'react';
 import { SectionContext } from '../lib/components/organisms/Section';
-import { SDKProvider } from '../lib/context/SDKContext';
-import { ThemeProvider } from '../lib/context/ThemeContext';
+import { WllSdkProvider } from '../lib/context/WllSdkContext';
 import { Section } from '../lib/types/section';
 import { defaultTheme } from '../lib/utils/styling';
 
@@ -476,21 +475,19 @@ const preview: Preview = {
       const theme = themes[selectedTheme] || defaultTheme;
 
       return (
-        <ThemeProvider theme={theme}>
+        <WllSdkProvider theme={theme} config={sdkConfig}>
           <div
             style={{
               backgroundColor: theme.background,
               minHeight: '100vh',
               padding: '1rem',
             }}
           >
-            <SDKProvider config={sdkConfig}>
-              <MockSectionProvider>
-                <Story />
-              </MockSectionProvider>
-            </SDKProvider>
+            <MockSectionProvider>
+              <Story />
+            </MockSectionProvider>
           </div>
-        </ThemeProvider>
+        </WllSdkProvider>
       );
     },
   ],

diff --git a/babel.config.js b/babel.config.js
@@ -1,8 +1,12 @@
 module.exports = {
   presets: [
-    "@babel/preset-env",
-    "@babel/preset-react",
-    "@babel/preset-typescript",
+    '@babel/preset-env',
+    '@babel/preset-react',
+    '@babel/preset-typescript',
+  ],
+  plugins: [
+    '@babel/plugin-proposal-class-properties',
+    '@babel/plugin-proposal-export-namespace-from',
+    'react-native-web',
   ],
-  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,14 @@
-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";
+import React from 'react';
+import {
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { useWllSdk } from '../../../context/WllSdkContext';
+import { Variant } from '../../../types/theme';
+import { useResponsiveScale } from '../../../utils/responsiveScaling';
+import { createVariantSystem } from '../../../utils/variant';
 
 type ButtonProps = {
   title: string;
@@ -13,35 +18,38 @@ type ButtonProps = {
 
 const styles = StyleSheet.create({
   button: {
-    justifyContent: "center",
-    alignItems: "center",
+    justifyContent: 'center',
+    alignItems: 'center',
     maxWidth: 200,
   },
   buttonInner: {
     paddingHorizontal: 14,
     paddingVertical: 9,
   },
   text: {
-    fontWeight: "bold",
-    textAlign: "center",
-    textTransform: "uppercase",
+    fontWeight: 'bold',
+    textAlign: 'center',
+    textTransform: 'uppercase',
   },
 });
 
-const useButtonStyles = createVariantSystem(styles.button, (theme) => ({
-  primary: {
-    backgroundColor: theme.primary,
-  },
-  accent: {
-    backgroundColor: theme.accent,
-  },
-  positive: {
-    backgroundColor: theme.positive,
-  },
-  negative: {
-    backgroundColor: theme.negative,
-  },
-}));
+const useButtonStyles = createVariantSystem(
+  styles.button,
+  (theme) => ({
+    primary: {
+      backgroundColor: theme.primary,
+    },
+    accent: {
+      backgroundColor: theme.accent,
+    },
+    positive: {
+      backgroundColor: theme.positive,
+    },
+    negative: {
+      backgroundColor: theme.negative,
+    },
+  })
+);
 
 const useTextStyles = createVariantSystem(styles.text, (theme) => ({
   primary: {
@@ -58,15 +66,22 @@ const useTextStyles = createVariantSystem(styles.text, (theme) => ({
   },
 }));
 
-const Button: React.FC<ButtonProps> = ({ title, onPress, variant }) => {
-  const { theme } = useTheme();
+const Button: React.FC<ButtonProps> = ({
+  title,
+  onPress,
+  variant,
+}) => {
+  const { theme } = useWllSdk();
   const { fs } = useResponsiveScale();
   const buttonStyle = useButtonStyles(theme, variant);
   const textStyle = useTextStyles(theme, variant);
 
   return (
     <TouchableOpacity
-      style={[buttonStyle, { borderRadius: theme.sizes.borderRadiusButton }]}
+      style={[
+        buttonStyle,
+        { borderRadius: theme.sizes.borderRadiusButton },
+      ]}
       onPress={onPress}
     >
       <View style={styles.buttonInner}>

diff --git a/lib/components/atoms/Icon/index.tsx b/lib/components/atoms/Icon/index.tsx
@@ -1,6 +1,6 @@
-import * as LucideIcons from "lucide-react";
-import React from "react";
-import { View } from "react-native";
+import * as LucideIcons from 'lucide-react';
+import * as React from 'react';
+import { View } from 'react-native';
 
 type IconName = keyof typeof LucideIcons;
 
@@ -13,11 +13,11 @@ type IconProps = {
 
 const Icon: React.FC<IconProps> = ({
   name,
-  color = "black",
+  color = 'black',
   size = 24,
   strokeWidth = 2,
 }) => {
-  const LucideIcon = LucideIcons[name];
+  const LucideIcon = LucideIcons[name] as React.ElementType;
 
   if (!LucideIcon) {
     console.warn(`Icon "${name}" not found in Lucide icons`);
@@ -26,8 +26,11 @@ const Icon: React.FC<IconProps> = ({
 
   return (
     <View>
-      {/* @ts-ignore */}
-      <LucideIcon color={color} size={size} strokeWidth={strokeWidth} />
+      <LucideIcon
+        color={color}
+        size={size}
+        strokeWidth={strokeWidth}
+      />
     </View>
   );
 };

diff --git a/lib/components/atoms/LoadingIndicator/LoadingIndicator.stories.tsx b/lib/components/atoms/LoadingIndicator/LoadingIndicator.stories.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { StoryFn, Meta } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
+import * as React from 'react';
 import LoadingIndicator from './index';
 
 export default {

diff --git a/lib/components/atoms/LoadingIndicator/index.tsx b/lib/components/atoms/LoadingIndicator/index.tsx
@@ -1,13 +1,13 @@
-import React from "react";
-import { ActivityIndicator, StyleSheet, View } from "react-native";
-import { useTheme } from "../../../context/ThemeContext";
+import React from 'react';
+import { ActivityIndicator, StyleSheet, View } from 'react-native';
+import { useWllSdk } from '../../../context/WllSdkContext';
 
 type LoadingIndicatorProps = {
   // Define your props here
 };
 
 const LoadingIndicator: React.FC<LoadingIndicatorProps> = () => {
-  const { theme } = useTheme();
+  const { theme } = useWllSdk();
 
   return (
     <View
@@ -27,12 +27,12 @@ const LoadingIndicator: React.FC<LoadingIndicatorProps> = () => {
 
 const styles = StyleSheet.create({
   container: {
-    width: "100%",
-    height: "100%",
-    overflow: "hidden",
-    alignItems: "center",
-    justifyContent: "center",
-    position: "relative",
+    width: '100%',
+    height: '100%',
+    overflow: 'hidden',
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'relative',
   },
 });
 

diff --git a/lib/components/atoms/ProgressBar/index.tsx b/lib/components/atoms/ProgressBar/index.tsx
@@ -1,8 +1,8 @@
-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";
+import React from 'react';
+import { StyleSheet, View, ViewStyle } from 'react-native';
+import { useWllSdk } from '../../../context/WllSdkContext';
+import { Size, ThemeObject, Variant } from '../../../types/theme';
+import { createVariantSystem } from '../../../utils/variant';
 
 export type ProgressBarProps = {
   percentage: number;
@@ -13,13 +13,13 @@ export type ProgressBarProps = {
 const useStyles = (theme: ThemeObject) => {
   return StyleSheet.create({
     container: {
-      width: "100%",
+      width: '100%',
       borderRadius: theme.sizes.borderRadiusRounded,
-      overflow: "hidden",
+      overflow: 'hidden',
     },
     progress: {
       borderRadius: theme.sizes.borderRadiusRounded,
-      height: "100%",
+      height: '100%',
     },
   });
 };
@@ -32,7 +32,9 @@ const useContainerStyles = (theme: ThemeObject) => ({
 
 const useProgressStyles = createVariantSystem(
   // @ts-ignore
-  (theme: ThemeObject) => ({ borderRadius: theme.sizes.borderRadiusRounded }),
+  (theme: ThemeObject) => ({
+    borderRadius: theme.sizes.borderRadiusRounded,
+  }),
   (theme: ThemeObject) => ({
     primary: { backgroundColor: theme.primary },
     accent: { backgroundColor: theme.accent },
@@ -43,10 +45,10 @@ const useProgressStyles = createVariantSystem(
 
 const ProgressBar: React.FC<ProgressBarProps> = ({
   percentage,
-  variant = "primary",
-  height = "sm",
+  variant = 'primary',
+  height = 'sm',
 }) => {
-  const { theme } = useTheme();
+  const { theme } = useWllSdk();
   const styles = useStyles(theme);
   const containerStyles = useContainerStyles(theme);
   const progressStyles = useProgressStyles(theme, variant);
@@ -63,7 +65,9 @@ const ProgressBar: React.FC<ProgressBarProps> = ({
 
   return (
     <View style={containerStyle}>
-      <View style={[styles.progress, progressStyles, progressWidth]} />
+      <View
+        style={[styles.progress, progressStyles, progressWidth]}
+      />
     </View>
   );
 };

diff --git a/lib/components/atoms/Text/index.tsx b/lib/components/atoms/Text/index.tsx
@@ -1,20 +1,20 @@
-import React from "react";
+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";
+} from 'react-native';
+import { useWllSdk } from '../../../context/WllSdkContext';
+import { createResponsiveStyle } from '../../../utils/responsiveHelper';
 
 type TextVariant =
-  | "eyebrow"
-  | "title"
-  | "subtitle"
-  | "body"
-  | "caption"
-  | "label";
+  | 'eyebrow'
+  | 'title'
+  | 'subtitle'
+  | 'body'
+  | 'caption'
+  | 'label';
 
 type TextProps = RNTextProps & {
   variant?: TextVariant;
@@ -23,39 +23,39 @@ type TextProps = RNTextProps & {
 };
 
 export const Text: React.FC<TextProps> = ({
-  variant = "body",
+  variant = 'body',
   style,
   isSurface = false,
   ...props
 }) => {
-  const { theme } = useTheme();
+  const { theme } = useWllSdk();
 
   const getVariantStyle = (variant: TextVariant): TextStyle => {
     const baseStyle = {
       color: theme.text,
     };
     switch (variant) {
-      case "eyebrow":
+      case 'eyebrow':
         return createResponsiveStyle({
           ...baseStyle,
         });
-      case "title":
+      case 'title':
         return createResponsiveStyle({
           ...baseStyle,
         });
-      case "subtitle":
+      case 'subtitle':
         return createResponsiveStyle({
           ...baseStyle,
         });
-      case "body":
+      case 'body':
         return createResponsiveStyle({
           ...baseStyle,
         });
-      case "caption":
+      case 'caption':
         return createResponsiveStyle({
           ...baseStyle,
         });
-      case "label":
+      case 'label':
         return createResponsiveStyle({
           ...baseStyle,
         });
@@ -68,7 +68,9 @@ export const Text: React.FC<TextProps> = ({
 
   const variantStyle = getVariantStyle(variant);
 
-  return <RNText style={[styles.base, variantStyle, style]} {...props} />;
+  return (
+    <RNText style={[styles.base, variantStyle, style]} {...props} />
+  );
 };
 
 const styles = StyleSheet.create({