diff --git a/semcore/core/src/core-types/Component.ts b/semcore/core/src/core-types/Component.ts index 3b074c152b..40c5fac756 100644 --- a/semcore/core/src/core-types/Component.ts +++ b/semcore/core/src/core-types/Component.ts @@ -152,6 +152,16 @@ export namespace Intergalactic { /** @private */ // eslint-disable-next-line @typescript-eslint/no-namespace export namespace InternalTypings { + export type RemoveIndexSignature = { + [K in keyof T as string extends K + ? never + : number extends K + ? never + : symbol extends K + ? never + : K]: T[K]; + }; + type StripDefaultPrefix = K extends `default${infer Rest}` ? Uncapitalize : K; export type ValidDefaultProps = { diff --git a/semcore/feedback-form/package.json b/semcore/feedback-form/package.json index 34bdd9d791..1432a9defa 100644 --- a/semcore/feedback-form/package.json +++ b/semcore/feedback-form/package.json @@ -9,7 +9,7 @@ "author": "UI-kit team ", "license": "MIT", "scripts": { - "build": "pnpm semcore-builder --source=js,ts && pnpm vite build" + "build": "pnpm semcore-builder && pnpm vite build" }, "exports": { "types": "./lib/types/index.d.ts", diff --git a/semcore/feedback-form/src/FeedbackForm.jsx b/semcore/feedback-form/src/FeedbackForm.tsx similarity index 77% rename from semcore/feedback-form/src/FeedbackForm.jsx rename to semcore/feedback-form/src/FeedbackForm.tsx index 541124a01a..d7ca95d2e1 100644 --- a/semcore/feedback-form/src/FeedbackForm.jsx +++ b/semcore/feedback-form/src/FeedbackForm.tsx @@ -1,5 +1,6 @@ import { Box } from '@semcore/base-components'; import Button from '@semcore/button'; +import type { Intergalactic } from '@semcore/core'; import { createComponent, Component, sstyled, Root } from '@semcore/core'; import { NoticeSmart } from '@semcore/notice'; import SpinContainer from '@semcore/spin-container'; @@ -9,9 +10,17 @@ import { Field, Form } from 'react-final-form'; import { FeedbackItem } from './component/feedback-item/FeedbackItem'; import { SubmitButton } from './component/submit-button/SubmitButton'; +import type { NSFeedbackForm } from './FeedbackForm.type'; import style from './style/feedback-form.shadow.css'; -class FeedbackForm extends Component { +class FeedbackForm extends Component< + Intergalactic.InternalTypings.InferComponentProps, + [], + {}, + {}, + {}, + NSFeedbackForm.DefaultProps +> { static displayName = 'FeedbackForm'; static style = style; static FinalForm = { @@ -24,14 +33,14 @@ class FeedbackForm extends Component { }; static validate = { - description: (error) => (value = '') => { + description: (error: string) => (value = '') => { const words = value.split(/\s+/); const symbols = words.join(' '); if (symbols.length < 10 || words.length < 3) { return error; } }, - email: (error) => (value = '') => { + email: (error: string) => (value = '') => { if (!/.+@.+\..+/i.test(String(value).toLowerCase())) { return error; } @@ -79,7 +88,7 @@ class FeedbackForm extends Component { } } -function Success(props) { +function Success(props: Intergalactic.InternalTypings.InferComponentProps) { const { Children, styles } = props; const SSuccess = Root; const SEmail = 'div'; @@ -96,16 +105,16 @@ function Success(props) { // because it is used without a wrapper Success.style = style; -function Cancel(props) { +function Cancel(props: Intergalactic.InternalTypings.InferComponentProps) { const { styles } = props; const SCancel = Root; return sstyled(styles)(); } -function Notice(props) { - const { styles, theme = 'muted', use = 'secondary' } = props; +function Notice(props: Intergalactic.InternalTypings.InferComponentProps) { + const { styles, theme = 'muted' } = props; const SNotice = Root; - return sstyled(styles)(); + return sstyled(styles)(); } /** @@ -113,7 +122,10 @@ function Notice(props) { * * {@link https://developer.semrush.com/intergalactic/components/feedback-form/feedback-form-api/|API} | {@link https://developer.semrush.com/intergalactic/components/feedback-form/feedback-form-code/|Examples} */ -export default createComponent(FeedbackForm, { +export default createComponent< + NSFeedbackForm.Component, + typeof FeedbackForm +>(FeedbackForm, { Item: FeedbackItem, Success, Submit: SubmitButton, diff --git a/semcore/feedback-form/src/FeedbackForm.type.ts b/semcore/feedback-form/src/FeedbackForm.type.ts new file mode 100644 index 0000000000..5347c791ce --- /dev/null +++ b/semcore/feedback-form/src/FeedbackForm.type.ts @@ -0,0 +1,63 @@ +import type { Box } from '@semcore/base-components'; +import type Button from '@semcore/button'; +import type { Intergalactic } from '@semcore/core'; +import type { NoticeSmart } from '@semcore/notice'; +import type { FormProps } from 'react-final-form'; + +import type { NSFeedbackItem } from './component/feedback-item/FeedbackItem.type'; +import type { NSSubmitButton } from './component/submit-button/SubmitButton.type'; + +declare namespace NSFeedbackForm { + type Props = Intergalactic.InternalTypings.RemoveIndexSignature & { + /** The event is called when the form is submitted */ + onSubmit: (values: any, form: any, callback?: (errors?: {}) => void) => {} | Promise<{}> | void; + /** + * The property is in charge of the spinner showing + * */ + loading?: boolean; + /** + * Color of container spinner; you can use your own color + */ + background?: string; + /** Spinner theme. There are several default themes or you can use your own color + * @default dark + **/ + theme?: 'dark' | 'invert' | string; + }; + type DefaultProps = { + onSubmit: () => void; + }; + + namespace Item { + type Component = NSFeedbackItem.Component; + } + + namespace Success { + type Component = typeof Box; + } + + namespace Submit { + type Component = NSSubmitButton.Component; + } + + namespace Cancel { + type Component = typeof Button; + } + + namespace Notice { + type Component = typeof NoticeSmart; + } + + type Component = Intergalactic.Component<'form', Props> & { + Item: Item.Component; + Success: Success.Component; + Submit: Submit.Component; + Cancel: Cancel.Component; + Notice: Notice.Component; + }; +} + +/** @deprecated It will be removed in v18. */ +export type FeedbackFormProps = NSFeedbackForm.Props; + +export type { NSFeedbackForm }; diff --git a/semcore/feedback-form/src/component/feedback-rating/FeedbackRating.tsx b/semcore/feedback-form/src/FeedbackRating.tsx similarity index 88% rename from semcore/feedback-form/src/component/feedback-rating/FeedbackRating.tsx rename to semcore/feedback-form/src/FeedbackRating.tsx index 3ce656f714..4c0dd18bf8 100644 --- a/semcore/feedback-form/src/component/feedback-rating/FeedbackRating.tsx +++ b/semcore/feedback-form/src/FeedbackRating.tsx @@ -1,8 +1,7 @@ import { Box, Flex } from '@semcore/base-components'; -import type Button from '@semcore/button'; -import type Checkbox from '@semcore/checkbox'; import { createComponent, Component, sstyled, Root } from '@semcore/core'; import type { Intergalactic } from '@semcore/core'; +import type { WithI18nEnhanceProps } from '@semcore/core/lib/utils/enhances/i18nEnhance'; import i18nEnhance from '@semcore/core/lib/utils/enhances/i18nEnhance'; import uniqueIDEnhancement from '@semcore/core/lib/utils/uniqueID'; import CheckM from '@semcore/icon/Check/m'; @@ -20,38 +19,28 @@ import createFocusDecorator from 'final-form-focus'; import React, { type ReactElement } from 'react'; import { Field, Form } from 'react-final-form'; -import type { - FeedbackRatingCheckboxProps, - FeedbackRatingItemProps, - FeedbackRatingProps, - FormConfigItem, - FeedbackRatingDefaultProps, -} from './FeedbackRating.type'; -import style from '../../style/feedback-rating.shadow.css'; -import { localizedMessages } from '../../translations/__intergalactic-dynamic-locales'; -import CheckboxButton from '../checkbox-button/CheckboxButton'; -import { FeedbackItem } from '../feedback-item/FeedbackItem'; -import SliderRating from '../slider-rating/SliderRating'; -import { SubmitButton } from '../submit-button/SubmitButton'; - -type State = { - error: boolean; -}; +import CheckboxButton from './component/checkbox-button/CheckboxButton'; +import { FeedbackItem } from './component/feedback-item/FeedbackItem'; +import SliderRating from './component/slider-rating/SliderRating'; +import { SubmitButton } from './component/submit-button/SubmitButton'; +import type { NSFeedbackRating } from './FeedbackRating.type'; +import style from './style/feedback-rating.shadow.css'; +import { localizedMessages } from './translations/__intergalactic-dynamic-locales'; class FeedbackRatingRoot extends Component< - FeedbackRatingProps, + Intergalactic.InternalTypings.InferComponentProps, typeof FeedbackRatingRoot.enhance, {}, - {}, - State, - FeedbackRatingDefaultProps + WithI18nEnhanceProps, + NSFeedbackRating.State, + NSFeedbackRating.DefaultProps > { static displayName = 'FeedbackRatingForm'; static style = style; static enhance = [i18nEnhance(localizedMessages), uniqueIDEnhancement()] as const; - static defaultProps: FeedbackRatingDefaultProps = { + static defaultProps: NSFeedbackRating.DefaultProps = { onSubmit: () => {}, i18n: localizedMessages, locale: 'en', @@ -74,7 +63,7 @@ class FeedbackRatingRoot extends Component< }, }; - state: State = { + state: NSFeedbackRating.State = { error: false, }; @@ -122,7 +111,7 @@ class FeedbackRatingRoot extends Component< fn(e); }; - componentDidUpdate(prevProps: Readonly) { + componentDidUpdate(prevProps: typeof this.asProps) { const { status, getI18nText } = this.asProps; if (prevProps.status !== status) { @@ -144,7 +133,7 @@ class FeedbackRatingRoot extends Component< } } - renderCheckbox = (config: FormConfigItem, index: number) => { + renderCheckbox = (config: NSFeedbackRating.FormConfigItem, index: number) => { const initialValue = this.props.initialValues[config.key]; return ( @@ -154,7 +143,7 @@ class FeedbackRatingRoot extends Component< {...input} id={config.key} label={config.label} - onChange={(_checked, e) => input.onChange(e)} + onChange={(_: boolean, e?: React.SyntheticEvent) => input.onChange(e)} focused={index === 0} /> )} @@ -162,7 +151,7 @@ class FeedbackRatingRoot extends Component< ); }; - renderTextField = (config: FormConfigItem) => { + renderTextField = (config: NSFeedbackRating.FormConfigItem) => { const initialValue = this.props.initialValues[config.key]; const label = @@ -369,8 +358,6 @@ class FeedbackRatingRoot extends Component< {getI18nText('errorMessage', { - // todo: Brauer Ilia - think how to fix type - // @ts-ignore email: ( {errorFeedbackEmail} @@ -401,7 +388,9 @@ class FeedbackRatingRoot extends Component< } } -function Header(props: any) { +function Header( + props: Intergalactic.InternalTypings.InferChildComponentProps, +) { const { styles } = props; const SHeader = Root; return sstyled(styles)( @@ -409,21 +398,13 @@ function Header(props: any) { ); } -type FeedbackRatingComponent = Intergalactic.Component<'form', FeedbackRatingProps, {}, typeof FeedbackRatingRoot.enhance> & { - validate: typeof FeedbackRatingRoot.validate; - Item: Intergalactic.Component<'div', FeedbackRatingItemProps>; - Submit: typeof Button; - Checkbox: Intergalactic.Component; - Header: typeof Text; -}; - /** * FeedbackRating * * {@link https://developer.semrush.com/intergalactic/components/feedback-form/feedback-form-api#feedbackform-feedbackrating|API} | {@link https://developer.semrush.com/intergalactic/components/feedback-form/feedback-form-code/|Examples} */ const FeedbackRating = createComponent< - FeedbackRatingComponent, + NSFeedbackRating.Component, typeof FeedbackRatingRoot >(FeedbackRatingRoot, { Header, diff --git a/semcore/feedback-form/src/FeedbackRating.type.ts b/semcore/feedback-form/src/FeedbackRating.type.ts new file mode 100644 index 0000000000..746b70f149 --- /dev/null +++ b/semcore/feedback-form/src/FeedbackRating.type.ts @@ -0,0 +1,103 @@ +import type { Intergalactic } from '@semcore/core'; +import type { IllustrationProps } from '@semcore/illustration'; +import type Notice from '@semcore/notice'; +import type { Text } from '@semcore/typography'; +import type React from 'react'; + +import type { NSCheckboxButton } from './component/checkbox-button/CheckboxButton.type'; +import type { NSFeedbackItem } from './component/feedback-item/FeedbackItem.type'; +import type { NSSubmitButton } from './component/submit-button/SubmitButton.type'; +import type { NSFeedbackForm } from './FeedbackForm.type'; +import type { LocalizedMessages } from './translations/__intergalactic-dynamic-locales'; +declare namespace NSFeedbackRating { + type Props = Intergalactic.InternalTypings.EfficientOmit & { + /** Status of form */ + status: 'default' | 'success' | 'error' | 'loading'; + + /** Flag for show/hide notification */ + notificationVisible: boolean; + /** Notification close callback */ + onNotificationClose: () => void; + /** Text in notification panel */ + notificationText: string; + /** Title in notification panel */ + notificationTitle?: string; + /** Optional link in notification panel */ + learnMoreLink?: string; + /** Rating value */ + rating: number; + /** Visible modal form flag */ + visible: boolean; + /** Visibility changes callback */ + onVisibleChange: (visible: boolean, rating: number) => void; + + /** Width for modal with form */ + modalWidth?: number | string; + + /** Header of modal with form */ + header: React.ReactNode; + /** Text for submit button of form */ + submitText?: string; + /** Config for form fields */ + formConfig: NSFeedbackRating.FormConfigItem[]; + + /** Initial form values including rating */ + initialValues: Record & { rating: number }; + /** Email address shown in error messages */ + errorFeedbackEmail: string; + /** Specifies the locale for i18n support */ + locale?: string; + /** Illustration element */ + Illustration?: Intergalactic.Component<'svg', IllustrationProps>; + /** Notice component */ + Notice?: typeof Notice; + }; + type DefaultProps = { + onSubmit: () => void; + i18n: LocalizedMessages; + locale: 'en'; + Illustration: Props['Illustration']; + Notice: Props['Notice']; + }; + type State = { + error: boolean; + }; + type FormConfigItem = { + key: string; + label: React.ReactNode; + type: 'input' | 'checkbox' | 'textarea' | 'email'; + description?: React.ReactNode; + validate?: (value: any) => Error | string | undefined; + }; + + namespace Item { + type Component = NSFeedbackItem.Component; + } + + namespace Submit { + type Component = NSSubmitButton.Component; + } + + namespace Checkbox { + type Component = NSCheckboxButton.Component; + } + + namespace Header { + type Component = typeof Text; + } + + type Validate = { + description: (error: string | Error) => (value?: string) => string | Error | undefined; + email: (error: string | Error) => (value?: string) => string | Error | undefined; + }; + + type Component = Intergalactic.Component<'form', Props> & { + validate: Validate; + Item: Item.Component; + Submit: Submit.Component; + Checkbox: Checkbox.Component; + Header: Header.Component; + }; +} + +export type { NSFeedbackRating }; diff --git a/semcore/feedback-form/src/component/checkbox-button/CheckboxButton.tsx b/semcore/feedback-form/src/component/checkbox-button/CheckboxButton.tsx index 15ecd47e3e..c527e30f3e 100644 --- a/semcore/feedback-form/src/component/checkbox-button/CheckboxButton.tsx +++ b/semcore/feedback-form/src/component/checkbox-button/CheckboxButton.tsx @@ -3,10 +3,10 @@ import Checkbox from '@semcore/checkbox'; import { createComponent, Component, Root, sstyled } from '@semcore/core'; import React from 'react'; +import type { NSCheckboxButton } from './CheckboxButton.type'; import style from '../../style/checkbox-button.shadow.css'; -import type { FeedbackRatingCheckboxComponent, FeedbackRatingCheckboxProps } from '../feedback-rating/FeedbackRating.type'; -class CheckboxButtonRoot extends Component { +class CheckboxButtonRoot extends Component { static style = style; checkboxRef = React.createRef(); @@ -37,7 +37,7 @@ class CheckboxButtonRoot extends Component { } const CheckboxButton = createComponent< - FeedbackRatingCheckboxComponent, + NSCheckboxButton.Component, typeof CheckboxButtonRoot >(CheckboxButtonRoot); diff --git a/semcore/feedback-form/src/component/checkbox-button/CheckboxButton.type.ts b/semcore/feedback-form/src/component/checkbox-button/CheckboxButton.type.ts new file mode 100644 index 0000000000..1f82078b57 --- /dev/null +++ b/semcore/feedback-form/src/component/checkbox-button/CheckboxButton.type.ts @@ -0,0 +1,14 @@ +import type { NSCheckbox } from '@semcore/checkbox'; +import type { Intergalactic } from '@semcore/core'; +import type React from 'react'; + +declare namespace NSCheckboxButton { + type Props = Omit & { + focused: boolean; + label: React.ReactNode; + }; + + type Component = Intergalactic.Component<'div', Props>; +} + +export type { NSCheckboxButton }; diff --git a/semcore/feedback-form/src/component/feedback-item/FeedbackItem.tsx b/semcore/feedback-form/src/component/feedback-item/FeedbackItem.tsx index ab76f22429..7649a31d03 100644 --- a/semcore/feedback-form/src/component/feedback-item/FeedbackItem.tsx +++ b/semcore/feedback-form/src/component/feedback-item/FeedbackItem.tsx @@ -1,3 +1,4 @@ +import type { Intergalactic } from '@semcore/core'; import { assignProps } from '@semcore/core'; import pick from '@semcore/core/lib/utils/pick'; import propsForElement from '@semcore/core/lib/utils/propsForElement'; @@ -6,6 +7,8 @@ import Tooltip from '@semcore/tooltip'; import React from 'react'; import { Field } from 'react-final-form'; +import type { NSFeedbackItem } from './FeedbackItem.type'; + const deafultTooltipPropsList = [ 'title', 'theme', @@ -32,8 +35,8 @@ export function FeedbackItem({ uid, tooltipProps: tooltipPropsList = deafultTooltipPropsList, ...props -}: any) { - const tooltipProps = pick(props, tooltipPropsList); +}: Intergalactic.InternalTypings.InferComponentProps & { tag: Intergalactic.InternalTypings.ComponentTag }) { + const tooltipProps = pick(props, tooltipPropsList as (keyof typeof props)[]); const lastErrorRef = React.useRef(undefined); return ( @@ -57,6 +60,7 @@ export function FeedbackItem({ if (meta?.error) lastErrorRef.current = meta.error; return ( + // @ts-ignore > & TooltipProps & { + /** + * Allows to override which passed props will be passed to the Tooltip component. + */ + tooltipProps?: string[]; + /** Defines whether to validate item on blur */ + validateOnBlur?: NSFeedbackForm.Props['validateOnBlur']; + }; + type Ctx = { + input: FieldInputProps & { state: 'normal' | 'invalid' }; + meta: FieldMetaState; + }; + + type Component = Intergalactic.Component<'div', Props, Ctx>; +} + +export type { NSFeedbackItem }; diff --git a/semcore/feedback-form/src/component/feedback-rating/FeedbackRating.type.ts b/semcore/feedback-form/src/component/feedback-rating/FeedbackRating.type.ts deleted file mode 100644 index 092d844fd3..0000000000 --- a/semcore/feedback-form/src/component/feedback-rating/FeedbackRating.type.ts +++ /dev/null @@ -1,85 +0,0 @@ -import type { NSCheckbox } from '@semcore/checkbox'; -import type { Intergalactic } from '@semcore/core'; -import type { IllustrationProps } from '@semcore/illustration'; -import type Notice from '@semcore/notice'; -import type React from 'react'; -import type { FieldProps } from 'react-final-form'; - -import type { FeedbackFormProps } from '../../index'; -import type { LocalizedMessages } from '../../translations/__intergalactic-dynamic-locales'; - -export type FormConfigItem = { - key: string; - label: React.ReactNode; - type: 'input' | 'checkbox' | 'textarea' | 'email'; - description?: React.ReactNode; - validate?: (value: any) => Error | string | undefined; -}; - -export type FeedbackRatingProps = Intergalactic.InternalTypings.EfficientOmit< - FeedbackFormProps, - 'initialValues' | 'loading' -> & { - /** Status of form */ - status: 'default' | 'success' | 'error' | 'loading'; - - /** Flag for show/hide notification */ - notificationVisible: boolean; - /** Notification close callback */ - onNotificationClose: () => void; - /** Text in notification panel */ - notificationText: string; - /** Title in notification panel */ - notificationTitle?: string; - /** Optional link in notification panel */ - learnMoreLink?: string; - /** Rating value */ - rating: number; - /** Visible modal form flag */ - visible: boolean; - /** Visibility changes callback */ - onVisibleChange: (visible: boolean, rating: number) => void; - - /** Width for modal with form */ - modalWidth?: number | string; - - /** Header of modal with form */ - header: React.ReactNode; - /** Text for submit button of form */ - submitText?: string; - /** Config for form fields */ - formConfig: FormConfigItem[]; - - /** Initial form values including rating */ - initialValues: Record & { rating: number }; - /** Email address shown in error messages */ - errorFeedbackEmail: string; - /** Specifies the locale for i18n support */ - locale?: string; - /** Illustration element */ - Illustration?: Intergalactic.Component<'svg', IllustrationProps>; - /** Notice component */ - Notice?: typeof Notice; -}; - -export type FeedbackRatingItemProps = FieldProps & { - /** - * Allows to override which passed props will be passed to the Tooltip component. - */ - tooltipProps?: string[]; -}; - -export type FeedbackRatingCheckboxProps = Omit & { - focused: boolean; - label: React.ReactNode; -}; - -export type FeedbackRatingCheckboxComponent = Intergalactic.Component<'div', FeedbackRatingCheckboxProps>; - -export type FeedbackRatingDefaultProps = { - onSubmit: () => void; - i18n: LocalizedMessages; - locale: 'en'; - Illustration: FeedbackRatingProps['Illustration']; - Notice: FeedbackRatingProps['Notice']; -}; diff --git a/semcore/feedback-form/src/component/slider-rating/SliderRating.tsx b/semcore/feedback-form/src/component/slider-rating/SliderRating.tsx index 4eac3f9957..4b66f349e6 100644 --- a/semcore/feedback-form/src/component/slider-rating/SliderRating.tsx +++ b/semcore/feedback-form/src/component/slider-rating/SliderRating.tsx @@ -1,55 +1,31 @@ -import { Flex, Box, type BoxProps } from '@semcore/base-components'; +import { Flex, Box } from '@semcore/base-components'; import { createComponent, Component, Root, sstyled, type Intergalactic } from '@semcore/core'; import type { WithI18nEnhanceProps } from '@semcore/core/lib/utils/enhances/i18nEnhance'; import i18nEnhance from '@semcore/core/lib/utils/enhances/i18nEnhance'; import uniqueIDEnhancement from '@semcore/core/lib/utils/uniqueID'; import React from 'react'; +import type { NSSliderRating } from './SliderRating.type'; import style from '../../style/slider-rating.shadow.css'; -import type { LocalizedMessages } from '../../translations/__intergalactic-dynamic-locales'; import { localizedMessages } from '../../translations/__intergalactic-dynamic-locales'; -type SliderRatingProps = { - value: number; - onChange?: (value: number) => void; - readonly?: boolean; -}; - -type SliderRatingDefaultProps = { - i18n: LocalizedMessages; - locale: 'en'; -}; - -type State = { - hoveredIndex: number; - clickedIndex: number; -}; - -type StarProps = BoxProps & { - filled?: boolean; -}; - -type SliderRatingComponent = Intergalactic.Component & { - Star: Intergalactic.Component; -}; - const MIN = 1; const MAX = 5; class SliderRatingRoot extends Component< - SliderRatingProps, + Intergalactic.InternalTypings.InferComponentProps, typeof SliderRatingRoot.enhance, {}, WithI18nEnhanceProps, - State, - SliderRatingDefaultProps + NSSliderRating.State, + NSSliderRating.DefaultProps > { static displayName = 'SliderRating'; static style = style; static enhance = [uniqueIDEnhancement(), i18nEnhance(localizedMessages)] as const; - state: State = { + state: NSSliderRating.State = { hoveredIndex: -1, clickedIndex: -1, }; @@ -194,7 +170,7 @@ class SliderRatingRoot extends Component< } } -function Star(props: StarProps) { +function Star(props: Intergalactic.InternalTypings.InferChildComponentProps) { const SStar = Root; return sstyled(props.styles)( (SliderRatingRoot, { Star, diff --git a/semcore/feedback-form/src/component/slider-rating/SliderRating.type.ts b/semcore/feedback-form/src/component/slider-rating/SliderRating.type.ts new file mode 100644 index 0000000000..c01bbe77e0 --- /dev/null +++ b/semcore/feedback-form/src/component/slider-rating/SliderRating.type.ts @@ -0,0 +1,34 @@ +import type { Flex, Box, BoxProps } from '@semcore/base-components'; +import type { Intergalactic } from '@semcore/core'; + +import type { LocalizedMessages } from '../../translations/__intergalactic-dynamic-locales'; + +declare namespace NSSliderRating { + type Props = { + value: number; + onChange?: (value: number) => void; + readonly?: boolean; + }; + type DefaultProps = { + i18n: LocalizedMessages; + locale: 'en'; + }; + type State = { + hoveredIndex: number; + clickedIndex: number; + }; + + namespace Star { + type Props = { + filled?: boolean; + }; + + type Component = Intergalactic.Component; + } + + type Component = Intergalactic.Component & { + Star: Star.Component; + }; +} + +export type { NSSliderRating }; diff --git a/semcore/feedback-form/src/component/submit-button/SubmitButton.tsx b/semcore/feedback-form/src/component/submit-button/SubmitButton.tsx index 0da543a19a..f90f7b84a1 100644 --- a/semcore/feedback-form/src/component/submit-button/SubmitButton.tsx +++ b/semcore/feedback-form/src/component/submit-button/SubmitButton.tsx @@ -1,8 +1,11 @@ import Button from '@semcore/button'; -import { Root, sstyled, type IRootComponentProps } from '@semcore/core'; +import type { Intergalactic } from '@semcore/core'; +import { Root, sstyled } from '@semcore/core'; import React from 'react'; -export function SubmitButton(props: IRootComponentProps) { +import type { NSSubmitButton } from './SubmitButton.type'; + +export function SubmitButton(props: Intergalactic.InternalTypings.InferComponentProps) { const { styles } = props; const SSubmit = Root; return sstyled(styles)(); diff --git a/semcore/feedback-form/src/component/submit-button/SubmitButton.type.ts b/semcore/feedback-form/src/component/submit-button/SubmitButton.type.ts new file mode 100644 index 0000000000..9f1b0dbef7 --- /dev/null +++ b/semcore/feedback-form/src/component/submit-button/SubmitButton.type.ts @@ -0,0 +1,7 @@ +import type Button from '@semcore/button'; + +declare namespace NSSubmitButton { + type Component = typeof Button; +} + +export type { NSSubmitButton }; diff --git a/semcore/feedback-form/src/index.d.ts b/semcore/feedback-form/src/index.d.ts deleted file mode 100644 index 2f3c39cdad..0000000000 --- a/semcore/feedback-form/src/index.d.ts +++ /dev/null @@ -1,40 +0,0 @@ -import type { Box } from '@semcore/base-components'; -import type Button from '@semcore/button'; -import type { Intergalactic } from '@semcore/core'; -import type { NoticeSmart } from '@semcore/notice'; -import type { FormProps, FieldProps, FieldInputProps, FieldMetaState } from 'react-final-form'; - -import { default as FeedbackRating } from './component/feedback-rating/FeedbackRating'; - -export type FeedbackFormProps = FormProps & { - /** The event is called when the form is submitted */ - onSubmit: (values: any, form: any, callback?: (errors?: {}) => void) => {} | Promise<{}> | void; - /** - * The property is in charge of the spinner showing - * */ - loading?: boolean; - /** - * Color of container spinner; you can use your own color - */ - background?: string; - /** Spinner theme. There are several default themes or you can use your own color - * @default dark - **/ - theme?: 'dark' | 'invert' | string; -}; - -declare const FeedbackForm: Intergalactic.Component<'form', FeedbackFormProps> & { - Item: Intergalactic.Component< - 'div', - FieldProps, - { input: FieldInputProps & { state: 'normal' | 'invalid' }; meta: FieldMetaState } - >; - Success: typeof Box; - Submit: typeof Button; - Cancel: typeof Button; - Notice: typeof NoticeSmart; -}; - -export default FeedbackForm; - -export { FeedbackRating }; diff --git a/semcore/feedback-form/src/index.js b/semcore/feedback-form/src/index.js deleted file mode 100644 index 8ae3fc8d91..0000000000 --- a/semcore/feedback-form/src/index.js +++ /dev/null @@ -1,5 +0,0 @@ -import { default as FeedbackRating } from './component/feedback-rating/FeedbackRating'; - -export { default } from './FeedbackForm'; - -export { FeedbackRating }; diff --git a/semcore/feedback-form/src/index.ts b/semcore/feedback-form/src/index.ts new file mode 100644 index 0000000000..6026f240b3 --- /dev/null +++ b/semcore/feedback-form/src/index.ts @@ -0,0 +1,6 @@ +import { default as FeedbackRating } from './FeedbackRating'; + +export { default } from './FeedbackForm'; +export * from './FeedbackForm.type'; + +export { FeedbackRating }; diff --git a/semcore/feedback-form/vite.config.ts b/semcore/feedback-form/vite.config.ts index ac51840142..6e06684244 100644 --- a/semcore/feedback-form/vite.config.ts +++ b/semcore/feedback-form/vite.config.ts @@ -7,7 +7,7 @@ export default mergeConfig( defineConfig({ build: { lib: { - entry: './src/index.js', + entry: './src/index.ts', }, rollupOptions: { external: [ diff --git a/website/docs/components/feedback-form/feedback-form-api.md b/website/docs/components/feedback-form/feedback-form-api.md index acf395d5fd..8245174d67 100644 --- a/website/docs/components/feedback-form/feedback-form-api.md +++ b/website/docs/components/feedback-form/feedback-form-api.md @@ -12,7 +12,7 @@ import FeedbackForm from '@semcore/ui/feedback-form'; ; ``` - + ## FeedbackForm.Item @@ -62,4 +62,4 @@ import FeedbackRating from '@semcore/ui/feedback-form'; ; ``` - +