Merge pull request #12 from mindfiredigital/features/ci-cd-pipeline

Features/ci cd pipeline

.eslintignore

@@ -0,0 +1,3 @@
+/node_modules
+commitlint.config.js
+/.github

.eslintrc

@@ -1,10 +1,8 @@
 {
     "extends": [
-      "react-app",
-      "react-app/jest"
+      "react-app"
     ],
     "rules": {
-      // add any specific rules here
     }
   }
 

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -0,0 +1,44 @@
+name: "Bug report"
+description: Create a report to help us improve
+title: "[BUG]: "
+body:
+  - type: textarea
+    id: describe-the-bug
+    attributes:
+      label: Describe the bug
+      value:
+      placeholder: A clear and concise description of the bug.
+    validations:
+      required: true
+  - type: textarea
+    id: steps-to-reproduce
+    attributes:
+      label: Steps to reproduce
+      value:
+      placeholder: Steps to reproduce
+  - type: textarea
+    id: expected
+    attributes:
+      label: Expected behavior
+      value:
+    validations:
+      required: true
+  - type: textarea
+    id: actually-happening
+    attributes:
+      label: What is actually happening?
+      value:
+    validations:
+      required: true
+  - type: textarea
+    id: Screenshots
+    attributes:
+      label: Screenshots
+      value:
+      placeholder: If applicable, add screenshots to help explain your problem.
+  - type: textarea
+    id: additional-comments
+    attributes:
+      label: Any additional comments?
+      value:
+      placeholder: e.g. some background/context of how you ran into this bug.

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,5 @@
+blank_issues_enabled: true
+contact_links:
+  - name: TextIgniterJS
+    url: https://mindfiredigital.github.io/react-text-igniter/
+    about: react-text-igniter is a tool that allows developers to integrate HTML Editor using React.

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -0,0 +1,14 @@
+name: "New feature proposal"
+description: Suggest an idea for this project
+title: "[Feature]:"
+labels: [":sparkles: feature request"]
+body:
+  - type: textarea
+    id: problem-description
+    attributes:
+      label: What problem does this feature solve?
+      value:
+      placeholder: |
+        Explain your use case, context, and rationale behind this feature request. More importantly, what is the **end user experience** you are trying to build that led to the need for this feature?
+    validations:
+      required: true

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,8 @@
+# Description
+
+Please add an informative description that covers that changes made by the pull request and link all relevant issues.
+
+# All React Document Editor Contribution checklist:
+
+- [ ] **The pull request does not introduce [breaking changes].**
+- [ ] **I have read the [contribution guidelines](../CONTRIBUTING.md).**

.github/workflows/ci.yml

@@ -0,0 +1,61 @@
+name: Deployment Workflow
+
+on:
+  push:
+    branches:
+      - master
+  workflow_dispatch:
+
+jobs:
+  build:
+    name: "@mindfiredigital/react-text-igniter"
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      packages: read
+    steps:
+      - name: "Checkout repository"
+        uses: actions/checkout@v2
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: "Install dependencies"
+        run: npm install
+
+      - name: "Build application"
+        run: npm run build
+
+      - name: "Restore changes in json"
+        run: |
+          git restore package-lock.json
+
+      - name: "Set Git user name and email"
+        run: |
+          git config --local user.email "github-actions@github.com"
+          git config --local user.name "GitHub Actions"
+
+  create-github-release:
+    name: Create Github release document and publish to node
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    needs: build
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20.x
+
+      - name: Semantic Release and npm release
+        run: |
+          npm ci
+          npx semantic-release
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -9,7 +9,7 @@
 /coverage
 
 # production
-/build
+/dist
 
 # misc
 .DS_Store
@@ -22,4 +22,5 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
+/storybook-static
 *storybook.log

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/commit-msg

@@ -0,0 +1 @@
+npx --no -- commitlint --edit $1

.husky/pre-commit

@@ -0,0 +1 @@
+npm run lint-staged

README.md

@@ -1,14 +1,14 @@
 <h1 align="center">TextIgnite JS </h1><br><br>
 <p align="center">
-<a href="https://www.npmjs.com/package/react-text-igniter"><img src="https://img.shields.io/npm/v/react-text-igniter.svg?sanitize=true" alt="Version"></a>
-<a href="https://www.npmjs.com/package/react-text-igniter"><img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs"></a>
+<a href="https://www.npmjs.com/package/@mindfiredigital/react-text-igniter"><img src="https://img.shields.io/npm/v/@mindfiredigital/react-text-igniter.svg?sanitize=true" alt="Version"></a>
+<a href="https://www.npmjs.com/package/@mindfiredigital/react-text-igniter"><img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs"></a>
 </p>
 
 <br>
 
 <p align="center"> Experience a powerful and intuitive HTML Editor built with React.js. </p>
 
-The `react-text-igniter` is a tool that allows developers to integrate HTML Editor using React.
+The `@mindfiredigital/react-text-igniter` is a tool that allows developers to integrate HTML Editor using React.
 <br>
 
 ## Table of Contents
@@ -46,10 +46,10 @@ The `react-text-igniter` is a tool that allows developers to integrate HTML Edit
 
 ## Installation
 
-To install the `react-text-igniter` npm package in your project, use the following command:
+To install the `@mindfiredigital/react-text-igniter` npm package in your project, use the following command:
 
 ```bash
-npm install react-text-igniter
+npm install @mindfiredigital/react-text-igniter
 ```
 
 <br>
@@ -58,9 +58,8 @@ npm install react-text-igniter
 
 - **Initialization**: Initialize the HTML Editor in your project, specifying the container element where the editor will be embedded.
 
-
 ```javascript
-import { HtmlEditor } from "react-text-igniter";
+import { HtmlEditor } from "@mindfiredigital/react-text-igniter";
 import React,{useRef} from "react";
 
 export const App = () => {
@@ -78,9 +77,8 @@ const editorRef = useRef();
 
 - **GET HTML/JSON**: Geting HTML and JSON for the content of Editor.
 
-
 ```javascript
-import { HtmlEditor } from "react-text-igniter";
+import { HtmlEditor } from "@mindfiredigital/react-text-igniter";
 import React,{useRef} from "react";
 
 export const App = () => {
@@ -108,7 +106,7 @@ const editorRef = useRef();
 
 ## Contributing
 
-We welcome contributions from the community. If you'd like to contribute to the `react-document-editor` npm package, please follow our [Contributing Guidelines](CONTRIBUTING.md).
+We welcome contributions from the community. If you'd like to contribute to the `react-text-igniter` npm package, please follow our [Contributing Guidelines](CONTRIBUTING.md).
 <br>
 
 ## License

commitlint.config.js

@@ -0,0 +1 @@
+module.exports = { extends: ["@commitlint/config-conventional"] };

component/src/components/htmlEditor/Editor.jsx

@@ -18,18 +18,18 @@ const Editor = ({ height = "300px" }) => {
         ref={editorRef}
         contentEditable
         className="editor-content"
-        style={{ 
+        style={{
           minHeight: height,
           padding: "10px",
-          overflowY: "auto"
+          overflowY: "auto",
         }}
       />
-      
+
       <div className="editor-footer">
         <span>Words: {wordCount}</span> | <span>Chars: {charCount}</span>
       </div>
     </>
   );
 };
 
-export default Editor;
+export default Editor;

eslint.config.mjs

@@ -0,0 +1,9 @@
+import globals from "globals";
+import pluginReact from "eslint-plugin-react";
+
+
+export default [
+  {files: ["**/*.{js,mjs,cjs,jsx}"]},
+  {languageOptions: { globals: globals.browser }},
+  pluginReact.configs.flat.recommended,
+];