diff --git a/player/react/src/lib/components/index.ts b/player/react/src/lib/components/index.ts index a94397b61..6966f954e 100644 --- a/player/react/src/lib/components/index.ts +++ b/player/react/src/lib/components/index.ts @@ -9,6 +9,7 @@ import * as column from './ui-column'; import * as combobox from './ui-combobox'; import * as contentSwitcher from './ui-content-switcher'; import * as dropdown from './ui-dropdown'; +import * as datePicker from './ui-date-picker'; import * as grid from './ui-grid'; import * as numberinput from './ui-number-input'; import * as radio from './ui-radio'; @@ -45,6 +46,7 @@ export const allComponents = { contentSwitcher, column, dropdown, + datePicker, grid, loading, inlineLoading, diff --git a/player/react/src/lib/components/ui-date-picker.tsx b/player/react/src/lib/components/ui-date-picker.tsx new file mode 100644 index 000000000..f722e13f7 --- /dev/null +++ b/player/react/src/lib/components/ui-date-picker.tsx @@ -0,0 +1,128 @@ +import React from 'react'; +import { + DatePicker, + DatePickerInput +} from '@carbon/react'; +import { commonSlots, slotsDisabled } from '../common-slots'; +import { SendSignal, CssClasses } from '../types'; +import { stringToCssClassName } from '../utils'; + +export interface DatePickerState { + type: string; + id: string; + placeholder?: string; + disabled?: boolean; + invalid?: boolean; + invalidText?: string; + rangeInvalidText?: string; + light?: boolean; + size?: string; + kind?: string; + dateFormat?: string; + value?: string; + rangeStartLabel?: string; + rangeEndLabel?: string; + rangePlaceholder?: string; + cssClasses?: CssClasses[]; + codeContext: { + name: string; + }; + style?: any; +} + +export const type = 'date-picker'; + +export const slots = { + ...commonSlots, + ...slotsDisabled, + dateFormat: 'string', + kind: 'string', + placeholder: 'string', + size: 'string', + invalidText: 'string', + rangeStartLabel: 'string', + rangeEndLabel: 'string', + rangePlaceholder: 'string', + rangeInvalidText: 'string', + value: 'string', + invalid: 'boolean', + setInvalid: (state: DatePickerState) => ({ + ...state, + invalid: true + }), + setValid: (state: DatePickerState) => ({ + ...state, + invalid: false + }), + toggleValid: (state: DatePickerState) => ({ + ...state, + invalid: !state.invalid + }), + light: 'boolean', + setLight: (state: DatePickerState) => ({ + ...state, + light: true + }), + setDark: (state: DatePickerState) => ({ + ...state, + light: false + }), + toggleLight: (state: DatePickerState) => ({ + ...state, + light: !state.light + }) +}; + +export const signals = ['valueChange', 'click']; + +export const UIDatePicker = ({ state, sendSignal }: { + state: DatePickerState; + setState: (state: any) => void; + setGlobalState: (state: any) => void; + sendSignal: SendSignal; +}) => { + if (state.type !== 'date-picker') { + // eslint-disable-next-line react/jsx-no-useless-fragment + return <></>; + } + + let cssClasses = state.cssClasses?.map((cc: any) => cc.id).join(' ') || ''; + + if (state.style) { + if (cssClasses.length > 0) { + cssClasses += ' '; + } + cssClasses += stringToCssClassName(state.codeContext.name); + } + + return <DatePicker + className={cssClasses} + dateFormat={state.dateFormat} + datePickerType={state.kind} + value={state.value} + light={state.light} + onClick={() => sendSignal(state.id, 'click')} + onChange={(event: any) => { + sendSignal(state.id, 'valueChange', [event[0].toISOString()], { ...state, value: event[0].toISOString() }); + }}> + <DatePickerInput + id={state.id} + placeholder={state.placeholder} + labelText={state.rangeStartLabel} + size={state.size} + disabled={state.disabled} + invalid={state.invalid} + invalidText={state.invalidText}/> + { + state.kind === 'range' + && <DatePickerInput + id={`${state.id}-end`} + placeholder={state.placeholder} + labelText={state.rangePlaceholder} + size={state.size} + disabled={state.disabled} + invalid={state.invalid} + invalidText={state.rangeInvalidText} /> + } + </DatePicker>; +}; diff --git a/player/react/src/lib/utils.tsx b/player/react/src/lib/utils.tsx index 7c335518a..ace85aafe 100644 --- a/player/react/src/lib/utils.tsx +++ b/player/react/src/lib/utils.tsx @@ -10,6 +10,7 @@ import { UICodeSnippet } from './components/ui-code-snippet'; import { UIColumn } from './components/ui-column'; import { UIComboBox } from './components/ui-combobox'; import { UIContentSwitcher } from './components/ui-content-switcher'; +import { UIDatePicker } from './components/ui-date-picker'; import { UIDropdown } from './components/ui-dropdown'; import { UIExpandableTile } from './components/ui-expandable-tile'; import { UIGrid } from './components/ui-grid'; @@ -238,6 +239,9 @@ export const renderComponents = ( case 'content-switcher': return <UIContentSwitcher key={state.id} state={state} sendSignal={sendSignal} setState={setState} setGlobalState={setGlobalState} />; + case 'date-picker': + return <UIDatePicker key={state.id} state={state} sendSignal={sendSignal} setState={setState} setGlobalState={setGlobalState} />; + case 'dropdown': return <UIDropdown key={state.id} state={state} sendSignal={sendSignal} setState={setState} setGlobalState={setGlobalState} />; diff --git a/sdk/react/src/lib/assets/component-icons/date-picker.svg b/sdk/react/src/lib/assets/component-icons/date-picker.svg new file mode 100644 index 000000000..f06ba1887 --- /dev/null +++ b/sdk/react/src/lib/assets/component-icons/date-picker.svg @@ -0,0 +1,15 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="89" height="39" viewBox="0 0 89 39"> + <g id="Group_1" data-name="Group 1" transform="translate(-539 -508)"> + <g id="label_text" data-name="label text" transform="translate(539 508)"> + <rect id="skeleton" width="40" height="8" fill="#e8e8e8"/> + </g> + <g id="input_background" data-name="input background" transform="translate(539 523)"> + <rect id="input" width="89" height="24" fill="#e8e8e8"/> + <rect id="border-bottom" width="89" height="1" transform="translate(0 23)" fill="#8d8d8d" opacity="0"/> + </g> + <g id="Planning_Time_calendar" data-name="Planning / Time / calendar" transform="translate(596 527)"> + <rect id="base" width="16" height="16" fill="#fff" opacity="0"/> + <path id="Path_10134" data-name="Path 10134" d="M130-1941h-2v-1h-1v1h-4v-1h-1v1h-2a.945.945,0,0,0-1,1v10a.945.945,0,0,0,1,1h10a.945.945,0,0,0,1-1v-10A.945.945,0,0,0,130-1941Zm0,11H120v-7h10Zm0-8H120v-2h2v1h1v-1h4v1h1v-1h2Z" transform="translate(-109 1943)" fill="#161616" fill-rule="evenodd"/> + </g> + </g> +</svg> \ No newline at end of file diff --git a/sdk/react/src/lib/components/settings-context-pane.tsx b/sdk/react/src/lib/components/settings-context-pane.tsx index c099bfa18..88b7bc0cd 100644 --- a/sdk/react/src/lib/components/settings-context-pane.tsx +++ b/sdk/react/src/lib/components/settings-context-pane.tsx @@ -237,7 +237,7 @@ export const SettingsContextPane = ({ </> } { - !selectedComponent && <> + !selectedComponent && <div className={cx(styleContextPaneStyle)}> <Checkbox id='setFragmentAsTemplate' checked={fragment.labels && fragment.labels.includes('template')} @@ -291,7 +291,7 @@ export const SettingsContextPane = ({ className={tooltipStyle}> micro layout </DefinitionTooltip> - </> + </div> } </div> } diff --git a/sdk/react/src/lib/fragment-components/a-date-picker.tsx b/sdk/react/src/lib/fragment-components/a-date-picker.tsx new file mode 100644 index 000000000..b11f8c630 --- /dev/null +++ b/sdk/react/src/lib/fragment-components/a-date-picker.tsx @@ -0,0 +1,416 @@ +import React, { useState } from 'react'; +import { + DatePicker, + DatePickerInput, + Dropdown, + Checkbox, + TextInput +} from '@carbon/react'; +import { AComponent, ComponentInfo } from './a-component'; +import image from './../assets/component-icons/date-picker.svg'; +import { + angularClassNamesFromComponentObj, + nameStringToVariableString, + reactClassNamesFromComponentObj +} from '../helpers/tools'; +import { css, cx } from 'emotion'; + +const preventCheckEventStyle = css` + pointer-events: none; +`; + +const checkboxStyle = css` + padding-top: 0.5rem; +`; + +export const ADatePickerSettingsUI = ({ selectedComponent, setComponent }: any) => { + const [showRangePlaceholder, setShowRangePlaceholder] = useState(false); + const [rangePlaceholder, setRangePlaceholder] = useState('Range placeholder'); + + const size = [ + { id: 'sm', text: 'Small' }, + { id: 'md', text: 'Medium' }, + { id: 'lg', text: 'Large' } + ]; + + const datePickerType = [ + { id: 'simple', text: 'Simple' }, + { id: 'single', text: 'Single with calender' }, + { id: 'range', text: 'Range with calender' } + ]; + + return <> + <Checkbox + labelText='Light' + id='light' + checked={selectedComponent.light} + onChange={(_: any) => setComponent({ + ...selectedComponent, + light: !selectedComponent.light + })} /> + <Checkbox + labelText='Disabled' + id='disable' + checked={selectedComponent.disabled} + onChange={(_: any) => setComponent({ + ...selectedComponent, + disabled: !selectedComponent.disabled + })} /> + <Dropdown + id='datepicker-variation' + label='Date picker type' + titleText='Date picker type' + items={datePickerType} + selectedItem={datePickerType.find(item => item.id === selectedComponent.kind)} + itemToString={(item: any) => (item ? item.text : '')} + onChange={(event: any) => setComponent({ + ...selectedComponent, + kind: event.selectedItem.id, + rangeEndLabel: event.selectedItem.id === 'range' ? 'Range end' : undefined + })} /> + { + (selectedComponent.kind === 'single' || selectedComponent.kind === 'range') && + <TextInput + id='date-format' + value={selectedComponent.dateFormat} + labelText='Date format' + onChange={(event: any) => setComponent({ + ...selectedComponent, + dateFormat: event.currentTarget.value + })} /> + } + <TextInput + id='placeholder' + value={selectedComponent.placeholder} + labelText='Placeholder' + onChange={(event: any) => setComponent({ + ...selectedComponent, + placeholder: event.currentTarget.value + })} /> + {selectedComponent.kind === 'range' && + <Checkbox + className={checkboxStyle} + labelText='Override range placeholder' + id='override-range-placeholder' + checked={showRangePlaceholder} + onChange={(_: any, { checked }: any) => { + setShowRangePlaceholder(checked); + setComponent({ + ...selectedComponent, + rangePlaceholder: checked ? rangePlaceholder : undefined + }); + }} /> + } + { + showRangePlaceholder + && <TextInput + id='range-placeholder' + value={selectedComponent.rangePlaceholder} + labelText='Range placeholder' + onChange={(event: any) => { + setRangePlaceholder(event.currentTarget.value); + setComponent({ + ...selectedComponent, + rangePlaceholder: event.currentTarget.value + }); + }} /> + } + <Dropdown + id='size-select' + label='Size' + titleText='Size' + items={size} + selectedItem={size.find(item => item.id === selectedComponent.size)} + itemToString={(item: any) => (item ? item.text : '')} + onChange={(event: any) => setComponent({ + ...selectedComponent, + size: event.selectedItem.id + })} /> + <TextInput + id='range-start-label' + value={selectedComponent.rangeStartLabel} + labelText={selectedComponent.kind === 'range' ? 'Date picker range start label' : 'Date picker label'} + onChange={(event: any) => setComponent({ + ...selectedComponent, + rangeStartLabel: event.currentTarget.value + })} /> + { + selectedComponent.kind === 'range' + && <TextInput + id='range-end-label' + value={selectedComponent.rangeEndLabel} + labelText='Date picker range end label' + onChange={(event: any) => setComponent({ + ...selectedComponent, + rangeEndLabel: event.currentTarget.value + })} /> + } + <Checkbox + className={checkboxStyle} + labelText='Invalid' + id='invalid' + checked={selectedComponent.invalid} + onChange={(_: any) => setComponent({ + ...selectedComponent, + invalid: !selectedComponent.invalid + })} /> + <TextInput + id='invalid-text' + value={selectedComponent.invalidText} + labelText='Invalid text' + onChange={(event: any) => setComponent({ + ...selectedComponent, + invalidText: event.currentTarget.value + })} /> + { + selectedComponent.kind === 'range' + && <TextInput + id='range-invalid-text' + value={selectedComponent.rangeInvalidText} + labelText='Date picker range invalid text' + onChange={(event: any) => setComponent({ + ...selectedComponent, + rangeInvalidText: event.currentTarget.value + })} /> + } + </>; +}; + +export const ADatePickerCodeUI = ({ selectedComponent, setComponent }: any) => <TextInput + value={selectedComponent.codeContext?.name} + labelText='Input name' + onChange={(event: any) => setComponent({ + ...selectedComponent, + codeContext: { + ...selectedComponent.codeContext, + name: event.currentTarget.value + } + })} +/>; + +export const ADatePicker = ({ + componentObj, + ...rest +}: any) => { + return ( + <AComponent + componentObj={componentObj} + rejectDrop={true} + {...rest}> + { + <DatePicker + id={componentObj.id} + className={cx(preventCheckEventStyle, componentObj.cssClasses?.map((cc: any) => cc.id).join(' '))} + dateFormat={componentObj.dateFormat} + datePickerType={componentObj.kind} + light={componentObj.light}> + <DatePickerInput + id={componentObj.id} + placeholder={componentObj.placeholder} + disabled={componentObj.disabled} + invalid={componentObj.invalid} + invalidText={componentObj.invalidText} + labelText={componentObj.rangeStartLabel} + size={componentObj.size} /> + { + componentObj.kind === 'range' + && <DatePickerInput + id={`${componentObj.id}-end`} + placeholder={componentObj.rangePlaceholder || componentObj.placeholder} + labelText={componentObj.rangeEndLabel} + size={componentObj.size} + disabled={componentObj.disabled} + invalid={componentObj.invalid} + invalidText={componentObj.rangeInvalidText} /> + } + </DatePicker> + } + </AComponent> + ); +}; + +export const componentInfo: ComponentInfo = { + component: ADatePicker, + settingsUI: ADatePickerSettingsUI, + codeUI: ADatePickerCodeUI, + keywords: ['datepicker', 'date', 'picker'], + name: 'Date Picker', + type: 'date-picker', + defaultComponentObj: { + type: 'date-picker', + rangeStartLabel: 'Label' + }, + image, + codeExport: { + angular: { + latest: { + inputs: ({ json }) => `@Input() ${nameStringToVariableString(json.codeContext?.name)}Value: (string | Date)[] + = ${json.value ? json.value : "['']"}; + @Input() ${nameStringToVariableString(json.codeContext?.name)}Theme: "light" | "dark" = "${json.light ? 'light' : 'dark'}"; + @Input() ${nameStringToVariableString(json.codeContext?.name)}RangeStartLabel = "${json.rangeStartLabel}"; + @Input() ${nameStringToVariableString(json.codeContext?.name)}RangeEndLabel = "${json.rangeEndLabel ?? ''}"; + @Input() ${nameStringToVariableString(json.codeContext?.name)}IsDisabled = ${!!json.disabled}; + @Input() ${nameStringToVariableString(json.codeContext?.name)}IsInvalid = ${!!json.invalid}; + @Input() ${nameStringToVariableString(json.codeContext?.name)}InvalidText = "${json.invalidText ?? ''}"; + @Input() ${nameStringToVariableString(json.codeContext?.name)}Placeholder = "${json.placeholder ?? 'mm/dd/yyyy'}"; + @Input() ${nameStringToVariableString(json.codeContext?.name)}RangePlaceholder = "${json.rangePlaceholder ?? ''}"; + @Input() ${nameStringToVariableString(json.codeContext?.name)}Size: "sm" | "md" | "lg" = "${json.size || 'md'}"; + @Input() ${nameStringToVariableString(json.codeContext?.name)}DateFormat = "${json.dateFormat || 'm/d/Y'}";`, + outputs: ({ json }) => `@Output() ${nameStringToVariableString(json.codeContext?.name)}ValueChange = new EventEmitter();`, + imports: ['DatePickerModule'], + code: ({ json }) => { + return `<cds-date-picker + ${angularClassNamesFromComponentObj(json)} + [theme]="${nameStringToVariableString(json.codeContext?.name)}Theme" + [disabled]="${nameStringToVariableString(json.codeContext?.name)}IsDisabled" + [invalid]="${nameStringToVariableString(json.codeContext?.name)}IsInvalid" + [label]="${nameStringToVariableString(json.codeContext?.name)}RangeStartLabel" + [invalidText]="${nameStringToVariableString(json.codeContext?.name)}InvalidText" + (valueChange)="${nameStringToVariableString(json.codeContext?.name)}ValueChange.emit($event)" + [value]="${nameStringToVariableString(json.codeContext?.name)}Value" + [placeholder]="${nameStringToVariableString(json.codeContext?.name)}Placeholder" + [size]="${nameStringToVariableString(json.codeContext?.name)}Size" + ${ + !json.kind || json.kind === 'simple' + ? `[dateFormat]="${nameStringToVariableString(json.codeContext?.name)}DateFormat"` + : `[range]="true" [rangeLabel]="${nameStringToVariableString(json.codeContext?.name)}RangeEndLabel"` + }> + </cds-date-picker> + `; + } + }, + v10: { + inputs: ({ json }) => `@Input() ${nameStringToVariableString(json.codeContext?.name)}Value: (string | Date)[] + = ${json.value ? json.value : "['']"}; + @Input() ${nameStringToVariableString(json.codeContext?.name)}Theme: "light" | "dark" = "${json.light ? 'light' : 'dark'}"; + @Input() ${nameStringToVariableString(json.codeContext?.name)}RangeStartLabel = "${json.rangeStartLabel}"; + @Input() ${nameStringToVariableString(json.codeContext?.name)}RangeEndLabel = "${json.rangeEndLabel ?? ''}"; + @Input() ${nameStringToVariableString(json.codeContext?.name)}IsDisabled = ${!!json.disabled}; + @Input() ${nameStringToVariableString(json.codeContext?.name)}IsInvalid = ${!!json.invalid}; + @Input() ${nameStringToVariableString(json.codeContext?.name)}InvalidText = "${json.invalidText ?? ''}"; + @Input() ${nameStringToVariableString(json.codeContext?.name)}Placeholder = "${json.placeholder ?? 'mm/dd/yyyy'}"; + @Input() ${nameStringToVariableString(json.codeContext?.name)}RangePlaceholder = "${json.rangePlaceholder ?? ''}"; + @Input() ${nameStringToVariableString(json.codeContext?.name)}Size: "sm" | "md" | "lg" = "${json.size || 'md'}"; + @Input() ${nameStringToVariableString(json.codeContext?.name)}DateFormat = "${json.dateFormat || 'm/d/Y'}";`, + outputs: ({ json }) => `@Output() ${nameStringToVariableString(json.codeContext?.name)}ValueChange = new EventEmitter();`, + imports: ['DatePickerModule'], + code: ({ json }) => { + return `<cds-date-picker + ${angularClassNamesFromComponentObj(json)} + [theme]="${nameStringToVariableString(json.codeContext?.name)}Theme" + [disabled]="${nameStringToVariableString(json.codeContext?.name)}IsDisabled" + [invalid]="${nameStringToVariableString(json.codeContext?.name)}IsInvalid" + [label]="${nameStringToVariableString(json.codeContext?.name)}RangeStartLabel" + [invalidText]="${nameStringToVariableString(json.codeContext?.name)}InvalidText" + (valueChange)="${nameStringToVariableString(json.codeContext?.name)}ValueChange.emit($event)" + [value]="${nameStringToVariableString(json.codeContext?.name)}Value" + [placeholder]="${nameStringToVariableString(json.codeContext?.name)}Placeholder" + [size]="${nameStringToVariableString(json.codeContext?.name)}Size" + ${ + !json.kind || json.kind === 'simple' + ? `[dateFormat]="${nameStringToVariableString(json.codeContext?.name)}DateFormat"` + : `[range]="true" [rangeLabel]="${nameStringToVariableString(json.codeContext?.name)}RangeEndLabel"` + }> + </cds-date-picker> + `; + } + } + }, + react: { + latest: { + imports: ['DatePicker', 'DatePickerInput'], + code: ({ json }) => { + return `<DatePicker + ${reactClassNamesFromComponentObj(json)} + ${json.kind ? `datePickerType="${json.kind}"` : ''} + ${json.dateFormat ? `dateFormat="${json.dateFormat}"` : ''} + ${json.light ? 'light={true}' : ''} + ${json.kind !== 'simple' ? `onChange={(dates) => handleInputChange({ + target: { + name: "${json.codeContext?.name}", + value: dates + } + })}`: ''}> + <DatePickerInput + id="${nameStringToVariableString(json.codeContext?.name)}" + ${json.placeholder ? `placeholder='${json.placeholder}'` : ''} + ${json.rangeStartLabel ? `labelText='${json.rangeStartLabel}'` : ''} + ${json.disabled ? `disabled={${json.disabled}}` : ''} + ${json.invalid ? `invalid={${json.invalid}}` : ''} + ${json.invalidText ? `invalidText='${json.invalidText}'` : ''} + ${json.size && json.size !== 'md' ? `size="${json.size}"` : ''} + ${ + json.kind === 'simple' + ? `onChange={(dates) => handleInputChange({ + target: { + name: "${json.codeContext?.name}", + value: dates + }})}` + : '' + } + /> + ${ + json.kind === 'range' + ? `<DatePickerInput + id="${nameStringToVariableString(json.codeContext?.name) + '-end'}" + ${json.rangePlaceholder ? `placeholder="${json.rangePlaceholder}"` : `placeholder="${json.placeholder}"`} + ${json.rangeEndLabel ? `labelText='${json.rangeEndLabel}'` : ''} + ${json.disabled ? `disabled={${json.disabled}}` : ''} + ${json.invalid ? `invalid={${json.invalid}}` : ''} + ${json.invalidText ? `invalidText='${json.rangeInvalidText}'` : ''} + ${json.size && json.size !== 'md' ? `size="${json.size}"` : ''} />` + : '' + } + </DatePicker>`; + } + }, + v10: { + imports: ['DatePicker', 'DatePickerInput'], + code: ({ json }) => { + return `<DatePicker + ${reactClassNamesFromComponentObj(json)} + ${json.kind ? `datePickerType="${json.kind}"` : ''} + ${json.dateFormat ? `dateFormat="${json.dateFormat}"` : ''} + ${json.light ? 'light={true}' : ''} + ${json.kind !== 'simple' ? `onChange={(dates) => handleInputChange({ + target: { + name: "${json.codeContext?.name}", + value: dates + } + })}`: ''}> + <DatePickerInput + id="${nameStringToVariableString(json.codeContext?.name)}" + ${json.placeholder ? `placeholder='${json.placeholder}'` : ''} + ${json.rangeStartLabel ? `labelText='${json.rangeStartLabel}'` : ''} + ${json.disabled ? `disabled={${json.disabled}}` : ''} + ${json.invalid ? `invalid={${json.invalid}}` : ''} + ${json.invalidText ? `invalidText='${json.invalidText}'` : ''} + ${json.size && json.size !== 'md' ? `size="${json.size}"` : ''} + ${ + json.kind === 'simple' + ? `onChange={(dates) => handleInputChange({ + target: { + name: "${json.codeContext?.name}", + value: dates + }})}` + : '' + } + /> + ${ + json.kind === 'range' + ? `<DatePickerInput + id="${nameStringToVariableString(json.codeContext?.name) + '-end'}" + ${json.rangePlaceholder ? `placeholder="${json.rangePlaceholder}"` : `placeholder="${json.placeholder}"`} + ${json.rangeEndLabel ? `labelText='${json.rangeEndLabel}'` : ''} + ${json.disabled ? `disabled={${json.disabled}}` : ''} + ${json.invalid ? `invalid={${json.invalid}}` : ''} + ${json.invalidText ? `invalidText='${json.rangeInvalidText}'` : ''} + ${json.size && json.size !== 'md' ? `size="${json.size}"` : ''} />` + : '' + } + </DatePicker>`; + } + } + } + } +}; diff --git a/sdk/react/src/lib/fragment-components/index.ts b/sdk/react/src/lib/fragment-components/index.ts index e4308a3fe..74d120da8 100644 --- a/sdk/react/src/lib/fragment-components/index.ts +++ b/sdk/react/src/lib/fragment-components/index.ts @@ -8,6 +8,7 @@ import * as codeSnippet from './a-code-snippet'; import * as column from './a-column'; import * as combobox from './a-combobox'; import * as contentSwitcher from './a-content-switcher'; +import * as datepicker from './a-date-picker'; import * as dropdown from './a-dropdown'; import * as fragment from './a-fragment'; import * as grid from './a-grid'; @@ -45,6 +46,7 @@ export { ACheckbox, ACheckboxSettingsUI, ACheckboxCodeUI } from './a-checkbox'; export { AColumn, AColumnCodeUI, AColumnSettingsUI } from './a-column'; export { AComboBox, AComboBoxSettingsUI, AComboBoxCodeUI } from './a-combobox'; export { AContentSwitcher, AContentSwitcherSettingsUI, AContentSwitcherCodeUI } from './a-content-switcher'; +export { ADatePicker, ADatePickerSettingsUI, ADatePickerCodeUI } from './a-date-picker'; export { ADropdown, ADropdownSettingsUI, ADropdownCodeUI } from './a-dropdown'; export * from './a-component'; export { AFragment, AFragmentSettingsUI, AFragmentCodeUI } from './a-fragment'; @@ -85,6 +87,7 @@ export const allComponents = { combobox, contentSwitcher, column, + datepicker, dropdown, fragment, grid,