{name}
34 |
35 | {story}
36 |
37 | 22 | {message} 23 |
24 | ); 25 | } 26 | } 27 | 28 | export const Error = injectSheet(styles)(ErrorComponent); 29 | -------------------------------------------------------------------------------- /src/electron/ipc-api/macOSPermissions.ts: -------------------------------------------------------------------------------- 1 | import { BrowserWindow, ipcMain } from 'electron'; 2 | import { isMac } from '../../environment'; 3 | import { CHECK_MACOS_PERMISSIONS } from '../../ipcChannels'; 4 | 5 | export default ({ mainWindow }: { mainWindow: BrowserWindow }) => { 6 | // workaround to not break app on non macOS systems 7 | if (isMac) { 8 | ipcMain.on(CHECK_MACOS_PERMISSIONS, () => { 9 | // eslint-disable-next-line global-require 10 | const { default: askFormacOSPermissions } = require('../macOSPermissions'); 11 | askFormacOSPermissions(mainWindow); 12 | }); 13 | } 14 | }; 15 | -------------------------------------------------------------------------------- /src/styles/util.scss: -------------------------------------------------------------------------------- 1 | .scroll-container { 2 | flex: 1; 3 | height: 100%; 4 | overflow-x: hidden; 5 | overflow-y: scroll; 6 | } 7 | 8 | .loader { 9 | display: block; 10 | height: 40px; 11 | position: relative; 12 | width: 100%; 13 | z-index: 9999; 14 | } 15 | 16 | .align-middle { 17 | display: flex; 18 | flex-direction: column; 19 | justify-content: center; 20 | } 21 | 22 | .pulsating { 23 | animation: pulse-animation 1s alternate infinite ease-in-out; 24 | } 25 | 26 | @keyframes pulse-animation { 27 | 0% { 28 | transform: scale(0.7) 29 | } 30 | 100% { 31 | transform: scale(1) 32 | } 33 | } -------------------------------------------------------------------------------- /src/configVanilla.js: -------------------------------------------------------------------------------- 1 | export const DEFAULT_APP_SETTINGS_VANILLA = { 2 | autoLaunchInBackground: false, 3 | runInBackground: true, 4 | enableSystemTray: true, 5 | minimizeToSystemTray: false, 6 | showDisabledServices: true, 7 | showMessageBadgeWhenMuted: true, 8 | enableSpellchecking: true, 9 | spellcheckerLanguage: 'en-US', 10 | darkMode: process.type === 'renderer' ? window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches : false, 11 | locale: '', 12 | fallbackLocale: 'en-US', 13 | beta: false, 14 | isAppMuted: false, 15 | enableGPUAcceleration: true, 16 | serviceLimit: 5, 17 | }; 18 | -------------------------------------------------------------------------------- /src/electron/ipc-api/fullscreen.js: -------------------------------------------------------------------------------- 1 | import { ipcMain } from "electron"; 2 | import { TOGGLE_FULL_SCREEN } from "../../ipcChannels"; 3 | 4 | export const UPDATE_FULL_SCREEN_STATUS = 'set-full-screen-status'; 5 | 6 | export default ({ mainWindow }) => { 7 | ipcMain.on(TOGGLE_FULL_SCREEN, (e) => { 8 | mainWindow.setFullScreen(!mainWindow.isFullScreen()); 9 | }) 10 | 11 | mainWindow.on('enter-full-screen', () => { 12 | mainWindow.webContents.send(UPDATE_FULL_SCREEN_STATUS, true); 13 | }); 14 | mainWindow.on('leave-full-screen', () => { 15 | mainWindow.webContents.send(UPDATE_FULL_SCREEN_STATUS, false); 16 | }); 17 | }; 18 | -------------------------------------------------------------------------------- /src/components/services/content/ErrorHandlers/styles.js: -------------------------------------------------------------------------------- 1 | export default theme => ({ 2 | component: { 3 | left: 0, 4 | position: 'absolute', 5 | top: 0, 6 | width: '100%', 7 | zIndex: 0, 8 | alignItems: 'center', 9 | background: theme.colorWebviewErrorHandlerBackground, 10 | display: 'flex', 11 | flexDirection: 'column', 12 | justifyContent: 'center', 13 | textAlign: 'center', 14 | }, 15 | buttonContainer: { 16 | display: 'flex', 17 | flexDirection: 'row', 18 | height: 'auto', 19 | margin: [40, 0, 20], 20 | 21 | '& button': { 22 | margin: [0, 10, 0, 10], 23 | }, 24 | }, 25 | }); 26 | -------------------------------------------------------------------------------- /src/features/utils/ActionBinding.js: -------------------------------------------------------------------------------- 1 | export default class ActionBinding { 2 | action; 3 | 4 | isActive = false; 5 | 6 | constructor(action) { 7 | this.action = action; 8 | } 9 | 10 | start() { 11 | if (!this.isActive) { 12 | const { action } = this; 13 | action[0].listen(action[1]); 14 | this.isActive = true; 15 | } 16 | } 17 | 18 | stop() { 19 | if (this.isActive) { 20 | const { action } = this; 21 | action[0].off(action[1]); 22 | this.isActive = false; 23 | } 24 | } 25 | } 26 | 27 | export const createActionBindings = actions => ( 28 | actions.map(a => new ActionBinding(a)) 29 | ); 30 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | 5 | --- 6 | 7 | **Is your feature request related to a problem? Please describe.** 8 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 9 | 10 | **Describe the solution you'd like** 11 | A clear and concise description of what you want to happen. 12 | 13 | **Describe alternatives you've considered** 14 | A clear and concise description of any alternative solutions or features you've considered. 15 | 16 | **Additional context** 17 | Add any other context or screenshots about the feature request here. 18 | -------------------------------------------------------------------------------- /tsconfig.settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": ".", 4 | "target": "esnext", 5 | "module": "commonjs", 6 | "lib": [ 7 | "es2015", 8 | "es2017", 9 | "dom" 10 | ], 11 | "jsx": "react", 12 | "sourceMap": true, 13 | "strict": true, 14 | "allowSyntheticDefaultImports": true, 15 | "experimentalDecorators": true, 16 | "composite": true, 17 | "esModuleInterop": true, 18 | "typeRoots": ["packages/typings/types", "node_modules/@types"], 19 | "paths": { 20 | "@types/*": ["packages/typings/types/*.d.ts"], 21 | "*": ["packages/typings/types/*.d.ts"] 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/helpers/visibility-helper.js: -------------------------------------------------------------------------------- 1 | export function onVisibilityChange(cb) { 2 | let isVisible = true; 3 | 4 | if (!cb) { 5 | throw new Error('no callback given'); 6 | } 7 | 8 | function focused() { 9 | if (!isVisible) { 10 | cb(isVisible = true); 11 | } 12 | } 13 | 14 | function unfocused() { 15 | if (isVisible) { 16 | cb(isVisible = false); 17 | } 18 | } 19 | 20 | document.addEventListener('visibilitychange', () => { (document.hidden ? unfocused : focused)(); }); 21 | 22 | window.onpageshow = focused; 23 | window.onfocus = focused; 24 | 25 | window.onpagehid = unfocused; 26 | window.onblur = unfocused; 27 | } 28 | -------------------------------------------------------------------------------- /webpack.config.base.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const TerserPlugin = require('terser-webpack-plugin'); 3 | 4 | const IS_DEV = process.env.NODE_ENV === 'development'; 5 | 6 | module.exports = dir => ({ 7 | context: dir, 8 | entry: path.join(dir, '/src/index.ts'), 9 | module: { 10 | rules: [{ 11 | test: /\.tsx?$/, 12 | loader: 'ts-loader', 13 | exclude: /node_modules/, 14 | }], 15 | }, 16 | resolve: { 17 | extensions: ['.tsx', '.ts', '.js'], 18 | }, 19 | devtool: 'inline-source-map', 20 | mode: IS_DEV ? 'development' : 'production', 21 | optimization: { 22 | minimizer: !IS_DEV ? [new TerserPlugin()] : [], 23 | }, 24 | }); 25 | -------------------------------------------------------------------------------- /src/features/workspaces/models/Workspace.js: -------------------------------------------------------------------------------- 1 | import { observable } from 'mobx'; 2 | 3 | export default class Workspace { 4 | id = null; 5 | 6 | @observable name = null; 7 | 8 | @observable order = null; 9 | 10 | @observable services = []; 11 | 12 | @observable userId = null; 13 | 14 | @observable isActive = false 15 | 16 | constructor(data) { 17 | if (!data.id) { 18 | throw Error('Workspace requires Id'); 19 | } 20 | 21 | this.id = data.id; 22 | this.name = data.name; 23 | this.order = data.order; 24 | this.services.replace(data.services); 25 | this.userId = data.userId; 26 | this.isActive = data.isActive ?? false; 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /packages/typings/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@meetfranz/typings", 3 | "version": "0.0.11", 4 | "description": "TypeScript typings for internal and external projects", 5 | "author": "Stefan Malzner
33 | {text}
34 |
35 |
36 | {children}
37 |
38 | );
39 | }
40 | }
41 |
42 | export const Wrapper = injectStyle(styles)(WrapperComponent);
43 |
--------------------------------------------------------------------------------
/src/helpers/recipe-helpers.js:
--------------------------------------------------------------------------------
1 | import path from 'path';
2 |
3 | const { app } = process.type === 'renderer' ? require('@electron/remote') : require('electron');
4 |
5 | export function getRecipeDirectory(id = '') {
6 | return path.join(app.getPath('userData'), 'recipes', id);
7 | }
8 |
9 | export function getDevRecipeDirectory(id = '') {
10 | return path.join(app.getPath('userData'), 'recipes', 'dev', id);
11 | }
12 |
13 | export function loadRecipeConfig(recipeId) {
14 | try {
15 | const configPath = `${recipeId}/package.json`;
16 | // Delete module from cache
17 | delete require.cache[require.resolve(configPath)];
18 |
19 | // eslint-disable-next-line
20 | let config = require(configPath);
21 |
22 | const moduleConfigPath = require.resolve(configPath);
23 | const paths = path.parse(moduleConfigPath);
24 | config.path = paths.dir;
25 |
26 | return config;
27 | } catch (e) {
28 | console.error(e);
29 | return null;
30 | }
31 | }
32 |
33 | module.paths.unshift(
34 | getDevRecipeDirectory(),
35 | getRecipeDirectory(),
36 | );
37 |
--------------------------------------------------------------------------------
/uidev/src/stories/textarea.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import uuid from 'uuid/v4';
3 |
4 | import { Textarea } from '@meetfranz/forms';
5 | import { storiesOf } from '../stores/stories';
6 |
7 | const defaultProps = () => {
8 | const id = uuid();
9 | return {
10 | label: 'Label',
11 | id: `test-${id}`,
12 | name: `test-${id}`,
13 | rows: 5,
14 | onChange: (e: React.ChangeEvent
39 |
40 |
41 | );
42 | }
43 | }
44 |
45 | export default ProgressBar;
46 |
--------------------------------------------------------------------------------
/src/webview/darkmode.js:
--------------------------------------------------------------------------------
1 | /* eslint no-bitwise: ["error", { "int32Hint": true }] */
2 |
3 | import path from 'path';
4 | import fs from 'fs-extra';
5 |
6 | const debug = require('debug')('Franz:DarkMode');
7 |
8 | const chars = [...'abcdefghijklmnopqrstuvwxyz'];
9 |
10 | const ID = [...Array(20)].map(() => chars[Math.random() * chars.length | 0]).join``;
11 |
12 | export function injectDarkModeStyle(recipePath) {
13 | const darkModeStyle = path.join(recipePath, 'darkmode.css');
14 | if (fs.pathExistsSync(darkModeStyle)) {
15 | const data = fs.readFileSync(darkModeStyle);
16 | const styles = document.createElement('style');
17 | styles.id = ID;
18 | styles.innerHTML = data.toString();
19 |
20 | document.querySelector('head').appendChild(styles);
21 |
22 | debug('Injected Dark Mode style with ID', ID);
23 | }
24 | }
25 |
26 | export function removeDarkModeStyle() {
27 | const style = document.querySelector(`#${ID}`);
28 |
29 | if (style) {
30 | style.remove();
31 |
32 | debug('Removed Dark Mode Style with ID', ID);
33 | }
34 | }
35 |
36 | export function isDarkModeStyleInjected() {
37 | return !!document.querySelector(`#${ID}`);
38 | }
39 |
--------------------------------------------------------------------------------
/docs/example-feature/index.js:
--------------------------------------------------------------------------------
1 | import { reaction, runInAction } from 'mobx';
2 | import { ExampleFeatureStore } from './store';
3 | import state, { resetState } from './state';
4 | import api from './api';
5 |
6 | const debug = require('debug')('Franz:feature:EXAMPLE_FEATURE');
7 |
8 | let store = null;
9 |
10 | export default function initAnnouncements(stores, actions) {
11 | const { features } = stores;
12 |
13 | // Toggle workspace feature
14 | reaction(
15 | () => (
16 | features.features.isExampleFeatureEnabled
17 | ),
18 | (isEnabled) => {
19 | if (isEnabled) {
20 | debug('Initializing `EXAMPLE_FEATURE` feature');
21 | store = new ExampleFeatureStore(stores, api, actions, state);
22 | store.initialize();
23 | runInAction(() => { state.isFeatureActive = true; });
24 | } else if (store) {
25 | debug('Disabling `EXAMPLE_FEATURE` feature');
26 | runInAction(() => { state.isFeatureActive = false; });
27 | store.teardown();
28 | store = null;
29 | resetState(); // Reset state to default
30 | }
31 | },
32 | {
33 | fireImmediately: true,
34 | },
35 | );
36 | }
37 |
--------------------------------------------------------------------------------
/packages/typings/types/react-loader.d.ts:
--------------------------------------------------------------------------------
1 | // Type definitions for react-loader 2.4
2 | // Project: https://github.com/quickleft/react-loader
3 | // Definitions by: Sudarsan Balaji
38 |
46 | );
47 | }
48 | }
49 |
50 | export const Loader = injectStyle(styles)(withTheme(LoaderComponent));
51 |
--------------------------------------------------------------------------------
/src/styles/infobox.scss:
--------------------------------------------------------------------------------
1 | @import './config.scss';
2 |
3 | .infobox {
4 | align-items: center;
5 | border-radius: $theme-border-radius-small;
6 | display: flex;
7 | height: auto;
8 | margin-bottom: 30px;
9 | padding: 15px 20px;
10 |
11 | a { color: #FFF; }
12 |
13 | .infobox__content { flex: 1; }
14 |
15 | &.infobox--success {
16 | background: $theme-brand-success;
17 | color: #FFF;
18 | }
19 |
20 | &.infobox--primary {
21 | background: $theme-brand-primary;
22 | color: #FFF;
23 | }
24 |
25 | &.infobox--danger {
26 | background: $theme-brand-danger;
27 | color: #FFF;
28 | }
29 |
30 | &.infobox--warning {
31 | background: $theme-brand-warning;
32 | color: #FFF;
33 | }
34 |
35 | .mdi { margin-right: 10px; }
36 |
37 | .infobox__cta {
38 | border-color: #FFF;
39 | border-radius: $theme-border-radius-small;
40 | border-style: solid;
41 | border-width: 2px;
42 | color: #FFF;
43 | margin-left: 15px;
44 | padding: 3px 8px;
45 |
46 | .loader {
47 | display: inline-block;
48 | height: 12px;
49 | margin-right: 5px;
50 | position: relative;
51 | width: 20px;
52 | z-index: 9999;
53 | }
54 | }
55 |
56 | .infobox__delete {
57 | color: #FFF;
58 | margin-right: 0;
59 | }
60 | }
61 |
--------------------------------------------------------------------------------
/src/environment.js:
--------------------------------------------------------------------------------
1 | import {
2 | DEV_API,
3 | DEV_API_WEBSITE,
4 | GA_ID_DEV,
5 | GA_ID_PROD,
6 | LIVE_API,
7 | LIVE_API_WEBSITE,
8 | LOCAL_API,
9 | LOCAL_API_WEBSITE,
10 | } from './config';
11 |
12 | const { app } = process.type === 'renderer' ? require('@electron/remote') : require('electron');
13 |
14 | export const isDevMode = !app.isPackaged;
15 | export const useLiveAPI = process.env.LIVE_API;
16 | export const useLocalAPI = process.env.LOCAL_API;
17 |
18 | let { platform } = process;
19 | if (process.env.OS_PLATFORM) {
20 | platform = process.env.OS_PLATFORM;
21 | }
22 |
23 | export const isMac = platform === 'darwin';
24 | export const isWindows = platform === 'win32';
25 | export const isLinux = platform === 'linux';
26 |
27 | export const ctrlKey = isMac ? '⌘' : 'Ctrl';
28 | export const cmdKey = isMac ? 'Cmd' : 'Ctrl';
29 |
30 | let api;
31 | let web;
32 | if (!isDevMode || (isDevMode && useLiveAPI)) {
33 | api = LIVE_API;
34 | web = LIVE_API_WEBSITE;
35 | } else if (isDevMode && useLocalAPI) {
36 | api = LOCAL_API;
37 | web = LOCAL_API_WEBSITE;
38 | } else {
39 | api = DEV_API;
40 | web = DEV_API_WEBSITE;
41 | }
42 |
43 | export const API = api;
44 | export const API_VERSION = 'v1';
45 | export const WEBSITE = web;
46 |
47 | export const GA_ID = !isDevMode ? GA_ID_PROD : GA_ID_DEV;
48 |
--------------------------------------------------------------------------------
/src/webview/notifications.js:
--------------------------------------------------------------------------------
1 | import { ipcRenderer } from 'electron';
2 | import uuidV1 from 'uuid/v1';
3 |
4 | const debug = require('debug')('Franz:Notifications');
5 |
6 | class Notification {
7 | static permission = 'granted';
8 |
9 | constructor(title = '', options = {}) {
10 | debug('New notification', title, options);
11 | this.title = title;
12 | this.options = options;
13 | this.notificationId = uuidV1();
14 |
15 | ipcRenderer.send('notification', this.onNotify({
16 | title: this.title,
17 | options: this.options,
18 | notificationId: this.notificationId,
19 | }));
20 |
21 | ipcRenderer.once(`notification-onclick:${this.notificationId}`, () => {
22 | if (typeof this.onclick === 'function') {
23 | this.onclick();
24 | }
25 | });
26 | }
27 |
28 | static requestPermission(cb = null) {
29 | if (!cb) {
30 | return new Promise((resolve) => {
31 | resolve(Notification.permission);
32 | });
33 | }
34 |
35 | if (typeof (cb) === 'function') {
36 | return cb(Notification.permission);
37 | }
38 |
39 | return Notification.permission;
40 | }
41 |
42 | onNotify(data) {
43 | return data;
44 | }
45 |
46 | onClick() {}
47 |
48 | close() {}
49 | }
50 |
51 | window.Notification = Notification;
52 |
--------------------------------------------------------------------------------
/src/containers/settings/InviteScreen.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { inject, observer } from 'mobx-react';
4 |
5 | import Invite from '../../components/auth/Invite';
6 | import ErrorBoundary from '../../components/util/ErrorBoundary';
7 |
8 | export default @inject('stores', 'actions') @observer class InviteScreen extends Component {
9 | componentWillUnmount() {
10 | this.props.stores.user.inviteRequest.reset();
11 | }
12 |
13 | render() {
14 | const { actions } = this.props;
15 | const { user } = this.props.stores;
16 |
17 | return (
18 |
39 |
46 | );
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/src/containers/auth/LoginScreen.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { inject, observer } from 'mobx-react';
4 | import Login from '../../components/auth/Login';
5 | import UserStore from '../../stores/UserStore';
6 |
7 | import { globalError as globalErrorPropType } from '../../prop-types';
8 |
9 | export default @inject('stores', 'actions') @observer class LoginScreen extends Component {
10 | static propTypes = {
11 | error: globalErrorPropType.isRequired,
12 | };
13 |
14 | render() {
15 | const { actions, stores, error } = this.props;
16 | return (
17 | {intl.formatMessage(messages.headline, { name })}
40 |Welcome to the world of tomorrow
50 |Welcome to the world of tomorrow
51 |Welcome to the world of tomorrow
52 |Welcome to the world of tomorrow
53 | 54 | )); 55 | -------------------------------------------------------------------------------- /src/lib/analytics.js: -------------------------------------------------------------------------------- 1 | // import { app } from '@electron/remote'; 2 | // import ElectronCookies from '@meetfranz/electron-cookies'; 3 | // import querystring from 'querystring'; 4 | 5 | // import { STATS_API } from '../config'; 6 | // import { isDevMode, GA_ID } from '../environment'; 7 | 8 | // ElectronCookies.enable({ 9 | // origin: 'https://app.meetfranz.com', 10 | // }); 11 | 12 | const debug = require('debug')('Franz:Analytics'); 13 | 14 | /* eslint-disable */ 15 | // var _paq = window._paq = window._paq || []; 16 | 17 | // _paq.push(["setCookieDomain", "app.meetfranz.com"]); 18 | // _paq.push(['setCustomDimension', 1, app.getVersion()]); 19 | // _paq.push(['setDomains', 'app.meetfranz.com']); 20 | // _paq.push(['setCustomUrl', '/']); 21 | // _paq.push(['trackPageView']); 22 | 23 | 24 | // (function() { 25 | // var u="https://analytics.franzinfra.com/"; 26 | // _paq.push(['setTrackerUrl', u+'matomo.php']); 27 | // _paq.push(['setSiteId', '1']); 28 | // var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; 29 | // g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); 30 | // })(); 31 | /* eslint-enable */ 32 | 33 | export function gaPage(page) { 34 | debug('Track page', page); 35 | // window._paq.push(['setCustomUrl', page]); 36 | // window._paq.push(['trackPageView']); 37 | 38 | // debug('Track page', page); 39 | } 40 | 41 | export function gaEvent(category, action, label) { 42 | debug('Track Event', category, action, label); 43 | // window._paq.push(['trackEvent', category, action, label]); 44 | // debug('Track event', category, action, label); 45 | } 46 | -------------------------------------------------------------------------------- /src/components/util/ErrorBoundary/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import injectSheet from 'react-jss'; 4 | import { defineMessages, intlShape } from 'react-intl'; 5 | 6 | import Button from '../../ui/Button'; 7 | 8 | import styles from './styles'; 9 | 10 | const messages = defineMessages({ 11 | headline: { 12 | id: 'app.errorHandler.headline', 13 | defaultMessage: '!!!Something went wrong.', 14 | }, 15 | action: { 16 | id: 'app.errorHandler.action', 17 | defaultMessage: '!!!Reload', 18 | }, 19 | }); 20 | 21 | export default @injectSheet(styles) class ErrorBoundary extends Component { 22 | state = { 23 | hasError: false, 24 | } 25 | 26 | static propTypes = { 27 | classes: PropTypes.object.isRequired, 28 | children: PropTypes.node.isRequired, 29 | } 30 | 31 | static contextTypes = { 32 | intl: intlShape, 33 | }; 34 | 35 | componentDidCatch() { 36 | this.setState({ hasError: true }); 37 | } 38 | 39 | render() { 40 | const { classes } = this.props; 41 | const { intl } = this.context; 42 | 43 | if (this.state.hasError) { 44 | return ( 45 |
46 |
55 | );
56 | }
57 |
58 | return this.props.children;
59 | }
60 | }
61 |
--------------------------------------------------------------------------------
/src/components/ui/FullscreenLoader/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { observer } from 'mobx-react';
4 | import injectSheet, { withTheme } from 'react-jss';
5 | import classnames from 'classnames';
6 |
7 | import Loader from '../Loader';
8 |
9 | import styles from './styles';
10 |
11 | export default @observer @withTheme @injectSheet(styles) class FullscreenLoader extends Component {
12 | static propTypes = {
13 | className: PropTypes.string,
14 | title: PropTypes.string.isRequired,
15 | classes: PropTypes.object.isRequired,
16 | theme: PropTypes.object.isRequired,
17 | spinnerColor: PropTypes.string,
18 | children: PropTypes.node,
19 | };
20 |
21 | static defaultProps = {
22 | className: null,
23 | spinnerColor: null,
24 | children: null,
25 | };
26 |
27 | render() {
28 | const {
29 | classes,
30 | title,
31 | children,
32 | spinnerColor,
33 | className,
34 | theme,
35 | } = this.props;
36 |
37 | return (
38 | 47 | {intl.formatMessage(messages.headline)} 48 |
49 |
39 |
54 | );
55 | }
56 | }
57 |
--------------------------------------------------------------------------------
/src/styles/content-tabs.scss:
--------------------------------------------------------------------------------
1 | @import './config.scss';
2 |
3 | .theme__dark {
4 | .content-tabs {
5 | .content-tabs__content {
6 | background: $dark-theme-gray-darker;
7 | }
8 |
9 | .content-tabs__tabs {
10 | .content-tabs__item {
11 | background: $dark-theme-gray;
12 | color: #FFF;
13 | border: 0;
14 | }
15 | }
16 | }
17 | }
18 |
19 | .content-tabs {
20 | .content-tabs__tabs {
21 | border-top-left-radius: $theme-border-radius-small;
22 | border-top-right-radius: $theme-border-radius-small;
23 | display: flex;
24 | overflow: hidden;
25 |
26 | .content-tabs__item {
27 | background: linear-gradient($theme-gray-lightest 80%, darken($theme-gray-lightest, 3%));
28 | border-right: 1px solid $theme-gray-lighter;
29 | color: $theme-gray-dark;
30 | flex: 1;
31 | padding: 10px;
32 | transition: background $theme-transition-time;
33 |
34 | &:last-of-type { border-right: 0; }
35 |
36 | &.is-active {
37 | background: $theme-brand-primary;
38 | box-shadow: none;
39 | color: #FFF;
40 | }
41 | }
42 | }
43 |
44 | .content-tabs__content {
45 | background: $theme-gray-lightest;
46 | border-bottom-left-radius: $theme-border-radius-small;
47 | border-bottom-right-radius: $theme-border-radius-small;
48 | padding: 20px 20px;
49 |
50 | .content-tabs__item {
51 | display: none;
52 | top: 0;
53 |
54 | &.is-active { display: block; }
55 | }
56 |
57 | .franz-form__input-wrapper { background: #FFF; }
58 | .franz-form__field:last-of-type { margin-bottom: 0; }
59 | }
60 | }
61 |
--------------------------------------------------------------------------------
/src/api/server/LocalApi.js:
--------------------------------------------------------------------------------
1 | import { ipcRenderer } from 'electron';
2 | import { session } from '@electron/remote';
3 | import du from 'du';
4 |
5 | import { getServicePartitionsDirectory } from '../../helpers/service-helpers.js';
6 |
7 | const debug = require('debug')('Franz:LocalApi');
8 |
9 | export default class LocalApi {
10 | // Settings
11 | getAppSettings(type) {
12 | return new Promise((resolve) => {
13 | ipcRenderer.once('appSettings', (event, resp) => {
14 | debug('LocalApi::getAppSettings resolves', resp.type, resp.data);
15 | resolve(resp);
16 | });
17 |
18 | ipcRenderer.send('getAppSettings', type);
19 | });
20 | }
21 |
22 | async updateAppSettings(type, data) {
23 | debug('LocalApi::updateAppSettings resolves', type, data);
24 | ipcRenderer.send('updateAppSettings', {
25 | type,
26 | data,
27 | });
28 | }
29 |
30 | // Services
31 | async getAppCacheSize() {
32 | const partitionsDir = getServicePartitionsDirectory();
33 | return new Promise((resolve, reject) => {
34 | du(partitionsDir, (err, size) => {
35 | if (err) reject(err);
36 |
37 | debug('LocalApi::getAppCacheSize resolves', size);
38 | resolve(size);
39 | });
40 | });
41 | }
42 |
43 | async clearCache(serviceId) {
44 | const s = session.fromPartition(`persist:service-${serviceId}`);
45 |
46 | debug('LocalApi::clearCache resolves', serviceId);
47 | return s.clearCache();
48 | }
49 |
50 | async clearAppCache() {
51 | const s = session.defaultSession;
52 |
53 | debug('LocalApi::clearCache clearAppCache');
54 | return s.clearCache();
55 | }
56 | }
57 |
--------------------------------------------------------------------------------
/src/stores/RecipePreviewsStore.js:
--------------------------------------------------------------------------------
1 | import { action, computed, observable } from 'mobx';
2 | import { debounce } from 'lodash';
3 | import ms from 'ms';
4 |
5 | import Store from './lib/Store';
6 | import CachedRequest from './lib/CachedRequest';
7 | import Request from './lib/Request';
8 | import { gaEvent } from '../lib/analytics';
9 |
10 | export default class RecipePreviewsStore extends Store {
11 | @observable allRecipePreviewsRequest = new CachedRequest(this.api.recipePreviews, 'all');
12 |
13 | @observable featuredRecipePreviewsRequest = new CachedRequest(this.api.recipePreviews, 'featured');
14 |
15 | @observable searchRecipePreviewsRequest = new Request(this.api.recipePreviews, 'search');
16 |
17 | constructor(...args) {
18 | super(...args);
19 |
20 | // Register action handlers
21 | this.actions.recipePreview.search.listen(this._search.bind(this));
22 | }
23 |
24 | @computed get all() {
25 | return this.allRecipePreviewsRequest.execute().result || [];
26 | }
27 |
28 | @computed get featured() {
29 | return this.featuredRecipePreviewsRequest.execute().result || [];
30 | }
31 |
32 | @computed get searchResults() {
33 | return this.searchRecipePreviewsRequest.result || [];
34 | }
35 |
36 | @computed get dev() {
37 | return this.stores.recipes.all.filter(r => r.local);
38 | }
39 |
40 | // Actions
41 | @action _search({ needle }) {
42 | if (needle !== '') {
43 | this.searchRecipePreviewsRequest.execute(needle);
44 |
45 | this._analyticsSearch(needle);
46 | }
47 | }
48 |
49 | // Helper
50 | _analyticsSearch = debounce((needle) => {
51 | gaEvent('Recipe', 'search', needle);
52 | }, ms('3s'));
53 | }
54 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE.md:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | ### Expected Behavior
8 |
9 |
10 |
11 | ### Current Behavior
12 |
13 |
14 |
15 | ### Screenshots (if appropriate):
16 |
17 | ### Possible Solution
18 |
19 |
20 |
21 | ### Steps to Reproduce (for bugs)
22 |
23 |
24 | 1.
25 | 2.
26 | 3.
27 | 4.
28 |
29 | ### Context
30 |
31 |
32 |
33 | ### Your Environment
34 |
35 | * Franz Version used:
36 | * Operating System and version:
37 |
--------------------------------------------------------------------------------
/src/components/ui/ServiceIcon.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { observer } from 'mobx-react';
4 | import injectSheet from 'react-jss';
5 | import classnames from 'classnames';
6 |
7 | import ServiceModel from '../../models/Service';
8 |
9 | const styles = theme => ({
10 | root: {
11 | height: 'auto',
12 | },
13 | icon: {
14 | width: theme.serviceIcon.width,
15 | },
16 | isCustomIcon: {
17 | width: theme.serviceIcon.isCustom.width,
18 | border: theme.serviceIcon.isCustom.border,
19 | borderRadius: theme.serviceIcon.isCustom.borderRadius,
20 | },
21 | isDisabled: {
22 | filter: 'grayscale(100%)',
23 | opacity: '.5',
24 | },
25 | });
26 |
27 | @injectSheet(styles) @observer
28 | class ServiceIcon extends Component {
29 | static propTypes = {
30 | classes: PropTypes.object.isRequired,
31 | service: PropTypes.instanceOf(ServiceModel).isRequired,
32 | className: PropTypes.string,
33 | };
34 |
35 | static defaultProps = {
36 | className: '',
37 | };
38 |
39 | render() {
40 | const {
41 | classes,
42 | className,
43 | service,
44 | } = this.props;
45 |
46 | return (
47 |
45 |
53 | {title}
46 |
49 | {children}
50 |
51 | )}
52 |
53 | 
62 |
63 | );
64 | }
65 | }
66 |
67 | export default ServiceIcon;
68 |
--------------------------------------------------------------------------------
/src/containers/auth/SignupScreen.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { inject, observer } from 'mobx-react';
4 |
5 | import Signup from '../../components/auth/Signup';
6 | import UserStore from '../../stores/UserStore';
7 | import FeaturesStore from '../../stores/FeaturesStore';
8 |
9 | import { globalError as globalErrorPropType } from '../../prop-types';
10 |
11 | export default @inject('stores', 'actions') @observer class SignupScreen extends Component {
12 | static propTypes = {
13 | error: globalErrorPropType.isRequired,
14 | };
15 |
16 | onSignup(values) {
17 | const { actions, stores } = this.props;
18 |
19 | const { canSkipTrial, defaultTrialPlan, pricingConfig } = stores.features.anonymousFeatures;
20 |
21 | if (!canSkipTrial) {
22 | Object.assign(values, {
23 | plan: defaultTrialPlan,
24 | currency: pricingConfig.currencyID,
25 | });
26 | }
27 |
28 | actions.user.signup(values);
29 | }
30 |
31 | render() {
32 | const { stores, error } = this.props;
33 |
34 | return (
35 |
40 |
41 |
46 |
56 |
57 |
47 | {navigation}
48 | {children}
49 |
54 |
55 |
70 | {children}
71 |
72 | );
73 | }
74 | }
75 |
76 | export const Badge = injectStyle(styles)(BadgeComponent);
77 |
--------------------------------------------------------------------------------