Add @theme-ui/components

[hasparus]

Please fill in this template.

• Use a meaningful title for the pull request. Include the name of the package modified.
• Test the change in your own code. (Compile and run.)
• Add or edit tests to reflect the change. (Run with npm test.)

Failed on my machine with

Clean data
Clean logs
Clean output
Using local Definitely Typed at D:\workspace\DefinitelyTyped.
Parsing definitions...
AssertionError [ERR_ASSERTION] [ERR_ASSERTION]: "babel__code-frame" >= "babelify"
    at Object.assertSorted (D:\workspace\DefinitelyTyped\node_modules\types-publisher\src\util\util.ts:640:9)
    at DiskFS.readdir (D:\workspace\DefinitelyTyped\node_modules\types-publisher\src\get-definitely-typed.ts:226:16)
    at Object.parseDefinitions [as default] (D:\workspace\DefinitelyTyped\node_modules\types-publisher\src\parse-definitions.ts:35:98)
    at main (D:\workspace\DefinitelyTyped\node_modules\types-publisher\src\tester\test.ts:24:27)
    at processTicksAndRejections (internal/process/task_queues.js:97:5) 
{
  generatedMessage: false,
  code: 'ERR_ASSERTION',
  actual: false,
  expected: true,
  operator: '=='
}
error Command failed with exit code 1.

• Follow the advice from the readme.
• Avoid common mistakes.
• Run npm run lint package-name (or tsc if no tslint.json is present).

Select one of these and delete the others:

If adding a new definition:

• The package does not already provide its own types, or cannot have its .d.ts files generated via --declaration
• If this is for an NPM package, match the name. If not, do not conflict with the name of an NPM package.

---

• Create it with dts-gen --dt, not by basing it on an existing project.

> npx dts-gen --dt --name @theme-ui/components --template module
npx: installed 59 in 6.878s
Unexpected crash! Please log a bug with the commandline you specified.
ENOENT: no such file or directory, mkdir 'types\@theme-ui\components'

> npx dts-gen --dt --name theme-ui__components --template module -o
npx: installed 59 in 7.202s
Warning: Could not retrieve version/homepage information: HTTP Error 404: Not Found for http://registry.npmjs.org/theme-ui__components

I didn't find the docs on how to run dts-gen for namespaced package.
The latter command generated a proper DT directory and I started from that.

---

• Represents shape of module/library correctly
• tslint.json should be present and it shouldn't have any additional or disabling of rules. Just content as { "extends": "dtslint/dt.json" }. If for reason the some rule need to be disabled, disable it for that line using // tslint:disable-next-line [ruleName] and not for whole package so that the need for disabling can be reviewed.
• tsconfig.json should have noImplicitAny, noImplicitThis, strictNullChecks, and strictFunctionTypes set to true.

[typescript-bot]

@hasparus Thank you for submitting this PR!

Because this is a new definition, a DefinitelyTyped maintainer will be reviewing this PR in the next few days once the Travis CI build passes.

In the meantime, if the build fails or a merge conflict occurs, I'll let you know. Have a nice day!

[typescript-bot]

👋 Hi there! I’ve run some quick measurements against master and your PR. These metrics should help the humans reviewing this PR gauge whether it might negatively affect compile times or editor responsiveness for users who install these typings.

Let’s review the numbers, shall we?

These typings are for a package that doesn’t yet exist on master, so I don’t have anything to compare against yet! In the future, I’ll be able to compare PRs to theme-ui__components with its source on master.

Comparison details 📊

Batch compilation
Type count	28278
Assignability cache size	43979
Language service measurements
Samples taken	128
Identifiers in tests	128
getCompletionsAtPosition
Mean duration (ms)	905.8
Mean CV	8.3%
Worst duration (ms)	1341.5
Worst identifier	width
getQuickInfoAtPosition
Mean duration (ms)	876.8
Mean CV	8.6%
Worst duration (ms)	1343.1
Worst identifier	sx
System information
Node version	v12.13.1
CPU count	2
CPU speed	2.294 GHz
CPU model	Intel(R) Xeon(R) CPU E5-2673 v4 @ 2.30GHz
CPU Architecture	x64
Memory	6.8 GiB
Platform	linux
Release	4.15.0-1063-azure

[hasparus]

I'm failing lint locally with

$ dtslint types theme-ui__components
Error: D:/workspace/DefinitelyTyped/types/theme-ui__components/theme-ui__components-tests.tsx:102:10
ERROR: 102:10  expect  TypeScript@next compile error: 
Type '{ label: string; name: string; defaultValue: string; onChange: (e: ChangeEvent<HTMLInputElement>) => void; mx: number[]; }' is not assignable to type 'IntrinsicAttributes & { label: string; name: string; } & Omit<InputProps | PropsWithChildren<InputProps>, "label" | "marginBottom" | "marginLeft" | "marginRight" | "marginTo  Property 'mx' does not exist on type 'IntrinsicAttributes & { label: string; name: string; } & Omit<InputProps | PropsWithChildren<InputProps>, "label" | "marginBottom" | "marginLeft" | "marginRigERROR: 109:10  expect  TypeScript@next compile error: 
Type '{ as: "textarea"; label: string; name: string; rows: number; placeholder: string; onChange: (e: ChangeEvent<HTMLTextAreaElement>) => void; }' is missing the following properties from type 'Omit<DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "label" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "margin" | ... 8 more ... | "as">': required, disabled, hidden, dir, and 264 more.
ERROR: 117:10  expect  TypeScript@next compile error: 
Type '{ as: ForwardRefExoticComponent<Pick<TextareaProps, "required" | "disabled" | "hidden" | "dir" | "form" | "p" | "slot" | "style" | "title" | "color" | "wrap" | "padding" | "key" | "children" | "backgroundColor" | ... 287 more ... | "rows"> & RefAttributes<...>>; ... 5 more ...; px: number[]; }' is missing the following properties from type 'Omit<Pick<TextareaProps, "required" | "disabled" | "hidden" | "dir" | "form" | "p" | "slot" | "style" | "title" | "color" | "wrap" | "padding" | "key" | "children" | "backgroundColor" | ... 287 more ... | "rows"> & RefAttributes<...>, "label" | 
... 13 more ... | "as">': required, disabled, hidden, dir, and 283 more.

    at D:\workspace\DefinitelyTyped\node_modules\dtslint\bin\index.js:193:19
    at Generator.next (<anonymous>)
    at fulfilled (D:\workspace\DefinitelyTyped\node_modules\dtslint\bin\index.js:6:58)
error Command failed with exit code 1.

It looks like all of the props are required during the dtslint check.

tsc in types/theme-ui__components doesn't report any error and neither does
dtslint types theme-ui__components --localTs .\node_modules\typescript\lib what's pretty weird because this is the same TypeScript version (next 3.8.0-dev.20191214).

---

> tsc --extendedDiagnostics
Files:                         35
Lines:                     185814
Nodes:                     356653
Identifiers:               112789
Symbols:                   185883
Types:                      38653
Memory used:              231516K
Assignability cache size:   82486
Identity cache size:           23
Subtype cache size:            30
I/O Read time:              0.04s
Parse time:                 0.93s
Program time:               1.03s
Bind time:                  0.29s
Check time:                 5.25s
Total time:                 6.58s

[eknowles]

looks good 👍

[typescript-bot]

We've gotten sign-off from a reviewer 👏. A maintainer will soon review this PR and merge it if there are no issues. If it shouldn't be merged yet, please leave a comment saying so and we'll wait. Thank you for contributing to DefinitelyTyped!

[petrbela]

@hasparus I think we should also define and export FlexProps. Is there a specific reason it was omitted? Happy to make a PR otherwise.

[hasparus]

hey @petrbela 👋 I omitted it because it's the same thing as BoxProps (modulo augmentation) but I think it should be exported anyway

We could rename FlexStyleProps to FlexOwnProps and do

export interface FlexProps extends Assign<React.ComponentProps<'div'>, FlexOwnProps> {}

so it can be augmented in user code before adding to DT if theme-ui Flex gets more props