Fix circular dependency with background colors

app/onboard/new.tsx

@@ -27,35 +27,11 @@ import * as Crypto from 'expo-crypto';
 import { store } from 'helper/redux/store';
 import { HDKey } from '@scure/bip32';
 import { relays } from 'components/ndk';
+import { runWithAnimationFrame } from 'helper';
 
 // eslint-disable-next-line @typescript-eslint/no-require-imports
 global.Buffer = require('buffer').Buffer;
 
-/**
- * Executes an async function within a requestAnimationFrame to improve UI responsiveness
- */
-export const runWithAnimationFrame = <T extends any[]>(
-  callback: Function,
-  setIsSubmitting?: React.Dispatch<React.SetStateAction<boolean>>
-) => {
-  return async (...args: T) => {
-    if (setIsSubmitting) {
-      setIsSubmitting(true);
-    }
-
-    requestAnimationFrame(async () => {
-      try {
-        await callback(...args);
-      } catch {
-      } finally {
-        if (setIsSubmitting) {
-          setIsSubmitting(false);
-        }
-      }
-    });
-  };
-};
-
 export function generateMnemonic(): string {
   const mnemonic = store.getState()?.nostr?.profiles?.[0]?.mnemonic;
   if (mnemonic) return mnemonic;

app/settings/restoreCounter.tsx

@@ -6,10 +6,10 @@ import { Text } from 'components/common/Text';
 import Container from 'components/layout/Container';
 import { restoreCounter } from 'helper/cashuClient';
 import { increaseCounterV2 } from 'helper/redux/cashu';
-import { runWithAnimationFrame } from '../onboard/new';
 import { ScrollView } from 'react-native';
 import { RootState } from 'helper/redux/store/reducer';
 import { MintKeyset } from '@cashu/cashu-ts';
+import { runWithAnimationFrame } from 'helper';
 
 export default function ModalScreen() {
   const [isLoading, setIsLoading] = useState(false);

components/common/ButtonHandler.tsx

@@ -9,7 +9,7 @@ import { useSelector } from 'react-redux';
 import { memoizedGetTheme } from 'helper/redux/settings';
 import { LinearGradient } from 'expo-linear-gradient';
 import opacity from 'hex-color-opacity';
-import { runWithAnimationFrame } from 'app/onboard/new';
+import { runWithAnimationFrame } from 'helper';
 
 export interface ButtonHandlerButton {
   testID?: string | undefined;

components/common/Card.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Card } from './Card';
+import { persistStore } from 'redux-persist';
+import { Provider } from 'react-redux';
+import { store } from 'helper/redux/store';
+
+export const persistor = persistStore(store);
+
+const meta = {
+  title: 'Card',
+  component: Card,
+  args: {
+    title: 'Hello world',
+    message: 'Hello world',
+    variant: 'info',
+  },
+  decorators: [
+    (Story) => (
+      <Provider store={store}>
+        <Story />
+      </Provider>
+    ),
+  ],
+} satisfies Meta<typeof Card>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  args: {},
+};

components/common/Card.tsx

@@ -43,7 +43,6 @@ export const Card = ({ title, message, variant, icon, onPress }: CardProps) => {
   );
 
   const currentStyle = useMemo(() => variantStyles[variant], [variantStyles, variant]);
-
   return (
     <TouchableOpacity onPress={onPress}>
       <View

components/common/Text.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Text } from './Text';
+import { persistStore } from 'redux-persist';
+import { Provider } from 'react-redux';
+import { store } from 'helper/redux/store';
+
+export const persistor = persistStore(store);
+
+const meta = {
+  title: 'Text',
+  component: Text,
+  args: {
+    color: 'black',
+    children: 'Hello world',
+  },
+  decorators: [
+    (Story) => (
+      <Provider store={store}>
+        <Story />
+      </Provider>
+    ),
+  ],
+} satisfies Meta<typeof Text>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  args: {},
+};

components/common/TouchableOpacity.tsx

@@ -1,4 +1,4 @@
-import { runWithAnimationFrame } from 'app/onboard/new';
+import { runWithAnimationFrame } from 'helper';
 import React, { useRef, FC } from 'react';
 import {
   TouchableOpacity as RNTouchableOpacity,

components/common/View.stories.tsx

@@ -1,11 +1,22 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { View } from './View';
+import { persistStore } from 'redux-persist';
+import { Provider } from 'react-redux';
+import { store } from 'helper/redux/store';
+
+export const persistor = persistStore(store);
 
 const meta = {
   title: 'View',
   component: View,
   args: {},
-  decorators: [(Story) => <Story />],
+  decorators: [
+    (Story) => (
+      <Provider store={store}>
+        <Story />
+      </Provider>
+    ),
+  ],
 } satisfies Meta<typeof View>;
 
 export default meta;

helper/colors.tsx

@@ -79,10 +79,26 @@ export const blues: Shades = {
 export type GreyKey = 0 | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950;
 export type Greys = Record<GreyKey, string>;
 
+export const DARK_GREYS: Greys = {
+  0: '#FFFFFF',
+  50: '#E8EAED',
+  100: '#C7C7C7',
+  200: '#A8A8A8',
+  300: '#787878',
+  400: '#525252',
+  500: '#2C2C2C',
+  600: '#202020',
+  700: '#1C1C1C',
+  800: '#181818',
+  900: '#121212',
+  950: '#080808',
+};
+
 export const greys = (t: string | Theme): Greys => {
   const name = typeof t === 'string' ? t : t.id;
-  if (BACKGROUND_IMAGE_ATTRIBUTES?.[name]) {
-    return BACKGROUND_IMAGE_ATTRIBUTES[name].greys;
+
+  if (name === 'dark') {
+    return DARK_GREYS;
   }
 
   switch (name) {
@@ -574,24 +590,13 @@ export const greys = (t: string | Theme): Greys => {
       };
     }
 
-    case 'dark':
-    default: {
-      return {
-        0: '#FFFFFF',
-        50: '#E8EAED', // 50
-        100: '#C7C7C7', // 100
-        200: '#A8A8A8', // 200
-        300: '#787878', // 300
-        400: '#525252', // 400
-        500: '#2C2C2C', // 500
-        600: '#202020', // 600
-        700: '#1C1C1C', // 700
-        800: '#181818', // 800
-        900: '#121212', // 900
-        950: '#080808', // 950
-      };
-    }
   }
+
+  if (BACKGROUND_IMAGE_ATTRIBUTES?.[name]) {
+    return BACKGROUND_IMAGE_ATTRIBUTES[name].greys;
+  }
+
+  return DARK_GREYS;
 };
 
 export const background = '#FFFFFF';

helper/index.ts

@@ -0,0 +1,24 @@
+/**
+ * Executes an async function within a requestAnimationFrame to improve UI responsiveness
+ */
+export const runWithAnimationFrame = <T extends any[]>(
+  callback: Function,
+  setIsSubmitting?: React.Dispatch<React.SetStateAction<boolean>>
+) => {
+  return async (...args: T) => {
+    if (setIsSubmitting) {
+      setIsSubmitting(true);
+    }
+
+    requestAnimationFrame(async () => {
+      try {
+        await callback(...args);
+      } catch {
+      } finally {
+        if (setIsSubmitting) {
+          setIsSubmitting(false);
+        }
+      }
+    });
+  };
+};