@tecsinapse/react-native-kit 1.22.0 → 1.22.1-beta.2

package/esm/index.d.ts

@@ -1,44 +0,0 @@
-export * from '@tecsinapse/react-core';
-export { Avatar } from './components/atoms/Avatar';
-export { Badge } from './components/atoms/Badge';
-export type { BadgeNativeProps } from './components/atoms/Badge';
-export { BottomNavigator } from './components/atoms/BottomNavigator';
-export type { BottomNavigatorProps } from './components/atoms/BottomNavigator';
-export { Button, Error, Loading, Success } from './components/atoms/Button';
-export type { ButtonNativeProps } from './components/atoms/Button';
-export { GroupButtonOption } from './components/atoms/GroupButton';
-export { Header } from './components/atoms/Header';
-export type { HeaderProps } from './components/atoms/Header';
-export { Input } from './components/atoms/Input';
-export type { InputNativeProps } from './components/atoms/Input';
-export { InputMask } from './components/atoms/InputMask';
-export type { InputMaskNativeProps } from './components/atoms/InputMask';
-export { ModalGroupManager, ModalLifecycleHandler, ModalView, useLazyModalManager, useModalManager, useModalRemoteControl, } from './components/atoms/Modal';
-export type { IBaseModal } from './components/atoms/Modal';
-export { Skeleton } from './components/atoms/Skeleton';
-export type { SkeletonProps } from './components/atoms/Skeleton';
-export { SnappingSlider } from './components/atoms/SnappingSlider';
-export type { SnappingSliderProps } from './components/atoms/SnappingSlider';
-export { Tag } from './components/atoms/Tag';
-export type { TagProps } from './components/atoms/Tag';
-export { Text } from './components/atoms/Text';
-export type { TextNativeProps } from './components/atoms/Text';
-export { TextArea } from './components/atoms/TextArea';
-export type { TextAreaProps } from './components/atoms/TextArea';
-export { Calendar } from './components/molecules/Calendar';
-export { DatePicker } from './components/molecules/DatePicker';
-export type { NativeDatePickerProps } from './components/molecules/DatePicker';
-export { DateTimePicker } from './components/molecules/DateTimePicker';
-export type { NativeDateTimePickerProps } from './components/molecules/DateTimePicker';
-export { DateTimeSelector } from './components/molecules/DateTimeSelector';
-export { IconTextButton } from './components/molecules/IconTextButton';
-export type { NativeIconTextButtonProps } from './components/molecules/IconTextButton';
-export { InputPassword } from './components/molecules/InputPassword';
-export type { InputPasswordNativeProps } from './components/molecules/InputPassword';
-export { LabeledSwitch } from './components/molecules/LabeledSwitch';
-export type { LabeledSwitchNativeProps } from './components/molecules/LabeledSwitch';
-export { Select } from './components/molecules/Select';
-export type { SelectNativeProps } from './components/molecules/Select';
-export { Snackbar } from './components/molecules/Snackbar';
-export type { SnackbarNativeProps } from './components/molecules/Snackbar';
-export { Grid, GridItem } from './components/molecules/Grid';

package/esm/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/esm/utils/date.d.ts

@@ -1 +0,0 @@
-export declare const getLocale: () => Locale;

package/esm/utils/date.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"date.js","sources":["../../src/utils/date.ts"],"sourcesContent":["import { NativeModules, Platform } from 'react-native';\nimport * as dateFnsLocales from 'date-fns/locale';\n\nexport const getLocale = (): Locale => {\n  let locale: string;\n  if (Platform.OS === 'ios') {\n    locale =\n      NativeModules.SettingsManager.settings.AppleLocale ||\n      NativeModules.SettingsManager.settings.AppleLanguages[0];\n  } else {\n    locale = NativeModules.I18nManager.localeIdentifier;\n  }\n\n  const code = locale.replace('_', '');\n\n  return dateFnsLocales[code];\n};\n"],"names":[],"mappings":";;;AAGO,MAAM,YAAY,MAAc;AACrC,EAAI,IAAA,MAAA,CAAA;AACJ,EAAI,IAAA,QAAA,CAAS,OAAO,KAAO,EAAA;AACzB,IAAA,MAAA,GACE,cAAc,eAAgB,CAAA,QAAA,CAAS,eACvC,aAAc,CAAA,eAAA,CAAgB,SAAS,cAAe,CAAA,CAAA,CAAA,CAAA;AAAA,GACnD,MAAA;AACL,IAAA,MAAA,GAAS,cAAc,WAAY,CAAA,gBAAA,CAAA;AAAA,GACrC;AAEA,EAAA,MAAM,IAAO,GAAA,MAAA,CAAO,OAAQ,CAAA,GAAA,EAAK,EAAE,CAAA,CAAA;AAEnC,EAAA,OAAO,cAAe,CAAA,IAAA,CAAA,CAAA;AACxB;;;;"}

package/rollup.config.js

@@ -1,39 +0,0 @@
-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-linear-gradient',
-      '@emotion/native',
-      '@emotion/react',
-      '@tecsinapse/react-core',
-      'react-native-vector-icons',
-      'react-native-safe-area-context',
-      'uuid',
-      'date-fns/locale',
-    ],
-  },
-];

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

@@ -1,9 +0,0 @@
-import { Avatar as AvatarCore, AvatarProps } from '@tecsinapse/react-core';
-import React from 'react';
-import { Text } from '../Text';
-
-const Avatar: React.FC<AvatarProps> = props => {
-  return <AvatarCore {...props} TextComponent={Text} />;
-};
-
-export default Avatar;

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

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

package/src/components/atoms/Badge/Badge.tsx

@@ -1,34 +0,0 @@
-import React, { FC } from 'react';
-import {
-  BadgeProps,
-  Badge as BadgeCore,
-  FontColorType,
-} from '@tecsinapse/react-core';
-import { Text } from '../Text';
-
-export interface BadgeNativeProps extends Omit<BadgeProps, 'value'> {
-  fontColor?: FontColorType;
-  value: string | number;
-}
-
-const Badge: FC<BadgeNativeProps> = ({
-  children,
-  fontColor = 'light',
-  value,
-  ...props
-}) => {
-  return (
-    <BadgeCore
-      {...props}
-      value={
-        <Text fontColor={fontColor} fontWeight={'bold'} typography={'label'}>
-          {value}
-        </Text>
-      }
-    >
-      {children}
-    </BadgeCore>
-  );
-};
-
-export default Badge;

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

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

package/src/components/atoms/BottomNavigator/BottomNavigator.tsx

@@ -1,58 +0,0 @@
-import * as React from 'react';
-import { ViewProps } from 'react-native';
-import { StyledView, TabContainer } from './styled';
-import Item, { BottomNavigatorItemProps } from './Item';
-import { Text } from '../Text';
-
-export interface BottomNavigatorProps<T extends string | number | symbol>
-  extends ViewProps {
-  selected: T;
-  onSelect: (value: T) => void | never;
-  children:
-    | React.ReactElement<BottomNavigatorItemProps<T>>
-    | React.ReactElement<BottomNavigatorItemProps<T>>[];
-}
-
-function BottomNavigator<T extends string | number | symbol>({
-  selected,
-  onSelect,
-  children,
-  ...rest
-}: BottomNavigatorProps<T>): JSX.Element {
-  return (
-    <StyledView {...rest}>
-      {React.Children.map(children, child => {
-        const { value, label, labelProps, labelElement } = (
-          child as React.ReactElement<BottomNavigatorItemProps<T>>
-        ).props;
-        const isSelected = value == selected;
-
-        return (
-          <TabContainer selected={isSelected} onPress={() => onSelect(value)}>
-            {React.cloneElement(child as React.ReactElement, {
-              _selected: isSelected,
-            })}
-            {label && !labelElement && (
-              <Text
-                colorVariant={
-                  labelProps?.colorVariant || isSelected
-                    ? 'primary'
-                    : 'secondary'
-                }
-                typography={labelProps?.typography || 'sub'}
-                {...labelProps}
-              >
-                {label}
-              </Text>
-            )}
-            {labelElement && labelElement}
-          </TabContainer>
-        );
-      })}
-    </StyledView>
-  );
-}
-
-BottomNavigator.Item = Item;
-
-export default BottomNavigator;

package/src/components/atoms/BottomNavigator/Item.tsx

@@ -1,55 +0,0 @@
-import * as React from 'react';
-import { Icon, IconProps } from '@tecsinapse/react-core';
-import { TabContent, CustomTabContent } from './styled';
-import { ViewProps } from 'react-native';
-import { TextNativeProps } from '../Text';
-
-type ValueType = string | number | symbol;
-
-export interface BottomNavigatorItemProps<T extends ValueType>
-  extends Omit<ViewProps, 'children'> {
-  _selected?: boolean;
-  value: T;
-  icon: IconProps;
-  label?: string;
-  labelProps?: TextNativeProps;
-  labelElement?: React.ReactNode | React.ReactNode[];
-  children: React.ReactNode | React.ReactNode[];
-}
-
-type ItemPropsWithIcon<T extends ValueType> = Omit<
-  BottomNavigatorItemProps<T>,
-  'children'
->;
-
-type ItemPropsWithChildren<T extends ValueType> = Omit<
-  BottomNavigatorItemProps<T>,
-  'icon' | 'label' | 'labelElement' | 'labelProps'
->;
-
-function Item<T extends ValueType>(props: ItemPropsWithChildren<T>);
-function Item<T extends ValueType>(props: ItemPropsWithIcon<T>);
-function Item<T extends ValueType>({
-  _selected,
-  icon,
-  children,
-  ...rest
-}: Partial<BottomNavigatorItemProps<T>>): JSX.Element {
-  const styledButtonStyle = _selected
-    ? undefined
-    : { backgroundColor: 'transparent' };
-
-  const iconColorVariant = _selected ? 'primary' : 'secondary';
-
-  if (icon) {
-    return (
-      <TabContent style={styledButtonStyle} {...rest}>
-        <Icon colorVariant={iconColorVariant} size={'centi'} {...icon} />
-      </TabContent>
-    );
-  } else {
-    return <CustomTabContent>{children}</CustomTabContent>;
-  }
-}
-
-export default Item;

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

@@ -1,4 +0,0 @@
-export { default as BottomNavigator } from './BottomNavigator';
-export { BottomNavigatorProps } from './BottomNavigator';
-
-export type { BottomNavigatorItemProps } from './Item';

package/src/components/atoms/BottomNavigator/styled.ts

@@ -1,34 +0,0 @@
-import styled from '@emotion/native';
-import { RFValueStr, StyleProps } from '@tecsinapse/react-core';
-import { PressableProps, ViewProps } from 'react-native';
-
-export const StyledView = styled.View<ViewProps & Partial<StyleProps>>`
-  flex-direction: row;
-  justify-content: space-between;
-  padding-horizontal: ${({ theme }) => theme.spacing.deca};
-  padding-bottom: ${({ theme }) => theme.spacing.kilo};
-  background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};
-`;
-
-export const TabContainer = styled.Pressable<
-  { selected: boolean } & PressableProps & Partial<StyleProps>
->`
-  flex: 1;
-  margin-horizontal: ${({ theme }) => theme.spacing.mili};
-  padding-top: ${({ theme }) => theme.spacing.deca};
-  border-top-width: ${({ selected }) => (selected ? RFValueStr('2px') : 0)};
-  border-color: ${({ theme }) => theme.color.primary.medium};
-  align-items: center;
-  justify-content: flex-end;
-`;
-
-export const TabContent = styled.View<ViewProps & Partial<StyleProps>>`
-  aspect-ratio: 1;
-  justify-content: center;
-  align-items: center;
-  min-height: ${RFValueStr('48px')};
-  background-color: ${({ theme }) => theme.color.primary.xlight};
-  border-radius: ${({ theme }) => theme.borderRadius['mili']};
-`;
-
-export const CustomTabContent = styled.View<ViewProps & Partial<StyleProps>>``;

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

@@ -1,23 +0,0 @@
-import { Button as ButtonCore, ButtonProps } from '@tecsinapse/react-core';
-import React, { FC, useCallback } from 'react';
-import { Keyboard } from 'react-native';
-
-export type ButtonNativeProps = ButtonProps & {
-  autoDismissKeyboard?: boolean;
-};
-
-export const Button: FC<ButtonNativeProps> = ({
-  autoDismissKeyboard = true,
-  onPress,
-  ...others
-}) => {
-  const handleOnPress = useCallback(
-    event => {
-      autoDismissKeyboard && Keyboard.dismiss();
-      onPress?.(event);
-    },
-    [onPress]
-  );
-
-  return <ButtonCore {...others} onPress={handleOnPress} />;
-};

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

@@ -1,9 +0,0 @@
-import { ButtonStateProps, Error as CoreError } from '@tecsinapse/react-core';
-import React, { FC } from 'react';
-import { Text } from '../../Text';
-
-const Error: FC<ButtonStateProps> = props => {
-  return <CoreError {...props} textComponent={Text} />;
-};
-
-export default Error;

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

@@ -1,12 +0,0 @@
-import {
-  ButtonStateProps,
-  Loading as CoreLoading,
-} from '@tecsinapse/react-core';
-import React, { FC } from 'react';
-import { Text } from '../../Text';
-
-const Loading: FC<ButtonStateProps> = props => {
-  return <CoreLoading {...props} textComponent={Text} />;
-};
-
-export default Loading;

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

@@ -1,12 +0,0 @@
-import {
-  ButtonStateProps,
-  Success as CoreSuccess,
-} from '@tecsinapse/react-core';
-import React, { FC } from 'react';
-import { Text } from '../../Text';
-
-const Success: FC<ButtonStateProps> = props => {
-  return <CoreSuccess {...props} textComponent={Text} />;
-};
-
-export default Success;

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

@@ -1,3 +0,0 @@
-export { default as Error } from './Error';
-export { default as Loading } from './Loading';
-export { default as Success } from './Success';

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

@@ -1,3 +0,0 @@
-export { Button } from './Button';
-export type { ButtonNativeProps } from './Button';
-export { Error, Loading, Success } from './States';

package/src/components/atoms/GroupButton/GroupButtonOption.tsx

@@ -1,12 +0,0 @@
-import {
-  GroupButtonOption as CoreGroupButtonOption,
-  GroupButtonOptionProps,
-} from '@tecsinapse/react-core';
-import React from 'react';
-import { Text } from '../Text';
-
-const GroupButtonOption = (props: GroupButtonOptionProps): JSX.Element => {
-  return <CoreGroupButtonOption {...props} TextComponent={Text} />;
-};
-
-export default GroupButtonOption;

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

@@ -1 +0,0 @@
-export { default as GroupButtonOption } from './GroupButtonOption';

package/src/components/atoms/Header/Header.tsx

@@ -1,52 +0,0 @@
-import { ViewProps } from 'react-native';
-import { StyledView, FloatingButton, Dummy } from './styled';
-import { ButtonProps, Icon, IconProps } from '@tecsinapse/react-core';
-import * as React from 'react';
-
-type Attachable = ButtonProps & {
-  icon: IconProps;
-};
-
-export interface HeaderProps extends ViewProps {
-  rightButton?: Attachable;
-  leftButton?: Attachable;
-}
-
-const Header: React.FC<HeaderProps> = ({
-  rightButton,
-  leftButton,
-  children,
-  ...rest
-}) => {
-  return (
-    <StyledView {...rest}>
-      {leftButton ? (
-        <FloatingButton
-          {...leftButton}
-          variant={leftButton?.variant || 'filled'}
-          color={leftButton?.color || 'primary'}
-          size={leftButton?.size || 'small'}
-        >
-          {leftButton?.icon && <Icon {...leftButton?.icon} />}
-        </FloatingButton>
-      ) : (
-        <Dummy disabled />
-      )}
-      {children}
-      {rightButton ? (
-        <FloatingButton
-          {...rightButton}
-          variant={rightButton?.variant || 'filled'}
-          color={rightButton?.color || 'primary'}
-          size={rightButton?.size || 'small'}
-        >
-          {rightButton?.icon && <Icon {...rightButton?.icon} />}
-        </FloatingButton>
-      ) : (
-        <Dummy disabled />
-      )}
-    </StyledView>
-  );
-};
-
-export default Header;

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

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

package/src/components/atoms/Header/styled.ts

@@ -1,18 +0,0 @@
-import styled from '@emotion/native';
-import { Button, ButtonProps, StyleProps } from '@tecsinapse/react-core';
-
-export const StyledView = styled.View<Partial<StyleProps>>`
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  padding: ${({ theme }) => theme.spacing.deca};
-  width: 100%;
-`;
-
-export const FloatingButton = styled(Button)<ButtonProps & Partial<StyleProps>>`
-  aspect-ratio: 1;
-`;
-
-export const Dummy = styled(FloatingButton)`
-  background-color: rgba(0, 0, 0, 0);
-`;

package/src/components/atoms/Input/Input.tsx

@@ -1,107 +0,0 @@
-import {
-  FontStackType,
-  FontWeightType,
-  Hint,
-  InputContainer,
-  InputContainerProps,
-  InputElementProps,
-  RFValue,
-  useInputFocus,
-} from '@tecsinapse/react-core';
-import React from 'react';
-import { StyleProp, TextInput, View, ViewStyle } from 'react-native';
-import { Text } from '../Text';
-import { StyledNativeInput } from './styled';
-
-export interface InputNativeProps
-  extends Omit<InputElementProps, 'style'>,
-    InputContainerProps {
-  inputFontStack?: FontStackType;
-  inputFontWeight?: FontWeightType;
-}
-
-const Input = React.forwardRef<TextInput, InputNativeProps>(
-  (
-    {
-      label,
-      labelColor,
-      labelColorVariant,
-      labelColorTone,
-      labelTypography,
-      labelStack,
-      labelWeight,
-      leftComponent,
-      rightComponent,
-      disabled,
-      borderColor,
-      borderColorGradation,
-      inputFontStack = 'default',
-      inputFontWeight = 'bold',
-      inputContainerStyle,
-      variant = 'default',
-      hintComponent,
-      hint,
-      onFocus,
-      onBlur,
-      value,
-      placeholder,
-      ...rest
-    },
-    ref
-  ) => {
-    const _hint = hintComponent || (
-      <Hint TextComponent={Text} text={hint} variant={variant} />
-    );
-    const { focused, handleBlur, handleFocus } = useInputFocus(
-      onFocus,
-      onBlur,
-      !disabled
-    );
-
-    const internalStyle: StyleProp<ViewStyle> = {
-      minHeight: RFValue(50),
-      ...{ inputContainerStyle },
-    };
-    const onlyLabel = label && !placeholder;
-
-    return (
-      <View>
-        <InputContainer
-          label={value ? label : undefined}
-          labelColor={labelColor}
-          labelColorVariant={labelColorVariant}
-          labelColorTone={labelColorTone}
-          labelTypography={labelTypography}
-          labelStack={labelStack}
-          labelWeight={labelWeight}
-          LabelComponent={Text}
-          leftComponent={leftComponent}
-          rightComponent={rightComponent}
-          borderColor={borderColor}
-          borderColorGradation={borderColorGradation}
-          inputContainerStyle={internalStyle}
-          focused={focused}
-          disabled={disabled}
-          variant={variant}
-        >
-          <StyledNativeInput
-            {...rest}
-            placeholder={onlyLabel ? label : placeholder}
-            value={value}
-            ref={ref}
-            fontStack={inputFontStack}
-            fontWeight={inputFontWeight}
-            disabled={disabled}
-            onFocus={handleFocus}
-            onBlur={handleBlur}
-          />
-        </InputContainer>
-        {hint && _hint}
-      </View>
-    );
-  }
-);
-
-Input.displayName = 'Input';
-
-export default Input;

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

@@ -1,2 +0,0 @@
-export { default as Input } from './Input';
-export type { InputNativeProps } from './Input';

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

@@ -1,16 +0,0 @@
-import styled from '@emotion/native';
-import { InputElement, StyleProps } from '@tecsinapse/react-core';
-import { Font, fontStyles } from '../Text/styled';
-import { InputNativeProps } from './Input';
-
-const StyledNativeInputBase = styled(InputElement)<
-  Partial<InputNativeProps> & Partial<StyleProps>
->`
-  height: ${({ theme }) => theme.typography.h5.lineHeight};
-  width: 100%;
-  padding: 0;
-`;
-
-export const StyledNativeInput = styled(StyledNativeInputBase)<
-  Font & Partial<InputNativeProps> & Partial<StyleProps>
->(fontStyles);