From 107348ffc4a144d9ff30a4f14bc2e5612f354e99 Mon Sep 17 00:00:00 2001 From: Suraj Ahmed Date: Thu, 11 Aug 2022 13:42:54 +0530 Subject: [PATCH 01/24] fix: version updated RNW --- .../storybook/stories/components/Wrapper.tsx | 5 +- .../components/primitives/Box/basic.tsx | 3 +- expo-example/App.tsx | 25 ++--- expo-example/nativebase.tsx | 24 +++-- expo-example/package.json | 2 +- expo-example/yarn.lock | 26 ++--- package.json | 2 +- .../useResponsiveQuery.web.ts | 98 +++++++++++++++---- yarn.lock | 26 +++-- 9 files changed, 144 insertions(+), 67 deletions(-) diff --git a/example/storybook/stories/components/Wrapper.tsx b/example/storybook/stories/components/Wrapper.tsx index 0d0bbde48..6d89912da 100644 --- a/example/storybook/stories/components/Wrapper.tsx +++ b/example/storybook/stories/components/Wrapper.tsx @@ -123,7 +123,7 @@ function MyWrapper({ children }: any) { bg={bgColor} safeAreaY > - : } size="lg" /> - + */} {children} ); @@ -186,6 +186,7 @@ export default ({ children, theme }: any) => { frame: { x: 0, y: 0, width: 0, height: 0 }, insets: { top: 0, left: 0, right: 0, bottom: 0 }, }} + isSSR > {children} diff --git a/example/storybook/stories/components/primitives/Box/basic.tsx b/example/storybook/stories/components/primitives/Box/basic.tsx index 2ace47b28..15292f928 100644 --- a/example/storybook/stories/components/primitives/Box/basic.tsx +++ b/example/storybook/stories/components/primitives/Box/basic.tsx @@ -5,13 +5,14 @@ export const Example = () => { This is a Box diff --git a/expo-example/App.tsx b/expo-example/App.tsx index 27d0acae5..1ec0bf48b 100644 --- a/expo-example/App.tsx +++ b/expo-example/App.tsx @@ -48,19 +48,20 @@ export default function App() { {customIsOn && } {nativeBaseIsOn && } */} - - - + {/* */} + + {/* */} diff --git a/expo-example/nativebase.tsx b/expo-example/nativebase.tsx index 94b3fc4a0..076e4750a 100644 --- a/expo-example/nativebase.tsx +++ b/expo-example/nativebase.tsx @@ -80,19 +80,23 @@ const Example = () => { // console.endTimeKey('mountmodal', '>>>>>>>>>>>>>>>>>> modal'); // }); - const toast = useToast(); + // const toast = useToast(); return ( - + This is a Box + ); diff --git a/expo-example/package.json b/expo-example/package.json index af8484536..258073ed5 100644 --- a/expo-example/package.json +++ b/expo-example/package.json @@ -20,7 +20,7 @@ "react-native": "0.64.3", "react-native-safe-area-context": "3.3.2", "react-native-svg": "12.1.1", - "react-native-web": "0.17.1" + "react-native-web": "0.18.2" }, "devDependencies": { "@babel/core": "^7.12.9", diff --git a/expo-example/yarn.lock b/expo-example/yarn.lock index 5437a97f9..fa874abc2 100644 --- a/expo-example/yarn.lock +++ b/expo-example/yarn.lock @@ -3017,11 +3017,6 @@ array-filter@~0.0.0: resolved "https://registry.npmjs.org/array-filter/-/array-filter-0.0.1.tgz" integrity sha1-fajPLiZijtcygDWB/SH2fKzS7uw= -array-find-index@^1.0.2: - version "1.0.2" - resolved "https://registry.npmjs.org/array-find-index/-/array-find-index-1.0.2.tgz" - integrity sha1-3wEKoSh+Fku9pvlyOwqWoexBh6E= - array-flatten@1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2" @@ -5959,7 +5954,7 @@ https-browserify@^1.0.0: resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73" integrity sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM= -hyphenate-style-name@^1.0.2, hyphenate-style-name@^1.0.4: +hyphenate-style-name@^1.0.2: version "1.0.4" resolved "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz" integrity sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ== @@ -8634,7 +8629,7 @@ postcss-value-parser@^3.0.0: 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: +postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0: version "4.2.0" resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514" integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ== @@ -8960,18 +8955,18 @@ react-native-svg@12.1.1: css-select "^2.1.0" css-tree "^1.0.0-alpha.39" -react-native-web@0.17.1: - version "0.17.1" - resolved "https://registry.npmjs.org/react-native-web/-/react-native-web-0.17.1.tgz" - integrity sha512-lUnn+2O8ynQ6/gJKylSxm7DLi2vHw6AujdDV1+LSa8Epe1bYFJNUcJTEhJf0jNYUFGOujzMtuG8Mkz3HdWTkag== +react-native-web@0.18.2: + version "0.18.2" + resolved "https://registry.yarnpkg.com/react-native-web/-/react-native-web-0.18.2.tgz#2d573852600250cfa0455c83e8594c928d128e0f" + integrity sha512-TQAhSzgGNQZI2WlOMC3r5fkfzHanaenleLOfjVRybJ1zKLfaX9U52szCpkP50mp6sFrzlg/UE4DA1omWDcjS2w== dependencies: - array-find-index "^1.0.2" create-react-class "^15.7.0" fbjs "^3.0.0" - hyphenate-style-name "^1.0.4" inline-style-prefixer "^6.0.0" normalize-css-color "^1.0.2" + postcss-value-parser "^4.2.0" prop-types "^15.6.0" + styleq "^0.1.2" react-native@0.64.3: version "0.64.3" @@ -9985,6 +9980,11 @@ stylehacks@^4.0.0: postcss "^7.0.0" postcss-selector-parser "^3.0.0" +styleq@^0.1.2: + version "0.1.2" + resolved "https://registry.yarnpkg.com/styleq/-/styleq-0.1.2.tgz#052b46af5ca4f920b1bdae2735ffb1e3970f53cd" + integrity sha512-EBNuMVSxpssuFcJq/c4zmZ4tpCyX9E27hz5xPJhw4URjRHcYXPHh8rDHY/tJsw5gtP0+tIL3IBYeQVIYjdZFhg== + sucrase@^3.20.0: version "3.21.0" resolved "https://registry.npmjs.org/sucrase/-/sucrase-3.21.0.tgz" diff --git a/package.json b/package.json index f9b236885..303b8457d 100644 --- a/package.json +++ b/package.json @@ -84,7 +84,7 @@ "react-native": "0.63.2", "react-native-safe-area-context": "^3.1.9", "react-native-svg": "^12.1.0", - "react-native-web": "^0.17.7", + "react-native-web": "0.18.2", "react-test-renderer": "^16.9.0", "release-it": "^13.5.8", "rollup": "^2.34.1", diff --git a/src/utils/useResponsiveQuery/useResponsiveQuery.web.ts b/src/utils/useResponsiveQuery/useResponsiveQuery.web.ts index 272d39550..82234b1ba 100644 --- a/src/utils/useResponsiveQuery/useResponsiveQuery.web.ts +++ b/src/utils/useResponsiveQuery/useResponsiveQuery.web.ts @@ -1,11 +1,17 @@ //@ts-ignore -import createCompileableStyle from 'react-native-web/dist/exports/StyleSheet/createCompileableStyle'; -//@ts-ignore -import i18nStyle from 'react-native-web/dist/exports/StyleSheet/i18nStyle'; -//@ts-ignore -import { atomic } from 'react-native-web/dist/exports/StyleSheet/compile'; +// import createCompileableStyle from 'react-native-web/dist/exports/StyleSheet/createCompileableStyle'; +// //@ts-ignore +// import i18nStyle from 'react-native-web/dist/exports/StyleSheet/i18nStyle'; + //@ts-ignore -import styleResolver from 'react-native-web/dist/exports/StyleSheet/styleResolver'; +import { atomic } from 'react-native-web/dist/exports/StyleSheet/compiler'; + +// console.log(Test, 'test'); +// //@ts-ignore +// import styleResolver from 'react-native-web/dist/exports/StyleSheet'; +// import stylesheet from 'react-native-web/dist/exports/StyleSheet'; +import { createSheet } from 'react-native-web/dist/exports/StyleSheet/dom'; +// import {} from 'react-native-web'; import type { DataSet, Query, @@ -127,6 +133,7 @@ const getResponsiveStyles = ( : undefined; let dataSet: DataSet = {}; + // console.log(' hello query'); if (queries.query) { queries.query.forEach((queryRule) => { @@ -140,34 +147,87 @@ const getResponsiveStyles = ( let mediaRules = ''; const flattenQueryStyle = StyleSheet.flatten(queryRule.style); - const newStyle = createCompileableStyle(i18nStyle(flattenQueryStyle)); - const results = atomic(newStyle); - - Object.keys(results).forEach((key) => { - const oldIdentifier = results[key].identifier; - if (process.env.NODE_ENV !== 'production') { - dataSet[dataAttribute] = - oldIdentifier + ' ' + dataSet[dataAttribute]; - } - - results[key].rules.forEach((oldRule: string) => { + // const newStyle = createCompileableStyle(i18nStyle(flattenQueryStyle)); + + // console.log( + // '*** i18nStyle', + // flattenQueryStyle, + // i18nStyle(flattenQueryStyle) + // ); + // console.log( + // '*** createCompileableStyle', + // i18nStyle(flattenQueryStyle), + // newStyle + // ); + + // const results = atomic(flattenQueryStyle); + const [compiledStyle, compiledOrderedRules] = atomic(flattenQueryStyle); + // console.log('*** atomic', compiledOrderedRules); + delete compiledStyle.$$css; + Object.keys(compiledStyle).forEach((key) => { + const oldIdentifier = compiledStyle[key]; + compiledOrderedRules.forEach(([rules, order]) => { // Rule returned by atomic has css selectors, so we'll replace it with data-attr selector - const newRule = oldRule.replace('.' + oldIdentifier, newIdentifier); + const newRule = rules[0].replace( + '.' + oldIdentifier, + newIdentifier + ); + mediaRules += newRule; }); }); + // Object.keys(results).forEach((key) => { + // const oldIdentifier = results[key].identifier; + + // // if (process.env.NODE_ENV !== 'production') { + // // dataSet[dataAttribute] = + // // oldIdentifier + ' ' + dataSet[dataAttribute]; + // // } + + // compiledOrderedRules.forEach(([rules, order]) => { + + // rules.forEach((oldRule: string) => { + // // Rule returned by atomic has css selectors, so we'll replace it with data-attr selector + // const newRule = oldRule.replace('.' + oldIdentifier, newIdentifier); + // mediaRules += newRule; + // }); + + // // if (sheet != null) { + // // rules.forEach((rule) => { + // // sheet.insert(rule, order); + // // }); + // // } + + // // results[key].rules.forEach((oldRule: string) => { + // // // Rule returned by atomic has css selectors, so we'll replace it with data-attr selector + // // const newRule = oldRule.replace('.' + oldIdentifier, newIdentifier); + // // mediaRules += newRule; + // // }); + // }); + + // console.log(stylesheet.getSheet(), 'style sheet here'); + if (mediaRules) { const mediaQueryRule = getMediaQueryRule(queryRule, mediaRules); // Here by prepending the /*${queryHash}{}*/ comment, we're kind of tricking the regex used by rn-web to verify if a rule is inserted or not. // Looks safe to me, just need to keep a check if there are any implementation changes in createStyleSheet file in rn-web in future. // Second argument defines the order of the insertion. DataSet and class selectors have same CSS specificity so we need to make sure that media rules have higher precedence. Max precendence in RN web is around 2.2 so 3 ensures styles will be appended later - styleResolver.sheet.insert( + + // const stylesheetText = `/*${queryHash}{}*/${mediaQueryRule}`; + + const sheet = createSheet(); + + sheet.insert( `/*${queryHash}{}*/${mediaQueryRule}`, MEDIA_QUERY_STYLESHEET_GROUP ); + // const myOwnStyleSheet = StyleSheet.create({}); + // console.log(myOwnStyleSheet, 'hello 222'); + // stylesheet.getSheet().textContent + + // `/*${queryHash}{}*/${mediaQueryRule}`; } } }); diff --git a/yarn.lock b/yarn.lock index db1977875..a51d05908 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3688,7 +3688,7 @@ array-filter@~0.0.0: resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-0.0.1.tgz#7da8cf2e26628ed732803581fd21f67cacd2eeec" integrity sha1-fajPLiZijtcygDWB/SH2fKzS7uw= -array-find-index@^1.0.1, array-find-index@^1.0.2: +array-find-index@^1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/array-find-index/-/array-find-index-1.0.2.tgz#df010aa1287e164bbda6f9723b0a96a1ec4187a1" integrity sha1-3wEKoSh+Fku9pvlyOwqWoexBh6E= @@ -6872,7 +6872,7 @@ husky@^4.2.5: slash "^3.0.0" which-pm-runs "^1.0.0" -hyphenate-style-name@^1.0.2, hyphenate-style-name@^1.0.4: +hyphenate-style-name@^1.0.2: version "1.0.4" resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz#691879af8e220aea5750e8827db4ef62a54e361d" integrity sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ== @@ -10311,6 +10311,11 @@ posix-character-classes@^0.1.0: resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab" integrity sha1-AerA/jta9xoqbAL+q7jB/vfgDqs= +postcss-value-parser@^4.2.0: + version "4.2.0" + resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514" + integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ== + postinstall-postinstall@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/postinstall-postinstall/-/postinstall-postinstall-2.1.0.tgz#4f7f77441ef539d1512c40bd04c71b06a4704ca3" @@ -10570,18 +10575,18 @@ react-native-svg@^12.1.0: css-select "^2.1.0" css-tree "^1.0.0-alpha.39" -react-native-web@^0.17.7: - version "0.17.7" - resolved "https://registry.yarnpkg.com/react-native-web/-/react-native-web-0.17.7.tgz#038899dbc94467a0ca0be214b88a30e0c117b176" - integrity sha512-4OOU/QjyRySOXyHfTvljEMS4VXKn42Qs3y9uHDPMwaCUFjwg0oasR/j706OaVgan9kF4Ipa2vJ3F6Z/Xqy8KeQ== +react-native-web@0.18.2: + version "0.18.2" + resolved "https://registry.yarnpkg.com/react-native-web/-/react-native-web-0.18.2.tgz#2d573852600250cfa0455c83e8594c928d128e0f" + integrity sha512-TQAhSzgGNQZI2WlOMC3r5fkfzHanaenleLOfjVRybJ1zKLfaX9U52szCpkP50mp6sFrzlg/UE4DA1omWDcjS2w== dependencies: - array-find-index "^1.0.2" create-react-class "^15.7.0" fbjs "^3.0.0" - hyphenate-style-name "^1.0.4" inline-style-prefixer "^6.0.0" normalize-css-color "^1.0.2" + postcss-value-parser "^4.2.0" prop-types "^15.6.0" + styleq "^0.1.2" react-native@0.63.2: version "0.63.2" @@ -11857,6 +11862,11 @@ strip-json-comments@~2.0.1: resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a" integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo= +styleq@^0.1.2: + version "0.1.2" + resolved "https://registry.yarnpkg.com/styleq/-/styleq-0.1.2.tgz#052b46af5ca4f920b1bdae2735ffb1e3970f53cd" + integrity sha512-EBNuMVSxpssuFcJq/c4zmZ4tpCyX9E27hz5xPJhw4URjRHcYXPHh8rDHY/tJsw5gtP0+tIL3IBYeQVIYjdZFhg== + sudo-prompt@^9.0.0: version "9.2.1" resolved "https://registry.yarnpkg.com/sudo-prompt/-/sudo-prompt-9.2.1.tgz#77efb84309c9ca489527a4e749f287e6bdd52afd" From 06e35c927ebd8be64736799e5a5b11b82ca14625 Mon Sep 17 00:00:00 2001 From: Viraj-10 Date: Thu, 11 Aug 2022 14:04:53 +0530 Subject: [PATCH 02/24] fix: adding preprocessing --- expo-example/nativebase.tsx | 2 +- expo-example/package.json | 2 +- expo-example/yarn.lock | 31 +++++++++------- package.json | 2 +- .../useResponsiveQuery.web.ts | 10 ++++-- yarn.lock | 36 +++++++++---------- 6 files changed, 46 insertions(+), 37 deletions(-) diff --git a/expo-example/nativebase.tsx b/expo-example/nativebase.tsx index 076e4750a..fd90bc40a 100644 --- a/expo-example/nativebase.tsx +++ b/expo-example/nativebase.tsx @@ -93,7 +93,7 @@ const Example = () => { letterSpacing: 'lg', }} bg={['red.400', 'blue.400']} - // p={[2, 5]} + shadow={[8, 1]} > This is a Box diff --git a/expo-example/package.json b/expo-example/package.json index 258073ed5..3ce6ab973 100644 --- a/expo-example/package.json +++ b/expo-example/package.json @@ -20,7 +20,7 @@ "react-native": "0.64.3", "react-native-safe-area-context": "3.3.2", "react-native-svg": "12.1.1", - "react-native-web": "0.18.2" + "react-native-web": "^0.18.7" }, "devDependencies": { "@babel/core": "^7.12.9", diff --git a/expo-example/yarn.lock b/expo-example/yarn.lock index fa874abc2..1545cf0f2 100644 --- a/expo-example/yarn.lock +++ b/expo-example/yarn.lock @@ -1128,6 +1128,13 @@ dependencies: regenerator-runtime "^0.13.4" +"@babel/runtime@^7.18.6": + version "7.18.9" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.9.tgz#b4fcfce55db3d2e5e080d2490f608a3b9f407f4a" + integrity sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw== + dependencies: + regenerator-runtime "^0.13.4" + "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7": version "7.18.3" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.3.tgz#c7b654b57f6f63cf7f8b418ac9ca04408c4579f4" @@ -5235,9 +5242,9 @@ fbjs@^0.8.4: setimmediate "^1.0.5" ua-parser-js "^0.7.30" -fbjs@^3.0.0: +fbjs@^3.0.4: version "3.0.4" - resolved "https://registry.npmjs.org/fbjs/-/fbjs-3.0.4.tgz" + resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-3.0.4.tgz#e1871c6bd3083bac71ff2da868ad5067d37716c6" integrity sha512-ucV0tDODnGV3JCnnkmoszb5lf4bNpzjv80K41wd4k798Etq+UYD0y0TIfalLjZoKgjive6/adkRnszwapiDgBQ== dependencies: cross-fetch "^3.1.5" @@ -6076,9 +6083,9 @@ ini@^1.3.5, ini@~1.3.0: resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c" integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew== -inline-style-prefixer@^6.0.0: +inline-style-prefixer@^6.0.1: version "6.0.1" - resolved "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-6.0.1.tgz" + resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-6.0.1.tgz#c5c0e43ba8831707afc5f5bbfd97edf45c1fa7ae" integrity sha512-AsqazZ8KcRzJ9YPN1wMH2aNM7lkWQ8tSPrW5uDk1ziYwiAPWSZnUsC7lfZq+BDqLqz0B4Pho5wscWcJzVvRzDQ== dependencies: css-in-js-utils "^2.0.0" @@ -8705,7 +8712,7 @@ prompts@^2.4.0: kleur "^3.0.3" sisteransi "^1.0.5" -prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2: +prop-types@^15.6.2, prop-types@^15.7.2: version "15.8.1" resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz" integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== @@ -8955,17 +8962,17 @@ react-native-svg@12.1.1: css-select "^2.1.0" css-tree "^1.0.0-alpha.39" -react-native-web@0.18.2: - version "0.18.2" - resolved "https://registry.yarnpkg.com/react-native-web/-/react-native-web-0.18.2.tgz#2d573852600250cfa0455c83e8594c928d128e0f" - integrity sha512-TQAhSzgGNQZI2WlOMC3r5fkfzHanaenleLOfjVRybJ1zKLfaX9U52szCpkP50mp6sFrzlg/UE4DA1omWDcjS2w== +react-native-web@^0.18.7: + version "0.18.7" + resolved "https://registry.yarnpkg.com/react-native-web/-/react-native-web-0.18.7.tgz#2b688502b3d389c49346fa3d8c9a20cfd52f507f" + integrity sha512-5DwcsrAqLjOvzJJk/XPozEtqCOF3hrCJ55buLOEPMxvS8lKxRdeMF9SZUI2zyqE8JcMFGtQzLhWAZGeaTrXaRg== dependencies: + "@babel/runtime" "^7.18.6" create-react-class "^15.7.0" - fbjs "^3.0.0" - inline-style-prefixer "^6.0.0" + fbjs "^3.0.4" + inline-style-prefixer "^6.0.1" normalize-css-color "^1.0.2" postcss-value-parser "^4.2.0" - prop-types "^15.6.0" styleq "^0.1.2" react-native@0.64.3: diff --git a/package.json b/package.json index 303b8457d..d1fb6ae07 100644 --- a/package.json +++ b/package.json @@ -84,7 +84,7 @@ "react-native": "0.63.2", "react-native-safe-area-context": "^3.1.9", "react-native-svg": "^12.1.0", - "react-native-web": "0.18.2", + "react-native-web": "^0.18.7", "react-test-renderer": "^16.9.0", "release-it": "^13.5.8", "rollup": "^2.34.1", diff --git a/src/utils/useResponsiveQuery/useResponsiveQuery.web.ts b/src/utils/useResponsiveQuery/useResponsiveQuery.web.ts index 82234b1ba..f0889b43b 100644 --- a/src/utils/useResponsiveQuery/useResponsiveQuery.web.ts +++ b/src/utils/useResponsiveQuery/useResponsiveQuery.web.ts @@ -10,7 +10,10 @@ import { atomic } from 'react-native-web/dist/exports/StyleSheet/compiler'; // //@ts-ignore // import styleResolver from 'react-native-web/dist/exports/StyleSheet'; // import stylesheet from 'react-native-web/dist/exports/StyleSheet'; +//@ts-ignore import { createSheet } from 'react-native-web/dist/exports/StyleSheet/dom'; +//@ts-ignore +import preprocess from 'react-native-web/dist/exports/StyleSheet/preprocess'; // import {} from 'react-native-web'; import type { DataSet, @@ -147,9 +150,10 @@ const getResponsiveStyles = ( let mediaRules = ''; const flattenQueryStyle = StyleSheet.flatten(queryRule.style); - + console.log('flattenQueryStyle', flattenQueryStyle); // const newStyle = createCompileableStyle(i18nStyle(flattenQueryStyle)); - + const newStyle = preprocess(flattenQueryStyle); + console.log('newStyle', newStyle); // console.log( // '*** i18nStyle', // flattenQueryStyle, @@ -162,7 +166,7 @@ const getResponsiveStyles = ( // ); // const results = atomic(flattenQueryStyle); - const [compiledStyle, compiledOrderedRules] = atomic(flattenQueryStyle); + const [compiledStyle, compiledOrderedRules] = atomic(newStyle); // console.log('*** atomic', compiledOrderedRules); delete compiledStyle.$$css; Object.keys(compiledStyle).forEach((key) => { diff --git a/yarn.lock b/yarn.lock index a51d05908..294b8ef38 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1023,6 +1023,13 @@ dependencies: regenerator-runtime "^0.13.4" +"@babel/runtime@^7.18.6": + version "7.18.9" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.9.tgz#b4fcfce55db3d2e5e080d2490f608a3b9f407f4a" + integrity sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw== + dependencies: + regenerator-runtime "^0.13.4" + "@babel/runtime@^7.6.2", "@babel/runtime@^7.8.4": version "7.12.5" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.5.tgz#410e7e487441e1b360c29be715d870d9b985882e" @@ -6111,7 +6118,7 @@ fbjs@^1.0.0: setimmediate "^1.0.5" ua-parser-js "^0.7.18" -fbjs@^3.0.0: +fbjs@^3.0.4: version "3.0.4" resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-3.0.4.tgz#e1871c6bd3083bac71ff2da868ad5067d37716c6" integrity sha512-ucV0tDODnGV3JCnnkmoszb5lf4bNpzjv80K41wd4k798Etq+UYD0y0TIfalLjZoKgjive6/adkRnszwapiDgBQ== @@ -6994,7 +7001,7 @@ ini@^1.3.2, ini@^1.3.4, ini@~1.3.0: resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c" integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew== -inline-style-prefixer@^6.0.0: +inline-style-prefixer@^6.0.1: version "6.0.1" resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-6.0.1.tgz#c5c0e43ba8831707afc5f5bbfd97edf45c1fa7ae" integrity sha512-AsqazZ8KcRzJ9YPN1wMH2aNM7lkWQ8tSPrW5uDk1ziYwiAPWSZnUsC7lfZq+BDqLqz0B4Pho5wscWcJzVvRzDQ== @@ -10417,15 +10424,6 @@ prompts@^2.0.1, prompts@^2.2.1: kleur "^3.0.3" sisteransi "^1.0.5" -prop-types@^15.6.0: - version "15.8.1" - resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" - integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== - dependencies: - loose-envify "^1.4.0" - object-assign "^4.1.1" - react-is "^16.13.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" @@ -10539,7 +10537,7 @@ react-error-boundary@^3.1.0: dependencies: "@babel/runtime" "^7.12.5" -react-is@^16.12.0, react-is@^16.13.1, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6: +react-is@^16.12.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== @@ -10575,17 +10573,17 @@ react-native-svg@^12.1.0: css-select "^2.1.0" css-tree "^1.0.0-alpha.39" -react-native-web@0.18.2: - version "0.18.2" - resolved "https://registry.yarnpkg.com/react-native-web/-/react-native-web-0.18.2.tgz#2d573852600250cfa0455c83e8594c928d128e0f" - integrity sha512-TQAhSzgGNQZI2WlOMC3r5fkfzHanaenleLOfjVRybJ1zKLfaX9U52szCpkP50mp6sFrzlg/UE4DA1omWDcjS2w== +react-native-web@^0.18.7: + version "0.18.7" + resolved "https://registry.yarnpkg.com/react-native-web/-/react-native-web-0.18.7.tgz#2b688502b3d389c49346fa3d8c9a20cfd52f507f" + integrity sha512-5DwcsrAqLjOvzJJk/XPozEtqCOF3hrCJ55buLOEPMxvS8lKxRdeMF9SZUI2zyqE8JcMFGtQzLhWAZGeaTrXaRg== dependencies: + "@babel/runtime" "^7.18.6" create-react-class "^15.7.0" - fbjs "^3.0.0" - inline-style-prefixer "^6.0.0" + fbjs "^3.0.4" + inline-style-prefixer "^6.0.1" normalize-css-color "^1.0.2" postcss-value-parser "^4.2.0" - prop-types "^15.6.0" styleq "^0.1.2" react-native@0.63.2: From 1c376aced426efae7e19244a8a4a5589a96a70fb Mon Sep 17 00:00:00 2001 From: Viraj-10 Date: Thu, 11 Aug 2022 15:12:16 +0530 Subject: [PATCH 03/24] fix: type and removing comment out code --- .../useResponsiveQuery.web.ts | 72 ++----------------- 1 file changed, 4 insertions(+), 68 deletions(-) diff --git a/src/utils/useResponsiveQuery/useResponsiveQuery.web.ts b/src/utils/useResponsiveQuery/useResponsiveQuery.web.ts index f0889b43b..b4378c00f 100644 --- a/src/utils/useResponsiveQuery/useResponsiveQuery.web.ts +++ b/src/utils/useResponsiveQuery/useResponsiveQuery.web.ts @@ -1,20 +1,9 @@ -//@ts-ignore -// import createCompileableStyle from 'react-native-web/dist/exports/StyleSheet/createCompileableStyle'; -// //@ts-ignore -// import i18nStyle from 'react-native-web/dist/exports/StyleSheet/i18nStyle'; - //@ts-ignore import { atomic } from 'react-native-web/dist/exports/StyleSheet/compiler'; - -// console.log(Test, 'test'); -// //@ts-ignore -// import styleResolver from 'react-native-web/dist/exports/StyleSheet'; -// import stylesheet from 'react-native-web/dist/exports/StyleSheet'; //@ts-ignore import { createSheet } from 'react-native-web/dist/exports/StyleSheet/dom'; //@ts-ignore import preprocess from 'react-native-web/dist/exports/StyleSheet/preprocess'; -// import {} from 'react-native-web'; import type { DataSet, Query, @@ -23,7 +12,7 @@ import type { GetResponsiveStylesParams, } from './types'; import { StyleSheet } from 'react-native'; -//@ts-ignore +// @ts-ignore import stableHash from 'stable-hash'; import hash from './hash'; import type { GetResponsiveStylesReturnType } from './types'; @@ -136,7 +125,6 @@ const getResponsiveStyles = ( : undefined; let dataSet: DataSet = {}; - // console.log(' hello query'); if (queries.query) { queries.query.forEach((queryRule) => { @@ -150,69 +138,21 @@ const getResponsiveStyles = ( let mediaRules = ''; const flattenQueryStyle = StyleSheet.flatten(queryRule.style); - console.log('flattenQueryStyle', flattenQueryStyle); - // const newStyle = createCompileableStyle(i18nStyle(flattenQueryStyle)); const newStyle = preprocess(flattenQueryStyle); - console.log('newStyle', newStyle); - // console.log( - // '*** i18nStyle', - // flattenQueryStyle, - // i18nStyle(flattenQueryStyle) - // ); - // console.log( - // '*** createCompileableStyle', - // i18nStyle(flattenQueryStyle), - // newStyle - // ); - - // const results = atomic(flattenQueryStyle); const [compiledStyle, compiledOrderedRules] = atomic(newStyle); - // console.log('*** atomic', compiledOrderedRules); + delete compiledStyle.$$css; Object.keys(compiledStyle).forEach((key) => { const oldIdentifier = compiledStyle[key]; - compiledOrderedRules.forEach(([rules, order]) => { + compiledOrderedRules.forEach(([rules, _order]: any) => { // Rule returned by atomic has css selectors, so we'll replace it with data-attr selector const newRule = rules[0].replace( '.' + oldIdentifier, newIdentifier ); - mediaRules += newRule; }); }); - - // Object.keys(results).forEach((key) => { - // const oldIdentifier = results[key].identifier; - - // // if (process.env.NODE_ENV !== 'production') { - // // dataSet[dataAttribute] = - // // oldIdentifier + ' ' + dataSet[dataAttribute]; - // // } - - // compiledOrderedRules.forEach(([rules, order]) => { - - // rules.forEach((oldRule: string) => { - // // Rule returned by atomic has css selectors, so we'll replace it with data-attr selector - // const newRule = oldRule.replace('.' + oldIdentifier, newIdentifier); - // mediaRules += newRule; - // }); - - // // if (sheet != null) { - // // rules.forEach((rule) => { - // // sheet.insert(rule, order); - // // }); - // // } - - // // results[key].rules.forEach((oldRule: string) => { - // // // Rule returned by atomic has css selectors, so we'll replace it with data-attr selector - // // const newRule = oldRule.replace('.' + oldIdentifier, newIdentifier); - // // mediaRules += newRule; - // // }); - // }); - - // console.log(stylesheet.getSheet(), 'style sheet here'); - if (mediaRules) { const mediaQueryRule = getMediaQueryRule(queryRule, mediaRules); @@ -222,16 +162,12 @@ const getResponsiveStyles = ( // const stylesheetText = `/*${queryHash}{}*/${mediaQueryRule}`; - const sheet = createSheet(); + const sheet = createSheet(); //return a sheet object which is being used doesn't create one sheet.insert( `/*${queryHash}{}*/${mediaQueryRule}`, MEDIA_QUERY_STYLESHEET_GROUP ); - // const myOwnStyleSheet = StyleSheet.create({}); - // console.log(myOwnStyleSheet, 'hello 222'); - // stylesheet.getSheet().textContent + - // `/*${queryHash}{}*/${mediaQueryRule}`; } } }); From 0f8d36de321465ab08d9f063ae7487b4ba22eaa7 Mon Sep 17 00:00:00 2001 From: Viraj-10 Date: Thu, 11 Aug 2022 15:51:30 +0530 Subject: [PATCH 04/24] fix: adding commnets on new implementation --- .../useResponsiveQuery.web.ts | 21 +++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) diff --git a/src/utils/useResponsiveQuery/useResponsiveQuery.web.ts b/src/utils/useResponsiveQuery/useResponsiveQuery.web.ts index b4378c00f..0d3430dff 100644 --- a/src/utils/useResponsiveQuery/useResponsiveQuery.web.ts +++ b/src/utils/useResponsiveQuery/useResponsiveQuery.web.ts @@ -44,6 +44,24 @@ import React from 'react'; // refer line number 121 in `react-native-web/dist/exports/StyleSheet/createOrdererdCSSStyleSheetfile`. // We can trick this hash id generator by adding a comment on top of our media query rule in this format. /* media-query + data-attr {} */ then it'll start using media-query + data-attr as cache key +/******************** Implementation after RNW v0.18 ***********************/ + +/** + * 1. preprocess:- Handles shadow/text shadow conversion from RN styles to web * styles + * + * 2. atomic:- it handles prefixing, converting RN specific styles to web styles * and generating the CSS selector. + * Input {marginTop: 10} + * Output + * compiledStyle : marginTop: "r-marginTop-156q2ks" + * compiledOrderedRules : ".r-marginTop-156q2ks{margin-top:10px;}" + * a)compiledStyle:- Array it holds identifier/selector with properties + * b)compiledOrderedRules:- Array it holds the css rule with selector name + * Also from RNW v0.18 handles swapping of ltr styles if enabled by user + * 3. createSheet:- used to grab sheet which exist already created by rnw. when we * call createSheet without id it will return sheet which exist. * cause it automatically takes a default ID which is already in * use (created by rnw with default ID) so this return sheet * which exist with ID doesn't create a new sheet. + * + * This Implementation is based on asumptions that RNW doesn't change the * function or doesn't re-write them. if there is any change in RNW implmentation * it we'll break and needs to be updated. + * + */ const MEDIA_QUERY_STYLESHEET_GROUP = 3; export const useResponsiveQuery = ( @@ -140,8 +158,7 @@ const getResponsiveStyles = ( const flattenQueryStyle = StyleSheet.flatten(queryRule.style); const newStyle = preprocess(flattenQueryStyle); const [compiledStyle, compiledOrderedRules] = atomic(newStyle); - - delete compiledStyle.$$css; + delete compiledStyle.$$css; //removing unnecessary $$css property Object.keys(compiledStyle).forEach((key) => { const oldIdentifier = compiledStyle[key]; compiledOrderedRules.forEach(([rules, _order]: any) => { From bb18b51a5bb8d1132232bd10083716db01e62af9 Mon Sep 17 00:00:00 2001 From: Viraj-10 Date: Thu, 11 Aug 2022 15:56:47 +0530 Subject: [PATCH 05/24] fix: version fix rnw 0.18 and above --- package.json | 2 +- yarn.lock | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index d1fb6ae07..ff7d72b1a 100644 --- a/package.json +++ b/package.json @@ -84,7 +84,7 @@ "react-native": "0.63.2", "react-native-safe-area-context": "^3.1.9", "react-native-svg": "^12.1.0", - "react-native-web": "^0.18.7", + "react-native-web": "^0.18.0", "react-test-renderer": "^16.9.0", "release-it": "^13.5.8", "rollup": "^2.34.1", diff --git a/yarn.lock b/yarn.lock index 294b8ef38..47d80727e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10573,7 +10573,7 @@ react-native-svg@^12.1.0: css-select "^2.1.0" css-tree "^1.0.0-alpha.39" -react-native-web@^0.18.7: +react-native-web@^0.18.0: version "0.18.7" resolved "https://registry.yarnpkg.com/react-native-web/-/react-native-web-0.18.7.tgz#2b688502b3d389c49346fa3d8c9a20cfd52f507f" integrity sha512-5DwcsrAqLjOvzJJk/XPozEtqCOF3hrCJ55buLOEPMxvS8lKxRdeMF9SZUI2zyqE8JcMFGtQzLhWAZGeaTrXaRg== From 9b3638a4bd0fd1d6ea7bef6e19c7955e27b1e505 Mon Sep 17 00:00:00 2001 From: Viraj-10 Date: Thu, 11 Aug 2022 16:08:41 +0530 Subject: [PATCH 06/24] fix: example app type errors --- expo-example/App.tsx | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/expo-example/App.tsx b/expo-example/App.tsx index 1ec0bf48b..4502ffbd1 100644 --- a/expo-example/App.tsx +++ b/expo-example/App.tsx @@ -10,20 +10,20 @@ import { LogBox } from 'react-native'; LogBox.ignoreLogs(['Warning: ...']); // Ignore log notification by message LogBox.ignoreAllLogs(); //Ignore all log notifications -console.currentKey = {}; -const theme = makeTheme({}); +// console.currentKey = {}; +// const theme = makeTheme({}); -console.startTimeKey = function (key) { - console.currentKey[key] = Date.now(); -}; +// console.startTimeKey = function (key) { +// console.currentKey[key] = Date.now(); +// }; -console.endTimeKey = function (key, msg) { - console.log(msg, key, Date.now() - console.currentKey[key]); +// console.endTimeKey = function (key, msg) { +// console.log(msg, key, Date.now() - console.currentKey[key]); - // if (console.currentKey[key]) { - // delete console.currentKey[key]; - // } -}; +// // if (console.currentKey[key]) { +// // delete console.currentKey[key]; +// // } +// }; export default function App() { const [nativeBaseIsOn, setNativeBaseIsOn] = useState(false); From ffb4f4f090fc6749e5514e4838df91f0814a6243 Mon Sep 17 00:00:00 2001 From: Viraj-10 Date: Thu, 11 Aug 2022 16:35:24 +0530 Subject: [PATCH 07/24] fix: import for preprocessor --- src/utils/useResponsiveQuery/useResponsiveQuery.web.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utils/useResponsiveQuery/useResponsiveQuery.web.ts b/src/utils/useResponsiveQuery/useResponsiveQuery.web.ts index 0d3430dff..7411fe034 100644 --- a/src/utils/useResponsiveQuery/useResponsiveQuery.web.ts +++ b/src/utils/useResponsiveQuery/useResponsiveQuery.web.ts @@ -3,7 +3,7 @@ import { atomic } from 'react-native-web/dist/exports/StyleSheet/compiler'; //@ts-ignore import { createSheet } from 'react-native-web/dist/exports/StyleSheet/dom'; //@ts-ignore -import preprocess from 'react-native-web/dist/exports/StyleSheet/preprocess'; +import preprocess from 'react-native-web/dist/exports/StyleSheet/preprocess.js'; import type { DataSet, Query, From 71ea3caf96e116854b38c1ad10069c7037dd3f01 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Thu, 13 Oct 2022 15:38:04 +0530 Subject: [PATCH 08/24] fix: callback state props --- .../primitives/Pressable/Pressable.tsx | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/src/components/primitives/Pressable/Pressable.tsx b/src/components/primitives/Pressable/Pressable.tsx index 5472811e6..3278afdd4 100644 --- a/src/components/primitives/Pressable/Pressable.tsx +++ b/src/components/primitives/Pressable/Pressable.tsx @@ -60,6 +60,12 @@ const Pressable = ( const { focusProps, isFocused } = useFocus(); const { isFocusVisible, focusProps: focusRingProps }: any = useFocusRing(); + const stateProps = { + isPressed: isPressedProp || isPressed, + isFocused: isFocusedProp || isFocused, + isHovered: isHoveredProp || isHovered, + }; + const { onPressIn, onPressOut, @@ -69,9 +75,7 @@ const Pressable = ( onBlur, ...resolvedProps } = usePropsResolution('Pressable', props, { - isPressed: isPressedProp || isPressed, - isFocused: isFocusedProp || isFocused, - isHovered: isHoveredProp || isHovered, + ...stateProps, isFocusVisible: isFocusVisibleProp || isFocusVisible, isDisabled: disabled || isDisabled, }); @@ -106,13 +110,7 @@ const Pressable = ( disabled={disabled || isDisabled} {...resolvedProps} > - {typeof children !== 'function' - ? children - : children({ - isPressed, - isHovered, - isFocused, - })} + {typeof children !== 'function' ? children : children({ ...stateProps })} ); }; From bfa4539f744358ead8968467e9eb7d3479842858 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Thu, 13 Oct 2022 19:42:29 +0530 Subject: [PATCH 09/24] fix: iconbutton state props resolution --- .../composites/IconButton/index.tsx | 22 +++++++++++-------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/src/components/composites/IconButton/index.tsx b/src/components/composites/IconButton/index.tsx index ea80a3d1a..27af57461 100644 --- a/src/components/composites/IconButton/index.tsx +++ b/src/components/composites/IconButton/index.tsx @@ -11,10 +11,12 @@ import { useIsPressed, } from '../../primitives/Pressable/Pressable'; import { useFocusRing } from '@react-native-aria/focus'; +import merge from 'lodash.merge'; const IconButton = ( { icon, + _icon: pseudoIconProp, children, isHovered: isHoveredProp, isPressed: isPressedProp, @@ -39,20 +41,22 @@ const IconButton = ( onFocus, onBlur, ...resolvedProps - } = usePropsResolution('IconButton', props, { - isHovered: isHoveredProp || isHovered, - isPressed: isPressedProp || isPressed, - isFocused: isFocusedProp || isFocused, - isFocusVisible: isFocusVisibleProp || isFocusVisible, - isDisabled, - }); + } = usePropsResolution( + 'IconButton', + { ...props, _icon: merge({}, pseudoIconProp, icon?.props) }, + { + isHovered: isHoveredProp || isHovered, + isPressed: isPressedProp || isPressed, + isFocused: isFocusedProp || isFocused, + isFocusVisible: isFocusVisibleProp || isFocusVisible, + isDisabled, + } + ); let clonedIcon; if (icon) { clonedIcon = React.cloneElement(icon, { ..._icon, - ...icon?.props, - ...props._icon, }); } From eb56adfb7957e2221988ef38437c29443c079660 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Fri, 14 Oct 2022 16:04:21 +0530 Subject: [PATCH 10/24] fix: update snapshots --- example/tests/storybook.test.js.snap.android | 1236 +++++++++--------- example/tests/storybook.test.js.snap.ios | 1084 +++++++-------- example/tests/storybook.test.js.snap.node | 450 ++++--- example/tests/storybook.test.js.snap.web | 450 ++++--- 4 files changed, 1700 insertions(+), 1520 deletions(-) diff --git a/example/tests/storybook.test.js.snap.android b/example/tests/storybook.test.js.snap.android index 435719a14..bd0a57447 100644 --- a/example/tests/storybook.test.js.snap.android +++ b/example/tests/storybook.test.js.snap.android @@ -203,12 +203,11 @@ exports[`Storyshots Actionsheet Composition 1`] = ` animationType="slide" hardwareAccelerated={false} onRequestClose={[Function]} + statusBarTranslucent={true} transparent={true} visible={false} > @@ -49162,7 +49141,7 @@ exports[`Storyshots Image Sizes 1`] = ` "backgroundColor": undefined, "color": "#171717", "fontFamily": undefined, - "fontSize": null, + "fontSize": 24, "fontStyle": "normal", "fontWeight": "700", "letterSpacing": 0, @@ -49731,6 +49710,7 @@ exports[`Storyshots Input Addons 1`] = ` allowFontScaling={true} dataSet={Object {}} editable={true} + nativeID="undefined-input" onBlur={[Function]} onFocus={[Function]} onKeyPress={[Function]} @@ -49738,7 +49718,6 @@ exports[`Storyshots Input Addons 1`] = ` placeholderTextColor="#a3a3a3" rejectResponderTermination={true} secureTextEntry={false} - selectionColor="#1f2937" style={ Object { "backgroundColor": "transparent", @@ -50001,6 +49980,7 @@ exports[`Storyshots Input Elements 1`] = ` allowFontScaling={true} dataSet={Object {}} editable={true} + nativeID="undefined-input" onBlur={[Function]} onFocus={[Function]} onKeyPress={[Function]} @@ -50008,7 +49988,6 @@ exports[`Storyshots Input Elements 1`] = ` placeholderTextColor="#a3a3a3" rejectResponderTermination={true} secureTextEntry={false} - selectionColor="#1f2937" style={ Object { "backgroundColor": "transparent", @@ -50057,6 +50036,7 @@ exports[`Storyshots Input Elements 1`] = ` allowFontScaling={true} dataSet={Object {}} editable={true} + nativeID="undefined-input" onBlur={[Function]} onFocus={[Function]} onKeyPress={[Function]} @@ -50064,7 +50044,6 @@ exports[`Storyshots Input Elements 1`] = ` placeholderTextColor="#a3a3a3" rejectResponderTermination={true} secureTextEntry={true} - selectionColor="#1f2937" style={ Object { "backgroundColor": "transparent", @@ -50088,35 +50067,52 @@ exports[`Storyshots Input Elements 1`] = ` dataSet={Object {}} style={Object {}} /> - -  - + +  + + @@ -50266,16 +50262,16 @@ exports[`Storyshots Input Form Controlled 1`] = ` > @@ -46196,7 +46180,7 @@ exports[`Storyshots Image Sizes 1`] = ` "backgroundColor": undefined, "color": "#171717", "fontFamily": undefined, - "fontSize": null, + "fontSize": 24, "fontStyle": "normal", "fontWeight": "700", "letterSpacing": 0, @@ -46765,6 +46749,7 @@ exports[`Storyshots Input Addons 1`] = ` allowFontScaling={true} dataSet={Object {}} editable={true} + nativeID="undefined-input" onBlur={[Function]} onFocus={[Function]} onKeyPress={[Function]} @@ -46772,7 +46757,6 @@ exports[`Storyshots Input Addons 1`] = ` placeholderTextColor="#a3a3a3" rejectResponderTermination={true} secureTextEntry={false} - selectionColor="#1f2937" style={ Object { "backgroundColor": "transparent", @@ -47035,6 +47019,7 @@ exports[`Storyshots Input Elements 1`] = ` allowFontScaling={true} dataSet={Object {}} editable={true} + nativeID="undefined-input" onBlur={[Function]} onFocus={[Function]} onKeyPress={[Function]} @@ -47042,7 +47027,6 @@ exports[`Storyshots Input Elements 1`] = ` placeholderTextColor="#a3a3a3" rejectResponderTermination={true} secureTextEntry={false} - selectionColor="#1f2937" style={ Object { "backgroundColor": "transparent", @@ -47091,6 +47075,7 @@ exports[`Storyshots Input Elements 1`] = ` allowFontScaling={true} dataSet={Object {}} editable={true} + nativeID="undefined-input" onBlur={[Function]} onFocus={[Function]} onKeyPress={[Function]} @@ -47098,7 +47083,6 @@ exports[`Storyshots Input Elements 1`] = ` placeholderTextColor="#a3a3a3" rejectResponderTermination={true} secureTextEntry={true} - selectionColor="#1f2937" style={ Object { "backgroundColor": "transparent", @@ -47122,35 +47106,52 @@ exports[`Storyshots Input Elements 1`] = ` dataSet={Object {}} style={Object {}} /> - -  - + +  + + @@ -47300,16 +47301,16 @@ exports[`Storyshots Input Form Controlled 1`] = ` >