@pega/cosmos-react-demos 3.0.0-dev.3.0 → 3.0.0-dev.30.0

package/lib/core/CreditCard/CreditCard.stories.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { CreditCardDisplay, CreditCardInput } from '@pega/cosmos-react-core';
+import { usePrevious } from '@pega/cosmos-react-core/lib/hooks';
+export default {
+    title: 'Core/CreditCard'
+};
+export const CreditCardDisplayDemo = (args) => (_jsx(CreditCardDisplay, { value: args.value, formattingOptions: { obfuscation: args.obfuscation } }));
+CreditCardDisplayDemo.args = {
+    value: undefined,
+    obfuscation: 'none'
+};
+CreditCardDisplayDemo.argTypes = {
+    value: { control: { type: 'text' } },
+    obfuscation: { control: { type: 'inline-radio' }, options: ['none', 'partial', 'full'] }
+};
+export const CreditCardInputDemo = (args) => {
+    const [value, setValue] = useState(args.value);
+    const prev = usePrevious(args.value);
+    useEffect(() => {
+        if (prev !== args.value)
+            setValue(args.value);
+    }, [prev, args.value]);
+    return (_jsx(CreditCardInput, { ...args, value: value, onChange: setValue, additionalInfo: args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Input your 15-16 digit credit card number'
+            }
+            : undefined }));
+};
+CreditCardInputDemo.args = {
+    value: undefined,
+    label: 'Credit card number',
+    labelHidden: false,
+    info: 'Enter your credit card number',
+    status: undefined,
+    required: false,
+    disabled: false,
+    readOnly: false,
+    showAdditionalInfo: true
+};
+CreditCardInputDemo.argTypes = {
+    value: { control: { type: 'text' } },
+    label: { control: { type: 'text' } },
+    labelHidden: { control: { type: 'boolean' } },
+    info: { control: { type: 'text' } },
+    status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },
+    required: { control: { type: 'boolean' } },
+    disabled: { control: { type: 'boolean' } },
+    readOnly: { control: { type: 'boolean' } },
+    showAdditionalInfo: { control: { type: 'boolean' } }
+};
+//# sourceMappingURL=CreditCard.stories.js.map

package/lib/core/CreditCard/CreditCard.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CreditCard.stories.js","sourceRoot":"","sources":["../../../src/core/CreditCard/CreditCard.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState, useEffect } from 'react';\n\nimport { CreditCardDisplay, CreditCardInput } from '@pega/cosmos-react-core';\nimport type {\n  ObfuscationMode,\n  CreditCardDisplayProps,\n  CreditCardInputProps\n} from '@pega/cosmos-react-core';\nimport { usePrevious } from '@pega/cosmos-react-core/lib/hooks';\n\nexport default {\n  title: 'Core/CreditCard'\n} as Meta;\n\ninterface CreditCardDemoProps {\n  value?: CreditCardDisplayProps['value'];\n  obfuscation?: ObfuscationMode;\n}\n\nexport const CreditCardDisplayDemo: Story<CreditCardDemoProps> = (args: CreditCardDemoProps) => (\n  <CreditCardDisplay value={args.value} formattingOptions={{ obfuscation: args.obfuscation }} />\n);\n\nCreditCardDisplayDemo.args = {\n  value: undefined,\n  obfuscation: 'none'\n};\n\nCreditCardDisplayDemo.argTypes = {\n  value: { control: { type: 'text' } },\n  obfuscation: { control: { type: 'inline-radio' }, options: ['none', 'partial', 'full'] }\n};\n\ninterface CreditCardStoryProps extends CreditCardInputProps {\n  showAdditionalInfo?: boolean;\n}\n\nexport const CreditCardInputDemo: Story<CreditCardStoryProps> = (args: CreditCardStoryProps) => {\n  const [value, setValue] = useState<string | undefined>(args.value);\n\n  const prev = usePrevious(args.value);\n  useEffect(() => {\n    if (prev !== args.value) setValue(args.value);\n  }, [prev, args.value]);\n\n  return (\n    <CreditCardInput\n      {...args}\n      value={value}\n      onChange={setValue}\n      additionalInfo={\n        args.showAdditionalInfo\n          ? {\n              heading: 'Additional Info',\n              content: 'Input your 15-16 digit credit card number'\n            }\n          : undefined\n      }\n    />\n  );\n};\n\nCreditCardInputDemo.args = {\n  value: undefined,\n  label: 'Credit card number',\n  labelHidden: false,\n  info: 'Enter your credit card number',\n  status: undefined,\n  required: false,\n  disabled: false,\n  readOnly: false,\n  showAdditionalInfo: true\n};\n\nCreditCardInputDemo.argTypes = {\n  value: { control: { type: 'text' } },\n  label: { control: { type: 'text' } },\n  labelHidden: { control: { type: 'boolean' } },\n  info: { control: { type: 'text' } },\n  status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n  required: { control: { type: 'boolean' } },\n  disabled: { control: { type: 'boolean' } },\n  readOnly: { control: { type: 'boolean' } },\n  showAdditionalInfo: { control: { type: 'boolean' } }\n};\n"]}

package/lib/core/Currency/Currency.stories.d.ts

@@ -1,8 +1,13 @@
 import { Meta, Story } from '@storybook/react';
-import { CurrencyDisplayProps, CurrencyInputProps } from '@pega/cosmos-react-core';
+import { CurrencyDisplayProps, CurrencyInputProps, OmitStrict } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const CurrencyInputDemo: Story<CurrencyInputProps>;
+declare type CurrencyStoryProps = OmitStrict<CurrencyInputProps, 'value' | 'onChange'> & {
+    value?: number;
+    onChange?: (value: string) => void;
+    showAdditionalInfo?: boolean;
+};
+export declare const CurrencyInputDemo: Story<Partial<CurrencyStoryProps>>;
 interface CurrencyDisplayStoryProps extends CurrencyDisplayProps {
     groupSeparators: boolean;
     fractionDigits: number;

package/lib/core/Currency/Currency.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Currency.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Currency/Currency.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAEL,oBAAoB,EAEpB,kBAAkB,EACnB,MAAM,yBAAyB,CAAC;;AAEjC,wBAGU;AAEV,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,kBAAkB,CAsBvD,CAAC;AAmCF,UAAU,yBAA0B,SAAQ,oBAAoB;IAC9D,eAAe,EAAE,OAAO,CAAC;IACzB,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IACrC,QAAQ,EAAE,YAAY,GAAG,aAAa,CAAC;IACvC,QAAQ,EAAE,UAAU,GAAG,SAAS,CAAC;CAClC;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,yBAAyB,CAgBhE,CAAC"}
+{"version":3,"file":"Currency.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Currency/Currency.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAEL,oBAAoB,EAEpB,kBAAkB,EAClB,UAAU,EAEX,MAAM,yBAAyB,CAAC;;AAEjC,wBAGU;AAEV,aAAK,kBAAkB,GAAG,UAAU,CAAC,kBAAkB,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAgDhE,CAAC;AAuCF,UAAU,yBAA0B,SAAQ,oBAAoB;IAC9D,eAAe,EAAE,OAAO,CAAC;IACzB,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IACrC,QAAQ,EAAE,YAAY,GAAG,aAAa,CAAC;IACvC,QAAQ,EAAE,UAAU,GAAG,SAAS,CAAC;CAClC;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,yBAAyB,CAgBhE,CAAC"}

package/lib/core/Currency/Currency.stories.js

@@ -1,15 +1,33 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
-import { CurrencyDisplay, CurrencyInput } from '@pega/cosmos-react-core';
+import { useEffect, useState } from 'react';
+import { CurrencyDisplay, CurrencyInput, usePrevious } from '@pega/cosmos-react-core';
 export default {
     title: 'Core/Currency',
     component: CurrencyInput
 };
 export const CurrencyInputDemo = (args) => {
-    const [value, setValue] = useState();
-    return (_jsx(CurrencyInput, { value: value, onChange: inputValue => setValue(inputValue), onBlur: inputValue => setValue(inputValue), currencyISOCode: args.currencyISOCode, alwaysShowISOCode: args.alwaysShowISOCode, showDecimal: args.showDecimal, showGroupSeparators: args.showGroupSeparators, step: args.step, label: args.label, labelHidden: args.labelHidden, info: args.info, status: args.status, required: args.required, disabled: args.disabled, readOnly: args.readOnly }, void 0));
+    const [value, setValue] = useState(args.value === undefined ? undefined : `${args.value}`);
+    const prev = usePrevious(args.value);
+    useEffect(() => {
+        if (prev !== args.value)
+            setValue(args.value === undefined ? undefined : `${args.value}`);
+    }, [prev, args.value]);
+    return (_jsx(CurrencyInput, { ...args, value: value, onChange: inputValue => {
+            setValue(inputValue);
+            args.onChange?.(inputValue);
+        }, onBlur: inputValue => {
+            args.onBlur?.(inputValue);
+        }, onFocus: inputValue => {
+            args.onFocus?.(inputValue);
+        }, currencyISOCode: args.currencyISOCode, alwaysShowISOCode: args.alwaysShowISOCode, showDecimal: args.showDecimal, showGroupSeparators: args.showGroupSeparators, step: args.step, label: args.label, labelHidden: args.labelHidden, info: args.info, status: args.status, required: args.required, disabled: args.disabled, readOnly: args.readOnly, additionalInfo: args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Input a number that will represent a monetary value.'
+            }
+            : undefined }));
 };
 CurrencyInputDemo.args = {
+    value: undefined,
     currencyISOCode: 'USD',
     alwaysShowISOCode: false,
     showDecimal: true,
@@ -21,11 +39,13 @@ CurrencyInputDemo.args = {
     status: undefined,
     required: false,
     disabled: false,
-    readOnly: false
+    readOnly: false,
+    showAdditionalInfo: true
 };
 CurrencyInputDemo.argTypes = {
+    value: { control: { type: 'number' } },
     currencyISOCode: {
-        options: ['USD', 'EUR', 'AUD', 'PLN', 'CZK', 'JPY'],
+        options: [undefined, 'USD', 'EUR', 'AUD', 'PLN', 'CZK', 'JPY'],
         control: { type: 'select' }
     },
     alwaysShowISOCode: { control: { type: 'boolean' } },
@@ -38,7 +58,8 @@ CurrencyInputDemo.argTypes = {
     status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },
     required: { control: { type: 'boolean' } },
     disabled: { control: { type: 'boolean' } },
-    readOnly: { control: { type: 'boolean' } }
+    readOnly: { control: { type: 'boolean' } },
+    showAdditionalInfo: { control: { type: 'boolean' } }
 };
 export const CurrencyDisplayDemo = (args) => {
     return (_jsx(CurrencyDisplay, { value: args.value, currencyISOCode: args.currencyISOCode, formattingOptions: {
@@ -47,7 +68,7 @@ export const CurrencyDisplayDemo = (args) => {
             currency: args.currency,
             negative: args.negative,
             notation: args.notation
-        } }, void 0));
+        } }));
 };
 CurrencyDisplayDemo.args = {
     value: undefined,

package/lib/core/Currency/Currency.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Currency.stories.js","sourceRoot":"","sources":["../../../src/core/Currency/Currency.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\n\nimport {\n  CurrencyDisplay,\n  CurrencyDisplayProps,\n  CurrencyInput,\n  CurrencyInputProps\n} from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Currency',\n  component: CurrencyInput\n} as Meta;\n\nexport const CurrencyInputDemo: Story<CurrencyInputProps> = (args: CurrencyInputProps) => {\n  const [value, setValue] = useState<string>();\n\n  return (\n    <CurrencyInput\n      value={value}\n      onChange={inputValue => setValue(inputValue)}\n      onBlur={inputValue => setValue(inputValue)}\n      currencyISOCode={args.currencyISOCode}\n      alwaysShowISOCode={args.alwaysShowISOCode}\n      showDecimal={args.showDecimal}\n      showGroupSeparators={args.showGroupSeparators}\n      step={args.step}\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      status={args.status}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n    />\n  );\n};\n\nCurrencyInputDemo.args = {\n  currencyISOCode: 'USD',\n  alwaysShowISOCode: false,\n  showDecimal: true,\n  showGroupSeparators: true,\n  step: 1,\n  label: 'Currency input',\n  labelHidden: false,\n  info: 'Enter a numerical value',\n  status: undefined,\n  required: false,\n  disabled: false,\n  readOnly: false\n};\n\nCurrencyInputDemo.argTypes = {\n  currencyISOCode: {\n    options: ['USD', 'EUR', 'AUD', 'PLN', 'CZK', 'JPY'],\n    control: { type: 'select' }\n  },\n  alwaysShowISOCode: { control: { type: 'boolean' } },\n  showDecimal: { control: { type: 'boolean' } },\n  showGroupSeparators: { control: { type: 'boolean' } },\n  step: { control: { type: 'number' } },\n  label: { control: { type: 'text' } },\n  labelHidden: { control: { type: 'boolean' } },\n  info: { control: { type: 'text' } },\n  status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n  required: { control: { type: 'boolean' } },\n  disabled: { control: { type: 'boolean' } },\n  readOnly: { control: { type: 'boolean' } }\n};\n\ninterface CurrencyDisplayStoryProps extends CurrencyDisplayProps {\n  groupSeparators: boolean;\n  fractionDigits: number;\n  currency: 'symbol' | 'code' | 'name';\n  negative: 'minus-sign' | 'parentheses';\n  notation: 'standard' | 'compact';\n}\n\nexport const CurrencyDisplayDemo: Story<CurrencyDisplayStoryProps> = (\n  args: CurrencyDisplayStoryProps\n) => {\n  return (\n    <CurrencyDisplay\n      value={args.value}\n      currencyISOCode={args.currencyISOCode}\n      formattingOptions={{\n        fractionDigits: args.fractionDigits,\n        groupSeparators: args.groupSeparators,\n        currency: args.currency,\n        negative: args.negative,\n        notation: args.notation\n      }}\n    />\n  );\n};\n\nCurrencyDisplayDemo.args = {\n  value: undefined,\n  currencyISOCode: 'USD',\n  groupSeparators: true,\n  fractionDigits: undefined,\n  currency: 'symbol',\n  negative: 'minus-sign',\n  notation: 'standard'\n};\n\nCurrencyDisplayDemo.argTypes = {\n  value: { control: { type: 'number' } },\n  currencyISOCode: {\n    options: [undefined, 'USD', 'EUR', 'AUD', 'PLN', 'CZK', 'JPY'],\n    control: { type: 'select' }\n  },\n  groupSeparators: { control: { type: 'boolean' } },\n  fractionDigits: { control: { type: 'number', min: 0, max: 20, step: 1 } },\n  negative: {\n    control: {\n      type: 'inline-radio'\n    },\n    options: ['minus-sign', 'parentheses']\n  },\n  currency: {\n    control: { type: 'select' },\n    options: ['symbol', 'code', 'name']\n  },\n  notation: {\n    control: { type: 'inline-radio' },\n    options: ['standard', 'compact']\n  }\n};\n"]}
+{"version":3,"file":"Currency.stories.js","sourceRoot":"","sources":["../../../src/core/Currency/Currency.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useEffect, useState } from 'react';\n\nimport {\n  CurrencyDisplay,\n  CurrencyDisplayProps,\n  CurrencyInput,\n  CurrencyInputProps,\n  OmitStrict,\n  usePrevious\n} from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Currency',\n  component: CurrencyInput\n} as Meta;\n\ntype CurrencyStoryProps = OmitStrict<CurrencyInputProps, 'value' | 'onChange'> & {\n  value?: number;\n  onChange?: (value: string) => void;\n  showAdditionalInfo?: boolean;\n};\n\nexport const CurrencyInputDemo: Story<Partial<CurrencyStoryProps>> = (\n  args: Partial<CurrencyStoryProps>\n) => {\n  const [value, setValue] = useState<string | undefined>(\n    args.value === undefined ? undefined : `${args.value}`\n  );\n\n  const prev = usePrevious(args.value);\n  useEffect(() => {\n    if (prev !== args.value) setValue(args.value === undefined ? undefined : `${args.value}`);\n  }, [prev, args.value]);\n\n  return (\n    <CurrencyInput\n      {...args}\n      value={value}\n      onChange={inputValue => {\n        setValue(inputValue);\n        args.onChange?.(inputValue);\n      }}\n      onBlur={inputValue => {\n        args.onBlur?.(inputValue);\n      }}\n      onFocus={inputValue => {\n        args.onFocus?.(inputValue);\n      }}\n      currencyISOCode={args.currencyISOCode}\n      alwaysShowISOCode={args.alwaysShowISOCode}\n      showDecimal={args.showDecimal}\n      showGroupSeparators={args.showGroupSeparators}\n      step={args.step}\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      status={args.status}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      additionalInfo={\n        args.showAdditionalInfo\n          ? {\n              heading: 'Additional Info',\n              content: 'Input a number that will represent a monetary value.'\n            }\n          : undefined\n      }\n    />\n  );\n};\n\nCurrencyInputDemo.args = {\n  value: undefined,\n  currencyISOCode: 'USD',\n  alwaysShowISOCode: false,\n  showDecimal: true,\n  showGroupSeparators: true,\n  step: 1,\n  label: 'Currency input',\n  labelHidden: false,\n  info: 'Enter a numerical value',\n  status: undefined,\n  required: false,\n  disabled: false,\n  readOnly: false,\n  showAdditionalInfo: true\n};\n\nCurrencyInputDemo.argTypes = {\n  value: { control: { type: 'number' } },\n  currencyISOCode: {\n    options: [undefined, 'USD', 'EUR', 'AUD', 'PLN', 'CZK', 'JPY'],\n    control: { type: 'select' }\n  },\n  alwaysShowISOCode: { control: { type: 'boolean' } },\n  showDecimal: { control: { type: 'boolean' } },\n  showGroupSeparators: { control: { type: 'boolean' } },\n  step: { control: { type: 'number' } },\n  label: { control: { type: 'text' } },\n  labelHidden: { control: { type: 'boolean' } },\n  info: { control: { type: 'text' } },\n  status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n  required: { control: { type: 'boolean' } },\n  disabled: { control: { type: 'boolean' } },\n  readOnly: { control: { type: 'boolean' } },\n  showAdditionalInfo: { control: { type: 'boolean' } }\n};\n\ninterface CurrencyDisplayStoryProps extends CurrencyDisplayProps {\n  groupSeparators: boolean;\n  fractionDigits: number;\n  currency: 'symbol' | 'code' | 'name';\n  negative: 'minus-sign' | 'parentheses';\n  notation: 'standard' | 'compact';\n}\n\nexport const CurrencyDisplayDemo: Story<CurrencyDisplayStoryProps> = (\n  args: CurrencyDisplayStoryProps\n) => {\n  return (\n    <CurrencyDisplay\n      value={args.value}\n      currencyISOCode={args.currencyISOCode}\n      formattingOptions={{\n        fractionDigits: args.fractionDigits,\n        groupSeparators: args.groupSeparators,\n        currency: args.currency,\n        negative: args.negative,\n        notation: args.notation\n      }}\n    />\n  );\n};\n\nCurrencyDisplayDemo.args = {\n  value: undefined,\n  currencyISOCode: 'USD',\n  groupSeparators: true,\n  fractionDigits: undefined,\n  currency: 'symbol',\n  negative: 'minus-sign',\n  notation: 'standard'\n};\n\nCurrencyDisplayDemo.argTypes = {\n  value: { control: { type: 'number' } },\n  currencyISOCode: {\n    options: [undefined, 'USD', 'EUR', 'AUD', 'PLN', 'CZK', 'JPY'],\n    control: { type: 'select' }\n  },\n  groupSeparators: { control: { type: 'boolean' } },\n  fractionDigits: { control: { type: 'number', min: 0, max: 20, step: 1 } },\n  negative: {\n    control: {\n      type: 'inline-radio'\n    },\n    options: ['minus-sign', 'parentheses']\n  },\n  currency: {\n    control: { type: 'select' },\n    options: ['symbol', 'code', 'name']\n  },\n  notation: {\n    control: { type: 'inline-radio' },\n    options: ['standard', 'compact']\n  }\n};\n"]}

package/lib/core/DateTime/DateTime.stories.d.ts

@@ -1,19 +1,50 @@
 import { Meta, Story } from '@storybook/react';
-import { DateInputProps, DateTimeInputProps, DateRangeInputProps, DayOfWeekInputProps, DurationInputProps, MonthInputProps, QuarterInputProps, TimeInputProps, WeekInputProps } from '@pega/cosmos-react-core';
+import { DateInputProps, DateTimeInputProps, DateRangeInputProps, DayOfWeekInputProps, DurationInputProps, MonthInputProps, QuarterInputProps, TimeInputProps, WeekInputProps, TimeRangeInputProps } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const DateInputDemo: Story<DateInputProps>;
-export declare const MonthInputDemo: Story<MonthInputProps>;
-export declare const WeekInputDemo: Story<WeekInputProps>;
-export declare const QuarterInputDemo: Story<QuarterInputProps>;
-export declare const DayOfWeekInputDemo: Story<DayOfWeekInputProps & {
+interface DateInputStoryProps extends DateInputProps {
+    showAdditionalInfo?: boolean;
+}
+interface MonthInputStoryProps extends MonthInputProps {
+    showAdditionalInfo?: boolean;
+}
+interface WeekInputStoryProps extends WeekInputProps {
+    showAdditionalInfo?: boolean;
+}
+interface QuarterInputStoryProps extends QuarterInputProps {
+    showAdditionalInfo?: boolean;
+}
+interface DayOfWeekInputStoryProps extends DayOfWeekInputProps {
+    showAdditionalInfo?: boolean;
+}
+interface TimeInputStoryProps extends TimeInputProps {
+    showAdditionalInfo?: boolean;
+}
+interface DateTimeInputStoryProps extends DateTimeInputProps {
+    showAdditionalInfo?: boolean;
+    showWeekNumber?: boolean;
+}
+interface DateRangeInputStoryProps extends DateRangeInputProps {
+    showAdditionalInfo?: boolean;
+    showToAdditionalInfo?: boolean;
+    showFromAdditionalInfo?: boolean;
+}
+interface DurationInputStoryProps extends DurationInputProps {
+    showAdditionalInfo?: boolean;
+}
+export declare const DateInputDemo: Story<DateInputStoryProps>;
+export declare const MonthInputDemo: Story<MonthInputStoryProps>;
+export declare const WeekInputDemo: Story<WeekInputStoryProps>;
+export declare const QuarterInputDemo: Story<QuarterInputStoryProps>;
+export declare const DayOfWeekInputDemo: Story<DayOfWeekInputStoryProps & {
     min?: never;
     max?: never;
 }>;
-export declare const TimeInputDemo: Story<TimeInputProps>;
-export declare const DateTimeInputDemo: Story<DateTimeInputProps>;
-export declare const DateRangeInputDemo: Story<DateRangeInputProps>;
-export declare const DurationInputDemo: Story<DurationInputProps & {
+export declare const TimeInputDemo: Story<TimeInputStoryProps>;
+export declare const DateTimeInputDemo: Story<DateTimeInputStoryProps>;
+export declare const DateRangeInputDemo: Story<DateRangeInputStoryProps>;
+export declare const TimeRangeInputDemo: Story<TimeRangeInputProps>;
+export declare const DurationInputDemo: Story<DurationInputStoryProps & {
     min?: never;
     max?: never;
 }>;

package/lib/core/DateTime/DateTime.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateTime.stories.d.ts","sourceRoot":"","sources":["../../../src/core/DateTime/DateTime.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAEL,cAAc,EAEd,kBAAkB,EAElB,mBAAmB,EAEnB,mBAAmB,EAEnB,kBAAkB,EAGlB,eAAe,EAEf,iBAAiB,EAEjB,cAAc,EAEd,cAAc,EACf,MAAM,yBAAyB,CAAC;;AAEjC,wBAqBU;AAEV,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,cAAc,CAe/C,CAAC;AAWF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,eAAe,CAcjD,CAAC;AAMF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,cAAc,CAc/C,CAAC;AAMF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,iBAAiB,CAcrD,CAAC;AAMF,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,mBAAmB,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC;IAAC,GAAG,CAAC,EAAE,KAAK,CAAA;CAAE,CAaxF,CAAC;AAWF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,cAAc,CAiB/C,CAAC;AAeF,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,kBAAkB,CAkBvD,CAAC;AAiBF,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,mBAAmB,CAezD,CAAC;AAiBF,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,kBAAkB,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC;IAAC,GAAG,CAAC,EAAE,KAAK,CAAA;CAAE,CAiBtF,CAAC"}
+{"version":3,"file":"DateTime.stories.d.ts","sourceRoot":"","sources":["../../../src/core/DateTime/DateTime.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAEL,cAAc,EAEd,kBAAkB,EAElB,mBAAmB,EAEnB,mBAAmB,EAEnB,kBAAkB,EAGlB,eAAe,EAEf,iBAAiB,EAEjB,cAAc,EAEd,cAAc,EAEd,mBAAmB,EAEpB,MAAM,yBAAyB,CAAC;;AAEjC,wBA+BU;AAEV,UAAU,mBAAoB,SAAQ,cAAc;IAClD,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,UAAU,oBAAqB,SAAQ,eAAe;IACpD,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,UAAU,mBAAoB,SAAQ,cAAc;IAClD,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,UAAU,sBAAuB,SAAQ,iBAAiB;IACxD,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,UAAU,wBAAyB,SAAQ,mBAAmB;IAC5D,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,UAAU,mBAAoB,SAAQ,cAAc;IAClD,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,UAAU,uBAAwB,SAAQ,kBAAkB;IAC1D,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,UAAU,wBAAyB,SAAQ,mBAAmB;IAC5D,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC;AAED,UAAU,uBAAwB,SAAQ,kBAAkB;IAC1D,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,mBAAmB,CAiCpD,CAAC;AAWF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,oBAAoB,CAgCtD,CAAC;AAUF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,mBAAmB,CAgCpD,CAAC;AAUF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,sBAAsB,CAgC1D,CAAC;AAUF,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,wBAAwB,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC;IAAC,GAAG,CAAC,EAAE,KAAK,CAAA;CAAE,CA8B7F,CAAC;AAWF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,mBAAmB,CAmCpD,CAAC;AAeF,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,uBAAuB,CAsC5D,CAAC;AAiBF,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,wBAAwB,CA4C9D,CAAC;AAuBF,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,mBAAmB,CA4BzD,CAAC;AAiBF,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,uBAAuB,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC;IAAC,GAAG,CAAC,EAAE,KAAK,CAAA;CAAE,CA+B3F,CAAC"}

package/lib/core/DateTime/DateTime.stories.js

@@ -1,58 +1,144 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
-import { DateInput, DateTimeInput, DateRangeInput, DayOfWeekInput, DurationInput, Format, MonthInput, QuarterInput, TimeInput, WeekInput } from '@pega/cosmos-react-core';
+import { useEffect, useState } from 'react';
+import { DateInput, DateTimeInput, DateRangeInput, DayOfWeekInput, DurationInput, Format, MonthInput, QuarterInput, TimeInput, WeekInput, usePrevious, TimeRangeInput } from '@pega/cosmos-react-core';
 export default {
     title: 'Core/DateTime/Input',
     args: {
+        value: undefined,
         status: undefined,
+        label: '',
         labelHidden: false,
         required: false,
         disabled: false,
         readOnly: false,
         min: undefined,
-        max: undefined
+        max: undefined,
+        showAdditionalInfo: true,
+        mode: 'time'
     },
     argTypes: {
-        status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },
+        value: { control: { type: 'date' } },
+        status: {
+            options: [undefined, 'success', 'warning', 'error', 'pending'],
+            control: { type: 'select' }
+        },
         label: { control: { type: 'text' } },
         labelHidden: { control: { type: 'boolean' } },
         required: { control: { type: 'boolean' } },
         disabled: { control: { type: 'boolean' } },
         readOnly: { control: { type: 'boolean' } },
         min: { control: { type: 'date' } },
-        max: { control: { type: 'date' } }
+        max: { control: { type: 'date' } },
+        showAdditionalInfo: { control: { type: 'boolean' } },
+        mode: { options: ['time', 'datetime'], control: { type: 'select' } }
     }
 };
 export const DateInputDemo = (args) => {
-    return (_jsx(DateInput, { value: new Date(), showWeekNumber: args.showWeekNumber, status: args.status, label: args.label, labelHidden: args.labelHidden, required: args.required, disabled: args.disabled, readOnly: args.readOnly, min: args.min, max: args.max }, void 0));
+    const [value, setValue] = useState(args.value);
+    const prev = usePrevious(args.value);
+    useEffect(() => {
+        if (prev !== args.value)
+            setValue(args.value);
+    }, [prev, args.value]);
+    return (_jsx(DateInput, { additionalInfo: args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Select a date'
+            }
+            : undefined, value: value, showWeekNumber: args.showWeekNumber, status: args.status, label: args.label, labelHidden: args.labelHidden, required: args.required, disabled: args.disabled, readOnly: args.readOnly, min: args.min, max: args.max, onBlur: ({ valueAsISOString, state }) => {
+            if (state !== 'incomplete' && state !== 'invalid')
+                setValue(valueAsISOString);
+        } }));
 };
 DateInputDemo.args = {
     showWeekNumber: false,
-    label: 'DateTime input'
+    label: 'Date input'
 };
 DateInputDemo.argTypes = {
     showWeekNumber: { control: { type: 'boolean' } }
 };
 export const MonthInputDemo = (args) => {
-    return (_jsx(MonthInput, { value: new Date(), status: args.status, label: args.label, labelHidden: args.labelHidden, required: args.required, disabled: args.disabled, readOnly: args.readOnly, min: args.min, max: args.max }, void 0));
+    const [value, setValue] = useState(args.value);
+    const prev = usePrevious(args.value);
+    useEffect(() => {
+        if (prev !== args.value)
+            setValue(args.value);
+    }, [prev, args.value]);
+    return (_jsx(MonthInput, { additionalInfo: args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Select a date'
+            }
+            : undefined, value: value, status: args.status, label: args.label, labelHidden: args.labelHidden, required: args.required, disabled: args.disabled, readOnly: args.readOnly, min: args.min, max: args.max, onBlur: ({ valueAsISOString, state }) => {
+            if (state !== 'incomplete' && state !== 'invalid')
+                setValue(valueAsISOString);
+        } }));
 };
 MonthInputDemo.args = {
     label: 'Month input'
 };
+MonthInputDemo.argTypes = {
+    label: { control: { type: 'string' } }
+};
 export const WeekInputDemo = (args) => {
-    return (_jsx(WeekInput, { value: new Date(), status: args.status, label: args.label, labelHidden: args.labelHidden, required: args.required, disabled: args.disabled, readOnly: args.readOnly, min: args.min, max: args.max }, void 0));
+    const [value, setValue] = useState(args.value);
+    const prev = usePrevious(args.value);
+    useEffect(() => {
+        if (prev !== args.value)
+            setValue(args.value);
+    }, [prev, args.value]);
+    return (_jsx(WeekInput, { additionalInfo: args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Select a date'
+            }
+            : undefined, value: value, status: args.status, label: args.label, labelHidden: args.labelHidden, required: args.required, disabled: args.disabled, readOnly: args.readOnly, min: args.min, max: args.max, onBlur: ({ valueAsISOString, state }) => {
+            if (state !== 'incomplete' && state !== 'invalid')
+                setValue(valueAsISOString);
+        } }));
 };
 WeekInputDemo.args = {
     label: 'Week input'
 };
+WeekInputDemo.argTypes = {
+    label: { control: { type: 'string' } }
+};
 export const QuarterInputDemo = (args) => {
-    return (_jsx(QuarterInput, { value: new Date(), status: args.status, label: args.label, labelHidden: args.labelHidden, required: args.required, disabled: args.disabled, readOnly: args.readOnly, min: args.min, max: args.max }, void 0));
+    const [value, setValue] = useState(args.value);
+    const prev = usePrevious(args.value);
+    useEffect(() => {
+        if (prev !== args.value)
+            setValue(args.value);
+    }, [prev, args.value]);
+    return (_jsx(QuarterInput, { additionalInfo: args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Select a date'
+            }
+            : undefined, value: value, status: args.status, label: args.label, labelHidden: args.labelHidden, required: args.required, disabled: args.disabled, readOnly: args.readOnly, min: args.min, max: args.max, onBlur: ({ valueAsISOString, state }) => {
+            if (state !== 'incomplete' && state !== 'invalid')
+                setValue(valueAsISOString);
+        } }));
 };
 QuarterInputDemo.args = {
     label: 'Quarter input'
 };
+QuarterInputDemo.argTypes = {
+    label: { control: { type: 'string' } }
+};
 export const DayOfWeekInputDemo = (args) => {
-    return (_jsx(DayOfWeekInput, { status: args.status, label: args.label, labelHidden: args.labelHidden, required: args.required, disabled: args.disabled, readOnly: args.readOnly }, void 0));
+    const [value, setValue] = useState(args.value);
+    const prev = usePrevious(args.value);
+    useEffect(() => {
+        if (prev !== args.value)
+            setValue(args.value);
+    }, [prev, args.value]);
+    return (_jsx(DayOfWeekInput, { additionalInfo: args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Select a date'
+            }
+            : undefined, value: value, status: args.status, label: args.label, labelHidden: args.labelHidden, required: args.required, disabled: args.disabled, readOnly: args.readOnly, onChange: setValue }));
 };
 DayOfWeekInputDemo.args = {
     label: 'Day of the week input'
@@ -62,7 +148,21 @@ DayOfWeekInputDemo.argTypes = {
     max: { table: { disable: true } }
 };
 export const TimeInputDemo = (args) => {
-    return (_jsx(TimeInput, { value: new Date(), withSeconds: args.withSeconds, clockFormat: args.clockFormat, pickerInterval: args.pickerInterval, status: args.status, label: args.label, labelHidden: args.labelHidden, required: args.required, disabled: args.disabled, readOnly: args.readOnly, min: args.min, max: args.max }, void 0));
+    const [value, setValue] = useState(args.value);
+    const prev = usePrevious(args.value);
+    useEffect(() => {
+        if (prev !== args.value)
+            setValue(args.value);
+    }, [prev, args.value]);
+    return (_jsx(TimeInput, { additionalInfo: args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Select a date'
+            }
+            : undefined, value: value, withSeconds: args.withSeconds, clockFormat: args.clockFormat, pickerInterval: args.pickerInterval, status: args.status, label: args.label, labelHidden: args.labelHidden, required: args.required, disabled: args.disabled, readOnly: args.readOnly, min: args.min, max: args.max, onBlur: ({ valueAsISOString, state }) => {
+            if (state !== 'incomplete' && state !== 'invalid')
+                setValue(valueAsISOString);
+        } }));
 };
 TimeInputDemo.args = {
     withSeconds: false,
@@ -76,7 +176,21 @@ TimeInputDemo.argTypes = {
     pickerInterval: { options: [undefined, 15, 30, 60], control: { type: 'select' } }
 };
 export const DateTimeInputDemo = (args) => {
-    return (_jsx(DateTimeInput, { value: new Date(), showWeekNumber: args.showWeekNumber, withSeconds: args.withSeconds, clockFormat: args.clockFormat, pickerInterval: args.pickerInterval, status: args.status, label: args.label, labelHidden: args.labelHidden, required: args.required, disabled: args.disabled, readOnly: args.readOnly, min: args.min, max: args.max }, void 0));
+    const [value, setValue] = useState(args.value);
+    const prev = usePrevious(args.value);
+    useEffect(() => {
+        if (prev !== args.value)
+            setValue(args.value);
+    }, [prev, args.value]);
+    return (_jsx(DateTimeInput, { additionalInfo: args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Select a date'
+            }
+            : undefined, value: value, showWeekNumber: args.showWeekNumber, withSeconds: args.withSeconds, clockFormat: args.clockFormat, pickerInterval: args.pickerInterval, status: args.status, label: args.label, labelHidden: args.labelHidden, required: args.required, disabled: args.disabled, readOnly: args.readOnly, min: args.min, max: args.max, onBlur: ({ valueAsISOString, state }) => {
+            if (state !== 'incomplete' && state !== 'invalid')
+                setValue(valueAsISOString);
+        } }));
 };
 DateTimeInputDemo.args = {
     showWeekNumber: false,
@@ -92,27 +206,86 @@ DateTimeInputDemo.argTypes = {
     pickerInterval: { options: [undefined, 15, 30, 60], control: { type: 'select' } }
 };
 export const DateRangeInputDemo = (args) => {
-    return (_jsx(DateRangeInput, { fromValue: new Date(), toValue: new Date(), showWeekNumber: args.showWeekNumber, status: args.status, fromLabel: args.fromLabel, toLabel: args.toLabel, labelHidden: args.labelHidden, required: args.required, disabled: args.disabled, readOnly: args.readOnly }, void 0));
+    const [value, setValue] = useState(args.value);
+    const prev = usePrevious(args.value);
+    useEffect(() => {
+        if (prev !== args.value)
+            setValue(args.value);
+    }, [prev, args.value]);
+    return (_jsx(DateRangeInput, { toAdditionalInfo: args.showToAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Select a to date'
+            }
+            : undefined, fromAdditionalInfo: args.showFromAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Select a from date'
+            }
+            : undefined, value: value, onChange: ({ start, end }) => {
+            if (!start.state && !end.state)
+                setValue({ start: start.valueAsISOString, end: end.valueAsISOString });
+        }, showWeekNumber: args.showWeekNumber, status: args.status, label: args.label, fromLabel: args.fromLabel, toLabel: args.toLabel, labelHidden: args.labelHidden, required: args.required, disabled: args.disabled, readOnly: args.readOnly }));
 };
 DateRangeInputDemo.args = {
     showWeekNumber: false,
+    label: 'Dates of stay',
     fromLabel: 'Check in',
-    toLabel: 'Check out'
+    toLabel: 'Check out',
+    showFromAdditionalInfo: true,
+    showToAdditionalInfo: true
 };
 DateRangeInputDemo.argTypes = {
     showWeekNumber: { control: { type: 'boolean' } },
+    label: { control: { type: 'text' } },
     fromLabel: { control: { type: 'text' } },
     toLabel: { control: { type: 'text' } },
-    label: { table: { disable: true } },
     min: { table: { disable: true } },
-    max: { table: { disable: true } }
+    max: { table: { disable: true } },
+    showAdditionalInfo: { table: { disable: true } },
+    showFromAdditionalInfo: { control: { type: 'boolean' } },
+    showToAdditionalInfo: { control: { type: 'boolean' } }
+};
+export const TimeRangeInputDemo = (args) => {
+    const [value, setValue] = useState(args.value);
+    const prevValue = usePrevious(args.value);
+    useEffect(() => {
+        if (prevValue?.start !== args.value?.start || prevValue?.end !== args.value?.end) {
+            setValue(args.value);
+        }
+    }, [prevValue?.start, prevValue?.end, args.value?.start, args.value?.end]);
+    return (_jsx(TimeRangeInput, { value: value, onChange: newState => setValue({ start: newState.start.valueAsTimestamp, end: newState.end.valueAsTimestamp }), label: args.label, status: args.status, fromLabel: args.fromLabel, toLabel: args.toLabel, labelHidden: args.labelHidden, required: args.required, disabled: args.disabled, readOnly: args.readOnly, mode: args.mode, withSeconds: args.withSeconds }));
+};
+TimeRangeInputDemo.args = {
+    fromLabel: 'Meeting start',
+    toLabel: 'Meeting end',
+    withSeconds: false
+};
+TimeRangeInputDemo.argTypes = {
+    fromLabel: { control: { type: 'text' } },
+    toLabel: { control: { type: 'text' } },
+    label: { control: { type: 'text' } },
+    min: { table: { disable: true } },
+    max: { table: { disable: true } },
+    withSeconds: { control: { type: 'boolean' } }
 };
 export const DurationInputDemo = (args) => {
     const [value, setValue] = useState(args.value);
-    return (_jsx(DurationInput, { value: value, onChange: setValue, format: args.format, status: args.status, label: args.label, labelHidden: args.labelHidden, required: args.required, disabled: args.disabled, readOnly: args.readOnly }, void 0));
+    const prev = usePrevious(args.value);
+    useEffect(() => {
+        if (prev !== args.value)
+            setValue(args.value);
+    }, [prev, args.value]);
+    return (_jsx(DurationInput, { additionalInfo: args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Select a duration'
+            }
+            : undefined, value: value, onChange: setValue, format: args.format, status: args.status, label: args.label, labelHidden: args.labelHidden, required: args.required, disabled: args.disabled, readOnly: args.readOnly }));
 };
 DurationInputDemo.args = {
     value: 86400000,
+    // eslint-disable-next-line demo-patterns/literal-args
     format: Format.Seconds,
     label: 'Duration input'
 };