ecomlab-components-next 0.1.2 → 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 (127) hide show
  1. package/package.json +5 -2
  2. package/src/app/globals.css +42 -0
  3. package/src/app/layout.js +27 -0
  4. package/src/app/page.js +95 -0
  5. package/src/app/page.module.css +168 -0
  6. package/src/components/Button.js +14 -0
  7. package/src/components/Button.module.scss +18 -0
  8. package/src/components/Button.stories.js +24 -0
  9. package/src/index.js +1 -0
  10. package/src/stories/Button.jsx +44 -0
  11. package/src/stories/Button.stories.js +49 -0
  12. package/src/stories/Configure.mdx +446 -0
  13. package/src/stories/Header.jsx +60 -0
  14. package/src/stories/Header.stories.js +30 -0
  15. package/src/stories/Page.jsx +68 -0
  16. package/src/stories/Page.stories.js +28 -0
  17. package/src/stories/assets/accessibility.png +0 -0
  18. package/src/stories/assets/accessibility.svg +1 -0
  19. package/src/stories/assets/addon-library.png +0 -0
  20. package/src/stories/assets/assets.png +0 -0
  21. package/src/stories/assets/avif-test-image.avif +0 -0
  22. package/src/stories/assets/context.png +0 -0
  23. package/src/stories/assets/discord.svg +1 -0
  24. package/src/stories/assets/docs.png +0 -0
  25. package/src/stories/assets/figma-plugin.png +0 -0
  26. package/src/stories/assets/github.svg +1 -0
  27. package/src/stories/assets/share.png +0 -0
  28. package/src/stories/assets/styling.png +0 -0
  29. package/src/stories/assets/testing.png +0 -0
  30. package/src/stories/assets/theming.png +0 -0
  31. package/src/stories/assets/tutorials.svg +1 -0
  32. package/src/stories/assets/youtube.svg +1 -0
  33. package/src/stories/button.css +30 -0
  34. package/src/stories/header.css +32 -0
  35. package/src/stories/page.css +68 -0
  36. package/.next/BUILD_ID +0 -1
  37. package/.next/app-build-manifest.json +0 -28
  38. package/.next/app-path-routes-manifest.json +0 -1
  39. package/.next/build-manifest.json +0 -33
  40. package/.next/cache/.rscinfo +0 -1
  41. package/.next/cache/webpack/client-development/0.pack.gz +0 -0
  42. package/.next/cache/webpack/client-development/index.pack.gz +0 -0
  43. package/.next/cache/webpack/client-production/0.pack +0 -0
  44. package/.next/cache/webpack/client-production/index.pack +0 -0
  45. package/.next/cache/webpack/edge-server-production/0.pack +0 -0
  46. package/.next/cache/webpack/edge-server-production/index.pack +0 -0
  47. package/.next/cache/webpack/server-production/0.pack +0 -0
  48. package/.next/cache/webpack/server-production/index.pack +0 -0
  49. package/.next/cache/webpack/server-production/index.pack.old +0 -0
  50. package/.next/diagnostics/build-diagnostics.json +0 -6
  51. package/.next/diagnostics/framework.json +0 -1
  52. package/.next/export-marker.json +0 -1
  53. package/.next/images-manifest.json +0 -1
  54. package/.next/next-minimal-server.js.nft.json +0 -1
  55. package/.next/next-server.js.nft.json +0 -1
  56. package/.next/package.json +0 -1
  57. package/.next/prerender-manifest.json +0 -1
  58. package/.next/react-loadable-manifest.json +0 -14
  59. package/.next/required-server-files.json +0 -1
  60. package/.next/routes-manifest.json +0 -1
  61. package/.next/server/app/_not-found/page.js +0 -1
  62. package/.next/server/app/_not-found/page.js.nft.json +0 -1
  63. package/.next/server/app/_not-found/page_client-reference-manifest.js +0 -1
  64. package/.next/server/app/_not-found.html +0 -1
  65. package/.next/server/app/_not-found.meta +0 -8
  66. package/.next/server/app/_not-found.rsc +0 -12
  67. package/.next/server/app/favicon.ico/route.js +0 -1
  68. package/.next/server/app/favicon.ico/route.js.nft.json +0 -1
  69. package/.next/server/app/favicon.ico.meta +0 -1
  70. package/.next/server/app/index.html +0 -1
  71. package/.next/server/app/index.meta +0 -7
  72. package/.next/server/app/index.rsc +0 -14
  73. package/.next/server/app/page.js +0 -1
  74. package/.next/server/app/page.js.nft.json +0 -1
  75. package/.next/server/app/page_client-reference-manifest.js +0 -1
  76. package/.next/server/app-paths-manifest.json +0 -5
  77. package/.next/server/chunks/425.js +0 -3
  78. package/.next/server/chunks/627.js +0 -6
  79. package/.next/server/chunks/638.js +0 -13
  80. package/.next/server/functions-config-manifest.json +0 -1
  81. package/.next/server/interception-route-rewrite-manifest.js +0 -1
  82. package/.next/server/middleware-build-manifest.js +0 -1
  83. package/.next/server/middleware-manifest.json +0 -6
  84. package/.next/server/middleware-react-loadable-manifest.js +0 -1
  85. package/.next/server/next-font-manifest.js +0 -1
  86. package/.next/server/next-font-manifest.json +0 -1
  87. package/.next/server/pages/404.html +0 -1
  88. package/.next/server/pages/500.html +0 -1
  89. package/.next/server/pages/_app.js +0 -1
  90. package/.next/server/pages/_app.js.nft.json +0 -1
  91. package/.next/server/pages/_document.js +0 -1
  92. package/.next/server/pages/_document.js.nft.json +0 -1
  93. package/.next/server/pages/_error.js +0 -1
  94. package/.next/server/pages/_error.js.nft.json +0 -1
  95. package/.next/server/pages-manifest.json +0 -1
  96. package/.next/server/server-reference-manifest.js +0 -1
  97. package/.next/server/server-reference-manifest.json +0 -1
  98. package/.next/server/webpack-runtime.js +0 -1
  99. package/.next/static/1YznzjXvOMQReYG6bLqMG/_buildManifest.js +0 -1
  100. package/.next/static/1YznzjXvOMQReYG6bLqMG/_ssgManifest.js +0 -1
  101. package/.next/static/chunks/203.2b4c1ee4fbe3a7cf.js +0 -1
  102. package/.next/static/chunks/218.dc8bcaf0a25fd997.js +0 -1
  103. package/.next/static/chunks/4bd1b696-095a8791bedde78b.js +0 -1
  104. package/.next/static/chunks/517-d049cea96c7e2042.js +0 -2
  105. package/.next/static/chunks/970-60f241499fe90dca.js +0 -1
  106. package/.next/static/chunks/app/_not-found/page-0043d75de3bc49f5.js +0 -1
  107. package/.next/static/chunks/app/layout-e95fafb2c124d8ce.js +0 -1
  108. package/.next/static/chunks/app/page-884d1a12b6a20245.js +0 -1
  109. package/.next/static/chunks/framework-a6eb4bce5bd8ed9b.js +0 -1
  110. package/.next/static/chunks/main-6c1c9eae8a74ba46.js +0 -1
  111. package/.next/static/chunks/main-app-0e7a7e4001790fe4.js +0 -1
  112. package/.next/static/chunks/pages/_app-430fec730128923e.js +0 -1
  113. package/.next/static/chunks/pages/_error-a8e0d2ce10288bc9.js +0 -1
  114. package/.next/static/chunks/polyfills-42372ed130431b0a.js +0 -1
  115. package/.next/static/chunks/webpack-29812bcae9c41d3a.js +0 -1
  116. package/.next/static/css/7b8e7621c8016749.css +0 -1
  117. package/.next/static/css/e9ef44aaaa3cec91.css +0 -1
  118. package/.next/static/media/569ce4b8f30dc480-s.p.woff2 +0 -0
  119. package/.next/static/media/747892c23ea88013-s.woff2 +0 -0
  120. package/.next/static/media/93f479601ee12b01-s.p.woff2 +0 -0
  121. package/.next/static/media/ba015fad6dcf6784-s.woff2 +0 -0
  122. package/.next/trace +0 -8
  123. package/.next/types/app/layout.ts +0 -84
  124. package/.next/types/app/page.ts +0 -84
  125. package/.next/types/cache-life.d.ts +0 -141
  126. package/.next/types/package.json +0 -1
  127. /package/{.next/server/app/favicon.ico.body → src/app/favicon.ico} +0 -0
package/package.json CHANGED
@@ -1,9 +1,12 @@
1
1
  {
2
2
  "name": "ecomlab-components-next",
3
- "version": "0.1.2",
3
+ "version": "0.1.3",
4
4
  "description": "A set of common and reusable React components",
5
5
  "main": "build/index.js",
6
- "files": [".next"],
6
+ "files": [
7
+ "src",
8
+ "dist"
9
+ ],
7
10
  "publishConfig": {
8
11
  "access": "public"
9
12
  },
package/src/app/globals.css ADDED
@@ -0,0 +1,42 @@
1
+ :root {
2
+ --background: #ffffff;
3
+ --foreground: #171717;
4
+ }
5
+
6
+ @media (prefers-color-scheme: dark) {
7
+ :root {
8
+ --background: #0a0a0a;
9
+ --foreground: #ededed;
10
+ }
11
+ }
12
+
13
+ html,
14
+ body {
15
+ max-width: 100vw;
16
+ overflow-x: hidden;
17
+ }
18
+
19
+ body {
20
+ color: var(--foreground);
21
+ background: var(--background);
22
+ font-family: Arial, Helvetica, sans-serif;
23
+ -webkit-font-smoothing: antialiased;
24
+ -moz-osx-font-smoothing: grayscale;
25
+ }
26
+
27
+ * {
28
+ box-sizing: border-box;
29
+ padding: 0;
30
+ margin: 0;
31
+ }
32
+
33
+ a {
34
+ color: inherit;
35
+ text-decoration: none;
36
+ }
37
+
38
+ @media (prefers-color-scheme: dark) {
39
+ html {
40
+ color-scheme: dark;
41
+ }
42
+ }
package/src/app/layout.js ADDED
@@ -0,0 +1,27 @@
1
+ import { Geist, Geist_Mono } from "next/font/google";
2
+ import "./globals.css";
3
+
4
+ const geistSans = Geist({
5
+ variable: "--font-geist-sans",
6
+ subsets: ["latin"],
7
+ });
8
+
9
+ const geistMono = Geist_Mono({
10
+ variable: "--font-geist-mono",
11
+ subsets: ["latin"],
12
+ });
13
+
14
+ export const metadata = {
15
+ title: "Create Next App",
16
+ description: "Generated by create next app",
17
+ };
18
+
19
+ export default function RootLayout({ children }) {
20
+ return (
21
+ <html lang="en">
22
+ <body className={`${geistSans.variable} ${geistMono.variable}`}>
23
+ {children}
24
+ </body>
25
+ </html>
26
+ );
27
+ }
package/src/app/page.js ADDED
@@ -0,0 +1,95 @@
1
+ import Image from "next/image";
2
+ import styles from "./page.module.css";
3
+
4
+ export default function Home() {
5
+ return (
6
+ <div className={styles.page}>
7
+ <main className={styles.main}>
8
+ <Image
9
+ className={styles.logo}
10
+ src="/next.svg"
11
+ alt="Next.js logo"
12
+ width={180}
13
+ height={38}
14
+ priority
15
+ />
16
+ <ol>
17
+ <li>
18
+ Get started by editing <code>src/app/page.js</code>.
19
+ </li>
20
+ <li>Save and see your changes instantly.</li>
21
+ </ol>
22
+
23
+ <div className={styles.ctas}>
24
+ <a
25
+ className={styles.primary}
26
+ href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
27
+ target="_blank"
28
+ rel="noopener noreferrer"
29
+ >
30
+ <Image
31
+ className={styles.logo}
32
+ src="/vercel.svg"
33
+ alt="Vercel logomark"
34
+ width={20}
35
+ height={20}
36
+ />
37
+ Deploy now
38
+ </a>
39
+ <a
40
+ href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
41
+ target="_blank"
42
+ rel="noopener noreferrer"
43
+ className={styles.secondary}
44
+ >
45
+ Read our docs
46
+ </a>
47
+ </div>
48
+ </main>
49
+ <footer className={styles.footer}>
50
+ <a
51
+ href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
52
+ target="_blank"
53
+ rel="noopener noreferrer"
54
+ >
55
+ <Image
56
+ aria-hidden
57
+ src="/file.svg"
58
+ alt="File icon"
59
+ width={16}
60
+ height={16}
61
+ />
62
+ Learn
63
+ </a>
64
+ <a
65
+ href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
66
+ target="_blank"
67
+ rel="noopener noreferrer"
68
+ >
69
+ <Image
70
+ aria-hidden
71
+ src="/window.svg"
72
+ alt="Window icon"
73
+ width={16}
74
+ height={16}
75
+ />
76
+ Examples
77
+ </a>
78
+ <a
79
+ href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
80
+ target="_blank"
81
+ rel="noopener noreferrer"
82
+ >
83
+ <Image
84
+ aria-hidden
85
+ src="/globe.svg"
86
+ alt="Globe icon"
87
+ width={16}
88
+ height={16}
89
+ />
90
+ Go to nextjs.org →
91
+ </a>
92
+ </footer>
93
+ </div>
94
+ );
95
+ }
package/src/app/page.module.css ADDED
@@ -0,0 +1,168 @@
1
+ .page {
2
+ --gray-rgb: 0, 0, 0;
3
+ --gray-alpha-200: rgba(var(--gray-rgb), 0.08);
4
+ --gray-alpha-100: rgba(var(--gray-rgb), 0.05);
5
+
6
+ --button-primary-hover: #383838;
7
+ --button-secondary-hover: #f2f2f2;
8
+
9
+ display: grid;
10
+ grid-template-rows: 20px 1fr 20px;
11
+ align-items: center;
12
+ justify-items: center;
13
+ min-height: 100svh;
14
+ padding: 80px;
15
+ gap: 64px;
16
+ font-family: var(--font-geist-sans);
17
+ }
18
+
19
+ @media (prefers-color-scheme: dark) {
20
+ .page {
21
+ --gray-rgb: 255, 255, 255;
22
+ --gray-alpha-200: rgba(var(--gray-rgb), 0.145);
23
+ --gray-alpha-100: rgba(var(--gray-rgb), 0.06);
24
+
25
+ --button-primary-hover: #ccc;
26
+ --button-secondary-hover: #1a1a1a;
27
+ }
28
+ }
29
+
30
+ .main {
31
+ display: flex;
32
+ flex-direction: column;
33
+ gap: 32px;
34
+ grid-row-start: 2;
35
+ }
36
+
37
+ .main ol {
38
+ font-family: var(--font-geist-mono);
39
+ padding-left: 0;
40
+ margin: 0;
41
+ font-size: 14px;
42
+ line-height: 24px;
43
+ letter-spacing: -0.01em;
44
+ list-style-position: inside;
45
+ }
46
+
47
+ .main li:not(:last-of-type) {
48
+ margin-bottom: 8px;
49
+ }
50
+
51
+ .main code {
52
+ font-family: inherit;
53
+ background: var(--gray-alpha-100);
54
+ padding: 2px 4px;
55
+ border-radius: 4px;
56
+ font-weight: 600;
57
+ }
58
+
59
+ .ctas {
60
+ display: flex;
61
+ gap: 16px;
62
+ }
63
+
64
+ .ctas a {
65
+ appearance: none;
66
+ border-radius: 128px;
67
+ height: 48px;
68
+ padding: 0 20px;
69
+ border: none;
70
+ border: 1px solid transparent;
71
+ transition:
72
+ background 0.2s,
73
+ color 0.2s,
74
+ border-color 0.2s;
75
+ cursor: pointer;
76
+ display: flex;
77
+ align-items: center;
78
+ justify-content: center;
79
+ font-size: 16px;
80
+ line-height: 20px;
81
+ font-weight: 500;
82
+ }
83
+
84
+ a.primary {
85
+ background: var(--foreground);
86
+ color: var(--background);
87
+ gap: 8px;
88
+ }
89
+
90
+ a.secondary {
91
+ border-color: var(--gray-alpha-200);
92
+ min-width: 180px;
93
+ }
94
+
95
+ .footer {
96
+ grid-row-start: 3;
97
+ display: flex;
98
+ gap: 24px;
99
+ }
100
+
101
+ .footer a {
102
+ display: flex;
103
+ align-items: center;
104
+ gap: 8px;
105
+ }
106
+
107
+ .footer img {
108
+ flex-shrink: 0;
109
+ }
110
+
111
+ /* Enable hover only on non-touch devices */
112
+ @media (hover: hover) and (pointer: fine) {
113
+ a.primary:hover {
114
+ background: var(--button-primary-hover);
115
+ border-color: transparent;
116
+ }
117
+
118
+ a.secondary:hover {
119
+ background: var(--button-secondary-hover);
120
+ border-color: transparent;
121
+ }
122
+
123
+ .footer a:hover {
124
+ text-decoration: underline;
125
+ text-underline-offset: 4px;
126
+ }
127
+ }
128
+
129
+ @media (max-width: 600px) {
130
+ .page {
131
+ padding: 32px;
132
+ padding-bottom: 80px;
133
+ }
134
+
135
+ .main {
136
+ align-items: center;
137
+ }
138
+
139
+ .main ol {
140
+ text-align: center;
141
+ }
142
+
143
+ .ctas {
144
+ flex-direction: column;
145
+ }
146
+
147
+ .ctas a {
148
+ font-size: 14px;
149
+ height: 40px;
150
+ padding: 0 16px;
151
+ }
152
+
153
+ a.secondary {
154
+ min-width: auto;
155
+ }
156
+
157
+ .footer {
158
+ flex-wrap: wrap;
159
+ align-items: center;
160
+ justify-content: center;
161
+ }
162
+ }
163
+
164
+ @media (prefers-color-scheme: dark) {
165
+ .logo {
166
+ filter: invert();
167
+ }
168
+ }
package/src/components/Button.js ADDED
@@ -0,0 +1,14 @@
1
+ import React from 'react';
2
+ import styles from './Button.module.scss';
3
+
4
+ export default Button = ({ label, onClick, disabled = false, variant = 'primary' }) => {
5
+ return (
6
+ <button
7
+ className={`${styles.button} ${styles[variant]}`}
8
+ onClick={onClick}
9
+ disabled={disabled}
10
+ >
11
+ {label}
12
+ </button>
13
+ );
14
+ };
package/src/components/Button.module.scss ADDED
@@ -0,0 +1,18 @@
1
+ .button {
2
+ padding: 10px 20px;
3
+ font-size: 16px;
4
+ border: none;
5
+ cursor: pointer;
6
+ }
7
+
8
+ .primary {
9
+ background-color: #0070f3;
10
+ color: white;
11
+ }
12
+
13
+ .secondary {
14
+ background-color: white;
15
+ color: #0070f3;
16
+ border: 1px solid #0070f3;
17
+ }
18
+
package/src/components/Button.stories.js ADDED
@@ -0,0 +1,24 @@
1
+ import React from 'react';
2
+ import { Button } from './Button';
3
+ import { ComponentMeta, ComponentStory } from '@storybook/react';
4
+
5
+ export default {
6
+ title: 'Components/Button',
7
+ component: Button,
8
+ }
9
+
10
+ const Template = (args) => <Button {...args} />;
11
+
12
+ export const Primary = Template.bind({});
13
+ Primary.args = {
14
+ label: 'Primary Button',
15
+ variant: 'primary',
16
+ onClick: () => alert('Clicked!'),
17
+ };
18
+
19
+ export const Secondary = Template.bind({});
20
+ Secondary.args = {
21
+ label: 'Secondary Button',
22
+ variant: 'secondary',
23
+ onClick: () => alert('Clicked!'),
24
+ };
package/src/index.js ADDED
@@ -0,0 +1 @@
1
+ export { default as Button } from './components/Button/Button'
package/src/stories/Button.jsx ADDED
@@ -0,0 +1,44 @@
1
+ import React from 'react';
2
+
3
+ import PropTypes from 'prop-types';
4
+
5
+ import './button.css';
6
+
7
+ /** Primary UI component for user interaction */
8
+ export const Button = ({ primary, backgroundColor, size, label, ...props }) => {
9
+ const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
10
+ return (
11
+ <button
12
+ type="button"
13
+ className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
14
+ {...props}
15
+ >
16
+ {label}
17
+ <style jsx>{`
18
+ button {
19
+ background-color: ${backgroundColor};
20
+ }
21
+ `}</style>
22
+ </button>
23
+ );
24
+ };
25
+
26
+ Button.propTypes = {
27
+ /** Is this the principal call to action on the page? */
28
+ primary: PropTypes.bool,
29
+ /** What background color to use */
30
+ backgroundColor: PropTypes.string,
31
+ /** How large should the button be? */
32
+ size: PropTypes.oneOf(['small', 'medium', 'large']),
33
+ /** Button contents */
34
+ label: PropTypes.string.isRequired,
35
+ /** Optional click handler */
36
+ onClick: PropTypes.func,
37
+ };
38
+
39
+ Button.defaultProps = {
40
+ backgroundColor: null,
41
+ primary: false,
42
+ size: 'medium',
43
+ onClick: undefined,
44
+ };
package/src/stories/Button.stories.js ADDED
@@ -0,0 +1,49 @@
1
+ import { fn } from '@storybook/test';
2
+
3
+ import { Button } from './Button';
4
+
5
+ // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
6
+ export default {
7
+ title: 'Example/Button',
8
+ component: Button,
9
+ parameters: {
10
+ // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
11
+ layout: 'centered',
12
+ },
13
+ // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
14
+ tags: ['autodocs'],
15
+ // More on argTypes: https://storybook.js.org/docs/api/argtypes
16
+ argTypes: {
17
+ backgroundColor: { control: 'color' },
18
+ },
19
+ // 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
20
+ args: { onClick: fn() },
21
+ };
22
+
23
+ // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
24
+ export const Primary = {
25
+ args: {
26
+ primary: true,
27
+ label: 'Button',
28
+ },
29
+ };
30
+
31
+ export const Secondary = {
32
+ args: {
33
+ label: 'Button',
34
+ },
35
+ };
36
+
37
+ export const Large = {
38
+ args: {
39
+ size: 'large',
40
+ label: 'Button',
41
+ },
42
+ };
43
+
44
+ export const Small = {
45
+ args: {
46
+ size: 'small',
47
+ label: 'Button',
48
+ },
49
+ };