kwikid-components-react/components/kwikui/loader/Loader.stories.js

KwikID's Component Library in React

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.Sizes = exports.Shapes = exports.Default = exports.CustomStyles = exports.Contained = void 0;
var _react = _interopRequireDefault(require("react"));
var _Loader = _interopRequireDefault(require("./Loader"));
var _Loader2 = require("./Loader.constants");
var _Loader3 = require("./Loader.defaults");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _objectDestructuringEmpty(t) { if (null == t) throw new TypeError("Cannot destructure " + t); }
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); }
/**
 * The Loader component indicates a loading state, providing visual feedback to users during
 * asynchronous operations such as data fetching or processing.
 *
 * ## Usage
 *
 * ```jsx
 * import { KwikUILoader } from 'react-kwikui';
 *
 * // Fullscreen variant with loading text
 * <KwikUILoader
 *   loading={true}
 *   loadingText="Fetching data..."
 *   variant="fullscreen"
 * />
 *
 * // Contained variant inside a parent component
 * <div style={{ position: 'relative', minHeight: '200px' }}>
 *   <KwikUILoader
 *     loading={true}
 *     variant="contained"
 *   />
 * </div>
 * ```
 */
var _default = exports.default = {
  title: "KwikUI/Feedback/Loader",
  component: _Loader.default,
  parameters: {
    componentSubtitle: "Visual indicator for loading states",
    docs: {
      description: {
        component: "The Loader component provides visual feedback to users during processes that take time, such as data fetching or form submission."
      }
    },
    a11y: {
      config: {
        rules: [{
          id: "aria-valid",
          enabled: true
        }]
      }
    }
  },
  argTypes: {
    variant: {
      control: "radio",
      options: _Loader2.KWIKUI_LOADER__VARIANT__OPTIONS,
      description: "The variant of the loader (fullscreen or contained)",
      table: {
        type: {
          summary: "string"
        },
        defaultValue: {
          summary: _Loader3.KWIKUI_LOADER__DEFAULTS.variant
        }
      }
    },
    shape: {
      control: "radio",
      options: _Loader2.KWIKUI_LOADER__SHAPE__OPTIONS,
      description: "The shape of the loader",
      table: {
        type: {
          summary: "string"
        },
        defaultValue: {
          summary: _Loader3.KWIKUI_LOADER__DEFAULTS.shape
        }
      }
    },
    size: {
      control: "radio",
      options: _Loader2.KWIKUI_LOADER__SIZE__OPTIONS,
      description: "The size of the loader",
      table: {
        type: {
          summary: "string"
        },
        defaultValue: {
          summary: _Loader3.KWIKUI_LOADER__DEFAULTS.size
        }
      }
    },
    loading: {
      control: "boolean",
      description: "Controls whether the loader is displayed",
      table: {
        type: {
          summary: "boolean"
        },
        defaultValue: {
          summary: _Loader3.KWIKUI_LOADER__DEFAULTS.loading
        }
      }
    },
    loadingText: {
      control: "text",
      description: "Text displayed alongside the loader",
      table: {
        type: {
          summary: "string"
        },
        defaultValue: {
          summary: _Loader3.KWIKUI_LOADER__DEFAULTS.loadingText
        }
      }
    },
    id: {
      control: "text",
      description: "The ID of the loader element",
      table: {
        type: {
          summary: "string"
        },
        defaultValue: {
          summary: _Loader3.KWIKUI_LOADER__DEFAULTS.id
        }
      }
    },
    customStyles: {
      control: "object",
      description: "Custom styles to apply to different parts of the loader",
      table: {
        type: {
          summary: "object"
        },
        defaultValue: {
          summary: "{ container: {}, wrapper: {}, animation: {}, text: {} }"
        }
      }
    }
  }
};
/**
 * Template for rendering the Loader component
 */
const Template = _ref => {
  let args = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
  return /*#__PURE__*/_react.default.createElement(_Loader.default, args);
};

/**
 * Default loader implementation
 */
const Default = exports.Default = Template.bind({});
Default.args = _objectSpread(_objectSpread({}, _Loader3.KWIKUI_LOADER__DEFAULTS), {}, {
  loading: true // Override default to show the loader in Storybook
});
Default.parameters = {
  docs: {
    description: {
      story: "Default loader with fullscreen variant and medium size."
    }
  }
};

/**
 * Contained loader example
 */
const Contained = () => {
  return /*#__PURE__*/_react.default.createElement("div", {
    style: {
      position: "relative",
      border: "1px dashed #ccc",
      padding: "20px",
      height: "200px"
    }
  }, /*#__PURE__*/_react.default.createElement("p", null, "Parent container content"), /*#__PURE__*/_react.default.createElement(_Loader.default, {
    loading: true,
    variant: "contained",
    loadingText: "Loading content..."
  }));
};
exports.Contained = Contained;
Contained.parameters = {
  docs: {
    description: {
      story: "Contained variant that overlays only its parent container instead of the entire screen."
    },
    controls: {
      disable: true
    }
  }
};

/**
 * Different loader sizes
 */
const Sizes = () => {
  return /*#__PURE__*/_react.default.createElement("div", {
    style: {
      display: "flex",
      flexDirection: "column",
      gap: "2rem"
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    style: {
      position: "relative",
      height: "80px",
      border: "1px dashed #ccc"
    }
  }, /*#__PURE__*/_react.default.createElement(_Loader.default, {
    loading: true,
    size: "xxs",
    variant: "contained",
    loadingText: "XXS"
  })), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      position: "relative",
      height: "80px",
      border: "1px dashed #ccc"
    }
  }, /*#__PURE__*/_react.default.createElement(_Loader.default, {
    loading: true,
    size: "xs",
    variant: "contained",
    loadingText: "XS"
  })), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      position: "relative",
      height: "80px",
      border: "1px dashed #ccc"
    }
  }, /*#__PURE__*/_react.default.createElement(_Loader.default, {
    loading: true,
    size: "s",
    variant: "contained",
    loadingText: "S"
  })), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      position: "relative",
      height: "80px",
      border: "1px dashed #ccc"
    }
  }, /*#__PURE__*/_react.default.createElement(_Loader.default, {
    loading: true,
    size: "m",
    variant: "contained",
    loadingText: "M"
  })), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      position: "relative",
      height: "100px",
      border: "1px dashed #ccc"
    }
  }, /*#__PURE__*/_react.default.createElement(_Loader.default, {
    loading: true,
    size: "l",
    variant: "contained",
    loadingText: "L"
  })), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      position: "relative",
      height: "120px",
      border: "1px dashed #ccc"
    }
  }, /*#__PURE__*/_react.default.createElement(_Loader.default, {
    loading: true,
    size: "xl",
    variant: "contained",
    loadingText: "XL"
  })), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      position: "relative",
      height: "150px",
      border: "1px dashed #ccc"
    }
  }, /*#__PURE__*/_react.default.createElement(_Loader.default, {
    loading: true,
    size: "xxl",
    variant: "contained",
    loadingText: "XXL"
  })));
};
exports.Sizes = Sizes;
Sizes.parameters = {
  docs: {
    description: {
      story: "Loaders are available in multiple sizes to fit different contexts in your UI."
    },
    controls: {
      disable: true
    }
  }
};

/**
 * Different loader shapes
 */
const Shapes = () => {
  return /*#__PURE__*/_react.default.createElement("div", {
    style: {
      display: "flex",
      flexDirection: "column",
      gap: "2rem"
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    style: {
      position: "relative",
      height: "100px",
      border: "1px dashed #ccc"
    }
  }, /*#__PURE__*/_react.default.createElement(_Loader.default, {
    loading: true,
    shape: "curved",
    variant: "contained",
    loadingText: "Curved"
  })), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      position: "relative",
      height: "100px",
      border: "1px dashed #ccc"
    }
  }, /*#__PURE__*/_react.default.createElement(_Loader.default, {
    loading: true,
    shape: "rectangle",
    variant: "contained",
    loadingText: "Rectangle"
  })), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      position: "relative",
      height: "100px",
      border: "1px dashed #ccc"
    }
  }, /*#__PURE__*/_react.default.createElement(_Loader.default, {
    loading: true,
    shape: "rounded",
    variant: "contained",
    loadingText: "Rounded"
  })));
};
exports.Shapes = Shapes;
Shapes.parameters = {
  docs: {
    description: {
      story: "Loaders can have different shapes to match your UI design language."
    },
    controls: {
      disable: true
    }
  }
};

/**
 * Custom styled loader
 */
const CustomStyles = exports.CustomStyles = Template.bind({});
CustomStyles.args = _objectSpread(_objectSpread({}, _Loader3.KWIKUI_LOADER__DEFAULTS), {}, {
  loading: true,
  loadingText: "Custom Styled Loader",
  variant: "contained",
  customStyles: {
    container: {
      backgroundColor: "rgba(25, 118, 210, 0.1)"
    },
    wrapper: {
      padding: "20px"
    },
    animation: {
      borderColor: "#1976d2",
      borderTopColor: "transparent"
    },
    text: {
      color: "#1976d2",
      fontSize: "16px",
      fontWeight: "bold"
    }
  }
});
CustomStyles.parameters = {
  docs: {
    description: {
      story: "Loaders can be customized with custom styles for the container, wrapper, animation, and text elements."
    }
  }
};