trepur_components 0.1.4 → 0.1.8

package/babel.config.json

@@ -1,18 +1,18 @@
 {
-    "presets": [
-      [
-         "@babel/env",
-         {
-            "targets": {
-            "edge": "17",
-            "firefox": "60",
-            "chrome": "67",
-            "safari": "11.1"
-         },
-         "useBuiltIns": "usage",
-         "corejs": "3.6.5"
-         }
-      ],
-      "@babel/preset-react"
-   ]
+  "presets": [
+    [
+      "@babel/env",
+      {
+        "targets": {
+        "edge": "17",
+        "firefox": "60",
+        "chrome": "67",
+        "safari": "11.1"
+      },
+      "useBuiltIns": "usage",
+      "corejs": "3.6.5"
+      }
+    ],
+    "@babel/preset-react"
+  ]
 }

package/dist/index.es.js

@@ -0,0 +1,8 @@
+// module.exports = { ...components }
+
+var index = /*#__PURE__*/Object.freeze({
+	__proto__: null,
+	components: index
+});
+
+export { index as components };

package/dist/index.js

@@ -1,19 +1,12 @@
-"use strict";
+'use strict';
 
-require("core-js/modules/web.dom-collections.iterator.js");
+Object.defineProperty(exports, '__esModule', { value: true });
 
-require("./index.css");
+// module.exports = { ...components }
 
-var components = _interopRequireWildcard(require("./Components"));
+var index = /*#__PURE__*/Object.freeze({
+	__proto__: null,
+	components: index
+});
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-module.exports = _objectSpread({}, components);
+exports.components = index;

package/package.json

@@ -2,7 +2,7 @@
   "name": "trepur_components",
   "description": "component lib",
   "author": "trepur_ttenneb",
-  "version": "0.1.4",
+  "version": "0.1.8",
   "private": false,
   "dependencies": {
     "@babel/polyfill": "^7.12.1",
@@ -19,6 +19,7 @@
     "web-vitals": "^1.1.2"
   },
   "scripts": {
+    "build-lib": "rollup -c",
     "build": "rm -rf dist && NODE_ENV=production babel src --out-dir dist --copy-files",
     "test": "craco test",
     "eject": "react-scripts eject",
@@ -57,6 +58,8 @@
     "@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-essentials": "^6.3.12",
     "@storybook/addon-links": "^6.3.12",
@@ -65,6 +68,10 @@
     "@storybook/react": "^6.3.12",
     "autoprefixer": "^9.8.8",
     "postcss": "^7.0.39",
+    "rollup": "^2.63.0",
+    "rollup-plugin-babel": "^4.4.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17"
   }
 }

package/rollup.config.js

@@ -0,0 +1,37 @@
+import babel from 'rollup-plugin-babel';
+import resolve from '@rollup/plugin-node-resolve';
+import external from 'rollup-plugin-peer-deps-external';
+import { terser } from 'rollup-plugin-terser';
+import postcss from 'rollup-plugin-postcss';
+
+const config = [
+    {
+      input: './src/index.js',
+      output: [
+        {
+          file: 'dist/index.js',
+          format: 'cjs',
+        },
+        {
+          file: 'dist/index.es.js',
+          format: 'es',
+          exports: 'named',
+        }
+      ],
+      plugins: [
+        postcss({
+          plugins: [],
+          minimize: true,
+        }),
+        babel({
+          exclude: 'node_modules/**',
+          presets: ['@babel/preset-react']
+        }),
+        external(),
+        resolve(),
+        //terser(),
+      ]
+    }
+  ];
+
+export default config

package/src/Components/Icon/index.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import PropTypes from 'prop-types'
 
 const Icon = ({ type, size, className, onClick }) => {
@@ -19,10 +18,4 @@ const Icon = ({ type, size, className, onClick }) => {
     )
 }
 
-Icon.propTypes = {
-    type: PropTypes.string,
-    className: PropTypes.string,
-    onClick: PropTypes.func,
-}
-
 export default Icon

package/src/Components/index.js

@@ -0,0 +1,3 @@
+export * as components from './'
+
+// module.exports = { ...components }

package/src/Components/test/index.js

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const Button = ({text}) => {
+    return (
+        <button> 
+            <h4>{text}</h4>
+        </button>
+    )
+}
+
+export default Button;

package/src/index.js

@@ -1,4 +1,6 @@
-import './index.css';
-import * as components from './Components'
+// import './index.css';
+// import * as components from './Components'
 
-module.exports = { ...components }
+// module.exports = { ...components }
+
+export * from './Components';

package/dist/Components/Breadcrumbs/Breadcrumbs.stories.js

@@ -1,164 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports._Breadcrumbs = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _addonActions = require("@storybook/addon-actions");
-
-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: {
-    label: {
-      name: 'Text',
-      control: {
-        type: 'text'
-      },
-      defaultValue: 'Shop Now'
-    },
-    type: {
-      name: 'Type',
-      defaultValue: 'primary',
-      options: ['primary', 'secondary', 'ghost'],
-      control: {
-        type: 'select'
-      }
-    },
-    iconPlacement: {
-      name: 'Icon',
-      defaultValue: 'none',
-      options: ['left', 'right', 'both', 'none'],
-      control: {
-        type: 'select'
-      }
-    },
-    padded: {
-      name: 'Padded',
-      control: {
-        type: 'boolean'
-      },
-      defaultValue: false
-    },
-    social: {
-      name: 'Social',
-      defaultValue: 'None',
-      options: ['Facebook', 'Twitter', 'Whatsapp', 'None'],
-      control: {
-        type: 'select'
-      }
-    }
-  },
-  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, {
-    links: links
-  });
-}; // export const SecondaryButton = () => {
-//     return (
-//         <Button ctaText='I am a button'>
-//         </Button>
-//     )
-// }
-// export const WithIconRight = () => {
-//     return (
-//         <Button rightIcon='thumbs-up' ctaText='I am a button'>
-//         </Button>
-//     )
-// }
-// WithIconRight.story = {
-//     name: 'With Icon (right)',
-// }
-// export const WithIconLeft = () => {
-//     return (
-//         <Button leftIcon='sign-in' ctaText='I am a button'>
-//         </Button>
-//     )
-// }
-// WithIconLeft.story = {
-//     name: 'With Icon (left)',
-// }
-// export const WithBothIcons = () => {
-//     return (
-//         <Button leftIcon='star' rightIcon='star' ctaText='I am a button'>
-//         </Button>
-//     )
-// }
-// export const ButtonAsExternalLink = () => {
-//     return (
-//         <Button as='a-external'  ctaText='I am a button'>
-//         </Button>
-//     )
-// }
-// ButtonAsExternalLink.story = {
-//     name: 'Button as external link',
-// }
-// export const ButtonAsSemanticHtmlButton = () => {
-//     return (
-//         <Button as='button' htmlType='button' ctaText='I am a button' url='/'>
-//         </Button>
-//     )
-// }
-// ButtonAsSemanticHtmlButton.story = {
-//     name: 'Button as semantic html button',
-// }
-// export const ButtonAsSemanticHtmlSubmitButton = () => {
-//     return (
-//         <Button as='button' htmlType='submit' ctaText='I am a button'>
-//         </Button>
-//     )
-// }
-// ButtonAsSemanticHtmlSubmitButton.story = {
-//     name: 'Button as semantic html submit button',
-// }
-// export const ButtonAsInternalLink = () => {
-//     return (
-//         <Button as='Link' ctaText='I am a button' url='/'>
-//         </Button>
-//     )
-// }
-// ButtonAsInternalLink.story = {
-//     name: 'Button as internal link',
-// }
-// export const WithOnClickMethod = () => {
-//     return (
-//         <Button ctaText='I am a button' onClick={action('button-click')}>
-//         </Button>
-//     )
-// }
-// WithOnClickMethod.story = {
-//     name: 'With onClick method',
-// }
-
-
-exports._Breadcrumbs = _Breadcrumbs;

package/dist/Components/Breadcrumbs/index.js

@@ -1,32 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-const Breadcrumbs = _ref => {
-  let {
-    className,
-    links
-  } = _ref;
-  const linksLength = Object.keys(links).length;
-  let classes = className + ' flex py-2 px-8 ';
-  return /*#__PURE__*/React.createElement("ul", {
-    className: classes
-  }, links && links.map((link, i) => {
-    return /*#__PURE__*/React.createElement("div", {
-      key: link.name
-    }, /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("div", {
-      className: "flex"
-    }, i + 1 >= linksLength ? /*#__PURE__*/React.createElement("p", {
-      className: ""
-    }, link.name) : /*#__PURE__*/React.createElement("a", {
-      className: "text-social-facebook hover:underline",
-      href: link.link
-    }, link.name), i + 1 < linksLength ? /*#__PURE__*/React.createElement("p", null, "\xA0 > \xA0") : null)));
-  }));
-};
-
-var _default = Breadcrumbs;
-exports.default = _default;

package/dist/Components/BreadcrumbsBordered/BreadcrumbsBordered.stories.js

@@ -1,87 +0,0 @@
-"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/BreadcrumbsBordered',
-  argTypes: {
-    label: {
-      name: 'Text',
-      control: {
-        type: 'text'
-      },
-      defaultValue: 'Shop Now'
-    },
-    type: {
-      name: 'Type',
-      defaultValue: 'primary',
-      options: ['primary', 'secondary', 'ghost'],
-      control: {
-        type: 'select'
-      }
-    },
-    iconPlacement: {
-      name: 'Icon',
-      defaultValue: 'none',
-      options: ['left', 'right', 'both', 'none'],
-      control: {
-        type: 'select'
-      }
-    },
-    padded: {
-      name: 'Padded',
-      control: {
-        type: 'boolean'
-      },
-      defaultValue: false
-    },
-    social: {
-      name: 'Social',
-      defaultValue: 'None',
-      options: ['Facebook', 'Twitter', 'Whatsapp', 'None'],
-      control: {
-        type: 'select'
-      }
-    }
-  },
-  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, {
-    links: links
-  });
-};
-
-exports._Breadcrumbs = _Breadcrumbs;

package/dist/Components/BreadcrumbsBordered/index.css

@@ -1,67 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css');
-
-.right-arrow {
-    @apply w-0;
-    @apply h-0;
-    border-top: 17px solid transparent;
-    border-bottom: 17px solid transparent;
-    border-left: 15px solid theme('colors.brand-border');
-    @apply absolute;
-    right: -15px;
-    @apply top-0;
-}
-
-.let-arrow {
-    @apply w-0;
-    @apply h-0;
-    border-top: 17px solid transparent;
-    border-bottom: 17px solid transparent;
-    border-left: 17px solid theme('colors.white');
-    @apply absolute;
-    left: 0px;
-    @apply top-0;
-}
-
-.test-arrow {
-    @apply w-0;
-    @apply h-0;
-    border-top: 17px solid transparent;
-    border-bottom: 17px solid transparent;
-    border-left: 15px solid theme('colors.brand-border');
-    @apply absolute;
-    left: -8px;
-    bottom: -11px;
-    transform: rotate(48deg);
-}
-
-.test-arrow-top {
-    @apply w-0;
-    @apply h-0;
-    border-top: 15px solid theme('colors.brand-border');
-    border-bottom: 17px solid transparent;
-    border-left: 17px solid transparent;
-    @apply absolute;
-    left: -17px;
-    top: 0px;
-}
-
-.voucherCode__btn {
-    @apply relative;
-}
-
-.voucherCode__btn:hover .right-arrow {
-    border-left-color: theme('colors.brand-primary');
-}
-.voucherCode__btn:hover .test-arrow {
-    border-left-color: theme('colors.brand-primary');
-}
-.voucherCode__btn:hover .test-arrow-top {
-    border-top-color: theme('colors.brand-primary');
-}
-
-.voucherCode__code:focus {
-    @apply border-0;
-}

package/dist/Components/BreadcrumbsBordered/index.js

@@ -1,49 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-const Breadcrumbs = _ref => {
-  let {
-    className,
-    links
-  } = _ref;
-  const linksLength = Object.keys(links).length;
-  let classes = 'flex py-2 px-8 ' + className;
-  return /*#__PURE__*/React.createElement("ul", {
-    className: classes
-  }, links && links.map((link, i) => {
-    return /*#__PURE__*/React.createElement("div", {
-      key: link.name
-    }, /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("div", {
-      className: " px-4 mx-3 hover:bg-brand-primary bg-brand-border border-brand-primary voucherCode__btn h-8"
-    }, i + 1 >= linksLength ? /*#__PURE__*/React.createElement("p", {
-      className: "pl-2 pt-1"
-    }, /*#__PURE__*/React.createElement("span", {
-      className: "test-arrow"
-    }), /*#__PURE__*/React.createElement("span", {
-      className: "test-arrow-top"
-    }), /*#__PURE__*/React.createElement("span", {
-      className: "left-arrow"
-    }), link.name, /*#__PURE__*/React.createElement("span", {
-      className: "right-arrow"
-    })) : /*#__PURE__*/React.createElement("a", {
-      href: link.link
-    }, /*#__PURE__*/React.createElement("p", {
-      className: i !== 0 ? 'pl-2 pt-1 text-social-facebook hover:underline' : 'pt-1 text-social-facebook hover:underline'
-    }, /*#__PURE__*/React.createElement("span", {
-      className: "test-arrow"
-    }), /*#__PURE__*/React.createElement("span", {
-      className: "test-arrow-top"
-    }), i !== 0 ? /*#__PURE__*/React.createElement("span", {
-      className: "left-arrow"
-    }) : null, link.name, /*#__PURE__*/React.createElement("span", {
-      className: "right-arrow"
-    }))))));
-  }));
-};
-
-var _default = Breadcrumbs;
-exports.default = _default;