TimoWestland

import { mocked } from "ts-jest/utils";
import { useBloomreach } from "../../hooks";

const defaultBloomreachContext = {
  preview: false,
};

jest.mock("../../hooks", () => {
  const actual = jest.requireActual("../../hooks");
  return {

TimoWestland

# Version key/value should be on his own line
PACKAGE_VERSION=$(cat package.json \
  | grep version \
  | head -1 \
  | awk -F: '{ print $2 }' \
  | sed 's/[",]//g')

echo $PACKAGE_VERSION

TimoWestland

import * as React from 'react'

import { useBloomreach } from '../context'
import { BrComponentModel, BrImage, BrInstructions, BrModal, BrUspItem } from '../types'
import { getComponentByPath, getContentByRef } from '../utils'

// Add this one to the bloomreach types:
// export interface BrModal extends Identifiable, Named, Versioned {
//   readonly type: 'richText'
//   readonly localeString: string

TimoWestland

import { Configuration, initialize } from '@bloomreach/spa-sdk'

import { BrPage, BrVisitor } from '../types'
import { brHttpClient as httpClient } from '../utils'

type Request = Configuration['request']
type HttpConnection = Request['connection']

export type Options = {
  /**

TimoWestland

import * as React from 'react'

import { render, screen } from '~/test-utils/testing-library'

import { PageLayout } from '@grandvision/layout'

import { defaultContextValue } from '../../__test-data__'
import { RuntimeContext } from '../runtime-context'
import CmsPageLayout, { Layout, Props } from './Page'

TimoWestland

:root {
  /**
   * Brand shades
   * You probably need to override these in your opco styles
   */
  --color--primary-darkest: #0c315a;
  --color--primary-dark: #1862b5;
  --color--primary: #1e7be2;
  --color--primary-light: #8ebcf1;
  --color--primary-lightest: #e8f2fc;

TimoWestland

body {
  -apple-color-filter: invert(0.8235) hue-rotate(180deg) saturate(300%);
  -apple-color-filter: apple-invert-lightness();
}

@media (prefers-dark-interface) {
  body {
    background-color: white !important;
    -apple-color-filter: none;
  }

TimoWestland

import { action, computed, observable, reaction } from 'mobx'

export interface Todo {
  task: string
  isComplete: boolean
}

export class TodoStore {
  @observable public todoList: Todo[] = []

TimoWestland

Whether you're trying to give back to the open source community or collaborating on your own projects, knowing how to properly fork and generate pull requests is essential. Unfortunately, it's quite easy to make mistakes or not know what you should do when you're initially learning the process. I know that I certainly had considerable initial trouble with it, and I found a lot of the information on GitHub and around the internet to be rather piecemeal and incomplete - part of the process described here, another there, common hangups in a different place, and so on.

In an attempt to coallate this information for myself and others, this short tutorial is what I've found to be fairly standard procedure for creating a fork, doing your work, issuing a pull request, and merging that pull request back into the original project.

Creating a Fork

Just head over to the GitHub page and click the "Fork" button. It's just that simple. Once you've done that, you can use your favorite git client to clone your repo or j

TimoWestland

// @flow
import * as React from 'react'
import { getNestedObject } from 'bloomreach-experience-react-sdk'

function addBeginComment(htmlElm: any, position: string, configuration: Object, preview: boolean) {
  const beginNodeSpan = getNestedObject(configuration, ['_meta', 'beginNodeSpan', 0, 'data'])
  if (preview && htmlElm && beginNodeSpan && !htmlElm.classList.contains('cms-begin-comment-added')) {
    htmlElm.insertAdjacentHTML(position, configuration._meta.beginNodeSpan[0].data)
    // adding an HTML class to ensure comments are not added more than once
    // this is because the comments are added through the DOM and not by React