widget-match-h2h v1.0.0

React component boilerplate

This is simple boilerplate project for building React component library for NPM. It is suitable for building of any type of UI component or library. The project/source code contains two separated phases for development. A one of live development and other for lib-based code.

NOTE: This widget does not use Widget Loader !!!

How it is structured

As is described above the code is structured in two separated phases:

• The first is responsible to build component lib (production-ready) code for NPM
• The second phase is responsible to build development (Demo) app with HMR.

Getting started

Follow these steps to get started developing component library.

$ git clone git@bitbucket.org:sportal-media-platform/widget-template.git <my-project-name>
$ cd <my-project-name>

When that's done, install the project dependencies. It is recommended that you use Yarn for deterministic dependency management, but npm install will suffice.

$ yarn  # Install project dependencies (or `npm install`)

When you completed development

• $ npm publish --access restricted

Project Structure

The project structure presented in this boilerplate is fractal, where functionality is grouped primarily by feature rather than file type. This structure is only meant to serve as a guide, it is by no means prescriptive. That said, it aims to represent generally accepted guidelines and patterns for building scalable applications. If you wish to read more about this pattern, please check out this awesome writeup by Justin Greenberg.

.
├── build                            # All build-related code
├── dist                             # The all production-ready code
├── lib                              #
├── design                           # Static folder where is stored the design (not imported anywhere in source code)
├── src                              # Application source code
│   ├── dev                          # Application bootstrap and rendering
│       ├── Main.jsx                 # The entry point of App (bootstraping component)
│       ├── Index.html               # Static HTML template (It is using only in dev mode )
│   ├── lib                          # Application widget where will live
|       ├── components               # The all components where will be stored
|       ├── design                   # The all design mock-ups where will be stored
|       ├── index.jsx                # The entry point of widget
|       ├── package-lib.json         # The schema of package.json for the component
|       ├── README.md                # Description about how to use it
|       ├── LICENSE.md               # The license requirements
│   ├── styles                       # Application styles where will live
│   ├── locales                      # The all translation keys will live there
│       ├── index.js                 # An entry point of the all locales
└── tests                            # Unit tests

Bind the widget to HTML DOM

You can bind the widget to the HTML DOM by two ways:

• Bind the widget without initial options. The required attribute here is "data-widgetId"

    <div data-widgetId="widget-template"></div>

• Bind the widget with initial options. The all available options can be seen below

    <div data-widgetId="widget-template" data-options='{...}'></div>

• The optional "data-options" attribute:

   {
        string homeTeamId: "1"   // Unique identifier of the resource.
        string awayTeamId: "2"  // Unique identifier of the resource.
        string lang: "en",   // the language in format like: en, bg, ro and etc.
   }

Running the Project

After completing the installation step, you're ready to start the project!

$ yarn run start:dev  # Start the development server (or `npm run start:dev`)

While developing, you will probably rely mostly on yarn run start:dev; however, there are additional scripts at your disposal:

Testing

To add a unit test, create a .spec.js file anywhere inside of ./tests. // TBD

Building for Production

Out of the box, this widget is deployable by serving the ./dist folder generated by yarn build:prod.