@mideind/netskrafl-react 1.0.0-beta.6 → 1.0.0-beta.7

package/package.json

@@ -1,14 +1,25 @@
 {
   "name": "@mideind/netskrafl-react",
-  "version": "1.0.0-beta.6",
+  "version": "1.0.0-beta.7",
   "description": "React UI for Netskrafl",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/mideind/netskrafl-react.git"
   },
+  "type": "module",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
-  "types": "dist/types.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    },
+    "./style.css": "./dist/esm/css/netskrafl.css"
+  },
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "rollup": "rollup -c --bundleConfigAsCjs",
     "watch": "rollup -c --bundleConfigAsCjs -w",

package/.eslintignore

@@ -1,8 +0,0 @@
-node_modules
-dist
-.storybook
-storybook-static
-src/css
-src/fonts
-src/lib
-src/stories

package/.eslintrc.json

@@ -1,13 +0,0 @@
-{
-  "parser": "@typescript-eslint/parser",
-  "extends": [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:prettier/recommended"
-  ],
-  "plugins": ["@typescript-eslint", "prettier"],
-  "rules": {
-    "prettier/prettier": "error",
-    "@typescript-eslint/explicit-module-boundary-types": "off"
-  }
-}

package/rollup.config.js

@@ -1,67 +0,0 @@
-// 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 postcssImport from "postcss-import";
-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(),
-      alias({
-        entries: [
-          { find: '@', replacement: path.resolve(__dirname, 'src') }
-        ]
-      }),
-      resolve({
-        extensions: ['.js', '.jsx', '.ts', '.tsx']
-      }),
-      commonjs(),
-      typescript({ tsconfig: "./tsconfig.json" }),
-      postcss({
-        plugins: [
-          postcssImport(), // Handles @import concatenation
-          // No cssnano or other aggressive minifiers here for now
-        ],
-        extract: 'css/netskrafl.css', // Output path for the bundled CSS relative to 'dist'
-        // minimize: false, // Default is false, but explicitly stating it is fine
-        // sourceMap: 'inline', // Or true for a separate .css.map file. 'inline' is good for dev.
-        extensions: [".css"],
-        modules: false,
-      }),
-      // terser(), // Uncomment for production builds
-    ],
-    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

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

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

@@ -1,66 +0,0 @@
-// 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

@@ -1,155 +0,0 @@
-import React, { useEffect } from "react";
-
-import { INetskraflProps } from "./Netskrafl.types";
-import { GlobalState } from "@/mithril/globalstate";
-import { main } from "@/mithril/page";
-
-export { type INetskraflProps };
-
-const CSS_LINK_ID = "netskrafl-styles";
-
-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 = ({ state, tokenExpired }: INetskraflProps) => {
-  const ref = React.createRef<HTMLDivElement>();
-  const completeState = { ...DEFAULT_STATE, ...state };
-  const { userEmail } = completeState;
-
-  useEffect(() => {
-    // Check if the stylesheet is already added by another instance
-    if (document.getElementById(CSS_LINK_ID)) {
-      // Optionally, you might want to increment a usage counter
-      // and only remove the link when the counter is zero.
-      // For simplicity, we'll assume one global link is fine.
-      return;
-    }
-    const link = document.createElement("link");
-    const styleUrl = `${window.location.origin}/static/css/netskrafl.css`;
-    link.id = CSS_LINK_ID;
-    link.rel = "stylesheet";
-    link.type = "text/css";
-    link.href = styleUrl;
-    // Optional: for CORS, though if it's the same base domain, it might not be needed
-    // link.crossOrigin = "anonymous";
-    document.head.appendChild(link);
-  }, []);
-
-  useEffect(() => {
-    // Load the Netskrafl (Mithril) UI for a new user
-    // console.log("Mounting Netskrafl UI for user", userEmail);
-    if (!userEmail) return;
-    const container = ref.current;
-    if (!container) {
-      console.error("No container for Netskrafl UI");
-      return;
-    }
-    const elemId = `netskrafl-user-${userEmail}`;
-    if (container.firstElementChild?.id === elemId) {
-      // Already exists and correctly mounted
-      // console.log("Netskrafl UI already mounted with elemId", elemId);
-      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 () => {
-      // console.log("Dismounting Netskrafl UI for user", userEmail);
-      // 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

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

package/src/components/netskrafl/index.ts

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

package/src/css/fonts.css

@@ -1,4 +0,0 @@
-
-@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

@@ -1,223 +0,0 @@
-/*
-
-   Glyphs.css
-
-   Style support for Glyphicons
-
-   Copyright © 2025 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 assumed to be present on the host */
-   src: url('/static/fonts/glyphicons-regular.eot') format('embedded-opentype'),
-      url('/static/fonts/glyphicons-regular.woff') format('woff'),
-      url('/static/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";
-}
-

package/src/css/main.css

@@ -1,4 +0,0 @@
-
-@import "./fonts.css";
-@import "./glyphs.css";
-@import "./skrafl-explo.css";