added static components

andrew-levy · Jun 22, 2023 · 9a71aaf · 9a71aaf
1 parent a2a4fed
commit 9a71aaf
Show file tree

Hide file tree

Showing 3 changed files with 147 additions and 121 deletions.
diff --git a/README.md b/README.md
@@ -2,6 +2,11 @@
 
 Apply styles directly to your React Native components via props!
 
+- Fully typed
+- No more `StyleSheet.create` or `styles={{ ... }}
+- Same naming conventions as the style object
+- Faster development
+
 ## Installation
 
 ```sh
@@ -11,32 +16,38 @@ yarn add style-direct-club
 ## Usage
 
 ```js
-import { Text, View } from 'react-native';
+import { TouchableOpacity } from 'react-native';
 import { styled } from 'style-direct-club';
 
-const StyledText = styled(Text);
-const StyledView = styled(View);
+// Create a styled component
+const StyledTouchableOpacity = styled(TouchableOpacity);
+// Or use the out of the box components
+const View = styled.View;
+const Text = styled.Text;
 
 function App() {
   return (
-    <StyledView
-      flex={1}
-      rowGap={10}
-      justifyContent="center"
-      alignItems="center"
-    >
-      <StyledText color="red" fontSize={24}>
+    <View flex={1} rowGap={10} justifyContent="center" alignItems="center">
+      <Text color="red" fontSize={24}>
         Hello World!
-      </StyledText>
-      <StyledText color="blue" fontSize={16}>
+      </Text>
+      <Text color="blue" fontSize={16}>
         Styling is so easy!
-      </StyledText>
-    </StyledView>
+      </Text>
+      <StyledTouchableOpacity backgroundColor="blue">
+        <Text color="white">Press Me!</Text>
+      </StyledTouchableOpacity>
+    </View>
   );
 }
 ```
 
+## Gotchas
+
+- The `style` prop is still supported, but styles passed in as props will take precedence over the `style` prop object.
+- If you want to add these props to a custom component, the component must pass its props to the underlying view.
+
 ## To Do
 
+- [x] Add out of the box components
 - [ ] Add support for aliases (e.g. `backgroundColor` -> `bg`)
-- [ ] Add out of the box components
diff --git a/src/allowedProps.ts b/src/allowedProps.ts
@@ -0,0 +1,102 @@
+export const allowedProps = [
+  'alignContent',
+  'alignItems',
+  'alignSelf',
+  'aspectRatio',
+  'borderBottomWidth',
+  'borderEndWidth',
+  'borderLeftWidth',
+  'borderRightWidth',
+  'borderStartWidth',
+  'borderTopWidth',
+  'borderRadius',
+  'borderWidth',
+  'bottom',
+  'display',
+  'end',
+  'flex',
+  'flexBasis',
+  'flexDirection',
+  'rowGap',
+  'gap',
+  'columnGap',
+  'flexGrow',
+  'flexShrink',
+  'flexWrap',
+  'height',
+  'justifyContent',
+  'left',
+  'margin',
+  'marginBottom',
+  'marginEnd',
+  'marginHorizontal',
+  'marginLeft',
+  'marginRight',
+  'marginStart',
+  'marginTop',
+  'marginVertical',
+  'maxHeight',
+  'maxWidth',
+  'minHeight',
+  'minWidth',
+  'overflow',
+  'padding',
+  'paddingBottom',
+  'paddingEnd',
+  'paddingHorizontal',
+  'paddingLeft',
+  'paddingRight',
+  'paddingStart',
+  'paddingTop',
+  'paddingVertical',
+  'position',
+  'right',
+  'start',
+  'top',
+  'width',
+  'zIndex',
+  'direction',
+  'shadowColor',
+  'shadowOffset',
+  'shadowOpacity',
+  'shadowRadius',
+  'backgroundColor',
+  'borderBottomColor',
+  'borderBottomEndRadius',
+  'borderBottomLeftRadius',
+  'borderBottomRightRadius',
+  'borderBottomStartRadius',
+  'borderColor',
+  'borderEndColor',
+  'borderLeftColor',
+  'borderRightColor',
+  'borderStartColor',
+  'borderStyle',
+  'borderTopColor',
+  'borderTopEndRadius',
+  'borderTopLeftRadius',
+  'borderTopRightRadius',
+  'borderTopStartRadius',
+  'opacity',
+  'elevation',
+  'fontVariant',
+  'letterSpacing',
+  'textDecorationColor',
+  'textDecorationStyle',
+  'writingDirection',
+  'color',
+  'fontFamily',
+  'fontSize',
+  'fontStyle',
+  'fontWeight',
+  'lineHeight',
+  'textAlign',
+  'textDecorationLine',
+  'textShadowColor',
+  'textShadowOffset',
+  'textShadowRadius',
+  'textTransform',
+  'resizeMode',
+  'overlayColor',
+  'tintColor',
+];
diff --git a/src/index.tsx b/src/index.tsx
@@ -1,17 +1,30 @@
 import { ComponentProps, createElement } from 'react';
+import { allowedProps } from './allowedProps';
+import { Text, View } from 'react-native';
 
 /**
  * A helper function to add style props to a component. This isn't necessary,
  * but it makes it easier to style components.
  *
- * This turns this:
+ * @example
+ *
  * ```
+ * // Use the `styled` function to add the style props to the component.
+ * const Text = styled(RNText)
+ *
+ * // Instead of this:
  * <Text style={{ color: "red", marginTop: 10 }} />
+ *
+ * // We can do this:
+ * <Text color="red" marginTop={10} />
  * ```
  *
- * Into this:
+ * @example
+ *
  * ```
- * <Text color="red" marginTop={10} />
+ * // Use the built-in components.
+ * const Text = styled.Text
+ * const View = styled.View
  * ```
  *
  */
@@ -22,7 +35,7 @@ export function styled<T extends React.ComponentType<any>>(component: T) {
   return function StyledComponent(props: AllProps & MappedStyleProps) {
     return createElement(component, {
       ...props,
-      style: mapStyleProps(props),
+      style: { ...props.style, ...mapStyleProps(props) },
     });
   };
 }
@@ -39,105 +52,5 @@ function mapStyleProps(props: Record<string, any>) {
   return styleProps;
 }
 
-const allowedProps = [
-  'alignContent',
-  'alignItems',
-  'alignSelf',
-  'aspectRatio',
-  'borderBottomWidth',
-  'borderEndWidth',
-  'borderLeftWidth',
-  'borderRightWidth',
-  'borderStartWidth',
-  'borderTopWidth',
-  'borderRadius',
-  'borderWidth',
-  'bottom',
-  'display',
-  'end',
-  'flex',
-  'flexBasis',
-  'flexDirection',
-  'rowGap',
-  'gap',
-  'columnGap',
-  'flexGrow',
-  'flexShrink',
-  'flexWrap',
-  'height',
-  'justifyContent',
-  'left',
-  'margin',
-  'marginBottom',
-  'marginEnd',
-  'marginHorizontal',
-  'marginLeft',
-  'marginRight',
-  'marginStart',
-  'marginTop',
-  'marginVertical',
-  'maxHeight',
-  'maxWidth',
-  'minHeight',
-  'minWidth',
-  'overflow',
-  'padding',
-  'paddingBottom',
-  'paddingEnd',
-  'paddingHorizontal',
-  'paddingLeft',
-  'paddingRight',
-  'paddingStart',
-  'paddingTop',
-  'paddingVertical',
-  'position',
-  'right',
-  'start',
-  'top',
-  'width',
-  'zIndex',
-  'direction',
-  'shadowColor',
-  'shadowOffset',
-  'shadowOpacity',
-  'shadowRadius',
-  'backgroundColor',
-  'borderBottomColor',
-  'borderBottomEndRadius',
-  'borderBottomLeftRadius',
-  'borderBottomRightRadius',
-  'borderBottomStartRadius',
-  'borderColor',
-  'borderEndColor',
-  'borderLeftColor',
-  'borderRightColor',
-  'borderStartColor',
-  'borderStyle',
-  'borderTopColor',
-  'borderTopEndRadius',
-  'borderTopLeftRadius',
-  'borderTopRightRadius',
-  'borderTopStartRadius',
-  'opacity',
-  'elevation',
-  'fontVariant',
-  'letterSpacing',
-  'textDecorationColor',
-  'textDecorationStyle',
-  'writingDirection',
-  'color',
-  'fontFamily',
-  'fontSize',
-  'fontStyle',
-  'fontWeight',
-  'lineHeight',
-  'textAlign',
-  'textDecorationLine',
-  'textShadowColor',
-  'textShadowOffset',
-  'textShadowRadius',
-  'textTransform',
-  'resizeMode',
-  'overlayColor',
-  'tintColor',
-];
+styled.Text = styled(Text);
+styled.View = styled(View);