Nerfing Powerful Megalomaniacs
    Have ideas to improve npm?Join in the discussion! »

    @adobe/aem-core-cif-react-components

    1.10.0 • Public • Published

    CIF Core Components - React Components

    The React Components project is the code base for all the CIF Core Components built using React. The following components are exposed by this library:

    Components related to the shopping cart

    Cart

    An implementation of the "minicart" component, complete with checkout experience.

    CartProvider

    A context provider for a cart component which provides state management for cart operations

    CartInitializer

    A component which provides cart operations such as "Add to cart" and "Remove from cart"

    CheckoutProvider

    A context provider for a cart component which provides state management for checkout operations

    Components related to user authentication / account management

    AuthBar

    The account management components - Sign In, Forgot Password, Change Password and My Account, all wrapped into one component

    AccountContainer

    The same as AuthBar, but rendered in a dropdown instead of a panel.

    AddressBook

    A component that allows authenticated shoppers to manage their address books.

    UserContextProvider

    A context provider for user operations - sign in / sign-out, create user

    General purpose components

    CommerceApp

    A convenience wrapper for React components, encapsulating all the required contexts to run the app

    graphqlAuthLink

    An ApolloLink instance that handles authorization on certain graphql requests (e.g.: cart mutations). This is intended to be used when creating a new ApolloClient instance:

    import { ApolloClient, from, HttpLink, InMemoryCache } from '@apollo/client';
    import { graphqlAuthLink } from '@adobe/aem-core-cif-react-components';
    
    const client = new ApolloClient({
        link: from([graphqlAuthLink, new HttpLink({ uri: graphqlEndpoint, headers: { Store: storeView } })]),
        cache: new InMemoryCache()
    });

    Portal

    A component that allows rendering a React tree inside of a Portal. Uses ReactDOM.createPortal() under the hood.

    Building the project

    The project is built using the command npm run build. The build process bundles all the code into one client library which is placed in ../ui.apps/src/main/content/jcr_root/apps/core/cif/clientlibs/react-components/dist.

    Testing the components

    This project uses Jest for running unit tests and React Testing Library as the testing framework. This framework allows you to test the behavior of the components rather than the implementations.

    The unit tests are run using the npm run test command. To run the tests during development you can use npm run test:watch to start Jest in watch mode.

    Development

    Prerequisites

    For development, please have node.js (v12+) and npm (v6+) installed.

    The React components access the Magento GraphQL endpoint directly, so all calls have to either be served from the same endpoint as AEM or served via a proxy that adds CORS headers.

    To start a local proxy server, you can use the following command:

    npx local-cors-proxy --proxyUrl https://my.magento.cloud --port 3002 --proxyPartial ''
    

    The GraphQL endpoint is then available at http://localhost:3002/graphql.

    If you develop for AEM on-prem installations, a proxy is included in our sample Dispatcher configuration (see the dispacher configuration for details). You have to access AEM through the dispatcher (i.e. use https://localhost instead of http://localhost:4502).

    Building

    To build the components you can use

    npm run build
    

    Keywords

    none

    Install

    npm i @adobe/aem-core-cif-react-components

    DownloadsWeekly Downloads

    98

    Version

    1.10.0

    License

    Apache-2.0

    Unpacked Size

    3.86 MB

    Total Files

    12

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar