@dhasdk/simple-ui 1.0.0 → 1.0.4

package/README.md

@@ -2,7 +2,7 @@
 
 This library was generated with [Nx](https://nx.dev) on React 18.x.
 
-## <span style="color: orange;">*This library is under active development and not ready for production use outside of DHA WMT\*</span>
+## <span style="color: orange;">*This library is under active development and not ready for production use\*</span>
 
 
 
@@ -13,6 +13,7 @@ This library was generated with [Nx](https://nx.dev) on React 18.x.
 - [Badge](#badge)
 - [BreadCrumbs](#breadcrumbs)
 - [Button](#button)
+- [ButtonGroup](#buttongroup)
 - [Card](#card)
 - [CharacterCounter](#charactercounter)
 - [DatePicker](#datepicker)
@@ -24,13 +25,14 @@ This library was generated with [Nx](https://nx.dev) on React 18.x.
 - [Select](#select)
 - [SideBarNav](#sidebarnav)
 - [Skeleton](#skeleton)
+- [Slider](#slider)
 - [Status](#status)
 - [Tabs](#tabs)
 - [Toggle](#toggle)
 
 ## Quick Notes:
 
-- Some of these components use what are called **variants**. This allows pre-defined styles to be set, or 'variants', and those variants to be called by name via a prop when using the specified component. An example is the **Button** component below, and calling it using the 'filled' style variant of that component.
+- Some of these components use what are called **variants** from the **class-variance-authority** library. This allows pre-defined styles to be set, or 'variants', and those variants to be called by name via a prop when using the specified component. An example is the **Button** component below, and calling it using the 'DHAActive' style variant of that component (example code below).
 
 <!-- I N S T A L L A T I O N ----------------------------------------------------------------------------------- -->
 
@@ -223,7 +225,9 @@ danger Variant
 
 BreadCrumbs allow users to quickly and easily see their current location in an app or sites heirarchy, as well as quickly navigate to previous levels, enabling quick navigation back to those sections.
 
-The BreadCrumbs component takes in various props (`className`, `classNameContainer`, `variant`, `auto`, and `separator`), in addition to any other html attributes a normal NAV element would use.
+When the container or window is too narrow to display the full Breadcrumbs list, the middle items are truncated into an ellipsis.
+
+The BreadCrumbs component takes in various props in addition to any other html attributes a normal NAV element would use.
 
 A `ref` can also be created and assigned to the button component, and the component will point the reference to the html nav element.
 
@@ -231,7 +235,9 @@ The `className` prop takes a list of alternate CSS classes the developer would l
 
 The `classNameContainer` takes a list of css classes that are applied to the enclosing `nav` element.
 
-Finally, the `separator` prop is a string value that represents the separator used between bread crumbs. The default value is a greater than sign, >.
+The `routes` prop when specified supplies the list of supplied paths + names that are used inside the BreadCrumbs component instead of the component attempting to auto-create a routes list.
+
+If `routes` are not specified, the Breadcrumbs component will attempt to auto-generate and display its parent routes.
 
 Full list of props below
 
@@ -242,18 +248,31 @@ Full list of props below
 | ----------- | -------- | -------- | -------- | -------------------------------------------- |
 | className   | string   | Yes      |   | This is used to apply user supplied styling to the `Link` components. Note that words are capitalized using CSS, and can be made using the prop. |
 | classNameContainer | string   | Yes   |   | This is used to apply user supplied styling to the container `nav` element. |
+| routes | []{ name: string, route: string} | Yes | undefined | When present the Breadcrumbs component will use this list of supplied routes + names instead of attempting to auto-create a routes list. |
 | ...props    | string   | Yes | undefined | takes additional props that are not specifically defined in the component, i.e. aria-label |
-| separator  | string   | Yes       | > | A string separator value to place between the separate breadcrumbs. The default value is '>' |
-| variant    | string   | Yes       |  | Allows the user to enter a pre-defined variant that includes its own pre-defined styling. |
+| separator  | string   | Yes       |  | A string value providing the path name to an alternate separator |
+| variant    | string   | Yes       | 'default' | Allows the user to enter a pre-defined variant that includes its own pre-defined styling, options are 'default' and 'bold'. |
 
 ### Example Usage
 
-Default Variant
+With Auto Routes
 
 ```jsx
   <BreadCrumbs />
 ```
 
+Manually Specified Routes
+
+```jsx
+  <Breadcrumbs 
+    routes = 
+      {[
+        { name: 'Path 1', route: '/path1' },
+        { name: 'Path 2', route: '/path2' },
+        { name: 'Path 3', route: '/path3' },
+      ]}
+  />
+```
 
 ### Dependencies
 
@@ -362,7 +381,8 @@ The **ButtonGroup** is a component that wraps a series of **Button** components,
 
 The **ButtonGroup** also allows the ability to pass common css classes to the individual **Button** components, while allowing individual **Button** components to still utilize their own custom/unique css classes.
 
-A reference can also be created and passed to the button component, and the component will point the reference to the html button.
+The variants labeled **default** and **column** demonstrated in the examples below are UX defined variants.
+
 
 ### Props
 
@@ -371,17 +391,46 @@ A reference can also be created and passed to the button component, and the comp
 | children   | ReactNode   | Yes      |  | This contains one or more Button components that comprise this ButtonGroup. |
 | className | string | Yes  |'' | This prop applies the given classNames to the DIV that wraps and comprises the ButtonGroup component. |
 | classNameButtons | string | Yes | undefined | These are common classes that are applied to each of the children Button components. These classes can be overridden on a one by one basis by using an individual Button components own className prop. |
+| variant | string | Yes | 'default' | One of three possible variants that can be specified, **'default'** and **'column'** are UX defined variants that pre-layout up to three buttons for each variant. A **'custom'** variant is also present that leaves all layout and styling to the developer. |
 
 
 ### Example Usage
 
-simple example
+default variant w/ 3 Buttons (ux styled)
 
 ```jsx
   <ButtonGroup className='w-full'>
-    <Button>A</Button>
-    <Button>B</Button>
-    <Button>C</Button>
+    <Button variant='outline' onClick={doSomething}>Secondary</Button>
+    <Button variant='filled' onClick={doSomething}>Primary</Button>
+    <Button variant='transparent' onClick={doSomething}>Tertiary</Button>
+  </ButtonGroup>
+```
+
+default variant w/ 2 Buttons
+
+```jsx
+  <ButtonGroup>
+    <Button variant='outline' onClick={doSomething}>Secondary</Button>
+    <Button variant='filled' onClick={doSomething}>Primary</Button>
+  </ButtonGroup>
+```
+
+column variant w/ 3 Buttons
+
+```jsx
+  <ButtonGroup variant='column'>
+    <Button variant='outline' onClick={doSomething} >Secondary</Button>
+    <Button variant='filled' onClick={doSomething} >Primary</Button>
+    <Button variant='transparent' onClick={doSomething} >Tertiary</Button>
+  </ButtonGroup>
+```
+
+column variant w/ 2  Buttons
+
+```jsx
+  <ButtonGroup variant='column'>
+    <Button variant='outline' onClick={doSomething}>Secondary</Button>
+    <Button variant='filled' onClick={doSomething}>Primary</Button>
   </ButtonGroup>
 ```
 
@@ -390,26 +439,30 @@ use of common examples
 ```jsx
   <ButtonGroup 
     className='w-full' 
-    classNameButtons="border-2 border-green-500 bg-green-200 font-black">
-    <Button>A</Button>
-    <Button>B</Button>
-    <Button>C</Button>
+    classNameButtons="border-2 border-green-500 bg-green-200 font-black"
+    variant='custom'
+    >
+    <Button onClick={doSomething}>A</Button>
+    <Button onClick={doSomething}>B</Button>
+    <Button onClick={doSomething}>C</Button>
   </ButtonGroup>
 ```
 
 use of custom class
 
 ```jsx
-  <ButtonGroup className='w-full'>
+  <ButtonGroup className='w-full' variant='custom'>
     <Button 
       className='border-2 border-green-500 bg-green-200 font-black'
+       onClick={doSomething} 
       >A</Button>
-    <Button>B</Button>
-    <Button>C</Button>
+    <Button onClick={doSomething}>B</Button>
+    <Button onClick={doSomething}>C</Button>
   </ButtonGroup>
 ```
 
 
+
 ### Dependencies
 
 **_none_**
@@ -912,13 +965,12 @@ Basic Pill
 
 <!-- S E C T I O N H E A D E R  ------------------------------------------------------- -->
 
+
 ## SectionHeader
 
 The **`SectionHeader`** component displays a **`children`** prop as a heading, and uses various additional props to customize the remaining portion of the Header.
 
-Optional props are **`className`**, **`classNameChildren`**, **`classNameSubHeader`**, **`iconLeft`**, **`iconRight`**, **`subHeader`**, and **`underline`**.  Various examples and
-combinations of these props in use can be seen via the above drop down with 
-the **Usage** button
+Various examples and combinations of this components props in use can be seen via code examples below.
 
 Full list of props below
 
@@ -930,43 +982,48 @@ Full list of props below
 | className   | string   | Yes  | (1) below | Alternate CSS classnames to apply to the SectionHeader component.  **`twMerge`** is used to apply these styles, so they reliably overwrite existing classes. |
 | classNameChildren   | string   | Yes  | (2) below  | Alternate CSS classnames to apply to the **`children`** component which contains the Header content.  **`twMerge`** is used to apply these styles, so they reliably overwrite existing classes. |
 | classNameSubHeader   | string   | Yes | (3) below | Alternate CSS classnames to apply to the subHeader portion when present.  **`twMerge`** is used to apply these styles, so they reliably overwrite existing classes. |
+| fill | boolean | Yes | false | if true, the background on the sectionHeader is filled. Fill is applied by applying **`bg-[#092068] text-[#f0f0f0]`** to the default classes. A custom fill can be applied by applying your own classList via the **`className`** prop and leaving **`fill`** at its default false setting. |
+| button | boolean | Yes | false | Boolean value specifying whether to display a button or not on the right side of the SectionHeader. |
+| buttonOnClick | () => void | Yes | undefined | An onClick handler for the optional button. |
+| buttonContent | string | Yes | 'Click Me!' | The text content to display in the Button component if enabled |
 | iconLeft   | ReactNode   | Yes  |  | This prop takes an image to display as its left icon. It takes this value as a ReactNode, see examples above. |
 | iconRight   | ReactNode   | Yes  |  | This prop takes an image to display as its right icon. It takes this value as a ReactNode, see examples above. |
 | underline   | boolean   | Yes  | false | When true, an underline is displayed underneath the entire SubHeader, this is done by applying the classes **`border-b-2 border-black`** to the default classes. A custom underline can be applied via the **`className`** prop. |
 | subHeader | string   | Yes  | undefined | This prop takes a string value that is displayed as a SubHeader when present.  If no subHeader is passed in, nothing is displayed in this location. |
-| fill | boolean | Yes | false | if true, the background on the sectionHeader is filled. Fill is applied by applying **`bg-[#092068] text-[#f0f0f0]`** to the default classes. A custom fill can be applied by applying your own classList via the **`className`** prop and leaving **`fill`** at its default false setting. |
-| childButton | ReactNode &#124; undefined | Yes |  |  |
+| type | 'page', 'section', or 'subsection' | Yes | 'page' | This specifies the SectionHeader type to display. Each variation is intended for a lower ordered item than the one before it. The options are 'page', 'section', and 'subsection'. |
 
 
-1. Default classNames
+1. Default classNames 
+
+   - type 'page' - **`pt-4 pb-2 flex pl-6 pr-2 justify-start items-center gap-4 inline-flex w-full`**
 
-- **`pl-6 pr-2 pt-4 pb-2 justify-start items-start gap-4 inline-flex w-full`**
+   - type 'section'/'subsection' - **`py-2 flex pl-6 pr-2 justify-start items-center gap-4 inline-flex w-full`**
 
 2. children classNames
 
-- **`self-stretch text-[40px] font-normal font-["Arial"] leading-[48px] pb-1`**
+   - **`self-stretch text-[40px] font-normal font-["Arial"] leading-[48px] pb-1`**
 
 3. subHeader classNames
 
-- **`text-xl font-normal font-["Arial"] leading-[30px]`**
+   - **`text-xl font-normal font-["Arial"] leading-[30px]`**
 
 ### Example Usage
 
 ```jsx
-  <SectionHeader
-    iconLeft={<img src={frame} alt='left header icon' />}
-    iconRight={<img src={important} alt='left header icon' className='size-8 mt-2' />}
+  <SectionHeader  
+    iconLeft={<img src={frameLight} alt='left header icon' className="size-10" />}
+    iconRight={<img src={importantLight} alt='right header icon' className='size-10' />}
     subHeader="1st things first though"
     underline
-    childButton={<Button variant='transparent' className='h-10' 
-      icon={<img src={chevronRight} alt='right chevron' />}
-      iconPosition='right' >Click Me</Button>}
+    fill
+    button
+    buttonContent="Alert"
+    buttonOnClick={() => alert('Clicked!')}
   >
-    Prologue
+      Prologue
   </SectionHeader>
 ```
 
-
 ### Dependencies
 
 **_none_**
@@ -1321,6 +1378,85 @@ Skeleton w/ Alternate Coloring
 [Top of Page](#table-of-contents)
 
 
+[Top of Page](#table-of-contents)
+<!-- S L I D E R ------------------------------------------------------------------------------ -->
+
+## Slider
+
+A Slider is an html **`input`** element of type 'range' that allows a user to enter a numeric value. It consists of a stationary 'track' and a movable 'thumb', the thumb being the ux element the user drags to indicate a desired value.
+
+The Slider utilizes an input element of type range, and applies additional css styling via a css module.
+
+For accessibility purposes the thumb recieves alternate styling on a focus event. Safari does not provide focus to a slider thumb though, so styling also changes on active, though that is more transient and perhaps less useful for accessibility purposes.
+
+[Additional input attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/range) not defined below can be passed in as well and applied directly to the html input element.
+
+For the className props, the tailwind **`twMerge`** function is used, so if tailwind classes are passed in, they will replace or add to the existing classes as appropriate.
+
+Full list of props below
+
+### Props for Slider
+
+| Prop        | Type     | Optional | Default  | Description |
+| ----------- | -------- | -------- | -------- | ----------- |
+| className   | string   | Yes      |  | This is used to apply user supplied styling to the **input** element that makes up the **Slider** component. |
+| classNameLabel | string | Yes |  | A string value of tailwind classes used to apply styling to the **label** inside the **Slider** component. |
+| changeHandler | **`(value: number) => void;`** | Yes |  | A **callback** function can be used to pass values back to the parent. Example in the usage display of the callback example above. |
+| id | string | Yes |  | The **id** value used to link the **label** and **input** elements together. If an **id** is not provided, the **label** is not displayed. |
+
+
+Tailwind CSS Classes used for Slider components
+
+- className defaults
+  - **`w-full block mb-2`**
+- classNameLabel defaults
+  - **`block mb-2'`**
+
+
+### Example Usage
+
+Default example, no callback or label
+
+```jsx
+  <Slider />
+```
+
+Example with callback function
+
+```jsx
+  const [value, setValue] = useState<number>(50);
+  // ...
+
+  return (
+    <>
+        <Slider className='block mb-4' startValue={value} changeHandler={setValue} />
+        <div className='block'>value: {value}</div>
+    </>
+  );
+```
+Slider w/ startValue (an input attribute) & changeHandler
+
+```jsx
+  const [value, setValue] = useState<number>(50);
+  // ...
+
+  <Slider 
+      startValue={value} 
+      changeHandler={setValue} 
+      id='1' 
+      label='Volume Level' 
+      classNameLabel='font-bold text-blue-900' 
+      />
+  <div>value: {value}</div>
+```
+
+### Dependencies
+
+**_none_**
+
+[Top of Page](#table-of-contents)
+
+
 <!-- S T A T U S ---------------------------------------------------------------------------- -->
 
 ## Status

package/index.d.ts

@@ -1,5 +1,6 @@
 export { Accordion, AccordionParent } from './lib/Accordion';
 export type { AccordionProps, AccordionParentProps } from './lib/Accordion';
+export { AppointmentPicker } from './lib/AppointmentPicker';
 export { Badge } from './lib/Badge';
 export type { BadgeProps } from './lib/Badge';
 export { Button } from './lib/Button';
@@ -18,6 +19,10 @@ export { List, ListItem } from './lib/List';
 export { Modal } from './lib/Modal';
 export { Pill } from './lib/Pill';
 export type { PillProps } from './lib/Pill';
+export { Search } from './lib/Search';
+export type { DataSearchResults, SearchDataItem, SearchProps } from './lib/Search';
+export { RadioGroup } from './lib/RadioGroup';
+export type { RadioOption } from './lib/RadioGroup';
 export { SectionHeader } from './lib/SectionHeader';
 export type { SectionHeaderProps } from './lib/SectionHeader';
 export { Select } from './lib/Select';
@@ -28,6 +33,7 @@ export { SideBarNav } from './lib/SideBarNav';
 export { Skeleton, SkelCircle, SkelLine, SkelRow, SkelSection } from './lib/Skeleton';
 export type { SkeletonProps, SkelProps } from './lib/Skeleton';
 export { SkipLink } from './lib/SkipLink';
+export { Slider } from './lib/Slider';
 export { Status } from './lib/Status';
 export type { StatusProps } from './lib/Status';
 export { Tabs } from './lib/Tabs';