sag_components 2.0.0-beta27 → 2.0.0-beta29

package/dist/stories/Input.stories.js

@@ -0,0 +1,422 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SmallWithInitValue = exports.SmallTwoIcons = exports.SmallRightIcon = exports.SmallLeftIcon = exports.Small = exports.Required = exports.Password = exports.MediumWithInitValue = exports.MediumRightIcon = exports.MediumLeftIcon = exports.MediumLeftAndRightIcon = exports.Medium = exports.ErrorMessage = exports.Disabled = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Input = _interopRequireDefault(require("./components/Input"));
+/* eslint-disable import/no-extraneous-dependencies */
+// Input.stories.js
+
+// Update the path based on your actual file structure
+
+const iconsList = ['none', 'Bell', 'Document', 'Download', 'Exit', 'Eye', 'Filter', 'Fly', 'Maintenance', 'Options', 'Search'];
+var _default = exports.default = {
+  title: 'SAG/Input',
+  component: _Input.default,
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      name: 'label',
+      type: {
+        name: 'string'
+      },
+      description: 'Label for the select',
+      defaultValue: {
+        summary: 'Dropdown Label'
+      },
+      control: {
+        type: 'text'
+      }
+    },
+    size: {
+      name: 'size',
+      options: ['small', 'medium'],
+      control: {
+        type: 'select'
+      },
+      description: 'size of the input field, small or medium are supported'
+    },
+    selectedValue: {
+      name: 'selectedValue',
+      type: {
+        name: 'string'
+      },
+      description: 'init or reset input value with this selected value',
+      defaultValue: {
+        summary: 'Dropdown Label'
+      },
+      control: {
+        type: 'text'
+      }
+    },
+    onChange: {
+      action: 'onChange',
+      description: 'Callback function for input change'
+    },
+    required: {
+      name: 'required',
+      type: {
+        name: 'boolean'
+      },
+      description: 'Indicates if the select is required',
+      defaultValue: {
+        summary: false
+      },
+      control: {
+        type: 'boolean'
+      }
+    },
+    labelColor: {
+      name: 'labelColor',
+      description: 'Indicates for label font color',
+      control: {
+        type: 'color',
+        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#1B30AA']
+      }
+    },
+    disabled: {
+      name: 'disabled',
+      type: {
+        name: 'boolean'
+      },
+      description: 'Indicates if the select is disabled',
+      defaultValue: {
+        summary: false
+      },
+      control: {
+        type: 'boolean'
+      }
+    },
+    width: {
+      name: 'width',
+      type: {
+        name: 'string'
+      },
+      description: 'Width of the select',
+      defaultValue: {
+        summary: '200px'
+      },
+      control: {
+        type: 'text'
+      }
+    },
+    error: {
+      name: 'error',
+      type: {
+        name: 'boolean'
+      },
+      description: 'Indicates if there is an error',
+      defaultValue: {
+        summary: false
+      },
+      control: {
+        type: 'boolean'
+      }
+    },
+    errorMessage: {
+      name: 'errorMessage',
+      type: {
+        name: 'string'
+      },
+      description: 'Error message to display',
+      defaultValue: {
+        summary: ''
+      },
+      control: {
+        type: 'text'
+      }
+    },
+    placeHolder: {
+      name: 'placeHolder',
+      type: {
+        name: 'string'
+      },
+      description: 'Error message to display',
+      defaultValue: {
+        summary: ''
+      },
+      control: {
+        type: 'text'
+      }
+    },
+    password: {
+      name: 'password',
+      type: {
+        name: 'boolean'
+      },
+      description: 'Indicates if the input is a password field',
+      defaultValue: {
+        summary: false
+      },
+      control: {
+        type: 'boolean'
+      }
+    },
+    leftIcon: {
+      name: 'leftIcon',
+      options: iconsList,
+      control: {
+        type: 'select'
+      },
+      description: 'Choose an icon to apear on the button left side'
+    },
+    rightIcon: {
+      name: 'rightIcon',
+      options: iconsList,
+      control: {
+        type: 'select'
+      },
+      description: 'Choose an icon to apear on the button right side'
+    },
+    leftIconOnClick: {
+      action: 'leftIconOnClick',
+      description: 'Callback function for left Icon OnClick'
+    },
+    rightIconOnClick: {
+      action: 'rightIconOnClick',
+      description: 'Callback function for right Icon OnClick'
+    },
+    onBlur: {
+      action: 'onBlur',
+      description: 'Callback function for onBlur'
+    }
+  }
+}; // Create a group of stories for Input component
+const Template = args => /*#__PURE__*/_react.default.createElement(_Input.default, args);
+const Small = exports.Small = Template.bind({});
+Small.args = {
+  placeHolder: 'Type...',
+  label: 'Event Name',
+  labelEmptyValue: 'All Event Names',
+  size: 'small',
+  labelColor: '#066768',
+  required: false,
+  width: '300px',
+  disabled: false,
+  error: false,
+  errorMessage: '',
+  leftIcon: '',
+  rightIcon: ''
+};
+const SmallLeftIcon = exports.SmallLeftIcon = Template.bind({});
+SmallLeftIcon.args = {
+  placeHolder: 'Type...',
+  label: 'Event Name',
+  labelEmptyValue: 'All Event Names',
+  size: 'small',
+  labelColor: '#066768',
+  required: false,
+  width: '300px',
+  disabled: false,
+  error: false,
+  errorMessage: '',
+  leftIcon: 'Filter',
+  rightIcon: ''
+};
+const SmallRightIcon = exports.SmallRightIcon = Template.bind({});
+SmallRightIcon.args = {
+  placeHolder: 'Type...',
+  label: 'Event Name',
+  labelEmptyValue: 'All Event Names',
+  size: 'small',
+  labelColor: '#066768',
+  required: false,
+  width: '300px',
+  disabled: false,
+  error: false,
+  errorMessage: '',
+  leftIcon: '',
+  rightIcon: 'Exit'
+};
+const SmallTwoIcons = exports.SmallTwoIcons = Template.bind({});
+SmallTwoIcons.args = {
+  placeHolder: 'Type...',
+  label: 'Event Name',
+  labelEmptyValue: 'All Event Names',
+  size: 'small',
+  labelColor: '#066768',
+  required: false,
+  width: '300px',
+  disabled: false,
+  error: false,
+  errorMessage: '',
+  leftIcon: 'Filter',
+  rightIcon: 'Exit'
+  // leftIconOnClick: () => console.log('Left Icon Clicked'),
+};
+
+// Story for the SmallWithInitValue state
+const SmallWithInitValue = exports.SmallWithInitValue = Template.bind({});
+SmallWithInitValue.args = {
+  placeHolder: 'Type...',
+  label: 'Event Name',
+  labelEmptyValue: 'All Event Names',
+  selectedValue: 'Small selling event',
+  size: 'small',
+  labelColor: '#066768',
+  required: false,
+  width: '300px',
+  disabled: false,
+  error: false,
+  errorMessage: '',
+  leftIcon: '',
+  rightIcon: ''
+};
+
+// Story for the Medium state
+const Medium = exports.Medium = Template.bind({});
+Medium.args = {
+  placeHolder: 'Type...',
+  label: 'Event Name',
+  labelEmptyValue: 'All Event Names',
+  size: 'medium',
+  labelColor: '#066768',
+  required: false,
+  width: '300px',
+  disabled: false,
+  error: false,
+  errorMessage: '',
+  leftIcon: '',
+  rightIcon: ''
+};
+
+// Story for the MediumWithInitValue state
+const MediumWithInitValue = exports.MediumWithInitValue = Template.bind({});
+MediumWithInitValue.args = {
+  placeHolder: 'Type...',
+  label: 'Event Name',
+  labelEmptyValue: 'All Event Names',
+  selectedValue: 'Large selling event',
+  size: 'medium',
+  labelColor: '#066768',
+  required: false,
+  width: '300px',
+  disabled: false,
+  error: false,
+  errorMessage: '',
+  leftIcon: '',
+  rightIcon: ''
+};
+
+// Story for the Required state
+const Required = exports.Required = Template.bind({});
+Required.args = {
+  placeHolder: 'Type...',
+  label: 'Event Name',
+  labelEmptyValue: 'All Event Names',
+  size: 'medium',
+  labelColor: '#066768',
+  required: true,
+  width: '300px',
+  disabled: false,
+  error: false,
+  errorMessage: '',
+  leftIcon: '',
+  rightIcon: ''
+};
+
+// Story for the Disabled state
+const Disabled = exports.Disabled = Template.bind({});
+Disabled.args = {
+  placeHolder: 'Type...',
+  label: 'Event Name',
+  labelEmptyValue: 'All Event Names',
+  size: 'medium',
+  labelColor: '#066768',
+  required: false,
+  width: '300px',
+  disabled: true,
+  error: false,
+  errorMessage: '',
+  leftIcon: '',
+  rightIcon: ''
+};
+
+// Story for the Left icon state
+const MediumLeftIcon = exports.MediumLeftIcon = Template.bind({});
+MediumLeftIcon.args = {
+  placeHolder: 'Type...',
+  label: 'Event Name',
+  labelEmptyValue: 'All Event Names',
+  size: 'medium',
+  labelColor: '#066768',
+  required: false,
+  width: '300px',
+  disabled: false,
+  error: false,
+  errorMessage: '',
+  leftIcon: 'Search',
+  rightIcon: ''
+};
+
+// Story for the Right icon state
+const MediumRightIcon = exports.MediumRightIcon = Template.bind({});
+MediumRightIcon.args = {
+  placeHolder: 'Type...',
+  label: 'Event Name',
+  labelEmptyValue: 'All Event Names',
+  size: 'medium',
+  labelColor: '#066768',
+  required: false,
+  width: '300px',
+  disabled: false,
+  error: false,
+  errorMessage: '',
+  leftIcon: 'none',
+  rightIcon: 'Exit'
+};
+
+// Story for the Right icon state
+const MediumLeftAndRightIcon = exports.MediumLeftAndRightIcon = Template.bind({});
+MediumLeftAndRightIcon.args = {
+  placeHolder: 'Type...',
+  label: 'Event Name',
+  labelEmptyValue: 'All Event Names',
+  size: 'medium',
+  labelColor: '#066768',
+  required: false,
+  width: '300px',
+  disabled: false,
+  error: false,
+  errorMessage: '',
+  leftIcon: 'Search',
+  rightIcon: 'Exit'
+};
+
+// Story for the Error state
+const ErrorMessage = exports.ErrorMessage = Template.bind({});
+ErrorMessage.args = {
+  placeHolder: 'Type...',
+  label: 'Event Name',
+  labelEmptyValue: 'All Event Names',
+  size: 'medium',
+  labelColor: '#066768',
+  required: false,
+  width: '300px',
+  disabled: false,
+  error: true,
+  errorMessage: 'Error example: Story for the state with error message ...',
+  leftIcon: 'none',
+  rightIcon: 'none'
+};
+
+// Story for the Password state
+const Password = exports.Password = Template.bind({});
+Password.args = {
+  placeHolder: '',
+  label: 'Password',
+  labelEmptyValue: 'Enter password',
+  size: 'medium',
+  labelColor: '#066768',
+  required: false,
+  width: '300px',
+  disabled: false,
+  error: false,
+  errorMessage: '',
+  leftIcon: '',
+  rightIcon: '',
+  password: true
+};

package/dist/stories/InputOld.stories.js

@@ -0,0 +1,103 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _InputOld = _interopRequireDefault(require("./components/InputOld"));
+/* eslint-disable import/no-extraneous-dependencies */
+// Input.stories.js
+// Update the path based on your actual file structure
+var _default = exports.default = {
+  title: 'SAG/InputOld',
+  component: _InputOld.default,
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      name: 'label',
+      type: {
+        name: 'string'
+      },
+      description: 'Label for the input',
+      defaultValue: {
+        summary: 'Input Label'
+      },
+      control: {
+        type: 'text'
+      }
+    },
+    value: {
+      name: 'value',
+      type: {
+        name: 'string'
+      },
+      description: 'Value of the input',
+      defaultValue: {
+        summary: ''
+      },
+      control: {
+        type: 'text'
+      }
+    },
+    onChange: {
+      name: 'onChange',
+      type: {
+        name: 'function'
+      },
+      description: 'Callback function for input change',
+      defaultValue: {
+        summary: '() => {}'
+      },
+      control: {
+        type: null
+      }
+    },
+    borderRadius: {
+      name: 'borderRadius',
+      type: {
+        name: 'string'
+      },
+      description: 'Border radius of the input',
+      defaultValue: {
+        summary: ''
+      },
+      control: {
+        type: 'text'
+      }
+    },
+    required: {
+      name: 'required',
+      type: {
+        name: 'boolean'
+      },
+      description: 'Indicates if the input is required',
+      defaultValue: {
+        summary: false
+      },
+      control: {
+        type: 'boolean'
+      }
+    }
+  }
+}; // Create a group of stories for Input component
+const Template = args => /*#__PURE__*/_react.default.createElement(_InputOld.default, args);
+
+// Story for the default state
+const Default = exports.Default = Template.bind({});
+Default.args = {
+  label: 'Username',
+  borderRadius: '4px',
+  required: true,
+  width: '200px',
+  height: '40px',
+  placeholder: 'Enter your username',
+  disabled: false,
+  password: false,
+  error: false,
+  errorMessage: '',
+  type: 'text',
+  borderColor: '#000000',
+  textColor: '#000000'
+};