Sometimes we don't need any icons in SteppableInput and thus have to use empty html tags to prevent typescript errors.

We have annoying warnings like

@devexperts/[email protected]" has unmet peer dependency "@types/react@>=16.3.16"

when yarn installs dependencies.
Need to fix them.

We need to avoid any custom configuration as much as possible.

Hi all.

Recent update to platform show that we have too much external dependencies in the code. Refactoring gets too complicated and requires lot of unnecessary changes. For example, if we need to migrate from rxjs to mostjs we need to rewrite the whole codebase. However if we had a proxy/wrapper in utils (e.g. Stream) we could only change its implementation and don't touch the code. The same applies to libraries such as fp-ts. We could have local interfaces and implementations just forwarding calls to fp-ts and the rest of the code would be library agnostic.

So this ticket is going to track the upcoming migration.

i suggest to add next rules:

1. adjacent-overload-signatures - Enforces function overloads to be consecutive.
2. arrow-return-shorthand - Suggests to convert () => { return x; } to () => x.
3. ban-comma-operator - Disallows the comma operator to be used. Read more about the comma operator here.
4. binary-expression-operand-order - In a binary expression, a literal should always be on the right-hand side if possible. For example, prefer ‘x + 1’ over ‘1 + x’.
5. eofline - Ensures the file ends with a newline.
6. file-name-casing - Enforces a consistent file naming convention.
7. indent - Enforces indentation with tabs or spaces.
8. max-classes-per-file - A file may not contain more than the specified number of classes.
9. member-access - Requires explicit visibility declarations for class members.
10. no-any - Disallows usages of any as a type declaration.
11. no-boolean-literal-compare - Warns on comparison to a boolean literal, as in x === true.
12. no-construct - Disallows access to the constructors of String, Number, and Boolean.
13. no-console - Bans the use of specified console methods.
14. no-debugger - Disallows debugger statements.
15. no-default-export - Disallows default exports in ES6-style modules.
16. no-duplicate-super - Warns if super() appears twice in a constructor.
17. no-duplicate-switch-case - Prevents duplicate cases in switch statements.
18. no-duplicate-variable - Disallows duplicate variable declarations in the same block scope.
19. no-empty - Disallows empty blocks.
20. no-empty-interface - Forbids empty interfaces.
21. no-for-in-array - Disallows iterating over an array with a for-in loop.
22. no-magic-numbers - Disallows the use constant number values outside of variable assignments. When no list of allowed values is specified, -1, 0 and 1 are allowed by default.
23. no-namespace - Disallows use of internal modules and namespaces.
24. no-non-null-assertion - Disallows non-null assertions using the ! postfix operator.
25. no-require-imports - Disallows invocation of require().
26. no-shadowed-variable - Disallows shadowing variable declarations.
27. no-use-before-declare - Disallows usage of variables before their declaration.
28. no-var-keyword - Disallows usage of the var keyword.
29. object-literal-shorthand - Enforces/disallows use of ES6 object literal shorthand.
30. prefer-const - Requires that variable declarations use const instead of let and var if possible.
31. prefer-switch - Prefer a switch statement to an if statement with simple === comparisons.
32. radix - Requires the radix parameter to be specified when calling parseInt.
33. restrict-plus-operands - When adding two variables, operands must both be of type number or of type string.
34. triple-equals - Requires === and !== in place of == and !=.

Currently WithRXSelector return Observable of partial props. This allows to track subscription when mounting/unmounting. But this subscription holds only input props and effects are not handled. Such effects are manually subscribed in selector which may lead to memory leaks and even more they are not unsubscribed (cancelled or stopped) on container unmount.

WithRXSelector return type should be changed to smth like this: type WithRXSelectorResult<P> = { input$: Observable<Partial<P>>, output$: Observable<void> }

Looks like recent updates to popover tracking on container scoll (with capturing) break popovers with scrollable inside.

• popover is opened
• scrollCapture handler is attached to container (window by default)
• Scrollable is mounted and resize-detector is attached using ScrollStrategy which emits scroll event when installed
• scroll event inside popover is captured by handler
• popover is immediately closed

that will allow to define default data states for all project and override it in place if needed

• wait #44
• should be a wrapper around controlled Scrollable
• should detect resize of Scrollable content/scroll of Scrollable component
• should accept threshold prop and call onRequest callback on initial mount and on resize/scroll

• use internal CI for building artifacts
• set up auth to npm
• set up publishing bot

Take a look:

• https://semantic-release.gitbook.io/semantic-release/

1. Now we have container__item_isActive in props.theme but it isn't used inside component at all. We need to make use of it.
2. Now if you pass props.theme.container__item value, it will reset default active value and active menu item won't be highlighted. This bug should also be fixed

https://github.com/devex-web-frontend/dx-platform/blob/d1f683bf9545a53e9f486922bcf7d21736e375af/packages/react-kit/src/components/Popover/Popover.tsx#L46

https://github.com/devex-web-frontend/dx-platform/blob/d1f683bf9545a53e9f486922bcf7d21736e375af/packages/react-kit/src/components/Popover/Popover.tsx#L150

• use existing config for CRA applications (or just eslint-config-react-hooks)
• replicate existing tslint config with eslint rules

IE/FF:

Chrome:

This blocks #80

Typescript since 3.0 has cool feature: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-0.html#support-for-defaultprops-in-jsx .
It's important feature because it allows us not to use withDefaults HOC.
But this is not working in dx-platform. I think the reason is in our tsconfig.

Need to investigate what exactly is the reason and how can we fix it.

• investigate if it's possible to handle different formats in a general way (via strategy)
• if it's not possible (or too hard to implement), just support enum of two values: latin (MM/DD/YYYY) and russian (DD/MM/YYYY) formats

I think we need update fp-ts to 1.18.* because new RemoteData use this version. If I upgrade RemoteData, in lock file be two version fp-ts and type check going out of memory.

For now.
Handler onValueChange in Numeric Stepper (NS) runs only 1) when buttons +/- click 2) input's onBlur

The problem.
I've got an issue when my NS gets value and handler from props. The component has changable data every second (doesn't matter, but fast). So if I try to change the value in input manually and do not have enough time it (value) resets to the last one from props. It works with buttons +/- because its click runs onValueChange handler.

Issue
Run onValueChange handler during manual input value change

• add noUnusedLocals
• remove suppressImplicitAnyIndexErrors

mirrors devex-web-frontend/dx-components#49

on the TS 3.3.3 if we use isEmpty from fp-ts for noData prop we have these errors

Differences in event bubbling between react portals and react-overlays portals made us incapable to move from second to first.

Recently we removed utils/sotrybook.ts and decided that we should use direct imports instead. But here is the thing: this package allows us not to have @storybook/* as a direct dependencies of our projects, just leaving dx-tools storybook as an interface to run storybook.

How correct is that in our projects to import stuff from @storybook/* packages when they are not listed in project dependencies?
From this perspective, having utils/storybook.ts with reexports makes sense to me.

Rename lint/.prettierrc to lint/.prettierrc.json for use it in side-projects.
For example:

side_project/.prettierrc.js:

const base = require('@devexperts/lint/.prettierrc');
const overrides = {
  "overrides": [
    {
      "files": ["*.js", "*.jsx"],
      "options": {
        "parser": "babylon"
      }
    }
  ]
};

module.exports = Object.assign(base, overrides);

i had a need to overwrite one of states of RenderRemoteData (RRD) that was passed within getRenderRemoteData (gRRD). but after a long offline discussion about PR expanding the model of RRD from cRRD ( #130 ) i realized, that i can use withDefaults (wD) instead of gRRD.
i believe we should use wD and deprecate gRRD

• needed for granular control for components like InfiniteLoader (wrapper around Scrollable)
• possibly provide uncontrolled version using stateful HOC

• integrate https://commitlint.js.org
• integrate https://github.com/commitizen/cz-cli
• investigate support as a precommit hook both locally and on remote

Add prettier to react-kit package.
I suggest following .prettierrc (from one of our projects, may be discussed):

{
  "bracketSpacing": true,
  "jsxBracketSameLine": true,
  "parser": "typescript",
  "printWidth": 120,
  "semi": true,
  "singleQuote": true,
  "tabWidth": 4,
  "trailingComma": "all",
  "useTabs": true
}

This task includes following steps in the root of the repo:

1. npm i prettier
2. adding .prettierrc to the root folder (content above)
3. adding scripts npm run prettier and npm run prettier:fix to package.json
4. run npm run prettier:fix . Please commit the result separately. Same branch, but separate commit. This will make review easier.

Lower case in path input/Input.tsx can cause build fail on CI(Teamcity for example) sometimes because it lets Windows to neglect mistaken font case and also it doesn't look like consistent naming of platform components.

• check all packages
• force casing with a tslint/eslint rule (depends on the package used)

there are a lot of components that just a wrapper around native elements like https://github.com/devex-web-frontend/dx-platform/blob/master/packages/react-kit/src/components/Button/Button.tsx. A lot of props are duplicated from native props of react elements. Is there any sense to duplicate it manualy instead of merging with JSX typings ?
for example with typings for Button component:

export type TFullButtonProps = JSX.IntrinsicElements['input'] & { ...customProps }

Currently WithRXSelector should return an observable of partial props objects. This is messy and requires a ton of boilerplate around using toKeyValue each time.
WithRXSelector should now return an object of partial props where values are actual observables. WithRX in turn should traverse this dictionary and produce a single observable.

This is going to track an upcoming migration to a css-in-js solution. Which one is to be decided but I suggest styled-components because one of our teams has experience of using it in a production-running project.

Any thoughts?

/cc @sutarmin @igoralekseev @mankdev @dramoturg

UPD:

• migrate to styled-components
• migrate to lower-dash-case in file names #84

This is an issue to discuss whether we need to keep maintaining @devexperts/tools package. As @raveclassic stated in other issue (comment link):

Furthermore I'd think about dropping tools at all. It's a useless layer of abstraction introduced for the sake of abstraction. Newcomers should not only learn nuances of npm/yarn build/start steps, how to use storybook, how to configure CRA, but also this package. Is there any good reason to force this abstraction with leaking details like storybook internals anyway?

My opinion is that(copying from the same issue):

1. Webpack configs: another way we should copy them from project to project
2. Easier maintainability of build dependencies: upgrade one time in tools instead of upgrading in every other project.
3. A consistent approach with this abstraction across different projects makes moving developers from project to project easier.
4. Scaffolding of new projects is easier as well.

But AFAIK all the recent projects was scaffolded without @devexperts/tools, but with just using CRA and that may be a good argument to stop maintaining tools if we have convenient approach there.

What is the approach with webpack config overloading and working with storybook in a recent projects, @raveclassic , @scink , @mankdev ? Is it just a manual copy-pasting of those custom build files?

@devex-web-frontend/team any opinions are appreciated.

This will cause some errors in react-kit. These errors should be fixed in the same PR.

Implementation of MonadReader for Context doesn't respect inner Sink's sink$. This breaks defer.

Looks like now utils are not checked by tsc during CI process.
We need to add it.

Now we have only root README.md so published on npm packages from this monorepo does not have any description. Some of the users of our packages want these packages to be documented. For start, it would be enough to create packages/*/README.md files with a brief explanation of the purposes of each package.

Current implementation of withRX2 observers the source on animationFrame scheduler by default. This leads to a case when inactive tab is processing websocket messages delaying execution of the stream to the next animation frame. In its turn this leads to a freeze on tab activation because scheduler is trying to flush all buffered work.

We should discuss wether it's the responsibility of the end project to skip/buffer socket messages or withRX should be scheduler-agnostic and we should improve its API.

/cc @sutarmin @dramoturg

Not sure if it's outside of component's scope.
However let's clear some things with NS.
Consider following code to reproduce behaviour (a little bit modified NumericStepper.page.tsx example):

const dollarFormatter = (value: string | number) => `$${Number(value).toFixed(5)}`;
const dollarParser = (input: string) => {
	const newValue = Number(input.slice(1));
	return isNaN(newValue) ? 0 : newValue;
};

when entering value into NS input it's always set carete to an end.

Seems like it's going to happen only if value has fixed amount of digits.

Is it bug or expected behaviour?

I was trying to implement custom Selectbox with icons instead of text and faced a lot of design problems:

1. The styling for the component is completely solid. You can't separate it into different css modules like it's implemented in other components (NumericStepper, for example). That leads us into the problem I faced: when you need to overload the Anchor, you need to use theme prop, that depends on theme you provide inside the Selectbox and create themable component.
2. Selectbox's onValueChange handler accepts string | number | undefined type and I need to implement the function with the same signature and then cast/check types. Maybe, generics here could work better. For example, I could use string literals union type to represent my options, and I'm eager to work with this and only this set of values.
3. The Anchor component accepts value prop as ReactText type. In my case I expect it to be just string or string literal, as soon as I'm overloading the Anchor component. So again, I need to cast types there, but it could also be generic like I mentioned above.

Currently popover/popup animation can be attached only on mount.
It should be possible to also add some animation on unmount.

Some page layouts and scroll designs require for content to be displayed under scrollbars

After trying to update TS to 3.3.3 withDefaults implementation contains following type error:

I have no idea why TS complaining, types look proper for each other.
Any ideas?

We have wrong types for the following DateInput props: onFocus, onBlur, onMouseEnter and onMouseLeave. Currently, their inferred type is (((event: React.MouseEvent<HTMLElement>) => void) & (() => void)) | undefined which doesn't allow us to pass a callback that requires MouseEvent (because of () => void part).

The reason is that this props declared twice: on the TFullInputProps (with correct signature) and on TDateInputOwnProps itself (wrong one). The solution here is to simply remove these props from TDateInputOwnProps and let them be inferred from TFullInputProps.

This is not only a maintenance issue but also gives cleaner api to components using refs. (#85 )

Current implementation of combineContext doesn't respect the Sink returned by project function so that we can't attach additional effects to the outer Context. This makes impossible to combine additional effects together with Context dependencies.

Maybe need add ability extend of default server config.
In my situation I need to pass
disableHostCheck: true , custom value for historyApiFallback, publicPath keys and proxy