feat: datastore vue3 hooks and example

[Arenukvern]

Good day!
I would like to make PR to add vue3 support in this awesome project.

Description

1. Hooks for vue3 for Add, Save, Update, Query
   Refactored from react hooks and following the same names conventions.
   As Vue3 hooks names conflict with react names it was exported into one namespace useDatastoreHooks
   path: offix/packages/datastore/datastore/src/vue
   test: As same as react available in offix/packages/datastore/datastore/tests

2. Vue3 + vite + antd example to use vue3 hooks
   Refactored from react example.
   path: offix/examples/vue-datastore

Problems:

1. It is not possible to mutate update and delete because of __typename in request payload after it replication call.

Solved problems but maybe in a wrong way:

1. _version and _lastUpdatedAt fields in example project cannot be created automaticaly. It was solved just adding new field in runtime.graphql models
2. react types gives types error in index.d.ts which solved by setting "skipLibCheck": true in tsconfig

../../../node_modules/@types/react/index.d.ts:124:51 - error TS2344: Type 'C' does not satisfy the constraint 'ElementType<any>'.
  Type 'string | number | ForwardRefExoticComponent<any> | (new (props: any) => Component<any, {}, any>) | ((props: any, context?: any) => ReactElement<any, string | ((props: any) => ReactElement<...> | null) | (new (props: any) => Component<...>)> | null)' is not assignable to type 'ElementType<any>'.
    Type 'number' is not assignable to type 'ElementType<any>'.
      Type 'C' is not assignable to type 'FunctionComponent<any>'.
        Type 'string | number | ForwardRefExoticComponent<any> | (new (props: any) => Component<any, {}, any>) | ((props: any, context?: any) => ReactElement<any, string | ((props: any) => ReactElement<...> | null) | (new (props: any) => Component<...>)> | null)' is not assignable to type 'FunctionComponent<any>'.
          Type 'string' is not assignable to type 'FunctionComponent<any>'.

124         "ref" extends keyof ComponentPropsWithRef<C>
                                                      ~
../../../node_modules/@types/react/index.d.ts:125:49 - error TS2344: Type 'C' does not satisfy the constraint 'ElementType<any>'.
  Type 'C' is not assignable to type 'FunctionComponent<any>'.

125             ? NonNullable<ComponentPropsWithRef<C>["ref"]> extends Ref<
                                                    ~
../../../node_modules/@types/react/index.d.ts:2990:19 - error TS2320: Interface 'IntrinsicAttributes' cannot simultaneously extend types 'Attributes' and 'ReservedProps'.
  Named property 'key' of types 'Attributes' and 'ReservedProps' are not identical.

2990         interface IntrinsicAttributes extends React.Attributes { }
                       ~~~~~~~~~~~~~~~~~~~

../../../node_modules/@types/react/index.d.ts:2993:19 - error TS2430: Interface 'IntrinsicElements' incorrectly extends interface 'NativeElements'.
  Types of property 'symbol' are incompatible.
    Type 'SVGProps<SVGSymbolElement>' is not assignable to type 'ElementAttrs<SVGAttributes>'.
      Type 'SVGProps<SVGSymbolElement>' is not assignable to type 'SVGAttributes'.
        Types of property 'autoReverse' are incompatible.
          Type 'boolean | "false" | "true" | undefined' is not assignable to type 'string | number | undefined'.
            Type 'false' is not assignable to type 'string | number | undefined'.

2993         interface IntrinsicElements {

3. To handle vue error below, "es2020" was added to tsconfig.lib

../../../node_modules/@vue/reactivity/dist/reactivity.d.ts:219:13 - error TS2550: Property 'matchAll' does not exist on type 'SymbolConstructor'. Do you need to change your target library? Try changing the `lib` compiler option to 'es2020' or later.

219     [Symbol.matchAll]: infer V;
                ~~~~~~~~

../../../node_modules/@vue/reactivity/dist/reactivity.d.ts:221:13 - error TS2550: Property 'matchAll' does not exist on type 'SymbolConstructor'. Do you need to change your target library? Try changing the `lib` compiler option to 'es2020' or later.

221     [Symbol.matchAll]: V;

Checklist

• npm test passes
• npm run build works
• tests are included
• documentation is changed or added

[wtrocki]

@Arenukvern Amazing work. I'm not that much familiar with the Vue but will get into this soon.

@kingsleyzissou would you have time to check this out. Amazing PR overal!

[kingsleyzissou]

Hey @Arenukvern awesome stuff! I haven't used Vue since Vue 2, so it's been a while. I'm going to take my time to review this. Thanks for submitting the PR!

[kingsleyzissou]

Hey @Arenukvern this is great stuff. Do you mind fixing the lint errors and I can approve this and get it merged.

I verified this with the Vue sample app and the React sample app and both are working

[Arenukvern]

@kingsleyzissou yes, thank you very much for the preview!
I will fix lint errors in next 2-3 days

[wtrocki]

Rebase needed. You can simply change path - we moved repo structure

[wtrocki]

@kingsleyzissou maybe you can help with this somehow to not let it go stale

[Arenukvern]

@wtrocki sorry for long time fix.
Merged new structure and fixed lint errors.