playbook_ui 14.14.0.pre.alpha.pbntr500currencykithandlingofnullvalues6275 → 14.14.0.pre.alpha.play1868dependencyremovallodash6286

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 (35) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_card/_card.tsx +2 -1
  3. data/app/pb_kits/playbook/pb_currency/_currency.tsx +32 -48
  4. data/app/pb_kits/playbook/pb_currency/currency.html.erb +8 -15
  5. data/app/pb_kits/playbook/pb_currency/currency.rb +0 -3
  6. data/app/pb_kits/playbook/pb_currency/docs/example.yml +0 -2
  7. data/app/pb_kits/playbook/pb_currency/docs/index.js +1 -2
  8. data/app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.tsx +4 -4
  9. data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.tsx +2 -2
  10. data/app/pb_kits/playbook/pb_icon_button/_icon_button.tsx +71 -0
  11. data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_default.jsx +17 -0
  12. data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_sizes.jsx +61 -0
  13. data/app/pb_kits/playbook/pb_icon_button/docs/example.yml +4 -0
  14. data/app/pb_kits/playbook/pb_icon_button/docs/index.js +2 -0
  15. data/app/pb_kits/playbook/pb_icon_button/icon_button.test.jsx +39 -0
  16. data/app/pb_kits/playbook/pb_progress_step/progress_step_item.html.erb +2 -2
  17. data/app/pb_kits/playbook/pb_tooltip/index.js +1 -1
  18. data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx +5 -4
  19. data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +2 -1
  20. data/app/pb_kits/playbook/utilities/object.ts +82 -1
  21. data/dist/chunks/_typeahead-CHxdYnAw.js +36 -0
  22. data/dist/chunks/_weekday_stacked-D2tZHCNS.js +45 -0
  23. data/dist/chunks/{lib-D3us1bGD.js → lib-CrrD678a.js} +2 -2
  24. data/dist/chunks/{pb_form_validation-BpihMSOQ.js → pb_form_validation-BbWhQeoO.js} +1 -1
  25. data/dist/chunks/vendor.js +1 -1
  26. data/dist/menu.yml +1 -1
  27. data/dist/playbook-doc.js +1 -1
  28. data/dist/playbook-rails-react-bindings.js +1 -1
  29. data/dist/playbook-rails.js +1 -1
  30. data/lib/playbook/version.rb +1 -1
  31. metadata +10 -7
  32. data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display.html.erb +0 -20
  33. data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display.jsx +0 -34
  34. data/dist/chunks/_typeahead-PqkcDf1H.js +0 -36
  35. data/dist/chunks/_weekday_stacked-BhC8Xp9l.js +0 -45
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 4c6ef102f160200110b47477b34a9a06798b4ef4f1122151a12341775c20c9a5
4
- data.tar.gz: 14eb41101975901c5f557d1d8b6721fc9301e9b54a30ec0c335b8717dccbe508
3
+ metadata.gz: d27a1fb0e1b7ff46b56d6009a0eb62cd2d8fee0a67bcbe52756710ef9aaf5581
4
+ data.tar.gz: c46d01bb2e6d6b386297b040c132f438da09b14b5582319a07ec6358f758917f
5
5
  SHA512:
6
- metadata.gz: 301d0b715331e1e388be9b554865dc59f79b88f5ef11f3a7f038554f215c7b72d6541465d027adcf0c8f9a0fea2dd4e9e1e6f608c6b0d9b9f5360fc52a70ffc8
7
- data.tar.gz: 6e1bc33d1fbe6b1bebe4b112b42c73107685786fbc7ddd01df4f95fe302d015e1225edcfbe042e2931728dcd655fe97a9d3629417c639392fa3753a7cb533ee6
6
+ metadata.gz: 7c87e5ec2242eaf97737497152d0494d166282ad0da5dc17e0efd1008e1c698bbeb1389fd96cff40e8b1607caaa92dfdf3a90b9461e9876cf4c79030bd079b2d
7
+ data.tar.gz: f41cc750d14f6ec823711b0f85c3af3f60ff08f7149de6242969353b0fb2bac27576e03d75e587370d1286f46c2b60b64554cc19aa663a432274ee91c0dd03b3
@@ -1,7 +1,8 @@
1
1
  /* eslint-disable react/no-multi-comp */
2
2
 
3
3
  import React from 'react'
4
- import { get } from 'lodash'
4
+ import { get } from '../utilities/object'
5
+
5
6
  import classnames from 'classnames'
6
7
 
7
8
  import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
@@ -21,7 +21,6 @@ type CurrencyProps = {
21
21
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
22
22
  id?: string,
23
23
  label?: string,
24
- nullDisplay?: string,
25
24
  size?: 'sm' | 'md' | 'lg',
26
25
  symbol?: string,
27
26
  variant?: 'default' | 'light' | 'bold',
@@ -50,7 +49,6 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
50
49
  unit,
51
50
  className,
52
51
  label = '',
53
- nullDisplay = '',
54
52
  size = 'sm',
55
53
  symbol = '$',
56
54
  variant = 'default',
@@ -120,62 +118,48 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
120
118
  id={id}
121
119
  >
122
120
  <Caption dark={dark}>{label}</Caption>
123
-
121
+
124
122
  <div className={`pb_currency_wrapper${variantClass || emphasizedClass}`}>
125
123
  {unstyled ? (
126
- nullDisplay && !amount ? (
127
- <div>{nullDisplay}</div>
128
- ) : (
129
- <>
130
- <div>{handleNegative}{symbol}</div>
131
- <div>{getAmount}</div>
132
- <div>
133
- {getAbbreviation}
134
- {unit ? unit : getDecimalValue}
135
- </div>
136
- </>
137
- )
124
+ <>
125
+ <div>{handleNegative}{symbol}</div>
126
+ <div>{getAmount}</div>
127
+ <div>
128
+ {getAbbreviation}
129
+ {unit ? unit : getDecimalValue}
130
+ </div>
131
+ </>
138
132
  ) : (
139
- nullDisplay && !amount ? (
133
+ <>
134
+ <Body
135
+ className="dollar_sign"
136
+ color="light"
137
+ dark={dark}
138
+ >
139
+ {handleNegative}{symbol}
140
+ </Body>
141
+
140
142
  <Title
141
143
  className="pb_currency_value"
142
144
  dark={dark}
143
145
  size={sizes[size]}
144
- >
145
- {nullDisplay}
146
- </Title>
147
- ) : (
148
- <>
149
- <Body
150
- className="dollar_sign"
151
- color="light"
152
- dark={dark}
153
- >
154
- {handleNegative}{symbol}
155
- </Body>
156
-
157
- <Title
158
- className="pb_currency_value"
159
- dark={dark}
160
- size={sizes[size]}
161
- >
162
- {getAmount}
163
- </Title>
164
-
165
- <Body
166
- className="unit"
167
- color="light"
168
- dark={dark}
169
- >
170
- {getAbbreviation}
171
- {unit ? unit : getDecimalValue}
172
- </Body>
173
- </>
174
- )
146
+ >
147
+ {getAmount}
148
+ </Title>
149
+
150
+ <Body
151
+ className="unit"
152
+ color="light"
153
+ dark={dark}
154
+ >
155
+ {getAbbreviation}
156
+ {unit ? unit : getDecimalValue}
157
+ </Body>
158
+ </>
175
159
  )}
176
160
  </div>
177
161
  </div>
178
- );
162
+ )
179
163
  }
180
164
 
181
165
  export default Currency
@@ -1,24 +1,17 @@
1
1
  <%= pb_content_tag do %>
2
2
  <%= pb_rails("caption", props: object.caption_props) %>
3
+
3
4
  <div class=<%= "pb_currency_wrapper#{object.variant_class || object.emphasized_class}" %>>
4
5
  <% if object.unstyled %>
5
- <% if object.null_display && object.amount.blank? %>
6
- <div><%= object.null_display %></div>
7
- <% else %>
8
- <div><%= object.negative_sign %><%= object.symbol %></div>
9
- <div><%= object.title_props[:text] %></div>
10
- <div><%= object.body_props[:text] %></div>
11
- <% end %>
6
+ <div><%= object.negative_sign %><%= object.symbol %></div>
7
+ <div><%= object.title_props[:text] %></div>
8
+ <div><%= object.body_props[:text] %></div>
12
9
  <% else %>
13
- <% if object.null_display && object.amount.blank? %>
14
- <%= pb_rails("title", props: {text: object.null_display}) %>
15
- <% else %>
16
- <%= pb_rails("body", props: object.currency_wrapper_props) do %>
17
- <%= object.negative_sign %><%= object.symbol %>
18
- <% end %>
19
- <%= pb_rails("title", props: object.title_props) %>
20
- <%= pb_rails("body", props: object.body_props) %>
10
+ <%= pb_rails("body", props: object.currency_wrapper_props) do %>
11
+ <%= object.negative_sign %><%= object.symbol %>
21
12
  <% end %>
13
+ <%= pb_rails("title", props: object.title_props) %>
14
+ <%= pb_rails("body", props: object.body_props) %>
22
15
  <% end %>
23
16
  </div>
24
17
  <% end %>
@@ -46,9 +46,6 @@ module Playbook
46
46
  prop :comma_separator, type: Playbook::Props::Boolean,
47
47
  default: false
48
48
 
49
- prop :null_display, type: Playbook::Props::String,
50
- required: false
51
-
52
49
  def classname
53
50
  generate_classname("pb_currency_kit", align, size, dark_class)
54
51
  end
@@ -10,7 +10,6 @@ examples:
10
10
  - currency_unstyled: Unstyled
11
11
  - currency_comma_separator: Comma Separator
12
12
  - currency_negative: Negative
13
- - currency_null_display: Null Display
14
13
 
15
14
  react:
16
15
  - currency_variants: Variants
@@ -22,7 +21,6 @@ examples:
22
21
  - currency_unstyled: Unstyled
23
22
  - currency_comma_separator: Comma Separator
24
23
  - currency_negative: Negative
25
- - currency_null_display: Null Display
26
24
 
27
25
  swift:
28
26
  - currency_size_swift: Size
@@ -6,5 +6,4 @@ export { default as CurrencyAbbreviated } from './_currency_abbreviated.jsx'
6
6
  export { default as CurrencyMatchingDecimals } from './_currency_matching_decimals.jsx'
7
7
  export { default as CurrencyUnstyled } from './_currency_unstyled.jsx'
8
8
  export { default as CurrencyCommaSeparator } from './_currency_comma_separator.jsx'
9
- export { default as CurrencyNegative } from './_currency_negative.jsx'
10
- export { default as CurrencyNullDisplay } from './_currency_null_display.jsx'
9
+ export { default as CurrencyNegative } from './_currency_negative.jsx'
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { isEmpty, map, omitBy } from 'lodash'
2
+ import { isEmpty, map, omitBy } from '../../utilities/object'
3
3
 
4
4
  import Body from '../../pb_body/_body'
5
5
  import Caption from '../../pb_caption/_caption'
@@ -40,13 +40,13 @@ const CurrentFilters = ({ dark, filters }: CurrentFiltersProps): React.ReactElem
40
40
  className="filter"
41
41
  key={`filter-${name}`}
42
42
  >
43
- { value === true ?
43
+ { value === true ?
44
44
  <Title
45
45
  dark={dark}
46
46
  size={4}
47
47
  tag="h4"
48
48
  text={name}
49
- /> :
49
+ /> :
50
50
  <div>
51
51
  <Caption
52
52
  dark={dark}
@@ -58,7 +58,7 @@ const CurrentFilters = ({ dark, filters }: CurrentFiltersProps): React.ReactElem
58
58
  tag="h4"
59
59
  text={value}
60
60
  />
61
- </div>
61
+ </div>
62
62
  }
63
63
  </div>
64
64
  ))}
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { isEmpty } from 'lodash'
2
+ import { isEmpty } from '../../utilities/object'
3
3
 
4
4
  import Flex from '../../pb_flex/_flex'
5
5
 
@@ -46,7 +46,7 @@ const FilterSingle = ({
46
46
  paddingRight="lg"
47
47
  vertical="center"
48
48
  >
49
- { children &&
49
+ { children &&
50
50
  <>
51
51
  <FiltersPopover
52
52
  dark={dark}
@@ -0,0 +1,71 @@
1
+
2
+ import React from 'react'
3
+ import classnames from 'classnames'
4
+ import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
5
+ import { globalProps } from '../utilities/globalProps'
6
+
7
+ import Button from '../pb_button/_button'
8
+ import Icon from '../pb_icon/_icon'
9
+ import { IconSizes } from "../pb_icon/_icon"
10
+
11
+ type IconButtonProps = {
12
+ aria?: { [key: string]: string },
13
+ className?: string,
14
+ data?: { [key: string]: string },
15
+ htmlType?: 'submit' | 'reset' | 'button' | undefined,
16
+ icon?: string,
17
+ id?: string,
18
+ link?: string,
19
+ newWindow?: boolean,
20
+ size?: IconSizes,
21
+ target?: string,
22
+ variant?: 'default' | 'link',
23
+ }
24
+
25
+ const IconButton = (props: IconButtonProps) => {
26
+ const {
27
+ aria = {},
28
+ className,
29
+ data = {},
30
+ htmlType = 'button',
31
+ icon = 'bars',
32
+ id,
33
+ link,
34
+ newWindow = false,
35
+ size = "2x",
36
+ target,
37
+ variant = "default",
38
+ } = props
39
+
40
+ const ariaProps = buildAriaProps(aria)
41
+ const dataProps = buildDataProps(data)
42
+ const classes = classnames(buildCss('pb_icon_button_kit', variant), globalProps(props), className)
43
+
44
+ return (
45
+ <div
46
+ {...ariaProps}
47
+ {...dataProps}
48
+ className={classes}
49
+ id={id}
50
+ >
51
+ <Button
52
+ borderRadius="lg"
53
+ htmlType={htmlType}
54
+ link={link}
55
+ newWindow={newWindow}
56
+ target={target}
57
+ >
58
+ <Icon
59
+ className="icon_button_icon"
60
+ fixedWidth
61
+ icon={icon}
62
+ paddingX="xxs"
63
+ paddingY="xs"
64
+ size={size}
65
+ />
66
+ </Button>
67
+ </div>
68
+ )
69
+ }
70
+
71
+ export default IconButton
@@ -0,0 +1,17 @@
1
+ import React from 'react'
2
+ import { IconButton } from 'playbook-ui'
3
+
4
+ const IconButtonDefault = (props) => (
5
+ <div>
6
+ <IconButton
7
+ {...props}
8
+ />
9
+ <IconButton
10
+ {...props}
11
+ marginTop="md"
12
+ variant="link"
13
+ />
14
+ </div>
15
+ )
16
+
17
+ export default IconButtonDefault
@@ -0,0 +1,61 @@
1
+ import React from 'react'
2
+ import { IconButton, Flex } from 'playbook-ui'
3
+
4
+ const IconButtonSizes = (props) => (
5
+ <div>
6
+ <Flex align="center">
7
+ <IconButton
8
+ {...props}
9
+ size="lg"
10
+ />
11
+ <span>Large</span>
12
+ </Flex>
13
+ <Flex align="center">
14
+ <IconButton
15
+ {...props}
16
+ size="sm"
17
+ />
18
+ <span>Small</span>
19
+ </Flex>
20
+ <Flex align="center">
21
+ <IconButton
22
+ {...props}
23
+ size="xs"
24
+ />
25
+ <span>XSmall</span>
26
+ </Flex>
27
+ <Flex
28
+ align="center"
29
+ marginTop="md"
30
+ >
31
+ <IconButton
32
+ {...props}
33
+ size="1x"
34
+ />
35
+ <span>1x</span>
36
+ </Flex>
37
+ <Flex align="center">
38
+ <IconButton
39
+ {...props}
40
+ size="2x"
41
+ />
42
+ <span>2x</span>
43
+ </Flex>
44
+ <Flex align="center">
45
+ <IconButton
46
+ {...props}
47
+ size="3x"
48
+ />
49
+ <span>3x</span>
50
+ </Flex>
51
+ <Flex align="center">
52
+ <IconButton
53
+ {...props}
54
+ size="4x"
55
+ />
56
+ <span>4x</span>
57
+ </Flex>
58
+ </div>
59
+ )
60
+
61
+ export default IconButtonSizes
@@ -3,3 +3,7 @@ examples:
3
3
  rails:
4
4
  - icon_button_default: Default
5
5
  - icon_button_sizes: Sizes
6
+
7
+ react:
8
+ - icon_button_default: Default
9
+ - icon_button_sizes: Sizes
@@ -0,0 +1,2 @@
1
+ export { default as IconButtonDefault } from './_icon_button_default.jsx'
2
+ export { default as IconButtonSizes } from './_icon_button_sizes.jsx'
@@ -0,0 +1,39 @@
1
+ import { ensureAccessible, renderKit } from '../utilities/test-utils'
2
+
3
+ import { IconButton } from 'playbook-ui'
4
+
5
+ const props = {
6
+ data: { testid: 'default', icon: 'plus' }
7
+ }
8
+
9
+ test('default test', () => {
10
+ const kit = renderKit(IconButton, props)
11
+
12
+ expect(kit).toBeInTheDocument()
13
+ expect(kit).toHaveClass('pb_icon_button_kit_default')
14
+
15
+ const iconElement = kit.querySelector('.icon_button_icon')
16
+ expect(iconElement).toBeInTheDocument()
17
+ })
18
+
19
+ it("should be accessible", async () => {
20
+ ensureAccessible(IconButton, props)
21
+ })
22
+
23
+ test('passes link variant prop', () => {
24
+ const kit = renderKit(IconButton, { ...props, variant: "link" })
25
+ expect(kit).toBeInTheDocument()
26
+ expect(kit).toHaveClass('pb_icon_button_kit_link')
27
+ })
28
+
29
+ test('should set button type to "submit" when htmlType prop is passed', () => {
30
+ const kit = renderKit(IconButton, { ...props, htmlType: 'submit' })
31
+ const buttonElement = kit.querySelector('button')
32
+ expect(buttonElement).toHaveAttribute('type', 'submit')
33
+ })
34
+
35
+ test('passes custom classname', () => {
36
+ const kit = renderKit(IconButton, { ...props, className: "extra_class" })
37
+ expect(kit).toBeInTheDocument()
38
+ expect(kit).toHaveClass('pb_icon_button_kit_default extra_class')
39
+ })
@@ -1,6 +1,6 @@
1
1
  <%= pb_content_tag(:li) do %>
2
- <div class="box" style="max-width: min-content;" id="<%= object.tooltip_trigger_class %>">
3
- <div class="circle">
2
+ <div class="box" style="max-width: min-content;">
3
+ <div class="circle" id="<%= object.tooltip_trigger_class %>" >
4
4
  <%= pb_rails("icon", props: { icon: object.icon, size: "xs" }) if object.icon.present? %>
5
5
  </div>
6
6
  <% if object.tooltip.present? %>
@@ -152,4 +152,4 @@ export default class PbTooltip extends PbEnhancedElement {
152
152
  get triggerMethod() {
153
153
  return this.element.dataset.pbTooltipTriggerMethod || 'hover'
154
154
  }
155
- }
155
+ }
@@ -10,7 +10,8 @@ import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
10
10
  import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
11
11
  import mapColors from "../pb_dashboard/pbChartsColorsHelper";
12
12
  import treemap from 'highcharts/modules/treemap'
13
- import { merge } from 'lodash'
13
+ import { merge} from '../utilities/object'
14
+
14
15
 
15
16
  type TreemapChartProps = {
16
17
  chartData: {
@@ -53,7 +54,7 @@ const TreemapChart = ({
53
54
  type = "treemap",
54
55
  ...props
55
56
  }: TreemapChartProps): React.ReactElement => {
56
-
57
+
57
58
  const ariaProps = buildAriaProps(aria)
58
59
  const dataProps = buildDataProps(data)
59
60
  const htmlProps = buildHtmlProps(htmlOptions)
@@ -62,9 +63,9 @@ const TreemapChart = ({
62
63
  dark
63
64
  ? Highcharts.setOptions(highchartsDarkTheme)
64
65
  : Highcharts.setOptions(highchartsTheme);
65
- };
66
+ };
66
67
  treemap(Highcharts)
67
- setupTheme();
68
+ setupTheme();
68
69
 
69
70
  const staticOptions = {
70
71
  title: {
@@ -3,7 +3,8 @@ import Select from 'react-select'
3
3
  import AsyncSelect from 'react-select/async'
4
4
  import CreateableSelect from 'react-select/creatable'
5
5
  import AsyncCreateableSelect from 'react-select/async-creatable'
6
- import { get, isString, uniqueId } from 'lodash'
6
+ import { get, isString, uniqueId } from '../utilities/object'
7
+
7
8
  import { globalProps, GlobalProps } from '../utilities/globalProps'
8
9
  import classnames from 'classnames'
9
10
 
@@ -1,3 +1,84 @@
1
1
  /* 🛠️ Any commonly used lodash functions can be added here. 🤙 */
2
2
 
3
- export const isEmpty = (obj: Record<string, unknown>): boolean => Object.keys(obj).length < 1
3
+ export const isEmpty = (obj: any) => [Object, Array].includes((obj || {}).constructor) && !Object.entries((obj || {})).length;
4
+
5
+ export const get = <T, R = any>(obj: T, path: string, defaultValue?: R): R | any => {
6
+ const travel = (regexp: RegExp): any =>
7
+ String.prototype.split
8
+ .call(path, regexp)
9
+ .filter(Boolean)
10
+ .reduce((res: any, key: string) => (res !== null && res !== undefined ? res[key] : res), obj)
11
+ const result = travel(/[,[\]]+?/) || travel(/[,[\].]+?/)
12
+ return result === undefined || result === obj ? defaultValue : result
13
+ }
14
+
15
+ export const map = <T, U>(
16
+ collection: T[] | Record<string, T> | null | undefined,
17
+ iteratee: (value: any, key: string, collection: T[] | Record<string, T>) => U
18
+ ): U[] => {
19
+ if (!collection) return []
20
+ const coerce = (val: any) => {
21
+ if (val === true) return val
22
+ if (
23
+ typeof val === "number" ||
24
+ typeof val === "string" ||
25
+ typeof val === "boolean" ||
26
+ val === null
27
+ )
28
+ return String(val)
29
+ return val
30
+ }
31
+ return Array.isArray(collection)
32
+ ? collection.map((v, i) => iteratee(coerce(v), String(i), collection))
33
+ : Object.keys(collection).map(key => iteratee(coerce(collection[key]), key, collection))
34
+ }
35
+
36
+ export const isString = (str: unknown): str is string =>
37
+ str != null && typeof (str as any).valueOf() === "string"
38
+
39
+ export const omitBy = <T extends Record<string, any>>(
40
+ obj: T,
41
+ predicate: (value: T[keyof T], key: string) => boolean
42
+ ): Partial<T> => {
43
+ if (obj === null || typeof obj !== 'object') return {} as Partial<T>
44
+ return Object.keys(obj).reduce((result, key) => {
45
+ const typedKey = key as keyof T
46
+ if (!predicate(obj[typedKey], key)) {
47
+ result[typedKey] = obj[typedKey]
48
+ }
49
+ return result
50
+ }, {} as Partial<T>)
51
+ }
52
+
53
+ export const uniqueId: (prefix?: string) => string = (() => {
54
+ let counter = 0
55
+ return (prefix = '') => `${prefix}${++counter}`
56
+ })()
57
+
58
+ type PlainObject = { [key: string]: any }
59
+
60
+ const isObject = (item: any): item is PlainObject =>
61
+ item !== null && typeof item === 'object'
62
+
63
+ export const merge = <T extends PlainObject>(
64
+ target: T,
65
+ ...sources: PlainObject[]
66
+ ): T => {
67
+ if (!sources.length) return target
68
+ const source = sources.shift()!
69
+ if (isObject(target) && isObject(source)) {
70
+ Object.keys(source).forEach((key: string) => {
71
+ const typedKey = key as keyof T
72
+ const srcValue = source[key]
73
+ if (isObject(srcValue)) {
74
+ if (!target[typedKey]) {
75
+ target[typedKey] = (Array.isArray(srcValue) ? [] : {}) as unknown as T[typeof typedKey]
76
+ }
77
+ merge(target[typedKey], srcValue)
78
+ } else {
79
+ target[typedKey] = srcValue
80
+ }
81
+ })
82
+ }
83
+ return merge(target, ...sources)
84
+ }