@ornikar/kitt-universal 1.0.0 → 1.0.1

package/src/Message/Message.stories.tsx

@@ -1,102 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { storiesOf } from '@storybook/react-native';
-import { Section, Story } from '@ornikar/kitt-universal';
-import React from 'react';
-import { Typography } from '../typography/Typography';
-import { Message } from './Message';
-
-storiesOf('kitt-universal/Feedback', module).add('Message', () => (
-  <Story title="Message">
-    <Section.DemoSection>
-      <Message>Info message goes here...</Message>
-    </Section.DemoSection>
-    <Section title="Classic">
-      <Section.SubSection title="Info">
-        <Message>Info message goes here...</Message>
-      </Section.SubSection>
-      <Section.SubSection title="Confirmation">
-        <Message type="success">Confirmation message goes here...</Message>
-      </Section.SubSection>
-      <Section.SubSection title="Warning">
-        <Message type="warning">Warning message goes here...</Message>
-      </Section.SubSection>
-      <Section.SubSection title="Error">
-        <Message type="danger">Error message goes here...</Message>
-      </Section.SubSection>
-    </Section>
-    <Section title="Classic - Centered Text">
-      <Section.SubSection title="Info">
-        <Message centeredText>Info message goes here...</Message>
-      </Section.SubSection>
-      <Section.SubSection title="Confirmation">
-        <Message centeredText type="success">
-          Confirmation message goes here...
-        </Message>
-      </Section.SubSection>
-      <Section.SubSection title="Warning">
-        <Message centeredText type="warning">
-          Warning message goes here...
-        </Message>
-      </Section.SubSection>
-      <Section.SubSection title="Error">
-        <Message centeredText type="danger">
-          Error message goes here...
-        </Message>
-      </Section.SubSection>
-    </Section>
-    <Section title="Dismissable">
-      <Section.SubSection title="Info">
-        <Message onDismiss={action('dismiss')}>Info message goes here...</Message>
-      </Section.SubSection>
-      <Section.SubSection title="Confirmation">
-        <Message type="success" onDismiss={action('dismiss')}>
-          Confirmation message goes here...
-        </Message>
-      </Section.SubSection>
-      <Section.SubSection title="Warning">
-        <Message type="warning" onDismiss={action('dismiss')}>
-          Warning message goes here...
-        </Message>
-      </Section.SubSection>
-      <Section.SubSection title="Error">
-        <Message type="danger" onDismiss={action('dismiss')}>
-          Error message goes here...
-        </Message>
-      </Section.SubSection>
-    </Section>
-    <Section title="Classic - with title">
-      <Section.SubSection title="Info">
-        <Message onDismiss={action('dismiss')}>
-          <Typography.Text base="body" variant="bold">
-            This is a title{'\n'}
-          </Typography.Text>
-          <Typography.Text base="body-small">Info message goes here...</Typography.Text>
-        </Message>
-      </Section.SubSection>
-      <Section.SubSection title="Confirmation">
-        <Message type="success" onDismiss={action('dismiss')}>
-          <Typography.Text base="body" variant="bold">
-            This is a title{'\n'}
-          </Typography.Text>
-          <Typography.Text base="body-small">Confirmation message goes here...</Typography.Text>
-        </Message>
-      </Section.SubSection>
-      <Section.SubSection title="Warning">
-        <Message type="warning" onDismiss={action('dismiss')}>
-          <Typography.Text base="body" variant="bold">
-            This is a title{'\n'}
-          </Typography.Text>
-          <Typography.Text base="body-small">Warning message goes here...</Typography.Text>
-        </Message>
-      </Section.SubSection>
-      <Section.SubSection title="Error">
-        <Message type="danger" onDismiss={action('dismiss')}>
-          <Typography.Text base="body" variant="bold">
-            This is a title{'\n'}
-          </Typography.Text>
-          <Typography.Text base="body-small">Error message goes here...</Typography.Text>
-        </Message>
-      </Section.SubSection>
-    </Section>
-  </Story>
-));

package/src/Message/Message.tsx

@@ -1,114 +0,0 @@
-import { AlertCircleIcon, AlertTriangleIcon, CheckIcon, InfoIcon, XIcon } from '@ornikar/kitt-icons';
-import type { ReactElement, ReactNode } from 'react';
-import React from 'react';
-import styled from 'styled-components/native';
-import { Icon } from '../Icon/Icon';
-import type { TypographyColor } from '../typography/Typography';
-import { Typography } from '../typography/Typography';
-
-export type MessageType = 'success' | 'warning' | 'danger' | 'info';
-
-const xIconSize = 14;
-const mainIconSize = 20;
-
-export interface MessageProps {
-  type?: MessageType;
-  children: NonNullable<ReactNode>;
-  noRadius?: boolean;
-  centeredText?: boolean;
-  insets?: { top?: number };
-  onDismiss?: () => void;
-}
-
-interface ContainerProps {
-  type: MessageType;
-  noRadius: boolean;
-  insets: MessageProps['insets'];
-}
-
-const Container = styled.View<ContainerProps>`
-  border-radius: ${({ theme, noRadius }) => (noRadius ? 0 : theme.kitt.spacing * 5)}px;
-  background-color: ${({ theme, type }) => theme.kitt.feedbackMessage.backgroundColors[type]};
-  padding-bottom: ${({ theme }) => theme.kitt.spacing * 4}px;
-  padding-left: ${({ theme }) => theme.kitt.spacing * 4}px;
-  padding-right: ${({ theme }) => theme.kitt.spacing * 4}px;
-  padding-top: ${({ theme, insets }) => (insets?.top ?? 0) + theme.kitt.spacing * 4}px;
-  flex-direction: row;
-  align-items: flex-start;
-  justify-content: space-between;
-`;
-
-const CloseContainer = styled.TouchableOpacity`
-  margin-left: ${({ theme }) => theme.kitt.spacing * 4}px;
-  padding: ${({ theme }) => theme.kitt.spacing}px;
-`;
-
-const IconContainer = styled.View`
-  margin-right: ${({ theme }) => theme.kitt.spacing * 4}px;
-`;
-
-interface ContentProps {
-  type: MessageType;
-  centeredText: boolean;
-}
-
-const Content = styled.Text<ContentProps>`
-  text-align: ${({ centeredText }) => (centeredText ? 'center' : 'left')};
-  flex: 1;
-`;
-
-const getColorByType = (type: MessageType): TypographyColor => {
-  switch (type) {
-    case 'success':
-      return 'white';
-    case 'danger':
-      return 'white';
-    case 'warning':
-    default:
-      return 'black';
-  }
-};
-
-function getIconContent(type: MessageType): ReactElement {
-  switch (type) {
-    case 'warning':
-      return <AlertCircleIcon />;
-    case 'success':
-      return <CheckIcon />;
-    case 'danger':
-      return <AlertTriangleIcon />;
-    default:
-      return <InfoIcon />;
-  }
-}
-
-export function Message({
-  type = 'info',
-  children,
-  noRadius = false,
-  centeredText = false,
-  onDismiss,
-  insets,
-}: MessageProps): ReactElement {
-  const color = getColorByType(type);
-
-  return (
-    <Container type={type} noRadius={noRadius} insets={insets}>
-      {!centeredText ? (
-        <IconContainer>
-          <Icon size={mainIconSize} color={color} icon={getIconContent(type)} />
-        </IconContainer>
-      ) : null}
-      <Content type={type} centeredText={centeredText}>
-        <Typography.Text base="body-small" color={color}>
-          {children}
-        </Typography.Text>
-      </Content>
-      {onDismiss ? (
-        <CloseContainer onPress={onDismiss}>
-          <Icon icon={<XIcon />} size={xIconSize} color={color} />
-        </CloseContainer>
-      ) : null}
-    </Container>
-  );
-}