app-studio 0.0.7 → 0.0.11

package/src/hooks/useResponsive.ts

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

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

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

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

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