feat(shared-ui-feat-layout): Re-organized the folder structure of ui …

…libraries

apps/web/contact/project.json

@@ -58,6 +58,15 @@
       "options": {
         "lintFilePatterns": ["apps/web/contact/**/*.{ts,tsx,js,jsx}"]
       }
+    },
+    "semantic-release": {
+      "executor": "@theunderscorer/nx-semantic-release:semantic-release",
+      "options": {
+        "github": true,
+        "npm": false,
+        "changelog": true,
+        "tagFormat": "web-contact-v${VERSION}"
+      }
     }
   },
   "tags": []

apps/web/shell/app/Aside.tsx

@@ -1,10 +1,10 @@
 "use client";
 
-import { SideTitle } from "@open-system/shared-ui-components";
+import { SideTitle } from "@open-system/shared-ui-feat-layout";
 import { AnimatePresence, motion, useScroll } from "framer-motion";
 import { useLayoutEffect, useState } from "react";
 
-export function Aside() {
+export default function Aside() {
   const [hide, setHide] = useState(true);
 
   const { scrollYProgress } = useScroll();

apps/web/shell/app/Client.tsx

@@ -1,11 +1,10 @@
 "use client";
 
 import { ArrowDownIcon } from "@heroicons/react/24/solid";
-
 import { AnimatePresence, motion, useScroll, useSpring } from "framer-motion";
 import { useLayoutEffect, useRef, useState } from "react";
 import Logo from "../../../../assets/box-logo-gradient.svg";
-import { Aside } from "./Aside";
+import Aside from "./Aside";
 import Introduction from "./Introduction";
 import Stack from "./Stack";
 import Title from "./Title";
@@ -22,7 +21,7 @@ export default function Client() {
     restDelta: 0.001,
   });
 
-  const [hideScrollArrow, setHideScrollArrow] = useState(true);
+  const [hideScrollArrow, setHideScrollArrow] = useState(false);
   useLayoutEffect(() => {
     const unsubscribe = scrollYProgress.onChange((scrollY: number) => {
       if (

apps/web/shell/app/Stack.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { OsHeader } from "@open-system/design-system-components/react";
+import { OsHeader } from "@open-system/design-system-components-react";
 import StackLayer from "./StackLayer";
 
 export default function Stack() {

apps/web/shell/app/StackLayer.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { OsHeader } from "@open-system/design-system-components/react";
+import { OsHeader } from "@open-system/design-system-components-react";
 import clsx from "clsx";
 import { motion, Variants } from "framer-motion";
 import { useCallback, useState } from "react";

apps/web/shell/app/about/Client.tsx

@@ -1,14 +1,15 @@
 "use client";
 
-import { OsHeader } from "@open-system/design-system-components/react";
+import * as React from "react";
 
 export default function Client() {
+  React.useRef(null);
   return (
     <section className="flex w-full snap-center snap-always justify-center overflow-hidden">
       <div className="flex h-[88rem] w-fit flex-col gap-20 px-10">
         <div className="flex w-fit max-w-[65rem] flex-col gap-20">
           <div className="flex flex-col gap-5">
-            <OsHeader level={2}>About me</OsHeader>
+            {/*<OsHeader level={2}>About me</OsHeader>*/}
 
             <p className="font-body-1 text-body-1">
               While I feel nowadays the term <i>full stack developer</i> is

apps/web/shell/app/header.tsx

@@ -1,16 +1,16 @@
 "use client";
 
-import { NavigationMenu } from "@open-system/shared-ui-feat-navigation";
+import { NavigationMenu } from "@open-system/shared-ui-feat-layout";
 
-export function Header() {
+export default function Header() {
   return (
     <nav className="fixed top-0 z-nav h-20 w-full">
       <NavigationMenu
         items={[
-          { name: "Home", href: "/" },
-          { name: "Contact", href: "/contact" },
-          { name: "About", href: "/about" },
-          { name: "Login", href: "/" },
+          { label: "Home", href: "/" },
+          { label: "Contact", href: "/contact" },
+          { label: "About", href: "/about" },
+          { label: "Login", href: "/" },
         ]}
       />
     </nav>

apps/web/shell/app/layout.tsx

@@ -9,7 +9,7 @@ import localFont from "@next/font/local";
 import clsx from "clsx";
 import React from "react";
 import "./globals.css";
-import { Header } from "./Header";
+import Header from "./Header";
 
 const melody = localFont({
   variable: "--font-melody",

apps/web/shell/app/loading.tsx

@@ -1,4 +1,4 @@
-import { PageLoading } from "@open-system/shared-ui-components";
+import { PageLoading } from "@open-system/shared-ui-feat-layout";
 
 export default function Loading() {
   return <PageLoading />;

apps/web/shell/next.config.js

@@ -18,7 +18,12 @@ const nextConfig = {
     fontLoaders: [
       { loader: "@next/font/google", options: { subsets: ["latin"] } },
     ],
-    transpilePackages: ["@open-system/shared-ui-components"],
+    transpilePackages: [
+      "@open-system/design-system-components-react",
+      "@open-system/shared-ui-components",
+      "@open-system/shared-ui-feat-layout",
+      "@open-system/engagement-ui-feat-like",
+    ],
   },
 
   async rewrites() {

apps/web/shell/project.json

@@ -4,6 +4,13 @@
   "sourceRoot": "apps/web/shell",
   "projectType": "application",
   "targets": {
+    "dev": {
+      "executor": "@nrwl/workspace:run-commands",
+      "options": {
+        "commands": ["cd apps/web/shell && next dev -p 3000"],
+        "parallel": true
+      }
+    },
     "build": {
       "executor": "@nrwl/next:build",
       "outputs": ["{options.outputPath}"],
@@ -58,6 +65,15 @@
       "options": {
         "lintFilePatterns": ["apps/web/shell/**/*.{ts,tsx,js,jsx}"]
       }
+    },
+    "semantic-release": {
+      "executor": "@theunderscorer/nx-semantic-release:semantic-release",
+      "options": {
+        "github": true,
+        "npm": false,
+        "changelog": true,
+        "tagFormat": "web-shell-v${VERSION}"
+      }
     }
   },
   "tags": []

cspell.json

@@ -11,11 +11,14 @@
     "openapi",
     "partytown",
     "Persistor",
+    "Prehydration",
     "rabbitmq",
     "Renderable",
     "Storyshots",
     "svgr",
-    "systemvars"
+    "systemvars",
+    "tailwindcss",
+    "theunderscorer"
   ],
   "enableFiletypes": [
     "mdx"

design-system/components/react/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@open-system/design-system-components/react",
+  "name": "@open-system/design-system-components-react",
   "version": "0.0.1",
   "type": "commonjs"
 }

design-system/components/stencil/stencil.config.ts

@@ -40,7 +40,7 @@ export const config: Config = {
      */
     hydratedValue: "inherit",
   },
-  enableCache: true,
+  enableCache: false,
   buildEs5: true,
   extras: {
     /**

design-system/components/stencil/tsconfig.json

@@ -3,7 +3,6 @@
   "compilerOptions": {
     "allowSyntheticDefaultImports": true,
     "allowUnreachableCode": false,
-    "declaration": false,
     "experimentalDecorators": true,
     "esModuleInterop": true,
     "lib": ["dom", "es2015"],

libs/shared/ui/components/project.json

@@ -39,6 +39,15 @@
         "jestConfig": "libs/shared/ui/components/jest.config.ts",
         "passWithNoTests": true
       }
+    },
+    "semantic-release": {
+      "executor": "@theunderscorer/nx-semantic-release:semantic-release",
+      "options": {
+        "github": true,
+        "npm": false,
+        "changelog": true,
+        "tagFormat": "shared-ui-components-v${VERSION}"
+      }
     }
   }
 }

libs/shared/ui/components/src/index.ts

@@ -1,3 +1,2 @@
-export * from "./page-loading";
-export * from "./side-title";
+export * from "./link";
 export * from "./types";

libs/shared/ui/feat-navigation/src/link/Link.spec.tsx → libs/shared/ui/components/src/link/Link.spec.tsx

@@ -4,7 +4,7 @@ import { Link } from "./Link";
 
 describe("Link", () => {
   it("should render successfully", () => {
-    const { baseElement } = render(<Link selected={true} href="/path"></Link>);
+    const { baseElement } = render(<Link href="/path">Item Label</Link>);
     expect(baseElement).toBeTruthy();
   });
 });

libs/shared/ui/components/src/link/Link.tsx

@@ -0,0 +1,18 @@
+import NextLink, { LinkProps as NextLinkProps } from "next/link";
+import { PropsWithBase } from "../types";
+
+export type LinkProps = PropsWithBase<
+  Omit<NextLinkProps, "href"> & Partial<Pick<NextLinkProps, "href">>
+>;
+
+/**
+ * A component to facilitate application navigation. This is essentially a wrapper
+ * around the NextJS Link component.
+ */
+export function Link({ children, href = "/", ...props }: LinkProps) {
+  return (
+    <NextLink href={href} {...props}>
+      {children}
+    </NextLink>
+  );
+}

libs/shared/ui/components/src/types.ts

@@ -15,10 +15,10 @@ export type BaseComponentProps = React.PropsWithRef<
         | "suppressContentEditableWarning"
         | "suppressHydrationWarning"
       > & { key?: React.Key }
-    >   >
+    >
+  >
 >;
 
 export type PropsWithBase<
   P extends Record<string, any> = Record<string, never>
-> = BaseComponentProps &
-      P;
+> = BaseComponentProps & P;

libs/shared/ui/components/tsconfig.json

@@ -7,7 +7,7 @@
     "allowSyntheticDefaultImports": true,
     "forceConsistentCasingInFileNames": true,
     "strict": true,
-    "noImplicitOverride": true,
+    "noImplicitOverride": false,
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true
@@ -23,3 +23,4 @@
     }
   ]
 }
+

libs/shared/ui/feat-navigation/.eslintrc.json → libs/shared/ui/feat-layout/.eslintrc.json

@@ -4,6 +4,9 @@
   "overrides": [
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "parserOptions": {
+        "project": ["libs/shared/ui/feat-layout/tsconfig.*?.json"]
+      },
       "rules": {}
     },
     {

libs/shared/ui/feat-layout/README.md

@@ -0,0 +1,7 @@
+# shared-ui-feat-layout
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test shared-ui-feat-layout` to execute the unit tests via [Jest](https://jestjs.io).

libs/shared/ui/feat-navigation/jest.config.ts → libs/shared/ui/feat-layout/jest.config.ts

@@ -1,6 +1,6 @@
 /* eslint-disable */
 export default {
-  displayName: "shared-ui-feat-navigation",
+  displayName: "shared-ui-feat-layout",
   preset: "../../../../jest.preset.js",
   transform: {
     "^.+\\.[tj]sx?$": [
@@ -9,5 +9,5 @@ export default {
     ],
   },
   moduleFileExtensions: ["ts", "tsx", "js", "jsx"],
-  coverageDirectory: "../../../../coverage/libs/shared/ui/feat-navigation",
+  coverageDirectory: "../../../../coverage/libs/shared/ui/feat-layout",
 };

libs/shared/ui/feat-layout/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "@open-system/shared-ui-feat-layout",
+  "version": "0.0.1"
+}