@ornikar/kitt-universal 1.0.0-pre

package/src/KittBreakpoints.ts

@@ -0,0 +1,44 @@
+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/KittThemeProvider.tsx

@@ -0,0 +1,30 @@
+import type { ReactElement, ReactNode } from 'react';
+import React, { useMemo } from 'react';
+import { ThemeProvider as SCThemeProvider } from 'styled-components/native';
+import type { KittTheme } from './themes/default';
+import { theme as kittTheme } from './themes/default';
+import { createWindowSizeHelper } from './utils/windowSize/createWindowSizeHelper';
+import { useWindowSize } from './utils/windowSize/useWindowSize';
+
+interface BasicAppTheme extends Record<string, unknown> {}
+
+interface ThemeProviderProps<AppTheme> {
+  children: ReactNode;
+  appTheme?: AppTheme;
+}
+
+export function KittThemeProvider<AppTheme extends BasicAppTheme>({
+  children,
+  appTheme = {} as AppTheme,
+}: ThemeProviderProps<AppTheme>): ReactElement {
+  const { width } = useWindowSize();
+  const themeWithWindowSizeHelper = useMemo(() => {
+    return { kitt: kittTheme, ...appTheme, responsive: createWindowSizeHelper(width) };
+  }, [width, appTheme]);
+
+  return <SCThemeProvider theme={themeWithWindowSizeHelper}>{children}</SCThemeProvider>;
+}
+
+declare module 'styled-components' {
+  export interface DefaultTheme extends KittTheme, BasicAppTheme {}
+}

package/src/ListItem/ListItem.stories.tsx

@@ -0,0 +1,124 @@
+import { action } from '@storybook/addon-actions';
+import { storiesOf } from '@storybook/react-native';
+import React from 'react';
+import { Avatar, ChevronRightIcon, Typography, TypographyIcon, UserIcon } from '..';
+import { StoryComponents } from '../story-components';
+import { ListItem } from './ListItem';
+
+const { Section, Story } = StoryComponents;
+
+storiesOf('Kitt/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

@@ -0,0 +1,61 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,41 @@
+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>
+  );
+}