app-studio 0.0.1

package/src/components/View.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import { ViewElement } from './Element';
+import {
+  GenericStyleProp,
+  ViewProps,
+  ViewStyle,
+  ResponsiveStyle,
+} from '../types/style';
+import { CSSProperties } from 'styled-components';
+
+export interface ComponentViewProps
+  extends Omit<ViewProps, 'pointerEvents'>,
+    CSSProperties {
+  size?: number;
+  className?: string;
+  loading?: boolean;
+  style?: GenericStyleProp<ViewStyle>;
+  paddingHorizontal?: number | string;
+  marginHorizontal?: number | string;
+  paddingVertical?: number | string;
+  marginVertical?: number | string;
+  responsive?: ResponsiveStyle;
+  onPress?: () => void;
+  action?: string;
+  backgroundColor?: string;
+}
+
+export const View = (props: ComponentViewProps) => <ViewElement {...props} />;
+
+export const SafeArea = View;
+
+export const Scroll = (props: any) => <View overflow={'auto'} {...props} />;
+
+export const Horizontal = (props: any) => (
+  <View display={'flex'} flexDirection="row" {...props} />
+);
+export const HorizontalScroll = (props: any) => (
+  <Horizontal overflowX="auto" {...props} />
+);
+
+export const Vertical = (props: any) => (
+  <View flexDirection="column" {...props} />
+);
+
+export const VerticalScroll = (props: any) => (
+  <Vertical overflowY="auto" {...props} />
+);
+
+export const Inline = (props: any) => (
+  <View
+    display={'flex'}
+    flexDirection="row"
+    wordBreak="break-word"
+    {...props}
+  />
+);
+
+export const Start = (props: any) => (
+  <View display={'flex'} alignSelf="flex-start" {...props} />
+);
+
+export const End = (props: any) => (
+  <View display={'flex'} alignSelf="flex-end" {...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 default View;

package/src/components/Wrapper.tsx

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

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

package/src/hooks/useResponsive.ts

@@ -0,0 +1,102 @@
+import { useState } from 'react';
+import {
+  useResponsiveContext,
+  ScreenOrientation,
+  ScreenSizeRange,
+} from '../providers/Responsive';
+
+import { useMount } from './useMount';
+
+export const createQuery = (keyScreen: string, query: string, set: any) => {
+  const mql = window.matchMedia(query);
+  const onChange = () => {
+    if (!!mql.matches) {
+      set(keyScreen);
+    }
+  };
+
+  mql.addListener(onChange);
+  if (!!mql.matches) {
+    set(keyScreen);
+  }
+
+  return () => {
+    mql.removeListener(onChange);
+  };
+};
+
+export const useResponsive = () => {
+  const { breakpoints, devices } = useResponsiveContext();
+  const [screen, setScreen] = useState('xs');
+  const [orientation, setOrientation] = useState(
+    'landscape' as ScreenOrientation
+  );
+
+  const keys = Object.keys(breakpoints);
+
+  useMount(() => {
+    const breakpointValue = keys
+      .map((breakpoint) => {
+        const value: ScreenSizeRange = {
+          breakpoint: breakpoint as keyof typeof breakpoints,
+          min: breakpoints[breakpoint],
+          max: 0,
+        };
+
+        return value;
+      })
+      .sort((a, b) => a.min - b.min);
+
+    breakpointValue.reduce((a, b) => {
+      if (b) a.max = b.min;
+
+      return b;
+    });
+
+    breakpointValue.map((sizeScreen: ScreenSizeRange) => {
+      createQuery(
+        sizeScreen.breakpoint,
+        `only screen ${
+          sizeScreen.min && sizeScreen.min >= 0
+            ? 'and (min-width:' + sizeScreen.min + 'px)'
+            : ''
+        } ${
+          sizeScreen.max && sizeScreen.max >= 0
+            ? 'and (max-width:' + sizeScreen.max + 'px)'
+            : ''
+        }`,
+        setScreen
+      );
+
+      // if (
+      //   window.innerWidth >= sizeScreen.min &&
+      //   window.innerWidth <= sizeScreen.max
+      // ) {
+      //   setScreen(key as ScreenResponsiveConfig);
+      // }
+    });
+
+    createQuery(
+      'landscape',
+      'only screen and (orientation: landscape)',
+      setOrientation
+    );
+    createQuery(
+      'portrait',
+      'only screen and (orientation: portrait)',
+      setOrientation
+    );
+  });
+
+  const on = (device: keyof typeof devices) => {
+    return devices[device].includes(screen);
+  };
+
+  return {
+    breakpoints,
+    devices,
+    orientation,
+    screen,
+    on,
+  };
+};

package/src/index.tsx

@@ -0,0 +1,8 @@
+export * from './components/View';
+export * from './components/Image';
+export * from './components/Text';
+export * from './hooks/useMount';
+export * from './hooks/useResponsive';
+export * from './providers/Responsive';
+export * from './providers/Theme';
+export * from './hooks/useMount';

package/src/providers/Responsive.tsx

@@ -0,0 +1,61 @@
+import React, { ReactNode, createContext, useContext } from 'react';
+
+export type ScreenSizeRange = {
+  breakpoint: string;
+  min: number;
+  max?: number;
+};
+export type ResponsiveConfig = Record<string, number>;
+const defaultBreakpointsConfig: ResponsiveConfig = {
+  xs: 0,
+  sm: 340,
+  md: 560,
+  lg: 1080,
+  xl: 1300,
+};
+
+export type DeviceConfig = Record<string, string[]>;
+const defaultDeviceConfig: DeviceConfig = {
+  mobile: ['xs', 'sm'],
+  tablet: ['md', 'lg'],
+  desktop: ['lg', 'xl'],
+};
+
+export type ScreenConfig = {
+  breakpoints: ResponsiveConfig;
+  devices: DeviceConfig;
+};
+
+export type ScreenOrientation = 'landscape' | 'portrait';
+
+const defaultScreenConfig: ScreenConfig = {
+  breakpoints: defaultBreakpointsConfig,
+  devices: defaultDeviceConfig,
+};
+
+export const ResponsiveContext =
+  createContext<ScreenConfig>(defaultScreenConfig);
+
+export const useResponsiveContext = () => useContext(ResponsiveContext);
+
+export const ResponsiveProvider = ({
+  breakpoints = defaultBreakpointsConfig,
+  devices = defaultDeviceConfig,
+  children,
+}: {
+  breakpoints?: ResponsiveConfig;
+  devices?: DeviceConfig;
+
+  children?: ReactNode;
+}): React.ReactElement => {
+  return (
+    <ResponsiveContext.Provider
+      value={{
+        breakpoints,
+        devices,
+      }}
+    >
+      {children}
+    </ResponsiveContext.Provider>
+  );
+};

package/src/providers/Theme.tsx

@@ -0,0 +1,73 @@
+import React, { ReactNode } from 'react';
+
+import { createContext, useContext } from 'react';
+import { palette as defaultPalette } from '../utils/colors';
+
+type ColorConfig = Record<string, string>;
+
+type VariantColorConfig = Record<string, Record<string, string>>;
+
+const defaultColors: ColorConfig = {
+  white: '#FFFFFF',
+  black: '#000000',
+};
+
+export const ThemeContext = createContext<{
+  getColor: (color: string) => string;
+  colors: ColorConfig;
+  palette: VariantColorConfig;
+}>({
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  getColor: (name: string) => {
+    return name;
+  },
+  colors: defaultColors,
+  palette: defaultPalette,
+});
+
+export const useTheme = () => useContext(ThemeContext);
+
+export const ThemeProvider = ({
+  palette = defaultPalette,
+  colors = defaultColors,
+  children,
+}: {
+  colors?: ColorConfig;
+  palette?: VariantColorConfig;
+  children?: ReactNode;
+}): React.ReactElement => {
+  const getColor = (name: string) => {
+    // console.log('getColor', name);
+    if (name === 'transparent') return name;
+    try {
+      if (name.indexOf('.') !== -1) {
+        const keys = name.split('.');
+
+        if (palette && palette[keys[0]][keys[1]] !== undefined) {
+          return palette[keys[0]][keys[1]];
+        }
+        if (palette[keys[0]][parseInt(keys[1])] !== undefined) {
+          return palette[keys[0]][parseInt(keys[1])];
+        }
+      } else if (colors && colors[name] !== undefined) {
+        return colors[name];
+      }
+    } catch (e) {
+      console.log('Color ' + name + ' not found');
+    }
+
+    return name;
+  };
+
+  return (
+    <ThemeContext.Provider
+      value={{
+        getColor,
+        colors,
+        palette,
+      }}
+    >
+      {children}
+    </ThemeContext.Provider>
+  );
+};

package/src/types/module.d.ts

@@ -0,0 +1 @@
+declare module 'enquire-js';