@tecsinapse/react-web-kit 1.22.2 → 1.22.4

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,32 +0,0 @@
-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'};
-`;

package/src/components/molecules/Menubar/MenuBlock/MenuBlock.tsx

@@ -1,55 +0,0 @@
-import React from 'react';
-import { Text } from '@tecsinapse/react-core';
-import { MenuItem } from './MenuItem';
-import {
-  StyledContainerItems,
-  StyledContainerMenu,
-  StyledLeftComponent,
-} from './styled';
-import { ItemsOptions, OptionsType } from '../types';
-import { Masonry } from '../../Masonry';
-
-interface MenuBlockProps {
-  toggle: () => void;
-  options: OptionsType[];
-}
-
-const MenuBlock: React.FC<MenuBlockProps> = ({ options, toggle }) => {
-  return (
-    <Masonry columns={4} spacingTop="kilo" spacingLeft="mega">
-      {options.map(data => (
-        <React.Fragment key={`${data.title}`}>
-          <StyledContainerMenu>
-            {data.leftComponents && (
-              <StyledLeftComponent>{data.leftComponents}</StyledLeftComponent>
-            )}
-            <Text fontWeight="bold">{data.title}</Text>
-          </StyledContainerMenu>
-          <StyledContainerItems>
-            {data.items.map(
-              ({
-                title,
-                Component,
-                props,
-                rightComponents,
-                items,
-              }: ItemsOptions) => (
-                <MenuItem
-                  items={items}
-                  key={title}
-                  title={title}
-                  Component={Component}
-                  rightComponents={rightComponents}
-                  props={props}
-                  toggle={toggle}
-                />
-              )
-            )}
-          </StyledContainerItems>
-        </React.Fragment>
-      ))}
-    </Masonry>
-  );
-};
-
-export default React.memo(MenuBlock);

package/src/components/molecules/Menubar/MenuBlock/MenuItem/MenuItem.tsx

@@ -1,68 +0,0 @@
-import React, { ElementType } from 'react';
-import { Icon, Text } from '@tecsinapse/react-core';
-import { SubMenuBlock } from './SubMenuBlock';
-import { StyledRightComponent, StyledText } from '../styled';
-import { StyledContainerItemText, StyledSubButton } from './styled';
-import { ItemsOptions } from '../../types';
-
-interface MenuItemProps {
-  title: string;
-  /** Wrapping component for element. This is used for navigation */
-  Component: ElementType;
-  /** Properties spread to wrapping Component */
-  props: any;
-  toggle: () => void;
-  rightComponents?: React.ReactNode;
-  items?: ItemsOptions[];
-}
-
-const MenuItem: React.FC<MenuItemProps> = ({
-  title,
-  Component = 'a',
-  props = {},
-  rightComponents,
-  items,
-  toggle,
-}) => {
-  const [open, setOpen] = React.useState<boolean>(false);
-
-  const noTextDecoration = { textDecoration: 'none' };
-
-  const getIconName = () =>
-    open ? 'arrow-up-drop-circle-outline' : 'arrow-down-drop-circle-outline';
-
-  const handleMenuAction = () => setOpen(!open);
-
-  return (
-    <>
-      <StyledContainerItemText key={title}>
-        <Component {...props} style={noTextDecoration} onClick={toggle}>
-          <Text
-            colorVariant={open ? 'primary' : 'secondary'}
-            colorTone={open ? 'medium' : 'dark'}
-          >
-            <StyledText>{title}</StyledText>
-          </Text>
-        </Component>
-        {rightComponents && !items && (
-          <StyledRightComponent>{rightComponents}</StyledRightComponent>
-        )}
-        {items && (
-          <StyledSubButton onClick={handleMenuAction}>
-            <Icon
-              name={getIconName()}
-              type="material-community"
-              fontColor="orange"
-            />
-          </StyledSubButton>
-        )}
-      </StyledContainerItemText>
-      {open &&
-        items?.map(subItem => (
-          <SubMenuBlock key={subItem.title} data={subItem} toggle={toggle} />
-        ))}
-    </>
-  );
-};
-
-export default MenuItem;

package/src/components/molecules/Menubar/MenuBlock/MenuItem/SubMenuBlock/SubMenuBlock.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import { Text } from '@tecsinapse/react-core';
-import { StyledRightComponent, StyledText } from '../../styled';
-import { ItemsOptions } from '../../../types';
-import { DummyBorder, StyledContainerItem } from './styled';
-
-interface SubMenuBlockProps {
-  data: ItemsOptions;
-  toggle: () => void;
-}
-
-const SubMenuBlock: React.FC<SubMenuBlockProps> = ({ data, toggle }) => {
-  const { Component, props, rightComponents, title } = data;
-
-  const noTextDecoration = { textDecoration: 'none' };
-
-  return (
-    <StyledContainerItem>
-      <DummyBorder />
-      <Component {...props} style={noTextDecoration} onClick={toggle}>
-        <Text colorVariant="secondary" colorTone="medium" typography="sub">
-          <StyledText>{title}</StyledText>
-        </Text>
-      </Component>
-      {rightComponents && (
-        <StyledRightComponent>{rightComponents}</StyledRightComponent>
-      )}
-    </StyledContainerItem>
-  );
-};
-
-export default SubMenuBlock;

package/src/components/molecules/Menubar/MenuBlock/MenuItem/SubMenuBlock/index.ts

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

package/src/components/molecules/Menubar/MenuBlock/MenuItem/SubMenuBlock/styled.ts

@@ -1,14 +0,0 @@
-import styled from '@emotion/styled';
-import { StyleProps } from '@tecsinapse/react-core';
-
-export const StyledContainerItem = styled('div')<Partial<StyleProps>>`
-  display: flex;
-  align-items: center;
-`;
-
-export const DummyBorder = styled('div')<Partial<StyleProps>>`
-  height: ${({ theme }) => theme.typography.sub.fontSize};
-  border-left: ${({ theme }) =>
-    `${theme.borderWidth.pico} solid ${theme.color.primary.medium}`};
-  margin-right: ${({ theme }) => theme.spacing.mili};
-`;

package/src/components/molecules/Menubar/MenuBlock/MenuItem/index.ts

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

package/src/components/molecules/Menubar/MenuBlock/MenuItem/styled.ts

@@ -1,17 +0,0 @@
-import styled from '@emotion/styled';
-import { StyleProps } from '@tecsinapse/react-core';
-
-export const StyledContainerItemText = styled('div')<Partial<StyleProps>>`
-  margin-top: ${({ theme }) => theme.spacing.mili};
-  display: flex;
-  align-items: center;
-`;
-
-export const StyledSubButton = styled('span')<Partial<StyleProps>>`
-  padding-top: ${({ theme }) => theme.spacing.nano} 0 0 0;
-  margin-left: ${({ theme }) => theme.spacing.mili};
-  cursor: pointer;
-  & * {
-    user-select: none;
-  }
-`;

package/src/components/molecules/Menubar/MenuBlock/index.ts

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

package/src/components/molecules/Menubar/MenuBlock/styled.ts

@@ -1,34 +0,0 @@
-import styled from '@emotion/styled';
-import { hex2rgba, StyleProps } from '@tecsinapse/react-core';
-
-export const StyledLeftComponent = styled('div')<Partial<StyleProps>>`
-  margin-right: ${({ theme }) => theme.spacing.mili};
-`;
-
-export const StyledRightComponent = styled('div')<Partial<StyleProps>>`
-  margin-left: ${({ theme }) => theme.spacing.mili};
-`;
-
-export const StyledContainerMenu = styled('div')<Partial<StyleProps>>`
-  flex-direction: row;
-  display: flex;
-  align-items: center;
-  border-bottom: ${({ theme }) =>
-    `${theme.borderWidth.pico} solid ${hex2rgba(
-      theme.miscellaneous.shadow,
-      0.05
-    )}`};
-  width: 100%;
-  padding-bottom: ${({ theme }) => theme.spacing.mili};
-`;
-
-export const StyledContainerItems = styled('div')<Partial<StyleProps>>`
-  display: flex;
-  flex-direction: column;
-`;
-
-export const StyledText = styled('span')<Partial<StyleProps>>`
-  &:hover {
-    color: ${({ theme }) => theme.font.color.orange};
-  }
-`;