@globalsoftba/bede-starterkit

bede-starterkit

Components used to Build feature rich websites using the Bede Platform

Made with create-react-library

Install

npm install --save @bedegaming/bede-starterkit

Setup

/**
 * src/i18n.tsx
 * Initializes translations.
 */
import { translations } from '@bedegaming/bede-starterkit';
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

i18n.use(initReactI18next).init({
  resources: {
    en: { translation: translations }
  },
  lng: 'en'
});

/**
 * src/index.tsx
 * Calls initialization function & assembles redux store.
 */
import {
  initStarterkit,
  reducers,
  rootSaga
} from '@bedegaming/bede-starterkit';
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { applyMiddleware, combineReducers, createStore } from 'redux';
import createSagaMiddleware from 'redux-saga';
import App from './App';
import './i18n';

initStarterkit({ appName: 'myAppName' });

const sagaMiddleware = createSagaMiddleware();
const store = createStore(combineReducers(reducers));
sagaMiddleware.run(rootSaga);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

Usage

import React, { Component } from 'react';

import { Button } from '@bedegaming/bede-starterkit';
import '@bedegaming/bede-starterkit/dist/index.css';

class Example extends Component {
  render() {
    return <Button label='Click me' />;
  }
}

Theme Customisation

Global variables that can be overridden to customise the theme can be found in the files within the src/scss/theme folder. Components also have their own specific theme variables that can be overridden which can be found in their corresponding scss files.

Component Typing

Hey there Purdy

If importing component typing outside of the src/components folder please first separate the typing into it's own file, otherwise the extra stuff imported into nativeAppUtils may cause the native app build to fail.

AEM Integration

You will need to do the following steps in order to integrate the components into an AEM React SPA project.

1. Install this package as a dependency. (when the package is published)

2. Add a file in ui.frontend/components/src to import and map the component for AEM

   For example

   inbox.js

   import { InboxContainerAEM } from '@bedegaming/bede-starterkit';
   
   import { MapTo } from '@adobe/cq-react-editable-components';
   
   /**
    * Optional configuration to help AEM decide when to render a placeholder
    * instead of the component.  If not needed feel free to omit the second argument.
    */
   const InboxEditorConfig = {
     emptyLabel: 'Inbox',
   
     isEmpty: function (props) {
       return !props;
     }
   };
   
   export default MapTo('mysite/components/inbox')(
     InboxContainerAEM,
     InboxEditorConfig
   );
   

3. Import the wrapped component file in import-components.js

4. npm install @teclead/aem-generator

5. Make the following changes to the scripts package.json. This will add the functionality to auto generate AEM component/dialog config files.

   {
     "build": "npm run build:dialogs && react-scripts build && clientlib",
     "build:dialogs": "node node_modules/@teclead/aem-generator/builder.js"
   }
   

6. Add an AEM dialog definition file and modifiy the argument to suitable values for the project. The file will need to be typescript for the build:dialogs script to pick it up.

   Example

   inbox.dialog.ts

   import { inboxDialog } from '@bedegaming/bede-starterkit/dist/aem';
   import { TouchUIXMLGenerator } from '@teclead/aem-generator';
   
   new TouchUIXMLGenerator(
     inboxDialog(
       '../ui.apps/src/main/content/jcr_root/apps/mysite/components/',
       '<div></div>',
       'componentGroupName'
     )
   ).writeFilesToAEM();
   

Versioning & Changelog

Versioning is done automatically on merge by the autoversion and autoversion-commit scripts as part of the teamcity build job, it works by checking the last commit (squash and merge on merging is advised) for a [fix], [patch], [feat], [minor], [major], [no-version] tag and then will take care of bumping the package, commiting and publishing with an updated changelog on completion of build, unless a [no-version] tag is specified.

Failure to not include a version type tag will result in the teamcity build job failing.

How to include

Adobe Experience Cloud

Requires setup of Adobe I/O CLI and Cloud Manager Plugin, more information can be found here. Upon completion of this, the next command to run is

aio cloudmanager:set-pipeline-variables <PIPELINE_ID> --programId=<PROGRAM_ID>  --secret NPM_TOKEN <AUTH_TOKEN>

Replacing the <PIPELINE_ID>, <PROGRAM_ID>, <AUTH_TOKEN> with the appropriate values

Using the example url https://experience.adobe.com/#/@bedegamingemeaptrsd/cloud-manager/pipelineexecution.html/program/31510/pipeline/4892025/execution/769397 we would run the command:

aio cloudmanager:set-pipeline-variables 4892025 --programId=31510 --secret NPM_TOKEN AUTH_TOKEN ...

Next in the project that is importing Bede-Starterkit, in the root directory create a .mvn folder and inside create a file called extensions.xml. Inside that file add the following snippet.

<extensions xmlns="http://maven.apache.org/EXTENSIONS/1.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/EXTENSIONS/1.0.0 http://maven.apache.org/xsd/core-extensions-1.0.0.xsd">
    <extension>
        <groupId>biz.netcentric.maven.extension</groupId>
        <artifactId>maven-ext-repos-from-env</artifactId>
        <version>1.2.0</version>
    </extension>
</extensions>

Commit it, and your adobe instance is ready to go. For more information about this setup click here.

Husky testing

This repository uses Husky tool and its pre-commit hooks which are scripts or actions that run automatically before specific Git operations like committing changes or pushing code to a remote repository.

---

Pre-commit hook used is yarn test. Here is a list of the things it does:

• Automated Testing: Running unit tests, integration tests, or other automated tests before each commit helps catch regressions or bugs early in the development process, reducing the likelihood of pushing faulty code.
• Code Quality Checks: Pre-commit hooks to run code linting tools to ensure that your code conforms to coding standards and is free of common syntax errors.
• Formatting and Styling: Automatically formatting code with tools like Stylelint can ensure consistent code style across the project.

License

MIT ©