feat: added storybook

.eslintrc.js

@@ -21,6 +21,7 @@ module.exports = {
     'no-nested-ternary': 1,
     'comma-dangle': [1, 'always-multiline'],
     '@typescript-eslint/ban-types': 0,
+    '@typescript-eslint/ban-ts-comment': 0,
     '@typescript-eslint/no-var-requires': 0,
   },
 };

.yarnrc

@@ -0,0 +1,5 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+yarn-path ".yarn/releases/yarn-1.19.0.cjs"

README.md

@@ -20,5 +20,5 @@ uikit
 
 ### Package dependencies
 
-- add: `lerna add some-package --scope=@sendbird/package`
-- remove: `yarn w:remove some-package --scope=@sendbird/package`
+- add: `yarn workspace @sendbird/package add some-package`
+- remove: `yarn workspace @sendbird/package remove some-package`

package.json

@@ -28,7 +28,9 @@
     "lint:eslint": "eslint packages/**/src --ext ts,tsx -c ./.eslintrc.js",
     "lint:prettier": "prettier --check sample/src/**.{ts,tsx} packages/**/src/**/*.{ts,tsx}",
     "fix:eslint": "eslint --fix packages/**/src --ext ts,tsx -c ./.eslintrc.js",
-    "fix:prettier": "prettier --write sample/src/**.{ts,tsx} packages/**/src/**/*.{ts,tsx}"
+    "fix:prettier": "prettier --write sample/src/**.{ts,tsx} packages/**/src/**/*.{ts,tsx}",
+    "sample:ios": "cd sample && yarn ios",
+    "sample:android": "cd sample && yarn android"
   },
   "devDependencies": {
     "@testing-library/react-native": "^9.0.0",

packages/uikit-react-native/src/assets/bundle-icons.js

@@ -0,0 +1,37 @@
+const fs = require('fs');
+const path = require('path');
+const prettier = require('prettier');
+
+const ignorePatterns = /bundle-icons\.js|\.DS_Store|index\.ts|@2x|@3x/;
+const requireBasePath = './';
+const iconPath = path.join(__dirname, 'icon');
+const icons = {};
+
+fs.readdirSync(iconPath).forEach((filename) => {
+  if (filename.match(ignorePatterns)) return;
+  const ext = path.extname(filename);
+  const name = filename.replace(ext, '').replace(/icon-|ic-/g, '');
+  const assetPath = requireBasePath + filename;
+  icons[name] = `require('${assetPath}')`;
+});
+
+const serializedIcons = JSON.stringify(icons, null, 4).replace(
+  /("require\()('.+')(\)")/g,
+  (_, a, b, c) => a.replace('"', '') + b + c.replace('"', ''),
+);
+const exportString = `const SBIconAssets = ${serializedIcons}; export default SBIconAssets`;
+
+fs.writeFileSync(
+  path.join(iconPath, 'index.ts'),
+  prettier.format(exportString, {
+    'printWidth': 120,
+    'tabWidth': 2,
+    'useTabs': false,
+    'semi': true,
+    'singleQuote': true,
+    'quoteProps': 'preserve',
+    'trailingComma': 'all',
+    'bracketSpacing': true,
+    'arrowParens': 'always',
+  }),
+);

packages/uikit-react-native/src/assets/icon/index.ts

@@ -0,0 +1,63 @@
+const SBIconAssets = {
+  'chat-hide': require('./ic-chat-hide.png'),
+  'chat-show': require('./ic-chat-show.png'),
+  'add': require('./icon-add.png'),
+  'archive': require('./icon-archive.png'),
+  'arrow-left': require('./icon-arrow-left.png'),
+  'ban': require('./icon-ban.png'),
+  'broadcast': require('./icon-broadcast.png'),
+  'camera': require('./icon-camera.png'),
+  'channels': require('./icon-channels.png'),
+  'chat-filled': require('./icon-chat-filled.png'),
+  'chat': require('./icon-chat.png'),
+  'checkbox-off': require('./icon-checkbox-off.png'),
+  'checkbox-on': require('./icon-checkbox-on.png'),
+  'chevron-down': require('./icon-chevron-down.png'),
+  'chevron-right': require('./icon-chevron-right.png'),
+  'close': require('./icon-close.png'),
+  'copy': require('./icon-copy.png'),
+  'create': require('./icon-create.png'),
+  'delete-copy': require('./icon-delete-copy.png'),
+  'delete': require('./icon-delete.png'),
+  'document': require('./icon-document.png'),
+  'done-all': require('./icon-done-all.png'),
+  'done': require('./icon-done.png'),
+  'download': require('./icon-download.png'),
+  'edit': require('./icon-edit.png'),
+  'emoji-more': require('./icon-emoji-more.png'),
+  'error': require('./icon-error.png'),
+  'file-audio': require('./icon-file-audio.png'),
+  'file-document': require('./icon-file-document.png'),
+  'freeze': require('./icon-freeze.png'),
+  'gif': require('./icon-gif.png'),
+  'info': require('./icon-info.png'),
+  'leave': require('./icon-leave.png'),
+  'members': require('./icon-members.png'),
+  'message': require('./icon-message.png'),
+  'moderations': require('./icon-moderations.png'),
+  'more': require('./icon-more.png'),
+  'mute': require('./icon-mute.png'),
+  'notifications-filled': require('./icon-notifications-filled.png'),
+  'notifications-off-filled': require('./icon-notifications-off-filled.png'),
+  'notifications': require('./icon-notifications.png'),
+  'operator': require('./icon-operator.png'),
+  'photo': require('./icon-photo.png'),
+  'play': require('./icon-play.png'),
+  'plus': require('./icon-plus.png'),
+  'question': require('./icon-question.png'),
+  'refresh': require('./icon-refresh.png'),
+  'remove': require('./icon-remove.png'),
+  'reply-filled': require('./icon-reply-filled.png'),
+  'reply': require('./icon-reply.png'),
+  'search': require('./icon-search.png'),
+  'send': require('./icon-send.png'),
+  'settings-filled': require('./icon-settings-filled.png'),
+  'spinner': require('./icon-spinner.png'),
+  'streaming': require('./icon-streaming.png'),
+  'supergroup': require('./icon-supergroup.png'),
+  'theme': require('./icon-theme.png'),
+  'thumbnail-none': require('./icon-thumbnail-none.png'),
+  'unarchive': require('./icon-unarchive.png'),
+  'user': require('./icon-user.png'),
+};
+export default SBIconAssets;

packages/uikit-react-native/src/index.tsx

@@ -6,6 +6,10 @@ export { default as useUIKitTheme } from './theme/useUIKitTheme';
 
 export { default as SendbirdUIKitContainer } from './SendbirdUIKitContainer';
 
+export { default as SBIcon } from './ui/SBIcon';
+export { default as SBText } from './ui/SBText';
+export { default as GroupChannelPreview } from './ui/GroupChannelPreview';
+
 export type {
   AppearanceHelper,
   UIKitColors,

packages/uikit-react-native/src/ui/GroupChannelPreview/index.tsx

@@ -0,0 +1,188 @@
+import React from 'react';
+import { Image, Pressable, View } from 'react-native';
+
+import { truncatedBadgeCount } from '@sendbird/uikit-utils';
+
+import type SBIconAssets from '../../assets/icon';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import createStyleSheet from '../../utils/createStyleSheet';
+import SBIcon from '../SBIcon';
+import SBText from '../SBText';
+
+type Props = {
+  onPress?: () => void;
+
+  coverUrl: string;
+
+  title: string;
+  titleCaption: string;
+  bodyIcon?: keyof typeof SBIconAssets;
+  body: string;
+
+  memberCount?: number;
+  badgeCount: number;
+
+  frozen?: boolean;
+  muted?: boolean;
+};
+const GroupChannelPreview: React.FC<Props> = ({
+  onPress,
+  coverUrl,
+  memberCount,
+  badgeCount,
+  body,
+  bodyIcon,
+  title,
+  titleCaption,
+  frozen,
+  muted,
+}) => {
+  const { colors, select, palette } = useUIKitTheme();
+
+  return (
+    <Pressable onPress={() => onPress?.()} style={[styles.container, { backgroundColor: colors.background }]}>
+      <Image
+        resizeMode={'cover'}
+        style={[styles.channelCover, { backgroundColor: colors.onBackground04 }]}
+        source={{ uri: coverUrl }}
+      />
+      <View style={styles.rightSection}>
+        <View style={styles.rightTopSection}>
+          <View style={styles.channelInfo}>
+            <SBText subtitle1 style={styles.title}>
+              {title}
+            </SBText>
+            {Boolean(memberCount) && (
+              <SBText caption1 style={styles.memberCount} color={colors.onBackground02}>
+                {memberCount}
+              </SBText>
+            )}
+            {frozen && <SBIcon size={16} icon={'freeze'} color={colors.primary} containerStyle={styles.frozen} />}
+            {muted && <SBIcon size={16} icon={'notifications-off-filled'} color={colors.onBackground03} />}
+          </View>
+          <View style={styles.titleCaption}>
+            <SBText caption2 color={colors.onBackground03}>
+              {titleCaption}
+            </SBText>
+          </View>
+        </View>
+
+        <View style={styles.rightBottomSection}>
+          <View style={styles.body}>
+            {bodyIcon && (
+              <SBIcon
+                size={18}
+                icon={bodyIcon}
+                color={colors.onBackground02}
+                containerStyle={[
+                  styles.bodyIcon,
+                  { backgroundColor: select({ light: palette.background100, dark: palette.background500 }) },
+                ]}
+              />
+            )}
+            <SBText body3 numberOfLines={1} style={styles.bodyText} color={colors.onBackground03}>
+              {body}
+            </SBText>
+          </View>
+          {badgeCount > 0 && (
+            <View
+              style={[
+                styles.unreadBadge,
+                { backgroundColor: colors.primary, paddingTop: 2, paddingHorizontal: badgeCount >= 10 ? 8 : 0 },
+              ]}
+            >
+              <SBText caption1 color={colors.background}>
+                {truncatedBadgeCount(badgeCount)}
+              </SBText>
+            </View>
+          )}
+        </View>
+      </View>
+      <Separator />
+    </Pressable>
+  );
+};
+
+const Separator = () => {
+  const { colors } = useUIKitTheme();
+  return <View style={[styles.separator, { backgroundColor: colors.onBackground04 }]} />;
+};
+
+const styles = createStyleSheet({
+  container: {
+    width: '100%',
+    flexDirection: 'row',
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    alignItems: 'center',
+  },
+  channelCover: {
+    width: 56,
+    height: 56,
+    borderRadius: 28,
+    marginRight: 16,
+  },
+  rightSection: {
+    flex: 1,
+  },
+  rightTopSection: {
+    flexDirection: 'row',
+    marginBottom: 4,
+  },
+  channelInfo: {
+    flex: 1,
+    marginRight: 4,
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+  title: {
+    marginRight: 4,
+  },
+  memberCount: {
+    paddingTop: 2,
+    marginRight: 4,
+  },
+  titleCaption: {
+    paddingTop: 2,
+  },
+  rightBottomSection: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    height: 32,
+  },
+  body: {
+    marginRight: 4,
+    flex: 1,
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+  bodyText: {
+    flex: 1,
+  },
+  bodyIcon: {
+    borderRadius: 8,
+    width: 26,
+    height: 26,
+    marginRight: 4,
+  },
+  unreadBadge: {
+    minWidth: 20,
+    minHeight: 20,
+    borderRadius: 99,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  frozen: {
+    marginRight: 4,
+  },
+  separator: {
+    position: 'absolute',
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'red',
+    height: 1,
+    width: '84.5%',
+  },
+});
+
+export default GroupChannelPreview;

packages/uikit-react-native/src/ui/SBIcon/index.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { Image, ImageStyle, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+
+import SBIconAssets from '../../assets/icon';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import createStyleSheet from '../../utils/createStyleSheet';
+
+type IconNames = keyof typeof SBIconAssets;
+type SizeFactor = keyof typeof sizeStyles;
+
+type Props = {
+  icon: IconNames;
+  color?: string;
+  size?: number;
+  style?: StyleProp<ImageStyle>;
+  containerStyle?: StyleProp<ViewStyle>;
+};
+
+const SBIcon: React.FC<Props> = ({ icon, color, size = 24, containerStyle, style }) => {
+  const sizeStyle = sizeStyles[size as SizeFactor] ?? { width: size, height: size };
+  const { colors } = useUIKitTheme();
+  return (
+    <View style={[containerStyle, containerStyles.container]}>
+      <Image
+        resizeMode={'contain'}
+        source={SBIconAssets[icon]}
+        style={[{ tintColor: color ?? colors.primary }, sizeStyle, style]}
+      />
+    </View>
+  );
+};
+
+const containerStyles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+const sizeStyles = createStyleSheet({
+  16: {
+    width: 16,
+    height: 16,
+  },
+  20: {
+    width: 20,
+    height: 20,
+  },
+  24: {
+    width: 24,
+    height: 24,
+  },
+  28: {
+    width: 28,
+    height: 28,
+  },
+  32: {
+    width: 32,
+    height: 32,
+  },
+});
+export default SBIcon;