How to use @webiny/app - 10 common examples

// @flow
import React from "react";
import { ReactComponent as I18NIcon } from "./../assets/icons/round-translate-24px.svg";
import { hasRoles } from "@webiny/app-security";
import { i18n } from "@webiny/app/i18n";
const t = i18n.ns("app-forms/admin/menus");

export default [
    {
        type: "menu",
        name: "menu-languages",
        render({ Menu, Section, Item }: Object) {
            const { locales }: Object = (hasRoles({
                locales: ["i18n-locales"]
            }): any);

            if (locales) {
                return (
                    <menu label="{t`Languages`}" name="languages">}&gt;
                        {locales &amp;&amp; (
                            <section label="{t`Locales`}">
                                {locales &amp;&amp; }</section></menu>

// @flow
import { useUi } from "@webiny/app/hooks/useUi";
import { i18n } from "@webiny/app/i18n";
const t = i18n.ns("app-admin/hooks/use-confirmation-dialog");

const useConfirmationDialog = ({ title, message }) => {
    const ui = useUi();

    return {
        showConfirmation: (onAccept, onCancel) => {
            ui.setState(ui => {
                return {
                    ...ui,
                    dialog: {
                        message,
                        options: {
                            title,
                            actions: {
                                accept: {
                                    label: t`Confirm`,

import { useDialog } from "@webiny/app-admin/hooks/useDialog";
import { useDataList } from "@webiny/app/hooks/useDataList";
import useReactRouter from "use-react-router";
import { getData, getError } from "./functions";
import { get } from "lodash";
import { i18n } from "@webiny/app/i18n";

type Props = {
    create?: {},
    read?: {},
    list?: {},
    update?: {},
    delete?: {}
};

const t = i18n.ns("app-admin/contexts");

export const CrudContext = React.createContext();

export const CrudProvider = ({ children, ...props }: Props) => {
    const { showSnackbar } = useSnackbar();
    const { showDialog } = useDialog();
    const { location, history } = useReactRouter();

    const list = useDataList({
        name: "dataList", // TODO: ???
        query: get(props, "list.query", props.list),
        variables: get(props, "list.variables"),
        // "useDataList" will know how to handle no-handler-provided situations.
        getData: get(props, "list.getData"),
        getMeta: get(props, "list.getMeta"),
        getError: get(props, "list.getError")

// @flow
import React from "react";
import { ReactComponent as PagesIcon } from "@webiny/app-page-builder/admin/assets/round-ballot-24px.svg";
import { hasRoles } from "@webiny/app-security";
import { i18n } from "@webiny/app/i18n";
const t = i18n.ns("app-forms/admin/menus");
import { getPlugins } from "@webiny/plugins";

export default [
    {
        type: "menu",
        name: "menu-content",
        render({ Menu, Section, Item }: Object) {
            const { menus, categories, editor }: Object = (hasRoles({
                menus: ["pb-menus"],
                categories: ["pb-categories"],
                editor: ["pb-editor"]
            }): any);

            if (menus || categories || editor) {
                const additionalSectionPlugins = getPlugins("menu-content-section");
                return (

import React from "react";
import Auth from "@aws-amplify/auth";
import { Grid, Cell } from "@webiny/ui/Grid";
import { Input } from "@webiny/ui/Input";
import { validation } from "@webiny/validation";
import { i18n } from "@webiny/app/i18n";
import Authentication from "./components/Authentication";

const t1 = i18n.ns("app-plugin-security-cognito/users/form");
const t2 = i18n.ns("app-plugin-security-cognito/users/account");

export default config => {
    // Configure Amplify Auth
    Auth.configure(config);

    return {
        name: "security-authentication-provider-cognito",
        type: "security-authentication-provider",
        securityProviderHook({ onIdToken }) {
            const renderAuthentication = () => {
                return ;
            };

            const logout = async () => {
                await Auth.signOut();

// @flow
import React from "react";
import { css } from "emotion";
import { Typography } from "@webiny/ui/Typography";
import { I18NValue } from "@webiny/app-i18n/components";
import {
    Dialog,
    DialogBody,
    DialogHeader,
    DialogHeaderTitle,
    DialogCancel,
    DialogFooter
} from "@webiny/ui/Dialog";

import { i18n } from "@webiny/app/i18n";
const t = i18n.namespace("FormEditor.FormSubmissionDialog");

const dialogBody = css({
    "&.mdc-dialog__body": {
        marginTop: 0,
        padding: "25",
        div: {
            padding: "5px 0"
        }
    }
});

type Props = {
    formSubmission: Object,
    onClose: Function
};

// @flow
// $FlowFixMe
import React, { useEffect, useState } from "react";
import { Tab } from "@webiny/ui/Tabs";
import styled from "@emotion/styled";
import { Elevation } from "@webiny/ui/Elevation";
import FormPreview from "./FormPreview";
import Header from "./Header";
import { CircularProgress } from "@webiny/ui/Progress";
import { i18n } from "@webiny/app/i18n";
import type { FormDetailsPluginType } from "@webiny/app-forms/types";

const t = i18n.namespace("FormsApp.FormDetails.PreviewContent");

const RenderBlock = styled("div")({
    position: "relative",
    zIndex: 0,
    backgroundColor: "var(--mdc-theme-background)",
    height: "100%",
    overflow: "scroll",
    padding: 25
});

const PreviewContentTab = props => {
    const [revisionId, setRevisionId] = useState();
    useEffect(() => {
        setRevisionId(props.form.revisions[0].id);
    }, [props.form.id]);

// @flow
import React from "react";
import { Mutation } from "react-apollo";
import { Form } from "@webiny/form";
import { Input } from "@webiny/ui/Input";
import get from "lodash.get";
import { useSnackbar } from "@webiny/app-admin/hooks/useSnackbar";
import { CircularProgress } from "@webiny/ui/Progress";
import { Grid, Cell } from "@webiny/ui/Grid";
import { UPDATE_FORMS_SETTINGS } from "./graphql";
import { useFormEditor } from "@webiny/app-forms/admin/components/FormEditor/Context";
import { validation } from "@webiny/validation";
import { i18n } from "@webiny/app/i18n";
const t = i18n.namespace("Forms.ReCaptchaSettingsDialog");

import { Dialog, DialogTitle, DialogContent, DialogActions } from "@webiny/ui/Dialog";
import { ButtonDefault } from "@webiny/ui/Button";

type Props = {
    open: boolean,
    onClose: Function,
    onSubmit: Function,
    reCaptchaSettings: Object
};

const ReCaptchaSettingsDialog = ({ open, onClose, reCaptchaSettings, onSubmit }: Props) => {
    // $FlowFixMe
    const [loading, setLoading] = React.useState(false);
    const { setData } = useFormEditor();
    const { showSnackbar } = useSnackbar();

const user = await getUser();
            setState({ loading: false });
            return user;
        }

        // Get user using default authentication query
        const { data } = await client.query({ query: GET_CURRENT_USER, fetchPolicy: "no-cache" });
        setState({ loading: false });
        return data.security.getCurrentUser.data;
    });

    /**
     * Should be called only by authentication plugin when it obtains
     * an `idToken` from the authentication provider.
     */
    const onIdToken = useHandler(null, () => async idToken => {
        setState({ checkingUser: true });
        const { token, user } = await loginUsingIdToken(idToken);
        setIdentity(user);
        setToken(token);
        setState({ user, checkingUser: false });
        props.onUser && props.onUser(user);
    });

    // Run authentication plugin hook
    const { getIdToken, renderAuthentication, logout: authLogout } = auth.securityProviderHook({
        onIdToken
    });

    const logout = useCallback(async () => {
        await authLogout();
        localStorage.remove(AUTH_TOKEN);

const [showMenu, setShowMenu] = useState(false);
    const dropdown = useRef();
    const { theme } = usePageBuilder();

    useEffect(() => {
        if (showMenu) {
            // $FlowFixMe
            const domRect = dropdown.current.getBoundingClientRect();
            if (domRect.right > window.innerWidth) {
                // $FlowFixMe
                dropdown.current.style.left = window.innerWidth - domRect.right + "px";
            }
        }
    });

    const setBlock = useHandler(props, ({ editor, onChange }) => type => {
        editor.change(change => onChange(change.setBlocks(type)));
    });

    const onStateChange = useCallback(({ isOpen }) => setShowMenu(isOpen), []);

    const { editor } = props;

    let blockType = editor.value.blocks.first().type;
    const style = theme.typography[blockType] || theme.typography.paragraph;

    return (
        
            {({ isOpen, getToggleButtonProps, getItemProps, highlightedIndex, selectedItem }) => (
                <div>
                    <button>{style.label}</button>
                    {isOpen &amp;&amp; (</div>