Notification Component

.changeset/gentle-apricots-provide.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Toast Component

.changeset/young-flowers-melt.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": minor
+---
+
+[CUK-65](https://cubedevinc.atlassian.net/browse/CUK-65) - Notification component

.github/workflows/main.yml

@@ -53,7 +53,6 @@ jobs:
       url: ${{ steps.publish_chromatic.outputs.url }}
     env:
       CHROMATIC_RETRIES: 5
-      LOG_LEVEL: 'error'
     steps:
       - uses: actions/checkout@v2
         with:
@@ -89,6 +88,7 @@ jobs:
         with:
           exitZeroOnChanges: true
           exitOnceUploaded: true
+          autoAcceptChanges: true
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
 
   deploy-docs:

.github/workflows/pull-request.yml

@@ -152,6 +152,7 @@ jobs:
         with:
           exitZeroOnChanges: true
           exitOnceUploaded: true
+          onlyChanged: true
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
 
       - name: Comment PR
@@ -177,7 +178,7 @@ jobs:
     runs-on: ubuntu-latest
     environment:
       name: Docs staging
-      url: ${{ steps.publish_docs.outputs.NETLIFY_PREVIEW_URL }}
+      url: ${{ steps.publish_docs.outputs.preview-url }}
     env:
       NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
       NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}

.storybook/main.js

@@ -1,6 +1,17 @@
 // @ts-check
 const webpack = require('webpack');
 
+/**
+ * @readonly
+ * @type {import('@swc/core').Config}
+ */
+const swcConfig = {
+  jsc: {
+    parser: { syntax: 'typescript', tsx: true },
+    transform: { react: { runtime: 'automatic' } },
+  },
+};
+
 /** @type {import('@storybook/core-common').StorybookConfig} */
 const config = {
   staticDirs: ['../public'],
@@ -10,6 +21,7 @@ const config = {
       name: 'webpack5',
       options: { fsCache: true, lazyCompilation: true },
     },
+    disableTelemetry: true,
   },
   features: {
     postcss: false,
@@ -25,9 +37,19 @@ const config = {
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
+    {
+      name: 'storybook-addon-turbo-build',
+      options: {
+        esbuildMinifyOptions: { target: 'es2021' },
+        managerTranspiler: () => ({ loader: 'swc-loader', options: swcConfig }),
+        previewTranspiler: () => ({ loader: 'swc-loader', options: swcConfig }),
+      },
+    },
   ],
-  webpackFinal: async (config) => {
+  webpackFinal: (config) => {
     config.plugins.push(new webpack.DefinePlugin({ SC_DISABLE_SPEEDY: true }));
+    config.performance.hints = false;
+
     return config;
   },
 };

.storybook/preview-head.html

@@ -1,9 +1,11 @@
-<style>
-  @import url('https://rsms.me/inter/inter.css');
-</style>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+
 <link rel="icon" href="/favicon.ico" sizes="any" />
 <link
   rel="icon"
   href="/favicon-%STORYBOOK_MODE%-%NODE_ENV%.svg"
   type="image/svg+xml"
 />
+

.storybook/preview.jsx

@@ -1,8 +1,8 @@
+import { DocsContainer } from '@storybook/addon-docs';
+import { configure } from '@storybook/testing-library';
 import isChromatic from 'chromatic/isChromatic';
 import { config } from 'react-transition-group';
-import { DocsContainer } from '@storybook/addon-docs';
 import { Root } from '../src';
-import { configure } from '@storybook/testing-library';
 
 configure({ testIdAttribute: 'data-qa', asyncUtilTimeout: 10000 });
 

package.json

@@ -106,6 +106,7 @@
     "email-validator": "^2.0.4",
     "prismjs": "^1.25.0",
     "react-is": "^17.0.0",
+    "react-keyed-flatten-children": "1.3.0",
     "react-transition-group": "^4.4.2",
     "tiny-invariant": "^1.2.0",
     "valid-url": "^1.0.9"
@@ -118,30 +119,31 @@
     "@changesets/cli": "^2.22.0",
     "@commitlint/cli": "16.1.0",
     "@commitlint/config-conventional": "16.0.0",
-    "@happy-dom/jest-environment": "4.0.0",
     "@size-limit/file": "7.0.5",
     "@size-limit/webpack": "7.0.5",
     "@size-limit/webpack-why": "7.0.5",
     "@statoscope/cli": "5.20.1",
-    "@storybook/addon-actions": "6.5.3",
-    "@storybook/addon-essentials": "6.5.3",
-    "@storybook/addon-interactions": "6.5.3",
-    "@storybook/addon-links": "6.5.3",
-    "@storybook/builder-webpack5": "6.5.3",
-    "@storybook/jest": "^0.0.10",
-    "@storybook/manager-webpack5": "^6.5.3",
-    "@storybook/react": "^6.5.3",
-    "@storybook/test-runner": "^0.1.0",
-    "@storybook/testing-library": "^0.0.11",
+    "@storybook/addon-actions": "6.5.9",
+    "@storybook/addon-essentials": "6.5.9",
+    "@storybook/addon-interactions": "6.5.9",
+    "@storybook/addon-links": "6.5.9",
+    "@storybook/builder-webpack5": "6.5.9",
+    "@storybook/manager-webpack5": "6.5.9",
+    "@storybook/react": "6.5.9",
+    "@storybook/jest": "0.0.10",
+    "@storybook/test-runner": "0.3.0",
+    "@storybook/testing-library": "0.0.13",
     "@swc/core": "1.2.148",
     "@swc/jest": "0.2.20",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/react-hooks": "^8.0.0",
     "@testing-library/user-event": "14.2.0",
     "@types/react": "^17.0.38",
+    "@types/react-is": "17.0.3",
     "@types/react-dom": "^17.0.11",
     "@types/react-test-renderer": "17.0.1",
+    "@types/react-transition-group": "^4.4.2",
     "@typescript-eslint/eslint-plugin": "^5.8.1",
     "@typescript-eslint/parser": "^5.8.1",
     "bytes": "^3.1.0",
@@ -156,7 +158,6 @@
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.3.0",
     "eslint-plugin-storybook": "^0.5.12",
-    "happy-dom": "4.0.0",
     "husky": ">=6",
     "jest": "27.5.1",
     "jest-styled-components": "^7.0.8",
@@ -172,16 +173,19 @@
     "rimraf": "^3.0.2",
     "size-limit": "^7.0.5",
     "styled-components": "5.3.0",
-    "typescript": "^4.5.4"
+    "typescript": "^4.5.4",
+    "storybook-addon-turbo-build": "1.1.0",
+    "swc-loader": "0.2.3"
   },
   "resolutions": {
     "es5-ext": "0.10.53",
-    "prettier": "2.5.1"
+    "prettier": "2.5.1",
+    "@testing-library/user-event": "14.2.0"
   },
   "browserslist": [
-    "last 10 Chrome versions",
-    "last 5 Firefox versions",
-    "last 3 Safari versions"
+    "last 2 Chrome versions",
+    "last 2 Firefox versions",
+    "last 2 Safari major versions"
   ],
   "license": "MIT"
 }

src/_internal/hooks/index.ts

@@ -1 +1,5 @@
 export * from './use-deprecation-warning';
+export * from './use-event';
+export * from './use-sync-ref';
+export * from './use-chained-callback';
+export * from './use-timer';

src/_internal/hooks/use-chained-callback.ts

@@ -0,0 +1,13 @@
+import { useEvent } from './use-event';
+
+export function useChainedCallback(
+  ...callbacks: (((...args: any) => any) | null | undefined | boolean)[]
+) {
+  return useEvent((...args: any[]) => {
+    callbacks.forEach((callback) => {
+      if (typeof callback === 'function') {
+        callback(...args);
+      }
+    });
+  });
+}

src/_internal/hooks/use-event.ts

@@ -0,0 +1,19 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useCallback } from 'react';
+import { useSyncRef } from './use-sync-ref';
+
+/**
+ * useEvent shim from the latest React RFC.
+ *
+ * @see https://github.com/reactjs/rfcs/pull/220
+ * @see https://github.com/reactjs/rfcs/blob/useevent/text/0000-useevent.md#internal-implementation
+ */
+export function useEvent<
+  Func extends (...args: Args) => Result,
+  Args extends Parameters<any> = Parameters<Func>,
+  Result extends ReturnType<any> = ReturnType<Func>,
+>(callback: Func): (...args: Args) => Result {
+  const callbackRef = useSyncRef(callback);
+
+  return useCallback((...args) => callbackRef.current(...args), []);
+}

src/_internal/hooks/use-sync-ref.ts

@@ -0,0 +1,11 @@
+import { MutableRefObject, useLayoutEffect, useRef } from 'react';
+
+export function useSyncRef<T>(value: T): MutableRefObject<T> {
+  const ref = useRef<T>(value);
+
+  useLayoutEffect(() => {
+    ref.current = value;
+  });
+
+  return ref;
+}

src/_internal/hooks/use-timer/index.ts

@@ -0,0 +1,2 @@
+export * from './timer';
+export * from './use-timer';

src/_internal/hooks/use-timer/timer.ts

@@ -0,0 +1,65 @@
+export class Timer {
+  private readonly callback: () => void;
+  private readonly delay: number;
+
+  private remaining: number;
+  private timerId: ReturnType<typeof setTimeout> | null = null;
+  private startTime: number | null = null;
+
+  private _status: 'stopped' | 'paused' | 'running' = 'stopped';
+
+  get status() {
+    return this._status;
+  }
+
+  private set status(status) {
+    this._status = status;
+  }
+
+  constructor(callback: () => unknown, delay: number) {
+    this.callback = callback;
+    this.delay = delay;
+    this.remaining = delay;
+
+    this.resume();
+  }
+
+  reset() {
+    this.clear();
+    this.remaining = this.delay;
+    this.status = 'stopped';
+  }
+
+  pause() {
+    if (this.timerId === null || this.startTime === null) {
+      return;
+    }
+
+    this.clear();
+    this.remaining -= Date.now() - this.startTime;
+    this.status = 'paused';
+  }
+
+  resume() {
+    if (this.timerId !== null) return;
+
+    this.startTime = Date.now();
+    this.clear();
+
+    this.timerId = setTimeout(() => {
+      this.reset();
+      this.callback();
+    }, this.remaining);
+
+    this.status = 'running';
+  }
+
+  private clear() {
+    if (this.timerId === null) {
+      return;
+    }
+
+    clearTimeout(this.timerId);
+    this.timerId = null;
+  }
+}