app-studio 0.0.1

package/src/components/Element.tsx

@@ -0,0 +1,430 @@
+import React from 'react';
+import styled from 'styled-components';
+import { useTheme } from '../providers/Theme';
+
+export const TransformStyleProps = [
+  'transform',
+  'transformMatrix',
+  'rotation',
+  'scaleX',
+  'scaleY',
+  'translateX',
+  'translateY',
+  // 'perspective',
+  // 'rotate',
+  // 'rotateX',
+  // 'rotateY',
+  // 'rotateZ',
+  // 'scale',
+  // 'skewX',
+  // 'skewY',
+  'testID',
+  'decomposedMatrix',
+];
+
+export const ImageStyleProps = [
+  'borderTopRightRadius',
+  'backfaceVisibility',
+  'borderBottomLeftRadius',
+  'borderBottomRightRadius',
+  'borderColor',
+  'borderRadius',
+  'borderTopLeftRadius',
+  'backgroundColor',
+  'borderWidth',
+  'opacity',
+  'overflow',
+  'overflowX',
+  'overflowY',
+  'resizeMode',
+  'tintColor',
+  'overlayColor',
+];
+
+export const LayoutStyleProps = [
+  'alignContent',
+  'alignItems',
+  'alignSelf',
+  'aspectRatio',
+  'borderBottomWidth',
+  'borderEndWidth',
+  'borderLeftWidth',
+  'borderRightWidth',
+  'borderStartWidth',
+  'borderTopWidth',
+  'borderWidth',
+  'bottom',
+  'direction',
+  'display',
+  'end',
+  'flex',
+  'flexBasis',
+  'flexDirection',
+  'flexGrow',
+  'flexShrink',
+  'flexWrap',
+  'height',
+  'justifyContent',
+  'left',
+  'margin',
+  'marginBottom',
+  'marginEnd',
+  'marginHorizontal',
+  'marginLeft',
+  'marginRight',
+  'marginStart',
+  'marginTop',
+  'marginVertical',
+  'maxHeight',
+  'maxWidth',
+  'minHeight',
+  'minWidth',
+  'overflow',
+  'overflowX',
+  'overflowY',
+  'padding',
+  'paddingBottom',
+  'paddingEnd',
+  'paddingHorizontal',
+  'paddingLeft',
+  'paddingRight',
+  'paddingStart',
+  'paddingTop',
+  'paddingVertical',
+  'position',
+  'right',
+  'start',
+  'top',
+  'width',
+  'zIndex',
+];
+
+export const ShadowStyleProps = [
+  'shadowColor',
+  'shadowOffset',
+  'shadowOpacity',
+  'shadowRadius',
+];
+export const TextStyleProps = [
+  'textShadowOffset',
+  'color',
+  'fontSize',
+  'fontStyle',
+  'fontWeight',
+  'lineHeight',
+  'textAlign',
+  'textDecorationLine',
+  'textShadowColor',
+  'fontFamily',
+  'textShadowRadius',
+  'includeFontPadding',
+  'textAlignVertical',
+  'fontVariant',
+  'letterSpacing',
+  'textDecorationColor',
+  'textDecorationStyle',
+  'textTransform',
+  'writingDirection',
+];
+
+export const ViewStyleProps = [
+  'borderRightColor',
+  'backfaceVisibility',
+  'borderBottomColor',
+  'borderBottomEndRadius',
+  'borderBottomLeftRadius',
+  'borderBottomRightRadius',
+  'borderBottomStartRadius',
+  'borderBottomWidth',
+  'borderColor',
+  'borderEndColor',
+  'borderLeftColor',
+  'borderLeftWidth',
+  'borderRadius',
+  'backgroundColor',
+  'borderRightWidth',
+  'borderStartColor',
+  'borderStyle',
+  'borderTopColor',
+  'borderTopEndRadius',
+  'borderTopLeftRadius',
+  'borderTopRightRadius',
+  'borderTopStartRadius',
+  'borderTopWidth',
+  'borderWidth',
+  'border',
+  'opacity',
+  'elevation',
+  'size',
+];
+
+export const ScrollViewStyleProps = [
+  'alwaysBounceHorizontal',
+  'alwaysBounceVertical',
+  'automaticallyAdjustContentInsets',
+  'bounces',
+  'bouncesZoom',
+  'canCancelContentTouches',
+  'centerContent',
+  'contentLayoutStyle',
+  'contentInset',
+  'contentInsetAdjustmentBehavior',
+  'contentOffset',
+  'decelerationRate',
+  'directionalLockEnabled',
+  'disableIntervalMomentum',
+  'disableScrollViewPanResponder',
+  'endFillColor',
+  'fadingEdgeLength',
+  'horizontal',
+  'indicatorStyle',
+  'invertStickyHeaders',
+  'keyboardDismissMode',
+  'keyboardShouldPersistTaps',
+  'maintainVisibleContentPosition',
+  'maximumZoomScale',
+  'minimumZoomScale',
+  'nestedScrollEnabled',
+  'onContentSizeChange',
+  'onMomentumScrollBegin',
+  'onMomentumScrollEnd',
+  'onScroll',
+  'onScrollBeginDrag',
+  'onScrollEndDrag',
+  'onScrollToTop',
+  'overScrollMode',
+  'pagingEnabled',
+  'persistentScrollbar',
+  'pinchGestureEnabled',
+  'refreshControl',
+  'removeClippedSubviews',
+  'scrollBarThumbImage',
+  'scrollEnabled',
+  'scrollEventThrottle',
+  'scrollIndicatorInsets',
+  'scrollPerfTag',
+  'scrollToOverflowEnabled',
+  'scrollsToTop',
+  'DEPRECATED_sendUpdatedChildFrames',
+  'showsHorizontalScrollIndicator',
+  'showsVerticalScrollIndicator',
+  'snapToAlignment',
+  'snapToEnd',
+  'snapToInterval',
+  'snapToOffsets',
+  'snapToStart',
+  'stickyHeaderIndices',
+  'zoomScale',
+];
+
+export const BaseStyleProperty: any = {};
+LayoutStyleProps.concat(ShadowStyleProps, TransformStyleProps).map(
+  (property) => {
+    BaseStyleProperty[property] = true;
+  }
+);
+
+export const ViewStyleProperty: any = BaseStyleProperty;
+ViewStyleProps.map((property) => {
+  ViewStyleProperty[property] = true;
+});
+
+export const ScrollViewStyleProperty: any = ViewStyleProperty;
+ScrollViewStyleProps.map((property) => {
+  ScrollViewStyleProperty[property] = true;
+});
+
+export const ImageStyleProperty: any = ViewStyleProperty;
+ImageStyleProps.map((property) => {
+  ImageStyleProperty[property] = true;
+});
+
+export const TextStyleProperty: any = BaseStyleProperty;
+TextStyleProps.map((property) => {
+  TextStyleProperty[property] = true;
+});
+
+export const allStyleProps: string[] = LayoutStyleProps.concat(
+  ShadowStyleProps,
+  TransformStyleProps,
+  ViewStyleProps,
+  ScrollViewStyleProps,
+  TextStyleProps,
+  ImageStyleProps
+);
+
+const WidthWords = ['X', 'Width', 'Horizontal', 'Right', 'Left'];
+
+export const WidthStyleProperty = ['x', 'width', 'right', 'left'].concat(
+  allStyleProps.filter((property) => {
+    return WidthWords.some((item) => property.indexOf(item) >= 0);
+  })
+);
+export const WidthStyleProps: any = {};
+WidthStyleProperty.map((property) => {
+  WidthStyleProps[property] = true;
+});
+
+const HeightWords = ['Y', 'Height', 'Vertical', 'top', 'bottom'];
+
+export const HeightStyleProperty = ['y', 'height', 'top', 'bottom'].concat(
+  allStyleProps.filter((property) => {
+    return HeightWords.some((item) => property.indexOf(item) >= 0);
+  })
+);
+
+export const HeightStyleProps: any = {};
+HeightStyleProperty.map((property) => {
+  HeightStyleProps[property] = true;
+});
+
+export const SizeProps: any = {};
+HeightStyleProperty.concat(WidthStyleProperty).map((property) => {
+  SizeProps[property] = true;
+});
+
+export const StyleProps: any = {};
+allStyleProps.map((property) => {
+  StyleProps[property] = true;
+});
+
+export const setSize = (newSize: string | number, newProps: any) => {
+  newProps.height = newProps.width = newSize;
+};
+
+export const applyStyle = (props: any) => {
+  const { getColor } = useTheme();
+
+  const newProps: any = {};
+
+  if (props.onClick) {
+    newProps.cursor = 'pointer';
+  }
+
+  const size =
+    props.height !== undefined &&
+    props.width !== undefined &&
+    props.height === props.width
+      ? props.height
+      : props.size
+      ? props.size
+      : null;
+
+  if (size) {
+    setSize(size, newProps);
+  }
+
+  if (props.paddingHorizontal) {
+    newProps.paddingLeft = props.paddingHorizontal;
+    newProps.paddingRight = props.paddingHorizontal;
+  }
+
+  if (props.marginHorizontal) {
+    newProps.marginLeft = props.marginHorizontal;
+    newProps.marginRight = props.marginHorizontal;
+  }
+
+  if (props.paddingVertical) {
+    newProps.paddingTop = props.paddingVertical;
+    newProps.paddingBottom = props.paddingVertical;
+  }
+
+  if (props.marginVertical) {
+    newProps.marginTop = props.marginVertical;
+    newProps.marginBottom = props.marginVertical;
+  }
+
+  Object.keys(props)
+    .filter(
+      (property) => StyleProps[property] !== undefined || property[0] == '&'
+    )
+    .map((property) => {
+      newProps[property] = props[property];
+
+      //  console.log(property, propertyType);
+
+      if (property.toLowerCase().indexOf('color') !== -1) {
+        newProps[property] = getColor(props[property]);
+      }
+    });
+
+  // return {newProps,responsive};
+  return newProps;
+};
+
+// function convertToCSS(props: any) {
+//   return Object.entries(props).reduce((str, [key, val]) => {
+//     const casedKey = key.replace(
+//       /[A-Z]/g,
+//       (match) => `-${match.toLowerCase()}`
+//     );
+//     return `${str}${casedKey}:${typeof val === 'number' ? val + 'px' : val};\n`;
+//   }, '');
+// }
+
+// export const getResponsiveMediaQueries = (props: any) => {
+//   const { breakpointKeys, breakpoints } = useResponsive();
+//   console.log('mediaQueries', props);
+
+//   const mediaQueries = breakpointKeys
+//     .map((size) => {
+//       return props && props[size] !== undefined
+//         ? `
+//     @media ${
+//       breakpoints[size].min
+//         ? ' (min-width:' +
+//           (breakpoints[size].min > 0 ? breakpoints[size].min : 0) +
+//           'px)'
+//         : ''
+//     } ${
+//             breakpoints[size].min &&
+//             breakpoints[size].max &&
+//             breakpoints[size].max >= 0 &&
+//             breakpoints[size].max < Infinity
+//               ? ' and '
+//               : ''
+//           } ${
+//             breakpoints[size].max &&
+//             breakpoints[size].max >= 0 &&
+//             breakpoints[size].max < Infinity
+//               ? ' (max-width:' + breakpoints[size].max + 'px)'
+//               : ''
+//           } {
+//      ${convertToCSS(props[size])}
+//     }`
+//         : '';
+//     })
+//     .join('\n');
+
+//   return mediaQueries;
+// };
+
+export const StyledView = styled.div((props: any) => {
+  return applyStyle(props);
+});
+
+export const StyledImage = styled.img((props: any) => {
+  return applyStyle(props);
+});
+
+export class ViewElement extends React.PureComponent<any> {
+  render() {
+    let { onClick } = this.props;
+    if (this.props.onPress !== undefined) {
+      onClick = this.props.onPress;
+    }
+
+    //console.log(this.props);
+    return <StyledView {...this.props} onClick={onClick} />;
+  }
+}
+
+export class ImageElement extends React.PureComponent<any> {
+  render() {
+    let { onClick } = this.props;
+    if (this.props.onPress !== undefined) {
+      onClick = this.props.onPress;
+    }
+    return <StyledImage {...this.props} onClick={onClick} />;
+  }
+}

package/src/components/Image.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { CSSProperties } from 'styled-components';
+import { ImageElement } from './Element';
+import { View } from './View';
+import {
+  ImageProps as ComponentImageProps,
+  ResponsiveStyle,
+} from '../types/style';
+
+export interface ImageProps
+  extends Omit<ComponentImageProps, 'pointerEvents' | 'source'>,
+    CSSProperties {
+  size?: number;
+  className?: string;
+  backgroundColor?: string;
+  onPress?: () => void;
+  action?: string;
+  alt?: string;
+  src: string | any;
+  style?: any;
+  responsive?: ResponsiveStyle;
+}
+
+export interface ImageBackgroundProps extends ImageProps {
+  src: string;
+}
+
+export class ImageBackground extends React.PureComponent<ImageBackgroundProps> {
+  render() {
+    const { src, style, onClick, onPress, ...props } = this.props;
+
+    return (
+      <View
+        style={{
+          backgroundSize: 'contain',
+          backgroundImage: `url("${src}")`,
+          backgroundPosition: 'center center',
+          backgroundRepeat: 'no-repeat',
+          ...style,
+        }}
+        onClick={onClick ? onClick : onPress}
+        {...props}
+      />
+    );
+  }
+}
+
+export const Image = (props: ImageProps) => <ImageElement {...props} />;
+
+export const RoundedImage = ({ size, src, ...props }: any) => (
+  <ImageBackground borderRadius={size / 2} size={size} src={src} {...props} />
+);
+
+export const SquaredImage = ({ size, src, ...props }: any) => (
+  <ImageBackground {...props} size={size} src={src} />
+);

package/src/components/Layout.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { View } from './View';
+
+export const Layout = (props: any) => <View {...props} />;
+
+export const Horizontal = (props: any) => (
+  <View display={'flex'} flexDirection="row" {...props} />
+);
+
+export const Inline = (props: any) => (
+  <View
+    display={'flex'}
+    flexDirection="row"
+    wordBreak="break-word"
+    {...props}
+  />
+);
+
+export const Vertical = (props: any) => (
+  <View flexDirection="column" {...props} />
+);
+
+export const Center = (props: any) => (
+  <View
+    display={'flex'}
+    justifyContent="center"
+    alignItems={'center'}
+    {...props}
+  />
+);
+
+export const AlignStart = (props: any) => (
+  <View display={'flex'} justifyContent="flex-start" {...props} />
+);
+
+export const AlignCenter = (props: any) => (
+  <View display={'flex'} justifyContent="center" width={'100%'} {...props} />
+);
+
+export const AlignEnd = (props: any) => (
+  <View display={'flex'} justifyContent="flex-end" width={'100%'} {...props} />
+);
+
+export const Start = (props: any) => (
+  <View display={'flex'} alignSelf="flex-end" {...props} />
+);
+export const End = (props: any) => (
+  <View display={'flex'} alignSelf="flex-end" {...props} />
+);

package/src/components/Text.tsx

@@ -0,0 +1,118 @@
+import React from 'react';
+import { CSSProperties } from 'styled-components';
+import styled from 'styled-components';
+import { applyStyle } from './Element';
+import { useTheme } from '../providers/Theme';
+import {
+  GenericStyleProp,
+  TextProps,
+  TextStyle,
+  ResponsiveStyle,
+} from '../types/style';
+
+export interface ComponentTextProps
+  extends Omit<TextProps, 'pointerEvents' | 'onPress'>,
+    CSSProperties {
+  data?: object;
+  children?: string | any;
+  className?: string;
+  paddingHorizontal?: number | string;
+  marginHorizontal?: number | string;
+  paddingVertical?: number | string;
+  marginVertical?: number | string;
+  locale?: string;
+  toUpperCase?: boolean;
+  style?: GenericStyleProp<TextStyle>;
+  responsive?: ResponsiveStyle;
+  backgroundColor?: string;
+
+  onPress?: void;
+  action?: string;
+}
+
+export const formatTextStyle: any = ({
+  hint = false,
+  disabled = false,
+  opacity,
+  fontSize,
+  ...props
+}: CSSProperties & {
+  disabled: number | boolean;
+  hint: number | boolean;
+  opacity: number;
+  fontSize?: number;
+}) => {
+  if (props) {
+    if (hint) {
+      opacity = hint as number;
+    }
+
+    if (disabled) {
+      opacity = disabled as number;
+    }
+
+    return { ...props, opacity, fontSize };
+  }
+
+  return props;
+};
+
+export const TextSpan: React.FC<CSSProperties> = styled.div(
+  (props: CSSProperties) => {
+    props.display = 'inherit';
+    props.flexDirection = 'column';
+    return applyStyle(props);
+  }
+);
+
+export const TextComponent: React.FC<ComponentTextProps> = (textProps) => {
+  const { getColor } = useTheme();
+
+  const styledProps = applyStyle(textProps);
+  const {
+    toUpperCase = false,
+    children,
+    textTypographyConfig,
+    ...props
+  } = styledProps;
+  let content: any = children;
+
+  if (children && typeof children === 'string') {
+    content = children.toString().trim();
+  }
+
+  if (typeof content === 'string' && toUpperCase) {
+    content = content.toUpperCase();
+  }
+
+  let style = props.style || {};
+
+  if (textTypographyConfig) {
+    style = formatTextStyle({ ...textTypographyConfig, ...style });
+  }
+
+  if (typeof content === 'string') {
+    content = content.split('\n').map((item, key) => {
+      return (
+        <span key={key.toString()}>
+          {item}
+          <br />
+        </span>
+      );
+    });
+  }
+
+  Object.values(style).map((val) => {
+    if (typeof val === 'string' && val.toLowerCase().indexOf('color') !== -1) {
+      val = getColor(val);
+    }
+  });
+
+  return (
+    <TextSpan {...style} {...props}>
+      {content}
+    </TextSpan>
+  );
+};
+
+export const Text: React.FC<ComponentTextProps> = TextComponent;

package/src/components/View.md

@@ -0,0 +1,6 @@
+
+View element:
+
+```jsx padded
+<View backgroundColor="red" color="white" padding={20}>Push Me</View>
+```