@gravity-ui/page-constructor 8.7.2 → 8.8.0-alpha.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.
- package/build/cjs/blocks/Hero/Hero.css +1 -1
- package/build/cjs/context/windowWidthContext/WindowWidthContext.js +6 -3
- package/build/cjs/context/windowWidthContext/WindowWidthContext.js.map +1 -1
- package/build/cjs/demo/ComponentsText.stories.js +1 -1
- package/build/cjs/demo/ComponentsText.stories.js.map +1 -1
- package/build/esm/blocks/Hero/Hero.css +1 -1
- package/build/esm/context/windowWidthContext/WindowWidthContext.js +6 -3
- package/build/esm/context/windowWidthContext/WindowWidthContext.js.map +1 -1
- package/build/esm/demo/ComponentsText.stories.js +1 -1
- package/build/esm/demo/ComponentsText.stories.js.map +1 -1
- package/package.json +1 -1
|
@@ -6,11 +6,14 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
6
6
|
const React = tslib_1.__importStar(require("react"));
|
|
7
7
|
const throttle_1 = tslib_1.__importDefault(require("lodash/throttle.js"));
|
|
8
8
|
const constants_1 = require("../../constants.js");
|
|
9
|
-
const
|
|
9
|
+
const mobileContext_1 = require("../mobileContext/index.js");
|
|
10
|
+
const DEFAULT_DESKTOP_WIDTH = constants_1.BREAKPOINTS.xl;
|
|
11
|
+
const DEFAULT_MOBILE_WIDTH = constants_1.BREAKPOINTS.sm;
|
|
10
12
|
const UPDATE_FREQUENCY_MS = 100;
|
|
11
|
-
exports.WindowWidthContext = React.createContext(
|
|
13
|
+
exports.WindowWidthContext = React.createContext(DEFAULT_DESKTOP_WIDTH);
|
|
12
14
|
const WindowWidthProvider = ({ children }) => {
|
|
13
|
-
const
|
|
15
|
+
const isMobile = React.useContext(mobileContext_1.MobileContext);
|
|
16
|
+
const [windowWidth, setWindowWidth] = React.useState(isMobile ? DEFAULT_MOBILE_WIDTH : DEFAULT_DESKTOP_WIDTH);
|
|
14
17
|
React.useEffect(() => {
|
|
15
18
|
const handleResize = (0, throttle_1.default)(() => {
|
|
16
19
|
setWindowWidth(window.innerWidth);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WindowWidthContext.js","sourceRoot":"../../../../src","sources":["context/windowWidthContext/WindowWidthContext.tsx"],"names":[],"mappings":";;;;;AAAA,qDAA+B;AAE/B,0EAAuC;AAEvC,kDAA4C;
|
|
1
|
+
{"version":3,"file":"WindowWidthContext.js","sourceRoot":"../../../../src","sources":["context/windowWidthContext/WindowWidthContext.tsx"],"names":[],"mappings":";;;;;AAAA,qDAA+B;AAE/B,0EAAuC;AAEvC,kDAA4C;AAC5C,6DAA+C;AAE/C,MAAM,qBAAqB,GAAG,uBAAW,CAAC,EAAE,CAAC;AAC7C,MAAM,oBAAoB,GAAG,uBAAW,CAAC,EAAE,CAAC;AAC5C,MAAM,mBAAmB,GAAG,GAAG,CAAC;AAEnB,QAAA,kBAAkB,GAAG,KAAK,CAAC,aAAa,CAAS,qBAAqB,CAAC,CAAC;AAE9E,MAAM,mBAAmB,GAAG,CAAC,EAAC,QAAQ,EAA0B,EAAE,EAAE;IACvE,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,6BAAa,CAAC,CAAC;IACjD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAChD,QAAQ,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,qBAAqB,CAC1D,CAAC;IAEF,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,MAAM,YAAY,GAAG,IAAA,kBAAQ,EACzB,GAAG,EAAE;YACD,cAAc,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;QACtC,CAAC,EACD,mBAAmB,EACnB,EAAC,OAAO,EAAE,IAAI,EAAC,CAClB,CAAC;QAEF,YAAY,EAAE,CAAC;QAEf,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC;QAEjE,6CAA6C;QAC7C,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;IACpE,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACH,uBAAC,0BAAkB,CAAC,QAAQ,IAAC,KAAK,EAAE,WAAW,YAAG,QAAQ,GAA+B,CAC5F,CAAC;AACN,CAAC,CAAC;AA1BW,QAAA,mBAAmB,uBA0B9B;AAEK,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,0BAAkB,CAAC,CAAC;AAA5D,QAAA,cAAc,kBAA8C","sourcesContent":["import * as React from 'react';\n\nimport throttle from 'lodash/throttle';\n\nimport {BREAKPOINTS} from '../../constants';\nimport {MobileContext} from '../mobileContext';\n\nconst DEFAULT_DESKTOP_WIDTH = BREAKPOINTS.xl;\nconst DEFAULT_MOBILE_WIDTH = BREAKPOINTS.sm;\nconst UPDATE_FREQUENCY_MS = 100;\n\nexport const WindowWidthContext = React.createContext<number>(DEFAULT_DESKTOP_WIDTH);\n\nexport const WindowWidthProvider = ({children}: React.PropsWithChildren) => {\n const isMobile = React.useContext(MobileContext);\n const [windowWidth, setWindowWidth] = React.useState(\n isMobile ? DEFAULT_MOBILE_WIDTH : DEFAULT_DESKTOP_WIDTH,\n );\n\n React.useEffect(() => {\n const handleResize = throttle(\n () => {\n setWindowWidth(window.innerWidth);\n },\n UPDATE_FREQUENCY_MS,\n {leading: true},\n );\n\n handleResize();\n\n window.addEventListener('resize', handleResize, {passive: true});\n\n // eslint-disable-next-line consistent-return\n return () => window.removeEventListener('resize', handleResize);\n }, []);\n\n return (\n <WindowWidthContext.Provider value={windowWidth}>{children}</WindowWidthContext.Provider>\n );\n};\n\nexport const useWindowWidth = () => React.useContext(WindowWidthContext);\n"]}
|
|
@@ -21,6 +21,6 @@ const defaultTitleArgs = {
|
|
|
21
21
|
subtitle: (0, utils_1.yfmTransform)(data_json_4.default.default.subtitle),
|
|
22
22
|
};
|
|
23
23
|
const transformContentList = (item) => (0, utils_1.blockTransform)(item);
|
|
24
|
-
const Default = () => ((0, jsx_runtime_1.jsxs)("div", { style: { padding: '40px', display: 'flex', flexDirection: 'column', gap: '48px' }, children: [(0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Title \u2014 default" }), (0, jsx_runtime_1.jsx)(Title_1.default, { ...defaultTitleArgs })] }), (0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Title \u2014 sizes (l \u2192 xs)" }), (0, jsx_runtime_1.jsx)("div", { children: Object.entries(data_json_4.default.sizes).map(([size, props]) => ((0, jsx_runtime_1.jsx)("div", { style: { paddingBottom: '32px' }, children: (0, jsx_runtime_1.jsx)(Title_1.default, { ...defaultTitleArgs, title: props }) }, size))) })] }), (0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Title \u2014 with link" }), (0, jsx_runtime_1.jsx)(Title_1.default, { ...defaultTitleArgs, title: data_json_4.default.titleLink.title })] }), (0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "YFMWrapper" }), (0, jsx_runtime_1.jsx)(YFMWrapper_1.default, { ...data_json_5.default.default.content })] }), (0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Author \u2014 column" }), (0, jsx_runtime_1.jsx)(Author_1.default, { ...data_json_1.default.default
|
|
24
|
+
const Default = () => ((0, jsx_runtime_1.jsxs)("div", { style: { padding: '40px', display: 'flex', flexDirection: 'column', gap: '48px' }, children: [(0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Title \u2014 default" }), (0, jsx_runtime_1.jsx)(Title_1.default, { ...defaultTitleArgs })] }), (0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Title \u2014 sizes (l \u2192 xs)" }), (0, jsx_runtime_1.jsx)("div", { children: Object.entries(data_json_4.default.sizes).map(([size, props]) => ((0, jsx_runtime_1.jsx)("div", { style: { paddingBottom: '32px' }, children: (0, jsx_runtime_1.jsx)(Title_1.default, { ...defaultTitleArgs, title: props }) }, size))) })] }), (0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Title \u2014 with link" }), (0, jsx_runtime_1.jsx)(Title_1.default, { ...defaultTitleArgs, title: data_json_4.default.titleLink.title })] }), (0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "YFMWrapper" }), (0, jsx_runtime_1.jsx)(YFMWrapper_1.default, { ...data_json_5.default.default.content })] }), (0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Author \u2014 column" }), (0, jsx_runtime_1.jsx)(Author_1.default, { ...data_json_1.default.default })] }), (0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Author \u2014 line" }), (0, jsx_runtime_1.jsx)(Author_1.default, { ...data_json_1.default.default, type: models_1.AuthorType.Line })] }), (0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "ContentList \u2014 default" }), (0, jsx_runtime_1.jsx)(ContentList_1.default, { ...transformContentList(data_json_2.default.default) })] }), (0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "ContentList \u2014 without icon" }), (0, jsx_runtime_1.jsx)(ContentList_1.default, { ...transformContentList(data_json_2.default.withoutIcon) })] }), (0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "ContentList \u2014 sizes (s / m / l)" }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'column', gap: '16px' }, children: data_json_2.default.sizes.map((item, index) => ((0, jsx_runtime_1.jsx)(ContentList_1.default, { ...transformContentList(item) }, index))) })] }), (0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "MetaInfo" }), (0, jsx_runtime_1.jsx)(MetaInfo_1.default, { ...data_json_3.default.default.content })] })] }));
|
|
25
25
|
exports.Default = Default;
|
|
26
26
|
//# sourceMappingURL=ComponentsText.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComponentsText.stories.js","sourceRoot":"../../../src","sources":["demo/ComponentsText.stories.tsx"],"names":[],"mappings":";;;;;AAEA,qDAAoE;AACpE,oFAAiD;AACjD,mGAAgE;AAChE,0FAAuD;AACvD,iFAA8C;AAC9C,gGAA6D;AAC7D,+
|
|
1
|
+
{"version":3,"file":"ComponentsText.stories.js","sourceRoot":"../../../src","sources":["demo/ComponentsText.stories.tsx"],"names":[],"mappings":";;;;;AAEA,qDAAoE;AACpE,oFAAiD;AACjD,mGAAgE;AAChE,0FAAuD;AACvD,iFAA8C;AAC9C,gGAA6D;AAC7D,+CAAiG;AAEjG,mGAAoE;AACpE,wGAA8E;AAC9E,qGAAwE;AACxE,kGAAkE;AAClE,uGAA4E;AAE5E,kBAAe,EAAC,KAAK,EAAE,kCAAkC,EAAS,CAAC;AAEnE,MAAM,gBAAgB,GAAG;IACrB,KAAK,EAAE,mBAAS,CAAC,OAAO,CAAC,KAAuB;IAChD,QAAQ,EAAE,IAAA,oBAAY,EAAC,mBAAS,CAAC,OAAO,CAAC,QAAQ,CAAC;CACrD,CAAC;AAEF,MAAM,oBAAoB,GAAG,CAAC,IAAa,EAAE,EAAE,CAC3C,IAAA,sBAAc,EAAC,IAA8B,CAAqB,CAAC;AAEhE,MAAM,OAAO,GAAY,GAAG,EAAE,CAAC,CAClC,iCAAK,KAAK,EAAE,EAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAC,aAChF,gDACI,sEAAgC,EAChC,uBAAC,eAAK,OAAK,gBAAgB,GAAI,IACzB,EACV,gDACI,kFAAuC,EACvC,0CACK,MAAM,CAAC,OAAO,CAAC,mBAAS,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CACpD,gCAAgB,KAAK,EAAE,EAAC,aAAa,EAAE,MAAM,EAAC,YAC1C,uBAAC,eAAK,OAAK,gBAAgB,EAAE,KAAK,EAAE,KAAuB,GAAI,IADzD,IAAI,CAER,CACT,CAAC,GACA,IACA,EACV,gDACI,wEAAkC,EAClC,uBAAC,eAAK,OAAK,gBAAgB,EAAE,KAAK,EAAE,mBAAS,CAAC,SAAS,CAAC,KAAuB,GAAI,IAC7E,EACV,gDACI,4DAA2B,EAC3B,uBAAC,oBAAU,OAAK,mBAAc,CAAC,OAAO,CAAC,OAAO,GAAI,IAC5C,EACV,gDACI,sEAAgC,EAChC,uBAAC,gBAAM,OAAM,mBAAU,CAAC,OAAuB,GAAI,IAC7C,EACV,gDACI,oEAA8B,EAC9B,uBAAC,gBAAM,OAAM,mBAAU,CAAC,OAAuB,EAAE,IAAI,EAAE,mBAAU,CAAC,IAAI,GAAI,IACpE,EACV,gDACI,4EAAsC,EACtC,uBAAC,qBAAW,OAAK,oBAAoB,CAAC,mBAAe,CAAC,OAAO,CAAC,GAAI,IAC5D,EACV,gDACI,iFAA2C,EAC3C,uBAAC,qBAAW,OAAK,oBAAoB,CAAC,mBAAe,CAAC,WAAW,CAAC,GAAI,IAChE,EACV,gDACI,sFAAgD,EAChD,gCAAK,KAAK,EAAE,EAAC,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAC,YAC9D,mBAAe,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CACxC,uBAAC,qBAAW,OAAiB,oBAAoB,CAAC,IAAI,CAAC,IAArC,KAAK,CAAoC,CAC9D,CAAC,GACA,IACA,EACV,gDACI,0DAAyB,EACzB,uBAAC,kBAAQ,OAAK,mBAAY,CAAC,OAAO,CAAC,OAAO,GAAI,IACxC,IACR,CACT,CAAC;AArDW,QAAA,OAAO,WAqDlB","sourcesContent":["import {Meta, StoryFn} from '@storybook/react';\n\nimport {blockTransform, yfmTransform} from '../../.storybook/utils';\nimport Author from '../components/Author/Author';\nimport ContentList from '../components/ContentList/ContentList';\nimport MetaInfo from '../components/MetaInfo/MetaInfo';\nimport Title from '../components/Title/Title';\nimport YFMWrapper from '../components/YFMWrapper/YFMWrapper';\nimport {AuthorProps, AuthorType, ContentListProps, CustomBlock, TitleItemProps} from '../models';\n\nimport authorData from '../components/Author/__stories__/data.json';\nimport contentListData from '../components/ContentList/__stories__/data.json';\nimport metaInfoData from '../components/MetaInfo/__stories__/data.json';\nimport titleData from '../components/Title/__stories__/data.json';\nimport yfmWrapperData from '../components/YFMWrapper/__stories__/data.json';\n\nexport default {title: 'Lab/Tokenization/Components/Text'} as Meta;\n\nconst defaultTitleArgs = {\n title: titleData.default.title as TitleItemProps,\n subtitle: yfmTransform(titleData.default.subtitle),\n};\n\nconst transformContentList = (item: unknown) =>\n blockTransform(item as unknown as CustomBlock) as ContentListProps;\n\nexport const Default: StoryFn = () => (\n <div style={{padding: '40px', display: 'flex', flexDirection: 'column', gap: '48px'}}>\n <section>\n <strong>Title — default</strong>\n <Title {...defaultTitleArgs} />\n </section>\n <section>\n <strong>Title — sizes (l → xs)</strong>\n <div>\n {Object.entries(titleData.sizes).map(([size, props]) => (\n <div key={size} style={{paddingBottom: '32px'}}>\n <Title {...defaultTitleArgs} title={props as TitleItemProps} />\n </div>\n ))}\n </div>\n </section>\n <section>\n <strong>Title — with link</strong>\n <Title {...defaultTitleArgs} title={titleData.titleLink.title as TitleItemProps} />\n </section>\n <section>\n <strong>YFMWrapper</strong>\n <YFMWrapper {...yfmWrapperData.default.content} />\n </section>\n <section>\n <strong>Author — column</strong>\n <Author {...(authorData.default as AuthorProps)} />\n </section>\n <section>\n <strong>Author — line</strong>\n <Author {...(authorData.default as AuthorProps)} type={AuthorType.Line} />\n </section>\n <section>\n <strong>ContentList — default</strong>\n <ContentList {...transformContentList(contentListData.default)} />\n </section>\n <section>\n <strong>ContentList — without icon</strong>\n <ContentList {...transformContentList(contentListData.withoutIcon)} />\n </section>\n <section>\n <strong>ContentList — sizes (s / m / l)</strong>\n <div style={{display: 'flex', flexDirection: 'column', gap: '16px'}}>\n {contentListData.sizes.map((item, index) => (\n <ContentList key={index} {...transformContentList(item)} />\n ))}\n </div>\n </section>\n <section>\n <strong>MetaInfo</strong>\n <MetaInfo {...metaInfoData.default.content} />\n </section>\n </div>\n);\n"]}
|
|
@@ -2,11 +2,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import throttle from "lodash/throttle.js";
|
|
4
4
|
import { BREAKPOINTS } from "../../constants.js";
|
|
5
|
-
|
|
5
|
+
import { MobileContext } from "../mobileContext/index.js";
|
|
6
|
+
const DEFAULT_DESKTOP_WIDTH = BREAKPOINTS.xl;
|
|
7
|
+
const DEFAULT_MOBILE_WIDTH = BREAKPOINTS.sm;
|
|
6
8
|
const UPDATE_FREQUENCY_MS = 100;
|
|
7
|
-
export const WindowWidthContext = React.createContext(
|
|
9
|
+
export const WindowWidthContext = React.createContext(DEFAULT_DESKTOP_WIDTH);
|
|
8
10
|
export const WindowWidthProvider = ({ children }) => {
|
|
9
|
-
const
|
|
11
|
+
const isMobile = React.useContext(MobileContext);
|
|
12
|
+
const [windowWidth, setWindowWidth] = React.useState(isMobile ? DEFAULT_MOBILE_WIDTH : DEFAULT_DESKTOP_WIDTH);
|
|
10
13
|
React.useEffect(() => {
|
|
11
14
|
const handleResize = throttle(() => {
|
|
12
15
|
setWindowWidth(window.innerWidth);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WindowWidthContext.js","sourceRoot":"../../../../src","sources":["context/windowWidthContext/WindowWidthContext.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,QAAQ,2BAAwB;AAEvC,OAAO,EAAC,WAAW,EAAC,2BAAwB;
|
|
1
|
+
{"version":3,"file":"WindowWidthContext.js","sourceRoot":"../../../../src","sources":["context/windowWidthContext/WindowWidthContext.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,QAAQ,2BAAwB;AAEvC,OAAO,EAAC,WAAW,EAAC,2BAAwB;AAC5C,OAAO,EAAC,aAAa,EAAC,kCAAyB;AAE/C,MAAM,qBAAqB,GAAG,WAAW,CAAC,EAAE,CAAC;AAC7C,MAAM,oBAAoB,GAAG,WAAW,CAAC,EAAE,CAAC;AAC5C,MAAM,mBAAmB,GAAG,GAAG,CAAC;AAEhC,MAAM,CAAC,MAAM,kBAAkB,GAAG,KAAK,CAAC,aAAa,CAAS,qBAAqB,CAAC,CAAC;AAErF,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,EAAC,QAAQ,EAA0B,EAAE,EAAE;IACvE,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;IACjD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAChD,QAAQ,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,qBAAqB,CAC1D,CAAC;IAEF,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,MAAM,YAAY,GAAG,QAAQ,CACzB,GAAG,EAAE;YACD,cAAc,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;QACtC,CAAC,EACD,mBAAmB,EACnB,EAAC,OAAO,EAAE,IAAI,EAAC,CAClB,CAAC;QAEF,YAAY,EAAE,CAAC;QAEf,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC;QAEjE,6CAA6C;QAC7C,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;IACpE,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACH,KAAC,kBAAkB,CAAC,QAAQ,IAAC,KAAK,EAAE,WAAW,YAAG,QAAQ,GAA+B,CAC5F,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,kBAAkB,CAAC,CAAC","sourcesContent":["import * as React from 'react';\n\nimport throttle from 'lodash/throttle';\n\nimport {BREAKPOINTS} from '../../constants';\nimport {MobileContext} from '../mobileContext';\n\nconst DEFAULT_DESKTOP_WIDTH = BREAKPOINTS.xl;\nconst DEFAULT_MOBILE_WIDTH = BREAKPOINTS.sm;\nconst UPDATE_FREQUENCY_MS = 100;\n\nexport const WindowWidthContext = React.createContext<number>(DEFAULT_DESKTOP_WIDTH);\n\nexport const WindowWidthProvider = ({children}: React.PropsWithChildren) => {\n const isMobile = React.useContext(MobileContext);\n const [windowWidth, setWindowWidth] = React.useState(\n isMobile ? DEFAULT_MOBILE_WIDTH : DEFAULT_DESKTOP_WIDTH,\n );\n\n React.useEffect(() => {\n const handleResize = throttle(\n () => {\n setWindowWidth(window.innerWidth);\n },\n UPDATE_FREQUENCY_MS,\n {leading: true},\n );\n\n handleResize();\n\n window.addEventListener('resize', handleResize, {passive: true});\n\n // eslint-disable-next-line consistent-return\n return () => window.removeEventListener('resize', handleResize);\n }, []);\n\n return (\n <WindowWidthContext.Provider value={windowWidth}>{children}</WindowWidthContext.Provider>\n );\n};\n\nexport const useWindowWidth = () => React.useContext(WindowWidthContext);\n"]}
|
|
@@ -17,5 +17,5 @@ const defaultTitleArgs = {
|
|
|
17
17
|
subtitle: yfmTransform(titleData.default.subtitle),
|
|
18
18
|
};
|
|
19
19
|
const transformContentList = (item) => blockTransform(item);
|
|
20
|
-
export const Default = () => (_jsxs("div", { style: { padding: '40px', display: 'flex', flexDirection: 'column', gap: '48px' }, children: [_jsxs("section", { children: [_jsx("strong", { children: "Title \u2014 default" }), _jsx(Title, { ...defaultTitleArgs })] }), _jsxs("section", { children: [_jsx("strong", { children: "Title \u2014 sizes (l \u2192 xs)" }), _jsx("div", { children: Object.entries(titleData.sizes).map(([size, props]) => (_jsx("div", { style: { paddingBottom: '32px' }, children: _jsx(Title, { ...defaultTitleArgs, title: props }) }, size))) })] }), _jsxs("section", { children: [_jsx("strong", { children: "Title \u2014 with link" }), _jsx(Title, { ...defaultTitleArgs, title: titleData.titleLink.title })] }), _jsxs("section", { children: [_jsx("strong", { children: "YFMWrapper" }), _jsx(YFMWrapper, { ...yfmWrapperData.default.content })] }), _jsxs("section", { children: [_jsx("strong", { children: "Author \u2014 column" }), _jsx(Author, { ...authorData.default
|
|
20
|
+
export const Default = () => (_jsxs("div", { style: { padding: '40px', display: 'flex', flexDirection: 'column', gap: '48px' }, children: [_jsxs("section", { children: [_jsx("strong", { children: "Title \u2014 default" }), _jsx(Title, { ...defaultTitleArgs })] }), _jsxs("section", { children: [_jsx("strong", { children: "Title \u2014 sizes (l \u2192 xs)" }), _jsx("div", { children: Object.entries(titleData.sizes).map(([size, props]) => (_jsx("div", { style: { paddingBottom: '32px' }, children: _jsx(Title, { ...defaultTitleArgs, title: props }) }, size))) })] }), _jsxs("section", { children: [_jsx("strong", { children: "Title \u2014 with link" }), _jsx(Title, { ...defaultTitleArgs, title: titleData.titleLink.title })] }), _jsxs("section", { children: [_jsx("strong", { children: "YFMWrapper" }), _jsx(YFMWrapper, { ...yfmWrapperData.default.content })] }), _jsxs("section", { children: [_jsx("strong", { children: "Author \u2014 column" }), _jsx(Author, { ...authorData.default })] }), _jsxs("section", { children: [_jsx("strong", { children: "Author \u2014 line" }), _jsx(Author, { ...authorData.default, type: AuthorType.Line })] }), _jsxs("section", { children: [_jsx("strong", { children: "ContentList \u2014 default" }), _jsx(ContentList, { ...transformContentList(contentListData.default) })] }), _jsxs("section", { children: [_jsx("strong", { children: "ContentList \u2014 without icon" }), _jsx(ContentList, { ...transformContentList(contentListData.withoutIcon) })] }), _jsxs("section", { children: [_jsx("strong", { children: "ContentList \u2014 sizes (s / m / l)" }), _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '16px' }, children: contentListData.sizes.map((item, index) => (_jsx(ContentList, { ...transformContentList(item) }, index))) })] }), _jsxs("section", { children: [_jsx("strong", { children: "MetaInfo" }), _jsx(MetaInfo, { ...metaInfoData.default.content })] })] }));
|
|
21
21
|
//# sourceMappingURL=ComponentsText.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComponentsText.stories.js","sourceRoot":"../../../src","sources":["demo/ComponentsText.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAC,cAAc,EAAE,YAAY,EAAC,kCAA+B;AACpE,OAAO,MAAM,uCAAoC;AACjD,OAAO,WAAW,iDAA8C;AAChE,OAAO,QAAQ,2CAAwC;AACvD,OAAO,KAAK,qCAAkC;AAC9C,OAAO,UAAU,+CAA4C;AAC7D,OAAO,
|
|
1
|
+
{"version":3,"file":"ComponentsText.stories.js","sourceRoot":"../../../src","sources":["demo/ComponentsText.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAC,cAAc,EAAE,YAAY,EAAC,kCAA+B;AACpE,OAAO,MAAM,uCAAoC;AACjD,OAAO,WAAW,iDAA8C;AAChE,OAAO,QAAQ,2CAAwC;AACvD,OAAO,KAAK,qCAAkC;AAC9C,OAAO,UAAU,+CAA4C;AAC7D,OAAO,EAAc,UAAU,EAAgD,2BAAkB;AAEjG,OAAO,UAAU,mDAAmD;AACpE,OAAO,eAAe,wDAAwD;AAC9E,OAAO,YAAY,qDAAqD;AACxE,OAAO,SAAS,kDAAkD;AAClE,OAAO,cAAc,uDAAuD;AAE5E,eAAe,EAAC,KAAK,EAAE,kCAAkC,EAAS,CAAC;AAEnE,MAAM,gBAAgB,GAAG;IACrB,KAAK,EAAE,SAAS,CAAC,OAAO,CAAC,KAAuB;IAChD,QAAQ,EAAE,YAAY,CAAC,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC;CACrD,CAAC;AAEF,MAAM,oBAAoB,GAAG,CAAC,IAAa,EAAE,EAAE,CAC3C,cAAc,CAAC,IAA8B,CAAqB,CAAC;AAEvE,MAAM,CAAC,MAAM,OAAO,GAAY,GAAG,EAAE,CAAC,CAClC,eAAK,KAAK,EAAE,EAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAC,aAChF,8BACI,oDAAgC,EAChC,KAAC,KAAK,OAAK,gBAAgB,GAAI,IACzB,EACV,8BACI,gEAAuC,EACvC,wBACK,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CACpD,cAAgB,KAAK,EAAE,EAAC,aAAa,EAAE,MAAM,EAAC,YAC1C,KAAC,KAAK,OAAK,gBAAgB,EAAE,KAAK,EAAE,KAAuB,GAAI,IADzD,IAAI,CAER,CACT,CAAC,GACA,IACA,EACV,8BACI,sDAAkC,EAClC,KAAC,KAAK,OAAK,gBAAgB,EAAE,KAAK,EAAE,SAAS,CAAC,SAAS,CAAC,KAAuB,GAAI,IAC7E,EACV,8BACI,0CAA2B,EAC3B,KAAC,UAAU,OAAK,cAAc,CAAC,OAAO,CAAC,OAAO,GAAI,IAC5C,EACV,8BACI,oDAAgC,EAChC,KAAC,MAAM,OAAM,UAAU,CAAC,OAAuB,GAAI,IAC7C,EACV,8BACI,kDAA8B,EAC9B,KAAC,MAAM,OAAM,UAAU,CAAC,OAAuB,EAAE,IAAI,EAAE,UAAU,CAAC,IAAI,GAAI,IACpE,EACV,8BACI,0DAAsC,EACtC,KAAC,WAAW,OAAK,oBAAoB,CAAC,eAAe,CAAC,OAAO,CAAC,GAAI,IAC5D,EACV,8BACI,+DAA2C,EAC3C,KAAC,WAAW,OAAK,oBAAoB,CAAC,eAAe,CAAC,WAAW,CAAC,GAAI,IAChE,EACV,8BACI,oEAAgD,EAChD,cAAK,KAAK,EAAE,EAAC,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAC,YAC9D,eAAe,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CACxC,KAAC,WAAW,OAAiB,oBAAoB,CAAC,IAAI,CAAC,IAArC,KAAK,CAAoC,CAC9D,CAAC,GACA,IACA,EACV,8BACI,wCAAyB,EACzB,KAAC,QAAQ,OAAK,YAAY,CAAC,OAAO,CAAC,OAAO,GAAI,IACxC,IACR,CACT,CAAC","sourcesContent":["import {Meta, StoryFn} from '@storybook/react';\n\nimport {blockTransform, yfmTransform} from '../../.storybook/utils';\nimport Author from '../components/Author/Author';\nimport ContentList from '../components/ContentList/ContentList';\nimport MetaInfo from '../components/MetaInfo/MetaInfo';\nimport Title from '../components/Title/Title';\nimport YFMWrapper from '../components/YFMWrapper/YFMWrapper';\nimport {AuthorProps, AuthorType, ContentListProps, CustomBlock, TitleItemProps} from '../models';\n\nimport authorData from '../components/Author/__stories__/data.json';\nimport contentListData from '../components/ContentList/__stories__/data.json';\nimport metaInfoData from '../components/MetaInfo/__stories__/data.json';\nimport titleData from '../components/Title/__stories__/data.json';\nimport yfmWrapperData from '../components/YFMWrapper/__stories__/data.json';\n\nexport default {title: 'Lab/Tokenization/Components/Text'} as Meta;\n\nconst defaultTitleArgs = {\n title: titleData.default.title as TitleItemProps,\n subtitle: yfmTransform(titleData.default.subtitle),\n};\n\nconst transformContentList = (item: unknown) =>\n blockTransform(item as unknown as CustomBlock) as ContentListProps;\n\nexport const Default: StoryFn = () => (\n <div style={{padding: '40px', display: 'flex', flexDirection: 'column', gap: '48px'}}>\n <section>\n <strong>Title — default</strong>\n <Title {...defaultTitleArgs} />\n </section>\n <section>\n <strong>Title — sizes (l → xs)</strong>\n <div>\n {Object.entries(titleData.sizes).map(([size, props]) => (\n <div key={size} style={{paddingBottom: '32px'}}>\n <Title {...defaultTitleArgs} title={props as TitleItemProps} />\n </div>\n ))}\n </div>\n </section>\n <section>\n <strong>Title — with link</strong>\n <Title {...defaultTitleArgs} title={titleData.titleLink.title as TitleItemProps} />\n </section>\n <section>\n <strong>YFMWrapper</strong>\n <YFMWrapper {...yfmWrapperData.default.content} />\n </section>\n <section>\n <strong>Author — column</strong>\n <Author {...(authorData.default as AuthorProps)} />\n </section>\n <section>\n <strong>Author — line</strong>\n <Author {...(authorData.default as AuthorProps)} type={AuthorType.Line} />\n </section>\n <section>\n <strong>ContentList — default</strong>\n <ContentList {...transformContentList(contentListData.default)} />\n </section>\n <section>\n <strong>ContentList — without icon</strong>\n <ContentList {...transformContentList(contentListData.withoutIcon)} />\n </section>\n <section>\n <strong>ContentList — sizes (s / m / l)</strong>\n <div style={{display: 'flex', flexDirection: 'column', gap: '16px'}}>\n {contentListData.sizes.map((item, index) => (\n <ContentList key={index} {...transformContentList(item)} />\n ))}\n </div>\n </section>\n <section>\n <strong>MetaInfo</strong>\n <MetaInfo {...metaInfoData.default.content} />\n </section>\n </div>\n);\n"]}
|