playbook_ui 11.12.1.pre.alpha.charts1 → 11.12.1.pre.alpha.passphrase1

data/app/pb_kits/playbook/pb_passphrase/useHaveIBeenPwned.js

@@ -1,52 +0,0 @@
-
-import  { useEffect, useState } from 'react'
-
-const checkHaveIBeenPwned = async function (passphrase) {
-  const buffer = new TextEncoder('utf-8').encode(passphrase)
-  const digest = await crypto.subtle.digest('SHA-1', buffer)
-  const hashArray = Array.from(new Uint8Array(digest))
-  const hashHex = hashArray.map((b) => b.toString(16).padStart(2, '0')).join('')
-
-  const firstFive = hashHex.slice(0, 5)
-  const endOfHash = hashHex.slice(5)
-
-  const resp = await fetch(`https://api.pwnedpasswords.com/range/${firstFive}`)
-  const text = await resp.text()
-
-  const match = text.split('\n').some((line) => {
-    //Each line is <sha-1-hash-suffix>:<count of incidents>
-    return line.split(':')[0] === endOfHash.toUpperCase()
-  })
-  return match
-}
-
-/**
- * If the input hasn't changed in <delay> ms,
- * hit the haveibeenpwned api and check if the given passphrase is compromised
- */
-export default function useHaveIBeenPwned(passphrase, minLength, delay = 400) {
-  const [isPwned, setIsPwned] = useState(false)
-
-  useEffect(
-    () => {
-      // only check the API for passphrases above the minimum size
-      if (passphrase.length < minLength) {
-        setIsPwned(false)
-        return
-      }
-
-      const handler = setTimeout(() => {
-        checkHaveIBeenPwned(passphrase)
-          .then((pwned) => setIsPwned(pwned))
-          .catch(() => setIsPwned(false))
-      }, delay)
-
-      return () => {
-        clearTimeout(handler)
-      }
-    },
-    [passphrase, minLength, delay]
-  )
-
-  return isPwned
-}

data/app/pb_kits/playbook/pb_passphrase/useZxcvbn.js

@@ -1,58 +0,0 @@
-import { useEffect, useMemo, useState } from 'react'
-import zxcvbn from 'zxcvbn'
-
-export default function useZxcvbn(options) {
-  const { passphrase = '', common, isPwned, confirmation, averageThreshold, minLength, strongThreshold } = options
-  const calculator = useMemo(
-    () => confirmation ?  () => ({ score: 0 }) : zxcvbn,
-    [confirmation]
-  )
-
-  const [percent, setPercent] = useState('0')
-  const [variant, setVariant] = useState('negative')
-  const [text, setText] = useState('\u00A0') //nbsp to keep height constant
-  const [result, setResult] = useState({})
-
-  useEffect(() => {
-    if (confirmation) return
-    const newResult = calculator(passphrase)
-    setResult(newResult)
-    const str = newResult.score
-
-    const noPassphrase = passphrase.length <= 0
-    const commonPassphrase = common || isPwned
-    const weakPassphrase = passphrase.length < minLength || str < averageThreshold
-    const averagePassphrase = str < strongThreshold
-    const strongPassphrase = str >= strongThreshold
-
-    if (noPassphrase) {
-      setPercent('0')
-      setVariant('negative')
-      setText('\u00A0') //nbsp to keep height constant
-    } else if (commonPassphrase) {
-      setPercent('25')
-      setVariant('negative')
-      setText('This passphrase is too common')
-    } else if (weakPassphrase) {
-      setPercent('25')
-      setVariant('negative')
-      setText('Too weak')
-    } else if (averagePassphrase){
-      setPercent('50')
-      setVariant('warning')
-      setText('Almost there, keep going!')
-    } else if (strongPassphrase) {
-      setPercent('100')
-      setVariant('positive')
-      setText('Success! Strong passphrase')
-    }
-  }, [passphrase, common, isPwned, averageThreshold, minLength, strongThreshold]
-  )
-
-  return {
-    strength: common || isPwned ? 0 : result.score,
-    percent,
-    variant,
-    text,
-  }
-}

data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx

@@ -1,111 +0,0 @@
-import React, { useState, useEffect } from "react";
-import classnames from "classnames";
-
-import { globalProps } from "../utilities/globalProps";
-import { buildAriaProps, buildDataProps } from "../utilities/props";
-
-import HighchartsReact from "highcharts-react-official";
-import Highcharts from "highcharts";
-import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
-import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
-import mapColors from "../pb_dashboard/pbChartsColorsHelper";
-import treemap from 'highcharts/modules/treemap'
-
-type TreemapChartProps = {
-  chartData: {
-    name: string;
-    parent?: string | number;
-    value: number;
-    color?: string;
-    id?: string | number;
-  }[];
-  className?: string;
-  colors: string[];
-  dark?: boolean;
-  drillable: boolean;
-  grouped: boolean;
-  height?: string;
-  id: number | string;
-  title?: string;
-  tooltipHtml: string;
-  type?: string;
-  aria?: { [key: string]: string };
-  data?: { [key: string]: string };
-};
-
-const TreemapChart = ({
-  aria = {},
-  data = {},
-  chartData,
-  colors,
-  dark = false,
-  drillable = false,
-  grouped = false,
-  height,
-  id,
-  title = "",
-  tooltipHtml = '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.value}</b>',
-  type = "treemap",
-  ...props
-}: TreemapChartProps) => {
-  const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data);
-  const setupTheme = () => {
-    dark
-      ? Highcharts.setOptions(highchartsDarkTheme)
-      : Highcharts.setOptions(highchartsTheme);
-  };  
-  treemap(Highcharts)
-  setupTheme();  
-
-  const staticOptions = {
-    title: {
-      text: title,
-    },
-    chart: {
-      height: height,
-      type: type,
-    },
-    credits: false,
-    series: [
-      {
-        data: chartData,
-      },
-    ],
-    plotOptions: {
-      treemap: {
-        tooltip: {
-          pointFormat: tooltipHtml,
-        },
-        allowTraversingTree: drillable,
-        colorByPoint: !grouped,
-        colors:
-          colors !== undefined && colors.length > 0
-            ? mapColors(colors)
-            : highchartsTheme.colors,
-      },
-    },
-  };
-
-  const [options, setOptions] = useState({});
-
-  useEffect(() => {
-    
-    setOptions({ ...staticOptions });
-  }, [chartData]);
-
-  return (
-    <HighchartsReact
-      containerProps={{
-        className: classnames(globalProps(props), "pb_treemap_chart"),
-        id: id,
-        ...ariaProps,
-        ...dataProps,
-      }}
-      highcharts={Highcharts}
-      options={options}
-    />
-  );
-};
-
-export default TreemapChart;