Comments (17)
Hi all, I think I've about cracked the Box
egg here. This is working well for me so far:
xstyled.d.ts
Edit: see an updated version (and discuss issues/bugs) in this gist
declare module '@xstyled/styled-components' {
import styled, { StyledComponent, DefaultTheme } from 'styled-components'
export * from 'styled-components'
interface Breakpoints {
xs: any
sm: any
md: any
lg: any
xl: any
}
type BreakpointObject<ArgType> = {
[Key in keyof Breakpoints]?: ArgType
}
type WithBreakpointArgs<Props> = {
[Key in keyof Props]?: Props[Key] | BreakpointObject<Props[Key]>
}
type FlexArgs =
| 'flex-start'
| 'center'
| 'flex-end'
| 'space-around'
| 'space-between'
interface BoxPropsBase {
/* Display */
display:
| 'block'
| 'inline-block'
| 'inline'
| 'flex'
| 'grid'
| 'none'
| 'inherit'
| 'initial'
/* Color */
color: string
backgroundColor: string
/* Margins */
margin: number
m: number
marginTop: number
mt: number
marginRight: number
mr: number
marginBottom: number
mb: number
marginLeft: number
ml: number
mx: number
my: number
/* Padding */
padding: number
p: number
paddingTop: number
pt: number
paddingRight: number
pr: number
paddingBottom: number
pb: number
paddingLeft: number
pl: number
px: number
py: number
/* Space & Layout */
space: number
width: number | string
/* Grid */
row: boolean
col: boolean | number
/* Flex */
justifyContent: FlexArgs
alignItems: FlexArgs
}
/* adds support for { xs: arg } and makes all props optional */
export type BoxProps = WithBreakpointArgs<BoxPropsBase>
export const Box: StyledComponent<
'div',
DefaultTheme,
WithBreakpointArgs<BoxProps>
>
export default styled
}
This supports using the <Box>
component with all of these props as the declared type (i.e. width: number
), as well as with the media query syntax. So, these will all work
<Box margin={2}>:)</Box>
<Box margin={{ xs: 1, xl: 3 }}>:)</Box>
You can also create your own styled(Box)
and the props will still work:
const Wrapper = styled(Box)`
// ...
`
<Wrapper mt={2} />
To Do:
- Other props that can be passed on to
<Box>
, such as borders, are missing.- @neoziro is there a complete list of props that Box will accept?
-
xxBox
components are not supported. These can all be added manually, like:But I don't have the time (or need) for this. It might also be possible to iterate over all available tag names, but I'm not sure if you can create concatenated object names like this, for instance,export const aBox: StyledComponent< 'a', DefaultTheme, WithBreakpointArgs<BoxProps> >
a
->aBox: StyledComponent<...>
- It would be nice to automatically read what a user sets their
breakpoint
keys to in their ownstyled.d.ts
, and use that for the Breakpoint keys, falling back to the styled-system defaults. In my project, i'll just be usingmobile
,tablet
,desktop
.
Anyone out there want to goof around with this and report back if things are working or not?
@neoziro , OK if we use this issue to track this stuff until it's to a point where we can add it to the DefinitelyTyped repository?
from xstyled.
Cool! I'll tidy up my types and submit those as well.
from xstyled.
@good-idea FYI I got the xstyled/system
typings added to DefinitelyTyped.
from xstyled.
@wa4-fearless-otter sorry, i never got around to this --- i might not be able to for a little while. In the meantime, the gist i linked to above covers most cases
from xstyled.
Hello @ryee-dev, to be clear, I am not a TypeScript user so I can't maintain types. Adding types in the core of the library is too risky if core maintainers are not TypeScript friendly. That said, types of xstyled will have to be in https://github.com/DefinitelyTyped/DefinitelyTyped. At least at start.
from xstyled.
Has anyone tried whether it's compatible with @typed/styled-components
? Something tells me it should be, but I don't have time to try right now...
from xstyled.
Yes it should be compatible with @types/styled-components
you will only miss Box
and styled.xxxBox
. If you can extends @types/styled-components
, this is the good solution.
from xstyled.
I wrote this xstyled.d.ts
file for one of my projects, which applies all styled-components types to xstyled. Worked fine for me until this point.
The only thing is that Box
types are missing, just like @neoziro mentioned.
declare module '@xstyled/styled-components' {
import styled from 'styled-components'
export * from 'styled-components'
export default styled
}
Also did the same for @xstyled/system
with the types from styled-system
. Looking good so far for my basic use cases, but I'm not sure if they are fully compatible with each other.
declare module '@xstyled/system' {
export * from 'styled-system'
}
from xstyled.
@neoziro is there a complete list of props that Box will accept?
Yes programatically you have access to the system props, or just https://www.smooth-code.com/open-source/smooth-ui/docs/box/#box-2
@neoziro , OK if we use this issue to track this stuff until it's to a point where we can add it to the DefinitelyTyped repository?
Yes of course, feel free to use it to track the work!
from xstyled.
Hi all, I've added updated definitions in this gist:
https://gist.github.com/good-idea/96576e16c650c3730c53844d266d7149
This includes all possible props for Box, as well as definitions for all xxBox
, i.e. styled.aBox
, styled.articleBox
. (these are untested)
Feel free to try them in your project, and add any comments/bugs in a comment in the gist. When it's been tested a little bit, I'll submit it to DefinitelyTyped.
from xstyled.
I am not a TypeScript user, it looks good but I can't review it. I don't add it to the repository because it wouldn't be maintained.
from xstyled.
@neoziro yup, no problem! I'm going to use them in my projects for a bit - maybe gather some feedback from any others who might be using them - and when they're ready to go I'll publish them in a separate package.
from xstyled.
@good-idea I've got a very rough draft of typings for xstyled/system
in a gist.
from xstyled.
@stevejay these look great. I'm not familiar enough with xstyled/system
and how it overlaps with this package - is there anything I can do to tweak mine to better fit? (I also didn't know about ccstype
, i'll make a note to update my defs to use that)
from xstyled.
@good-idea There's a description comparing the two packages here. Basically xstyled/system
is the engine and xstyled/styled-components
is a wrapper for styled-components
that integrates that engine. AFAIK there's no tweaking necessary for your typings because there's no overlap between the two packages.
from xstyled.
@good-idea Is there any progress on this?
from xstyled.
I had a go at some types for @xstyled/emotion
: link
I basically took @good-idea's approach and replaced the StyledComponent
generic type signature with the emotion
signature: StyledComponent<InnerProps, StyleProps, Theme>
.
The xxBox
types are mapped directly from the original, so they may not all actually exist in the lib (?). I'm relatively new to xStyled/TS in general and I haven't used these types much yet, so please add a comment to the gist if there's anything I can improve.
Note: I added optional typing for your custom theme, near the top of the gist
Edit
I removed the xxBox
components
Edit 2
I re-added the xxBox
components as CreateStyledComponentBase
types, and extended the styled
name with an intersection: styled & { ...xxBoxTypes }
.
Reasoning: I changed the types of xxBox
to CreateStyledComponentBase
to get the styled.xxBox' ... '
TemplateString notation working, and I extended the styled
type in order to make xxBox
properties available on the styled
object (I couldn't access styled.xxBox
with the other types).
According to this TypeScript issue, we can't easily merge the declaration from @emotion/styled
into our @custom/xstyled-emotion
types because styled
is exported as default, but this comment suggested an intersection type so I tried it out and it seems to work.
...
import styled_, { StyledComponent } from '@emotion/styled'
...
export const Box: StyledComponent<
React.ComponentPropsWithRef<'div'>,
WithBreakpointArgs<BoxProps>,
Theme
>
...
const styled: typeof styled_ & {
Box: typeof Box,
aBox: CreateStyledComponentBase<
React.ComponentPropsWithRef<'a'>,
WithBreakpointArgs<BoxProps>,
Theme
>,
...
}
I can now use the xxBox
components with template string notation, which I couldn't do before:
const Text = styled.pBox`
font-size: 1
`
I'd love some input on whether CreateStyledComponentBase
is the correct type for the xxBox
components, because I'm not sure. Box
must be a StyledComponent
type in order to have withComponent()
, but that type cannot be used with the styled.Box' ... '
template-string notation. I'm stumped, but I think this is close to being correct - maybe someone else who knows more can chime in?
from xstyled.
Related Issues (20)
- xstyled v 3.7.0 typescript error HOT 2
- Incorrect breakpoint with useBreakpoint hook HOT 3
- Why height and width are shortened? HOT 2
- TS error when trying to export xstyled with added utilities HOT 1
- Document site is broken on android chrome when revisited. HOT 1
- Rename the color prop to just c HOT 10
- `border` shorthand handling is buggy HOT 1
- Fractional keys in the theme are not working HOT 1
- Passing `as` prop while using styled notation creates hydration errors in NextJS dev mode HOT 1
- The Documentation should have examples in typescript and plain javascript. HOT 1
- the documentation page has unnecessary horizontal scroll HOT 1
- I'm getting an error using in SSR with NextJS: Attempted import error: 'useState' is not exported from 'react' (imported as 'React').
- Exist a way to generate the style object or classNames to be used in other third party libraries?
- Incompatibility with GatsbyJS? I have problems to make builds to production, the components are not seen with the style.
- Is it possible to style an element based on parent hover? HOT 1
- Are nested color objects in theme supported?
- Nextjs app dir?
- Is there an easier way to adding new utilities?
- Is there any way to remove color preset in colors property?
- Is it possible to have two themes at the same time with Typescript?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from xstyled.