[Typescript] declaration file missing about informed HOT 47 CLOSED

Hello @FredyC ... already did exactly what you are suggesting, even fixed some wrong types too. So I'm completely with you, using strong typed properties. Pushing it right now. Will also add the async stuff, that @joepuzzo implemented recently, in the next days.

yarn add --dev https://[email protected]/ventzkemediaberlin/types-informed.git#0.1.5

from informed.

Hey Guys,

finished a rough TypeScript definition for this package [email protected] right know. Mostly everything is working.
Will Keep it on a regular git account and commit it to the definitely typed library when everything has been tested successfully.

Feel free to test it and leave any comments or enhancements. Thank you!

Install it by using yarn:
yarn add --dev https://[email protected]/ventzkemediaberlin/types-informed.git#0.1.40

from informed.

Has there been any progress on this? Types are a must for me too. I'm super excited, this is the react form package I've been waiting for.

Here's my 2 cents about the typedefs:

• Keeping the definitions with the package is definitely better. It keeps the definitions in sync. Also, if you ever wanted to convert the project to Typescript, it could generate type definitions automatically.
• Be sure you include a reference to the type definitions in a 'types' property on your package.json. That way, TS will pick up the defs automatically on import.

Thanks!

from informed.

I'm working on it slowly, but surely. Should be done over the weekend, hopefully

from informed.

@Verbon that's my bad, I created another PR to fix that. @joepuzzo pls merge https://github.com/joepuzzo/informed/pull/107

from informed.

@JaffParker @gsinovsky @FrimJo
Guys, I have a great news for all of you - there's a very cool library out there called Formik. It's dead simple, but it does just a lot of annoying stuff including handling nested objects, arrays, validation (integrated with Yup) etc.

But the greatest thing here - it's already fully written in TypeScript. So forget about the types headache. The types will be always correct and updated automatically with every new library release.

I've already tried it - and it's the greatest form library for React applications I've ever seen so far.
So, I would suggest to forget about informed, and switch to Formik instead.

"Build React forms, without tears" (c) Jared Palmer at Formik :)

from informed.

You can create a pr for this and i will merge.. might be cleaner to keep it with the repo

from informed.

Any progress on this? Just discovered informed—it looks great!—but types are a must for me.

Gonna give @pure180's repo a spin for now and report any issues I find. 😄

from informed.

@pure180 Great work and thanks!

So far I noticed that the <Form> element does not accept the id prop.

[ts] Property 'id' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Form> & Readonly<{ children?: ReactNode; }> & Readonly<FormProps<{}> & { children?: string | number | boolean | {} | ReactElement<any> | ReactNodeArray | ReactPortal | Element | ((props: FormClassContext) => RenderReturn) | never[] | null | undefined; }>'.

And the types are not compatible with styled-components. For instance, this fails:

const MyText = styled(Text)`
  border: 1px solid ${props => props.theme.mediumGray};
`;

[ts]
Argument of type 'FieldHOC<FieldContext, FieldDefaultProps & FieldDefaultShared & InputHTMLAttributes<HTMLInputElement>>' is not assignable to parameter of type 'ComponentType<RefForwardingComponent<FieldContext, FieldDefaultProps & FieldDefaultShared & InputHTMLAttributes<HTMLInputElement>>>'.
  Type 'FieldHOC<FieldContext, FieldDefaultProps & FieldDefaultShared & InputHTMLAttributes<HTMLInputElement>>' is not assignable to type 'StatelessComponent<RefForwardingComponent<FieldContext, FieldDefaultProps & FieldDefaultShared & InputHTMLAttributes<HTMLInputElement>>>'.
    Type 'PureComponent<FieldDefaultProps & FieldDefaultShared & InputHTMLAttributes<HTMLInputElement>, {}, any>' is not assignable to type 'ReactElement<any>'.
      Property 'type' is missing in type 'PureComponent<FieldDefaultProps & FieldDefaultShared & InputHTMLAttributes<HTMLInputElement>, {}, any>'.

from informed.

Hi guys,

It seems like @FrimJo is correct: typescript definitions were committed and merged into master.

But it seems that they just don't reach the 'dist' folder (which is actually a published package) after the build process.

"files" attribute determines what we get when installing a package via yarn/npm (https://docs.npmjs.com/files/package.json#files).

So, I see 2 ways to resolve this issue:

1. Modify "files" attribute of package.json file to include index.d.ts file.
2. Modify the build process, so index.d.ts file is copied to the dist folder as well.

@joepuzzo Please, take a look at this and choose the option which suits you best :)

from informed.

@JaffParker sure

from informed.

This one is always fun. I dont ever use typescript. Someone created a pull request for react form last time and thats how it got types. I would be more than happy to approve a PR for this

from informed.

@pure180 when you get that to a stable point put out a PR!

from informed.

@pure180 I tried it and it works well for now ! I will leave a comment if anything goes wrong :) thanks a lot you rock !

from informed.

@joepuzzo Depends on how many people help to improve it. Bur for now everything, except a few things, are working fine. One more thing saw the Field class which is getting exported. but cant find any explanation for it, is there any?

@romainbellande You are welcome! Need it anyways too. :)

from informed.

@pure180 yeah so the Field class was used in react-form and i replaced it with asField HOC in this lib.. i kept exporting it for backwards compatibility but am unsure if im going to keep it or not.

from informed.

@joepuzzo ok cool, it is typed but will remove it when you do so. Already saw that you added the async stuff in 1.5.0 will implement it too.

from informed.

@joepuzzo Implemented it in a pretty complex, dynamic and fully typed registration form, including almost every component that informed offers (except custom inputs) and it is working like a charm, even with [email protected]. Would like to have some people looking at it, but for me it could get merged.

from informed.

@joepuzzo Do you want to include the type definitions to your library, or shall i publish it at definitely typed?

from informed.

After doing some reading i actually think it might be better to do the latter and publish the types under the @types scope? What do you think. What is the norm?

from informed.

@pure180 Hey, thanks for the typings. Would be lovely to get it more generic though. For example, it could look like this which gives much stronger types in overall. It's quite useless to be getting any everywhere. I have a data types coming from fully typed GraphQL interface, so I would like to use that. I made myself a similar modification for react-form and it worked very nicely.

  export interface FormProps<T = any> {
    onChange?: (formState: FormState<T>) => void;
    onSubmit?: (values: FormValues<T>) => void;
    onValueChange?: (value: FormValues<T>) => void;
    ... // update other types accordingly
  }

from informed.

@joepuzzo Personally I like better when typings and included in the package. It's definitely easier to use when I don't need to look for other extra packages to install and use it right away. On the other hand, there are many smart people on DefinitelyTyped and they can help to make types much better in overall.

The best approach in my opinion though is having the package written in TypeScript and then you don't need to worry about updating it separately on every change, but I can respect your decision not to use it. I was there too some time ago :)

from informed.

@pure180 Well, if current version in the repo is the latest, then it's not exactly what I had in mind. The FormProps are still without generics. The example I posted above is relying on inference. If I pass in initialValues to the component, remaining props will be strongly typed as well because T will be inferred from it. Generic FormValues/FormState is the start, but it can be better :)

from informed.

Sure, you could create a PR, would do it either. But I'm on business vacations right now, so could take some time till I'm able to do it.

from informed.

@rscotten, @pure180 Could it be related to https://bitbucket.org/ventzkemediaberlin/types-informed/commits/22063ed7d80041c5a87785513e200d5954a4073d ?

Also, there was a mistake before (HTMLFontElement instead of HTMLFormElement)

from informed.

Btw, I think definitions of the asField is not correct.

function asField<T, P>(Component: React.RefForwardingComponent<T, P>): AsFieldReturn<P>;
means the wrapped component must be a function that accepts 2 arguments: props and ref. But in fact Component is not a RefForwardingComponent, it is a React.ComponentType that accepts forwardedRef

from informed.

Hey @ALL

Thanks for your feedback, I'll implement it this weekend, when I find some spare time. Anyway you could also create a pull request if you have time to develop this, would be nice. Thank you guys. :)

from informed.

1. When you publish it as NPM package?
2. Please add BasicRadioGroup

from informed.

@pure180 Hi,

I'm new to Typescript and unfortunately I'm having issues with your declaration package...

Here's what I'm trying to do:

import React from 'react'
import {withFormState, FormState} from 'informed'
import {Button, ButtonProps} from 'reactstrap'

interface SubmitButtonProps extends ButtonProps {
  formState: FormState
  submitting: boolean
}

export const SubmitButton = withFormState<Button, SubmitButtonProps>(
  ({
    formState: {pristine, invalid},
    disabled = false, submitting = false, children, ref,
    ...props
  }) =>
    <Button type="submit" color="success" disabled={pristine || invalid || submitting || disabled}
            className={submitting ? 'progress-bar-striped progress-bar-animated' : ''}
            {...props}>
      {children}
    </Button>
)

Here's what happens when I try to use it:

It is as though it simply ignores the prop type that I defined. I cannot find what exactly can be causing it from the declaration files.

Another problem I've faced is that Field component does not accept validateOn* props, even though that is where they're supposed to go. Basic* components accept those props, but they simply pass them through to HTML elements which makes React throw a warning and obviously doesn't achieve the necessary functionality. It's something that should be corrected.

from informed.

@pure180 I think I figured what the problem might be:

export function withFormState<T, P = {}>(Component: FormHocComponent<T, P>): React.ComponentType<React.ClassAttributes<P>>;

React.ClassAttributes does not accept a prop types definition, but an element to pass to Ref. Thus you should not be using P as it's generic type argument, but T instead. So here's what it probably should look like:

export function withFormState<T, P = {}>(Component: FormHocComponent<T, P>): React.ComponentType<React.ClassAttributes<T>&P>;

I haven't tried it yet, I'm not in front of my computer, I'll test it later. Ideally also, it should be typing formState and formApi, but I had to do it manually...

from informed.

@pure180 I tried my fixes and they worked. I forked your repo, made the changes, but unfortunately, you blocked pull requests. Please, allow them so you can merge my changes.

from informed.

@JaffParker, Sorry I didn't found the settings to unblock pull requests from forks, bitbucket sucks, lol.

I'll create a new repo here on GitHub, so that you can either post you code here, create a gist or fork the new repo. Thanks and sorry for your efforts.

@ALL others sorry I am still quite busy lately. Will continue on the types as soon as I got spare time.

Thanks for you feedback!

from informed.

@pure180 sounds good, let me know when you do that :)

from informed.

Thank you for an awesome library! I see that a new version containing typescript definition files has been released, but when running yarn add informed I do not get any definition files with my 1.10.8 version.

from informed.

@FrimJo I don't think there is an official release just yet. https://bitbucket.org/ventzkemediaberlin/types-informed/ is all you got right now.

from informed.

@FredyC Thnx for the url, but I believe the index.d.ts file added to this project works better, but not fully. https://github.com/joepuzzo/informed/blob/master/index.d.ts

When using asField with the above mentioned type definition, the type definition does not add the field prop to the exposed component.

Type '{ field: string; }' has no properties in common with type 'IntrinsicAttributes & { children?: ReactNode; }'

from informed.

Hi guys, I'm trying to pass forwadedRef to a Text component, but the property doesn't exist on the current TypeScript definition.

from informed.

@gsinovsky that's my bad, I made a minimal declaration, followed the docs and I missed forwardedRef unfortunately. Do you think you can add it yourself?

from informed.

@JaffParker here it is, check it out if you can plese.

from informed.

@Verbon Are you being serious? It's missing even basic things like onChange on the Form or even giving access to imperative formApi. And async validation or even validation over the whole form? Documentation is really sparse considering how old the project is. Nah, thanks...

Edit: Please don't respond to this and try to convince me there is this and that, I don't care :)

from informed.

@FredyC Before making any conclusions, please carefully read the docs first. It has everything you need, you just didn't even try to read. It has a different API, so you won't find any onChange and formApi props. You would use values prop of the FormikProp instead, and any of the set%something% imperative methods accordingly.

Please, use informed if you like it so much, but it will be an endless headache for you if you're a TypeScript user.

from informed.

I wrote this lib and even I just wish the react guys would make a form lib so we could all stop using different ones 🤣

from informed.

I love this project and I like the structure of it, and I believe that fixing the above mentioned issues will satesify my TS needs.

from informed.

I wrote this lib and even I just wish the react guys would make a form lib so we could all stop using different ones 🤣

https://xkcd.com/927/

@joepuzzo

from informed.

Hahaha. I have a backround in ipv6 testing and trust me when i say standards are a beautiful thing! React and forms will get there one day... maybe

from informed.

Looks like types are included in the package now, right? https://github.com/joepuzzo/informed/blob/master/index.d.ts
This could be closed now, I guess...

from informed.

Needs to be updated for V2.. i dont have time right now but is somone wants to update and make a PR then they are more than welcome

from informed.