@robin-ux/native 0.1.0 → 0.1.1

package/build/components/HeaderView.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { ScrollViewProps, StyleProp, ViewStyle } from "react-native";
+export interface HeaderViewProps {
+    title: string;
+    actionButton?: React.ReactNode;
+    children: React.ReactNode;
+    scrollViewProps?: ScrollViewProps;
+    style?: StyleProp<ViewStyle>;
+    fixed?: boolean;
+    defaultStyle?: "light" | "dark";
+}
+export declare function HeaderView({ title, actionButton, children, scrollViewProps, style, defaultStyle, fixed }: HeaderViewProps): React.JSX.Element;
+//# sourceMappingURL=HeaderView.d.ts.map

package/build/components/HeaderView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderView.d.ts","sourceRoot":"","sources":["../../src/components/HeaderView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AACtC,OAAO,EAAY,eAAe,EAAE,SAAS,EAAQ,SAAS,EAAE,MAAM,cAAc,CAAC;AAMrF,MAAM,WAAW,eAAe;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CACnC;AAED,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,eAAe,EAAE,KAAK,EAAE,YAAY,EAAE,KAAa,EAAE,EAAE,eAAe,qBA0CjI"}

package/build/components/HeaderView.js

@@ -0,0 +1,36 @@
+import React, { useRef } from "react";
+import { Animated, View } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { layouts, spacing, useThemedStyles } from "../utils";
+import { DynamicStatusBar } from "./DynamicStatusBar";
+import { Text } from "./Text";
+export function HeaderView({ title, actionButton, children, scrollViewProps, style, defaultStyle, fixed = false }) {
+    const scrollY = useRef(new Animated.Value(0)).current;
+    const styles = useThemedStyles((colors) => ({
+        container: {
+            flex: 1,
+            backgroundColor: colors.background,
+        },
+        header: {
+            paddingHorizontal: spacing.md,
+            paddingTop: spacing.md,
+            ...layouts.rowBetween,
+        },
+        content: {
+            flexGrow: 1,
+        },
+    }));
+    return (<SafeAreaView style={[styles.container, style]} edges={["top", "left", "right"]}>
+            <DynamicStatusBar scrollY={scrollY} threshold={100} defaultStyle={defaultStyle}/>
+            <View style={styles.header}>
+                <Text variant="heading" weight="extrabold">
+                    {title}
+                </Text>
+                {actionButton}
+            </View>
+            {fixed ? (<View style={styles.content}>{children}</View>) : (<Animated.ScrollView style={styles.container} contentContainerStyle={styles.content} onScroll={Animated.event([{ nativeEvent: { contentOffset: { y: scrollY } } }], { useNativeDriver: true })} scrollEventThrottle={16} {...scrollViewProps}>
+                    {children}
+                </Animated.ScrollView>)}
+        </SafeAreaView>);
+}
+//# sourceMappingURL=HeaderView.js.map

package/build/components/HeaderView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderView.js","sourceRoot":"","sources":["../../src/components/HeaderView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,QAAQ,EAA8B,IAAI,EAAa,MAAM,cAAc,CAAC;AACrF,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAC9D,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAC7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAY9B,MAAM,UAAU,UAAU,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,eAAe,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,GAAG,KAAK,EAAmB;IAC9H,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAEtD,MAAM,MAAM,GAAG,eAAe,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;QACxC,SAAS,EAAE;YACP,IAAI,EAAE,CAAC;YACP,eAAe,EAAE,MAAM,CAAC,UAAU;SACrC;QACD,MAAM,EAAE;YACJ,iBAAiB,EAAE,OAAO,CAAC,EAAE;YAC7B,UAAU,EAAE,OAAO,CAAC,EAAE;YACtB,GAAG,OAAO,CAAC,UAAU;SACxB;QACD,OAAO,EAAE;YACL,QAAQ,EAAE,CAAC;SACd;KACJ,CAAC,CAAC,CAAC;IAEJ,OAAO,CACH,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC,CAC5E;YAAA,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,CAAC,YAAY,CAAC,CAAC,YAAY,CAAC,EAC/E;YAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CACvB;gBAAA,CAAC,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CACtC;oBAAA,CAAC,KAAK,CACV;gBAAA,EAAE,IAAI,CACN;gBAAA,CAAC,YAAY,CACjB;YAAA,EAAE,IAAI,CACN;YAAA,CAAC,KAAK,CAAC,CAAC,CAAC,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC,CACjD,CAAC,CAAC,CAAC,CACA,CAAC,QAAQ,CAAC,UAAU,CAChB,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CACxB,qBAAqB,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CACtC,QAAQ,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,WAAW,EAAE,EAAE,aAAa,EAAE,EAAE,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,eAAe,EAAE,IAAI,EAAE,CAAC,CAAC,CAC1G,mBAAmB,CAAC,CAAC,EAAE,CAAC,CACxB,IAAI,eAAe,CAAC,CAEpB;oBAAA,CAAC,QAAQ,CACb;gBAAA,EAAE,QAAQ,CAAC,UAAU,CAAC,CACzB,CACL;QAAA,EAAE,YAAY,CAAC,CAClB,CAAC;AACN,CAAC","sourcesContent":["import React, { useRef } from \"react\";\nimport { Animated, ScrollViewProps, StyleProp, View, ViewStyle } from \"react-native\";\nimport { SafeAreaView } from \"react-native-safe-area-context\";\nimport { layouts, spacing, useThemedStyles } from \"../utils\";\nimport { DynamicStatusBar } from \"./DynamicStatusBar\";\nimport { Text } from \"./Text\";\n\nexport interface HeaderViewProps {\n    title: string;\n    actionButton?: React.ReactNode;\n    children: React.ReactNode;\n    scrollViewProps?: ScrollViewProps;\n    style?: StyleProp<ViewStyle>;\n    fixed?: boolean;\n    defaultStyle?: \"light\" | \"dark\";\n}\n\nexport function HeaderView({ title, actionButton, children, scrollViewProps, style, defaultStyle, fixed = false }: HeaderViewProps) {\n    const scrollY = useRef(new Animated.Value(0)).current;\n\n    const styles = useThemedStyles((colors) => ({\n        container: {\n            flex: 1,\n            backgroundColor: colors.background,\n        },\n        header: {\n            paddingHorizontal: spacing.md,\n            paddingTop: spacing.md,\n            ...layouts.rowBetween,\n        },\n        content: {\n            flexGrow: 1,\n        },\n    }));\n\n    return (\n        <SafeAreaView style={[styles.container, style]} edges={[\"top\", \"left\", \"right\"]}>\n            <DynamicStatusBar scrollY={scrollY} threshold={100} defaultStyle={defaultStyle} />\n            <View style={styles.header}>\n                <Text variant=\"heading\" weight=\"extrabold\">\n                    {title}\n                </Text>\n                {actionButton}\n            </View>\n            {fixed ? (\n                <View style={styles.content}>{children}</View>\n            ) : (\n                <Animated.ScrollView\n                    style={styles.container}\n                    contentContainerStyle={styles.content}\n                    onScroll={Animated.event([{ nativeEvent: { contentOffset: { y: scrollY } } }], { useNativeDriver: true })}\n                    scrollEventThrottle={16}\n                    {...scrollViewProps}\n                >\n                    {children}\n                </Animated.ScrollView>\n            )}\n        </SafeAreaView>\n    );\n}\n"]}

package/build/components/index.d.ts

@@ -1,13 +1,15 @@
-export { Button } from './Button';
-export type { ButtonProps, ButtonVariant, ButtonSize } from './Button';
-export { Text } from './Text';
-export type { TextProps, TextVariant, TextWeight, TextColor, TextAlign } from './Text';
-export { Input, PasswordInput, BaseInput } from './Input';
-export type { InputProps } from './Input';
-export { SegmentedControl } from './SegmentedControl';
-export type { SegmentedControlProps, Segment } from './SegmentedControl';
-export { Badge } from './Badge';
-export type { BadgeProps, BadgeStatus } from './Badge';
-export { DynamicStatusBar } from './DynamicStatusBar';
-export type { DynamicStatusBarProps } from './DynamicStatusBar';
+export { Button } from "./Button";
+export type { ButtonProps, ButtonSize, ButtonVariant } from "./Button";
+export { Text } from "./Text";
+export type { TextAlign, TextColor, TextProps, TextVariant, TextWeight } from "./Text";
+export { BaseInput, Input, PasswordInput } from "./Input";
+export type { InputProps } from "./Input";
+export { SegmentedControl } from "./SegmentedControl";
+export type { Segment, SegmentedControlProps } from "./SegmentedControl";
+export { Badge } from "./Badge";
+export type { BadgeProps, BadgeStatus } from "./Badge";
+export { DynamicStatusBar } from "./DynamicStatusBar";
+export type { DynamicStatusBarProps } from "./DynamicStatusBar";
+export { HeaderView } from "./HeaderView";
+export type { HeaderViewProps } from "./HeaderView";
 //# sourceMappingURL=index.d.ts.map

package/build/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAGvE,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAGvF,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAC1D,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAG1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,qBAAqB,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAGzE,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAGvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAGvE,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAGvF,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC1D,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAG1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,OAAO,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAGzE,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAGvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAEhE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC"}

package/build/components/index.js

@@ -1,13 +1,14 @@
 // Button
-export { Button } from './Button';
+export { Button } from "./Button";
 // Text
-export { Text } from './Text';
+export { Text } from "./Text";
 // Input
-export { Input, PasswordInput, BaseInput } from './Input';
+export { BaseInput, Input, PasswordInput } from "./Input";
 // SegmentedControl
-export { SegmentedControl } from './SegmentedControl';
+export { SegmentedControl } from "./SegmentedControl";
 // Badge
-export { Badge } from './Badge';
+export { Badge } from "./Badge";
 // DynamicStatusBar
-export { DynamicStatusBar } from './DynamicStatusBar';
+export { DynamicStatusBar } from "./DynamicStatusBar";
+export { HeaderView } from "./HeaderView";
 //# sourceMappingURL=index.js.map

package/build/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,SAAS;AACT,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAGlC,OAAO;AACP,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAG9B,QAAQ;AACR,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAG1D,mBAAmB;AACnB,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAGtD,QAAQ;AACR,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAGhC,mBAAmB;AACnB,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC","sourcesContent":["// Button\nexport { Button } from './Button';\nexport type { ButtonProps, ButtonVariant, ButtonSize } from './Button';\n\n// Text\nexport { Text } from './Text';\nexport type { TextProps, TextVariant, TextWeight, TextColor, TextAlign } from './Text';\n\n// Input\nexport { Input, PasswordInput, BaseInput } from './Input';\nexport type { InputProps } from './Input';\n\n// SegmentedControl\nexport { SegmentedControl } from './SegmentedControl';\nexport type { SegmentedControlProps, Segment } from './SegmentedControl';\n\n// Badge\nexport { Badge } from './Badge';\nexport type { BadgeProps, BadgeStatus } from './Badge';\n\n// DynamicStatusBar\nexport { DynamicStatusBar } from './DynamicStatusBar';\nexport type { DynamicStatusBarProps } from './DynamicStatusBar';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,SAAS;AACT,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAGlC,OAAO;AACP,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAG9B,QAAQ;AACR,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAG1D,mBAAmB;AACnB,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAGtD,QAAQ;AACR,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAGhC,mBAAmB;AACnB,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAGtD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC","sourcesContent":["// Button\nexport { Button } from \"./Button\";\nexport type { ButtonProps, ButtonSize, ButtonVariant } from \"./Button\";\n\n// Text\nexport { Text } from \"./Text\";\nexport type { TextAlign, TextColor, TextProps, TextVariant, TextWeight } from \"./Text\";\n\n// Input\nexport { BaseInput, Input, PasswordInput } from \"./Input\";\nexport type { InputProps } from \"./Input\";\n\n// SegmentedControl\nexport { SegmentedControl } from \"./SegmentedControl\";\nexport type { Segment, SegmentedControlProps } from \"./SegmentedControl\";\n\n// Badge\nexport { Badge } from \"./Badge\";\nexport type { BadgeProps, BadgeStatus } from \"./Badge\";\n\n// DynamicStatusBar\nexport { DynamicStatusBar } from \"./DynamicStatusBar\";\nexport type { DynamicStatusBarProps } from \"./DynamicStatusBar\";\n\nexport { HeaderView } from \"./HeaderView\";\nexport type { HeaderViewProps } from \"./HeaderView\";\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@robin-ux/native",
-    "version": "0.1.0",
+    "version": "0.1.1",
     "description": "Themeable React Native UI components for Expo projects",
     "main": "build/index.js",
     "types": "build/index.d.ts",

package/src/components/HeaderView.tsx

@@ -0,0 +1,60 @@
+import React, { useRef } from "react";
+import { Animated, ScrollViewProps, StyleProp, View, ViewStyle } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { layouts, spacing, useThemedStyles } from "../utils";
+import { DynamicStatusBar } from "./DynamicStatusBar";
+import { Text } from "./Text";
+
+export interface HeaderViewProps {
+    title: string;
+    actionButton?: React.ReactNode;
+    children: React.ReactNode;
+    scrollViewProps?: ScrollViewProps;
+    style?: StyleProp<ViewStyle>;
+    fixed?: boolean;
+    defaultStyle?: "light" | "dark";
+}
+
+export function HeaderView({ title, actionButton, children, scrollViewProps, style, defaultStyle, fixed = false }: HeaderViewProps) {
+    const scrollY = useRef(new Animated.Value(0)).current;
+
+    const styles = useThemedStyles((colors) => ({
+        container: {
+            flex: 1,
+            backgroundColor: colors.background,
+        },
+        header: {
+            paddingHorizontal: spacing.md,
+            paddingTop: spacing.md,
+            ...layouts.rowBetween,
+        },
+        content: {
+            flexGrow: 1,
+        },
+    }));
+
+    return (
+        <SafeAreaView style={[styles.container, style]} edges={["top", "left", "right"]}>
+            <DynamicStatusBar scrollY={scrollY} threshold={100} defaultStyle={defaultStyle} />
+            <View style={styles.header}>
+                <Text variant="heading" weight="extrabold">
+                    {title}
+                </Text>
+                {actionButton}
+            </View>
+            {fixed ? (
+                <View style={styles.content}>{children}</View>
+            ) : (
+                <Animated.ScrollView
+                    style={styles.container}
+                    contentContainerStyle={styles.content}
+                    onScroll={Animated.event([{ nativeEvent: { contentOffset: { y: scrollY } } }], { useNativeDriver: true })}
+                    scrollEventThrottle={16}
+                    {...scrollViewProps}
+                >
+                    {children}
+                </Animated.ScrollView>
+            )}
+        </SafeAreaView>
+    );
+}

package/src/components/index.ts

@@ -1,23 +1,26 @@
 // Button
-export { Button } from './Button';
-export type { ButtonProps, ButtonVariant, ButtonSize } from './Button';
+export { Button } from "./Button";
+export type { ButtonProps, ButtonSize, ButtonVariant } from "./Button";
 
 // Text
-export { Text } from './Text';
-export type { TextProps, TextVariant, TextWeight, TextColor, TextAlign } from './Text';
+export { Text } from "./Text";
+export type { TextAlign, TextColor, TextProps, TextVariant, TextWeight } from "./Text";
 
 // Input
-export { Input, PasswordInput, BaseInput } from './Input';
-export type { InputProps } from './Input';
+export { BaseInput, Input, PasswordInput } from "./Input";
+export type { InputProps } from "./Input";
 
 // SegmentedControl
-export { SegmentedControl } from './SegmentedControl';
-export type { SegmentedControlProps, Segment } from './SegmentedControl';
+export { SegmentedControl } from "./SegmentedControl";
+export type { Segment, SegmentedControlProps } from "./SegmentedControl";
 
 // Badge
-export { Badge } from './Badge';
-export type { BadgeProps, BadgeStatus } from './Badge';
+export { Badge } from "./Badge";
+export type { BadgeProps, BadgeStatus } from "./Badge";
 
 // DynamicStatusBar
-export { DynamicStatusBar } from './DynamicStatusBar';
-export type { DynamicStatusBarProps } from './DynamicStatusBar';
+export { DynamicStatusBar } from "./DynamicStatusBar";
+export type { DynamicStatusBarProps } from "./DynamicStatusBar";
+
+export { HeaderView } from "./HeaderView";
+export type { HeaderViewProps } from "./HeaderView";