@ornikar/kitt-universal 1.0.0 → 1.0.1

package/src/index.ts

@@ -1,61 +0,0 @@
-export type { AvatarProps } from './Avatar/Avatar';
-export { Avatar } from './Avatar/Avatar';
-export type { ButtonProps } from './Button/Button';
-export { Button } from './Button/Button';
-export type { CardProps } from './Card/Card';
-export { Card } from './Card/Card';
-export type { InputFeedbackProps } from './forms/InputFeedback/InputFeedback';
-export { InputFeedback } from './forms/InputFeedback/InputFeedback';
-export type { InputFieldProps } from './forms/InputField/InputField';
-export { InputField } from './forms/InputField/InputField';
-export type { InputTextProps, InputTextState, TextInputMixinProps } from './forms/InputText/InputText';
-export { InputText, styledTextInputMixin } from './forms/InputText/InputText';
-export type { LabelProps } from './forms/Label/Label';
-export { Label } from './forms/Label/Label';
-export type { RadioProps } from './forms/Radio/Radio';
-export { Radio } from './forms/Radio/Radio';
-export type { TextAreaProps } from './forms/TextArea/TextArea';
-export { TextArea } from './forms/TextArea/TextArea';
-export type { FullScreenModalProps } from './FullScreenModal/FullScreenModal';
-export { FullScreenModal } from './FullScreenModal/FullScreenModal';
-export type { IconProps } from './Icon/Icon';
-export { Icon } from './Icon/Icon';
-export type { KittBreakpoint, KittBreakpointMax } from './KittBreakpoints';
-export { KittBreakpoints, KittBreakpointsMax } from './KittBreakpoints';
-export type { ListItemProps } from './ListItem/ListItem';
-export { ListItem } from './ListItem/ListItem';
-export type { LargeLoaderProps } from './Loader/LargeLoader';
-export { LargeLoader } from './Loader/LargeLoader';
-export type { LoaderProps } from './Loader/Loader';
-export { Loader } from './Loader/Loader';
-export type { MessageProps } from './Message/Message';
-export { Message } from './Message/Message';
-export type { ModalProps } from './Modal/Modal';
-export { Modal } from './Modal/Modal';
-export type { NotificationProps } from './Notification/Notification';
-export { Notification } from './Notification/Notification';
-export { Section, Story, StoryDecorator, StoryGrid, StoryTitle } from './story-components';
-export type { TagProps } from './Tag/Tag';
-export { Tag } from './Tag/Tag';
-export type { KittTheme } from './themes/default';
-export { theme } from './themes/default';
-export type { TooltipProps } from './Tooltip/Tooltip';
-export { Tooltip } from './Tooltip/Tooltip';
-export type {
-  TypographyColor,
-  TypographyHeadingProps,
-  TypographyProps,
-  TypographyTextProps,
-} from './typography/Typography';
-export { Typography } from './typography/Typography';
-export type { TypographyIconProps } from './typography/TypographyIcon';
-export { TypographyIcon } from './typography/TypographyIcon';
-export type { TypographyLinkProps } from './typography/TypographyLink';
-export { TypographyLink } from './typography/TypographyLink';
-export { useKittTheme } from './useKittTheme';
-export type { WindowSizeHelper } from './utils/windowSize/createWindowSizeHelper';
-export { createWindowSizeHelper } from './utils/windowSize/createWindowSizeHelper';
-export { MatchWindowSize } from './utils/windowSize/MatchWindowSize';
-export { matchWindowSize, useMatchWindowSize } from './utils/windowSize/useMatchWindowSize';
-export { useWindowSize } from './utils/windowSize/useWindowSize';
-export * from '@ornikar/kitt-icons';

package/src/stories/Block.tsx

@@ -1,24 +0,0 @@
-import styled from 'styled-components/native';
-
-export interface BlockProps {
-  color?: 'dark' | 'white' | 'primary' | 'transparent';
-}
-
-const getBackgroundColorFromBlockColor = (color: BlockProps['color'] = 'transparent'): string => {
-  switch (color) {
-    case 'dark':
-      return '#293033';
-    case 'white':
-      return '#ffffff';
-    default:
-      return 'transparent';
-  }
-};
-
-export const Block = styled.View<BlockProps>`
-  background: ${({ color }) => getBackgroundColorFromBlockColor(color)};
-`;
-
-export const BlockWithPadding = styled(Block)`
-  padding: 10px 5px;
-`;

package/src/stories/Flex.tsx

@@ -1,16 +0,0 @@
-import type { ViewStyle } from 'react-native';
-import styled from 'styled-components/native';
-
-interface FlexProps {
-  direction: ViewStyle['flexDirection'];
-  padding?: number;
-}
-
-export const Flex = styled.View.withConfig<FlexProps>({
-  shouldForwardProp: (prop, defaultValidatorFn) => !['direction', 'padding'].includes(prop) && defaultValidatorFn(prop),
-})`
-  display: flex;
-  flex-direction: ${({ direction }) => direction};
-  flex-wrap: wrap;
-  padding: ${({ theme, padding = 0 }) => padding * theme.kitt.spacing}px;
-`;

package/src/stories/color-tokens.stories.tsx

@@ -1,143 +0,0 @@
-import { storiesOf } from '@storybook/react-native';
-import { Section, Story, StoryGrid } from '@ornikar/kitt-universal';
-import type { ReactElement } from 'react';
-import React from 'react';
-import styled, { useTheme } from 'styled-components/native';
-import type { TypographyProps } from '../typography/Typography';
-import { Typography } from '../typography/Typography';
-
-interface StyledColorTokenProps {
-  value: string;
-}
-
-const StyledColorToken = styled.View<StyledColorTokenProps>`
-  display: flex;
-  align-items: center;
-  padding: 24px 12px;
-  border-radius: 20px;
-  margin: 8px 0;
-  background-color: ${({ value }) => value};
-`;
-
-interface ColorTokenProps extends StyledColorTokenProps {
-  color?: TypographyProps['color'];
-  name: string;
-  value: string;
-}
-
-function ColorToken({ color, name, value }: ColorTokenProps): ReactElement {
-  return (
-    <StyledColorToken value={value}>
-      <Typography.Text base="body" color={color} variant="bold">
-        {name}
-      </Typography.Text>
-      <Typography.Text base="body" color={color}>
-        {value}
-      </Typography.Text>
-    </StyledColorToken>
-  );
-}
-
-function DesignTokensColors(): ReactElement {
-  const theme = useTheme();
-
-  return (
-    <Story title="Design Tokens">
-      <Section title="Late Ocean">
-        <StoryGrid.Row breakpoint="medium">
-          <StoryGrid.Col>
-            <ColorToken color="white" name="Late Ocean" value={theme.kitt.palettes.lateOcean.lateOcean} />
-          </StoryGrid.Col>
-          <StoryGrid.Col>
-            <ColorToken color="white" name="Late Ocean Light 1" value={theme.kitt.palettes.lateOcean.lateOceanLight1} />
-          </StoryGrid.Col>
-          <StoryGrid.Col>
-            <ColorToken color="white" name="Late Ocean Light 2" value={theme.kitt.palettes.lateOcean.lateOceanLight2} />
-          </StoryGrid.Col>
-          <StoryGrid.Col>
-            <ColorToken color="white" name="Late Ocean Light 3" value={theme.kitt.palettes.lateOcean.lateOceanLight3} />
-          </StoryGrid.Col>
-        </StoryGrid.Row>
-      </Section>
-
-      <Section title="Warm Embrace">
-        <StoryGrid.Row breakpoint="medium">
-          <StoryGrid.Col>
-            <ColorToken color="black" name="Warm Embrace" value={theme.kitt.palettes.lateOcean.warmEmbrace} />
-          </StoryGrid.Col>
-          <StoryGrid.Col>
-            <ColorToken
-              color="black"
-              name="Warm Embrace Light 1"
-              value={theme.kitt.palettes.lateOcean.warmEmbraceLight1}
-            />
-          </StoryGrid.Col>
-        </StoryGrid.Row>
-      </Section>
-
-      <Section title="Black">
-        <StoryGrid.Row breakpoint="medium">
-          <StoryGrid.Col>
-            <ColorToken color="white" name="Black 1000" value={theme.kitt.palettes.lateOcean.black1000} />
-          </StoryGrid.Col>
-          <StoryGrid.Col>
-            <ColorToken color="white" name="Black 555" value={theme.kitt.palettes.lateOcean.black555} />
-          </StoryGrid.Col>
-          <StoryGrid.Col>
-            <ColorToken color="black" name="Black 200" value={theme.kitt.palettes.lateOcean.black200} />
-          </StoryGrid.Col>
-          <StoryGrid.Col>
-            <ColorToken color="black" name="Black 100" value={theme.kitt.palettes.lateOcean.black100} />
-          </StoryGrid.Col>
-          <StoryGrid.Col>
-            <ColorToken color="black" name="Black 50" value={theme.kitt.palettes.lateOcean.black50} />
-          </StoryGrid.Col>
-          <StoryGrid.Col>
-            <ColorToken color="black" name="White" value={theme.kitt.palettes.lateOcean.white} />
-          </StoryGrid.Col>
-        </StoryGrid.Row>
-      </Section>
-
-      <Section title="Functional Colors">
-        <StoryGrid.Row breakpoint="medium">
-          <StoryGrid.Col>
-            <ColorToken color="white" name="Viride" value={theme.kitt.palettes.lateOcean.viride} />
-          </StoryGrid.Col>
-          <StoryGrid.Col>
-            <ColorToken color="white" name="English Vermillon" value={theme.kitt.palettes.lateOcean.englishVermillon} />
-          </StoryGrid.Col>
-          <StoryGrid.Col>
-            <ColorToken name="Gold Crayola" value={theme.kitt.palettes.lateOcean.goldCrayola} />
-          </StoryGrid.Col>
-          <StoryGrid.Col>
-            <ColorToken name="Aero" value={theme.kitt.palettes.lateOcean.aero} />
-          </StoryGrid.Col>
-        </StoryGrid.Row>
-      </Section>
-
-      <Section title="Brand Colors">
-        <StoryGrid.Row breakpoint="medium">
-          <StoryGrid.Col>
-            <ColorToken color="white" name="Primary" value={theme.kitt.colors.primary} />
-          </StoryGrid.Col>
-          <StoryGrid.Col>
-            <ColorToken name="Accent" value={theme.kitt.colors.accent} />
-          </StoryGrid.Col>
-          <StoryGrid.Col>
-            <ColorToken color="white" name="Success" value={theme.kitt.colors.success} />
-          </StoryGrid.Col>
-          <StoryGrid.Col>
-            <ColorToken color="white" name="Correct" value={theme.kitt.colors.correct} />
-          </StoryGrid.Col>
-          <StoryGrid.Col>
-            <ColorToken color="white" name="Alert" value={theme.kitt.colors.danger} />
-          </StoryGrid.Col>
-        </StoryGrid.Row>
-      </Section>
-    </Story>
-  );
-}
-
-storiesOf('kitt-universal/Design tokens', module).add('Colors', () => <DesignTokensColors />, {
-  jest: { ignore: true },
-});

package/src/stories-list.ts

@@ -1,22 +0,0 @@
-/* Please sort alphabetically */
-import './stories/color-tokens.stories';
-import './Avatar/Avatar.stories';
-import './Button/Button.stories';
-import './Card/Card.stories';
-import './forms/InputFeedback/InputFeedback.stories';
-import './forms/Label/Label.stories';
-import './forms/Radio/Radio.stories';
-import './forms/TextArea/TextArea.stories';
-import './forms/InputText/InputText.stories';
-import './Icon/Icon.stories';
-import './ListItem/ListItem.stories';
-import './Loader/Loader.stories';
-import './Message/Message.stories';
-import './Modal/Modal.stories';
-import './Notification/Notification.stories';
-import './Tag/Tag.stories';
-import './typography/Typography.stories';
-import './typography/TypographyIcon.stories';
-import './typography/TypographyLink.stories';
-import './FullScreenModal/FullScreenModal.stories';
-import './utils/windowSize/windowSize.stories';

package/src/story-components/Section.tsx

@@ -1,56 +0,0 @@
-import type { ReactElement, ReactNode } from 'react';
-import React from 'react';
-import type { ViewProps } from 'react-native';
-import styled from 'styled-components/native';
-import { StoryTitle } from './StoryTitle';
-
-const StyledSection = styled.View`
-  margin-bottom: 30px;
-`;
-
-interface SectionProps extends ViewProps {
-  title: string;
-  className?: string;
-  children: ReactNode;
-}
-
-export function Section({ title, className, children, ...props }: SectionProps): ReactElement {
-  return (
-    <StyledSection {...props}>
-      <StoryTitle.Level2>{title}</StoryTitle.Level2>
-      {children}
-    </StyledSection>
-  );
-}
-
-const StyledSubSection = styled.View`
-  margin-bottom: 20px;
-`;
-
-function SubSection({ title, className, children, ...props }: SectionProps): ReactElement {
-  return (
-    <StyledSubSection {...props}>
-      <StoryTitle.Level3>{title}</StoryTitle.Level3>
-      {children}
-    </StyledSubSection>
-  );
-}
-
-interface DemoSectionProps {
-  children: ReactNode;
-}
-
-const StyledDemoSection = styled.View`
-  margin-bottom: 90px;
-`;
-
-function DemoSection({ children }: DemoSectionProps): ReactElement {
-  return (
-    <StyledDemoSection>
-      <Section title="Demo">{children}</Section>
-    </StyledDemoSection>
-  );
-}
-
-Section.SubSection = SubSection;
-Section.DemoSection = DemoSection;

package/src/story-components/Story.tsx

@@ -1,24 +0,0 @@
-import type { ReactElement, ReactNode } from 'react';
-import React from 'react';
-import type { ScrollViewProps } from 'react-native';
-import styled from 'styled-components/native';
-import { StoryTitle } from './StoryTitle';
-
-export interface StoryProps {
-  title: ReactNode;
-  children: ReactNode;
-  contentContainerStyle?: ScrollViewProps['contentContainerStyle'];
-}
-
-const StoryContainer = styled.ScrollView`
-  padding: 10px;
-`;
-
-export function Story({ title, contentContainerStyle, children }: StoryProps): ReactElement {
-  return (
-    <StoryContainer contentContainerStyle={contentContainerStyle}>
-      <StoryTitle>{title}</StoryTitle>
-      {children}
-    </StoryContainer>
-  );
-}

package/src/story-components/StoryDecorator.tsx

@@ -1,8 +0,0 @@
-import type { StoryContext, StoryFn } from '@storybook/addons';
-import type { ReactNode } from 'react';
-import React from 'react';
-import { Story } from './Story';
-
-export function StoryDecorator(storyFn: StoryFn<ReactNode>, context: StoryContext): ReturnType<StoryFn<ReactNode>> {
-  return <Story title={context.name}>{storyFn()}</Story>;
-}

package/src/story-components/StoryGrid.tsx

@@ -1,80 +0,0 @@
-import type { ReactElement, ReactNode } from 'react';
-import React from 'react';
-import { useWindowDimensions } from 'react-native';
-import styled from 'styled-components/native';
-import type { TypographyProps } from '..';
-import { StoryTitle } from './StoryTitle';
-
-const SmallScreenRow = styled.View`
-  flex-direction: column;
-  margin: 0;
-`;
-
-const SmallScreenCol = styled.View`
-  padding: 10px 0 20px;
-`;
-
-const FlexRow = styled.View`
-  flex-direction: row;
-  margin: 0 -5px 20px;
-`;
-
-const FlexCol = styled.View`
-  flex-grow: 1;
-  flex-basis: 0;
-  margin: 0 5px 10px;
-`;
-
-export interface StoryGridRowProps {
-  children: NonNullable<ReactNode>;
-  breakpoint?: 'small' | 'medium';
-}
-
-function StoryGridRow({ children, breakpoint = 'small' }: StoryGridRowProps): ReactElement {
-  // eslint-disable-next-line unicorn/expiring-todo-comments
-  // TODO use useBreakpoint instead
-  const { width } = useWindowDimensions();
-  const breakpointValue = breakpoint === 'small' ? 480 : 768;
-
-  if (width < breakpointValue) {
-    return (
-      <SmallScreenRow>
-        {React.Children.map(children, (child) => (
-          <SmallScreenCol>{child}</SmallScreenCol>
-        ))}
-      </SmallScreenRow>
-    );
-  }
-
-  return (
-    <FlexRow>
-      {React.Children.map(children, (child) => (
-        <FlexCol>{child}</FlexCol>
-      ))}
-    </FlexRow>
-  );
-}
-
-export interface StoryGridColProps {
-  children: NonNullable<ReactNode>;
-  title?: string;
-  titleColor?: TypographyProps['color'];
-}
-
-function StoryGridCol({ title, titleColor, children }: StoryGridColProps): ReactElement {
-  return (
-    <>
-      {title ? (
-        <StoryTitle.Level4 numberOfLines={1} color={titleColor}>
-          {title}
-        </StoryTitle.Level4>
-      ) : null}
-      {children}
-    </>
-  );
-}
-
-export const StoryGrid = {
-  Row: StoryGridRow,
-  Col: StoryGridCol,
-};

package/src/story-components/StoryTitle.stories.tsx

@@ -1,12 +0,0 @@
-import { storiesOf } from '@storybook/react-native';
-import React from 'react';
-import { Section } from './Section';
-import { StoryTitle } from './StoryTitle';
-
-storiesOf('kitt-universal/story-components', module).add('StoryTitle', () => (
-  <Section title="Story Title">
-    <StoryTitle>Title level 1</StoryTitle>
-    <StoryTitle.Level2>Title level 2</StoryTitle.Level2>
-    <StoryTitle.Level3>Title level 3</StoryTitle.Level3>
-  </Section>
-));

package/src/story-components/StoryTitle.tsx

@@ -1,69 +0,0 @@
-import type { ReactElement, ReactNode } from 'react';
-import React from 'react';
-import styled from 'styled-components/native';
-import type { TypographyProps } from '../typography/Typography';
-import { Typography } from '../typography/Typography';
-
-interface StoryTitleProps {
-  color?: TypographyProps['color'];
-  numberOfLines?: TypographyProps['numberOfLines'];
-  children: ReactNode;
-}
-
-const StoryTitleContainer = styled.View`
-  margin-bottom: 30px;
-`;
-
-const StorySubTitleContainer = styled.View`
-  margin-bottom: 10px;
-`;
-
-export function StoryTitle({ color, children, numberOfLines }: StoryTitleProps): ReactElement {
-  return (
-    <StoryTitleContainer>
-      <Typography.h1 variant="bold" base="header1" color={color} numberOfLines={numberOfLines}>
-        {children}
-      </Typography.h1>
-    </StoryTitleContainer>
-  );
-}
-
-function StoryTitleLevel2({ color, children, numberOfLines }: StoryTitleProps): ReactElement {
-  return (
-    <StoryTitleContainer>
-      <Typography.h2 variant="bold" base="header2" color={color} numberOfLines={numberOfLines}>
-        {children}
-      </Typography.h2>
-    </StoryTitleContainer>
-  );
-}
-
-StoryTitleLevel2.displayName = 'StoryTitle.Level2';
-
-function StoryTitleLevel3({ color, children, numberOfLines }: StoryTitleProps): ReactElement {
-  return (
-    <StorySubTitleContainer>
-      <Typography.h3 variant="bold" base="header3" medium="header4" color={color} numberOfLines={numberOfLines}>
-        {children}
-      </Typography.h3>
-    </StorySubTitleContainer>
-  );
-}
-
-StoryTitleLevel3.displayName = 'StoryTitle.Level3';
-
-function StoryTitleLevel4({ color, children, numberOfLines }: StoryTitleProps): ReactElement {
-  return (
-    <StorySubTitleContainer>
-      <Typography.h4 variant="bold" base="header4" medium="header5" color={color} numberOfLines={numberOfLines}>
-        {children}
-      </Typography.h4>
-    </StorySubTitleContainer>
-  );
-}
-
-StoryTitleLevel4.displayName = 'StoryTitle.Level3';
-
-StoryTitle.Level2 = StoryTitleLevel2;
-StoryTitle.Level3 = StoryTitleLevel3;
-StoryTitle.Level4 = StoryTitleLevel4;

package/src/story-components/__snapshots__/StoryTitle.stories.tsx.snap

@@ -1,155 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`kitt-universal/story-components StoryTitle 1`] = `
-<RNCSafeAreaProvider
-  onInsetsChange={[Function]}
-  style={
-    Array [
-      Object {
-        "flex": 1,
-      },
-      undefined,
-    ]
-  }
->
-  <View
-    style={
-      Array [
-        Object {
-          "marginBottom": 30,
-        },
-      ]
-    }
-  >
-    <View
-      style={
-        Array [
-          Object {
-            "marginBottom": 30,
-          },
-        ]
-      }
-    >
-      <Text
-        aria-level="2"
-        color="black"
-        isHeader={true}
-        style={
-          Array [
-            Object {
-              "color": "#000000",
-              "fontFamily": "Moderat-Extended-Bold",
-              "fontSize": 32,
-              "fontStyle": "normal",
-              "fontWeight": "400",
-              "lineHeight": 42,
-              "textDecorationColor": "#000000",
-            },
-          ]
-        }
-        type="header2"
-        variant="bold"
-      >
-        Story Title
-      </Text>
-    </View>
-    <View
-      style={
-        Array [
-          Object {
-            "marginBottom": 30,
-          },
-        ]
-      }
-    >
-      <Text
-        aria-level="1"
-        color="black"
-        isHeader={true}
-        style={
-          Array [
-            Object {
-              "color": "#000000",
-              "fontFamily": "Moderat-Extended-Bold",
-              "fontSize": 38,
-              "fontStyle": "normal",
-              "fontWeight": "400",
-              "lineHeight": 49,
-              "textDecorationColor": "#000000",
-            },
-          ]
-        }
-        type="header1"
-        variant="bold"
-      >
-        Title level 1
-      </Text>
-    </View>
-    <View
-      style={
-        Array [
-          Object {
-            "marginBottom": 30,
-          },
-        ]
-      }
-    >
-      <Text
-        aria-level="2"
-        color="black"
-        isHeader={true}
-        style={
-          Array [
-            Object {
-              "color": "#000000",
-              "fontFamily": "Moderat-Extended-Bold",
-              "fontSize": 32,
-              "fontStyle": "normal",
-              "fontWeight": "400",
-              "lineHeight": 42,
-              "textDecorationColor": "#000000",
-            },
-          ]
-        }
-        type="header2"
-        variant="bold"
-      >
-        Title level 2
-      </Text>
-    </View>
-    <View
-      style={
-        Array [
-          Object {
-            "marginBottom": 10,
-          },
-        ]
-      }
-    >
-      <Text
-        aria-level="3"
-        color="black"
-        isHeader={true}
-        medium="header4"
-        style={
-          Array [
-            Object {
-              "color": "#000000",
-              "fontFamily": "Moderat-Extended-Bold",
-              "fontSize": 24,
-              "fontStyle": "normal",
-              "fontWeight": "400",
-              "lineHeight": 31,
-              "textDecorationColor": "#000000",
-            },
-          ]
-        }
-        type="header3"
-        variant="bold"
-      >
-        Title level 3
-      </Text>
-    </View>
-  </View>
-</RNCSafeAreaProvider>
-`;

package/src/story-components/index.ts

@@ -1,5 +0,0 @@
-export { Section } from './Section';
-export { Story } from './Story';
-export { StoryDecorator } from './StoryDecorator';
-export { StoryGrid } from './StoryGrid';
-export { StoryTitle } from './StoryTitle';