Skip to content

Commit 0621e9d

Browse files
angular-bootstrapangular-bootstrap
committed
added configuration
1 parent 353ca8d commit 0621e9d

5 files changed

Lines changed: 300 additions & 18 deletions

File tree

‎.github/workflows/ci.yml‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
name: CI (non-main)
2+
3+
on:
4+
push:
5+
branches-ignore:
6+
- main
7+
pull_request:
8+
branches:
9+
- '**'
10+
11+
jobs:
12+
build-test:
13+
runs-on: ubuntu-latest
14+
15+
steps:
16+
- name: Checkout
17+
uses: actions/checkout@v4
18+
19+
- name: Setup Node.js
20+
uses: actions/setup-node@v4
21+
with:
22+
node-version: '20'
23+
registry-url: 'https://registry.npmjs.org'
24+
25+
- name: Install dependencies
26+
run: npm ci
27+
28+
- name: Run tests
29+
run: npm test
30+
31+
- name: Build library
32+
run: npm run build

‎.github/workflows/release.yml‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
name: Release (main)
2+
3+
on:
4+
push:
5+
branches:
6+
- main
7+
8+
jobs:
9+
build-test-release:
10+
runs-on: ubuntu-latest
11+
12+
steps:
13+
- name: Checkout
14+
uses: actions/checkout@v4
15+
with:
16+
fetch-depth: 0
17+
18+
- name: Setup Node.js
19+
uses: actions/setup-node@v4
20+
with:
21+
node-version: '20'
22+
registry-url: 'https://registry.npmjs.org'
23+
24+
- name: Install dependencies
25+
run: npm ci
26+
27+
- name: Run tests
28+
run: npm test
29+
30+
- name: Build library
31+
run: npm run build:release
32+
33+
- name: Create or update git tag for package version
34+
env:
35+
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
36+
run: |
37+
VERSION=$(node -p "require('./package.json').version")
38+
TAG="v${VERSION}"
39+
echo "Tagging release as ${TAG}"
40+
# Create or update lightweight tag locally
41+
git tag -f "${TAG}"
42+
# Push tag to origin (may update existing tag)
43+
git push origin "refs/tags/${TAG}" --force
44+
45+
- name: Publish to npm
46+
env:
47+
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
48+
run: npm publish

‎README.md‎

Lines changed: 206 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,219 @@
1-
# @ngbootstrap (standalone library)
1+
# @ngbootstrap
22

3-
This folder now contains everything needed to build and publish the `@ngbootstrap`
4-
Angular library outside of the Nx workspace. It uses `ng-packagr` directly, so you
5-
can copy the folder into its own repository and continue working without Nx.
3+
Angular UI library providing datagrid, drag‑and‑drop, pagination, and stepper components with Bootstrap‑friendly styling.
64

7-
## Local development
5+
## Features
6+
7+
- Datagrid – sortable, filterable, paginated, editable table with export (PDF/Excel) support and accessible templates.
8+
- Drag & drop – lightweight list and item directives with keyboard‑friendly a11y helpers.
9+
- Pagination – standalone Bootstrap‑styled pagination component.
10+
- Stepper – horizontal/vertical stepper with custom labels, error states, theming hooks, and keyboard support.
11+
- Angular + Bootstrap first – built for modern Angular (v17–20) and works with plain Bootstrap CSS; Material/Tailwind can be layered via custom styles.
12+
13+
## Installation
14+
15+
```bash
16+
npm install @ngbootstrap
17+
```
18+
19+
Make sure your app:
20+
21+
- Uses Angular 17–20.
22+
- Includes Bootstrap CSS (for example in `angular.json` or global styles):
23+
24+
```css
25+
@import 'bootstrap/dist/css/bootstrap.min.css';
26+
```
27+
28+
## Usage overview
29+
30+
All components are standalone, so you import them directly into your feature components.
31+
32+
### Datagrid
33+
34+
```ts
35+
import { Component } from '@angular/core';
36+
import { Datagrid } from '@ngbootstrap/datagrid';
37+
38+
interface User {
39+
id: number;
40+
name: string;
41+
email: string;
42+
}
43+
44+
@Component({
45+
standalone: true,
46+
selector: 'app-users',
47+
imports: [Datagrid],
48+
template: `
49+
<ngb-datagrid
50+
[columns]="columns"
51+
[data]="rows"
52+
[enableSorting]="true"
53+
[enableFiltering]="true"
54+
[enablePagination]="true"
55+
[pageSize]="10"
56+
(rowSave)="onRowSave($event)"
57+
></ngb-datagrid>
58+
`,
59+
})
60+
export class UsersComponent {
61+
columns = [
62+
{ field: 'id', header: 'ID', sortable: true },
63+
{ field: 'name', header: 'Name', sortable: true, filterable: true },
64+
{ field: 'email', header: 'Email', sortable: true, filterable: true, type: 'email' },
65+
];
66+
67+
rows: User[] = [
68+
{ id: 1, name: 'Alice', email: 'alice@example.com' },
69+
{ id: 2, name: 'Bob', email: 'bob@example.com' },
70+
];
71+
72+
onRowSave(evt: { original: User; updated: User }) {
73+
// persist the update
74+
}
75+
}
76+
```
77+
78+
Key datagrid capabilities:
79+
80+
- Sorting (`enableSorting`, `sortChange`).
81+
- Column/global filtering (`enableFiltering`, `enableGlobalFilter`, `filtersChange`).
82+
- Pagination (`enablePagination`, `pageSize`, `pageChange`).
83+
- Inline add/edit/delete (`enableAdd`, `enableEdit`, `enableDelete`, `rowAdd`, `rowSave`, `rowDelete`).
84+
- Export to PDF/Excel via `exportOptions`.
85+
86+
### Pagination
87+
88+
```ts
89+
import { Component } from '@angular/core';
90+
import { NgbPaginationComponent } from '@ngbootstrap/pagination';
91+
92+
@Component({
93+
standalone: true,
94+
selector: 'app-pager',
95+
imports: [NgbPaginationComponent],
96+
template: `
97+
<ngb-pagination
98+
[(page)]="page"
99+
[pageSize]="pageSize"
100+
[collectionSize]="total"
101+
(pageChange)="loadPage($event)"
102+
></ngb-pagination>
103+
`,
104+
})
105+
export class PagerComponent {
106+
page = 1;
107+
pageSize = 10;
108+
total = 250;
109+
110+
loadPage(p: number) {
111+
this.page = p;
112+
// fetch data for the page
113+
}
114+
}
115+
```
116+
117+
### Stepper
118+
119+
```ts
120+
import { Component } from '@angular/core';
121+
import { NgbStepperComponent } from '@ngbootstrap/stepper';
122+
import { NgbStepperStep } from '@ngbootstrap/stepper';
123+
124+
@Component({
125+
standalone: true,
126+
selector: 'app-wizard',
127+
imports: [NgbStepperComponent],
128+
template: `
129+
<ngb-stepper
130+
[steps]="steps"
131+
[(selectedIndex)]="index"
132+
orientation="horizontal"
133+
[allowRevisit]="false"
134+
theme="bootstrap"
135+
(selectionChange)="onSelectionChange($event)"
136+
>
137+
<ng-template #stepContent let-index="index">
138+
<ng-container [ngSwitch]="index">
139+
<div *ngSwitchCase="0">Account step</div>
140+
<div *ngSwitchCase="1">Profile step</div>
141+
<div *ngSwitchCase="2">Confirm step</div>
142+
</ng-container>
143+
</ng-template>
144+
</ngb-stepper>
145+
`,
146+
})
147+
export class WizardComponent {
148+
index = 0;
149+
150+
steps: NgbStepperStep[] = [
151+
{ id: 'account', label: 'Account' },
152+
{ id: 'profile', label: 'Profile' },
153+
{ id: 'confirm', label: 'Confirm', optional: true },
154+
];
155+
156+
onSelectionChange(e: { previousIndex: number; currentIndex: number }) {
157+
// analytics, autosave, etc.
158+
}
159+
}
160+
```
161+
162+
Stepper highlights:
163+
164+
- Horizontal/vertical variants via `orientation`.
165+
- Custom labels with the `ngbStepLabel` directive.
166+
- Label and content positioning (`labelPosition`, `contentPosition`).
167+
- Error states and messages (`errorMessage` on steps).
168+
- Controlled navigation (`allowRevisit`, `next()`, `prev()`, `reset()` and events).
169+
- Theming hooks via `theme` and CSS classes (`bootstrap`, `material`, `tailwind`).
170+
171+
### Drag & drop
172+
173+
```ts
174+
import { Component } from '@angular/core';
175+
import { DndListDirective, DndItemDirective } from '@ngbootstrap/drag-drop';
176+
177+
@Component({
178+
standalone: true,
179+
selector: 'app-drag-list',
180+
imports: [DndListDirective, DndItemDirective],
181+
template: `
182+
<ul dndList [dndListData]="items">
183+
<li *ngFor="let item of items" dndItem [dndItemData]="item">
184+
{{ item }}
185+
</li>
186+
</ul>
187+
`,
188+
})
189+
export class DragListComponent {
190+
items = ['One', 'Two', 'Three'];
191+
}
192+
```
193+
194+
Refer to the source under `src/drag-drop` and `src/datagrid`/`src/stepper` for full API details until a dedicated docs site is added.
195+
196+
## Development
197+
198+
Local setup:
8199

9200
```bash
10-
cd ngbootstrap
11201
npm install
12202
npm run lint
203+
npm test
13204
npm run build
14205
```
15206

16-
- The build artefacts end up in `ngbootstrap/dist/ngbootstrap`.
17-
- `npm run test` executes the Jest setup provided by `jest-preset-angular`.
207+
- Build artefacts go to `dist/`.
208+
- Tests are powered by Jest + `jest-preset-angular`.
18209

19-
## Publishing
210+
## Releasing
20211

21-
After running `npm run build`, publish the generated package:
212+
Releases are automated via GitHub Actions:
213+
214+
- Non‑`main` branches:
215+
- `.github/workflows/ci.yml` runs install, tests, build only.
216+
- `main` branch:
217+
- `.github/workflows/release.yml` bumps the patch version (`npm run build:release`), tags the commit as `vX.Y.Z`, and publishes to npm using `NPM_TOKEN` from repository secrets.
22218

23-
```bash
24-
cd dist/ngbootstrap
25-
npm publish --access public
26-
```
27219

28-
Feel free to rename the package in `package.json` if you plan to publish under
29-
a different scope.

‎ng-package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"$schema": "./node_modules/ng-packagr/ng-package.schema.json",
3-
"dest": "../ngbootstrap-workspace/dist/@ngbootstrap",
3+
"dest": "./dist/@ngbootstrap",
44
"lib": {
55
"entryFile": "src/index.ts"
66
},

‎package.json‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,18 @@
11
{
22
"name": "@ngbootstrap",
33
"version": "0.0.1",
4-
"description": "Angular datagrid and drag-drop widgets packaged as a standalone library.",
4+
"description": "Angular UI library providing datagrid, drag-and-drop, pagination, and stepper components with Bootstrap-friendly styling.",
5+
"author": {
6+
"name": "Harmeet Singh"
7+
},
8+
"repository": {
9+
"type": "git",
10+
"url": "git+https://github.com/you-know-nothing-h/ngbootstrap.git"
11+
},
12+
"bugs": {
13+
"url": "https://github.com/you-know-nothing-h/ngbootstrap/issues"
14+
},
15+
"homepage": "https://github.com/you-know-nothing-h/ngbootstrap#readme",
516
"license": "MIT",
617
"private": false,
718
"publishConfig": {
@@ -10,6 +21,7 @@
1021
"sideEffects": false,
1122
"scripts": {
1223
"build": "ng-packagr -p ng-package.json",
24+
"build:release": "npm version patch --no-git-tag-version && ng-packagr -p ng-package.json",
1325
"lint": "eslint \"src/**/*.{ts,html}\"",
1426
"test": "jest",
1527
"clean": "rimraf dist"

0 commit comments

Comments
 (0)