@studiocubics/next 0.0.1

package/.turbo/turbo-build.log

@@ -0,0 +1,7 @@
+
+> @studiocubics/next@0.0.1 build /home/runner/work/StudioCubics/StudioCubics/packages/next
+> rollup -c
+
+
+src/index.ts → dist...
+created dist in 3.1s

package/CHANGELOG.md

@@ -0,0 +1,9 @@
+# @studiocubics/next
+
+## 0.0.1
+
+### Patch Changes
+
+- First publish inshallah!
+- Updated dependencies
+  - @studiocubics/ui@0.0.1

package/README.md

@@ -0,0 +1,15 @@
+# @studiocubics/next
+
+To install dependencies:
+
+```bash
+bun install
+```
+
+To run:
+
+```bash
+bun run index.ts
+```
+
+This project was created using `bun init` in bun v1.3.7. [Bun](https://bun.com) is a fast all-in-one JavaScript runtime.

package/eslint.config.js

@@ -0,0 +1,21 @@
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import tseslint from "typescript-eslint";
+import { defineConfig, globalIgnores } from "eslint/config";
+
+export default defineConfig([
+  globalIgnores(["dist"]),
+  {
+    files: ["**/*.{ts,tsx}"],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+]);

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@studiocubics/next",
+  "description": "Package containing components associated with Next JS by Studio Cubics",
+  "publishConfig": {
+    "access": "public"
+  },
+  "private": false,
+  "version": "0.0.1",
+  "keywords": [
+    "@studiocubics",
+    "cubics",
+    "studio",
+    "nextjs",
+    "next"
+  ],
+  "author": {
+    "name": "Studio Cubics",
+    "email": "studiocubics7@gmail.com",
+    "url": "https://studio-cubics.vercel.app"
+  },
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./src/index.d.ts",
+      "development": "./src/index.ts",
+      "production": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./styles.css": "./dist/index.css"
+  },
+  "dependencies": {
+    "next-themes": "^0.4.6",
+    "@studiocubics/ui": "^0.0.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^12.3.0",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "globals": "^16.5.0",
+    "postcss": "^8.5.6",
+    "postcss-modules": "^6.0.1",
+    "rollup": "^4.53.3",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-preserve-directives": "^1.1.3",
+    "typescript-eslint": "^8.46.4",
+    "babel-plugin-react-compiler": "1.0.0",
+    "next": "16.1.6",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "typescript": "^5.9.3"
+  },
+  "peerDependencies": {
+    "babel-plugin-react-compiler": ">= 1.0.0",
+    "next": ">= 16.0.0",
+    "react": ">= 19.0.0",
+    "react-dom": ">= 19.0.0",
+    "typescript": ">= 5"
+  },
+  "scripts": {
+    "build": "rollup -c",
+    "clean:build": "rimraf dist node_modules && rollup -c",
+    "lint": "eslint .",
+    "clean": "rimraf dist node_modules"
+  }
+}

package/rollup.config.js

@@ -0,0 +1,37 @@
+import { defineConfig } from "rollup";
+import typescript from "@rollup/plugin-typescript";
+import postcss from "rollup-plugin-postcss";
+import terser from "@rollup/plugin-terser";
+import preserveDirectives from "rollup-preserve-directives";
+
+export default defineConfig({
+  input: "src/index.ts",
+  output: {
+    preserveModules: true,
+    preserveModulesRoot: "src",
+    dir: "dist",
+    format: "esm",
+    sourcemap: true,
+  },
+  plugins: [
+    preserveDirectives(),
+    postcss({
+      include: "**/*.module.css",
+      modules: true,
+      extract: true,
+      // minimize: true,
+    }),
+    typescript({ tsconfig: "./tsconfig.json" }),
+    // terser({ compress: { directives: false } }),
+  ],
+  external: [
+    "react/jsx-runtime",
+    "react",
+    "react-dom",
+    "@studiocubics/ui",
+    "next",
+    "next-themes",
+    "@monaco-editor/react",
+    "next/navigation",
+  ],
+});

package/src/NextErrorPage/NextErrorPage.module.css

@@ -0,0 +1,32 @@
+.root {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-gap-3);
+  color: var(--color-error);
+  & > h1 {
+    font-size: 5rem;
+    font-weight: bold;
+    color: var(--color-background);
+  }
+}
+.message {
+  max-width: 100%;
+  font-weight: bold;
+  text-align: center;
+}
+.tip {
+  max-width: 100%;
+  font-size: var(--fs-body2);
+  color: var(--color-on-background-faint);
+}
+@media (min-width: 600px) {
+  .root {
+    & > h1 {
+      font-size: 10vw;
+    }
+  }
+}

package/src/NextErrorPage/NextErrorPage.tsx

@@ -0,0 +1,31 @@
+import { Button, GlassCard } from "@studiocubics/ui";
+import styles from "./NextErrorPage.module.css";
+import type { CSSProperties } from "react";
+
+export function NextErrorPage({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  return (
+    <div className={styles.root}>
+      <h1>Oops!</h1>
+      <p className={styles.message}>
+        {error.message || "Something went wrong!"}
+      </p>
+      <p className={styles.tip}>
+        Try refreshing the page from your browser, or contact an admin if the
+        retry button below doesnt work!
+      </p>
+      <GlassCard
+        style={{ "--glass-tint": "var(--color-error)" } as CSSProperties}
+      >
+        <Button color="error" onClick={() => reset()}>
+          Retry
+        </Button>
+      </GlassCard>
+    </div>
+  );
+}

package/src/NextLoadingPage.tsx

@@ -0,0 +1,16 @@
+import { Spinner } from "@studiocubics/ui";
+export function NextLoadingPage() {
+  return (
+    <div
+      style={{
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      <Spinner width={48} height={48} />
+    </div>
+  );
+}

package/src/NextSSRPagination.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { Pagination } from "@studiocubics/ui";
+import { useRouter, useSearchParams } from "next/navigation";
+
+export type PaginationParams = {
+  page: number;
+  total: number;
+  limit: number;
+  paramKey?: string;
+};
+export function NextSSRPagination({
+  page,
+  total,
+  limit,
+  paramKey = "page",
+}: PaginationParams) {
+  const router = useRouter();
+  const params = useSearchParams();
+
+  const pageCount = Math.ceil(total / limit);
+
+  const handleChange = (value: number) => {
+    const sp = new URLSearchParams(params.toString());
+    sp.set(paramKey, String(value));
+    router.push(`?${sp.toString()}`);
+  };
+  if (pageCount == 1) return;
+  return <Pagination count={pageCount} page={page} onChange={handleChange} />;
+}

package/src/NextSSRThemeToggle.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import { useEffect, useState, type ComponentProps } from "react";
+import { useTheme } from "next-themes";
+import { Tooltip, Button } from "@studiocubics/ui";
+
+const Moon = (props: ComponentProps<"svg">) => {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401" />
+    </svg>
+  );
+};
+const Sun = (props: ComponentProps<"svg">) => {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <circle cx="12" cy="12" r="4" />
+      <path d="M12 2v2" />
+      <path d="M12 20v2" />
+      <path d="m4.93 4.93 1.41 1.41" />
+      <path d="m17.66 17.66 1.41 1.41" />
+      <path d="M2 12h2" />
+      <path d="M20 12h2" />
+      <path d="m6.34 17.66-1.41 1.41" />
+      <path d="m19.07 4.93-1.41 1.41" />
+    </svg>
+  );
+};
+const SunMoon = (props: ComponentProps<"svg">) => {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path d="M12 2v2" />
+      <path d="M14.837 16.385a6 6 0 1 1-7.223-7.222c.624-.147.97.66.715 1.248a4 4 0 0 0 5.26 5.259c.589-.255 1.396.09 1.248.715" />
+      <path d="M16 12a4 4 0 0 0-4-4" />
+      <path d="m19 5-1.256 1.256" />
+      <path d="M20 12h2" />
+    </svg>
+  );
+};
+
+export function NextSSRThemeToggle() {
+  const [mounted, setMounted] = useState(false);
+  const { theme, setTheme } = useTheme();
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  return (
+    <Tooltip
+      renderArrow
+      title={
+        theme == "light" ? "Licht" : theme == "dark" ? "Donker" : "Systeem"
+      }
+    >
+      <Button
+        square
+        onClick={() =>
+          setTheme(
+            theme == "system" ? "dark" : theme == "dark" ? "light" : "system",
+          )
+        }
+      >
+        {mounted ? (
+          theme == "dark" ? (
+            <Sun />
+          ) : theme == "light" ? (
+            <Moon />
+          ) : (
+            <SunMoon />
+          )
+        ) : (
+          <Moon opacity={0.5} />
+        )}
+      </Button>
+    </Tooltip>
+  );
+}

package/src/declaration.d.ts

@@ -0,0 +1,4 @@
+declare module "*.module.css" {
+  const classes: { [key: string]: string };
+  export default classes;
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from "./NextErrorPage/NextErrorPage";
+export * from "./NextLoadingPage";
+export * from "./NextSSRPagination";
+export * from "./NextSSRThemeToggle";

package/tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "resolveJsonModule": true,
+    "allowJs": true,
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    // Output
+    "declaration": true,
+    "outDir": "./dist",
+    "rootDir": "./src",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["./src"]
+}