Using utility specific interfaces and types

[kadoshms]

💬 Questions and Help

Hey there!

First of all, this project looks like a promising one. Iv'e been (and still am) exploring the best practices for creating a sustainable and scalable design systems, and this one looks like a good direction.

The issue:

I would like to create a design system in which some components can pass on props which will be used as xstyled utility props. Let's say I have a simple container component, which does almost nothing but render it's children wrapped in a container. I would like to let user pass on spacing props.

Same as in styled-system my intuition drove me to write this:

import { x } from '@xstyled/styled-components';
import { SpaceProps } from '@xstyled/system';
import { FC } from 'react';

type ContainerProps = SpaceProps;

export const Container: FC<ContainerProps> = (props) => <x.div {...props} />;

1. My IDE complains: TS2305: Module '"../../../../../node_modules/@xstyled/system/dist"' has no exported member 'SpaceProps'.

2. Since I never installed @xstyled/system directly, and it's probably a dep of @xstyled/styled-components, it felt akward to write this import statement.

The reason I want to do that, is that my design sytem components should only expose a specfic set of props to custimize, and in addition, the design system consumers should know nothing about xstyled or any other underlying technical decisions we made there, only use components and props.

Is t here any example of doing such thing? is that a ts configuration problem?

Thanks a lot, keep going with this great job.

[YassienW]

I'm not sure if this answers your question or not, but @xstyled/styled-components exposes all utility prop types, in my project i use this:

import styled, {
    color,
    space,
    SpaceProps,
    ColorProps,
} from '@xstyled/styled-components'