@/application-components

yarn add @commercetools-frontend/application-components

# or

npm --save install @commercetools-frontend/application-components

yarn add react react-dom react-intl

# or

npm --save install react react-dom react-intl

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}
    >
      <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 { InfoModalPage, useModalState } from '@commercetools-frontend/application-components';

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

  return (
    <InfoModalPage
      title="Lorem ipsum"
      isOpen={true}
      onClose={handleClose}
      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 { 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 { 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="/tab-one" label="Tab One" />
            <TabHeader to="/tab-two" label="Tab Two" />
          </>
        }
      >
        <Switch>
          <Route path={`${match.path}/tab-1`}>
            <Tab1 />
          </Route>
          <Route path={`${match.path}/tab-2`}>
            <Tab2 />
          </Route>
        </Switch>
      </TabularModalPage>
    </Router>
  );
}

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 { 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 { 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 {
  useModalState,
  InfoDialog,
} from '@commercetools-frontend/application-components';

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

  return (
    <div>
      <button onClick={infoModalState.openModal}>Click me</button>

      <InfoDialog
        isOpen={infoModalState.isModalOpen}
        onClose={infoModalState.closeModal}
        title="Welcome"
      >
        Hi there.
      </InfoDialog>
    </div>
  )
}

import { PortalsContainer } from '@commercetools-frontend/application-components';

const Application = () => (
  <main>
    <PortalsContainer />
    {/* ... */}
  </main>
)