npm - ecomlab-components-next - Versions diffs - 0.1.1 → 0.1.3 - Mend

ecomlab-components-next 0.1.1 → 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (36) hide show

package/package.json +5 -2
package/src/app/favicon.ico +0 -0
package/src/app/globals.css +42 -0
package/src/app/layout.js +27 -0
package/src/app/page.js +95 -0
package/src/app/page.module.css +168 -0
package/src/components/Button.js +14 -0
package/src/components/Button.module.scss +18 -0
package/src/components/Button.stories.js +24 -0
package/src/index.js +1 -0
package/src/stories/Button.jsx +44 -0
package/src/stories/Button.stories.js +49 -0
package/src/stories/Configure.mdx +446 -0
package/src/stories/Header.jsx +60 -0
package/src/stories/Header.stories.js +30 -0
package/src/stories/Page.jsx +68 -0
package/src/stories/Page.stories.js +28 -0
package/src/stories/assets/accessibility.png +0 -0
package/src/stories/assets/accessibility.svg +1 -0
package/src/stories/assets/addon-library.png +0 -0
package/src/stories/assets/assets.png +0 -0
package/src/stories/assets/avif-test-image.avif +0 -0
package/src/stories/assets/context.png +0 -0
package/src/stories/assets/discord.svg +1 -0
package/src/stories/assets/docs.png +0 -0
package/src/stories/assets/figma-plugin.png +0 -0
package/src/stories/assets/github.svg +1 -0
package/src/stories/assets/share.png +0 -0
package/src/stories/assets/styling.png +0 -0
package/src/stories/assets/testing.png +0 -0
package/src/stories/assets/theming.png +0 -0
package/src/stories/assets/tutorials.svg +1 -0
package/src/stories/assets/youtube.svg +1 -0
package/src/stories/button.css +30 -0
package/src/stories/header.css +32 -0
package/src/stories/page.css +68 -0

package/package.json CHANGED Viewed

@@ -1,9 +1,12 @@
 {
   "name": "ecomlab-components-next",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "A set of common and reusable React components",
   "main": "build/index.js",
-  "files": ["build"],
+  "files": [
+    "src",
+    "dist"
+  ],
     "publishConfig": {
       "access": "public"
     },

package/src/app/favicon.ico ADDED Viewed

Binary file

package/src/app/globals.css ADDED Viewed

@@ -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/src/app/layout.js ADDED Viewed

@@ -0,0 +1,27 @@
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+export const metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body className={`${geistSans.variable} ${geistMono.variable}`}>
+        {children}
+      </body>
+    </html>
+  );
+}

package/src/app/page.js ADDED Viewed

@@ -0,0 +1,95 @@
+import Image from "next/image";
+import styles from "./page.module.css";
+export default function Home() {
+  return (
+    <div className={styles.page}>
+      <main className={styles.main}>
+        <Image
+          className={styles.logo}
+          src="/next.svg"
+          alt="Next.js logo"
+          width={180}
+          height={38}
+          priority
+        />
+        <ol>
+          <li>
+            Get started by editing <code>src/app/page.js</code>.
+          </li>
+          <li>Save and see your changes instantly.</li>
+        </ol>
+        <div className={styles.ctas}>
+          <a
+            className={styles.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"
+          >
+            <Image
+              className={styles.logo}
+              src="/vercel.svg"
+              alt="Vercel logomark"
+              width={20}
+              height={20}
+            />
+            Deploy now
+          </a>
+          <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={styles.secondary}
+          >
+            Read our docs
+          </a>
+        </div>
+      </main>
+      <footer className={styles.footer}>
+        <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"
+        >
+          <Image
+            aria-hidden
+            src="/file.svg"
+            alt="File icon"
+            width={16}
+            height={16}
+          />
+          Learn
+        </a>
+        <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"
+        >
+          <Image
+            aria-hidden
+            src="/window.svg"
+            alt="Window icon"
+            width={16}
+            height={16}
+          />
+          Examples
+        </a>
+        <a
+          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Image
+            aria-hidden
+            src="/globe.svg"
+            alt="Globe icon"
+            width={16}
+            height={16}
+          />
+          Go to nextjs.org →
+        </a>
+      </footer>
+    </div>
+  );
+}

package/src/app/page.module.css ADDED Viewed

@@ -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/src/components/Button.js ADDED Viewed

@@ -0,0 +1,14 @@
+import React from 'react';
+import styles from './Button.module.scss';
+export default Button = ({ label, onClick, disabled = false, variant = 'primary' }) => {
+  return (
+    <button
+      className={`${styles.button} ${styles[variant]}`}
+      onClick={onClick}
+      disabled={disabled}
+    >
+      {label}
+    </button>
+  );
+};

package/src/components/Button.module.scss ADDED Viewed

@@ -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/src/components/Button.stories.js ADDED Viewed

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Button } from './Button';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+export default {
+  title: 'Components/Button',
+  component: Button,
+}
+const Template = (args) => <Button {...args} />;
+export const Primary = Template.bind({});
+Primary.args = {
+  label: 'Primary Button',
+  variant: 'primary',
+  onClick: () => alert('Clicked!'),
+};
+export const Secondary = Template.bind({});
+Secondary.args = {
+  label: 'Secondary Button',
+  variant: 'secondary',
+  onClick: () => alert('Clicked!'),
+};

package/src/index.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ export { default as Button } from './components/Button/Button'

package/src/stories/Button.jsx ADDED Viewed

@@ -0,0 +1,44 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './button.css';
+/** Primary UI component for user interaction */
+export const Button = ({ primary, backgroundColor, size, label, ...props }) => {
+  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+  return (
+    <button
+      type="button"
+      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+      {...props}
+    >
+      {label}
+      <style jsx>{`
+        button {
+          background-color: ${backgroundColor};
+        }
+      `}</style>
+    </button>
+  );
+};
+Button.propTypes = {
+  /** Is this the principal call to action on the page? */
+  primary: PropTypes.bool,
+  /** What background color to use */
+  backgroundColor: PropTypes.string,
+  /** How large should the button be? */
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  /** Button contents */
+  label: PropTypes.string.isRequired,
+  /** Optional click handler */
+  onClick: PropTypes.func,
+};
+Button.defaultProps = {
+  backgroundColor: null,
+  primary: false,
+  size: 'medium',
+  onClick: undefined,
+};

package/src/stories/Button.stories.js ADDED Viewed

@@ -0,0 +1,49 @@
+import { fn } from '@storybook/test';
+import { Button } from './Button';
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+export default {
+  title: 'Example/Button',
+  component: 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: fn() },
+};
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+export const Secondary = {
+  args: {
+    label: 'Button',
+  },
+};
+export const Large = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
+};
+export const Small = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
+};