@livechat/design-system-react-components 1.0.0-alpha.2 → 1.0.0-alpha.4

package/.eslintrc

@@ -0,0 +1,9 @@
+{
+  "extends": "../../.eslintrc",
+  "env": {
+    "node": true
+  },
+  "parserOptions": {
+    "project": "tsconfig.json"
+  }
+}

package/.storybook/main.js

@@ -0,0 +1,20 @@
+const foundations = ['Typography', 'ColorTokens', 'Icons'].map(
+  (name) => `../src/stories/${name}.stories.mdx`
+);
+
+module.exports = {
+  stories: [
+    ...foundations,
+    '../src/**/*.stories.mdx',
+    '../src/**/*.stories.@(js|jsx|ts|tsx)',
+  ],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    'storybook-addon-themes',
+  ],
+  framework: '@storybook/react',
+  core: {
+    builder: 'storybook-builder-vite',
+  },
+};

package/.storybook/preview-head.html

@@ -0,0 +1,31 @@
+<script>
+  window.global = window;
+</script>
+
+<style>
+  body {
+    background-color: var(--background);
+    color: var(--content-default);
+  }
+
+  .spacer {
+    margin-bottom: 5px;
+  }
+  .spacer > * + * {
+    margin-left: 5px;
+  }
+
+  .lc-dark-theme,
+  .lc-light-theme,
+  .lc-legacy-theme {
+    background-color: var(--background);
+    color: var(--content-default);
+  }
+
+  * {
+    box-sizing: border-box;
+    font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI,
+      Helvetica Neue, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+  }
+</style>

package/.storybook/preview.js

@@ -0,0 +1,21 @@
+import '../src/themes/legacy.scss';
+import '../src/themes/light.scss';
+import '../src/themes/dark.scss';
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+  themes: {
+    default: 'legacy',
+    list: [
+      { name: 'legacy', class: 'lc-legacy-theme', color: '#4284f5' },
+      { name: 'light', class: 'lc-light-theme', color: '#06f' },
+      { name: 'dark', class: 'lc-dark-theme', color: '#000' },
+    ],
+  },
+};

package/package.json

@@ -1,67 +1,70 @@
 {
   "name": "@livechat/design-system-react-components",
-  "version": "1.0.0-alpha.2",
+  "version": "1.0.0-alpha.4",
   "description": "",
   "publishConfig": {
     "access": "public"
   },
   "author": "",
   "license": "ISC",
-  "source": "src/index.ts",
-  "exports": "./dist/index.modern.js",
-  "main": "./dist/index.js",
-  "module": "./dist/index.module.js",
-  "unpkg": "./dist/index.umd.js",
-  "types": "dist/index.d.ts",
-  "styles": "dist/index.css",
-  "files": [
-    "dist"
-  ],
+  "main": "./dist/dsrc.cjs.js",
+  "module": "./dist/dsrc.es.js",
+  "unpkg": "./dist/dsrc.umd.js",
+  "types": "./dist/src/index.d.ts",
   "scripts": {
     "dev": "run-p dev:*",
     "dev:storybook": "start-storybook -p 6006 --quiet",
-    "dev:lib": "microbundle watch --jsxImportSource react --jsx 'React.createElement'",
-    "build": "microbundle --jsxImportSource react --jsx 'React.createElement'",
+    "dev:lib": "vite build -w",
+    "dev:styles": "npm run build:styles -- --watch",
+    "build": "run-s build:*",
+    "build:lib": "tsc && vite build",
+    "build:styles": "sass src/themes:dist/themes",
     "build-storybook": "build-storybook",
     "chromatic": "dotenv -e ../../.env chromatic -- --exit-zero-on-changes",
     "lint": "eslint src --ext js,jsx,ts,tsx",
-    "test": "jest --ci",
-    "test:watch": "jest --watch"
+    "test": "vitest run",
+    "test:watch": "vitest watch",
+    "test:coverage": "vitest run --coverage"
   },
   "peerDependencies": {
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.15.5",
-    "@babel/preset-env": "^7.15.6",
-    "@babel/preset-react": "^7.14.5",
-    "@babel/preset-typescript": "^7.15.0",
-    "@storybook/addon-actions": "^6.3.8",
-    "@storybook/addon-essentials": "^6.3.8",
-    "@storybook/addon-links": "^6.3.8",
-    "@storybook/react": "^6.3.8",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^12.1.0",
-    "@testing-library/user-event": "^13.4.2",
-    "@types/jest": "^27.0.1",
-    "@types/react": "^17.0.20",
+    "@babel/core": "^7.17.7",
+    "@livechat/design-system-icons": "^1.0.0-alpha.4",
+    "@storybook/addon-actions": "^6.4.13",
+    "@storybook/addon-essentials": "^6.4.13",
+    "@storybook/addon-links": "^6.4.13",
+    "@storybook/react": "^6.4.13",
+    "@testing-library/jest-dom": "^5.16.2",
+    "@testing-library/react": "^12.1.4",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/lodash.escape": "^4.0.6",
+    "@types/react": "^17.0.33",
     "@types/react-dom": "^17.0.10",
-    "babel-jest": "^27.2.0",
-    "babel-loader": "^8.2.2",
+    "@types/react-transition-group": "^4.4.4",
+    "@vitejs/plugin-react": "^1.0.7",
+    "babel-loader": "^8.2.3",
     "chromatic": "^5.9.2",
-    "jest": "^27.2.0",
-    "microbundle": "^0.14.0",
+    "jsdom": "^19.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "sass": "^1.49.9",
     "storybook-addon-themes": "^6.1.0",
-    "typescript": "^4.4.2"
+    "storybook-builder-vite": "^0.1.20",
+    "typescript": "^4.5.4",
+    "vite": "^2.8.0",
+    "vite-plugin-dts": "^0.9.10",
+    "vitest": "^0.6.3"
   },
   "dependencies": {
-    "@livechat/design-system-icons": "^1.0.0-alpha.2",
-    "@livechat/design-system-styles": "^1.0.0-alpha.2",
-    "classnames": "^2.3.1",
+    "@popperjs/core": "^2.11.2",
+    "clsx": "^1.1.1",
+    "lodash.escape": "^4.0.1",
+    "polished": "^4.1.3",
+    "react-popper": "^2.2.5",
     "react-transition-group": "^4.4.2"
   },
-  "gitHead": "59d389837a8f99f763f0ee77ababd0b32c0b4f2b"
+  "gitHead": "d92d4b040d6f91f8cce3e3e255d78d8de381713a"
 }

package/src/components/Alert/Alert.module.scss

@@ -0,0 +1,88 @@
+.alert {
+  box-sizing: border-box;
+  overflow: hidden;
+  padding: 20px;
+  position: relative;
+  width: 100%;
+  word-break: break-word;
+
+  &__content-text {
+    color: var(--content-default);
+  }
+
+  &__content {
+    display: flex;
+    justify-content: flex-start;
+    width: 100%;
+  }
+
+  &--small {
+    max-width: 400px;
+
+    .alert__content {
+      flex-direction: column;
+
+      &-text {
+        margin: 14px 0 0;
+        max-width: 246px;
+      }
+    }
+  }
+
+  &--medium {
+    max-width: 800px;
+
+    .alert__content {
+      &-text {
+        margin: 0 30px 0 16px;
+        max-width: 640px;
+      }
+    }
+  }
+
+  &--large {
+    .alert__content {
+      &-text {
+        margin: 0 30px 0 16px;
+        max-width: 720px;
+      }
+    }
+  }
+
+  &__close-icon {
+    background-color: transparent;
+    border: 0;
+    box-shadow: none;
+    height: 24px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    right: 12px;
+    top: 12px;
+    width: 24px;
+  }
+
+  &--info {
+    background-color: var(--surface-feedback-info);
+    box-shadow: inset 0 3px 0 0 var(--color-action-default);
+  }
+
+  &--warning {
+    background-color: var(--surface-feedback-warning);
+    box-shadow: inset 0 3px 0 0 var(--color-warning-default);
+  }
+
+  &--success {
+    background-color: var(--surface-feedback-positive);
+    box-shadow: inset 0 3px 0 0 var(--color-positive-default);
+  }
+
+  &--error {
+    background-color: var(--surface-feedback-negative);
+    box-shadow: inset 0 3px 0 0 var(--color-negative-default);
+  }
+
+  &__icon {
+    flex-shrink: 0;
+  }
+}

package/src/components/Alert/Alert.spec.tsx

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { render, fireEvent, vi } from 'test-utils';
+import { Alert, AlertSize, AlertType, AlertProps } from './Alert';
+
+import styles from './Alert.module.scss';
+
+const renderComponent = (props: AlertProps) => {
+  return render(
+    <Alert {...props} className="my-css-class">
+      This example content
+    </Alert>
+  );
+};
+
+describe('<Alert> component', () => {
+  it('should allow for custom class', () => {
+    const { container } = renderComponent({});
+
+    expect(container.firstChild).toHaveClass('my-css-class');
+  });
+
+  it('should render as info by default', () => {
+    const { container } = renderComponent({});
+
+    expect(container.firstChild).toHaveClass(styles['alert--info']);
+  });
+
+  it('should render as warning', () => {
+    const { container } = renderComponent({ type: AlertType.Warning });
+
+    expect(container.firstChild).toHaveClass(styles['alert--warning']);
+  });
+
+  it('should render as success', () => {
+    const { container } = renderComponent({ type: AlertType.Success });
+
+    expect(container.firstChild).toHaveClass(styles['alert--success']);
+  });
+
+  it('should render as error', () => {
+    const { container } = renderComponent({ type: AlertType.Error });
+
+    expect(container.firstChild).toHaveClass(styles['alert--error']);
+  });
+
+  it('should render as small by default', () => {
+    const { container } = renderComponent({});
+
+    expect(container.firstChild).toHaveClass(styles['alert--small']);
+  });
+
+  it('should render as medium', () => {
+    const { container } = renderComponent({ size: AlertSize.Medium });
+
+    expect(container.firstChild).toHaveClass(styles['alert--medium']);
+  });
+
+  it('should render as large', () => {
+    const { container } = renderComponent({ size: AlertSize.Large });
+
+    expect(container.firstChild).toHaveClass(styles['alert--large']);
+  });
+
+  it('should render with close icon and call onClose function', () => {
+    const mockedFunction = vi.fn();
+    const { getByRole } = renderComponent({ onClose: mockedFunction });
+
+    expect(getByRole('button')).toBeVisible();
+    fireEvent.click(getByRole('button'));
+    expect(mockedFunction).toHaveBeenCalled();
+  });
+
+  it('should not render with close icon if no onClose function passed', () => {
+    const { queryByRole } = renderComponent({});
+
+    expect(queryByRole('button')).toBeFalsy();
+  });
+});

package/src/components/Alert/Alert.stories.tsx

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import { ComponentMeta, Story } from '@storybook/react';
+
+import {
+  Alert as AlertComponent,
+  AlertSize,
+  AlertType,
+  AlertProps,
+} from './Alert';
+
+export default {
+  title: 'Components/Alert',
+  component: AlertComponent,
+  parameters: {
+    componentSubtitle: `
+    Alert banners are used to let users know about important 
+    informations that require immediate action or attention.
+    `,
+  },
+  argTypes: { onClose: { defaultValue: null } },
+} as ComponentMeta<typeof AlertComponent>;
+
+const StoryTemplate: Story<AlertProps> = (args: AlertProps) => (
+  <div>
+    <AlertComponent {...args}>
+      A description with a <b>maximum of 100 characters</b>. That usually means
+      only one or two sentences.
+    </AlertComponent>
+  </div>
+);
+
+export const Alert = StoryTemplate.bind({});
+Alert.args = {};
+
+export const InfoAlert = StoryTemplate.bind({});
+InfoAlert.args = {
+  type: AlertType.Info,
+};
+
+export const WarningAlert = StoryTemplate.bind({});
+WarningAlert.args = {
+  type: AlertType.Warning,
+};
+
+export const SuccessAlert = StoryTemplate.bind({});
+SuccessAlert.args = {
+  type: AlertType.Success,
+};
+
+export const ErrorAlert = StoryTemplate.bind({});
+ErrorAlert.args = {
+  type: AlertType.Error,
+};
+
+export const BannerWithClose = StoryTemplate.bind({});
+BannerWithClose.args = {
+  onClose: () => alert('onClose click'),
+};
+
+export const SmallAlert = StoryTemplate.bind({});
+SmallAlert.args = {
+  size: AlertSize.Small,
+};
+
+export const MediumBanner = StoryTemplate.bind({});
+MediumBanner.args = {
+  size: AlertSize.Medium,
+};
+
+export const LargeAlert = StoryTemplate.bind({});
+LargeAlert.args = {
+  size: AlertSize.Large,
+};

package/src/components/Alert/Alert.tsx

@@ -0,0 +1,94 @@
+import * as React from 'react';
+import cx from 'clsx';
+import {
+  Close as CloseIcon,
+  Warning as WarningIcon,
+  Info as InfoIcon,
+  Block as BlockIcon,
+  CheckCircleSolid as CheckIcon,
+} from '@livechat/design-system-icons/react/material';
+
+import { Text } from '../Typography';
+import { Icon, IconSizeName, IconTypeName } from '../Icon';
+
+import styles from './Alert.module.scss';
+
+export enum AlertSize {
+  Small = 'small',
+  Medium = 'medium',
+  Large = 'large',
+}
+
+export enum AlertType {
+  Info = 'info',
+  Warning = 'warning',
+  Success = 'success',
+  Error = 'error',
+}
+
+export interface AlertProps {
+  className?: string;
+  size?: AlertSize;
+  type?: AlertType;
+  onClose?: () => void;
+}
+
+const IconConfig = {
+  [AlertType.Info]: {
+    source: InfoIcon,
+    iconType: IconTypeName.Link,
+  },
+  [AlertType.Warning]: {
+    source: WarningIcon,
+    iconType: IconTypeName.Warning,
+  },
+  [AlertType.Success]: {
+    source: CheckIcon,
+    iconType: IconTypeName.Success,
+  },
+  [AlertType.Error]: {
+    source: BlockIcon,
+    iconType: IconTypeName.Error,
+  },
+};
+
+const baseClass = 'alert';
+
+export const Alert: React.FC<AlertProps> = ({
+  children,
+  className,
+  size = AlertSize.Small,
+  type = AlertType.Info,
+  onClose,
+}) => {
+  const mergedClassNames = cx(
+    styles[baseClass],
+    styles[`${baseClass}--${type}`],
+    styles[`${baseClass}--${size}`],
+    className
+  );
+
+  return (
+    <div className={mergedClassNames}>
+      <div className={styles[`${baseClass}__content`]}>
+        <Icon {...IconConfig[type]} />
+        <Text as="div" className={styles[`${baseClass}__content-text`]}>
+          {children}
+        </Text>
+      </div>
+      {onClose && (
+        <button
+          type="button"
+          className={styles[`${baseClass}__close-icon`]}
+          onClick={onClose}
+        >
+          <Icon
+            source={CloseIcon}
+            size={IconSizeName.Large}
+            iconType={IconTypeName.Primary}
+          />
+        </button>
+      )}
+    </div>
+  );
+};

package/src/components/Alert/index.ts

@@ -0,0 +1 @@
+export { Alert } from './Alert';

package/src/components/Badge/Badge.module.scss

@@ -0,0 +1,23 @@
+.badge {
+  background-color: var(--color-negative-default);
+  border-radius: 18px;
+  box-sizing: border-box;
+  color: var(--content-invert-default);
+  display: inline-block;
+  font-size: 10px;
+  font-weight: 600;
+  height: 18px;
+  line-height: 18px;
+  min-width: 18px;
+  padding: 0 3px;
+  text-align: center;
+
+  & + & {
+    margin-left: 4px;
+  }
+
+  &--secondary {
+    background-color: var(--surface-secondary-default);
+    color: var(--surface-invert-default);
+  }
+}

package/src/components/Badge/Badge.spec.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { render } from 'test-utils';
+
+import { Badge } from './Badge';
+
+describe('Badge', () => {
+  it('should accept custom className', () => {
+    const { container } = render(<Badge className="my-custom-class" />);
+
+    expect(container.firstChild).toHaveClass('my-custom-class');
+  });
+});

package/src/components/Badge/Badge.stories.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { Badge as BadgeComponent, BadgeProps } from './Badge';
+
+export default {
+  title: 'Components/Badge',
+  component: BadgeComponent,
+};
+
+export const Badge = (args: BadgeProps): React.ReactElement => (
+  <div
+    style={{
+      display: 'inline-flex',
+      alignItems: 'center',
+      alignContent: 'center',
+    }}
+  >
+    <BadgeComponent {...args} />
+  </div>
+);
+
+Badge.args = {
+  secondary: false,
+  children: '7',
+};

package/src/components/Badge/Badge.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+import styles from './Badge.module.scss';
+import cx from 'clsx';
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
+  secondary?: boolean;
+}
+
+export const Badge: React.FC<BadgeProps> = ({
+  children,
+  className,
+  secondary = false,
+}) => {
+  return (
+    <span
+      className={cx(styles.badge, className, {
+        [styles['badge--secondary']]: secondary,
+      })}
+    >
+      {children}
+    </span>
+  );
+};

package/src/components/Badge/index.ts

@@ -0,0 +1 @@
+export { Badge } from './Badge';