Merge pull request #1 from push-protocol/f_push_scan

Push Scan New changes

.vscode/settings.json

@@ -1,6 +1,6 @@
 {
     "editor.codeActionsOnSave": {
-        "source.fixAll.eslint": true
+        "source.fixAll.eslint": "explicit"
     },
     "eslint.validate": [
         "javascript"

README.md

@@ -16,7 +16,7 @@ src="https://res.cloudinary.com/drdjegqln/image/upload/v1686227558/Push-Logo-Sta
 <div>
 <h2>
 <br>
-Push Analytics </h1>
+Push Analytics and Push Scan </h1>
 <p>Push Analytics Dashboard is a comprehensive tool designed to provide in-depth insights into the performance and usage of the Push Protocol. This repository hosts the code that powers the analytics component of the Push Protocol, offering a detailed view of various metrics such as the number of subscribers, notifications, channels, and more. The dashboard is an essential tool for understanding the reach and impact of the Push Protocol, providing valuable data that can help guide future development and improvements.
 
 The dashboard is designed with a user-friendly interface, making it easy to navigate and understand the data presented. It provides real-time updates, ensuring you have the most accurate and up-to-date information at your fingertips. Whether you're a developer looking to monitor the performance of your channels, or a user interested in understanding more about your subscriptions, the Push Analytics Dashboard is a powerful resource for all things related to the Push Protocol.</p>

blocks/Blocks.colors.ts

@@ -0,0 +1,110 @@
+import { BlocksColorData, BlocksColors, GlobalColors } from './Blocks.types';
+
+// TODO This file needs to be removed after all the blcoks components uses the new design theme
+
+const brandColors = {
+  /* New brand colors */
+
+  'GRAY-100': '#F5F6F8',
+  'GRAY-200': '#EAEBF2',
+  'GRAY-300': '#C4CBD5',
+  'GRAY-400': '#B0B3B9',
+  'GRAY-500': '#8C93A0',
+  'GRAY-600': '#757D8D',
+  'GRAY-700': '#484D58',
+  'GRAY-800': '#313338',
+  'GRAY-900': '#202124',
+  'GRAY-1000': '#17181B',
+
+  'PINK-100': '#FCEBFF',
+  'PINK-200': '#FBE8FF',
+  'PINK-300': '#F3AEFF',
+  'PINK-400': '#CF59E2',
+  'PINK-500': '#D548EC',
+  'PINK-600': '#C742DD',
+  'PINK-700': '#AA30BE',
+  'PINK-800': '#7B0090',
+  'PINK-900': '#570066',
+  'PINK-1000': '#35003F',
+
+  'RED-100': '#FFECEC',
+  'RED-200': '#FFD9D9',
+  'RED-300': '#FFB1B1',
+  'RED-400': '#FF8585',
+  'RED-500': '#FF4E4E',
+  'RED-600': '#F11F1F',
+  'RED-700': '#D43B3B',
+  'RED-800': '#A40A0A',
+  'RED-900': '#670000',
+  'RED-1000': '#400000',
+
+  'GREEN-100': '#D8F7F0',
+  'GREEN-200': '#AFEFE1',
+  'GREEN-300': '#51DCBD',
+  'GREEN-400': '#00C296',
+  'GREEN-500': '#00A47F',
+  'GREEN-600': '#008769',
+  'GREEN-700': '#006B53',
+  'GREEN-800': '#A40A0A',
+  'GREEN-900': '#00382B',
+  'GREEN-1000': '#002019',
+};
+
+export const blocksColorsLegacy = {
+  /* Legacy colors used through out the app */
+  PRIMARY: 'rgba(27.0, 150.0, 227.0, 1.0)',
+  PRIMARY_PINK: '#CF1C84',
+  PLACEHOLDER_DARK_GRAY: '#D9D9D9',
+
+  LINKS: 'rgba(20.0, 126.0, 251.0, 1.0)',
+
+  GRADIENT_PRIMARY: 'rgba(226.0, 8.0, 128.0, 1.0)',
+  GRADIENT_SECONDARY: 'rgba(53.0, 197.0, 243.0, 1.0)',
+  GRADIENT_THIRD: 'rgba(103.0, 76.0, 159.0, 1.0)',
+
+  TRANSPARENT: 'transparent',
+
+  WHITE: 'rgba(255.0, 255.0, 255.0, 1.0)',
+  DARK_WHITE: 'rgba(255.0, 255.0, 255.0, 0.75)',
+  MID_WHITE: 'rgba(255.0, 255.0, 255.0, 0.5)',
+  LIGHT_WHITE: 'rgba(255.0, 255.0, 255.0, 0.25)',
+
+  SLIGHTER_GRAY: 'rgba(250.0, 250.0, 250.0, 1)',
+  SLIGHT_GRAY: 'rgba(231.0, 231.0, 231.0, 1)',
+  LIGHT_GRAY: 'rgba(225.0, 225.0, 225.0, 1)',
+  MID_GRAY: 'rgba(200.0, 200.0, 200.0, 1)',
+  DARK_GRAY: 'rgba(160.0, 160.0, 160.0, 1)',
+  DARKER_GRAY: 'rgba(100.0, 100.0, 100.0, 1)',
+
+  LIGHT_BLACK_TRANS: 'rgba(0.0, 0.0, 0.0, 0.1)',
+  SEMI_MID_BLACK_TRANS: 'rgba(0.0, 0.0, 0.0, 0.25)',
+  MID_BLACK_TRANS: 'rgba(0.0, 0.0, 0.0, 0.5)',
+  DARK_BLACK_TRANS: 'rgba(0.0, 0.0, 0.0, 0.75)',
+  BLACK: 'rgba(0.0, 0.0, 0.0, 1.0)',
+
+  CONFIRM_GREEN: 'rgba(50.0, 205.0, 50.0, 1.0)',
+
+  CONFIRM: 'rgba(34.0, 139.0, 34.0, 1.0)',
+  WARNING: 'rgba(255.0, 153.0, 0.0, 1.0)',
+
+  SUBLIME_RED: 'rgba(237.0, 59.0, 72.0, 1.0)',
+  BADGE_RED: 'rgba(208.0, 44.0, 30.0, 1.0)',
+  LIGHT_MAROON: 'rgba(159.0, 0.0, 0.0, 1.0)',
+  LIGHTER_MAROON: 'rgba(129.0, 0.0, 0.0, 1.0)',
+
+  ...brandColors,
+};
+
+const createBlocksColors = () => {
+  const globalColors: GlobalColors = blocksColorsLegacy;
+
+  const appColors = Object.keys(globalColors).reduce((acc: Partial<BlocksColorData>, key) => {
+    const newKey = key.toLowerCase().replace(/_([a-z])/g, (match, letter) => letter.toUpperCase()) as BlocksColors;
+    acc[newKey as keyof BlocksColorData] = globalColors[key as keyof GlobalColors];
+    return acc;
+  }, {});
+
+  return appColors as BlocksColorData;
+};
+
+export const blocksColors = createBlocksColors();

blocks/Blocks.constants.ts

@@ -0,0 +1,3 @@
+export const radiusRegex = /\bradius-[a-z]+\b/g;
+
+export const spacingRegex = /\bspacing-[a-z]+\b/g;

blocks/Blocks.hooks.ts

@@ -0,0 +1,13 @@
+import { themeDark, themeLight } from '../theme/palette';
+import { useTheme } from 'styled-components';
+import { ThemeMode } from './Blocks.types';
+
+// TODO: Remove this when we remove dependency from this hook
+
+type ThemeData = typeof themeLight | typeof themeDark;
+
+export const useBlocksTheme = () => {
+  const { scheme } = useTheme() as ThemeData;
+
+  return { mode: scheme as ThemeMode };
+};

blocks/Blocks.types.ts

@@ -0,0 +1,71 @@
+import { HTMLAttributes } from 'react';
+import { BoxResponsiveCSSProperties, BoxResponsiveCSSPropertiesData, BoxResponsivePropValues } from './box';
+import { blocksColorsLegacy } from './Blocks.colors';
+import { StrokeColors, ThemeBorderRadius, ThemeBorderSize, ThemeSpacing } from './theme/Theme.types';
+import {
+  SkeletonResponsiveCSSProperties,
+  SkeletonResponsiveCSSPropertiesData,
+  SkeletonResponsivePropValues,
+} from './skeleton';
+import {
+  SeparatorResponsiveCSSProperties,
+  SeparatorResponsiveCSSPropertiesData,
+  SeparatorResponsivePropValues,
+} from './separator';
+
+export type DeviceSize = '320px' | '375px' | '425px' | '768px' | '1024px' | '1440px' | '2560px';
+
+export type DeviceSizeName = 'mobileS' | 'mobileM' | 'mobileL' | 'tablet' | 'laptop' | 'laptopL' | 'desktop';
+
+export type Breakpoint = 'initial' | 'ms' | 'mm' | 'ml' | 'tb' | 'lp' | 'll' | 'dp';
+
+export type ResponsiveProp<T> = T | { [key in Breakpoint]?: T };
+
+export type BlocksRadiusType =
+  | ThemeBorderRadius
+  | `${ThemeBorderRadius} ${ThemeBorderRadius}`
+  | `${ThemeBorderRadius} ${ThemeBorderRadius} ${ThemeBorderRadius} ${ThemeBorderRadius}`;
+
+export type BlocksSpaceType =
+  | ThemeSpacing
+  | `${ThemeSpacing} ${ThemeSpacing}`
+  | `${ThemeSpacing} ${ThemeSpacing} ${ThemeSpacing} ${ThemeSpacing}`;
+
+export type BlocksGapType = ThemeSpacing | `${ThemeSpacing} ${ThemeSpacing}`;
+
+export type PixelValue = `${number}px`;
+
+export type ValueOf<T> = T[keyof T];
+
+export type CSSPropName =
+  | BoxResponsiveCSSProperties
+  | SeparatorResponsiveCSSProperties
+  | SkeletonResponsiveCSSProperties;
+
+export type CSSPropValueType = BoxResponsivePropValues | SeparatorResponsivePropValues | SkeletonResponsivePropValues;
+
+export type ResponsiveCSSPropertyData =
+  | BoxResponsiveCSSPropertiesData
+  | SeparatorResponsiveCSSPropertiesData
+  | SkeletonResponsiveCSSPropertiesData;
+
+export type TransformedHTMLAttributes<T> = Omit<HTMLAttributes<T>, 'style' | 'color'>;
+
+/* This needs to be removed when the color dependency from Globals.js is removed. */
+export type GlobalColors = Record<keyof typeof blocksColorsLegacy, string>;
+
+type CamelCase<S extends string> = S extends `${infer P1}_${infer P2}${infer P3}`
+  ? `${Lowercase<P1>}${Capitalize<Lowercase<P2>>}${CamelCase<P3>}`
+  : Lowercase<S>;
+
+export type BlocksColorData = {
+  [K in keyof typeof blocksColorsLegacy as CamelCase<K extends string ? K : never>]: (typeof blocksColorsLegacy)[K];
+};
+
+export type BlocksColors = keyof BlocksColorData;
+
+export type ThemeMode = 'light' | 'dark';
+
+export type BorderValue = `${ThemeBorderSize} ${string} ${StrokeColors}` | 'none';
+
+export type ModeProp = { mode: ThemeMode };

blocks/Blocks.utils.ts

@@ -0,0 +1,177 @@
+import { css } from 'styled-components';
+import { deviceMediaQ, deviceSizes, breakpointMap } from './theme';
+import {
+  Breakpoint,
+  CSSPropName,
+  CSSPropValueType,
+  DeviceSizeName,
+  PixelValue,
+  ResponsiveCSSPropertyData,
+  BorderValue,
+  BlocksRadiusType,
+} from './Blocks.types';
+import { radiusRegex, spacingRegex } from './Blocks.constants';
+import { textVariants, TextVariants } from './text';
+import { ThemeColors } from './theme/Theme.types';
+
+/**
+ * @param propName
+ * @param value
+ * @returns value of a CSS property
+ */
+const getCSSValue = (propName: CSSPropName, value: CSSPropValueType | undefined) => {
+  if (propName === 'padding' || propName === 'margin') {
+    if (typeof value === 'string') {
+      return value.replace(spacingRegex, (match) => `var(--${match})`);
+    }
+  } else if (propName === 'gap' || propName === 'border-radius') {
+    return `var(--${value})`;
+  }
+  return value;
+};
+
+/**
+ * @param pixelStr
+ * @returns numeric values fetched from px values
+ *
+ * Helper function to parse the pixel values from the strings.
+ */
+const parsePixels = (pixelStr: PixelValue) => parseFloat(pixelStr.replace('px', ''));
+
+/**
+ * @param values
+ * @param operation
+ * @returns computed values in px
+ */
+const computePixels = (values: PixelValue[], operation: 'add' | 'sub') =>
+  values.reduce((acc, value) => (operation === 'add' ? acc + parsePixels(value) : acc - parsePixels(value)), 0) + 'px';
+
+/**
+ * @param breakpointData
+ * @returns media query css in string forma for all screen sizes passed on to it
+ *
+ * Separates css for different screen size from all css properties
+ * and combine them into common media queries to avoid applying multiple
+ * media queries for every css property.
+ */
+const createBreakpointCSS = (breakpointData: Record<DeviceSizeName, string>) => {
+  const validBreakpointList = Object.entries(breakpointData).filter(([_, css]) => css);
+
+  if (!validBreakpointList.length) return '';
+
+  const singleDeviceMedia = `@media ${deviceMediaQ[validBreakpointList[0][0] as DeviceSizeName]} { 
+    ${validBreakpointList[0][1]} 
+  }`;
+
+  if (validBreakpointList.length === 1) {
+    return singleDeviceMedia;
+  } else {
+    return (
+      `${singleDeviceMedia}` +
+      validBreakpointList
+        .map(([_bp, css], index) => {
+          if (!index) {
+            return '';
+          } else {
+            const previousBp = validBreakpointList[index - 1][0] as DeviceSizeName;
+
+            const previousBpWidth = computePixels([deviceSizes[previousBp], '1px'], 'add');
+
+            const previousBpMediaQ = `@media (min-width: ${previousBpWidth})`;
+
+            const currentBp = _bp as DeviceSizeName;
+
+            const currentBpMediaQ = deviceMediaQ?.[currentBp] ? `and ${deviceMediaQ?.[currentBp]}` : '';
+
+            return `${previousBpMediaQ} ${currentBpMediaQ} { ${css} }`;
+          }
+        })
+        .join(';')
+    );
+  }
+};
+
+/**
+ *
+ * @param data
+ * @returns styled components css
+ *
+ * This function collects css values for different screen sizes
+ * and then combines them into to same media queries classes.
+ *
+ */
+export const getResponsiveCSS = (data: ResponsiveCSSPropertyData[]) => {
+  let initialCSS = '';
+  const breakpointData: Record<DeviceSizeName, string> = {
+    mobileS: '',
+    mobileM: '',
+    mobileL: '',
+    tablet: '',
+    laptop: '',
+    laptopL: '',
+    desktop: '',
+  };
+
+  data.forEach(({ prop, propName }) => {
+    if (typeof prop === 'object') {
+      Object.entries(prop).forEach(([key, value]) => {
+        const breakpoint = breakpointMap[key as Breakpoint];
+        if (breakpoint) {
+          breakpointData[breakpoint] += `${propName}: ${getCSSValue(propName, value)};`;
+        } else {
+          initialCSS += `${propName}: ${getCSSValue(propName, value)};`;
+        }
+      });
+    } else if (prop) {
+      initialCSS += `${propName}: ${getCSSValue(propName, prop)};`;
+    }
+  });
+
+  return css`
+    ${initialCSS}
+    ${createBreakpointCSS(breakpointData)}
+  `;
+};
+
+/**
+ * @param border
+ * @returns border
+ */
+export const getBlocksBorder = (border?: BorderValue) => {
+  // If border is not given return undefined, to avoid any breakages
+  if (!border) return border;
+
+  let borderValues;
+
+  borderValues = border.split(' ');
+
+  borderValues[0] = `var(--${borderValues[0]})`;
+
+  borderValues[2] = `var(--${borderValues[2]})`;
+  return borderValues.join(' ');
+};
+
+/**
+ * @param radius
+ * @returns
+ */
+export const getBlocksBorderRadius = (radius?: BlocksRadiusType) => {
+  // If border-radius is not given return undefined, to avoid any breakages
+  if (!radius) return radius;
+
+  const result = radius.replace(radiusRegex, (match) => `var(--${match})`);
+
+  return result;
+};
+
+export const getTextVariantStyles = (variant: TextVariants, color: ThemeColors) => css`
+  color: var(--${color});
+  font-family: var(--font-family);
+  font-size: ${textVariants[variant].fontSize};
+  font-style: ${textVariants[variant].fontStyle};
+  font-weight: ${textVariants[variant].fontWeight};
+  line-height: ${textVariants[variant].lineHeight};
+  letter-spacing: ${textVariants[variant].letterSpacing};
+  text-transform: ${textVariants[variant].textTransform};
+  margin: var(--spacing-none);
+`;