@salutejs/plasma-new-hope 0.173.1-dev.0 → 0.174.0-canary.1488.11482175295.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (106) hide show
  1. package/cjs/components/ViewContainer/ViewContainer.js +38 -0
  2. package/cjs/components/ViewContainer/ViewContainer.js.map +1 -0
  3. package/cjs/components/ViewContainer/ViewContainer_yiqfcb.css +1 -0
  4. package/cjs/components/ViewContainer/_view/base.js +9 -0
  5. package/cjs/components/ViewContainer/_view/base.js.map +1 -0
  6. package/cjs/components/ViewContainer/_view/base_x642ct.css +1 -0
  7. package/cjs/index.css +2 -0
  8. package/cjs/index.js +3 -0
  9. package/cjs/index.js.map +1 -1
  10. package/emotion/cjs/components/ViewContainer/ViewContainer.js +49 -0
  11. package/emotion/cjs/components/ViewContainer/ViewContainer.template-doc.mdx +82 -0
  12. package/emotion/cjs/components/ViewContainer/_view/base.js +8 -0
  13. package/emotion/cjs/components/ViewContainer/_view/tokens.json +1 -0
  14. package/emotion/cjs/components/ViewContainer/index.js +18 -0
  15. package/emotion/cjs/examples/_helpers.js +3 -14
  16. package/emotion/cjs/examples/plasma_b2c/components/ViewContainer/ViewContainer.config.js +16 -0
  17. package/emotion/cjs/examples/plasma_b2c/components/ViewContainer/ViewContainer.js +11 -0
  18. package/emotion/cjs/examples/plasma_b2c/components/ViewContainer/ViewContainer.stories.tsx +65 -0
  19. package/emotion/cjs/examples/plasma_web/components/ViewContainer/ViewContainer.config.js +16 -0
  20. package/emotion/cjs/examples/plasma_web/components/ViewContainer/ViewContainer.js +11 -0
  21. package/emotion/cjs/examples/plasma_web/components/ViewContainer/ViewContainer.stories.tsx +65 -0
  22. package/emotion/cjs/index.js +11 -0
  23. package/emotion/es/components/ViewContainer/ViewContainer.js +40 -0
  24. package/emotion/es/components/ViewContainer/ViewContainer.template-doc.mdx +82 -0
  25. package/emotion/es/components/ViewContainer/_view/base.js +2 -0
  26. package/emotion/es/components/ViewContainer/_view/tokens.json +1 -0
  27. package/emotion/es/components/ViewContainer/index.js +1 -0
  28. package/emotion/es/examples/_helpers.js +3 -14
  29. package/emotion/es/examples/plasma_b2c/components/ViewContainer/ViewContainer.config.js +10 -0
  30. package/emotion/es/examples/plasma_b2c/components/ViewContainer/ViewContainer.js +5 -0
  31. package/emotion/es/examples/plasma_b2c/components/ViewContainer/ViewContainer.stories.tsx +65 -0
  32. package/emotion/es/examples/plasma_web/components/ViewContainer/ViewContainer.config.js +10 -0
  33. package/emotion/es/examples/plasma_web/components/ViewContainer/ViewContainer.js +5 -0
  34. package/emotion/es/examples/plasma_web/components/ViewContainer/ViewContainer.stories.tsx +65 -0
  35. package/emotion/es/index.js +2 -1
  36. package/es/components/ViewContainer/ViewContainer.js +33 -0
  37. package/es/components/ViewContainer/ViewContainer.js.map +1 -0
  38. package/es/components/ViewContainer/ViewContainer_yiqfcb.css +1 -0
  39. package/es/components/ViewContainer/_view/base.js +5 -0
  40. package/es/components/ViewContainer/_view/base.js.map +1 -0
  41. package/es/components/ViewContainer/_view/base_x642ct.css +1 -0
  42. package/es/index.css +2 -0
  43. package/es/index.js +1 -0
  44. package/es/index.js.map +1 -1
  45. package/package.json +3 -2
  46. package/styled-components/cjs/components/ViewContainer/ViewContainer.js +40 -0
  47. package/styled-components/cjs/components/ViewContainer/ViewContainer.template-doc.mdx +82 -0
  48. package/styled-components/cjs/components/ViewContainer/_view/base.js +8 -0
  49. package/styled-components/cjs/components/ViewContainer/_view/tokens.json +1 -0
  50. package/styled-components/cjs/components/ViewContainer/index.js +18 -0
  51. package/styled-components/cjs/examples/_helpers.js +3 -14
  52. package/styled-components/cjs/examples/plasma_b2c/components/ViewContainer/ViewContainer.config.js +16 -0
  53. package/styled-components/cjs/examples/plasma_b2c/components/ViewContainer/ViewContainer.js +11 -0
  54. package/styled-components/cjs/examples/plasma_b2c/components/ViewContainer/ViewContainer.stories.tsx +65 -0
  55. package/styled-components/cjs/examples/plasma_web/components/ViewContainer/ViewContainer.config.js +16 -0
  56. package/styled-components/cjs/examples/plasma_web/components/ViewContainer/ViewContainer.js +11 -0
  57. package/styled-components/cjs/examples/plasma_web/components/ViewContainer/ViewContainer.stories.tsx +65 -0
  58. package/styled-components/cjs/index.js +11 -0
  59. package/styled-components/es/components/ViewContainer/ViewContainer.js +31 -0
  60. package/styled-components/es/components/ViewContainer/ViewContainer.template-doc.mdx +82 -0
  61. package/styled-components/es/components/ViewContainer/_view/base.js +2 -0
  62. package/styled-components/es/components/ViewContainer/_view/tokens.json +1 -0
  63. package/styled-components/es/components/ViewContainer/index.js +1 -0
  64. package/styled-components/es/examples/_helpers.js +3 -14
  65. package/styled-components/es/examples/plasma_b2c/components/ViewContainer/ViewContainer.config.js +10 -0
  66. package/styled-components/es/examples/plasma_b2c/components/ViewContainer/ViewContainer.js +5 -0
  67. package/styled-components/es/examples/plasma_b2c/components/ViewContainer/ViewContainer.stories.tsx +65 -0
  68. package/styled-components/es/examples/plasma_web/components/ViewContainer/ViewContainer.config.js +10 -0
  69. package/styled-components/es/examples/plasma_web/components/ViewContainer/ViewContainer.js +5 -0
  70. package/styled-components/es/examples/plasma_web/components/ViewContainer/ViewContainer.stories.tsx +65 -0
  71. package/styled-components/es/index.js +2 -1
  72. package/types/components/ViewContainer/ViewContainer.d.ts +26 -0
  73. package/types/components/ViewContainer/ViewContainer.d.ts.map +1 -0
  74. package/types/components/ViewContainer/_view/base.d.ts +2 -0
  75. package/types/components/ViewContainer/_view/base.d.ts.map +1 -0
  76. package/types/components/ViewContainer/index.d.ts +2 -0
  77. package/types/components/ViewContainer/index.d.ts.map +1 -0
  78. package/types/examples/_helpers.d.ts.map +1 -1
  79. package/types/examples/plasma_b2c/components/ViewContainer/ViewContainer.config.d.ts +9 -0
  80. package/types/examples/plasma_b2c/components/ViewContainer/ViewContainer.config.d.ts.map +1 -0
  81. package/types/examples/plasma_b2c/components/ViewContainer/ViewContainer.d.ts +8 -0
  82. package/types/examples/plasma_b2c/components/ViewContainer/ViewContainer.d.ts.map +1 -0
  83. package/types/examples/plasma_web/components/ViewContainer/ViewContainer.config.d.ts +9 -0
  84. package/types/examples/plasma_web/components/ViewContainer/ViewContainer.config.d.ts.map +1 -0
  85. package/types/examples/plasma_web/components/ViewContainer/ViewContainer.d.ts +8 -0
  86. package/types/examples/plasma_web/components/ViewContainer/ViewContainer.d.ts.map +1 -0
  87. package/types/index.d.ts +1 -0
  88. package/types/index.d.ts.map +1 -1
  89. package/emotion/cjs/examples/themes/declaration.d.ts +0 -4
  90. package/emotion/cjs/examples/themes/index.js +0 -15
  91. package/emotion/cjs/examples/themes/plasma_b2c.module.css +0 -984
  92. package/emotion/cjs/examples/themes/plasma_web.module.css +0 -984
  93. package/emotion/es/examples/themes/declaration.d.ts +0 -4
  94. package/emotion/es/examples/themes/index.js +0 -7
  95. package/emotion/es/examples/themes/plasma_b2c.module.css +0 -984
  96. package/emotion/es/examples/themes/plasma_web.module.css +0 -984
  97. package/styled-components/cjs/examples/themes/declaration.d.ts +0 -4
  98. package/styled-components/cjs/examples/themes/index.js +0 -15
  99. package/styled-components/cjs/examples/themes/plasma_b2c.module.css +0 -984
  100. package/styled-components/cjs/examples/themes/plasma_web.module.css +0 -984
  101. package/styled-components/es/examples/themes/declaration.d.ts +0 -4
  102. package/styled-components/es/examples/themes/index.js +0 -7
  103. package/styled-components/es/examples/themes/plasma_b2c.module.css +0 -984
  104. package/styled-components/es/examples/themes/plasma_web.module.css +0 -984
  105. package/types/examples/themes/index.d.ts +0 -6
  106. package/types/examples/themes/index.d.ts.map +0 -1
@@ -0,0 +1,65 @@
1
+ import React, { ComponentProps } from 'react';
2
+ import type { StoryObj, Meta } from '@storybook/react';
3
+
4
+ import { Button } from '../Button/Button';
5
+ import { TextField } from '../TextField/TextField';
6
+ import { Checkbox } from '../Checkbox/Checkbox';
7
+
8
+ import { ViewContainer } from './ViewContainer';
9
+
10
+ type StoryViewProps = ComponentProps<typeof ViewContainer>;
11
+
12
+ const meta: Meta<StoryViewProps> = {
13
+ title: 'plasma_b2c/ViewContainer',
14
+ };
15
+
16
+ export default meta;
17
+
18
+ type Story = StoryObj<StoryViewProps>;
19
+
20
+ const ViewExample = ({ view }: StoryViewProps) => {
21
+ const style = view
22
+ ? {
23
+ background: view === 'onDark' ? '#1a1a1a' : '#ededed',
24
+ color: view === 'onDark' ? 'white' : 'black',
25
+ }
26
+ : undefined;
27
+
28
+ return (
29
+ <>
30
+ <h4>view: {view ?? 'default'}</h4>
31
+ <div>
32
+ <ViewContainer
33
+ view={view}
34
+ style={{
35
+ ...style,
36
+ padding: '1rem',
37
+ borderRadius: '1rem',
38
+ display: 'flex',
39
+ flexDirection: 'column',
40
+ gap: '1rem',
41
+ }}
42
+ >
43
+ <h3 style={{ margin: 0 }}>Inside ViewContainer</h3>
44
+ <Button text="default Button" />
45
+ <Checkbox checked label="Label" />
46
+ <TextField value="Example Value" label="Label" labelPlacement="inner" />
47
+ </ViewContainer>
48
+ </div>
49
+ </>
50
+ );
51
+ };
52
+
53
+ export const Default: Story = {
54
+ render: () => {
55
+ return (
56
+ <>
57
+ <ViewExample />
58
+ <br />
59
+ <ViewExample view="onDark" />
60
+ <br />
61
+ <ViewExample view="onLight" />
62
+ </>
63
+ );
64
+ },
65
+ };
@@ -0,0 +1,16 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.config = void 0;
7
+ var _styledComponents = /*#__PURE__*/require("styled-components");
8
+ var _plasma_b2c = /*#__PURE__*/require("@salutejs/plasma-themes/tokens/plasma_b2c");
9
+ var config = exports.config = {
10
+ variations: {
11
+ view: {
12
+ onDark: /*#__PURE__*/(0, _styledComponents.css)(["", ""], _plasma_b2c.viewContainer.dark),
13
+ onLight: /*#__PURE__*/(0, _styledComponents.css)(["", ""], _plasma_b2c.viewContainer.light)
14
+ }
15
+ }
16
+ };
@@ -0,0 +1,11 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.ViewContainer = void 0;
7
+ var _ViewContainer = /*#__PURE__*/require("../../../../components/ViewContainer");
8
+ var _engines = /*#__PURE__*/require("../../../../engines");
9
+ var _ViewContainer2 = /*#__PURE__*/require("./ViewContainer.config");
10
+ var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_ViewContainer.viewContainerConfig, _ViewContainer2.config);
11
+ var ViewContainer = exports.ViewContainer = /*#__PURE__*/(0, _engines.component)(mergedConfig);
@@ -0,0 +1,65 @@
1
+ import React, { ComponentProps } from 'react';
2
+ import type { StoryObj, Meta } from '@storybook/react';
3
+
4
+ import { Button } from '../Button/Button';
5
+ import { TextField } from '../TextField/TextField';
6
+ import { Checkbox } from '../Checkbox/Checkbox';
7
+
8
+ import { ViewContainer } from './ViewContainer';
9
+
10
+ type StoryViewProps = ComponentProps<typeof ViewContainer>;
11
+
12
+ const meta: Meta<StoryViewProps> = {
13
+ title: 'plasma_web/ViewContainer',
14
+ };
15
+
16
+ export default meta;
17
+
18
+ type Story = StoryObj<StoryViewProps>;
19
+
20
+ const ViewExample = ({ view }: StoryViewProps) => {
21
+ const style = view
22
+ ? {
23
+ background: view === 'onDark' ? '#1a1a1a' : '#ededed',
24
+ color: view === 'onDark' ? 'white' : 'black',
25
+ }
26
+ : undefined;
27
+
28
+ return (
29
+ <>
30
+ <h4>view: {view ?? 'default'}</h4>
31
+ <div>
32
+ <ViewContainer
33
+ view={view}
34
+ style={{
35
+ ...style,
36
+ padding: '1rem',
37
+ borderRadius: '1rem',
38
+ display: 'flex',
39
+ flexDirection: 'column',
40
+ gap: '1rem',
41
+ }}
42
+ >
43
+ <h3 style={{ margin: 0 }}>Inside ViewContainer</h3>
44
+ <Button text="default Button" />
45
+ <Checkbox checked label="Label" />
46
+ <TextField value="Example Value" label="Label" labelPlacement="inner" />
47
+ </ViewContainer>
48
+ </div>
49
+ </>
50
+ );
51
+ };
52
+
53
+ export const Default: Story = {
54
+ render: () => {
55
+ return (
56
+ <>
57
+ <ViewExample />
58
+ <br />
59
+ <ViewExample view="onDark" />
60
+ <br />
61
+ <ViewExample view="onLight" />
62
+ </>
63
+ );
64
+ },
65
+ };
@@ -673,4 +673,15 @@ Object.keys(_Attach).forEach(function (key) {
673
673
  return _Attach[key];
674
674
  }
675
675
  });
676
+ });
677
+ var _ViewContainer = /*#__PURE__*/require("./components/ViewContainer");
678
+ Object.keys(_ViewContainer).forEach(function (key) {
679
+ if (key === "default" || key === "__esModule") return;
680
+ if (key in exports && exports[key] === _ViewContainer[key]) return;
681
+ Object.defineProperty(exports, key, {
682
+ enumerable: true,
683
+ get: function get() {
684
+ return _ViewContainer[key];
685
+ }
686
+ });
676
687
  });
@@ -0,0 +1,31 @@
1
+ var _excluded = ["children"];
2
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
3
+ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
4
+ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
5
+ import React, { forwardRef } from 'react';
6
+ import { css } from 'styled-components';
7
+ import { base as viewCSS } from './_view/base';
8
+ var base = /*#__PURE__*/css(["position:relative;"]);
9
+ export var viewContainerRoot = function viewContainerRoot(Root) {
10
+ return /*#__PURE__*/forwardRef(function (props, ref) {
11
+ var children = props.children,
12
+ rest = _objectWithoutProperties(props, _excluded);
13
+ return /*#__PURE__*/React.createElement(Root, _extends({
14
+ ref: ref
15
+ }, rest), children);
16
+ });
17
+ };
18
+ export var viewContainerConfig = {
19
+ name: 'ViewContainer',
20
+ tag: 'div',
21
+ layout: viewContainerRoot,
22
+ base: base,
23
+ variations: {
24
+ view: {
25
+ css: viewCSS
26
+ }
27
+ },
28
+ defaults: {
29
+ view: undefined
30
+ }
31
+ };
@@ -0,0 +1,82 @@
1
+ ---
2
+ id: link
3
+ title: Link
4
+ ---
5
+
6
+ import { PropsTable, Description } from '@site/src/components';
7
+
8
+ # ViewContainer
9
+ <Description name="ViewContainer" />
10
+ <PropsTable name="ViewContainer" exclude={['css']} />
11
+
12
+ # Описание
13
+
14
+ Данный компонент представляет собой обёртку, которая инвертирует токены компонент, которые в неё помещены, в зависимости от выбранного значения свойства view - `onDark` или `onLight`.
15
+
16
+ При этом, независимо от режима темы (тёмный или светлый) для всего приложения, токены внутри не будут меняться.
17
+
18
+ Этот механизм необходим для случаев, когда требуется отобразить компонент на специфичном бэкграунде, чтобы избежать наложение цветов.
19
+
20
+ # Пример использования
21
+
22
+ ```tsx live
23
+ import React from 'react';
24
+ import { ViewContainer, Button, Checkbox, TextField } from '@salutejs/{{ package }}';
25
+
26
+ export function App() {
27
+ return (
28
+ <div>
29
+ <ViewContainer
30
+ style=\{{
31
+ padding: '1rem',
32
+ borderRadius: '1rem',
33
+ display: 'flex',
34
+ flexDirection: 'column',
35
+ gap: '1rem',
36
+ }}
37
+ >
38
+ <h3 style=\{{ margin: 0 }}>Inside default ViewContainer</h3>
39
+ <Button text="default Button" />
40
+ <Checkbox checked label="Label" />
41
+ <TextField value="Example Value" label="Label" labelPlacement="inner" />
42
+ </ViewContainer>
43
+ <br />
44
+ <ViewContainer
45
+ view="onDark"
46
+ style=\{{
47
+ background: '#1a1a1a',
48
+ color: 'white',
49
+ padding: '1rem',
50
+ borderRadius: '1rem',
51
+ display: 'flex',
52
+ flexDirection: 'column',
53
+ gap: '1rem',
54
+ }}
55
+ >
56
+ <h3 style=\{{ margin: 0 }}>Inside onDark ViewContainer</h3>
57
+ <Button text="default Button" />
58
+ <Checkbox checked label="Label" />
59
+ <TextField value="Example Value" label="Label" labelPlacement="inner" />
60
+ </ViewContainer>
61
+ <br />
62
+ <ViewContainer
63
+ view="onLight"
64
+ style=\{{
65
+ background: '#ededed',
66
+ color: 'black',
67
+ padding: '1rem',
68
+ borderRadius: '1rem',
69
+ display: 'flex',
70
+ flexDirection: 'column',
71
+ gap: '1rem',
72
+ }}
73
+ >
74
+ <h3 style=\{{ margin: 0 }}>Inside onLight ViewContainer</h3>
75
+ <Button text="default Button" />
76
+ <Checkbox checked label="Label" />
77
+ <TextField value="Example Value" label="Label" labelPlacement="inner" />
78
+ </ViewContainer>
79
+ </div>
80
+ );
81
+ }
82
+ ```
@@ -0,0 +1,2 @@
1
+ import { css } from 'styled-components';
2
+ export var base = /*#__PURE__*/css([""]);
@@ -0,0 +1 @@
1
+ export { viewContainerRoot, viewContainerConfig } from './ViewContainer';
@@ -6,20 +6,9 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
6
6
  function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
7
7
  function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
8
8
  import React from 'react';
9
- import { themes } from './themes';
10
- export var WithTheme = function WithTheme(Story, context) {
11
- var _themes$themeName;
12
- var themeType = context.globals.theme;
13
- var themeName = context.title.split('/')[0];
14
- return /*#__PURE__*/React.createElement("div", {
15
- id: "theme-root",
16
- className: themes === null || themes === void 0 || (_themes$themeName = themes[themeName]) === null || _themes$themeName === void 0 ? void 0 : _themes$themeName[themeType],
17
- style: {
18
- padding: '1rem',
19
- minHeight: '100vh',
20
- boxSizing: 'border-box'
21
- }
22
- }, /*#__PURE__*/React.createElement(Story, null));
9
+ // TODO: Удалить в отдельном пр из всех компонент
10
+ export var WithTheme = function WithTheme(Story) {
11
+ return /*#__PURE__*/React.createElement(Story, null);
23
12
  };
24
13
  export function argTypesFromConfig(config) {
25
14
  var exclude = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
@@ -0,0 +1,10 @@
1
+ import { css } from 'styled-components';
2
+ import { viewContainer } from '@salutejs/plasma-themes/tokens/plasma_b2c';
3
+ export var config = {
4
+ variations: {
5
+ view: {
6
+ onDark: /*#__PURE__*/css(["", ""], viewContainer.dark),
7
+ onLight: /*#__PURE__*/css(["", ""], viewContainer.light)
8
+ }
9
+ }
10
+ };
@@ -0,0 +1,5 @@
1
+ import { viewContainerConfig } from '../../../../components/ViewContainer';
2
+ import { component, mergeConfig } from '../../../../engines';
3
+ import { config } from './ViewContainer.config';
4
+ var mergedConfig = /*#__PURE__*/mergeConfig(viewContainerConfig, config);
5
+ export var ViewContainer = /*#__PURE__*/component(mergedConfig);
@@ -0,0 +1,65 @@
1
+ import React, { ComponentProps } from 'react';
2
+ import type { StoryObj, Meta } from '@storybook/react';
3
+
4
+ import { Button } from '../Button/Button';
5
+ import { TextField } from '../TextField/TextField';
6
+ import { Checkbox } from '../Checkbox/Checkbox';
7
+
8
+ import { ViewContainer } from './ViewContainer';
9
+
10
+ type StoryViewProps = ComponentProps<typeof ViewContainer>;
11
+
12
+ const meta: Meta<StoryViewProps> = {
13
+ title: 'plasma_b2c/ViewContainer',
14
+ };
15
+
16
+ export default meta;
17
+
18
+ type Story = StoryObj<StoryViewProps>;
19
+
20
+ const ViewExample = ({ view }: StoryViewProps) => {
21
+ const style = view
22
+ ? {
23
+ background: view === 'onDark' ? '#1a1a1a' : '#ededed',
24
+ color: view === 'onDark' ? 'white' : 'black',
25
+ }
26
+ : undefined;
27
+
28
+ return (
29
+ <>
30
+ <h4>view: {view ?? 'default'}</h4>
31
+ <div>
32
+ <ViewContainer
33
+ view={view}
34
+ style={{
35
+ ...style,
36
+ padding: '1rem',
37
+ borderRadius: '1rem',
38
+ display: 'flex',
39
+ flexDirection: 'column',
40
+ gap: '1rem',
41
+ }}
42
+ >
43
+ <h3 style={{ margin: 0 }}>Inside ViewContainer</h3>
44
+ <Button text="default Button" />
45
+ <Checkbox checked label="Label" />
46
+ <TextField value="Example Value" label="Label" labelPlacement="inner" />
47
+ </ViewContainer>
48
+ </div>
49
+ </>
50
+ );
51
+ };
52
+
53
+ export const Default: Story = {
54
+ render: () => {
55
+ return (
56
+ <>
57
+ <ViewExample />
58
+ <br />
59
+ <ViewExample view="onDark" />
60
+ <br />
61
+ <ViewExample view="onLight" />
62
+ </>
63
+ );
64
+ },
65
+ };
@@ -0,0 +1,10 @@
1
+ import { css } from 'styled-components';
2
+ import { viewContainer } from '@salutejs/plasma-themes/tokens/plasma_b2c';
3
+ export var config = {
4
+ variations: {
5
+ view: {
6
+ onDark: /*#__PURE__*/css(["", ""], viewContainer.dark),
7
+ onLight: /*#__PURE__*/css(["", ""], viewContainer.light)
8
+ }
9
+ }
10
+ };
@@ -0,0 +1,5 @@
1
+ import { viewContainerConfig } from '../../../../components/ViewContainer';
2
+ import { component, mergeConfig } from '../../../../engines';
3
+ import { config } from './ViewContainer.config';
4
+ var mergedConfig = /*#__PURE__*/mergeConfig(viewContainerConfig, config);
5
+ export var ViewContainer = /*#__PURE__*/component(mergedConfig);
@@ -0,0 +1,65 @@
1
+ import React, { ComponentProps } from 'react';
2
+ import type { StoryObj, Meta } from '@storybook/react';
3
+
4
+ import { Button } from '../Button/Button';
5
+ import { TextField } from '../TextField/TextField';
6
+ import { Checkbox } from '../Checkbox/Checkbox';
7
+
8
+ import { ViewContainer } from './ViewContainer';
9
+
10
+ type StoryViewProps = ComponentProps<typeof ViewContainer>;
11
+
12
+ const meta: Meta<StoryViewProps> = {
13
+ title: 'plasma_web/ViewContainer',
14
+ };
15
+
16
+ export default meta;
17
+
18
+ type Story = StoryObj<StoryViewProps>;
19
+
20
+ const ViewExample = ({ view }: StoryViewProps) => {
21
+ const style = view
22
+ ? {
23
+ background: view === 'onDark' ? '#1a1a1a' : '#ededed',
24
+ color: view === 'onDark' ? 'white' : 'black',
25
+ }
26
+ : undefined;
27
+
28
+ return (
29
+ <>
30
+ <h4>view: {view ?? 'default'}</h4>
31
+ <div>
32
+ <ViewContainer
33
+ view={view}
34
+ style={{
35
+ ...style,
36
+ padding: '1rem',
37
+ borderRadius: '1rem',
38
+ display: 'flex',
39
+ flexDirection: 'column',
40
+ gap: '1rem',
41
+ }}
42
+ >
43
+ <h3 style={{ margin: 0 }}>Inside ViewContainer</h3>
44
+ <Button text="default Button" />
45
+ <Checkbox checked label="Label" />
46
+ <TextField value="Example Value" label="Label" labelPlacement="inner" />
47
+ </ViewContainer>
48
+ </div>
49
+ </>
50
+ );
51
+ };
52
+
53
+ export const Default: Story = {
54
+ render: () => {
55
+ return (
56
+ <>
57
+ <ViewExample />
58
+ <br />
59
+ <ViewExample view="onDark" />
60
+ <br />
61
+ <ViewExample view="onLight" />
62
+ </>
63
+ );
64
+ },
65
+ };
@@ -60,4 +60,5 @@ export * from './components/Autocomplete';
60
60
  export * from './components/EmptyState';
61
61
  export * from './components/Editable';
62
62
  export * from './components/Mask';
63
- export * from './components/Attach';
63
+ export * from './components/Attach';
64
+ export * from './components/ViewContainer';
@@ -0,0 +1,26 @@
1
+ import React from 'react';
2
+ import type { RootProps } from '../../engines/types';
3
+ export declare type ViewContainerCustomProps = {
4
+ /**
5
+ * Вид компонента
6
+ */
7
+ view?: string;
8
+ };
9
+ declare type ViewContainerProps = React.HTMLAttributes<HTMLDivElement> & ViewContainerCustomProps;
10
+ export declare const viewContainerRoot: (Root: RootProps<HTMLAnchorElement, ViewContainerProps>) => React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & ViewContainerCustomProps & React.RefAttributes<HTMLAnchorElement>>;
11
+ export declare const viewContainerConfig: {
12
+ name: string;
13
+ tag: string;
14
+ layout: (Root: RootProps<HTMLAnchorElement, ViewContainerProps>) => React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & ViewContainerCustomProps & React.RefAttributes<HTMLAnchorElement>>;
15
+ base: import("@linaria/core").LinariaClassName;
16
+ variations: {
17
+ view: {
18
+ css: import("@linaria/core").LinariaClassName;
19
+ };
20
+ };
21
+ defaults: {
22
+ view: undefined;
23
+ };
24
+ };
25
+ export {};
26
+ //# sourceMappingURL=ViewContainer.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ViewContainer.d.ts","sourceRoot":"","sources":["../../../src/components/ViewContainer/ViewContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAQrD,oBAAY,wBAAwB,GAAG;IACnC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,aAAK,kBAAkB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG,wBAAwB,CAAC;AAE1F,eAAO,MAAM,iBAAiB,SAAU,UAAU,iBAAiB,EAAE,kBAAkB,CAAC,8IASlF,CAAC;AAEP,eAAO,MAAM,mBAAmB;;;mBAXQ,UAAU,iBAAiB,EAAE,kBAAkB,CAAC;;;;;;;;;;CAwBvF,CAAC"}
@@ -0,0 +1,2 @@
1
+ export declare const base: import("@linaria/core").LinariaClassName;
2
+ //# sourceMappingURL=base.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../../../../src/components/ViewContainer/_view/base.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,IAAI,0CAAQ,CAAC"}
@@ -0,0 +1,2 @@
1
+ export { viewContainerRoot, viewContainerConfig } from './ViewContainer';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ViewContainer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"_helpers.d.ts","sourceRoot":"","sources":["../../src/examples/_helpers.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,QAAQ,EAAgB,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAE1E,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,KAAK,EAAE,6BAA6B,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAIxG,eAAO,MAAM,SAAS,EAAE,SAavB,CAAC;AAEF,wBAAgB,kBAAkB,CAC9B,GAAG,SAAS,WAAW,EACvB,WAAW,SAAS,QAAQ,EAC5B,aAAa,SAAS,SAAS,CAAC,WAAW,CAAC,EAC5C,WAAW,SAAS,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG,6BAA6B,CAAC,WAAW,CAAC,EACpG,MAAM,EAAE,eAAe,CAAC,GAAG,EAAE,WAAW,EAAE,aAAa,EAAE,WAAW,CAAC,EAAE,OAAO,GAAE,MAAM,EAAO,6CAkC9F"}
1
+ {"version":3,"file":"_helpers.d.ts","sourceRoot":"","sources":["../../src/examples/_helpers.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAE5D,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,KAAK,EAAE,6BAA6B,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGxG,eAAO,MAAM,SAAS,EAAE,SAEvB,CAAC;AAEF,wBAAgB,kBAAkB,CAC9B,GAAG,SAAS,WAAW,EACvB,WAAW,SAAS,QAAQ,EAC5B,aAAa,SAAS,SAAS,CAAC,WAAW,CAAC,EAC5C,WAAW,SAAS,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG,6BAA6B,CAAC,WAAW,CAAC,EACpG,MAAM,EAAE,eAAe,CAAC,GAAG,EAAE,WAAW,EAAE,aAAa,EAAE,WAAW,CAAC,EAAE,OAAO,GAAE,MAAM,EAAO,6CAkC9F"}
@@ -0,0 +1,9 @@
1
+ export declare const config: {
2
+ variations: {
3
+ view: {
4
+ onDark: import("@linaria/core").LinariaClassName;
5
+ onLight: import("@linaria/core").LinariaClassName;
6
+ };
7
+ };
8
+ };
9
+ //# sourceMappingURL=ViewContainer.config.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ViewContainer.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_b2c/components/ViewContainer/ViewContainer.config.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM;;;;;;;CAWlB,CAAC"}
@@ -0,0 +1,8 @@
1
+ /// <reference types="react" />
2
+ export declare const ViewContainer: import("react").FunctionComponent<import("../../../../engines/types").PropsType<{
3
+ view: {
4
+ onDark: import("@linaria/core").LinariaClassName;
5
+ onLight: import("@linaria/core").LinariaClassName;
6
+ };
7
+ }> & import("react").HTMLAttributes<HTMLDivElement> & import("../../../../components/ViewContainer/ViewContainer").ViewContainerCustomProps & import("react").RefAttributes<HTMLAnchorElement>>;
8
+ //# sourceMappingURL=ViewContainer.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ViewContainer.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_b2c/components/ViewContainer/ViewContainer.ts"],"names":[],"mappings":";AAOA,eAAO,MAAM,aAAa;;;;;+LAA0B,CAAC"}
@@ -0,0 +1,9 @@
1
+ export declare const config: {
2
+ variations: {
3
+ view: {
4
+ onDark: import("@linaria/core").LinariaClassName;
5
+ onLight: import("@linaria/core").LinariaClassName;
6
+ };
7
+ };
8
+ };
9
+ //# sourceMappingURL=ViewContainer.config.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ViewContainer.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_web/components/ViewContainer/ViewContainer.config.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM;;;;;;;CAWlB,CAAC"}
@@ -0,0 +1,8 @@
1
+ /// <reference types="react" />
2
+ export declare const ViewContainer: import("react").FunctionComponent<import("../../../../engines/types").PropsType<{
3
+ view: {
4
+ onDark: import("@linaria/core").LinariaClassName;
5
+ onLight: import("@linaria/core").LinariaClassName;
6
+ };
7
+ }> & import("react").HTMLAttributes<HTMLDivElement> & import("../../../../components/ViewContainer/ViewContainer").ViewContainerCustomProps & import("react").RefAttributes<HTMLAnchorElement>>;
8
+ //# sourceMappingURL=ViewContainer.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ViewContainer.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_web/components/ViewContainer/ViewContainer.ts"],"names":[],"mappings":";AAOA,eAAO,MAAM,aAAa;;;;;+LAA0B,CAAC"}
package/types/index.d.ts CHANGED
@@ -59,4 +59,5 @@ export * from './components/EmptyState';
59
59
  export * from './components/Editable';
60
60
  export * from './components/Mask';
61
61
  export * from './components/Attach';
62
+ export * from './components/ViewContainer';
62
63
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,4BAA4B,CAAC"}
@@ -1,4 +0,0 @@
1
- declare module '*.css' {
2
- const content: { light: string; dark: string };
3
- export default content;
4
- }