✨ feat: Add nav-progress bad

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "typescript.tsdk": "node_modules\\typescript\\lib"
+}

apps/www/.eslintrc.cjs

@@ -1,7 +1,7 @@
 /** @type {import("eslint").Linter.Config} */
 module.exports = {
   root: true,
-  extends: ["@nestri/eslint-config/react-internal.js"],
+  extends: ["@nestri/eslint-config/qwik.js"],
   parser: "@typescript-eslint/parser",
   parserOptions: {
     //Find some way to use the lint tsconfig

apps/www/src/routes/layout.tsx

@@ -1,5 +1,6 @@
 import { component$, Slot } from "@builder.io/qwik";
-import type { RequestHandler } from "@builder.io/qwik-city";
+import { NavProgress } from "@nestri/ui";
+import type { DocumentHead, RequestHandler } from "@builder.io/qwik-city";
 
 export const onGet: RequestHandler = async ({ cacheControl }) => {
   // Control caching for this request for best performance and to reduce hosting costs:
@@ -13,5 +14,40 @@ export const onGet: RequestHandler = async ({ cacheControl }) => {
 };
 
 export default component$(() => {
-  return <Slot />;
+  return (
+    <>
+      <NavProgress />
+      <Slot />
+    </>
+  );
 });
+
+export const head: DocumentHead = {
+  title: 'Nestri – Your games. Your rules.',
+  meta: [
+    {
+      name: 'description',
+      content: 'Nestri – Your games. Your rules.',
+    },
+    {
+      name: "og:title",
+      content: "Nestri – Your games. Your rules.",
+    },
+    {
+      name: "og:description",
+      content: "Play games with friends right from your browser.",
+    },
+    {
+      name: "twitter:title",
+      content: "Nestri – Your games. Your rules.",
+    },
+    {
+      name: "twitter:description",
+      content: "Play games with friends right from your browser.",
+    },
+    {
+      name: "twitter:card",
+      content: "summary_large_image",
+    },
+  ],
+};

packages/ui/.eslintrc.js

@@ -1,7 +1,7 @@
 /** @type {import("eslint").Linter.Config} */
 module.exports = {
   root: true,
-  extends: ["@nestri/eslint-config/react-internal.js"],
+  extends: ["@nestri/eslint-config/qwik.js"],
   parser: "@typescript-eslint/parser",
   parserOptions: {
     project: "./tsconfig.lint.json",

packages/ui/package.json

@@ -3,31 +3,39 @@
   "version": "0.0.0",
   "private": true,
   "exports": {
-    "./button": "./src/button.tsx",
-    "./card": "./src/card.tsx",
-    "./code": "./src/code.tsx",
+    ".": "./src/index.ts",
+    "./react": "./src/react/index.ts",
     "./tailwind.config": "./tailwind.config.js",
     "./globals.css": "./globals.css",
     "./postcss": "./post.config.js"
   },
-  "files": ["tailwind.config.js", "post.config.js", "globals.css", "postcss.config.js"],
+  "files": [
+    "tailwind.config.js",
+    "post.config.js",
+    "globals.css",
+    "postcss.config.js"
+  ],
   "scripts": {
-    "lint": "eslint . --max-warnings 0",
-    "generate:component": "turbo gen react-component"
+    "lint": "eslint . --max-warnings 0"
   },
   "devDependencies": {
     "@builder.io/qwik": "^1.8.0",
+    "@builder.io/qwik-city": "^1.8.0",
     "@builder.io/qwik-react": "^0.5.5",
+    "@fontsource/bricolage-grotesque": "^5.0.7",
+    "@fontsource/geist-sans": "^5.0.3",
     "@nestri/eslint-config": "*",
     "@nestri/typescript-config": "*",
     "@turbo/gen": "^1.12.4",
-    "@types/eslint": "^8.56.5",
+    "@types/eslint": "^9.6.1",
     "@types/node": "^20.11.24",
+    "@types/nprogress": "^0.2.3",
     "@types/react": "^18.3.4",
     "@types/react-dom": "^18.3.0",
     "autoprefixer": "^10.4.20",
-    "eslint": "^8.57.0",
+    "eslint": "^9.9.1",
     "framer-motion": "^11.3.31",
+    "nprogress": "^0.2.0",
     "postcss": "^8.4.41",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

packages/ui/src/button.tsx

@@ -1,20 +0,0 @@
-"use client";
-
-import { ReactNode } from "react";
-
-interface ButtonProps {
-  children: ReactNode;
-  className?: string;
-  appName: string;
-}
-
-export const Button = ({ children, className, appName }: ButtonProps) => {
-  return (
-    <button
-      className={className}
-      onClick={() => alert(`Hello from your ${appName} app!`)}
-    >
-      {children}
-    </button>
-  );
-};

packages/ui/src/card.tsx

@@ -1,25 +0,0 @@
-export function Card({
-  className,
-  title,
-  children,
-  href,
-}: {
-  className?: string;
-  title: string;
-  children: React.ReactNode;
-  href: string;
-}): JSX.Element {
-  return (
-    <a
-      className={className}
-      href={`${href}?utm_source=create-turbo&utm_medium=basic&utm_campaign=create-turbo"`}
-      rel="noopener noreferrer"
-      target="_blank"
-    >
-      <h2>
-        {title} <span>-&gt;</span>
-      </h2>
-      <p>{children}</p>
-    </a>
-  );
-}

packages/ui/src/code.tsx

@@ -1,9 +0,0 @@
-export function Code({
-  children,
-  className,
-}: {
-  children: React.ReactNode;
-  className?: string;
-}): JSX.Element {
-  return <code className={className}>{children}</code>;
-}

packages/ui/src/index.ts

@@ -0,0 +1 @@
+export * from "./nav-progress"

packages/ui/src/nav-progress/index.tsx

@@ -0,0 +1,43 @@
+import { component$, useStyles$, useVisibleTask$ } from '@builder.io/qwik'
+import { useLocation } from '@builder.io/qwik-city'
+import type { NProgressOptions } from 'nprogress'
+import nProgress from 'nprogress'
+import nProgressStyles from 'nprogress/nprogress.css?inline'
+import nPrStyles from './npr.css?inline'
+
+interface Props {
+    options?: Partial<NProgressOptions> &
+    Partial<{
+        color: string
+        height: string
+    }>
+}
+
+export const NavProgress = component$(({ options = {} }: Props) => {
+    // const CSS_VAR_PREFIX = '--nav-progress-'
+
+    useStyles$(nProgressStyles + nPrStyles)
+
+    nProgress.configure({ showSpinner: false, ...options })
+
+    const location = useLocation()
+
+    // eslint-disable-next-line qwik/no-use-visible-task
+    useVisibleTask$(({ track }) => {
+        const isNavigating = track(() => location.isNavigating)
+        if (isNavigating) nProgress.start()
+        else nProgress.done()
+    })
+
+    // return (
+    //     <style
+    //         dangerouslySetInnerHTML={`
+    //   :root {
+    //     ${options.color ? `${CSS_VAR_PREFIX}color: ${options.color};` : ''}
+    //     ${options.height ? `${CSS_VAR_PREFIX}height: ${options.height};` : ''}
+    //   }
+    // `}
+    //     ></style>
+    // )
+    return <div data-name="progress" />
+})

packages/ui/src/nav-progress/npr.css

@@ -0,0 +1,53 @@
+#nprogress .bar {
+    background: theme("colors.primary.500");
+    height: 2px;
+    z-index: 80;
+}
+
+/* Fancy blur effect */
+#nprogress .peg {
+    box-shadow: 0 0 10px theme("colors.primary.500"),
+        0 0 5px theme("colors.primary.500");
+    z-index: 80;
+}
+
+#nprogress .spinner-icon {
+    border-top-color: theme("colors.primary.500");
+    border-left-color: theme("colors.primary.500");
+    display: none;
+}
+
+html.dark #nprogress .bar {
+    background: theme("colors.primary.500");
+    height: 2px;
+}
+
+html.dark #nprogress .peg {
+    box-shadow: 0 0 10px theme("colors.primary.500"),
+        0 0 5px theme("colors.primary.500");
+}
+
+html.dark .spinner-icon {
+    border-top-color: theme("colors.primary.500");
+    border-left-color: theme("colors.primary.500");
+    display: none;
+}
+
+@media (prefers-color-scheme: dark) {
+
+    #nprogress .bar {
+        background: theme("colors.primary.500");
+        height: 2px;
+    }
+
+    #nprogress .peg {
+        box-shadow: 0 0 10px theme("colors.primary.500"),
+            0 0 5px theme("colors.primary.500");
+    }
+
+    .spinner-icon {
+        border-top-color: theme("colors.primary.500");
+        border-left-color: theme("colors.primary.500");
+        display: none;
+    }
+}

packages/ui/src/types/misc.d.ts

@@ -0,0 +1,4 @@
+declare module '*?inline' {
+    const content: string;
+    export default content;
+}

packages/ui/tsconfig.json

@@ -1,8 +1,13 @@
 {
   "extends": "@nestri/typescript-config/base.json",
   "compilerOptions": {
-    "outDir": "dist"
+    "outDir": "tmp",
+    "rootDir": ".",
+    "allowImportingTsExtensions": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
   },
-  "include": ["src"],
+  "include": ["src", "./*.d.ts"],
   "exclude": ["node_modules", "dist"]
 }

packages/ui/tsconfig.lint.json

@@ -3,6 +3,6 @@
   "compilerOptions": {
     "outDir": "dist"
   },
-  "include": ["src", "./*.config.js"],
+  "include": ["src", "./*.config.js", "./.eslintrc.js"],
   "exclude": ["node_modules", "dist"]
 }

packages/ui/turbo/generators/config.ts

@@ -1,30 +0,0 @@
-import type { PlopTypes } from "@turbo/gen";
-
-// Learn more about Turborepo Generators at https://turbo.build/repo/docs/core-concepts/monorepos/code-generation
-
-export default function generator(plop: PlopTypes.NodePlopAPI): void {
-  // A simple generator to add a new React component to the internal UI library
-  plop.setGenerator("react-component", {
-    description: "Adds a new react component",
-    prompts: [
-      {
-        type: "input",
-        name: "name",
-        message: "What is the name of the component?",
-      },
-    ],
-    actions: [
-      {
-        type: "add",
-        path: "src/{{kebabCase name}}.tsx",
-        templateFile: "templates/component.hbs",
-      },
-      {
-        type: "append",
-        path: "package.json",
-        pattern: /"exports": {(?<insertion>)/g,
-        template: '    "./{{kebabCase name}}": "./src/{{kebabCase name}}.tsx",',
-      },
-    ],
-  });
-}

packages/ui/turbo/generators/templates/component.hbs

@@ -1,8 +0,0 @@
-export const {{ pascalCase name }} = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <div>
-      <h1>{{ pascalCase name }} Component</h1>
-      {children}
-    </div>
-  );
-};