Gradients storybook

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}}
+      start={start}
-      end={{x: 1, y: 1}}
+      end={end}
       style={[a.absolute, a.inset_0]}
     />
   )

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>
+  )
+}

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"