Merge 9c3d1da into 40bdcf2

packages/component-generator/src/createComponents.tsx

@@ -3,9 +3,9 @@ import { isValidElementType } from 'react-is';
 import isPlainObject from 'lodash.isplainobject';
 import isEmpty from 'lodash.isempty';
 import { createStyledComponent, createFC } from './createStyledComponent';
-
 import { Settings, BaseConfig, Variant, ComponentsRecord } from './typings';
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
 export function createComponents<
   Config = any,
   ThemeType = any,
@@ -17,7 +17,7 @@ export function createComponents<
     | React.FC<Props>,
   settings: Settings<Element>
 ): ComponentsRecord<Config, Props, ThemeType> {
-  const dict = createBaseComponent<Config, ThemeType, Props>(base);
+  const dict = createBaseComponent<Config, ThemeType, Props, Element>(base);
   const isConfigBase = dict.hasOwnProperty('Base');
 
   if ((isValidElementType(base) || !isEmpty(base)) && !isEmpty(settings)) {
@@ -26,8 +26,11 @@ export function createComponents<
 
       if (hasKey(settings, prop)) {
         dict[prop] = isConfigBase
-          ? generateComponent<ThemeType, Props, Element>(base, setting)
-          : createFC<Props>(base, setting);
+          ? generateComponent<ThemeType, Props, Element>(
+              base as BaseConfig<Props, AllHTMLAttributes<Element>, ThemeType>,
+              setting as Settings<Element>
+            )
+          : createFC<Props>(base as React.FC<Props>, setting);
         dict[prop].displayName = prop;
       }
       return dict;
@@ -42,15 +45,19 @@ export function createBaseComponent<
   ThemeType = any,
   Props = Record<string, unknown>,
   Element = HTMLDivElement
->(base): ComponentsRecord<Config, Props, ThemeType> {
+>(
+  base:
+    | BaseConfig<Props, AllHTMLAttributes<Element>, ThemeType>
+    | React.FC<Props>
+): ComponentsRecord<Config, Props, ThemeType> {
   const dict = {} as ComponentsRecord<Config, Props, ThemeType>;
 
   if (isPlainObject(base)) {
     dict.Base = createStyledComponent<
       Props,
       ThemeType,
       AllHTMLAttributes<Element>
-    >(base);
+    >(base as BaseConfig<Props, AllHTMLAttributes<Element>, ThemeType>);
   }
 
   return dict;
@@ -60,13 +67,16 @@ export function generateComponent<
   ThemeType = any,
   Props = Record<string, unknown>,
   Element = HTMLDivElement
->(base, setting) {
+>(
+  base: BaseConfig<Props, AllHTMLAttributes<Element>, ThemeType>,
+  setting: Settings<Element>
+) {
   return createStyledComponent<Props, ThemeType, AllHTMLAttributes<Element>>({
     ...base,
     styles: { ...base.styles, ...setting },
     attrs: { ...base.attrs, ...setting.attrs } || {},
     element: !!setting.as ? setting.as : base.element
-  } as BaseConfig<Props & Variant<ThemeType>, ThemeType, AllHTMLAttributes<Element>>);
+  } as BaseConfig<Props & Variant<ThemeType>, AllHTMLAttributes<Element>, ThemeType>);
 }
 
 /* eslint-disable @typescript-eslint/no-explicit-any */

packages/component-generator/src/createStyledComponent.tsx

@@ -24,13 +24,13 @@ export function createStyledComponent<
   Props extends any,
   Theme = void,
   Attributes = void
->(config: BaseConfig<Props, Theme, Attributes>): React.FC<Props> {
+>(config: BaseConfig<Props, Attributes, Theme>): React.FC<Props> {
   const Styled = createStyled<Props, Theme, Attributes>(config);
   return createFC<Props>(Styled, config.styles);
 }
 
 export function createStyled<Props = void, Theme = void, Attributes = void>(
-  config: BaseConfig<Props, Theme, Attributes>
+  config: BaseConfig<Props, Attributes, Theme>
 ) {
   return pipe(
     createStyledElement,
@@ -39,7 +39,10 @@ export function createStyled<Props = void, Theme = void, Attributes = void>(
   )(config);
 }
 
-export function createFC<Props = void>(Component, styles): React.FC<Props> {
+export function createFC<Props = void>(
+  Component: React.FC<Props>,
+  styles: ScalableCSS | undefined
+): React.FC<Props> {
   return props => (
     <Component {...props} {...styles}>
       {props.children}
@@ -52,8 +55,8 @@ export function createStyledElement<
   Theme = void,
   Attributes = void
 >(
-  config: BaseConfig<Props, Theme, Attributes>
-): BaseConfig<Props, Theme, Attributes> {
+  config: BaseConfig<Props, Attributes, Theme>
+): BaseConfig<Props, Attributes, Theme> {
   const { element = 'div' } = config;
   return {
     ...config,
@@ -67,8 +70,8 @@ export function createStyledAttributes<
   Theme = void,
   Attributes = void
 >(
-  config: BaseConfig<Props, Theme, Attributes>
-): BaseConfig<Props, Theme, Attributes> {
+  config: BaseConfig<Props, Attributes, Theme>
+): BaseConfig<Props, Attributes, Theme> {
   const { attrs = {} } = config;
   return !!config.component && config.hasOwnProperty('attrs') && !isEmpty(attrs)
     ? { ...config, component: config.component.attrs(attrs) }
@@ -83,7 +86,7 @@ export function applyStyledProps<
   component = styled.div,
   styleProps = [],
   styles
-}: BaseConfig<Props, Theme, Attributes>) {
+}: BaseConfig<Props, Attributes, Theme>) {
   const pseudoStyles = extractStylePseudos(styles);
 
   return component(

packages/media/__tests__/mediaBoundaries.test.ts

@@ -37,6 +37,12 @@ describe('createBoundaryString', () => {
     expect(createBoundaryString('ratio', '1/3')).toEqual('(aspect-ratio: 1/3)');
   });
 
+  it('should return a single string value when no range values are provided', () => {
+    expect(createBoundaryString('width', '>= 768px')).toEqual([
+      '(min-width: 768px)'
+    ]);
+  });
+
   it('should return min and max width constraints when provided', () => {
     expect(createBoundaryString('width', '30em >= width <= 50em')).toEqual([
       '(min-width: 30em)',
@@ -55,7 +61,7 @@ describe('extractValues', () => {
     expect(extractValues(123 as any)).toEqual([]);
   });
 
-  it('should return matching operators only', () => {
+  it('should return value "em" properties only', () => {
     expect(extractValues('<=30em')).toEqual(['30em']);
     expect(extractValues('<= 30em')).toEqual(['30em']);
 
@@ -65,6 +71,53 @@ describe('extractValues', () => {
     expect(extractValues('30em>=width<=50em')).toEqual(['30em', '50em']);
     expect(extractValues('30em >= width <= 50em')).toEqual(['30em', '50em']);
   });
+
+  it('should return value "rem" properties only', () => {
+    expect(extractValues('<=30rem')).toEqual(['30rem']);
+    expect(extractValues('<= 30rem')).toEqual(['30rem']);
+
+    expect(extractValues('>=50rem')).toEqual(['50rem']);
+    expect(extractValues('>= 50rem')).toEqual(['50rem']);
+
+    expect(extractValues('30rem>=width<=50rem')).toEqual(['30rem', '50rem']);
+    expect(extractValues('30rem >= width <= 50rem')).toEqual([
+      '30rem',
+      '50rem'
+    ]);
+  });
+
+  it('should return value "px" properties only', () => {
+    expect(extractValues('<=30px')).toEqual(['30px']);
+    expect(extractValues('<= 30px')).toEqual(['30px']);
+
+    expect(extractValues('>=50px')).toEqual(['50px']);
+    expect(extractValues('>= 50px')).toEqual(['50px']);
+
+    expect(extractValues('30px>=width<=50px')).toEqual(['30px', '50px']);
+    expect(extractValues('30px >= width <= 50px')).toEqual(['30px', '50px']);
+  });
+
+  it('should return value "vh" properties only', () => {
+    expect(extractValues('<=30vh')).toEqual(['30vh']);
+    expect(extractValues('<= 30vh')).toEqual(['30vh']);
+
+    expect(extractValues('>=50vh')).toEqual(['50vh']);
+    expect(extractValues('>= 50vh')).toEqual(['50vh']);
+
+    expect(extractValues('30vh>=width<=50vh')).toEqual(['30vh', '50vh']);
+    expect(extractValues('30vh >= width <= 50vh')).toEqual(['30vh', '50vh']);
+  });
+
+  it('should return value "vw" properties only', () => {
+    expect(extractValues('<=30vw')).toEqual(['30vw']);
+    expect(extractValues('<= 30vw')).toEqual(['30vw']);
+
+    expect(extractValues('>=50vw')).toEqual(['50vw']);
+    expect(extractValues('>= 50vw')).toEqual(['50vw']);
+
+    expect(extractValues('30vw>=width<=50vw')).toEqual(['30vw', '50vw']);
+    expect(extractValues('30vw >= width <= 50vw')).toEqual(['30vw', '50vw']);
+  });
 });
 
 describe('extractOperators', () => {

packages/media/index.stories.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { media, screen } from './src';
+import styled from 'styled-components';
+
+const Sample = styled.p`
+  color: black;
+
+  ${media({ screen, width: '>= 768px' })`
+    color: red;
+  `}
+`;
+
+export const Media = () => {
+  return <Sample>Hello</Sample>;
+};
+
+export default {
+  title: 'Media'
+};

packages/media/package.json

@@ -35,8 +35,12 @@
   "devDependencies": {
     "@artifak/bundler": "^1.1.3",
     "@testing-library/react-hooks": "^3.7.0",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
     "@types/styled-components": "^5.1.7",
     "css-mediaquery": "^0.1.2",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
     "styled-components": "^5.2.1"
   },
   "peerDependencies": {

packages/media/src/constants.ts

@@ -2,6 +2,7 @@ import { mediaInputQueries } from './mediaInput';
 import { mediaTypeQueries } from './mediaTypes';
 import { mediaAccessibilityQueries } from './mediaAccessibilty';
 import { mediaDisplayQueries } from './mediaDisplay';
+import { MediaQueries } from './typings';
 
 export const {
   all,
@@ -29,7 +30,7 @@ export const {
   lightColorScheme,
   reducedMotion,
   reducedMotionAny
-} = {
+}: MediaQueries = {
   ...mediaInputQueries,
   ...mediaTypeQueries,
   ...mediaAccessibilityQueries,

packages/media/src/index.ts

@@ -1,6 +1,6 @@
 export { media } from './media';
 export { mediaBounds } from './mediaBoundaries';
-export { Media } from './typings';
+export { Media, MediaQueries } from './typings';
 export { MediaBoundaries } from './mediaBoundaries';
 export { MediaInputQueries } from './mediaInput';
 export { MediaTypes } from './mediaTypes';

packages/media/src/mediaBoundaries.ts

@@ -58,7 +58,7 @@ export function createBoundaryString(
 }
 
 const OPERATOR_REGEX = /(?:[(>|<)=)]+)/g;
-const VALUE_REGEX = /((\d{1,}\/\d{1,})|(\d{1,}(r|em)|px|vh|vw))+/g;
+const VALUE_REGEX = /((\d{1,}\/\d{1,})|(\d{1,}(rem|em|px|vh|vw)))+/g;
 
 export const extractValues = extractByRegex.bind(null, VALUE_REGEX);
 export const extractOperators = extractByRegex.bind(null, OPERATOR_REGEX);

packages/media/src/typings.ts

@@ -4,8 +4,9 @@ import { MediaTypes } from './mediaTypes';
 import { MediaAccessibilityQueries } from './mediaAccessibilty';
 import { MediaDisplayQueries } from './mediaDisplay';
 
-export type Media = MediaBoundaries &
-  MediaInputQueries &
+export type Media = MediaBoundaries & MediaQueries;
+
+export type MediaQueries = MediaInputQueries &
   MediaTypes &
   MediaAccessibilityQueries &
   MediaDisplayQueries;

yarn.lock

@@ -12356,7 +12356,7 @@ react-textarea-autosize@^8.1.1:
     use-composed-ref "^1.0.0"
     use-latest "^1.0.0"
 
-react@>=17.0.1, react@^17.0.1:
+react@^17.0.1:
   version "17.0.1"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127"
   integrity sha512-lG9c9UuMHdcAexXtigOZLX8exLWkW0Ku29qPRU8uhF2R9BN96dLCt0psvzPLlHc5OWkgymP3qwTRgbnw5BKx3w==
@@ -14589,6 +14589,11 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
+use-callback-ref@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.2.5.tgz#6115ed242cfbaed5915499c0a9842ca2912f38a5"
+  integrity sha512-gN3vgMISAgacF7sqsLPByqoePooY3n2emTH59Ur5d/M8eg4WTWu1xp8i8DHjohftIyEx0S08RiYxbffr4j8Peg==
+
 use-composed-ref@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/use-composed-ref/-/use-composed-ref-1.1.0.tgz#9220e4e94a97b7b02d7d27eaeab0b37034438bbc"