@tecsinapse/react-core 1.21.1-beta.1 → 1.21.1-beta.3

package/src/styles/definitions.ts

@@ -1,188 +0,0 @@
-import {
-  BorderRadius,
-  BorderWidth,
-  Breakpoints,
-  FontColor,
-  FontStack,
-  FontWeight,
-  IconSize,
-  Miscellaneous,
-  Spacing,
-  TypographyVariation,
-  ZIndex,
-} from '../types/defaults';
-import { RFValueStr } from '../utils';
-
-export const statusColor = {
-  error: {
-    xlight: '#fdf3f2',
-    light: '#ee9891',
-    medium: '#e04638',
-    dark: '#9b2318',
-    xdark: '#58240e',
-  },
-  warning: {
-    xlight: '#fffcf0',
-    light: '#ffe380',
-    medium: '#ffc700',
-    dark: '#cc9f00',
-    xdark: '#665000',
-  },
-  success: {
-    xlight: '#f3fcf8',
-    light: '#99e6c9',
-    medium: '#2db783',
-    dark: '#238f67',
-    xdark: '#14523b',
-  },
-  info: {
-    xlight: '#f0f8fe',
-    light: '#85c7fa',
-    medium: '#239bf6',
-    dark: '#0873c4',
-    xdark: '#043962',
-  },
-};
-
-export const hex2rgba: (hex, alpha?: number) => string = (hex, alpha = 1) => {
-  const [r, g, b] = hex.match(/\w\w/g).map(x => parseInt(x, 16));
-  return `rgba(${r},${g},${b},${alpha})`;
-};
-
-export const miscellaneous: Miscellaneous = {
-  shadow: '#000000', // black
-  overlay: '#282625', // rgba(40, 38, 37, 0.5)
-  bodyColor: '#f8f7f7',
-  surfaceColor: '#ffffff', //input, group button, cards
-};
-
-export const spacing: Spacing = {
-  nano: RFValueStr('2px'),
-  micro: RFValueStr('4px'),
-  mili: RFValueStr('8px'),
-  centi: RFValueStr('12px'),
-  deca: RFValueStr('16px'),
-  kilo: RFValueStr('24px'),
-  mega: RFValueStr('32px'),
-  giga: RFValueStr('40px'),
-  tera: RFValueStr('48px'),
-  peta: RFValueStr('56px'),
-  hexa: RFValueStr('64px'),
-};
-
-export const iconSize: IconSize = {
-  micro: RFValueStr('12px'),
-  mili: RFValueStr('14px'),
-  centi: RFValueStr('16px'), // '1rem'
-  deca: RFValueStr('18px'), // '1.5rem'
-  kilo: RFValueStr('24px'), // '1.6rem'
-  mega: RFValueStr('32px'), // '2rem'
-};
-
-export const borderRadius: BorderRadius = {
-  nano: RFValueStr('2px'),
-  micro: RFValueStr('4px'),
-  mili: RFValueStr('8px'),
-  centi: RFValueStr('16px'),
-  deca: RFValueStr('24px'),
-  pill: RFValueStr('999999px'), // also circle
-};
-
-export const borderWidth: BorderWidth = {
-  pico: RFValueStr('1px'),
-  nano: RFValueStr('2px'),
-};
-
-export const typography: TypographyVariation = {
-  h5: {
-    fontSize: RFValueStr('16px'), // '1rem'
-    lineHeight: RFValueStr('24px'), // '1.5rem'
-  },
-  h4: {
-    fontSize: RFValueStr('18px'), // '1.125rem'
-    lineHeight: RFValueStr('27px'), // '1.688rem'
-  },
-  h3: {
-    fontSize: RFValueStr('20px'), // '1.25rem'
-    lineHeight: RFValueStr('32px'), // '2rem'
-  },
-  h2: {
-    fontSize: RFValueStr('26px'), // '1.625rem'
-    lineHeight: RFValueStr('38px'), // '2.375rem'
-  },
-  h1: {
-    fontSize: RFValueStr('32px'), // '2rem'
-    lineHeight: RFValueStr('42px'), // '2.625rem'
-  },
-  base: {
-    fontSize: RFValueStr('14px'), // '0.875rem'
-    lineHeight: RFValueStr('21px'), // '1.313rem'
-  },
-  sub: {
-    fontSize: RFValueStr('12px'), // '0.75rem'
-    lineHeight: RFValueStr('18px'), // '1.125rem'
-  },
-  label: {
-    fontSize: RFValueStr('10px'),
-    lineHeight: RFValueStr('12px'),
-  },
-};
-
-export const fontStack: FontStack = {
-  default: 'Lato',
-  mono: 'Consolas, monaco, monospace',
-};
-
-export const fontWeight: FontWeight = {
-  regular: '400',
-  bold: '700',
-  black: '900',
-};
-
-export const fontFiles: FontWeight = {
-  black: '{0}-Black',
-  bold: '{0}-Bold',
-  regular: '{0}-Regular',
-};
-
-export const fontColor: FontColor = {
-  light: '#fff',
-  medium: '#85807a',
-  dark: '#353231', // default
-  orange: '#f89907',
-};
-
-export const zIndex: ZIndex = {
-  default: 0,
-  absolute: 1,
-  select: 20,
-  input: 20,
-  popover: 30,
-  tooltip: 40,
-  header: 600,
-  backdrop: 700,
-  drawer: 700,
-  sidebar: 800,
-  modal: 1000,
-};
-
-export type IconType =
-  | 'material'
-  | 'material-community'
-  | 'simple-line-icon'
-  | 'zocial'
-  | 'font-awesome'
-  | 'octicon'
-  | 'ionicon'
-  | 'foundation'
-  | 'evilicon'
-  | 'entypo'
-  | 'antdesign'
-  | 'font-awesome-5'
-  | string;
-
-export const breakpoints: Breakpoints = {
-  sm: 480,
-  md: 768,
-  lg: 1366,
-};

package/src/styles/light.ts

@@ -1,56 +0,0 @@
-import { ThemeProp } from '../types/defaults';
-import {
-  borderRadius,
-  borderWidth,
-  breakpoints,
-  fontColor,
-  fontFiles,
-  fontStack,
-  fontWeight,
-  iconSize,
-  miscellaneous,
-  spacing,
-  statusColor,
-  typography,
-  zIndex,
-} from './definitions';
-
-const primaryGradation = {
-  xlight: '#fef9f0',
-  light: '#fccb83',
-  medium: '#f89907',
-  dark: '#ae6b05',
-  xdark: '#633d03',
-};
-
-const secondaryGradation = {
-  xlight: '#f8f7f7',
-  light: '#c2bfbc',
-  medium: '#85807a',
-  dark: '#5d5955',
-  xdark: '#353231',
-};
-
-export const lightTheme: ThemeProp = {
-  color: {
-    primary: {
-      ...primaryGradation,
-    },
-    secondary: { ...secondaryGradation },
-    ...statusColor,
-  },
-  miscellaneous,
-  spacing,
-  iconSize,
-  borderRadius,
-  borderWidth,
-  typography,
-  font: {
-    color: fontColor,
-    stack: fontStack,
-    weight: fontWeight,
-    files: fontFiles,
-  },
-  zIndex,
-  breakpoints,
-};

package/src/types/defaults.ts

@@ -1,162 +0,0 @@
-import { ReactNode } from 'react';
-
-export type Color = {
-  primary: ColorGradation;
-  secondary: ColorGradation;
-  error: ColorGradation;
-  success: ColorGradation;
-  info: ColorGradation;
-  warning: ColorGradation;
-};
-
-export type TypographyVariation = {
-  h1: Typography;
-  h2: Typography;
-  h3: Typography;
-  h4: Typography;
-  h5: Typography;
-  base: Typography;
-  sub: Typography;
-  label: Typography;
-};
-
-export type Miscellaneous = {
-  shadow: string;
-  overlay: string;
-  bodyColor: string;
-  surfaceColor: string;
-};
-
-export type Spacing = {
-  nano: string;
-  micro: string;
-  mili: string;
-  centi: string;
-  deca: string;
-  kilo: string;
-  mega: string;
-  giga: string;
-  tera: string;
-  peta: string;
-  hexa: string;
-};
-
-export type IconSize = {
-  micro: string;
-  mili: string;
-  centi: string;
-  deca: string;
-  kilo: string;
-  mega: string;
-};
-
-export type BorderRadius = {
-  nano: string;
-  micro: string;
-  mili: string;
-  centi: string;
-  deca: string;
-  pill: string;
-};
-
-export type BorderWidth = {
-  pico: string;
-  nano: string;
-};
-
-export type Typography = {
-  lineHeight: string;
-  fontSize: string;
-};
-
-export type ColorGradation = {
-  xlight: string;
-  light: string;
-  medium: string;
-  dark: string;
-  xdark: string;
-};
-
-export type FontStack = {
-  default: string;
-  mono: string;
-};
-
-export type FontColor = {
-  light: string;
-  medium: string;
-  dark: string; // default
-  orange: string;
-};
-
-export type ZIndex = {
-  default: number;
-  absolute: number;
-  drawer: number;
-  select: number;
-  input: number;
-  popover: number;
-  tooltip: number;
-  header: number;
-  backdrop: number;
-  sidebar: number;
-  modal: number;
-};
-
-export type FontWeight = {
-  regular: string;
-  bold: string;
-  black: string;
-};
-
-export type Breakpoints = {
-  sm: number;
-  md: number;
-  lg: number;
-};
-
-export type ThemeProp = {
-  color: Color;
-  miscellaneous: Miscellaneous;
-  spacing: Spacing;
-  iconSize: IconSize;
-  borderRadius: BorderRadius;
-  borderWidth: BorderWidth;
-  typography: TypographyVariation;
-  font: {
-    color: FontColor;
-    stack: FontStack;
-    weight: FontWeight;
-    files: FontWeight;
-  };
-  zIndex: ZIndex;
-  /** Designed to web */
-  breakpoints: Breakpoints;
-};
-
-export interface ThemeProviderProps {
-  children?: ReactNode;
-  theme: ThemeProp;
-}
-
-export type StyleProps = ThemeProviderProps;
-
-export type ColorType = keyof Color;
-
-export type SpacingType = keyof Spacing;
-
-export type TypographyVariationType = keyof TypographyVariation;
-
-export type FontWeightType = keyof FontWeight;
-
-export type VariantType = 'filled' | 'outlined' | 'text';
-
-export type ColorGradationType = keyof ColorGradation;
-
-export type FontColorType = keyof FontColor;
-
-export type BorderRadiusType = keyof BorderRadius;
-
-export type FontStackType = keyof FontStack;
-
-export type IconSizeType = keyof IconSize;

package/src/utils/IPhoneXHelper.ts

@@ -1,39 +0,0 @@
-import { Dimensions, Platform, StatusBar } from 'react-native';
-
-export function isIphoneX() {
-  const dimen = Dimensions.get('window');
-  return (
-    Platform.OS === 'ios' &&
-    !Platform.isPad &&
-    !Platform.isTVOS &&
-    (dimen.height === 780 ||
-      dimen.width === 780 ||
-      dimen.height === 812 ||
-      dimen.width === 812 ||
-      dimen.height === 844 ||
-      dimen.width === 844 ||
-      dimen.height === 896 ||
-      dimen.width === 896 ||
-      dimen.height === 926 ||
-      dimen.width === 926)
-  );
-}
-
-export function ifIphoneX(iphoneXStyle, regularStyle) {
-  if (isIphoneX()) {
-    return iphoneXStyle;
-  }
-  return regularStyle;
-}
-
-export function getStatusBarHeight(safe) {
-  return Platform.select({
-    ios: ifIphoneX(safe ? 44 : 30, 20),
-    android: StatusBar.currentHeight,
-    default: 0,
-  });
-}
-
-export function getBottomSpace() {
-  return isIphoneX() ? 34 : 0;
-}

package/src/utils/ResponsiveFontSize.ts

@@ -1,71 +0,0 @@
-import { Dimensions, Platform, StatusBar } from 'react-native';
-import { extractNumbersFromString } from './extractNumbersFromString';
-import { isIphoneX } from './IPhoneXHelper';
-
-const STANDARD_SCREEN_HEIGHT = 680;
-
-/**
- * Use this function when you want to scale a percentage number
- * to a reasonable value that will fit better on most of devices.
- *
- * @param percent
- * @returns
- */
-export const RFPercentage = (percent: number) => {
-  if (Platform.OS === 'web') return percent;
-  const { height, width } = Dimensions.get('window');
-  const standardLength = width > height ? width : height;
-  const offset =
-    width > height
-      ? 0
-      : Platform.OS === 'ios'
-      ? 78
-      : StatusBar.currentHeight || 0; // iPhone X style SafeAreaView size in portrait
-  const deviceHeight =
-    isIphoneX() || Platform.OS === 'android'
-      ? standardLength - offset
-      : standardLength;
-  const heightPercent = (percent * deviceHeight) / 100;
-  return Math.round(heightPercent);
-};
-
-/**
- * Use this function when you want to scale a font size based on pixel unit
- * to a reasonable value that will fit better on most of devices.
- *
- * @param fontSize
- * @param standardScreenHeight
- * @returns
- */
-export const RFValue = (
-  fontSize: number,
-  standardScreenHeight: number = STANDARD_SCREEN_HEIGHT
-) => {
-  if (Platform.OS === 'web') return fontSize;
-  const { height, width } = Dimensions.get('window');
-  const standardLength = width > height ? width : height;
-  const offset =
-    width > height
-      ? 0
-      : Platform.OS === 'ios'
-      ? 78
-      : StatusBar.currentHeight || 0; // iPhone X style SafeAreaView size in portrait
-  const deviceHeight =
-    isIphoneX() || Platform.OS === 'android'
-      ? standardLength - offset
-      : standardLength;
-  const heightPercent = (fontSize * deviceHeight) / standardScreenHeight;
-  return Math.round(heightPercent);
-};
-
-/**
- * Same as RFValue, however you can provide string values. E.g: '10px', '-5px'.
- *
- * @param fontSize
- * @param standardScreenHeight
- * @returns
- */
-export const RFValueStr = (fontSize: string, standardScreenHeight?: number) => {
-  const _fontSize = extractNumbersFromString(fontSize);
-  return `${RFValue(_fontSize, standardScreenHeight)}px`;
-};

package/src/utils/extractNumbersFromString.ts

@@ -1,5 +0,0 @@
-export const extractNumbersFromString = (value: string): number =>
-  Number(extractDigitsFromString(value));
-
-export const extractDigitsFromString = (value: string): string =>
-  value.replace(/[^0-9]/g, '');

package/src/utils/formatWithMask.ts

@@ -1,25 +0,0 @@
-import {
-  MaskType,
-  CurrencyOptions,
-  getMask,
-  mergeMask,
-  getInternalNumberAndMask,
-} from '../components/atoms/Input';
-import currency from 'currency.js';
-
-export const formatWithMask = (
-  mask: (MaskType[] | ((value: string) => MaskType[])) | CurrencyOptions,
-  value: string | number
-): string | number => {
-  if (Array.isArray(mask) || typeof mask === 'function') {
-    const selectedMask = getMask(mask, String(value));
-    const { formatted } = mergeMask(String(value), selectedMask);
-    return formatted || '';
-  } else {
-    const { internalNumber, mergedOptions } = getInternalNumberAndMask(
-      value,
-      mask
-    );
-    return currency(internalNumber).format(mergedOptions);
-  }
-};

package/src/utils/index.ts

@@ -1,10 +0,0 @@
-export {
-  extractDigitsFromString,
-  extractNumbersFromString,
-} from './extractNumbersFromString';
-export * from './formatWithMask';
-export * from './IPhoneXHelper';
-export { lightenDarkenColor } from './lightenDarkenColor';
-export * from './masks';
-export * from './ResponsiveFontSize';
-export * from './variantComplement';

package/src/utils/lightenDarkenColor.ts

@@ -1,24 +0,0 @@
-export const lightenDarkenColor = (color: string, variation: number) => {
-  let usePound = false;
-
-  if (color[0] == '#') {
-    color = color.slice(1);
-    usePound = true;
-  }
-
-  const num = parseInt(color, 16);
-
-  let r = (num >> 16) + variation;
-  if (r > 255) r = 255;
-  else if (r < 0) r = 0;
-
-  let b = ((num >> 8) & 0x00ff) + variation;
-  if (b > 255) b = 255;
-  else if (b < 0) b = 0;
-
-  let g = (num & 0x0000ff) + variation;
-  if (g > 255) g = 255;
-  else if (g < 0) g = 0;
-
-  return (usePound ? '#' : '') + (g | (b << 8) | (r << 16)).toString(16);
-};

package/src/utils/masks.ts

@@ -1,24 +0,0 @@
-// NOTE: Add here all individually utils, then you can use it on input components everywhere.
-import { extractDigitsFromString } from './extractNumbersFromString';
-
-export const Masks = {
-  CPF: ['999.999.999-99'],
-  CNPJ: ['99.999.999/9999-99'],
-  DATE: ['99/99/9999'],
-  MONTH_YEAR: ['99/9999'],
-  CEP: ['99999-999'],
-  PHONE: ['(99) 9999-9999'],
-  PHONE_EXTENDED: ['(99) 99999-9999'],
-  COMBINED_PHONE: (value: string) => {
-    const onlyNumbers = extractDigitsFromString(value);
-    // Value is number extended, but without mask.
-    const isCellPhoneExtended = onlyNumbers.length === 11;
-
-    // Value in formatted mode
-    return value?.length <= 14 && !isCellPhoneExtended
-      ? Masks.PHONE
-      : Masks.PHONE_EXTENDED;
-  },
-  COMBINED_CPF_CNPJ: (value: string) =>
-    value?.length <= 14 ? Masks.CPF : Masks.CNPJ,
-};

package/src/utils/variantComplement.ts

@@ -1,36 +0,0 @@
-import {
-  ColorGradationType,
-  ColorType,
-  FontColorType,
-  VariantType,
-} from '../types/defaults';
-
-export const fontColorVC: Record<VariantType, FontColorType> = {
-  filled: 'light',
-  outlined: 'orange',
-  text: 'orange',
-};
-
-export const colorVC: Record<VariantType, ColorType> = {
-  filled: 'primary',
-  outlined: 'primary',
-  text: 'primary',
-};
-
-export const colorGradationVC: Record<VariantType, ColorGradationType> = {
-  filled: 'dark',
-  outlined: 'dark',
-  text: 'dark',
-};
-
-export const borderColorVC: Record<VariantType, ColorType> = {
-  filled: 'primary',
-  outlined: 'primary',
-  text: 'primary',
-};
-
-export const borderColorGradationVC: Record<VariantType, ColorGradationType> = {
-  filled: 'dark',
-  outlined: 'dark',
-  text: 'dark',
-};

package/tsconfig.build.esm.json

@@ -1,10 +0,0 @@
-{
-  "extends": "../../tsconfig.build.json",
-  "compilerOptions": {
-    "skipLibCheck": true,
-    "declarationDir": "./esm",
-    "rootDir": "./src",
-    "baseUrl": "./"
-  },
-  "include": ["./src"]
-}

package/tsconfig.build.json

@@ -1,11 +0,0 @@
-{
-  "extends": "../../tsconfig.build.json",
-  "compilerOptions": {
-    "skipLibCheck": true,
-    "declarationDir": "./dist",
-    "rootDir": "./src",
-    "baseUrl": "./"
-  },
-  "include": ["./src"],
-  "exclude": ["node_modules", "dist", "esm"]
-}