@tecsinapse/react-core 1.21.1-beta.7 → 1.21.1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/src/hooks/useDebouncedState.ts

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

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

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;