@tecsinapse/react-web-kit 1.18.7 → 1.20.1

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

@@ -1,59 +1,53 @@
 import React from 'react';
 import {
-  extractNumbersFromString,
-  SpacingType,
+  IGridItem,
   useTheme,
+  Breakpoints,
+  getGridItemColumSpan,
+  getGridItemPadding,
 } from '@tecsinapse/react-core';
+import { useBreakpoints } from '@tecsinapse/react-web-kit';
+import { getSpan } from './functions';
 
-type FlexPositioning = 'flex-start' | 'flex-end' | 'center';
-type FlexAlignBase = FlexPositioning | 'stretch';
-type FlexAlignType = FlexAlignBase | 'baseline';
-type FlexSpacing = 'space-between' | 'space-around';
+export type Span = Pick<Breakpoints, 'sm'> & Partial<Omit<Breakpoints, 'sm'>>;
 
-type PaddingPosition = 'top' | 'right' | 'bottom' | 'left';
-
-export interface IGridItem {
-  children: React.ReactElement;
-  /** Number of columns to fill */
-  span: number;
-  /** You don't have to give this property since is inherited from Grid */
-  columns?: number;
-  loading?: boolean;
-  /** If your GridItem has a loading state, specify the component here (Skeleton) */
-  loadingComponent?: React.ReactElement;
-  /** Flex properties below */
-  alignContent?: FlexAlignBase | FlexSpacing;
-  alignItems?: FlexAlignType;
-  alignSelf?: 'auto' | FlexAlignType;
-  flex?: number;
-  flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
-  flexGrow?: number;
-  flexShrink?: number;
-  justifyContent?: FlexPositioning | FlexSpacing | 'space-evenly';
-  /** You don't have to give this property since is inherited from Grid */
-  spacing?:
-    | SpacingType
-    | {
-        top?: SpacingType;
-        right?: SpacingType;
-        bottom?: SpacingType;
-        left?: SpacingType;
-      };
-  /** Used to wrap children in a View when its style extrapolates the dimensions*/
-  wrapper?: boolean;
+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: _span,
   columns = 12,
   loadingComponent,
   loading = false,
   spacing: _spacing,
   wrapper = false,
+  alignContent,
+  alignItems,
+  alignSelf,
+  flex,
+  flexDirection,
+  flexGrow,
+  flexShrink,
+  justifyContent,
+  flexBasis,
+  style,
   ...rest
-}: IGridItem) => {
+}: 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');
   }
@@ -61,34 +55,40 @@ const GridItem = ({
     return loadingComponent;
   }
 
-  const getPadding = (pos: PaddingPosition) => {
-    if (_spacing) {
-      if (typeof _spacing === 'string')
-        return extractNumbersFromString(spacing[_spacing]);
-      else if (typeof _spacing === 'object' && _spacing[pos]) {
-        return extractNumbersFromString(spacing[_spacing[pos]!]);
-      } else return undefined;
-    } else return undefined;
-  };
+  const span = typeof _span === 'number' ? _span : getSpan(_span, sm, md, lg);
 
-  const style: React.CSSProperties = {
-    ...rest,
+  const _style: React.CSSProperties = {
+    ...style,
+    alignContent,
+    alignItems,
+    alignSelf,
+    flexDirection,
+    flexGrow,
+    flexShrink,
+    justifyContent,
+    flex,
     boxSizing: 'border-box',
-    flexBasis: `${100 / (columns / span)}%`,
-    paddingTop: getPadding('top'),
-    paddingBottom: getPadding('bottom'),
-    paddingRight: getPadding('right'),
-    paddingLeft: getPadding('left'),
+    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 },
+      : { ..._style, ...children?.props.style },
   });
 
-  return wrapper ? <div style={style}>{clone}</div> : clone;
+  return wrapper ? (
+    <div {...rest} style={_style}>
+      {clone}
+    </div>
+  ) : (
+    clone
+  );
 };
 
 export default GridItem;

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

@@ -0,0 +1,13 @@
+import { Span } from './Item';
+
+export const getSpan = (
+  value: Span,
+  sm: boolean,
+  md: boolean,
+  lg: boolean
+): number => {
+  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

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

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

@@ -1,4 +1,4 @@
 export { GridItem } from './Item';
-export type { IGridItem } from './Item';
+export type { IGridItemWeb } from './Item';
 export { default as Grid } from './Grid';
-export type { IGrid } 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,4 @@
+export {
+  default as IconTextButton,
+  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/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,4 @@
+export {
+  default as LabeledSwitch,
+  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/Menubar/Menubar.tsx

@@ -52,9 +52,10 @@ const Menubar: React.FC<MenubarProps> = ({
   const menuRef = useRef<HTMLDivElement | null>(null);
   useClickAwayListener(menuRef, setOpen, 'mouseup');
 
-  const toggleOpen = React.useCallback(() => setOpen(state => !state), [
-    setOpen,
-  ]);
+  const toggleOpen = React.useCallback(
+    () => setOpen(state => !state),
+    [setOpen]
+  );
 
   React.useEffect(() => {
     if (search === '') return;

package/src/components/molecules/Menubar/SearchResultItem/utils.tsx

@@ -39,7 +39,7 @@ export const stringMatcher = (
   return Array.from(tx.matchAll(r));
 };
 
-const highlightReplacer = <T extends unknown>(
+const highlightReplacer = <T,>(
   searchTerm: string,
   textToReplace: string,
   Component: React.ElementType,
@@ -66,7 +66,7 @@ const highlightReplacer = <T extends unknown>(
   });
 };
 
-export const highlight = <T extends unknown>(
+export const highlight = <T,>(
   searchTerm: string,
   textToReplace: string,
   Component: React.ElementType,

package/src/components/molecules/Select/Dropdown/Dropdown.tsx

@@ -59,9 +59,10 @@ const Dropdown = <Data, Type extends 'single' | 'multi'>({
     !aux ? onSelect(auxArray as OnSelectArg) : onSelect(items as OnSelectArg);
   }, [options, setCheckedAll, onSelect]);
 
-  const onChange = React.useCallback(text => setSearchArg(text), [
-    setSearchArg,
-  ]);
+  const onChange = React.useCallback(
+    text => setSearchArg(text),
+    [setSearchArg]
+  );
 
   return (
     <StyledContainerDropdown

package/src/components/molecules/Select/Select.tsx

@@ -1,7 +1,7 @@
 import {
   PressableInputContainer,
   Text,
-  TextProps
+  TextProps,
 } from '@tecsinapse/react-core';
 import React from 'react';
 import { Transition } from 'react-transition-group';
@@ -12,7 +12,7 @@ import { getDisplayValue } from './functions';
 import {
   RightComponent,
   StyledContainer,
-  StyledInputContainer
+  StyledInputContainer,
 } from './styled';
 
 export interface SelectProps<Data, Type extends 'single' | 'multi'>
@@ -60,9 +60,10 @@ export const Select = <Data, Type extends 'single' | 'multi'>({
   useClickAwayListener(refDropDown, setDropDownVisible);
 
   const onlyLabel = label && !placeholder;
-  const hasValue = type === 'single' ? !!value : ((value || []) as []).length > 0
-  const _placeholder = onlyLabel ? label : placeholder
-  const _label = hasValue ? label : undefined
+  const hasValue =
+    type === 'single' ? !!value : ((value || []) as []).length > 0;
+  const _placeholder = onlyLabel ? label : placeholder;
+  const _label = hasValue ? label : undefined;
 
   const displayValue = getDisplayValue<Data>(
     type,
@@ -73,9 +74,10 @@ export const Select = <Data, Type extends 'single' | 'multi'>({
     labelExtractor
   );
 
-  const onPress = React.useCallback(() => setDropDownVisible(prev => !prev), [
-    setDropDownVisible,
-  ]);
+  const onPress = React.useCallback(
+    () => setDropDownVisible(prev => !prev),
+    [setDropDownVisible]
+  );
 
   return (
     <StyledContainer ref={refDropDown} {...rest}>