@luscii-healthtech/web-ui 0.4.2 → 0.4.5

package/README.md

@@ -1,60 +1,76 @@
 # web-ui
 
-The web-ui repository contains the web UI components for Luscii's front end projects. It is published to NPM for inclusion into our projects. It also uses storybook and is published to chromatic for easy review of changes. 
+The web-ui repository contains the web UI components for Luscii's front end projects. It is published to NPM for inclusion into our projects. It also uses storybook and is published to chromatic for easy review of changes.
 
 ## Running locally
 
-If you want to run storybook locally you can use 
+If you want to run storybook locally you can use
 
 ```bash
 yarn install
 yarn storybook
 ```
 
+## Testing your production build
+
+Assuming the following setup:
+
+- The `web-ui` and `cVitals-Web` repositories are siblings are in the same folder
+- You have ran `yarn install` on `cVitals-Web`
+- You have ran `yarn build` on `web-ui`
+
+Run the script below in your terminal, _in the parent folder of the repositories_.
+
+```
+cp -a web-ui/dist/. cVitals-Web/node_modules/@luscii-healthtech/web-ui/dist
+```
+
+When you run cVitals again, it should contain your latest updates in the component library. Use this to make sure your changes are solid before merging a pull request.
+
 ## Contributing
 
 Make sure you understand our design system and follow its guidelines. They are document in storybook. We value consistency, simplicity and usability highly. Don't mess it up.
 
-If you want to add components, do so in 
+If you want to add components, do so in
+
 ```
 /src/components
 ```
-Please stay vigilant when adding components that we implement them consistently in our projects and that it is clear when and where they have to be used. We want to avoid a lot of components that are similar. 
+
+Please stay vigilant when adding components that we implement them consistently in our projects and that it is clear when and where they have to be used. We want to avoid a lot of components that are similar.
 
 When you create new components, you must add them to storybook as well. Stories go in
+
 ```
 /stories
 ```
 
-
 ## CI setup
 
 #### Branching
 
-The `main` branch is our default branch. When you contribute, branch from there and name your branch 
+The `main` branch is our default branch. When you contribute, branch from there and name your branch
 
- ```
-   //Branch names convention (enforced)
-    
-   major/*      //for a new design system or changes that effect our foundations (typography, color)
-   minor/*      //for new components and stories
-   patch/*      //for small improvements to existing components, stories
-   bug/*        //for bugs, fixes 
-   ```
+```
+  //Branch names convention (enforced)
 
-We have configured at lot of magic for your convenience. 
+  major/*      //for a new design system or changes that effect our foundations (typography, color)
+  minor/*      //for new components and stories
+  patch/*      //for small improvements to existing components, stories
+  bug/*        //for bugs, fixes
+```
+
+We have configured at lot of magic for your convenience.
 
 #### On every PR
-1. the module build, lint and tests are checked. 
-2. The storybook build is published to chromatic. 
-3. Labels are added based on the branch name and PR size. 
-4. Branch names must follow the convention and are checked
-   
 
+1. the module build, lint and tests are checked.
+2. The storybook build is published to chromatic.
+3. Labels are added based on the branch name and PR size.
+4. Branch names must follow the convention and are checked
 
 #### On merge to main
 
 1. Draft a github release
 2. Version bump of the package
 3. Publish new package to NPM
-

package/dist/components/NavMenu/NavMenu.d.ts

@@ -1 +1,9 @@
-export function NavMenu(props: any): JSX.Element;
+/// <reference types="react" />
+import { NavMenuItemProps } from "./NavMenuItem";
+export declare type NavMenuElement = NavMenuItemProps | {
+    type: "separator" | "spacer";
+};
+export declare type NavMenuProps = {
+    items: NavMenuElement[];
+};
+export declare function NavMenu({ items }: NavMenuProps): JSX.Element;

package/dist/components/NavMenu/NavMenu.utils.d.ts

@@ -0,0 +1,3 @@
+import { NavMenuElement } from "./NavMenu";
+import { NavMenuItemProps } from "./NavMenuItem";
+export declare function isNavMenuItem(item: NavMenuElement): item is NavMenuItemProps;

package/dist/components/NavMenu/NavMenuContent.d.ts

@@ -1,7 +1,3 @@
 /// <reference types="react" />
-import { NavMenuItemProps } from "./NavMenuItem";
-interface NavMenuContentProps {
-    items: Array<NavMenuItemProps>;
-}
-export declare const NavMenuContent: (props: NavMenuContentProps) => JSX.Element;
-export {};
+import { NavMenuProps } from "./NavMenu";
+export declare const NavMenuContent: ({ items }: NavMenuProps) => JSX.Element;

package/dist/components/NavMenu/NavMenuItem.d.ts

@@ -9,7 +9,7 @@ export interface NavMenuItemProps {
     dataTestId: string;
     gtmEvent?: string;
     isExternal?: boolean;
-    type?: "separator" | "spacer" | "base" | void;
+    type?: "base";
     track?: (event: string) => void;
 }
 export declare const NavMenuItem: (props: NavMenuItemProps) => JSX.Element;

package/dist/components/Section/SectionItemWithContent.d.ts

@@ -1,12 +1,9 @@
-export default SectionItemWithContent;
-declare function SectionItemWithContent(props: any): JSX.Element;
-declare namespace SectionItemWithContent {
-    export namespace propTypes {
-        export const text: PropTypes.Validator<string>;
-        export const icon: PropTypes.Requireable<string | object>;
-        export const className: PropTypes.Requireable<string>;
-        export const iconClass: PropTypes.Requireable<string>;
-        export const onClick: PropTypes.Requireable<(...args: any[]) => any>;
-    }
+/// <reference types="react" />
+import { SectionItemProps } from "./SectionItem";
+interface SectionItemWithContentProps extends Omit<SectionItemProps, "children"> {
+    text: string;
+    icon?: string;
+    iconClass?: string;
 }
-import PropTypes from "prop-types";
+declare function SectionItemWithContent(props: SectionItemWithContentProps): JSX.Element;
+export default SectionItemWithContent;

package/dist/index.d.ts

@@ -17,13 +17,12 @@ export { default as InfoBlock } from "./components/InfoBlock/InfoBlock";
 export { InfoField } from "./components/InfoField/InfoField";
 export { INPUT_TYPES, default as Input } from "./components/Input/Input";
 export { default as Line } from "./components/Line/Line";
-export { default as SectionItem, SectionItemProps, } from "./components/Section/SectionItem";
 export { ListTable, ListTableProps, ListTablePropsConfiguration, ListTablePropsConfigurationField, } from "./components/ListTable/ListTable";
 export { LoadingIndicator, LoadingIndicatorProps, } from "./components/LoadingIndicator/LoadingIndicator";
 export { default as Menu } from "./components/Menu/Menu";
 export { MultiSelect } from "./components/MultiSelect/MultiSelect";
 export { NavLayout, NavMenuLayoutProps } from "./components/NavMenu/NavLayout";
-export { NavMenu } from "./components/NavMenu/NavMenu";
+export { NavMenu, NavMenuElement } from "./components/NavMenu/NavMenu";
 export { NotificationBanner, NotificationBannerColor, NotificationBannerLinkProps, } from "./components/NotificationBanner/NotificationBanner";
 export { default as Page } from "./components/Page/Page";
 export { default as CRUDPage } from "./components/Page/CRUDPage";
@@ -33,6 +32,8 @@ export { default as PreviewPhone } from "./components/PreviewPhone/PreviewPhone"
 export { default as Radio } from "./components/Radio/Radio";
 export { default as RadioGroup } from "./components/RadioGroup/RadioGroup";
 export { default as Section } from "./components/Section/Section";
+export { default as SectionItemWithContent } from "./components/Section/SectionItemWithContent";
+export { default as SectionItem, SectionItemProps, } from "./components/Section/SectionItem";
 export { SettingsMenuButton, SettingsMenuButtonProps, } from "./components/SettingsMenuButton/SettingsMenuButton";
 export { Spinner } from "./components/Spinner/Spinner";
 export { Steps } from "./components/Steps/Steps";
@@ -45,7 +46,6 @@ export { default as TextArea } from "./components/Textarea/Textarea";
 export { default as TextEditor } from "./components/TextEditor/TextEditor";
 export { default as TextEditorV2 } from "./components/TextEditorV2/TextEditorV2";
 export { TextLink, TextLinkProps } from "./components/TextLink/TextLink";
-export { default as SectionItemWithContent } from "./components/Section/SectionItemWithContent";
 export { Title, TitleStyle } from "./components/Title/Title";
 export { ViewItem, ViewItemProps } from "./components/ViewItem/ViewItem";
 export { default as Text } from "./components/Text/Text";

package/dist/web-ui-tailwind.css

@@ -1140,10 +1140,6 @@ video {
   font-size: 0.875rem;
 }
 
-.text-base {
-  font-size: 1rem;
-}
-
 .text-lg {
   font-size: 1.125rem;
 }
@@ -1783,10 +1779,6 @@ video {
   white-space: nowrap;
 }
 
-.whitespace-pre-wrap {
-  white-space: pre-wrap;
-}
-
 .break-words {
   word-wrap: break-word;
   overflow-wrap: break-word;
@@ -1834,10 +1826,6 @@ video {
   width: 11.5rem;
 }
 
-.w-56 {
-  width: 14rem;
-}
-
 .w-80 {
   width: 20rem;
 }
@@ -2108,4 +2096,3 @@ video {
     display: none;
   }
 }
-