add access via api using storybook

.storybook/main.ts

@@ -13,7 +13,7 @@ const config: StorybookConfig = {
     name: "@storybook/react-webpack5",
     options: {},
   },
-  staticDirs: ["../static"],
+  staticDirs: ["../static", "../public"],
   core: {
     builder: "webpack5",
   },

.storybook/preview.ts

@@ -1,9 +1,17 @@
 import type { Preview } from "@storybook/react"
+import { initialize, mswLoader } from "msw-storybook-addon"
 
 import "./fonts.css"
 import "bootstrap/dist/css/bootstrap.min.css"
 import "../src/styles/style.css"
 
+/*
+ * Initializes MSW
+ * See https://github.com/mswjs/msw-storybook-addon#configuring-msw
+ * to learn how to customize it
+ */
+initialize()
+
 const preview: Preview = {
   parameters: {
     controls: {
@@ -13,6 +21,7 @@ const preview: Preview = {
       },
     },
   },
+  loaders: [mswLoader], // 👈 Add the MSW loader to all stories
 }
 
 export default preview

gatsby-browser.js

@@ -10,6 +10,7 @@ import PrefetchData from "./src/components/PrefetchData"
 import PageLayout from "./src/components/PageLayout"
 import { useBrowserStore } from "./src/store"
 import { versionService } from "./src/services"
+import Page from "./src/components/Page"
 
 // Logs when the client route changes
 export function onRouteUpdate({ location, prevLocation }) {
@@ -64,7 +65,16 @@ export function wrapRootElement({ element, props }) {
 // wraps every page in a component
 export function wrapPageElement({ element, props }) {
   console.log("[gatsby-browser]@wrapPageElement", props)
-  return <PageLayout {...props}>{element}</PageLayout>
+
+  if (props.path === "/plans/") {
+    return <Page {...props}>hello{element}</Page>
+  }
+  // display all other pages a s modals
+  return (
+    <main className="position-fixed">
+      <PageLayout {...props}>{element}</PageLayout>
+    </main>
+  )
 }
 
 export function shouldUpdateScroll() {

package.json

@@ -57,10 +57,21 @@
     "@storybook/react": "^8.2.9",
     "@storybook/react-webpack5": "^8.2.9",
     "@storybook/test": "^8.2.9",
+    "@types/node": "^22.3.0",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "cors": "^2.8.5",
     "express": "^4.19.2",
     "http-proxy-middleware": "^3.0.0",
+    "msw": "^2.3.5",
+    "msw-storybook-addon": "^2.0.3",
     "prop-types": "^15.8.1",
-    "storybook": "^8.2.9"
+    "storybook": "^8.2.9",
+    "typescript": "^5.5.4"
+  },
+  "msw": {
+    "workerDirectory": [
+      "public"
+    ]
   }
-}
+}

src/components/Alert.js → src/components/Alert.tsx

@@ -2,11 +2,22 @@ import React from "react"
 import { InfoCircle } from "iconoir-react"
 import "./Alert.css"
 
-const Alert = ({ value = "", className = "" }) => {
+export interface AlertProps {
+  value?: string
+  className?: string
+  children?: React.ReactNode
+}
+
+const Alert: React.FC<AlertProps> = ({
+  value = "",
+  className = "",
+  children,
+}) => {
   return (
     <div className={`Alert ${className}`}>
       <InfoCircle strokeWidth={2} className="me-2" />
       <span>{value}</span>
+      {children}
     </div>
   )
 }

src/components/Header.js

@@ -24,8 +24,8 @@ const Header = () => {
             </Link>
           </Navbar.Brand>
           <Nav className="me-auto">
-            <Link className="mx-2" to="/submit-notebook">
-              Why Datalab?
+            <Link className="mx-2" to="/plans">
+              Plans
             </Link>
             <Link className="mx-2" to="/access-to-api">
               start using the API

src/components/Layout.js

@@ -4,14 +4,14 @@ import Footer from "./Footer"
 import Background from "./Background"
 import Wall from "./Wall"
 
-const Layout = ({ children }) => {
-  console.log("[Layout] render")
+const Layout = ({ children, ...props }) => {
+  console.log("[Layout] render", props)
 
   return (
     <>
       <Header />
       <Wall />
-      <main className="position-fixed">{children}</main>
+      {children}
       <Footer />
       <Background />
     </>

src/components/LoginForm.tsx

@@ -0,0 +1,46 @@
+import React, { useRef } from "react"
+import { Form } from "react-bootstrap"
+
+export interface LoginFormPayload {
+  email: string
+  password: string
+}
+
+export interface LoginFormProps {
+  className?: string
+  onSubmit: (payload: LoginFormPayload) => void
+}
+
+const LoginForm: React.FC<LoginFormProps> = ({ className, onSubmit }) => {
+  const formPayload = useRef({ email: "", password: "" })
+  const handleOnSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    console.log(formPayload.current)
+    onSubmit(formPayload.current)
+  }
+
+  return (
+    <Form onSubmit={handleOnSubmit} className={`LoginForm ${className}`}>
+      <Form.Group className="mb-3" controlId="ModalLoginForm.email">
+        <Form.Label>Email address</Form.Label>
+        <Form.Control
+          onChange={(e) => (formPayload.current.email = e.target.value)}
+          type="email"
+          placeholder="[email protected]"
+        />
+      </Form.Group>
+      <Form.Group className="mb-3" controlId="ModalLoginForm.password">
+        <Form.Label>Password</Form.Label>
+        <Form.Control
+          onChange={(e) => (formPayload.current.password = e.target.value)}
+          type="password"
+        />
+      </Form.Group>
+      <button type="submit" className="btn btn-primary">
+        Log in
+      </button>
+    </Form>
+  )
+}
+
+export default LoginForm

src/components/Page.jsx

@@ -0,0 +1,23 @@
+import React from "react"
+
+const Page = ({ children, path, pageContext }) => {
+  return (
+    <div
+      className="Page"
+      style={{
+        position: "fixed",
+        top: 0,
+        left: 0,
+        background: "red",
+        zIndex: 1000,
+        right: 0,
+        bottom: 0,
+      }}
+    >
+      daiiii
+      {children}
+    </div>
+  )
+}
+
+export default Page

src/components/Token.css

@@ -1,34 +1,33 @@
 .Token {
-  display: flex;
-  flex-direction: column;
+  width: 100%;
 }
 
-.Token .token-field {
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: var(--spacer-3) var(--spacer-4);
-  background-color: rgba(var(--impresso-color-black-rgb), 0.1);
-  border-radius: var(--impresso-border-radius-xs);
+.Token textarea {
+  width: 100%;
+  padding: 0;
+  background: transparent;
+  border: 0px solid transparent;
+  font-variation-settings: "wght" var(--impresso-wght-medium);
 }
 
-.Token .token-field p {
-  line-break: anywhere;
-  margin: 0;
-  flex-grow: 1;
-  font-weight: var(--font-weight-bold);
+.Token button {
+  background: var(--impresso-color-yellow);
+  color: var(--impresso-color-black);
+  border: 0px solid transparent;
+  border-radius: var(--impresso-border-radius-sm);
+  padding: var(--spacer-2);
 }
 
-.Token span {
-  font-size: var(--font-small);
+.Token textarea:focus {
+  outline: none;
 }
 
-.Token svg path {
-  stroke: var(--impresso-color-black);
+.Token__display {
+  background: var(--impresso-color-yellow-rgba-25);
+  border-radius: var(--impresso-border-radius-sm);
 }
 
-.Token button {
-  margin-right: -1rem;
-  position: relative !important;
+.Token__display__helpText {
+  font-variation-settings: "wght" var(--impresso-wght-bold);
+  color: var(--impresso-color-success);
 }