@platformatic/ui-components 0.4.0 → 0.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (214) hide show
  1. package/dist/assets/{index-K_bDNror.css → index-Of0we_2v.css} +1 -1
  2. package/dist/assets/index-hLMQmMDJ.js +40 -0
  3. package/dist/index.html +2 -2
  4. package/index.js +0 -2
  5. package/package.json +3 -3
  6. package/setupTests.js +1 -0
  7. package/src/components/BorderedBox.jsx +9 -20
  8. package/src/components/Button.jsx +14 -30
  9. package/src/components/ButtonFullRounded.jsx +13 -31
  10. package/src/components/ButtonOnlyIcon.jsx +13 -36
  11. package/src/components/Checkbox.jsx +5 -6
  12. package/src/components/CopyAndPaste.jsx +8 -19
  13. package/src/components/DropDown.jsx +10 -26
  14. package/src/components/FollowUs.jsx +18 -27
  15. package/src/components/HorizontalSeparator.jsx +6 -8
  16. package/src/components/InfoBox.jsx +8 -10
  17. package/src/components/ListElement.jsx +9 -11
  18. package/src/components/LoadingSpinner.jsx +1 -5
  19. package/src/components/LoadingSpinnerV2.jsx +4 -11
  20. package/src/components/LoginButton.test.jsx +0 -1
  21. package/src/components/LogoDropDown.jsx +7 -8
  22. package/src/components/Modal.jsx +11 -25
  23. package/src/components/ModalDirectional.jsx +9 -19
  24. package/src/components/ModalStepsForward.jsx +12 -24
  25. package/src/components/PlatformaticIcon.jsx +9 -21
  26. package/src/components/SearchBarV2.jsx +9 -22
  27. package/src/components/Sidebar.jsx +12 -26
  28. package/src/components/Status.jsx +5 -7
  29. package/src/components/TabbedWindow.jsx +11 -10
  30. package/src/components/TabbedWindow.module.css +4 -4
  31. package/src/components/Tag.jsx +9 -11
  32. package/src/components/TextWithLabel.jsx +7 -9
  33. package/src/components/Tooltip.jsx +8 -19
  34. package/src/components/TooltipAbsolute.jsx +10 -22
  35. package/src/components/VerticalSeparator.jsx +5 -7
  36. package/src/components/forms/Field.jsx +8 -19
  37. package/src/components/forms/Input.jsx +17 -37
  38. package/src/components/forms/InputWithSeparator.jsx +14 -31
  39. package/src/components/forms/Password.jsx +10 -18
  40. package/src/components/forms/Preview.jsx +10 -12
  41. package/src/components/forms/RadioGroup.jsx +9 -17
  42. package/src/components/forms/Select.jsx +19 -40
  43. package/src/components/forms/SelectWithInput.jsx +22 -46
  44. package/src/components/forms/TextArea.jsx +11 -25
  45. package/src/components/forms/ToggleSwitch.jsx +8 -19
  46. package/src/components/icons/APIDocsIcon.jsx +6 -7
  47. package/src/components/icons/AddIcon.jsx +6 -7
  48. package/src/components/icons/AlertIcon.jsx +6 -7
  49. package/src/components/icons/AllAppsIcon.jsx +6 -7
  50. package/src/components/icons/AllInOneIcon.jsx +6 -7
  51. package/src/components/icons/ApiCloudIcon.jsx +6 -7
  52. package/src/components/icons/ApiEmptyIcon.jsx +6 -7
  53. package/src/components/icons/ApiIcon.jsx +6 -7
  54. package/src/components/icons/ApiIconClosed.jsx +10 -6
  55. package/src/components/icons/ApiPerformanceIcon.jsx +6 -7
  56. package/src/components/icons/AppConfigurationIcon.jsx +6 -7
  57. package/src/components/icons/AppDetailsIcon.jsx +6 -7
  58. package/src/components/icons/AppEditIcon.jsx +6 -7
  59. package/src/components/icons/AppEmptyIcon.jsx +6 -7
  60. package/src/components/icons/AppIcon.jsx +6 -7
  61. package/src/components/icons/AppListIcon.jsx +6 -7
  62. package/src/components/icons/AppSettingsIcon.jsx +6 -7
  63. package/src/components/icons/AppWorkspace.jsx +10 -7
  64. package/src/components/icons/ApplicationTypeIcon.jsx +6 -7
  65. package/src/components/icons/ArrowDownFullIcon.jsx +6 -7
  66. package/src/components/icons/ArrowDownIcon.jsx +6 -7
  67. package/src/components/icons/ArrowLeftIcon.jsx +6 -7
  68. package/src/components/icons/ArrowLongLeftIcon.jsx +6 -7
  69. package/src/components/icons/ArrowLongRightIcon.jsx +6 -7
  70. package/src/components/icons/ArrowRightIcon.jsx +6 -7
  71. package/src/components/icons/ArrowUpIcon.jsx +6 -7
  72. package/src/components/icons/BellIcon.jsx +6 -7
  73. package/src/components/icons/BillingIcon.jsx +6 -7
  74. package/src/components/icons/BranchIcon.jsx +102 -0
  75. package/src/components/icons/BuiltInLoggingIcon.jsx +6 -7
  76. package/src/components/icons/CLIIcon.jsx +6 -7
  77. package/src/components/icons/Calendar1DayIcon.jsx +6 -7
  78. package/src/components/icons/Calendar7DaysIcon.jsx +6 -7
  79. package/src/components/icons/CalendarIcon.jsx +6 -7
  80. package/src/components/icons/CheckListIcon.jsx +6 -7
  81. package/src/components/icons/CircleAddIcon.jsx +6 -7
  82. package/src/components/icons/CircleArrowLeftIcon.jsx +6 -7
  83. package/src/components/icons/CircleArrowRightIcon.jsx +6 -7
  84. package/src/components/icons/CircleCheckMarkButtonIcon.jsx +6 -8
  85. package/src/components/icons/CircleCheckMarkFullIcon.jsx +6 -7
  86. package/src/components/icons/CircleCheckMarkIcon.jsx +7 -6
  87. package/src/components/icons/CircleCloseHoverIcon.jsx +6 -7
  88. package/src/components/icons/CircleCloseIcon.jsx +6 -7
  89. package/src/components/icons/CircleCopyPasteIcon.jsx +6 -7
  90. package/src/components/icons/CircleDownloadIcon.jsx +6 -7
  91. package/src/components/icons/CircleEditIcon.jsx +6 -7
  92. package/src/components/icons/CircleExclamationIcon.jsx +7 -7
  93. package/src/components/icons/CircleFullIcon.jsx +6 -7
  94. package/src/components/icons/CircleGearIcon.jsx +6 -7
  95. package/src/components/icons/CirclePlayIcon.jsx +6 -7
  96. package/src/components/icons/CircleRestartIcon.jsx +6 -7
  97. package/src/components/icons/CircleStopIcon.jsx +6 -7
  98. package/src/components/icons/CircleSubtractIcon.jsx +6 -7
  99. package/src/components/icons/CircleTwoArrowsDownIcon.jsx +6 -7
  100. package/src/components/icons/CircleTwoArrowsUpIcon.jsx +6 -7
  101. package/src/components/icons/CloseIcon.jsx +6 -7
  102. package/src/components/icons/CloudIcon.jsx +6 -7
  103. package/src/components/icons/CodeTestingIcon.jsx +6 -7
  104. package/src/components/icons/ComputerIcon.jsx +6 -7
  105. package/src/components/icons/ConfigureDatabaseIcon.jsx +6 -7
  106. package/src/components/icons/CopyPasteIcon.jsx +6 -7
  107. package/src/components/icons/CreateAppIcon.jsx +6 -7
  108. package/src/components/icons/CreditCardIcon.jsx +6 -7
  109. package/src/components/icons/DatabaseIcon.jsx +6 -7
  110. package/src/components/icons/DatabaseMigrationIcon.jsx +6 -7
  111. package/src/components/icons/DepencenciesReloadIcon.jsx +6 -7
  112. package/src/components/icons/DeploymentHistoryIcon.jsx +118 -0
  113. package/src/components/icons/EditDocumentIcon.jsx +6 -7
  114. package/src/components/icons/EditIcon.jsx +6 -7
  115. package/src/components/icons/EnlargeIcon.jsx +6 -7
  116. package/src/components/icons/EntryIcon.jsx +6 -7
  117. package/src/components/icons/EntrypointIcon.jsx +6 -7
  118. package/src/components/icons/ExpandIcon.jsx +6 -7
  119. package/src/components/icons/ExploreDocIcon.jsx +6 -7
  120. package/src/components/icons/EyeClosedIcon.jsx +6 -7
  121. package/src/components/icons/EyeOpenedIcon.jsx +6 -7
  122. package/src/components/icons/FailureRateIcon.jsx +104 -0
  123. package/src/components/icons/FolderIcon.jsx +6 -7
  124. package/src/components/icons/FoldersIcon.jsx +6 -7
  125. package/src/components/icons/GearIcon.jsx +6 -7
  126. package/src/components/icons/GenerationLoadingIcon.jsx +6 -7
  127. package/src/components/icons/GitHubRepo2Icon.jsx +6 -7
  128. package/src/components/icons/GitHubRepoIcon.jsx +6 -7
  129. package/src/components/icons/GiveOwnershipIcon.jsx +6 -7
  130. package/src/components/icons/GraphQLIcon.jsx +6 -7
  131. package/src/components/icons/ImportAppIcon.jsx +6 -7
  132. package/src/components/icons/K8SMetricsIcon.jsx +106 -0
  133. package/src/components/icons/KeyIcon.jsx +6 -7
  134. package/src/components/icons/LabelIcon.jsx +6 -7
  135. package/src/components/icons/LayersIcon.jsx +6 -7
  136. package/src/components/icons/LensIcon.jsx +6 -7
  137. package/src/components/icons/LiveIcon.jsx +6 -7
  138. package/src/components/icons/LoadingAppIcon.jsx +6 -7
  139. package/src/components/icons/LogOutIcon.jsx +7 -7
  140. package/src/components/icons/LogsRiskIcon.jsx +6 -7
  141. package/src/components/icons/MetricsIcon.jsx +6 -7
  142. package/src/components/icons/MetricsLoadingIcon.jsx +6 -7
  143. package/src/components/icons/MetricsLogsIcon.jsx +124 -0
  144. package/src/components/icons/MissingTemplateIcon.jsx +6 -7
  145. package/src/components/icons/NameAppIcon.jsx +6 -7
  146. package/src/components/icons/NoMetricsIcon.jsx +6 -7
  147. package/src/components/icons/NodeJSMetricsIcon.jsx +106 -0
  148. package/src/components/icons/NotCompliantServiceIcon.jsx +103 -0
  149. package/src/components/icons/OrganizationIcon.jsx +6 -7
  150. package/src/components/icons/OtherLogosGoogleIcon.jsx +69 -0
  151. package/src/components/icons/OutOfBoxGraphQLIcon.jsx +6 -7
  152. package/src/components/icons/OutdatedServiceIcon.jsx +105 -0
  153. package/src/components/icons/PlatformaticComposerIcon.jsx +6 -7
  154. package/src/components/icons/PlatformaticDBIcon.jsx +6 -7
  155. package/src/components/icons/PlatformaticRuntimeIcon.jsx +6 -7
  156. package/src/components/icons/PlatformaticServiceIcon.jsx +6 -7
  157. package/src/components/icons/PlayIcon.jsx +6 -7
  158. package/src/components/icons/PreviewPRIcon.jsx +6 -7
  159. package/src/components/icons/PullRequestIcon.jsx +6 -7
  160. package/src/components/icons/PullRequestLoadingIcon.jsx +6 -7
  161. package/src/components/icons/RecentAppsIcon.jsx +6 -7
  162. package/src/components/icons/RequestOwnershipIcon.jsx +6 -7
  163. package/src/components/icons/ResourceIcon.jsx +111 -0
  164. package/src/components/icons/RestartIcon.jsx +6 -7
  165. package/src/components/icons/RocketIcon.jsx +6 -7
  166. package/src/components/icons/RunningAppIcon.jsx +6 -7
  167. package/src/components/icons/RunningIcon.jsx +6 -7
  168. package/src/components/icons/SendIcon.jsx +6 -7
  169. package/src/components/icons/ServiceIcon.jsx +6 -7
  170. package/src/components/icons/SlotIcon.jsx +6 -7
  171. package/src/components/icons/SocialDiscordIcon.jsx +6 -7
  172. package/src/components/icons/SocialGitHubIcon.jsx +6 -7
  173. package/src/components/icons/SocialGitLabIcon.jsx +6 -7
  174. package/src/components/icons/SocialLinkedInIcon.jsx +6 -7
  175. package/src/components/icons/SocialNPMIcon.jsx +6 -7
  176. package/src/components/icons/SocialXIcon.jsx +6 -7
  177. package/src/components/icons/SortDownIcon.jsx +6 -7
  178. package/src/components/icons/SortIcon.jsx +6 -7
  179. package/src/components/icons/SortUpIcon.jsx +6 -7
  180. package/src/components/icons/SortableIcon.jsx +6 -7
  181. package/src/components/icons/StackablesIcon.jsx +6 -7
  182. package/src/components/icons/StackablesPluginIcon.jsx +6 -7
  183. package/src/components/icons/StackablesTemplateIcon.jsx +6 -7
  184. package/src/components/icons/StopIcon.jsx +6 -7
  185. package/src/components/icons/StoppedAppIcon.jsx +6 -7
  186. package/src/components/icons/SwitchIcon.jsx +6 -7
  187. package/src/components/icons/TeamsIcon.jsx +6 -7
  188. package/src/components/icons/TerminalIcon.jsx +6 -7
  189. package/src/components/icons/TrashIcon.jsx +6 -8
  190. package/src/components/icons/TwoUsersIcon.jsx +6 -7
  191. package/src/components/icons/UpgradeIcon.jsx +6 -7
  192. package/src/components/icons/UserComputerIcon.jsx +6 -7
  193. package/src/components/icons/UserIcon.jsx +6 -7
  194. package/src/components/icons/UserRemoveIcon.jsx +7 -7
  195. package/src/components/icons/UserRoleIcon.jsx +7 -7
  196. package/src/components/icons/WorkspaceDynamicIcon.jsx +6 -7
  197. package/src/components/icons/WorkspaceEmptyIcon.jsx +6 -7
  198. package/src/components/icons/WorkspaceFailIcon.jsx +6 -7
  199. package/src/components/icons/WorkspaceGitHubIcon.jsx +6 -7
  200. package/src/components/icons/WorkspaceLoadingIcon.jsx +6 -7
  201. package/src/components/icons/WorkspaceReadyIcon.jsx +6 -7
  202. package/src/components/icons/WorkspaceStaticIcon.jsx +6 -7
  203. package/src/components/icons/ZoomInIcon.jsx +99 -0
  204. package/src/components/icons/ZoomOutIcon.jsx +96 -0
  205. package/src/components/icons/index.js +25 -2
  206. package/src/components/layouts/Layout.jsx +4 -6
  207. package/src/components/logos/AdvancedLogo.jsx +5 -7
  208. package/src/components/logos/BasicLogo.jsx +5 -7
  209. package/src/components/logos/FreeLogo.jsx +5 -7
  210. package/src/components/logos/ProLogo.jsx +5 -7
  211. package/vitest.config.js +2 -1
  212. package/dist/assets/index-DxEcxprd.js +0 -40
  213. package/src/components/TabbedWindowV2.jsx +0 -82
  214. package/src/components/TabbedWindowV2.module.css +0 -17
package/dist/index.html CHANGED
@@ -4,8 +4,8 @@
4
4
  <meta charset="UTF-8" />
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
6
  <title>Platformatic UI Components</title>
7
- <script type="module" crossorigin src="/assets/index-DxEcxprd.js"></script>
8
- <link rel="stylesheet" crossorigin href="/assets/index-K_bDNror.css">
7
+ <script type="module" crossorigin src="/assets/index-hLMQmMDJ.js"></script>
8
+ <link rel="stylesheet" crossorigin href="/assets/index-Of0we_2v.css">
9
9
  </head>
10
10
  <body>
11
11
  <div id="root"></div>
package/index.js CHANGED
@@ -39,7 +39,6 @@ import Status from './src/components/Status'
39
39
  import Tooltip from './src/components/Tooltip'
40
40
  import TooltipAbsolute from './src/components/TooltipAbsolute'
41
41
  import TabbedWindow from './src/components/TabbedWindow'
42
- import TabbedWindowV2 from './src/components/TabbedWindowV2'
43
42
  import Tag from './src/components/Tag'
44
43
  import TextWithLabel from './src/components/TextWithLabel'
45
44
  import TwoColumnsLayout from './src/components/layouts/TwoColumnsLayout'
@@ -84,7 +83,6 @@ export {
84
83
  SimpleMetric,
85
84
  Status,
86
85
  TabbedWindow,
87
- TabbedWindowV2,
88
86
  Tag,
89
87
  TextWithLabel,
90
88
  Tooltip,
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@platformatic/ui-components",
3
3
  "description": "Platformatic UI Components",
4
- "version": "0.4.0",
4
+ "version": "0.5.1",
5
5
  "type": "module",
6
6
  "license": "Apache-2.0",
7
7
  "repository": {
@@ -40,8 +40,8 @@
40
40
  "@storybook/addon-links": "^8.0.8",
41
41
  "@storybook/react": "^8.0.8",
42
42
  "@storybook/react-vite": "^8.0.8",
43
- "@testing-library/jest-dom": "^5.16.5",
44
- "@testing-library/react": "^14.0.0",
43
+ "@testing-library/jest-dom": "^6.0.0",
44
+ "@testing-library/react": "^15.0.0",
45
45
  "@types/react": "^18.0.17",
46
46
  "@types/react-dom": "^18.0.6",
47
47
  "@vitejs/plugin-react": "^4.0.0",
package/setupTests.js ADDED
@@ -0,0 +1 @@
1
+ import '@testing-library/jest-dom/vitest'
package/src/components/BorderedBox.jsx CHANGED
@@ -3,16 +3,16 @@ import PropTypes from 'prop-types'
3
3
  import styles from './BorderedBox.module.css'
4
4
  import commonStyles from './Common.module.css'
5
5
  import React from 'react'
6
- import { COLORS_BORDERED_BOX } from './constants'
6
+ import { COLORS_BORDERED_BOX, DARK_BLUE, MAIN_GREEN, OPACITY_100 } from './constants'
7
7
  function BorderedBox ({
8
- classes,
9
- color,
10
- children,
11
- backgroundColor,
12
- backgroundColorOpacity,
13
- borderColorOpacity,
14
- clickable,
15
- onClick
8
+ classes = '',
9
+ color = MAIN_GREEN,
10
+ children = null,
11
+ backgroundColor = DARK_BLUE,
12
+ backgroundColorOpacity = OPACITY_100,
13
+ borderColorOpacity = OPACITY_100,
14
+ clickable = false,
15
+ onClick = () => {}
16
16
  }) {
17
17
  const borderColor = commonStyles[`bordered--${color}-${borderColorOpacity}`]
18
18
  const styledBackgroundColor = commonStyles[`background-color-${backgroundColor}`]
@@ -62,15 +62,4 @@ BorderedBox.propTypes = {
62
62
  onClick: PropTypes.func
63
63
  }
64
64
 
65
- BorderedBox.defaultProps = {
66
- children: null,
67
- color: 'main-green',
68
- backgroundColor: 'dark-blue',
69
- classes: '',
70
- backgroundColorOpacity: 100,
71
- borderColorOpacity: 100,
72
- clickable: false,
73
- onClick: () => {}
74
- }
75
-
76
65
  export default BorderedBox
package/src/components/Button.jsx CHANGED
@@ -20,20 +20,20 @@ import {
20
20
  } from './constants'
21
21
  // ${inactive ? styles.inactive : styles.active}
22
22
  function Button ({
23
- textClass,
24
- paddingClass,
25
- label,
26
- color,
27
- backgroundColor,
28
- size,
29
- disabled,
30
- hoverEffect,
31
- hoverEffectProperties,
32
- bordered,
33
- fullWidth,
34
- platformaticIcon,
35
- platformaticIconAfter,
36
- selected,
23
+ textClass = '',
24
+ paddingClass = '',
25
+ label = '',
26
+ color = MAIN_DARK_BLUE,
27
+ backgroundColor = TRANSPARENT,
28
+ size = LARGE,
29
+ disabled = false,
30
+ hoverEffect = DULLS_BACKGROUND_COLOR,
31
+ hoverEffectProperties = {},
32
+ bordered = true,
33
+ fullWidth = false,
34
+ platformaticIcon = null,
35
+ platformaticIconAfter = null,
36
+ selected = false,
37
37
  ...rest
38
38
  }) {
39
39
  let buttonClassName = textClass
@@ -178,20 +178,4 @@ Button.propTypes = {
178
178
  selected: PropTypes.bool
179
179
  }
180
180
 
181
- Button.defaultProps = {
182
- textClass: '',
183
- paddingClass: '',
184
- label: '',
185
- color: MAIN_DARK_BLUE,
186
- backgroundColor: TRANSPARENT,
187
- disabled: false,
188
- size: LARGE,
189
- hoverEffect: DULLS_BACKGROUND_COLOR,
190
- hoverEffectProperties: {},
191
- bordered: true,
192
- fullWidth: false,
193
- platformaticIcon: null,
194
- selected: false
195
- }
196
-
197
181
  export default Button
package/src/components/ButtonFullRounded.jsx CHANGED
@@ -6,20 +6,19 @@ import styles from './ButtonFullRounded.module.css'
6
6
  import PlatformaticIcon from './PlatformaticIcon'
7
7
  import { COLORS_ICON, SIZES, DULLS_BACKGROUND_COLOR, PADDING_SIZES, SMALL, WHITE, NONE } from './constants'
8
8
  function ButtonFullRounded ({
9
- className,
10
- iconName,
11
- iconSize,
12
- iconColor,
13
- disabled,
14
- paddingSize,
15
- alt,
16
- onClick,
17
- hoverEffect,
18
- bordered,
19
- tip,
20
- selected,
21
- buttonClassName,
22
- internalOverHandling
9
+ className = '',
10
+ iconName = '',
11
+ iconSize = SMALL,
12
+ iconColor = WHITE,
13
+ disabled = false,
14
+ paddingSize = NONE,
15
+ alt = 'ButtonFullRounded',
16
+ onClick = () => {},
17
+ hoverEffect = '',
18
+ bordered = false,
19
+ tip = '',
20
+ selected = false,
21
+ buttonClassName = ''
23
22
  }) {
24
23
  const padding = commonStyles[`padding--${paddingSize}`]
25
24
  const containerClassName = `${className} border-0 ${styles.roundedFull}`
@@ -106,21 +105,4 @@ ButtonFullRounded.propTypes = {
106
105
  internalOverHandling: PropTypes.bool
107
106
  }
108
107
 
109
- ButtonFullRounded.defaultProps = {
110
- className: '',
111
- iconName: '',
112
- iconColor: WHITE,
113
- iconSize: SMALL,
114
- disabled: false,
115
- paddingSize: NONE,
116
- alt: 'ButtonFullRounded',
117
- onClick: () => {},
118
- hoverEffect: '',
119
- bordered: false,
120
- tip: '',
121
- selected: false,
122
- buttonClassName: '',
123
- internalOverHandling: false
124
- }
125
-
126
108
  export default ButtonFullRounded
package/src/components/ButtonOnlyIcon.jsx CHANGED
@@ -4,22 +4,21 @@ import PropTypes from 'prop-types'
4
4
  import styles from './Button.module.css'
5
5
  import commonStyles from './Common.module.css'
6
6
  import PlatformaticIcon from './PlatformaticIcon'
7
- import { SIZES, COLORS_BUTTON, BOX_SHADOW, UNDERLINE, HOVER_EFFECTS_BUTTONS, DULLS_BACKGROUND_COLOR, MAIN_DARK_BLUE, LARGE, MEDIUM } from './constants'
7
+ import { SIZES, COLORS_BUTTON, BOX_SHADOW, UNDERLINE, HOVER_EFFECTS_BUTTONS, DULLS_BACKGROUND_COLOR, MAIN_DARK_BLUE, LARGE, MEDIUM, TRANSPARENT } from './constants'
8
8
 
9
9
  function ButtonOnlyIcon ({
10
- textClass,
11
- paddingClass,
12
- altLabel,
13
- color,
14
- backgroundColor,
15
- size,
16
- disabled,
17
- hoverEffect,
18
- bordered,
19
- fullWidth,
20
- platformaticIcon,
21
- platformaticIconAfter,
22
- selected,
10
+ textClass = '',
11
+ paddingClass = '',
12
+ altLabel = '',
13
+ color = MAIN_DARK_BLUE,
14
+ backgroundColor = TRANSPARENT,
15
+ size = LARGE,
16
+ disabled = false,
17
+ hoverEffect = DULLS_BACKGROUND_COLOR,
18
+ bordered = true,
19
+ fullWidth = false,
20
+ platformaticIcon = null,
21
+ selected = false,
23
22
  ...rest
24
23
  }) {
25
24
  let contentClassName = `${styles.content} `
@@ -139,32 +138,10 @@ ButtonOnlyIcon.propTypes = {
139
138
  iconName: PropTypes.string,
140
139
  color: PropTypes.string
141
140
  }),
142
- /**
143
- * platformaticIconAfter: should be removed
144
- */
145
- platformaticIconAfter: PropTypes.shape({
146
- iconName: PropTypes.string,
147
- color: PropTypes.string
148
- }),
149
141
  /**
150
142
  * Selected: default false
151
143
  */
152
144
  selected: PropTypes.bool
153
145
  }
154
146
 
155
- ButtonOnlyIcon.defaultProps = {
156
- textClass: '',
157
- paddingClass: '',
158
- altLabel: '',
159
- color: MAIN_DARK_BLUE,
160
- backgroundColor: 'transparent',
161
- disabled: false,
162
- size: LARGE,
163
- hoverEffect: DULLS_BACKGROUND_COLOR,
164
- bordered: true,
165
- fullWidth: false,
166
- platformaticIcon: null,
167
- selected: false
168
- }
169
-
170
147
  export default ButtonOnlyIcon
package/src/components/Checkbox.jsx CHANGED
@@ -3,7 +3,11 @@ import React from 'react'
3
3
  import PropTypes from 'prop-types'
4
4
  import styles from './Checkbox.module.css'
5
5
  import { MAIN_DARK_BLUE, RICH_BLACK, WHITE } from './constants'
6
- function Checkbox ({ disabled, color, ...rest }) {
6
+ function Checkbox ({
7
+ disabled = false,
8
+ color = MAIN_DARK_BLUE,
9
+ ...rest
10
+ }) {
7
11
  let className = `${styles.checkbox} `
8
12
  className += styles[`checkbox--${color}`]
9
13
  if (disabled) className += ` ${styles.disabled}`
@@ -23,9 +27,4 @@ Checkbox.propTypes = {
23
27
  color: PropTypes.oneOf([WHITE, MAIN_DARK_BLUE, RICH_BLACK])
24
28
  }
25
29
 
26
- Checkbox.defaultProps = {
27
- disabled: false,
28
- color: MAIN_DARK_BLUE
29
- }
30
-
31
30
  export default Checkbox
package/src/components/CopyAndPaste.jsx CHANGED
@@ -1,19 +1,18 @@
1
1
  'use strict'
2
2
  import React, { useState } from 'react'
3
3
  import PropTypes from 'prop-types'
4
- import { COLORS_ICON, DIRECTION_TOP, MEDIUM, SIZES, POSITIONS, POSITION_CENTER } from './constants'
4
+ import { COLORS_ICON, DIRECTION_TOP, MEDIUM, SIZES, POSITIONS, POSITION_CENTER, MAIN_DARK_BLUE } from './constants'
5
5
  import PlatformaticIcon from './PlatformaticIcon'
6
6
  import TooltipAbsolute from './TooltipAbsolute'
7
7
 
8
8
  function CopyAndPaste ({
9
- value,
10
- tooltipLabel,
11
- color,
12
- timeout,
13
- size,
14
- tooltipClassName,
15
- position
16
-
9
+ value = 'app',
10
+ tooltipLabel = 'Create your app now',
11
+ color = MAIN_DARK_BLUE,
12
+ timeout = 1500,
13
+ size = MEDIUM,
14
+ tooltipClassName = '',
15
+ position = POSITION_CENTER
17
16
  }) {
18
17
  const [copied, setCopied] = useState(false)
19
18
 
@@ -74,14 +73,4 @@ CopyAndPaste.propTypes = {
74
73
  position: PropTypes.oneOf(POSITIONS)
75
74
  }
76
75
 
77
- CopyAndPaste.defaultProps = {
78
- value: 'app',
79
- tooltipLabel: 'Create your app now',
80
- color: 'main-dark-blue',
81
- timeout: 1500,
82
- size: MEDIUM,
83
- tooltipClassName: '',
84
- position: POSITION_CENTER
85
- }
86
-
87
76
  export default CopyAndPaste
package/src/components/DropDown.jsx CHANGED
@@ -6,15 +6,15 @@ import commonStyles from './Common.module.css'
6
6
  import PlatformaticIcon from './PlatformaticIcon'
7
7
  import { DARK_BLUE, LIGHT_BLUE, MAIN_DARK_BLUE, RICH_BLACK, WHITE } from './constants'
8
8
  function DropDown ({
9
- pictureUrl,
10
- header,
11
- items,
12
- align,
13
- backgroundColor,
14
- textColor,
15
- borderColor,
16
- headerColor,
17
- lastButton
9
+ pictureUrl = '',
10
+ header = '',
11
+ align = 'left',
12
+ items = [],
13
+ backgroundColor = DARK_BLUE,
14
+ textColor = MAIN_DARK_BLUE,
15
+ headerColor = WHITE,
16
+ borderColor = WHITE,
17
+ lastButton = null
18
18
  }) {
19
19
  const [open, setOpen] = useState(false)
20
20
  const borderClass = commonStyles[`bordered--${borderColor}-30`]
@@ -105,23 +105,7 @@ DropDown.propTypes = {
105
105
  /**
106
106
  * lastButton
107
107
  */
108
- lastButton: PropTypes.node,
109
- /**
110
- * callBackClose
111
- */
112
- callBackClose: PropTypes.func
108
+ lastButton: PropTypes.node
113
109
  }
114
110
 
115
- DropDown.defaultProps = {
116
- pictureUrl: '',
117
- header: '',
118
- align: 'left',
119
- items: [],
120
- backgroundColor: DARK_BLUE,
121
- textColor: MAIN_DARK_BLUE,
122
- headerColor: WHITE,
123
- borderColor: WHITE,
124
- lastButton: null,
125
- callBackClose: () => {}
126
- }
127
111
  export default DropDown
package/src/components/FollowUs.jsx CHANGED
@@ -24,12 +24,24 @@ function SocialElement ({ href, iconName, iconClassName, iconColor, iconSize })
24
24
  }
25
25
 
26
26
  function FollowUs ({
27
- label,
28
- labelClassName,
29
- useOnFrontpage,
30
- iconColor,
31
- iconSize,
32
- socialElements
27
+ label = 'Follow us on',
28
+ labelClassName = '',
29
+ useOnFrontpage = true,
30
+ iconColor = WHITE,
31
+ iconSize = MEDIUM,
32
+ socialElements = [{
33
+ link: 'https://twitter.com/platformatic',
34
+ iconName: 'SocialXIcon'
35
+ }, {
36
+ link: 'https://www.linkedin.com/company/platformatic/',
37
+ iconName: 'SocialLinkedInIcon'
38
+ }, {
39
+ link: 'https://github.com/platformatic',
40
+ iconName: 'SocialGitHubIcon'
41
+ }, {
42
+ link: 'https://discord.gg/platformatic',
43
+ iconName: 'SocialDiscordIcon'
44
+ }]
33
45
  }) {
34
46
  const suffix = useOnFrontpage ? 'Frontpage' : 'Dashboard'
35
47
  const className = styles[`container${suffix}`]
@@ -89,25 +101,4 @@ FollowUs.propTypes = {
89
101
  }))
90
102
  }
91
103
 
92
- FollowUs.defaultProps = {
93
- label: 'Follow us on',
94
- labelClassName: '',
95
- useOnFrontpage: true,
96
- iconColor: WHITE,
97
- iconSize: MEDIUM,
98
- socialElements: [{
99
- link: 'https://twitter.com/platformatic',
100
- iconName: 'SocialXIcon'
101
- }, {
102
- link: 'https://www.linkedin.com/company/platformatic/',
103
- iconName: 'SocialLinkedInIcon'
104
- }, {
105
- link: 'https://github.com/platformatic',
106
- iconName: 'SocialGitHubIcon'
107
- }, {
108
- link: 'https://discord.gg/platformatic',
109
- iconName: 'SocialDiscordIcon'
110
- }]
111
-
112
- }
113
104
  export default FollowUs
package/src/components/HorizontalSeparator.jsx CHANGED
@@ -4,7 +4,12 @@ import PropTypes from 'prop-types'
4
4
  import commonStyles from './Common.module.css'
5
5
  import { DARK_GREEN, MAIN_DARK_BLUE, WHITE } from './constants'
6
6
  import styles from './HorizontalSeparator.module.css'
7
- function HorizontalSeparator ({ marginTop, marginBottom, color, opacity }) {
7
+ function HorizontalSeparator ({
8
+ marginTop = 4,
9
+ marginBottom = 4,
10
+ color = DARK_GREEN,
11
+ opacity = 1
12
+ }) {
8
13
  function getClassName () {
9
14
  let className = `${styles.style} `
10
15
  className += commonStyles[`text--${color}`] + ' '
@@ -37,11 +42,4 @@ HorizontalSeparator.propTypes = {
37
42
  opacity: PropTypes.number
38
43
  }
39
44
 
40
- HorizontalSeparator.defaultProps = {
41
- marginTop: 4,
42
- marginBottom: 4,
43
- color: DARK_GREEN,
44
- opacity: 1
45
- }
46
-
47
45
  export default HorizontalSeparator
package/src/components/InfoBox.jsx CHANGED
@@ -4,9 +4,15 @@ import PropTypes from 'prop-types'
4
4
  import styles from './InfoBox.module.css'
5
5
  import Button from './Button'
6
6
  import PlatformaticIcon from './PlatformaticIcon'
7
- import { COLORS_BUTTON, COLORS_ICON, HOVER_EFFECTS_BUTTONS } from './constants'
7
+ import { COLORS_BUTTON, COLORS_ICON, HOVER_EFFECTS_BUTTONS, MAIN_GREEN } from './constants'
8
8
 
9
- function InfoBox ({ children, iconName, iconColor, helpText, buttonProps }) {
9
+ function InfoBox ({
10
+ children = null,
11
+ iconName = '',
12
+ iconColor = MAIN_GREEN,
13
+ helpText = '',
14
+ buttonProps = null
15
+ }) {
10
16
  return (
11
17
  <div className={styles.container}>
12
18
  <PlatformaticIcon size='extra-large' iconName={iconName} color={iconColor} />
@@ -47,12 +53,4 @@ InfoBox.propTypes = {
47
53
  })
48
54
  }
49
55
 
50
- InfoBox.defaultProps = {
51
- children: null,
52
- iconName: '',
53
- iconColor: 'main-green',
54
- helpText: '',
55
- buttonProps: null
56
- }
57
-
58
56
  export default InfoBox
package/src/components/ListElement.jsx CHANGED
@@ -5,7 +5,15 @@ import commonStyles from './Common.module.css'
5
5
  import styles from './ListElement.module.css'
6
6
  import { MAIN_DARK_BLUE, MEDIUM, SMALL, WHITE, MAIN_GREEN } from './constants'
7
7
 
8
- function List ({ title, detail, marginSize, detailColor, titleColor, semiBold, iconColor }) {
8
+ function List ({
9
+ title = '',
10
+ detail = '',
11
+ marginSize = MEDIUM,
12
+ detailColor = WHITE,
13
+ titleColor = MAIN_GREEN,
14
+ semiBold = true,
15
+ iconColor = MAIN_GREEN
16
+ }) {
9
17
  let className = `${styles.container} `
10
18
  className += styles[`margin-${marginSize}`]
11
19
 
@@ -63,14 +71,4 @@ List.propTypes = {
63
71
  semiBold: PropTypes.bool
64
72
  }
65
73
 
66
- List.defaultProps = {
67
- title: '',
68
- detail: '',
69
- marginSize: MEDIUM,
70
- detailColor: WHITE,
71
- titleColor: MAIN_GREEN,
72
- iconColor: MAIN_GREEN,
73
- semiBold: true
74
- }
75
-
76
74
  export default List
package/src/components/LoadingSpinner.jsx CHANGED
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
3
3
  import styles from './LoadingSpinner.module.css'
4
4
  import { SpinnerCircular } from 'spinners-react'
5
5
 
6
- function LoadingSpinner ({ loading }) {
6
+ function LoadingSpinner ({ loading = false }) {
7
7
  // If null then loading not started, if true then loading, if false then done loading
8
8
  return loading
9
9
  ? (
@@ -23,8 +23,4 @@ LoadingSpinner.propTypes = {
23
23
  loading: PropTypes.bool
24
24
  }
25
25
 
26
- LoadingSpinner.defaultProps = {
27
- loading: false
28
- }
29
-
30
26
  export default LoadingSpinner
package/src/components/LoadingSpinnerV2.jsx CHANGED
@@ -5,10 +5,10 @@ import styles from './LoadingSpinnerV2.module.css'
5
5
  import { SpinnerCircular } from 'spinners-react'
6
6
 
7
7
  function LoadingSpinnerV2 ({
8
- loading,
9
- applySentences,
10
- color,
11
- containerClassName
8
+ loading = false,
9
+ applySentences = {},
10
+ color = '#FFFFFF',
11
+ containerClassName = ''
12
12
  }) {
13
13
  const defaultContainerClassName = containerClassName || `${styles.container}`
14
14
  // If null then loading not started, if true then loading, if false then done loading
@@ -46,11 +46,4 @@ LoadingSpinnerV2.propTypes = {
46
46
  containerClassName: PropTypes.string
47
47
  }
48
48
 
49
- LoadingSpinnerV2.defaultProps = {
50
- loading: false,
51
- applySentences: {},
52
- color: '#FFFFFF',
53
- containerClassName: ''
54
- }
55
-
56
49
  export default LoadingSpinnerV2
package/src/components/LoginButton.test.jsx CHANGED
@@ -1,6 +1,5 @@
1
1
  import React from 'react'
2
2
  import { render, screen } from '@testing-library/react'
3
- import '@testing-library/jest-dom/extend-expect'
4
3
  import LoginButton from './LoginButton'
5
4
 
6
5
  test('<LoginButton /> with label', () => {
package/src/components/LogoDropDown.jsx CHANGED
@@ -5,7 +5,13 @@ import styles from './LogoDropDown.module.css'
5
5
  import PlatformaticIcon from './PlatformaticIcon'
6
6
  import { MAIN_DARK_BLUE, SMALL, WHITE } from './constants'
7
7
  import Logo from './Logo'
8
- function LogoDropDown ({ itemSelected, items, width, height, onClickItemSelected }) {
8
+ function LogoDropDown ({
9
+ itemSelected = '',
10
+ items = [],
11
+ width = 71,
12
+ height = 56,
13
+ onClickItemSelected = () => {}
14
+ }) {
9
15
  const [open, setOpen] = useState(false)
10
16
 
11
17
  function handleOpen () {
@@ -82,11 +88,4 @@ LogoDropDown.propTypes = {
82
88
  onClickItemSelected: PropTypes.func
83
89
  }
84
90
 
85
- LogoDropDown.defaultProps = {
86
- width: 71,
87
- height: 56,
88
- itemSelected: '',
89
- items: [],
90
- onClickItemSelected: () => {}
91
- }
92
91
  export default LogoDropDown
package/src/components/Modal.jsx CHANGED
@@ -31,17 +31,17 @@ import {
31
31
  import PlatformaticIcon from './PlatformaticIcon'
32
32
 
33
33
  function Modal ({
34
- setIsOpen,
35
- title,
36
- layout,
37
- children,
38
- size,
39
- profile,
40
- backgroundClassName,
41
- titleClassName,
42
- childrenClassContainer,
43
- modalCloseClassName,
44
- permanent
34
+ setIsOpen = () => {},
35
+ title = '',
36
+ layout = MODAL_POPUP,
37
+ children = null,
38
+ size = SMALL,
39
+ profile = '',
40
+ backgroundClassName = '',
41
+ titleClassName = '',
42
+ childrenClassContainer = '',
43
+ modalCloseClassName = '',
44
+ permanent = false
45
45
  }) {
46
46
  let contentFullscreen
47
47
  let titleFullscreen
@@ -283,18 +283,4 @@ Modal.propTypes = {
283
283
  permanent: PropTypes.bool
284
284
  }
285
285
 
286
- Modal.defaultProps = {
287
- children: null,
288
- childrenClassContainer: '',
289
- setIsOpen: () => {},
290
- title: '',
291
- layout: MODAL_POPUP,
292
- size: SMALL,
293
- profile: '',
294
- backgroundClassName: '',
295
- titleClassName: '',
296
- modalCloseClassName: '',
297
- permanent: false
298
- }
299
-
300
286
  export default Modal