@platformatic/ui-components 0.1.121 → 0.1.123

package/src/components/icons/PreviewPRIcon.jsx

@@ -0,0 +1,100 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
+
+const PreviewPRIcon = ({ color, size }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = <></>
+
+  switch (size) {
+    case SMALL:
+      icon = (
+        <svg
+          width={16}
+          height={16}
+          viewBox='0 0 16 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M6 12H2V2H10V6.5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <circle cx='4.25' cy='9.25' r='0.75' stroke='none' />
+          <circle cx='4.25' cy='4.75' r='0.75' stroke='none' />
+          <path d='M4.2002 5.5L4.2002 8.5' stroke='none' />
+          <path d='M7 9.24988C7 8.83566 7.33579 8.49988 7.75 8.49988' stroke='none' strokeLinecap='round' />
+          <path d='M7.75 8.49988V4.74988H6.5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <circle cx='10.5' cy='10.5' r='2.5' stroke='none' />
+          <path d='M14 14L12.5 12.5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+
+        </svg>
+      )
+      break
+    case MEDIUM:
+      icon = (
+        <svg
+          width={24}
+          height={24}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M9 18H3V3H15V9.75' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <circle cx='6.375' cy='13.875' r='1.125' stroke='none' strokeWidth={1.5} />
+          <circle cx='6.375' cy='7.125' r='1.125' stroke='none' strokeWidth={1.5} />
+          <path d='M6.2998 8.25L6.2998 12.75' stroke='none' strokeWidth={1.5} />
+          <path d='M10.5 13.8749C10.5 13.2536 11.0037 12.7499 11.625 12.7499' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
+          <path d='M11.625 12.7499V7.12488H9.75' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <circle cx='15.75' cy='15.75' r='3.75' stroke='none' strokeWidth={1.5} />
+          <path d='M21 21L18.75 18.75' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+
+        </svg>
+      )
+      break
+    case LARGE:
+      icon = (
+        <svg
+          width={40}
+          height={40}
+          viewBox='0 0 40 40'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M15 30H5V5H25V16.25' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <circle cx='10.625' cy='23.125' r='1.875' stroke='none' strokeWidth={2} />
+          <circle cx='10.625' cy='11.875' r='1.875' stroke='none' strokeWidth={2} />
+          <path d='M10.5 13.75L10.5 21.25' stroke='none' strokeWidth={2} />
+          <path d='M17.5 23.1248C17.5 22.0892 18.3395 21.2498 19.375 21.2498' stroke='none' strokeWidth={2} strokeLinecap='round' />
+          <path d='M19.375 21.2498V11.8748H16.25' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <circle cx='26.25' cy='26.25' r='6.25' stroke='none' strokeWidth={2} />
+          <path d='M35 35L31.25 31.25' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+PreviewPRIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(COLORS_ICON),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(SIZES)
+}
+
+PreviewPRIcon.defaultProps = {
+  color: MAIN_DARK_BLUE,
+  size: MEDIUM
+}
+
+export default PreviewPRIcon

package/src/components/icons/SocialXIcon.jsx

@@ -0,0 +1,79 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
+
+const SocialXIcon = ({ color, size }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  const filledClassName = styles[`filled-${color}`]
+  let icon = <></>
+
+  switch (size) {
+    case SMALL:
+      icon = (
+        <svg
+          width={16}
+          height={16}
+          viewBox='0 0 16 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M9.14154 7.19276L13.6088 2H12.5502L8.67134 6.50886L5.57327 2H2L6.68486 8.81814L2 14.2636H3.05869L7.15496 9.50214L10.4267 14.2636H14L9.14144 7.19276H9.14174H9.14154ZM7.69155 8.87814L7.21686 8.19925L3.44009 2.79689H5.06607L8.11405 7.15676L8.58875 7.83565L12.5507 13.5028H10.9247L7.69165 8.87834V8.87804L7.69155 8.87814Z' fill='none' className={filledClassName} />
+
+        </svg>
+      )
+      break
+    case MEDIUM:
+      icon = (
+        <svg
+          width={24}
+          height={24}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M13.7123 10.7891L20.4132 3H18.8253L13.007 9.76329L8.35991 3H3L10.0273 13.2272L3 21.3954H4.58804L10.7324 14.2532L15.6401 21.3954H21L13.7122 10.7891H13.7126H13.7123ZM11.5373 13.3172L10.8253 12.2989L5.16013 4.19534H7.59911L12.1711 10.7351L12.8831 11.7535L18.8261 20.2542H16.3871L11.5375 13.3175V13.3171L11.5373 13.3172Z' fill='none' className={filledClassName} />
+        </svg>
+      )
+      break
+    case LARGE:
+      icon = (
+        <svg
+          width={40}
+          height={40}
+          viewBox='0 0 40 40'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M22.8539 17.9819L34.022 5H31.3755L21.6784 16.2722L13.9332 5H5L16.7122 22.0454L5 35.659H7.64673L17.8874 23.7553L26.0668 35.659H35L22.8536 17.9819H22.8544H22.8539ZM19.2289 22.1954L18.0421 20.4981L8.60022 6.99223H12.6652L20.2851 17.8919L21.4719 19.5891L31.3768 33.757H27.3118L19.2291 22.1959V22.1951L19.2289 22.1954Z' fill='none' className={filledClassName} />
+
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+SocialXIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(COLORS_ICON),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(SIZES)
+}
+
+SocialXIcon.defaultProps = {
+  color: MAIN_DARK_BLUE,
+  size: MEDIUM
+}
+
+export default SocialXIcon

package/src/components/icons/index.js

@@ -5,14 +5,17 @@ import ApiCloudIcon from './ApiCloudIcon'
 import ApiIcon from './ApiIcon'
 import ApiIconClosed from './ApiIconClosed'
 import ApiEmptyIcon from './ApiEmptyIcon'
+import ApiPerformanceIcon from './ApiPerformanceIcon'
 import AppIcon from './AppIcon'
 import AppListIcon from './AppListIcon'
 import AppEmptyIcon from './AppEmptyIcon'
+import ApplicationTypeIcon from './ApplicationTypeIcon'
 import AppWorkspace from './AppWorkspace'
 import ArrowDownFullIcon from './ArrowDownFullIcon'
 import ArrowDownIcon from './ArrowDownIcon'
 import ArrowLeftIcon from './ArrowLeftIcon'
 import ArrowRightIcon from './ArrowRightIcon'
+import ArrowLongRightIcon from './ArrowLongRightIcon'
 import ArrowUpIcon from './ArrowUpIcon'
 import BellIcon from './BellIcon'
 import BillingIcon from './BillingIcon'
@@ -39,14 +42,17 @@ import CircleSubtractIcon from './CircleSubtractIcon'
 import CircleTwoArrowsDownIcon from './CircleTwoArrowsDownIcon'
 import CircleTwoArrowsUpIcon from './CircleTwoArrowsUpIcon'
 import CloseIcon from './CloseIcon'
+import CloudIcon from './CloudIcon'
 import CreditCardIcon from './CreditCardIcon'
 import CopyPasteIcon from './CopyPasteIcon'
 import ConfigureDatabaseIcon from './ConfigureDatabaseIcon'
 import CreatingAppIcon from './CreatingAppIcon'
 import DatabaseIcon from './DatabaseIcon'
 import DatabaseMigrationIcon from './DatabaseMigrationIcon'
+import DepencenciesReloadIcon from './DepencenciesReloadIcon'
 import EyeClosedIcon from './EyeClosedIcon'
 import EyeOpenedIcon from './EyeOpenedIcon'
+import EditDocumentIcon from './EditDocumentIcon'
 import EditIcon from './EditIcon'
 import ExploreDocIcon from './ExploreDocIcon'
 import EnlargeIcon from './EnlargeIcon'
@@ -55,8 +61,10 @@ import GearIcon from './GearIcon'
 import GenerationLoadingIcon from './GenerationLoadingIcon'
 import GiveOwnershipIcon from './GiveOwnershipIcon'
 import GitHubRepoIcon from './GitHubRepoIcon'
+import GitHubRepo2Icon from './GitHubRepo2Icon'
 import GraphQLIcon from './GraphQLIcon'
 import KeyIcon from './KeyIcon'
+import ImportApplicationIcon from './ImportApplicationIcon'
 import LabelIcon from './LabelIcon'
 import LayersIcon from './LayersIcon'
 import LensIcon from './LensIcon'
@@ -67,7 +75,13 @@ import MetricsIcon from './MetricsIcon'
 import MetricsLoadingIcon from './MetricsLoadingIcon'
 import NameAppIcon from './NameAppIcon'
 import OrganizationIcon from './OrganizationIcon'
+import OutOfBoxGraphQLIcon from './OutOfBoxGraphQLIcon'
+import PlatformaticComposerIcon from './PlatformaticComposerIcon'
+import PlatformaticDBIcon from './PlatformaticDBIcon'
+import PlatformaticRuntimeIcon from './PlatformaticRuntimeIcon'
+import PlatformaticServiceIcon from './PlatformaticServiceIcon'
 import PlayIcon from './PlayIcon'
+import PreviewPRIcon from './PreviewPRIcon'
 import PullRequestIcon from './PullRequestIcon'
 import PullRequestLoadingIcon from './PullRequestLoadingIcon'
 import RequestOwnershipIcon from './RequestOwnershipIcon'
@@ -83,7 +97,7 @@ import SocialGitHubIcon from './SocialGitHubIcon'
 import SocialGitLabIcon from './SocialGitLabIcon'
 import SocialLinkedInIcon from './SocialLinkedInIcon'
 import SocialNPMIcon from './SocialNPMIcon'
-import SocialTwitterIcon from './SocialTwitterIcon'
+import SocialXIcon from './SocialXIcon'
 import StopIcon from './StopIcon'
 import TerminalIcon from './TerminalIcon'
 import TwoUsersIcon from './TwoUsersIcon'
@@ -108,14 +122,17 @@ export default {
   ApiIcon,
   ApiIconClosed,
   ApiEmptyIcon,
+  ApiPerformanceIcon,
   AppIcon,
   AppListIcon,
   AppEmptyIcon,
+  ApplicationTypeIcon,
   AppWorkspace,
   ArrowDownFullIcon,
   ArrowDownIcon,
   ArrowLeftIcon,
   ArrowRightIcon,
+  ArrowLongRightIcon,
   ArrowUpIcon,
   BellIcon,
   BillingIcon,
@@ -142,12 +159,15 @@ export default {
   CircleTwoArrowsDownIcon,
   CircleTwoArrowsUpIcon,
   CloseIcon,
+  CloudIcon,
   CreditCardIcon,
   CopyPasteIcon,
   ConfigureDatabaseIcon,
   CreatingAppIcon,
   DatabaseIcon,
   DatabaseMigrationIcon,
+  DepencenciesReloadIcon,
+  EditDocumentIcon,
   EditIcon,
   EyeClosedIcon,
   EyeOpenedIcon,
@@ -158,7 +178,9 @@ export default {
   GenerationLoadingIcon,
   GiveOwnershipIcon,
   GitHubRepoIcon,
+  GitHubRepo2Icon,
   GraphQLIcon,
+  ImportApplicationIcon,
   KeyIcon,
   LabelIcon,
   LayersIcon,
@@ -170,7 +192,13 @@ export default {
   MetricsLoadingIcon,
   NameAppIcon,
   OrganizationIcon,
+  OutOfBoxGraphQLIcon,
+  PlatformaticComposerIcon,
+  PlatformaticDBIcon,
+  PlatformaticRuntimeIcon,
+  PlatformaticServiceIcon,
   PlayIcon,
+  PreviewPRIcon,
   PullRequestIcon,
   PullRequestLoadingIcon,
   RequestOwnershipIcon,
@@ -187,7 +215,7 @@ export default {
   SocialGitLabIcon,
   SocialLinkedInIcon,
   SocialNPMIcon,
-  SocialTwitterIcon,
+  SocialXIcon,
   TerminalIcon,
   UpgradeIcon,
   UserIcon,

package/tailwind.config.cjs

@@ -2,14 +2,18 @@
 module.exports = {
   content: ['./src/**/*.{html,jsx}'],
   theme: {
+    screens: {
+      xs: '350px',
+      sm: '390px',
+      md: '744px',
+      lg: '1240px',
+      xl: '1440px',
+      '2xl': '1920px'
+    },
     container: {
       center: true
     },
     extend: {
-      screens: {
-        lg: '1440px'
-        // => @media (min-width: 1440px) { ... }
-      },
       boxShadow: {
         wrap: '0px 0px 4px rgba(0, 0, 0, 0.5)',
         'main-green': '0px 0px 4px rgba(33, 250, 144, 0.5)',