@vitus-labs/rocketstories 0.20.0 → 0.21.0-alpha.3
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/lib/analysis/vitus-labs-rocketstories.js.html +397 -1033
- package/lib/analysis/vitus-labs-rocketstories.module.js.html +397 -1033
- package/lib/analysis/vitus-labs-rocketstories.umd.js.html +397 -1033
- package/lib/index.d.ts +1 -1
- package/lib/types/controls/element.d.ts +1 -1
- package/lib/types/controls/text.d.ts +1 -1
- package/lib/types/rocketstories.d.ts +1 -1
- package/lib/types/utils/controls/constants.d.ts +1 -1
- package/lib/vitus-labs-rocketstories.js +47 -51
- package/lib/vitus-labs-rocketstories.js.map +1 -1
- package/lib/vitus-labs-rocketstories.module.js +47 -51
- package/lib/vitus-labs-rocketstories.module.js.map +1 -1
- package/lib/vitus-labs-rocketstories.umd.js +47 -51
- package/lib/vitus-labs-rocketstories.umd.js.map +1 -1
- package/package.json +10 -10
package/lib/index.d.ts
CHANGED
|
@@ -92,7 +92,7 @@ declare type CreateRocketStories<C extends RocketComponent = any> = (options: Pa
|
|
|
92
92
|
};
|
|
93
93
|
main: () => ReturnType<typeof mainStory>;
|
|
94
94
|
storyOptions: (options: Configuration['storyOptions']) => ReturnType<CreateRocketStories<C>>;
|
|
95
|
-
dimension: <A extends ExtractDimensions<C
|
|
95
|
+
dimension: <A extends ExtractDimensions<C>>(dimension: A, params?: Partial<{
|
|
96
96
|
ignore: any;
|
|
97
97
|
}>) => ReturnType<typeof makeDimensionStories>;
|
|
98
98
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
declare const _default: {
|
|
2
2
|
readonly tag: {
|
|
3
3
|
readonly type: "select";
|
|
4
|
-
readonly options: readonly ["a", "abbr", "address", "area", "article", "aside", "audio", "b", "base", "bdi", "bdo", "big", "blockquote", "body", "br", "button", "canvas", "caption", "cite", "code", "col", "colgroup", "data", "datalist", "dd", "del", "details", "dfn", "dialog", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "footer", "form", "h1", "h2", "h3", "h4", "h5", "h6", "head", "header", "hr", "html", "i", "iframe", "img", "input", "ins", "kbd", "label", "legend", "li", "link", "main", "map", "mark", "meta", "meter", "nav", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "picture", "pre", "progress", "q", "rp", "rt", "ruby", "s", "samp", "script", "section", "select", "small", "source", "span", "strong", "style", "sub", "summary", "sup", "svg", "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead", "time", "
|
|
4
|
+
readonly options: readonly ["a", "abbr", "address", "area", "article", "aside", "audio", "b", "base", "bdi", "bdo", "big", "blockquote", "body", "br", "button", "canvas", "caption", "cite", "code", "col", "colgroup", "data", "datalist", "dd", "del", "details", "dfn", "dialog", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "footer", "form", "h1", "h2", "h3", "h4", "h5", "h6", "head", "header", "hr", "html", "i", "iframe", "img", "input", "ins", "kbd", "label", "legend", "li", "link", "main", "map", "mark", "meta", "meter", "nav", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "picture", "pre", "progress", "q", "rp", "rt", "ruby", "s", "samp", "script", "section", "select", "small", "source", "span", "strong", "style", "sub", "summary", "sup", "svg", "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead", "time", "tr", "track", "u", "ul", "var", "video", "wbr"];
|
|
5
5
|
readonly group: "Element";
|
|
6
6
|
readonly valueType: "HTMLTag";
|
|
7
7
|
readonly description: "A prop which will change HTML tag of the element";
|
|
@@ -5,7 +5,7 @@ declare const _default: {
|
|
|
5
5
|
};
|
|
6
6
|
readonly tag: {
|
|
7
7
|
readonly type: "select";
|
|
8
|
-
readonly options: readonly ["a", "abbr", "address", "area", "article", "aside", "audio", "b", "base", "bdi", "bdo", "big", "blockquote", "body", "br", "button", "canvas", "caption", "cite", "code", "col", "colgroup", "data", "datalist", "dd", "del", "details", "dfn", "dialog", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "footer", "form", "h1", "h2", "h3", "h4", "h5", "h6", "head", "header", "hr", "html", "i", "iframe", "img", "input", "ins", "kbd", "label", "legend", "li", "link", "main", "map", "mark", "meta", "meter", "nav", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "picture", "pre", "progress", "q", "rp", "rt", "ruby", "s", "samp", "script", "section", "select", "small", "source", "span", "strong", "style", "sub", "summary", "sup", "svg", "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead", "time", "
|
|
8
|
+
readonly options: readonly ["a", "abbr", "address", "area", "article", "aside", "audio", "b", "base", "bdi", "bdo", "big", "blockquote", "body", "br", "button", "canvas", "caption", "cite", "code", "col", "colgroup", "data", "datalist", "dd", "del", "details", "dfn", "dialog", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "footer", "form", "h1", "h2", "h3", "h4", "h5", "h6", "head", "header", "hr", "html", "i", "iframe", "img", "input", "ins", "kbd", "label", "legend", "li", "link", "main", "map", "mark", "meta", "meter", "nav", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "picture", "pre", "progress", "q", "rp", "rt", "ruby", "s", "samp", "script", "section", "select", "small", "source", "span", "strong", "style", "sub", "summary", "sup", "svg", "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead", "time", "tr", "track", "u", "ul", "var", "video", "wbr"];
|
|
9
9
|
readonly group: "Text";
|
|
10
10
|
};
|
|
11
11
|
readonly children: {
|
|
@@ -22,7 +22,7 @@ declare type CreateRocketStories<C extends RocketComponent = any> = (options: Pa
|
|
|
22
22
|
};
|
|
23
23
|
main: () => ReturnType<typeof mainStory>;
|
|
24
24
|
storyOptions: (options: Configuration['storyOptions']) => ReturnType<CreateRocketStories<C>>;
|
|
25
|
-
dimension: <A extends ExtractDimensions<C
|
|
25
|
+
dimension: <A extends ExtractDimensions<C>>(dimension: A, params?: Partial<{
|
|
26
26
|
ignore: any;
|
|
27
27
|
}>) => ReturnType<typeof dimensionStory>;
|
|
28
28
|
};
|
|
@@ -3,7 +3,7 @@ export declare const CONTROL_MAP: {
|
|
|
3
3
|
readonly tag: "select";
|
|
4
4
|
};
|
|
5
5
|
export declare const CONTROL_OPTIONS: {
|
|
6
|
-
readonly tag: readonly ["a", "abbr", "address", "area", "article", "aside", "audio", "b", "base", "bdi", "bdo", "big", "blockquote", "body", "br", "button", "canvas", "caption", "cite", "code", "col", "colgroup", "data", "datalist", "dd", "del", "details", "dfn", "dialog", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "footer", "form", "h1", "h2", "h3", "h4", "h5", "h6", "head", "header", "hr", "html", "i", "iframe", "img", "input", "ins", "kbd", "label", "legend", "li", "link", "main", "map", "mark", "meta", "meter", "nav", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "picture", "pre", "progress", "q", "rp", "rt", "ruby", "s", "samp", "script", "section", "select", "small", "source", "span", "strong", "style", "sub", "summary", "sup", "svg", "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead", "time", "
|
|
6
|
+
readonly tag: readonly ["a", "abbr", "address", "area", "article", "aside", "audio", "b", "base", "bdi", "bdo", "big", "blockquote", "body", "br", "button", "canvas", "caption", "cite", "code", "col", "colgroup", "data", "datalist", "dd", "del", "details", "dfn", "dialog", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "footer", "form", "h1", "h2", "h3", "h4", "h5", "h6", "head", "header", "hr", "html", "i", "iframe", "img", "input", "ins", "kbd", "label", "legend", "li", "link", "main", "map", "mark", "meta", "meter", "nav", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "picture", "pre", "progress", "q", "rp", "rt", "ruby", "s", "samp", "script", "section", "select", "small", "source", "span", "strong", "style", "sub", "summary", "sup", "svg", "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead", "time", "tr", "track", "u", "ul", "var", "video", "wbr"];
|
|
7
7
|
};
|
|
8
8
|
export declare const CONTROL_TYPES_GROUPS: {
|
|
9
9
|
readonly text: "Simple Values";
|
|
@@ -54,7 +54,7 @@ component.displayName = '@vitus-labs/rocketstories/Empty';
|
|
|
54
54
|
/* eslint-disable no-underscore-dangle */
|
|
55
55
|
const getTheme = () => window.__VITUS_LABS_STORIES__.decorators.theme;
|
|
56
56
|
|
|
57
|
-
/* eslint-disable
|
|
57
|
+
/* eslint-disable no-param-reassign */
|
|
58
58
|
const parseProps = (props) => Object.entries(props).reduce((acc, [key, value]) => {
|
|
59
59
|
if (value === null)
|
|
60
60
|
return acc;
|
|
@@ -226,7 +226,6 @@ const CONTROL_TYPES = [
|
|
|
226
226
|
'inline-check',
|
|
227
227
|
];
|
|
228
228
|
|
|
229
|
-
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
230
229
|
const isValidControl = (value) => typeof value === 'object' &&
|
|
231
230
|
value !== null &&
|
|
232
231
|
CONTROL_TYPES.includes(value.type);
|
|
@@ -688,7 +687,6 @@ var text = {
|
|
|
688
687
|
},
|
|
689
688
|
};
|
|
690
689
|
|
|
691
|
-
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
692
690
|
const isColor = (value) => {
|
|
693
691
|
const s = new Option().style;
|
|
694
692
|
s.color = value;
|
|
@@ -765,6 +763,7 @@ const valuesToControls = ({ component, values, dimensionControls = {}, }) => {
|
|
|
765
763
|
};
|
|
766
764
|
};
|
|
767
765
|
|
|
766
|
+
/* eslint-disable @typescript-eslint/ban-ts-comment */
|
|
768
767
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
769
768
|
// @ts-ignore
|
|
770
769
|
const makeDimensionStories = ({ name, component: component$1, dimension, attrs = {}, storyOptions = {}, ignore,
|
|
@@ -814,53 +813,51 @@ const makeDimensionStories = ({ name, component: component$1, dimension, attrs =
|
|
|
814
813
|
// STORY COMPONENT
|
|
815
814
|
// ------------------------------------------------------
|
|
816
815
|
const WrapElement = core.isEmpty(storyOptions) ? React.Fragment : elements.Element;
|
|
817
|
-
const Enhanced = (props) => {
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
React__default["default"].createElement("
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
React__default["default"].createElement("
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
React__default["default"].createElement("
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
React__default["default"].createElement("
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
[dimension]: isMultiKey ? [item] : item,
|
|
861
|
-
})));
|
|
816
|
+
const Enhanced = (props) => (React__default["default"].createElement(WrapElement, { block: true, contentDirection: storyOptions.direction, contentAlignX: storyOptions.alignX, contentAlignY: storyOptions.alignY,
|
|
817
|
+
// @ts-ignore
|
|
818
|
+
style: { gap: storyOptions.gap } }, Object.keys(currentDimension).map((item) => {
|
|
819
|
+
const shouldBeIgnored = ignore.includes(item);
|
|
820
|
+
const key = `${dimension}-${item}`;
|
|
821
|
+
// do not render ignored dimension keys
|
|
822
|
+
if (shouldBeIgnored)
|
|
823
|
+
return null;
|
|
824
|
+
if (storyOptions.pseudo) {
|
|
825
|
+
return (React__default["default"].createElement(WrapElement, { key: key, "data-story": key, contentDirection: storyOptions.direction === 'rows' ? 'inline' : 'rows', contentAlignX: storyOptions.alignX, contentAlignY: storyOptions.alignY,
|
|
826
|
+
// @ts-ignore
|
|
827
|
+
style: { gap: storyOptions.gap / 2 } },
|
|
828
|
+
React__default["default"].createElement("div", null,
|
|
829
|
+
React__default["default"].createElement(elements.Text, { paragraph: true }, "Base"),
|
|
830
|
+
React.createElement(component$1, {
|
|
831
|
+
...props,
|
|
832
|
+
[dimension]: isMultiKey ? [item] : item,
|
|
833
|
+
})),
|
|
834
|
+
React__default["default"].createElement("div", null,
|
|
835
|
+
React__default["default"].createElement(elements.Text, { paragraph: true }, "Hover"),
|
|
836
|
+
React.createElement(component$1, {
|
|
837
|
+
...props,
|
|
838
|
+
[dimension]: isMultiKey ? [item] : item,
|
|
839
|
+
hover: true,
|
|
840
|
+
})),
|
|
841
|
+
React__default["default"].createElement("div", null,
|
|
842
|
+
React__default["default"].createElement(elements.Text, { paragraph: true }, "Pressed"),
|
|
843
|
+
React.createElement(component$1, {
|
|
844
|
+
...props,
|
|
845
|
+
[dimension]: isMultiKey ? [item] : item,
|
|
846
|
+
pressed: true,
|
|
847
|
+
})),
|
|
848
|
+
React__default["default"].createElement("div", null,
|
|
849
|
+
React__default["default"].createElement(elements.Text, { paragraph: true }, "Active"),
|
|
850
|
+
React.createElement(component$1, {
|
|
851
|
+
...props,
|
|
852
|
+
[dimension]: isMultiKey ? [item] : item,
|
|
853
|
+
active: true,
|
|
854
|
+
}))));
|
|
855
|
+
}
|
|
856
|
+
return (React__default["default"].createElement(WrapElement, { key: key, "data-story": `${dimension}-${item}`, ...storyOptions, contentDirection: "rows" }, React.createElement(component$1, {
|
|
857
|
+
...props,
|
|
858
|
+
[dimension]: isMultiKey ? [item] : item,
|
|
862
859
|
})));
|
|
863
|
-
};
|
|
860
|
+
})));
|
|
864
861
|
Enhanced.args = args;
|
|
865
862
|
Enhanced.argTypes = {
|
|
866
863
|
...storybookControls,
|
|
@@ -950,7 +947,6 @@ const mainStory = ({ name, component, attrs }) => {
|
|
|
950
947
|
return Enhanced;
|
|
951
948
|
};
|
|
952
949
|
|
|
953
|
-
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
954
950
|
const story = ({ component, attrs }) => {
|
|
955
951
|
const definedControls = filterControls(attrs);
|
|
956
952
|
const values = filterValues(attrs);
|
|
@@ -1040,7 +1036,7 @@ const createRocketstories = (options, defaultOptions) => {
|
|
|
1040
1036
|
}),
|
|
1041
1037
|
// generate main story
|
|
1042
1038
|
main: () => mainStory(result),
|
|
1043
|
-
//define storyOptions
|
|
1039
|
+
// define storyOptions
|
|
1044
1040
|
storyOptions: (storyOptions) => createRocketstories({ storyOptions }, result),
|
|
1045
1041
|
// generate stories of defined dimension
|
|
1046
1042
|
dimension: (dimension, params = {}) => {
|