chore: add circleci config to publish to npm

.circleci/config.yml

@@ -0,0 +1,31 @@
+version: 2.1
+
+executors:
+  node-docker-executor:
+    docker:
+      - image: cimg/node:18.20.4-browsers
+    working_directory: ~/project
+
+jobs:
+  # Job to publish to npm
+  npm-publish:
+    executor: node-docker-executor
+    steps:
+      - checkout
+      - run:
+          name: Install dependencies
+          command: yarn install
+      - run:
+          name: Set Up npm Credentials
+          command: |
+            echo "//registry.npmjs.org/:_authToken=$NPM_AUTH_TOKEN" > ~/.npmrc
+      - run:
+          name: Publish to npm
+          command: |
+            npm publish
+
+workflows:
+  version: 2
+  publish:
+    jobs:
+      - npm-publish

.gitignore

@@ -5,6 +5,7 @@
 
 # IDE
 .vscode
+.idea
 
 # Lib
 /dist

README.md

@@ -1,12 +1,12 @@
-# @modusbox/react-components
+# @pm4ml/react-components
 
 A collection of React components for the frontend apps.
 
 <p style="text-align:center;"><img src="./theme.svg"/></p>
 
-To install the module run `yarn add @modusbox/react-components`.
+To install the module run `yarn add @pm4ml/react-components`.
 
-Documentation is available at [https://modusintegration.github.io/react-components](https://modusintegration.github.io/react-components)
+Documentation is available at [https://github.com/pm4ml/react-components](https://github.com/pm4ml/react-components)
 
 ### Development
 

package.json

@@ -1,16 +1,19 @@
 {
-  "name": "@modusbox/react-components",
-  "version": "0.1.9",
+  "name": "@pm4ml/react-components",
+  "version": "0.1.10",
   "main": "lib/index.js",
   "author": "Ivan Annovazzi <ivan@modusbox.com>",
   "module": "lib/index.esm.js",
-  "license": "MIT",
+  "license": "Apache-2.0",
   "types": "lib/index.d.ts",
   "files": [
     "lib"
   ],
+  "publishConfig": {
+    "access": "public"
+  },
   "dependencies": {
-    "@modusbox/ts-utils": "^0.0.4",
+    "@pm4ml/ts-utils": "^0.0.6",
     "babel-plugin-react-docgen": "^4.2.1",
     "bootstrap-icons": "^1.5.0",
     "date-fns": "^2.21.3",
@@ -56,12 +59,12 @@
     "prettier": "^2.2.1",
     "prettier-eslint": "^12.0.0",
     "prettier-eslint-cli": "^5.0.1",
-    "rollup": "^2.45.2",
+    "rollup": "2.79.2",
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-sass": "^1.2.2",
     "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-typescript2": "^0.30.0",
+    "rollup-plugin-typescript2": "^0.36.0",
     "sass": "^1.34.0",
     "sass-loader": "10",
     "storybook": "6.3.7",

src/README.md

@@ -1,10 +1,10 @@
-# @modusbox/react-components
+# @pm4ml/react-components
 
 A collection of Typescript utilities for the frontend apps.
 
 ### Installation
 
-To install the module simply run `yarn add @modusbox/react-components`.
+To install the module simply run `yarn add @pm4ml/react-components`.
 
 
 ### Importing the styles
@@ -16,7 +16,7 @@ The library allows to import the single bundled CSS file or to extend the SCSS s
 #### CSS
 All you need to do is to import the styles by including the `index.css`:
 ```ts
-import '@modusbox/react-components/lib/index.css';
+import '@pm4ml/react-components/lib/index.css';
 ```
 
 #### SCSS
@@ -30,7 +30,7 @@ You need to create your own SCSS file and import the `index.scss` from there:
 colors.$primary: #f00;
 
 // import the scss
-@import 'node_modules/@modusbox/react-components/lib/index.scss';
+@import 'node_modules/@pm4ml/react-components/lib/index.scss';
 
 ```
 

src/components/FileUploader/FileUploader.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import classnames from "classnames";
-import readFileAsText from "@modusbox/ts-utils/lib/file/readFileAsText";
-import readFileAsBase64 from "@modusbox/ts-utils/lib/file/readFileAsBase64";
+import readFileAsText from "@pm4ml/ts-utils/lib/file/readFileAsText";
+import readFileAsBase64 from "@pm4ml/ts-utils/lib/file/readFileAsBase64";
 import Field, { Loader, Placeholder, InvalidIcon } from "components/Field";
 import FolderPlusIcon from "bootstrap-icons/icons/folder-plus.svg";
 import TrashIcon from "bootstrap-icons/icons/trash.svg";

src/docs/components/ValidationForm/index.tsx

@@ -5,7 +5,7 @@ import {
   createValidation,
   vd,
   toValidationResult,
-} from "@modusbox/ts-utils/lib/validation";
+} from "@pm4ml/ts-utils/lib/validation";
 
 const formValidation = {
   name: createValidation([vd.maxLength(10)]),

src/docs/guidelines/HowToInstall.stories.mdx

@@ -8,12 +8,12 @@ Install the library as npm module in your project:
 
 - using yarn
 ```bash
-yarn add @modusbox/react-components
+yarn add @pm4ml/react-components
 ```
 
 - Using npm
 ```bash
-npm i @modusbox/react-components
+npm i @pm4ml/react-components
 ```
 
 **Note**: This library is built using `React 17` - while it should be retro compatible, it's suggested to use a modern version of React to avoid problems.

src/docs/guidelines/HowToStyle.stories.mdx

@@ -20,10 +20,10 @@ The easiest and most powerful way is to use SCSS.
 
 You can import variables and themes and use them with minimal effort, without worrying about anything else.
 
-Simply import the entrypoint `@modusbox/react-components/lib/index.scss` and you are ready to go.
+Simply import the entrypoint `@pm4ml/react-components/lib/index.scss` and you are ready to go.
 
 ```css
-@import "@modusbox/react-components/lib/index.scss";
+@import "@pm4ml/react-components/lib/index.scss";
 
 .box {
   background: colors.$primary;
@@ -43,7 +43,7 @@ Import the CSS bundle
 
 ```tsx
 // component file .js, .jsx, .ts, .tsx
-import "@modusbox/react-components/lib/index.css";
+import "@pm4ml/react-components/lib/index.css";
 ```
 
 Use the variable in your stylesheet

src/docs/guidelines/HowToUse.stories.mdx

@@ -9,10 +9,10 @@ import ThemeForm from 'docs/components/ThemeForm';
 
 ## Usage
 
-First import the components you need in your modules from `@modusbox/react-components` module:
+First import the components you need in your modules from `@pm4ml/react-components` module:
 
 ```tsx
-import { Row, Button, Checkbox } from '@modusbox/react-components';
+import { Row, Button, Checkbox } from '@pm4ml/react-components';
 ```
 
 then you can just se them as regular React components:

src/docs/guidelines/UsingTheVariables.stories.mdx

@@ -12,7 +12,7 @@ First, import the scss module and pass variables to it:
 ```css
 /* override.scss */
 
-@use "@modusbox/react-components/lib/scss/base/colors" with(colors.$primary: #f00);
+@use "@pm4ml/react-components/lib/scss/base/colors" with(colors.$primary: #f00);
 
 ```
 

src/hocs/withValidation/ValidationCard.tsx

@@ -1,7 +1,7 @@
 import classnames from "classnames";
 import Row from "components/Flexbox/Row";
 import Icon from "components/Icon";
-import { ValidationMessage } from "@modusbox/ts-utils/lib/validation";
+import { ValidationMessage } from "@pm4ml/ts-utils/lib/validation";
 import Check from "bootstrap-icons/icons/check.svg";
 import X from "bootstrap-icons/icons/x.svg";
 import "./ValidationCard.scss";

src/hocs/withValidation/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import Tooltip from "components/Tooltip";
-import { ValidationResult } from "@modusbox/ts-utils/lib/validation";
+import { ValidationResult } from "@pm4ml/ts-utils/lib/validation";
 import ValidationCard from "./ValidationCard";
 
 interface BaseProps {