@enso-ui/ui 6.2.7 → 7.0.1

package/src/modules/plugins/i18n.js

@@ -1,21 +1,23 @@
-import store from '../../core/services/store';
+import { useStore } from '../../core/services/pinia';
 
 export default (key, params = null) => {
     if (key === null || key === '' || typeof key === 'undefined') {
         return null;
     }
 
-    if (!store.getters['localisation/ready']) {
+    const localisation = useStore('localisation');
+
+    if (!localisation?.ready) {
         return key;
     }
 
-    let translation = store.getters['localisation/i18n'](key);
+    let translation = localisation.translate(key);
 
     if (typeof translation === 'undefined' || translation === null) {
         translation = key;
 
-        if (store.state.localisation.keyCollector) {
-            store.commit('localisation/addMissingKey', key);
+        if (localisation.keyCollector) {
+            localisation.addMissingKey(key);
         }
     }
 

package/src/modules/plugins/route.js

@@ -1,8 +1,8 @@
 import RouteMapper from '@enso-ui/route-mapper';
-import store from '../../core/services/store';
+import { useStore } from '../../core/services/pinia';
 
 export default (name, params, absolute) => {
-    const { meta, routes } = store.state;
+    const state = useStore('app');
 
-    return (new RouteMapper(meta.appUrl, routes).get(name, params, absolute));
+    return new RouteMapper(state.meta.appUrl, state.routes).get(name, params, absolute);
 };

package/src/pinia/app.js

@@ -0,0 +1,75 @@
+import { defineStore } from 'pinia';
+import App from '../core/app';
+
+export const app = defineStore('app', {
+    state: () => ({
+        appUpdate: false,
+        impersonating: null,
+        meta: {},
+        pendingRequests: [],
+        routes: {},
+        showQuote: false,
+        user: {},
+        avatarKey: 1,
+    }),
+
+    getters: {
+        isWebview: () => typeof ReactNativeWebView !== 'undefined',
+        requests: state => state.pendingRequests.length,
+        requestIndex: state => ({ url, method }) => state.pendingRequests
+            .findIndex(request => method === request.method && url === request.url),
+    },
+
+    actions: {
+        addRequest(payload) {
+            this.pendingRequests.push(payload);
+        },
+        newRelease() {
+            this.appUpdate = true;
+        },
+        removeRequest(index) {
+            this.pendingRequests.splice(index, 1);
+        },
+        setDefaultRoute(route) {
+            App.router?.addRoute({
+                name: 'default',
+                path: '/',
+                redirect: { name: route },
+            });
+        },
+        setImpersonating(impersonating) {
+            this.impersonating = impersonating;
+        },
+        setMeta(meta) {
+            this.meta = meta;
+        },
+        setPageTitle(title) {
+            this.meta.pageTitle = title;
+        },
+        setRoutes(routes) {
+            this.routes = routes;
+        },
+        setShowQuote(value) {
+            this.showQuote = value;
+        },
+        setUser(user) {
+            this.user = user;
+        },
+        set({
+            meta,
+            user,
+            routes,
+            defaultRoute,
+            impersonating,
+        }) {
+            this.setMeta(meta);
+            this.setUser(user);
+            this.setRoutes(routes);
+            this.setDefaultRoute(defaultRoute);
+            this.setImpersonating(impersonating);
+        },
+        updateAvatar() {
+            this.avatarKey += 1;
+        },
+    },
+});

package/src/pinia/layout.js

@@ -0,0 +1,115 @@
+import { defineStore } from 'pinia';
+import { preferences } from './preferences';
+
+const root = () => document.documentElement;
+
+const applyTheme = theme => {
+    const element = root();
+
+    if (theme === 'system') {
+        element.removeAttribute('data-theme');
+        element.style.colorScheme = 'light dark';
+    } else {
+        element.style.colorScheme = theme;
+        element.setAttribute('data-theme', theme);
+    }
+};
+
+export const layout = defineStore('layout', {
+    state: () => ({
+        home: true,
+        isMobile: false,
+        isTablet: false,
+        isTouch: false,
+        footer: true,
+        header: true,
+        themes: [],
+        sidebar: {
+            isExpanded: true,
+            isVisible: true,
+        },
+        navbar: {
+            isVisible: false,
+        },
+        settings: {
+            isVisible: false,
+        },
+    }),
+
+    actions: {
+        set({ themes }) {
+            this.themes = themes;
+        },
+        setHome(status) {
+            this.home = status;
+        },
+        setIsMobile(isMobile) {
+            this.isMobile = isMobile;
+        },
+        setIsTablet(isTablet) {
+            this.isTablet = isTablet;
+        },
+        setIsTouch(isTouch) {
+            this.isTouch = isTouch;
+        },
+        hideFooter() {
+            this.footer = false;
+        },
+        showFooter() {
+            this.footer = true;
+        },
+        hideHeader() {
+            this.header = false;
+        },
+        showHeader() {
+            this.header = true;
+        },
+        showSidebar() {
+            this.sidebar.isVisible = true;
+        },
+        hideSidebar() {
+            this.sidebar.isVisible = false;
+        },
+        expandSidebar() {
+            this.sidebar.isExpanded = true;
+        },
+        collapseSidebar() {
+            this.sidebar.isExpanded = false;
+        },
+        updateSidebar(status) {
+            this.sidebar.isExpanded = status;
+        },
+        toggleSidebar() {
+            if (this.isTouch) {
+                this.sidebar.isExpanded = true;
+                this.sidebar.isVisible = !this.sidebar.isVisible;
+                return;
+            }
+
+            this.sidebar.isVisible = true;
+            this.sidebar.isExpanded = !this.sidebar.isExpanded;
+        },
+        showNavbar() {
+            this.navbar.isVisible = true;
+        },
+        hideNavbar() {
+            this.navbar.isVisible = false;
+        },
+        toggleSettings() {
+            this.settings.isVisible = !this.settings.isVisible;
+        },
+        async setTheme(theme = null) {
+            const nextTheme = theme ?? preferences().global.theme;
+
+            applyTheme(nextTheme);
+
+            return Promise.resolve(nextTheme);
+        },
+        async loadTheme() {
+            return this.setTheme();
+        },
+        async switchTheme(theme = null) {
+            return this.setTheme(theme);
+        },
+    },
+});

package/src/pinia/loadState.js

@@ -0,0 +1,78 @@
+import axios from 'axios';
+import App from '../core/app';
+import eventBus from '../core/services/eventBus';
+import { useStore } from '../core/services/pinia';
+import { app as useApp } from './app';
+import { layout } from './layout';
+import { preferences } from './preferences';
+import { websockets } from './websockets';
+
+const load = (name, payload) => {
+    const store = useStore(name);
+
+    if (!store) {
+        throw new Error(`Unknown Pinia store "${name}"`);
+    }
+
+    if (typeof store.set !== 'function') {
+        throw new Error(`Store "${name}" must expose set(payload)`);
+    }
+
+    store.set(payload);
+
+    return store;
+};
+
+export const loadAppState = async (state = useApp()) => {
+    try {
+        const { data } = await axios.get('/api/core/home');
+
+        data.forEach(({ store, state: payload }) => load(store, payload));
+
+        layout().updateSidebar(preferences().global.expandedSidebar);
+        window.Laravel = state.meta.csrfToken;
+
+        if (state.meta.sentryDsn) {
+            const { default: Sentry } = await import('../modules/sentry');
+            const sentry = new Sentry(App.instance, App.router);
+            sentry.init(state);
+        }
+
+        eventBus.$emit('app-state-loaded');
+
+        await layout().setTheme();
+        await websockets().connect(state.meta.csrfToken);
+
+        if (state.meta.env === 'local') {
+            window.http = axios;
+        }
+    } catch (error) {
+        if (error.response && error.response.status === 401) {
+            useStore('auth')?.logout();
+            App.router?.push({ name: 'login' });
+        } else {
+            throw error;
+        }
+    }
+};
+
+export const loadGuestState = async (state = useApp()) => {
+    const { data } = await axios.get('/api/meta', {
+        params: { locale: localStorage.getItem('locale') },
+    });
+
+    const { meta, i18n, routes } = data;
+    const lang = Object.keys(i18n).shift();
+
+    useStore('localisation')?.setI18n(i18n);
+    preferences().setLangValue(lang);
+    state.setMeta(meta);
+    state.setRoutes(routes);
+
+    const loginRoutes = ['login', 'password.email', 'password.reset'];
+    const route = App.router?.currentRoute?.value;
+
+    if (!route || !loginRoutes.includes(route.name)) {
+        App.router?.push({ name: 'login' });
+    }
+};

package/src/pinia/preferences.js

@@ -0,0 +1,90 @@
+import axios from 'axios';
+import { defineStore } from 'pinia';
+import { currentRoute } from '../core/services/pinia';
+import { layout } from './layout';
+
+const storePreference = payload => axios.patch('/api/core/preferences/store', payload);
+
+export const preferences = defineStore('preferences', {
+    state: () => ({
+        global: {},
+        local: {},
+    }),
+
+    getters: {
+        lang: state => state.global.lang,
+        theme: state => state.global.theme,
+        expandedSidebar: state => state.global.expandedSidebar,
+        toastrPosition: state => state.global.toastrPosition,
+        bookmarks: state => state.global.bookmarks,
+        localByRoute: state => route => state.local[route],
+    },
+
+    actions: {
+        set(preferences) {
+            this.global = preferences.global;
+            this.local = preferences.local;
+        },
+        setGlobalValue({ key, value }) {
+            this.global[key] = value;
+        },
+        setLangValue(lang) {
+            this.global.lang = lang;
+        },
+        setThemeValue(theme) {
+            this.global.theme = theme;
+        },
+        setToastrPositionValue(position) {
+            this.global.toastrPosition = position;
+        },
+        setExpandedSidebarValue(expandedSidebar) {
+            this.global.expandedSidebar = expandedSidebar;
+        },
+        setBookmarksValue(bookmarks) {
+            this.global.bookmarks = bookmarks;
+        },
+        setLocalValue(value) {
+            const route = currentRoute();
+
+            if (route?.name) {
+                this.local[route.name] = value;
+            }
+        },
+        async setGlobal(payload) {
+            this.setGlobalValue(payload);
+            await storePreference({ global: this.global });
+        },
+        async setLocal(value) {
+            this.setLocalValue(value);
+
+            const route = currentRoute();
+
+            if (route?.name) {
+                await storePreference({ route: route.name, value });
+            }
+        },
+        async setLang(lang) {
+            this.setLangValue(lang);
+            localStorage.setItem('locale', lang);
+            await storePreference({ global: this.global });
+        },
+        async setTheme(theme) {
+            this.setThemeValue(theme);
+            await layout().switchTheme(theme);
+            await storePreference({ global: this.global });
+        },
+        async setToastrPosition(position) {
+            this.setToastrPositionValue(position);
+            await storePreference({ global: this.global });
+        },
+        async setBookmarksState(bookmarks) {
+            this.setBookmarksValue(bookmarks);
+            await storePreference({ global: this.global });
+        },
+        async setSidebarState(state) {
+            this.setExpandedSidebarValue(state);
+            layout().updateSidebar(state);
+            await storePreference({ global: this.global });
+        },
+    },
+});

package/src/pinia/websockets.js

@@ -0,0 +1,48 @@
+import Echo from 'laravel-echo';
+import { defineStore } from 'pinia';
+
+const resolvePusher = async () => {
+    const module = await import('pusher-js');
+    const Pusher = module.default ?? module;
+
+    window.Pusher = Pusher;
+
+    return Pusher;
+};
+
+const initEcho = async ({ authEndpoint, pusher }, csrfToken) => {
+    await resolvePusher();
+
+    window.Echo = new Echo({
+        broadcaster: 'pusher',
+        key: pusher.key,
+        cluster: pusher.options.cluster,
+        useTLS: pusher.options.useTLS,
+        namespace: 'App.Events',
+        csrfToken,
+        authEndpoint,
+    });
+
+    return window.Echo;
+};
+
+export const websockets = defineStore('websockets', {
+    state: () => ({
+        authEndpoint: null,
+        channels: null,
+        pusher: null,
+    }),
+
+    actions: {
+        set(config) {
+            this.channels = config.channels;
+            this.pusher = config.pusher;
+            this.authEndpoint = config.authEndpoint;
+        },
+        async connect(csrfToken) {
+            if (!window.Echo && this.authEndpoint && this.pusher) {
+                await initEcho(this, csrfToken);
+            }
+        },
+    },
+});

package/src/core/services/store.js

@@ -1,26 +0,0 @@
-import { createStore } from 'vuex';
-import Resources from './resources';
-import importer from '../../modules/importers/storeImporter';
-import {
-    actions, getters, modules, mutations, state,
-} from '../../modules/store';
-
-const packageStore = () => {
-    const modules = importer(Resources.store());
-
-    return Object.keys(modules).reduce((module, key) => {
-        module[key.split('/').pop()] = modules[key];
-        return module;
-    }, {});
-};
-
-Object.assign(modules, packageStore(), importer(Resources.localStore()));
-
-export default createStore({
-    strict: process.env.NODE_ENV !== 'production',
-    modules,
-    state,
-    getters,
-    mutations,
-    actions,
-});

package/src/modules/importers/storeImporter.js

@@ -1,8 +0,0 @@
-const storeImporter = requireContext => requireContext.keys()
-    .map(fileName => [fileName.replace(/(^.\/)|(\.js$)/g, ''), requireContext(fileName)])
-    .reduce((modules, [name, module]) => {
-        module.namespaced = true;
-        return Object.assign({}, modules, { [name]: module });
-    }, {});
-
-export default storeImporter;

package/src/modules/importers/themeImporter.js

@@ -1,5 +0,0 @@
-const themeImporter = requireContext => requireContext.keys()
-    .map(fileName => [fileName.replace(/(^.\/)|(\.lazy.scss$)/g, ''), requireContext(fileName)])
-    .reduce((themes, [name, theme]) => ({ ...themes, [name]: theme.default }), {});
-
-export default themeImporter;

package/src/modules/store/layout/navbar.js

@@ -1,8 +0,0 @@
-export const state = {
-    isVisible: false,
-};
-
-export const mutations = {
-    show: state => (state.isVisible = true),
-    hide: state => (state.isVisible = false),
-};

package/src/modules/store/layout/settings.js

@@ -1,7 +0,0 @@
-export const state = {
-    isVisible: false,
-};
-
-export const mutations = {
-    toggle: state => (state.isVisible = !state.isVisible),
-};

package/src/modules/store/layout/sidebar.js

@@ -1,22 +0,0 @@
-export const state = {
-    isExpanded: true,
-    isVisible: true,
-};
-
-export const mutations = {
-    show: state => (state.isVisible = true),
-    hide: state => (state.isVisible = false),
-    expand: state => (state.isExpanded = true),
-    collapse: state => (state.isExpanded = false),
-    update: (state, status) => (state.isExpanded = status),
-    toggle: (state, isTouch) => {
-        if (isTouch) {
-            state.isExpanded = true;
-            state.isVisible = !state.isVisible;
-            return;
-        }
-
-        state.isVisible = true;
-        state.isExpanded = !state.isExpanded;
-    },
-};

package/src/modules/store/layout.js

@@ -1,72 +0,0 @@
-import storeImporter from '../importers/storeImporter';
-import themeImporter from '../importers/themeImporter';
-
-const themes = themeImporter(require.context('@enso-ui/themes/bulma', false, /.*\.lazy\.scss$/));
-
-export const modules = storeImporter(require.context('./layout', false, /.*\.js$/));
-
-export const state = {
-    home: true,
-    themes: {},
-    lightsOff: false,
-    isMobile: false,
-    isTablet: false,
-    isTouch: false,
-    footer: true,
-    header: true,
-};
-
-export const getters = {
-    current: (state, getters, rootState) => {
-        if (!rootState.auth.isAuth) {
-            return 'auth';
-        }
-
-        return state.home
-            ? 'home'
-            : 'default';
-    },
-};
-
-export const mutations = {
-    home: (state, status) => (state.home = status),
-    setThemes: (state, themes) => (state.themes = themes),
-    toggleLights: state => (state.lightsOff = !state.lightsOff),
-    setIsMobile: (state, isMobile) => (state.isMobile = isMobile),
-    setIsTablet: (state, isTablet) => (state.isTablet = isTablet),
-    setIsTouch: (state, isTouch) => (state.isTouch = isTouch),
-    hideFooter: state => (state.footer = false),
-    showFooter: state => (state.footer = true),
-    hideHeader: state => (state.header = false),
-    showHeader: state => (state.header = true),
-};
-
-export const actions = {
-    setTheme: ({ state, rootGetters }, theme = null) => {
-        if (!theme) {
-            theme = state.themes[rootGetters['preferences/theme']];
-            localStorage.setItem('theme', theme);
-        }
-
-        Object.keys(themes).forEach(theme => themes[theme].unuse());
-
-        try {
-            themes[theme].use();
-        } catch (e) {
-            themes.light.use();
-        }
-    },
-    loadTheme: async ({ dispatch }) => {
-        const theme = localStorage.getItem('theme') || 'light';
-
-        if (theme) {
-            await dispatch('setTheme', theme);
-        }
-    },
-    switchTheme: async ({ commit, dispatch }) => {
-        commit('toggleLights');
-
-        await setTimeout(() => dispatch('setTheme')
-            .then(() => commit('toggleLights')), 150);
-    },
-};

package/src/modules/store/preferences.js

@@ -1,80 +0,0 @@
-import axios from 'axios';
-import route from '../plugins/route';
-
-export const state = {
-    global: {},
-    local: {},
-};
-
-const store = payload => axios.patch(route('core.preferences.store'), payload);
-
-const updateGlobal = () => store({ global: state.global });
-
-export const getters = {
-    global: state => state.global,
-    local: state => route => state.local[route],
-    lang: state => state.global.lang,
-    theme: state => state.global.theme,
-    expandedSidebar: state => state.global.expandedSidebar,
-    toastrPosition: state => state.global.toastrPosition,
-    bookmarks: state => state.global.bookmarks,
-};
-
-export const mutations = {
-    set: (state, preferences) => {
-        state.global = preferences.global;
-        state.local = preferences.local;
-    },
-    global: (state, { key, value }) => (state.global[key] = value),
-    lang: (state, lang) => (state.global.lang = lang),
-    theme: (state, theme) => (state.global.theme = theme),
-    toastrPosition: (state, position) => (state.global.toastrPosition = position),
-    expandedSidebar: (state, expandedSidebar) => (state.global.expandedSidebar = expandedSidebar),
-    bookmarks: (state, bookmarks) => (state.global.bookmarks = bookmarks),
-    local: (state, value) => (state.local[state.route.name] = value),
-};
-
-export const actions = {
-    setGlobal: async ({ commit }, payload) => {
-        commit('global', payload);
-        await updateGlobal();
-    },
-    setLocal: ({ commit, state }, value) => {
-        commit('local', value);
-        store({ route: state.route.name, value });
-    },
-    setLang: async ({
-        commit, dispatch, getters, rootGetters,
-    }, lang) => {
-        const isRtl = rootGetters['localisation/rtl'];
-        commit('lang', lang);
-        localStorage.setItem('locale', lang);
-
-        if (rootGetters['localisation/isRtl'](lang) !== isRtl) {
-            await dispatch('setTheme', getters.theme);
-        }
-
-        await updateGlobal();
-    },
-    setTheme: async ({ commit, dispatch, rootGetters }, theme) => {
-        const isRtl = rootGetters['localisation/rtl'];
-        const nextTheme = theme.replace('-rtl', '') + (isRtl ? '-rtl' : '');
-        commit('theme', nextTheme);
-
-        await dispatch('layout/switchTheme', null, { root: true })
-            .then(() => updateGlobal());
-    },
-    setToastrPosition: async ({ commit }, position) => {
-        commit('toastrPosition', position);
-        await updateGlobal();
-    },
-    setBookmarksState: async ({ commit }, bookmarks) => {
-        commit('bookmarks', bookmarks);
-        await updateGlobal();
-    },
-    setSidebarState: async ({ commit }, state) => {
-        commit('expandedSidebar', state);
-        commit('layout/sidebar/update', state, { root: true });
-        await updateGlobal();
-    },
-};