app-studio 0.0.7 → 0.0.8

package/src/components/Element.tsx

@@ -1,488 +0,0 @@
-import React from 'react';
-import Color from 'color-convert';
-import styled from 'styled-components';
-import { useTheme } from '../providers/Theme';
-import { shadows } from '../utils/shadow';
-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;
-});
-
-const NumberPropsStyle: any = {};
-const NumberProps = [
-  'numberOfLines',
-  'fontWeight',
-  'timeStamp',
-  'flex',
-  'flexGrow',
-  'flexShrink',
-  'order',
-  'zIndex',
-  'aspectRatio',
-  'shadowOpacity',
-  'shadowRadius',
-  'scale',
-  'opacity',
-  'min',
-  'max',
-  'now',
-];
-
-NumberProps.map((property: string) => {
-  NumberPropsStyle[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;
-  }
-
-  if (props.shadow) {
-    if (typeof props.shadow === 'number' || typeof props.shadow === 'boolean') {
-      const shawdowValue: number =
-        typeof props.shadow === 'number' && shadows[props.shadow] !== undefined
-          ? props.shadow
-          : 2;
-
-      if (shadows[shawdowValue]) {
-        const shadowColor = Color.hex
-          .rgb(shadows[shawdowValue].shadowColor)
-          .join(',');
-
-        newProps[
-          'boxShadow'
-        ] = `${shadows[shawdowValue].shadowOffset.height}px ${shadows[shawdowValue].shadowOffset.width}px ${shadows[shawdowValue].shadowRadius}px rgba(${shadowColor},${shadows[shawdowValue].shadowOpacity})`;
-      }
-    } else {
-      const shadowColor = Color.hex.rgb(props.shadow.shadowColor).join(',');
-
-      newProps[
-        'boxShadow'
-      ] = `${props.shadow.shadowOffset.height}px ${props.shadow.shadowOffset.width}px ${props.shadow.shadowRadius}px rgba(${shadowColor},${props.shadow.shadowOpacity})`;
-    }
-  }
-
-  Object.keys(props).map((property) => {
-    if (StyleProps[property] !== undefined || property == 'on') {
-      if (
-        typeof props[property] === 'number' &&
-        NumberPropsStyle[property] === undefined
-      ) {
-        newProps[property] = props[property] + 'px';
-      } else if (property.toLowerCase().indexOf('color') !== -1) {
-        newProps[property] = getColor(props[property]);
-      } else if (typeof props[property] === 'object') {
-        if (property === 'on') {
-          for (const event in props[property]) {
-            newProps['&:' + event] = applyStyle(props[property][event]);
-          }
-        } else {
-          newProps[property] = applyStyle(props[property]);
-        }
-      } else {
-        newProps[property] = props[property];
-      }
-    }
-  });
-
-  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

@@ -1,49 +0,0 @@
-import React from 'react';
-import { CSSProperties } from 'styled-components';
-import { ImageElement } from './Element';
-import { View } from './View';
-import { ImageStyleProps } from '../types/style';
-import { Shadow } from '../utils/shadow';
-
-export interface ImageProps
-  extends Omit<ImageStyleProps, 'pointerEvents' | 'source'>,
-    CSSProperties {
-  size?: number;
-  on?: Record<string, CSSProperties>;
-  onPress?: (...args: any) => void;
-  src: string | any;
-  shadow?: boolean | number | Shadow;
-}
-
-export interface ImageBackgroundProps extends ImageProps {
-  src: string;
-}
-
-export class ImageBackground extends React.PureComponent<ImageBackgroundProps> {
-  render() {
-    const { src, onClick, onPress, ...props } = this.props;
-
-    return (
-      <View
-        style={{
-          backgroundSize: 'contain',
-          backgroundImage: `url("${src}")`,
-          backgroundPosition: 'center center',
-          backgroundRepeat: 'no-repeat',
-        }}
-        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

@@ -1,49 +0,0 @@
-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

@@ -1,61 +0,0 @@
-import React from 'react';
-import { CSSProperties } from 'styled-components';
-import styled from 'styled-components';
-import { applyStyle } from './Element';
-import { TextStyleProps } from '../types/style';
-import { Shadow } from '../utils/shadow';
-
-export interface TextProps
-  extends Omit<TextStyleProps, 'pointerEvents' | 'onPress'>,
-    CSSProperties {
-  on?: Record<string, CSSProperties>;
-  onPress?: (...args: any) => void;
-  paddingHorizontal?: number | string;
-  marginHorizontal?: number | string;
-  paddingVertical?: number | string;
-  marginVertical?: number | string;
-  toUpperCase?: boolean;
-  toFormat?: boolean;
-  shadow?: boolean | number | Shadow;
-}
-
-export const TextSpan: React.FC<CSSProperties> = styled.div(
-  (props: CSSProperties) => {
-    props.display = 'inherit';
-    props.flexDirection = 'column';
-    return applyStyle(props);
-  }
-);
-
-export class Text extends React.PureComponent<TextProps> {
-  render() {
-    const {
-      toUpperCase = false,
-      children,
-      toFormat = false,
-      ...props
-    } = this.props;
-    let content: any = children;
-
-    if (children && typeof children === 'string') {
-      content = children.toString().trim();
-    }
-
-    if (typeof content === 'string' && toUpperCase) {
-      content = content.toUpperCase();
-    }
-
-    if (typeof content === 'string' && toFormat) {
-      content = content.split('\n').map((item, key) => {
-        return (
-          <span key={key.toString()}>
-            {item}
-            <br />
-          </span>
-        );
-      });
-    }
-
-    return <TextSpan {...props}>{content}</TextSpan>;
-  }
-}

package/src/components/View.md

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

package/src/components/View.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import { ViewElement } from './Element';
-import { ViewStyleProps } from '../types/style';
-import { CSSProperties } from 'styled-components';
-import { Shadow } from '../utils/shadow';
-
-export interface ViewProps
-  extends Omit<ViewStyleProps, 'pointerEvents'>,
-    CSSProperties {
-  size?: number;
-  on?: Record<string, CSSProperties>;
-  onPress?: (...args: any) => void;
-  paddingHorizontal?: number | string;
-  marginHorizontal?: number | string;
-  paddingVertical?: number | string;
-  marginVertical?: number | string;
-  shadow?: boolean | number | Shadow;
-}
-
-export const View = (props: ViewProps) => <ViewElement {...props} />;
-
-export const SafeArea = View;
-
-export const Scroll = (props: any) => <View overflow={'auto'} {...props} />;

package/src/components/Wrapper.tsx

@@ -1,11 +0,0 @@
-import * as React from 'react';
-import { ResponsiveProvider, ThemeProvider } from '..';
-export default class Wrapper extends React.Component<{}, {}> {
-  render() {
-    return (
-      <ThemeProvider>
-        <ResponsiveProvider>{this.props.children}</ResponsiveProvider>
-      </ThemeProvider>
-    );
-  }
-}

package/src/hooks/useMount.ts

@@ -1,6 +0,0 @@
-import { useEffect } from 'react';
-export const useMount = (callback: () => void) => {
-  useEffect(() => {
-    callback();
-  }, []);
-};