Feat(copy): Setup and verify text primitives (#16)

nirv-ai · May 21, 2023 · b09ba56 · b09ba56
1 parent d9e2e41
commit b09ba56
Show file tree

Hide file tree

Showing 26 changed files with 234 additions and 70 deletions.
diff --git a/README.md b/README.md
@@ -52,6 +52,7 @@
 
 ##### BUN
 
+- [classnames](https://github.com/JedWatson/classnames)
 - [barrelsby](https://github.com/bencoveney/barrelsby)
 - [eden](https://elysiajs.com/plugins/eden/overview.html)
 - [elysia](https://elysiajs.com/introduction.html)
@@ -65,6 +66,9 @@
 - [typefest](https://github.com/sindresorhus/type-fest)
 - [react waypoint](https://github.com/civiccc/react-waypoint)
 - [react ideal image](https://github.com/stereobooster/react-ideal-image/tree/master)
+- [react aria](https://react-spectrum.adobe.com/react-aria/)
+- [axe core npm](https://github.com/dequelabs/axe-core-npm)
+- [axe core](https://github.com/dequelabs/axe-core)
 
 ##### NIM
 

diff --git a/apps/apps.backend.tsconfig.json b/apps/apps.backend.tsconfig.json
@@ -1,6 +1,4 @@
 {
   "extends": "./apps.tsconfig.json",
-  "compilerOptions": {
-    "emitDeclarationOnly": false
-  }
+  "compilerOptions": {}
 }
diff --git a/apps/apps.frontend.tsconfig.json b/apps/apps.frontend.tsconfig.json
@@ -1,6 +1,4 @@
 {
   "extends": "./apps.tsconfig.json",
-  "compilerOptions": {
-    "emitDeclarationOnly": true
-  }
+  "compilerOptions": {}
 }
diff --git a/apps/nirvlife/dev.tsx b/apps/nirvlife/dev.tsx
@@ -6,7 +6,6 @@ const PROJECT_ROOT = import.meta.dir;
 const PUBLIC_DIR = path.resolve(PROJECT_ROOT, "public");
 const BUILD_DIR = path.resolve(PROJECT_ROOT, "build");
 
-// TODO(noah): doesnt clean dir
 await Bun.build({
   entrypoints: ["./src/main.tsx"],
   outdir: "./build",

diff --git a/apps/nirvlife/package.json b/apps/nirvlife/package.json
@@ -26,8 +26,10 @@
     "@tanstack/react-query-devtools": "4.29.7",
     "@tanstack/react-query-persist-client": "4.29.7",
     "@tanstack/react-table": "8.9.1",
+    "classnames": "^2.3.2",
     "ky": "0.33.3",
     "react": "18.2.0",
+    "react-aria": "^3.24.0",
     "react-dom": "18.2.0",
     "react-ideal-image": "[email protected]:noahehall/react-ideal-image.git#72d7328",
     "react-query-kit": "^1.4.4",
@@ -38,6 +40,7 @@
     "web-vitals": "3.3.1"
   },
   "devDependencies": {
+    "@axe-core/react": "^4.7.1",
     "@types/react": "18.2.6",
     "@types/react-dom": "18.2.4",
     "@types/react-router-dom": "5.3.3",
@@ -48,13 +51,16 @@
     "postcss-flexbugs-fixes": "5.0.2",
     "prettier": "^2.8.8",
     "react-refresh": "0.14.0",
+    "turbo": "^1.9.8",
     "type-fest": "^3.10.0",
     "typescript": "beta"
   },
   "scripts": {
     "barrels": "barrelsby --config ./barrels.json",
-    "rm:cache": "bun pm cache rm",
     "dev": "rm -rf build/* && bun run --watch dev.tsx",
+    "postdev": "bun --hot src/main.tsx",
+    "rm:cache": "bun pm cache rm",
+    "test:types": "bunx tsc",
     "upgrade:bun": "bun upgrade --canary",
     "upgrade:deps": "bunx ncu -u && bun install"
   }

diff --git a/apps/nirvlife/public/index.html b/apps/nirvlife/public/index.html
@@ -27,17 +27,7 @@
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
+    <main id="root"></main>
     <script src="/main.js" async type="module"></script>
   </body>
 </html>
diff --git a/apps/nirvlife/src/Components/App/App.tsx b/apps/nirvlife/src/Components/App/App.tsx
@@ -1,12 +1,10 @@
 import { Container, CssBaseline, ThemeProvider } from "@mui/material";
 import { Outlet, ScrollRestoration } from "react-router-dom";
 
-import { AppHeader } from "Components";
+import { AppHeader, AppFooter } from "Components";
 import { APP_KEY } from "data/constants";
 import { AppTheme } from "Theme";
 
-// <img src={"/img/logo_main.png"} className="App-logo" alt="logo" />
-
 export const App = () => {
   return (
     <ThemeProvider theme={AppTheme}>
@@ -15,6 +13,7 @@ export const App = () => {
       <Container disableGutters id="app-container" key="container">
         <Outlet />
       </Container>
+      <AppFooter />
       <ScrollRestoration key="scroll" />
     </ThemeProvider>
   );

diff --git a/apps/nirvlife/src/Components/App/AppAbout.tsx b/apps/nirvlife/src/Components/App/AppAbout.tsx
diff --git a/apps/nirvlife/src/Components/App/AppFooter.tsx b/apps/nirvlife/src/Components/App/AppFooter.tsx
@@ -0,0 +1,12 @@
+import { FC } from "react";
+
+import { slogan } from "data";
+import { TextCopy } from "Library";
+
+export const AppFooter: FC = () => (
+  <footer>
+    <h5>
+      <TextCopy data={slogan} />
+    </h5>
+  </footer>
+);
diff --git a/apps/nirvlife/src/Components/App/AppHeader.tsx b/apps/nirvlife/src/Components/App/AppHeader.tsx
@@ -1,7 +1,12 @@
-import React, { FC } from "react";
+import { FC } from "react";
+
+import { nirvai, nirvaiRef } from "data";
+import { TextCopy } from "Library";
 
 export const AppHeader: FC = () => (
   <header>
-    <h1>Some New App</h1>
+    <h1>
+      <TextCopy data={nirvai} EL="button" />
+    </h1>
   </header>
 );
diff --git a/apps/nirvlife/src/Components/App/AppLandingScreen.tsx b/apps/nirvlife/src/Components/App/AppLandingScreen.tsx
@@ -1,16 +1,19 @@
 import { useTheme } from "@mui/material";
 
-import { AppAbout } from "./AppAbout";
-import { Img } from "Library";
+import { Img, TextCopy } from "Library";
+import { ctaStacks, nirvaiRef, taglineRef } from "data";
+// <img src={"/img/logo_main.png"} className="img" alt="nirvai" />
 
 const screenId = "app-landing-screen";
 export const AppLandingScreen = () => {
   const theme = useTheme();
 
   return (
-    <article>
+    <article id={screenId}>
       {/* <Img key="img" uris={["/img/girljumping.jpg"]} width={500} height={500} /> */}
-      <AppAbout key="appabout" />
+      <TextCopy data={ctaStacks[0][0]} />
+      <TextCopy data={nirvaiRef} longform />
+      <TextCopy data={taglineRef} full />
     </article>
   );
 };
diff --git a/apps/nirvlife/src/Components/App/index.ts b/apps/nirvlife/src/Components/App/index.ts
@@ -3,6 +3,6 @@
  */
 
 export * from "./App";
-export * from "./AppAbout";
+export * from "./AppFooter";
 export * from "./AppHeader";
 export * from "./AppLandingScreen";
diff --git a/apps/nirvlife/src/Library/Clickable/Link.tsx b/apps/nirvlife/src/Library/Clickable/Link.tsx
@@ -1,22 +1,59 @@
-import type { FC } from "react";
+import {
+  useLink,
+  useButton,
+  type AriaLinkOptions,
+  type AriaButtonProps,
+} from "react-aria";
+import { useMemo, useRef, type FC } from "react";
+import classNames from "classnames";
+import { Link, Button, type ButtonProps, type LinkProps } from "@mui/material";
 
 import type { CopyLinkInterface } from "data";
 
+export type LinkA = LinkProps & AriaLinkOptions;
+export const LinkA: FC<LinkA> = (props) => {
+  const ref = useRef(null);
+  const { linkProps } = useLink(props, ref);
+
+  return <Link {...props} />;
+};
+
+export type LinkButton = ButtonProps & AriaButtonProps;
+export const LinkButton: FC<LinkButton> = (props) => {
+  let ref = useRef();
+  let { buttonProps } = useButton(props, ref);
+
+  return <Button {...props} ref={ref} />;
+};
+
 export interface LinkInterface extends CopyLinkInterface {
   //
-  tab?: boolean;
+  classes?: string;
+  EL?: keyof Pick<JSX.IntrinsicElements, "a" | "button">;
+  linkProps?: AriaLinkOptions & AriaButtonProps & ButtonProps & LinkProps;
   [x: string]: any;
 }
-
 export const LinkTo: FC<LinkInterface> = ({
-  url,
   copy,
-
   //
-  tab = false,
+  classes,
+  EL = "a",
+  url = "#",
+  linkProps = {},
   ...props
-}) => (
-  <a href={url} target={(tab && "_blank") || "_self"} {...props}>
-    {copy}
-  </a>
-);
+}) => {
+  const baseProps = useMemo(
+    () => ({
+      className: classNames("link", classes),
+      href: url,
+      ...linkProps,
+    }),
+    [classes, linkProps]
+  );
+
+  return EL === "a" ? (
+    <LinkA {...baseProps}>{copy}</LinkA>
+  ) : (
+    <LinkButton {...baseProps}>{copy}</LinkButton>
+  );
+};
diff --git a/apps/nirvlife/src/Library/Text/Text.tsx b/apps/nirvlife/src/Library/Text/Text.tsx
@@ -1,13 +1,84 @@
-import type { FC } from "react";
+import { useMemo, type FC } from "react";
+import classNames from "classnames";
 
+import { LinkTo } from "Library";
 import type { CopyInterface } from "data";
 
+/**
+ * keep this as minimal as possible so its fully automated
+ * prefer a higher order component like TextCopy for customization
+ */
 export interface TextInterface extends Pick<CopyInterface, "copy"> {
   //
+  url?: string;
+  classes?: string;
+  EL?: keyof JSX.IntrinsicElements;
   [x: string]: any;
 }
-export const Text: FC<TextInterface> = ({ copy, ...props }) => (
-  <span className="ima text" {...props}>
-    {copy}
-  </span>
-);
+export const Text: FC<TextInterface> = ({ copy, classes, EL, ...props }) => {
+  const cn = useMemo(() => classNames("text", classes), [classes]);
+
+  if (props.url || EL === "a" || EL === "button")
+    return <LinkTo classes={cn} copy={copy} {...props} EL={EL as "a" & "b"} />;
+  if (Array.isArray(copy))
+    return (
+      <p>
+        {copy.map((text, i) => (
+          <Text
+            copy={`${text}${i + 1 < copy.length ? " " : ""}`}
+            classes={classes}
+            EL={EL}
+            {...props}
+            key={`${text}-${i}`}
+          />
+        ))}
+      </p>
+    );
+
+  const MyEl = EL || "span";
+  return (
+    <MyEl className={cn} {...props}>
+      {copy}
+    </MyEl>
+  );
+};
+
+/*
+ * accepts a standard copy interface with additional props
+ * for specifying exactly how to render in a given context
+ */
+export interface TextCopy extends Omit<TextInterface, "copy"> {
+  data: CopyInterface;
+  //
+  textProps?: Omit<TextInterface, "copy">;
+  longform?: boolean;
+}
+export const TextCopy: FC<TextCopy> = ({
+  data,
+  //
+  longform = false,
+  classes,
+  EL,
+  textProps = {},
+}) => {
+  const elementProps = useMemo(() => {
+    switch (EL) {
+      case "a":
+        return {
+          url: data.url,
+        };
+      default:
+        return {};
+    }
+  }, [data, EL]);
+
+  return (
+    <Text
+      {...elementProps}
+      {...textProps}
+      classes={classes}
+      copy={(longform && data.longform) || data.copy}
+      EL={EL}
+    />
+  );
+};
diff --git a/apps/nirvlife/src/Theme/colorList.ts b/apps/nirvlife/src/Theme/colorList.ts
@@ -0,0 +1,39 @@
+// brightest
+// #00f2c1
+// #1d35e9
+// #2f9ef9
+// #7200c7
+// #99ff99
+// #ae4132
+// #b5b6d2
+// #d7b428
+// #e6d7a9
+// #eb1e0b
+// #f2931e
+// #f62e00
+// #ff000c
+// #ff4d50
+// #ffff00
+// #ffffcc
+// #ffffda
+
+// bright
+// #10739e
+// #12aab5
+// #2a00a7
+// #303197
+// #3f0033
+// #52bf5d
+// #6f008c
+
+// darkest
+// #030414
+// #091a53
+// #141414
+// #1f2140
+
+// dark
+// #08427b
+// #23445d
+// #2e2e2e
+// #333536
diff --git a/apps/nirvlife/src/Theme/index.ts b/apps/nirvlife/src/Theme/index.ts
@@ -5,6 +5,7 @@
 export * from "./AppTheme";
 export * from "./LinkBehavior";
 export * from "./breakpoints";
+export * from "./colorList";
 export * from "./components";
 export * from "./palette";
 export * from "./styleOverrides";