@mideind/netskrafl-react 1.0.0-beta.1

package/dist/types.d.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+
+interface GlobalState {
+    projectId: string;
+    databaseURL: string;
+    firebaseSenderId: string;
+    firebaseAppId: string;
+    firebaseAPIKey: string;
+    measurementId: string;
+    userEmail: string;
+    userId: string;
+    userNick: string;
+    userFullname: string;
+    locale: string;
+    isExplo: boolean;
+    serverUrl: string;
+    movesUrl: string;
+    movesAccessKey: string;
+    token: string;
+    loginUrl: string;
+    loginMethod: string;
+    newUser: boolean;
+    beginner: boolean;
+    fairPlay: boolean;
+    plan: string;
+    hasPaid: boolean;
+    ready: boolean;
+    readyTimed: boolean;
+    uiFullscreen: boolean;
+    uiLandscape: boolean;
+    runningLocal: boolean;
+}
+
+interface INetskraflProps {
+    state: Partial<GlobalState>;
+    tokenExpired?: () => void;
+}
+
+declare const Netskrafl: React.NamedExoticComponent<INetskraflProps>;
+
+export { type INetskraflProps, Netskrafl };

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@mideind/netskrafl-react",
+  "version": "1.0.0-beta.1",
+  "description": "React UI for Netskrafl",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mideind/netskrafl-react.git"
+  },
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/types.d.ts",
+  "scripts": {
+    "rollup": "rollup -c --bundleConfigAsCjs",
+    "watch": "rollup -c --bundleConfigAsCjs -w",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "author": "Miðeind ehf",
+  "license": "CC-BY-NC-4.0",
+  "devDependencies": {
+    "@chromatic-com/storybook": "^3.2.2",
+    "@rollup/plugin-alias": "^5.1.1",
+    "@rollup/plugin-commonjs": "^28.0.1",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^12.1.1",
+    "@storybook/addon-essentials": "^8.4.4",
+    "@storybook/addon-interactions": "^8.4.4",
+    "@storybook/addon-onboarding": "^8.4.4",
+    "@storybook/blocks": "^8.4.4",
+    "@storybook/react": "^8.4.4",
+    "@storybook/react-vite": "^8.4.4",
+    "@storybook/test": "^8.4.4",
+    "@types/mithril": "^2.2.7",
+    "@types/react": "^18.3.12",
+    "rollup": "^4.27.1",
+    "rollup-plugin-dts": "^6.1.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "storybook": "^8.4.4",
+    "tslib": "^2.8.1",
+    "typescript": "^5.6.3"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "dependencies": {
+    "firebase": "^11.0.2",
+    "mithril": "^2.2.10"
+  },
+  "keywords": [
+    "netskrafl",
+    "crossword",
+    "react",
+    "skrafl"
+  ],
+  "bugs": {
+    "url": "https://github.com/mideind/netskrafl-react/issues"
+  },
+  "homepage": "https://github.com/mideind/netskrafl-react#readme"
+}

package/rollup.config.js

@@ -0,0 +1,60 @@
+// rollup.config.js
+
+import resolve from "@rollup/plugin-node-resolve";
+import alias from '@rollup/plugin-alias';
+import commonjs from "@rollup/plugin-commonjs";
+import typescript from "@rollup/plugin-typescript";
+import dts from "rollup-plugin-dts";
+import terser from "@rollup/plugin-terser";
+import peerDepsExternal from "rollup-plugin-peer-deps-external";
+import postcss from "rollup-plugin-postcss";
+import path from "path";
+
+const packageJson = require("./package.json");
+
+export default [
+  {
+    input: "src/index.ts",
+    output: [
+      // CommonJS module
+      {
+        file: packageJson.main,
+        format: "cjs",
+        sourcemap: true,
+      },
+      // ECMAScript module
+      {
+        file: packageJson.module,
+        format: "esm",
+        sourcemap: true,
+      },
+    ],
+    plugins: [
+      peerDepsExternal(),
+      postcss({
+        extensions: [".css"],
+        modules: false,
+        // extract: "index.css",
+      }),
+      alias({
+        entries: [
+          { find: '@', replacement: path.resolve(__dirname, 'src') }
+        ]
+      }),
+      resolve({
+        extensions: ['.js', '.jsx', '.ts', '.tsx']
+      }),
+      commonjs(),
+      typescript({ tsconfig: "./tsconfig.json" }),
+      terser(),
+    ],
+    external: ["react", "react-dom"],
+  },
+  {
+    // Type declaration file (.d.ts)
+    input: "src/index.ts",
+    output: [{ file: "dist/types.d.ts", format: "es" }],
+    external: [/\.css$/], // ignore .css file
+    plugins: [dts.default()],
+  },
+];

package/src/components/index.ts

@@ -0,0 +1,2 @@
+
+export * from "./netskrafl";

package/src/components/netskrafl/Netskrafl.stories.tsx

@@ -0,0 +1,66 @@
+// Netskrafl.stories.tsx
+import { StoryFn, Meta } from "@storybook/react";
+import { Netskrafl } from "./Netskrafl";
+import { INetskraflProps } from "./Netskrafl.types";
+
+export default {
+  title: "ReactComponentLibrary/Netskrafl",
+  component: Netskrafl,
+} as Meta<typeof Netskrafl>;
+
+const Template: StoryFn<typeof Netskrafl> = (args) => <Netskrafl {...args} />;
+
+// @ts-ignore
+const env = import.meta.env;
+
+// The following environment variables are typically stored in .env.local
+// in the project root directory
+const firebaseAPIKey = env.STORYBOOK_FIREBASE_API_KEY || "";
+const firebaseAppId = env.STORYBOOK_FIREBASE_APP_ID || "";
+const firebaseSenderId = env.STORYBOOK_FIREBASE_SENDER_ID || "";
+const measurementId = env.STORYBOOK_MEASUREMENT_ID || "";
+const movesAccessKey = env.STORYBOOK_MOVES_ACCESS_KEY || "";
+
+const args: INetskraflProps = {
+  // The following settings are for testing purposes only
+  state: {
+    projectId: "netskrafl",
+    firebaseAPIKey,
+    databaseURL: "https://netskrafl.firebaseio.com",
+    firebaseSenderId,
+    firebaseAppId,
+    measurementId,
+    userEmail: "embla.mideind@gmail.com",
+    userId: "",
+    userNick: "VilliTest",
+    userFullname: "Villi Thorsteinsson",
+    serverUrl: "http://127.0.0.1:3001",
+    movesUrl: "https://moves-dot-explo-dev.appspot.com",
+    movesAccessKey,
+    loginUrl: "",
+    loginMethod: "malstadur",
+    plan: "",
+    hasPaid: false,
+    runningLocal: true,
+  }
+};
+
+// Paid user (subscriber)
+export const NetskraflPaidTest = Template.bind({});
+NetskraflPaidTest.args = { ...args, state: { ...args.state, plan: "friend", hasPaid: true  } };
+
+// Free user (non-subscriber)
+export const NetskraflFreeTest = Template.bind({});
+NetskraflFreeTest.args = { ...args };
+
+// Explo Dev server
+export const ExploDev = Template.bind({});
+ExploDev.args = {
+  ...args,
+  state: {
+    ...args.state,
+    plan: "friend",
+    hasPaid: true,
+    serverUrl: "https://explo-dev.appspot.com",
+  }
+};

package/src/components/netskrafl/Netskrafl.tsx

@@ -0,0 +1,135 @@
+import React, { useEffect } from "react";
+
+import { INetskraflProps } from "./Netskrafl.types";
+import { GlobalState } from "@/mithril/globalstate";
+import { main } from "@/mithril/page";
+
+export { type INetskraflProps };
+
+import "@/css/fonts.css";
+import "@/css/glyphs.css";
+import "@/css/skrafl-explo.css";
+
+const DEFAULT_STATE: GlobalState = {
+  projectId: "netskrafl",
+  firebaseAPIKey: "",
+  databaseURL: "",
+  firebaseSenderId: "",
+  firebaseAppId: "",
+  measurementId: "",
+  userEmail: "",
+  userId: "",
+  userNick: "",
+  userFullname: "",
+  locale: "is_IS",
+  isExplo: false,
+  serverUrl: "",
+  movesUrl: "",
+  movesAccessKey: "",
+  token: "",
+  loginUrl: "",
+  loginMethod: "",
+  newUser: false,
+  beginner: false,
+  fairPlay: true,
+  plan: "", // Not a friend
+  hasPaid: false,
+  ready: false,
+  readyTimed: false,
+  uiFullscreen: true,
+  uiLandscape: false,
+  runningLocal: false,
+};
+
+const mountForUser = async (state: GlobalState, tokenExpired?: () => void): Promise<HTMLDivElement> => {
+  // Return a DOM tree containing a mounted Netskrafl UI
+  // for the user specified in the state object
+  const { userEmail } = state;
+  if (!userEmail) {
+    // console.error("No user specified for Netskrafl UI");
+    throw new Error("No user specified for Netskrafl UI");
+  }
+  // Check whether we already have a mounted UI for this user
+  const elemId = `netskrafl-user-${userEmail}`;
+  const existing = document.getElementById(elemId);
+  if (existing) {
+    // console.log("Netskrafl UI already mounted for user", userEmail);
+    return existing as HTMLDivElement;
+  }
+  // Create a new div element to hold the UI
+  const root = document.createElement('div');
+  root.id = elemId;
+  root.className = "netskrafl-loading";
+  // Attach the partially-mounted div to the document body
+  // as a placeholder while the UI is being mounted
+  document.body.appendChild(root);
+  const loginResult = await main(state, root);
+  if (loginResult === "success") {
+    // The UI was successfully mounted
+    root.className = "netskrafl-user";
+    return root;
+  } else if (loginResult === "expired") {
+    // We need a new token from the Málstaður backend
+    root.className = "netskrafl-expired";
+    tokenExpired && tokenExpired(); // This causes a reload of the component
+    return root;
+  }
+  // console.error("Failed to mount Netskrafl UI for user", userEmail);
+  throw new Error("Failed to mount Netskrafl UI");
+}
+
+const NetskraflImpl: React.FC<INetskraflProps> = ({ state, tokenExpired }) => {
+  const ref = React.createRef<HTMLDivElement>();
+  const completeState = { ...DEFAULT_STATE, ...state };
+  const { userEmail } = completeState;
+
+  useEffect(() => {
+    // Load the Netskrafl (Mithril) UI for a new user
+    if (!userEmail) return;
+    const container = ref.current;
+    if (!container) {
+      // console.error("Unable to mount Netskrafl UI");
+      return;
+    }
+    const elemId = `netskrafl-user-${userEmail}`;
+    if (container.firstElementChild?.id === elemId) {
+      // Already exists and correctly mounted
+      return;
+    }
+    try {
+      mountForUser(completeState, tokenExpired).then((div) => {
+        // Attach the div as a child of the container
+        // instead of any previous children
+        const container = ref.current;
+        if (container) {
+          container.innerHTML = "";
+          container.appendChild(div);
+        }
+      });
+    } catch (err) {
+      // console.error("Failed to mount Netskrafl UI for user", userEmail);
+      const container = document.getElementById("netskrafl-container");
+      if (container)
+        container.innerHTML = "";
+    }
+    return () => {
+      // Move the Netskrafl UI to a hidden div under the body element
+      // when the component is unmounted
+      const container = document.getElementById("netskrafl-container");
+      const div = container?.firstElementChild;
+      if (div?.id === elemId) {
+        document.body.appendChild(div);
+      }
+    };
+  }, [userEmail]);
+
+  return (
+    <div className="netskrafl">
+      <div className="netskrafl-container" id="netskrafl-container" ref={ref}>
+        { /* The Netskrafl single-page UI will be rendered here */ }
+      </div>
+    </div>
+  );
+};
+
+export const Netskrafl = React.memo(NetskraflImpl);

package/src/components/netskrafl/Netskrafl.types.ts

@@ -0,0 +1,7 @@
+
+import { GlobalState } from "../../mithril/globalstate";
+
+export interface INetskraflProps {
+  state: Partial<GlobalState>;
+  tokenExpired?: () => void;
+}

package/src/components/netskrafl/index.ts

@@ -0,0 +1,2 @@
+
+export * from "./Netskrafl";

package/src/css/fonts.css

@@ -0,0 +1,4 @@
+
+@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,400;0,700;1,400;1,700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');

package/src/css/glyphs.css

@@ -0,0 +1,224 @@
+/*
+
+   Glyphs.css
+
+   Style support for Glyphicons
+
+   Copyright © 2024 Miðeind ehf.
+   Author: Vilhjalmur Thorsteinsson
+
+   The Creative Commons Attribution-NonCommercial 4.0
+   International Public License (CC-BY-NC 4.0) applies to this software.
+   For further information, see https://github.com/mideind/Netskrafl
+
+*/
+
+@font-face {
+   font-family: 'Glyphicons Regular';
+   /* The following source URLs are patched up at run-time
+      to point to the backend server */
+   src: url('../fonts/glyphicons-regular.eot') format('embedded-opentype'),
+      url('../fonts/glyphicons-regular.woff') format('woff'),
+      url('../fonts/glyphicons-regular.ttf') format('truetype');
+}
+
+.glyphicon {
+   position: relative;
+   top: 2px;
+   display: inline-block;
+   font-family: 'Glyphicons Regular';
+   font-style: normal;
+   font-weight: normal;
+   line-height: 1;
+}
+
+.glyphicon-play:before {
+   content: "\E174";
+}
+.glyphicon-exclamation-sign:before {
+   content: "\E197";
+}
+.glyphicon-log-in:before {
+   content: "\E387";
+}
+.glyphicon-log-out:before {
+   content: "\E388";
+}
+.glyphicon-screenshot:before {
+   content: "\E186";
+}
+.glyphicon-refresh:before {
+   content: "\E082";
+}
+.glyphicon-forward:before {
+   content: "\E177";
+}
+.glyphicon-fire:before {
+   content: "\E023";
+}
+.glyphicon-ok:before {
+   content: "\E207";
+}
+.glyphicon-remove:before {
+   content: "\E208";
+}
+.glyphicon-info-sign:before {
+   content: "\E196";
+}
+.glyphicon-cog:before {
+   content: "\E137";
+}
+.glyphicon-chevron-left:before {
+   content: "\E225";
+}
+.glyphicon-chevron-right:before {
+   content: "\E224";
+}
+.glyphicon-circle-arrow-down:before {
+   content: "\E220";
+}
+.glyphicon-download:before {
+   content: "\E201";
+}
+.glyphicon-star:before {
+   content: "\E050";
+}
+.glyphicon-flag:before {
+   content: "\E267";
+}
+.glyphicon-flag-after:after {
+   content: "\E267";
+}
+.glyphicon-bookmark:before {
+   content: "\E073";
+}
+.glyphicon-star-empty:before {
+   content: "\E049";
+}
+.glyphicon-hand-right:before {
+   content: "\E346";
+}
+.glyphicon-hand-left:before {
+   content: "\E347";
+}
+.glyphicon-thumbs-up:before {
+   content: "\E344";
+}
+.glyphicon-thumbs-down:before {
+   content: "\E345";
+}
+.glyphicon-remove-circle:before {
+   content: "\E198";
+}
+.glyphicon-th:before {
+   content: "\E157";
+}
+.glyphicon-user:before {
+   content: "\E004";
+}
+.glyphicon-comment:before {
+   content: "\E310";
+}
+.glyphicon-eye-open:before {
+   content: "\E052";
+}
+.glyphicon-paperclip:before {
+   content: "\E063";
+}
+.glyphicon-link:before {
+   content: "\E051";
+}
+.glyphicon-arrow-up:before {
+   content: "\E214";
+}
+.glyphicon-flash:before {
+   content: "\E242";
+}
+.glyphicon-time:before {
+   content: "\E055";
+}
+.glyphicon-volume-off:before {
+   content: "\E183";
+}
+.glyphicon-volume-up:before {
+   content: "\E185";
+}
+.glyphicon-hourglass:before {
+   content: "\231B";
+}
+.glyphicon-random:before {
+   content: "\E084";
+}
+.glyphicon-down-arrow:before {
+   content: "\E213";
+}
+.glyphicon-signal:before {
+   content: "\E080";
+}
+.glyphicon-crown:before {
+   content: "\E362";
+}
+.glyphicon-dashboard:before {
+   content: "\E332";
+}
+.glyphicon-show-lines:before {
+   content: "\E159";
+}
+.glyphicon-user-conversation:before {
+   content: "\E527";
+}
+.glyphicon-life-preserver:before {
+   content: "\E308";
+}
+.glyphicon-conversation:before {
+   content: "\E245";
+}
+.glyphicon-chat:before {
+   content: "\E246";
+}
+.glyphicon-baby-formula:before {
+   content: "\E492";
+}
+.glyphicon-stroller:before {
+   content: "\E076";
+}
+.glyphicon-edit:before {
+   content: "\E151";
+}
+.glyphicon-circle-question-mark:before {
+   content: "\E195";
+}
+.glyphicon-resize-small:before {
+   content: "\E215";
+}
+.glyphicon-shopping-bag:before {
+   content: "\E351";
+}
+.glyphicon-address-book:before {
+   content: "\E089";
+}
+.glyphicon-search:before {
+   content: "\E028";
+}
+.glyphicon-lightbulb:before {
+   content: "\E065";
+}
+.glyphicon-coffee-cup:before {
+   content: "\E295";
+}
+.glyphicon-grid:before {
+   content: "\E157";
+}
+.glyphicon-home:before {
+   content: "\E021";
+}
+.glyphicon-target:before {
+   content: "\E473";
+}
+.glyphicon-ban-circle:before {
+   content: "\E200";
+}
+.glyphicon-right-arrow:before {
+   content: "\E212";
+}
+