@tecsinapse/react-core 1.21.1-beta.8 → 1.21.2

package/src/index.ts

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

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

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

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

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

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

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

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

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

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