@ornikar/kitt-universal 1.0.0 → 1.0.1

package/src/Modal/Body.tsx

@@ -1,20 +0,0 @@
-import type { ReactNode } from 'react';
-import React, { forwardRef } from 'react';
-import { ScrollView } from 'react-native';
-import styled from 'styled-components/native';
-
-const BodyView = styled.View`
-  padding: ${({ theme }) => theme.kitt.spacing * 6}px ${({ theme }) => theme.kitt.spacing * 4}px;
-`;
-
-export interface BodyProps {
-  children: NonNullable<ReactNode>;
-}
-
-export const ModalBody = forwardRef<ScrollView, BodyProps>(({ children }, ref) => {
-  return (
-    <ScrollView ref={ref}>
-      <BodyView>{children}</BodyView>
-    </ScrollView>
-  );
-});

package/src/Modal/Footer.tsx

@@ -1,18 +0,0 @@
-import type { ReactElement, ReactNode } from 'react';
-import React from 'react';
-import styled from 'styled-components/native';
-
-export interface FooterProps {
-  children: NonNullable<ReactNode>;
-}
-
-const FooterView = styled.View`
-  flex: 0 0 auto;
-  padding: ${({ theme }) => theme.kitt.spacing * 4}px;
-  border-top-width: 1px;
-  border-top-color: ${({ theme }) => theme.kitt.colors.separator};
-`;
-
-export function ModalFooter({ children }: FooterProps): ReactElement {
-  return <FooterView>{children}</FooterView>;
-}

package/src/Modal/Header.tsx

@@ -1,66 +0,0 @@
-import { XIcon } from '@ornikar/kitt-icons';
-import type { ReactElement, ReactNode } from 'react';
-import React, { useContext } from 'react';
-import styled from 'styled-components/native';
-import { Button } from '../Button/Button';
-import { OnCloseContext } from './OnCloseContext';
-
-export interface HeaderProps {
-  children: NonNullable<ReactNode>;
-  left?: ReactNode;
-  right?: ReactNode;
-}
-
-const HeaderView = styled.View`
-  position: relative;
-  padding: ${({ theme }) => theme.kitt.spacing * 2}px;
-  display: flex;
-  flex: 0 0 auto;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom-width: 1px;
-  border-bottom-color: ${({ theme }) => theme.kitt.colors.separator};
-  min-height: 57px;
-`;
-
-const LeftIconView = styled.View`
-  align-self: flex-start;
-  margin-right: ${({ theme }) => theme.kitt.spacing * 2}px;
-`;
-
-const RightIconView = styled.View`
-  align-self: flex-start;
-  margin-left: ${({ theme }) => theme.kitt.spacing * 2}px;
-`;
-
-interface TitleViewProps {
-  isIconLeft?: boolean;
-}
-
-const TitleView = styled.View<TitleViewProps>`
-  padding-left: ${({ theme, isIconLeft }) => (isIconLeft ? 0 : theme.kitt.spacing * 2)}px;
-  flex-shrink: 1;
-`;
-
-export function ModalHeader({ left, right, children }: HeaderProps): ReactElement {
-  const onClose = useContext(OnCloseContext);
-
-  const isIconLeft = !!left;
-
-  return (
-    <HeaderView>
-      {isIconLeft && <LeftIconView>{left}</LeftIconView>}
-
-      <TitleView isIconLeft={isIconLeft}>{children}</TitleView>
-
-      {right !== undefined ? (
-        right
-      ) : (
-        <RightIconView>
-          <Button type="subtle-dark" icon={<XIcon />} onPress={onClose} />
-        </RightIconView>
-      )}
-    </HeaderView>
-  );
-}

package/src/Modal/Modal.stories.tsx

@@ -1,181 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { storiesOf } from '@storybook/react-native';
-import { ArrowLeftIcon, CalendarIcon } from '@ornikar/kitt-icons';
-import { Section } from '@ornikar/kitt-universal';
-import type { ReactElement } from 'react';
-import React, { useState } from 'react';
-import type { Except } from 'type-fest';
-import { Typography } from '..';
-import { Button } from '../Button/Button';
-import type { ModalProps } from './Modal';
-import { Modal } from './Modal';
-
-type ModalWrapperProps = Except<ModalProps, 'visible' | 'onClose'>;
-
-function ModalWrapper(props: ModalWrapperProps): ReactElement {
-  const [visible, setVisible] = useState<boolean>(false);
-
-  return (
-    <>
-      <Button type="primary" onPress={() => setVisible((prev) => !prev)}>
-        <Typography.Text base="body">Toggle modal</Typography.Text>
-      </Button>
-
-      <Modal visible={visible} onClose={() => setVisible(false)} {...props} />
-    </>
-  );
-}
-
-storiesOf('kitt-universal/Modal', module)
-  .add('Default', () => (
-    <Section title="Default">
-      <ModalWrapper>
-        <Modal.Header>
-          <Typography.Text base="body" variant="bold">
-            Title
-          </Typography.Text>
-        </Modal.Header>
-
-        <Modal.Body>
-          <Typography.Text base="body">Modal body goes here...</Typography.Text>
-        </Modal.Body>
-      </ModalWrapper>
-    </Section>
-  ))
-  .add('With a Long Heading', () => {
-    return (
-      <Section title="With a Long Heading">
-        <ModalWrapper>
-          <Modal.Header>
-            <Typography.Text base="body" variant="bold">
-              The original Knight Rider series followed the adventures of Michael Knight, a modern-day crime fighter who
-              uses a technologically advanced, artificially intelligent automobile. This car is virtually
-              indestructible, due to a high-tech coating applied to it.
-            </Typography.Text>
-          </Modal.Header>
-
-          <Modal.Body>
-            <Typography.Text base="body">Modal body goes here...</Typography.Text>
-          </Modal.Body>
-        </ModalWrapper>
-      </Section>
-    );
-  })
-  .add('With Left Action', () => (
-    <Section title="With Left Action">
-      <ModalWrapper>
-        <Modal.Header
-          left={<Button type="subtle-dark" icon={<ArrowLeftIcon />} onPress={action('On Left Action Press')} />}
-        >
-          <Typography.Text base="body" variant="bold">
-            Title
-          </Typography.Text>
-        </Modal.Header>
-
-        <Modal.Body>
-          <Typography.Text base="body">Modal body goes here...</Typography.Text>
-        </Modal.Body>
-      </ModalWrapper>
-    </Section>
-  ))
-  .add('With Custom Right Action', () => {
-    return (
-      <Section title="With Custom Right Action">
-        <ModalWrapper>
-          <Modal.Header
-            right={<Button type="subtle-dark" icon={<CalendarIcon />} onPress={action('On Right Action Press')} />}
-          >
-            <Typography.Text base="body" variant="bold">
-              Title
-            </Typography.Text>
-          </Modal.Header>
-
-          <Modal.Body>
-            <Typography.Text base="body">Modal body goes here...</Typography.Text>
-          </Modal.Body>
-        </ModalWrapper>
-      </Section>
-    );
-  })
-  .add('With Footer', () => {
-    return (
-      <Section title="With Footer">
-        <ModalWrapper>
-          <Modal.Header>
-            <Typography.Text base="body" variant="bold">
-              Title
-            </Typography.Text>
-          </Modal.Header>
-
-          <Modal.Body>
-            <Typography.Text base="body">
-              The original Knight Rider series followed the adventures of Michael Knight, a modern-day crime fighter who
-              uses a technologically advanced, artificially intelligent automobile. This car is virtually
-              indestructible, due to a high-tech coating applied to it.
-            </Typography.Text>
-          </Modal.Body>
-
-          <Modal.Footer>
-            <Button stretch type="primary" onPress={action('On Press Primary')}>
-              <Typography.Text base="body" variant="bold">
-                Primary
-              </Typography.Text>
-            </Button>
-
-            <Button stretch type="subtle" onPress={action('On Press Secondary')}>
-              <Typography.Text base="body" variant="bold">
-                Secondary
-              </Typography.Text>
-            </Button>
-          </Modal.Footer>
-        </ModalWrapper>
-      </Section>
-    );
-  })
-  .add('With Long Content', () => (
-    <Section title="With Long Content">
-      <ModalWrapper>
-        <Modal.Header>
-          <Typography.Text base="body" variant="bold">
-            Title
-          </Typography.Text>
-        </Modal.Header>
-
-        <Modal.Body>
-          <Typography.Text base="body">
-            The original Knight Rider series followed the adventures of Michael Knight, a modern-day crime fighter who
-            uses a technologically advanced, artificially intelligent automobile. This car is virtually indestructible,
-            due to a high-tech coating applied to it.
-          </Typography.Text>
-
-          <Typography.Text base="body">
-            Knight Rider stories usually depict either average citizens, or ethical heads of corporations, being bullied
-            series is instructed by the Foundation for Law and Government (FLAG) to assist in some manner. The
-          </Typography.Text>
-
-          <Typography.Text base="body">
-            KITT is essentially an advanced supercomputer on wheels. The brain of KITT is the Knight 2000 microprocessor
-            which is the centre of a self-aware cybernetic logic module that allowed KITT to think, learn, communicate
-            and interact with humans. He always had an ego that was easy to bruise and displayed a very sensitive, but
-            kind and dryly humorous personality. He also has an in-dash entertainment system that can play music and
-            video, and run various computer programs including arcade games which Michael sometimes indulged in while
-            KITT was driving.
-          </Typography.Text>
-        </Modal.Body>
-
-        <Modal.Footer>
-          <Button stretch type="primary" onPress={action('On Press Primary')}>
-            <Typography.Text base="body" variant="bold">
-              Primary
-            </Typography.Text>
-          </Button>
-
-          <Button stretch type="subtle" onPress={action('On Press Secondary')}>
-            <Typography.Text base="body" variant="bold">
-              Secondary
-            </Typography.Text>
-          </Button>
-        </Modal.Footer>
-      </ModalWrapper>
-    </Section>
-  ));

package/src/Modal/Modal.tsx

@@ -1,66 +0,0 @@
-import type { ReactElement, ReactNode } from 'react';
-import React from 'react';
-import { Modal as NativeModal } from 'react-native';
-import styled from 'styled-components/native';
-import { Overlay } from '../Overlay/Overlay';
-import { ModalBody } from './Body';
-import { ModalFooter } from './Footer';
-import { ModalHeader } from './Header';
-import { OnCloseContext } from './OnCloseContext';
-
-export interface ModalProps {
-  visible: boolean;
-  children: ReactNode;
-  onClose: () => void;
-  onEntered?: () => void;
-  onExited?: () => void;
-}
-
-const ModalView = styled.View`
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: ${({ theme }) => theme.kitt.spacing * 20}px ${({ theme }) => theme.kitt.spacing * 4}px;
-`;
-
-const ContentView = styled.View`
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  max-height: 100%;
-  max-width: 540px;
-  height: auto;
-  width: 100%;
-  border-radius: ${({ theme }) => theme.kitt.card.borderRadius};
-  background-color: ${({ theme }) => theme.kitt.palettes.lateOcean.white};
-`;
-
-export function Modal({ visible, children, onClose, onEntered, onExited }: ModalProps): ReactElement {
-  return (
-    <OnCloseContext.Provider value={onClose}>
-      <NativeModal
-        transparent
-        animationType="fade"
-        visible={visible}
-        onShow={onEntered}
-        onDismiss={onExited}
-        onRequestClose={onClose}
-      >
-        <ModalView>
-          <Overlay onPress={onClose} />
-
-          <ContentView>{children}</ContentView>
-        </ModalView>
-      </NativeModal>
-    </OnCloseContext.Provider>
-  );
-}
-
-Modal.Header = ModalHeader;
-Modal.Body = ModalBody;
-Modal.Footer = ModalFooter;

package/src/Modal/OnCloseContext.ts

@@ -1,3 +0,0 @@
-import { createContext } from 'react';
-
-export const OnCloseContext = createContext<() => void>(() => {});