@mjv-fabrica-gc/portal-mjv-components NPM

Portal MJV components

The MJV's React Typescript front-end ui lib for building interfaces for sharepoint online.

Using the library

You can install this lib with npm i @mjv-fabrica-gc/portal-mjv-components. After it, just import and use the desired components:

import * as React from "react";
import { Component } from "@mjv-fabrica-gc/portal-mjv-components";

const WebPart: React.SFC<any> = () => {
  return (
    <>
      <h1>Demo</h1>
      <Component prop="example" />
    </>
  );
};

For components details, please check the development section.

Development

Node v10.19.0 is required in development to avoid incompatibilities with Sharepoint

Having that in mind, open a terminal of your choice, clone the project repository on your local machine and run npm install.

Available scripts:

storybook: Runs a local server for development and documentation purpose
build: Build the components exposed in src/index.ts in a publishable package

Creating a component

Let's assume that we want a new component called Demo that receives a title as prop and renders it.

At src/components/ create a new folder with the component name, in this case we will get an src/components/Demo directory.

Now, it's important to create our base files. Start with a ComponentName.tsx and an index.ts. Styles are also important so create a ComponentName.modules.scss file, don't forget the .modules as this lib implements the css modules by default.

In our Demo, we will get something like this:

index.ts

export { default } from "./Demo";

Demo.modules.scss

// It's a good practice wrap all your css at a root class, avoid use id's
.demo {
  .title {
    font-size: 36px;
  }
}

Demo.tsx

import * as React from "react";
import s from "./Demo.modules.scss";
/*
  Your text editor will probably blow up with the scss modules import. Don't worry about it, run or build our package will automatically generate a .module.scss.d.ts file that exports our styles
  definitions
*/

// First, let's define the types of our component's props
interface IDemoProps {
  title: string;
}

/*
  And the core of our component goes here, css modules also allow us to implement our classNames
  in a wonderful way
*/
const Demo: React.SFC<IDemoProps> = ({ title }) => {
  return (
    <div className={s.demo}>
      <h1 className={s.title}>{title}</h1>
    </div>
  );
};

export default Demo;

Finished with your component development, export it on src/index.ts:

import Example from "./components/Example";
import Demo from "./components/Demo";

export { Example, Demo };

Testing

Now, to run the development local server, run npm run storybook. It should open a page on your browser. Changes on your code will auto-refresh your development.

Publishing

Important! Do not deploy the lib without proper authorization

To publish a new release to npm registry we will first need a npm account with access to @mjv-fabrica-gc organization.

Make sure that all components are properly exported from src/index.ts and upgrade the version key in package.json. For example, if you want to publish a fix release you will change "version": "0.0.0" to "version": "0.0.1".

After these steps, everything is OK to publish the package. Then run npm run build and right after it run npm publish --access=public. You will get an affirmative message if everything is right.