@bitrise/bitkit 9.35.2 → 9.36.0-alpha-avatar.1

package/README.md

@@ -1,8 +1,6 @@
 # @bitrise/bitkit
 
 Library for React UI components and design patterns.
-
-Based on [Chakra UI](https://chakra-ui.com/).
 ___
 
 
@@ -16,29 +14,46 @@ yarn install
 
 ### Technology
 
-- [Chakra UI](https://chakra-ui.com/)
 - [Typescript](https://www.typescriptlang.org/)
-- [React](https://reactjs.org/)
+- [Parcel](https://parceljs.org/) (bundler and dev servers)
+- [React](https://reactjs.org/) (with [React Router](https://reacttraining.com/react-router/) for routing links)
+- [PostCSS](https://postcss.org/) (with [postcss-preset-env](https://preset-env.cssdb.org/) for a little power)
 - [Jest](https://jestjs.io/) (for unit testing)
 
+### Managing icons
+
+If you would like to add a new or edit an existing icon:
+1. Export the icon from [Figma](https://www.figma.com/file/grik9mTaJ5DfhydhWhXdP5/Bitkit-Foundations?node-id=213%3A82) as an SVG. Make sure that the exported file has the following viewBox: `0 0 24 24`, otherwise the icon can make smaller or bigger compared to the existing ones.
+2. Rename the file using this convention: `icons-{iconName}.svg` (eg.: `icons-crown.svg`)
+3. Add the file under the `./src/components/Icon/svg` folder.
+4. If you are not running `yarn start`, run the `yarn build:icons` script to generate the React component from the SVG. You should commit both the `.svg` and the generated `.tsx` files.
+5. Make sure to check the new/update icon on the Icons page.
 ### Scripts
 
-#### `$ yarn storybook`
+#### `$ yarn build`
 
-Runs Storybook server
+Builds the library and styleguide assets
 
-#### `$ yarn start`
+#### `$ yarn build:icons`
 
-Runs `yarn storybook`
+Uses **[@svgr/cli](https://github.com/smooth-code/svgr)** to generate React components and Typescript definitions inside `./src/components/Icon/tsx` from the SVG files inside `./src/components/Icon/svg`.
+
+#### `$ yarn clean`
+
+Cleans up the build directories
 
 #### `$ yarn lint`
 
 Runs Javascript linting
 
-#### `$ yarn test`
+#### `$ yarn serve`
 
-Runs the unit tests for the library components
+Serves up the static files built for the style guide
+
+#### `$ yarn start`
 
-### Contributing
+Runs the developlement server for the style guide
 
-Check [CONTRIBUTING.md](CONTRIBUTING.md)
+#### `$ yarn test`
+
+Runs the unit tests for the library components

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "9.35.2",
+  "version": "9.36.0-alpha-avatar.1",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",

package/src/Components/Avatar/Avatar.stories.tsx

@@ -0,0 +1,15 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import Avatar from './Avatar';
+
+export default {
+  title: 'Components/Avatar',
+  component: Avatar,
+} as ComponentMeta<typeof Avatar>;
+
+export const WithProps: ComponentStory<typeof Avatar> = ({ contentProps, ...props }) => <Avatar {...props} />;
+
+WithProps.args = {
+  ...Avatar.defaultProps,
+  name: 'Bitrise website',
+  src: 'https://bitrise-public-content-production.s3.amazonaws.com/org-icons/default_avatar-02.png',
+};

package/src/Components/Avatar/Avatar.theme.ts

@@ -0,0 +1,66 @@
+import type { ComponentStyleConfig } from '@chakra-ui/theme';
+import { AvatarSizes } from './Avatar';
+
+const BACKGROUND_COLORS = [
+  '#68442c',
+  '#86d641',
+  '#a775db',
+  '#df5ac3',
+  '#46bee8',
+  '#63c99a',
+  '#19937c',
+  '#ed544c',
+  '#ff931e',
+  '#107ec1',
+  '#48e1ed',
+  '#743da5',
+  '#f9d128',
+  '#ff931e',
+  '#9e4b39',
+  '#b51c98',
+  '#b20202',
+  '#bf8a66',
+  '#2c3f50',
+  '#441f62',
+  '#0c5b4c',
+  '#391401',
+  '#27ae61',
+  '#ef7bef',
+];
+
+const getSize = (size: AvatarSizes) => {
+  const sizeAsNumber = Number(size);
+  const fontSizes = {
+    16: '9px',
+    24: '1',
+    32: '3',
+    40: '3',
+    48: '4',
+    64: '5',
+    96: '7',
+    128: '8',
+  };
+
+  return {
+    fontSize: fontSizes[sizeAsNumber as keyof typeof fontSizes],
+    height: `${sizeAsNumber / 16}rem`,
+    width: `${sizeAsNumber / 16}rem`,
+  };
+};
+
+const AvatarTheme: ComponentStyleConfig = {
+  baseStyle: ({ name, size }) => {
+    const str = name.toUpperCase();
+    const seed = str.charCodeAt(0) + str.charCodeAt(str.length - 1);
+
+    return {
+      container: {
+        backgroundColor: BACKGROUND_COLORS[seed % BACKGROUND_COLORS.length],
+        color: 'neutral.100',
+        ...getSize(size),
+      },
+    };
+  },
+};
+
+export default AvatarTheme;

package/src/Components/Avatar/Avatar.tsx

@@ -0,0 +1,24 @@
+import { Avatar as ChakraAvatar, AvatarProps as ChakraAvatarProps, forwardRef } from '@chakra-ui/react';
+import { Radii } from '../../Foundations/Radii/Radii';
+
+export type AvatarSizes = '16' | '24' | '32' | '40' | '48' | '64' | '96' | '128';
+
+export interface AvatarProps extends ChakraAvatarProps {
+  borderRadius?: keyof Radii;
+  size?: AvatarSizes;
+}
+
+const getInitials = (name: string) => {
+  return `${name.charAt(0)}${name.charAt(name.length - 1)}`;
+};
+
+const Avatar = forwardRef<AvatarProps, 'span'>((props, ref) => (
+  <ChakraAvatar getInitials={getInitials} {...props} ref={ref} />
+));
+
+Avatar.defaultProps = {
+  borderRadius: '8',
+  size: '32',
+} as AvatarProps;
+
+export default Avatar;

package/src/index.ts

@@ -110,3 +110,5 @@ export { default as PopoverTrigger } from './Components/Popover/PopoverTrigger';
 export type { PopoverContentProps } from './Components/Popover/PopoverContent';
 export { default as PopoverContent } from './Components/Popover/PopoverContent';
 
+export type { AvatarProps } from './Components/Avatar/Avatar';
+export { default as Avatar } from './Components/Avatar/Avatar';

package/src/old.ts

@@ -34,9 +34,6 @@ export { default as AppLayoutMain } from './Old/AppLayout/AppLayoutMain';
 export type { Props as AppLayoutSidebarProps } from './Old/AppLayout/AppLayoutSidebar';
 export { default as AppLayoutSidebar } from './Old/AppLayout/AppLayoutSidebar';
 
-export type { Props as AvatarProps } from './Old/Avatar/Avatar';
-export { default as Avatar } from './Old/Avatar/Avatar';
-
 export type { Props as BaseProps } from './Old/Base/Base';
 export type { TypeBorderRadius } from './Old/Base/Base';
 export type { TypeColors } from './Old/Base/Base';

package/src/theme.ts

@@ -1,3 +1,4 @@
+import Avatar from './Components/Avatar/Avatar.theme';
 import Badge from './Components/Badge/Badge.theme';
 import Button from './Components/Button/Button.theme';
 import Card from './Components/Card/Card.theme';
@@ -59,6 +60,7 @@ const theme = {
     },
   },
   components: {
+    Avatar,
     Badge,
     Button,
     Card,