@ornikar/kitt-universal 1.0.0 → 1.0.1

package/src/Button/useButton.ts

@@ -1,14 +0,0 @@
-import { useState } from 'react';
-
-export const useButton = (): {
-  isPressed: boolean;
-  handleButtonPressIn: () => void;
-  handleButtonPressOut: () => void;
-} => {
-  const [isPressed, setIsPressed] = useState<boolean>(false);
-
-  const handleButtonPressIn = (): void => setIsPressed(true);
-  const handleButtonPressOut = (): void => setIsPressed(false);
-
-  return { isPressed, handleButtonPressIn, handleButtonPressOut };
-};

package/src/Card/Card.stories.tsx

@@ -1,31 +0,0 @@
-import { storiesOf } from '@storybook/react-native';
-import { Section, Story } from '@ornikar/kitt-universal';
-import React from 'react';
-import { Typography } from '../typography/Typography';
-import { Card } from './Card';
-
-storiesOf('kitt-universal/Data Display', module).add('Card', () => (
-  <Story title="Card">
-    <Section title="Primary">
-      <Card type="primary">
-        <Typography base="body" accessibilityRole="text">
-          Some text goes here
-        </Typography>
-      </Card>
-    </Section>
-    <Section title="Secondary">
-      <Card type="secondary">
-        <Typography base="body" accessibilityRole="text">
-          Some text goes here
-        </Typography>
-      </Card>
-    </Section>
-    <Section title="Subtle">
-      <Card type="subtle">
-        <Typography base="body" accessibilityRole="text">
-          Some text goes here
-        </Typography>
-      </Card>
-    </Section>
-  </Story>
-));

package/src/Card/Card.tsx

@@ -1,25 +0,0 @@
-import type { ReactElement, ReactNode } from 'react';
-import React from 'react';
-import styled from 'styled-components/native';
-
-type CardType = 'primary' | 'secondary' | 'subtle';
-
-export interface CardProps {
-  children: NonNullable<ReactNode>;
-  type: CardType;
-}
-interface ContainerProps {
-  type: CardType;
-}
-
-const Container = styled.View<ContainerProps>`
-  background-color: ${({ theme, type }) => theme.kitt.card[type].backgroundColor};
-  padding: ${({ theme }) => theme.kitt.card.padding};
-  border-radius: ${({ theme }) => theme.kitt.card.borderRadius};
-  border-width: ${({ theme }) => theme.kitt.card.borderWidth};
-  border-color: ${({ theme, type }) => theme.kitt.card[type].borderColor};
-`;
-
-export function Card({ children, type }: CardProps): ReactElement {
-  return <Container type={type}>{children}</Container>;
-}

package/src/Card/__snapshots__/Card.stories.tsx.snap

@@ -1,306 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`kitt-universal/Data Display Card 1`] = `
-<RNCSafeAreaProvider
-  onInsetsChange={[Function]}
-  style={
-    Array [
-      Object {
-        "flex": 1,
-      },
-      undefined,
-    ]
-  }
->
-  <RCTScrollView
-    style={
-      Array [
-        Object {
-          "paddingBottom": 10,
-          "paddingLeft": 10,
-          "paddingRight": 10,
-          "paddingTop": 10,
-        },
-      ]
-    }
-  >
-    <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"
-        >
-          Card
-        </Text>
-      </View>
-      <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"
-          >
-            Primary
-          </Text>
-        </View>
-        <View
-          style={
-            Array [
-              Object {
-                "backgroundColor": "#FFFFFF",
-                "borderColor": "#4C34E0",
-                "borderRadius": 20,
-                "borderWidth": 2,
-                "paddingBottom": 16,
-                "paddingLeft": 16,
-                "paddingRight": 16,
-                "paddingTop": 16,
-              },
-            ]
-          }
-          type="primary"
-        >
-          <Text
-            color="black"
-            isHeader={false}
-            style={
-              Array [
-                Object {
-                  "color": "#000000",
-                  "fontFamily": "NotoSans",
-                  "fontSize": 16,
-                  "fontStyle": "normal",
-                  "fontWeight": "400",
-                  "lineHeight": 26,
-                  "textDecorationColor": "#000000",
-                },
-              ]
-            }
-            type="body"
-            variant="regular"
-          >
-            Some text goes here
-          </Text>
-        </View>
-      </View>
-      <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"
-          >
-            Secondary
-          </Text>
-        </View>
-        <View
-          style={
-            Array [
-              Object {
-                "backgroundColor": "#FFFFFF",
-                "borderColor": "#E5E5E5",
-                "borderRadius": 20,
-                "borderWidth": 2,
-                "paddingBottom": 16,
-                "paddingLeft": 16,
-                "paddingRight": 16,
-                "paddingTop": 16,
-              },
-            ]
-          }
-          type="secondary"
-        >
-          <Text
-            color="black"
-            isHeader={false}
-            style={
-              Array [
-                Object {
-                  "color": "#000000",
-                  "fontFamily": "NotoSans",
-                  "fontSize": 16,
-                  "fontStyle": "normal",
-                  "fontWeight": "400",
-                  "lineHeight": 26,
-                  "textDecorationColor": "#000000",
-                },
-              ]
-            }
-            type="body"
-            variant="regular"
-          >
-            Some text goes here
-          </Text>
-        </View>
-      </View>
-      <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"
-          >
-            Subtle
-          </Text>
-        </View>
-        <View
-          style={
-            Array [
-              Object {
-                "backgroundColor": "#F2F2F2",
-                "borderColor": "#E5E5E5",
-                "borderRadius": 20,
-                "borderWidth": 2,
-                "paddingBottom": 16,
-                "paddingLeft": 16,
-                "paddingRight": 16,
-                "paddingTop": 16,
-              },
-            ]
-          }
-          type="subtle"
-        >
-          <Text
-            color="black"
-            isHeader={false}
-            style={
-              Array [
-                Object {
-                  "color": "#000000",
-                  "fontFamily": "NotoSans",
-                  "fontSize": 16,
-                  "fontStyle": "normal",
-                  "fontWeight": "400",
-                  "lineHeight": 26,
-                  "textDecorationColor": "#000000",
-                },
-              ]
-            }
-            type="body"
-            variant="regular"
-          >
-            Some text goes here
-          </Text>
-        </View>
-      </View>
-    </View>
-  </RCTScrollView>
-</RNCSafeAreaProvider>
-`;

package/src/FullScreenModal/Body.tsx

@@ -1,25 +0,0 @@
-import type { ReactElement, ReactNode } from 'react';
-import React from 'react';
-import styled from 'styled-components/native';
-import { KittBreakpoints } from '../KittBreakpoints';
-
-const Body = styled.View`
-  ${({ theme }) =>
-    theme.responsive.ifWindowSizeMatches(
-      { minWidth: KittBreakpoints.MEDIUM },
-      `padding-right: ${theme.kitt.spacing * 12}px;
-      padding-left: ${theme.kitt.spacing * 12}px;`,
-      `padding-right: ${theme.kitt.spacing * 6}px;
-      padding-left: ${theme.kitt.spacing * 6}px;`,
-    )}
-  background-color: ${({ theme }) => theme.kitt.colors.uiBackgroundLight};
-  flex: 1;
-`;
-
-interface BodyProps {
-  children: NonNullable<ReactNode>;
-}
-
-export function FullScreenModalBody({ children }: BodyProps): ReactElement {
-  return <Body>{children}</Body>;
-}

package/src/FullScreenModal/FullScreenModal.stories.tsx

@@ -1,63 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { storiesOf } from '@storybook/react-native';
-import { ArrowLeftIcon, XIcon } from '@ornikar/kitt-icons';
-import { Story } from '@ornikar/kitt-universal';
-import React from 'react';
-import { Button } from '../Button/Button';
-import { Typography } from '../typography/Typography';
-import { FullScreenModal } from './FullScreenModal';
-
-storiesOf('kitt-universal/FullScreenModal', module)
-  .add('Full Screen Modal', () => (
-    <Story title="Default">
-      <FullScreenModal>
-        <FullScreenModal.Header
-          right={
-            <Button type="subtle" onPress={action('close')}>
-              <Typography.Text base="body-large" variant="bold">
-                Ok
-              </Typography.Text>
-            </Button>
-          }
-        >
-          <Typography.Text base="body-large" variant="bold">
-            Title
-          </Typography.Text>
-        </FullScreenModal.Header>
-        <FullScreenModal.Body>
-          <Typography.Text base="body">Content</Typography.Text>
-        </FullScreenModal.Body>
-      </FullScreenModal>
-    </Story>
-  ))
-  .add('Left and Right Header Actions', () => (
-    <Story title="Left and Right action">
-      <FullScreenModal>
-        <FullScreenModal.Header
-          left={<Button type="subtle" icon={<ArrowLeftIcon />} />}
-          right={<Button type="subtle" icon={<XIcon />} onPress={action('close')} />}
-        >
-          <Typography.Text base="body-large" variant="bold">
-            Title
-          </Typography.Text>
-        </FullScreenModal.Header>
-        <FullScreenModal.Body>
-          <Typography.Text base="body">Content</Typography.Text>
-        </FullScreenModal.Body>
-      </FullScreenModal>
-    </Story>
-  ))
-  .add('No Header Actions', () => (
-    <Story title="No Header Actions">
-      <FullScreenModal>
-        <FullScreenModal.Header>
-          <Typography.Text base="body-large" variant="bold">
-            Title
-          </Typography.Text>
-        </FullScreenModal.Header>
-        <FullScreenModal.Body>
-          <Typography.Text base="body">Content</Typography.Text>
-        </FullScreenModal.Body>
-      </FullScreenModal>
-    </Story>
-  ));

package/src/FullScreenModal/FullScreenModal.tsx

@@ -1,21 +0,0 @@
-import type { ReactElement, ReactNode } from 'react';
-import React from 'react';
-import styled from 'styled-components/native';
-import { FullScreenModalBody } from './Body';
-import { FullScreenModalHeader } from './Header';
-
-const Container = styled.View`
-  flex: 1;
-  background-color: ${({ theme }) => theme.kitt.colors.uiBackground};
-`;
-
-export interface FullScreenModalProps {
-  children: ReactNode;
-}
-
-export function FullScreenModal({ children }: FullScreenModalProps): ReactElement {
-  return <Container>{children}</Container>;
-}
-
-FullScreenModal.Header = FullScreenModalHeader;
-FullScreenModal.Body = FullScreenModalBody;

package/src/FullScreenModal/Header.tsx

@@ -1,129 +0,0 @@
-import type { ReactElement, ReactNode } from 'react';
-import React, { useState } from 'react';
-import type { LayoutChangeEvent } from 'react-native';
-import { Platform, useWindowDimensions } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import styled from 'styled-components/native';
-import { KittBreakpoints } from '../KittBreakpoints';
-
-interface SideContainerProps {
-  side?: 'left' | 'right';
-}
-
-const SideContainer = styled.View<SideContainerProps>`
-  ${({ theme, side = 'left' }) => {
-    const padding = theme.kitt.spacing * 2;
-
-    if (side === 'left') {
-      return `padding-right: ${padding}px;`;
-    }
-
-    return `padding-left: ${padding}px;`;
-  }}
-`;
-
-function getHeaderHorizontalMediumPadding(spacing: number): number {
-  return spacing * 6;
-}
-
-interface HeaderProps {
-  insetTop?: number;
-}
-
-const Header = styled.View<HeaderProps>`
-  ${({ theme, insetTop = 0 }) => {
-    const paddingTop = insetTop + theme.kitt.fullScreenModal.header.paddingVertical;
-    const { paddingVertical, paddingHorizontal } = theme.kitt.fullScreenModal.header;
-
-    return theme.responsive.ifWindowSizeMatches(
-      { minWidth: KittBreakpoints.MEDIUM },
-      `padding: ${paddingTop}px ${getHeaderHorizontalMediumPadding(theme.kitt.spacing)}px ${paddingVertical}px;`,
-      `padding: ${paddingTop}px ${paddingHorizontal}px ${paddingVertical}px;`,
-    );
-  }};
-  border-bottom-color: ${({ theme }) => theme.kitt.fullScreenModal.header.borderColor};
-  border-bottom-width: 1px;
-  flex-direction: row;
-  align-items: center;
-`;
-
-interface HeaderContentProps {
-  windowWidth: number;
-  leftWidth: number;
-  rightWidth: number;
-}
-
-const HeaderContent = styled.View<HeaderContentProps>`
-  ${({ theme, leftWidth, rightWidth, windowWidth }) => {
-    /*
-     * Since we don't have controll over the rendered left and right elements,
-     * we must apply some logic to give the title all the available space
-     */
-    const sideElementMaxWidth = Math.max(leftWidth, rightWidth);
-
-    const parentHorizontalPadding = theme.kitt.fullScreenModal.header.paddingHorizontal * 2;
-    const parentHorizontalPaddingMedium = getHeaderHorizontalMediumPadding(theme.kitt.spacing) * 2;
-
-    const computeWidth = (breakpointPadding: number): number =>
-      windowWidth - breakpointPadding - sideElementMaxWidth * 2;
-
-    return theme.responsive.ifWindowSizeMatches(
-      { minWidth: KittBreakpoints.MEDIUM },
-      `width: ${computeWidth(parentHorizontalPaddingMedium)}px;`,
-      `width: ${computeWidth(parentHorizontalPadding)}px;`,
-    );
-  }};
-  ${({ leftWidth, rightWidth }) => {
-    // Depending of the wider element, we must add a margin to fill the diff in space between elements
-    const deltaMargin = Math.abs(leftWidth - rightWidth);
-
-    if (leftWidth > rightWidth) {
-      return `margin-right: ${deltaMargin}px;`;
-    }
-
-    return `margin-left: ${deltaMargin}px;`;
-  }};
-  justify-content: center;
-  align-items: center;
-`;
-
-export interface FullScreenModalHeaderProps {
-  children: NonNullable<ReactNode>;
-  right?: ReactNode;
-  left?: ReactNode;
-}
-
-export function FullScreenModalHeader({ children, right, left }: FullScreenModalHeaderProps): ReactElement {
-  const { top } = useSafeAreaInsets();
-  const dimensions = useWindowDimensions();
-  const [leftWidth, setLeftWidth] = useState(0);
-  const [rightWidth, setRightWidth] = useState(0);
-
-  const handleLayoutChange = (event: LayoutChangeEvent, side: 'left' | 'right'): void => {
-    // Prevents react to nullify event on rerenders
-    event.persist();
-
-    if (side === 'left') {
-      setLeftWidth(event.nativeEvent.layout.width);
-      return;
-    }
-
-    setRightWidth(event.nativeEvent.layout.width);
-  };
-
-  return (
-    <Header insetTop={Platform.OS === 'ios' ? undefined : top}>
-      {left ? <SideContainer onLayout={(e) => handleLayoutChange(e, 'left')}>{left}</SideContainer> : null}
-
-      <HeaderContent windowWidth={dimensions.width} leftWidth={leftWidth} rightWidth={rightWidth}>
-        {children}
-      </HeaderContent>
-
-      {right ? (
-        <SideContainer side="right" onLayout={(e) => handleLayoutChange(e, 'right')}>
-          {right}
-        </SideContainer>
-      ) : null}
-    </Header>
-  );
-}