@ornikar/kitt-universal 1.0.0 → 1.0.1

package/src/KittBreakpoints.ts

@@ -1,44 +0,0 @@
-export const KittBreakpoints = {
-  /**
-   * min-width: 0
-   */
-  BASE: 0,
-  /**
-   * min-width: 480px
-   */
-  SMALL: 480,
-  /**
-   * min-width: 768px
-   */
-  MEDIUM: 768,
-  /**
-   * min-width: 1024px
-   */
-  LARGE: 1024,
-  /**
-   * min-width: 1280px
-   */
-  WIDE: 1280,
-};
-
-export const KittBreakpointsMax = {
-  /**
-   * max-width: 479px
-   */
-  BASE: KittBreakpoints.SMALL - 1,
-  /**
-   * max-width: 767px
-   */
-  SMALL: KittBreakpoints.MEDIUM - 1,
-  /**
-   * max-width: 1023px
-   */
-  MEDIUM: KittBreakpoints.LARGE - 1,
-  /**
-   * max-width: 1279px
-   */
-  LARGE: KittBreakpoints.WIDE - 1,
-};
-
-export type KittBreakpoint = typeof KittBreakpoints[keyof typeof KittBreakpoints];
-export type KittBreakpointMax = typeof KittBreakpointsMax[keyof typeof KittBreakpointsMax];

package/src/ListItem/ListItem.stories.tsx

@@ -1,122 +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 { Avatar, ChevronRightIcon, Typography, TypographyIcon, UserIcon } from '..';
-import { ListItem } from './ListItem';
-
-storiesOf('kitt-universal/Data Display', module).add('List Item', () => (
-  <Story title="List Item">
-    <Section.DemoSection>
-      <ListItem
-        withPadding
-        borders="both"
-        left={
-          <ListItem.SideContent>
-            <Avatar />
-          </ListItem.SideContent>
-        }
-        right={
-          <ListItem.SideContent align="center">
-            <TypographyIcon icon={<ChevronRightIcon />} />
-          </ListItem.SideContent>
-        }
-        onPress={action('On Press')}
-      >
-        <Typography.Text base="body" ellipsizeMode="tail" numberOfLines={2}>
-          List Item - Demo
-        </Typography.Text>
-      </ListItem>
-    </Section.DemoSection>
-
-    <Section title="Default">
-      <ListItem onPress={action('On Press')}>
-        <Typography.Text base="body">List Item - Default</Typography.Text>
-      </ListItem>
-    </Section>
-
-    <Section title="With Padding">
-      <ListItem withPadding onPress={action('On Press')}>
-        <Typography.Text base="body">List Item - With Padding</Typography.Text>
-      </ListItem>
-    </Section>
-
-    <Section title="With Borders">
-      <ListItem borders="both" onPress={action('On Press')}>
-        <Typography.Text base="body">List Item - With Borders</Typography.Text>
-      </ListItem>
-    </Section>
-
-    <Section title="With Right Content">
-      <Section.SubSection title="center">
-        <ListItem
-          right={
-            <ListItem.SideContent align="center">
-              <TypographyIcon icon={<ChevronRightIcon />} />
-            </ListItem.SideContent>
-          }
-        >
-          <Typography.Text base="body">List Item - With Centered Right Content</Typography.Text>
-        </ListItem>
-      </Section.SubSection>
-
-      <Section.SubSection title="flex-end">
-        <ListItem
-          right={
-            <ListItem.SideContent align="flex-end">
-              <TypographyIcon icon={<ChevronRightIcon />} />
-            </ListItem.SideContent>
-          }
-        >
-          <Typography.Text base="body">List Item - With Centered Right Content</Typography.Text>
-        </ListItem>
-      </Section.SubSection>
-    </Section>
-
-    <Section title="With Left Content">
-      <Section.SubSection title="center">
-        <ListItem
-          left={
-            <ListItem.SideContent align="center">
-              <TypographyIcon icon={<UserIcon />} align="center" />
-            </ListItem.SideContent>
-          }
-        >
-          <Typography.Text base="body">List Item - With Centered Left Content</Typography.Text>
-        </ListItem>
-      </Section.SubSection>
-
-      <Section.SubSection title="flex-end">
-        <ListItem
-          left={
-            <ListItem.SideContent align="flex-end">
-              <TypographyIcon icon={<UserIcon />} align="center" />
-            </ListItem.SideContent>
-          }
-        >
-          <Typography.Text base="body">List Item - With Centered Left Content</Typography.Text>
-        </ListItem>
-      </Section.SubSection>
-    </Section>
-
-    <Section title="With Ellipsed Text">
-      <ListItem
-        left={
-          <ListItem.SideContent>
-            <TypographyIcon icon={<UserIcon />} align="center" />
-          </ListItem.SideContent>
-        }
-        right={
-          <ListItem.SideContent align="center">
-            <TypographyIcon icon={<ChevronRightIcon />} />
-          </ListItem.SideContent>
-        }
-      >
-        <Typography.Text base="body" ellipsizeMode="tail" numberOfLines={2}>
-          This is a long text, showcasing the ability of the ListItem component to have custom content. This one has two
-          lines max, the rest will be ellipsed.
-        </Typography.Text>
-      </ListItem>
-    </Section>
-  </Story>
-));

package/src/ListItem/ListItem.tsx

@@ -1,61 +0,0 @@
-import type { ReactElement, ReactNode } from 'react';
-import React from 'react';
-import type { PressableProps } from 'react-native';
-import { Pressable } from 'react-native';
-import styled from 'styled-components/native';
-import { ListItemContent } from './ListItemContent';
-import { ListItemSideContainer, ListItemSideContent } from './ListItemSideContent';
-
-type Borders = 'top' | 'bottom' | 'both';
-
-export interface ListItemProps extends PressableProps {
-  children: NonNullable<ReactNode>;
-  left?: ReactNode;
-  right?: ReactNode;
-  borders?: Borders;
-  withPadding?: boolean;
-}
-
-interface ContainerViewProps extends Pick<ListItemProps, 'borders' | 'withPadding'> {}
-
-const ContainerView = styled.View<ContainerViewProps>`
-  flex-direction: row;
-  padding: ${({ withPadding, theme }) => (withPadding ? theme.kitt.listItem.padding : 0)};
-  ${({ theme, borders }) => {
-    const { borderWidth } = theme.kitt.listItem;
-
-    if (borders === 'top') {
-      return `border-top-width: ${borderWidth}`;
-    }
-
-    if (borders === 'bottom') {
-      return `border-bottom-width: ${borderWidth}`;
-    }
-
-    if (borders === 'both') {
-      return `border-top-width: ${borderWidth}; border-bottom-width: ${borderWidth}`;
-    }
-
-    return 'border: none';
-  }};
-  border-color: ${({ theme }) => theme.kitt.listItem.borderColor};
-  background-color: ${({ theme }) => theme.kitt.colors.uiBackgroundLight};
-`;
-
-export function ListItem({ children, withPadding, borders, left, right, ...rest }: ListItemProps): ReactElement {
-  return (
-    <Pressable {...rest}>
-      <ContainerView withPadding={withPadding} borders={borders}>
-        {left ? <ListItemSideContainer side="left">{left}</ListItemSideContainer> : null}
-
-        <ListItemContent>{children}</ListItemContent>
-
-        {right ? <ListItemSideContainer side="right">{right}</ListItemSideContainer> : null}
-      </ContainerView>
-    </Pressable>
-  );
-}
-
-ListItem.Content = ListItemContent;
-ListItem.SideContent = ListItemSideContent;
-ListItem.SideContainer = ListItemSideContainer;

package/src/ListItem/ListItemContent.tsx

@@ -1,17 +0,0 @@
-import type { ReactElement, ReactNode } from 'react';
-import React from 'react';
-import type { ViewProps } from 'react-native';
-import styled from 'styled-components/native';
-
-export interface ListItemContentProps extends ViewProps {
-  children: NonNullable<ReactNode>;
-}
-
-const ContentView = styled.View`
-  flex: 1 0 0%;
-  align-self: center;
-`;
-
-export function ListItemContent({ children, ...rest }: ListItemContentProps): ReactElement {
-  return <ContentView {...rest}>{children}</ContentView>;
-}

package/src/ListItem/ListItemSideContent.tsx

@@ -1,41 +0,0 @@
-import type { ReactElement, ReactNode } from 'react';
-import React from 'react';
-import type { ViewProps, ViewStyle } from 'react-native';
-import styled from 'styled-components/native';
-
-export interface ListItemSideContainerProps extends ViewProps {
-  children: NonNullable<ReactNode>;
-  side?: 'left' | 'right';
-}
-
-const SideContainerView = styled.View<ListItemSideContainerProps>`
-  flex-direction: row;
-  margin-left: ${({ theme, side }) => (side === 'right' ? theme.kitt.listItem.innerMargin : 0)};
-  margin-right: ${({ theme, side }) => (side === 'left' ? theme.kitt.listItem.innerMargin : 0)};
-`;
-
-// Handles the vertical alignment of the side elements of the list item
-export function ListItemSideContainer({ children, side = 'left', ...rest }: ListItemSideContainerProps): ReactElement {
-  return (
-    <SideContainerView side={side} {...rest}>
-      {children}
-    </SideContainerView>
-  );
-}
-
-export interface ListItemSideContentProps extends ViewProps {
-  children: NonNullable<ReactNode>;
-  align?: ViewStyle['alignSelf'];
-}
-
-const SideContentView = styled.View<ListItemSideContentProps>`
-  align-self: ${({ align }) => align};
-`;
-
-export function ListItemSideContent({ children, align = 'auto', ...rest }: ListItemSideContentProps): ReactElement {
-  return (
-    <SideContentView align={align} {...rest}>
-      {children}
-    </SideContentView>
-  );
-}