Qdm-component-library NPM

QDM Component Library

List of components used in the QDM

To create a components

Navigate to ./src/components/ create a new directory with the name of your component.
Define your component in index.tsx file and export it as a default one.

import React from 'react';
import PropTypes from 'prop-types';

const ComponentOne = (props) => {
    return <h1>Component One</h2>
}

ComponentOne.propTypes = {
    prop1: PropTypes.string.isRequired,
    prop2: PropTypes.string
}

ComponentOne.defaultProps = {
    prop2: "some text"
}

export default ComponentOne;

Export the created component in the ./src/component/index.js.

export {default as ComponentOne} from './component_one';

Now you successfully created a component.

To package and test the created component in local

To package and test in local follow below steps

Run npm run test-local. It will create a your-package-name.tgz file in the root of the project directory.
Then go the project you want to use the package. And run the below command npm link your-package-name.
It will install the package to that project and start import and test it.

To publish the package to NPM

To publish the package to NPM follow the below setps

First, build and commit the library npm run build git add . git commit -m 'your commit message'
Then update the version of the package npm version patch - For a bug fix npm version minor - For a new component addition npm version major - For a completed feature.
Then Run, the below commands npm link npm link your-package-name
Then login to the NPM account using the below command (ignore if you already logged in) npm login It ask your username and password provide the one which is shared in the PingPong Notes - NPM Credentials (Staging).
Finally run npm publish --access public
Then, login into the NPM site and check the version update there.

NOTE: You can found the 'your-package-name' in package.json's name key.

For further more details refere the below link

How to create,test and publish a NPM package in react.

date-fns es6-object-assign idmpanel-pkg moment npm object-assign object-assign-polyfill object.assign react-flexmonster rollup-plugin-sass styled-components

aq-clmm-masters event_catalog clmm-master clmm-masters react-typography-crayond

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago