genesys-react-components 0.1.0-alpha.1 → 0.1.0-alpha.13

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Genesys Cloud Services, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,111 @@
+# Genesys React Components
+
+A React component library containing standardized form elements. Check out the live demo and full documenation at https://purecloudlabs.github.io/genesys-react-components/
+
+## Installation
+
+```sh
+npm i genesys-react-components
+# install peer dependencies if necessary
+npm i genesys-dev-icons uuid
+
+# or
+
+yarn add genesys-react-components
+# install peer dependencies if necessary
+yarn add genesys-dev-icons uuid
+```
+
+## Usage
+
+```js
+import React, { useRef } from 'react';
+import { DxTextbox } from 'genesys-react-components';
+import { GenesysDevIcons } from 'genesys-dev-icons';
+
+export default function App() {
+	const inputRef = useRef<HTMLInputElement>(null);
+	return (
+		<div className='app'>
+			<DxTextbox
+				label='1000ms debounce (default 300), removes focus on value change via onChange callback'
+				placeholder='Focus will clear 1 second after you stop typing'
+				icon={GenesysDevIcons.AppZoomZoomRight}
+				clearButton={true}
+				onChange={(value: string) => {
+					console.log('1000ms debouncer triggered, clearing focus', value);
+					inputRef.current?.blur();
+				}}
+				changeDebounceMs={1000}
+				inputRef={inputRef}
+				onFocus={() => console.log('focus')}
+				onBlur={() => console.log('blur')}
+			/>
+		</div>
+	);
+}
+```
+
+## Building Locally
+
+### `genesys-react-components` package
+
+In the root of the repo, run:
+
+```sh
+npm i
+npm run build
+```
+
+This clears the build folder and rebuilds the package from source using the rollup configuration to produce single-file libraries.
+
+When validating the package locally, run `npm link` in the root of this repo to create a local symlink in npm for `genesys-react-components` that points to the locally built package. Take note of the _Error: Invalid hook call_ notice in the troubleshooting section below.
+
+### Demo app
+
+To build and serve the demo app locally, run:
+
+```sh
+cd app
+yarn install
+yarn start
+```
+
+To validate the local instance of the `genesys-react-components` package, run:
+
+```sh
+cd app
+# This removes the published dependency and uses npm link to add the local version
+yarn linklib
+yarn start
+```
+
+Run `yarn unlinklib` to revert to using the latest published version of the package.
+
+#### Publishing the demo app
+
+Run the following command to publish the demo app to the GitHub Pages site:
+
+```
+cd app
+yarn unlink
+yarn publish
+```
+
+## Troubleshooting
+
+### Error: Invalid hook call
+
+The following error may be encountered at runtime while running a React app locally when using `npm link genesys-react-components` to load the local package:
+
+```
+Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
+1. You might have mismatching versions of React and the renderer (such as React DOM)
+2. You might be breaking the Rules of Hooks
+3. You might have more than one copy of React in the same app
+See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
+```
+
+The cause of the issue is the first reason. The react-dom dependency is sourced from different locations for the component package and the React app that's using it. The package loads `<thisrepo>/node_modules/react_dom/` but the React app loads `<thisrepo>/app/node_modules/react-dom/` causing them to be different packages even though the loaded versions are identical.
+
+The solution is to delete `<thisrepo>/node_modules/` when using `npm link` in a any local React app. It doesn't seem to matter the order of operations as long as the folder is gone before `yarn start` is run to build the React app.

package/build/dxaccordion/DxAccordion.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { DxAccordionProps } from '..';
+import './DxAccordion.scss';
+export default function DxAccordion(props: DxAccordionProps): JSX.Element;

package/{dist/esm/lib → build}/dxaccordion/DxAccordionGroup.d.ts

@@ -1,7 +1,8 @@
-import React from 'react';
-import './DxAccordionGroup.scss';
-interface IProps {
-    children: React.ReactNode;
-}
-export default function DxAccordionGroup(props: IProps): JSX.Element;
-export {};
+import React from 'react';
+import './DxAccordionGroup.scss';
+interface IProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export default function DxAccordionGroup(props: IProps): JSX.Element;
+export {};

package/{dist/cjs/lib → build}/dxbutton/DxButton.d.ts

@@ -1,12 +1,12 @@
-import React from 'react';
-import { VoidEventCallback } from '..';
-import './DxButton.scss';
-interface IProps {
-    type?: 'primary' | 'secondary';
-    disabled?: boolean;
-    children?: React.ReactNode;
-    className?: string;
-    onClick?: VoidEventCallback;
-}
-export default function DxButton(props: IProps): JSX.Element;
-export {};
+import React from 'react';
+import { VoidEventCallback } from '..';
+import './DxButton.scss';
+interface IProps {
+    type?: 'primary' | 'secondary';
+    disabled?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+    onClick?: VoidEventCallback;
+}
+export default function DxButton(props: IProps): JSX.Element;
+export {};

package/build/dxitemgroup/DxCheckbox.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { CheckedChangedCallback } from '..';
+import './DxCheckbox.scss';
+interface IProps {
+    label: string;
+    itemValue: string;
+    description?: string;
+    checked?: boolean;
+    initiallyChecked?: boolean;
+    name?: string;
+    className?: string;
+    onCheckChanged?: CheckedChangedCallback;
+    useRadioType?: boolean;
+    disabled?: boolean;
+}
+export default function DxCheckbox(props: IProps): JSX.Element;
+export {};

package/build/dxitemgroup/DxItemGroup.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { DxItemGroupProps } from '..';
+import './DxItemGroup.scss';
+import './radiobutton.scss';
+import './dropdown.scss';
+import './multiselect.scss';
+export default function DxItemGroup(props: DxItemGroupProps): JSX.Element;

package/{dist/esm/lib → build}/dxlabel/DxLabel.d.ts

@@ -1,11 +1,11 @@
-import React from 'react';
-import './DxLabel.scss';
-interface IProps {
-    label?: string;
-    description?: string;
-    useFieldset?: boolean;
-    className?: string;
-    children: React.ReactNode;
-}
-export default function DxLabel(props: IProps): JSX.Element;
-export {};
+import React from 'react';
+import './DxLabel.scss';
+interface IProps {
+    label?: string;
+    description?: string;
+    useFieldset?: boolean;
+    className?: string;
+    children: React.ReactNode;
+}
+export default function DxLabel(props: IProps): JSX.Element;
+export {};

package/build/dxtabbedcontent/DxTabPanel.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { DxTabPanelProps } from '..';
+import './DxTabPanel.scss';
+export default function DxTabPanel(props: DxTabPanelProps): JSX.Element;

package/build/dxtabbedcontent/DxTabbedContent.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { DxTabbedContentProps } from '..';
+import './DxTabbedContent.scss';
+export default function DxTabbedContent(props: DxTabbedContentProps): JSX.Element;

package/build/dxtextbox/DxTextbox.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { DxTextboxProps } from '..';
+import './DxTextbox.scss';
+export default function DxTextbox(props: DxTextboxProps): JSX.Element;

package/build/dxtoggle/DxToggle.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { DxToggleProps } from '..';
+import './DxToggle.scss';
+export default function DxToggle(props: DxToggleProps): JSX.Element;

package/build/index.d.ts

@@ -0,0 +1,98 @@
+/// <reference types="react" />
+import { GenesysDevIcons } from 'genesys-dev-icons';
+import DxAccordion from './dxaccordion/DxAccordion';
+import DxAccordionGroup from './dxaccordion/DxAccordionGroup';
+import DxButton from './dxbutton/DxButton';
+import DxItemGroup from './dxitemgroup/DxItemGroup';
+import DxCheckbox from './dxitemgroup/DxCheckbox';
+import DxLabel from './dxlabel/DxLabel';
+import DxTabbedContent from './dxtabbedcontent/DxTabbedContent';
+import DxTabPanel from './dxtabbedcontent/DxTabPanel';
+import DxTextbox from './dxtextbox/DxTextbox';
+import DxToggle from './dxtoggle/DxToggle';
+export { DxAccordion, DxAccordionGroup, DxButton, DxItemGroup, DxCheckbox, DxLabel, DxTabbedContent, DxTabPanel, DxTextbox, DxToggle };
+export interface StringChangedCallback {
+    (value: string): void;
+}
+export interface BooleanChangedCallback {
+    (value?: boolean): void;
+}
+export interface CheckedChangedCallback {
+    (checked: boolean): void;
+}
+export interface VoidEventCallback {
+    (): void;
+}
+export interface DxItemGroupItem {
+    label: string;
+    value: string;
+    disabled?: boolean;
+    isSelected?: boolean;
+}
+export interface DxItemGroupItemValue {
+    item: DxItemGroupItem;
+    isSelected: boolean;
+}
+export interface ItemChangedCallback {
+    (item: DxItemGroupItem, isSelected: boolean): void;
+}
+export interface ItemGroupChangedCallback {
+    (items: DxItemGroupItemValue[]): void;
+}
+export interface DxToggleProps {
+    isTriState?: boolean;
+    initialValue?: boolean;
+    value?: boolean;
+    label?: string;
+    description?: string;
+    trueIcon?: GenesysDevIcons;
+    falseIcon?: GenesysDevIcons;
+    disabled?: boolean;
+    onChange?: BooleanChangedCallback;
+    className?: string;
+}
+export declare type DxTextboxType = 'text' | 'textarea' | 'password' | 'email' | 'date' | 'datetime-local' | 'time' | 'integer' | 'decimal';
+export interface DxTextboxProps {
+    initialValue?: string;
+    value?: string;
+    inputType?: DxTextboxType;
+    label?: string;
+    description?: string;
+    placeholder?: string;
+    icon?: GenesysDevIcons;
+    clearButton?: boolean;
+    onChange?: StringChangedCallback;
+    changeDebounceMs?: number;
+    inputRef?: React.RefObject<HTMLInputElement>;
+    onFocus?: VoidEventCallback;
+    onBlur?: VoidEventCallback;
+    disabled?: boolean;
+    className?: string;
+}
+export interface DxAccordionProps {
+    title: React.ReactNode;
+    children: React.ReactNode;
+    showOpen?: boolean;
+    className?: string;
+}
+export interface DxItemGroupProps {
+    title?: string;
+    description?: string;
+    format: DxItemGroupFormat;
+    items: DxItemGroupItem[];
+    disabled?: boolean;
+    className?: string;
+    onItemChanged?: ItemChangedCallback;
+    onItemsChanged?: ItemGroupChangedCallback;
+}
+export declare type DxItemGroupFormat = 'checkbox' | 'radio' | 'dropdown' | 'multiselect';
+export interface DxTabbedContentProps {
+    children: React.ReactNode;
+    initialTabId?: number;
+    className?: string;
+}
+export interface DxTabPanelProps {
+    title: React.ReactNode;
+    children: React.ReactNode;
+    className?: string;
+}