@tecsinapse/react-core 1.21.2 → 1.21.3

package/src/index.ts

@@ -1,116 +0,0 @@
-export { Avatar } from './components/atoms/Avatar';
-export type { AvatarProps } from './components/atoms/Avatar';
-export { Badge } from './components/atoms/Badge';
-export type { BadgeProps } from './components/atoms/Badge';
-export { BoxContent } from './components/atoms/BoxContent';
-export type { BoxContentProps } from './components/atoms/BoxContent';
-export { Button, Error, Loading, Success } from './components/atoms/Button';
-export type {
-  ButtonProps,
-  ButtonSizeType,
-  ButtonStateProps,
-  ButtonStateType,
-} from './components/atoms/Button';
-export { Card } from './components/atoms/Card';
-export type { CardProps } from './components/atoms/Card';
-export { Footer } from './components/atoms/Card/Footer';
-export type { FooterProps } from './components/atoms/Card/Footer';
-export { Header } from './components/atoms/Card/Header';
-export type { HeaderProps } from './components/atoms/Card/Header';
-export { Checkbox } from './components/atoms/Checkbox';
-export type { CheckboxProps } from './components/atoms/Checkbox';
-export { Divider } from './components/atoms/Divider';
-export type { DividerProps } from './components/atoms/Divider';
-export { GroupButton, GroupButtonOption } from './components/atoms/GroupButton';
-export type {
-  GroupButtonOptionProps,
-  GroupButtonProps,
-  GroupButtonValue,
-} from './components/atoms/GroupButton';
-export { Icon } from './components/atoms/Icon';
-export type { IconProps } from './components/atoms/Icon';
-export {
-  disabledInputStyles,
-  Hint,
-  InputContainer,
-  InputElement,
-  InputMaskElement,
-  PressableInputContainer,
-  StyledBorderKeeper,
-  useInputFocus,
-  useNumberMask,
-  useStringMask,
-} from './components/atoms/Input';
-export type {
-  InputContainerProps,
-  InputElementProps,
-  InputMaskElementProps,
-  InputVariantType,
-  PressableInputContainerProps,
-} from './components/atoms/Input';
-export { Paper } from './components/atoms/Paper';
-export type { PaperProps } from './components/atoms/Paper';
-export { PressableSurface } from './components/atoms/PressableSurface';
-export type { PressableSurfaceProps } from './components/atoms/PressableSurface';
-export { ProgressBar } from './components/atoms/ProgressBar';
-export type { ProgressBarProps } from './components/atoms/ProgressBar';
-export { RadioButton } from './components/atoms/RadioButton';
-export type { RadioButtonProps } from './components/atoms/RadioButton';
-export { Switch } from './components/atoms/Switch';
-export type { SwitchProps } from './components/atoms/Switch';
-export { Tag } from './components/atoms/Tag';
-export type { TagProps } from './components/atoms/Tag';
-export { Text } from './components/atoms/Text';
-export type { TextProps } from './components/atoms/Text';
-export { Calendar } from './components/molecules/Calendar';
-export type {
-  CalendarProps,
-  DateRange,
-  SelectionType,
-  Value,
-} from './components/molecules/Calendar';
-export { DatePicker } from './components/molecules/DatePicker';
-export type { DatePickerProps } from './components/molecules/DatePicker';
-export { DateTimePicker } from './components/molecules/DateTimePicker';
-export type { DateTimePickerProps } from './components/molecules/DateTimePicker';
-export { DateTimeSelector } from './components/molecules/DateTimeSelector';
-export type {
-  DateTimeSelectorMode,
-  DateTimeSelectorProps,
-} from './components/molecules/DateTimeSelector';
-export {
-  getGridItemPadding,
-  getGridItemColumSpan,
-} from './components/molecules/Grid';
-export type {
-  GridSpacing,
-  IGridItem,
-  IGrid,
-  FlexAlignBase,
-  FlexAlignType,
-  FlexPositioning,
-  FlexSpacing,
-  PaddingPosition,
-} from './components/molecules/Grid';
-export { HintInputContainer } from './components/molecules/HintInputContainer';
-export type { HintInputContainerProps } from './components/molecules/HintInputContainer';
-export { IconComponent } from './components/molecules/IconTextButton';
-export type {
-  IconPositionOptions,
-  IconTextButtonProps,
-} from './components/molecules/IconTextButton';
-export { InputPasswordIcon } from './components/molecules/InputPassword';
-export type {
-  LabeledSwitchProps,
-  LabelPositionOptions,
-} from './components/molecules/LabeledSwitch';
-export { Snackbar } from './components/molecules/Snackbar';
-export type { SnackbarProps } from './components/molecules/Snackbar';
-export { TextArea, TextAreaInputBase } from './components/molecules/TextArea';
-export type { TextAreaProps } from './components/molecules/TextArea';
-export * from './hooks';
-export * from './styles/definitions';
-export * from './styles/light';
-export { default as ThemeProvider } from './styles/ThemeProvider';
-export * from './types/defaults';
-export * from './utils';

package/src/styles/ThemeProvider.tsx

@@ -1,12 +0,0 @@
-import React, { FC } from 'react';
-import { ThemeProvider as EmotionProvider } from '@emotion/react';
-import { ThemeProviderProps } from '../types/defaults';
-
-const ThemeProvider: FC<ThemeProviderProps> = ({
-  theme,
-  children,
-}): JSX.Element => {
-  return <EmotionProvider theme={theme}>{children}</EmotionProvider>;
-};
-
-export default ThemeProvider;

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';