Merge pull request #436 from platformatic/add-splashscreen-and-report-list

Author: leorossi

index.js

@@ -1,5 +1,3 @@
-'use strict'
-
 import BorderedBox from './src/components/BorderedBox'
 import Box from './src/components/Box'
 import Button from './src/components/Button'

postcss.config.cjs

@@ -1,5 +1,3 @@
-'use strict'
-
 module.exports = {
   plugins: {
     tailwindcss: {},

src/components/BorderedBox.jsx

@@ -1,4 +1,3 @@
-'use strict'
 import React, { useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
 import styles from './BorderedBox.module.css'
@@ -7,7 +6,7 @@ import { COLORS_BORDERED_BOX, DARK_BLUE, TRANSPARENT, OPACITIES, OPACITY_100 } f
 function BorderedBox ({
   classes = '',
   color = TRANSPARENT,
-  children = null,
+  children,
   backgroundColor = DARK_BLUE,
   backgroundColorOpacity = OPACITY_100,
   borderColorOpacity = OPACITY_100,

src/components/Box.jsx

@@ -1,5 +1,3 @@
-'use strict'
-
 import styles from './Box.module.css'
 import React from 'react'
 export default function Box ({ justifyCentered, children }) {

src/components/Button.jsx

@@ -1,4 +1,3 @@
-'use strict'
 import React, { useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
 import styles from './Button.module.css'

src/components/ButtonFullRounded.jsx

@@ -1,4 +1,3 @@
-'use strict'
 import React from 'react'
 import PropTypes from 'prop-types'
 import commonStyles from './Common.module.css'

src/components/ButtonOnlyIcon.jsx

@@ -1,4 +1,3 @@
-'use strict'
 import React, { useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
 import styles from './ButtonOnlyIcon.module.css'

src/components/Checkbox.jsx

@@ -1,4 +1,3 @@
-'use strict'
 import React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Checkbox.module.css'

src/components/CopyAndPaste.jsx

@@ -1,4 +1,3 @@
-'use strict'
 import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 import { COLORS_ICON, DIRECTION_TOP, MEDIUM, SIZES, POSITIONS, POSITION_CENTER, MAIN_DARK_BLUE } from './constants'

src/components/DetailedMetric.jsx

@@ -1,5 +1,3 @@
-'use strict'
-
 import React from 'react'
 import SimpleMetric from './SimpleMetric'
 import HorizontalSeparator from './HorizontalSeparator'

src/components/DropDown.jsx

@@ -1,4 +1,3 @@
-'use strict'
 import React, { useEffect, useRef, useState } from 'react'
 import PropTypes from 'prop-types'
 import styles from './DropDown.module.css'

src/components/HorizontalSeparator.jsx

@@ -1,4 +1,3 @@
-'use strict'
 import React from 'react'
 import PropTypes from 'prop-types'
 import commonStyles from './Common.module.css'

src/components/InfoBox.jsx

@@ -1,4 +1,3 @@
-'use strict'
 import React from 'react'
 import PropTypes from 'prop-types'
 import styles from './InfoBox.module.css'
@@ -7,7 +6,7 @@ import PlatformaticIcon from './PlatformaticIcon'
 import { COLORS_BUTTON, COLORS_ICON, HOVER_EFFECTS_BUTTONS, MAIN_GREEN } from './constants'
 
 function InfoBox ({
-  children = null,
+  children,
   iconName = '',
   iconColor = MAIN_GREEN,
   helpText = '',

src/components/LoadingSpinnerV2.jsx

@@ -1,4 +1,3 @@
-'use strict'
 import React from 'react'
 import PropTypes from 'prop-types'
 import styles from './LoadingSpinnerV2.module.css'

src/components/LogoDropDown.jsx

@@ -1,4 +1,3 @@
-'use strict'
 import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 import styles from './LogoDropDown.module.css'

src/components/Main.jsx

@@ -1,5 +1,3 @@
-'use strict'
-
 import SearchBar from './SearchBar'
 import TabbedWindow from './TabbedWindow'
 import Playground from './Playground'

src/components/MetricValue.jsx

@@ -1,4 +1,3 @@
-'use strict'
 import React from 'react'
 import styles from './MetricValue.module.css'
 import commonStyles from './Common.module.css'

src/components/Modal.jsx

@@ -1,4 +1,3 @@
-'use strict'
 import React, { useRef } from 'react'
 import PropTypes from 'prop-types'
 import ButtonFullRounded from './ButtonFullRounded'
@@ -34,7 +33,7 @@ function Modal ({
   setIsOpen = () => {},
   title = '',
   layout = MODAL_POPUP,
-  children = null,
+  children,
   size = SMALL,
   profile = '',
   backgroundClassName = '',

src/components/ModalDirectional.jsx

@@ -1,4 +1,3 @@
-'use strict'
 import React, { useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
 import useEscapeKey from '../hooks/useEscapeKey'
@@ -10,7 +9,7 @@ import {
 import PlatformaticIcon from './PlatformaticIcon'
 
 function ModalDirectional ({
-  children = null,
+  children,
   setIsOpen = () => {},
   smallLayout = false,
   classNameModalLefty = '',

src/components/ModalStepsForward.jsx

@@ -1,4 +1,3 @@
-'use strict'
 import React from 'react'
 import PropTypes from 'prop-types'
 import ButtonFullRounded from './ButtonFullRounded'

src/components/PlatformaticIcon.jsx

@@ -1,4 +1,3 @@
-'use strict'
 import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 import Icons from './icons'

src/components/Playground.jsx

@@ -1,4 +1,3 @@
-'use strict'
 import React from 'react'
 import BorderedBox from './BorderedBox'
 

src/components/Report.jsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import Icons from './icons'
+import { ERROR_RED, MAIN_GREEN, WARNING_YELLOW } from './constants'
+
+function getIcon (type) {
+  switch (type) {
+    case 'success':
+      return <Icons.CircleCheckMarkIcon color={MAIN_GREEN} />
+    case 'error':
+      return <Icons.CircleCheckMarkIcon color={ERROR_RED} />
+    case 'warning':
+      return <Icons.AlertIcon color={WARNING_YELLOW} />
+  }
+}
+function Step ({
+  type,
+  label
+}) {
+  return (
+    <div className='flex items-center gap-x-2'>
+      {getIcon(type)}
+      <span>{label}</span>
+    </div>
+  )
+}
+export default function Report ({
+  steps = []
+}) {
+  function renderSteps () {
+    return steps.map((s, idx) => {
+      return <Step key={`report-step-${idx}`} {...s} />
+    })
+  }
+  return (
+    <div className='text-white/70 flex flex-col gap-y-2'>
+      {renderSteps()}
+    </div>
+
+  )
+}

src/components/SearchBar.jsx

@@ -1,4 +1,3 @@
-'use strict'
 import React, { useRef, useState } from 'react'
 import styles from './SearchBar.module.css'
 import commonStyles from './Common.module.css'

src/components/SearchBarV2.jsx

@@ -1,4 +1,3 @@
-'use strict'
 import React, { useRef, useState } from 'react'
 import PropTypes from 'prop-types'
 import commonStyles from './Common.module.css'

src/components/SimpleMetric.jsx

@@ -1,5 +1,3 @@
-'use strict'
-
 import React from 'react'
 import BorderedBox from './BorderedBox'
 import styles from './SimpleMetric.module.css'

src/components/SplashScreen.jsx

@@ -0,0 +1,64 @@
+import React, { useEffect, useState } from 'react'
+import styles from './SplashScreen.module.css'
+import { ERROR_RED, MAIN_GREEN, RICH_BLACK, WHITE } from './constants'
+import Icons from './icons'
+import Button from './Button'
+export default function SplashScreen ({
+  success = true,
+  timeout = 5000,
+  message = '',
+  title = 'Operation completed',
+  blur = false,
+  children,
+  onDestroyed = () => {}
+}) {
+  const [destroyed, setDestroyed] = useState(false)
+  useEffect(() => {
+    if (destroyed) {
+      onDestroyed()
+    }
+  }, [destroyed])
+  useEffect(() => {
+    setTimeout(() => {
+      setDestroyed(true)
+    }, timeout)
+  }, [])
+
+  if (destroyed) {
+    return null
+  }
+
+  function renderIcon () {
+    if (success) {
+      return <Icons.CircleCheckMarkIcon color={MAIN_GREEN} />
+    } else {
+      return <Icons.AlertIcon color={ERROR_RED} />
+    }
+  }
+  return (
+    <div className={`${styles.container} ${blur ? 'backdrop-blur-sm bg-rich-black/50' : 'bg-rich-black'}`} onClick={() => setDestroyed(true)}>
+      <div className={styles.content}>
+        <div className={styles.icon}>{renderIcon()}</div>
+        <div className={styles.title}>{title}</div>
+        <div className={styles.message}>{message}</div>
+
+        <div className='mb-4'>
+          {children}
+        </div>
+
+        <div className={styles.button}>
+          <Button
+            color={RICH_BLACK}
+            backgroundColor={WHITE}
+            onClick={() => setDestroyed(true)}
+            label='Dismiss'
+            paddingClass='px-2 py-1'
+            textClass='text-[13px]'
+          />
+        </div>
+
+      </div>
+
+    </div>
+  )
+}

src/components/SplashScreen.module.css

@@ -0,0 +1,19 @@
+.container {
+  @apply fixed inset-0 flex items-center justify-center  text-white;
+}
+
+.title {
+  @apply text-[16px];
+}
+
+.message {
+  @apply text-[14px] text-white/70 mb-4;
+}
+
+.icon {
+  @apply mb-4;
+}
+
+.content {
+  @apply flex flex-col gap-y-2 items-center justify-center text-center bg-transparent;
+}

src/components/Status.jsx

@@ -1,4 +1,3 @@
-'use strict'
 import React from 'react'
 import PropTypes from 'prop-types'
 import PlatformaticIcon from './PlatformaticIcon'

src/components/TabbedWindow.jsx

@@ -1,4 +1,3 @@
-'use strict'
 import React, { useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
 import styles from './TabbedWindow.module.css'

src/components/Tag.jsx

@@ -1,4 +1,3 @@
-'use strict'
 import React from 'react'
 import PropTypes from 'prop-types'
 import commonStyles from './Common.module.css'

src/components/TextWithLabel.jsx

@@ -6,7 +6,7 @@ import styles from './TextWithLabel.module.css'
 function TextWithLabel ({
   label = '',
   text = '',
-  children = null,
+  children,
   color = WHITE,
   fontSize = FONT_BASE
 }) {

src/components/Tooltip.jsx

@@ -1,4 +1,3 @@
-'use strict'
 import PropTypes from 'prop-types'
 import styles from './Tooltip.module.css'
 import { useEffect, useRef, useState } from 'react'
@@ -11,7 +10,7 @@ function Tooltip ({
   activeDependsOnVisible = false,
   content = null,
   delay = 0,
-  children = null,
+  children,
   tooltipClassName = '',
   offset = 0,
   position = POSITION_CENTER

src/components/TooltipAbsolute.jsx

@@ -1,4 +1,3 @@
-'use strict'
 import PropTypes from 'prop-types'
 import styles from './TooltipAbsolute.module.css'
 import { useEffect, useState } from 'react'
@@ -8,7 +7,7 @@ const TooltipAbsolute = ({
   direction = DIRECTION_TOP,
   tooltipClassName = '',
   delay = 0,
-  children = null,
+  children,
   content = null,
   offset = 0,
   position = POSITION_START,

src/components/Versions.jsx

@@ -1,4 +1,3 @@
-'use strict'
 import React from 'react'
 import BorderedBox from './BorderedBox'
 

src/components/VerticalSeparator.jsx

@@ -1,4 +1,3 @@
-'use strict'
 import React from 'react'
 import PropTypes from 'prop-types'
 import { DARK_GREEN, MAIN_DARK_BLUE, OPACITY_10, OPACITY_20, OPACITY_30, OPACITY_60, OPACITY_100, WHITE } from './constants'

src/components/backgrounds/AppBackgroundIcon.jsx

@@ -1,5 +1,3 @@
-'use strict'
-
 const AppBackgroundIcon = () => {
   return (
     <svg width='669' height='669' viewBox='0 0 669 669' fill='none' xmlns='http://www.w3.org/2000/svg'>

src/components/backgrounds/LensBackgroundIcon.jsx

@@ -1,5 +1,3 @@
-'use strict'
-
 const LensBackgroundIcon = () => {
   return (
     <svg width='828' height='828' viewBox='0 0 828 828' fill='none' xmlns='http://www.w3.org/2000/svg'>

src/components/backgrounds/TimerBackgroundIcon.jsx

@@ -1,5 +1,3 @@
-'use strict'
-
 const TimerBackgroundIcon = () => {
   return (
     <svg width='828' height='828' viewBox='0 0 828 828' fill='none' xmlns='http://www.w3.org/2000/svg'>

src/components/forms/Field.jsx

@@ -7,7 +7,7 @@ function Field ({
   title = '',
   titleColor = MAIN_DARK_BLUE,
   helper = '',
-  children = null,
+  children,
   disabled = false,
   required = false,
   titleClassName = '',

src/components/forms/Input.jsx

@@ -1,4 +1,3 @@
-'use strict'
 import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 import styles from './Input.module.css'

src/components/forms/InputFileUpload.jsx

@@ -1,4 +1,3 @@
-'use strict'
 import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 import styles from './InputFileUpload.module.css'

src/components/forms/InputWithSeparator.jsx

@@ -1,4 +1,3 @@
-'use strict'
 import React, { useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
 import inputStyles from './Input.module.css'