devexperts / dx-platform Goto Github PK
View Code? Open in Web Editor NEWLicense: Mozilla Public License 2.0
License: Mozilla Public License 2.0
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
Looks like recent updates to popover tracking on container scoll (with capturing) break popovers with scrollable inside.
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.
Take a look:
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.
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.
We need to avoid any custom configuration as much as possible.
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
Some page layouts and scroll designs require for content to be displayed under scrollbars
Looks like now utils are not checked by tsc during CI process.
We need to add it.
container__item_isActive
in props.theme
but it isn't used inside component at all. We need to make use of it.props.theme.container__item
value, it will reset default active value and active menu item won't be highlighted. This bug should also be fixedCurrent 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
i suggest to add next rules:
() => { return x; }
to () => x
.any
as a type declaration.x === true
.String
, Number
, and Boolean
.console
methods.debugger
statements.super()
appears twice in a constructor.namespace
s.!
postfix operator.require()
.var
keyword.const
instead of let
and var
if possible.switch
statement to an if
statement with simple ===
comparisons.===
and !==
in place of ==
and !=
.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.
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.
Sometimes we don't need any icons in SteppableInput and thus have to use empty html tags to prevent typescript errors.
noUnusedLocals
suppressImplicitAnyIndexErrors
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.
This is not only a maintenance issue but also gives cleaner api to components using refs. (#85 )
threshold
prop and call onRequest
callback on initial mount and on resize/scrolleslint-config-react-hooks
)Differences in event bubbling between react portals and react-overlays portals made us incapable to move from second to first.
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.
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.
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
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:
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:
npm i prettier
.prettierrc
to the root folder (content above)npm run prettier
and npm run prettier:fix
to package.json
npm run prettier:fix
. Please commit the result separately. Same branch, but separate commit. This will make review easier.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.
Currently popover/popup animation can be attached only on mount.
It should be possible to also add some animation on unmount.
Implementation of MonadReader
for Context
doesn't respect inner Sink
's sink$
. This breaks defer
.
that will allow to define default data states for all project and override it in place if needed
This will cause some errors in react-kit. These errors should be fixed in the same PR.
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:
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.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.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.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):
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.
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
.
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> }
stateful
HOCthere 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 }
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);
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.