@ornikar/kitt-universal 1.0.0 → 1.0.1

package/src/typography/Typography.tsx

@@ -1,165 +0,0 @@
-import type { FC, ReactElement, ReactNode } from 'react';
-import React, { createContext, useContext } from 'react';
-import type { TextProps } from 'react-native';
-import styled from 'styled-components/native';
-import type { Except, SetOptional } from 'type-fest';
-
-type TypographyHeaderType = `header${'1' | '2' | '3' | '4' | '5'}`;
-type TypographyBodyType = 'body' | `body-${'large' | 'medium' | 'small' | 'xsmall'}`;
-type TypographyType = TypographyHeaderType | TypographyBodyType;
-type TypographyVariant = 'regular' | 'bold' | 'italic';
-export type TypographyColor =
-  | 'black'
-  | 'black-light'
-  | 'white'
-  | 'white-light'
-  | 'grey'
-  | 'grey-light'
-  | 'primary'
-  | 'primary-light'
-  | 'accent'
-  | 'success'
-  | 'danger';
-
-const TypographyTypeContext = createContext<TypographyType | undefined>(undefined);
-const TypographyColorContext = createContext<TypographyColor>('black');
-
-export function useTypographyColor(): TypographyColor {
-  return useContext(TypographyColorContext);
-}
-
-interface StyledTypographyProps {
-  isHeader: boolean;
-  type?: TypographyType;
-  variant: TypographyVariant;
-  color?: TypographyColor;
-}
-
-const StyledTypography = styled.Text<StyledTypographyProps>`
-  /* font */
-  ${({ theme, isHeader, type, variant }) => {
-    const { headers, bodies } = theme.kitt.typography.types;
-
-    return `
-      /* type */
-      ${
-        !type
-          ? ''
-          : `
-  font-family: ${isHeader ? headers.fontFamily[variant] : bodies.fontFamily[variant]};
-  font-size: ${
-    isHeader
-      ? headers.configs[type as TypographyHeaderType].baseAndSmall.fontSize
-      : bodies.configs[type as TypographyBodyType].baseAndSmall.fontSize
-  };
-  line-height: ${
-    isHeader
-      ? headers.configs[type as TypographyHeaderType].baseAndSmall.lineHeight
-      : bodies.configs[type as TypographyBodyType].baseAndSmall.lineHeight
-  };
-    `
-      }
-
-    /* variant */
-    font-weight: ${isHeader ? headers.fontWeight : bodies.fontWeight[variant]};
-    font-style: ${isHeader ? headers.fontStyle : bodies.fontStyle[variant]};
-  `;
-  }}
-
-  /* color */
-  ${({ theme, color }) =>
-    !color
-      ? ''
-      : `
-  color: ${theme.kitt.typography.colors[color]};
-  text-decoration-color: ${theme.kitt.typography.colors[color]};
-  `}
-`;
-
-export interface TypographyProps extends Except<TextProps, 'accessibilityRole'> {
-  // Find mapping for web here: https://www.w3.org/TR/html-aria/
-  accessibilityRole: NonNullable<TextProps['accessibilityRole']> | null;
-  /** base type. Inherited from parent Typography if not specified */
-  base?: TypographyType;
-  small?: TypographyType;
-  medium?: TypographyType;
-  large?: TypographyType;
-  /** Default to regular for bodies and bold of headers. Is not inherited. */
-  variant?: TypographyVariant;
-  /** Inherited from parent Typography if not specified, or black if no Typography parent found. */
-  color?: TypographyColor;
-  children: ReactNode;
-}
-export type TypographyPropsWithoutRole = Except<TypographyProps, 'accessibilityRole'>;
-
-const isTypeHeader = (type: TypographyType): boolean => type.startsWith('header');
-const isTypographyHeader = (base: TypographyType | undefined, typeInContext: TypographyType | undefined): boolean => {
-  if (base) return isTypeHeader(base);
-  if (typeInContext) return isTypeHeader(typeInContext);
-
-  throw new Error('You must set a "base" prop or wrap this Typography in one that does.');
-};
-
-export function Typography({
-  accessibilityRole,
-  base,
-  variant,
-  color,
-  ...otherProps
-}: TypographyProps): ReactElement | null {
-  const typeInContext = useContext(TypographyTypeContext);
-  const isHeader = isTypographyHeader(base, typeInContext);
-  const nonNullableVariant: TypographyVariant = variant ?? (isHeader ? 'bold' : 'regular');
-  const colorWithDefaultToBlack: TypographyColor | undefined = color ?? (typeInContext ? undefined : 'black');
-
-  const content = base ? (
-    // use the type and pass the type to the context for children
-    <TypographyTypeContext.Provider value={base}>
-      <StyledTypography
-        color={colorWithDefaultToBlack}
-        isHeader={isHeader}
-        type={base}
-        variant={nonNullableVariant}
-        {...otherProps}
-      />
-    </TypographyTypeContext.Provider>
-  ) : (
-    <StyledTypography
-      color={colorWithDefaultToBlack}
-      isHeader={isHeader}
-      variant={nonNullableVariant}
-      {...otherProps}
-    />
-  );
-
-  return color ? <TypographyColorContext.Provider value={color}>{content}</TypographyColorContext.Provider> : content;
-}
-
-export type TypographyTextProps = SetOptional<TypographyProps, 'accessibilityRole'>;
-function TypographyText(props: TypographyTextProps): ReactElement {
-  return <Typography accessibilityRole={null} {...props} />;
-}
-
-function TypographyParagraph(props: TypographyTextProps): ReactElement {
-  // @ts-expect-error paragraph is not allowed in react-native but exists in react-native-web
-  return <Typography accessibilityRole="paragraph" {...props} />;
-}
-
-export type TypographyHeadingProps = TypographyPropsWithoutRole;
-
-const createHeading = (level: string): FC<TypographyHeadingProps> => {
-  // https://github.com/necolas/react-native-web/issues/401
-  function TypographyHeading(props: TypographyHeadingProps): ReactElement {
-    return <Typography accessibilityRole="header" {...props} aria-level={level} />;
-  }
-  TypographyHeading.displayName = `TypographyHeading${level}`;
-  return TypographyHeading;
-};
-
-Typography.Text = TypographyText;
-Typography.Paragraph = TypographyParagraph;
-Typography.h1 = createHeading('1');
-Typography.h2 = createHeading('2');
-Typography.h3 = createHeading('3');
-Typography.h4 = createHeading('4');
-Typography.h5 = createHeading('5');

package/src/typography/TypographyIcon.stories.tsx

@@ -1,31 +0,0 @@
-import { storiesOf } from '@storybook/react-native';
-import { AlertCircleIcon } from '@ornikar/kitt-icons';
-import { Section, Story } from '@ornikar/kitt-universal';
-import React from 'react';
-import { Typography } from './Typography';
-import { TypographyIcon } from './TypographyIcon';
-
-storiesOf('kitt-universal/Typography', module).add('Icon', () => (
-  <Story title="Icons">
-    <Section.DemoSection>
-      <TypographyIcon color="black" icon={<AlertCircleIcon />} />
-    </Section.DemoSection>
-
-    <Section title="Icons inside text">
-      <Typography.Text base="body-large" color="black">
-        <TypographyIcon icon={<AlertCircleIcon />} /> The future is in our{' '}
-        <Typography.Text color="primary">
-          hands <TypographyIcon icon={<AlertCircleIcon />} />
-        </Typography.Text>{' '}
-        to shape.
-      </Typography.Text>
-      <Typography.Text base="header1" color="black">
-        <TypographyIcon icon={<AlertCircleIcon />} /> The future is in our{' '}
-        <Typography.Text color="primary">
-          hands <TypographyIcon icon={<AlertCircleIcon />} />
-        </Typography.Text>{' '}
-        to shape.
-      </Typography.Text>
-    </Section>
-  </Story>
-));

package/src/typography/TypographyIcon.tsx

@@ -1,35 +0,0 @@
-import type { ReactElement } from 'react';
-import React from 'react';
-import { useTheme } from 'styled-components/native';
-import type { Except } from 'type-fest';
-import type { IconProps } from '../Icon/Icon';
-import { Icon } from '../Icon/Icon';
-import type { SetNonNullable } from '../utils/typeUtils';
-import type { TypographyProps } from './Typography';
-import { useTypographyColor } from './Typography';
-
-export interface TypographyIconProps extends Except<IconProps, 'color'> {
-  color?: TypographyProps['color'];
-}
-
-function TypographyIconInheritColor(props: TypographyIconProps): ReactElement {
-  const color = useTypographyColor();
-  const theme = useTheme();
-  return <Icon {...props} color={theme.kitt.typography.colors[color]} />;
-}
-
-function TypographyIconSpecifiedColor({
-  color,
-  ...otherProps
-}: SetNonNullable<TypographyIconProps, 'color'>): ReactElement {
-  const theme = useTheme();
-  return <Icon {...otherProps} color={theme.kitt.typography.colors[color]} />;
-}
-
-export function TypographyIcon({ color, ...otherProps }: TypographyIconProps): ReactElement {
-  if (color) {
-    return <TypographyIconSpecifiedColor color={color} {...otherProps} />;
-  }
-
-  return <TypographyIconInheritColor {...otherProps} />;
-}

package/src/typography/TypographyLink.stories.tsx

@@ -1,88 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { storiesOf } from '@storybook/react-native';
-import { Story, StoryGrid, StoryTitle } from '@ornikar/kitt-universal';
-import React from 'react';
-import styled from 'styled-components/native';
-import type { BlockProps } from '../stories/Block';
-import { BlockWithPadding } from '../stories/Block';
-import type { TypographyProps } from './Typography';
-import { Typography } from './Typography';
-import { TypographyLink } from './TypographyLink';
-
-const groups: {
-  background: BlockProps['color'];
-  colors: [TypographyProps['color'], TypographyProps['color']];
-}[] = [
-  { background: 'transparent', colors: ['black', 'black-light'] },
-  { background: 'dark', colors: ['white', 'white-light'] },
-];
-
-const variants: NonNullable<TypographyProps['variant']>[] = ['bold', 'regular', 'italic'];
-const typographyTypes: TypographyProps['base'][] = ['body-large', 'body-medium', 'body', 'body-small', 'body-xsmall'];
-
-const ucFirst = (string: string): string => string[0].toUpperCase() + string.slice(1);
-const formatColorName = (colorName = 'black'): string => colorName.split('-').map(ucFirst).join('\u00A0');
-
-const ViewWithMarginBottom = styled.View`
-  overflow: hidden;
-  margin-bottom: 10px;
-`;
-
-storiesOf('kitt-universal/Typography', module).add('Link', () => (
-  <Story title="Link">
-    {groups.map(({ background, colors }, index) => (
-      <BlockWithPadding
-        /* eslint-disable-next-line react/no-array-index-key */
-        key={index}
-        color={background}
-      >
-        <StoryGrid.Row breakpoint="medium">
-          {colors.filter(Boolean).map((color) =>
-            variants.map((variant) => (
-              <StoryGrid.Col key={variant}>
-                <StoryTitle.Level2 color={color}>
-                  {formatColorName(color)} {ucFirst(variant)}
-                </StoryTitle.Level2>
-
-                {typographyTypes.map((base) => {
-                  return (
-                    <ViewWithMarginBottom key={base}>
-                      {[false, true].map((noUnderline) => (
-                        <Typography.Paragraph
-                          key={noUnderline ? 'no-underline' : 'underline'}
-                          variant={variant}
-                          base={base}
-                          color={color}
-                        >
-                          This is a paragraph and inside it{' '}
-                          <TypographyLink
-                            base={base}
-                            noUnderline={noUnderline}
-                            href="#"
-                            onPress={action('Link pressed')}
-                          >
-                            there is a link
-                          </TypographyLink>{' '}
-                          that leads home.{' '}
-                          <TypographyLink
-                            noUnderline={noUnderline}
-                            variant="bold"
-                            href="#"
-                            onPress={action('Link pressed')}
-                          >
-                            Here a bold link
-                          </TypographyLink>
-                          .
-                        </Typography.Paragraph>
-                      ))}
-                    </ViewWithMarginBottom>
-                  );
-                })}
-              </StoryGrid.Col>
-            )),
-          )}
-        </StoryGrid.Row>
-      </BlockWithPadding>
-    ))}
-  </Story>
-));

package/src/typography/TypographyLink.tsx

@@ -1,48 +0,0 @@
-import type { ReactElement } from 'react';
-import React from 'react';
-import { Platform } from 'react-native';
-import styled from 'styled-components/native';
-import type { SetRequired } from 'type-fest';
-import type { TypographyProps, TypographyPropsWithoutRole } from './Typography';
-import { Typography } from './Typography';
-
-interface StyledTypographyLinkProps extends TypographyPropsWithoutRole {
-  disabled?: boolean;
-  noUnderline?: boolean;
-}
-
-const StyledLink = styled(Typography).withConfig({
-  shouldForwardProp: (prop, defaultValidatorFn) => !['disabled', 'noUnderline'].includes(prop),
-})<TypographyLinkProps & TypographyProps>`
-  text-decoration: ${({ noUnderline }) => (noUnderline ? 'none' : 'underline')};
-  ${({ disabled }) =>
-    Platform.OS === 'web'
-      ? `
-  text-decoration-color: inherit;
-  transition: color 0.2s ease-in-out;
-  cursor: ${disabled ? 'not-allowed' : 'pointer'};
-  `
-      : null};
-  margin: 0;
-`;
-
-export interface TypographyLinkProps extends SetRequired<StyledTypographyLinkProps, 'onPress'> {
-  href?: string;
-}
-
-export function TypographyLink({
-  disabled,
-  noUnderline,
-  variant = 'bold',
-  ...otherProps
-}: TypographyLinkProps): ReactElement {
-  return (
-    <StyledLink
-      disabled={disabled}
-      noUnderline={noUnderline}
-      variant={variant}
-      accessibilityRole="link"
-      {...otherProps}
-    />
-  );
-}