diff --git a/docs/components/Nav/Desktop/DesktopNavLink.tsx b/docs/components/Nav/Desktop/DesktopNavLink.tsx index a36b81e..5aa8bdf 100644 --- a/docs/components/Nav/Desktop/DesktopNavLink.tsx +++ b/docs/components/Nav/Desktop/DesktopNavLink.tsx @@ -23,7 +23,7 @@ export function DesktopNavLink({ children, link, name }) { {children.map(({ route, name, children }, i) => { i += 1; return ( - + {`0${i}`.slice(-2)} diff --git a/docs/hooks/useMatchMedia.ts b/docs/hooks/useMatchMedia.ts index 3fdcff0..a20e0e5 100644 --- a/docs/hooks/useMatchMedia.ts +++ b/docs/hooks/useMatchMedia.ts @@ -1,6 +1,6 @@ import { useRef, useState, useCallback, useEffect } from 'react'; -export function useMatchMedia(query: string) { +export function useMatchMedia(query: string): boolean { const matchListRef = useRef(null); const [isMatch, setIsMatch] = useState(false); const onMediaQueryListEvent = useCallback((e: MediaQueryListEvent) => { diff --git a/docs/package.json b/docs/package.json index 335775b..179fdcf 100644 --- a/docs/package.json +++ b/docs/package.json @@ -11,13 +11,13 @@ "dependencies": { "artifak": "^1.1.5", "csstype": "^3.0.5", - "framer-motion": "^3.0.0", + "framer-motion": "^3.1.1", "lodash.isplainobject": "^4.0.6", "next": "10.0.3", "next-seo": "^4.17.0", - "react": "^16.14.0", + "react": "^17.0.1", "react-custom-scrollbars": "^4.2.1", - "react-dom": "^16.14.0", + "react-dom": "^17.0.1", "react-intl": "^5.10.9", "react-markings": "^1.3.0", "react-spring": "^8.0.27", @@ -29,7 +29,7 @@ "devDependencies": { "@types/node": "^14.14.14", "@types/react": "^17.0.0", - "@types/styled-components": "^5.1.6", + "@types/styled-components": "^5.1.7", "@types/styled-system": "^5.1.10", "babel-plugin-styled-components": "^1.12.0", "typescript": "^4.1.3" diff --git a/docs/yarn.lock b/docs/yarn.lock index 722fe9a..bb5aae9 100644 --- a/docs/yarn.lock +++ b/docs/yarn.lock @@ -487,13 +487,6 @@ resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7" integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw== -"@types/react-native@*": - version "0.63.8" - resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.63.8.tgz#73ec087122c64c309eeaf150b565b8d755f0fb1f" - integrity sha512-QRwGFRTyGafRVTUS+0GYyJrlpmS3boyBaFI0ULSc+mh/lQNxrzbdQvoL2k5X7+t9hxyqA4dTQAlP6l0ir/fNJQ== - dependencies: - "@types/react" "*" - "@types/react@*": version "16.9.46" resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.46.tgz#f0326cd7adceda74148baa9bff6e918632f5069e" @@ -510,14 +503,13 @@ "@types/prop-types" "*" csstype "^3.0.2" -"@types/styled-components@^5.1.6": - version "5.1.6" - resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.6.tgz#b47460f1684072576999955b5b5153e6f238622c" - integrity sha512-YN1j99dOL92T+76qhQcrPUb2nKZLzawko9j3IIwTHdKloMx20WwcGkBwdpbi8SpAkTc362rgfIllqPdSUplmRw== +"@types/styled-components@^5.1.7": + version "5.1.7" + resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.7.tgz#3cd10b088c1cb1acde2e4b166b3e8275a3083710" + integrity sha512-BJzPhFygYspyefAGFZTZ/8lCEY4Tk+Iqktvnko3xmJf9LrLqs3+grxPeU3O0zLl6yjbYBopD0/VikbHgXDbJtA== dependencies: "@types/hoist-non-react-statics" "*" "@types/react" "*" - "@types/react-native" "*" csstype "^3.0.2" "@types/styled-system@^5.1.10": @@ -2163,25 +2155,23 @@ fragment-cache@^0.2.1: dependencies: map-cache "^0.2.2" -framer-motion@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-3.0.0.tgz#71f786ca15ff2c6fa471eb7bcfed57169aae1b0b" - integrity sha512-jCFbtemYiEdjh6snaT9lrTEEbWKYzUNAuckzWx2R/sYa8IDGpWGb/aV5qm1sn4/sgiVGZKnPj25Gzsny/pJxcQ== +framer-motion@^3.1.1: + version "3.1.1" + resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-3.1.1.tgz#a8a779501213b7ce02cc35beb27621d73cc2f1e7" + integrity sha512-Gm1QSb0xUxuhcPar5FIs5Ws+STrhLZ6XZf2Io8dVwFofe1OzwkL9asGFVu7z3y6WqC4Hvnxm7wsW5SBHlxZDYw== dependencies: - framesync "^4.1.0" + framesync "^5.0.0" hey-listen "^1.0.8" - popmotion "9.0.1" - style-value-types "^3.1.9" + popmotion "^9.0.2" + style-value-types "^3.2.0" tslib "^1.10.0" optionalDependencies: "@emotion/is-prop-valid" "^0.8.2" -framesync@^4.1.0: - version "4.1.0" - resolved "https://registry.yarnpkg.com/framesync/-/framesync-4.1.0.tgz#69a8db3ca432dc70d6a76ba882684a1497ef068a" - integrity sha512-MmgZ4wCoeVxNbx2xp5hN/zPDCbLSKiDt4BbbslK7j/pM2lg5S0vhTNv1v8BCVb99JPIo6hXBFdwzU7Q4qcAaoQ== - dependencies: - hey-listen "^1.0.5" +framesync@5.0.0, framesync@^5.0.0: + version "5.0.0" + resolved "https://registry.yarnpkg.com/framesync/-/framesync-5.0.0.tgz#7de8caedf53ac441118e79680f1beb7391c328b6" + integrity sha512-wd8t+JsQGisluSv1twiEeDv0aNGpavGb9q7xgIk9fGbcIWkNXF/KVtrjnOrCwBWJuiXxlJfNkcvGudsI32FxYA== from2@^2.1.0: version "2.3.0" @@ -2381,7 +2371,7 @@ he@1.2.0: resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f" integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw== -hey-listen@^1.0.5, hey-listen@^1.0.8: +hey-listen@^1.0.8: version "1.0.8" resolved "https://registry.yarnpkg.com/hey-listen/-/hey-listen-1.0.8.tgz#8e59561ff724908de1aa924ed6ecc84a56a9aa68" integrity sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q== @@ -3462,14 +3452,14 @@ pnp-webpack-plugin@1.6.4: dependencies: ts-pnp "^1.1.6" -popmotion@9.0.1: - version "9.0.1" - resolved "https://registry.yarnpkg.com/popmotion/-/popmotion-9.0.1.tgz#63657089c124ffad500c45e6eb20b8e3cca919af" - integrity sha512-pXBHRaLz/WBlatXb0ADPGXksqr24z24z1H2/xTtsin9E6dJ0bGK1nWyZpcvdjDIIf8XxAkbf3/FN3JxayVmFbQ== +popmotion@^9.0.2: + version "9.0.2" + resolved "https://registry.yarnpkg.com/popmotion/-/popmotion-9.0.2.tgz#477650c3b4af97161011809223d9ca6860f3a2b5" + integrity sha512-WfSg8IfoUwYIP9uqeqbgncIsMHLAKWqebT2IP1aGAI6gdSJqTPy/H8NvP4ZyDtDCUCx5Yh3Pth/7iUJjIwR7LA== dependencies: - framesync "^4.1.0" + framesync "5.0.0" hey-listen "^1.0.8" - style-value-types "^3.1.9" + style-value-types "3.2.0" tslib "^1.10.0" posix-character-classes@^0.1.0: @@ -3607,7 +3597,7 @@ promise-inflight@^1.0.1: resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3" integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM= -prop-types@15.7.2, prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.2: +prop-types@15.7.2, prop-types@^15.5.10, prop-types@^15.5.8: version "15.7.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ== @@ -3741,15 +3731,14 @@ react-custom-scrollbars@^4.2.1: prop-types "^15.5.10" raf "^3.1.0" -react-dom@^16.14.0: - version "16.14.0" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.14.0.tgz#7ad838ec29a777fb3c75c3a190f661cf92ab8b89" - integrity sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw== +react-dom@^17.0.1: + version "17.0.1" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.1.tgz#1de2560474ec9f0e334285662ede52dbc5426fc6" + integrity sha512-6eV150oJZ9U2t9svnsspTMrWNyHc6chX0KzDeAOXftRa8bNeOKTTfCJ7KorIwenkHd2xqVTBTCZd79yk/lx/Ug== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" - prop-types "^15.6.2" - scheduler "^0.19.1" + scheduler "^0.20.1" react-intl@^5.10.9: version "5.10.9" @@ -3806,14 +3795,13 @@ react-syntax-highlighter@^15.4.3: prismjs "^1.22.0" refractor "^3.2.0" -react@^16.14.0: - version "16.14.0" - resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d" - integrity sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g== +react@^17.0.1: + version "17.0.1" + resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127" + integrity sha512-lG9c9UuMHdcAexXtigOZLX8exLWkW0Ku29qPRU8uhF2R9BN96dLCt0psvzPLlHc5OWkgymP3qwTRgbnw5BKx3w== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" - prop-types "^15.6.2" "readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.6, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.3, readable-stream@^2.3.6, readable-stream@~2.3.6: version "2.3.7" @@ -3996,10 +3984,10 @@ sass-loader@10.0.5: schema-utils "^3.0.0" semver "^7.3.2" -scheduler@^0.19.1: - version "0.19.1" - resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196" - integrity sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA== +scheduler@^0.20.1: + version "0.20.1" + resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.1.tgz#da0b907e24026b01181ecbc75efdc7f27b5a000c" + integrity sha512-LKTe+2xNJBNxu/QhHvDR14wUXHRQbVY5ZOYpOGWRzhydZUqrLb2JBvLPY7cAqFmqrWuDED0Mjk7013SZiOz6Bw== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" @@ -4391,10 +4379,10 @@ style-loader@1.2.1: loader-utils "^2.0.0" schema-utils "^2.6.6" -style-value-types@^3.1.9: - version "3.1.9" - resolved "https://registry.yarnpkg.com/style-value-types/-/style-value-types-3.1.9.tgz#faf7da660d3f284ed695cff61ea197d85b9122cc" - integrity sha512-050uqgB7WdvtgacoQKm+4EgKzJExVq0sieKBQQtJiU3Muh6MYcCp4T3M8+dfl6VOF2LR0NNwXBP1QYEed8DfIw== +style-value-types@3.2.0, style-value-types@^3.2.0: + version "3.2.0" + resolved "https://registry.yarnpkg.com/style-value-types/-/style-value-types-3.2.0.tgz#eb89cab1340823fa7876f3e289d29d99c92111bb" + integrity sha512-ih0mGsrYYmVvdDi++/66O6BaQPRPRMQHoZevNNdMMcPlP/cH28Rnfsqf1UEba/Bwfuw9T8BmIMwbGdzsPwQKrQ== dependencies: hey-listen "^1.0.8" tslib "^1.10.0" diff --git a/package.json b/package.json index a31d21c..2f3c41f 100644 --- a/package.json +++ b/package.json @@ -24,8 +24,8 @@ "release": "yarn build && changeset publish" }, "peerDependencies": { - "react": "16.11.0", - "react-dom": "16.11.0" + "react": ">=17.0.1", + "react-dom": ">=17.0.1" }, "devDependencies": { "@babel/core": "^7.12.9", @@ -61,5 +61,9 @@ }, "dependencies": { "@changesets/cli": "^2.12.0" + }, + "resolutions": { + "react": ">=17.0.1", + "react-dom": ">=17.0.1" } } diff --git a/packages/block/index.stories.mdx b/packages/block/index.stories.mdx deleted file mode 100644 index 6574503..0000000 --- a/packages/block/index.stories.mdx +++ /dev/null @@ -1,11 +0,0 @@ -import { Meta } from '@storybook/addon-docs/blocks'; - - - -# Block - -This is a simple button. - -import { BlockBase } from './src'; - -Hello World diff --git a/packages/block/index.stories.tsx b/packages/block/index.stories.tsx new file mode 100644 index 0000000..3e746bc --- /dev/null +++ b/packages/block/index.stories.tsx @@ -0,0 +1,41 @@ +import { BlockBase, createBlockComponents } from './src'; + +export function BlockBaseUsage() { + return A Block Base; +} + +const base = { + styles: { + width: '100%', + maxWidth: ['480px', '768px', '1024px', '1200px'], + padding: ['1em', '1.5em'], + margin: '0 auto' + } +}; + +const components = { + FlexContainer: { + display: 'flex' + }, + + UnpaddedContainer: { + padding: 0 + } +}; + +const { FlexContainer, UnpaddedContainer } = createBlockComponents< + typeof components +>(base, components); + +export function CreateBlocksUsage() { + return ( + <> + Flex Container + Unpadded Container + + ); +} + +export default { + title: 'Block' +}; diff --git a/packages/block/package.json b/packages/block/package.json index 508a268..9876e55 100644 --- a/packages/block/package.json +++ b/packages/block/package.json @@ -24,7 +24,9 @@ "test": "__tests__", "src": "src" }, - "files": ["dist"], + "files": [ + "dist" + ], "publishConfig": { "access": "public" }, @@ -41,19 +43,19 @@ }, "devDependencies": { "@artifak/bundler": "^1.1.3", - "@types/react": "^16.9.48", - "@types/react-dom": "^16.9.8", - "@types/styled-components": "^5.1.3", + "@types/react": "^17.0.0", + "@types/react-dom": "^17.0.0", + "@types/styled-components": "^5.1.7", "@types/styled-system": "^5.1.10", - "react": "^16.11.0", - "react-dom": "^16.11.0", - "styled-components": "^4.4.1", + "react": "^17.0.1", + "react-dom": "^17.0.1", + "styled-components": "^5.2.1", "styled-system": "^5.1.5" }, "peerDependencies": { - "react": ">=16.11.0", - "react-dom": ">=16.11.0", - "styled-components": ">=4.4.1" + "react": ">=17.0.1", + "react-dom": ">=17.0.1", + "styled-components": ">=5.2.1" }, "dependencies": { "@artifak/component-generator": "^1.1.4" diff --git a/packages/block/src/createBlockComponents.tsx b/packages/block/src/createBlockComponents.tsx index 0cd4784..aa9ff79 100644 --- a/packages/block/src/createBlockComponents.tsx +++ b/packages/block/src/createBlockComponents.tsx @@ -1,11 +1,23 @@ -import React from 'react'; -import { createBaseComponents } from '@artifak/component-generator'; -import { BlockBaseProps } from './typings'; -import { BlockBase } from './BlockBase'; +import { + createBaseComponents, + GenericRecord, + Settings, + StyledComponentConfig, + Variant +} from '@artifak/component-generator'; /* eslint-disable @typescript-eslint/no-explicit-any */ -export function createBlockComponents( - styles: S -): { [key in keyof any]: React.ComponentType } { - return createBaseComponents(BlockBase, styles); +export function createBlockComponents< + Config, + ThemeType = any, + Props = Record, + Element = HTMLDivElement +>( + base: StyledComponentConfig, + settings: Settings +): GenericRecord>> { + return createBaseComponents( + base, + settings + ); } diff --git a/packages/component-generator/__mocks__/componentGenerator.mock.ts b/packages/component-generator/__mocks__/componentGenerator.mock.ts deleted file mode 100644 index 9079d96..0000000 --- a/packages/component-generator/__mocks__/componentGenerator.mock.ts +++ /dev/null @@ -1,31 +0,0 @@ -import styled from 'styled-components'; - -import { - compose, - space, - layout, - display, - typography, - color, - flexbox -} from 'styled-system'; - -export const mockComponentStyles = { - H1: { - styles: { - marginBottom: ['15px'], - as: 'h1' - } - }, - - H2: { - styles: { - marginTop: 0, - as: 'h2' - } - } -}; - -export const MockComponent = styled('div')( - compose(space, layout, display, typography, color, flexbox) -); diff --git a/packages/component-generator/__tests__/component-generator.test.ts b/packages/component-generator/__tests__/component-generator.test.ts index e184159..78ad1f6 100644 --- a/packages/component-generator/__tests__/component-generator.test.ts +++ b/packages/component-generator/__tests__/component-generator.test.ts @@ -1,48 +1,31 @@ import { system } from 'styled-system'; - -import { - createBaseComponents, - createStyledFunctionComponent, - createStyledComponent -} from '../src'; - -import { - mockComponentStyles, - MockComponent -} from '../__mocks__/componentGenerator.mock'; +import { createBaseComponents, createStyledComponent } from '../src'; describe('@artifak/component-generator', () => { - describe('createComponentsDictionary', () => { + describe('createBaseComponents', () => { it('should return undefined when provided invalid arguments', () => { const expected = {}; const SystemComponent = createBaseComponents( void 0 as any, void 0 as any ); - expect(SystemComponent).toEqual(expected); }); it('should create React components', () => { const SystemComponent = createBaseComponents( - MockComponent, - mockComponentStyles + { element: 'div' }, + { + H1: { + marginBottom: ['15px'], + as: 'h1' + } + } ); expect(SystemComponent).toBeDefined(); }); }); - describe('createStyledFunctionComponent', () => { - it('should return a component', () => { - expect( - createStyledFunctionComponent( - MockComponent, - mockComponentStyles.H1.styles - ) - ).toBeDefined(); - }); - }); - describe('createStyledComponent', () => { it('should return a styled component with default config when no arguments are provided', () => { const resultingStyledComponent = createStyledComponent({}); diff --git a/packages/component-generator/index.stories.tsx b/packages/component-generator/index.stories.tsx index 1c7c2ef..c77d677 100644 --- a/packages/component-generator/index.stories.tsx +++ b/packages/component-generator/index.stories.tsx @@ -1,129 +1,56 @@ import React from 'react'; -import styled from 'styled-components'; -import { variant, system } from 'styled-system'; import { createStyledComponent, createBaseComponents } from './src'; -const typoConfig = { - H1: { - styles: { - fontSize: [48, 96], - margin: '0 0 0.25em', - lineHeight: 1.5, - as: 'h1' - } - }, - - H2: { - styles: { - fontSize: [37, 39, 41, 43], - lineHeight: 1.5, - marginTop: 0, - as: 'h2' - }, - attrs: { - tabIndex: 1 - } - }, - - H3: { - styles: { - fontSize: [27, 28, 30, 32], - lineHeight: 1.5, - as: 'h3' - } +const Basic = createStyledComponent({ + styles: { + width: '100%', + maxWidth: ['480px', '740px', '900px', '1200px'] } -}; - -const typographyStyleProps = system({ - textDecoration: true, - textIndent: true, - textTransform: true, - textOverflow: true, - whiteSpace: true, - wordBreak: true, - wordSpacing: true -}); - -const TypographyBase = createStyledComponent({ - styleProps: [typographyStyleProps] }); -const { H1 } = createBaseComponents( - TypographyBase, - typoConfig -); - -const VariantH1 = styled(H1)( - variant({ - variants: { - primary: { - color: 'red' - }, - secondary: { - color: 'hotpink' - } - } - }) -); - -export function GenVariadicH1() { +export function CreateStyledComponentBasicUse() { return ( <> - Hello World - Hello World - Hello World + hello ); } -const H1withVarsAttrs = createStyledComponent({ - styles: { - fontSize: '48px', - margin: '0 0 0.25em', - lineHeight: 1.5 - }, - attrs: () => ({ - title: 'heading' - }), - variants: { - primary: { - color: 'red' +const containers = { + base: { + styles: { + width: '100%', + maxWidth: ['480px', '740px', '900px', '1200px'] }, - secondary: { - color: 'hotpink' - } + styleProps: [] }, - element: 'h1' -}); -export function H1WithVariantsAttributes() { - return ( - <> - Hello World - Hello World - Hello World - - ); -} + components: { + FlexContainer: { + display: 'flex' + }, + + Container: { + padding: ['1em', '1.5em'] + }, -const shorthandConfig = { - ShortHandH1: { - fontSize: '48px', - margin: '0 0 0.25em', - lineHeight: 1.5 + UnpaddedContainer: { + margin: 0, + padding: 0 + } } }; -const { ShortHandH1 } = createBaseComponents< - typeof shorthandConfig, - any, - HTMLHeadElement ->(TypographyBase, shorthandConfig); +const { FlexContainer, Container, UnpaddedContainer } = createBaseComponents< + typeof containers.components +>(containers.base, containers.components); -export function Shorthand() { +export function BasicUsage() { return ( <> - Hello World + Default Container + Flex Container + Unpadded Container ); } diff --git a/packages/component-generator/package.json b/packages/component-generator/package.json index 94aebcf..4527edb 100644 --- a/packages/component-generator/package.json +++ b/packages/component-generator/package.json @@ -43,22 +43,25 @@ "homepage": "https://github.com/heyjul3s/artifak#readme", "devDependencies": { "@artifak/bundler": "^1.1.3", - "@types/react": "^16.9.46", - "@types/react-dom": "^16.9.8", - "@types/styled-components": "^5.1.3", + "@types/react": "^17.0.0", + "@types/react-dom": "^17.0.0", + "@types/styled-components": "^5.1.7", "@types/styled-system": "^5.1.10", "csstype": "^3.0.5", - "react": "^16.11.0", - "react-dom": "^16.11.0", - "styled-components": "^4.4.1", + "react": "^17.0.1", + "react-dom": "^17.0.1", + "styled-components": "^5.2.1", "styled-system": "^5.1.5" }, "peerDependencies": { - "react": ">=16.11.0", - "react-dom": ">=16.11.0", - "styled-components": ">=4.4.1" + "react": ">=17.0.1", + "react-dom": ">=17.0.1", + "styled-components": ">=5.2.1" }, "dependencies": { "lodash.isempty": "^4.4.0" + }, + "resolutions": { + "react": ">=17.0.1" } } diff --git a/packages/component-generator/src/createBaseComponents.tsx b/packages/component-generator/src/createBaseComponents.tsx index e42f624..a2516e5 100644 --- a/packages/component-generator/src/createBaseComponents.tsx +++ b/packages/component-generator/src/createBaseComponents.tsx @@ -1,28 +1,41 @@ import React, { HTMLAttributes } from 'react'; -import { AnyStyledComponent } from 'styled-components'; -import { Variant, Settings, StyledSystemCSSObject } from './typings'; +import { createStyledComponent } from './createStyledComponent'; +import { + Settings, + BaseProps, + GenericRecord, + StyledComponentConfig, + Variant +} from './typings'; + +/* eslint-disable @typescript-eslint/no-explicit-any */ export function createBaseComponents< - S, - P = Record, - E = HTMLDivElement + Config = any, + ThemeType = any, + Props = Record, + Element = HTMLDivElement >( - Base: AnyStyledComponent, - settings: - | { [key in keyof S]: Settings> } - | { [key in keyof S]: StyledSystemCSSObject } -): { [key in keyof S]: React.ComponentType

} { - const acc = {} as { [key in keyof S]: React.ComponentType

}; - - return !!settings && Object.keys(settings).length >= 1 + base: StyledComponentConfig, + settings: Settings +): GenericRecord< + Config, + React.FC & Variant> +> { + const acc = {} as GenericRecord< + Config, + React.FC> + >; + + return !!base && !!settings && Object.keys(settings).length >= 1 ? Object.entries(settings).reduce((acc, entry) => { const [prop, setting] = entry; - const entrySetting = extractSettings( - setting as Settings> | StyledSystemCSSObject - ); if (hasKey(settings, prop)) { - acc[prop] = createStyledFunctionComponent(Base, entrySetting); + acc[prop] = createStyledComponent({ + ...base, + styles: { ...base.styles, ...setting } + } as StyledComponentConfig, ThemeType, HTMLAttributes>); acc[prop].displayName = prop; } @@ -32,38 +45,6 @@ export function createBaseComponents< : acc; } -export function extractSettings( - setting: Settings> -): StyledSystemCSSObject & HTMLAttributes; - -export function extractSettings( - setting: StyledSystemCSSObject -): StyledSystemCSSObject & HTMLAttributes; - -export function extractSettings( - setting: Settings> | StyledSystemCSSObject -): StyledSystemCSSObject & HTMLAttributes; - -/* eslint-disable @typescript-eslint/no-explicit-any */ -export function extractSettings( - setting: any -): StyledSystemCSSObject & HTMLAttributes { - return hasKey(setting, 'styles') || hasKey(setting, 'attrs') - ? { ...setting.styles, ...setting.attrs } - : setting; -} - -export function createStyledFunctionComponent( - Base: AnyStyledComponent, - setting: StyledSystemCSSObject & HTMLAttributes -): React.FC

{ - return props => ( - - {props.children} - - ); -} - /* eslint-disable @typescript-eslint/no-explicit-any */ function hasKey(obj: O, key: keyof any): key is keyof O { return key in obj; diff --git a/packages/component-generator/src/createStyledComponent.ts b/packages/component-generator/src/createStyledComponent.tsx similarity index 69% rename from packages/component-generator/src/createStyledComponent.ts rename to packages/component-generator/src/createStyledComponent.tsx index c185b2e..0c0663a 100644 --- a/packages/component-generator/src/createStyledComponent.ts +++ b/packages/component-generator/src/createStyledComponent.tsx @@ -1,6 +1,6 @@ import React from 'react'; import isEmpty from 'lodash.isempty'; -import styled, { StyledComponent } from 'styled-components'; +import styled from 'styled-components'; import { compose, @@ -12,39 +12,36 @@ import { position, shadow, space, - typography, - variant + typography } from 'styled-system'; -import { BaseComponentProps, StyledComponentConfig } from './typings'; +import { StyledComponentConfig } from './typings'; const pipe = (...fns) => value => fns.reduce((acc, fn) => fn(acc), value); /* eslint-disable @typescript-eslint/no-explicit-any */ export function createStyledComponent< - Props = void, + Props extends any, Theme = void, Attributes = void ->( - config: StyledComponentConfig -): StyledComponent< - keyof JSX.IntrinsicElements | React.ComponentType, - Theme | any, - React.ComponentType, - keyof any -> { - return pipe( +>(config: StyledComponentConfig): React.FC { + const Styled = pipe( createStyledBase, createStyledWithAttributes, applyStyledComponent )(config); + + return props => ( + + {props.children} + + ); } export function createStyledBase( config: StyledComponentConfig ): StyledComponentConfig { const { element = 'div' } = config; - return { ...config, element, @@ -71,18 +68,9 @@ export function applyStyledComponent< Attributes = void >({ component = styled.div, - styles = {}, - variants, styleProps = [] -}: StyledComponentConfig): StyledComponent< - keyof JSX.IntrinsicElements | React.ComponentType, - Theme | any, - React.ComponentType, - keyof any -> { +}: StyledComponentConfig) { return component( - styles, - variant({ variants }), compose( background, border, diff --git a/packages/component-generator/src/index.tsx b/packages/component-generator/src/index.tsx index 913b199..0ba130a 100644 --- a/packages/component-generator/src/index.tsx +++ b/packages/component-generator/src/index.tsx @@ -1,8 +1,11 @@ -export { - createBaseComponents, - createStyledFunctionComponent -} from './createBaseComponents'; - +export { createBaseComponents } from './createBaseComponents'; export { createStyledComponent } from './createStyledComponent'; - -export { BaseComponentProps, Variant, StyledComponentConfig } from './typings'; +export { + Attrs, + BaseProps, + BaseComponentProps, + GenericRecord, + Settings, + StyledComponentConfig, + Variant +} from './typings'; diff --git a/packages/component-generator/src/typings.ts b/packages/component-generator/src/typings.ts index f623090..256ad19 100644 --- a/packages/component-generator/src/typings.ts +++ b/packages/component-generator/src/typings.ts @@ -1,12 +1,5 @@ import * as CSS from 'csstype'; - -import { - CSSObject, - ThemedStyledFunction, - ThemedStyledProps, - InterpolationFunction -} from 'styled-components'; - +import { ThemedStyledFunction, ThemedStyledProps } from 'styled-components'; import { styleFn, Scale } from 'styled-system'; import { @@ -22,6 +15,8 @@ import { ResponsiveValue } from 'styled-system'; +export type BaseProps = BaseComponentProps & Variant; + export type BaseComponentProps = | BackgroundProps | BorderProps @@ -47,11 +42,8 @@ export type StyledComponentConfig< Attributes = void, ThemeType = void > = { - styles?: CSSObject | TemplateStringsArray | InterpolationFunction; + styles?: StyledSystemCSSObject; attrs?: Attrs; - variants?: { - [key: string]: StyledSystemCSSObject; - }; styleProps?: styleFn[]; element?: keyof JSX.IntrinsicElements; component?: ThemedStyledFunction< @@ -66,7 +58,10 @@ export type CSSObjectWithScale = CSS.Properties; export type CSSPseudos = { [K in CSS.Pseudos]?: CSSObjectWithScale }; export type StyledSystemCSSObject = CSSObjectWithScale & CSSPseudos; -export type Settings = { - styles: StyledSystemCSSObject; - attrs?: Attributes; +export type GenericRecord = { + [key in keyof Dict]: Type; +}; + +export type Settings = { + [key: string]: StyledSystemCSSObject & { as?: keyof JSX.IntrinsicElements }; }; diff --git a/packages/flex/__tests__/__snapshots__/flexCol.test.tsx.snap b/packages/flex/__tests__/__snapshots__/flexCol.test.tsx.snap index 113cfd3..94bf4e6 100644 --- a/packages/flex/__tests__/__snapshots__/flexCol.test.tsx.snap +++ b/packages/flex/__tests__/__snapshots__/flexCol.test.tsx.snap @@ -3,7 +3,7 @@ exports[`FlexCol FlexCol should render 1`] = `

Test
diff --git a/packages/flex/__tests__/__snapshots__/flexRow.test.tsx.snap b/packages/flex/__tests__/__snapshots__/flexRow.test.tsx.snap index 0e3cc47..5bf26b5 100644 --- a/packages/flex/__tests__/__snapshots__/flexRow.test.tsx.snap +++ b/packages/flex/__tests__/__snapshots__/flexRow.test.tsx.snap @@ -3,7 +3,8 @@ exports[`FlexRow FlexRow component should render 1`] = `
Flex Row
@@ -13,7 +14,8 @@ exports[`FlexRow FlexRow component should render 1`] = ` exports[`FlexRow FlexRow component should render row-reverse 1`] = `
Flex Row Reverse
diff --git a/packages/flex/package.json b/packages/flex/package.json index fd3b521..579bc77 100644 --- a/packages/flex/package.json +++ b/packages/flex/package.json @@ -23,7 +23,9 @@ "test": "__tests__", "src": "src" }, - "files": ["dist"], + "files": [ + "dist" + ], "publishConfig": { "access": "public" }, @@ -41,20 +43,20 @@ "homepage": "https://github.com/heyjul3s/artifak#readme", "devDependencies": { "@artifak/bundler": "^1.1.3", - "@types/react": "^16.9.48", - "@types/react-dom": "^16.9.8", - "@types/styled-components": "^5.1.3", + "@types/react": "^17.0.0", + "@types/react-dom": "^17.0.0", + "@types/styled-components": "^5.1.7", "@types/styled-system": "^5.1.10", - "csstype": "^3.0.4", - "react": "^16.11.0", - "react-dom": "^16.11.0", - "styled-components": "^4.4.1", + "csstype": "^3.0.5", + "react": "^17.0.1", + "react-dom": "^17.0.1", + "styled-components": "^5.2.1", "styled-system": "^5.1.5" }, "peerDependencies": { - "react": ">=16.11.0", - "react-dom": ">=16.11.0", - "styled-components": ">=4.4.1" + "react": ">=17.0.1", + "react-dom": ">=17.0.1", + "styled-components": ">=5.2.1" }, "dependencies": { "@artifak/component-generator": "^1.1.4" diff --git a/packages/grid/__tests__/__snapshots__/grid.test.tsx.snap b/packages/grid/__tests__/__snapshots__/grid.test.tsx.snap index 78d3838..4e1002e 100644 --- a/packages/grid/__tests__/__snapshots__/grid.test.tsx.snap +++ b/packages/grid/__tests__/__snapshots__/grid.test.tsx.snap @@ -3,36 +3,36 @@ exports[`@artifak/grid Grid should render 1`] = `
1
2
3
4
5
6
@@ -43,37 +43,37 @@ exports[`@artifak/grid Grid should render 1`] = ` exports[`@artifak/grid Grid should render grid-auto-columns style if no columnSize prop is provided 1`] = `
1
2
3
4
5
6
@@ -84,37 +84,37 @@ exports[`@artifak/grid Grid should render grid-auto-columns style if no columnSi exports[`@artifak/grid Grid should render gridGap style if a value is provided 1`] = `
1
2
3
4
5
6
diff --git a/packages/grid/__tests__/__snapshots__/gridItem.test.tsx.snap b/packages/grid/__tests__/__snapshots__/gridItem.test.tsx.snap index a2b06a5..3636125 100644 --- a/packages/grid/__tests__/__snapshots__/gridItem.test.tsx.snap +++ b/packages/grid/__tests__/__snapshots__/gridItem.test.tsx.snap @@ -3,7 +3,7 @@ exports[`GridItem should render correctly 1`] = `
Grid Item
@@ -13,7 +13,7 @@ exports[`GridItem should render correctly 1`] = ` exports[`GridItemBase should render correctly 1`] = `
Grid Item Base
diff --git a/packages/grid/package.json b/packages/grid/package.json index e259b79..9874f25 100644 --- a/packages/grid/package.json +++ b/packages/grid/package.json @@ -23,7 +23,9 @@ "test": "__tests__", "src": "src" }, - "files": ["dist"], + "files": [ + "dist" + ], "publishConfig": { "access": "public" }, @@ -40,19 +42,19 @@ }, "devDependencies": { "@artifak/bundler": "^1.1.3", - "@types/react": "^16.9.46", - "@types/react-dom": "^16.9.8", - "@types/styled-components": "^5.1.3", + "@types/react": "^17.0.0", + "@types/react-dom": "^17.0.0", + "@types/styled-components": "^5.1.7", "@types/styled-system": "^5.1.10", - "react": "^16.11.0", - "react-dom": "^16.11.0", - "styled-components": "^4.4.1", + "react": "^17.0.1", + "react-dom": "^17.0.1", + "styled-components": "^5.2.1", "styled-system": "^5.1.5" }, "peerDependencies": { - "react": ">=16.11.0", - "react-dom": ">=16.11.0", - "styled-components": ">=4.4.1" + "react": ">=17.0.1", + "react-dom": ">=17.0.1", + "styled-components": ">=5.2.1" }, "dependencies": { "@artifak/component-generator": "^1.1.4" diff --git a/packages/imagery/__tests__/__snapshots__/Imagery.test.tsx.snap b/packages/imagery/__tests__/__snapshots__/Imagery.test.tsx.snap index f7c6415..66080a4 100644 --- a/packages/imagery/__tests__/__snapshots__/Imagery.test.tsx.snap +++ b/packages/imagery/__tests__/__snapshots__/Imagery.test.tsx.snap @@ -4,8 +4,11 @@ exports[`Img should render an img element with src and alt defined 1`] = ` hello world `; diff --git a/packages/imagery/__tests__/__snapshots__/ImageryBase.test.tsx.snap b/packages/imagery/__tests__/__snapshots__/ImageryBase.test.tsx.snap index c02ff10..1654132 100644 --- a/packages/imagery/__tests__/__snapshots__/ImageryBase.test.tsx.snap +++ b/packages/imagery/__tests__/__snapshots__/ImageryBase.test.tsx.snap @@ -3,7 +3,10 @@ exports[`ImageryBase should render 1`] = ` `; @@ -11,7 +14,10 @@ exports[`ImageryBase should render 1`] = ` exports[`ImageryBase should render styles object-fit and object-position 1`] = ` `; diff --git a/packages/imagery/package.json b/packages/imagery/package.json index aa72a23..021cb67 100644 --- a/packages/imagery/package.json +++ b/packages/imagery/package.json @@ -20,7 +20,9 @@ "test": "__tests__", "src": "src" }, - "files": ["dist"], + "files": [ + "dist" + ], "publishConfig": { "access": "public" }, @@ -38,19 +40,19 @@ "homepage": "https://github.com/heyjul3s/artifak#readme", "devDependencies": { "@artifak/bundler": "^1.1.3", - "@types/react": "^16.9.46", - "@types/react-dom": "^16.9.8", - "@types/styled-components": "^5.1.3", + "@types/react": "^17.0.0", + "@types/react-dom": "^17.0.0", + "@types/styled-components": "^5.1.7", "@types/styled-system": "^5.1.10", - "react": "^16.11.0", - "react-dom": "^16.11.0", - "styled-components": "^4.4.1", + "react": "^17.0.1", + "react-dom": "^17.0.1", + "styled-components": "^5.2.1", "styled-system": "^5.1.5" }, "peerDependencies": { - "react": ">=16.11.0", - "react-dom": ">=16.11.0", - "styled-components": ">=4.4.1" + "react": ">=17.0.1", + "react-dom": ">=17.0.1", + "styled-components": ">=5.2.1" }, "dependencies": { "@artifak/component-generator": "^1.1.4" diff --git a/packages/media/package.json b/packages/media/package.json index bd4d384..ef5437f 100644 --- a/packages/media/package.json +++ b/packages/media/package.json @@ -35,14 +35,14 @@ "devDependencies": { "@artifak/bundler": "^1.1.3", "@testing-library/react-hooks": "^3.7.0", - "@types/styled-components": "^5.1.3", + "@types/styled-components": "^5.1.7", "css-mediaquery": "^0.1.2", "styled-components": "^5.2.1" }, "peerDependencies": { - "react": ">=16.11.0", - "react-dom": ">=16.11.0", - "styled-components": ">=4.4.1" + "react": ">=17.0.1", + "react-dom": ">=17.0.1", + "styled-components": ">=5.2.1" }, "dependencies": { "lodash.isempty": "^4.4.0", diff --git a/packages/media/src/useMatchMedia.ts b/packages/media/src/useMatchMedia.ts index 7cf080b..6e8c913 100644 --- a/packages/media/src/useMatchMedia.ts +++ b/packages/media/src/useMatchMedia.ts @@ -1,6 +1,6 @@ import { useRef, useState, useCallback, useEffect } from 'react'; -export function useMatchMedia(query: string) { +export function useMatchMedia(query: string): boolean { const matchListRef = useRef(null); const [isMatch, setIsMatch] = useState(false); const onMediaQueryListEvent = useCallback((e: MediaQueryListEvent) => { diff --git a/packages/media/src/useWindowSize.ts b/packages/media/src/useWindowSize.ts index 212cbcc..6b3e118 100644 --- a/packages/media/src/useWindowSize.ts +++ b/packages/media/src/useWindowSize.ts @@ -7,7 +7,7 @@ type WindowSize = { outerWidth: number; }; -export function useWindowSize() { +export function useWindowSize(): WindowSize { const [windowSize, setWindowSize] = useState(getSize()); function getSize() { diff --git a/packages/typography/__mocks__/typography.mock.tsx b/packages/typography/__mocks__/typography.mock.tsx deleted file mode 100644 index af08d52..0000000 --- a/packages/typography/__mocks__/typography.mock.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; - -export const mockTypographyStyles = { - H1: { - marginBottom: [15], - as: 'h1', - }, - - H2: { - marginTop: 0, - as: 'h2', - }, -}; - -export const H1 = (props): React.ReactElement => ( -

{props.children}

-); - -export const H2 = (props): React.ReactElement => ( -

{props.children}

-); diff --git a/packages/typography/__tests__/typography.test.ts b/packages/typography/__tests__/typography.test.ts index 622055b..bbcc3a2 100644 --- a/packages/typography/__tests__/typography.test.ts +++ b/packages/typography/__tests__/typography.test.ts @@ -1,19 +1,72 @@ -import { createTypographyComponents, fluidSizing, fontWeight } from '../src'; -import { mockTypographyStyles } from '../__mocks__/typography.mock'; +import { position } from 'styled-system'; + +import { + createTypographyComponents, + getStyleProps, + fluidSizing, + fontWeight +} from '../src'; describe('@artifak/typography', () => { describe('createTypographyComponents - generates typography React components based on styles object argument provided', () => { it('should return the base Typography system component when provided with an invalid argument', () => { const expected = {}; - expect(createTypographyComponents({} as any)).toEqual(expected); - expect(createTypographyComponents(null as any)).toEqual(expected); - expect(createTypographyComponents(false as any)).toEqual(expected); - expect(createTypographyComponents(0 as any)).toEqual(expected); - expect(createTypographyComponents(void 0 as any)).toEqual(expected); + expect(createTypographyComponents({} as any, {} as any)).toStrictEqual( + expected + ); + expect( + createTypographyComponents(null as any, null as any) + ).toStrictEqual(expected); + expect( + createTypographyComponents(false as any, false as any) + ).toStrictEqual(expected); + expect(createTypographyComponents(0 as any, 0 as any)).toStrictEqual( + expected + ); + expect( + createTypographyComponents(void 0 as any, void 0 as any) + ).toStrictEqual(expected); }); it('should create React components', () => { - expect(createTypographyComponents(mockTypographyStyles)).toBeDefined(); + expect( + createTypographyComponents( + {}, + { + H1: { + marginBottom: [15], + as: 'h1' + } + } + ) + ).toBeDefined(); + }); + }); + + describe('getStyleProps', () => { + it('should return a default base setting object', () => { + expect(getStyleProps(void 0 as any)).toEqual({ + styleProps: [] + }); + }); + + it('should return the base object with default styleProps if not declared', () => { + expect(getStyleProps({ element: 'div' })).toEqual({ + element: 'div', + styleProps: [] + }); + }); + + it('should return the base object if it has styleProps defined', () => { + expect( + getStyleProps({ + element: 'div', + styleProps: [position] + }) + ).toEqual({ + element: 'div', + styleProps: [position] + }); }); }); diff --git a/packages/typography/index.stories.tsx b/packages/typography/index.stories.tsx index 2996f60..4f68b40 100644 --- a/packages/typography/index.stories.tsx +++ b/packages/typography/index.stories.tsx @@ -1,47 +1,47 @@ import React from 'react'; import { createTypographyComponents, fluidSizing } from './src'; -import { createStyledComponent } from '@artifak/component-generator'; import styled from 'styled-components'; import { variant } from 'styled-system'; -const typographyStyles = { +const base = { + styles: { + lineHeight: 1.5 + } +}; + +const components = { H1: { fontSize: fluidSizing(48, 96, 300, 1200), margin: '0 0 0.25em', - lineHeight: 1.5, as: 'h1' }, H2: { fontSize: [37, 39, 41, 43], - lineHeight: 1.5, marginTop: 0, as: 'h2' }, H3: { fontSize: [27, 28, 30, 32], - lineHeight: 1.5, as: 'h3' }, H4: { fontSize: [18, 20, 22, 24], - lineHeight: 1.5, + marginTop: 0, as: 'h4' }, H5: { fontSize: [16, 17, 19, 21], - lineHeight: 1.5, marginTop: 0, as: 'h5' }, H6: { fontSize: [16, 17, 19, 21], - lineHeight: 1.5, marginTop: 0, as: 'h6' }, @@ -54,21 +54,18 @@ const typographyStyles = { SmallLead: { fontSize: [17, 18, 19, 21], - lineHeight: 1.5, as: 'p' }, Paragraph: { fontSize: [16, 20], fontWeight: 300, - lineHeight: 1.5, marginTop: 0, as: 'p' }, SmallParagraph: { fontSize: [12, 14], - lineHeight: 1.5, marginTop: 0, as: 'p' } @@ -85,7 +82,7 @@ const { SmallLead, Paragraph, SmallParagraph -} = createTypographyComponents(typographyStyles); +} = createTypographyComponents(base, components); const SysH1 = styled(H1)( variant({ @@ -119,33 +116,6 @@ export const Type = () => { ); }; -const VariableH1 = createStyledComponent({ - styles: { - fontSize: fluidSizing(48, 96, 300, 1200), - margin: '0 0 0.25em', - lineHeight: 1.5, - as: 'h1' - }, - variants: { - primary: { - color: 'red' - }, - secondary: { - color: 'hotpink' - } - } -}); - -export const TypeVariant = () => { - return ( - <> - Hello World - Hello World - - ); -}; - export default { - title: 'Typography', - component: [Type, TypeVariant] + title: 'Typography' }; diff --git a/packages/typography/package.json b/packages/typography/package.json index 9fdf772..f43c632 100644 --- a/packages/typography/package.json +++ b/packages/typography/package.json @@ -20,7 +20,9 @@ "test": "__tests__", "src": "src" }, - "files": ["dist"], + "files": [ + "dist" + ], "publishConfig": { "access": "public" }, @@ -38,22 +40,22 @@ "homepage": "https://github.com/heyjul3s/artifak#readme", "devDependencies": { "@artifak/bundler": "^1.1.3", - "@types/react": "^16.9.46", - "@types/react-dom": "^16.9.8", - "@types/styled-components": "^5.1.3", + "@types/react": "^17.0.0", + "@types/react-dom": "^17.0.0", + "@types/styled-components": "^5.1.7", "@types/styled-system": "^5.1.10", - "csstype": "^3.0.4", - "react": "^16.11.0", - "react-dom": "^16.11.0", - "styled-components": "^4.4.1", + "csstype": "^3.0.5", + "react": "^17.0.1", + "react-dom": "^17.0.1", + "styled-components": "^5.2.1", "styled-system": "^5.1.5" }, "dependencies": { "@artifak/component-generator": "^1.1.4" }, "peerDependencies": { - "react": ">=16.11.0", - "react-dom": ">=16.11.0", - "styled-components": ">=4.4.1" + "react": ">=17.0.1", + "react-dom": ">=17.0.1", + "styled-components": ">=5.2.1" } } diff --git a/packages/typography/src/TypographyBase.tsx b/packages/typography/src/TypographyBase.tsx index a7998f3..a124236 100644 --- a/packages/typography/src/TypographyBase.tsx +++ b/packages/typography/src/TypographyBase.tsx @@ -1,7 +1,7 @@ import { system } from 'styled-system'; import { createStyledComponent } from '@artifak/component-generator'; -const typographyStyleProps = system({ +export const typographyStyleProps = system({ textDecoration: true, textIndent: true, textTransform: true, diff --git a/packages/typography/src/createTypographyComponents.ts b/packages/typography/src/createTypographyComponents.ts index d20a2ae..9fdbed5 100644 --- a/packages/typography/src/createTypographyComponents.ts +++ b/packages/typography/src/createTypographyComponents.ts @@ -1,9 +1,58 @@ -import { createBaseComponents } from '@artifak/component-generator'; +import { + GenericRecord, + createBaseComponents, + Settings, + StyledComponentConfig, + Variant +} from '@artifak/component-generator'; +import { styleFn } from 'styled-system'; import { TypographyBaseProps } from './typings'; -import { TypographyBase } from './TypographyBase'; +import { typographyStyleProps } from './TypographyBase'; -export function createTypographyComponents( - styles: S -): { [key in keyof S]: React.ComponentType } { - return createBaseComponents(TypographyBase, styles); +/* eslint-disable @typescript-eslint/no-explicit-any */ +export function createTypographyComponents< + Config, + ThemeType = any, + Props = Record, + Element = HTMLDivElement +>( + base: StyledComponentConfig, + settings: Settings +): GenericRecord< + Config, + React.FC> +> { + const { styleProps } = getStyleProps(base); + + return createBaseComponents< + Config, + ThemeType, + Props & TypographyBaseProps, + Element + >( + { + ...base, + styleProps: [typographyStyleProps, ...(styleProps as styleFn[])] + }, + settings + ); +} + +/* eslint-disable @typescript-eslint/no-explicit-any */ +export function getStyleProps< + ThemeType = any, + Props = Record, + Element = HTMLDivElement +>( + base: StyledComponentConfig +): StyledComponentConfig { + if (!base || !Object.keys(base).length) { + return { styleProps: [] }; + } + + if (!base.styleProps) { + return { ...base, styleProps: [] }; + } + + return base; } diff --git a/packages/typography/src/index.tsx b/packages/typography/src/index.tsx index 3753c9d..c296bd7 100644 --- a/packages/typography/src/index.tsx +++ b/packages/typography/src/index.tsx @@ -1,4 +1,7 @@ -export { createTypographyComponents } from './createTypographyComponents'; +export { + createTypographyComponents, + getStyleProps +} from './createTypographyComponents'; export { TypographyBase } from './TypographyBase'; export { fontWeight } from './fontWeight'; export { fluidSizing } from './fluidSizing'; diff --git a/yarn.lock b/yarn.lock index 67022d8..b941a3a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1005,7 +1005,7 @@ "@babel/parser" "^7.12.7" "@babel/types" "^7.12.7" -"@babel/traverse@^7.0.0", "@babel/traverse@^7.1.0", "@babel/traverse@^7.10.4", "@babel/traverse@^7.12.1", "@babel/traverse@^7.12.5", "@babel/traverse@^7.12.9", "@babel/traverse@^7.4.5": +"@babel/traverse@^7.1.0", "@babel/traverse@^7.10.4", "@babel/traverse@^7.12.1", "@babel/traverse@^7.12.5", "@babel/traverse@^7.12.9", "@babel/traverse@^7.4.5": version "7.12.9" resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.12.9.tgz#fad26c972eabbc11350e0b695978de6cc8e8596f" integrity sha512-iX9ajqnLdoU1s1nHt36JDI9KG4k+vmI8WgjK5d+aDTwQbL2fUnzedNedssA645Ede3PM2ma1n8Q4h2ohwXgMXw== @@ -1267,7 +1267,7 @@ resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413" integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow== -"@emotion/is-prop-valid@0.8.8", "@emotion/is-prop-valid@^0.8.1", "@emotion/is-prop-valid@^0.8.6", "@emotion/is-prop-valid@^0.8.8": +"@emotion/is-prop-valid@0.8.8", "@emotion/is-prop-valid@^0.8.6", "@emotion/is-prop-valid@^0.8.8": version "0.8.8" resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a" integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA== @@ -1318,7 +1318,7 @@ resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04" integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ== -"@emotion/unitless@0.7.5", "@emotion/unitless@^0.7.0", "@emotion/unitless@^0.7.4": +"@emotion/unitless@0.7.5", "@emotion/unitless@^0.7.4": version "0.7.5" resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed" integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg== @@ -3573,17 +3573,10 @@ "@types/react" "*" "@types/reactcss" "*" -"@types/react-dom@^16.9.8": - version "16.9.10" - resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.10.tgz#4485b0bec3d41f856181b717f45fd7831101156f" - integrity sha512-ItatOrnXDMAYpv6G8UCk2VhbYVTjZT9aorLtA/OzDN9XJ2GKcfam68jutoAcILdRjsRUO8qb7AmyObF77Q8QFw== - dependencies: - "@types/react" "^16" - -"@types/react-native@*": - version "0.63.37" - resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.63.37.tgz#c43df90c9d3cc082a97a49a53e989de26cb8ab45" - integrity sha512-xr9SZG7tQQBKT6840tAGaWEC65D2gjyxZtuZxz631UgeW1ofItuu9HMVhoyYqot2hRSa6Q4YC8FYkRVUpM53/w== +"@types/react-dom@^17.0.0": + version "17.0.0" + resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.0.tgz#b3b691eb956c4b3401777ee67b900cb28415d95a" + integrity sha512-lUqY7OlkF/RbNtD5nIq7ot8NquXrdFrjSOR6+w9a9RFQevGi1oZO1dcJbXMeONAPKtZ2UrZOEJ5UOCVsxbLk/g== dependencies: "@types/react" "*" @@ -3601,7 +3594,7 @@ dependencies: "@types/react" "*" -"@types/react@*": +"@types/react@*", "@types/react@^17.0.0": version "17.0.0" resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.0.tgz#5af3eb7fad2807092f0046a1302b7823e27919b8" integrity sha512-aj/L7RIMsRlWML3YB6KZiXB3fV2t41+5RBGYF8z+tAKU43Px8C3cYUZsDvf1/+Bm4FK21QWBrDutu8ZJ/70qOw== @@ -3609,14 +3602,6 @@ "@types/prop-types" "*" csstype "^3.0.2" -"@types/react@^16", "@types/react@^16.9.46", "@types/react@^16.9.48": - version "16.14.2" - resolved "https://registry.yarnpkg.com/@types/react/-/react-16.14.2.tgz#85dcc0947d0645349923c04ccef6018a1ab7538c" - integrity sha512-BzzcAlyDxXl2nANlabtT4thtvbbnhee8hMmH/CcJrISDBVcJS1iOsP1f0OAgSdGE0MsY9tqcrb9YoZcOFv9dbQ== - dependencies: - "@types/prop-types" "*" - csstype "^3.0.2" - "@types/reactcss@*": version "1.2.3" resolved "https://registry.yarnpkg.com/@types/reactcss/-/reactcss-1.2.3.tgz#af28ae11bbb277978b99d04d1eedfd068ca71834" @@ -3646,14 +3631,13 @@ resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.0.tgz#7036640b4e21cc2f259ae826ce843d277dad8cff" integrity sha512-RJJrrySY7A8havqpGObOB4W92QXKJo63/jFLLgpvOtsGUqbQZ9Sbgl35KMm1DjC6j7AvmmU2bIno+3IyEaemaw== -"@types/styled-components@^5.1.3": - version "5.1.4" - resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.4.tgz#11f167dbde268635c66adc89b5a5db2e69d75384" - integrity sha512-78f5Zuy0v/LTQNOYfpH+CINHpchzMMmAt9amY2YNtSgsk1TmlKm8L2Wijss/mtTrsUAVTm2CdGB8VOM65vA8xg== +"@types/styled-components@^5.1.7": + version "5.1.7" + resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.7.tgz#3cd10b088c1cb1acde2e4b166b3e8275a3083710" + integrity sha512-BJzPhFygYspyefAGFZTZ/8lCEY4Tk+Iqktvnko3xmJf9LrLqs3+grxPeU3O0zLl6yjbYBopD0/VikbHgXDbJtA== dependencies: "@types/hoist-non-react-statics" "*" "@types/react" "*" - "@types/react-native" "*" csstype "^3.0.2" "@types/styled-system@^5.1.10": @@ -6134,15 +6118,6 @@ css-select@^1.1.0: domutils "1.5.1" nth-check "~1.0.1" -css-to-react-native@^2.2.2: - version "2.3.2" - resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-2.3.2.tgz#e75e2f8f7aa385b4c3611c52b074b70a002f2e7d" - integrity sha512-VOFaeZA053BqvvvqIA8c9n0+9vFppVBAHCp6JgFTtTMU3Mzi+XnelJ9XC9ul3BqFzZyQ5N+H0SnwsWT2Ebchxw== - dependencies: - camelize "^1.0.0" - css-color-keywords "^1.0.0" - postcss-value-parser "^3.3.0" - css-to-react-native@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.0.0.tgz#62dbe678072a824a689bcfee011fc96e02a7d756" @@ -6208,7 +6183,7 @@ csstype@^2.5.7: resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.14.tgz#004822a4050345b55ad4dcc00be1d9cf2f4296de" integrity sha512-2mSc+VEpGPblzAxyeR+vZhJKgYg0Og0nnRi7pmRXFYYxSfnOnW8A5wwQb4n4cE2nIOzqKOAzLCaEX6aBmNEv8A== -csstype@^3.0.2, csstype@^3.0.4, csstype@^3.0.5: +csstype@^3.0.2, csstype@^3.0.5: version "3.0.5" resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.5.tgz#7fdec6a28a67ae18647c51668a9ff95bb2fa7bb8" integrity sha512-uVDi8LpBUKQj6sdxNaTetL6FpeCqTjOvAQuQUa/qAqq8oOd4ivkbhgnqayl0dnPal8Tb/yB1tF+gOvCBiicaiQ== @@ -9138,11 +9113,6 @@ is-utf8@^0.2.0: resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72" integrity sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI= -is-what@^3.3.1: - version "3.12.0" - resolved "https://registry.yarnpkg.com/is-what/-/is-what-3.12.0.tgz#f4405ce4bd6dd420d3ced51a026fb90e03705e55" - integrity sha512-2ilQz5/f/o9V7WRWJQmpFYNmQFZ9iM+OXRonZKcYgTkCzjb949Vi4h282PD1UfmgHk666rcWonbRJ++KI41VGw== - is-whitespace-character@^1.0.0: version "1.0.4" resolved "https://registry.yarnpkg.com/is-whitespace-character/-/is-whitespace-character-1.0.4.tgz#0858edd94a95594c7c9dd0b5c174ec6e45ee4aa7" @@ -10410,11 +10380,6 @@ media-typer@0.3.0: resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748" integrity sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g= -memoize-one@^5.0.0: - version "5.1.1" - resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.1.1.tgz#047b6e3199b508eaec03504de71229b8eb1d75c0" - integrity sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA== - memoizerific@^1.11.3: version "1.11.3" resolved "https://registry.yarnpkg.com/memoizerific/-/memoizerific-1.11.3.tgz#7c87a4646444c32d75438570905f2dbd1b1a805a" @@ -10503,13 +10468,6 @@ meow@^8.0.0: type-fest "^0.18.0" yargs-parser "^20.2.3" -merge-anything@^2.2.4: - version "2.4.4" - resolved "https://registry.yarnpkg.com/merge-anything/-/merge-anything-2.4.4.tgz#6226b2ac3d3d3fc5fb9e8d23aa400df25f98fdf0" - integrity sha512-l5XlriUDJKQT12bH+rVhAHjwIuXWdAIecGwsYjv2LJo+dA1AeRTmeQS+3QBpO6lEthBMDi2IUMpLC1yyRvGlwQ== - dependencies: - is-what "^3.3.1" - merge-descriptors@1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61" @@ -11833,11 +11791,6 @@ postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2: uniq "^1.0.1" util-deprecate "^1.0.2" -postcss-value-parser@^3.3.0: - version "3.3.1" - resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281" - integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ== - postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0: version "4.1.0" resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb" @@ -11992,7 +11945,7 @@ promzard@^0.3.0: dependencies: read "1" -prop-types@^15.0.0, prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2: +prop-types@^15.0.0, prop-types@^15.5.10, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2: version "15.7.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ== @@ -12256,15 +12209,14 @@ react-docgen@^5.0.0: node-dir "^0.1.10" strip-indent "^3.0.0" -react-dom@^16.11.0: - version "16.14.0" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.14.0.tgz#7ad838ec29a777fb3c75c3a190f661cf92ab8b89" - integrity sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw== +react-dom@>=17.0.1, react-dom@^17.0.1: + version "17.0.1" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.1.tgz#1de2560474ec9f0e334285662ede52dbc5426fc6" + integrity sha512-6eV150oJZ9U2t9svnsspTMrWNyHc6chX0KzDeAOXftRa8bNeOKTTfCJ7KorIwenkHd2xqVTBTCZd79yk/lx/Ug== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" - prop-types "^15.6.2" - scheduler "^0.19.1" + scheduler "^0.20.1" react-draggable@^4.0.3: version "4.4.3" @@ -12319,7 +12271,7 @@ react-inspector@^5.0.1: is-dom "^1.0.0" prop-types "^15.0.0" -react-is@^16.12.0, react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1: +react-is@^16.12.0, react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== @@ -12404,14 +12356,13 @@ react-textarea-autosize@^8.1.1: use-composed-ref "^1.0.0" use-latest "^1.0.0" -react@^16.11.0: - version "16.14.0" - resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d" - integrity sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g== +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== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" - prop-types "^15.6.2" reactcss@^1.2.0: version "1.2.3" @@ -13051,14 +13002,6 @@ saxes@^5.0.0: dependencies: xmlchars "^2.2.0" -scheduler@^0.19.1: - version "0.19.1" - resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196" - integrity sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA== - dependencies: - loose-envify "^1.1.0" - object-assign "^4.1.1" - scheduler@^0.20.1: version "0.20.1" resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.1.tgz#da0b907e24026b01181ecbc75efdc7f27b5a000c" @@ -13814,25 +13757,6 @@ style-to-object@0.3.0, style-to-object@^0.3.0: dependencies: inline-style-parser "0.1.1" -styled-components@^4.4.1: - version "4.4.1" - resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-4.4.1.tgz#e0631e889f01db67df4de576fedaca463f05c2f2" - integrity sha512-RNqj14kYzw++6Sr38n7197xG33ipEOktGElty4I70IKzQF1jzaD1U4xQ+Ny/i03UUhHlC5NWEO+d8olRCDji6g== - dependencies: - "@babel/helper-module-imports" "^7.0.0" - "@babel/traverse" "^7.0.0" - "@emotion/is-prop-valid" "^0.8.1" - "@emotion/unitless" "^0.7.0" - babel-plugin-styled-components ">= 1" - css-to-react-native "^2.2.2" - memoize-one "^5.0.0" - merge-anything "^2.2.4" - prop-types "^15.5.4" - react-is "^16.6.0" - stylis "^3.5.0" - stylis-rule-sheet "^0.0.10" - supports-color "^5.5.0" - styled-components@^5.2.1: version "5.2.1" resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.2.1.tgz#6ed7fad2dc233825f64c719ffbdedd84ad79101a" @@ -13868,16 +13792,6 @@ styled-system@^5.1.5: "@styled-system/variant" "^5.1.5" object-assign "^4.1.1" -stylis-rule-sheet@^0.0.10: - version "0.0.10" - resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz#44e64a2b076643f4b52e5ff71efc04d8c3c4a430" - integrity sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw== - -stylis@^3.5.0: - version "3.5.4" - resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe" - integrity sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q== - supports-color@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"