@tecsinapse/react-web-kit 1.22.1-beta.8 → 1.22.2

package/src/components/molecules/Grid/Item/Item.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import {
+  IGridItem,
+  useTheme,
+  Breakpoints,
+  getGridItemColumSpan,
+  getGridItemPadding,
+} from '@tecsinapse/react-core';
+import { useBreakpoints } from '../../../../hooks';
+import { getSpan } from './functions';
+
+export type Span = Pick<Breakpoints, 'sm'> & Partial<Omit<Breakpoints, 'sm'>>;
+
+export interface IGridItemWeb
+  extends Omit<IGridItem, 'span'>,
+    Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+  /** At least sm should exist */
+  span: number | Span;
+  /** Only specify this property if the GridItem will be 'dynamic', adjusting itself to content. Use this with `wrapper` for better result. */
+  flexBasis?:
+    | string
+    | 'content'
+    | 'auto'
+    | 'max-content'
+    | 'min-content'
+    | 'fit-content';
+}
+
+const GridItem = ({
+  children,
+  span: _span,
+  columns = 12,
+  loadingComponent,
+  loading = false,
+  spacing: _spacing,
+  wrapper = false,
+  alignContent,
+  alignItems,
+  alignSelf,
+  flex,
+  flexDirection,
+  flexGrow,
+  flexShrink,
+  justifyContent,
+  flexBasis,
+  style,
+  ...rest
+}: IGridItemWeb): JSX.Element => {
+  const { spacing } = useTheme();
+  const { sm, md, lg } = useBreakpoints();
+  if (!React.Children.only(children)) {
+    throw new Error('The number of children in GridItem should be one');
+  }
+  if (loadingComponent && loading) {
+    return loadingComponent;
+  }
+
+  const span = typeof _span === 'number' ? _span : getSpan(_span, sm, md, lg);
+
+  const _style: React.CSSProperties = {
+    ...style,
+    alignContent,
+    alignItems,
+    alignSelf,
+    flexDirection,
+    flexGrow,
+    flexShrink,
+    justifyContent,
+    flex,
+    boxSizing: 'border-box',
+    flexBasis: flexBasis ?? `${getGridItemColumSpan(columns, span)}%`,
+    paddingTop: getGridItemPadding('top', _spacing, spacing),
+    paddingBottom: getGridItemPadding('bottom', _spacing, spacing),
+    paddingRight: getGridItemPadding('right', _spacing, spacing),
+    paddingLeft: getGridItemPadding('left', _spacing, spacing),
+  };
+
+  const clone = React.cloneElement(children, {
+    ...children?.props,
+    style: wrapper
+      ? children?.props.style
+      : { ..._style, ...children?.props.style },
+  });
+
+  return wrapper ? (
+    <div {...rest} style={_style}>
+      {clone}
+    </div>
+  ) : (
+    clone
+  );
+};
+
+export default GridItem;

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

@@ -0,0 +1,14 @@
+import { Span } from './Item';
+
+export const getSpan = (
+  value: Span,
+  sm: boolean,
+  md: boolean,
+  lg: boolean
+): number => {
+  if (!value) return 0;
+  if (sm) return value.sm;
+  if (md) return value?.md ?? value.sm;
+  if (lg) return value?.lg ?? value?.md ?? value.sm;
+  return 0;
+};

package/src/components/molecules/Grid/Item/index.ts

@@ -0,0 +1,2 @@
+export { default as GridItem } from './Item';
+export type { IGridItemWeb } from './Item';

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

@@ -0,0 +1,4 @@
+export { GridItem } from './Item';
+export type { IGridItemWeb } from './Item';
+export { default as Grid } from './Grid';
+export type { IGridWeb } from './Grid';

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

@@ -0,0 +1,51 @@
+import { action } from '@storybook/addon-actions';
+import { Story } from '@storybook/react';
+import React from 'react';
+import IconTextButton, { WebIconTextButtonProps } from './IconTextButton';
+
+export default {
+  title: 'Web/IconTextButton',
+  component: IconTextButton,
+};
+
+const TemplateIcon: Story<WebIconTextButtonProps> = args => (
+  <IconTextButton {...args} />
+);
+
+export const BaseIcon = TemplateIcon.bind({});
+
+BaseIcon.args = {
+  onPress: e => action('onPress')(e),
+  iconProps: {
+    name: 'rocket',
+    type: 'font-awesome',
+  },
+};
+
+const TemplateIconText: Story<WebIconTextButtonProps> = args => (
+  <IconTextButton {...args} />
+);
+
+export const BaseIconText = TemplateIconText.bind({});
+
+BaseIconText.args = {
+  onPress: e => action('onPress')(e),
+  variant: 'outlined',
+  iconProps: {
+    name: 'rocket',
+    type: 'font-awesome',
+  },
+  label: 'Rocket Icon!',
+};
+
+const TemplateText: Story<WebIconTextButtonProps> = args => (
+  <IconTextButton {...args} />
+);
+
+export const BaseText = TemplateText.bind({});
+
+BaseText.args = {
+  onPress: e => action('onPress')(e),
+  variant: 'text',
+  label: 'No rocket icon :(',
+};

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

@@ -0,0 +1,64 @@
+import { IconComponent, IconTextButtonProps } from '@tecsinapse/react-core';
+import React from 'react';
+import { WebButtonProps } from '../../atoms/Button';
+import useIconTextButton from './hooks/useIconTextButton';
+import { StyledIconTextButton } from './styled';
+import TextComponent from './TextComponent';
+
+export type WebIconTextButtonProps = IconTextButtonProps &
+  Omit<WebButtonProps, 'ButtonProps'>;
+
+const IconTextButton: React.FC<WebIconTextButtonProps> = ({
+  iconProps,
+  iconPosition = 'left',
+  textProps,
+  label,
+  variant = 'filled',
+  size = 'default',
+  ...rest
+}): JSX.Element => {
+  const { handleHover, handlePressed, defaultFontColor } =
+    useIconTextButton(variant);
+
+  return (
+    <StyledIconTextButton
+      boxed={!label}
+      variant={variant}
+      size={size}
+      onMouseOut={() => handleHover(true)}
+      onMouseOver={() => handleHover(false)}
+      onPressIn={() => handlePressed(true)}
+      onPressOut={() => handlePressed(false)}
+      {...rest}
+    >
+      {iconPosition === 'left' ? (
+        <IconComponent
+          iconProps={iconProps}
+          size={size}
+          defaultFontColor={defaultFontColor}
+        />
+      ) : (
+        <></>
+      )}
+      <TextComponent
+        label={label}
+        defaultFontColor={defaultFontColor}
+        hasIcon={!!iconProps}
+        iconPosition={iconPosition}
+        textProps={textProps}
+        size={size}
+      />
+      {iconPosition === 'right' ? (
+        <IconComponent
+          iconProps={iconProps}
+          size={size}
+          defaultFontColor={defaultFontColor}
+        />
+      ) : (
+        <></>
+      )}
+    </StyledIconTextButton>
+  );
+};
+
+export default IconTextButton;

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

@@ -0,0 +1,39 @@
+import {
+  ButtonSizeType,
+  FontColor,
+  IconPositionOptions,
+  Text,
+  TextProps,
+} from '@tecsinapse/react-core';
+import React, { FC } from 'react';
+
+interface TextComponentProps {
+  textProps?: TextProps;
+  size?: ButtonSizeType;
+  defaultFontColor: keyof FontColor;
+  label?: string;
+  iconPosition?: IconPositionOptions;
+  hasIcon?: boolean;
+}
+
+const TextComponent: FC<TextComponentProps> = ({
+  textProps,
+  size = 'default',
+  defaultFontColor,
+  label,
+}) => {
+  return label ? (
+    <Text
+      typography={textProps?.typography ?? size === 'small' ? 'sub' : 'base'}
+      fontWeight={textProps?.fontWeight ?? 'bold'}
+      fontColor={textProps?.fontColor ?? defaultFontColor}
+      {...textProps}
+    >
+      {label}
+    </Text>
+  ) : (
+    <></>
+  );
+};
+
+export default React.memo(TextComponent);

package/src/components/molecules/IconTextButton/hooks/useIconTextButton.ts

@@ -0,0 +1,31 @@
+import { fontColorVC, VariantType } from '@tecsinapse/react-core';
+import { useCallback, useState } from 'react';
+
+const useIconTextButton = (variant: VariantType) => {
+  const [hover, setHover] = useState<boolean>(false);
+  const [pressed, setPressed] = useState<boolean>(false);
+
+  const defaultFontColor = !pressed && hover ? 'light' : fontColorVC[variant];
+
+  const handleHover = useCallback(
+    (value: boolean) => {
+      setHover(value);
+    },
+    [setHover]
+  );
+
+  const handlePressed = useCallback(
+    (value: boolean) => {
+      setPressed(value);
+    },
+    [setPressed]
+  );
+
+  return {
+    handleHover,
+    handlePressed,
+    defaultFontColor,
+  };
+};
+
+export default useIconTextButton;

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

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

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

@@ -0,0 +1,18 @@
+import styled from '@emotion/native';
+import { StyleProps } from '@tecsinapse/react-core';
+import { Button } from '../../atoms/Button';
+
+const boxedStyle = ({ theme }: Partial<StyleProps>) =>
+  `
+    padding: ${theme?.spacing.centi};
+    aspect-ratio: 1;
+  `;
+
+export const StyledIconTextButton = styled(Button)<
+  Partial<StyleProps> & {
+    boxed: boolean;
+  }
+>`
+  gap: ${({ theme }) => theme?.spacing.mili};
+  ${({ boxed, theme }) => boxed && boxedStyle({ theme })};
+`;

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

@@ -0,0 +1,41 @@
+import { action } from '@storybook/addon-actions';
+import { Story } from '@storybook/react';
+import React, { useState } from 'react';
+import { InputPassword } from '.';
+import Input, { InputPasswordWebProps } from './InputPassword';
+
+export default {
+  title: 'Hybrid/Input Password',
+  component: Input,
+};
+
+const Template: Story<InputPasswordWebProps> = args => {
+  const [value, setValue] = useState<string>('');
+
+  const onChange = text => {
+    setValue(text);
+    if (args.onChange) {
+      args.onChange(text);
+    }
+  };
+
+  return (
+    <>
+      <InputPassword
+        {...args}
+        label="Password"
+        value={value}
+        onChange={onChange}
+        placeholder={args.placeholder}
+      />
+    </>
+  );
+};
+
+export const Base = Template.bind({});
+
+Base.args = {
+  onChange: value => action('onChange')(value),
+  placeholder: 'Type your password',
+  disabled: false,
+};

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

@@ -0,0 +1,32 @@
+import { InputPasswordIcon } from '@tecsinapse/react-core';
+import React, { FC, useState } from 'react';
+import { Input, InputWebProps } from '../../atoms/Input';
+
+export type InputPasswordWebProps = InputWebProps;
+
+const InputPassword: FC<InputPasswordWebProps> = React.forwardRef(
+  ({ rightComponent, ...rest }, ref) => {
+    const [revealed, setRevealed] = useState(false);
+    return (
+      <Input
+        {...rest}
+        ref={ref}
+        secureTextEntry={!revealed}
+        rightComponent={
+          <>
+            <InputPasswordIcon
+              onChangeState={setRevealed}
+              revealed={revealed}
+              effect="none"
+            />
+            {rightComponent}
+          </>
+        }
+      />
+    );
+  }
+);
+
+InputPassword.displayName = 'InputPassword';
+
+export default InputPassword;

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

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

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

@@ -0,0 +1,46 @@
+import {
+  FontColor,
+  FontWeight,
+  LabelPositionOptions,
+  TextProps,
+} from '@tecsinapse/react-core';
+import React, { FC } from 'react';
+import { Pressable, PressableProps } from 'react-native';
+import { StyledLabel } from './styled';
+
+export interface LabelComponentProps extends PressableProps {
+  label: string;
+  labelPosition: LabelPositionOptions;
+  labelProps?: TextProps;
+  active: boolean;
+  switchDisabled?: boolean;
+}
+
+const LabelComponent: FC<LabelComponentProps> = ({
+  label,
+  labelPosition,
+  labelProps,
+  active,
+  switchDisabled = false,
+  ...rest
+}) => {
+  const defaultFontColor: keyof FontColor =
+    active && !switchDisabled ? 'dark' : 'medium';
+  const defaultFontWeight: keyof FontWeight =
+    active && !switchDisabled ? 'bold' : 'regular';
+
+  return (
+    <Pressable {...rest}>
+      <StyledLabel
+        labelPosition={labelPosition}
+        fontColor={labelProps?.fontColor ?? defaultFontColor}
+        fontWeight={labelProps?.fontWeight ?? defaultFontWeight}
+        {...labelProps}
+      >
+        {label}
+      </StyledLabel>
+    </Pressable>
+  );
+};
+
+export default React.memo(LabelComponent);

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

@@ -0,0 +1,41 @@
+import { action } from '@storybook/addon-actions';
+import { Story } from '@storybook/react';
+import React from 'react';
+import {
+  default as LabeledSwitch,
+  LabeledSwitchWebProps,
+} from './LabeledSwitch';
+
+export default {
+  title: 'Web/LabeledSwitch',
+  component: LabeledSwitch,
+};
+
+const Template: Story<LabeledSwitchWebProps> = args => {
+  const [active, setActive] = React.useState(args.active);
+  const onChange = arg => {
+    setActive(!active);
+    args.onChange(arg);
+  };
+
+  return (
+    <LabeledSwitch
+      active={active}
+      onChange={onChange}
+      disabled={args.disabled}
+      label={'Labeled switch!'}
+      labelPosition={args.labelPosition}
+      pressableLabel={args.pressableLabel}
+    />
+  );
+};
+
+export const Base = Template.bind({});
+
+Base.args = {
+  active: true,
+  onChange: value => action('Clicked')(value),
+  disabled: false,
+  labelPosition: 'right',
+  pressableLabel: true,
+};

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

@@ -0,0 +1,58 @@
+import { LabeledSwitchProps, Switch, TextProps } from '@tecsinapse/react-core';
+import React, { FC } from 'react';
+import LabelComponent from './LabelComponent';
+import { StyledDiv } from './styled';
+
+export type LabeledSwitchWebProps = LabeledSwitchProps & {
+  labelProps?: TextProps;
+};
+
+const LabeledSwitch: FC<LabeledSwitchWebProps> = ({
+  label,
+  labelPosition = 'right',
+  labelProps,
+  pressableLabel = false,
+  disabled,
+  active,
+  onChange,
+  ...rest
+}) => {
+  return (
+    <StyledDiv>
+      {labelPosition === 'left' ? (
+        <LabelComponent
+          active={active}
+          label={label}
+          labelPosition={'left'}
+          labelProps={labelProps}
+          disabled={!pressableLabel || disabled}
+          switchDisabled={disabled}
+          onPress={() => onChange(!active)}
+        />
+      ) : (
+        <></>
+      )}
+      <Switch
+        active={active}
+        disabled={disabled}
+        onChange={onChange}
+        {...rest}
+      />
+      {labelPosition === 'right' ? (
+        <LabelComponent
+          active={active}
+          label={label}
+          labelPosition={'right'}
+          labelProps={labelProps}
+          disabled={!pressableLabel || disabled}
+          switchDisabled={disabled}
+          onPress={() => onChange(!active)}
+        />
+      ) : (
+        <></>
+      )}
+    </StyledDiv>
+  );
+};
+
+export default LabeledSwitch;

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

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

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

@@ -0,0 +1,26 @@
+import { css, default as nativeStyled } from '@emotion/native';
+import { default as webStyled } from '@emotion/styled';
+import { LabelPositionOptions, StyleProps, Text } from '@tecsinapse/react-core';
+
+export const StyledDiv = webStyled('div')`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
+
+export const StyledLabel = nativeStyled(Text)<
+  Partial<StyleProps> & {
+    labelPosition: LabelPositionOptions;
+  }
+>`
+  ${({ theme, labelPosition }) => {
+    if (labelPosition === 'right')
+      return css`
+        margin-left: ${theme?.spacing.centi};
+      `;
+    else if (labelPosition === 'left')
+      return css`
+        margin-right: ${theme?.spacing.centi};
+      `;
+  }}
+`;

package/src/components/molecules/Masonry/Masonry.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { SpacingType } from '@tecsinapse/react-core';
+import { StyledColumnItem, StyledRowItem, StyledMasonry } from './styled';
+
+export interface MasonryProps {
+  columns: number;
+  /** Spacing to the left of every block on index % column !== 0 */
+  spacingLeft: SpacingType;
+  /** Spacing to the top of every block on index >= column */
+  spacingTop: SpacingType;
+}
+
+const Masonry: React.FC<MasonryProps> = ({
+  children,
+  columns,
+  spacingTop,
+  spacingLeft,
+}) => {
+  const getColumns = () => {
+    const columnsArray: React.ReactNode[][] = Array.from(
+      { length: columns },
+      () => []
+    );
+
+    React.Children.forEach(children, (child, index) => {
+      if (child && React.isValidElement(child)) {
+        columnsArray[index % columns].push(child);
+      }
+    });
+
+    return columnsArray;
+  };
+
+  const renderColumn = column => {
+    return column.map((item, index) => (
+      <StyledRowItem key={index} index={index} spacingTop={spacingTop}>
+        {item}
+      </StyledRowItem>
+    ));
+  };
+
+  const renderColumns = () => {
+    return getColumns().map((column, index) => (
+      <StyledColumnItem key={index} index={index} spacingLeft={spacingLeft}>
+        {renderColumn(column)}
+      </StyledColumnItem>
+    ));
+  };
+
+  return <StyledMasonry>{renderColumns()}</StyledMasonry>;
+};
+
+export default Masonry;

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

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

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

@@ -0,0 +1,32 @@
+import styled from '@emotion/styled';
+import { StyleProps } from '@tecsinapse/react-core';
+import { MasonryProps } from './Masonry';
+
+export const StyledColumnItem = styled('div')<
+  Partial<StyleProps> & { index: number } & Partial<MasonryProps>
+>`
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-content: stretch;
+  flex: 1;
+  width: 0;
+  margin-left: ${({ theme, index, spacingLeft = 'nano' }) =>
+    index > 0 ? theme.spacing[spacingLeft] : 'initial'};
+`;
+
+export const StyledMasonry = styled('div')`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-content: stretch;
+  box-sizing: border-box;
+  width: 100%;
+`;
+
+export const StyledRowItem = styled('div')<
+  Partial<StyleProps> & { index: number } & Partial<MasonryProps>
+>`
+  margin-top: ${({ theme, index, spacingTop = 'nano' }) =>
+    index > 0 ? theme.spacing[spacingTop] : 'initial'};
+`;