From 63d81734e5fe34f565cfea6f0bd3d9ce3ecab1d5 Mon Sep 17 00:00:00 2001
From: Nick Zhelezkov <nick.zhelezkov@gmail.com>
Date: Mon, 22 Jul 2024 18:16:11 +0300
Subject: [PATCH] configure restyle

---
 example/src/App.tsx          | 13 +++--------
 package.json                 |  3 +++
 src/__tests__/index.test.tsx |  1 -
 src/index.tsx                | 16 +++++++++++---
 src/ui/index.ts              |  5 +++++
 src/ui/theme.ts              | 43 ++++++++++++++++++++++++++++++++++++
 yarn.lock                    | 11 +++++++++
 7 files changed, 78 insertions(+), 14 deletions(-)
 delete mode 100644 src/__tests__/index.test.tsx
 create mode 100644 src/ui/index.ts
 create mode 100644 src/ui/theme.ts

diff --git a/example/src/App.tsx b/example/src/App.tsx
index 7d3a0cd..39ad006 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -1,17 +1,10 @@
-import { useState, useEffect } from 'react';
-import { StyleSheet, View, Text } from 'react-native';
-import { multiply } from '@dialectlabs/blinks-native';
+import { Blink } from '@dialectlabs/blinks-native';
+import { StyleSheet, View } from 'react-native';
 
 export default function App() {
-  const [result, setResult] = useState<number | undefined>();
-
-  useEffect(() => {
-    multiply(3, 7).then(setResult);
-  }, []);
-
   return (
     <View style={styles.container}>
-      <Text>Result: {result}</Text>
+      <Blink />
     </View>
   );
 }
diff --git a/package.json b/package.json
index c5a1871..3c844c4 100644
--- a/package.json
+++ b/package.json
@@ -162,5 +162,8 @@
   "create-react-native-library": {
     "type": "library",
     "version": "0.38.2"
+  },
+  "dependencies": {
+    "@shopify/restyle": "^2.4.4"
   }
 }
diff --git a/src/__tests__/index.test.tsx b/src/__tests__/index.test.tsx
deleted file mode 100644
index bf84291..0000000
--- a/src/__tests__/index.test.tsx
+++ /dev/null
@@ -1 +0,0 @@
-it.todo('write a test');
diff --git a/src/index.tsx b/src/index.tsx
index 9e42cf3..6c45622 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,3 +1,13 @@
-export function multiply(a: number, b: number): Promise<number> {
-  return Promise.resolve(a * b);
-}
+import { ThemeProvider } from '@shopify/restyle';
+import { Box, Text } from './ui';
+import theme from './ui/theme';
+
+export const Blink = () => {
+  return (
+    <ThemeProvider theme={theme}>
+      <Box>
+        <Text variant="header">I am blink!</Text>
+      </Box>
+    </ThemeProvider>
+  );
+};
diff --git a/src/ui/index.ts b/src/ui/index.ts
new file mode 100644
index 0000000..b39b4f7
--- /dev/null
+++ b/src/ui/index.ts
@@ -0,0 +1,5 @@
+import { createBox, createText } from '@shopify/restyle';
+import type { Theme } from './theme';
+
+export const Box = createBox<Theme>();
+export const Text = createText<Theme>();
diff --git a/src/ui/theme.ts b/src/ui/theme.ts
new file mode 100644
index 0000000..0079154
--- /dev/null
+++ b/src/ui/theme.ts
@@ -0,0 +1,43 @@
+import { createTheme } from '@shopify/restyle';
+
+const palette = {
+  purpleLight: '#8C6FF7',
+  purplePrimary: '#5A31F4',
+  purpleDark: '#3F22AB',
+
+  greenLight: '#56DCBA',
+  greenPrimary: '#0ECD9D',
+  greenDark: '#0A906E',
+
+  black: '#0B0B0B',
+  white: '#F0F2F3',
+};
+
+const theme = createTheme({
+  colors: {
+    mainBackground: palette.white,
+    cardPrimaryBackground: palette.purplePrimary,
+  },
+  spacing: {
+    s: 8,
+    m: 16,
+    l: 24,
+    xl: 40,
+  },
+  textVariants: {
+    header: {
+      fontWeight: 'bold',
+      fontSize: 34,
+    },
+    body: {
+      fontSize: 16,
+      lineHeight: 24,
+    },
+    defaults: {
+      // We can define a default text variant here.
+    },
+  },
+});
+
+export type Theme = typeof theme;
+export default theme;
diff --git a/yarn.lock b/yarn.lock
index de3d7ed..0b04358 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1767,6 +1767,7 @@ __metadata:
   resolution: "@dialectlabs/blinks-native@workspace:."
   dependencies:
     "@react-native/eslint-config": ^0.74.85
+    "@shopify/restyle": ^2.4.4
     "@types/jest": ^29.5.5
     "@types/react": ^18.2.44
     del-cli: ^5.1.0
@@ -3272,6 +3273,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@shopify/restyle@npm:^2.4.4":
+  version: 2.4.4
+  resolution: "@shopify/restyle@npm:2.4.4"
+  peerDependencies:
+    react: "*"
+    react-native: "*"
+  checksum: 730c8a9f0a30325b8239a60615bf15412eacddaa0f913da5937981a422b10e98a955e8aa0badf65e1eede6bc8d35dd2301b04ca0aa427dfafdf7e6544b63682e
+  languageName: node
+  linkType: hard
+
 "@sideway/address@npm:^4.1.5":
   version: 4.1.5
   resolution: "@sideway/address@npm:4.1.5"