@platformatic/ui-components 0.10.2 → 0.12.1

package/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
 }) {

package/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

package/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,

package/src/components/Versions.jsx

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

package/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'

package/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'>

package/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'>

package/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'>

package/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 = '',

package/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'

package/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'

package/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'

package/src/components/forms/Password.jsx

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

package/src/components/forms/Preview.jsx

@@ -24,7 +24,7 @@ function Preview ({
   title = '',
   value = '',
   isLink = false,
-  children = null,
+  children,
   useCopyAndPaste = false,
   copyAndPaste = null,
   platformaticIcon = null,

package/src/components/forms/RadioGroup.jsx

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

package/src/components/forms/Select.jsx

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

package/src/components/forms/SelectWithInput.jsx

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

package/src/components/forms/TextArea.jsx

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

package/src/components/forms/ToggleSwitch.jsx

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

package/src/components/layouts/Layout.jsx

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

package/src/components/layouts/TwoColumnsLayout.jsx

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

package/src/components/loaders/SpinnerCircular.jsx

@@ -1,4 +1,3 @@
-'use strict'
 // https://loading.io/css/
 import React from 'react'
 import PropTypes from 'prop-types'

package/src/lib/utils.js

@@ -1,5 +1,3 @@
-'use strict'
-
 function getColor (type, color) {
   let convertedColor
   switch (color) {

package/src/stories/BorderedBox.stories.jsx

@@ -1,4 +1,4 @@
-'use strict'
+import React from 'react'
 import BorderedBox from '../components/BorderedBox'
 import { COLORS_BORDERED_BOX, ERROR_RED, OPACITY_30, OPACITY_100, TERTIARY_BLUE, WHITE } from '../components/constants'
 export default {

package/src/stories/Button.stories.jsx

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

package/src/stories/ButtonFullRounded.stories.jsx

@@ -1,4 +1,3 @@
-'use strict'
 import ButtonFullRounded from '../components/ButtonFullRounded'
 import {
   COLORS_ICON,

package/src/stories/ButtonOnlyIcon.stories.jsx

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

package/src/stories/Checkbox.stories.jsx

@@ -1,4 +1,3 @@
-'use strict'
 import Checkbox from '../components/Checkbox'
 import { MEDIUM, SMALL, WHITE } from '../components/constants'
 const divStyle = {

package/src/stories/DetailedMetric.stories.jsx

@@ -1,5 +1,3 @@
-'use strict'
-
 import { MAIN_GREEN } from '../components/constants'
 import DetailedMetric from '../components/DetailedMetric'
 

package/src/stories/DropDown.stories.jsx

@@ -1,4 +1,3 @@
-'use strict'
 import DropDown from '../components/DropDown'
 import BorderedBox from '../components/BorderedBox'
 import Button from '../components/Button'

package/src/stories/LogoDropDown.stories.jsx

@@ -1,4 +1,3 @@
-'use strict'
 import React, { useState } from 'react'
 import LogoDropDown from '../components/LogoDropDown'
 export default {

package/src/stories/Modal.stories.jsx

@@ -41,35 +41,40 @@ const Template = (args) => {
   const [isOpenInside, setIsOpenInside] = useState(false)
   const { text, ...rest } = args
   return (
-    <main style={{ height: '1440px', overflow: 'scroll' }}>
-      <BorderedBox>This Is another Content</BorderedBox>
-      <Button
-        color={MAIN_GREEN}
-        backgroundColor={MAIN_DARK_BLUE}
-        onClick={() => setIsOpen(true)}
-        label='Open Modal'
-      />
-      {isOpen && (
-        <Modal setIsOpen={setIsOpen} {...rest}>
-          {text}
-        </Modal>
-      )}
-
-      <BorderedBox style={{ position: 'relative' }}>
-        <p>This Is another Component with Modal inside</p>
-
+    <main style={{ height: '100vh', overflow: 'scroll' }} className='flex flex-col gap-y-4'>
+      <div className='flex flex-col gap-y-4'>
+        <BorderedBox>This Is another Content</BorderedBox>
         <Button
           color={MAIN_GREEN}
           backgroundColor={MAIN_DARK_BLUE}
-          onClick={() => setIsOpenInside(true)}
-          label='Open Modal Inside'
+          onClick={() => setIsOpen(true)}
+          label='Open Modal'
         />
-        {isOpenInside && (
-          <Modal setIsOpen={setIsOpenInside} {...rest}>
+        {isOpen && (
+          <Modal setIsOpen={setIsOpen} {...rest}>
             {text}
           </Modal>
         )}
-      </BorderedBox>
+      </div>
+
+      <div>
+        <BorderedBox style={{ position: 'relative' }}>
+          <p>This Is another Component with Modal inside</p>
+
+          <Button
+            color={MAIN_GREEN}
+            backgroundColor={MAIN_DARK_BLUE}
+            onClick={() => setIsOpenInside(true)}
+            label='Open Modal Inside'
+          />
+          {isOpenInside && (
+            <Modal setIsOpen={setIsOpenInside} {...rest}>
+              {text}
+            </Modal>
+          )}
+        </BorderedBox>
+      </div>
+
     </main>
   )
 }

package/src/stories/Report.stories.jsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import Report from '../components/Report'
+export default {
+  title: 'Platformatic/Report',
+  component: Report
+
+}
+
+const Template = () => {
+  const steps = [
+    { type: 'warning', label: 'This is a warning message' },
+    { type: 'success', label: 'This is a success message' },
+    { type: 'error', label: 'This is an error message' }
+  ]
+  return (
+    <div className='text-white'>
+      <Report steps={steps} />
+    </div>
+  )
+}
+
+export const Samples = {
+  render: () => <Template timeout={5000000} />
+}

package/src/stories/SearchBar.stories.jsx

@@ -1,4 +1,3 @@
-'use strict'
 import SearchBar from '../components/SearchBar'
 export default {
   title: 'Platformatic/SearchBar',

package/src/stories/SearchBarV2.stories.jsx

@@ -1,4 +1,3 @@
-'use strict'
 import SearchBarV2 from '../components/SearchBarV2'
 export default {
   title: 'Platformatic/SearchBarV2',

package/src/stories/Sidebar.stories.jsx

@@ -1,4 +1,3 @@
-'use strict'
 import { useState } from 'react'
 import Sidebar from '../components/Sidebar'
 import BorderedBox from '../components/BorderedBox'

package/src/stories/SimpleMetric.stories.jsx

@@ -1,5 +1,3 @@
-'use strict'
-
 import { ERROR_RED, MAIN_GREEN } from '../components/constants'
 import SimpleMetric from '../components/SimpleMetric'
 

package/src/stories/SplashScreen.stories.jsx

@@ -0,0 +1,111 @@
+import React, { useEffect, useState } from 'react'
+import SplashScreen from '../components/SplashScreen'
+import { ERROR_RED, MAIN_GREEN, RICH_BLACK, WHITE } from '../components/constants'
+import Button from '../components/Button'
+import Report from '../components/Report'
+export default {
+  title: 'Platformatic/Splash Screen',
+  component: SplashScreen
+}
+
+const Template = (args) => {
+  const {
+    timeout = 5000
+  } = args
+  const [showSplashScreen, setShowSplashScreen] = useState(false)
+  const [splashOptions, setSplashOptions] = useState({})
+
+  useEffect(() => {
+    if (Object.keys(splashOptions).length > 0) {
+      setShowSplashScreen(true)
+    }
+  }, [splashOptions])
+
+  function getReportSteps () {
+    const steps = [
+      { type: 'success', label: 'Removed from Main Taxonomy' },
+      { type: 'success', label: 'Removed from Preview Taxonomy' },
+      { type: 'success', label: 'API Key Invalidated' },
+      { type: 'success', label: 'Secrets removed' },
+      { type: 'success', label: 'All pods removed' }
+    ]
+    return steps
+  }
+  return (
+    <div style={{ height: '100vh' }}>
+      <div className='flex flex-col gap-y-2 w-1/4'>
+        <Button
+          color={MAIN_GREEN}
+          backgroundColor={RICH_BLACK}
+          onClick={() => {
+            setSplashOptions({
+              message: 'This is a success message',
+              success: true,
+              title: 'Operation Completed!',
+              timeout
+            })
+          }}
+          label='Success'
+        />
+
+        <Button
+          color={ERROR_RED}
+          backgroundColor={RICH_BLACK}
+          onClick={() => {
+            setSplashOptions({
+              title: 'The application wad deleted',
+              success: false,
+              message: 'The application you are looking for was deleted on YYYY-MM-DD [HH:MM:SS]',
+              timeout
+            })
+          }}
+          label='Failure'
+        />
+
+        <Button
+          color={WHITE}
+          backgroundColor={RICH_BLACK}
+          onClick={() => {
+            setSplashOptions({
+              title: 'The application wad deleted',
+              success: false,
+              message: 'The application you are looking for was deleted on YYYY-MM-DD [HH:MM:SS]',
+              timeout,
+              blur: true
+            })
+          }}
+          label='With Blur'
+        />
+
+        <Button
+          color={WHITE}
+          backgroundColor={RICH_BLACK}
+          onClick={() => {
+            setSplashOptions({
+              title: 'Application deleted successfully',
+              success: true,
+              message: 'You successfully delete this application.',
+              timeout,
+              children: (
+                <Report steps={getReportSteps()} />
+              )
+            })
+          }}
+          label='With report'
+        />
+      </div>
+
+      {showSplashScreen && (
+        <SplashScreen
+          {...splashOptions}
+          onDestroyed={() => setShowSplashScreen(false)}
+        >{splashOptions.children}
+        </SplashScreen>
+      )}
+    </div>
+  )
+}
+
+export const Samples = {
+  render: () => <Template timeout={5000000} />
+}

package/src/stories/Status.stories.jsx

@@ -1,4 +1,3 @@
-'use strict'
 import Status from '../components/Status'
 
 export default {

package/src/stories/TabbedWindow.stories.jsx

@@ -1,4 +1,3 @@
-'use strict'
 import TabbedWindow from '../components/TabbedWindow'
 import TextWithLabel from '../components/TextWithLabel'
 export default {

package/src/stories/Tag.stories.jsx

@@ -1,4 +1,3 @@
-'use strict'
 import Tag from '../components/Tag'
 import { ELECTRIC_PURPLE, ERROR_RED, MAIN_GREEN, OPACITY_30, SMALL, TERTIARY_BLUE, WARNING_YELLOW, WHITE } from '../components/constants'
 export default {

package/src/stories/TextWithLabel.stories.jsx

@@ -1,5 +1,3 @@
-'use strict'
-
 import TextWithLabel from '../components/TextWithLabel'
 export default {
   title: 'Platformatic/TextWithLabel',

package/src/stories/Tooltip.stories.jsx

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

package/src/stories/TwoColumnsLayout.stories.jsx

@@ -1,4 +1,3 @@
-'use strict'
 import TwoColumnsLayout from '../components/layouts/TwoColumnsLayout'
 import BorderedBox from '../components/BorderedBox'
 export default {

package/src/stories/backgrounds/AppBackgroundIcon.stories.jsx

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

package/src/stories/backgrounds/LensBackgroundIcon.stories.jsx

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

package/src/stories/backgrounds/TimerBackgroundIcon.stories.jsx

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

package/src/stories/forms/Field.stories.jsx

@@ -1,4 +1,3 @@
-'use strict'
 import Field from '../../components/forms/Field'
 import Button from '../../components/Button'
 import Input from '../../components/forms/Input'

package/src/stories/forms/Input.stories.jsx

@@ -1,4 +1,3 @@
-'use strict'
 import React, { useState } from 'react'
 import Input from '../../components/forms/Input'
 import { ERROR_RED } from '../../components/constants'

package/src/stories/forms/InputFileUpload.stories.jsx

@@ -1,4 +1,3 @@
-'use strict'
 import React from 'react'
 import InputFileUpload from '../../components/forms/InputFileUpload'
 import { RICH_BLACK } from '../../components/constants'

package/src/stories/forms/InputWithSeparator.stories.jsx

@@ -1,4 +1,3 @@
-'use strict'
 import React, { useState } from 'react'
 import { ERROR_RED, MAIN_GREEN, MEDIUM } from '../../components/constants'
 import InputWithSeparator from '../../components/forms/InputWithSeparator'

package/src/stories/forms/Password.stories.jsx

@@ -1,4 +1,3 @@
-'use strict'
 import React, { useState } from 'react'
 import Password from '../../components/forms/Password'
 

package/src/stories/forms/Preview.stories.jsx

@@ -1,4 +1,3 @@
-'use strict'
 import Preview from '../../components/forms/Preview'
 
 const divStyle = {

package/src/stories/forms/RadioGroup.stories.jsx

@@ -1,4 +1,3 @@
-'use strict'
 import React, { useState } from 'react'
 import RadioGroup from '../../components/forms/RadioGroup'
 

package/src/stories/forms/Select.stories.jsx

@@ -1,4 +1,3 @@
-'use strict'
 import React, { useState } from 'react'
 import Select from '../../components/forms/Select'
 import {

package/src/stories/forms/SelectWithInput.stories.jsx

@@ -1,4 +1,3 @@
-'use strict'
 import React, { useState } from 'react'
 import SelectWithInput from '../../components/forms/SelectWithInput'
 import {

package/src/stories/forms/TextArea.stories.jsx

@@ -1,4 +1,3 @@
-'use strict'
 import React, { useState } from 'react'
 import TextArea from '../../components/forms/TextArea'
 

package/src/stories/forms/ToggleSwitch.stories.jsx

@@ -1,4 +1,3 @@
-'use strict'
 import React, { useState } from 'react'
 import ToggleSwitch from '../../components/forms/ToggleSwitch'
 export default {

package/src/stories/icons/Icons.stories.jsx

@@ -5,7 +5,7 @@ import CircleCloseIcon from '../../components/icons/CircleCloseIcon'
 import WorkspaceStaticIcon from '../../components/icons/WorkspaceStaticIcon'
 import UpgradeIcon from '../../components/icons/UpgradeIcon'
 import WorkspaceDynamicIcon from '../../components/icons/WorkspaceDynamicIcon'
-import { COLORS_ICON } from '../../components/constants'
+import { COLORS_ICON, MAIN_GREEN, RICH_BLACK } from '../../components/constants'
 import icons from '../../components/icons/index.js'
 
 const divStyle = {
@@ -98,7 +98,10 @@ LargeIconsDefault.args = {}
 
 const AllSizesIcons = (Icon) => () => {
   const icons = ['small', 'medium', 'large'].map((size) => (
-    <Icon key={size} size={size} />
+    <div key={size} className='antani' style={{ backgroundColor: RICH_BLACK }}>
+      <Icon size={size} color={MAIN_GREEN} />
+    </div>
+
   ))
   return icons
 }
@@ -113,3 +116,5 @@ export const ExportIcons = AllSizesIcons(icons.ExportIcon).bind({})
 export const InfoCircleIcons = AllSizesIcons(icons.InfoCircleIcon).bind({})
 export const CollapseSquareIcons = AllSizesIcons(icons.CollapseSquareIcon).bind({})
 export const ExpandSquareIcon = AllSizesIcons(icons.ExpandSquareIcon).bind({})
+export const EntrypointIcon = AllSizesIcons(icons.EntrypointIcon).bind({})
+export const AlertIcon = AllSizesIcons(icons.AlertIcon).bind({})