Skip to content

Commit 4d73517

Browse files
aarathyKeyvalueaarathyKeyvalue
authored
Changed style customisation props, added GitHub action
2 parents 24787a8 + ad7b1d1 commit 4d73517

File tree

13 files changed

+287
-140
lines changed

13 files changed

+287
-140
lines changed

‎.eslintrc‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"ignorePatterns": ["**/*.d.ts", "node_modules/", "src/stories", "src/tests"],
2+
"ignorePatterns": ["**/*.d.ts", "node_modules/", "src/stories", "src/tests", "webpack.config.js"],
33
"extends": [
44
"eslint:recommended",
55
"plugin:@typescript-eslint/recommended",

‎.github/workflows/test-and-build.yml‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
name: Test and Build
2+
3+
on:
4+
workflow_dispatch:
5+
6+
jobs:
7+
test-and-build:
8+
runs-on: ubuntu-latest
9+
strategy:
10+
matrix:
11+
node-version: [16.x, 14.x]
12+
steps:
13+
- name: Checkout code
14+
uses: actions/checkout@v2
15+
with:
16+
ref: ${{ github.event.pull_request.head.sha }}
17+
fetch-depth: 0
18+
19+
- name: Use Node.js ${{ matrix.node-version }}
20+
uses: actions/setup-node@v2
21+
with:
22+
node-version: ${{ matrix.node-version }}
23+
24+
- name: Install dependencies
25+
run: npm install
26+
27+
- name: Run tests
28+
run: npm run test
29+
30+
- name: Build
31+
run: npm run build

‎.github/workflows/update-and-publish.yml‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
name: Update version and Publish Package
2+
3+
on:
4+
workflow_dispatch:
5+
inputs:
6+
ReleaseType:
7+
description: 'Release Type'
8+
required: true
9+
default: 'warning'
10+
type: choice
11+
options:
12+
- Major
13+
- Feature
14+
- Bug
15+
16+
jobs:
17+
update-and-publish:
18+
runs-on: ubuntu-latest
19+
steps:
20+
- name: Checkout code
21+
uses: actions/checkout@v2
22+
23+
- name: Setup Node.js
24+
uses: actions/setup-node@v2
25+
with:
26+
node-version: 16.x
27+
28+
- name: Install dependencies
29+
run: npm install
30+
31+
- name: Run tests
32+
run: npm run test
33+
34+
- name: Build Package
35+
run: npm run build
36+
37+
- name: 'Set release type : ${{ inputs.ReleaseType }}'
38+
id: release_type
39+
uses: ASzc/change-string-case-action@v5
40+
with:
41+
string: ${{ inputs.ReleaseType }}
42+
43+
- name: Extract Current Branch and Validate
44+
id: get_current_branch
45+
shell: bash
46+
run: |
47+
BRANCH="${GITHUB_REF#refs/heads/}"
48+
if [ "$BRANCH" == 'main' ]
49+
then
50+
echo "Branch validation Successful"
51+
else
52+
echo "Releases only taken from main branch"
53+
exit 1
54+
fi
55+
56+
- name: Get Latest version from package.json
57+
run: |
58+
# Get the latest version from package.json
59+
LATEST_VERSION=$(node -p "require('./package.json').version")
60+
61+
# Output the latest version as a workflow env
62+
echo "latest_version=$LATEST_VERSION" >> $GITHUB_ENV
63+
64+
- name: Get new version
65+
id: get_next_version
66+
uses: christian-draeger/increment-semantic-version@1.0.3
67+
with:
68+
current-version: ${{ env.latest_version }}
69+
version-fragment: ${{ steps.release_type.outputs.lowercase }}
70+
71+
- name: Update version in package.json and package-lock.json
72+
run: |
73+
OLD_VERSION=${{ env.latest_version }}
74+
NEW_VERSION=${{ steps.get_next_version.outputs.next-version }}
75+
76+
npm version $NEW_VERSION --no-git-tag-version
77+
git config user.name github-actions
78+
git config user.email github-actions@github.com
79+
git add package.json package-lock.json
80+
git commit -m "Bump version from $OLD_VERSION to $NEW_VERSION"
81+
git push origin HEAD:main
82+
83+
- name: Publish package
84+
uses: JS-DevTools/npm-publish@v1
85+
with:
86+
token: ${{ secrets.NPM_AUTH_TOKEN }}
87+
if: success()
88+
89+
- name: Revert package.json and package-lock.json
90+
run: |
91+
# Revert package.json and package-lock.json to the previous version
92+
npm version ${{ env.latest_version }} --no-git-tag-version
93+
git commit -am "Revert to version ${{ env.latest_version }}"
94+
git push origin HEAD:main
95+
if: failure()
96+
97+
- name: Create GitHub release
98+
if: success()
99+
uses: actions/create-release@v1
100+
env:
101+
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
102+
with:
103+
tag_name: v${{ steps.get_next_version.outputs.next-version }}
104+
release_name: Release v${{ steps.get_next_version.outputs.next-version }}
105+
# body: Release ${{ env.NEW_VERSION }}
106+
draft: false
107+
prerelease: false

‎README.md‎

Lines changed: 75 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,17 @@
11

22
# React Vertical Stepper
3-
<!--
4-
<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> -->
53

6-
7-
>A fully customizable ready to use vertical stepper UI package.
4+
<!--
5+
<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> -->
86

7+
>A fully customizable ready to use vertical stepper UI package.
98
109
## Installation
1110

12-
1311
```
1412
npm install react-vertical-stepper
1513
```
14+
1615
You’ll need to install React separately since it isn't included in the package.
1716

1817
## Usage
@@ -29,14 +28,13 @@ import Stepper from 'react-vertical-stepper';
2928
Here the steps array is an array of objects with basic keys like
3029

3130
- `label` - a string that can be shown as step label title to your step indicator
32-
3331
- `description` - a string that can be show as step description below the step label
34-
3532
- `status` - can be provided with any of `visited`, `unvisited`, `completed`. Will be required if you are using default styles.
3633

3734
> You can also add other keys to the step object and other statuses like `skipped` for different customizations as per requirements
3835
3936
An example for steps array is shown below:
37+
4038
```
4139
stepsArray = [
4240
{
@@ -61,7 +59,7 @@ You can use `onStepClick` event handler which fires each time you click on a ste
6159
const [activeStepIndex, setActiveStepIndex] = useState(0);
6260
6361
const handleStepClick = (step, stepIndex) => {
64-
setActiveStepIndex(stepIndex);S
62+
setActiveStepIndex(stepIndex);
6563
};
6664
6765
<Stepper
@@ -86,57 +84,57 @@ You can also customize the step indicator bubble with your own DOM element using
8684
Props that can be passed to the component are listed below:
8785

8886
<table>
89-
<thead>
90-
<tr>
91-
<th>Prop</th>
92-
<th>Description</th>
93-
<th>Default</th>
94-
</tr>
95-
</thead>
96-
<tbody>
97-
<tr>
98-
<td><code><b>steps:</b> object[]</code></td>
99-
<td>
100-
An array of step objects to render.
101-
</td>
102-
<td><code>undefined</code></td>
103-
</tr>
104-
<tr>
105-
<td><code><b>currentIndex:</b> number</code></td>
106-
<td>
107-
The index of current active step.
108-
</td>
109-
<td>0</td>
110-
</tr>
111-
<tr>
112-
<td><code><b>onStepClick?:</b> (step: object, stepIndex: number): void</code></td>
113-
<td>
114-
A step click handler that fires each time you click on a step, its label or its description.
115-
</td>
116-
<td><code>undefined</code></td>
117-
</tr>
118-
<tr>
119-
<td><code><b>renderBubble?:</b> (step: object, stepIndex: number): ReactElement</code></td>
120-
<td>
121-
A render function to customize your step indicator with your own element.
122-
</td>
123-
<td><code>undefined</code></td>
124-
</tr>
125-
<tr>
126-
<td><code><b>labelPosition?:</b> 'left' | 'right'</code></td>
127-
<td>
128-
Allows you to align step label and description to either <code>left</code> or <code>right</code> of step indicator
129-
</td>
130-
<td><code>right</code></td>
131-
</tr>
132-
<tr>
133-
<td><code><b>styles?:</b> object</code></td>
134-
<td>
135-
Provides you with a bunch of callback functions to override the default styles.
136-
</td>
137-
<td><code>undefined</code></td>
138-
</tr>
139-
</tbody>
87+
<thead>
88+
<tr>
89+
<th>Prop</th>
90+
<th>Description</th>
91+
<th>Default</th>
92+
</tr>
93+
</thead>
94+
<tbody>
95+
<tr>
96+
<td><code><b>steps:</b> object[]</code></td>
97+
<td>
98+
An array of step objects to render.
99+
</td>
100+
<td><code>undefined</code></td>
101+
</tr>
102+
<tr>
103+
<td><code><b>currentIndex:</b> number</code></td>
104+
<td>
105+
The index of current active step.
106+
</td>
107+
<td>0</td>
108+
</tr>
109+
<tr>
110+
<td><code><b>onStepClick?:</b> (step: object, stepIndex: number): void</code></td>
111+
<td>
112+
A step click handler that fires each time you click on a step, its label or its description.
113+
</td>
114+
<td><code>undefined</code></td>
115+
</tr>
116+
<tr>
117+
<td><code><b>renderBubble?:</b> (step: object, stepIndex: number): ReactElement</code></td>
118+
<td>
119+
A render function to customize your step indicator with your own element.
120+
</td>
121+
<td><code>undefined</code></td>
122+
</tr>
123+
<tr>
124+
<td><code><b>labelPosition?:</b> 'left' | 'right'</code></td>
125+
<td>
126+
Allows you to align step label and description to either <code>left</code> or <code>right</code> of step indicator
127+
</td>
128+
<td><code>right</code></td>
129+
</tr>
130+
<tr>
131+
<td><code><b>styles?:</b> object</code></td>
132+
<td>
133+
Provides you with a bunch of callback functions to override the default styles.
134+
</td>
135+
<td><code>undefined</code></td>
136+
</tr>
137+
</tbody>
140138
</table>
141139

142140
## Style Customizations
@@ -148,27 +146,25 @@ the below code shows all the overridable styles:
148146
steps={stepsArray}
149147
currentStepIndex={currentStepIndex}
150148
styles={{
151-
getLabelTitleStyles: (step, stepIndex) => ({...styles}),
152-
getActiveLabelTitleStyles: (step, stepIndex) => ({...styles}),,
153-
getLabelDescriptionStyles: (step, stepIndex) => ({...styles}),,
154-
getActiveLabelDescriptionStyles: (step, stepIndex) => ({...styles}),,
155-
getLineSeparatorStyles: (step, stepIndex) => ({...styles}),,
156-
getInactiveLineSeparatorStyles: (step, stepIndex) => ({...styles}),,
157-
getBubbleStyles: (step, stepIndex) => ({...styles}),,
158-
getActiveBubbleStyles: (step, stepIndex) => ({...styles}),,
159-
getInActiveBubbleStyles: (step, stepIndex) => ({...styles}),,
149+
LabelTitle: (step, stepIndex) => ({...styles}),
150+
ActiveLabelTitle: (step, stepIndex) => ({...styles}),
151+
LabelDescription: (step, stepIndex) => ({...styles}),
152+
ActiveLabelDescription: (step, stepIndex) => ({...styles}),
153+
LineSeparator: (step, stepIndex) => ({...styles}),
154+
InactiveLineSeparator: (step, stepIndex) => ({...styles}),
155+
Bubble: (step, stepIndex) => ({...styles}),
156+
ActiveBubble: (step, stepIndex) => ({...styles}),
157+
InActiveBubble: (step, stepIndex) => ({...styles}),
160158
}}
161159
/>
162160
```
163161

164-
> All the `getXXStyles` functions can be passed optionally using `styles` prop and can be used to override specific css styles to the respective elements.
165-
166-
- `getLabelTitleStyles` - overrides the step label style
167-
- `getActiveLabelTitleStyles` - overrides the step label style of current active step
168-
- `getLabelDescriptionStyles` - overrides the step description style
169-
- `getActiveLabelDescriptionStyles` - overrides the step description style of current active step
170-
- `getLineSeparatorStyles` - overrides default step connector line styles
171-
- `getInactiveLineSeparatorStyles` - overrides styles of step connector line after current active step
172-
- `getBubbleStyles` - overrides default styles of step indicator
173-
- `getActiveBubbleStyles` - overrides default styles of step indicator of current active step
174-
- `getInActiveBubbleStyles` - overrides default styles of step indicator that has `unvisited` step status
162+
- `LabelTitle` - overrides the step label style
163+
- `ActiveLabelTitle` - overrides the step label style of current active step
164+
- `LabelDescription` - overrides the step description style
165+
- `ActiveLabelDescription` - overrides the step description style of current active step
166+
- `LineSeparator` - overrides default step connector line styles
167+
- `InactiveLineSeparator` - overrides styles of step connector line after current active step
168+
- `Bubble` - overrides default styles of step indicator
169+
- `ActiveBubble` - overrides default styles of step indicator of current active step
170+
- `InActiveBubble` - overrides default styles of step indicator that has `unvisited` step status

‎package.json‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@
99
"start": "webpack watch && tsc",
1010
"build": "webpack && tsc",
1111
"eslint": "eslint src",
12-
"build:demo": "webpack --config webpack.config.demo.js",
1312
"test": "jest --config ./jest.config.js",
1413
"coverage": "npm run test -- --coverage",
1514
"trypublish": "npm publish || true",
@@ -19,14 +18,13 @@
1918
"engines": {
2019
"node": ">=10"
2120
},
22-
"appRoot": "src",
2321
"repository": {
2422
"type": "github",
25-
"url": "https://github.com/aarathyKeyvalue/vertical-stepper"
23+
"url": "https://github.com/KeyValueSoftwareSystems/react-vertical-stepper"
2624
},
2725
"author": "Keyvalue",
2826
"license": "",
29-
"homepage": "https://github.com/aarathyKeyvalue/vertical-stepper",
27+
"homepage": "https://github.com/KeyValueSoftwareSystems/react-vertical-stepper",
3028
"keywords": [
3129
"library",
3230
"starter",

0 commit comments

Comments
 (0)