ecomlab-components-next 0.1.4 → 0.1.5

package/dist/app/globals.css

@@ -0,0 +1,42 @@
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+html,
+body {
+  max-width: 100vw;
+  overflow-x: hidden;
+}
+
+body {
+  color: var(--foreground);
+  background: var(--background);
+  font-family: Arial, Helvetica, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    color-scheme: dark;
+  }
+}

package/dist/app/layout.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = RootLayout;
+exports.metadata = void 0;
+var _google = require("next/font/google");
+require("./globals.css");
+var geistSans = (0, _google.Geist)({
+  variable: "--font-geist-sans",
+  subsets: ["latin"]
+});
+var geistMono = (0, _google.Geist_Mono)({
+  variable: "--font-geist-mono",
+  subsets: ["latin"]
+});
+var metadata = exports.metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app"
+};
+function RootLayout(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement("html", {
+    lang: "en"
+  }, /*#__PURE__*/React.createElement("body", {
+    className: "".concat(geistSans.variable, " ").concat(geistMono.variable)
+  }, children));
+}

package/dist/app/page.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = Home;
+var _image = _interopRequireDefault(require("next/image"));
+var _pageModule = _interopRequireDefault(require("./page.module.css"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function Home() {
+  return /*#__PURE__*/React.createElement("div", {
+    className: _pageModule["default"].page
+  }, /*#__PURE__*/React.createElement("main", {
+    className: _pageModule["default"].main
+  }, /*#__PURE__*/React.createElement(_image["default"], {
+    className: _pageModule["default"].logo,
+    src: "/next.svg",
+    alt: "Next.js logo",
+    width: 180,
+    height: 38,
+    priority: true
+  }), /*#__PURE__*/React.createElement("ol", null, /*#__PURE__*/React.createElement("li", null, "Get started by editing ", /*#__PURE__*/React.createElement("code", null, "src/app/page.js"), "."), /*#__PURE__*/React.createElement("li", null, "Save and see your changes instantly.")), /*#__PURE__*/React.createElement("div", {
+    className: _pageModule["default"].ctas
+  }, /*#__PURE__*/React.createElement("a", {
+    className: _pageModule["default"].primary,
+    href: "https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app",
+    target: "_blank",
+    rel: "noopener noreferrer"
+  }, /*#__PURE__*/React.createElement(_image["default"], {
+    className: _pageModule["default"].logo,
+    src: "/vercel.svg",
+    alt: "Vercel logomark",
+    width: 20,
+    height: 20
+  }), "Deploy now"), /*#__PURE__*/React.createElement("a", {
+    href: "https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app",
+    target: "_blank",
+    rel: "noopener noreferrer",
+    className: _pageModule["default"].secondary
+  }, "Read our docs"))), /*#__PURE__*/React.createElement("footer", {
+    className: _pageModule["default"].footer
+  }, /*#__PURE__*/React.createElement("a", {
+    href: "https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app",
+    target: "_blank",
+    rel: "noopener noreferrer"
+  }, /*#__PURE__*/React.createElement(_image["default"], {
+    "aria-hidden": true,
+    src: "/file.svg",
+    alt: "File icon",
+    width: 16,
+    height: 16
+  }), "Learn"), /*#__PURE__*/React.createElement("a", {
+    href: "https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app",
+    target: "_blank",
+    rel: "noopener noreferrer"
+  }, /*#__PURE__*/React.createElement(_image["default"], {
+    "aria-hidden": true,
+    src: "/window.svg",
+    alt: "Window icon",
+    width: 16,
+    height: 16
+  }), "Examples"), /*#__PURE__*/React.createElement("a", {
+    href: "https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app",
+    target: "_blank",
+    rel: "noopener noreferrer"
+  }, /*#__PURE__*/React.createElement(_image["default"], {
+    "aria-hidden": true,
+    src: "/globe.svg",
+    alt: "Globe icon",
+    width: 16,
+    height: 16
+  }), "Go to nextjs.org \u2192")));
+}

package/dist/app/page.module.css

@@ -0,0 +1,168 @@
+.page {
+  --gray-rgb: 0, 0, 0;
+  --gray-alpha-200: rgba(var(--gray-rgb), 0.08);
+  --gray-alpha-100: rgba(var(--gray-rgb), 0.05);
+
+  --button-primary-hover: #383838;
+  --button-secondary-hover: #f2f2f2;
+
+  display: grid;
+  grid-template-rows: 20px 1fr 20px;
+  align-items: center;
+  justify-items: center;
+  min-height: 100svh;
+  padding: 80px;
+  gap: 64px;
+  font-family: var(--font-geist-sans);
+}
+
+@media (prefers-color-scheme: dark) {
+  .page {
+    --gray-rgb: 255, 255, 255;
+    --gray-alpha-200: rgba(var(--gray-rgb), 0.145);
+    --gray-alpha-100: rgba(var(--gray-rgb), 0.06);
+
+    --button-primary-hover: #ccc;
+    --button-secondary-hover: #1a1a1a;
+  }
+}
+
+.main {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  grid-row-start: 2;
+}
+
+.main ol {
+  font-family: var(--font-geist-mono);
+  padding-left: 0;
+  margin: 0;
+  font-size: 14px;
+  line-height: 24px;
+  letter-spacing: -0.01em;
+  list-style-position: inside;
+}
+
+.main li:not(:last-of-type) {
+  margin-bottom: 8px;
+}
+
+.main code {
+  font-family: inherit;
+  background: var(--gray-alpha-100);
+  padding: 2px 4px;
+  border-radius: 4px;
+  font-weight: 600;
+}
+
+.ctas {
+  display: flex;
+  gap: 16px;
+}
+
+.ctas a {
+  appearance: none;
+  border-radius: 128px;
+  height: 48px;
+  padding: 0 20px;
+  border: none;
+  border: 1px solid transparent;
+  transition:
+    background 0.2s,
+    color 0.2s,
+    border-color 0.2s;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  line-height: 20px;
+  font-weight: 500;
+}
+
+a.primary {
+  background: var(--foreground);
+  color: var(--background);
+  gap: 8px;
+}
+
+a.secondary {
+  border-color: var(--gray-alpha-200);
+  min-width: 180px;
+}
+
+.footer {
+  grid-row-start: 3;
+  display: flex;
+  gap: 24px;
+}
+
+.footer a {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.footer img {
+  flex-shrink: 0;
+}
+
+/* Enable hover only on non-touch devices */
+@media (hover: hover) and (pointer: fine) {
+  a.primary:hover {
+    background: var(--button-primary-hover);
+    border-color: transparent;
+  }
+
+  a.secondary:hover {
+    background: var(--button-secondary-hover);
+    border-color: transparent;
+  }
+
+  .footer a:hover {
+    text-decoration: underline;
+    text-underline-offset: 4px;
+  }
+}
+
+@media (max-width: 600px) {
+  .page {
+    padding: 32px;
+    padding-bottom: 80px;
+  }
+
+  .main {
+    align-items: center;
+  }
+
+  .main ol {
+    text-align: center;
+  }
+
+  .ctas {
+    flex-direction: column;
+  }
+
+  .ctas a {
+    font-size: 14px;
+    height: 40px;
+    padding: 0 16px;
+  }
+
+  a.secondary {
+    min-width: auto;
+  }
+
+  .footer {
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .logo {
+    filter: invert();
+  }
+}

package/dist/components/Button.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ButtonModule = _interopRequireDefault(require("./Button.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var Button = function Button(_ref) {
+  var label = _ref.label,
+    onClick = _ref.onClick,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'primary' : _ref$variant;
+  return /*#__PURE__*/_react["default"].createElement("button", {
+    className: "".concat(_ButtonModule["default"].button, " ").concat(_ButtonModule["default"][variant]),
+    onClick: onClick,
+    disabled: disabled
+  }, label);
+};
+var _default = exports["default"] = Button;

package/dist/components/Button.module.scss

@@ -0,0 +1,18 @@
+.button {
+    padding: 10px 20px;
+    font-size: 16px;
+    border: none;
+    cursor: pointer;
+  }
+  
+  .primary {
+    background-color: #0070f3;
+    color: white;
+  }
+  
+  .secondary {
+    background-color: white;
+    color: #0070f3;
+    border: 1px solid #0070f3;
+  }
+  

package/dist/components/Button.stories.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Secondary = exports.Primary = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Button = _interopRequireDefault(require("./Button"));
+var _react2 = require("@storybook/react");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var _default = exports["default"] = {
+  title: 'Components/Button',
+  component: _Button["default"]
+};
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_Button["default"], args);
+};
+var Primary = exports.Primary = Template.bind({});
+Primary.args = {
+  label: 'Primary Button',
+  variant: 'primary',
+  onClick: function onClick() {
+    return alert('Clicked!');
+  }
+};
+var Secondary = exports.Secondary = Template.bind({});
+Secondary.args = {
+  label: 'Secondary Button',
+  variant: 'secondary',
+  onClick: function onClick() {
+    return alert('Clicked!');
+  }
+};

package/dist/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Button", {
+  enumerable: true,
+  get: function get() {
+    return _Button["default"];
+  }
+});
+var _Button = _interopRequireDefault(require("./components/Button"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }

package/dist/stories/Button.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Button = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+require("./button.css");
+var _excluded = ["primary", "backgroundColor", "size", "label"];
+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 _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+/** Primary UI component for user interaction */
+var Button = exports.Button = function Button(_ref) {
+  var primary = _ref.primary,
+    backgroundColor = _ref.backgroundColor,
+    size = _ref.size,
+    label = _ref.label,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+  return /*#__PURE__*/_react["default"].createElement("button", _extends({
+    type: "button",
+    className: ['storybook-button', "storybook-button--".concat(size), mode].join(' ')
+  }, props), label, /*#__PURE__*/_react["default"].createElement("style", {
+    jsx: true
+  }, "\n        button {\n          background-color: ".concat(backgroundColor, ";\n        }\n      ")));
+};
+Button.propTypes = {
+  /** Is this the principal call to action on the page? */
+  primary: _propTypes["default"].bool,
+  /** What background color to use */
+  backgroundColor: _propTypes["default"].string,
+  /** How large should the button be? */
+  size: _propTypes["default"].oneOf(['small', 'medium', 'large']),
+  /** Button contents */
+  label: _propTypes["default"].string.isRequired,
+  /** Optional click handler */
+  onClick: _propTypes["default"].func
+};
+Button.defaultProps = {
+  backgroundColor: null,
+  primary: false,
+  size: 'medium',
+  onClick: undefined
+};

package/dist/stories/Button.stories.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Small = exports.Secondary = exports.Primary = exports.Large = void 0;
+var _test = require("@storybook/test");
+var _Button = require("./Button");
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+var _default = exports["default"] = {
+  title: 'Example/Button',
+  component: _Button.Button,
+  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: {
+    backgroundColor: {
+      control: 'color'
+    }
+  },
+  // 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: (0, _test.fn)()
+  }
+}; // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+var Primary = exports.Primary = {
+  args: {
+    primary: true,
+    label: 'Button'
+  }
+};
+var Secondary = exports.Secondary = {
+  args: {
+    label: 'Button'
+  }
+};
+var Large = exports.Large = {
+  args: {
+    size: 'large',
+    label: 'Button'
+  }
+};
+var Small = exports.Small = {
+  args: {
+    size: 'small',
+    label: 'Button'
+  }
+};