trepur_components 0.1.41 → 0.2.0

package/dist/utils/controls.js

@@ -0,0 +1,505 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.videoOptions = exports.starOptions = exports.navThirdRow = exports.navRowTwoOfTwo = exports.navRowOneOfTwo = exports.navMobileItems = exports.imageOptions = exports.iconOptions = exports.columnOptions = exports.buttonOptions = void 0;
+
+var _Image = _interopRequireDefault(require("../components/Atoms/Image"));
+
+var _Profile = _interopRequireDefault(require("../components/Organisms/Profile"));
+
+var _Search = _interopRequireDefault(require("../components/Organisms/Search"));
+
+var _NavItem = _interopRequireDefault(require("../components/Atoms/NavItem"));
+
+var _Collapsible = _interopRequireDefault(require("../components/Atoms/Collapsible"));
+
+var _user = _interopRequireDefault(require("../Assets/Images/user.jpeg"));
+
+var _logoWhite = _interopRequireDefault(require("../Assets/Images/logoWhite.png"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const buttonTypeOptions = ['external', 'internal', 'social'];
+const buttonDesignOptions = ['standard', 'slide'];
+const navLinks = [{
+  name: 'link 1',
+  reference: '/'
+}, {
+  name: 'link 2',
+  reference: '/'
+}, {
+  name: 'link n-1',
+  reference: '/'
+}, {
+  name: 'link n',
+  reference: '/'
+}];
+const navRowOneOfTwo = [{
+  columnClasses: 'xs:hidden md:inline-flex',
+  classNames: 'pt-2 mx-auto',
+  smColumnWidth: 5,
+  mdColumnWidth: 5,
+  lgColumnWidth: 5,
+  component: null
+}, {
+  classNames: 'mx-auto h-full',
+  smColumnWidth: 2,
+  mdColumnWidth: 2,
+  lgColumnWidth: 6,
+  component: /*#__PURE__*/React.createElement(_Image.default, {
+    classNames: "mx-auto",
+    height: "16",
+    width: "auto",
+    image: _logoWhite.default,
+    altText: "Logo"
+  })
+}, {
+  columnClasses: 'lg:inline-flex hidden',
+  classNames: '',
+  mdColumnWidth: 1,
+  lgColumnWidth: 3,
+  component: null
+}, {
+  classNames: 'pt-3',
+  smColumnWidth: 3,
+  mdColumnWidth: 3,
+  lgColumnWidth: 2,
+  component: /*#__PURE__*/React.createElement(_Search.default, {
+    placeholder: "search"
+  })
+}, {
+  classNames: 'h-full pt-2 mx-auto pr-4 ',
+  smColumnWidth: 2,
+  mdColumnWidth: 1,
+  lgColumnWidth: 1,
+  component: /*#__PURE__*/React.createElement(_Profile.default, {
+    imageHeight: "12",
+    imageWidth: "auto",
+    profileLinks: navLinks,
+    userImage: _user.default,
+    rounded: true
+  })
+}];
+exports.navRowOneOfTwo = navRowOneOfTwo;
+const navRowTwoOfTwo = [{
+  columnClasses: 'hidden',
+  classNames: '',
+  component: null
+}, {
+  classNames: '',
+  smColumnWidth: 12,
+  mdColumnWidth: 12,
+  lgColumnWidth: 12,
+  component: /*#__PURE__*/React.createElement("ul", {
+    id: "nav-list",
+    className: "flex justify-center items-center pt-5"
+  }, navLinks && navLinks.map(link => {
+    return /*#__PURE__*/React.createElement(_NavItem.default, {
+      name: link.name,
+      url: link.reference,
+      borderColor: "black",
+      textColor: "black",
+      bgColor: "",
+      hoverBorderColor: "blue",
+      hoverTextColor: "blue",
+      hoverBgColor: "white",
+      bordered: true,
+      rounded: true
+    });
+  }))
+}, {
+  columnClasses: 'hidden',
+  classNames: '',
+  component: null
+}];
+exports.navRowTwoOfTwo = navRowTwoOfTwo;
+const navMobileItems = [{
+  classNames: 'pt-3',
+  component: /*#__PURE__*/React.createElement(_Search.default, {
+    placeholder: "search"
+  })
+}, {
+  classNames: '',
+  component: /*#__PURE__*/React.createElement(_Profile.default, {
+    imageHeight: "12",
+    imageWidth: "auto",
+    profileLinks: navLinks,
+    userImage: _user.default,
+    rounded: true
+  })
+}, {
+  classNames: '',
+  component: /*#__PURE__*/React.createElement("ul", {
+    id: "nav-list",
+    className: ""
+  }, navLinks && navLinks.map(link => {
+    return /*#__PURE__*/React.createElement(_NavItem.default, {
+      name: link.name,
+      url: link.reference,
+      bgColor: "#38B6FF",
+      textColor: "white",
+      hoverTextColor: "#38B6FF",
+      hoverBgColor: "white",
+      rounded: true
+    });
+  }))
+}, {
+  classNames: '',
+  component: /*#__PURE__*/React.createElement("ul", {
+    id: "nav-list",
+    className: ""
+  }, navLinks && navLinks.map(link => {
+    return /*#__PURE__*/React.createElement(_Collapsible.default, {
+      title: "Inspiration",
+      content: "Shop By Color",
+      borderBottom: true,
+      textColor: "white",
+      bgColor: "black",
+      hoverBgColor: "white",
+      hoverTextColor: "black"
+    });
+  }))
+}];
+exports.navMobileItems = navMobileItems;
+const navThirdRow = [{
+  smColumnWidth: 6,
+  mdColumnWidth: 4,
+  lgColumnWidth: 4,
+  component: /*#__PURE__*/React.createElement(_Image.default, {
+    classNames: "mx-auto h-full",
+    height: "16",
+    width: "auto",
+    image: _logoWhite.default,
+    altText: "Logo"
+  })
+}, {
+  smColumnWidth: 0,
+  mdColumnWidth: 4,
+  lgColumnWidth: 4,
+  component: null
+}, {
+  smColumnWidth: 6,
+  mdColumnWidth: 4,
+  lgColumnWidth: 4,
+  component: /*#__PURE__*/React.createElement(_Image.default, {
+    classNames: "mx-auto h-full",
+    height: "16",
+    width: "auto",
+    image: _logoWhite.default,
+    altText: "Logo"
+  })
+}];
+exports.navThirdRow = navThirdRow;
+const buttonOptions = {
+  buttonDesign: {
+    description: '',
+    control: 'select',
+    options: buttonDesignOptions,
+    table: {
+      category: 'Button'
+    }
+  },
+  buttonBgColor: {
+    description: '',
+    control: 'color',
+    table: {
+      category: 'Button',
+      subcategory: 'Color'
+    }
+  },
+  buttonTextColor: {
+    description: '',
+    control: 'color',
+    table: {
+      category: 'Button',
+      subcategory: 'Color'
+    }
+  },
+  buttonBorderColor: {
+    description: '',
+    control: 'color',
+    table: {
+      category: 'Button',
+      subcategory: 'Color'
+    }
+  },
+  hoverButtonBorderColor: {
+    description: '',
+    control: 'color',
+    table: {
+      category: 'Hover Button',
+      subcategory: 'Color'
+    }
+  },
+  hoverButtonBgColor: {
+    description: '',
+    control: 'color',
+    table: {
+      category: 'Hover Button',
+      subcategory: 'Color'
+    }
+  },
+  hoverButtonTextColor: {
+    description: '',
+    control: 'color',
+    table: {
+      category: 'Hover Button',
+      subcategory: 'Color'
+    }
+  },
+  buttonType: {
+    description: '',
+    control: 'select',
+    options: buttonTypeOptions,
+    table: {
+      category: 'Button'
+    }
+  },
+  hasCta: {
+    description: '',
+    control: 'text',
+    table: {
+      category: 'Button'
+    }
+  },
+  ctaText: {
+    description: '',
+    control: 'text',
+    table: {
+      category: 'Button'
+    }
+  },
+  onClick: {
+    description: 'Function',
+    table: {
+      description: 'test',
+      category: 'Events'
+    }
+  },
+  url: {
+    description: '',
+    table: {
+      description: 'text',
+      category: 'Button'
+    }
+  },
+  buttonCenterIcon: {
+    description: '',
+    table: {
+      description: 'text',
+      category: 'Button',
+      subcategory: 'Icon'
+    }
+  },
+  buttonLeftIcon: {
+    description: '',
+    table: {
+      description: 'text',
+      category: 'Button',
+      subcategory: 'Icon'
+    }
+  },
+  buttonRightIcon: {
+    description: '',
+    table: {
+      description: 'text',
+      category: 'Button',
+      subcategory: 'Icon'
+    }
+  }
+};
+exports.buttonOptions = buttonOptions;
+const videoOptions = {
+  width: {
+    description: '',
+    control: 'number',
+    table: {
+      category: 'Video'
+    }
+  },
+  height: {
+    description: '',
+    control: 'number',
+    table: {
+      category: 'Video'
+    }
+  },
+  withControls: {
+    description: '',
+    control: 'boolean',
+    table: {
+      category: 'Video'
+    }
+  },
+  withPoster: {
+    description: '',
+    control: 'boolean',
+    table: {
+      category: 'Video'
+    }
+  },
+  autoPlay: {
+    description: '',
+    control: 'boolean',
+    table: {
+      category: 'Video'
+    }
+  },
+  muted: {
+    description: '',
+    control: 'boolean',
+    table: {
+      category: 'Video'
+    }
+  },
+  poster: {
+    description: '',
+    control: 'text',
+    table: {
+      category: 'Video'
+    }
+  },
+  ogvFile: {
+    description: '',
+    control: 'text',
+    table: {
+      category: 'Video'
+    }
+  },
+  mp4File: {
+    description: '',
+    control: 'text',
+    table: {
+      category: 'Video'
+    }
+  }
+};
+exports.videoOptions = videoOptions;
+const iconOptions = {
+  type: {
+    description: 'The name of the icon you wish to use',
+    control: 'text',
+    table: {
+      category: 'Icon'
+    }
+  },
+  size: {
+    description: 'An integer between 1 and 5 to dictage the magnification of the icon',
+    control: 'number',
+    table: {
+      category: 'Icon'
+    }
+  }
+};
+exports.iconOptions = iconOptions;
+const columnOptions = {
+  sm: {
+    description: '',
+    control: {
+      type: 'number',
+      min: 1,
+      max: 12,
+      step: 1
+    },
+    table: {
+      category: 'Column'
+    }
+  },
+  md: {
+    description: '',
+    control: {
+      type: 'number',
+      min: 1,
+      max: 12,
+      step: 1
+    },
+    table: {
+      category: 'Column'
+    }
+  },
+  lg: {
+    description: '',
+    control: {
+      type: 'number',
+      min: 1,
+      max: 12,
+      step: 1
+    },
+    table: {
+      category: 'Column'
+    }
+  },
+  xl: {
+    description: '',
+    control: {
+      type: 'number',
+      min: 1,
+      max: 12,
+      step: 1
+    },
+    table: {
+      category: 'Column'
+    }
+  }
+};
+exports.columnOptions = columnOptions;
+const imageOptions = {
+  width: {
+    description: '',
+    control: 'number',
+    table: {
+      category: 'Image'
+    }
+  },
+  height: {
+    description: '',
+    control: 'number',
+    table: {
+      category: 'Image'
+    }
+  },
+  image: {
+    description: '',
+    control: 'text',
+    table: {
+      category: 'Image'
+    }
+  },
+  altText: {
+    description: '',
+    control: 'text',
+    table: {
+      category: 'Image'
+    }
+  }
+};
+exports.imageOptions = imageOptions;
+const starOptions = {
+  size: {
+    description: 'An integer between 1 and 5 to dictate the magnification of the icon',
+    control: {
+      type: 'number',
+      min: 1,
+      max: 5,
+      step: 1
+    },
+    table: {
+      category: ''
+    }
+  },
+  stars: {
+    description: 'An integer between 1 and 5 to dictate the number of gold stars',
+    control: {
+      type: 'number',
+      min: 1,
+      max: 5,
+      step: 1
+    },
+    table: {
+      category: ''
+    }
+  }
+};
+exports.starOptions = starOptions;

package/package.json

@@ -2,7 +2,7 @@
   "name": "trepur_components",
   "description": "component lib",
   "author": "trepur_ttenneb",
-  "version": "0.1.41",
+  "version": "0.2.0",
   "private": false,
   "keywords": [
     "react",
@@ -17,18 +17,15 @@
   ],
   "dependencies": {
     "@babel/polyfill": "^7.12.1",
-    "@storybook/addon-docs": "^6.4.13",
-    "@storybook/addon-knobs": "^6.3.1",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^11.2.7",
-    "@testing-library/user-event": "^12.8.3",
+    "@testing-library/jest-dom": "^5.16.2",
+    "@testing-library/react": "^12.1.3",
+    "@testing-library/user-event": "^13.5.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-scripts": "4.0.3",
+    "react-scripts": "5.0.0",
     "react-slick": "^0.28.1",
     "slick-carousel": "^1.8.1",
-    "storybook": "^6.4.10",
-    "web-vitals": "^1.1.2"
+    "web-vitals": "^2.1.4"
   },
   "scripts": {
     "build": "rm -rf dist && NODE_ENV=production babel src/lib --out-dir dist --copy-files",
@@ -65,19 +62,23 @@
     ]
   },
   "devDependencies": {
-    "@babel/cli": "^7.16.8",
-    "@babel/core": "^7.16.7",
-    "@babel/preset-env": "^7.16.8",
-    "@babel/preset-react": "^7.16.7",
-    "@rollup/plugin-node-resolve": "^13.1.3",
-    "@storybook/addon-actions": "^6.3.12",
-    "@storybook/addon-links": "^6.3.12",
-    "@storybook/node-logger": "^6.3.12",
-    "@storybook/preset-create-react-app": "^3.2.0",
-    "@storybook/react": "^6.3.12",
-    "autoprefixer": "^9.8.8",
-    "postcss": "^7.0.39",
-    "storybook-readme": "^5.0.9",
-    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17"
+    "@babel/cli": "^7.17.6",
+    "@babel/core": "^7.17.5",
+    "@babel/preset-env": "^7.16.11",
+    "@storybook/addon-actions": "^6.4.19",
+    "@storybook/addon-essentials": "^6.4.19",
+    "@storybook/addon-interactions": "^6.4.19",
+    "@storybook/addon-links": "^6.4.19",
+    "@storybook/builder-webpack5": "^6.4.19",
+    "@storybook/manager-webpack5": "^6.4.19",
+    "@storybook/node-logger": "^6.4.19",
+    "@storybook/preset-create-react-app": "^4.0.1",
+    "@storybook/react": "^6.4.19",
+    "@storybook/testing-library": "0.0.9",
+    "autoprefixer": "^10.4.2",
+    "babel-cli": "^6.26.0",
+    "postcss": "^8.4.6",
+    "tailwindcss": "^3.0.23",
+    "webpack": "^5.69.1"
   }
 }

package/dist/components/Accordion/README.md

@@ -1,29 +0,0 @@
-# Accordion
-
-An accordion built from many collapsible elements
-
-## Example
-
-```
-const items = [
-    {
-        title: 'This is title 1',
-        content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper in neque in venenatis. Mauris scelerisque orci magna, et ultricies nulla lobortis ac. Aliquam vitae faucibus nisl. Nunc in tellus libero. Donec ut augue consequat, convallis risus in, pulvinar nibh. Duis mi nibh, posuere molestie pharetra cursus, viverra ut dolor. Vivamus eget arcu dui. Donec ullamcorper ornare justo sed feugiat. Curabitur aliquam lectus sed quam pharetra scelerisque. Integer vitae eleifend dolor. Duis luctus metus ipsum, et commodo magna bibendum quis. Quisque gravida leo sodales quam feugiat, id vulputate arcu pulvinar. Duis dictum gravida risus, et bibendum nunc condimentum eu.',
-        icon: 'calendar'
-    },
-    {
-        title: 'This is title 2',
-        content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper in neque in venenatis. Mauris scelerisque orci magna, et ultricies nulla lobortis ac. Aliquam vitae faucibus nisl. Nunc in tellus libero. Donec ut augue consequat, convallis risus in, pulvinar nibh. Duis mi nibh, posuere molestie pharetra cursus, viverra ut dolor. Vivamus eget arcu dui. Donec ullamcorper ornare justo sed feugiat. Curabitur aliquam lectus sed quam pharetra scelerisque. Integer vitae eleifend dolor. Duis luctus metus ipsum, et commodo magna bibendum quis. Quisque gravida leo sodales quam feugiat, id vulputate arcu pulvinar. Duis dictum gravida risus, et bibendum nunc condimentum eu.',
-        icon: 'calendar'
-    },
-]
-
-<Accordion 
-    items={items}
-/>
-
-```
-
-## Parameters
-`items={array} (default=null)`
-`showBorders={boolean} (default=null)`

package/dist/components/Accordion/index.js

@@ -1,40 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _Collapsible = _interopRequireDefault(require("../Collapsible"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const Accordion = _ref => {
-  let {
-    items,
-    showBorders
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement("div", null, items && items.map((item, i) => {
-    if (i + 1 === items.length) {
-      return /*#__PURE__*/_react.default.createElement(_Collapsible.default, {
-        title: item.title,
-        content: item.content,
-        icon: item.icon,
-        borderTop: showBorders,
-        borderBottom: showBorders
-      });
-    } else {
-      return /*#__PURE__*/_react.default.createElement(_Collapsible.default, {
-        title: item.title,
-        content: item.content,
-        icon: item.icon,
-        borderTop: showBorders
-      });
-    }
-  }));
-};
-
-var _default = Accordion;
-exports.default = _default;