@keeper-security/keeper-js-ui 0.15.0 → 0.17.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # Changelog
 
+## [0.17.0](https://github.com/Keeper-Security/keeper-js-ui/compare/v0.16.0...v0.17.0) (2026-01-30)
+
+
+### Features
+
+* Add Input and BaseInput to the library ([#392](https://github.com/Keeper-Security/keeper-js-ui/issues/392)) ([78afe1f](https://github.com/Keeper-Security/keeper-js-ui/commit/78afe1fd0d30e455279baad2dd793e8ed67ab703))
+* add VisuallyHidden component to the library ([#356](https://github.com/Keeper-Security/keeper-js-ui/issues/356)) ([7a1e95c](https://github.com/Keeper-Security/keeper-js-ui/commit/7a1e95cb7d4fdd517f5ef0fcb52fe441623dde5f))
+* **Autocomplete:** add Autocomplete to the library ([#389](https://github.com/Keeper-Security/keeper-js-ui/issues/389)) ([e1df816](https://github.com/Keeper-Security/keeper-js-ui/commit/e1df816d2fa71e905d98c3edaddb1f196f6b5a86)), closes [#387](https://github.com/Keeper-Security/keeper-js-ui/issues/387)
+* **ScollArea:** update exposed API and subcomponents ([#373](https://github.com/Keeper-Security/keeper-js-ui/issues/373)) ([b8313cd](https://github.com/Keeper-Security/keeper-js-ui/commit/b8313cd531acc13c9c3e7d6bbf1c1cd4da28daca))
+* **Select:** add variant and color options ([#404](https://github.com/Keeper-Security/keeper-js-ui/issues/404)) ([0682918](https://github.com/Keeper-Security/keeper-js-ui/commit/068291824b77ad9715ee819442bbc3f2009e4b76))
+
+
+### Bug Fixes
+
+* **Autocomplete:** fix wrong selection made onClick ([#405](https://github.com/Keeper-Security/keeper-js-ui/issues/405)) ([7f17293](https://github.com/Keeper-Security/keeper-js-ui/commit/7f17293db0a5fcffa71f636d8239c929bc7a9583))
+* **IconButton:** icon sizes can be set independent of button size ([#368](https://github.com/Keeper-Security/keeper-js-ui/issues/368)) ([71c90eb](https://github.com/Keeper-Security/keeper-js-ui/commit/71c90ebbba03ac429adfbb2623a17deb7c54a07d))
+* **storybook:** use storybook to smoke test component availability ([#387](https://github.com/Keeper-Security/keeper-js-ui/issues/387)) ([2e6bfae](https://github.com/Keeper-Security/keeper-js-ui/commit/2e6bfae074d5f89b07b23963136af4fcb86f7a4d))
+
+## [0.16.0](https://github.com/Keeper-Security/keeper-js-ui/compare/v0.15.0...v0.16.0) (2025-12-03)
+
+
+### Features
+
+* **DropdownMenuItemText:** make available to library ([#376](https://github.com/Keeper-Security/keeper-js-ui/issues/376)) ([422464e](https://github.com/Keeper-Security/keeper-js-ui/commit/422464eb0e85e63c4a01eaee6ccac3835173b2c0))
+* **Icon:** add xs size to Icon options ([#361](https://github.com/Keeper-Security/keeper-js-ui/issues/361)) ([b65270a](https://github.com/Keeper-Security/keeper-js-ui/commit/b65270ab815ec9c98833798d4cfda5640bd62050))
+
 ## [0.15.0](https://github.com/Keeper-Security/keeper-js-ui/compare/v0.14.0...v0.15.0) (2025-11-04)
 
 

package/README.md

@@ -6,7 +6,7 @@ _React components built for accessibility, consistency, and speed._
 
 - Terminal of your choice.
 - [git](https://github.com/git-guides/install-git) - Type `git -v` into your terminal to verify.
-- [Node.js v20](https://nodejs.org/en/download/package-manager) - Type `node -v` into your terminal to verify.
+- [Node.js v24](https://nodejs.org/en/download/package-manager) - Type `node -v` into your terminal to verify.
 
 ## Recommendations
 
@@ -20,75 +20,39 @@ Git clone or [download](https://github.com/Keeper-Security/keeper-js-ui/archive/
 Open a terminal from the root of the project and run:
 
 ```sh
-npm install
+npm ci
 ```
 
 Views are rendered via [Storybook](https://storybook.js.org/). To see components in action and start making edits, simply run:
 
 ```sh
 npm run storybook
-
-# ctrl + c to stop the server.
 ```
 
-[Storybook](https://storybook.js.org/) will open in a new tab. If it's your first time, you'll be greeted with a walk-through of Storybook's UI.
+`ctrl + c` to stop the server.
+
+[Storybook](https://storybook.js.org/) will open in a new tab. If it's your first time, you might be greeted with a walk-through of Storybook's UI.
 
 ## Editing Code
 
 The [src/](./src/) folder holds all component-related code.
 
-- [src/index.css](./src/index.css) - Any CSS required by components or [Tailwind CSS](https://tailwindcss.com/).
-- [src/index.ts](./src/index.ts) - Only the exports from this file are directly available to external projects/implementations.
-- [src/components/](./src/components) - React components and any relevant tests and stories.
-- [src/components/ui](./src/components/ui/) - Default location of shadcn/ui components.
-- [src/lib/](./src/lib/) - Utility/helper functions.
+- [src/index.css](./src/index.css): Any CSS required by components or [Tailwind CSS](https://tailwindcss.com/).
+- [src/index.ts](./src/index.ts): Only the exports from this file are available to external projects/implementations.
+- [src/components/](./src/components): React components and any relevant tests and stories.
+  - [src/components/ui](./src/components/ui/): Components focused on interaction.
+  - [src/components/layout](./src/components/layout/): Components focused on structure.
+- [src/hooks](./src/hooks/): React-specific [hooks](https://react.dev/reference/react/hooks).
+- [src/lib/](./src/lib/): Internal utility/helper functions.
 
 With [Storybook](https://storybook.js.org/) running (`npm run 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.
 
-## Adding shadcn/ui Components
-
-If you're adding a [shadcn/ui component](https://ui.shadcn.com/docs/components/), you can pick from a list by running:
-
-```sh
-npm run components:add
-```
-
-Alternatively, you can append the name of a specific component to the command. Adding the [shadcn/ui badge](https://ui.shadcn.com/docs/components/badge) would look like:
-
-```sh
-npm run components:add badge
-```
-
-Any dependency installs or project updates will be handled automatically. The new component file will be created in [src/components/ui/](./src/components/ui/).
-
-> [!TIP]
-> Create a specific story for your component to explore its features and demonstrate its different states. [What's a story?](https://storybook.js.org/docs/get-started/whats-a-story)
-
-### Diff'ing a shadcn/ui Component
-
-You can see what's different between the local copies of shadcn/ui components and the [latest versions](https://ui.shadcn.com/docs/components/). Simply run:
-
-```sh
-npm run components:diff
-```
-
-This will list all components that have differences. Spoiler: **they will all have formatting differences**. Perhaps more helpful is to see the changes of a specific component:
-
-```sh
-npm run components:diff button
-```
-
-Probably not super helpful, but it's there.
-
 ### Creating a Story
 
 > [!TIP]
 > Visit the [Storybook Tutorial](https://storybook.js.org/tutorials/) section for a better understanding of [Component-Driven Development (CDD)](https://www.componentdriven.org/) and the [Component Story Format (CSF)](https://storybook.js.org/docs/api/csf).
 
-Stories are chunks of code that render a component and give you the opportunity to configure its props. The naming convention of a story is `<component>.stories.ts`.
-
-> [!IMPORTANT]
-> If your story is more complex and requires [jsx](https://react.dev/learn/writing-markup-with-jsx), you'll have to name it with a `.tsx` extension: `<component>.stories.tsx`. Otherwise, you will get several cryptic linting errors within your jsx.
+Stories are chunks of code that render a component and give you the opportunity to configure its props. The naming convention of a story is `<component>.stories.tsx`.
 
 #### Minimal Story Example
 
@@ -158,14 +122,7 @@ export const DisabledSecondary: Story = {
 
 ### Prototyping in Storybook
 
-Using [Tailwind CSS](https://tailwindcss.com/) classes within a component or a story will automatically get picked up by the Tailwind CSS compiler and write that CSS rule to a file/memory.
-
-For a real-time experience where all of Tailwind CSS is available to your storybook preview and its interactive controls, enable `VITE_STORYBOOK_PROTOTYPING` in your `.env.local` file.
-
-This will allow you to use any standard Tailwind CSS classes within the `className` control textfield, but it will slow Storybook rendering saved changes to your stories and components. At this time, arbitrary values (using `[]` notation, such as `w-[1234px]`) will not work, but you will have access to a `style` object.
-
-> [!IMPORTANT]
-> If you don't already have a `.env.local` file, copy the contents of the `.env` file into the root and update the values as necessary. Never commit your changes to the `.env` file unless you are adding or removing a default key/value pair and sharing those values within the `git log` pose no security risks. Changes to your `.env.local` are ignored by git and will not get picked up as unstaged changes.
+Using [Tailwind CSS](https://tailwindcss.com/) classes within a component or a story will automatically get picked up by the Tailwind CSS compiler and write that CSS rule to memory. It will not affect the build or published library's CSS.
 
 ### Changing Themes in Storybook
 
@@ -176,6 +133,8 @@ This will allow you to use any standard Tailwind CSS classes within the `classNa
 
 #### Triggering Forced-Colors/High Contrast Modes
 
+Your best bet is to use one of [Windows' High Contrast Themes](https://learn.microsoft.com/en-us/windows/apps/design/accessibility/high-contrast-themes). Otherwise, you're left simulating most of within browser dev tooling.
+
 - Safari and Firefox do not have this feature in their dev tools, but they will respect system-wide settings.
 - Chromium Browsers (Chrome, Edge)
   1. Open DevTools:
@@ -245,7 +204,7 @@ This will allow you to use any standard Tailwind CSS classes within the `classNa
 
 ## Testing
 
-The [Storybook test runner](https://storybook.js.org/docs/writing-tests/test-runner) will run smoke tests and unit tests with the command: `npm test`.
+The [Vitest addon](https://storybook.js.org/docs/writing-tests/integrations/vitest-addon) will run smoke tests and unit tests with the command: `npm test`.
 
 ### Smoke Tests
 
@@ -428,7 +387,9 @@ Enforcing commit message standards helps with automating the [CHANGELOG](./CHANG
 
 ## Pull Requests
 
-In your pull requests, it's recommended to choose `Squash and merge` to keep the git history easy to read and parse.
+Before creating a Pull Request (PR), `git rebase` your feature branch with `main` and then push up your changes.
+
+After review and when you are ready to merge your PR, choose `Squash and merge` to keep the git history easy to read and parse.
 
 ### Dependabot PRs
 
@@ -470,7 +431,10 @@ Inspect the [package.json](./package.json) `dependencies` and `devDependencies`
 
 ### shadcn/ui
 
-[shadcn/ui](https://ui.shadcn.com/) is not a React library in the typical sense. It configures [Tailwind CSS](https://tailwindcss.com/) to style headless (i.e. unstyled) components from other accessibility-focused libraries, such as [Radix UI](https://www.radix-ui.com/).
+[shadcn/ui](https://ui.shadcn.com/) was used to scaffold this library. It configures [Tailwind CSS](https://tailwindcss.com/) to style headless (i.e. unstyled) components from other accessibility-focused libraries, such as [Radix UI](https://www.radix-ui.com/).
+
+> [!NOTE]
+> This library and shadcn/ui have since deviated to the point that its documentation can't be reliably be recommended for guiding patterns and practices for this library.
 
 As it states in its [introduction](https://ui.shadcn.com/docs):
 
@@ -498,7 +462,7 @@ This provides 100% customizable opportunities and 100% ownership. It also relies
 
 ### Vite
 
-[Vite](https://vitejs.dev/) is a super fast dev server and build optimizer with out-of-the-box support for most things. Plugins can be installed and configured. [vite-plugin-dts](https://github.com/qmhc/vite-plugin-dts#readme) abstracts all TypeScript type information into a single `.d.ts` file for builds.
+[Vite](https://vitejs.dev/) is a super fast dev server and build optimizer with out-of-the-box support for most things. Plugins can be installed and configured.
 
 ### Husky
 
@@ -535,15 +499,39 @@ This process inspects the [src/index.ts](./src/index.ts) file and pulls in only
 
 A `dist` folder will be created at the root of the project. This folder is ignored by `git`, so you shouldn't show any changes that need to be committied. The four files created are:
 
-- style.css - All of the necessary CSS including [Tailwind CSS](https://tailwindcss.com/) utility classes.
-- index.es.d.ts - All of the necessary type information.
-- index.es.js - All of the exported components in ES Modules format.
+- index.js - All of the exported components in ES Modules format.
 - index.umd.js - All of the exported components in the Universal Module Definition (fallback) format.
+- styles.css - All of the necessary CSS including [Tailwind CSS](https://tailwindcss.com/) utility classes.
+- types/index.d.ts - All of the necessary type information.
 
-> [!TIP]
-> Learn more about [npm link](https://docs.npmjs.com/cli/v9/commands/npm-link) if you want to bypass the npm registry and install this library to another project locally.
->
-> `npm link` can be flakey, so the alternative would be run [npm pack](https://docs.npmjs.com/cli/v9/commands/npm-pack) to create a local \*.tgz file and install that file in your external project.
+## (Smoke) Testing an NPM Package
+
+Before publishing, you want to make sure that external projects have access to expected components and intellisense/autocomplete still works.
+
+[npm link](https://docs.npmjs.com/cli/v9/commands/npm-link) can be flakey, so the alternative would be run [npm pack](https://docs.npmjs.com/cli/v9/commands/npm-pack) to create a local \*.tgz file and install that file in your external project.
+
+0. (Optional): Update your `package.json` version number, **_but don't commit it_**. This step is automated with the correct next version number.
+1. Run:
+
+```sh
+npm run build && npm pack
+```
+
+2. Copy the name and location of the new `*.tgz` file that was created.
+3. Update your external project's `package.json` reference to the library.
+
+```diff
+- "@keeper-security/keeper-js-ui": "1.0.0",
++ "@keeper-security/keeper-js-ui": "file://../keeper-js-ui/keeper-security-keeper-js-ui-1.0.0.tgz",
+```
+
+4. Run:
+
+```sh
+npm install
+```
+
+5. After testing for component behavior and availability, as well as intellisense/autocomplete and TypeScript prop validation, undo your package reference changes to `package.json` & `package-lock.json`. **_Do not commit them into your external project._**
 
 ## Publishing an NPM Package
 
@@ -552,13 +540,14 @@ Once a [Release PR](#release-prs) is merged and a new release tag is automatical
 This action will run the necessary commands to get a new production build of the library up to NPM for the external projects to download any new features.
 
 > [!NOTE]
-> The code changes picked up should only relate to code being used by external projects.
->
-> Internal code, such as Storybook stories or build configurations, should not be considered worthy of a new package update.
+> The code changes that require new versions, releases, and publishing should be code used by external projects. In other words, only changes that external projects care about (e.g. new components, fixed colors, etc) should update the `CHANGELOG.md`.
 >
-> Changes such as a new `Button` or breaking API changes to `Select` _would_ constitute a package update.
+> Internal code, such as Storybook stories or build configurations, should not be considered worthy of a new package update. This is why they are given the `chore` or `docs` commit label. Do **not** use `bug` or `feat` to describe these changes as they will trigger version number upticks and create releases.
 >
-> These decisions are handled automatically based on your `git commit` messages. See [Committing Changes](#committing-changes) for more info.
+> - Changes such as a new semantic color for `Button` or breaking API changes (React props) to `Select` _would_ constitute a package update.
+> - Updating a Github Action to perform faster **_would not_**.
+
+> Remember, release version update decisions are handled _automatically_ based on your `git commit` messages. See [Committing Changes](#committing-changes) for more info.
 
 ## Documentation Alerts/Callouts