@tecsinapse/react-core 1.19.0 → 1.21.0-beta.13

package/esm/utils/variantComplement.js

@@ -0,0 +1,28 @@
+const fontColorVC = {
+  filled: "light",
+  outlined: "orange",
+  text: "orange"
+};
+const colorVC = {
+  filled: "primary",
+  outlined: "primary",
+  text: "primary"
+};
+const colorGradationVC = {
+  filled: "dark",
+  outlined: "dark",
+  text: "dark"
+};
+const borderColorVC = {
+  filled: "primary",
+  outlined: "primary",
+  text: "primary"
+};
+const borderColorGradationVC = {
+  filled: "dark",
+  outlined: "dark",
+  text: "dark"
+};
+
+export { borderColorGradationVC, borderColorVC, colorGradationVC, colorVC, fontColorVC };
+//# sourceMappingURL=variantComplement.js.map

package/esm/utils/variantComplement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"variantComplement.js","sources":["../../src/utils/variantComplement.ts"],"sourcesContent":["import {\n  ColorGradationType,\n  ColorType,\n  FontColorType,\n  VariantType,\n} from '../types/defaults';\n\nexport const fontColorVC: Record<VariantType, FontColorType> = {\n  filled: 'light',\n  outlined: 'orange',\n  text: 'orange',\n};\n\nexport const colorVC: Record<VariantType, ColorType> = {\n  filled: 'primary',\n  outlined: 'primary',\n  text: 'primary',\n};\n\nexport const colorGradationVC: Record<VariantType, ColorGradationType> = {\n  filled: 'dark',\n  outlined: 'dark',\n  text: 'dark',\n};\n\nexport const borderColorVC: Record<VariantType, ColorType> = {\n  filled: 'primary',\n  outlined: 'primary',\n  text: 'primary',\n};\n\nexport const borderColorGradationVC: Record<VariantType, ColorGradationType> = {\n  filled: 'dark',\n  outlined: 'dark',\n  text: 'dark',\n};\n"],"names":[],"mappings":"AAOO,MAAM,WAAkD,GAAA;AAAA,EAC7D,MAAQ,EAAA,OAAA;AAAA,EACR,QAAU,EAAA,QAAA;AAAA,EACV,IAAM,EAAA,QAAA;AACR,EAAA;AAEO,MAAM,OAA0C,GAAA;AAAA,EACrD,MAAQ,EAAA,SAAA;AAAA,EACR,QAAU,EAAA,SAAA;AAAA,EACV,IAAM,EAAA,SAAA;AACR,EAAA;AAEO,MAAM,gBAA4D,GAAA;AAAA,EACvE,MAAQ,EAAA,MAAA;AAAA,EACR,QAAU,EAAA,MAAA;AAAA,EACV,IAAM,EAAA,MAAA;AACR,EAAA;AAEO,MAAM,aAAgD,GAAA;AAAA,EAC3D,MAAQ,EAAA,SAAA;AAAA,EACR,QAAU,EAAA,SAAA;AAAA,EACV,IAAM,EAAA,SAAA;AACR,EAAA;AAEO,MAAM,sBAAkE,GAAA;AAAA,EAC7E,MAAQ,EAAA,MAAA;AAAA,EACR,QAAU,EAAA,MAAA;AAAA,EACV,IAAM,EAAA,MAAA;AACR;;;;"}

package/package.json

@@ -1,14 +1,17 @@
 {
   "name": "@tecsinapse/react-core",
   "description": "TecSinapse hybrid React components",
-  "version": "1.19.0",
+  "version": "1.21.0-beta.13+cb2e0a1",
   "license": "MIT",
   "main": "dist/index.js",
+  "module": "esm/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
     "start": "yarn build:es --watch",
-    "build:es": "cross-env BABEL_ENV=build babel src --root-mode upward --out-dir dist --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
-    "build:declaration": "tsc --project tsconfig.build.json",
+    "build:es": "yarn rollup --config",
+    "build:declaration": "run-p build:declaration:cjs build:declaration:esm",
+    "build:declaration:cjs": "tsc --project tsconfig.build.json",
+    "build:declaration:esm": "tsc --project tsconfig.build.esm.json",
     "build:declaration:watch": "tsc --project tsconfig.build.json --watch",
     "yalc:push": "yalc push --changed",
     "yalc:show": "yalc installations show $npm_package_name"
@@ -30,9 +33,8 @@
   "homepage": "https://tecsinapse.github.io/design-system/",
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-native": "^0.64.0",
     "react-native-vector-icons": "^8.1.0 || ^9.0.0"
   },
-  "gitHead": "59f85f1085ace4af0b26b85e32faf92cd2bf303f"
+  "gitHead": "cb2e0a1873cfc3f45e793b5443297fb6fffce1b5"
 }

package/rollup.config.js

@@ -0,0 +1,36 @@
+import esbuild from 'rollup-plugin-esbuild';
+
+const outputDefaultConfig = {
+  preserveModules: true,
+  preserveModulesRoot: 'src',
+  sourcemap: true,
+};
+
+export default [
+  {
+    input: ['./src/index.ts'],
+    output: [
+      {
+        dir: 'esm',
+        format: 'esm',
+        ...outputDefaultConfig,
+      },
+      {
+        dir: 'dist',
+        format: 'cjs',
+        exports: 'auto',
+        ...outputDefaultConfig,
+      },
+    ],
+    plugins: [esbuild({ tsconfig: 'tsconfig.build.json' })],
+    external: [
+      'react',
+      'react-native',
+      'react-native-vector-icons',
+      '@emotion/native',
+      '@emotion/react',
+      'currency.js',
+      'date-fns',
+    ],
+  },
+];

package/src/components/atoms/Avatar/Avatar.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Avatar, AvatarProps } from './Avatar';
+import { default as Avatar, AvatarProps } from './Avatar';
 import { Story } from '@storybook/react';
 
 export default {
@@ -13,8 +13,7 @@ export const Base = Template.bind({});
 
 Base.args = {
   source: {
-    uri:
-      'https://www.shareicon.net/data/512x512/2016/05/24/770117_people_512x512.png',
+    uri: 'https://www.shareicon.net/data/512x512/2016/05/24/770117_people_512x512.png',
   },
   name: 'João',
   onPress: () => alert('onPress callback'),

package/src/components/atoms/Avatar/Avatar.tsx

@@ -22,7 +22,7 @@ export interface AvatarProps {
   TextComponent?: FC<TextProps>;
 }
 
-export const Avatar: React.FC<AvatarProps> = ({
+const Avatar: React.FC<AvatarProps> = ({
   source,
   name,
   onPress,

package/src/components/atoms/Avatar/index.ts

@@ -1 +1,2 @@
-export { default as Avatar, AvatarProps } from './Avatar';
+export { default as Avatar } from './Avatar';
+export type { AvatarProps } from './Avatar';

package/src/components/atoms/Badge/index.ts

@@ -1 +1,2 @@
-export { default as Badge, BadgeProps } from './Badge';
+export { default as Badge } from './Badge';
+export type { BadgeProps } from './Badge';

package/src/components/atoms/BoxContent/index.ts

@@ -1 +1,2 @@
-export { default as BoxContent, BoxContentProps } from './BoxContent';
+export { default as BoxContent } from './BoxContent';
+export type { BoxContentProps } from './BoxContent';

package/src/components/atoms/Button/States/BaseState.tsx

@@ -12,7 +12,7 @@ export interface BaseStateProps extends ButtonStateProps {
   icon: string;
 }
 
-export const BaseState: FC<BaseStateProps> = ({
+const BaseState: FC<BaseStateProps> = ({
   textComponent = Text,
   buttonSize = 'default',
   fontColor = 'light',

package/src/components/atoms/Button/States/Error.tsx

@@ -1,8 +1,8 @@
 import React, { FC } from 'react';
 import { ButtonStateProps } from '../Button';
-import { BaseState } from './BaseState';
+import { default as BaseState } from './BaseState';
 
-export const Error: FC<ButtonStateProps> = props => {
+const Error: FC<ButtonStateProps> = props => {
   return <BaseState {...props} icon="close-circle-outline" />;
 };
 

package/src/components/atoms/Button/States/Loading.tsx

@@ -5,7 +5,7 @@ import { Text } from '../../Text';
 import { ButtonStateProps } from '../Button';
 import { getStyledTextButton, StyledIndicator } from './styled';
 
-export const Loading: FC<ButtonStateProps> = ({
+const Loading: FC<ButtonStateProps> = ({
   text,
   textComponent = Text,
   fontColor = 'light',

package/src/components/atoms/Button/States/Success.tsx

@@ -1,8 +1,8 @@
 import React, { FC } from 'react';
 import { ButtonStateProps } from '../Button';
-import { BaseState } from './BaseState';
+import { default as BaseState } from './BaseState';
 
-export const Success: FC<ButtonStateProps> = props => {
+const Success: FC<ButtonStateProps> = props => {
   return <BaseState {...props} icon="checkmark-circle-outline" />;
 };
 

package/src/components/atoms/Button/index.ts

@@ -1,8 +1,8 @@
-export {
-  default as Button,
+export { default as Button } from './Button';
+export { Error, Success, Loading } from './States';
+export type {
   ButtonProps,
   ButtonSizeType,
   ButtonStateType,
   ButtonStateProps,
 } from './Button';
-export { Error, Success, Loading } from './States';

package/src/components/atoms/Card/Footer/index.ts

@@ -1 +1,2 @@
-export { default as Footer, FooterProps } from './Footer';
+export { default as Footer } from './Footer';
+export type { FooterProps } from './Footer';

package/src/components/atoms/Card/Header/index.ts

@@ -1 +1,2 @@
-export { default as Header, HeaderProps } from './Header';
+export { default as Header } from './Header';
+export type { HeaderProps } from './Header';

package/src/components/atoms/Card/index.ts

@@ -1 +1,2 @@
-export { default as Card, CardProps } from './Card';
+export { default as Card } from './Card';
+export type { CardProps } from './Card';

package/src/components/atoms/Checkbox/index.ts

@@ -1 +1,2 @@
-export { default as Checkbox, CheckboxProps } from './Checkbox';
+export { default as Checkbox } from './Checkbox';
+export type { CheckboxProps } from './Checkbox';

package/src/components/atoms/Divider/index.ts

@@ -1 +1,2 @@
-export { default as Divider, DividerProps } from './Divider';
+export { default as Divider } from './Divider';
+export type { DividerProps } from './Divider';

package/src/components/atoms/GroupButton/index.ts

@@ -1,9 +1,4 @@
-export {
-  default as GroupButton,
-  GroupButtonProps,
-  GroupButtonValue,
-} from './GroupButton';
-export {
-  default as GroupButtonOption,
-  GroupButtonOptionProps,
-} from './GroupButtonOption';
+export { default as GroupButton } from './GroupButton';
+export type { GroupButtonProps, GroupButtonValue } from './GroupButton';
+export { default as GroupButtonOption } from './GroupButtonOption';
+export type { GroupButtonOptionProps } from './GroupButtonOption';

package/src/components/atoms/Icon/Icon.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { StyleProp, TextStyle } from 'react-native';
+import { StyleProp, TextStyle, Text } from 'react-native';
 import { useTheme } from '@emotion/react';
 import {
   ColorGradationType,
@@ -42,7 +42,11 @@ const Icon: FC<IconProps> = ({
   const color = getIconColor(colorVariant, colorTone, fontColor, theme);
   const RNVIcon = getIconComponent(type, size);
 
-  return <RNVIcon {...rest} style={style} name={name} color={color} />;
+  return (
+    <React.Suspense fallback={<Text> </Text>}>
+      <RNVIcon {...rest} style={style} name={name} color={color} />
+    </React.Suspense>
+  );
 };
 
 export default Icon;

package/src/components/atoms/Icon/helpers.ts

@@ -1,3 +1,4 @@
+import { lazy } from 'react';
 import {
   ColorGradationType,
   ColorType,
@@ -24,74 +25,75 @@ export const getIconComponent = (type: IconType, size: IconSizeType): any => {
   switch (type) {
     case 'zocial':
       return getStyledIcon(
-        require('react-native-vector-icons/dist/Zocial').default,
+        lazy(() => import('react-native-vector-icons/dist/Zocial')),
         size
       );
     case 'octicon':
       return getStyledIcon(
-        require('react-native-vector-icons/dist/Octicons').default,
+        lazy(() => import('react-native-vector-icons/dist/Octicons')),
         size
       );
     case 'material':
       return getStyledIcon(
-        require('react-native-vector-icons/dist/MaterialIcons').default,
+        lazy(() => import('react-native-vector-icons/dist/MaterialIcons')),
         size
       );
     case 'material-community':
       return getStyledIcon(
-        require('react-native-vector-icons/dist/MaterialCommunityIcons')
-          .default,
+        lazy(
+          () => import('react-native-vector-icons/dist/MaterialCommunityIcons')
+        ),
         size
       );
     case 'ionicon':
       return getStyledIcon(
-        require('react-native-vector-icons/dist/Ionicons').default,
+        lazy(() => import('react-native-vector-icons/dist/Ionicons')),
         size
       );
     case 'foundation':
       return getStyledIcon(
-        require('react-native-vector-icons/dist/Foundation').default,
+        lazy(() => import('react-native-vector-icons/dist/Foundation')),
         size
       );
     case 'evilicon':
       return getStyledIcon(
-        require('react-native-vector-icons/dist/EvilIcons').default,
+        lazy(() => import('react-native-vector-icons/dist/EvilIcons')),
         size
       );
     case 'entypo':
       return getStyledIcon(
-        require('react-native-vector-icons/dist/Entypo').default,
+        lazy(() => import('react-native-vector-icons/dist/Entypo')),
         size
       );
     case 'font-awesome':
       return getStyledIcon(
-        require('react-native-vector-icons/dist/FontAwesome').default,
+        lazy(() => import('react-native-vector-icons/dist/FontAwesome')),
         size
       );
     case 'font-awesome-5':
       return getStyledIcon(
-        require('react-native-vector-icons/dist/FontAwesome5').default,
+        lazy(() => import('react-native-vector-icons/dist/FontAwesome5')),
         size
       );
     case 'simple-line-icon':
       return getStyledIcon(
-        require('react-native-vector-icons/dist/SimpleLineIcons').default,
+        lazy(() => import('react-native-vector-icons/dist/SimpleLineIcons')),
         size
       );
     case 'feather':
       return getStyledIcon(
-        require('react-native-vector-icons/dist/Feather').default,
+        lazy(() => import('react-native-vector-icons/dist/Feather')),
         size
       );
     case 'antdesign':
     case 'ant-design':
       return getStyledIcon(
-        require('react-native-vector-icons/dist/AntDesign').default,
+        lazy(() => import('react-native-vector-icons/dist/AntDesign')),
         size
       );
     case 'fontisto':
       return getStyledIcon(
-        require('react-native-vector-icons/dist/Fontisto').default,
+        lazy(() => import('react-native-vector-icons/dist/Fontisto')),
         size
       );
     default:
@@ -99,7 +101,7 @@ export const getIconComponent = (type: IconType, size: IconSizeType): any => {
         return getStyledIcon(customIcons[type], size);
       }
       return getStyledIcon(
-        require('react-native-vector-icons/dist/MaterialIcons').default,
+        lazy(() => import('react-native-vector-icons/dist/MaterialIcons')),
         size
       );
   }

package/src/components/atoms/Icon/index.ts

@@ -1 +1,2 @@
-export { default as Icon, IconProps } from './Icon';
+export { default as Icon } from './Icon';
+export type { IconProps } from './Icon';

package/src/components/atoms/Input/PressableInputContainer/index.ts

@@ -1,4 +1,2 @@
-export {
-  default as PressableInputContainer,
-  PressableInputContainerProps,
-} from './PressableInputContainer';
+export { default as PressableInputContainer } from './PressableInputContainer';
+export type { PressableInputContainerProps } from './PressableInputContainer';

package/src/components/atoms/Input/index.ts

@@ -2,21 +2,15 @@ export { default as Hint } from './Hint';
 export * from './hooks/useInputFocus';
 export * from './hooks/useNumberMask';
 export * from './hooks/useStringMask';
-export {
-  default as InputContainer,
+export { default as InputContainer } from './InputContainer/InputContainer';
+export type {
   InputContainerProps,
   InputVariantType,
 } from './InputContainer/InputContainer';
-export {
-  default as InputElement,
-  InputElementProps,
-} from './InputElement/InputElement';
-export {
-  default as InputMaskElement,
-  InputMaskElementProps,
-} from './InputMaskElement/InputMaskElement';
-export {
-  PressableInputContainer,
-  PressableInputContainerProps,
-} from './PressableInputContainer';
+export { default as InputElement } from './InputElement/InputElement';
+export type { InputElementProps } from './InputElement/InputElement';
+export { default as InputMaskElement } from './InputMaskElement/InputMaskElement';
+export type { InputMaskElementProps } from './InputMaskElement/InputMaskElement';
+export { PressableInputContainer } from './PressableInputContainer';
+export type { PressableInputContainerProps } from './PressableInputContainer';
 export { StyledBorderKeeper, disabledInputStyles } from './styled';

package/src/components/atoms/Paper/index.ts

@@ -1 +1,2 @@
-export { default as Paper, PaperProps } from './Paper';
+export { default as Paper } from './Paper';
+export type { PaperProps } from './Paper';

package/src/components/atoms/PressableSurface/index.ts

@@ -1,4 +1,2 @@
-export {
-  default as PressableSurface,
-  PressableSurfaceProps,
-} from './PressableSurface';
+export { default as PressableSurface } from './PressableSurface';
+export type { PressableSurfaceProps } from './PressableSurface';

package/src/components/atoms/ProgressBar/index.ts

@@ -1 +1,2 @@
-export { default as ProgressBar, ProgressBarProps } from './ProgressBar';
+export { default as ProgressBar } from './ProgressBar';
+export type { ProgressBarProps } from './ProgressBar';

package/src/components/atoms/RadioButton/index.ts

@@ -1 +1,2 @@
-export { default as RadioButton, RadioButtonProps } from './RadioButton';
+export { default as RadioButton } from './RadioButton';
+export type { RadioButtonProps } from './RadioButton';

package/src/components/atoms/Switch/index.ts

@@ -1 +1,2 @@
-export { default as Switch, SwitchProps } from './Switch';
+export { default as Switch } from './Switch';
+export type { SwitchProps } from './Switch';

package/src/components/atoms/Tag/index.ts

@@ -1 +1,2 @@
-export { default as Tag, TagProps } from './Tag';
+export { default as Tag } from './Tag';
+export type { TagProps } from './Tag';

package/src/components/atoms/Text/index.ts

@@ -1 +1,2 @@
-export { default as Text, TextProps } from './Text';
+export { default as Text } from './Text';
+export type { TextProps } from './Text';

package/src/components/molecules/Calendar/index.ts

@@ -1,5 +1,5 @@
-export {
-  default as Calendar,
+export { default as Calendar } from './Calendar';
+export type {
   CalendarProps,
   SelectionType,
   DateRange,

package/src/components/molecules/DatePicker/index.ts

@@ -1 +1,2 @@
-export { default as DatePicker, DatePickerProps } from './DatePicker';
+export { default as DatePicker } from './DatePicker';
+export type { DatePickerProps } from './DatePicker';

package/src/components/molecules/DateTimePicker/index.ts

@@ -1,4 +1,2 @@
-export {
-  default as DateTimePicker,
-  DateTimePickerProps,
-} from './DateTimePicker';
+export { default as DateTimePicker } from './DateTimePicker';
+export type { DateTimePickerProps } from './DateTimePicker';

package/src/components/molecules/DateTimeSelector/index.ts

@@ -1,5 +1,5 @@
-export {
-  default as DateTimeSelector,
+export { default as DateTimeSelector } from './DateTimeSelector';
+export type {
   DateTimeSelectorProps,
   DateTimeSelectorMode,
 } from './DateTimeSelector';

package/src/components/molecules/Grid/functions.ts

@@ -1,9 +1,5 @@
-import {
-  extractNumbersFromString,
-  GridSpacing,
-  PaddingPosition,
-  Spacing,
-} from '@tecsinapse/react-core';
+import { GridSpacing, PaddingPosition, Spacing } from '@tecsinapse/react-core';
+import { extractNumbersFromString } from '../../../utils';
 
 export const getGridItemPadding = (
   pos: PaddingPosition,

package/src/components/molecules/IconTextButton/IconComponent.tsx

@@ -1,10 +1,6 @@
-import {
-  ButtonSizeType,
-  FontColor,
-  Icon,
-  IconProps,
-} from '@tecsinapse/react-core';
+import { ButtonSizeType, FontColor, IconProps } from '@tecsinapse/react-core';
 import React, { FC } from 'react';
+import { Icon } from '../../atoms/Icon';
 
 interface IconComponentProps {
   iconProps?: IconProps;

package/src/components/molecules/IconTextButton/index.ts

@@ -1,2 +1,5 @@
 export { default as IconComponent } from './IconComponent';
-export { IconPositionOptions, IconTextButtonProps } from './IconTextButton';
+export type {
+  IconPositionOptions,
+  IconTextButtonProps,
+} from './IconTextButton';

package/src/components/molecules/LabeledSwitch/index.ts

@@ -1 +1 @@
-export { LabeledSwitchProps, LabelPositionOptions } from './LabeledSwitch';
+export type { LabeledSwitchProps, LabelPositionOptions } from './LabeledSwitch';

package/src/components/molecules/Snackbar/Snackbar.tsx

@@ -31,7 +31,7 @@ export interface SnackbarProps {
   style?: StyleProp<ViewStyle>;
 }
 
-export const Snackbar: React.FC<SnackbarProps> = ({
+const Snackbar: React.FC<SnackbarProps> = ({
   children,
   open = true,
   onClose,

package/src/components/molecules/Snackbar/index.ts

@@ -1 +1,2 @@
-export { default as Snackbar, SnackbarProps } from './Snackbar';
+export { default as Snackbar } from './Snackbar';
+export type { SnackbarProps } from './Snackbar';

package/src/components/molecules/TextArea/index.ts

@@ -1,2 +1,3 @@
-export { default as TextArea, TextAreaProps } from './TextArea';
+export { default as TextArea } from './TextArea';
+export type { TextAreaProps } from './TextArea';
 export { TextAreaInputBase } from './styled';