Application components

yarn add @commercetools-frontend/application-components

yarn add react react-dom react-intl

import { InfoMainPage } from '@commercetools-frontend/application-components';
import Text from '@commercetools-uikit/text';

const MainPage = () => {
  return (
    <InfoMainPage title="Main page">
      <Text.Body>{'Lorem ipsum ...'}</Text.Body>
    </InfoMainPage>
  );
};

import { useFormik } from 'formik';
import TextField from '@commercetools-uikit/text-field';
import TextInput from '@commercetools-uikit/text-input';
import { FormMainPage } from '@commercetools-frontend/application-components';

const MainPage = () => {
  const formik = useFormik({
    initialValues: {
      email: '',
    },
    validate: (formikValues) => {
      if (TextInput.isEmpty(formikValues.email)) {
        return { email: { missing: true } };
      }
      return {};
    },
    onSubmit: async (formikValues) => {
      alert(`email: ${formikValues.email}`);
      // Do something async
    },
  });

  return (
    <FormMainPage
      title="Manage your account"
      isPrimaryButtonDisabled={formik.isSubmitting}
      onSecondaryButtonClick={formik.handleReset}
      onPrimaryButtonClick={formik.handleSubmit}
    >
      <TextField
        name="email"
        title="Email"
        isRequired={true}
        value={formik.values.email}
        errors={formik.errors.email}
        touched={formik.touched.email}
        onChange={formik.handleChange}
        onBlur={formik.handleBlur}
      />
    </FormMainPage>
  );
};

import { useFormik } from 'formik';
import TextField from '@commercetools-uikit/text-field';
import TextInput from '@commercetools-uikit/text-input';
import { CustomFormMainPage } from '@commercetools-frontend/application-components';

const AccountPage = () => {
  const formik = useFormik({
    initialValues: {
      email: '',
    },
    validate: (formikValues) => {
      if (TextInput.isEmpty(formikValues.email)) {
        return { email: { missing: true } };
      }
      return {};
    },
    onSubmit: async (formikValues) => {
      alert(`email: ${formikValues.email}`);
      // Do something async
    },
  });

  return (
    <CustomFormMainPage
      title="Manage your account"
      formControls={
        <>
          <CustomFormMainPage.FormSecondaryButton
            onClick={formik.handleReset}
          />
          <CustomFormMainPage.FormPrimaryButton onClick={formik.handleSubmit} />
          <CustomFormMainPage.FormDeleteButton onClick={handleDelete} />
        </>
      }
    >
      <TextField
        name="email"
        title="Email"
        isRequired={true}
        value={formik.values.email}
        errors={formik.errors.email}
        touched={formik.touched.email}
        onChange={formik.handleChange}
        onBlur={formik.handleBlur}
      />
    </CustomFormMainPage>
  );
};

import { Switch, Route, useRouteMatch } from 'react-router-dom';
import {
  TabularMainPage,
  TabHeader,
} from '@commercetools-frontend/application-components';

const MainPage = () => {
  const match = useRouteMatch();

  return (
    <TabularMainPage
      title="Main page"
      tabControls={
        <>
          <TabHeader to={`${match.url}/tab-one`} label="Tab One" />
          <TabHeader to={`${match.url}/tab-two`} label="Tab Two" />
        </>
      }
    >
      <Switch>
        <Route path={`${match.path}/tab-one`}>
          <Tab1 />
        </Route>
        <Route path={`${match.path}/tab-two`}>
          <Tab2 />
        </Route>
      </Switch>
    </TabularMainPage>
  );
};

import { useHistory } from 'react-router-dom';
import { InfoDetailPage } from '@commercetools-frontend/application-components';
import Text from '@commercetools-uikit/text';

const DetailPage = () => {
  const history = useHistory();

  return (
    <InfoDetailPage
      title="Detail page"
      onPreviousPathClick={() => history.push('/starting-page')}
      previousPathLabel="Go back"
    >
      <Text.Body>{'Lorem ipsum ...'}</Text.Body>
    </InfoDetailPage>
  );
};

import { useHistory } from 'react-router-dom';
import { useFormik } from 'formik';
import TextField from '@commercetools-uikit/text-field';
import TextInput from '@commercetools-uikit/text-input';
import { FormDetailPage } from '@commercetools-frontend/application-components';

const AccountPage = () => {
  const history = useHistory();
  const formik = useFormik({
    initialValues: {
      email: '',
    },
    validate: (formikValues) => {
      if (TextInput.isEmpty(formikValues.email)) {
        return { email: { missing: true } };
      }
      return {};
    },
    onSubmit: async (formikValues) => {
      alert(`email: ${formikValues.email}`);
      // Do something async
    },
  });

  return (
    <FormDetailPage
      title="Manage your account"
      onPreviousPathClick={() => history.push('/starting-page')}
      isPrimaryButtonDisabled={formik.isSubmitting}
      onSecondaryButtonClick={formik.handleReset}
      onPrimaryButtonClick={formik.handleSubmit}
    >
      <TextField
        name="email"
        title="Email"
        isRequired={true}
        value={formik.values.email}
        errors={formik.errors.email}
        touched={formik.touched.email}
        onChange={formik.handleChange}
        onBlur={formik.handleBlur}
      />
    </FormDetailPage>
  );
};

import { useHistory } from 'react-router-dom';
import { useFormik } from 'formik';
import TextField from '@commercetools-uikit/text-field';
import TextInput from '@commercetools-uikit/text-input';
import { CustomFormDetailPage } from '@commercetools-frontend/application-components';

const AccountPage = () => {
  const history = useHistory();
  const formik = useFormik({
    initialValues: {
      email: '',
    },
    validate: (formikValues) => {
      if (TextInput.isEmpty(formikValues.email)) {
        return { email: { missing: true } };
      }
      return {};
    },
    onSubmit: async (formikValues) => {
      alert(`email: ${formikValues.email}`);
      // Do something async
    },
  });

  return (
    <CustomFormDetailPage
      title="Manage your account"
      onPreviousPathClick={() => history.push('/starting-page')}
      formControls={
        <>
          <CustomFormDetailPage.FormSecondaryButton
            onClick={formik.handleReset}
          />
          <CustomFormDetailPage.FormPrimaryButton
            onClick={formik.handleSubmit}
          />
          <CustomFormDetailPage.FormDeleteButton onClick={handleDelete} />
        </>
      }
    >
      <TextField
        name="email"
        title="Email"
        isRequired={true}
        value={formik.values.email}
        errors={formik.errors.email}
        touched={formik.touched.email}
        onChange={formik.handleChange}
        onBlur={formik.handleBlur}
      />
    </CustomFormDetailPage>
  );
};

import { Switch, Route, useRouteMatch, useHistory } from 'react-router-dom';
import {
  TabularDetailPage,
  TabHeader,
} from '@commercetools-frontend/application-components';

const DetailPage = () => {
  const match = useRouteMatch();
  const history = useHistory();

  return (
    <TabularDetailPage
      title="Detail page"
      onPreviousPathClick={() => history.push('/starting-page')}
      previousPathLabel="Go back"
      tabControls={
        <>
          <TabHeader to={`${match.url}/tab-one`} label="Tab One" />
          <TabHeader to={`${match.url}/tab-two`} label="Tab Two" />
        </>
      }
    >
      <Switch>
        <Route path={`${match.path}/tab-one`}>
          <Tab1 />
        </Route>
        <Route path={`${match.path}/tab-two`}>
          <Tab2 />
        </Route>
      </Switch>
    </TabularDetailPage>
  );
};

import {
  InfoModalPage,
  useModalState,
} from '@commercetools-frontend/application-components';

const Example = () => {
  const pageModalState = useModalState();

  return (
    <InfoModalPage
      title="Lorem ipsum"
      isOpen={pageModalState.isModalOpen}
      onClose={pageModalState.closeModal}
      subtitle={<Text.Body>{'Lorem ipsum ...'}</Text.Body>}
      topBarCurrentPathLabel="Lorem ipsum"
      topBarPreviousPathLabel="Back"
    >
      <Text.Body>{'Lorem ipsum ...'}</Text.Body>
    </InfoModalPage>
  );
};

import { useFormik } from 'formik';
import TextField from '@commercetools-uikit/text-field';
import TextInput from '@commercetools-uikit/text-input';
import {
  FormModalPage,
  useModalState,
} from '@commercetools-frontend/application-components';

const AccountPage = () => {
  const formModalState = useModalState();
  const formik = useFormik({
    initialValues: {
      email: '',
    },
    validate: (formikValues) => {
      if (TextInput.isEmpty(formikValues.email)) {
        return { email: { missing: true } };
      }
      return {};
    },
    onSubmit: async (formikValues) => {
      alert(`email: ${formikValues.email}`);
      // Do something async
    },
  });

  return (
    <FormModalPage
      title="Manage your account"
      isOpen={formModalState.isModalOpen}
      onClose={formModalState.closeModal}
      isPrimaryButtonDisabled={formik.isSubmitting}
      onSecondaryButtonClick={formik.handleReset}
      onPrimaryButtonClick={formik.handleSubmit}
    >
      <TextField
        name="email"
        title="Email"
        isRequired={true}
        value={formik.values.email}
        errors={formik.errors.email}
        touched={formik.touched.email}
        onChange={formik.handleChange}
        onBlur={formik.handleBlur}
      />
    </FormModalPage>
  );
};

import { useFormik } from 'formik';
import TextField from '@commercetools-uikit/text-field';
import TextInput from '@commercetools-uikit/text-input';
import {
  CustomFormModalPage,
  useModalState,
} from '@commercetools-frontend/application-components';

const AccountPage = () => {
  const formModalState = useModalState();
  const formik = useFormik({
    initialValues: {
      email: '',
    },
    validate: (formikValues) => {
      if (TextInput.isEmpty(formikValues.email)) {
        return { email: { missing: true } };
      }
      return {};
    },
    onSubmit: async (formikValues) => {
      alert(`email: ${formikValues.email}`);
      // Do something async
    },
  });

  return (
    <CustomFormModalPage
      title="Manage your account"
      isOpen={formModalState.isModalOpen}
      onClose={formModalState.closeModal}
      formControls={
        <>
          <CustomFormModalPage.FormSecondaryButton
            onClick={formik.handleReset}
          />
          <CustomFormModalPage.FormPrimaryButton
            onClick={formik.handleSubmit}
          />
          <CustomFormModalPage.FormDeleteButton onClick={handleDelete} />
        </>
      }
    >
      <TextField
        name="email"
        title="Email"
        isRequired={true}
        value={formik.values.email}
        errors={formik.errors.email}
        touched={formik.touched.email}
        onChange={formik.handleChange}
        onBlur={formik.handleBlur}
      />
    </CustomFormModalPage>
  );
};

import {
  BrowserRouter as Router,
  Switch,
  Route,
  useRouteMatch,
} from 'react-router-dom';
import {
  TabularModalPage,
  useModalState,
  TabHeader,
} from '@commercetools-frontend/application-components';

const AccountPage = () => {
  const match = useRouteMatch();
  const tabsModalState = useModalState();

  return (
    <Router>
      <TabularModalPage
        title="Manage your account"
        isOpen={tabsModalState.isModalOpen}
        onClose={tabsModalState.closeModal}
        tabControls={
          <>
            <TabHeader to={`${match.url}/tab-one`} label="Tab One" />
            <TabHeader to={`${match.url}/tab-two`} label="Tab Two" />
          </>
        }
      >
        <Switch>
          <Route path={`${match.path}/tab-one`}>
            <Tab1 />
          </Route>
          <Route path={`${match.path}/tab-two`}>
            <Tab2 />
          </Route>
        </Switch>
      </TabularModalPage>
    </Router>
  );
};

import {
  InfoDialog,
  useModalState,
} from '@commercetools-frontend/application-components';

const ChannelsInfo = () => {
  const infoModalState = useModalState();

  return (
    <InfoDialog
      title="About channels"
      isOpen={infoModalState.isModalOpen}
      onClose={infoModalState.closeModal}
    >
      <Spacings.Stack scale="m">
        <Text.Body>{'Channels are ...'}</Text.Body>
      </Spacings.Stack>
    </InfoDialog>
  );
};

import {
  ConfirmationDialog,
  useModalState,
} from '@commercetools-frontend/application-components';

const ChannelDeletion = () => {
  const confirmationModalState = useModalState();
  const handleConfirm = useCallback(() => {
    // Do something async
  }, []);

  return (
    <ConfirmationDialog
      title="Confirm channel deletion"
      isOpen={confirmationModalState.isModalOpen}
      onClose={confirmationModalState.closeModal}
      onCancel={confirmationModalState.closeModal}
      onConfirm={handleConfirm}
    >
      <Spacings.Stack scale="m">
        <Text.Body>{'Are you sure you want to delete this channel?'}</Text.Body>
      </Spacings.Stack>
    </ConfirmationDialog>
  );
};

import { useFormik } from 'formik';
import TextField from '@commercetools-uikit/text-field';
import TextInput from '@commercetools-uikit/text-input';
import {
  FormDialog,
  useModalState,
} from '@commercetools-frontend/application-components';

const EmailForm = () => {
  const formModalState = useModalState();
  const formik = useFormik({
    initialValues: {
      email: '',
    },
    validate: (formikValues) => {
      if (TextInput.isEmpty(formikValues.email)) {
        return { email: { missing: true } };
      }
      return {};
    },
    onSubmit: async (formikValues) => {
      alert(`email: ${formikValues.email}`);
      // Do something async
    },
  });

  return (
    <FormDialog
      title="Update email"
      isOpen={formModalState.isModalOpen}
      onClose={formModalState.closeModal}
      isPrimaryButtonDisabled={formik.isSubmitting}
      onSecondaryButtonClick={formik.handleReset}
      onPrimaryButtonClick={formik.handleSubmit}
      footerContent={<a href="/#">lorem ipsum</a>}
    >
      <TextField
        name="email"
        title="Email"
        isRequired={true}
        value={formik.values.email}
        errors={formik.errors.email}
        touched={formik.touched.email}
        onChange={formik.handleChange}
        onBlur={formik.handleBlur}
      />
    </FormDialog>
  );
};

import {
  Drawer,
  useModalState,
} from '@commercetools-frontend/application-components';

const TransactionDescription = () => {
  const drawerState = useModalState();

  return (
    <Drawer
      title="Transaction Description"
      subtitle={drawerState.subtitle}
      isOpen={drawerState.isOpen}
      size={drawerState.size}
      onClose={drawerState.onClose}
      hideControls={drawerState.hideControls}
    >
      <Spacings.Stack scale="m">
        <Text.Body>{'This transaction....'}</Text.Body>
      </Spacings.Stack>
    </Drawer>
  );
};