Development environment

Among other files, the repository contains the following significant items. Depending on your operating system, you might need to show hidden files to see them all.

SPM-UI-ADDON-DEV
└───.storybook          The stories for the sample components. Add stories for your components here.
└───cookbook            The developer documentation source files.
└───packages            The repository provides these packages.
    └───carbon-addon-devenv
    └───custom-carbon-addons
    └───graphql-mocks
    .env                A starter React environment variable configuration file.
Copy to clipboard

The `carbon-addon-devenv` package

The carbon-addon-devenv package contains the development environment to work with Carbon components and to develop custom Carbon add-on components.

It contains two sample add-on components to help you to get started, which need a Java renderer and a GraphQL query to integrate them onto a UIM page.

carbon-addon-devenv
└───sample_renderers
└───src
└───stories
    PersonFolio.stories.js
Copy to clipboard

An npm file is provided for the following open source packages:

Carbon Design System, which is an IBM open source design system. It consists of working code, design tools and resources, and human interface guidelines. For more information, see the Carbon v10 website.
React, which is an open source JavaScript library that enables developers to build human-centered user interfaces.
GraphQL, which is an open source data query language that enables developers to query and configure complex data queries that aggregate information from different database entities.
Apollo Client, which is an open source library that enables GraphQL developers to manage information state. Apollo Client provides the infrastructure for caching data.
Jest is a JavaScript testing framework that is designed to ensure the correctness of any JavaScript code base.
Enzyme is a JavaScript testing utility for React that makes it easier to test your React component’s output.

The `custom-carbon-addons` package

The custom-carbon-addons package is where you must place all of your custom files, to ensure that upgrades do not affect your custom content.

custom-carbon-addons
└───renderers
│   index.js
└───src
    package.json_sample

Copy to clipboard

The `graphql-mocks` package

The graphql-mocks package is where you can place data for mock GraphQL queries. This package essentially provides a lightweight mock GraphQL service that simulates the real GraphQL service from SPM.

graphql-mocks
└───resolvers
│   └─── data
│   index.js
└───typeDefs
└───server.js
    package.json
Copy to clipboard

The resolvers directory contains the resolver functions, also known as data fetcher functions in GraphQL terminology, that resolve to data values. The data subdirectory in the resolvers directory contains the raw data for the mock GraphQl service. The typeDefs directory contains the GraphQL Object Type definitions.

Setting up for development: Set up your development environment

Development: Development process

Development environment

The carbon-addon-devenv package

The custom-carbon-addons package

The graphql-mocks package

The `carbon-addon-devenv` package

The `custom-carbon-addons` package

The `graphql-mocks` package