@ornikar/kitt-universal 1.0.0 → 1.0.1

package/src/themes/default.ts

@@ -1,34 +0,0 @@
-import type { WindowSizeHelper } from '../utils/windowSize/createWindowSizeHelper';
-import { avatarLateOceanTheme } from './late-ocean/avatarLateOceanTheme';
-import { buttonLateOceanTheme } from './late-ocean/buttonLateOceanTheme';
-import { cardLateOceanTheme } from './late-ocean/cardLateOceanTheme';
-import { colorsLateOceanTheme } from './late-ocean/colorsLateOceanTheme';
-import { feedbackMessageLateOceanTheme } from './late-ocean/feedbackMessageLateOceanTheme';
-import { formsLateOceanTheme } from './late-ocean/formLateOceanTheme';
-import { fullScreenModalLateOceanTheme } from './late-ocean/fullScreenModalLateOceanTheme';
-import { listItemLateOceanTheme } from './late-ocean/listItemLateOceanTheme';
-import { shadowsLateOceanTheme } from './late-ocean/shadowsLateOceanTheme';
-import { tagLateOceanTheme } from './late-ocean/tagLateOceanTheme';
-import { typographyLateOceanTheme } from './late-ocean/typographyLateOceanTheme';
-import { lateOceanColorPalette } from './palettes/lateOceanColorPalette';
-
-export const theme = {
-  spacing: 4,
-  colors: colorsLateOceanTheme,
-  palettes: { lateOcean: lateOceanColorPalette },
-  avatar: avatarLateOceanTheme,
-  button: buttonLateOceanTheme,
-  card: cardLateOceanTheme,
-  feedbackMessage: feedbackMessageLateOceanTheme,
-  forms: formsLateOceanTheme,
-  typography: typographyLateOceanTheme,
-  tag: tagLateOceanTheme,
-  shadows: shadowsLateOceanTheme,
-  fullScreenModal: fullScreenModalLateOceanTheme,
-  listItem: listItemLateOceanTheme,
-};
-
-export type KittTheme = {
-  kitt: typeof theme;
-  responsive: WindowSizeHelper;
-} & Record<string, unknown>;

package/src/themes/late-ocean/avatarLateOceanTheme.ts

@@ -1,12 +0,0 @@
-import { lateOceanColorPalette } from '../palettes/lateOceanColorPalette';
-
-export const avatarLateOceanTheme = {
-  default: {
-    color: lateOceanColorPalette.white,
-    backgroundColor: lateOceanColorPalette.lateOcean,
-  },
-  light: {
-    color: lateOceanColorPalette.black1000,
-    backgroundColor: lateOceanColorPalette.black100,
-  },
-};

package/src/themes/late-ocean/buttonLateOceanTheme.ts

@@ -1,37 +0,0 @@
-import { lateOceanColorPalette } from '../palettes/lateOceanColorPalette';
-
-export const buttonLateOceanTheme = {
-  borderRadius: '30px',
-  borderWidth: '2px',
-  minHeight: '42px',
-  minWidth: '40px',
-  maxWidth: '335px',
-  iconSize: 18,
-  contentPadding: {
-    default: '8px 16px',
-  },
-  primary: {
-    backgroundColor: lateOceanColorPalette.lateOcean,
-    disabledBackgroundColor: lateOceanColorPalette.black50,
-    pressedBackgroundColor: lateOceanColorPalette.lateOceanLight1,
-    disabledBorderColor: lateOceanColorPalette.black100,
-  },
-  secondary: {
-    backgroundColor: lateOceanColorPalette.black50,
-    disabledBackgroundColor: lateOceanColorPalette.black50,
-    pressedBackgroundColor: lateOceanColorPalette.black100,
-    disabledBorderColor: lateOceanColorPalette.black100,
-  },
-  subtle: {
-    backgroundColor: lateOceanColorPalette.transparent,
-    disabledBackgroundColor: lateOceanColorPalette.transparent,
-    pressedBackgroundColor: lateOceanColorPalette.transparent,
-    disabledBorderColor: lateOceanColorPalette.transparent,
-  },
-  'subtle-dark': {
-    backgroundColor: lateOceanColorPalette.transparent,
-    disabledBackgroundColor: lateOceanColorPalette.transparent,
-    pressedBackgroundColor: lateOceanColorPalette.transparent,
-    disabledBorderColor: lateOceanColorPalette.transparent,
-  },
-};

package/src/themes/late-ocean/cardLateOceanTheme.ts

@@ -1,19 +0,0 @@
-import { lateOceanColorPalette } from '../palettes/lateOceanColorPalette';
-
-export const cardLateOceanTheme = {
-  borderRadius: '20px',
-  borderWidth: '2px',
-  padding: '16px',
-  primary: {
-    backgroundColor: lateOceanColorPalette.white,
-    borderColor: lateOceanColorPalette.lateOcean,
-  },
-  secondary: {
-    backgroundColor: lateOceanColorPalette.white,
-    borderColor: lateOceanColorPalette.black100,
-  },
-  subtle: {
-    backgroundColor: lateOceanColorPalette.black50,
-    borderColor: lateOceanColorPalette.black100,
-  },
-};

package/src/themes/late-ocean/colorsLateOceanTheme.ts

@@ -1,19 +0,0 @@
-import { lateOceanColorPalette } from '../palettes/lateOceanColorPalette';
-
-export const colorsLateOceanTheme = {
-  primary: lateOceanColorPalette.lateOcean,
-  accent: lateOceanColorPalette.warmEmbrace,
-  accentLight: lateOceanColorPalette.warmEmbraceLight1,
-  success: lateOceanColorPalette.viride,
-  correct: lateOceanColorPalette.viride,
-  danger: lateOceanColorPalette.englishVermillon,
-  separator: lateOceanColorPalette.black100,
-  hover: lateOceanColorPalette.black100,
-  uiBackground: lateOceanColorPalette.black25,
-  uiBackgroundLight: lateOceanColorPalette.white,
-  overlay: {
-    dark: 'rgba(41, 48, 51, 0.25)',
-    light: 'rgba(255, 255, 255, 0.90)',
-    fullscreenLoader: 'rgba(0, 0, 0, 0.25)',
-  },
-};

package/src/themes/late-ocean/feedbackMessageLateOceanTheme.ts

@@ -1,10 +0,0 @@
-import { lateOceanColorPalette } from '../palettes/lateOceanColorPalette';
-
-export const feedbackMessageLateOceanTheme = {
-  backgroundColors: {
-    success: lateOceanColorPalette.viride,
-    danger: lateOceanColorPalette.englishVermillon,
-    warning: lateOceanColorPalette.goldCrayola,
-    info: lateOceanColorPalette.aero,
-  },
-};

package/src/themes/late-ocean/formLateOceanTheme.ts

@@ -1,9 +0,0 @@
-import { inputFieldLateOceanTheme } from './inputFieldLateOceanTheme';
-import { inputLateOceanTheme } from './inputLateOceanTheme';
-import { radioLateOceanTheme } from './radioLateOceanTheme';
-
-export const formsLateOceanTheme = {
-  input: inputLateOceanTheme,
-  radio: radioLateOceanTheme,
-  inputField: inputFieldLateOceanTheme,
-};

package/src/themes/late-ocean/fullScreenModalLateOceanTheme.ts

@@ -1,9 +0,0 @@
-import { lateOceanColorPalette } from '../palettes/lateOceanColorPalette';
-
-export const fullScreenModalLateOceanTheme = {
-  header: {
-    paddingVertical: 12,
-    paddingHorizontal: 16,
-    borderColor: lateOceanColorPalette.black100,
-  },
-};

package/src/themes/late-ocean/inputFieldLateOceanTheme.ts

@@ -1,4 +0,0 @@
-export const inputFieldLateOceanTheme = {
-  labelContainerPaddingBottom: 5,
-  iconMarginLeft: 6,
-};

package/src/themes/late-ocean/inputLateOceanTheme.ts

@@ -1,55 +0,0 @@
-import type { InputTextState } from '../../forms/InputText/InputText';
-import { lateOceanColorPalette } from '../palettes/lateOceanColorPalette';
-import type { typographyLateOceanTheme } from './typographyLateOceanTheme';
-
-export type TypographyColor = keyof typeof typographyLateOceanTheme.colors;
-export interface InputStateStyle {
-  backgroundColor?: string;
-  borderColor: string;
-  color: TypographyColor;
-  passwordButtonIconColor: TypographyColor;
-}
-
-const inputStatesStyle: Record<InputTextState, InputStateStyle> = {
-  default: {
-    backgroundColor: lateOceanColorPalette.white,
-    borderColor: lateOceanColorPalette.black100,
-    color: 'black',
-    passwordButtonIconColor: 'black',
-  },
-  hover: {
-    borderColor: lateOceanColorPalette.black200,
-    color: 'black',
-    passwordButtonIconColor: 'black',
-  },
-  focus: {
-    borderColor: lateOceanColorPalette.lateOcean,
-    color: 'black',
-    passwordButtonIconColor: 'black',
-  },
-  disabled: {
-    backgroundColor: lateOceanColorPalette.black50,
-    borderColor: lateOceanColorPalette.black100,
-    color: 'black-light',
-    passwordButtonIconColor: 'black-light',
-  },
-  invalid: {
-    borderColor: lateOceanColorPalette.englishVermillon,
-    color: 'black',
-    passwordButtonIconColor: 'black',
-  },
-};
-
-export const inputLateOceanTheme = {
-  marginTop: '2px',
-  marginBottom: '4px',
-  borderWidth: '2px',
-  borderRadius: '10px',
-  passwordButtonIconSize: 20,
-  padding: '7px 16px',
-  paddingSingleLineIOS: '12px 16px',
-  selectionColor: lateOceanColorPalette.lateOcean,
-  placeholderColor: 'black-light' as const,
-  textAreaMinHeight: 120,
-  states: inputStatesStyle,
-};

package/src/themes/late-ocean/listItemLateOceanTheme.ts

@@ -1,8 +0,0 @@
-import { colorsLateOceanTheme } from './colorsLateOceanTheme';
-
-export const listItemLateOceanTheme = {
-  padding: '12px 16px',
-  borderColor: colorsLateOceanTheme.separator,
-  borderWidth: '1px',
-  innerMargin: '8px',
-};

package/src/themes/late-ocean/radioLateOceanTheme.ts

@@ -1,19 +0,0 @@
-import { lateOceanColorPalette } from '../palettes/lateOceanColorPalette';
-
-export const radioLateOceanTheme = {
-  size: 18,
-  unchecked: {
-    backgroundColor: lateOceanColorPalette.white,
-    borderWidth: '2px',
-    borderColor: lateOceanColorPalette.black200,
-  },
-  checked: {
-    backgroundColor: lateOceanColorPalette.lateOcean,
-    innerSize: 5,
-    innerBackgroundColor: lateOceanColorPalette.white,
-  },
-  disabled: {
-    backgroundColor: lateOceanColorPalette.black50,
-    borderColor: lateOceanColorPalette.black100,
-  },
-};

package/src/themes/late-ocean/shadowsLateOceanTheme.ts

@@ -1,3 +0,0 @@
-export const shadowsLateOceanTheme = {
-  medium: '0px 10px 20px rgba(41, 48, 51, 0.25)',
-};

package/src/themes/late-ocean/tagLateOceanTheme.ts

@@ -1,17 +0,0 @@
-import { lateOceanColorPalette } from '../palettes/lateOceanColorPalette';
-
-export const tagLateOceanTheme = {
-  borderRadius: '10px',
-  padding: '2px 12px',
-  primary: {
-    // eslint-disable-next-line unicorn/expiring-todo-comments
-    // TODO: validate Moon shadow color with design team
-    backgroundColor: '#EDEBFC',
-  },
-  default: {
-    backgroundColor: lateOceanColorPalette.black50,
-  },
-  danger: {
-    backgroundColor: lateOceanColorPalette.warmEmbrace,
-  },
-};

package/src/themes/late-ocean/typographyLateOceanTheme.ts

@@ -1,94 +0,0 @@
-import { Platform } from 'react-native';
-import { lateOceanColorPalette } from '../palettes/lateOceanColorPalette';
-
-const calcLineHeight = (fontSize: number, lineHeightMultiplier: number): number =>
-  Math.round(fontSize * lineHeightMultiplier);
-
-export interface TypographyTypeConfig {
-  baseAndSmall: {
-    fontSize: string;
-    lineHeight: string;
-  };
-  mediumAndWide: {
-    fontSize: string;
-    lineHeight: string;
-  };
-}
-
-const createTypographyTypeConfig = (
-  lineHeightMultiplier: number,
-  baseAndSmallFontSize: number,
-  mediumAndWideFontSize: number,
-): TypographyTypeConfig => ({
-  baseAndSmall: {
-    fontSize: `${baseAndSmallFontSize}px`,
-    lineHeight: `${calcLineHeight(lineHeightMultiplier, baseAndSmallFontSize)}px`,
-  },
-  mediumAndWide: {
-    fontSize: `${mediumAndWideFontSize}px`,
-    lineHeight: `${calcLineHeight(lineHeightMultiplier, baseAndSmallFontSize)}px`,
-  },
-});
-
-export const typographyLateOceanTheme = {
-  colors: {
-    black: lateOceanColorPalette.black1000,
-    'black-light': lateOceanColorPalette.black555,
-    grey: lateOceanColorPalette.black555,
-    'grey-light': lateOceanColorPalette.black200,
-    white: lateOceanColorPalette.white,
-    'white-light': lateOceanColorPalette.white,
-    primary: lateOceanColorPalette.lateOcean,
-    'primary-light': lateOceanColorPalette.lateOceanLight1,
-    accent: lateOceanColorPalette.warmEmbrace,
-    success: lateOceanColorPalette.viride,
-    danger: lateOceanColorPalette.englishVermillon,
-  },
-  types: {
-    headers: {
-      fontFamily: {
-        regular: Platform.OS === 'web' ? 'Moderat' : 'Moderat-Extended-Bold',
-        bold: Platform.OS === 'web' ? 'Moderat' : 'Moderat-Extended-Bold',
-        italic: Platform.OS === 'web' ? 'Moderat' : 'Moderat-Extended-Bold',
-      },
-      fontWeight: 400,
-      fontStyle: 'normal',
-      configs: {
-        // also known as xxlarge
-        header1: createTypographyTypeConfig(1.3, 38, 62),
-        // also known as xlarge
-        header2: createTypographyTypeConfig(1.3, 32, 48),
-        // also known as medium
-        header3: createTypographyTypeConfig(1.3, 24, 36),
-        // also known as xsmall
-        header4: createTypographyTypeConfig(1.3, 18, 24),
-        // also known as xxsmall
-        header5: createTypographyTypeConfig(1.3, 18, 18),
-      },
-    },
-    bodies: {
-      fontFamily: {
-        regular: Platform.OS === 'web' ? 'Noto Sans' : 'NotoSans',
-        bold: Platform.OS === 'web' ? 'Noto Sans' : 'NotoSans-Bold',
-        italic: Platform.OS === 'web' ? 'Noto Sans' : 'NotoSans-Italic',
-      },
-      fontWeight: {
-        regular: 400,
-        bold: 700,
-        italic: 400,
-      },
-      fontStyle: {
-        regular: 'normal',
-        bold: 'normal',
-        italic: 'italic',
-      },
-      configs: {
-        'body-large': createTypographyTypeConfig(1.6, 18, 24),
-        'body-medium': createTypographyTypeConfig(1.6, 18, 18),
-        body: createTypographyTypeConfig(1.6, 16, 16),
-        'body-small': createTypographyTypeConfig(1.6, 14, 14),
-        'body-xsmall': createTypographyTypeConfig(1.6, 12, 12),
-      },
-    },
-  },
-};

package/src/themes/palettes/lateOceanColorPalette.ts

@@ -1,24 +0,0 @@
-export const lateOceanColorPalette = {
-  lateOcean: '#4C34E0',
-  lateOceanLight1: '#705DE6',
-  lateOceanLight2: '#9485EC',
-  lateOceanLight3: '#D6BAF9',
-
-  warmEmbrace: '#F4D3CE',
-  warmEmbraceLight1: '#FFEDE6',
-
-  black1000: '#000000',
-  black555: '#737373',
-  black200: '#CCCCCC',
-  black100: '#E5E5E5',
-  black50: '#F2F2F2',
-  black25: '#F9F9F9',
-  white: '#FFFFFF',
-
-  viride: '#38836D',
-  englishVermillon: '#D44148',
-  goldCrayola: '#F8C583',
-  aero: '#89BDDD',
-
-  transparent: 'transparent',
-};

package/src/typings/babel-config.d.ts

@@ -1,6 +0,0 @@
-declare module '*.inline.svg' {
-  import * as React from 'react';
-
-  const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
-  export default ReactComponent;
-}

package/src/typings/metro.d.ts

@@ -1,6 +0,0 @@
-declare module '*.png' {
-  import { ImageSourcePropType } from 'react-native';
-
-  const src: ImageSourcePropType;
-  export default src;
-}

package/src/typography/Typography.stories.tsx

@@ -1,113 +0,0 @@
-import { storiesOf } from '@storybook/react-native';
-import { Section, Story, StoryGrid } from '@ornikar/kitt-universal';
-import type { FC, ReactElement } from 'react';
-import React from 'react';
-import { useWindowDimensions } from 'react-native';
-import styled from 'styled-components/native';
-import type { BlockProps } from '../stories/Block';
-import { BlockWithPadding } from '../stories/Block';
-import type { TypographyProps, TypographyPropsWithoutRole } from './Typography';
-import { Typography } from './Typography';
-
-const groups: {
-  background: BlockProps['color'];
-  colors: [TypographyProps['color'], TypographyProps['color']];
-}[] = [
-  { background: 'transparent', colors: ['black', 'black-light'] },
-  { background: 'dark', colors: ['white', 'white-light'] },
-  { background: 'transparent', colors: ['primary', 'accent'] },
-  { background: 'transparent', colors: ['success', 'danger'] },
-];
-
-const variants: NonNullable<TypographyProps['variant']>[] = ['bold', 'regular', 'italic'];
-const typographyTypes: { component: FC<TypographyPropsWithoutRole>; base: NonNullable<TypographyProps['base']> }[] = [
-  { component: Typography.h1, base: 'header1' },
-  { component: Typography.h1, base: 'header2' },
-  { component: Typography.h1, base: 'header3' },
-  { component: Typography.h1, base: 'header4' },
-  { component: Typography.h1, base: 'header5' },
-  { component: Typography.Text, base: 'body-large' },
-  { component: Typography.Text, base: 'body-medium' },
-  { component: Typography.Text, base: 'body' },
-  { component: Typography.Text, base: 'body-small' },
-  { component: Typography.Text, base: '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 BlockTitle = styled(Typography.Text)`
-  overflow: hidden;
-  margin-top: 10px;
-`;
-
-const ViewWithMarginTop = styled.View`
-  overflow: hidden;
-  margin-top: 10px;
-`;
-
-function TypographyStory(): ReactElement {
-  // eslint-disable-next-line unicorn/expiring-todo-comments
-  // TODO use useBreakpoint instead
-  const { width } = useWindowDimensions();
-
-  const isMediumOrHigher = width >= 768;
-  return (
-    <Story title="Typography Text">
-      <Section.DemoSection>
-        <Typography.Text base="body-large" color="black">
-          The future is in{' '}
-          <Typography.Text variant="bold">
-            our <Typography.Text color="primary">hands</Typography.Text>
-          </Typography.Text>{' '}
-          to shape.
-        </Typography.Text>
-      </Section.DemoSection>
-
-      {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, variantIndex) => (
-                <StoryGrid.Col key={variant} title={isMediumOrHigher ? variant : undefined} titleColor={color}>
-                  {variantIndex === 0 || isMediumOrHigher ? (
-                    <BlockTitle base="header2" color={color} variant="bold">
-                      {variantIndex === 0 ? formatColorName(color) : '\u00A0'}
-                    </BlockTitle>
-                  ) : null}
-                  {typographyTypes.map(({ component: Component, base }) => {
-                    const isHeaderForbiddenVariant = base.startsWith('header') && variant !== 'bold';
-                    return !isMediumOrHigher && isHeaderForbiddenVariant ? null : (
-                      <ViewWithMarginTop key={base}>
-                        <Component
-                          color={color}
-                          variant={base.startsWith('h') && variant === 'regular' ? 'bold' : variant}
-                          base={base}
-                        >
-                          {isHeaderForbiddenVariant ? (
-                            <>{'\u00A0'}</>
-                          ) : (
-                            <>
-                              {base}
-                              {isMediumOrHigher ? null : `\u00A0/\u00A0${variant}`}
-                            </>
-                          )}
-                        </Component>
-                      </ViewWithMarginTop>
-                    );
-                  })}
-                </StoryGrid.Col>
-              )),
-            )}
-          </StoryGrid.Row>
-        </BlockWithPadding>
-      ))}
-    </Story>
-  );
-}
-
-storiesOf('kitt-universal/Typography', module).add('Text', () => <TypographyStory />);