@tecsinapse/react-web-kit 1.18.6 → 1.20.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}>

package/src/components/organisms/DataGrid/DataGrid.tsx

@@ -57,7 +57,7 @@ export interface DataGridProps<Data>
 }
 
 /** Note: Consider memoizing functions for a better performance */
-const DataGrid = <Data extends unknown>({
+const DataGrid = <Data,>({
   headers,
   data,
   rowKeyExtractor,
@@ -139,25 +139,21 @@ const DataGrid = <Data extends unknown>({
         {!loading ? (
           <TBody>
             {data.length > 0 ? (
-              getData(
-                data,
-                rowsCount,
-                page,
-                rowsPerPage,
-                pagination
-              ).map(item => (
-                <Row
-                  key={rowKeyExtractor(item)}
-                  rowKeyExtractor={rowKeyExtractor}
-                  handleSelect={handleSelect}
-                  selectable={selectable}
-                  headers={headers}
-                  data={item}
-                  checked={selectedRows?.some(
-                    sel => rowKeyExtractor(sel) === rowKeyExtractor(item)
-                  )}
-                />
-              ))
+              getData(data, rowsCount, page, rowsPerPage, pagination).map(
+                item => (
+                  <Row
+                    key={rowKeyExtractor(item)}
+                    rowKeyExtractor={rowKeyExtractor}
+                    handleSelect={handleSelect}
+                    selectable={selectable}
+                    headers={headers}
+                    data={item}
+                    checked={selectedRows?.some(
+                      sel => rowKeyExtractor(sel) === rowKeyExtractor(item)
+                    )}
+                  />
+                )
+              )
             ) : (
               <tr>
                 <td colSpan={99}>{emptyPlaceholder}</td>

package/src/components/organisms/DataGrid/Header/Header.tsx

@@ -21,7 +21,7 @@ export interface DataGridHeaderProps<Data> {
   selectable?: boolean;
 }
 
-const Header = <Data extends unknown>({
+const Header = <Data,>({
   selectable,
   rowsCount,
   headers,

package/src/hooks/index.ts

@@ -1 +1,3 @@
+export { useBreakpoints } from './useBreakpoints';
 export { useClickAwayListener } from './useClickAwayListener';
+export { useWindowSize } from './useWindowSize';

package/src/hooks/useBreakpoints.ts

@@ -0,0 +1,18 @@
+import { useTheme } from '@tecsinapse/react-core';
+import { useWindowSize } from './useWindowSize';
+
+export type UseBreakpointsReturn = {
+  sm: boolean;
+  md: boolean;
+  lg: boolean;
+};
+
+export const useBreakpoints = (): UseBreakpointsReturn => {
+  const { width } = useWindowSize();
+  const { breakpoints } = useTheme();
+  return {
+    sm: Number(width) >= 0 && Number(width) <= breakpoints.sm,
+    md: Number(width) > breakpoints.sm && Number(width) <= breakpoints.md,
+    lg: Number(width) > breakpoints.md,
+  };
+};

package/src/hooks/useWindowSize.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+
+type WindowSize = {
+  width: number | undefined;
+  height: number | undefined;
+};
+
+export const useWindowSize = (): WindowSize => {
+  const [windowSize, setWindowSize] = React.useState<WindowSize>({
+    width: undefined,
+    height: undefined,
+  });
+  React.useEffect(() => {
+    const handleResize = () => {
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+    };
+    window.addEventListener('resize', handleResize);
+    handleResize();
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+  return windowSize;
+};