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

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

@@ -1,130 +0,0 @@
-import styled, { css } from '@emotion/native';
-import { TextInput } from 'react-native';
-import { InputElementProps } from '.';
-import { StyleProps } from '../../../types/defaults';
-import { RFValueStr } from '../../../utils/ResponsiveFontSize';
-import { Icon } from '../Icon';
-import { InputContainerProps } from './InputContainer/InputContainer';
-
-const leftIconStyles = ({
-  leftComponent,
-  theme,
-}: Partial<InputContainerProps> & StyleProps) =>
-  !leftComponent &&
-  css`
-    padding-left: ${theme.spacing.centi};
-  `;
-
-const rightIconStyles = ({
-  rightComponent,
-  theme,
-}: Partial<InputContainerProps> & StyleProps) =>
-  !rightComponent &&
-  css`
-    padding-right: ${theme.spacing.centi};
-  `;
-
-const disabledContainerStyles = ({
-  disabled,
-}: Partial<InputContainerProps> & StyleProps) =>
-  disabled &&
-  css`
-    background-color: transparent;
-  `;
-
-export const disabledInputStyles = ({
-  disabled,
-  theme,
-}: Partial<InputContainerProps> & Partial<StyleProps>) =>
-  disabled &&
-  css`
-    color: ${theme?.color.secondary.light};
-  `;
-
-const focusedStyles = ({
-  focused,
-  borderColor = 'secondary',
-  theme,
-}: Partial<InputContainerProps> & StyleProps) =>
-  focused &&
-  css`
-    border-width: ${theme.borderWidth.nano};
-    border-color: ${theme.color[borderColor].dark};
-  `;
-
-export const StyledIconContent = styled.View<Partial<StyleProps>>`
-  z-index: ${({ theme }) => theme.zIndex.default};
-  flex-direction: row;
-  align-items: center;
-`;
-
-export const StyledInputContainer = styled.View<
-  Partial<InputContainerProps> & Partial<StyleProps>
->`
-  flex-direction: row;
-  align-items: center;
-  min-height: ${RFValueStr('44px')};
-`;
-
-export const StyledInputElementBase = styled(TextInput)<
-  InputElementProps & Partial<StyleProps>
->`
-  font-family: ${({ theme }) => `'${theme.font.stack.default}'`};
-  font-size: ${({ theme }) => theme.typography.base.fontSize};
-  font-weight: ${({ theme }) => theme.font.weight.bold};
-  color: ${({ theme }) => theme.font.color.dark};
-`;
-
-export const StyledLabelContainer = styled.View<
-  Partial<InputContainerProps> & Partial<StyleProps>
->(
-  props => css`
-    flex: 1;
-    padding: ${props.theme.spacing.micro} 0;
-    ${leftIconStyles(props)}
-    ${rightIconStyles(props)}
-  `
-);
-
-const StyledBorderKeeperBase = styled.View<
-  Partial<InputContainerProps> & Partial<StyleProps>
->`
-  background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};
-  border-color: ${({
-    theme,
-    borderColor = 'secondary',
-    borderColorGradation = 'light',
-  }) => theme.color[borderColor][borderColorGradation]};
-  border-radius: ${({ theme }) => theme.borderRadius.mili};
-  border-width: ${({ theme }) => theme.borderWidth.pico};
-  position: absolute;
-  width: 100%;
-  height: 100%;
-`;
-
-export const StyledBorderKeeper = styled(StyledBorderKeeperBase)<
-  Partial<StyleProps>
->(
-  props => css`
-    ${focusedStyles(props)}
-    ${disabledContainerStyles(props)}
-  `
-);
-
-export const StyledInputElement = styled(StyledInputElementBase)<
-  InputElementProps & Partial<StyleProps>
->(
-  props => css`
-    ${disabledInputStyles(props)}
-  `
-);
-
-export const StyledHintContainer = styled.View<Partial<StyleProps>>`
-  margin-top: ${({ theme }) => theme.spacing.micro};
-  flex-direction: row;
-  align-items: center;
-`;
-
-export const StyledHintIcon = styled(Icon)<Partial<StyleProps>>`
-  margin-right: ${({ theme }) => theme.spacing.micro};
-`;

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

@@ -1,27 +0,0 @@
-import styled from '@emotion/native';
-import { Story } from '@storybook/react';
-import React from 'react';
-import Paper, { PaperProps } from './Paper';
-import { StyleProps } from '../../../types/defaults';
-
-export default {
-  title: 'Hybrid/Paper',
-  component: Paper,
-};
-
-const Template: Story<PaperProps> = args => {
-  return <StyledPaper {...args} />;
-};
-
-export const Base = Template.bind({});
-
-const StyledPaper = styled(Paper)<Partial<StyleProps>>`
-  border-color: ${({ theme }) => theme.color.secondary.light};
-  border-width: ${({ theme }) => theme.borderWidth.pico};
-  width: 250px;
-  height: 100px;
-`;
-
-Base.args = {
-  elevated: false,
-};

package/src/components/atoms/Paper/Paper.tsx

@@ -1,21 +0,0 @@
-import React, { FC } from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
-import { StyledPaper } from './styled';
-
-export interface PaperProps {
-  /** Creates elevation shadow */
-  elevated?: boolean;
-  style?: StyleProp<ViewStyle>;
-}
-
-const Paper: FC<PaperProps> = ({
-  children,
-  elevated = false,
-  ...rest
-}): JSX.Element => (
-  <StyledPaper {...rest} elevated={elevated}>
-    {children}
-  </StyledPaper>
-);
-
-export default Paper;

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

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

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

@@ -1,14 +0,0 @@
-import { Animated } from 'react-native';
-import styled, { css } from '@emotion/native';
-import { StyleProps } from '@tecsinapse/react-core';
-import { PaperProps } from './Paper';
-import { baseStyles, elevatedStyles } from '../shared/PaperAndCard';
-
-export const StyledPaper = styled(Animated.View)<
-  PaperProps & Partial<StyleProps>
->(
-  props => css`
-    ${baseStyles(props)}
-    ${elevatedStyles(props)}
-  `
-);

package/src/components/atoms/PressableSurface/PressableSurface.tsx

@@ -1,82 +0,0 @@
-import { useTheme } from '@emotion/react';
-import React, { FC } from 'react';
-import { Pressable, PressableProps, StyleProp, ViewStyle } from 'react-native';
-import { ThemeProp } from '../../../types/defaults';
-import { lightenDarkenColor } from '../../../utils';
-
-const COLOR_VARIATION_FACTOR = 25;
-
-export interface PressableSurfaceProps extends PressableProps {
-  effect?: 'darken' | 'lighten' | 'none';
-  surfaceColor?: string;
-  effectIntensity?: number;
-  effectStyle?: (pressed: boolean) => StyleProp<ViewStyle>;
-}
-
-const PressableSurface: FC<PressableSurfaceProps> = ({
-  children,
-  surfaceColor,
-  effect,
-  effectIntensity,
-  effectStyle,
-  style,
-  ...rest
-}) => {
-  const theme = useTheme() as ThemeProp;
-  let effectBaseColor = theme.miscellaneous.surfaceColor;
-  let bgColor = 'transparent';
-
-  if (surfaceColor) {
-    effectBaseColor = surfaceColor;
-    bgColor = effectBaseColor;
-  }
-
-  const readyStyle = prepareStyle(
-    { effect, effectIntensity, style, effectStyle },
-    effectBaseColor,
-    bgColor
-  );
-  return (
-    <Pressable {...rest} style={readyStyle}>
-      {children}
-    </Pressable>
-  );
-};
-
-const prepareStyle = (
-  props: PressableSurfaceProps,
-  effectColor: string,
-  bgColor: string
-): any => {
-  const {
-    effect = 'darken',
-    effectIntensity = COLOR_VARIATION_FACTOR,
-    style,
-    effectStyle,
-  } = props;
-
-  const lighten = lightenDarkenColor(effectColor, effectIntensity);
-  const darken = lightenDarkenColor(effectColor, -effectIntensity);
-  const composedStyle = [{ backgroundColor: bgColor }, style];
-
-  if (effectStyle) {
-    return ({ pressed }) => [composedStyle, effectStyle(pressed)];
-  }
-
-  switch (effect) {
-    case 'darken':
-      return applyEffectStyle(composedStyle, darken);
-
-    case 'lighten':
-      return applyEffectStyle(composedStyle, lighten);
-
-    case 'none':
-      return composedStyle;
-  }
-};
-
-const applyEffectStyle = (style: any, variation: string) => {
-  return ({ pressed }) => [style, pressed && { backgroundColor: variation }];
-};
-
-export default PressableSurface;

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

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

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

@@ -1,27 +0,0 @@
-import React from 'react';
-import { Story } from '@storybook/react';
-import { ProgressBar, ProgressBarProps } from './index';
-import { Card } from '../Card';
-
-export default {
-  title: 'Hybrid/Progress Bar',
-  component: ProgressBar,
-};
-
-const Template: Story<ProgressBarProps> = ({ ...args }) => (
-  <Card style={{ width: 400 }}>
-    <ProgressBar {...args} />
-  </Card>
-);
-
-export const Base = Template.bind({});
-
-Base.args = {
-  valueNow: 80,
-  animate: true,
-  segments: 5,
-  animationParameters: {
-    direction: 'right',
-    duration: 5000,
-  },
-};

package/src/components/atoms/ProgressBar/ProgressBar.tsx

@@ -1,108 +0,0 @@
-import { useTheme } from '@emotion/react';
-import * as React from 'react';
-import { Animated, ViewProps } from 'react-native';
-import {
-  ColorGradationType,
-  ColorType,
-  ThemeProp,
-} from '@tecsinapse/react-core';
-import { extractNumbersFromString } from '../../../utils';
-import { Container, Progress, Segment } from './styled';
-
-export interface ProgressBarProps extends ViewProps {
-  /** Number of segments. Defaults to 1. Set to 1 when 0 or less */
-  segments?: number;
-  /** Minimum possible value (0% of the bar). Defaults to 0 */
-  valueMin?: number;
-  /** Maximum possible value (100% of the bar). Defaults to 100 */
-  valueMax?: number;
-  /** Current value */
-  valueNow: number | string;
-  /** Filled partition color. Defaults to 'primary' */
-  color?: ColorType;
-  /** Filled partition color tone. Defaults to 'medium' */
-  colorTone?: ColorGradationType;
-  /** Animation */
-  animate: boolean;
-  /** Parameters animation  */
-  animationParameters?: { direction: 'left' | 'right'; duration: number };
-}
-
-const ProgressBar: React.FC<ProgressBarProps> = ({
-  segments: _segments = 1,
-  valueMin = 0,
-  valueNow: _valueNow,
-  valueMax = 100,
-  color = 'primary',
-  colorTone = 'medium',
-  animate,
-  animationParameters,
-  ...rest
-}) => {
-  const theme = useTheme() as ThemeProp;
-  const animationValue = React.useRef(new Animated.Value(0)).current;
-
-  const valueNow =
-    typeof _valueNow === 'string'
-      ? extractNumbersFromString(_valueNow)
-      : _valueNow;
-
-  const totalProgress = ((valueNow - valueMin) / (valueMax - valueMin)) * 100;
-  const segments = Math.max(1, _segments);
-  const segmentWidth = 100 / Math.max(segments);
-
-  const items = [...Array(segments).keys()];
-
-  const segmentsRender = items.map(index => {
-    const max = segmentWidth * (index + 1);
-    const min = segmentWidth * index;
-    const minmax = (totalProgress - min) / (max - min);
-    const width = (minmax > 1 ? 1 : minmax < 0 ? 0 : minmax) * 100;
-
-    let progressPercent: string | Animated.AnimatedInterpolation = `${width}%`;
-
-    if (animate && animationParameters) {
-      Animated.timing(animationValue, {
-        toValue: 1,
-        duration: animationParameters.duration / items.length,
-        useNativeDriver: false,
-        delay:
-          animationParameters.direction === 'right'
-            ? index * (animationParameters.duration / items.length)
-            : (items.length - index - 1) *
-              (animationParameters.duration / items.length),
-      }).start();
-
-      const rangeAnimation =
-        animationParameters?.direction === 'right'
-          ? [`${valueMin < 0 ? 0 : valueMin}%`, `${width}%`]
-          : [`${valueMax}%`, `${width}%`];
-
-      progressPercent = animationValue.interpolate?.({
-        inputRange: [0, 1],
-        outputRange: rangeAnimation,
-      });
-    }
-
-    return (
-      <Segment
-        key={index}
-        style={{
-          borderRightWidth: index == segments - 1 ? 0 : 2,
-        }}
-      >
-        <Progress
-          style={{
-            width: progressPercent,
-            backgroundColor: theme.color[color][colorTone],
-            borderRightWidth: width > 0 && width < 100 ? 2 : 0,
-          }}
-        />
-      </Segment>
-    );
-  });
-
-  return <Container {...rest}>{segmentsRender}</Container>;
-};
-
-export default ProgressBar;

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

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

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

@@ -1,25 +0,0 @@
-import styled from '@emotion/native';
-import { Animated } from 'react-native';
-import { StyleProps } from '../../../types/defaults';
-import { RFValueStr } from '../../../utils';
-
-export const Container = styled.View<Partial<StyleProps>>`
-  display: flex;
-  height: ${({ theme }) => theme.spacing.mili};
-  border-radius: ${({ theme }) => theme.spacing.mili};
-  width: 100%;
-  flex-direction: row;
-  overflow: hidden;
-`;
-
-export const Segment = styled.View<Partial<StyleProps>>`
-  flex: 1;
-  background-color: ${({ theme }) => theme.color.secondary.light};
-  border-right-width: ${RFValueStr('2px')};
-  border-color: ${({ theme }) => theme.color.secondary.xlight};
-`;
-
-export const Progress = styled(Animated.View)<Partial<StyleProps>>`
-  height: 100%;
-  border-color: ${({ theme }) => theme.color.secondary.xlight};
-`;

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

@@ -1,39 +0,0 @@
-import React, { useState } from 'react';
-import { RadioButtonProps, default as RadioButton } from './RadioButton';
-import { Text } from '../Text';
-import { Story } from '@storybook/react';
-
-export default {
-  title: 'Hybrid/Radio Button',
-  component: RadioButton,
-};
-
-const Template: Story<RadioButtonProps> = ({
-  labelPosition,
-  checked,
-  ...args
-}) => {
-  const [active, setActive] = useState(checked);
-
-  React.useEffect(() => {
-    setActive(checked);
-  }, [checked]);
-
-  return (
-    <RadioButton
-      {...args}
-      checked={active}
-      onChange={setActive}
-      labelPosition={labelPosition}
-    >
-      <Text>Radio Button</Text>
-    </RadioButton>
-  );
-};
-
-export const Base = Template.bind({});
-
-Base.args = {
-  labelPosition: 'right',
-  checked: false,
-};

package/src/components/atoms/RadioButton/RadioButton.tsx

@@ -1,81 +0,0 @@
-import React, { FC } from 'react';
-import { Pressable, StyleProp, ViewStyle } from 'react-native';
-import { ColorGradationType, ColorType } from '../../../types/defaults';
-import { Icon } from '../Icon';
-import { IconViewStyled, IconWrapper, ScaledView, ViewStyled } from './styled';
-
-export interface RadioButtonProps {
-  /** Element is checked */
-  checked?: boolean;
-  /** Change handler */
-  onChange?: (checked: boolean) => void;
-  /** Position of children */
-  labelPosition?: 'left' | 'right';
-  /** Element is not clickable */
-  disabled?: boolean;
-  /** Color definition from theme */
-  color?: ColorType;
-  /** Color gradation from theme */
-  colorTone?: ColorGradationType;
-  style?: StyleProp<ViewStyle>;
-}
-
-const RadioButton: FC<RadioButtonProps> = ({
-  children,
-  onChange,
-  checked,
-  labelPosition = 'right',
-  disabled = false,
-  color = 'primary',
-  colorTone = 'medium',
-  ...rest
-}): JSX.Element => {
-  const handleChange = () => {
-    onChange && onChange(!checked);
-  };
-
-  return (
-    <Pressable
-      {...rest}
-      disabled={disabled}
-      onPress={handleChange}
-      accessibilityRole="radio"
-    >
-      <ViewStyled>
-        {labelPosition === 'left' && children}
-        {checked && (
-          <IconViewStyled>
-            <IconWrapper>
-              <ScaledView>
-                <Icon
-                  name="circle"
-                  colorVariant={color}
-                  colorTone={colorTone}
-                  type="material-community"
-                  size="centi"
-                />
-              </ScaledView>
-            </IconWrapper>
-          </IconViewStyled>
-        )}
-        {!checked && (
-          <IconViewStyled>
-            <IconWrapper>
-              <ScaledView>
-                <Icon
-                  name="circle"
-                  fontColor="light"
-                  type="material-community"
-                  size="centi"
-                />
-              </ScaledView>
-            </IconWrapper>
-          </IconViewStyled>
-        )}
-        {labelPosition === 'right' && children}
-      </ViewStyled>
-    </Pressable>
-  );
-};
-
-export default RadioButton;

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

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

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

@@ -1,29 +0,0 @@
-import styled from '@emotion/native';
-import { View } from 'react-native';
-import { StyleProps } from '../../../types/defaults';
-import { RadioButtonProps } from './RadioButton';
-
-export const IconWrapper = styled(View)<Partial<RadioButtonProps & StyleProps>>`
-  border-radius: ${({ theme }: StyleProps) => theme.borderRadius.pill};
-  border-color: ${({
-    theme,
-    color = 'primary',
-    colorTone = 'medium',
-  }: StyleProps & RadioButtonProps) => theme.color[color][colorTone]};
-  border-width: ${({ theme }: StyleProps) => theme.borderWidth.nano};
-  background-color: ${({ theme }: StyleProps) =>
-    theme.miscellaneous.surfaceColor};
-`;
-
-export const ScaledView = styled(View)`
-  transform: scale(0.8);
-`;
-
-export const IconViewStyled = styled(View)<Partial<StyleProps>>`
-  padding: ${({ theme }: StyleProps) => theme.spacing.mili};
-`;
-
-export const ViewStyled = styled(View)`
-  align-items: center;
-  flex-direction: row;
-`;

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

@@ -1,27 +0,0 @@
-import React from 'react';
-import { Story } from '@storybook/react';
-import { SwitchProps, default as Switch } from './Switch';
-import { action } from '@storybook/addon-actions';
-
-export default {
-  title: 'Hybrid/Switch',
-  component: Switch,
-};
-
-const Template: Story<SwitchProps> = args => {
-  const [active, setActive] = React.useState(args.active);
-  const onChange = arg => {
-    setActive(!active);
-    args.onChange(arg);
-  };
-
-  return <Switch active={active} onChange={onChange} disabled={args.disabled}/>;
-};
-
-export const Base = Template.bind({});
-
-Base.args = {
-  active: true,
-  onChange: value => action('Cicked')(value),
-  disabled: false,
-};