This setup will work for both yarn and npm. If you run into issues consult Artifactory NPM Docs first

$> npm config set @wikia:registry https://artifactory.wikia-inc.com/artifactory/api/npm/wikia-npm/
$> npm config set @fandom:registry https://artifactory.wikia-inc.com/artifactory/api/npm/wikia-npm/

$> yarn add @wikia/react-common

or

$> npm i @wikia/react-common

import Button from '@wikia/react-common/components/Button';
import IconAdd from '@wikia/react-common/icons/IconAdd';

...

<div>
    <Button>
        <IconAdd />
        Camera
    </Button>
</div>

Make sure you include the CSS in your styles.

@import "~@wikia/react-common/components/Icon.css";
@import "~@wikia/react-common/components/Button.css";

This setup will work for both yarn and npm. If you run into issues consult Artifactory NPM Docs first

1. Verify you can login to Artifactory Wikia
2. Change wikia scoped packages to use artifactory
   • $> npm config set @wikia:registry https://artifactory.wikia-inc.com/artifactory/api/npm/wikia-npm/
3. Login
   • $> npm login --scope=@wikia
   • Use artifactory login and artifactory API key for password by going to "Edit Profile" in artifactory web ui

• ES6 React components with prop-types saved in .js file.
• Use function syntax if possible, use nesting and flat files.
• 100% lint and coverage and no regressions
• use Jest as a general testing framework and for testing component's rendering
• use Enzyme for testing interactions
• use Sinon for testing callbacks

1. Assuming the new component's name is ComponentA all it's files will be in /source/components/ComponentA/ directory.
2. Create component in ComponentA/index.js.
3. Add component to /source/components/index.js.
4. Add component to /config/styleguide.config.json.
5. (optionally) create styles in ComponentA/styles.s?css and import them in ComponentA/index.js.
6. Document the usage and props in JSDocs in ComponentA/index.js.
7. Add example or examples in ComponentA/README.md.
8. Add unit test in ComponentA/index.spec.js, aim for 100% coverage and all the test cases.
9. Create new Pull Request.
10. Code will be merged to master only if there are no regressions and after a successful CR.
11. When the code is merged to master, release new version of the styleguide with one of the release commands.

1. Higher order components (hoc) can be added by following the guide

Note: The one difference will be to use js static in the readme to prevent rendering as styleguidist doesn't have access to the hoc

> yarn dev

The easiest way is to run the full suite:

> yarn ci

It will run linting (ESLint, Stylelint), Jest and will output coverage report.

There's a command for watching Jest tests:

> yarn test:watch

Running the build is as simple as:

> yarn build

This will run few build commands in sequence:

1. Remove every generated file and directory from the dist/ directory (equivalent of yarn clean).
2. Build the library outputting built ES5 files to the dist/ (yarn lib:build).
3. Build the styleguide in the docs/ directory; it contains the build styleguide that will appear on the GitHub pages (yarn styleguide:build).

After PR is merged into master branch create new release. You should use SemVer using one of the following commands.

The script will automatically pull newest master branch, build the documentation, create new release version in the package.json, create GitHub tag and push this tag to GitHub. After pushing the new tag it will publish the package to artifactory.

> yarn release

> yarn release:minor

> yarn release:major

This is system that controlls the state of site notifications, allows to add them via actions, and outputs them to a component.

It supports plaintext messages and automatically handles dismissing actions when the ⨯ icon is clicked on the notification.

The BannerNotification system requires:

• redux (and react-redux)
• immutable

There are few parts that need to be plugged into place:

The reducer/store need to be included in Redux.

Example:

import { BannerNotificationsStore } from '@wikia/react-common/systems/BannerNotifications';
import { combineReducers } from 'redux';

const rootReducer = combineReducers({
    BannerNotificationsStore,
});

export default rootReducer;

The component that connects to the Redux state needs to be included on the page somewhere so the notifications are visible.

import React from 'react';
import PropTypes from 'prop-types';
import FandomContentWell from '@wikia/react-common/components/FandomContentWell';
import { BannerNotificationsComponent } from '@wikia/react-common/systems/BannerNotifications';

class PageLayout extends React.Component {
    static propTypes = {
        children: PropTypes.node.isRequired,
    }

    render() {
        return (
            <FandomContentWell>
                <BannerNotificationsComponent />
                {children}
            </FandomContentWell>
        );
    }
}

export default PageLayout;

NOTE: Remember to also include styles!

@import "~@wikia/react-common/systems/BannerNotifications.css";

BannerNotifications system exports few actions that should be used to add new notifications:

• addAlert(text, [id])
• addWarning(text, [id])
• addSuccess(text, [id])
• addMessage(text, [id])

The id is optional and it's needed only when the notification needs to be manually removed with removeNotfication(id) action. If omitted its value is assigned automatically.

Types of notifications are shown in components/BannerNotification section.

Example usage in thunk:

import axios from 'axios';
import { addAlert } from '@wikia/react-common/systems/BannerNotifications';

export const loadData = () => (
    async dispatch => {
        try {
            const response = await axios({
                method: 'get',
                url: `/api/get-data`,
            });
            //...
        } catch (error) {
            dispatch(addAlert('Error loading data from the server'));
            console.error(error);
        }
    }
);