jabroni-outfit 1.6.4 → 2.0.7

package/src/scheme/default-scheme.ts

@@ -0,0 +1,129 @@
+import type { ExtractValuesByKey, SchemeInput } from '../types';
+
+export const DefaultScheme = [
+  {
+    title: 'Text Filter',
+    collapsed: true,
+    content: [
+      { filterExclude: false, label: 'exclude' },
+      {
+        filterExcludeWords: '',
+        label: 'keywords',
+        watch: 'filterExclude',
+        placeholder: 'word, word1|word2, f:full_word...',
+      },
+      { filterInclude: false, label: 'include' },
+      {
+        filterIncludeWords: '',
+        label: 'keywords',
+        watch: 'filterInclude',
+        placeholder: 'word, word1|word2, f:full_word...',
+      },
+    ],
+  },
+  {
+    title: 'Duration Filter',
+    collapsed: true,
+    content: [
+      { filterDuration: false, label: 'enable' },
+      { filterDurationMinutes: true, label: 'minutes (seconds by default)' },
+      {
+        filterDurationFrom: 0,
+        watch: 'filterDuration',
+        label: 'from',
+      },
+      {
+        filterDurationTo: 600,
+        watch: 'filterDuration',
+        label: 'to',
+      },
+    ],
+  },
+  {
+    title: 'Sort By',
+    content: [
+      {
+        views: () => {
+          //@ts-expect-error
+          window.sortByViews?.();
+        },
+      },
+      {
+        duration: () => {
+          //@ts-expect-error
+          window.sortByDuration?.();
+        },
+      },
+    ],
+  },
+  {
+    title: 'Privacy Filter',
+    content: [
+      { filterPrivate: false, label: 'private' },
+      { filterPublic: false, label: 'public' },
+      {
+        'check access 🔓': () => {
+          //@ts-expect-error
+          window.requestAccess?.();
+        },
+      },
+    ],
+  },
+  {
+    title: 'Quality Filter',
+    content: [{ filterHD: false, label: 'HD' }],
+  },
+  {
+    title: 'Advanced',
+    content: [
+      {
+        infiniteScrollEnabled: true,
+        label: 'infinite scroll',
+      },
+      {
+        autoRequestAccess: false,
+        label: 'auto friend request',
+      },
+      {
+        writeHistory: false,
+      },
+    ],
+  },
+  {
+    // Pagination
+    title: 'Badge',
+    content: [
+      {
+        text: 'return `${state.$paginationOffset}/${state.$paginationLast}`',
+        vif: 'return state.$paginationLast > 1',
+      },
+    ],
+  },
+] as const satisfies SchemeInput;
+
+function selectFromScheme(keys: string[], scheme: SchemeInput): SchemeInput {
+  return scheme.filter((g) => g.title && keys.some((k) => k === g.title));
+}
+
+export function setupScheme<
+  K extends ExtractValuesByKey<typeof DefaultScheme, 'title'>,
+  T extends SchemeInput,
+  TK extends ExtractValuesByKey<T, 'title'>,
+>(
+  selectFromDefaults: K[],
+  customScheme: T = [] as unknown as T,
+  order?: (K | TK)[],
+) {
+  const selectedScheme: SchemeInput = selectFromScheme(
+    selectFromDefaults,
+    DefaultScheme,
+  );
+
+  selectedScheme.push(...customScheme);
+
+  if (order) {
+    return selectFromScheme(order, selectedScheme);
+  }
+
+  return selectedScheme;
+}

package/src/scheme/parser.ts

@@ -0,0 +1,103 @@
+import { JabronioStore } from '../store';
+import type {
+  RawSchemeElement,
+  SchemeGroup,
+  SchemeInput,
+  SchemeParsed,
+  SchemeSection,
+} from '../types';
+import { SchemeElement } from './scheme-element';
+
+export class SchemeParser {
+  public parsedScheme: SchemeParsed;
+
+  constructor(
+    public scheme: SchemeInput,
+    public store: JabronioStore = new JabronioStore({}),
+  ) {
+    this.parsedScheme = this.parseScheme();
+  }
+
+  static parse(...args: ConstructorParameters<typeof SchemeParser>): {
+    scheme: SchemeParsed;
+    store: JabronioStore;
+  } {
+    const { parsedScheme, store } = new SchemeParser(...args);
+    // console.log('parsed scheme', parsedScheme);
+    // console.log('parsed store', JSON.parse(JSON.stringify(store)));
+    return { scheme: parsedScheme, store };
+  }
+
+  parseSchemeElement(schemeElement: SchemeElement) {
+    this.parseStatePropsFromModel(schemeElement);
+    this.parseStatePropsFromExpressions(schemeElement.text);
+    this.parseStatePropsFromExpressions(schemeElement.vif);
+  }
+
+  parseStatePropsFromModel(schemeElement: SchemeElement) {
+    const { name, value } = schemeElement;
+    if (
+      name === undefined ||
+      value === undefined ||
+      typeof value === 'function'
+    )
+      return;
+    this.store.add(name, value);
+    schemeElement.value = this.store.state[name];
+  }
+
+  parseStatePropsFromExpressions(expr?: string) {
+    if (!expr) return;
+    expr.match(/state\.\$?\w+/g)?.forEach((name) => {
+      const stateProp = name.replace('state.', '');
+      this.store.add(stateProp, '', undefined, false);
+    });
+  }
+
+  parseScheme() {
+    const parsedSchemeGroups: SchemeGroup<RawSchemeElement>[] = this.scheme.map(
+      (schemeSection: Partial<SchemeSection<RawSchemeElement>>, i) => {
+        const emptySchemeSection: SchemeGroup<RawSchemeElement> = {
+          content: [],
+          collapsed: false,
+          title: '',
+          id: `section ${i}`,
+        };
+
+        if (!schemeSection.content) {
+          this.store.add(emptySchemeSection.id, emptySchemeSection.collapsed);
+          return emptySchemeSection;
+        } else {
+          const mergedSchemeSection = {
+            ...emptySchemeSection,
+            ...schemeSection,
+          };
+          if (mergedSchemeSection.title.length > 0) {
+            mergedSchemeSection.id = mergedSchemeSection.title;
+          }
+          this.store.add(emptySchemeSection.id, emptySchemeSection.collapsed);
+          return mergedSchemeSection;
+        }
+      },
+    );
+
+    const parsedScheme: SchemeParsed = parsedSchemeGroups.map(
+      (schemeGroup: SchemeGroup<RawSchemeElement>) => {
+        const { content, ...rest } = schemeGroup;
+        const newContent = content.map(
+          (rawSchemeElement: RawSchemeElement) =>
+            new SchemeElement(rawSchemeElement),
+        );
+        return { content: newContent, ...rest } as SchemeGroup<SchemeElement>;
+      },
+    );
+
+    parsedScheme.forEach((schemeGroup) => {
+      schemeGroup.content.forEach((c) => {
+        this.parseSchemeElement(c);
+      });
+    });
+
+    return parsedScheme;
+  }
+}

package/src/scheme/scheme-element.ts

@@ -0,0 +1,93 @@
+import type {
+  HTMLInputType,
+  HTMLTag,
+  HTMLTagOrInputType,
+  Primitive,
+  RawSchemeElement,
+} from '../types';
+import { propsDifference, uuidv4 } from '../utils';
+
+export class SchemeElement {
+  public name?: string;
+  public value?: Primitive | (() => void);
+  public watch?: string;
+  public step?: string;
+  public min?: string;
+  public max?: string;
+  public vif?: string;
+  public text?: string;
+  public type: HTMLTagOrInputType = 'div';
+  public label?: string;
+  public placeholder?: string;
+  public id: string;
+
+  constructor(schemeElement: RawSchemeElement) {
+    const { d2 } = propsDifference(this, schemeElement);
+    Object.assign(this, schemeElement);
+    this.parseModel(d2);
+    this.parseType();
+    this.parseLabel();
+    this.id = this.name || uuidv4();
+  }
+
+  private parseType() {
+    if (this.type !== 'div') return;
+    if (this.value !== undefined) {
+      let parsedType: string = typeof this.value;
+      if (parsedType === 'function') {
+        parsedType = 'button';
+      } else if (parsedType === 'string') {
+        parsedType = 'text';
+      } else if (parsedType === 'number') {
+        parsedType = 'number';
+        this.parseNumber();
+      } else if (parsedType === 'boolean') {
+        parsedType = 'checkbox';
+      }
+      this.type = parsedType as HTMLInputType;
+    } else if (this.text) {
+      this.type = 'span';
+    }
+  }
+
+  private parseNumber() {
+    if (this.min || this.max || this.step) return;
+    this.min = '0';
+    this.step = '10';
+  }
+
+  private parseLabel() {
+    if (
+      this.label !== undefined ||
+      this.type === 'button'
+    )
+      return;
+    this.label = this.name;
+  }
+
+  private parseModel(differenceKeys: string[]) {
+    if (this.name && this.value) return;
+    const name = differenceKeys[0];
+    if (name) {
+      this.name = name;
+      this.value = this[name] as Primitive | (() => void);
+      delete this[name];
+    }
+  }
+
+  get isInput() {
+    return /checkbox|text|number/.test(this.type);
+  }
+
+  get htmlTag(): HTMLTag {
+    return this.isInput ? 'input' : (this.type as HTMLTag);
+  }
+
+  get inputType(): HTMLInputType {
+    return this.isInput ? (this.type as HTMLInputType) : '';
+  }
+
+  get callback(): (() => void) | undefined {
+    return this.htmlTag === 'button' ? (this.value as () => void) : undefined;
+  }
+}

package/src/store/default-state.ts

@@ -1,38 +1,9 @@
-import type { StateOptions } from "./types";
+import type { StoreStateOptions } from '../types';
 
-export const stateOptions = {
-  EXCLUDE: {
-    filterExclude: { value: false, persistent: true, watch: true },
-    filterExcludeWords: { value: "", persistent: true, watch: "filterExclude" },
-  },
-  INCLUDE: {
-    filterInclude: { value: false, persistent: true, watch: true },
-    filterIncludeWords: { value: "", persistent: true, watch: "filterInclude" },
-  },
-  MISC: {
-    infiniteScrollEnabled: { value: true, persistent: true, watch: true },
-    uiEnabled: { value: true, persistent: true, watch: true }
-  },
-  DURATION_FILTER: {
-    filterDuration: { value: false, persistent: true, watch: true },
-    filterDurationFrom: { value: 0, type: 'number', persistent: true, watch: 'filterDuration' },
-    filterDurationTo: { value: 600, type: 'number', persistent: true, watch: 'filterDuration' }
-  },
-  PRIVACY_FILTER: {
-    filterPrivate: { value: false, persistent: true, watch: true },
-    filterPublic: { value: false, persistent: true, watch: true }
-  },
-  HD_FILTER: {
-    filterHD: { value: false, persistent: true, watch: true }
-  },
-  PAGINATION: {
-    pagIndexLast: { value: 1, persistent: false, watch: true },
-    pagIndexCur: { value: 1, persistent: false, watch: true }
-  }
-}
-
-export const defaultStateInclExclMiscPagination: StateOptions = Object.assign({}, stateOptions.EXCLUDE, stateOptions.INCLUDE, stateOptions.MISC, stateOptions.PAGINATION);
-export const defaultStateWithDuration: StateOptions = Object.assign({}, defaultStateInclExclMiscPagination, stateOptions.DURATION_FILTER);
-export const defaultStateWithDurationAndHD: StateOptions = Object.assign({}, defaultStateWithDuration, stateOptions.HD_FILTER);
-export const defaultStateWithDurationAndPrivacy: StateOptions = Object.assign({}, defaultStateWithDuration, stateOptions.PRIVACY_FILTER);
-export const defaultStateWithDurationAndPrivacyAndHD: StateOptions = Object.assign({}, defaultStateWithDurationAndPrivacy, stateOptions.HD_FILTER);
+export const StoreStateDefault: StoreStateOptions = {
+  uiEnabled: true,
+  hidden: false,
+  darkmode: true,
+  $paginationLast: 1,
+  $paginationOffset: 1,
+};

package/src/store/index.ts

@@ -0,0 +1,63 @@
+import { parseIntegerOr } from 'billy-herrington-utils';
+import { watch } from 'vue';
+import type {
+  Callback,
+  Primitive,
+  StoreState,
+  StoreStateOptions,
+  StoreStateRaw,
+} from '../types';
+import { StoreStateDefault } from './default-state';
+import { PersistentState } from './persistent-state';
+
+export class JabronioStore {
+  private callbacks: Callback<StoreStateRaw>[] = [];
+  public state: StoreState;
+
+  constructor(options?: StoreStateOptions) {
+    const storeOptions = Object.assign({}, StoreStateDefault, options);
+    this.state = new PersistentState({}).state;
+    this.parseState(storeOptions);
+  }
+
+  subscribe(callback: Callback<StoreStateRaw>) {
+    this.callbacks.push(callback);
+  }
+
+  notify(subject: StoreStateRaw) {
+    this.callbacks.forEach((cb) => {
+      cb(subject);
+    });
+  }
+
+  add(key: string, value: Primitive, watchKey?: string, safe?: boolean) {
+    this.state[key] =
+      key in this.state ? (this.state[key] as Primitive) : value;
+
+    watch(
+      () => this.state[key],
+      (a, b) => {
+        if (safe !== false) {
+          if (typeof value === 'number') {
+            this.state[key] = parseIntegerOr(a as string, b as number);
+          }
+        }
+        const subject = typeof watchKey === 'string' ? watchKey : key;
+        this.notify({ [subject]: this.state[subject] as Primitive });
+      },
+      { deep: true },
+    );
+
+    return this;
+  }
+
+  parseState(options: StoreStateOptions) {
+    Object.entries(options).forEach(([k, v]) => {
+      if (typeof v === 'object') {
+        this.add(k, v.value, v.watch);
+      } else {
+        this.add(k, v);
+      }
+    });
+  }
+}

package/src/store/persistent-state.ts

@@ -1,36 +1,64 @@
-import { type Reactive, reactive, watch } from 'vue'
-import type { RecordV } from './types';
+import { type Reactive, reactive, type WatchStopHandle, watch } from 'vue';
+import type { StoreStateRaw } from '../types';
+
+const LOCAL_STORAGE_KEY = 'state_acephale';
 
 export class PersistentState {
-  public state: Reactive<RecordV>;
+  public state: Reactive<StoreStateRaw>;
+  private watchStopHandler: WatchStopHandle;
 
-  constructor(state_: RecordV, private key = "state_acephale") {
+  constructor(
+    storeStateRaw: StoreStateRaw,
+    private key = LOCAL_STORAGE_KEY,
+  ) {
     this.key = key;
-    this.state = reactive(state_);
+    this.state = reactive(storeStateRaw);
     this.sync();
-    this.watchPersistence();
+    this.watchStopHandler = this.watchPersistence();
+  }
+
+  dispose() {
+    this.watchStopHandler();
+    window.removeEventListener('focus', this.setFromLocalStorage);
+    document.removeEventListener('visibilitychange', this.setFromLocalStorage);
   }
 
   sync() {
-    this.trySetFromLocalStorage();
-    window.addEventListener('focus', this.trySetFromLocalStorage);
+    this.setFromLocalStorage();
+    window.addEventListener('focus', this.setFromLocalStorage);
+    document.addEventListener('visibilitychange', this.setFromLocalStorage);
   }
 
   watchPersistence() {
-    watch(this.state, (value) => {
-      this.saveToLocalStorage(this.key, value);
-    });
+    return watch(
+      this.state,
+      () => {
+        this.saveToLocalStorage();
+      },
+      { immediate: false, deep: true },
+    );
   }
 
-  saveToLocalStorage(key: string, value: RecordV) {
-    localStorage.setItem(key, JSON.stringify(value));
+  get persistentOnly() {
+    const persistentKeys = Object.keys(this.state).filter(
+      (k) => !k.startsWith('$'),
+    );
+    const persistentOnly = Object.assign(
+      {},
+      ...persistentKeys.map((k) => ({ [k]: this.state[k] })),
+    );
+    return persistentOnly;
   }
 
-  trySetFromLocalStorage = () => {
+  saveToLocalStorage() {
+    localStorage.setItem(this.key, JSON.stringify(this.persistentOnly));
+  }
+
+  setFromLocalStorage = () => {
     const localStorageValue = localStorage.getItem(this.key);
     if (localStorageValue !== null) {
-      const parsedState = JSON.parse(localStorageValue) as RecordV;
+      const parsedState = JSON.parse(localStorageValue) as StoreStateRaw;
       Object.assign(this.state, parsedState);
     }
-  }
-}
+  };
+}

package/src/style/index.css

@@ -0,0 +1,30 @@
+@import "tailwindcss/theme";
+
+@layer base, components, utilities;
+
+@layer base {
+  .taper-class {
+    @import "tailwindcss/preflight";
+    
+    &, & *, & ::after, & ::before {
+      all: revert-layer;
+    }
+  }
+}
+
+@layer utilities {
+  .taper-class {
+    @import "tailwindcss/utilities";
+  }
+}
+
+@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
+
+@layer components {
+  .tw-input-colors {
+    @apply border-black focus:outline-none focus:bg-yellow-50;
+    @apply dark:text-zinc-300 dark:bg-zinc-700 dark:focus:outline-gray-600
+                  dark:hover:bg-zinc-600 dark:focus:bg-zinc-700;
+
+  }
+}

package/src/test/example.ts

@@ -1,52 +1,64 @@
-import { defaultStateWithDurationAndPrivacyAndHD } from "../store/default-state";
-import { JabroniOutfitStore } from "../store/store";
-import type { StateOptions } from "../store/types";
-import { JabroniOutfitUI } from "../ui";
-import { defaultSchemeWithPrivacyFilterWithHDwithSort } from "../ui/default-scheme";
-import type { Scheme } from "../ui/types";
-
-const example1 = () => {
-  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
-  (defaultSchemeWithPrivacyFilterWithHDwithSort as any).privacyFilter.push(
-    { type: "button", innerText: "check access 🔓", callback: () => { } });
-
-  const store = new JabroniOutfitStore(defaultStateWithDurationAndPrivacyAndHD);
-
-  new JabroniOutfitUI(store, defaultSchemeWithPrivacyFilterWithHDwithSort); 
-
-  store.subscribe((subj) => {
-    const satisfy = /filter/gi.test(Object.keys(subj)[0]);
-    console.log({ ...subj, satisfy });
-  });
-}
-
-example1();
+import { JabronioGUI } from '../app';
+import { DefaultScheme, setupScheme } from '../scheme/default-scheme';
+import { JabronioStore } from '../store';
+import type { SchemeInput, StoreStateOptions } from '../types';
 
 const example2 = () => {
-  const customState: StateOptions = {
-    gradientColor1: { value: "red", persistent: false, watch: true, type: "string" },
-    gradientColor2: { value: "coral", persistent: false, watch: true, type: "string" },
-    gradientColor3: { value: "orange", persistent: false, watch: true, type: "string" },
-    gradientEnabled: { value: true, persistent: false, watch: true, type: "boolean" },
-    uiEnabled: { value: true, persistent: true, watch: true, type: "boolean" }
-  }
+  const customState: StoreStateOptions = {
+    uiEnabled: true,
+    hidden: false,
+  };
 
-  const store = new JabroniOutfitStore(customState);
+  const store = new JabronioStore(customState);
 
-  const customScheme: Scheme = {
-    gradientColor1: [{ type: "text", model: "localState.gradientColor1", placeholder: "color", labelBefore: "color1" }],
-    gradientColor2: [{ type: "text", model: "localState.gradientColor2", placeholder: "color", labelBefore: "color2" }],
-    gradientColor3: [{ type: "text", model: "localState.gradientColor3", placeholder: "color", labelBefore: "color3" }],
-    gradientEnabled: [{ type: "checkbox", model: "localState.gradientEnabled", labelBefore: "gradient enabled" }],
-  };
+  const scheme: SchemeInput = setupScheme(
+    DefaultScheme.map((t) => t.title).filter(Boolean),
+    // [],
+    [
+      {
+        title: 'Colors',
+        collapsed: true,
+        content: [
+          {
+            $color1: 'coral',
+          },
+          {
+            color2: 'crimson',
+          },
+          {
+            $color3: 'tomato',
+          },
+          {
+            size: 100,
+            type: 'range',
+            max: '500',
+            min: '0',
+          },
+          {
+            gradientEnabled: true,
+            label: 'gradient enabled',
+          },
+          {
+            reset: () => {
+              store.state.$color1 = 'darkslateblue';
+              store.state.color2 = 'maroon';
+              store.state.$color3 = 'darksalmon';
+            },
+          },
+        ],
+      },
+    ],
+  );
 
-  new JabroniOutfitUI(store, customScheme);
+  new JabronioGUI(scheme, store);
 
   function drawGradient() {
-    // biome-ignore lint/suspicious/noExplicitAny: <explanation>
-    const { gradientColor1, gradientColor2, gradientColor3, gradientEnabled } = store.localState as any;
-    if (!gradientEnabled) { document.body.style.background = 'blue'; return; }
-    document.body.style.background = `radial-gradient(${gradientColor1}, ${gradientColor2}, ${gradientColor3})`;
+    const { $color1, color2, $color3, gradientEnabled, size } = store.state;
+    if (!gradientEnabled) {
+      document.body.style.background = '#000';
+      return;
+    }
+    document.body.style.background = `repeating-radial-gradient(${$color1}, ${color2}, ${$color3} ${size}%)`;
   }
 
   drawGradient();
@@ -54,6 +66,6 @@ const example2 = () => {
   store.subscribe(() => {
     drawGradient();
   });
-}
+};
 
-example2();
+example2();