Merge pull request #63 from flotiq/feature/25182

update dependencies, drop defaultProps, switch to storybook 8

.eslintrc.js

@@ -18,7 +18,10 @@ module.exports = {
         /* This rule will warn when it encounters a reference to an identifier that has not yet been declared. */
         'no-use-before-define': ['error', { variables: false }],
         /* This rule enforces consistent line breaks inside braces of object literals or destructuring assignments. */
-        'object-curly-newline': ['error', { ImportDeclaration: 'never' }],
+        'object-curly-newline': ['error', {
+            ImportDeclaration: { multiline: true, consistent: true },
+            ObjectPattern: { multiline: true, consistent: true },
+        }],
         /* Enforce consistent usage of destructuring assignment of props, state, and context */
         'react/destructuring-assignment': 0,
         /* Prevent missing props validation in a React component definition */
@@ -54,5 +57,7 @@ module.exports = {
         'import/prefer-default-export': 0,
         'react/no-danger': 0,
         'import/no-extraneous-dependencies': 0,
+        'comma-dangle': ['error', 'always-multiline'],
+        'react/jsx-one-expression-per-line': 0,
     },
 };

.storybook/main.js

@@ -1,19 +1,22 @@
 module.exports = {
-  "stories": [
-    "../src/**/*.stories.mdx",
-    "../src/**/*.stories.@(js|jsx|ts|tsx)"
-  ],
+  "stories": ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+
   "staticDirs": [
       "./images",
       "../src/stories/assets"
   ],
+
   "addons": [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/preset-create-react-app"
   ],
-  "framework": "@storybook/react",
+
+  "framework": "@storybook/react-webpack5",
+
   "core": {
     "builder": "webpack5"
-  }
+  },
+
+  docs: {}
 }

.storybook/manager.js

@@ -1,4 +1,4 @@
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/manager-api';
 import flotiqTheme from './flotiqTheme';
 
 addons.setConfig({

.storybook/preview.js

@@ -1,11 +1,11 @@
 import '../src/index.css';
 
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
   controls: {
     matchers: {
       color: /(background|color)$/i,
       date: /Date$/,
     },
   },
 }
+export const tags = ['autodocs'];

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2022 Flotiq
+Copyright (c) 2022 onward Flotiq
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -13,7 +13,7 @@ In the project directory, you can run:
 
 To install all dependencies. Please DO NOT use npm for that.
 
-### `yarn storybook`
+### `yarn dev`
 
 To start storybook server. It will be available on [http://localhost:6006/](http://localhost:6006/)
 
@@ -48,7 +48,7 @@ To include this library in your own project you should follow these steps.
 
 Add Flotiq Components module
 ```
-npm install flotiq-components-react
+yarn add flotiq-components-react
 ```
 
 ### 2a. Include component styles (Projects using Tailwind)

dist/components/Announcement/Announcement.js

@@ -3,23 +3,32 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.defaults = exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _rounded = require("../../defaultProps/rounded");
 var _background = require("../../defaultProps/background");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-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); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const defaults = exports.defaults = {
+  variant: _background.backgroundProps.defaultValue,
+  backgroundColor: null,
+  textAlignment: null,
+  textSize: 'base',
+  textColor: null,
+  rounded: 'lg',
+  additionalClasses: []
+};
 const Announcement = _ref => {
   let {
-    variant,
-    backgroundColor,
-    textAlignment,
-    textSize,
-    textColor,
+    variant = defaults.variant,
+    backgroundColor = defaults.backgroundColor,
+    textAlignment = defaults.textAlignment,
+    textSize = defaults.textSize,
+    textColor = defaults.textSize,
     content,
-    additionalClasses,
-    rounded,
+    additionalClasses = defaults.additionalClasses,
+    rounded = defaults.rounded,
     ...props
   } = _ref;
   const alignment = {
@@ -89,13 +98,4 @@ Announcement.propTypes = {
    */
   additionalClasses: _propTypes.default.arrayOf(_propTypes.default.string)
 };
-Announcement.defaultProps = {
-  variant: _background.backgroundProps.defaultValue,
-  backgroundColor: null,
-  textAlignment: null,
-  textSize: 'base',
-  textColor: null,
-  rounded: 'lg',
-  additionalClasses: []
-};
 var _default = exports.default = Announcement;

dist/components/Audio/Audio.js

@@ -3,20 +3,25 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.defaults = exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-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); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const defaults = exports.defaults = {
+  caption: null,
+  additionalClasses: []
+};
+
 /**
  * Component for audio files
  */
 const Audio = _ref => {
   let {
     url,
-    caption,
+    caption = defaults.caption,
     extension,
-    additionalClasses,
+    additionalClasses = defaults.additionalClasses,
     ...props
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
@@ -26,7 +31,7 @@ const Audio = _ref => {
     className: "w-full"
   }, props), /*#__PURE__*/_react.default.createElement("source", {
     src: url,
-    type: "audio/".concat(extension)
+    type: `audio/${extension}`
   }), "Your browser does not support the audio element."), caption && /*#__PURE__*/_react.default.createElement("p", {
     className: "pt-2 md:pt-5 opacity-70 italic"
   }, caption));
@@ -49,8 +54,4 @@ Audio.propTypes = {
    */
   additionalClasses: _propTypes.default.arrayOf(_propTypes.default.string)
 };
-Audio.defaultProps = {
-  caption: null,
-  additionalClasses: []
-};
 var _default = exports.default = Audio;

dist/components/Button/Button.js

@@ -3,24 +3,32 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.defaults = exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _rounded = require("../../defaultProps/rounded");
 var _background = require("../../defaultProps/background");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-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); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const defaults = exports.defaults = {
+  onClick: undefined,
+  size: 'md',
+  additionalClasses: [],
+  variant: _background.backgroundProps.defaultValue,
+  rounded: _rounded.roundedProps.defaultValue
+};
+
 /**
  * Primary UI component for user interaction
  */
 const Button = _ref => {
   let {
     label,
-    onClick,
-    variant,
-    size,
-    rounded,
-    additionalClasses,
+    onClick = defaults.onClick,
+    variant = defaults.variant,
+    size = defaults.size,
+    rounded = defaults.rounded,
+    additionalClasses = defaults.additionalClasses,
     ...props
   } = _ref;
   const sizeClass = {
@@ -55,8 +63,8 @@ Button.propTypes = {
    */
   size: _propTypes.default.oneOf(['sm', 'md', 'lg']),
   /**
-  * Button contents
-  */
+   * Button contents
+   */
   label: _propTypes.default.string.isRequired,
   /**
    * Is this the rounded button?
@@ -67,15 +75,8 @@ Button.propTypes = {
    */
   additionalClasses: _propTypes.default.arrayOf(_propTypes.default.string),
   /**
-  * Optional click handler
-  */
+   * Optional click handler
+   */
   onClick: _propTypes.default.func
 };
-Button.defaultProps = {
-  onClick: undefined,
-  size: 'md',
-  additionalClasses: [],
-  variant: _background.backgroundProps.defaultValue,
-  rounded: _rounded.roundedProps.defaultValue
-};
 var _default = exports.default = Button;

dist/components/Card/Card.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.defaults = exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _CardBody = _interopRequireDefault(require("./CardBody"));
@@ -12,37 +12,48 @@ var _CardImg = _interopRequireDefault(require("./CardImg"));
 var _CardText = _interopRequireDefault(require("./CardText"));
 var _Context = require("./Context");
 var _rounded = require("../../defaultProps/rounded");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-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); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const calcBasisClass = function (scale, isHorizontal) {
   let breakpoint = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'md';
   if (scale && isHorizontal) {
-    return "".concat(breakpoint, ":basis-").concat(scale);
+    return `${breakpoint}:basis-${scale}`;
   }
   return '';
 };
+const defaults = exports.defaults = {
+  rounded: 'lg',
+  bordered: true,
+  horizontal: false,
+  additionalClasses: [],
+  proportionsForHorizontal: {
+    body: '1/2',
+    img: '1/2',
+    breakpoint: 'md'
+  }
+};
 
 /**
  * Complex component for displaying card like elements
  */
 const Card = _ref => {
   let {
     children,
-    rounded,
-    bordered,
-    horizontal,
-    proportionsForHorizontal,
-    additionalClasses,
+    rounded = defaults.rounded,
+    bordered = defaults.bordered,
+    horizontal = defaults.horizontal,
+    proportionsForHorizontal = defaults.proportionsForHorizontal,
+    additionalClasses = defaults.additionalClasses,
     ...props
   } = _ref;
   const borderedClass = bordered ? 'border border-gray-200' : '';
   const directionClasses = horizontal ? 'flex flex-wrap justify-between align-start' : 'flex-none';
   const context = (0, _react.useMemo)(() => ({
     horizontal,
-    basisClassImage: calcBasisClass(proportionsForHorizontal === null || proportionsForHorizontal === void 0 ? void 0 : proportionsForHorizontal.img, horizontal, proportionsForHorizontal === null || proportionsForHorizontal === void 0 ? void 0 : proportionsForHorizontal.breakpoint),
-    basisClassBody: calcBasisClass(proportionsForHorizontal === null || proportionsForHorizontal === void 0 ? void 0 : proportionsForHorizontal.body, horizontal, proportionsForHorizontal === null || proportionsForHorizontal === void 0 ? void 0 : proportionsForHorizontal.breakpoint)
+    basisClassImage: calcBasisClass(proportionsForHorizontal?.img, horizontal, proportionsForHorizontal?.breakpoint),
+    basisClassBody: calcBasisClass(proportionsForHorizontal?.body, horizontal, proportionsForHorizontal?.breakpoint)
   }), [horizontal, proportionsForHorizontal]);
   return /*#__PURE__*/_react.default.createElement(_Context.Context.Provider, {
     value: context
@@ -76,17 +87,6 @@ Card.propTypes = {
    */
   additionalClasses: _propTypes.default.arrayOf(_propTypes.default.string)
 };
-Card.defaultProps = {
-  rounded: 'lg',
-  bordered: true,
-  horizontal: false,
-  additionalClasses: [],
-  proportionsForHorizontal: {
-    body: '1/2',
-    img: '1/2',
-    breakpoint: 'md'
-  }
-};
 var _default = exports.default = Object.assign(Card, {
   Body: _CardBody.default,
   Title: _CardTitle.default,

dist/components/Card/CardBody.js

@@ -3,21 +3,25 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.defaults = exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Context = require("./Context");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-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); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const defaults = exports.defaults = {
+  additionalClasses: []
+};
+
 /**
  * Component for text body of card like component
  */
 const CardBody = _ref => {
   let {
     children,
-    additionalClasses = [],
+    additionalClasses = defaults.additionalClasses,
     ...props
   } = _ref;
   const context = (0, _react.useContext)(_Context.Context);
@@ -31,7 +35,4 @@ CardBody.propTypes = {
    */
   additionalClasses: _propTypes.default.arrayOf(_propTypes.default.string)
 };
-CardBody.defaultProps = {
-  additionalClasses: []
-};
 var _default = exports.default = CardBody;