flip/DefinitelyTyped
1
0
Fork 0
mirror of https://github.com/FlipsideCrypto/DefinitelyTyped.git synced 2026-02-06 10:56:53 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

🤖 Merge PR #45701 Improve @types/styled-theming variant types by @tgroutars

Browse Source 
* Improve styled-theming variant types

* Add tests
This commit is contained in:
Thomas Groutars 2020-06-25 15:19:52 +02:00 committed by GitHub
parent a288209810
commit 9eb48c844d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 40 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
types/styled-theming/index.d.ts vendored
View File

@ -6,13 +6,13 @@
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.9
import { FlattenInterpolation, ThemeProps, ThemedStyledProps } from "styled-components";
import { FlattenInterpolation, ThemeProps, ThemedStyledProps } from 'styled-components';
declare function theme(name: string, values: theme.ThemeMap): theme.ThemeSet;
declare namespace theme {
type ThemeValueResult =
string
| string
| FlattenInterpolation<ThemeProps<any>>
| FlattenInterpolation<ThemedStyledProps<any, any>>;
type ThemeValueFn = (props: object) => ThemeValueResult;
@ -22,18 +22,18 @@ declare namespace theme {
[key: string]: ThemeValue;
}
interface VariantMap {
[key: string]: ThemeMap;
}
type VariantMap<TVariant extends string> = {
[key in TVariant]: ThemeMap;
};
type ThemeSet = (props: object) => string;
type VariantSet = (props: object) => string;
type VariantSet<TProp extends string, TVariant extends string> = (props: { [key in TProp]?: TVariant }) => string;
function variants(
function variants<TProp extends string, TVariant extends string>(
name: string,
prop: string,
values: VariantMap
): VariantSet;
prop: TProp,
values: VariantMap<TVariant>,
): VariantSet<TProp, TVariant>;
}
export = theme;

50
types/styled-theming/styled-theming-tests.ts
View File

@ -1,62 +1,72 @@
import theme from "styled-theming";
import { css } from "styled-components";
import React from 'react';
import theme from 'styled-theming';
import styled, { css } from 'styled-components';
const textColor = theme("mode", {
dark: "white",
light: "black"
const textColor = theme('mode', {
dark: 'white',
light: 'black',
});
const backgroundColor = theme.variants("mode", "variant", {
default: { light: "gray", dark: "darkgray" },
primary: { light: "blue", dark: "darkblue" },
success: { light: "green", dark: "darkgreen" },
warning: { light: "orange", dark: "darkorange" }
const backgroundColor = theme.variants('mode', 'variant', {
default: { light: 'gray', dark: 'darkgray' },
primary: { light: 'blue', dark: 'darkblue' },
success: { light: 'green', dark: 'darkgreen' },
warning: { light: 'orange', dark: 'darkorange' },
});
const cssTheme = theme("mode", {
const cssTheme = theme('mode', {
dark: css`
background: gray;
`,
light: css`
background: white;
`
`,
});
interface cssProps {
visible: boolean;
}
const cssPropsTheme = theme("mode", {
const cssPropsTheme = theme('mode', {
dark: css`
visibility: ${(props: cssProps) => props.visible ? 'visible' : 'hidden'};
visibility: ${(props: cssProps) => (props.visible ? 'visible' : 'hidden')};
`,
light: css`
background: white;
`
`,
});
interface buttonProps {
hidden?: boolean;
}
const button = theme.variants('mode', 'type', {
const button = theme.variants('mode', 'kind', {
primary: {
light: (props: buttonProps) =>
css`
background: ${props.hidden ? 'transparent' : 'blue'};
background: ${props.hidden ? 'transparent' : 'blue'};
`,
dark: (props: buttonProps) =>
css`
background: ${props.hidden ? 'transparent' : 'black'};
background: ${props.hidden ? 'transparent' : 'black'};
`,
},
secondary: {
light: (props: buttonProps) =>
css`
background: ${props.hidden ? 'transparent' : 'skyblue'};
background: ${props.hidden ? 'transparent' : 'skyblue'};
`,
dark: (props: buttonProps) =>
css`
background: ${props.hidden ? 'transparent' : 'grey'};
background: ${props.hidden ? 'transparent' : 'grey'};
`,
},
});
const Button = styled.button`
${button}
`;
const elementWithoutProp = React.createElement(Button);
const elementWithCorrectProp = React.createElement(Button, { kind: 'secondary' });
// $ExpectError
const element = React.createElement(Button, { kind: 'wrong variant' });