@openreplay/tracker 10.0.3 → 11.0.0

package/lib/modules/userTesting/styles.d.ts

@@ -0,0 +1,260 @@
+export declare const bgStyle: {
+    position: string;
+    top: number;
+    left: number;
+    width: string;
+    height: string;
+    background: string;
+    display: string;
+    alignItems: string;
+    justifyContent: string;
+    zIndex: number;
+};
+export declare const containerStyle: {
+    display: string;
+    flexDirection: string;
+    gap: string;
+    alignItems: string;
+    padding: string;
+    borderRadius: string;
+    border: string;
+    background: string;
+    width: string;
+};
+export declare const containerWidgetStyle: {
+    display: string;
+    'flex-direction': string;
+    gap: string;
+    'align-items': string;
+    padding: string;
+    'border-radius': string;
+    border: string;
+    background: string;
+    width: string;
+};
+export declare const titleStyle: {
+    fontFamily: string;
+    fontSize: string;
+    fontStyle: string;
+    fontWeight: string;
+    lineHeight: string;
+    color: string;
+};
+export declare const descriptionStyle: {
+    borderTop: string;
+    borderBottom: string;
+    padding: string;
+    color: string;
+    fontFamily: string;
+    fontSize: string;
+    fontStyle: string;
+    fontWeight: string;
+    lineHeight: string;
+};
+export declare const noticeStyle: {
+    color: string;
+    fontFamily: string;
+    fontSize: string;
+    fontStyle: string;
+    fontWeight: string;
+    lineHeight: string;
+};
+export declare const buttonStyle: {
+    display: string;
+    padding: string;
+    justifyContent: string;
+    alignItems: string;
+    gap: string;
+    borderRadius: string;
+    border: string;
+    background: string;
+    boxShadow: string;
+    color: string;
+    textAlign: string;
+    fontFamily: string;
+    fontSize: string;
+    fontStyle: string;
+    fontWeight: string;
+    lineHeight: string;
+    cursor: string;
+};
+export declare const sectionTitleStyle: {
+    fontFamily: string;
+    fontSize: string;
+    fontWeight: string;
+    lineHeight: string;
+    display: string;
+    justifyContent: string;
+    width: string;
+    cursor: string;
+};
+export declare const contentStyle: {
+    display: string;
+    flexDirection: string;
+    alignItems: string;
+    gap: string;
+};
+export declare const titleWidgetStyle: {
+    padding: string;
+    gap: string;
+    fontFamily: string;
+    fontSize: string;
+    fontStyle: string;
+    fontWeight: string;
+    lineHeight: string;
+    color: string;
+    display: string;
+    alignItems: string;
+    width: string;
+    borderRadius: string;
+    background: string;
+    boxSizing: string;
+};
+export declare const descriptionWidgetStyle: {
+    boxSizing: string;
+    display: string;
+    width: string;
+    borderRadius: string;
+    border: string;
+    background: string;
+    padding: string;
+    alignSelf: string;
+    color: string;
+    fontFamily: string;
+    fontSize: string;
+    fontStyle: string;
+    fontWeight: string;
+    lineHeight: string;
+};
+export declare const endSectionStyle: {
+    display: string;
+    flexDirection: string;
+    alignItems: string;
+    gap: string;
+    boxSizing: string;
+    width: string;
+    borderRadius: string;
+    border: string;
+    background: string;
+    padding: string;
+    alignSelf: string;
+    color: string;
+    fontFamily: string;
+    fontSize: string;
+    fontStyle: string;
+    fontWeight: string;
+    lineHeight: string;
+};
+export declare const symbolIcon: {
+    fontSize: string;
+    fontWeight: string;
+    cursor: string;
+    color: string;
+};
+export declare const buttonWidgetStyle: {
+    display: string;
+    padding: string;
+    justifyContent: string;
+    alignItems: string;
+    gap: string;
+    borderRadius: string;
+    border: string;
+    background: string;
+    boxShadow: string;
+    color: string;
+    textAlign: string;
+    fontFamily: string;
+    fontSize: string;
+    fontStyle: string;
+    fontWeight: string;
+    lineHeight: string;
+    width: string;
+    boxSizing: string;
+    cursor: string;
+};
+export declare const stopWidgetStyle: {
+    marginTop: string;
+    cursor: string;
+    display: string;
+    fontWeight: string;
+};
+export declare const paginationStyle: {
+    display: string;
+    justifyContent: string;
+    alignItems: string;
+    gap: string;
+    padding: string;
+    width: string;
+    boxSizing: string;
+};
+export declare const taskNumberActive: {
+    display: string;
+    padding: string;
+    flexDirection: string;
+    alignItems: string;
+    borderRadius: string;
+    outline: string;
+};
+export declare const taskNumberDone: {
+    display: string;
+    padding: string;
+    flexDirection: string;
+    alignItems: string;
+    borderRadius: string;
+    outline: string;
+    boxShadow: string;
+    background: string;
+};
+export declare const taskDescriptionCard: {
+    borderRadius: string;
+    border: string;
+    background: string;
+    boxShadow: string;
+    display: string;
+    flexDirection: string;
+    padding: string;
+    gap: string;
+    alignSelf: string;
+};
+export declare const taskTextStyle: {
+    fontWeight: string;
+};
+export declare const taskDescriptionStyle: {
+    color: string;
+};
+export declare const taskButtonStyle: {
+    marginRight: string;
+    cursor: string;
+    color: string;
+    textAlign: string;
+    fontFamily: string;
+    fontSize: string;
+    fontStyle: string;
+    fontWeight: string;
+    lineHeight: string;
+};
+export declare const taskButtonBorderedStyle: {
+    display: string;
+    padding: string;
+    justifyContent: string;
+    alignItems: string;
+    gap: string;
+    borderRadius: string;
+    border: string;
+    marginRight: string;
+    cursor: string;
+    color: string;
+    textAlign: string;
+    fontFamily: string;
+    fontSize: string;
+    fontStyle: string;
+    fontWeight: string;
+    lineHeight: string;
+};
+export declare const taskButtonsRow: {
+    display: string;
+    justifyContent: string;
+    alignItems: string;
+    width: string;
+    boxSizing: string;
+};

package/lib/modules/userTesting/styles.js

@@ -0,0 +1,226 @@
+export const bgStyle = {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    width: '100vw',
+    height: '100vh',
+    background: 'rgba(0, 0, 0, 0.40)',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    zIndex: 999999,
+};
+export const containerStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '8px',
+    alignItems: 'center',
+    padding: '1.5rem',
+    borderRadius: '0.375rem',
+    border: '1px solid #D9D9D9',
+    background: '#FFF',
+    width: '29rem',
+};
+export const containerWidgetStyle = {
+    display: 'flex',
+    'flex-direction': 'column',
+    gap: '8px',
+    'align-items': 'center',
+    padding: '1rem',
+    'border-radius': '0.375rem',
+    border: '1px solid #D9D9D9',
+    background: '#FFF',
+    width: '29rem',
+};
+export const titleStyle = {
+    fontFamily: 'Verdana, sans-serif',
+    fontSize: '1.25rem',
+    fontStyle: 'normal',
+    fontWeight: '500',
+    lineHeight: '1.75rem',
+    color: 'rgba(0, 0, 0, 0.85)',
+};
+export const descriptionStyle = {
+    borderTop: '1px solid rgba(0, 0, 0, 0.06)',
+    borderBottom: '1px solid rgba(0, 0, 0, 0.06)',
+    padding: '1.25rem 0rem',
+    color: 'rgba(0, 0, 0, 0.85)',
+    fontFamily: 'Verdana, sans-serif',
+    fontSize: '1rem',
+    fontStyle: 'normal',
+    fontWeight: '400',
+    lineHeight: '1.5rem',
+};
+export const noticeStyle = {
+    color: 'rgba(0, 0, 0, 0.85)',
+    fontFamily: 'Verdana, sans-serif',
+    fontSize: '0.875rem',
+    fontStyle: 'normal',
+    fontWeight: '400',
+    lineHeight: '1.375rem',
+};
+export const buttonStyle = {
+    display: 'flex',
+    padding: '0.4rem 0.9375rem',
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: '0.625rem',
+    borderRadius: '0.25rem',
+    border: '1px solid #394EFF',
+    background: '#394EFF',
+    boxShadow: '0px 2px 0px 0px rgba(0, 0, 0, 0.04)',
+    color: '#FFF',
+    textAlign: 'center',
+    fontFamily: 'Verdana, sans-serif',
+    fontSize: '1rem',
+    fontStyle: 'normal',
+    fontWeight: '500',
+    lineHeight: '1.5rem',
+    cursor: 'pointer',
+};
+export const sectionTitleStyle = {
+    fontFamily: 'Verdana, sans-serif',
+    fontSize: '0.875rem',
+    fontWeight: '500',
+    lineHeight: '1.375rem',
+    display: 'flex',
+    justifyContent: 'space-between',
+    width: '100%',
+    cursor: 'pointer',
+};
+export const contentStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    gap: '0.625rem',
+};
+// New widget styles
+export const titleWidgetStyle = {
+    padding: '0.5rem',
+    gap: '0.5rem',
+    fontFamily: 'Verdana, sans-serif',
+    fontSize: '1.25rem',
+    fontStyle: 'normal',
+    fontWeight: '500',
+    lineHeight: '1.75rem',
+    color: 'white',
+    display: 'flex',
+    alignItems: 'center',
+    width: '100%',
+    borderRadius: '0.375rem',
+    background: 'rgba(0, 0, 0, 0.60)',
+    boxSizing: 'border-box',
+};
+export const descriptionWidgetStyle = {
+    boxSizing: 'border-box',
+    display: 'block',
+    width: '100%',
+    borderRadius: '0.375rem',
+    border: '1px solid #D9D9D9',
+    background: '#FFF',
+    padding: '0.625rem 1rem',
+    alignSelf: 'stretch',
+    color: '#000',
+    fontFamily: 'Verdana, sans-serif',
+    fontSize: '0.875rem',
+    fontStyle: 'normal',
+    fontWeight: '400',
+    lineHeight: '1.375rem',
+};
+export const endSectionStyle = Object.assign(Object.assign({}, descriptionWidgetStyle), { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '0.625rem' });
+export const symbolIcon = {
+    fontSize: '1.25rem',
+    fontWeight: '500',
+    cursor: 'pointer',
+    color: '#394EFF',
+};
+export const buttonWidgetStyle = {
+    display: 'flex',
+    padding: '0.4rem 0.9375rem',
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: '0.625rem',
+    borderRadius: '0.25rem',
+    border: '1px solid #394EFF',
+    background: '#394EFF',
+    boxShadow: '0px 2px 0px 0px rgba(0, 0, 0, 0.04)',
+    color: '#FFF',
+    textAlign: 'center',
+    fontFamily: 'Verdana, sans-serif',
+    fontSize: '1rem',
+    fontStyle: 'normal',
+    fontWeight: '500',
+    lineHeight: '1.5rem',
+    width: '100%',
+    boxSizing: 'border-box',
+    cursor: 'pointer',
+};
+export const stopWidgetStyle = {
+    marginTop: '2rem',
+    cursor: 'pointer',
+    display: 'block',
+    fontWeight: '600',
+};
+export const paginationStyle = {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    gap: '1rem',
+    padding: '0.5rem',
+    width: '100%',
+    boxSizing: 'border-box',
+};
+export const taskNumberActive = {
+    display: 'flex',
+    padding: '0.0625rem 0.5rem',
+    flexDirection: 'column',
+    alignItems: 'center',
+    borderRadius: '6.25em',
+    outline: '1px solid #394EFF',
+};
+export const taskNumberDone = {
+    display: 'flex',
+    padding: '0.0625rem 0.5rem',
+    flexDirection: 'column',
+    alignItems: 'center',
+    borderRadius: '6.25em',
+    outline: '1px solid #D2DFFF',
+    boxShadow: '0px 2px 0px 0px rgba(0, 0, 0, 0.04)',
+    background: '#D2DFFF',
+};
+export const taskDescriptionCard = {
+    borderRadius: '0.375rem',
+    border: '1px solid rgba(0, 0, 0, 0.06)',
+    background: '#F5F7FF',
+    boxShadow: '0px 2px 0px 0px rgba(0, 0, 0, 0.04)',
+    display: 'flex',
+    flexDirection: 'column',
+    padding: '0.625rem 0.9375rem',
+    gap: '0.5rem',
+    alignSelf: 'stretch',
+};
+export const taskTextStyle = {
+    fontWeight: 'bold',
+};
+export const taskDescriptionStyle = {
+    color: '#8C8C8C',
+};
+export const taskButtonStyle = {
+    marginRight: '0.5rem',
+    cursor: 'pointer',
+    color: '#394EFF',
+    textAlign: 'center',
+    fontFamily: 'Verdana, sans-serif',
+    fontSize: '0.875rem',
+    fontStyle: 'normal',
+    fontWeight: '500',
+    lineHeight: '1.375rem',
+};
+export const taskButtonBorderedStyle = Object.assign(Object.assign({}, taskButtonStyle), { display: 'flex', padding: '0.25rem 0.9375rem', justifyContent: 'center', alignItems: 'center', gap: '0.5rem', borderRadius: '0.25rem', border: '1px solid #394EFF' });
+export const taskButtonsRow = {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    width: '100%',
+    boxSizing: 'border-box',
+};

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@openreplay/tracker",
   "description": "The OpenReplay tracker main package",
-  "version": "10.0.3",
+  "version": "11.0.0",
   "keywords": [
     "logging",
     "replay"
   ],
   "author": "Alex Tsokurov",
   "contributors": [
-    "Aleksandr K <alex@openreplay.com>"
+    "Aleksandr K <alex@openreplay.com>",
+    "Nikita D <nikita@openreplay.com>"
   ],
   "license": "MIT",
   "type": "module",
@@ -25,7 +26,7 @@
     "test": "jest --coverage=false",
     "test:ci": "jest --coverage=true",
     "postversion": "bun run build",
-    "prepublishOnly": "bun run build"
+    "prepublishOnly": "bun run test && bun run build"
   },
   "devDependencies": {
     "@babel/core": "^7.10.2",