From fea90b72f92a4b42284d29d018a27815b6ea89c9 Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Sun, 8 Dec 2024 12:25:52 -0600
Subject: [PATCH] Gradients storybook

---
 src/components/GradientFill.tsx          | 53 +++++++++++++++++++++++-
 src/view/screens/Storybook/Gradients.tsx | 40 ++++++++++++++++++
 src/view/screens/Storybook/index.tsx     |  3 ++
 3 files changed, 94 insertions(+), 2 deletions(-)
 create mode 100644 src/view/screens/Storybook/Gradients.tsx

diff --git a/src/components/GradientFill.tsx b/src/components/GradientFill.tsx
index 3dff404d74..ef86b57044 100644
--- a/src/components/GradientFill.tsx
+++ b/src/components/GradientFill.tsx
@@ -1,11 +1,14 @@
+import {useMemo} from 'react'
 import {LinearGradient} from 'expo-linear-gradient'
 
 import {atoms as a, tokens} from '#/alf'
 
 export function GradientFill({
   gradient,
+  rotate = '0deg',
 }: {
   gradient:
+    | typeof tokens.gradients.primary
     | typeof tokens.gradients.sky
     | typeof tokens.gradients.midnight
     | typeof tokens.gradients.sunrise
@@ -13,19 +16,65 @@ export function GradientFill({
     | typeof tokens.gradients.bonfire
     | typeof tokens.gradients.summer
     | typeof tokens.gradients.nordic
+  rotate?:
+    | '0deg'
+    | '45deg'
+    | '90deg'
+    | '135deg'
+    | '180deg'
+    | '225deg'
+    | '270deg'
+    | '315deg'
 }) {
   if (gradient.values.length < 2) {
     throw new Error('Gradient must have at least 2 colors')
   }
 
+  const {start, end} = useMemo(() => {
+    return {
+      '0deg': {
+        start: {x: 0, y: 1},
+        end: {x: 1, y: 1},
+      },
+      '45deg': {
+        start: {x: 0, y: 0},
+        end: {x: 1, y: 1},
+      },
+      '90deg': {
+        start: {x: 1, y: 0},
+        end: {x: 1, y: 1},
+      },
+      '135deg': {
+        start: {x: 1, y: 0},
+        end: {x: 0, y: 1},
+      },
+      '180deg': {
+        start: {x: 1, y: 0},
+        end: {x: 0, y: 0},
+      },
+      '225deg': {
+        start: {x: 1, y: 1},
+        end: {x: 0, y: 0},
+      },
+      '270deg': {
+        start: {x: 0, y: 1},
+        end: {x: 0, y: 0},
+      },
+      '315deg': {
+        start: {x: 0, y: 1},
+        end: {x: 1, y: 0},
+      },
+    }[rotate]
+  }, [rotate])
+
   return (
     <LinearGradient
       colors={gradient.values.map(c => c[1]) as [string, string, ...string[]]}
       locations={
         gradient.values.map(c => c[0]) as [number, number, ...number[]]
       }
-      start={{x: 0, y: 0}}
-      end={{x: 1, y: 1}}
+      start={start}
+      end={end}
       style={[a.absolute, a.inset_0]}
     />
   )
diff --git a/src/view/screens/Storybook/Gradients.tsx b/src/view/screens/Storybook/Gradients.tsx
new file mode 100644
index 0000000000..8b1156622c
--- /dev/null
+++ b/src/view/screens/Storybook/Gradients.tsx
@@ -0,0 +1,40 @@
+import {View} from 'react-native'
+
+import {atoms as a, tokens} from '#/alf'
+import {GradientFill} from '#/components/GradientFill'
+import {H1} from '#/components/Typography'
+
+export function Gradients() {
+  return (
+    <View style={[a.gap_md]}>
+      <H1>Gradients</H1>
+
+      <View style={[a.gap_md]}>
+        {(
+          [
+            '0deg',
+            '45deg',
+            '90deg',
+            '135deg',
+            '180deg',
+            '225deg',
+            '270deg',
+            '315deg',
+          ] as const
+        ).map(rotate => (
+          <View
+            key={rotate}
+            style={[
+              a.relative,
+              a.w_full,
+              {
+                height: 600,
+              },
+            ]}>
+            <GradientFill gradient={tokens.gradients.bonfire} rotate={rotate} />
+          </View>
+        ))}
+      </View>
+    </View>
+  )
+}
diff --git a/src/view/screens/Storybook/index.tsx b/src/view/screens/Storybook/index.tsx
index de3d46533b..86b130f35c 100644
--- a/src/view/screens/Storybook/index.tsx
+++ b/src/view/screens/Storybook/index.tsx
@@ -15,6 +15,7 @@ import {Breakpoints} from './Breakpoints'
 import {Buttons} from './Buttons'
 import {Dialogs} from './Dialogs'
 import {Forms} from './Forms'
+import {Gradients} from './Gradients'
 import {Icons} from './Icons'
 import {Links} from './Links'
 import {Menus} from './Menus'
@@ -127,6 +128,8 @@ function StorybookInner() {
             <Breakpoints />
             <Dialogs />
 
+            <Gradients />
+
             <Button
               variant="solid"
               color="primary"