@sendbird/uikit-react-native-foundation 1.0.0-rc.1

package/src/theme/DarkUIKitTheme.ts

@@ -0,0 +1,176 @@
+import createTheme from './createTheme';
+
+const DarkUIKitTheme = createTheme({
+  colorScheme: 'dark',
+  colors: (palette) => ({
+    primary: palette.primary200,
+    secondary: palette.secondary200,
+    error: palette.error200,
+    background: palette.background600,
+    text: palette.onBackgroundDark01,
+    onBackground01: palette.onBackgroundDark01,
+    onBackground02: palette.onBackgroundDark02,
+    onBackground03: palette.onBackgroundDark03,
+    onBackground04: palette.onBackgroundDark04,
+    onBackgroundReverse01: palette.onBackgroundLight01,
+    onBackgroundReverse02: palette.onBackgroundLight02,
+    onBackgroundReverse03: palette.onBackgroundLight03,
+    onBackgroundReverse04: palette.onBackgroundLight04,
+    ui: {
+      header: {
+        nav: {
+          none: {
+            background: palette.background500,
+            borderBottom: palette.onBackgroundDark04,
+          },
+        },
+      },
+      button: {
+        contained: {
+          enabled: {
+            background: palette.primary200,
+            content: palette.onBackgroundLight01,
+          },
+          pressed: {
+            background: palette.primary300,
+            content: palette.onBackgroundLight01,
+          },
+          disabled: {
+            background: palette.background500,
+            content: palette.onBackgroundDark04,
+          },
+        },
+        text: {
+          enabled: {
+            background: palette.transparent,
+            content: palette.primary200,
+          },
+          pressed: {
+            background: palette.background400,
+            content: palette.primary200,
+          },
+          disabled: {
+            background: palette.transparent,
+            content: palette.onBackgroundDark04,
+          },
+        },
+      },
+      dialog: {
+        default: {
+          none: {
+            background: palette.background500,
+            text: palette.onBackgroundDark01,
+            message: palette.onBackgroundDark02,
+            highlight: palette.primary200,
+            destructive: palette.error300,
+          },
+        },
+      },
+      input: {
+        default: {
+          active: {
+            text: palette.onBackgroundDark01,
+            placeholder: palette.onBackgroundDark03,
+            background: palette.background400,
+            highlight: palette.primary200,
+          },
+          disabled: {
+            text: palette.onBackgroundDark04,
+            placeholder: palette.onBackgroundDark04,
+            background: palette.background400,
+            highlight: palette.onBackgroundDark04,
+          },
+        },
+        underline: {
+          active: {
+            text: palette.onBackgroundDark01,
+            placeholder: palette.onBackgroundDark03,
+            background: palette.transparent,
+            highlight: palette.primary200,
+          },
+          disabled: {
+            text: palette.onBackgroundDark04,
+            placeholder: palette.onBackgroundDark04,
+            background: palette.transparent,
+            highlight: palette.onBackgroundDark04,
+          },
+        },
+      },
+      badge: {
+        default: {
+          none: {
+            text: palette.background600,
+            background: palette.primary200,
+          },
+        },
+      },
+      placeholder: {
+        default: {
+          none: {
+            content: palette.onBackgroundDark03,
+            highlight: palette.primary200,
+          },
+        },
+      },
+      message: {
+        incoming: {
+          enabled: {
+            textMsg: palette.onBackgroundDark01,
+            textEdited: palette.onBackgroundDark02,
+            textTime: palette.onBackgroundDark03,
+            textSenderName: palette.onBackgroundDark02,
+            background: palette.background400,
+          },
+          pressed: {
+            textMsg: palette.onBackgroundDark01,
+            textEdited: palette.onBackgroundDark02,
+            textTime: palette.onBackgroundDark03,
+            textSenderName: palette.onBackgroundDark02,
+            background: palette.primary500,
+          },
+        },
+        outgoing: {
+          enabled: {
+            textMsg: palette.onBackgroundLight01,
+            textEdited: palette.onBackgroundLight02,
+            textTime: palette.onBackgroundDark03,
+            textSenderName: palette.transparent,
+            background: palette.primary200,
+          },
+          pressed: {
+            textMsg: palette.onBackgroundLight01,
+            textEdited: palette.onBackgroundLight02,
+            textTime: palette.onBackgroundDark03,
+            textSenderName: palette.transparent,
+            background: palette.primary300,
+          },
+        },
+      },
+      dateSeparator: {
+        default: {
+          none: {
+            text: palette.onBackgroundDark02,
+            background: palette.overlay02,
+          },
+        },
+      },
+      groupChannelPreview: {
+        default: {
+          none: {
+            textTitle: palette.onBackgroundDark01,
+            textTitleCaption: palette.onBackgroundDark03,
+            textBody: palette.onBackgroundDark03,
+            bodyIcon: palette.onBackgroundDark02,
+            memberCount: palette.onBackgroundDark02,
+            background: palette.background600,
+            coverBackground: palette.onBackgroundDark04,
+            bodyIconBackground: palette.background500,
+            separator: palette.onBackgroundDark04,
+          },
+        },
+      },
+    },
+  }),
+});
+
+export default DarkUIKitTheme;

package/src/theme/LightUIKitTheme.ts

@@ -0,0 +1,176 @@
+import createTheme from './createTheme';
+
+const LightUIKitTheme = createTheme({
+  colorScheme: 'light',
+  colors: (palette) => ({
+    primary: palette.primary300,
+    secondary: palette.secondary300,
+    error: palette.error300,
+    background: palette.background50,
+    text: palette.onBackgroundLight01,
+    onBackground01: palette.onBackgroundLight01,
+    onBackground02: palette.onBackgroundLight02,
+    onBackground03: palette.onBackgroundLight03,
+    onBackground04: palette.onBackgroundLight04,
+    onBackgroundReverse01: palette.onBackgroundDark01,
+    onBackgroundReverse02: palette.onBackgroundDark02,
+    onBackgroundReverse03: palette.onBackgroundDark03,
+    onBackgroundReverse04: palette.onBackgroundDark04,
+    ui: {
+      header: {
+        nav: {
+          none: {
+            background: palette.background50,
+            borderBottom: palette.onBackgroundLight04,
+          },
+        },
+      },
+      button: {
+        contained: {
+          enabled: {
+            background: palette.primary300,
+            content: palette.onBackgroundDark01,
+          },
+          pressed: {
+            background: palette.primary400,
+            content: palette.onBackgroundDark01,
+          },
+          disabled: {
+            background: palette.background100,
+            content: palette.onBackgroundLight04,
+          },
+        },
+        text: {
+          enabled: {
+            background: palette.transparent,
+            content: palette.primary300,
+          },
+          pressed: {
+            background: palette.transparent,
+            content: palette.primary300,
+          },
+          disabled: {
+            background: palette.transparent,
+            content: palette.onBackgroundLight04,
+          },
+        },
+      },
+      dialog: {
+        default: {
+          none: {
+            background: palette.background50,
+            text: palette.onBackgroundLight01,
+            message: palette.onBackgroundLight02,
+            highlight: palette.primary300,
+            destructive: palette.error300,
+          },
+        },
+      },
+      input: {
+        default: {
+          active: {
+            text: palette.onBackgroundLight01,
+            placeholder: palette.onBackgroundLight03,
+            background: palette.background100,
+            highlight: palette.primary300,
+          },
+          disabled: {
+            text: palette.onBackgroundLight04,
+            placeholder: palette.onBackgroundLight04,
+            background: palette.background100,
+            highlight: palette.onBackgroundLight04,
+          },
+        },
+        underline: {
+          active: {
+            text: palette.onBackgroundLight01,
+            placeholder: palette.onBackgroundLight03,
+            background: palette.transparent,
+            highlight: palette.primary300,
+          },
+          disabled: {
+            text: palette.onBackgroundLight04,
+            placeholder: palette.onBackgroundLight04,
+            background: palette.transparent,
+            highlight: palette.onBackgroundLight04,
+          },
+        },
+      },
+      badge: {
+        default: {
+          none: {
+            text: palette.background50,
+            background: palette.primary300,
+          },
+        },
+      },
+      placeholder: {
+        default: {
+          none: {
+            content: palette.onBackgroundLight03,
+            highlight: palette.primary300,
+          },
+        },
+      },
+      message: {
+        incoming: {
+          enabled: {
+            textMsg: palette.onBackgroundLight01,
+            textEdited: palette.onBackgroundLight02,
+            textTime: palette.onBackgroundLight03,
+            textSenderName: palette.onBackgroundLight02,
+            background: palette.background100,
+          },
+          pressed: {
+            textMsg: palette.onBackgroundLight01,
+            textEdited: palette.onBackgroundLight02,
+            textTime: palette.onBackgroundLight03,
+            textSenderName: palette.onBackgroundLight02,
+            background: palette.primary100,
+          },
+        },
+        outgoing: {
+          enabled: {
+            textMsg: palette.onBackgroundDark01,
+            textEdited: palette.onBackgroundDark02,
+            textTime: palette.onBackgroundLight03,
+            textSenderName: palette.transparent,
+            background: palette.primary300,
+          },
+          pressed: {
+            textMsg: palette.onBackgroundDark01,
+            textEdited: palette.onBackgroundDark02,
+            textTime: palette.onBackgroundLight03,
+            textSenderName: palette.transparent,
+            background: palette.primary400,
+          },
+        },
+      },
+      dateSeparator: {
+        default: {
+          none: {
+            text: palette.onBackgroundDark01,
+            background: palette.overlay02,
+          },
+        },
+      },
+      groupChannelPreview: {
+        default: {
+          none: {
+            textTitle: palette.onBackgroundLight01,
+            textTitleCaption: palette.onBackgroundLight03,
+            textBody: palette.onBackgroundLight03,
+            bodyIcon: palette.onBackgroundLight02,
+            memberCount: palette.onBackgroundLight02,
+            background: palette.background50,
+            coverBackground: palette.onBackgroundLight04,
+            bodyIconBackground: palette.background100,
+            separator: palette.onBackgroundLight04,
+          },
+        },
+      },
+    },
+  }),
+});
+
+export default LightUIKitTheme;

package/src/theme/Palette.ts

@@ -0,0 +1,49 @@
+import type { UIKitPalette } from '../types';
+
+const Palette: UIKitPalette = {
+  primary100: '#DBD1FF',
+  primary200: '#C2A9FA',
+  primary300: '#742DDD',
+  primary400: '#6211C8',
+  primary500: '#491389',
+
+  secondary100: '#A8E2AB',
+  secondary200: '#69C085',
+  secondary300: '#259C72',
+  secondary400: '#027D69',
+  secondary500: '#066858',
+
+  error100: '#FDAAAA',
+  error200: '#F66161',
+  error300: '#DE360B',
+  error400: '#BF0711',
+  error500: '#9D091E',
+
+  background50: '#FFFFFF',
+  background100: '#EEEEEE',
+  background200: '#E0E0E0',
+  background300: '#BDBDBD',
+  background400: '#393939',
+  background500: '#2C2C2C',
+  background600: '#161616',
+  background700: '#000000',
+
+  overlay01: 'rgba(0,0,0,0.55)',
+  overlay02: 'rgba(0,0,0,0.32)',
+
+  information: '#ADC9FF',
+  highlight: '#FFF2B6',
+  transparent: 'transparent',
+
+  onBackgroundLight01: 'rgba(0,0,0,0.88)',
+  onBackgroundLight02: 'rgba(0,0,0,0.50)',
+  onBackgroundLight03: 'rgba(0,0,0,0.38)',
+  onBackgroundLight04: 'rgba(0,0,0,0.12)',
+
+  onBackgroundDark01: 'rgba(255,255,255,0.88)',
+  onBackgroundDark02: 'rgba(255,255,255,0.50)',
+  onBackgroundDark03: 'rgba(255,255,255,0.38)',
+  onBackgroundDark04: 'rgba(255,255,255,0.12)',
+};
+
+export default Palette;

package/src/theme/UIKitThemeContext.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+import type { UIKitTheme } from '../types';
+
+const UIKitThemeContext = React.createContext<UIKitTheme | null>(null);
+
+export default UIKitThemeContext;

package/src/theme/UIKitThemeProvider.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import type { UIKitTheme } from '../types';
+import LightUIKitTheme from './LightUIKitTheme';
+import UIKitThemeContext from './UIKitThemeContext';
+
+type Props = { theme?: UIKitTheme };
+const UIKitThemeProvider: React.FC<Props> = ({ children, theme = LightUIKitTheme }) => {
+  return <UIKitThemeContext.Provider value={theme}>{children}</UIKitThemeContext.Provider>;
+};
+
+export default UIKitThemeProvider;

package/src/theme/createTheme.ts

@@ -0,0 +1,42 @@
+import createSelectByColorScheme from '../styles/createSelectByColorScheme';
+import createTypography, { UIKitTypographyOverrides } from '../styles/createTypography';
+import type { UIKitColors, UIKitTheme } from '../types';
+import Palette from './Palette';
+
+type Options = {
+  colorScheme: UIKitTheme['colorScheme'];
+  colors: (palette: UIKitTheme['palette']) => UIKitColors;
+  palette?: UIKitTheme['palette'];
+  typography?: UIKitTypographyOverrides;
+};
+
+const createTheme = ({
+  colorScheme,
+  palette = Palette,
+  colors: createColors,
+  typography = { shared: { fontFamily: 'System' } },
+}: Options): UIKitTheme => {
+  let _palette = palette;
+  let _colors = createColors(_palette);
+
+  return {
+    colorScheme,
+    select: createSelectByColorScheme(colorScheme),
+    get palette() {
+      return _palette;
+    },
+    set palette(value) {
+      _palette = value;
+      _colors = createColors(_palette);
+    },
+    get colors() {
+      return _colors;
+    },
+    set colors(value) {
+      _colors = value;
+    },
+    typography: createTypography(typography),
+  };
+};
+
+export default createTheme;

package/src/theme/useUIKitTheme.ts

@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+
+import type { UIKitTheme } from '../types';
+import UIKitThemeContext from './UIKitThemeContext';
+
+const useUIKitTheme = () => {
+  const context = useContext(UIKitThemeContext);
+  if (!context) throw Error('UIKitThemeContext is not provided');
+  return context as UIKitTheme;
+};
+
+export default useUIKitTheme;

package/src/types.ts

@@ -0,0 +1,202 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { ReactElement, ReactNode } from 'react';
+import type { TextStyle } from 'react-native';
+
+export interface UIKitTypography {
+  h1: FontAttributes;
+  h2: FontAttributes;
+  subtitle1: FontAttributes;
+  subtitle2: FontAttributes;
+  body1: FontAttributes;
+  body2: FontAttributes;
+  body3: FontAttributes;
+  button: FontAttributes;
+  caption1: FontAttributes;
+  caption2: FontAttributes;
+  caption3: FontAttributes;
+  caption4: FontAttributes;
+}
+export type TypoName = keyof UIKitTypography;
+export type FontAttributes = Pick<TextStyle, 'fontFamily' | 'fontSize' | 'lineHeight' | 'letterSpacing' | 'fontWeight'>;
+
+export type UIKitColorScheme = 'light' | 'dark';
+export interface UIKitTheme {
+  colorScheme: UIKitColorScheme;
+  select<V>(options: { [key in UIKitColorScheme | 'default']?: V }): V;
+
+  palette: UIKitPalette;
+  colors: UIKitColors;
+
+  typography: UIKitTypography;
+}
+
+export type Component =
+  | 'Header'
+  | 'Button'
+  | 'Dialog'
+  | 'Input'
+  | 'Badge'
+  | 'Placeholder'
+  | 'Message'
+  | 'DateSeparator'
+  | 'GroupChannelPreview';
+export type GetColorTree<
+  Tree extends {
+    Variant: {
+      [key in Component]: string;
+    };
+    State: {
+      [key in Component]: string;
+    };
+    ColorPart: {
+      [key in Component]: string;
+    };
+  },
+> = Tree;
+
+export type ComponentColorTree = GetColorTree<{
+  Variant: {
+    Header: 'nav';
+    Button: 'contained' | 'text';
+    Dialog: 'default';
+    Input: 'default' | 'underline';
+    Badge: 'default';
+    Placeholder: 'default';
+    Message: 'incoming' | 'outgoing';
+    DateSeparator: 'default';
+    GroupChannelPreview: 'default';
+  };
+  State: {
+    Header: 'none';
+    Button: 'enabled' | 'pressed' | 'disabled';
+    Dialog: 'none';
+    Input: 'active' | 'disabled';
+    Badge: 'none';
+    Placeholder: 'none';
+    Message: 'enabled' | 'pressed';
+    DateSeparator: 'none';
+    GroupChannelPreview: 'none';
+  };
+  ColorPart: {
+    Header: 'background' | 'borderBottom';
+    Button: 'background' | 'content';
+    Dialog: 'background' | 'text' | 'message' | 'highlight' | 'destructive';
+    Input: 'text' | 'placeholder' | 'background' | 'highlight';
+    Badge: 'text' | 'background';
+    Placeholder: 'content' | 'highlight';
+    Message: 'textMsg' | 'textEdited' | 'textSenderName' | 'textTime' | 'background';
+    DateSeparator: 'text' | 'background';
+    GroupChannelPreview:
+      | 'textTitle'
+      | 'textTitleCaption'
+      | 'textBody'
+      | 'memberCount'
+      | 'bodyIcon'
+      | 'background'
+      | 'coverBackground'
+      | 'bodyIconBackground'
+      | 'separator';
+  };
+}>;
+export type ComponentColors<T extends Component> = {
+  [key in ComponentColorTree['Variant'][T]]: {
+    [key in ComponentColorTree['State'][T]]: {
+      [key in ComponentColorTree['ColorPart'][T]]: string;
+    };
+  };
+};
+
+export interface UIKitColors {
+  primary: string;
+  secondary: string;
+  error: string;
+  background: string;
+  text: string;
+  onBackground01: string;
+  onBackground02: string;
+  onBackground03: string;
+  onBackground04: string;
+  onBackgroundReverse01: string;
+  onBackgroundReverse02: string;
+  onBackgroundReverse03: string;
+  onBackgroundReverse04: string;
+  /**
+   * UI Colors has below structure
+   * Component.{Variant}.{State}.{ColorPart}
+   * @example
+   * ```
+   *  const { colors } = useUIKitTheme();
+   *  colors.ui.button.contained.disabled.backgroundColor
+   * ```
+   * */
+  ui: {
+    header: ComponentColors<'Header'>;
+    button: ComponentColors<'Button'>;
+    dialog: ComponentColors<'Dialog'>;
+    input: ComponentColors<'Input'>;
+    badge: ComponentColors<'Badge'>;
+    placeholder: ComponentColors<'Placeholder'>;
+    message: ComponentColors<'Message'>;
+    dateSeparator: ComponentColors<'DateSeparator'>;
+    groupChannelPreview: ComponentColors<'GroupChannelPreview'>;
+  };
+}
+
+export type HeaderElement = string | ReactElement | null;
+export type HeaderPartProps = {
+  title?: HeaderElement;
+  right?: HeaderElement;
+  left?: HeaderElement;
+  onPressLeft?: (...params: any[]) => any;
+  onPressRight?: (...params: any[]) => any;
+};
+export type BaseHeaderProps<HeaderParts extends HeaderPartProps = {}, AdditionalProps = {}> = {
+  titleAlign?: 'left' | 'center' | 'right';
+  children?: ReactNode;
+} & HeaderParts &
+  AdditionalProps;
+export interface UIKitPalette {
+  primary100: string;
+  primary200: string;
+  primary300: string;
+  primary400: string;
+  primary500: string;
+
+  secondary100: string;
+  secondary200: string;
+  secondary300: string;
+  secondary400: string;
+  secondary500: string;
+
+  error100: string;
+  error200: string;
+  error300: string;
+  error400: string;
+  error500: string;
+
+  background50: string;
+  background100: string;
+  background200: string;
+  background300: string;
+  background400: string;
+  background500: string;
+  background600: string;
+  background700: string;
+
+  overlay01: string;
+  overlay02: string;
+
+  information: string;
+  highlight: string;
+  transparent: 'transparent';
+
+  onBackgroundLight01: string;
+  onBackgroundLight02: string;
+  onBackgroundLight03: string;
+  onBackgroundLight04: string;
+
+  onBackgroundDark01: string;
+  onBackgroundDark02: string;
+  onBackgroundDark03: string;
+  onBackgroundDark04: string;
+}