@keeper-security/keeper-js-ui 0.0.2 → 0.1.1

package/README.md

@@ -153,6 +153,16 @@ export const DisabledSecondary: Story = {
 
 [Storybook](https://storybook.js.org/) is not limited to simply running and testing components in isolation. Complex scenarios can be created with the [render](https://storybook.js.org/docs/api/csf#custom-render-functions) and [play](https://storybook.js.org/docs/api/csf#play-function) functions.
 
+### 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.
+
+> Note: If you don't already have a `.env.local` file, copy the contents of the `.env` file in 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. Changes to your `.env.local` are ignored by git and will not get picked up as unstaged changes.
+
 ### Changing Themes in Storybook
 
 [Storybook's Themes Addon](https://storybook.js.org/addons/@storybook/addon-themes) has been configured to pick between the `light` or `dark` theme based on your system settings. You can use the Theme button in the Storybook toolbar to switch themes manually should you need to test a component in another theme.
@@ -184,6 +194,18 @@ There are four themes to choose from:
   4. Select `Emulate CSS forced-colors: active`.
   5. To deactivate, repeat the `Run` command but select `Do not emulate CSS forced-colors`.
 
+## 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`.
+
+### Smoke Tests
+
+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.
+
+There is no additional code you need to write after creating a new story. Stories will get picked up automatically and tested whenever `npm test` is ran.
+
+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.
+
 ## 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

@@ -1,16 +1,51 @@
-import { ClassProp } from 'class-variance-authority/types';
+import { ClassProp } from 'class-variance-authority/dist/types';
 import * as React_2 from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 export declare const Button: React_2.ForwardRefExoticComponent<ButtonProps & React_2.RefAttributes<HTMLButtonElement>>;
 
-declare interface ButtonProps extends React_2.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+declare interface ButtonProps extends Omit<React_2.ButtonHTMLAttributes<HTMLButtonElement>, 'color'>, VariantProps<typeof buttonVariants> {
     asChild?: boolean;
+    endContent?: React_2.ReactNode;
+    startContent?: React_2.ReactNode;
 }
 
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
-    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+    variant?: "solid" | "plain" | null | undefined;
+    color?: "neutral" | "primary" | null | undefined;
+    fullWidth?: boolean | null | undefined;
+} & ClassProp) | undefined) => string;
+
+export declare const Flex: React_2.ForwardRefExoticComponent<FlexProps & React_2.RefAttributes<HTMLDivElement>>;
+
+declare interface FlexProps extends React_2.HTMLAttributes<HTMLDivElement>, VariantProps<typeof flexVariants> {
+    as?: 'div' | 'span';
+    asChild?: boolean;
+}
+
+declare const flexVariants: (props?: ({
+    wrap?: "wrap" | "nowrap" | "reverse" | null | undefined;
+    p?: "px" | "0" | "1" | "2" | "3" | "4" | "0.5" | "1.5" | "2.5" | "3.5" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | null | undefined;
+    pb?: "px" | "0" | "1" | "2" | "3" | "4" | "0.5" | "1.5" | "2.5" | "3.5" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | null | undefined;
+    pe?: "px" | "0" | "1" | "2" | "3" | "4" | "0.5" | "1.5" | "2.5" | "3.5" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | null | undefined;
+    ps?: "px" | "0" | "1" | "2" | "3" | "4" | "0.5" | "1.5" | "2.5" | "3.5" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | null | undefined;
+    pt?: "px" | "0" | "1" | "2" | "3" | "4" | "0.5" | "1.5" | "2.5" | "3.5" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | null | undefined;
+    px?: "px" | "0" | "1" | "2" | "3" | "4" | "0.5" | "1.5" | "2.5" | "3.5" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | null | undefined;
+    py?: "px" | "0" | "1" | "2" | "3" | "4" | "0.5" | "1.5" | "2.5" | "3.5" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | null | undefined;
+    m?: "px" | "0" | "1" | "2" | "3" | "4" | "auto" | "0.5" | "1.5" | "2.5" | "3.5" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | null | undefined;
+    mb?: "px" | "0" | "1" | "2" | "3" | "4" | "auto" | "0.5" | "1.5" | "2.5" | "3.5" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | null | undefined;
+    me?: "px" | "0" | "1" | "2" | "3" | "4" | "auto" | "0.5" | "1.5" | "2.5" | "3.5" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | null | undefined;
+    ms?: "px" | "0" | "1" | "2" | "3" | "4" | "auto" | "0.5" | "1.5" | "2.5" | "3.5" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | null | undefined;
+    mt?: "px" | "0" | "1" | "2" | "3" | "4" | "auto" | "0.5" | "1.5" | "2.5" | "3.5" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | null | undefined;
+    mx?: "px" | "0" | "1" | "2" | "3" | "4" | "auto" | "0.5" | "1.5" | "2.5" | "3.5" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | null | undefined;
+    my?: "px" | "0" | "1" | "2" | "3" | "4" | "auto" | "0.5" | "1.5" | "2.5" | "3.5" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | null | undefined;
+    justify?: "end" | "start" | "around" | "baseline" | "between" | "center" | "normal" | "stretch" | null | undefined;
+    gap?: "px" | "0" | "1" | "2" | "3" | "4" | "0.5" | "1.5" | "2.5" | "3.5" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | null | undefined;
+    gapColumn?: "px" | "0" | "1" | "2" | "3" | "4" | "0.5" | "1.5" | "2.5" | "3.5" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | null | undefined;
+    gapRow?: "px" | "0" | "1" | "2" | "3" | "4" | "0.5" | "1.5" | "2.5" | "3.5" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | null | undefined;
+    align?: "end" | "start" | "baseline" | "center" | "stretch" | null | undefined;
+    direction?: "row" | "column-reverse" | "row-reverse" | "column" | null | undefined;
+    display?: "flex" | "none" | "inline-flex" | null | undefined;
 } & ClassProp) | undefined) => string;
 
 export { }