@platformatic/ui-components 0.1.18 → 0.1.21

package/dist/assets/index.e8f4b797.css

@@ -0,0 +1 @@
+._input_1v03r_1{box-sizing:border-box;display:flex;height:2.5rem;width:100%;justify-content:space-between;border-radius:.375rem;border-width:1px;border-style:solid;--tw-border-opacity: 1;border-color:rgb(33 250 144 / var(--tw-border-opacity));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._input_1v03r_1>input:focus{outline:2px solid transparent;outline-offset:2px}._padded_650jz_1{padding:.625rem .5rem}._bordered_650jz_5{box-sizing:border-box;border-radius:.375rem;border-width:1px;border-style:solid}._tabbed-container_1r9tv_1{--tw-bg-opacity: 1;background-color:rgb(0 40 61 / var(--tw-bg-opacity))}._tabs-header_1r9tv_5{margin-bottom:1rem;display:flex;height:2rem;justify-content:flex-start;text-transform:uppercase;letter-spacing:.25rem;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._tabs-header_1r9tv_5:hover{cursor:pointer}._tab_1r9tv_1{margin-right:1rem;min-width:105px;text-align:center}._selected-tab_1r9tv_11{font-weight:700;--tw-text-opacity: 1;color:rgb(33 250 144 / var(--tw-text-opacity));text-decoration-line:underline;text-underline-offset:8px}._tabs-content_1r9tv_15{height:100vh}._borderedBox_1fd0d_1{margin-bottom:1rem;flex:1 1 0%;row-gap:1rem;border-radius:.375rem;--tw-bg-opacity: 1;background-color:rgb(0 52 79 / var(--tw-bg-opacity));padding:1.25rem;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}:before,:after{--tw-content: ""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Montserrat}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%;margin-right:auto;margin-left:auto}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.relative{position:relative}.m-3{margin:.75rem}.my-4{margin-top:1rem;margin-bottom:1rem}.mx-auto{margin-left:auto;margin-right:auto}.my-5{margin-top:1.25rem;margin-bottom:1.25rem}.mr-2{margin-right:.5rem}.flex{display:flex}.grid{display:grid}.h-screen{height:100vh}.grow{flex-grow:1}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.gap-10{gap:2.5rem}.gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.border{border-width:1px}.border-error-red{--tw-border-opacity: 1;border-color:rgb(250 33 33 / var(--tw-border-opacity))}.border-main-green{--tw-border-opacity: 1;border-color:rgb(33 250 144 / var(--tw-border-opacity))}.px-4{padding-left:1rem;padding-right:1rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-5xl{font-size:3rem;line-height:1}.text-6xl{font-size:3.75rem;line-height:1}.text-2xl{font-size:1.5rem;line-height:2rem}.font-bold{font-weight:700}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.text-dark-green{--tw-text-opacity: 1;color:rgb(2 120 63 / var(--tw-text-opacity))}.text-main-green{--tw-text-opacity: 1;color:rgb(33 250 144 / var(--tw-text-opacity))}.text-error-red{--tw-text-opacity: 1;color:rgb(250 33 33 / var(--tw-text-opacity))}:root{--tw-bg-opacity: 1;background-color:rgb(0 40 61 / var(--tw-bg-opacity));font-family:Montserrat}a{--tw-text-opacity: 1;color:rgb(37 136 228 / var(--tw-text-opacity))}input{background-color:transparent}

package/dist/index.html

@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Platformatic UI Components</title>
-    <script type="module" crossorigin src="/assets/index.d77cda9b.js"></script>
-    <link rel="stylesheet" href="/assets/index.f6d5761c.css">
+    <script type="module" crossorigin src="/assets/index.5ac5acb7.js"></script>
+    <link rel="stylesheet" href="/assets/index.e8f4b797.css">
   </head>
   <body>
     <div id="root"></div>

package/dist/main.css

@@ -540,8 +540,8 @@ video {
   }
 }
 
-.static {
-  position: static;
+.relative {
+  position: relative;
 }
 
 .m-3 {
@@ -553,11 +553,6 @@ video {
   margin-bottom: 1rem;
 }
 
-.my-8 {
-  margin-top: 2rem;
-  margin-bottom: 2rem;
-}
-
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -572,22 +567,6 @@ video {
   margin-right: 0.5rem;
 }
 
-.mr-5 {
-  margin-right: 1.25rem;
-}
-
-.ml-4 {
-  margin-left: 1rem;
-}
-
-.mt-24 {
-  margin-top: 6rem;
-}
-
-.mb-16 {
-  margin-bottom: 4rem;
-}
-
 .flex {
   display: flex;
 }
@@ -600,18 +579,6 @@ video {
   height: 100vh;
 }
 
-.w-full {
-  width: 100%;
-}
-
-.w-9 {
-  width: 2.25rem;
-}
-
-.w-80 {
-  width: 20rem;
-}
-
 .grow {
   flex-grow: 1;
 }
@@ -624,26 +591,6 @@ video {
   flex-direction: column;
 }
 
-.place-items-center {
-  place-items: center;
-}
-
-.items-center {
-  align-items: center;
-}
-
-.justify-between {
-  justify-content: space-between;
-}
-
-.gap-2 {
-  gap: 0.5rem;
-}
-
-.gap-4 {
-  gap: 1rem;
-}
-
 .gap-10 {
   gap: 2.5rem;
 }
@@ -677,9 +624,9 @@ video {
   line-height: 2rem;
 }
 
-.text-5xl {
-  font-size: 3rem;
-  line-height: 1;
+.text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
 }
 
 .text-4xl {
@@ -687,9 +634,9 @@ video {
   line-height: 2.5rem;
 }
 
-.text-3xl {
-  font-size: 1.875rem;
-  line-height: 2.25rem;
+.text-5xl {
+  font-size: 3rem;
+  line-height: 1;
 }
 
 .text-6xl {
@@ -697,23 +644,10 @@ video {
   line-height: 1;
 }
 
-.font-semibold {
-  font-weight: 600;
-}
-
 .font-bold {
   font-weight: 700;
 }
 
-.font-light {
-  font-weight: 300;
-}
-
-.text-main-green {
-  --tw-text-opacity: 1;
-  color: rgb(33 250 144 / var(--tw-text-opacity));
-}
-
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -724,17 +658,14 @@ video {
   color: rgb(2 120 63 / var(--tw-text-opacity));
 }
 
-.text-error-red {
+.text-main-green {
   --tw-text-opacity: 1;
-  color: rgb(250 33 33 / var(--tw-text-opacity));
+  color: rgb(33 250 144 / var(--tw-text-opacity));
 }
 
-@font-face {
-  font-family: 'Montserrat';
-
-  src: local('Montserrat'), url(./fonts/Montserrat/Montserrat-VariableFont_wght.ttf) format('truetype');
-
-  font-weight: 100 900;
+.text-error-red {
+  --tw-text-opacity: 1;
+  color: rgb(250 33 33 / var(--tw-text-opacity));
 }
 
 :root {
@@ -750,8 +681,4 @@ a {
 
 input {
   background-color: transparent;
-}
-
-.hover\:cursor-pointer:hover {
-  cursor: pointer;
 }

package/index.js

@@ -1,16 +1,15 @@
 'use strict'
 
-import ApiSummary from './src/components/ApiSummary'
-import ApiDetails from './src/components/ApiDetail'
 import BorderedBox from './src/components/BorderedBox'
 import BorderedText from './src/components/BorderedText'
 import Box from './src/components/Box'
 import Button from './src/components/Button'
 import DetailedMetric from './src/components/DetailedMetric'
+import DropDown from './src/components/DropDown'
 import FollowUs from './src/components/FollowUs'
-import FrontpageBackground from './src/components/FrontpageBackground'
 import GHLoginButton from './src/components/GHLoginButton'
 import HorizontalSeparator from './src/components/HorizontalSeparator'
+import Icons from './src/components/icons'
 import Input from './src/components/Input'
 import Layout from './src/components/layouts/Layout'
 import List from './src/components/List'
@@ -18,7 +17,6 @@ import ListElement from './src/components/ListElement'
 import LoginButton from './src/components/LoginButton'
 import Logo from './src/components/Logo'
 import Playground from './src/components/Playground'
-import PullRequest from './src/components/PullRequest'
 import SearchBar from './src/components/SearchBar'
 import SimpleMetric from './src/components/SimpleMetric'
 import Status from './src/components/Status'
@@ -28,17 +26,16 @@ import TwoColumnsLayout from './src/components/layouts/TwoColumnsLayout'
 import Versions from './src/components/Versions'
 import VerticalSeparator from './src/components/VerticalSeparator'
 export {
-  ApiSummary,
-  ApiDetails,
   BorderedBox,
   BorderedText,
   Box,
   Button,
   DetailedMetric,
+  DropDown,
   FollowUs,
-  FrontpageBackground,
   HorizontalSeparator,
   GHLoginButton,
+  Icons,
   Input,
   Layout,
   List,
@@ -46,7 +43,6 @@ export {
   LoginButton,
   Logo,
   Playground,
-  PullRequest,
   SearchBar,
   SimpleMetric,
   Status,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@platformatic/ui-components",
   "description": "Platformatic UI Components",
-  "version": "0.1.18",
+  "version": "0.1.21",
   "type": "module",
   "license": "Apache-2.0",
   "scripts": {
@@ -27,6 +27,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-tooltip": "^4.4.3",
+    "spinners-react": "^1.0.7",
     "storybook-tailwind-foundations": "^1.1.2"
   },
   "devDependencies": {

package/src/components/DropDown.jsx

@@ -0,0 +1,35 @@
+'use strict'
+
+import React, { useState } from 'react'
+import styles from './DropDown.module.css'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faChevronLeft, faChevronDown } from '@fortawesome/free-solid-svg-icons'
+export default function DropDown (props) {
+  const { header, items, align = 'left' } = props
+  const [open, setOpen] = useState(false)
+  function handleOpen () {
+    setOpen(!open)
+  }
+  return (
+    <div className={`${styles.dropDown} ${styles[align]}`}>
+      <span className={styles.header} onClick={handleOpen}>
+        {header}
+        {!open && <FontAwesomeIcon className={styles.arrow} icon={faChevronLeft} />}
+        {open && <FontAwesomeIcon className={styles.arrow} icon={faChevronDown} />}
+      </span>
+      {open && (
+        <div className={styles.menu}>
+          {items.map((item, index) => {
+            return (
+              <div className={styles.item} key={index}>
+                {item}
+              </div>
+            )
+          })}
+        </div>
+      )}
+
+    </div>
+
+  )
+}

package/src/components/DropDown.module.css

@@ -0,0 +1,23 @@
+.dropDown {
+  @apply mx-4 relative flex flex-col;
+}
+
+.right {
+  @apply items-end;
+}
+
+.left {
+  @apply items-start;
+}
+.arrow {
+  @apply ml-2;
+}
+.header {
+  @apply hover:cursor-pointer
+}
+.menu {
+  @apply absolute border-solid border border-main-green p-4 bg-dark-blue mt-8 rounded-md;
+}
+.item {
+  @apply mb-2
+}

package/src/components/ListElement.module.css

@@ -11,11 +11,11 @@
 }
 
 .title {
-  @apply flex text-light-green font-bold w-full text-left 
+  @apply flex text-light-green font-bold w-full
 }
 
 .textCol {
-  @apply flex flex-col text-white text-justify w-96
+  @apply flex flex-col text-white text-justify w-full
 }
 
 .detailSpace {

package/src/components/Loadable.jsx

@@ -0,0 +1,34 @@
+import React, { useState, cloneElement, Children } from 'react'
+import styles from './Loadable.module.css'
+import { SpinnerCircular } from 'spinners-react'
+
+export default function List ({ ...props }) {
+  // If null then loading not started, if true then loading, if false then done loading
+  const [loading, setLoading] = useState(null)
+  const startLoading = (reset = false) => {
+    // We can start only once (unless we reset)
+    if (loading === null || reset) {
+      setLoading(true)
+    }
+  }
+  const stopLoading = () => setLoading(false)
+
+  const children = Children.map(props.children, child => cloneElement(child, { startLoading, stopLoading }))
+
+  return (
+    <div className={styles.container} data-testid='loadable'>
+      {
+        loading
+          ? (
+            <>
+              <div data-testid='loadable-content' className={styles.relative}>
+                <SpinnerCircular className={styles.spinner} thickness={180} size={60} />
+                <div className={styles.blurred}>{children}</div>
+              </div>
+            </>
+            )
+          : <>{children}</>
+      }
+    </div>
+  )
+}

package/src/components/Loadable.module.css

@@ -0,0 +1,13 @@
+
+.container {
+  @apply relative
+}
+
+.spinner {
+    @apply z-50 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2
+}
+
+.blurred {
+  @apply blur-sm
+}
+

package/src/components/Main.jsx

@@ -1,48 +1,13 @@
 'use strict'
 
 import SearchBar from './SearchBar'
-import ApiDetails from './ApiDetail'
-import ApiSummary from './ApiSummary'
 import TabbedWindow from './TabbedWindow'
-import Prs from './PullRequest'
 import Playground from './Playground'
 import Versions from './Versions'
 import React, { useState } from 'react'
 export default function Main () {
   const [currentSearch, setCurrentSearch] = useState('')
-  const apis = [
-    {
-      id: 1,
-      name: 'api-online',
-      version: '1.2.3',
-      source: 'Platformatic DB',
-      lastDeploy: '2022-10-10',
-      graphql: true,
-      openapi: true,
-      online: true,
-      url: 'https://example.com',
-      repository: 'platformatic/example'
-    },
-    {
-      id: 2,
-      name: 'api-offline',
-      version: '1.2.3',
-      source: 'Platformatic DB',
-      lastDeploy: '2022-10-10',
-      graphql: true,
-      openapi: true,
-      online: false
-    }
-  ]
   const tabs = [
-    {
-      label: 'Overview',
-      component: () => <ApiDetails data={apis[0]} />
-    },
-    {
-      label: 'PRs',
-      component: () => <Prs />
-    },
     {
       label: 'Playground',
       component: () => <Playground />
@@ -63,7 +28,6 @@ export default function Main () {
       <TabbedWindow
         tabs={tabs}
       />
-      {apis.map((api) => { return (<ApiSummary key={api.id} data={api} />) })}
     </>
   )
 }

package/src/components/icons/index.js

@@ -0,0 +1,7 @@
+import ApiIcon from './ApiIcon'
+import ApiIconClosed from './ApiIconClosed'
+import PullRequestIcon from './PullRequestIcon'
+
+export default {
+  ApiIcon, ApiIconClosed, PullRequestIcon
+}

package/src/stories/DropDown.stories.jsx

@@ -0,0 +1,43 @@
+'use strict'
+import DropDown from '../components/DropDown'
+export default {
+  title: 'Platformatic/DropDown',
+  component: DropDown,
+  decorators: [dd => <div className='text-white'>{dd()}</div>]
+}
+
+const Template = (args) => <DropDown {...args} />
+export const DefaultAlignment = Template.bind({})
+
+DefaultAlignment.args = {
+  header: 'My Menu',
+  items: [
+    <span key='1'>Menu 1</span>,
+    <span key='2'>Menu 2</span>,
+    <span key='3'>This is a very long menu item</span>
+  ]
+}
+
+export const AlignRight = Template.bind({})
+
+AlignRight.args = {
+  header: 'My Menu',
+  align: 'right',
+  items: [
+    <span key='1'>Menu 1</span>,
+    <span key='2'>Menu 2</span>,
+    <span key='3'>This is a very long menu item</span>
+  ]
+}
+
+export const AlignLeft = Template.bind({})
+
+AlignLeft.args = {
+  header: 'My Menu',
+  align: 'left',
+  items: [
+    <span key='1'>Menu 1</span>,
+    <span key='2'>Menu 2</span>,
+    <span key='3'>This is a very long menu item</span>
+  ]
+}

package/src/stories/Loadable.stories.jsx

@@ -0,0 +1,75 @@
+import React, { useEffect } from 'react'
+import Loadable from '../components/Loadable'
+import BorderedBox from '../components/BorderedBox'
+
+const loremIpsum = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus est nisl, maximus aliquet urna eu, consequat semper nisi. Nam vel elit feugiat dui congue elementum. Sed turpis urna, egestas at pharetra et, lacinia ac mauris. Pellentesque cursus, ipsum nec malesuada ornare, dui purus ultrices elit, non blandit nisi quam non nisi. Suspendisse sapien leo, ultricies pretium vulputate sed, malesuada sed justo. Suspendisse euismod erat ut lacus feugiat malesuada. In tempor a eros et egestas. Nam pretium dolor sollicitudin, cursus sem vitae, elementum enim. Nam in nisi ipsum.
+`
+
+export default {
+  title: 'Platformatic/Loadable',
+  component: Loadable
+}
+
+const ContentThatLoads = ({ startLoading }) => {
+  startLoading()
+  return <BorderedBox>{loremIpsum}</BorderedBox>
+}
+
+export const Loading = args =>
+  <Loadable {...args}>
+    <ContentThatLoads />
+  </Loadable>
+Loading.args = {}
+
+const ContentThatLoadsAndStops = ({ startLoading, stopLoading }) => {
+  useEffect(() => {
+    startLoading()
+    const timer = setTimeout(() => {
+      stopLoading()
+    }, 2000)
+    return () => clearTimeout(timer)
+  }, [])
+  return <BorderedBox>{loremIpsum}</BorderedBox>
+}
+
+export const LoadsAndStops = args => {
+  return (
+    <Loadable {...args}>
+      <ContentThatLoadsAndStops />
+    </Loadable>
+  )
+}
+LoadsAndStops.args = {}
+
+export const LoadsAndStops2 = args => {
+  return (
+    <Loadable {...args}>
+      <ContentThatLoadsAndStops />
+      <ContentThatLoadsAndStops />
+    </Loadable>
+  )
+}
+LoadsAndStops2.args = {}
+
+const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
+const ContentThatToggle = ({ startLoading, stopLoading }) => {
+  useEffect(() => {
+    startLoading()
+    const toggle = async () => {
+      await sleep(1000)
+      stopLoading()
+      await sleep(1000)
+      startLoading(true)
+    }
+    toggle()
+  }, [])
+  return <BorderedBox>{loremIpsum}</BorderedBox>
+}
+export const Toggle = args => {
+  return (
+    <Loadable {...args}>
+      <ContentThatToggle />
+    </Loadable>
+  )
+}
+Toggle.args = {}

package/src/styles/main.css

@@ -2,12 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-@font-face {
-  font-family: 'Montserrat';
-  src: local('Montserrat'), url(./fonts/Montserrat/Montserrat-VariableFont_wght.ttf) format('truetype');
-  font-weight: 100 900;
-}
-
 :root {
   @apply bg-main-dark-blue;
   font-family: 'Montserrat';