first pass at sessions to store Citadel instance JWTs- successfully a…

…uthenticating via the app- updated eslint and prettier configs- moved packages from regular dependencies to dev dependencies since were no longer using vanilla React.JS- removed client-side auth guard in favor of server-side auth guard to prevent an unecessary render and "flash"- added 404 page- added InferGetServerSidePropsType to infer return types from getServerSideProps- continued work editing design system
runcitadel · Dec 13, 2021 · 593dbad · 593dbad
1 parent 44ee04a
commit 593dbad
Show file tree

Hide file tree

Showing 48 changed files with 1,999 additions and 952 deletions.
diff --git a/.env b/.env
@@ -1 +1,2 @@
-BASE_URL=http://citadel.local
+BASE_URL=http://citadel.local
+SESSION_PASSWORD=complex_password_at_least_32_characters_long_which_is_leveraged_to_encrypt__and_decrypt_the_cookie
diff --git a/README.md b/README.md
@@ -32,6 +32,10 @@ in the console.
 
 Manually run the linter.
 
+### `yarn format`
+
+Manually run prettier.
+
 ### `yarn start`
 
 Run a Next.JS production server.

diff --git a/components/form/Button.tsx b/components/form/Button.tsx
@@ -1,89 +1,109 @@
 //UTILS
-import { useRef } from "react";
-import { darkTheme, styled } from "../../styles/stitches.config";
-import { useButton } from "@react-aria/button";
+import { useRef } from 'react'
+import { darkTheme, styled } from '../../styles/stitches.config'
+import { useButton } from '@react-aria/button'
 
-//MODELS
-import { Props } from "../../models/Props";
+export const BaseButton = styled('button', {
+  borderWidth: '$sizes$1',
+  borderStyle: 'solid',
+  borderColor: '$dark',
+  boxShadow: '$2',
+  cursor: 'pointer',
 
-export const BaseButton = styled("button", {
-  borderWidth: "$sizes$1",
-  borderStyle: "solid",
-  borderColor: "$dark",
-  cursor: "pointer",
-  fontSize: "$4",
-  padding: "$4 $5",
-  boxShadow: "$2",
-  "&:focus-visible": {
-    outlineColor: "$focusRing",
-    outlineWidth: "$sizes$2",
-    outlineStyle: "solid",
+  '&:focus-visible': {
+    outlineColor: '$focusRing',
+    outlineWidth: '$sizes$2',
+    outlineStyle: 'solid',
   },
-  "&:hover": {
-    boxShadow: "$1",
+  '&:hover': {
+    boxShadow: '$1',
   },
-  "&:active": {
-    transform: "translateY(3px)",
+  '&:active': {
+    transform: 'translateY(3px)',
   },
   [`.${darkTheme} &`]: {
-    borderColor: "$light",
+    borderColor: '$light',
   },
   variants: {
     filled: {
       default: {
-        "&:focus-visible": {
-          outlineColor: "$secondary",
-          outlineWidth: "$sizes$2",
-          outlineStyle: "solid",
+        '&:focus-visible': {
+          outlineColor: '$secondary',
+          outlineWidth: '$sizes$2',
+          outlineStyle: 'solid',
           [`.${darkTheme} &`]: {
-            outlineColor: "$focusRing",
+            outlineColor: '$focusRing',
           },
         },
-        color: "$light",
-        bc: "$dark",
+        color: '$light',
+        bc: '$dark',
       },
       primary: {
-        color: "$light",
-        bc: "$primary",
+        color: '$light',
+        bc: '$primary',
       },
       secondary: {
-        color: "$light",
-        bc: "$secondary",
+        color: '$light',
+        bc: '$secondary',
       },
       tertiary: {
-        color: "$dark",
-        bc: "$tertiary",
+        color: '$dark',
+        bc: '$tertiary',
       },
       transparent: {
         transparentBackground: 0,
-        color: "$dark",
+        color: '$dark',
         [`.${darkTheme} &`]: {
-          color: "$light",
+          color: '$light',
+        },
+      },
+      success: {
+        color: '$dark',
+        bc: '$success',
+        border: 'none',
+      },
+    },
+    size: {
+      sm: {
+        fontSize: '$3',
+        padding: '$2 $3',
+        '@bp2': {
+          fontSize: '$4',
+          padding: '$3 $4',
+        },
+      },
+      md: {
+        fontSize: '$4',
+        padding: '$4 $5',
+        '@bp2': {
+          fontSize: '$5',
+          padding: '$5 $6',
         },
       },
     },
     borderRadius: {
       normal: {
-        borderRadius: "$2",
+        borderRadius: '$2',
       },
       round: {
-        borderRadius: "$round",
+        borderRadius: '$round',
       },
     },
   },
   defaultVariants: {
-    filled: "default",
-    borderRadius: "normal",
+    filled: 'default',
+    borderRadius: 'normal',
+    size: 'md',
   },
-});
+})
 
-export function Button(props: Props) {
-  let ref = useRef(null);
-  let { buttonProps } = useButton(props, ref);
+export function Button(props: React.ComponentProps<any>) {
+  let ref = useRef(null)
+  let { buttonProps } = useButton(props, ref)
 
   return (
     <BaseButton {...props} {...buttonProps} disabled={props.disabled} ref={ref}>
       {props.children}
     </BaseButton>
-  );
+  )
 }
diff --git a/components/form/CheckBox.tsx b/components/form/CheckBox.tsx
@@ -1,30 +1,27 @@
 //UTILS
-import { useRef } from "react";
-import { darkTheme, styled } from "../../styles/stitches.config";
-import { useCheckbox } from "@react-aria/checkbox";
-import { useFocusRing } from "@react-aria/focus";
-
-//MODELS
-import { Props } from "../../models/Props";
+import { useRef } from 'react'
+import { darkTheme, styled } from '../../styles/stitches.config'
+import { useCheckbox } from '@react-aria/checkbox'
+import { useFocusRing } from '@react-aria/focus'
 
 //COMPONENTS
-import { Any } from "../layout/Any";
-import { VisuallyHidden } from "@react-aria/visually-hidden";
+import { Any } from '../layout/Any'
+import { VisuallyHidden } from '@react-aria/visually-hidden'
 
-export const ToggleLabel = styled("label", {
-  display: "flex",
-  alignItems: "center",
-  cursor: "pointer",
-  "&:active": {
-    transform: "translateY(3px)",
+export const ToggleLabel = styled('label', {
+  display: 'flex',
+  alignItems: 'center',
+  cursor: 'pointer',
+  '&:active': {
+    transform: 'translateY(3px)',
   },
-});
+})
 
-export function Checkbox(props: Props) {
-  let { state, size = 2 } = props;
-  let ref = useRef(null);
-  let { inputProps } = useCheckbox(props, state, ref);
-  let { isFocusVisible, focusProps } = useFocusRing();
+export function Checkbox(props: React.ComponentProps<any>) {
+  let { state, size = 2 } = props
+  let ref = useRef(null)
+  let { inputProps } = useCheckbox(props, state, ref)
+  let { isFocusVisible, focusProps } = useFocusRing()
 
   return (
     <ToggleLabel>
@@ -37,7 +34,7 @@ export function Checkbox(props: Props) {
         height={24 * size}
         aria-hidden="true"
         css={{
-          marginRight: "$2",
+          marginRight: '$2',
         }}
       >
         <Any
@@ -48,16 +45,16 @@ export function Checkbox(props: Props) {
           width={15 * size}
           height={15 * size}
           css={{
-            rx: "$radii$3",
-            fill: "$primary",
-            stroke: "$dark",
-            "&:active": {
-              rx: "$radii$3",
-              strokeWidth: "$sizes$2",
-              stroke: "$focusRing",
+            rx: '$radii$3',
+            fill: '$primary',
+            stroke: '$dark',
+            '&:active': {
+              rx: '$radii$3',
+              strokeWidth: '$sizes$2',
+              stroke: '$focusRing',
             },
             [`.${darkTheme} &`]: {
-              stroke: "$muted",
+              stroke: '$muted',
             },
           }}
         />
@@ -74,8 +71,8 @@ export function Checkbox(props: Props) {
               strokeDashArray="270"
               strokeDashOffset="270"
               css={{
-                fill: "$secondary",
-                stroke: "$light",
+                fill: '$secondary',
+                stroke: '$light',
               }}
             />
             <Any
@@ -89,8 +86,8 @@ export function Checkbox(props: Props) {
               strokeDashArray="270"
               strokeDashOffset="270"
               css={{
-                fill: "none",
-                stroke: "$light",
+                fill: 'none',
+                stroke: '$light',
               }}
             />
           </>
@@ -104,14 +101,14 @@ export function Checkbox(props: Props) {
             height={15 * size}
             fill="none"
             css={{
-              rx: "$radii$3",
-              strokeWidth: "$sizes$2",
-              stroke: "$focusRing",
+              rx: '$radii$3',
+              strokeWidth: '$sizes$2',
+              stroke: '$focusRing',
             }}
           />
         )}
       </Any>
       {props.children}
     </ToggleLabel>
-  );
+  )
 }
diff --git a/components/form/RadioGroup.tsx b/components/form/RadioGroup.tsx
@@ -1,44 +1,41 @@
 //UTILS
-import { createContext, useContext, useRef } from "react";
-import { useFocusRing } from "@react-aria/focus";
-import { useRadio, useRadioGroup } from "@react-aria/radio";
-
-//MODELS
-import { Props } from "../../models/Props";
+import { createContext, useContext, useRef } from 'react'
+import { useFocusRing } from '@react-aria/focus'
+import { useRadio, useRadioGroup } from '@react-aria/radio'
 
 //STATE
-import { useRadioGroupState } from "@react-stately/radio";
+import { useRadioGroupState } from '@react-stately/radio'
 
 //COMPONENTS
-import { Any } from "../layout/Any";
-import { VisuallyHidden } from "@react-aria/visually-hidden";
+import { Any } from '../layout/Any'
+import { VisuallyHidden } from '@react-aria/visually-hidden'
 
-let RadioContext = createContext<any>(null);
+let RadioContext = createContext<any>(null)
 
-function RadioGroup(props: Props) {
-  let { children, label } = props;
-  let state = useRadioGroupState(props);
-  let { radioGroupProps, labelProps } = useRadioGroup(props, state);
+function RadioGroup(props: React.ComponentProps<any>) {
+  let { children, label } = props
+  let state = useRadioGroupState(props)
+  let { radioGroupProps, labelProps } = useRadioGroup(props, state)
 
   return (
     <div {...radioGroupProps}>
       <span {...labelProps}>{label}</span>
       <RadioContext.Provider value={state}>{children}</RadioContext.Provider>
     </div>
-  );
+  )
 }
 export function Radio(props: any) {
-  let { children } = props;
-  let state = useContext(RadioContext);
-  let ref = useRef(null);
-  let { inputProps } = useRadio(props, state, ref);
-  let { isFocusVisible, focusProps } = useFocusRing();
+  let { children } = props
+  let state = useContext(RadioContext)
+  let ref = useRef(null)
+  let { inputProps } = useRadio(props, state, ref)
+  let { isFocusVisible, focusProps } = useFocusRing()
 
-  let isSelected = state.selectedValue === props.value;
-  let strokeWidth = isSelected ? 6 : 2;
+  let isSelected = state.selectedValue === props.value
+  let strokeWidth = isSelected ? 6 : 2
 
   return (
-    <Any as="label" css={{ display: "flex", alignItems: "center" }}>
+    <Any as="label" css={{ display: 'flex', alignItems: 'center' }}>
       <VisuallyHidden>
         <input {...inputProps} {...focusProps} ref={ref} />
       </VisuallyHidden>
@@ -49,7 +46,7 @@ export function Radio(props: any) {
           cy={12}
           r={8 - strokeWidth / 2}
           fill="none"
-          css={{ stroke: isSelected ? "$primary" : "$light" }}
+          css={{ stroke: isSelected ? '$primary' : '$light' }}
           strokeWidth={strokeWidth}
         />
         {isFocusVisible && (
@@ -65,5 +62,5 @@ export function Radio(props: any) {
       </Any>
       {children}
     </Any>
-  );
+  )
 }