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

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

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

package/src/components/molecules/InputPassword/InputPasswordIcon.tsx

@@ -1,29 +0,0 @@
-import React, { FC } from 'react';
-import { ButtonProps } from '../../atoms/Button';
-import { Icon } from '../../atoms/Icon';
-import { StyledPasswordButtonIcon } from './styled';
-
-interface InputPasswordIconProps extends ButtonProps {
-  revealed: boolean;
-  onChangeState: (revealed: boolean) => void;
-}
-
-const InputPasswordIcon: FC<InputPasswordIconProps> = ({
-  revealed,
-  onChangeState,
-  ...rest
-}) => {
-  const icon = revealed ? 'eye-outline' : 'eye-off-outline';
-  return (
-    <StyledPasswordButtonIcon
-      {...rest}
-      variant="text"
-      size="small"
-      onPress={() => onChangeState(!revealed)}
-    >
-      <Icon name={icon} type="ionicon" size="centi" />
-    </StyledPasswordButtonIcon>
-  );
-};
-
-export default InputPasswordIcon;

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

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

package/src/components/molecules/InputPassword/styled.ts

@@ -1,7 +0,0 @@
-import styled from '@emotion/native';
-import { StyleProps } from '../../../types/defaults';
-import { Button } from '../../atoms/Button';
-
-export const StyledPasswordButtonIcon = styled(Button)<Partial<StyleProps>>`
-  padding: ${({ theme }) => theme.spacing.centi};
-`;

package/src/components/molecules/LabeledSwitch/LabeledSwitch.tsx

@@ -1,9 +0,0 @@
-import { SwitchProps } from '../../atoms/Switch';
-
-export type LabelPositionOptions = 'left' | 'right';
-
-export interface LabeledSwitchProps extends SwitchProps {
-  label: string;
-  labelPosition?: LabelPositionOptions;
-  pressableLabel?: boolean;
-}

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

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

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

@@ -1,134 +0,0 @@
-import React from 'react';
-import { Animated, StyleProp, ViewStyle } from 'react-native';
-import { ColorGradationType, ColorType } from '../../../types/defaults';
-import { Icon, IconProps } from '../../atoms/Icon';
-import {
-  ContentContainer,
-  DismissContainer,
-  IconContainer,
-  SnackbarContainer,
-  StyledContainerFlexRow,
-  StyledProgressBar,
-  TextContainer,
-} from './styled';
-
-export interface SnackbarProps {
-  colorVariant?: ColorType;
-  colorTone?: ColorGradationType;
-  open: boolean;
-  /** Close callback */
-  onClose?: () => void;
-  /** Snackbar is closable */
-  dismissable?: boolean;
-  /** Time in miliseconds for auto hide */
-  timeout?: number;
-  leftIcon?: IconProps;
-  /** Properties for close icon */
-  rightIcon?: Omit<IconProps, 'name' | 'type'>;
-  anchor?: 'top' | 'bottom';
-  /** Distance from anchorage (results in px) */
-  anchorDistance?: number;
-  style?: StyleProp<ViewStyle>;
-}
-
-const Snackbar: React.FC<SnackbarProps> = ({
-  children,
-  open = true,
-  onClose,
-  dismissable = false,
-  timeout = undefined,
-  leftIcon,
-  colorTone = 'xlight',
-  colorVariant = 'primary',
-  rightIcon = { colorTone: 'medium', colorVariant: 'primary' },
-  anchor = 'bottom',
-  anchorDistance,
-  style,
-}) => {
-  const fadeAnim = React.useRef(new Animated.Value(0)).current;
-  const duration = 500;
-
-  const fadeIn = () => {
-    Animated.timing(fadeAnim, {
-      toValue: 1,
-      useNativeDriver: true,
-      duration,
-    }).start(() => timeout && fadeOut());
-  };
-
-  const fadeOut = () => {
-    Animated.timing(fadeAnim, {
-      toValue: 0,
-      useNativeDriver: true,
-      duration,
-      delay: timeout ? timeout - duration : 0,
-    }).start();
-  };
-
-  React.useEffect(() => {
-    if (open) {
-      fadeIn();
-    }
-    if (open && timeout) {
-      setTimeout(() => {
-        onClose?.();
-      }, timeout + duration);
-    }
-  }, [open, timeout]);
-
-  return (
-    <SnackbarContainer
-      colorVariant={colorVariant}
-      colorTone={colorTone}
-      elevated
-      anchor={anchor}
-      anchorDistance={anchorDistance}
-      visible={open}
-      style={[{ opacity: fadeAnim as unknown as number }, style]}
-      timeout={timeout}
-    >
-      <StyledContainerFlexRow>
-        <ContentContainer>
-          {leftIcon && (
-            <IconContainer>
-              <Icon {...leftIcon} size="centi" />
-            </IconContainer>
-          )}
-          <TextContainer>{children}</TextContainer>
-        </ContentContainer>
-        {dismissable && (
-          <DismissContainer
-            effect="none"
-            onPress={() => {
-              fadeOut();
-              setTimeout(() => {
-                fadeAnim.setValue(0);
-                onClose?.();
-              }, duration);
-            }}
-          >
-            <Icon
-              {...rightIcon}
-              size="centi"
-              name="close"
-              type="material-community"
-            />
-          </DismissContainer>
-        )}
-      </StyledContainerFlexRow>
-      {timeout && open && (
-        <StyledProgressBar
-          valueNow={0}
-          valueMax={100}
-          valueMin={0}
-          animate={true}
-          color={colorVariant}
-          colorTone="medium"
-          animationParameters={{ direction: 'left', duration: timeout }}
-        />
-      )}
-    </SnackbarContainer>
-  );
-};
-
-export default Snackbar;

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

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

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

@@ -1,103 +0,0 @@
-import styled, { css } from '@emotion/native';
-import { View } from 'react-native';
-import { StyleProps } from '../../../types/defaults';
-import { RFValue } from '../../../utils';
-import { Paper } from '../../atoms/Paper';
-import { PressableSurface } from '../../atoms/PressableSurface';
-import { ProgressBar } from '../../atoms/ProgressBar';
-import { SnackbarProps } from './Snackbar';
-
-const baseStyles = ({
-  theme,
-  colorTone = 'xlight',
-  colorVariant = 'primary',
-  visible,
-}: StyleProps & Partial<SnackbarProps> & { visible: boolean }) => css`
-  padding: 0;
-  border-radius: ${theme.borderRadius.mili};
-  background-color: ${theme.color[colorVariant][colorTone]};
-  position: absolute;
-  z-index: ${theme.zIndex.modal};
-  display: ${visible ? 'flex' : 'none'};
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: stretch;
-`;
-
-const anchorTop = ({
-  theme,
-  anchor,
-  anchorDistance,
-}: Partial<SnackbarProps> & StyleProps) => {
-  return (
-    anchor === 'top' &&
-    css`
-      top: ${anchorDistance
-        ? `${RFValue(anchorDistance)}px`
-        : theme.spacing.deca};
-    `
-  );
-};
-
-const anchorBottom = ({
-  theme,
-  anchor,
-  anchorDistance,
-}: Partial<SnackbarProps> & StyleProps) => {
-  return (
-    anchor === 'bottom' &&
-    css`
-      bottom: ${anchorDistance
-        ? `${RFValue(anchorDistance)}px`
-        : theme.spacing.deca};
-    `
-  );
-};
-
-export const SnackbarContainer = styled(Paper)<
-  Partial<SnackbarProps & StyleProps> & { visible: boolean }
->(
-  props => css`
-    ${baseStyles(props)}
-    ${anchorBottom(props)}
-    ${anchorTop(props)}
-  `
-);
-
-export const ContentContainer = styled(View)`
-  flex-direction: row;
-  display: flex;
-  align-items: center;
-  flex-shrink: 1;
-`;
-
-export const IconContainer = styled(View)<Partial<StyleProps>>`
-  flex-direction: row;
-  display: flex;
-  align-items: center;
-  margin-right: ${({ theme }) => theme.spacing.mili};
-`;
-
-export const DismissContainer = styled(PressableSurface)<Partial<StyleProps>>`
-  flex-direction: row;
-  display: flex;
-  align-items: center;
-  margin-left: ${({ theme }) => theme.spacing.mili};
-`;
-
-export const StyledProgressBar = styled(ProgressBar)<Partial<StyleProps>>`
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-`;
-
-export const StyledContainerFlexRow = styled(View)<Partial<StyleProps>>`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  padding: ${({ theme }) => theme.spacing.mili};
-`;
-
-export const TextContainer = styled(View)`
-  display: flex;
-  flex-shrink: 1;
-`;

package/src/components/molecules/TextArea/TextArea.tsx

@@ -1,97 +0,0 @@
-import React, { FC } from 'react';
-import { View } from 'react-native';
-import { FontStackType, FontWeightType } from '@tecsinapse/react-core';
-import {
-  Hint,
-  InputContainerProps,
-  InputElementProps,
-} from '../../atoms/Input';
-import { Text, TextProps } from '../../atoms/Text';
-import { StyledInputContainer } from './styled';
-
-export interface TextAreaProps
-  extends Omit<InputElementProps, 'style' | 'multiline' | 'value'>,
-    InputContainerProps {
-  inputFontStack?: FontStackType;
-  inputFontWeight?: FontWeightType;
-  maxCharCount?: number;
-  value: string;
-  // Omit below
-  TextComponent?: FC<TextProps>;
-  focused?: boolean;
-}
-
-const TextArea: FC<TextAreaProps> = ({
-  label,
-  labelColor,
-  labelColorVariant,
-  labelColorTone,
-  labelTypography,
-  labelStack,
-  labelWeight,
-  leftComponent,
-  rightComponent,
-  disabled,
-  style,
-  borderColor,
-  borderColorGradation,
-  inputContainerStyle,
-  variant = 'default',
-  hintComponent,
-  hint,
-  TextComponent = Text,
-  focused,
-  children,
-  maxLength: _maxLenght,
-  value: _value,
-}) => {
-  let length = _value.length;
-  const maxLength = _maxLenght;
-  if (maxLength && length > maxLength) {
-    length = maxLength;
-  }
-
-  const _hint = hintComponent || (
-    <Hint TextComponent={TextComponent} text={hint} variant={variant} />
-  );
-
-  return (
-    <View style={style}>
-      <StyledInputContainer
-        label={label}
-        labelColor={labelColor}
-        labelColorVariant={labelColorVariant}
-        labelColorTone={labelColorTone}
-        labelTypography={labelTypography}
-        labelStack={labelStack}
-        labelWeight={labelWeight}
-        LabelComponent={TextComponent}
-        leftComponent={leftComponent}
-        rightComponent={rightComponent}
-        borderColor={borderColor}
-        borderColorGradation={borderColorGradation}
-        inputContainerStyle={inputContainerStyle}
-        focused={focused}
-        disabled={disabled}
-        variant={variant}
-      >
-        {children}
-        {maxLength && (
-          <TextComponent
-            colorVariant={'secondary'}
-            colorTone={'medium'}
-            typography={'label'}
-            fontStack={'default'}
-            fontWeight={'bold'}
-            style={{ textAlign: 'right' }}
-          >
-            {`${length}/${maxLength}`}
-          </TextComponent>
-        )}
-      </StyledInputContainer>
-      {hint && _hint}
-    </View>
-  );
-};
-
-export default TextArea;

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

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

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

@@ -1,22 +0,0 @@
-import styled from '@emotion/native';
-import { StyleProps } from '@tecsinapse/react-core';
-import { extractNumbersFromString, RFValue, RFValueStr } from '../../../utils';
-import { InputContainer, InputElement } from '../../atoms/Input';
-import { TextAreaProps } from './TextArea';
-
-export const StyledInputContainer = styled(InputContainer)<Partial<StyleProps>>`
-  min-height: ${RFValueStr('50px')};
-`;
-
-export const TextAreaInputBase = styled(InputElement)<
-  Partial<TextAreaProps> & Partial<StyleProps>
->`
-  max-height: ${({ theme, numberOfLines }) =>
-    `${RFValue(
-      extractNumbersFromString(theme.typography.h5.lineHeight) *
-        (numberOfLines || 1)
-    )}px`};
-  width: 100%;
-  padding: 0;
-  margin: ${RFValueStr('3px')} 0;
-`;

package/src/hooks/index.ts

@@ -1,2 +0,0 @@
-export { useDebouncedState } from './useDebouncedState';
-export { useTheme } from './useTheme';

package/src/hooks/useDebouncedState.ts

@@ -1,24 +0,0 @@
-import { Dispatch, SetStateAction, useEffect, useRef, useState } from 'react';
-
-/**
- * @param initialState
- * @param timeoutCallback callback to be called after bouncing ends. Should be memoized.
- * @param timeoutMs
- */
-export function useDebouncedState<S>(
-  initialState: S | (() => S),
-  timeoutCallback?: (state: S) => void,
-  timeoutMs = 166
-): [S, Dispatch<SetStateAction<S>>] {
-  const timeoutId = useRef<number>();
-
-  const [state, setState] = useState<S>(initialState);
-
-  useEffect(() => {
-    if (timeoutId.current) clearTimeout(timeoutId.current);
-    if (timeoutCallback)
-      timeoutId.current = setTimeout(() => timeoutCallback(state), timeoutMs);
-  }, [state]);
-
-  return [state, setState];
-}

package/src/hooks/useTheme.ts

@@ -1,4 +0,0 @@
-import { useTheme as useEmotionTheme } from '@emotion/react';
-import { ThemeProp } from '../types/defaults';
-
-export const useTheme = (): ThemeProp => useEmotionTheme() as ThemeProp;

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;