feat(InputOutline): export InputOutline and types (#150)

GetLuko · Feb 21, 2024 · b7b5194 · b7b5194
1 parent 3695202
commit b7b5194
Show file tree

Hide file tree

Showing 13 changed files with 186 additions and 99 deletions.
diff --git a/sandbox/src/app/App.tsx b/sandbox/src/app/App.tsx
@@ -37,10 +37,10 @@ export const App = () => {
   return (
     <SafeAreaProvider>
       <StatusBar barStyle={isIOS ? 'light-content' : 'dark-content'} />
-      <SafeAreaView style={{ flex: 0 }} />
+      <SafeAreaView style={styles.notFlex} />
       <KeyboardAvoidingView
         behavior="padding"
-        style={{ flex: 1 }}
+        style={styles.keyboardAvoidingView}
         enabled={isIOS}
       >
         <ScrollView
@@ -49,7 +49,7 @@ export const App = () => {
           }}
           contentInsetAdjustmentBehavior="automatic"
           style={styles.scrollView}
-          contentContainerStyle={{ flex: 0 }}
+          contentContainerStyle={styles.notFlex}
         >
           <StreamlineThemeProvider disableAnimation={disableAnimation}>
             <SandBox />
@@ -65,6 +65,12 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   activityIndicator: { flex: 1, alignContent: 'center', alignSelf: 'center' },
+  notFlex: {
+    flex: 0,
+  },
+  keyboardAvoidingView: {
+    flex: 1,
+  },
 });
 
 export default App;
diff --git a/sandbox/src/app/sandbox/Sandbox.tsx b/sandbox/src/app/sandbox/Sandbox.tsx
@@ -19,18 +19,22 @@ const BackButton = ({
   onPress: () => void;
   testID?: string;
   title: string;
-}) => (
-  <TouchableOpacity onPress={onPress}>
-    <Box margin="lg" testID={testID} alignItems="flex-end" flexDirection="row">
-      <Icon
-        iconName="ArrowLeft"
-        color="BLACK"
-        containerStyle={{ padding: 18 }}
-      />
-      <Text variant="titleLarge">{title}</Text>
-    </Box>
-  </TouchableOpacity>
-);
+}) => {
+  const styles = useStyles();
+  return (
+    <TouchableOpacity onPress={onPress}>
+      <Box
+        margin="lg"
+        testID={testID}
+        alignItems="flex-end"
+        flexDirection="row"
+      >
+        <Icon iconName="ArrowLeft" color="BLACK" containerStyle={styles.icon} />
+        <Text variant="titleLarge">{title}</Text>
+      </Box>
+    </TouchableOpacity>
+  );
+};
 
 export const SandBox = () => {
   const [page, setPage] = useState<{ groupIndex: number; index: number }>();
@@ -90,3 +94,7 @@ export const SandBox = () => {
   }
   return renderList;
 };
+
+const useStyles = () => ({
+  icon: { padding: 18 },
+});
diff --git a/sandbox/src/app/sandbox/docs/icon.doc.tsx b/sandbox/src/app/sandbox/docs/icon.doc.tsx
@@ -1,7 +1,7 @@
-import { GeneratedRegularIcons } from '@getluko/streamline';
+import { Box, GeneratedRegularIcons } from '@getluko/streamline';
 import { Icon, IconProps } from '@getluko/streamline';
 import React, { useCallback } from 'react';
-import { TouchableOpacity, View } from 'react-native';
+import { TouchableOpacity } from 'react-native';
 
 const iconNames = [
   ...Object.keys(GeneratedRegularIcons),
@@ -15,16 +15,14 @@ export const IconsSandbox = () => {
     []
   );
   return (
-    <View
-      style={{ paddingHorizontal: 20, flexDirection: 'row', flexWrap: 'wrap' }}
-    >
-      <View style={{ marginTop: 40, flexDirection: 'row', flexWrap: 'wrap' }}>
+    <Box paddingHorizontal="lg" flexDirection="row" flexWrap="wrap">
+      <Box marginTop="xxl" flexDirection="row" flexWrap="wrap">
         {iconNames.map((iconName) => (
           <TouchableOpacity key={iconName} onPress={onPress(iconName)}>
             <Icon iconName={iconName} size="large" />
           </TouchableOpacity>
         ))}
-      </View>
-    </View>
+      </Box>
+    </Box>
   );
 };
diff --git a/sandbox/src/app/sandbox/docs/text.doc.tsx b/sandbox/src/app/sandbox/docs/text.doc.tsx
@@ -4,23 +4,35 @@ const typoContent =
   'ABCDEFGHIJKLMNOPQRSTUVXYZabcdefghijklmnopqrstuvwxyz1234567890@#$%^&*_+=-/|~`!?.,:;"\'(){}[]<>€£¥§©®™°∞Ωμ∑π√№';
 const fontsKeys = Object.keys(fonts).sort() as TextVariant[];
 
-export const TypoSandbox = () => (
-  <Box margin="md">
-    {fontsKeys.map((key) => (
-      <Box key={key}>
-        <Text
-          variant="body"
-          color="BLUKO_1000"
-          marginVertical="sm"
-          style={{ backgroundColor: '#FFF4DE' }}
-        >
-          {'----- '}
-          {key} {'-----'}
-        </Text>
-        <Text variant={key} style={{ backgroundColor: '#EAE9E3' }}>
-          {typoContent}
-        </Text>
-      </Box>
-    ))}
-  </Box>
-);
+export const TypoSandbox = () => {
+  const styles = useStyles();
+  return (
+    <Box margin="md">
+      {fontsKeys.map((key) => (
+        <Box key={key}>
+          <Text
+            variant="body"
+            color="BLUKO_1000"
+            marginVertical="sm"
+            style={styles.key}
+          >
+            {'----- '}
+            {key} {'-----'}
+          </Text>
+          <Text variant={key} style={styles.content}>
+            {typoContent}
+          </Text>
+        </Box>
+      ))}
+    </Box>
+  );
+};
+
+const useStyles = () => ({
+  key: {
+    backgroundColor: '#FFF4DE',
+  },
+  content: {
+    backgroundColor: '#EAE9E3',
+  },
+});
diff --git a/src/components/button-bar/button-bar.tsx b/src/components/button-bar/button-bar.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { ScrollView } from 'react-native';
+import { ScrollView, ViewStyle } from 'react-native';
 
 import { Box } from '../../primitives/box/box';
 import { useStreamlineTheme } from '../../theme';
@@ -13,7 +13,7 @@ type Props = {
 };
 
 export const ButtonBar = ({ buttons, isSkeleton = false, testID }: Props) => {
-  const { spacing } = useStreamlineTheme();
+  const styles = useStyles();
 
   const skeletonItems: ButtonProps[] = Array(5)
     .fill(0)
@@ -32,11 +32,7 @@ export const ButtonBar = ({ buttons, isSkeleton = false, testID }: Props) => {
       scrollEnabled={!isSkeleton}
       horizontal={true}
       showsHorizontalScrollIndicator={false}
-      contentContainerStyle={{
-        paddingHorizontal: spacing.md,
-        paddingVertical: spacing.xs,
-        flexDirection: 'row',
-      }}
+      contentContainerStyle={styles.container}
     >
       {buttonMenu.map((button, index) => (
         <Box
@@ -57,4 +53,15 @@ export const ButtonBar = ({ buttons, isSkeleton = false, testID }: Props) => {
   );
 };
 
+const useStyles = (): { [key: string]: ViewStyle } => {
+  const { spacing } = useStreamlineTheme();
+  return {
+    container: {
+      paddingHorizontal: spacing.md,
+      paddingVertical: spacing.xs,
+      flexDirection: 'row',
+    },
+  };
+};
+
 export default ButtonBar;
diff --git a/src/components/cards/card-highlight/card-highlight.tsx b/src/components/cards/card-highlight/card-highlight.tsx
@@ -26,6 +26,7 @@ export function CardHighlight({
   accessibilityLabel,
   isPreview = false,
 }: CardHighlightProps) {
+  const styles = useStyles();
   const [handlePress, isResolving] = usePress({ onPress });
 
   const { backgroundColor, titleColor, descriptionColor } =
@@ -68,11 +69,7 @@ export function CardHighlight({
           </Text>
         ) : null}
       </Box>
-      <Image
-        source={media}
-        style={{ flex: 1, height: 192 }}
-        resizeMode="cover"
-      />
+      <Image source={media} style={styles.image} resizeMode="cover" />
       {isPreview ? (
         <Box
           width={5}
@@ -84,4 +81,11 @@ export function CardHighlight({
   );
 }
 
+const useStyles = () => ({
+  image: {
+    flex: 1,
+    height: 192,
+  },
+});
+
 export default CardHighlight;
diff --git a/...put-text/components/input-textoutline.tsx → ...ts/inputs/input-outline/input-outline.tsx b/...put-text/components/input-textoutline.tsx → ...ts/inputs/input-outline/input-outline.tsx
@@ -1,21 +1,20 @@
 import React from 'react';
-
-import { OutlineProps } from './types';
-import { Box } from '../../../../primitives/box/box';
+import { InputOutlineProps } from './input-outline.types';
+import { Box } from '../../../primitives/box/box';
 
 const FOCUS_OUTLINE_OVERFLOW_OFFSET = -2;
 export const OUTLINE_WIDTH = 2;
 
-export const InputTextOutline = ({
+export const InputOutline = ({
   hasActiveOutline = false,
   activeColor = 'BLUKO_500',
   focusColor = 'BLUKO_100',
   outlineColor = 'GREY_100',
   backgroundColor = 'PURE_WHITE_1000',
-}: OutlineProps) => {
+}: InputOutlineProps) => {
   return (
     <>
-      {hasActiveOutline && (
+      {hasActiveOutline ? (
         <Box
           borderRadius="lg"
           position="absolute"
@@ -26,7 +25,7 @@ export const InputTextOutline = ({
           backgroundColor={focusColor}
           pointerEvents="none"
         />
-      )}
+      ) : null}
       <Box
         pointerEvents="none"
         position="absolute"

diff --git a/src/components/inputs/input-outline/input-outline.types.ts b/src/components/inputs/input-outline/input-outline.types.ts
@@ -0,0 +1,9 @@
+import { ColorTheme } from '../../../theme';
+
+export type InputOutlineProps = {
+  activeColor?: ColorTheme;
+  backgroundColor?: ColorTheme;
+  focusColor?: ColorTheme;
+  hasActiveOutline?: boolean;
+  outlineColor?: ColorTheme;
+};