push for help

packages/story/package.json

@@ -13,8 +13,9 @@
   "scripts": {
     "build": "tsup",
     "lint": "eslint src/",
-    "dev": "tsup --watch",
+    "dev": "node watcher.mjs",
     "storybook": "storybook dev -p 6006",
+    "watch:storybook": "onchange 'src/**/*' -- npm run storybook",
     "build-storybook": "storybook build",
     "check-types": "tsc --noEmit",
     "chromatic": "npx chromatic --project-token=chpt_38d3f12ea463e0a"
@@ -61,7 +62,8 @@
   },
   "dependencies": {
     "chokidar": "^3.5.3",
-    "fs-extra": "^11.1.1"
+    "fs-extra": "^11.1.1",
+    "onchange": "^7.1.0"
   },
   "readme": "ERROR: No README data found!",
   "_id": "ui@0.0.0"

packages/story/src/button.tsx

@@ -0,0 +1,18 @@
+// import Link from "next/link";
+// import clsx from "clsx";
+
+type ButtonProps =
+  // | React.ComponentPropsWithoutRef<typeof Link>
+  // |
+  React.ComponentPropsWithoutRef<"button"> & { href?: undefined };
+
+export function Button({ className, ...props }: ButtonProps): JSX.Element {
+  className =
+    "ui-inline-flex ui-justify-center ui-rounded-2xl ui-bg-blue-600 ui-p-4 ui-text-base ui-font-semibold ui-text-white ui-hover:bg-blue-500 ui-focus:outline-none ui-focus-visible:outline-2 ui-focus-visible:outline-offset-2 ui-focus-visible:outline-blue-500 ui-active:text-white/70";
+  return typeof props.href === "undefined" ? (
+    <button className={className} {...props} />
+  ) : (
+    <></>
+    // <Link className={className} {...props} />
+  );
+}

packages/story/src/card.tsx

@@ -0,0 +1,30 @@
+import * as React from "react";
+
+export function Card({
+  title,
+  children,
+  href,
+}: {
+  title: string;
+  children: React.ReactNode;
+  href: string;
+}): JSX.Element {
+  return (
+    <a
+      className="ui-group ui-rounded-lg ui-border ui-border-transparent ui-px-5 ui-py-4 ui-transition-colors hover:ui-border-neutral-700 hover:ui-bg-neutral-800/30"
+      href={`${href}?utm_source=create-turbo&utm_medium=with-tailwind&utm_campaign=create-turbo"`}
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      <h2 className="ui-mb-3 ui-text-2xl ui-font-semibold">
+        {title}{" "}
+        <span className="ui-inline-block ui-transition-transform group-hover:ui-translate-x-1 motion-reduce:ui-transform-none">
+          -&gt;
+        </span>
+      </h2>
+      <p className="ui-m-0 ui-max-w-[30ch] ui-text-sm ui-opacity-50">
+        {children}
+      </p>
+    </a>
+  );
+}

packages/story/src/email-register.tsx

@@ -0,0 +1,74 @@
+import { Button } from "./button";
+import { Container } from "./extra_components/container";
+
+function ArrowRightIcon(
+  props: React.ComponentPropsWithoutRef<"svg">
+): JSX.Element {
+  return (
+    <svg aria-hidden="true" viewBox="0 0 24 24" {...props}>
+      <path
+        d="m14 7 5 5-5 5M19 12H5"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export function EmailRegister(): JSX.Element {
+  return (
+    <section id="newsletter" aria-label="Newsletter">
+      <Container>
+        <div
+          style={{ borderRadius: 50 }}
+          className="relative ui-mx-4 overflow-hidden ui-bg-indigo-50 ui-px-4 ui-py-20 sm:ui-mx-6 sm:ui-px-6 md:ui-mx-0 md:ui-rounded-5xl md:ui-px-16 xl:ui-px-24 xl:ui-py-36"
+        >
+          {/* <img
+            className="ui-absolute ui-left-1/2 ui-top-0 ui-translate-x-[-10%] ui-translate-y-[-45%] lg:ui-translate-x-[-32%]"
+            src={background}
+            alt=""
+            width={919}
+            height={1351}
+            // unoptimized
+          /> */}
+          <div className="relative ui-mx-auto ui-grid ui-max-w-2xl ui-grid-cols-1 ui-gap-x-32 ui-gap-y-14 xl:ui-max-w-none xl:ui-grid-cols-2">
+            <div>
+              <p className="ui-font-semibold ui-bold ui-text-4xl ui-font-medium ui-tracking-tighter ui-text-blue-900 sm:ui-text-5xl">
+                Stay up to date
+              </p>
+              <p className="ui-mt-4 ui-text-lg ui-tracking-tight ui-text-blue-900">
+                Get updates on all of our events and be the first to get
+                notified when tickets go on sale.
+              </p>
+            </div>
+            <form>
+              <h3 className="ui-text-lg ui-font-semibold ui-tracking-tight ui-text-blue-900">
+                Sign up to our newsletter <span aria-hidden="true">&darr;</span>
+              </h3>
+              <div className="ui-mt-5 ui-flex ui-rounded-3xl ui-bg-white ui-py-2.5 ui-pr-2.5 ui-shadow-xl ui-shadow-blue-900/5 ui-focus-within:ring-2 ui-focus-within:ring-blue-900">
+                <input
+                  type="email"
+                  required
+                  placeholder="Email address"
+                  aria-label="Email address"
+                  className="ui-my-2.5 ui-flex-auto ui-bg-transparent ui-pl-6 ui-pr-2.5 ui-text-base ui-text-slate-900 ui-placeholder-text-slate-400 ui-focus:ui-outline-none"
+                />
+                <Button type="submit">
+                  <span className="ui-sr-only sm:ui-not-sr-only">
+                    Sign up today
+                  </span>
+                  <span className="sm:ui-hidden">
+                    <ArrowRightIcon className="ui-h-6 ui-w-6" />
+                  </span>
+                </Button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </Container>
+    </section>
+  );
+}

packages/story/src/extra_components/container.tsx

@@ -0,0 +1,16 @@
+import clsx from "clsx";
+
+export function Container({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"div">): JSX.Element {
+  return (
+    <div
+      className={clsx(
+        "ui-mx-auto ui-max-w-7xl ui-px-4 ui-sm:px-6 ui-lg:px-8",
+        className
+      )}
+      {...props}
+    />
+  );
+}

packages/story/src/extra_components/images/images.d.ts

@@ -0,0 +1,4 @@
+declare module "*.jpg" {
+  const value: any;
+  export = value;
+}