a bunch of changes. currently working on grid layout for create modal

Author: leonhma

.eslintrc.json

@@ -17,6 +17,8 @@
   "rules": {
     "no-unused-vars": "error",
     "@typescript-eslint/no-unused-vars": "off",
-    "no-use-before-define": "warn"
+    "no-use-before-define": "warn",
+    "eqeqeq": "error",
+    "no-console": "warn"
   }
 }

.eslintrc.prod.json

@@ -0,0 +1,6 @@
+{
+  "extends": ["./.eslintrc.json"],
+  "rules": {
+    "no-console": "error"
+  }
+}

.github/workflows/release.yml

@@ -38,7 +38,7 @@ jobs:
           git push origin master
 
       - name: Build
-        run: yarn build --env production
+        run: yarn build:prod
 
       - name: Upload assets to a Release
         uses: AButler/upload-release-assets@v2.0

.gitignore

@@ -1,6 +1,7 @@
 node_modules/
 yarn-error.log
 main.js
+!*/**/main.js
 data.json
 package-lock.json
 .nyc_output

jest.config.ts

@@ -1,5 +1,3 @@
-console.log("jest config loaded");
-
 export default {
   roots: ["<rootDir>/src"],
   testMatch: ["**/__tests__/**/*.+(ts)"],

package.json

@@ -8,27 +8,33 @@
   "license": "MIT",
   "private": true,
   "scripts": {
-    "build": "webpack",
+    "build:prod": "yarn lint -c .eslintrc.prod.json && webpack --env=production",
+    "build": "yarn lint && webpack",
     "test": "jest",
     "format": "yarn prettier --write .",
-    "lint": "yarn eslint ."
+    "lint": "yarn eslint .",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "devDependencies": {
+    "@babel/core": "^7.20.12",
     "@tsconfig/svelte": "^3.0.0",
     "@types/jest": "^29.2.3",
     "@types/node": "*",
     "@typescript-eslint/eslint-plugin": "^5.41.0",
     "@typescript-eslint/parser": "^5.41.0",
+    "babel-loader": "^8.3.0",
     "css-loader": "^6.7.3",
     "eslint": "^8.26.0",
     "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-storybook": "^0.6.10",
     "jest": "^29.2.2",
     "nested-object-assign": "^1.0.4",
     "prettier": "^2.7.1",
-    "sass": "^1.54.4",
+    "sass": "^1.58.0",
     "sass-loader": "^13.0.2",
     "style-loader": "^3.3.1",
-    "svelte": "^3.53.1",
+    "svelte": "^3.55.1",
     "svelte-loader": "^3.1.4",
     "svelte-material-icons": "^2.0.4",
     "svelte-preprocess": "^4.10.7",

src/app/CreatePlotModal.ts

@@ -1,5 +1,5 @@
 import { Editor, Modal } from "obsidian";
-import type { PlotOptions } from "../common/types";
+import type { PlotInputs } from "../common/types";
 import type ObsidianFunctionPlot from "../main";
 import PlotModal from "../components/PlotModal/PlotModal.svelte";
 import { DEFAULT_PLOT_INPUTS } from "../common/defaults";
@@ -16,15 +16,18 @@ export default class CreatePlotModal extends Modal {
   }
 
   async onOpen() {
+    this.titleEl.setText("Create a Plot");
+    this.modalEl.addClass("fplt-modal");
+    // attach svelte PlotModal component
     new PlotModal({
       target: this.contentEl,
       props: {
         options: Object.assign(
           JSON.parse(JSON.stringify(DEFAULT_PLOT_INPUTS)),
-          { renderer: this.plugin.settings.defaultRenderer }  // assign default renderer as initial dropdown state
+          { renderer: this.plugin.settings.defaultRenderer } // assign default renderer as initial dropdown state
         ),
         plugin: this.plugin,
-        submit: (options: PlotOptions) => {
+        submit: (options: PlotInputs) => {
           insertPlot(this.plugin, this.editor, options);
           this.close();
         },

src/common/defaults.ts

@@ -1,6 +1,6 @@
 import type {
-  FunctionOptions,
-  PlotOptions,
+  FunctionInputs,
+  PlotInputs,
   PluginSettings,
   rendererType,
 } from "./types";
@@ -25,65 +25,50 @@ export const DEFAULT_PLUGIN_SETTINGS: PluginSettings = {
   defaultRenderer: "interactive",
 };
 
-export const FALLBACK_FUNCTION_OPTIONS: Partial<FunctionOptions> = {
-  range: {
-    min: -Infinity,
-    max: Infinity,
-  },
+/**
+ * The options displayed for renderers
+ */
+// eslint-disable-next-line no-unused-vars
+export const rendererOptions: { [_ in rendererType]: string } = {
+  interactive: "Interactive (zoomable)",
+  image: "Image (exportable)",
 };
 
-export const DEFAULT_FUNCTION_INPUTS: FunctionOptions = {
+export const DEFAULT_FUNCTION_INPUTS: FunctionInputs = {
   id: null,
-  fnType: "linear", // always set by the plugin
-  fn: "", // error if missing, no fallback
+  fnType: undefined, // always set by the plugin
+  fn: undefined, // error if missing, no fallback
   vector: {
-    x: null,
-    y: null,
+    x: undefined,
+    y: undefined,
   }, // error if missing, no fallback
-  r: "", // error if missing, no fallback
-  color: "#808080",
+  r: undefined, // error if missing, no fallback
+  color: null, // set by color generator. fallback value is gray
   offset: {
-    x: null,
-    y: null,
+    x: undefined,
+    y: undefined,
   },
   closed: false,
-  graphType: null,
+  graphType: undefined,
   range: {
-    min: null,
-    max: null,
+    min: undefined,
+    max: undefined,
   },
-  nSamples: null,
+  nSamples: undefined,
   skipTip: false,
 };
 
-/**
- * The options displayed for renderers
- */
-// eslint-disable-next-line no-unused-vars
-export const rendererOptions: { [_ in rendererType]: string } = {
-  interactive: "Interactive (zoomable)",
-  image: "Image (exportable)",
-};
-
-export const FALLBACK_PLOT_OPTIONS: Partial<PlotOptions> = {
-  xAxis: {
-    domain: {
-      min: -10,
-      max: 10,
-    },
-  },
-  yAxis: {
-    domain: {
-      min: -10,
-      max: 10,
-    },
+export const FALLBACK_FUNCTION_INPUTS: Partial<FunctionInputs> = {
+  range: {
+    min: -Infinity,
+    max: Infinity,
   },
 };
 
 /**
  * The default options for a plot.
  */
-export const DEFAULT_PLOT_INPUTS: PlotOptions = {
+export const DEFAULT_PLOT_INPUTS: PlotInputs = {
   target: null, // set by rendering function
   renderer: null, // has initial state controlled by plugin.settings.defaultRenderer
   title: null,
@@ -102,3 +87,18 @@ export const DEFAULT_PLOT_INPUTS: PlotOptions = {
   disableZoom: false,
   data: [],
 };
+
+export const FALLBACK_PLOT_INPUTS: Partial<PlotInputs> = {
+  xAxis: {
+    domain: {
+      min: -10,
+      max: 10,
+    },
+  },
+  yAxis: {
+    domain: {
+      min: -10,
+      max: 10,
+    },
+  },
+};

src/common/types.ts

@@ -1,5 +1,9 @@
 import type { Chart } from "function-plot";
 import type { EventEmitter } from "events";
+import type {
+  FunctionPlotDatum,
+  FunctionPlotOptions,
+} from "function-plot/dist/types";
 
 export type rendererType = "interactive" | "image";
 
@@ -8,9 +12,9 @@ export type rendererType = "interactive" | "image";
  */
 export type chartType = Chart & EventEmitter;
 
-export interface FunctionOptions {
+export interface FunctionInputs {
   id: string;
-  fnType: string;
+  fnType: (FunctionPlotDatum["fnType"] & "linear") | "vector" | "polar";
   fn?: string;
   vector?: {
     x: number;
@@ -26,18 +30,18 @@ export interface FunctionOptions {
     min: number;
     max: number;
   };
-  graphType?: string;
+  graphType?: FunctionPlotDatum["graphType"];
   nSamples?: number;
   closed?: boolean;
   skipTip?: boolean;
 }
 /**
  * An interface specifying the options for a plot.
  */
-export interface PlotOptions {
-  data: FunctionOptions[];
+export interface PlotInputs {
+  data: FunctionInputs[];
   renderer: rendererType;
-  target: HTMLElement | Node | string;
+  target: FunctionPlotOptions["target"];
   xAxis?: {
     label?: string;
     domain?: {