Readme file creation

.eslintrc

@@ -23,7 +23,13 @@
     "@typescript-eslint/explicit-function-return-type": "error",
     "react/prop-types": "warn",
     "indent": ["error", 2],
-    "arrow-body-style": ["error", "as-needed"]
+    "arrow-body-style": ["error", "as-needed"],
+    "no-trailing-spaces":"error",
+    "comma-dangle":"error",
+    "default-case":"error",
+    "block-spacing": "error",
+    "max-len":["warn", 150],
+    "space-before-blocks":"error"
   },
   "settings": {
     "react": {

.storybook/main.js

@@ -1,3 +1,4 @@
+const path = require('path');
 module.exports = {
   "stories": [
     "../src/**/*.stories.mdx",
@@ -11,5 +12,15 @@ module.exports = {
   "framework": "@storybook/react",
   "core": {
     "builder": "@storybook/builder-webpack5"
+  },
+  "webpackFinal": async (config) => {
+   config.module.rules.push({
+      rules: [{ 
+        test: /\.scss$/,
+        use: ['style-loader', 'css-loader', 'sass-loader'],
+        include: path.resolve(__dirname, '../')
+      }]
+    });
+    return config;
   }
 }

.storybook/preview.js

@@ -1,3 +1,4 @@
+// import './main.css';
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
   controls: {

README.md

@@ -1,67 +1,174 @@
- <div align="center">
- <img align="center" width="230" src="https://i.imgur.com/iHgtvmg.png" />
-  <h2>Typescript Library Boilerplate Basic</h2>
-  <blockquote>Minimal Library Starter Kit for your Typescript projects</blockquote>
-
- <a href="https://www.npmjs.com/package/@hodgef/ts-library-boilerplate-basic"><img src="https://badgen.net/npm/v/@hodgef/ts-library-boilerplate-basic?color=blue" alt="npm version"></a> <a href="https://github.com/hodgef/ts-library-boilerplate"><img src="https://img.shields.io/github/last-commit/hodgef/ts-library-boilerplate" alt="latest commit"></a> <a href="https://github.com/hodgef/ts-library-boilerplate-basic/actions"><img alt="Build Status" src="https://github.com/hodgef/ts-library-boilerplate-basic/workflows/Build/badge.svg?color=green" /></a> <a href="https://github.com/hodgef/ts-library-boilerplate-basic/actions"> <img alt="Publish Status" src="https://github.com/hodgef/ts-library-boilerplate-basic/workflows/Publish/badge.svg?color=green" /></a>
 
-<strong>For a plain Javascript alternative, check out [js-library-boilerplate-basic](https://github.com/hodgef/js-library-boilerplate-basic).</strong>
+# React Vertical Stepper
+<!-- 
+<a  href="https://www.npmjs.com/package/@hodgef/ts-library-boilerplate-basic"><img  src="https://badgen.net/npm/v/@hodgef/ts-library-boilerplate-basic?color=blue"  alt="npm version"></a>  <a  href="https://github.com/hodgef/ts-library-boilerplate"><img  src="https://img.shields.io/github/last-commit/hodgef/ts-library-boilerplate"  alt="latest commit"></a>  <a  href="https://github.com/hodgef/ts-library-boilerplate-basic/actions"><img  alt="Build Status"  src="https://github.com/hodgef/ts-library-boilerplate-basic/workflows/Build/badge.svg?color=green"  /></a>  <a  href="https://github.com/hodgef/ts-library-boilerplate-basic/actions">  <img  alt="Publish Status"  src="https://github.com/hodgef/ts-library-boilerplate-basic/workflows/Publish/badge.svg?color=green"  /></a> -->
 
-</div>
+
+>A fully customizable ready to use vertical stepper UI package.
 
-## ⭐️ Features
 
-- Webpack 5
-- Babel 7
-- Hot reloading (`npm start`)
-- Automatic Types file generation (index.d.ts)
-- UMD exports, so your library works everywhere.
-- Jest unit testing
-- Customizable file headers for your build [(Example 1)](https://github.com/hodgef/ts-library-boilerplate-basic/blob/master/build/index.js) [(Example2)](https://github.com/hodgef/ts-library-boilerplate-basic/blob/master/build/css/index.css)
-- Daily [dependabot](https://dependabot.com) dependency updates
+## Installation
 
-## 📦 Getting Started
 
 ```
-git clone https://github.com/hodgef/ts-library-boilerplate-basic.git myLibrary
-npm install
+npm install react-vertical-stepper
 ```
+You’ll need to install React separately since it isn't included in the package.
 
-## 💎 Customization
+## Usage
 
-> Before shipping, make sure to:
+React Vertical Stepper can run in a very basic mode by just providing the `steps` and `currentStepIndex` props like this:
+```
+import Stepper from 'react-vertical-stepper';
+
+<Stepper
+  steps={stepsArray}
+  currentStepIndex={currentStepIndex}
+/>
+```
+Here the steps array is an array of objects with basic keys like
 
-1. Edit `LICENSE` file
-2. Edit `package.json` information (These will be used to generate the headers for your built files)
-3. Edit `library: "MyLibrary"` with your library's export name in `./webpack.config.js`
+-  `label` - a string that can be shown as step label title to your step indicator
 
-## 🚀 Deployment
+-  `description` - a string that can be show as step description below the step label
 
-1. `npm publish`
-2. Your users can include your library as usual
+-  `status` - can be provided with any of `visited`, `unvisited`, `completed`. Will be required if you are using default styles.
 
-### npm
+> You can also add other keys to the step object and other statuses like `skipped` for different customizations as per requirements
 
+An example for steps array is shown below:
 ```
-import MyLibrary from 'my-library';
-const libraryInstance = new MyLibrary();
-...
+stepsArray = [
+  {
+    label: 'Step 1',
+    description: 'This is Step 1',
+    status: 'visited'
+  },
+  {
+    label: 'Step 2',
+    description: 'This is Step 2',
+    status: 'unvisited'
+  },
+  {
+    label: 'Step 3',
+    description: 'This is Step 3',
+    status: 'completed'
+  }
+];
 ```
+You can use `onStepClick` event handler which fires each time you click on a step or its label or description
+```
+const [activeStepIndex, setActiveStepIndex] = useState(0);
 
-### self-host/cdn
+const handleStepClick = (step, stepIndex) => {
+  setActiveStepIndex(stepIndex);S
+};
 
+<Stepper
+  steps={stepsArray}
+  currentStepIndex={activeStepIndex}
+  onStepClick={handleStepClick}
+/>
 ```
-<script src="build/index.js"></script>
-
-const MyLibrary = window.MyLibrary.default;
-const libraryInstance = new MyLibrary();
-...
+You can also customize the step indicator bubble with your own DOM element using the `renderBubble` prop
+```
+<Stepper
+  steps={stepsArray}
+  currentStepIndex={currentStepIndex}
+  renderBubble={(step, stepIndex) => (<div key={stepIndex}>{step.label}</div>)}
+/>
 ```
 
-## ✅ Libraries built with this boilerplate
-
-> Made a library using this starter kit? Share it here by [submitting a pull request](https://github.com/hodgef/ts-library-boilerplate-basic/pulls)!
+>Note: The `step` param provided by the `renderBubble` callback is the same object you pass as array item in `steps` prop.
+
+## Props
+
+Props that can be passed to the component are listed below:
+
+<table>
+    <thead>
+        <tr>
+            <th>Prop</th>
+            <th>Description</th>
+            <th>Default</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td><code><b>steps:</b> object[]</code></td>
+            <td>
+                 An array of step objects to render.
+            </td>
+            <td><code>undefined</code></td>
+        </tr>
+        <tr>
+            <td><code><b>currentIndex:</b> number</code></td>
+            <td>
+                The index of current active step.
+            </td>
+            <td>0</td>
+        </tr>
+        <tr>
+            <td><code><b>onStepClick?:</b> (step: object, stepIndex: number): void</code></td>
+            <td>
+              A step click handler that fires each time you click on a step, its label or its description.
+            </td>
+            <td><code>undefined</code></td>
+        </tr>
+        <tr>
+            <td><code><b>renderBubble?:</b> (step: object, stepIndex: number): ReactElement</code></td>
+            <td>
+               A render function to customize your step indicator with your own element.
+            </td>
+            <td><code>undefined</code></td>
+        </tr>
+        <tr>
+            <td><code><b>labelPosition?:</b> 'left' | 'right'</code></td>
+            <td>
+              Allows you to align step label and description to either <code>left</code> or <code>right</code> of step indicator
+            </td>
+            <td><code>right</code></td>
+        </tr>
+        <tr>
+            <td><code><b>styles?:</b> object</code></td>
+            <td>
+               Provides you with a bunch of callback functions to override the default styles.
+            </td>
+            <td><code>undefined</code></td>
+        </tr>
+    </tbody>
+</table>
+
+## Style Customizations
+
+All the default styles provided by this package are overridable using the `style` prop.
+the below code shows all the overridable styles:
+```
+<Stepper
+  steps={stepsArray}
+  currentStepIndex={currentStepIndex}
+  styles={{
+    getLabelTitleStyles: (step, stepIndex) => ({...styles}),
+    getActiveLabelTitleStyles: (step, stepIndex) => ({...styles}),,
+    getLabelDescriptionStyles: (step, stepIndex) => ({...styles}),,
+    getActiveLabelDescriptionStyles: (step, stepIndex) => ({...styles}),,
+    getLineSeparatorStyles: (step, stepIndex) => ({...styles}),,
+    getInactiveLineSeparatorStyles: (step, stepIndex) => ({...styles}),,
+    getBubbleStyles: (step, stepIndex) => ({...styles}),,
+    getActiveBubbleStyles: (step, stepIndex) => ({...styles}),,
+    getInActiveBubbleStyles: (step, stepIndex) => ({...styles}),,
+  }}
+/>
+```
 
-- [simple-keyboard](https://github.com/hodgef/simple-keyboard) - Javascript Virtual Keyboard
-- [react-simple-keyboard](https://github.com/hodgef/react-simple-keyboard) - React Virtual Keyboard
-- [simple-keyboard-layouts](https://github.com/hodgef/simple-keyboard-layouts) - Keyboard layouts for simple-keyboard
+> All the `getXXStyles` functions can be passed optionally using `styles` prop and can be used to override specific css styles to the respective elements.
+
+-  `getLabelTitleStyles` - overrides the step label style
+-  `getActiveLabelTitleStyles` - overrides the step label style of current active step
+-  `getLabelDescriptionStyles` - overrides the step description style
+-  `getActiveLabelDescriptionStyles` - overrides the step description style of current active step
+-  `getLineSeparatorStyles` - overrides default step connector line styles
+-  `getInactiveLineSeparatorStyles` - overrides styles of step connector line after current active step
+-  `getBubbleStyles` - overrides default styles of step indicator
+-  `getActiveBubbleStyles` - overrides default styles of step indicator of current active step
+-  `getInActiveBubbleStyles` - overrides default styles of step indicator that has `unvisited` step status

global.d.ts

@@ -1,4 +1,8 @@
 declare module "*.svg" {
     const content: string;
     export default content;
+}
+declare module '*.scss' {
+    const content: Record<string, string>;
+    export default content;
 }

jest.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+    // Other configuration above...
+
+    // Add the next three options if using TypeScript
+    moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json"],
+    preset: "ts-jest",
+    roots: ["<rootDir>/src"],
+    transform: {
+        "^.+\\.[t|j]sx?$": "ts-jest",
+        "^.+\\.svg?$": "<rootDir>/transform.js",
+        "^.+\\.scss?$": "<rootDir>/transform.js"
+    },
+    "testEnvironment": "jsdom",
+    testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
+};