@music-loopy/loops/lib/components/Input/index.stories.js

A React component library for Music Loopy Applications and websites

"use strict";

exports.__esModule = true;
exports["default"] = exports.WithVariant = exports.WithStartIcon = exports.WithEndIcon = exports.WithBothIcons = exports.Simple = exports.Custom = void 0;
var _index = _interopRequireDefault(require("./index"));
var _react = _interopRequireDefault(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _templateObject;
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); }
function _taggedTemplateLiteralLoose(e, t) { return t || (t = e.slice(0)), e.raw = t, e; }
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
var _default = exports["default"] = {
  title: 'Components/Input ',
  component: _index["default"],
  parameters: {
    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
    layout: 'centered'
  },
  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
  tags: ['autodocs'],
  // More on argTypes: https://storybook.js.org/docs/api/argtypes
  argTypes: {
    variant: {
      control: {
        type: 'select',
        options: ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark']
      }
    },
    startIcon: {
      control: {
        type: 'object',
        options: {
          name: 'string',
          size: 'string',
          fill: ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark']
        }
      }
    },
    endIcon: {
      control: {
        type: 'object',
        options: {
          name: 'string',
          size: 'string',
          fill: ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark']
        }
      }
    }
  },
  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
  args: {
    onClick: function onClick() {}
  }
};
var Container = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  width: 400px;\n"])));
var Simple = exports.Simple = function Simple(args) {
  return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(_index["default"], _extends({
    placeholder: "Enter text"
  }, args)));
};
var WithStartIcon = exports.WithStartIcon = function WithStartIcon(args) {
  return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(_index["default"], {
    placeholder: "Enter text",
    variant: args.variant || 'dark',
    startIcon: args.startIcon || {
      name: 'user'
    }
  }));
};
var WithEndIcon = exports.WithEndIcon = function WithEndIcon(args) {
  return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(_index["default"], {
    placeholder: "Enter text",
    variant: args.variant || 'dark',
    endIcon: args.endIcon || {
      name: 'lock'
    }
  }));
};
var WithBothIcons = exports.WithBothIcons = function WithBothIcons(args) {
  return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(_index["default"], {
    placeholder: "Enter text",
    variant: args.variant || 'dark',
    startIcon: args.startIcon || {
      name: 'user'
    },
    endIcon: args.endIcon || {
      name: 'lock'
    }
  }));
};
var WithVariant = exports.WithVariant = function WithVariant(args) {
  return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(_index["default"], {
    placeholder: "Enter text",
    variant: "danger",
    startIcon: args.startIcon || {
      name: 'user'
    }
  }));
};
var Custom = exports.Custom = function Custom(args) {
  return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(_index["default"], {
    placeholder: "Enter text",
    color: {
      background: 'darkGrey',
      text: 'light',
      border: 'primary',
      icon: 'light'
    },
    startIcon: args.startIcon || {
      name: 'user',
      fill: 'light'
    },
    endIcon: args.endIcon || {
      name: 'check',
      fill: 'primary',
      size: '2.5em'
    }
  }));
};