@telus-uds/components-web 2.0.0 → 2.1.0

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 (27) hide show
  1. package/CHANGELOG.md +15 -2
  2. package/README.md +40 -1
  3. package/component-docs.json +13484 -0
  4. package/lib/index.js +7 -0
  5. package/lib/utils/index.js +16 -2
  6. package/lib/utils/ssr.js +50 -0
  7. package/lib-module/index.js +1 -0
  8. package/lib-module/utils/index.js +3 -2
  9. package/lib-module/utils/ssr.js +41 -0
  10. package/package.json +8 -7
  11. package/src/index.js +2 -0
  12. package/src/utils/index.js +4 -1
  13. package/src/utils/ssr.js +37 -0
  14. package/types/BlockQuote.d.ts +16 -0
  15. package/types/Box.d.ts +38 -0
  16. package/types/BreadcrumbItem.d.ts +11 -0
  17. package/types/Breadcrumbs.d.ts +21 -0
  18. package/types/ComponentTypeWithForwardRef.d.ts +5 -0
  19. package/types/MultiSelectFilter.d.ts +27 -0
  20. package/types/QuantitySelector.d.ts +20 -0
  21. package/types/ReactNative.d.ts +256 -0
  22. package/types/Tooltip.d.ts +17 -0
  23. package/types/TooltipButton.d.ts +12 -0
  24. package/types/Typography.d.ts +27 -0
  25. package/types/WebVideo.d.ts +17 -0
  26. package/types/common.d.ts +162 -0
  27. package/types/index.d.ts +244 -0
package/lib/index.js CHANGED
@@ -22,6 +22,7 @@ var _exportNames = {
22
22
  QuantitySelector: true,
23
23
  IconButton: true,
24
24
  transformGradient: true,
25
+ ssrStyles: true,
25
26
  Breadcrumbs: true,
26
27
  BlockQuote: true,
27
28
  OptimizeImage: true,
@@ -272,6 +273,12 @@ Object.defineProperty(exports, "WebVideo", {
272
273
  return _WebVideo.default;
273
274
  }
274
275
  });
276
+ Object.defineProperty(exports, "ssrStyles", {
277
+ enumerable: true,
278
+ get: function () {
279
+ return _utils.ssrStyles;
280
+ }
281
+ });
275
282
  Object.defineProperty(exports, "transformGradient", {
276
283
  enumerable: true,
277
284
  get: function () {
package/lib/utils/index.js CHANGED
@@ -3,6 +3,12 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
+ Object.defineProperty(exports, "deprecate", {
7
+ enumerable: true,
8
+ get: function () {
9
+ return _logger.deprecate;
10
+ }
11
+ });
6
12
  Object.defineProperty(exports, "htmlAttrs", {
7
13
  enumerable: true,
8
14
  get: function () {
@@ -21,6 +27,12 @@ Object.defineProperty(exports, "renderStructuredContent", {
21
27
  return _renderStructuredContent.default;
22
28
  }
23
29
  });
30
+ Object.defineProperty(exports, "ssrStyles", {
31
+ enumerable: true,
32
+ get: function () {
33
+ return _ssr.default;
34
+ }
35
+ });
24
36
  Object.defineProperty(exports, "transformGradient", {
25
37
  enumerable: true,
26
38
  get: function () {
@@ -46,16 +58,18 @@ Object.defineProperty(exports, "warn", {
46
58
  }
47
59
  });
48
60
 
61
+ var _logger = require("./logger");
62
+
49
63
  var _transforms = require("./transforms");
50
64
 
51
65
  var _useTypographyTheme = _interopRequireDefault(require("./useTypographyTheme"));
52
66
 
53
67
  var _htmlAttrs = _interopRequireDefault(require("./htmlAttrs"));
54
68
 
55
- var _logger = require("./logger");
56
-
57
69
  var _media = _interopRequireDefault(require("./media"));
58
70
 
71
+ var _ssr = _interopRequireDefault(require("./ssr"));
72
+
59
73
  var _renderStructuredContent = _interopRequireDefault(require("./renderStructuredContent"));
60
74
 
61
75
  var _useOverlaidPosition = _interopRequireDefault(require("./useOverlaidPosition"));
package/lib/utils/ssr.js ADDED
@@ -0,0 +1,50 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+
8
+ var _styledComponents = require("styled-components");
9
+
10
+ var _componentsBase = require("@telus-uds/components-base");
11
+
12
+ /**
13
+ * Returns object with `renderApp` and `getStyles` functions.
14
+ * Weave these into your app's server-side render process:
15
+ *
16
+ * - Call `renderApp` first to do the actual server-side render
17
+ * - After the render is complete, call `getStyles`
18
+ * - Include the style tags returned by `getStyles` in the SSR <head>
19
+ *
20
+ * This wraps ssrStyles from @telus-uds/components-base and adds Styled Components support.
21
+ *
22
+ * @param {string} [appName] - optional unique identifier if ssrStyles is called multiple times for multiple apps
23
+ * @param {object} [options] -
24
+ * - `styleGetters`: optional array of additional style getter functions to call after render
25
+ * - `collectStyles`: optional function, takes the rendered app, returns either the same or a new app element
26
+ * @param {boolean} [options.styleGetters]
27
+ * @param {(ReactElement) => ReactElement} [options.collectStyles]
28
+ */
29
+ const ssrStyles = function () {
30
+ let appName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'Allium app';
31
+ let {
32
+ styleGetters = [],
33
+ collectStyles = renderedApp => renderedApp
34
+ } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
35
+ const sheet = new _styledComponents.ServerStyleSheet();
36
+
37
+ const getStyledComponentsStyles = () => {
38
+ const styles = sheet.getStyleElement();
39
+ sheet.seal();
40
+ return styles;
41
+ };
42
+
43
+ return (0, _componentsBase.ssrStyles)(appName, {
44
+ styleGetters: [getStyledComponentsStyles, ...styleGetters],
45
+ collectStyles: renderedApp => collectStyles(sheet.collectStyles(renderedApp))
46
+ });
47
+ };
48
+
49
+ var _default = ssrStyles;
50
+ exports.default = _default;
package/lib-module/index.js CHANGED
@@ -37,4 +37,5 @@ export { default as TermsAndConditions } from './TermsAndConditions';
37
37
  export { default as NavigationBar } from './NavigationBar';
38
38
  export { default as Progress } from './Progress';
39
39
  export { default as SkeletonProvider } from './SkeletonProvider';
40
+ export { ssrStyles } from './utils';
40
41
  export * from './baseExports';
package/lib-module/utils/index.js CHANGED
@@ -1,8 +1,9 @@
1
+ import { warn, deprecate } from './logger';
1
2
  import { transformGradient } from './transforms';
2
3
  import useTypographyTheme from './useTypographyTheme';
3
4
  import htmlAttrs from './htmlAttrs';
4
- import { warn } from './logger';
5
5
  import media from './media';
6
+ import ssrStyles from './ssr';
6
7
  import renderStructuredContent from './renderStructuredContent';
7
8
  import useOverlaidPosition from './useOverlaidPosition';
8
- export { htmlAttrs, transformGradient, useTypographyTheme, warn, media, renderStructuredContent, useOverlaidPosition };
9
+ export { deprecate, htmlAttrs, transformGradient, useTypographyTheme, warn, media, renderStructuredContent, ssrStyles, useOverlaidPosition };
package/lib-module/utils/ssr.js ADDED
@@ -0,0 +1,41 @@
1
+ import { ServerStyleSheet } from 'styled-components';
2
+ import { ssrStyles as baseSsrStyles } from '@telus-uds/components-base';
3
+ /**
4
+ * Returns object with `renderApp` and `getStyles` functions.
5
+ * Weave these into your app's server-side render process:
6
+ *
7
+ * - Call `renderApp` first to do the actual server-side render
8
+ * - After the render is complete, call `getStyles`
9
+ * - Include the style tags returned by `getStyles` in the SSR <head>
10
+ *
11
+ * This wraps ssrStyles from @telus-uds/components-base and adds Styled Components support.
12
+ *
13
+ * @param {string} [appName] - optional unique identifier if ssrStyles is called multiple times for multiple apps
14
+ * @param {object} [options] -
15
+ * - `styleGetters`: optional array of additional style getter functions to call after render
16
+ * - `collectStyles`: optional function, takes the rendered app, returns either the same or a new app element
17
+ * @param {boolean} [options.styleGetters]
18
+ * @param {(ReactElement) => ReactElement} [options.collectStyles]
19
+ */
20
+
21
+ const ssrStyles = function () {
22
+ let appName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'Allium app';
23
+ let {
24
+ styleGetters = [],
25
+ collectStyles = renderedApp => renderedApp
26
+ } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
27
+ const sheet = new ServerStyleSheet();
28
+
29
+ const getStyledComponentsStyles = () => {
30
+ const styles = sheet.getStyleElement();
31
+ sheet.seal();
32
+ return styles;
33
+ };
34
+
35
+ return baseSsrStyles(appName, {
36
+ styleGetters: [getStyledComponentsStyles, ...styleGetters],
37
+ collectStyles: renderedApp => collectStyles(sheet.collectStyles(renderedApp))
38
+ });
39
+ };
40
+
41
+ export default ssrStyles;
package/package.json CHANGED
@@ -5,21 +5,21 @@
5
5
  ],
6
6
  "dependencies": {
7
7
  "@gorhom/portal": "^1.0.14",
8
- "@telus-uds/components-base": "1.42.0",
9
- "@telus-uds/system-constants": "^1.2.0",
8
+ "@telus-uds/components-base": "1.43.0",
9
+ "@telus-uds/system-constants": "^1.2.1",
10
10
  "fscreen": "^1.2.0",
11
11
  "lodash.omit": "^4.5.0",
12
12
  "react-dates": "^21.8.0",
13
13
  "react-helmet-async": "^1.3.0",
14
14
  "react-moment-proptypes": "^1.8.1",
15
- "@telus-uds/system-theme-tokens": "^2.26.0",
15
+ "@telus-uds/system-theme-tokens": "^2.26.1",
16
16
  "prop-types": "^15.7.2",
17
17
  "lodash.throttle": "^4.1.1",
18
18
  "react-youtube": "^10.1.0"
19
19
  },
20
20
  "description": "UDS mult-brand web components",
21
21
  "devDependencies": {
22
- "@telus-uds/browserslist-config": "^1.0.4",
22
+ "@telus-uds/browserslist-config": "^1.0.5",
23
23
  "@testing-library/jest-dom": "^5.16.1",
24
24
  "@testing-library/react": "^13.3.0",
25
25
  "@types/react": "^18.0.0",
@@ -32,7 +32,7 @@
32
32
  "webpack": "5.x"
33
33
  },
34
34
  "homepage": "https://github.com/telus/universal-design-system#readme",
35
- "license": "UNLICENSED",
35
+ "license": "MIT",
36
36
  "main": "lib/index.js",
37
37
  "module": "lib-module/index.js",
38
38
  "name": "@telus-uds/components-web",
@@ -47,10 +47,11 @@
47
47
  "url": "git+https://github.com/telus/universal-design-system.git"
48
48
  },
49
49
  "scripts": {
50
- "build": "npm run build:code",
50
+ "build": "npm run build:code && npm run build:docs",
51
51
  "build:main": "babel src -d lib",
52
52
  "build:module": "babel src -d lib-module --env-name module",
53
53
  "build:code": "npm run build:main && npm run build:module",
54
+ "build:docs": "babel-node --plugins=@telus-uds/babel-plugin-react-docgen generate-component-docs.js",
54
55
  "format": "prettier --write .",
55
56
  "lint": "telus-standard",
56
57
  "lint:fix": "telus-standard --fix",
@@ -61,5 +62,5 @@
61
62
  "skip": true
62
63
  },
63
64
  "types": "types/index.d.ts",
64
- "version": "2.0.0"
65
+ "version": "2.1.0"
65
66
  }
package/src/index.js CHANGED
@@ -38,4 +38,6 @@ export { default as NavigationBar } from './NavigationBar'
38
38
  export { default as Progress } from './Progress'
39
39
  export { default as SkeletonProvider } from './SkeletonProvider'
40
40
 
41
+ export { ssrStyles } from './utils'
42
+
41
43
  export * from './baseExports'
package/src/utils/index.js CHANGED
@@ -1,17 +1,20 @@
1
+ import { warn, deprecate } from './logger'
1
2
  import { transformGradient } from './transforms'
2
3
  import useTypographyTheme from './useTypographyTheme'
3
4
  import htmlAttrs from './htmlAttrs'
4
- import { warn } from './logger'
5
5
  import media from './media'
6
+ import ssrStyles from './ssr'
6
7
  import renderStructuredContent from './renderStructuredContent'
7
8
  import useOverlaidPosition from './useOverlaidPosition'
8
9
 
9
10
  export {
11
+ deprecate,
10
12
  htmlAttrs,
11
13
  transformGradient,
12
14
  useTypographyTheme,
13
15
  warn,
14
16
  media,
15
17
  renderStructuredContent,
18
+ ssrStyles,
16
19
  useOverlaidPosition
17
20
  }
package/src/utils/ssr.js ADDED
@@ -0,0 +1,37 @@
1
+ import { ServerStyleSheet } from 'styled-components'
2
+ import { ssrStyles as baseSsrStyles } from '@telus-uds/components-base'
3
+ /**
4
+ * Returns object with `renderApp` and `getStyles` functions.
5
+ * Weave these into your app's server-side render process:
6
+ *
7
+ * - Call `renderApp` first to do the actual server-side render
8
+ * - After the render is complete, call `getStyles`
9
+ * - Include the style tags returned by `getStyles` in the SSR <head>
10
+ *
11
+ * This wraps ssrStyles from @telus-uds/components-base and adds Styled Components support.
12
+ *
13
+ * @param {string} [appName] - optional unique identifier if ssrStyles is called multiple times for multiple apps
14
+ * @param {object} [options] -
15
+ * - `styleGetters`: optional array of additional style getter functions to call after render
16
+ * - `collectStyles`: optional function, takes the rendered app, returns either the same or a new app element
17
+ * @param {boolean} [options.styleGetters]
18
+ * @param {(ReactElement) => ReactElement} [options.collectStyles]
19
+ */
20
+ const ssrStyles = (
21
+ appName = 'Allium app',
22
+ { styleGetters = [], collectStyles = (renderedApp) => renderedApp } = {}
23
+ ) => {
24
+ const sheet = new ServerStyleSheet()
25
+ const getStyledComponentsStyles = () => {
26
+ const styles = sheet.getStyleElement()
27
+ sheet.seal()
28
+ return styles
29
+ }
30
+
31
+ return baseSsrStyles(appName, {
32
+ styleGetters: [getStyledComponentsStyles, ...styleGetters],
33
+ collectStyles: (renderedApp) => collectStyles(sheet.collectStyles(renderedApp))
34
+ })
35
+ }
36
+
37
+ export default ssrStyles
package/types/BlockQuote.d.ts ADDED
@@ -0,0 +1,16 @@
1
+ import type { ComponentType, ElementType, ReactNode } from 'react'
2
+ import type { HTMLAttrs } from './common'
3
+
4
+ export interface BlockQuoteProps extends HTMLAttrs {
5
+ children: ReactNode
6
+ link?: string
7
+ linkHref?: string
8
+ additionalInfo?: string
9
+ textStyle?: 'large' | 'heading'
10
+ LinkRouter?: ElementType
11
+ linkRouterProps?: Record<string, any>
12
+ }
13
+
14
+ declare const BlockQuote: ComponentType<BlockQuoteProps>
15
+
16
+ export default BlockQuote
package/types/Box.d.ts ADDED
@@ -0,0 +1,38 @@
1
+ import type { ReactNode } from 'react'
2
+ import type { A11yProps, LayoutTag, Tokens, Variant, ViewProps } from './common'
3
+ import { ComponentTypeWithForwardRef } from './ComponentTypeWithForwardRef'
4
+
5
+ export interface SpacingObjectProps {
6
+ xs?: number
7
+ sm?: number
8
+ md?: number
9
+ lg?: number
10
+ xl?: number
11
+ space?: number
12
+ options?: {
13
+ variant?: Variant
14
+ size?: number
15
+ }
16
+ }
17
+
18
+ export interface BoxProps extends A11yProps, ViewProps {
19
+ variant?: Variant
20
+ tokens?: Tokens
21
+ space?: number | SpacingObjectProps
22
+ vertical?: number | SpacingObjectProps
23
+ horizontal?: number | SpacingObjectProps
24
+ bottom?: number | SpacingObjectProps
25
+ left?: number | SpacingObjectProps
26
+ right?: number | SpacingObjectProps
27
+ top?: number | SpacingObjectProps
28
+ flex?: number
29
+ scroll?: boolean | Record<string, any>
30
+ tag?: LayoutTag
31
+ testID?: string
32
+ dataSet?: Record<string, any>
33
+ children: ReactNode
34
+ }
35
+
36
+ declare const Box: ComponentTypeWithForwardRef<BoxProps, any>
37
+
38
+ export default Box
package/types/BreadcrumbItem.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ import type { ComponentType, ReactNode } from 'react'
2
+
3
+ interface BreadcrumbItemProps {
4
+ href: string
5
+ children: ReactNode
6
+ current?: boolean
7
+ }
8
+
9
+ declare const BreadcrumbItem: ComponentType<BreadcrumbItemProps>
10
+
11
+ export default BreadcrumbItem
package/types/Breadcrumbs.d.ts ADDED
@@ -0,0 +1,21 @@
1
+ import type { ComponentType, ReactNode } from 'react'
2
+ import type { HTMLAttrs } from './common'
3
+ import BreadcrumbItem from './BreadcrumbItem'
4
+
5
+ export interface BreadcrumbRouteProps {
6
+ path?: string
7
+ breadcrumbName?: string
8
+ }
9
+
10
+ export interface BreadcrumbsProps extends HTMLAttrs {
11
+ routes?: BreadcrumbRouteProps[]
12
+ baseUrl?: string
13
+ params?: Record<string, any>
14
+ children?: ReactNode
15
+ }
16
+
17
+ declare const Breadcrumbs: ComponentType<BreadcrumbsProps> & {
18
+ Item: typeof BreadcrumbItem
19
+ }
20
+
21
+ export default Breadcrumbs
package/types/ComponentTypeWithForwardRef.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ import { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from 'react'
2
+
3
+ // declare const ComponentTypeWithForwardRef: ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;
4
+ export interface ComponentTypeWithForwardRef<P, T>
5
+ extends ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>> {}
package/types/MultiSelectFilter.d.ts ADDED
@@ -0,0 +1,27 @@
1
+ import type { ComponentType } from 'react'
2
+
3
+ interface MultiSelectFilterItem {
4
+ label: string
5
+ id?: string
6
+ }
7
+
8
+ export interface MultiSelectFilterProps {
9
+ label: string
10
+ subtitle?: string
11
+ id?: string
12
+ variant?: string
13
+ tokens?: []
14
+ items: MultiSelectFilterItem[]
15
+ values?: string[]
16
+ initialValues?: string[]
17
+ maxValues?: number
18
+ onChange?: (e: string[]) => void
19
+ copy?: 'en' | 'fr'
20
+ readOnly?: string
21
+ inactive?: string
22
+ rowLimit?: number
23
+ }
24
+
25
+ declare const MultiSelectFilter: ComponentType<MultiSelectFilterProps>
26
+
27
+ export default MultiSelectFilter
package/types/QuantitySelector.d.ts ADDED
@@ -0,0 +1,20 @@
1
+ import type { ComponentType } from 'react'
2
+ import type { HTMLAttrs, InputSupportsProps, Tokens } from './common'
3
+
4
+ export interface QuantitySelectorProps
5
+ extends HTMLAttrs,
6
+ Omit<InputSupportsProps, 'feedback' | 'validation'> {
7
+ minNumber?: number
8
+ maxNumber?: number
9
+ onChange?: (value: number, event: any) => void
10
+ defaultValue?: number
11
+ accessibilityLabel?: string
12
+ variant?: {
13
+ alternative: boolean
14
+ }
15
+ tokens?: Tokens
16
+ }
17
+
18
+ declare const QuantitySelector: ComponentType<QuantitySelectorProps>
19
+
20
+ export default QuantitySelector