@keeper-security/keeper-js-ui 0.3.1 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Changelog
 
+## [0.5.0](https://github.com/Keeper-Security/keeper-js-ui/compare/v0.4.0...v0.5.0) (2025-01-13)
+
+
+### Features
+
+* add Toast component ([#137](https://github.com/Keeper-Security/keeper-js-ui/issues/137)) ([3343f1e](https://github.com/Keeper-Security/keeper-js-ui/commit/3343f1ea4f58975deb49e33d2088c8de18589100))
+* **Button:** add destructive button ([#138](https://github.com/Keeper-Security/keeper-js-ui/issues/138)) ([187d27f](https://github.com/Keeper-Security/keeper-js-ui/commit/187d27f8d5aef1fd40db5c3df7f8f0330108a00d))
+* **Switch:** remove useDirection() ([#141](https://github.com/Keeper-Security/keeper-js-ui/issues/141)) ([4180cb0](https://github.com/Keeper-Security/keeper-js-ui/commit/4180cb07ec306a0ffbc918b9a69279ed20bb9125))
+
+## [0.4.0](https://github.com/Keeper-Security/keeper-js-ui/compare/v0.3.1...v0.4.0) (2025-01-08)
+
+
+### Features
+
+* **deps:** bump react peerDependencies from 18.2.0 to 18.3.1 ([#134](https://github.com/Keeper-Security/keeper-js-ui/issues/134)) ([1553b2a](https://github.com/Keeper-Security/keeper-js-ui/commit/1553b2abaf1e015a48fb1f34ca50c2699cbf0aeb)), closes [#135](https://github.com/Keeper-Security/keeper-js-ui/issues/135)
+
+
+### Bug Fixes
+
+* add font-family rules to body to override extension page defaults ([#132](https://github.com/Keeper-Security/keeper-js-ui/issues/132)) ([356f262](https://github.com/Keeper-Security/keeper-js-ui/commit/356f262c15a06960157df391a09be95ee72e6883))
+
 ## [0.3.1](https://github.com/Keeper-Security/keeper-js-ui/compare/v0.3.0...v0.3.1) (2024-12-20)
 
 

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 v18](https://nodejs.org/en/download/package-manager) - Type `node -v` into your terminal to verify.
+- [Node.js v20](https://nodejs.org/en/download/package-manager) - Type `node -v` into your terminal to verify.
 
 ## Recommendations
 
@@ -212,6 +212,39 @@ There is no additional code you need to write after creating a new story. Storie
 
 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.
 
+### Skipping Tests
+
+You can leverage [Storybook tags](https://storybook.js.org/docs/writing-stories/tags) to skip or exclude stories from the test-runner. Tags can be applied at the file level via the `meta` object or to stories individually.
+
+- `skip-tests` is ideal for in-progress work.
+
+  - It will **not** run the story as a test.
+  - It will be reported as one of the skipped tests in the test results.
+
+- `no-tests` is ideal for stories that will never have any test value.
+
+  - It will **not** run the story as a test.
+  - It will **not** report individual stories as a skipped test. [^ignored-test-exception]
+
+  [^ignored-test-exception] If the `no-tests` tag is applied to **all** exported stories within a `*.stories.ts(x)` file, whether via the `meta` object or individually, it **will** be reported as a `skipped` test and test suite in the test results.
+
+```ts
+// Temporarily skip testing a story.
+export const SkipTesting: Story = {
+  tags: ['skip-tests'],
+}
+
+// Permanently skip testing a story.
+export const IgnoreTesting: Story = {
+  tags: ['no-tests'],
+}
+
+// Apply a tag to all exported stories.
+const meta = {
+  tags: ['skip-tests'],
+} satisfies Meta<typeof Component>
+```
+
 ## Committing Changes
 
 If you're familiar with [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/#summary), feel free to commit using `git commit`.

package/dist/index.es.d.ts

@@ -6,8 +6,31 @@ import { JSX as JSX_2 } from 'react/jsx-runtime';
 import * as React_2 from 'react';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
+import * as ToastPrimitives from '@radix-ui/react-toast';
 import { VariantProps } from 'class-variance-authority';
 
+/**
+ * Utility type that ensures at least one of the props is present.
+ *
+ * Give it a type with required props and it will modify it so that the one present is required and the others are optional.
+ *
+ * @template T - The type with required props
+ *
+ * @example
+ * type ValidA11y = AtLeastOneRequired<{
+ *   id: string
+ *   'aria-label': string
+ *   'aria-labelledby': string
+ * }>
+ * // Invalid: {}
+ * // Valid: { id: 'email' }
+ * // Valid: { 'aria-label': 'Toggle notifications' }
+ * // Valid: { 'aria-labelledby': 'text-desc intro-paragraph' }
+ */
+declare type AtLeastOneRequired<T, U = {
+    [K in keyof T]: Pick<T, K>;
+}> = Partial<T> & U[keyof U];
+
 export declare const Avatar: React_2.ForwardRefExoticComponent<AvatarProps & React_2.RefAttributes<HTMLSpanElement>>;
 
 export declare const AvatarFallback: React_2.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React_2.RefAttributes<HTMLSpanElement>, "ref"> & React_2.RefAttributes<HTMLSpanElement>>;
@@ -61,7 +84,7 @@ declare interface ButtonProps extends ButtonBaseProps {
 
 declare const buttonVariants: (props?: ({
     variant?: "link" | "solid" | "outline" | "plain" | null | undefined;
-    color?: "neutral" | "primary" | "secondary" | null | undefined;
+    color?: "neutral" | "primary" | "secondary" | "destructive" | null | undefined;
     fullWidth?: boolean | null | undefined;
     avatar?: boolean | null | undefined;
     iconOnly?: boolean | null | undefined;
@@ -155,6 +178,46 @@ declare interface IconButtonProps extends ButtonBaseProps {
 
 export declare const Separator: React_2.ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
 
-export declare const Switch: React_2.ForwardRefExoticComponent<Omit<SwitchPrimitives.SwitchProps & React_2.RefAttributes<HTMLButtonElement>, "ref"> & React_2.RefAttributes<HTMLButtonElement>>;
+export declare const Switch: React_2.ForwardRefExoticComponent<SwitchProps & React_2.RefAttributes<HTMLButtonElement>>;
+
+declare type SwitchProps = AtLeastOneRequired<SwitchPropsA11y> & React_2.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>;
+
+declare type SwitchPropsA11y = {
+    id: string;
+    'aria-labelledby': string;
+    'aria-label': string;
+};
+
+export declare const Toast: () => JSX_2.Element;
+
+declare function toast({ ...props }: ToasterProps): {
+    id: string;
+    dismiss: () => void;
+    update: (props: ToasterToast) => void;
+};
+
+declare const ToastAction: React_2.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastActionProps & React_2.RefAttributes<HTMLButtonElement>, "ref"> & React_2.RefAttributes<HTMLButtonElement>>;
+
+declare type ToastActionElement = React_2.ReactElement<typeof ToastAction>;
+
+declare type ToasterProps = Omit<ToasterToast, 'id'>;
+
+declare type ToasterToast = ToastProps & {
+    id: string;
+    title?: React_2.ReactNode;
+    description?: React_2.ReactNode;
+    action?: ToastActionElement;
+    icon?: React_2.ReactNode;
+};
+
+declare type ToastProps = React_2.ComponentPropsWithoutRef<typeof ToastRoot>;
+
+declare const ToastRoot: React_2.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastProps & React_2.RefAttributes<HTMLLIElement>, "ref"> & VariantProps<(props?: ClassProp | undefined) => string> & React_2.RefAttributes<HTMLLIElement>>;
+
+export declare function useToast(): {
+    toast: typeof toast;
+    dismiss: (toastId?: string) => void;
+    toasts: ToasterToast[];
+};
 
 export { }