@keeper-security/keeper-js-ui 0.25.2 → 0.26.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +15 -0
- package/README.md +18 -21
- package/dist/index.cjs +6 -6
- package/dist/index.js +3222 -3236
- package/dist/style.css +1 -1
- package/dist/types/components/layout/box.d.ts +17 -3
- package/dist/types/components/layout/box.d.ts.map +1 -1
- package/dist/types/components/layout/flex.d.ts +22 -7
- package/dist/types/components/layout/flex.d.ts.map +1 -1
- package/dist/types/components/ui/button.d.ts.map +1 -1
- package/dist/types/components/ui/collapsible.d.ts +6 -0
- package/dist/types/components/ui/collapsible.d.ts.map +1 -0
- package/dist/types/components/ui/tabs.d.ts +8 -0
- package/dist/types/components/ui/tabs.d.ts.map +1 -0
- package/dist/types/components/ui/typography.d.ts +8 -2
- package/dist/types/components/ui/typography.d.ts.map +1 -1
- package/dist/types/icons/app-window-2-x.d.ts +3 -0
- package/dist/types/icons/app-window-2-x.d.ts.map +1 -0
- package/dist/types/icons/index.d.ts +1 -0
- package/dist/types/icons/index.d.ts.map +1 -1
- package/dist/types/lib/types.d.ts +1 -3
- package/dist/types/lib/types.d.ts.map +1 -1
- package/dist/types/tokens/typography.d.ts +7 -0
- package/dist/types/tokens/typography.d.ts.map +1 -1
- package/package.json +34 -26
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,20 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [0.26.0](https://github.com/Keeper-Security/keeper-js-ui/compare/v0.25.2...v0.26.0) (2026-06-09)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
### Features
|
|
7
|
+
|
|
8
|
+
* **Box:** accept any element type via `as` ([#588](https://github.com/Keeper-Security/keeper-js-ui/issues/588)) ([72d2881](https://github.com/Keeper-Security/keeper-js-ui/commit/72d2881e44fba7aa517b15154fbe316834ebf928))
|
|
9
|
+
* **Icon:** add AppWindow2XIcon to library ([#587](https://github.com/Keeper-Security/keeper-js-ui/issues/587)) ([7316bc4](https://github.com/Keeper-Security/keeper-js-ui/commit/7316bc4503b1be3a2d94543baea87c50ce25ad47))
|
|
10
|
+
* **Typography:** deprecate "default" size, add "md" alias ([#573](https://github.com/Keeper-Security/keeper-js-ui/issues/573)) ([c760368](https://github.com/Keeper-Security/keeper-js-ui/commit/c760368d7d887bd1ac083d1fb7e87bdbf13a0b7a))
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
### Bug Fixes
|
|
14
|
+
|
|
15
|
+
* **Button:** apply consistent 8px padding across all sizes ([#590](https://github.com/Keeper-Security/keeper-js-ui/issues/590)) ([c948488](https://github.com/Keeper-Security/keeper-js-ui/commit/c94848827ce24a0b8cd478bc6039de23cf77989f)), closes [#589](https://github.com/Keeper-Security/keeper-js-ui/issues/589)
|
|
16
|
+
* **deps:** move react/react-dom from dependencies to devDependencies ([f5c047b](https://github.com/Keeper-Security/keeper-js-ui/commit/f5c047b8683a18ee0411daded706b55e70d0dc11)), closes [#594](https://github.com/Keeper-Security/keeper-js-ui/issues/594)
|
|
17
|
+
|
|
3
18
|
## [0.25.2](https://github.com/Keeper-Security/keeper-js-ui/compare/v0.25.1...v0.25.2) (2026-05-18)
|
|
4
19
|
|
|
5
20
|
|
package/README.md
CHANGED
|
@@ -6,12 +6,10 @@ _React components built for accessibility, consistency, and speed._
|
|
|
6
6
|
|
|
7
7
|
- Terminal of your choice.
|
|
8
8
|
- [git](https://github.com/git-guides/install-git) - Type `git -v` into your terminal to verify.
|
|
9
|
-
- [Node.js v24](https://nodejs.org/en/download/package-manager) - Type `node -v` into your terminal to verify.
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
- [nvm](https://github.com/nvm-sh/nvm) - Manage multiple versions of node/npm. Type `nvm -v` into your terminal to verify.
|
|
14
|
-
- [VS Code](https://code.visualstudio.com/) - Popular code editor with a healthy ecosystem of [extensions](https://marketplace.visualstudio.com/VSCode)/plugins.
|
|
9
|
+
- [Node.js v24](https://nodejs.org/en/download/package-manager) - Type `node -v` into your terminal to verify. **Recommendation**: use [nvm](https://github.com/nvm-sh/nvm) to install and manage different versions of Node.
|
|
10
|
+
- [pnpm v11.4.0](https://pnpm.io/installation) - Type `pnpm -v` to verify. **Recommendation**: use [Corepack](https://pnpm.io/installation#using-corepack) that comes bundled with Node since `v16.13`:
|
|
11
|
+
1. `corepack enable pnpm`
|
|
12
|
+
2. `corepack prepare --activate`
|
|
15
13
|
|
|
16
14
|
## Getting Started
|
|
17
15
|
|
|
@@ -20,13 +18,13 @@ Git clone or [download](https://github.com/Keeper-Security/keeper-js-ui/archive/
|
|
|
20
18
|
Open a terminal from the root of the project and run:
|
|
21
19
|
|
|
22
20
|
```sh
|
|
23
|
-
|
|
21
|
+
pnpm ci
|
|
24
22
|
```
|
|
25
23
|
|
|
26
24
|
Views are rendered via [Storybook](https://storybook.js.org/). To see components in action and start making edits, simply run:
|
|
27
25
|
|
|
28
26
|
```sh
|
|
29
|
-
|
|
27
|
+
pnpm storybook
|
|
30
28
|
```
|
|
31
29
|
|
|
32
30
|
`ctrl + c` to stop the server.
|
|
@@ -45,7 +43,7 @@ The [src/](./src/) folder holds all component-related code.
|
|
|
45
43
|
- [src/hooks](./src/hooks/): React-specific [hooks](https://react.dev/reference/react/hooks).
|
|
46
44
|
- [src/lib/](./src/lib/): Internal utility/helper functions.
|
|
47
45
|
|
|
48
|
-
With [Storybook](https://storybook.js.org/) running (`
|
|
46
|
+
With [Storybook](https://storybook.js.org/) running (`pnpm storybook`), most edits are shown immediately upon saving without the need for browser refreshes or server restarts. Exceptions would be changes to infrastructure code like edits to Storybook itself.
|
|
49
47
|
|
|
50
48
|
### Creating a Story
|
|
51
49
|
|
|
@@ -233,13 +231,13 @@ and allow enough time for migration before removal.
|
|
|
233
231
|
|
|
234
232
|
## Testing
|
|
235
233
|
|
|
236
|
-
The [Vitest addon](https://storybook.js.org/docs/writing-tests/integrations/vitest-addon) will run smoke tests and unit tests with the command: `
|
|
234
|
+
The [Vitest addon](https://storybook.js.org/docs/writing-tests/integrations/vitest-addon) will run smoke tests and unit tests with the command: `pnpm test`.
|
|
237
235
|
|
|
238
236
|
### Smoke Tests
|
|
239
237
|
|
|
240
238
|
Also known as confidence testing or sanity testing, smoke testing is the practice of testing the most important functionality of a system or feature. In this case, we use them to also check if any code changes have broken components in obvious ways. This automated process would be the equivalent of manually clicking on each story and verifying that it loaded without errors.
|
|
241
239
|
|
|
242
|
-
There is no additional code you need to write after creating a new story. Stories will get picked up automatically and tested whenever `
|
|
240
|
+
There is no additional code you need to write after creating a new story. Stories will get picked up automatically and tested whenever `pnpm test` is ran.
|
|
243
241
|
|
|
244
242
|
When you push a change up to Github, an [action will run](https://github.com/Keeper-Security/keeper-js-ui/actions/workflows/storybook-tests.yml) these tests and give you feedback to the outcome.
|
|
245
243
|
|
|
@@ -369,7 +367,7 @@ These standards are enforced with the help of [commitlint](https://commitlint.js
|
|
|
369
367
|
If you're not comfortable with [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/#summary) and you're ready to commit your **staged changes**, you can run:
|
|
370
368
|
|
|
371
369
|
```sh
|
|
372
|
-
|
|
370
|
+
pnpm commit
|
|
373
371
|
```
|
|
374
372
|
|
|
375
373
|
[czhgit](https://github.com/Zhengqbbb/cz-git) will prompt a series of questions and format your answers per the [Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/#specification):
|
|
@@ -428,16 +426,16 @@ Occassionally, a PR might be created when a security patch is available from one
|
|
|
428
426
|
> It's always a good idea to `git pull` and `git checkout` that branch locally to run some smoke tests before merging.
|
|
429
427
|
|
|
430
428
|
```
|
|
431
|
-
|
|
429
|
+
pnpm ci && pnpm build && pnpm start
|
|
432
430
|
```
|
|
433
431
|
|
|
434
|
-
If you want to take an additional step to smoke test, you can run `
|
|
432
|
+
If you want to take an additional step to smoke test, you can run `pnpm test` in a new terminal while `pnpm start` is still running.
|
|
435
433
|
|
|
436
434
|
### Release PRs
|
|
437
435
|
|
|
438
436
|
Whenever a PR is merged into the `main` branch, a [Release Github Action](https://github.com/Keeper-Security/keeper-js-ui/actions/workflows/release-please.yml) is automatically triggered to parse through the git history for certain keywords.
|
|
439
437
|
|
|
440
|
-
Based on the existence of these keywords, a new PR may be created automatically with updates to `package.json`, `
|
|
438
|
+
Based on the existence of these keywords, a new PR may be created automatically with updates to `package.json`, `pnpm-lock.yaml`, and `CHANGELOG.md`.
|
|
441
439
|
|
|
442
440
|
Once that PR is merged into `main`, a release tag is created. See [Publishing an NPM Package](#publishing-an-npm-package) for more info.
|
|
443
441
|
|
|
@@ -505,7 +503,6 @@ This provides 100% customizable opportunities and 100% ownership. It also relies
|
|
|
505
503
|
|
|
506
504
|
- [.czrc](./.czrc) => [cz-git](https://github.com/Zhengqbbb/cz-git#readme)
|
|
507
505
|
- [.husky/\*](./.husky/) => [Husky](https://typicode.github.io/husky/how-to.html)
|
|
508
|
-
- [.nvmrc](./.nvmrc) => [nvm](https://github.com/nvm-sh/nvm#readme)
|
|
509
506
|
- [prettier.config.js](./prettier.config.js) => [Prettier](https://prettier.io/docs/en/configuration.html)
|
|
510
507
|
- [.storybook/\*](./.storybook/) => [Storybook](https://storybook.js.org/docs/get-started/setup)
|
|
511
508
|
- [commitlint.config.mjs](./commitlint.config.mjs) => [commitlint](https://commitlint.js.org/reference/configuration.html)
|
|
@@ -520,7 +517,7 @@ This provides 100% customizable opportunities and 100% ownership. It also relies
|
|
|
520
517
|
To create a production-ready build, you can run:
|
|
521
518
|
|
|
522
519
|
```sh
|
|
523
|
-
|
|
520
|
+
pnpm build
|
|
524
521
|
```
|
|
525
522
|
|
|
526
523
|
This process inspects the [src/index.ts](./src/index.ts) file and pulls in only the necessary code. Packages listed under [package.json's](./package.json) `peerDependencies` will be ignored and left to the external implementations to install separately. This avoids redundancy and keeps file sizes down.
|
|
@@ -536,13 +533,13 @@ A `dist` folder will be created at the root of the project. This folder is ignor
|
|
|
536
533
|
|
|
537
534
|
Before publishing, you want to make sure that external projects have access to expected components and intellisense/autocomplete still works.
|
|
538
535
|
|
|
539
|
-
|
|
536
|
+
The recommended approach is to run [pnpm pack](https://pnpm.io/cli/pack) to create a local \*.tgz file in the library and install that file into the external project importing the library.
|
|
540
537
|
|
|
541
538
|
0. (Optional): Update the library's `package.json` version number, **_but don't commit it_**. This step is automated with the correct next version number.
|
|
542
539
|
1. From the library, run:
|
|
543
540
|
|
|
544
541
|
```sh
|
|
545
|
-
|
|
542
|
+
pnpm build && pnpm pack
|
|
546
543
|
```
|
|
547
544
|
|
|
548
545
|
2. Copy the name and location of the new `*.tgz` file that was created at the root of the library.
|
|
@@ -557,10 +554,10 @@ npm run build && npm pack
|
|
|
557
554
|
5. From the external project, run:
|
|
558
555
|
|
|
559
556
|
```sh
|
|
560
|
-
|
|
557
|
+
pnpm install
|
|
561
558
|
```
|
|
562
559
|
|
|
563
|
-
6. After testing for component behavior and availability, as well as intellisense/autocomplete and TypeScript prop validation, undo your package reference changes to `package.json` & `
|
|
560
|
+
6. After testing for component behavior and availability, as well as intellisense/autocomplete and TypeScript prop validation, undo your package reference changes to `package.json` & `pnpm-lock.yaml`. **_Do not commit them into your external project._**
|
|
564
561
|
|
|
565
562
|
## Publishing an NPM Package
|
|
566
563
|
|