Add hooks example

src/view/screens/Debug.tsx

@@ -1,9 +1,12 @@
 import React from 'react'
+import {View, Text as RNText} from 'react-native'
 import {CenteredView, ScrollView} from '#/view/com/util/Views'
 
 import {useSetColorMode} from '#/state/shell'
 import {
   useBreakpoints,
+  useStyle,
+  useStyles,
   Box,
   Text,
   Button,
@@ -15,28 +18,10 @@ import {
   H6,
 } from '#/view/nova'
 
-function BreakpointDebugger() {
+function ThemeSelector() {
-  const breakpoints = useBreakpoints()
-
-  return (
-    <Box>
-      <Text fontSize="l" fontWeight="900">
-        Breakpoints
-      </Text>
-      <Text pa="m" bg="l2" fontFamily="monospace">
-        {JSON.stringify(breakpoints, null, 2)}
-      </Text>
-    </Box>
-  )
-}
-
-export function DebugScreen() {
   const setColorMode = useSetColorMode()
 
   return (
-    <ScrollView>
-      <CenteredView>
-        <Box pa="xl" gap="xxl">
     <Box row gap="s">
       <Button onPress={() => setColorMode('system')}>
         <Text>System</Text>
@@ -48,19 +33,66 @@ export function DebugScreen() {
         <Text>Dark</Text>
       </Button>
     </Box>
+  )
+}
 
+function BreakpointDebugger() {
+  const breakpoints = useBreakpoints()
+
+  return (
+    <Box>
+      <H3 pb="s" fontWeight="900">
+        Breakpoint Debugger
+      </H3>
+      <Text pa="m" bg="l2" fontFamily="monospace">
+        {JSON.stringify(breakpoints, null, 2)}
+      </Text>
+    </Box>
+  )
+}
+
+function Hooks() {
+  const outer = useStyle({
+    pa: 'm',
+    bg: 'l2',
+  })
+  const {heading} = useStyles({
+    heading: {
+      fontSize: 'l',
+      fontWeight: '900',
+      gtTablet: {
+        fontSize: 'xl',
+      },
+    },
+  })
+
+  return (
+    <View style={outer}>
+      <RNText style={heading}>Hooks</RNText>
+    </View>
+  )
+}
+
+export function DebugScreen() {
+  return (
+    <ScrollView>
+      <CenteredView>
+        <Box pa="xl" gap="xxl">
+          <ThemeSelector />
           <BreakpointDebugger />
 
-          <Box gap="m">
+          <Box>
+            <H3 pb="s" fontWeight="900">
+              Typography
+            </H3>
+
+            <Box gap="m" pa="m" bg="l2">
               <H1>Heading 1</H1>
               <H2>Heading 2</H2>
               <H3>Heading 3</H3>
               <H4>Heading 4</H4>
               <H5>Heading 5</H5>
               <H6>Heading 6</H6>
-          </Box>
-
-          <Box gap="m">
               <Text fontSize="xl" fontWeight="900">
                 H1 Size Text
               </Text>
@@ -70,8 +102,13 @@ export function DebugScreen() {
               <Text fontSize="xs">H5 Size Text</Text>
               <Text fontSize="xxs">H6 Size Text</Text>
             </Box>
+          </Box>
 
-          <Box pa="s" gap="m" bg="l3">
+          <Box>
+            <H3 pb="s" fontWeight="900">
+              Grid
+            </H3>
+            <Box pa="m" gap="m" bg="l3">
               <Box row gap="s">
                 <Box pa="s" bg="l6" />
                 <Box pa="s" bg="l6" />
@@ -90,6 +127,12 @@ export function DebugScreen() {
                 <Box pa="s" bg="l6" flex={1} />
               </Box>
             </Box>
+          </Box>
+
+          <Box>
+            <H3 pb="s" fontWeight="900">
+              Breakpoint styles
+            </H3>
 
             <Box
               row
@@ -108,6 +151,9 @@ export function DebugScreen() {
               <Box w={64} h={64} bg="primary" />
             </Box>
           </Box>
+
+          <Hooks />
+        </Box>
       </CenteredView>
     </ScrollView>
   )