npm package: @mjv-fabrica-gc/portal-mjv-components
Description: Sharepoint ui lib for react presentational components
Author: luiz.mariz
Latest version: 0.8.0

# 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:

```tsx{8}
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_

```ts
export { default } from "./Demo";
```

_Demo.modules.scss_

```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_

```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_:

```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](https://www.npmjs.com/) 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.

## License

All files in this GitHub repository are subject to the [MIT license](https://github.com/OfficeDev/office-ui-fabric-core/blob/master/LICENSE)