Merge pull request #63 from dreampipcom/dev

r007

package.json

@@ -18,7 +18,7 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "@dreampipcom/oneiros": "0.0.29",
+    "@dreampipcom/oneiros": "0.0.41",
     "@sentry/nextjs": "7.118.0",
     "next": "14.2.15",
     "react": "18",

src/app/[locale]/components/client/blocks/topnav-view.tsx

@@ -6,10 +6,11 @@ import { useContext, useRef, useEffect, useState, useMemo } from 'react';
 import { AuthContext, GlobalContext } from '@state';
 import { ASwitchThemes, ALogIn } from '@actions';
 import { navigate } from '@gateway';
-import { AudioPlayer, Button as DPButton, EGridVariant, Grid as DPGrid, EBleedVariant, Typography as DPTypo, TypographyVariant, ESystemIcon } from "@dreampipcom/oneiros";
+import { Nav, Grid, EGridVariant, EBleedVariant } from "@dreampipcom/oneiros";
 import { VSignIn, InternalLink } from '@elements/client';
 import { useTranslations, useLocale } from 'next-intl';
 
+import "@dreampipcom/oneiros/styles"
 
 interface IAuthProvider {
   id?: string;
@@ -71,28 +72,13 @@ export const VTopNav = ({ user, services }: VTopNavProps) => {
       });
   }
 
-  return (
-    <DPGrid variant={EGridVariant.TWELVE_COLUMNS} bleed={EBleedVariant.RESPONSIVE} theme={theme}>
-      <div className="flex flex-col col-start-0 col-span-3 md:col-span-2">
-        <DPTypo variant={TypographyVariant.SMALL}>
-        	{t('welcome')}, {coercedName}
-        </DPTypo>
-        { services?.map((service: any) => (
-          <InternalLink className="block" href={`/services/${service.slug}`}>
-            {service.name}
-          </InternalLink>
-        ))}
+  return (<div className="">
+      {/* temp hack please fix sticky */}
+{/*      <div className="static top-0">
+        <Nav hideSpots hideProfile={isUserLoaded ? false : true} className="opacity-0" />
+      </div>*/}
+      <div className="w-full top-0 z-[999]">
+        <Nav onThemeChange={handleThemeSwitch} hideBg hideSpots hideProfile={isUserLoaded ? false : true} className="" />
       </div>
-      <VSignIn className="col-span-12 col-start-0 md:col-span-3 md:col-start-4 lg:justify-self-end lg:col-start-7 lg:col-span-2" user={_user} />
-      <DPGrid full bleed={EBleedVariant.ZERO} variant={EGridVariant.TWELVE_COLUMNS} className="col-span-12 col-start-0 md:justify-self-end md:col-span-5 md:col-start-8 lg:col-span-4 lg:col-start-9">
-        <div className="flex w-full">
-          <AudioPlayer prompt="" theme={theme} />
-          <DPButton className="ml-a1" theme={theme} icon={ESystemIcon['card']} onClick={() => navigate(document.location.href.replace(/(map|calendar)/, 'list'))} />
-          <DPButton className="ml-a1" theme={theme} icon={ESystemIcon['map']} onClick={() => navigate(document.location.href.replace(/(list|calendar)/, 'map'))} />
-          <DPButton className="ml-a1" theme={theme} icon={ESystemIcon['calendar']} onClick={() => navigate(document.location.href.replace(/(list|map)/, 'calendar'))} />
-          <DPButton className="ml-a1" theme={theme} icon={ESystemIcon['lightbulb']} onClick={handleThemeSwitch} />
-        </div>
-      </DPGrid>
-    </DPGrid>
-  );
+  </div>);
 };

src/app/[locale]/components/client/elements/signup-view.tsx

@@ -7,7 +7,7 @@ import { signIn, signOut, getCsrf, getSession } from "@auth";
 import { AuthContext } from '@state';
 import { ALogIn, ALogOut } from '@actions';
 import { navigate, setCookie, getCookie } from '@gateway';
-import { Button, TextInput, Logo, Typography  } from "@dreampipcom/oneiros";
+import { Grid, EGridVariant, EBleedVariant, Button, TextInput, Logo, Typography  } from "@dreampipcom/oneiros";
 
 interface IAuthProvider {
   id?: string;
@@ -96,55 +96,60 @@ export const VSignUp = ({ providers }: VSignUpProps) => {
 
   if (user || authd) {
     return <section>
-        <Typography className="py-a3">{t('welcome')}, {coercedName}. {t('i hope you make yourself at home')}.</Typography>
+        <Typography>{t('welcome')}, {coercedName}. {t('i hope you make yourself at home')}.</Typography>
         <Button onClick={handleSignOut}>{t('sign out')}</Button>
     </section>
   }
 
   if (!Object.keys(prov).length) return
 
-  return <section className="">
-      <div className="py-a4 "> 
-        <div className="m-auto w-full flex flex-col items-center justify-center">
-          <Logo  />
+  return <section>
+    <Grid variant={EGridVariant.ONE_COLUMN} bleed={EBleedVariant.ZERO}>
+      <div style={{ paddingTop: '64px', paddingBottom: '64px', display: 'flex', alignItems: 'center', justifyContent: 'center' }} >
+        <div style={{ maxWidth: '320px' }} >
+          <div> 
+            <form style={{ marginBottom: '16px' }} action={`${signInUrl}/email`} method="post">
+              <input type="hidden" name="csrfToken" defaultValue={csrf} />
+              <input type="hidden" name="callbackUrl" value="/verify" />
+              <div style={{ marginBottom: '8px' }} >
+                <TextInput
+                  id={`input-email-for-${defaultP.id}-provider`}
+                  name="email"
+                  value={email}
+                  onChange={(e) => setEmail(e)}
+                  label={t("your email")}
+                  className="pb-a1"
+                  placeholder="jack@doe.com"
+                />
+              </div>
+              <Button id="submitButton" type="submit">
+                {t('continue')}
+              </Button>
+            </form>
+           </div>
+          {providers.map((provider) => (
+            <div> 
+              {(provider.type === "oauth" || provider.type === "oidc") && (
+                <form style={{ marginBottom: '8px' }} action={`${signInUrl}/${provider.id}`} method="POST">
+                  <input type="hidden" name="csrfToken" value={csrf} />
+                  {callbackUrl && (
+                    <input
+                      type="hidden"
+                      name="callbackUrl"
+                      value={"/dash"}
+                    />
+                  )}
+                  <Button
+                    type="submit"
+                  >
+                    {t('continue with')} {provider.name}
+                  </Button>
+                </form>
+              )}
+            </div>
+          ))}
         </div>
-        <form action={`${signInUrl}/email`} method="post">
-          <input type="hidden" name="csrfToken" defaultValue={csrf} />
-          <input type="hidden" name="callbackUrl" value="/verify" />
-          <TextInput
-            id={`input-email-for-${defaultP.id}-provider`}
-            name="email"
-            value={email}
-            onChange={(e) => setEmail(e)}
-            label={t("your email")}
-            className="pb-a1"
-            placeholder="jack@doe.com"
-          />
-          <Button id="submitButton" type="submit">
-            {t('continue')}
-          </Button>
-        </form>
-       </div>
-    {providers.map((provider) => (
-      <div className="py-a1"> 
-        {(provider.type === "oauth" || provider.type === "oidc") && (
-          <form action={`${signInUrl}/${provider.id}`} method="POST">
-            <input type="hidden" name="csrfToken" value={csrf} />
-            {callbackUrl && (
-              <input
-                type="hidden"
-                name="callbackUrl"
-                value={"/dash"}
-              />
-            )}
-            <Button
-              type="submit"
-            >
-              {t('continue with')} {provider.name}
-            </Button>
-          </form>
-        )}
       </div>
-    ))}
+    </Grid>
   </section>
 }

src/app/[locale]/dash/signin/page.tsx

@@ -2,13 +2,12 @@
 'use server';
 import { providers, getCsrf } from '@auth';
 import { VSignUp } from '@components/client';
-import styles from '@styles/page.module.css';
 
 export default async function SignUp() {
   const csrf = await getCsrf();
 
   return (
-    <main className={styles.main}>
+    <main>
       <article>
         <VSignUp providers={providers} csrf={csrf} />
       </article>

src/app/[locale]/globals.css

@@ -1,31 +1,7 @@
 @tailwind base;
-@tailwind components;
-@tailwind utilities;
+/* nyx is a hydration enginge. we don't style here.
+that's why just the base. 
+but oneiros is a public component library, and tailwind, 
+being peer dependant, allow for better branding flexibility.
+that's why we need tailwind in this repo. */
 @import '../../../node_modules/@dreampipcom/oneiros/dist/esm/style.css';
-
-* {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-}
-
-html,
-body {
-  max-width: 100vw;
-  overflow-x: hidden;
-}
-
-body {
-  background: var(--background-color) !important;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-@media (prefers-color-scheme: dark) {
-  html {
-    color-scheme: dark;
-  }
-}

src/app/[locale]/layout.tsx

@@ -6,8 +6,8 @@ import { getSession } from '@auth';
 import { DPTopNav } from '@blocks/server';
 import { RootProviders } from '@state';
 import { getUserServices, getUserAbilities } from '@gateway';
-// import "@dreampipcom/oneiros/styles"
 import './globals.css';
+import '@dreampipcom/oneiros/styles';
 
 export async function generateMetadata(): Promise<Metadata> {
   // fetch data

tailwind.config.js

@@ -1,7 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ['./src/**/*.{js,ts,jsx,tsx}', 'node_modules/@dreampipcom/oneiros/dist/*.{js,ts,jsx,tsx,mdx}'],
-  safelist: ['bg-inverse-light', 'bg-inverse-dark', 'min-h-screen'],
+  safelist: ['block', 'hidden', 'bg-inverse-light', 'bg-inverse-dark', 'min-h-screen'],
   darkMode: ['variant', '.dark &:not(.dark .light *, .light .light *)', ''],
   presets: [require('@dreampipcom/oneiros/dist/tailwind.config.js')],
   theme: {