Add dummy data and refactor tiles bansed on new structure, add base t…

…iles ready for development

lib/components/atoms/Button/index.tsx

@@ -1,7 +1,6 @@
 import { useTheme } from "@/context/ThemeContext";
 import { Variant } from "@/types/theme";
 import { useResponsiveScale } from "@/utils/responsiveScaling";
-import { sizes } from "@/utils/styling";
 import { createVariantSystem } from "@/utils/variant";
 import React from "react";
 import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
@@ -14,7 +13,6 @@ type ButtonProps = {
 
 const styles = StyleSheet.create({
   button: {
-    borderRadius: sizes.borderRadius,
     justifyContent: "center",
     alignItems: "center",
     maxWidth: 200,
@@ -67,7 +65,10 @@ const Button: React.FC<ButtonProps> = ({ title, onPress, variant }) => {
   const textStyle = useTextStyles(theme, variant);
 
   return (
-    <TouchableOpacity style={buttonStyle} onPress={onPress}>
+    <TouchableOpacity
+      style={[buttonStyle, { borderRadius: theme.sizes.borderRadiusButton }]}
+      onPress={onPress}
+    >
       <View style={styles.buttonInner}>
         <Text style={[textStyle, { fontSize: fs(12) }]}>{title}</Text>
       </View>

lib/components/atoms/LoadingIndicator/LoadingIndicator.stories.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+import LoadingIndicator from './index';
+
+export default {
+  title: 'components/atoms/LoadingIndicator',
+  component: LoadingIndicator,
+} as Meta;
+
+const Template: StoryFn = (args) => <LoadingIndicator {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  // Add default props here
+};

lib/components/atoms/LoadingIndicator/index.tsx

@@ -0,0 +1,39 @@
+import { useTheme } from "@/context/ThemeContext";
+import React from "react";
+import { ActivityIndicator, StyleSheet, View } from "react-native";
+
+type LoadingIndicatorProps = {
+  // Define your props here
+};
+
+const LoadingIndicator: React.FC<LoadingIndicatorProps> = () => {
+  const { theme } = useTheme();
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          backgroundColor: theme.surface,
+          borderRadius: theme.sizes.borderRadius,
+          padding: theme.sizes.md,
+        },
+      ]}
+    >
+      <ActivityIndicator size="small" color={theme.primary} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: "100%",
+    height: "100%",
+    overflow: "hidden",
+    alignItems: "center",
+    justifyContent: "center",
+    position: "relative",
+  },
+});
+
+export default LoadingIndicator;

lib/components/atoms/ProgressBar/ProgressBar.stories.tsx

@@ -33,7 +33,7 @@ export const Accent = Template.bind({});
 Accent.args = {
   percentage: 75,
   variant: "accent",
-  height: "md",
+  height: "sm",
 };
 
 export const Small = Template.bind({});
@@ -43,23 +43,16 @@ Small.args = {
   height: "sm",
 };
 
-export const Large = Template.bind({});
-Large.args = {
-  percentage: 90,
-  variant: "primary",
-  height: "lg",
-};
-
 export const Full = Template.bind({});
 Full.args = {
   percentage: 100,
   variant: "primary",
-  height: "md",
+  height: "sm",
 };
 
 export const Empty = Template.bind({});
 Empty.args = {
   percentage: 0,
   variant: "primary",
-  height: "md",
+  height: "sm",
 };

lib/components/atoms/ProgressBar/index.tsx

@@ -1,6 +1,5 @@
 import { useTheme } from "@/context/ThemeContext";
 import { Size, ThemeObject, Variant } from "@/types/theme";
-import { sizes } from "@/utils/styling";
 import { createVariantSystem } from "@/utils/variant";
 import React from "react";
 import { StyleSheet, View, ViewStyle } from "react-native";
@@ -11,26 +10,28 @@ export type ProgressBarProps = {
   height?: Size;
 };
 
-const styles = StyleSheet.create({
-  container: {
-    width: "100%",
-    borderRadius: sizes.borderRadiusRounded,
-    overflow: "hidden",
-  },
-  progress: {
-    borderRadius: sizes.borderRadiusRounded,
-    height: "100%",
-  },
-});
-
-const containerStyles = {
-  sm: { height: sizes.sm },
-  md: { height: sizes.md },
-  lg: { height: sizes.lg },
+const useStyles = (theme: ThemeObject) => {
+  return StyleSheet.create({
+    container: {
+      width: "100%",
+      borderRadius: theme.sizes.borderRadiusRounded,
+      overflow: "hidden",
+    },
+    progress: {
+      borderRadius: theme.sizes.borderRadiusRounded,
+      height: "100%",
+    },
+  });
 };
 
+const useContainerStyles = (theme: ThemeObject) => ({
+  sm: { height: theme.sizes.sm },
+  md: { height: theme.sizes.md },
+  lg: { height: theme.sizes.lg },
+});
+
 const useProgressStyles = createVariantSystem(
-  styles.progress,
+  (theme: ThemeObject) => ({ borderRadius: theme.sizes.borderRadiusRounded }),
   (theme: ThemeObject) => ({
     primary: { backgroundColor: theme.primary },
     accent: { backgroundColor: theme.accent },
@@ -42,23 +43,26 @@ const useProgressStyles = createVariantSystem(
 const ProgressBar: React.FC<ProgressBarProps> = ({
   percentage,
   variant = "primary",
-  height = "md",
+  height = "sm",
 }) => {
   const { theme } = useTheme();
+  const styles = useStyles(theme);
+  const containerStyles = useContainerStyles(theme);
+  const progressStyles = useProgressStyles(theme, variant);
+
   const containerStyle = [
     styles.container,
     containerStyles[height],
-    { backgroundColor: theme.derivedBackground },
+    { backgroundColor: theme.derivedSurface[20] },
   ];
-  const progressStyle = useProgressStyles(theme, variant);
 
   const progressWidth: ViewStyle = {
     width: `${Math.min(Math.max(percentage, 0), 100)}%`,
   };
 
   return (
     <View style={containerStyle}>
-      <View style={[styles.progress, progressStyle, progressWidth]} />
+      <View style={[styles.progress, progressStyles, progressWidth]} />
     </View>
   );
 };

lib/components/atoms/Text/index.tsx

@@ -1,13 +1,12 @@
 import { useTheme } from "@/context/ThemeContext";
-import React, { useEffect, useState } from "react";
+import { createResponsiveStyle } from "@/utils/responsiveHelper";
+import React from "react";
 import {
-  Dimensions,
   Text as RNText,
   TextProps as RNTextProps,
   StyleSheet,
   TextStyle,
 } from "react-native";
-import { RFPercentage } from "react-native-responsive-fontsize";
 
 type TextVariant =
   | "eyebrow"
@@ -29,59 +28,41 @@ export const Text: React.FC<TextProps> = ({
   isSurface = false,
   ...props
 }) => {
-  const [dimensions, setDimensions] = useState(Dimensions.get("window"));
   const { theme } = useTheme();
 
-  useEffect(() => {
-    const subscription = Dimensions.addEventListener("change", ({ window }) => {
-      setDimensions(window);
-    });
-    return () => subscription?.remove();
-  }, []);
-
   const getVariantStyle = (variant: TextVariant): TextStyle => {
+    const baseStyle = {
+      color: theme.text,
+    };
     switch (variant) {
       case "eyebrow":
-        return {
-          fontSize: RFPercentage(1),
-          fontWeight: "500",
-          color: isSurface ? theme.surfaceText : theme.text,
-        };
+        return createResponsiveStyle({
+          ...baseStyle,
+        });
       case "title":
-        return {
-          fontSize: RFPercentage(1.2),
-          fontWeight: "bold",
-          color: isSurface ? theme.surfaceText : theme.text,
-        };
+        return createResponsiveStyle({
+          ...baseStyle,
+        });
       case "subtitle":
-        return {
-          fontSize: RFPercentage(1),
-          color: isSurface ? theme.surfaceText : theme.text,
-        };
+        return createResponsiveStyle({
+          ...baseStyle,
+        });
       case "body":
-        return {
-          fontSize: RFPercentage(1),
-          color: isSurface ? theme.surfaceText : theme.text,
-          lineHeight: 20,
-        };
+        return createResponsiveStyle({
+          ...baseStyle,
+        });
       case "caption":
-        return {
-          fontSize: RFPercentage(1.2),
-          color: isSurface ? theme.surfaceText : theme.text,
-          fontWeight: "bold",
-        };
+        return createResponsiveStyle({
+          ...baseStyle,
+        });
       case "label":
-        return {
-          fontSize: RFPercentage(0.7),
-          fontWeight: "500",
-          color: isSurface ? theme.surfaceText : theme.text,
-        };
+        return createResponsiveStyle({
+          ...baseStyle,
+        });
       default:
-        return {
-          fontSize: RFPercentage(1),
-          color: isSurface ? theme.surfaceText : theme.text,
-          lineHeight: 20,
-        };
+        return createResponsiveStyle({
+          ...baseStyle,
+        });
     }
   };
 
@@ -91,9 +72,7 @@ export const Text: React.FC<TextProps> = ({
 };
 
 const styles = StyleSheet.create({
-  base: {
-    // You can keep some base styles here if needed
-  },
+  base: {},
 });
 
 export default Text;

lib/components/atoms/Tile/Tile.stories.tsx

@@ -0,0 +1,15 @@
+import { Meta, StoryFn } from "@storybook/react";
+import React from "react";
+import Tile from "./index";
+
+export default {
+  title: "components/atoms/Tile",
+  component: Tile,
+} as Meta;
+
+const Template: StoryFn<typeof Tile> = (args) => <Tile {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  // Add default props here
+};

lib/components/atoms/Tile/index.tsx

@@ -0,0 +1,50 @@
+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 LoadingIndicator from "../LoadingIndicator";
+
+type TileProps = {
+  children: React.ReactNode;
+};
+
+const Tile: React.FC<TileProps> = ({ children }) => {
+  const { loading: isLoading } = useSectionContext();
+  const { theme } = useTheme();
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          backgroundColor: theme.surface,
+          borderColor: Color(theme.surface).darken(0.02).string(),
+          borderRadius: theme.sizes.borderRadius,
+        },
+      ]}
+    >
+      {isLoading ? <LoadingIndicator /> : children}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: "100%",
+    height: "100%",
+    overflow: "hidden",
+    alignItems: "flex-start",
+    justifyContent: "center",
+    position: "relative",
+    maxWidth: 270,
+    borderWidth: 1,
+    aspectRatio: 1,
+    // shadowColor: "#AAAAAA",
+    // shadowOffset: { width: 0, height: 2 },
+    // shadowOpacity: 0.25,
+    // shadowRadius: 3,
+  },
+});
+
+export default Tile;