feat(adding typescript): adds typescript to the library

[seanmpage]

OVERVIEW

Implements typescripts for the package

WHERE SHOULD THE REVIEWER START?

src/** types/index.d.ts

HOW CAN THIS BE MANUALLY TESTED?

List steps to test this locally.

ANY NEW DEPENDENCIES ADDED?

Many dependencies were added/upgraded. Please refer to https://github.com/Decisiv/styled-components-modifiers/pull/24/files#diff-b9cfc7f2cdf78a7f4b91a753d10865a2L52

CHECKLIST

Be sure all items are ✅ before submitting a PR for review.

• [x] Verify the linter and tests pass: npm run review
• [x] Verify this branch is rebased with the latest master

GIF

[andrewtpoe]

@seanmpage - I had one more tweak to add to the types, so I went ahead and cleaned up this review feedback from @tinynumbers.

The tweaks I made are around the types for a modifiers prop. Where previously it was a simple type validating that the keys were strings, now it is a generic that validate the keys are present in the modifier config. It can be used like this:

interface SillyBoxPropTypes extends FlexPropTypes, SpacingPropTypes {
  background?: ModifiersProp<typeof backgroundModifiers, typeof sizes>;
}

typeof sizes is optional, but will also validate that it is a properly structured responsive modifier value if provided.

[eric-burel]

Hi, do you have a sample usage on a TypeScript component? What would be the props so that "modifiers" is recknognized?

Edit: best I could do:

const ModalWrapper = styled.div`
  max-width: 800px;
  ${applyStyleModifiers(MODAL_MODIFIERS)}
`;

interface ModalProps {
  children: React.ReactNode;
  modifiers: ModifierKeys; // imported from the lib, but instead I'd like to just write interface ModalProps extend WithModifiers {...} for instance
}
export const Modal = ({ children, modifiers }: ModalProps) => (
  <ModalWrapper modifiers={modifiers}>{children}</ModalWrapper>
);

So to sum it up I'd like to have this type:

interface WithModifiers {
  modifiers?: ModifierKeys;
}

We also need it when calling styled: styled.div<WithModifiers>... I can PR, and provide TS example in the doc, if does not already exist.

[andrewtpoe]

Hi @eric-burel. Thanks for asking!

At this time, we don't have any docs for using this with TypeScript, though we probably should. Their is an open issue where I propose a new feature I call Dynamic Modifiers, and in working on this feature I've been working on our types as well. This feature still has a ways to go before it is ready for release though, and my focus has been elsewhere.

If you have a working solution, absolutely feel free to open a PR. I'd love to have the types more robust across the board.