feat: add Dot component

package.json

@@ -19,7 +19,8 @@
     "size": "size-limit",
     "analyze": "size-limit --why",
     "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "build-storybook": "build-storybook",
+    "new": "chmod +x ./scripts/new.sh; ./scripts/new.sh"
   },
   "peerDependencies": {
     "react": ">=16"

scripts/new.sh

@@ -0,0 +1,9 @@
+#!/bin/bash
+
+mkdir ./src/$1
+
+echo "" > ./src/$1/index.tsx
+echo "" > ./src/$1/props.tsx
+echo "" > ./src/$1/stories.tsx
+echo "" > ./src/$1/styles.tsx
+echo "" > ./src/$1/.test.tsx

src/Dot/.test.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import * as ReactDOM from 'react-dom';
+import { Default as Thing } from './stories';
+
+describe('Thing', () => {
+  it('renders without crashing', () => {
+    const div = document.createElement('div');
+    ReactDOM.render(<Thing visible={true} />, div);
+    ReactDOM.unmountComponentAtNode(div);
+  });
+});

src/Dot/index.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { stringToColor } from '../util/colorMapping';
+import { Props } from './props';
+import { styles } from './styles';
+
+export const Dot = ({
+  avatarUrl = undefined,
+  username = '',
+  style = {},
+  visible = true
+}: Props) => {
+
+  const color = stringToColor(username)
+
+  return (
+    <div
+      className='ce-avatar-dot'
+      style={{
+        ...styles.default,
+        ...style,
+        ...{
+          backgroundColor: avatarUrl ? 'white' : color,
+          backgroundImage: avatarUrl && `url(${avatarUrl})`,
+          width: visible ? '13px' : '0px',
+          height: visible ? '13px' : '0px'
+        }
+      }}
+    />
+  )
+}

src/Dot/props.tsx

@@ -0,0 +1,8 @@
+import CSS from 'csstype';
+
+export interface Props {
+  avatarUrl?: string;
+  username?: string;
+  style?: CSS.Properties;
+  visible?: boolean;
+}

src/Dot/stories.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import { Meta, Story } from '@storybook/react';
+
+import { Dot } from '.';
+import { Props } from './props';
+
+const meta: Meta = {
+  title: 'Dot',
+  component: Dot,
+  argTypes: {
+    onClick: { control: '' }
+  }
+}
+
+export default meta;
+
+const Template: Story<Props> = ({ avatarUrl, username, style, visible }) => (
+  <Dot avatarUrl={avatarUrl} username={username} style={style} visible={visible} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  avatarUrl: 'https://chat-engine-assets.s3.amazonaws.com/tutorials/my-face-min.png',
+  username: 'Dylan',
+  style: { float: 'right', marginLeft: '4px' }
+};
+
+export const NoAvatarUrl = Template.bind({});
+NoAvatarUrl.args = {
+  avatarUrl: undefined,
+  username: 'Dylan',
+  style: { float: 'right', marginLeft: '4px' }
+};

src/Dot/styles.tsx

@@ -0,0 +1,15 @@
+import { Properties } from 'csstype';
+
+export const styles = {
+	default: {
+		borderRadius: '13px',
+		textAlign: 'center',
+		backgroundRepeat: 'no-repeat',
+		backgroundPosition: 'center',
+		backgroundSize: '14px',
+		// CSS Transitions
+		transition: "all .33s ease",
+		WebkitTransition: "all .33s ease",
+		MozTransition: "all .33s ease",
+	} as Properties
+};

src/index.tsx

@@ -1,3 +1,4 @@
 export * from './Button';
 export * from './Input';
 export * from './ChatCard';
+export * from './Dot';

src/util/colorMapping.ts

@@ -0,0 +1,36 @@
+const colors = [
+  '#D64045',
+  '#5B3000',
+  '#00CC99',
+  '#467599',
+  '#1D3354',
+  '#8F250C',
+  '#6153CC',
+  '#961D4E',
+  '#A29F15',
+  '#0CAADC',
+  '#FF5154',
+  '#FA7921',
+  '#688E26',
+  '#550527',
+  '#A10702',
+  '#FF1053',
+  '#6C6EA0',
+  '#100B00',
+]
+
+const stringToNumber = (str: string) => {
+  let sum = 0
+  for (var i = 0; i < str.length; i++) {
+    sum = sum + (str.charCodeAt(i) * i) - 97
+  }
+  return sum
+}
+
+export const stringToColor = (str: string) => {
+  if (!str) {
+    return 'black'
+  } else {
+    return colors[stringToNumber(str) % colors.length]
+  }
+}