trepur_components 0.1.1 → 0.1.5

package/dist/Components/CardList/CardList.stories.js

@@ -9,21 +9,21 @@ var _react = _interopRequireDefault(require("react"));
 
 var _README = _interopRequireDefault(require("./README.md"));
 
-var _CardList = _interopRequireDefault(require("./CardList"));
+var _index = _interopRequireDefault(require("./index"));
 
-var _Card = _interopRequireDefault(require("../Card/Card"));
+var _index2 = _interopRequireDefault(require("../Card/index"));
 
 require("../../index.css");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const list = [/*#__PURE__*/_react.default.createElement(_Card.default, {
+const list = [/*#__PURE__*/_react.default.createElement(_index2.default, {
   id: "card",
   title: "This is a title",
   titleClass: "font-bold",
   subTitle: "This is a subtitle",
   description: "This is a description, it can be really long if you want it to be. The text will wrap onto a new line if it exceeds the width of the card"
-}), /*#__PURE__*/_react.default.createElement(_Card.default, {
+}), /*#__PURE__*/_react.default.createElement(_index2.default, {
   id: "card",
   title: "This is a title",
   titleClass: "font-bold",
@@ -45,160 +45,9 @@ var _default = {
 exports.default = _default;
 
 const _Cardlist = () => {
-  return /*#__PURE__*/_react.default.createElement(_CardList.default, {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
     list: list
   });
-}; // export const CardTitleLeft = () => {
-//     return (
-//         <Card 
-//             id='card' 
-//             title='This is a title'
-//             titleClass='font-bold'
-//             subTitle='This is a subtitle' 
-//             description='This is a description, it can be really long if you want it to be. The text will wrap onto a new line if it exceeds the width of the card'
-//         ></Card>
-//     )
-// }
-// export const CardTitleRight = () => {
-//     return (
-//         <Card 
-//             id='card' 
-//             title='This is a title'
-//             titleClass='font-bold text-right'
-//             subTitle='This is a subtitle' 
-//             description='This is a description, it can be really long if you want it to be. The text will wrap onto a new line if it exceeds the width of the card'
-//         ></Card>
-//     )
-// }
-// export const CardWithImage = () => {
-//     return (
-//         <Card 
-//             id='card' 
-//             title='This is a title'
-//             titleClass='text-center font-bold'
-//             subTitle='This is a subtitle' 
-//             description='This is a description, it can be really long if you want it to be. The text will wrap onto a new line if it exceeds the width of the card'
-//             image='https://picsum.photos/500/300'>
-//         </Card>
-//     )
-// }
-// export const CardWithExtraText = () => {
-//     return (
-//         <Card 
-//             id='card' 
-//             title='This is a title'
-//             titleClass='text-center font-bold'
-//             subTitle='This is a subtitle' 
-//             extraText='This is some extra text'
-//             description='This is a description, it can be really long if you want it to be. The text will wrap onto a new line if it exceeds the width of the card'
-//             image='https://picsum.photos/500/300'>
-//         </Card>
-//     )
-// }
-// export const CardWithButton = () => {
-//     return (
-//         <Card 
-//             id='card' 
-//             title='This is a title'
-//             titleClass='text-center font-bold'
-//             subTitle='This is a subtitle' 
-//             extraText='This is some extra text'
-//             description='This is a description, it can be really long if you want it to be. The text will wrap onto a new line if it exceeds the width of the card'
-//             image='https://picsum.photos/500/300'
-//             hasCta
-//             ctaText='This is a button'
-//             >
-//         </Card>
-//     )
-// }
-// export const CardWithSlideButton = () => {
-//     return (
-//         <Card 
-//             id='card' 
-//             title='This is a title'
-//             titleClass='text-center font-bold'
-//             subTitle='This is a subtitle' 
-//             extraText='This is some extra text'
-//             description='This is a description, it can be really long if you want it to be. The text will wrap onto a new line if it exceeds the width of the card'
-//             image='https://picsum.photos/500/300'
-//             hasCta
-//             btnType='slide'
-//             ctaText='This is a button'>
-//         </Card>
-//     )
-// }
-// export const CardWithImageBelowTitle = () => {
-//     return (
-//         <Card 
-//             id='card' 
-//             title='This is a title'
-//             titleClass='text-center font-bold'
-//             subTitle='This is a subtitle' 
-//             extraText='This is some extra text'
-//             description='This is a description, it can be really long if you want it to be. The text will wrap onto a new line if it exceeds the width of the card'
-//             image='https://picsum.photos/500/300'
-//             hasCta
-//             ctaText='This is a button'
-//             imageBelowTitle>
-//         </Card>
-//     )
-// }
-// export const CardRounded = () => {
-//     return (
-//         <Card 
-//             id='card' 
-//             title='This is a title'
-//             titleClass='text-center font-bold'
-//             subTitle='This is a subtitle' 
-//             extraText='This is some extra text'
-//             description='This is a description, it can be really long if you want it to be. The text will wrap onto a new line if it exceeds the width of the card'
-//             image='https://picsum.photos/500/300'
-//             hasCta
-//             ctaText='This is a button'
-//             rounded>
-//         </Card>
-//     )
-// }
-// export const CardRoundedWithImageBelowTitle = () => {
-//     return (
-//         <Card 
-//             id='card' 
-//             title='This is a title'
-//             titleClass='text-center font-bold'
-//             subTitle='This is a subtitle' 
-//             extraText='This is some extra text'
-//             description='This is a description, it can be really long if you want it to be. The text will wrap onto a new line if it exceeds the width of the card'
-//             image='https://picsum.photos/500/300'
-//             hasCta
-//             ctaText='This is a button'
-//             imageBelowTitle
-//             rounded>
-//         </Card>
-//     )
-// }
-// export const lotsOfCards = () => {
-//     let cards = []
-//     for (let i = 0; i < 8 ; i++) {
-//         cards.push(<Card 
-//             id='card' 
-//             title='This is a title'
-//             titleClass='text-center font-bold'
-//             subTitle='This is a subtitle' 
-//             extraText='This is some extra text'
-//             description='This is a description, it can be really long if you want it to be. The text will wrap onto a new line if it exceeds the width of the card'
-//             image='https://picsum.photos/500/300'
-//             hasCta
-//             ctaText='This is a button'
-//             imageBelowTitle
-//             rounded>
-//         </Card>)
-//     }
-//     return (
-//         <div className="grid grid-cols-4 grid-flow-row">
-//             {cards}
-//         </div>
-//     )
-// }
-
+};
 
 exports._Cardlist = _Cardlist;

package/dist/Components/CardList/README.md

@@ -1 +0,0 @@
-hello this is a card

package/dist/Components/CardList/{CardList.js → index.js}

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _Card = _interopRequireDefault(require("../Card/Card"));
+var _index = _interopRequireDefault(require("../Card/index"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -16,7 +16,7 @@ const CardList = _ref => {
   return /*#__PURE__*/React.createElement("div", {
     className: "flex"
   }, list && list.map(item => {
-    return /*#__PURE__*/React.createElement(_Card.default, {
+    return /*#__PURE__*/React.createElement(_index.default, {
       id: "card",
       title: item.name,
       titleClass: "text-center font-bold",

package/dist/Components/Icon/Icon.stories.js

@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _README = _interopRequireDefault(require("./README.md"));
 
-var _Icon2 = _interopRequireDefault(require("./Icon"));
+var _index = _interopRequireDefault(require("./index"));
 
 require("../../index.css");
 
@@ -29,7 +29,7 @@ var _default = {
 exports.default = _default;
 
 const _Icon = args => {
-  return /*#__PURE__*/_react.default.createElement(_Icon2.default, {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
     type: "thumbs-up"
   });
 };
@@ -37,7 +37,7 @@ const _Icon = args => {
 exports._Icon = _Icon;
 
 const withSizeTwo = args => {
-  return /*#__PURE__*/_react.default.createElement(_Icon2.default, {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
     type: "thumbs-up",
     size: "2"
   });
@@ -46,7 +46,7 @@ const withSizeTwo = args => {
 exports.withSizeTwo = withSizeTwo;
 
 const withSizeThree = args => {
-  return /*#__PURE__*/_react.default.createElement(_Icon2.default, {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
     type: "thumbs-up",
     size: "3"
   });
@@ -55,7 +55,7 @@ const withSizeThree = args => {
 exports.withSizeThree = withSizeThree;
 
 const withSizeFour = args => {
-  return /*#__PURE__*/_react.default.createElement(_Icon2.default, {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
     type: "thumbs-up",
     size: "4"
   });
@@ -64,7 +64,7 @@ const withSizeFour = args => {
 exports.withSizeFour = withSizeFour;
 
 const withSizeFive = args => {
-  return /*#__PURE__*/_react.default.createElement(_Icon2.default, {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
     type: "thumbs-up",
     size: "5"
   });

package/dist/Components/Icon/README.md

@@ -1 +0,0 @@
-hello this is a button

package/dist/Components/Jumbotron/Jumbotron.stories.js

@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _README = _interopRequireDefault(require("./README.md"));
 
-var _Jumbotron2 = _interopRequireDefault(require("./Jumbotron"));
+var _index = _interopRequireDefault(require("./index"));
 
 require("../../index.css");
 
@@ -29,7 +29,7 @@ var _default = {
 exports.default = _default;
 
 const _Jumbotron = args => {
-  return /*#__PURE__*/_react.default.createElement(_Jumbotron2.default, {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
     altText: "image",
     image: "https://picsum.photos/1500/400"
   });
@@ -38,7 +38,7 @@ const _Jumbotron = args => {
 exports._Jumbotron = _Jumbotron;
 
 const JumbotronWithOneBtn = args => {
-  return /*#__PURE__*/_react.default.createElement(_Jumbotron2.default, {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
     altText: "image",
     image: "https://picsum.photos/1500/400",
     ctaText: "This is a button"
@@ -48,7 +48,7 @@ const JumbotronWithOneBtn = args => {
 exports.JumbotronWithOneBtn = JumbotronWithOneBtn;
 
 const JumbotronWithTwoBtns = args => {
-  return /*#__PURE__*/_react.default.createElement(_Jumbotron2.default, {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
     altText: "image",
     image: "https://picsum.photos/1500/400",
     ctaText: "This is a button",
@@ -59,7 +59,7 @@ const JumbotronWithTwoBtns = args => {
 exports.JumbotronWithTwoBtns = JumbotronWithTwoBtns;
 
 const JumbotronWithCenterText = args => {
-  return /*#__PURE__*/_react.default.createElement(_Jumbotron2.default, {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
     altText: "image",
     image: "https://picsum.photos/1500/400",
     text: "Some text here"
@@ -69,7 +69,7 @@ const JumbotronWithCenterText = args => {
 exports.JumbotronWithCenterText = JumbotronWithCenterText;
 
 const JumbotronWithTextAndBtns = args => {
-  return /*#__PURE__*/_react.default.createElement(_Jumbotron2.default, {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
     altText: "image",
     image: "https://picsum.photos/1500/400",
     text: "Some text here",

package/dist/Components/Jumbotron/{Jumbotron.js → index.js}

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _Button = _interopRequireDefault(require("../Button/Button"));
+var _index = _interopRequireDefault(require("../Button/index"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -30,10 +30,10 @@ const Jumbotron = _ref => {
     className: "text-white text-4xl"
   }, text), /*#__PURE__*/React.createElement("div", {
     className: "pt-2 lg:pt-8 text-white"
-  }, ctaText && /*#__PURE__*/React.createElement(_Button.default, {
+  }, ctaText && /*#__PURE__*/React.createElement(_index.default, {
     className: "mx-2",
     ctaText: ctaText
-  }), ctaText2 && /*#__PURE__*/React.createElement(_Button.default, {
+  }), ctaText2 && /*#__PURE__*/React.createElement(_index.default, {
     className: "mx-2",
     ctaText: ctaText2
   }))));

package/dist/Components/Nav/Nav.stories.js

@@ -0,0 +1,108 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._Nav = exports.NavWithSearchAndProfile = exports.NavWithSearch = exports.NavWithProfile = exports.NavAligned = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _README = _interopRequireDefault(require("./README.md"));
+
+var _index = _interopRequireDefault(require("./index"));
+
+require("../../index.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const links = [{
+  name: 'link 1',
+  reference: '/'
+}, {
+  name: 'link 2',
+  reference: '/'
+}, {
+  name: 'link n-1',
+  reference: '/'
+}, {
+  name: 'link n',
+  reference: '/'
+}];
+var _default = {
+  title: 'Components/Nav',
+  argTypes: {},
+  decorators: [story => /*#__PURE__*/_react.default.createElement("div", {
+    className: "p-4"
+  }, story())],
+  parameters: {
+    readme: {
+      sidebar: _README.default
+    }
+  }
+};
+exports.default = _default;
+
+const _Nav = args => {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    links: links,
+    navPosition: "1",
+    navClass: "bg-brand-light-grey pb-4 pt-2",
+    navLinkClass: "px-2 py-2 rounded-lg flex-1 hover:text-white hover:bg-black",
+    logoClass: "py-4"
+  });
+};
+
+exports._Nav = _Nav;
+
+const NavWithSearch = () => {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    links: links,
+    navPosition: "1",
+    navClass: "bg-brand-light-grey pb-4 pt-2",
+    navLinkClass: "px-2 py-2 rounded-lg flex-1 hover:text-white hover:bg-black",
+    logoClass: "py-4",
+    showSearch: true
+  });
+};
+
+exports.NavWithSearch = NavWithSearch;
+
+const NavWithProfile = () => {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    links: links,
+    navPosition: "1",
+    navClass: "bg-brand-light-grey pb-4 pt-2",
+    navLinkClass: "px-2 py-2 rounded-lg flex-1 hover:text-white hover:bg-black",
+    logoClass: "py-4",
+    showProfile: true
+  });
+};
+
+exports.NavWithProfile = NavWithProfile;
+
+const NavWithSearchAndProfile = () => {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    links: links,
+    navPosition: "1",
+    navClass: "bg-brand-light-grey pb-4 pt-2",
+    navLinkClass: "px-2 py-2 rounded-lg flex-1 hover:text-white hover:bg-black",
+    logoClass: "py-4",
+    showProfile: true,
+    showSearch: true
+  });
+};
+
+exports.NavWithSearchAndProfile = NavWithSearchAndProfile;
+
+const NavAligned = () => {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    links: links,
+    navPosition: "1",
+    navClass: "bg-brand-light-grey pb-4 pt-2",
+    navLinkClass: "px-2 py-2 rounded-lg flex-1 hover:text-white hover:bg-black",
+    logoClass: "py-4",
+    alignNavAndLogo: true
+  });
+};
+
+exports.NavAligned = NavAligned;

package/dist/Components/{Nav.js → Nav/index.js}

@@ -9,9 +9,9 @@ require("core-js/modules/web.dom-collections.iterator.js");
 
 var _react = require("react");
 
-var _Profile = _interopRequireDefault(require("./Profile"));
+var _index = _interopRequireDefault(require("../Profile/index"));
 
-var _Search = _interopRequireDefault(require("./Search"));
+var _index2 = _interopRequireDefault(require("../Search/index"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -132,9 +132,9 @@ const Header = _ref => {
       className: navLinkClass,
       href: link.reference
     }, link.name));
-  })))), showSearch && /*#__PURE__*/React.createElement(_Search.default, {
+  })))), showSearch && /*#__PURE__*/React.createElement(_index2.default, {
     className: "hidden sm:inline-flex pl-4 pt-8 absolute inset-y-0 h-8 right-16 flex items-center"
-  }), showProfile && /*#__PURE__*/React.createElement(_Profile.default, {
+  }), showProfile && /*#__PURE__*/React.createElement(_index.default, {
     profileLinks: profileLinks
   }))), mobileMenuState && /*#__PURE__*/React.createElement("div", {
     className: "sm:hidden",
@@ -143,7 +143,7 @@ const Header = _ref => {
     className: "ml-3 h-8 w-8 rounded-full",
     src: "user.jpeg",
     alt: ""
-  }), showSearch && /*#__PURE__*/React.createElement(_Search.default, {
+  }), showSearch && /*#__PURE__*/React.createElement(_index2.default, {
     className: "flex flex-1 ml-4"
   }), /*#__PURE__*/React.createElement("div", {
     className: "px-2 pt-2 pb-3 space-y-1"

package/dist/Components/Profile/Profile.stories.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._Breadcrumbs = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _README = _interopRequireDefault(require("./README.md"));
+
+var _index = _interopRequireDefault(require("./index"));
+
+require("../../index.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const links = [{
+  link: '/',
+  name: 'link 1'
+}, {
+  link: '/',
+  name: 'link 2'
+}, {
+  link: '/',
+  name: 'Link 3'
+}];
+var _default = {
+  title: 'Components/Breadcrumbs',
+  argTypes: {},
+  decorators: [story => /*#__PURE__*/_react.default.createElement("div", {
+    className: "p-4"
+  }, story())],
+  parameters: {
+    readme: {
+      sidebar: _README.default
+    }
+  }
+};
+exports.default = _default;
+
+const _Breadcrumbs = args => {
+  return /*#__PURE__*/_react.default.createElement(_index.default, null);
+};
+
+exports._Breadcrumbs = _Breadcrumbs;

package/dist/Components/Search/Search.stories.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._Search = exports.SearchWithPlaceholder = exports.SearchWithLabel = exports.SearchWithIcon = exports.SearchWithAll = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _README = _interopRequireDefault(require("./README.md"));
+
+var _index = _interopRequireDefault(require("./index"));
+
+require("../../index.css");
+
+var _index3 = _interopRequireDefault(require("../Icon/index"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  title: 'Components/Search',
+  argTypes: {},
+  decorators: [story => /*#__PURE__*/_react.default.createElement("div", {
+    className: "p-4"
+  }, story())],
+  parameters: {
+    readme: {
+      sidebar: _README.default
+    }
+  }
+};
+exports.default = _default;
+
+const _Search = args => {
+  return /*#__PURE__*/_react.default.createElement(_index.default, null);
+};
+
+exports._Search = _Search;
+
+const SearchWithPlaceholder = args => {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    placeholder: "Enter some search item"
+  });
+};
+
+exports.SearchWithPlaceholder = SearchWithPlaceholder;
+
+const SearchWithLabel = args => {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    text: "Label"
+  });
+};
+
+exports.SearchWithLabel = SearchWithLabel;
+
+const SearchWithIcon = args => {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    leftIcon: "search"
+  });
+};
+
+exports.SearchWithIcon = SearchWithIcon;
+
+const SearchWithAll = args => {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    text: "Label",
+    leftIcon: "search",
+    placeholder: "Enter some search item"
+  });
+};
+
+exports.SearchWithAll = SearchWithAll;

package/dist/Components/{Search.js → Search/index.js}

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _Icon = _interopRequireDefault(require("./Icon/Icon"));
+var _index = _interopRequireDefault(require("../Icon/index"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -18,7 +18,7 @@ const Search = _ref => {
     leftIcon
   } = _ref;
   let classes = className + ' flex';
-  let iconLeft = /*#__PURE__*/React.createElement(_Icon.default, {
+  let iconLeft = /*#__PURE__*/React.createElement(_index.default, {
     type: leftIcon
   });
   return /*#__PURE__*/React.createElement("div", {
@@ -28,9 +28,9 @@ const Search = _ref => {
     className: "relative block"
   }, /*#__PURE__*/React.createElement("span", {
     className: "sr-only"
-  }, "Search"), /*#__PURE__*/React.createElement("span", {
+  }, "Search"), leftIcon && /*#__PURE__*/React.createElement("span", {
     className: "absolute inset-y-0 left-5 flex items-center pl-2"
-  }, leftIcon && iconLeft), /*#__PURE__*/React.createElement("input", {
+  }, iconLeft), /*#__PURE__*/React.createElement("input", {
     className: "ml-4 pr-32 border-2 border-gray-300 h-10 px-5 placeholder:italic placeholder:text-gray-400 rounded-md py-2 pl-9 focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1",
     onChange: e => _onChange(e.target.value),
     placeholder: placeholder,