SOEOPSFY24-301 | scaffold timeline

.github/workflows/eslint.yml

@@ -3,22 +3,6 @@ on:
   push:
   # pull_request:
 
-jobs:
-  lint:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - name: Set the correct Node version using nvm
-        shell: bash -l {0}
-        run: nvm install
-      - uses: bahmutov/npm-install@v1
-        with:
-          useLockFile: false
-      - name: Lint
-        run: npm run lint
-      - name: Typecheck
-        run: npm run tsc
-
 jobs:
   lint:
     name: Lint & TS Check
@@ -35,6 +19,15 @@ jobs:
           restore-keys: |
             lint-${{ hashFiles('package.json') }}-${{ hashFiles('yarn.lock') }}
             lint-${{ hashFiles('package.json') }}-
+
+      - name: Enable Corepack
+        shell: bash
+        run: corepack enable
+
+      - name: Prepare Yarn Version
+        shell: bash
+        run: corepack prepare [email protected] --activate
+
       - name: Lint
         run: |
           yarn

app/components/Container/Container.styles.ts

@@ -1,12 +1,12 @@
 export const widths = {
-  full: 'w-full', // width: 100%; default
-  site: 'cc', // Use Decanter custom screen margins and sets max content width of 1500px
-  screen: 'w-screen', // width: 100vw
+  full: "w-full", // width: 100%; default
+  site: "cc", // Use Decanter custom screen margins and sets max content width of 1500px
+  screen: "w-screen", // width: 100vw
 };
 
 export const bgColors = {
-  black: 'bg-black text-white',
-  white: 'bg-white text-black',
-  'fog-light': 'bg-fog-light text-black',
-  'red-gradient': 'bg-soe-red-gradient text-white',
+  black: "bg-black text-white",
+  white: "bg-white text-black",
+  "fog-light": "bg-fog-light text-black",
+  "red-gradient": "bg-soe-red-gradient text-white",
 };

app/components/Container/Container.tsx

@@ -1,5 +1,5 @@
-import { HTMLAttributes } from 'react';
-import { cnb } from 'cnbuilder';
+import { HTMLAttributes } from "react";
+import { cnb } from "cnbuilder";
 import {
   paddingTops,
   paddingBottoms,
@@ -9,9 +9,9 @@ import {
   marginVerticals,
   type MarginType,
   type PaddingType,
-} from '@/utilities/datasource';
-import * as styles from './Container.styles';
-import * as types from './Container.types';
+} from "@/utilities/datasource";
+import * as styles from "./Container.styles";
+import * as types from "./Container.types";
 
 export type ContainerProps = HTMLAttributes<HTMLElement> & {
   as?: types.ContainerElementType;
@@ -27,8 +27,8 @@ export type ContainerProps = HTMLAttributes<HTMLElement> & {
 };
 
 export const Container = ({
-  as: AsComponent = 'div',
-  width = 'site',
+  as: AsComponent = "div",
+  width = "site",
   py,
   pt,
   pb,
@@ -45,14 +45,14 @@ export const Container = ({
     {...props}
     style={style}
     className={cnb(
-      bgColor ? styles.bgColors[bgColor] : '',
-      py ? paddingVerticals[py] : '',
-      pt ? paddingTops[pt] : '',
-      pb ? paddingBottoms[pb] : '',
-      my ? marginVerticals[my] : '',
-      mt ? marginTops[mt] : '',
-      mb ? marginBottoms[mb] : '',
-      width ? styles.widths[width] : '',
+      bgColor ? styles.bgColors[bgColor] : "",
+      py ? paddingVerticals[py] : "",
+      pt ? paddingTops[pt] : "",
+      pb ? paddingBottoms[pb] : "",
+      my ? marginVerticals[my] : "",
+      mt ? marginTops[mt] : "",
+      mb ? marginBottoms[mb] : "",
+      width ? styles.widths[width] : "",
       className,
     )}
   >

app/components/Container/Container.types.ts

@@ -1,7 +1,18 @@
-import * as styles from './Container.styles';
+import * as styles from "./Container.styles";
 
-export type ContainerElementType = 'div' | 'section' | 'article' | 'main' | 'footer' | 'aside' | 'header' | 'nav' | 'form' | 'fieldset' | 'figcaption';
+export type ContainerElementType =
+  | "div"
+  | "section"
+  | "article"
+  | "main"
+  | "footer"
+  | "aside"
+  | "header"
+  | "nav"
+  | "form"
+  | "fieldset"
+  | "figcaption";
 
 export type WidthType = keyof typeof styles.widths;
 
-export type BgColorType = keyof typeof styles.bgColors | '';
+export type BgColorType = keyof typeof styles.bgColors | "";

app/components/Container/index.ts

@@ -1,3 +1,3 @@
-export * from './Container';
-export * from './Container.styles';
-export * from './Container.types';
+export * from "./Container";
+export * from "./Container.styles";
+export * from "./Container.types";

app/components/FeatureHero/FeatureHero.styles.ts

@@ -1,4 +1,5 @@
-export const root = 'h-full max-h-[1200px] relative overflow-hidden';
-export const wrapper = 'mr-0 au-ml-auto flex-col lg:flex-row';
-export const gradient = 'absolute top-0 left-0 bg-feature-gradient-rl bg-feature-gradient-bt w-full h-full z-30';
-export const contentWrapper = 'lg:rs-pr-9 ml-0 *:text-white z-50';
+export const root = "h-full max-h-[1200px] relative overflow-hidden";
+export const wrapper = "mr-0 au-ml-auto flex-col lg:flex-row";
+export const gradient =
+  "absolute top-0 left-0 bg-feature-gradient-rl bg-feature-gradient-bt w-full h-full z-30";
+export const contentWrapper = "lg:rs-pr-9 ml-0 *:text-white z-50";

app/components/FeatureHero/FeatureHero.tsx

@@ -1,51 +1,67 @@
-'use client';
+"use client";
 
-import { HTMLAttributes } from 'react';
-import { Container } from '../Container';
-import { FlexBox } from '../FlexBox';
+import { HTMLAttributes } from "react";
+import { Container } from "../Container";
+import { FlexBox } from "../FlexBox";
 // import * as styles from './FeatureHero.styles';
-import Image from 'next/image';
-import ShapeA from '../images/shape-a';
-import { motion, useScroll, useTransform } from 'framer-motion';
+import Image from "next/image";
+import ShapeA from "../images/shape-a";
+import { motion, useScroll, useTransform } from "framer-motion";
 
 type FeatureHeroProps = HTMLAttributes<HTMLDivElement> & {
   children: React.ReactNode;
   imageSrc?: string;
 };
 
-export const FeatureHero = ({
-  children,
-  ...props
-}: FeatureHeroProps) => {
+export const FeatureHero = ({ children, ...props }: FeatureHeroProps) => {
   const { scrollYProgress } = useScroll();
   const opacity = useTransform(scrollYProgress, [0, 0.05], [1, 0]);
 
   return (
-    <FlexBox {...props} as="section" alignItems="start" justifyContent="between" className="relative flex-col bg-soe-black h-auto w-full z-10">
-      <Container width="full" className='order-last flex flex-col rs-p-9 *:text-white z-50 lg:max-w-[50%] *:font-dm-sans bg-soe-black lg:bg-transparent'>
+    <FlexBox
+      {...props}
+      as="section"
+      alignItems="start"
+      justifyContent="between"
+      className="relative flex-col bg-soe-black h-auto w-full z-10"
+    >
+      <Container
+        width="full"
+        className="order-last flex flex-col rs-p-9 *:text-white z-50 lg:max-w-[50%] *:font-dm-sans bg-soe-black lg:bg-transparent"
+      >
         {children}
       </Container>
       <div className="relative w-full aspect-[16/9] bg-cool-grey lg:absolute lg:top-0 lg:left-0 h-auto z-10 overflow-hidden">
-        <Image className="absolute top-0 left-0 lg:left-[300px] z-0 w-full h-auto"
+        <Image
+          className="absolute top-0 left-0 lg:left-[300px] z-0 w-full h-auto"
           alt=""
-          src={`soe-centennial-nextjs/assets/images/Hawa-Racine-Thiam.jpg`}
+          src={"soe-centennial-nextjs/assets/images/Hawa-Racine-Thiam.jpg"}
           width={0}
           height={0}
-          sizes="100vw" />
-        <motion.div style={{ opacity }} >
+          sizes="100vw"
+        />
+        <motion.div style={{ opacity }}>
           <div className="absolute w-full h-full top-0 left-0 z-10">
             <div className="w-full h-full bg-plum-dark absolute top-0 left-0 z-10" />
-            <ShapeA className="absolute bottom-10 left-10 lg:left-[300px] z-20 *:stroke-plum" height={1200} />
+            <ShapeA
+              className="absolute bottom-10 left-10 lg:left-[300px] z-20 *:stroke-plum"
+              height={1200}
+            />
           </div>
         </motion.div>
-        <div className='absolute top-0 left-0 bg-transparent lg:bg-feature-gradient-rl bg-feature-gradient-bt w-full h-full z-50' />
-        <Image className="absolute top-0 left-0 lg:left-[300px] z-20 w-full h-auto"
+        <div className="absolute top-0 left-0 bg-transparent lg:bg-feature-gradient-rl bg-feature-gradient-bt w-full h-full z-50" />
+        <Image
+          className="absolute top-0 left-0 lg:left-[300px] z-20 w-full h-auto"
           alt=""
-          src={`soe-centennial-nextjs/assets/images/Hawa-Racine-Thiam_silhouette.png`}
+          src={
+            "soe-centennial-nextjs/assets/images/Hawa-Racine-Thiam_silhouette.png"
+          }
           width={0}
           height={0}
-          sizes="100vw" />
-        <div className='absolute top-0 left-0 bg-feature-gradient-bt w-full h-full z-50' />
+          sizes="100vw"
+        />
+        <div className="absolute top-0 left-0 bg-feature-gradient-bt w-full h-full z-50" />
       </div>
     </FlexBox>
-);};
+  );
+};

app/components/FeatureHero/index.ts

@@ -1,2 +1,2 @@
-export * from './FeatureHero';
-export * from './FeatureHero.styles';
+export * from "./FeatureHero";
+export * from "./FeatureHero.styles";

app/components/FlexBox/FlexBox.styles.ts

@@ -1,38 +1,38 @@
 export const flexDirection = {
-  row: 'flex-row',
-  'row-reverse': 'flex-row-reverse',
-  col: 'flex-col',
-  'col-reverse': 'flex-col-reverse',
+  row: "flex-row",
+  "row-reverse": "flex-row-reverse",
+  col: "flex-col",
+  "col-reverse": "flex-col-reverse",
 };
 
 export const flexWrap = {
-  wrap: 'flex-wrap',
-  'wrap-reverse': 'flex-wrap-reverse',
-  nowrap: 'flex-nowrap',
+  wrap: "flex-wrap",
+  "wrap-reverse": "flex-wrap-reverse",
+  nowrap: "flex-nowrap",
 };
 
 export const flexJustifyContent = {
-  start: 'justify-start',
-  end: 'justify-end',
-  center: 'justify-center',
-  between: 'justify-between',
-  around: 'justify-around',
-  evenly: 'justify-evenly',
+  start: "justify-start",
+  end: "justify-end",
+  center: "justify-center",
+  between: "justify-between",
+  around: "justify-around",
+  evenly: "justify-evenly",
 };
 
 export const flexAlignContent = {
-  start: 'content-start',
-  end: 'content-end',
-  center: 'content-center',
-  between: 'content-between',
-  around: 'content-around',
-  evenly: 'content-evenly',
+  start: "content-start",
+  end: "content-end",
+  center: "content-center",
+  between: "content-between",
+  around: "content-around",
+  evenly: "content-evenly",
 };
 
 export const flexAlignItems = {
-  start: 'items-start',
-  end: 'items-end',
-  center: 'items-center',
-  baseline: 'items-baseline',
-  stretch: 'items-stretch',
+  start: "items-start",
+  end: "items-end",
+  center: "items-center",
+  baseline: "items-baseline",
+  stretch: "items-stretch",
 };

app/components/FlexBox/FlexBox.tsx

@@ -1,7 +1,7 @@
-import React, { ReactNode, HTMLAttributes } from 'react';
-import { cnb } from 'cnbuilder';
-import * as styles from './FlexBox.styles';
-import * as types from './FlexBox.types';
+import React, { ReactNode, HTMLAttributes } from "react";
+import { cnb } from "cnbuilder";
+import * as styles from "./FlexBox.styles";
+import * as types from "./FlexBox.types";
 
 type FlexBoxProps = HTMLAttributes<HTMLElement> & {
   as?: types.FlexElementType;
@@ -15,7 +15,7 @@ type FlexBoxProps = HTMLAttributes<HTMLElement> & {
 };
 
 export const FlexBox = ({
-  as: AsComponent = 'div',
+  as: AsComponent = "div",
   direction,
   gap,
   wrap,
@@ -29,13 +29,13 @@ export const FlexBox = ({
   <AsComponent
     {...props}
     className={cnb(
-      'flex',
-      direction ? styles.flexDirection[direction] : '',
-      wrap ? styles.flexWrap[wrap] : '',
-      justifyContent ? styles.flexJustifyContent[justifyContent] : '',
-      alignContent ? styles.flexAlignContent[alignContent] : '',
-      alignItems ? styles.flexAlignItems[alignItems] : '',
-      gap ? 'grid-gap' : '',
+      "flex",
+      direction ? styles.flexDirection[direction] : "",
+      wrap ? styles.flexWrap[wrap] : "",
+      justifyContent ? styles.flexJustifyContent[justifyContent] : "",
+      alignContent ? styles.flexAlignContent[alignContent] : "",
+      alignItems ? styles.flexAlignItems[alignItems] : "",
+      gap ? "grid-gap" : "",
       className,
     )}
   >

app/components/FlexBox/FlexBox.types.ts

@@ -1,6 +1,21 @@
-import * as styles from './FlexBox.styles';
+import * as styles from "./FlexBox.styles";
 
-export type FlexElementType = 'div' | 'section' | 'article' | 'main' | 'footer' | 'aside' | 'header' | 'nav' | 'form' | 'button' | 'fieldset' | 'ul' | 'ol' | 'li' | 'span';
+export type FlexElementType =
+  | "div"
+  | "section"
+  | "article"
+  | "main"
+  | "footer"
+  | "aside"
+  | "header"
+  | "nav"
+  | "form"
+  | "button"
+  | "fieldset"
+  | "ul"
+  | "ol"
+  | "li"
+  | "span";
 
 export type FlexDirectionType = keyof typeof styles.flexDirection;
 

app/components/FlexBox/index.ts

@@ -1,3 +1,3 @@
-export * from './FlexBox';
-export * from './FlexBox.styles';
-export * from './FlexBox.types';
+export * from "./FlexBox";
+export * from "./FlexBox.styles";
+export * from "./FlexBox.types";