Stacks v4.0.0 (with Unistyles v3)

example/.gitignore → apps/example/.gitignore

@@ -5,6 +5,7 @@ node_modules/
 
 # Expo
 .expo/
+.build/
 dist/
 web-build/
 
@@ -35,3 +36,4 @@ yarn-error.*
 *.tsbuildinfo
 
 app/playground/
+components/Screen2.tsx

example/app.json → apps/example/app.json

@@ -5,6 +5,7 @@
     "version": "1.0.0",
     "icon": "./assets/icon.png",
     "userInterfaceStyle": "light",
+    "newArchEnabled": true,
     "splash": {
       "image": "./assets/splash.png",
       "resizeMode": "contain",
@@ -15,7 +16,10 @@
     ],
     "ios": {
       "supportsTablet": true,
-      "bundleIdentifier": "com.anonymous.stacks"
+      "bundleIdentifier": "com.anonymous.stacks",
+      "infoPlist": {
+        "ITSAppUsesNonExemptEncryption": false
+      }
     },
     "android": {
       "adaptiveIcon": {
@@ -30,6 +34,14 @@
     "plugins": [
       "expo-router"
     ],
-    "scheme": "stacks"
+    "scheme": "stacks",
+    "extra": {
+      "router": {
+        "origin": false
+      },
+      "eas": {
+        "projectId": "6c5fdf69-115c-4880-99f1-880467bece9b"
+      }
+    }
   }
 }

example/app/_layout.tsx → apps/example/app/_layout.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable import/no-default-export */
-import { Stack } from 'expo-router';
+import * as React from 'react';
 
-import './styles/unistyles';
+import { Stack } from 'expo-router';
 
 const Layout = () => {
   return <Stack screenOptions={{ headerShown: false }} />;

example/app/bleed/index.tsx → apps/example/app/bleed/index.tsx

@@ -5,8 +5,8 @@ import * as React from 'react';
 
 import { Bleed, Stack } from '@grapp/stacks';
 
-import { Placeholder } from '../components/Placeholder';
-import { Screen } from '../components/Screen';
+import { Placeholder } from '../../components/Placeholder';
+import { Screen } from '../../components/Screen';
 
 const Page = () => {
   return (

example/app/columns/index.tsx → apps/example/app/columns/index.tsx

@@ -2,31 +2,27 @@
 import * as React from 'react';
 
 /* eslint-disable import/no-default-export */
-import { Column, Columns, Hidden, Stack } from '@grapp/stacks';
+import { Box, Column, Columns, Hidden, Stack } from '@grapp/stacks';
 
-import { Placeholder } from '../components/Placeholder';
-import { Screen } from '../components/Screen';
+import { Placeholder } from '../../components/Placeholder';
+import { Screen } from '../../components/Screen';
 
 const Page = () => {
   return (
     <Screen space={8} paddingX={4}>
       <Screen.ScrollView>
         <Stack space={8}>
-          <Stack space={2}>
-            <Columns
-              space={2}
-              backgroundColor="yellow"
-              borderRadius={10}
-              borderWidth={1}
-              borderColor="green"
-            >
-              <Column flex="1/2">
-                <Placeholder label="1/2" backgroundColor="transparent" />
-              </Column>
-              <Column flex="1/2">
-                <Placeholder label="1/2" backgroundColor="transparent" />
-              </Column>
-            </Columns>
+          <Stack space={2} marginTop={1}>
+            <Box backgroundColor="yellow" outlineColor="red" outlineWidth={1} outlineStyle="solid">
+              <Columns space={2}>
+                <Column flex="1/2">
+                  <Placeholder label="1/2" backgroundColor="transparent" />
+                </Column>
+                <Column flex="1/2">
+                  <Placeholder label="1/2" backgroundColor="transparent" />
+                </Column>
+              </Columns>
+            </Box>
 
             <Columns space={2}>
               <Column flex="1/4">
@@ -77,8 +73,10 @@ const Page = () => {
             </Columns>
 
             <Columns space={2}>
-              <Column flex="1/4" backgroundColor="red" borderWidth={1}>
-                <Placeholder label="1/4" backgroundColor="transparent" />
+              <Column flex="1/4">
+                <Box backgroundColor="red" outlineColor="green" outlineWidth={1} outlineOffset={-2}>
+                  <Placeholder label="1/4" backgroundColor="transparent" />
+                </Box>
               </Column>
               <Column flex="3/4">
                 <Placeholder label="3/4" />
@@ -121,7 +119,7 @@ const Page = () => {
             <Columns space={2}>
               <Placeholder label="1" />
               <Hidden below="tablet">
-                <Placeholder label="2" />
+                <Placeholder label="2, hidden" />
               </Hidden>
               <Placeholder label="3" />
             </Columns>

example/app/float-box/index.tsx → apps/example/app/float-box/index.tsx

@@ -4,8 +4,8 @@ import * as React from 'react';
 /* eslint-disable import/no-default-export */
 import { FloatBox } from '@grapp/stacks';
 
-import { Placeholder } from '../components/Placeholder';
-import { Screen } from '../components/Screen';
+import { Placeholder } from '../../components/Placeholder';
+import { Screen } from '../../components/Screen';
 
 const Page = () => {
   return (

example/app/index.tsx → apps/example/app/index.tsx

@@ -1,16 +1,16 @@
 /* eslint-disable react-native/no-raw-text */
 
 /* eslint-disable import/no-default-export */
-import { createStyleSheet, useStyles } from 'react-native-unistyles';
-
-import { Stack } from '@grapp/stacks';
+import * as React from 'react';
+import { StyleSheet } from 'react-native-unistyles';
 
 import { Link } from 'expo-router';
 
-import { Screen } from './components/Screen';
+import { Stack } from '@grapp/stacks';
+
+import { Screen } from '../components/Screen';
 
 const Page = () => {
-  const { styles } = useStyles(stylesheet);
   return (
     <Screen space={4} paddingX={4}>
       <Screen.ScrollView>
@@ -51,7 +51,7 @@ const Page = () => {
   );
 };
 
-const stylesheet = createStyleSheet({
+const styles = StyleSheet.create({
   link: {
     color: '#0B0F1A',
   },

example/app/inline/index.tsx → apps/example/app/inline/index.tsx

@@ -4,8 +4,8 @@ import * as React from 'react';
 /* eslint-disable import/no-default-export */
 import { Inline, Stack } from '@grapp/stacks';
 
-import { Placeholder } from '../components/Placeholder';
-import { Screen } from '../components/Screen';
+import { Placeholder } from '../../components/Placeholder';
+import { Screen } from '../../components/Screen';
 
 const Page = () => {
   return (

example/app/inset/index.tsx → apps/example/app/inset/index.tsx

@@ -4,12 +4,12 @@ import * as React from 'react';
 /* eslint-disable import/no-default-export */
 import { Inset, Stack } from '@grapp/stacks';
 
-import { Placeholder } from '../components/Placeholder';
-import { Screen } from '../components/Screen';
+import { Placeholder } from '../../components/Placeholder';
+import { Screen } from '../../components/Screen';
 
 const Page = () => {
   return (
-    <Screen space={8} paddingX={4}>
+    <Screen paddingX={4}>
       <Screen.ScrollView>
         <Stack space={4}>
           <Placeholder />
@@ -37,6 +37,9 @@ const Page = () => {
           </Inset>
         </Stack>
       </Screen.ScrollView>
+      <Screen.Footer>
+        <Placeholder label="right = 4" />
+      </Screen.Footer>
     </Screen>
   );
 };

apps/example/app/rows/index.tsx

@@ -0,0 +1,36 @@
+/* eslint-disable react-native/no-raw-text */
+import * as React from 'react';
+import { Hide, mq } from 'react-native-unistyles';
+
+/* eslint-disable import/no-default-export */
+import { Hidden, Row, Rows } from '@grapp/stacks';
+
+import { Placeholder } from '../../components/Placeholder';
+
+const Page = () => {
+  return (
+    <Rows space={4} defaultFlex="1/5" paddingX={4} paddingTop={14} paddingBottom={6}>
+      <Row>
+        <Placeholder flex="fluid" label="1" />
+      </Row>
+      <Row flex="fluid">
+        <Rows space={4}>
+          <Placeholder flex="fluid" label="2.1" />
+          <Row>
+            <Rows space={2} alignX="center">
+              <Placeholder flex="fluid" width={200} label="2.1.1" />
+              <Placeholder flex="fluid" width={280} label="2.1.2" />
+              <Placeholder flex="fluid" width={240} label="2.1.3" />
+            </Rows>
+          </Row>
+          <Placeholder flex="fluid" label="2.2" />
+        </Rows>
+      </Row>
+      <Row>
+        <Placeholder flex="fluid" label="3" />
+      </Row>
+    </Rows>
+  );
+};
+
+export default Page;

example/app/stack/index.tsx → apps/example/app/stack/index.tsx

@@ -2,11 +2,11 @@
 import * as React from 'react';
 
 /* eslint-disable import/no-default-export */
-import { Stack } from '@grapp/stacks';
+import { Box, Stack } from '@grapp/stacks';
 
-import { Divider } from '../components/Divider';
-import { Placeholder } from '../components/Placeholder';
-import { Screen } from '../components/Screen';
+import { Divider } from '../../components/Divider';
+import { Placeholder } from '../../components/Placeholder';
+import { Screen } from '../../components/Screen';
 
 const Page = () => {
   return (

example/app/tiles/index.tsx → apps/example/app/tiles/index.tsx

@@ -4,8 +4,8 @@ import * as React from 'react';
 /* eslint-disable import/no-default-export */
 import { Tiles } from '@grapp/stacks';
 
-import { Placeholder } from '../components/Placeholder';
-import { Screen } from '../components/Screen';
+import { Placeholder } from '../../components/Placeholder';
+import { Screen } from '../../components/Screen';
 
 const Page = () => {
   return (

apps/example/babel.config.js

@@ -0,0 +1,15 @@
+module.exports = api => {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+    plugins: [
+      require.resolve('../plugin'),
+      [
+        'react-native-unistyles/plugin',
+        {
+          autoProcessImports: ['@grapp/stacks'],
+        },
+      ],
+    ],
+  };
+};

example/app/components/Placeholder.tsx → apps/example/components/Placeholder.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Platform, Text } from 'react-native';
-import { createStyleSheet, useStyles } from 'react-native-unistyles';
+import { StyleSheet } from 'react-native-unistyles';
 
 import { AxisX, AxisY, Box, Flex, FloatBox, Space } from '@grapp/stacks';
 
@@ -25,7 +25,6 @@ export const Placeholder = (props: Props) => {
     label,
     backgroundColor = '#1BCABE',
   } = props;
-  const { styles } = useStyles(stylesheet);
 
   const common = {
     backgroundColor,
@@ -58,7 +57,7 @@ export const Placeholder = (props: Props) => {
   );
 };
 
-const stylesheet = createStyleSheet({
+const styles = StyleSheet.create({
   root: {
     borderColor: '#1D525640',
     borderWidth: 1,

example/app/components/Screen.tsx → apps/example/components/Screen.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react-native/no-color-literals */
 import * as React from 'react';
 import { Button, ScrollView as RNScrollView, ScrollViewProps } from 'react-native';
-import { createStyleSheet, UnistylesRuntime, useStyles } from 'react-native-unistyles';
+import { StyleSheet, UnistylesRuntime } from 'react-native-unistyles';
 
 import {
   Box,
@@ -81,16 +81,20 @@ export const Screen = (props: ScreenProps) => {
   );
 };
 
-const Content = Row.from<Props>(props => {
+const Content = Row.from((props: Props) => {
   const { paddingX } = useScreen();
   return <Box paddingX={paddingX} {...props} />;
 });
 
-const ScrollView = Row.from<Props & ScrollViewProps>(props => {
+const Footer = Row.from((props: Props) => {
+  const { children } = props;
+  return <Content flex="content">{children}</Content>;
+});
+
+const ScrollView = Row.from((props: Props & ScrollViewProps) => {
   const { children, contentContainerStyle, flex = 'fluid', horizontal } = props;
   const { paddingX } = useScreen();
   const { multiply } = useSpacingHelpers();
-  const { styles } = useStyles(stylesheet);
 
   return (
     <Box flex={flex}>
@@ -108,11 +112,12 @@ const ScrollView = Row.from<Props & ScrollViewProps>(props => {
   );
 });
 
-const stylesheet = createStyleSheet({
+const styles = StyleSheet.create({
   scrollContainer: {
     flexGrow: 1,
   },
 });
 
 Screen.Content = Content;
 Screen.ScrollView = ScrollView;
+Screen.Footer = Footer;

apps/example/eas.json

@@ -0,0 +1,16 @@
+{
+  "cli": {
+    "version": ">= 14.7.1",
+    "appVersionSource": "remote"
+  },
+  "build": {
+    "development": {
+      "developmentClient": true,
+      "distribution": "internal",
+      "ios": {
+        "simulator": true
+      }
+    }
+  }
+}
+

apps/example/index.js

@@ -0,0 +1,3 @@
+import 'expo-router/entry';
+
+import './styles/unistyles';