@platformatic/ui-components 0.10.1 → 0.12.0

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
 }
@@ -110,3 +113,8 @@ export const AppOptimizedIcons = AllSizesIcons(icons.AppOptimizedIcon).bind({})
 export const AWSIcons = AllSizesIcons(icons.AWSIcon).bind({})
 export const ImportIcons = AllSizesIcons(icons.ImportIcon).bind({})
 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({})