@ornikar/kitt-universal 1.0.0 → 1.0.1

package/src/Button/Button.stories.tsx

@@ -1,301 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { storiesOf } from '@storybook/react-native';
-import { ArrowLeftIcon, ArrowRightIcon, LoaderIcon } from '@ornikar/kitt-icons';
-import { Section, Story } from '@ornikar/kitt-universal';
-import React from 'react';
-import { View } from 'react-native';
-import { Button } from './Button';
-
-storiesOf('kitt-universal/Action', module).add(
-  'Button',
-  () => (
-    <Story title="Button">
-      <Section.DemoSection>
-        <View>
-          <Button icon={<LoaderIcon />} onPress={action('press')}>
-            Label
-          </Button>
-        </View>
-      </Section.DemoSection>
-
-      <Section title="Primary">
-        <Section.SubSection title="Default">
-          <Button type="primary" onPress={action('press')}>
-            Label
-          </Button>
-        </Section.SubSection>
-        <Section.SubSection title="Stretch">
-          <Button stretch type="primary" onPress={action('press')}>
-            Label
-          </Button>
-        </Section.SubSection>
-        <Section.SubSection title="Disabled">
-          <Button disabled type="primary" onPress={action('press')}>
-            Label
-          </Button>
-        </Section.SubSection>
-        <Section.SubSection title="Loading">
-          <Button iconSpin type="primary" icon={<LoaderIcon />} onPress={action('press')}>
-            Label
-          </Button>
-        </Section.SubSection>
-        <Section.SubSection title="With icon left">
-          <Button type="primary" icon={<ArrowLeftIcon />} iconPosition="left" onPress={action('press')}>
-            Label
-          </Button>
-        </Section.SubSection>
-        <Section.SubSection title="With icon right">
-          <Button type="primary" icon={<ArrowRightIcon />} iconPosition="right" onPress={action('press')}>
-            Label
-          </Button>
-        </Section.SubSection>
-        <Section.SubSection title="Disabled with icon left">
-          <Button disabled type="primary" icon={<ArrowLeftIcon />} iconPosition="left" onPress={action('press')}>
-            Label
-          </Button>
-        </Section.SubSection>
-        <Section.SubSection title="Disabled with icon right">
-          <Button disabled type="primary" icon={<ArrowRightIcon />} iconPosition="right" onPress={action('press')}>
-            Label
-          </Button>
-        </Section.SubSection>
-        <Section.SubSection title="Icon only">
-          <Button type="primary" icon={<ArrowRightIcon />} onPress={action('press')} />
-        </Section.SubSection>
-        <Section.SubSection title="Disabled Icon only">
-          <Button disabled type="primary" icon={<ArrowRightIcon />} onPress={action('press')} />
-        </Section.SubSection>
-        <Section.SubSection title="Icon only loading">
-          <Button iconSpin type="primary" icon={<ArrowRightIcon />} iconPosition="right" onPress={action('press')} />
-        </Section.SubSection>
-        <Section.SubSection title="Long text">
-          <Button type="primary" onPress={action('press')}>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
-            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
-            ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
-            nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
-            anim id est laborum.
-          </Button>
-        </Section.SubSection>
-        <Section.SubSection title="Long text with icon">
-          <Button type="primary" icon={<ArrowRightIcon />} iconPosition="right" onPress={action('press')}>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
-            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
-            ea commodo consequat.
-          </Button>
-        </Section.SubSection>
-      </Section>
-
-      <Section title="Secondary">
-        <Section.SubSection title="Default">
-          <Button type="secondary" onPress={action('press')}>
-            Label
-          </Button>
-        </Section.SubSection>
-        <Section.SubSection title="Stretch">
-          <Button stretch type="secondary" onPress={action('press')}>
-            Label
-          </Button>
-        </Section.SubSection>
-        <Section.SubSection title="Disabled">
-          <Button disabled type="secondary" onPress={action('press')}>
-            Label
-          </Button>
-        </Section.SubSection>
-        <Section.SubSection title="Loading">
-          <Button iconSpin icon={<LoaderIcon />} type="secondary" onPress={action('press')}>
-            Label
-          </Button>
-        </Section.SubSection>
-        <Section.SubSection title="With icon left">
-          <Button type="secondary" icon={<ArrowLeftIcon />} iconPosition="left" onPress={action('press')}>
-            Label
-          </Button>
-        </Section.SubSection>
-        <Section.SubSection title="With icon right">
-          <Button type="secondary" icon={<ArrowRightIcon />} iconPosition="right" onPress={action('press')}>
-            Label
-          </Button>
-        </Section.SubSection>
-        <Section.SubSection title="Disabled with icon left">
-          <Button disabled type="secondary" icon={<ArrowLeftIcon />} iconPosition="left" onPress={action('press')}>
-            Label
-          </Button>
-        </Section.SubSection>
-        <Section.SubSection title="Disabled with icon right">
-          <Button disabled type="secondary" icon={<ArrowRightIcon />} iconPosition="right" onPress={action('press')}>
-            Label
-          </Button>
-        </Section.SubSection>
-        <Section.SubSection title="Icon only">
-          <Button type="secondary" icon={<ArrowRightIcon />} onPress={action('press')} />
-        </Section.SubSection>
-        <Section.SubSection title="Disabled Icon only">
-          <Button disabled type="secondary" icon={<ArrowRightIcon />} onPress={action('press')} />
-        </Section.SubSection>
-        <Section.SubSection title="Icon only loading">
-          <Button iconSpin icon={<LoaderIcon />} type="secondary" onPress={action('press')} />
-        </Section.SubSection>
-        <Section.SubSection title="Long text">
-          <Button type="secondary" onPress={action('press')}>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
-            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
-            ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
-            nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
-            anim id est laborum.
-          </Button>
-        </Section.SubSection>
-        <Section.SubSection title="Long text with icon">
-          <Button type="secondary" icon={<ArrowRightIcon />} iconPosition="right" onPress={action('press')}>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
-            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
-            ea commodo consequat.
-          </Button>
-        </Section.SubSection>
-      </Section>
-
-      <Section title="Subtle">
-        <Section.SubSection title="Default">
-          <Button type="subtle" onPress={action('press')}>
-            Label
-          </Button>
-        </Section.SubSection>
-        <Section.SubSection title="Stretch">
-          <Button stretch type="subtle" onPress={action('press')}>
-            Label
-          </Button>
-        </Section.SubSection>
-        <Section.SubSection title="Disabled">
-          <Button disabled type="subtle" onPress={action('press')}>
-            Label
-          </Button>
-        </Section.SubSection>
-        <Section.SubSection title="Loading">
-          <Button iconSpin icon={<LoaderIcon />} type="subtle" onPress={action('press')}>
-            Label
-          </Button>
-        </Section.SubSection>
-        <Section.SubSection title="With icon left">
-          <Button type="subtle" icon={<ArrowLeftIcon />} iconPosition="left" onPress={action('press')}>
-            Label
-          </Button>
-        </Section.SubSection>
-        <Section.SubSection title="With icon right">
-          <Button type="subtle" icon={<ArrowRightIcon />} iconPosition="right" onPress={action('press')}>
-            Label
-          </Button>
-        </Section.SubSection>
-        <Section.SubSection title="Disabled with icon left">
-          <Button disabled type="subtle" icon={<ArrowLeftIcon />} iconPosition="left" onPress={action('press')}>
-            Label
-          </Button>
-        </Section.SubSection>
-        <Section.SubSection title="Disabled with icon right">
-          <Button disabled type="subtle" icon={<ArrowRightIcon />} iconPosition="right" onPress={action('press')}>
-            Label
-          </Button>
-        </Section.SubSection>
-        <Section.SubSection title="Icon only">
-          <Button type="subtle" icon={<ArrowRightIcon />} onPress={action('press')} />
-        </Section.SubSection>
-        <Section.SubSection title="Disabled Icon only">
-          <Button disabled type="subtle" icon={<ArrowRightIcon />} onPress={action('press')} />
-        </Section.SubSection>
-        <Section.SubSection title="Icon only loading">
-          <Button iconSpin icon={<LoaderIcon />} type="subtle" onPress={action('press')} />
-        </Section.SubSection>
-        <Section.SubSection title="Long text">
-          <Button type="subtle" onPress={action('press')}>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
-            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
-            ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
-            nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
-            anim id est laborum.
-          </Button>
-        </Section.SubSection>
-        <Section.SubSection title="Long text with icon">
-          <Button type="subtle" icon={<ArrowRightIcon />} iconPosition="right" onPress={action('press')}>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
-            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
-            ea commodo consequat.
-          </Button>
-        </Section.SubSection>
-      </Section>
-
-      <Section title="Subtle dark">
-        <Section.SubSection title="Default">
-          <Button type="subtle-dark" onPress={action('press')}>
-            Label
-          </Button>
-        </Section.SubSection>
-        <Section.SubSection title="Stretch">
-          <Button stretch type="subtle-dark" onPress={action('press')}>
-            Label
-          </Button>
-        </Section.SubSection>
-        <Section.SubSection title="Disabled">
-          <Button disabled type="subtle-dark" onPress={action('press')}>
-            Label
-          </Button>
-        </Section.SubSection>
-        <Section.SubSection title="Loading">
-          <Button iconSpin icon={<LoaderIcon />} type="subtle-dark" onPress={action('press')}>
-            Label
-          </Button>
-        </Section.SubSection>
-        <Section.SubSection title="With icon left">
-          <Button type="subtle-dark" icon={<ArrowLeftIcon />} iconPosition="left" onPress={action('press')}>
-            Label
-          </Button>
-        </Section.SubSection>
-        <Section.SubSection title="With icon right">
-          <Button type="subtle-dark" icon={<ArrowRightIcon />} iconPosition="right" onPress={action('press')}>
-            Label
-          </Button>
-        </Section.SubSection>
-        <Section.SubSection title="Disabled with icon left">
-          <Button disabled type="subtle-dark" icon={<ArrowLeftIcon />} iconPosition="left" onPress={action('press')}>
-            Label
-          </Button>
-        </Section.SubSection>
-        <Section.SubSection title="Disabled with icon right">
-          <Button disabled type="subtle-dark" icon={<ArrowRightIcon />} iconPosition="right" onPress={action('press')}>
-            Label
-          </Button>
-        </Section.SubSection>
-        <Section.SubSection title="Icon only">
-          <Button type="subtle-dark" icon={<ArrowRightIcon />} onPress={action('press')} />
-        </Section.SubSection>
-        <Section.SubSection title="Disabled Icon only">
-          <Button disabled type="subtle-dark" icon={<ArrowRightIcon />} onPress={action('press')} />
-        </Section.SubSection>
-        <Section.SubSection title="Icon only loading">
-          <Button iconSpin icon={<LoaderIcon />} type="subtle-dark" onPress={action('press')} />
-        </Section.SubSection>
-        <Section.SubSection title="Long text">
-          <Button type="subtle-dark" onPress={action('press')}>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
-            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
-            ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
-            nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
-            anim id est laborum.
-          </Button>
-        </Section.SubSection>
-        <Section.SubSection title="Long text with icon">
-          <Button type="subtle-dark" icon={<ArrowRightIcon />} iconPosition="right" onPress={action('press')}>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
-            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
-            ea commodo consequat.
-          </Button>
-        </Section.SubSection>
-      </Section>
-    </Story>
-  ),
-  {
-    jest: {
-      createBeforeAfterEachCallbacks: () => ({
-        before: () => jest.useFakeTimers(),
-      }),
-    },
-  },
-);

package/src/Button/Button.tsx

@@ -1,60 +0,0 @@
-import type { ReactElement, ReactNode } from 'react';
-import React from 'react';
-import { ButtonContainer } from './ButtonContainer';
-import { ButtonContent } from './ButtonContent';
-import { useButton } from './useButton';
-
-export type ButtonType = 'primary' | 'secondary' | 'subtle' | 'subtle-dark';
-
-type IconPosition = 'right' | 'left';
-
-export interface ButtonProps {
-  children?: ReactNode;
-  type?: ButtonType;
-  disabled?: boolean;
-  icon?: ReactElement;
-  iconPosition?: IconPosition;
-  iconSpin?: boolean;
-  stretch?: boolean;
-  testID?: string;
-  onPress?: () => void;
-}
-
-export function Button({
-  children,
-  type = 'secondary',
-  icon,
-  iconPosition = 'left',
-  iconSpin,
-  stretch,
-  disabled,
-  onPress,
-  testID,
-}: ButtonProps): ReactElement {
-  const { isPressed, handleButtonPressIn, handleButtonPressOut } = useButton();
-
-  const sharedProps = {
-    type,
-    stretch,
-    disabled,
-  };
-
-  return (
-    <ButtonContainer
-      // eslint-disable-next-line unicorn/expiring-todo-comments
-      // TODO: When designs are defined, update with the proper onPress styles to mimic TouchableHighlight
-      // underlayColor={globalTheme.button[type].pressedBackgroundColor}
-      {...sharedProps}
-      isPressed={isPressed}
-      accessibilityRole="button"
-      testID={testID}
-      onPress={onPress}
-      onPressIn={handleButtonPressIn}
-      onPressOut={handleButtonPressOut}
-    >
-      <ButtonContent {...sharedProps} icon={icon} iconPosition={iconPosition} iconSpin={iconSpin}>
-        {children}
-      </ButtonContent>
-    </ButtonContainer>
-  );
-}

package/src/Button/ButtonContainer.tsx

@@ -1,32 +0,0 @@
-import styled from 'styled-components/native';
-import type { ButtonType } from './Button';
-
-interface ButtonContainerProps {
-  type: ButtonType;
-  isPressed?: boolean;
-  disabled?: boolean;
-  stretch?: boolean;
-}
-
-export const ButtonContainer = styled.Pressable<ButtonContainerProps>`
-  min-width: ${({ theme }) => theme.kitt.button.minWidth};
-  max-width: ${({ theme, stretch }) => (stretch ? 'auto' : theme.kitt.button.maxWidth)};
-  width: ${({ stretch }) => (stretch ? '100%' : 'auto')};
-  min-height: ${({ theme }) => theme.kitt.button.minHeight};
-  background-color: ${({ theme, isPressed, disabled, type }) => {
-    if (disabled) {
-      return theme.kitt.button[type].disabledBackgroundColor;
-    }
-
-    return isPressed ? theme.kitt.button[type].pressedBackgroundColor : theme.kitt.button[type].backgroundColor;
-  }};
-  padding: ${({ theme }) => theme.kitt.button.contentPadding.default};
-  flex-direction: row;
-
-  /* Emulate inline-* css display by making the button taking only its necessary space */
-  align-self: flex-start;
-  border-radius: ${({ theme }) => theme.kitt.button.borderRadius};
-  border-color: ${({ theme, disabled, type }) =>
-    disabled ? theme.kitt.button[type].disabledBorderColor : 'transparent'};
-  border-width: ${({ theme }) => theme.kitt.button.borderWidth};
-`;

package/src/Button/ButtonContent.tsx

@@ -1,133 +0,0 @@
-import type { ReactElement } from 'react';
-import React from 'react';
-import styled, { useTheme } from 'styled-components/native';
-import type { TypographyColor } from '../typography/Typography';
-import { Typography } from '../typography/Typography';
-import { TypographyIcon } from '../typography/TypographyIcon';
-import type { ButtonProps, ButtonType } from './Button';
-
-const getTextColorByType = (type: ButtonType, isPressed: boolean, disabled: boolean): TypographyColor => {
-  if (disabled) return 'black-light';
-  switch (type) {
-    case 'primary':
-      return 'white';
-    case 'subtle':
-      return isPressed ? 'primary-light' : 'primary';
-    case 'subtle-dark':
-      return isPressed ? 'black-light' : 'black';
-    case 'secondary':
-    default:
-      return 'black';
-  }
-};
-
-const ButtonText = styled(Typography.Text)`
-  /* On native code, this is the only way to ensure that the text is centered */
-  text-align: center;
-`;
-
-interface ContentProps {
-  stretch?: boolean;
-  iconOnly?: boolean;
-}
-
-const Content = styled.View<ContentProps>`
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-
-  /*
-    On native code flex grow does not work as expected which cause an issue with the flex props.
-    In order to occupy only the needed space, we enable flex grow only when stretched
-  */
-  flex: ${({ stretch, iconOnly }) => `${stretch || iconOnly ? 1 : 0} 1 auto`};
-`;
-
-interface IconContainerProps {
-  iconPosition?: ButtonProps['iconPosition'];
-}
-
-const IconContainer = styled.View<IconContainerProps>`
-  ${({ theme, iconPosition }) => {
-    const value = theme.kitt.spacing * 3;
-
-    if (iconPosition === 'left') {
-      return `margin: 0 ${value}px 0 0;`;
-    }
-
-    return `margin: 0 0 0 ${value}px;`;
-  }}
-`;
-
-interface ButtonIconProps {
-  icon: NonNullable<ButtonContentProps['icon']>;
-  spin: ButtonProps['iconSpin'];
-  color: TypographyColor;
-  size: number;
-  iconPosition: ButtonContentProps['iconPosition'];
-  testID?: string;
-}
-
-function ButtonIcon({ icon, spin, color, size, iconPosition, testID }: ButtonIconProps): ReactElement | null {
-  return (
-    <IconContainer iconPosition={iconPosition}>
-      <TypographyIcon icon={icon} spin={spin} color={color} size={size} testID={testID} />
-    </IconContainer>
-  );
-}
-
-interface ButtonContentProps extends Exclude<ButtonProps, 'onPress'> {
-  isPressed?: boolean;
-  type: NonNullable<ButtonType>;
-}
-
-export function ButtonContent({
-  type,
-  isPressed,
-  stretch,
-  icon,
-  iconPosition,
-  iconSpin,
-  disabled,
-  children,
-}: ButtonContentProps): ReactElement | null {
-  const color = getTextColorByType(type, Boolean(isPressed), Boolean(disabled));
-  const theme = useTheme();
-
-  const sharedIconProps = {
-    spin: iconSpin,
-    color,
-    size: theme.kitt.button.iconSize,
-  };
-
-  if (__DEV__) {
-    if (!(children || icon)) {
-      throw new Error('kitt(Button): You should provide at least a children or a icon');
-    }
-  }
-
-  if (!children) {
-    return (
-      <Content iconOnly stretch={stretch}>
-        {/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */}
-        <TypographyIcon {...sharedIconProps} icon={icon!} />
-      </Content>
-    );
-  }
-
-  return (
-    <Content stretch={stretch}>
-      {icon && iconPosition === 'left' ? (
-        <ButtonIcon {...sharedIconProps} icon={icon} iconPosition={iconPosition} testID="button-left-icon" />
-      ) : null}
-
-      <ButtonText base="body" color={color} variant="bold">
-        {children}
-      </ButtonText>
-
-      {icon && iconPosition === 'right' ? (
-        <ButtonIcon {...sharedIconProps} icon={icon} iconPosition={iconPosition} />
-      ) : null}
-    </Content>
-  );
-}