@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/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>, B = keyof C['$$rocketstyle'][A]>(dimension: A, params?: Partial<{
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", "title", "tr", "track", "u", "ul", "var", "video", "wbr"];
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", "title", "tr", "track", "u", "ul", "var", "video", "wbr"];
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>, B = keyof C['$$rocketstyle'][A]>(dimension: A, params?: Partial<{
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", "title", "tr", "track", "u", "ul", "var", "video", "wbr"];
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 @typescript-eslint/no-explicit-any */
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
- return (React__default["default"].createElement(WrapElement, { block: true, contentDirection: storyOptions.direction, contentAlignX: storyOptions.alignX, contentAlignY: storyOptions.alignY,
819
- // @ts-ignore
820
- style: { gap: storyOptions.gap } }, Object.keys(currentDimension).map((item) => {
821
- const shouldBeIgnored = ignore.includes(item);
822
- const key = `${dimension}-${item}`;
823
- // do not render ignored dimension keys
824
- if (shouldBeIgnored)
825
- return null;
826
- if (storyOptions.pseudo) {
827
- return (React__default["default"].createElement(WrapElement, { key: key, "data-story": key, contentDirection: storyOptions.direction === 'rows' ? 'inline' : 'rows', contentAlignX: storyOptions.alignX, contentAlignY: storyOptions.alignY,
828
- // @ts-ignore
829
- style: { gap: storyOptions.gap / 2 } },
830
- React__default["default"].createElement("div", null,
831
- React__default["default"].createElement(elements.Text, { paragraph: true }, "Base"),
832
- React.createElement(component$1, {
833
- ...props,
834
- [dimension]: isMultiKey ? [item] : item,
835
- })),
836
- React__default["default"].createElement("div", null,
837
- React__default["default"].createElement(elements.Text, { paragraph: true }, "Hover"),
838
- React.createElement(component$1, {
839
- ...props,
840
- [dimension]: isMultiKey ? [item] : item,
841
- hover: true,
842
- })),
843
- React__default["default"].createElement("div", null,
844
- React__default["default"].createElement(elements.Text, { paragraph: true }, "Pressed"),
845
- React.createElement(component$1, {
846
- ...props,
847
- [dimension]: isMultiKey ? [item] : item,
848
- pressed: true,
849
- })),
850
- React__default["default"].createElement("div", null,
851
- React__default["default"].createElement(elements.Text, { paragraph: true }, "Active"),
852
- React.createElement(component$1, {
853
- ...props,
854
- [dimension]: isMultiKey ? [item] : item,
855
- active: true,
856
- }))));
857
- }
858
- return (React__default["default"].createElement(WrapElement, { key: key, "data-story": `${dimension}-${item}`, ...storyOptions, contentDirection: "rows" }, React.createElement(component$1, {
859
- ...props,
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 = {}) => {