@ornikar/kitt-universal 1.0.0 → 1.0.1

package/src/Icon/Icon.stories.tsx

@@ -1,59 +0,0 @@
-import { storiesOf } from '@storybook/react-native';
-import * as icons from '@ornikar/kitt-icons';
-import { Section, Story } from '@ornikar/kitt-universal';
-import React from 'react';
-import type { ViewStyle } from 'react-native';
-import { Flex } from '../stories/Flex';
-import { Typography } from '../typography/Typography';
-import { Icon } from './Icon';
-
-const aligns: NonNullable<ViewStyle['alignSelf']>[] = ['flex-start', 'center', 'baseline', 'flex-end'];
-
-storiesOf('kitt-universal/Icon', module)
-  .addParameters({
-    jest: {
-      createBeforeAfterEachCallbacks: () => ({
-        before: () => jest.useFakeTimers(),
-      }),
-    },
-  })
-  .add('Icon', () => (
-    <Story title="Icon">
-      <Section.DemoSection>
-        <Icon color="#000" icon={<icons.AlertCircleIcon />} />
-        <Icon spin color="#000" icon={<icons.LoaderIcon />} />
-      </Section.DemoSection>
-
-      <Section title="Size">
-        <Flex direction="row">
-          {[20, 40, 60].map((size) => (
-            <Flex key={size} direction="row" padding={2}>
-              <Icon color="#000" size={size} icon={<icons.AlertCircleIcon />} />
-              <Typography.Text base="body-small"> {size}</Typography.Text>
-            </Flex>
-          ))}
-        </Flex>
-      </Section>
-
-      <Section title="Align">
-        {aligns.map((align) => (
-          <Flex key={align} direction="row" padding={2}>
-            <Icon color="#000" align={align} icon={<icons.AlertCircleIcon />} />
-            <Typography.Text base="body-large"> {align}</Typography.Text>
-          </Flex>
-        ))}
-      </Section>
-    </Story>
-  ))
-  .add('Icon List', () => (
-    <Story title="Icon List">
-      <Flex direction="row">
-        {Object.entries(icons).map(([name, IconComponent]) => (
-          <Flex key={name} direction="row" padding={2}>
-            <Icon color="#000" icon={<IconComponent />} />
-            <Typography.Text base="body-small"> {name}</Typography.Text>
-          </Flex>
-        ))}
-      </Flex>
-    </Story>
-  ));

package/src/Icon/Icon.tsx

@@ -1,37 +0,0 @@
-import type { ReactElement } from 'react';
-import React from 'react';
-import type { ViewStyle } from 'react-native';
-import styled from 'styled-components/native';
-import { SpinningIcon } from './SpinningIcon';
-
-export interface IconProps {
-  icon: ReactElement;
-  size?: number;
-  color: string;
-  spin?: boolean;
-  align?: ViewStyle['alignSelf'];
-  testID?: ViewStyle['testID'];
-}
-
-interface IconContainerProps {
-  size?: number;
-  color: string;
-  align?: ViewStyle['alignSelf'];
-}
-
-const IconContainer = styled.View<IconContainerProps>`
-  color: ${({ color }) => color};
-  width: ${({ size }) => size}px;
-  height: ${({ size }) => size}px;
-  align-self: ${({ align = 'auto' }) => align};
-`;
-
-export function Icon({ icon, size = 20, spin, align, color }: IconProps): ReactElement {
-  const clonedIcon = React.cloneElement(icon, { color });
-
-  return (
-    <IconContainer align={align} size={size} color={color}>
-      {spin ? <SpinningIcon>{clonedIcon}</SpinningIcon> : clonedIcon}
-    </IconContainer>
-  );
-}

package/src/Icon/SpinningIcon.tsx

@@ -1,38 +0,0 @@
-import type { ReactElement, ReactNode } from 'react';
-import React, { useEffect, useRef } from 'react';
-import { Animated, Easing } from 'react-native';
-
-export interface SpinningIconProps {
-  children: ReactNode;
-}
-
-export function SpinningIcon({ children }: SpinningIconProps): ReactElement {
-  const animationRef = useRef(new Animated.Value(0));
-
-  const rotation = animationRef.current.interpolate({
-    inputRange: [0, 1],
-    outputRange: ['0deg', '360deg'],
-  });
-
-  useEffect(() => {
-    if (process.env.TESTS) return undefined;
-
-    const animation = Animated.loop(
-      Animated.timing(animationRef.current, {
-        toValue: 1,
-        duration: 1100,
-        easing: Easing.linear,
-        useNativeDriver: true,
-      }),
-    );
-    animation.start();
-    return () => {
-      if (process.env.TESTS) return undefined;
-
-      animation.stop();
-      return undefined;
-    };
-  }, []);
-
-  return <Animated.View style={{ transform: [{ rotate: rotation }] }}>{children}</Animated.View>;
-}

package/src/Icon/SpinningIcon.web.module.css

@@ -1,13 +0,0 @@
-@keyframes spin {
-  0% {
-    transform: rotate(-1deg);
-  }
-
-  100% {
-    transform: rotate(359deg);
-  }
-}
-
-.SpinningIcon > svg {
-  animation: spin 1.1s infinite linear;
-}

package/src/Icon/SpinningIcon.web.module.css.d.ts

@@ -1,6 +0,0 @@
-declare const styles: {
-  readonly "SpinningIcon": string;
-  readonly "spin": string;
-};
-export = styles;
-

package/src/Icon/SpinningIcon.web.tsx

@@ -1,11 +0,0 @@
-import type { ReactElement, ReactNode } from 'react';
-import React from 'react';
-import styles from './SpinningIcon.web.module.css';
-
-export interface SpinningIconProps {
-  children: ReactNode;
-}
-
-export function SpinningIcon({ children }: SpinningIconProps): ReactElement {
-  return <span className={styles.SpinningIcon}>{children}</span>;
-}