: 'react-native-web',\n \u002F\u002F Tree shaking.\n \u002F\u002F https:\u002F\u002Fgithub.com\u002Fgcanti\u002Ffp-ts\u002Fissues\u002F1044#issue-536939300\n 'fp-ts\u002Flib': 'fp-ts\u002Fes6',\n };\n config.resolve.extensions.push('.web.js', '.web.ts', '.web.tsx');\n return config;\n },\n};\n","directory_shortid":null,"id":"b50a2bb6-c174-4941-ac0d-68bc1c4165ab","inserted_at":"2020-01-15T22:40:59","is_binary":false,"sha":null,"shortid":"By04ZBGTgU","source_id":"d31b660f-a07e-4f0f-a916-63d6b777c2cb","title":"next.config.js","updated_at":"2020-01-15T22:40:59","upload_id":null},{"code":"{\n \"name\": \"signup-form-react-native-web\",\n \"scripts\": {\n \"dev\": \"next\",\n \"build\": \"next build\",\n \"start\": \"next start\"\n },\n \"dependencies\": {\n \"fp-ts\": \"^2.4.0\",\n \"io-ts\": \"^2.0.4\",\n \"io-ts-types\": \"^0.5.5\",\n \"monocle-ts\": \"^2.0.1\",\n \"newtype-ts\": \"^0.3.3\",\n \"next\": \"^9.1.7\",\n \"react\": \"^16.12.0\",\n \"react-dom\": \"^16.12.0\",\n \"react-native-web\": \"^0.12.0-rc.1\",\n \"typescript-fun\": \"^0.2.0\"\n },\n \"devDependencies\": {\n \"@types\u002Fnode\": \"^13.1.6\",\n \"@types\u002Freact\": \"^16.9.17\",\n \"@types\u002Freact-native\": \"^0.60.30\",\n \"babel-plugin-react-native-web\": \"^0.12.0-rc.1\",\n \"typescript\": \"^3.7.4\"\n }\n}\n","directory_shortid":null,"id":"f10bb2dd-e20a-443b-a602-3bf2c81f77c0","inserted_at":"2020-01-15T22:40:59","is_binary":false,"sha":null,"shortid":"SkJgNWHGplI","source_id":"d31b660f-a07e-4f0f-a916-63d6b777c2cb","title":"package.json","updated_at":"2020-01-15T22:40:59","upload_id":null},{"code":"import React from 'react';\nimport App from 'next\u002Fapp';\nimport { ThemeProvider } from '..\u002Fhooks\u002FuseTheme';\nimport { theme } from '..\u002Fthemes\u002Ftheme';\n\nclass MyApp extends App {\n render() {\n const { Component, pageProps } = this.props;\n return (\n \u003CThemeProvider value={theme}\u003E\n \u003CComponent {...pageProps} \u002F\u003E\n \u003C\u002FThemeProvider\u003E\n );\n }\n}\n\nexport default MyApp;\n","directory_shortid":"HyWVZBzpl8","id":"586b7d65-453e-4cca-805f-b089f51e42af","inserted_at":"2020-01-15T22:40:59","is_binary":false,"sha":null,"shortid":"r1lxVWrMalU","source_id":"d31b660f-a07e-4f0f-a916-63d6b777c2cb","title":"_app.tsx","updated_at":"2020-01-15T22:40:59","upload_id":null},{"code":"import Document, {\n Head,\n Main,\n NextScript,\n DocumentContext,\n} from 'next\u002Fdocument';\nimport React from 'react';\nimport { AppRegistry } from 'react-native';\nimport config from '..\u002Fapp.json';\n\n\u002F\u002F Force Next-generated DOM elements to fill their parent's height\nconst normalizeNextElements = `\n #__next {\n display: flex;\n flex-direction: column;\n height: 100%;\n }\n`;\n\nexport default class MyDocument extends Document {\n static async getInitialProps({ renderPage }: DocumentContext) {\n AppRegistry.registerComponent(config.name, () =\u003E Main);\n \u002F\u002F @ts-ignore React Native Web custom API.\n const { getStyleElement } = AppRegistry.getApplication(config.name);\n const page = renderPage();\n const styles = [\n \u002F\u002F eslint-disable-next-line react\u002Fjsx-key\n \u003Cstyle dangerouslySetInnerHTML={{ __html: normalizeNextElements }} \u002F\u003E,\n getStyleElement(),\n ];\n return { ...page, styles: React.Children.toArray(styles) };\n }\n\n render() {\n return (\n \u003Chtml style={{ height: '100%' }}\u003E\n \u003CHead\u003E\n \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \u002F\u003E\n \u003C\u002FHead\u003E\n \u003Cbody style={{ height: '100%', overflow: 'hidden' }}\u003E\n \u003CMain \u002F\u003E\n \u003CNextScript \u002F\u003E\n \u003C\u002Fbody\u003E\n \u003C\u002Fhtml\u003E\n );\n }\n}\n","directory_shortid":"HyWVZBzpl8","id":"d9d11fcc-c8a7-4da7-8364-8e06aa3c6471","inserted_at":"2020-01-15T22:40:59","is_binary":false,"sha":null,"shortid":"HJ-x4brzTgI","source_id":"d31b660f-a07e-4f0f-a916-63d6b777c2cb","title":"_document.tsx","updated_at":"2020-01-15T22:40:59","upload_id":null},{"code":"import * as E from 'fp-ts\u002Flib\u002FEither';\nimport { constVoid } from 'fp-ts\u002Flib\u002Ffunction';\nimport * as O from 'fp-ts\u002Flib\u002FOption';\nimport { pipe } from 'fp-ts\u002Flib\u002Fpipeable';\nimport * as t from 'io-ts';\nimport { option } from 'io-ts-types\u002Flib\u002Foption';\nimport { NextPage } from 'next';\nimport React from 'react';\nimport { View, ScrollView } from 'react-native';\nimport {\n Email,\n UniqueEmail,\n Password,\n Phone,\n String64,\n useForm,\n} from 'typescript-fun';\nimport { Button } from '..\u002Fcomponents\u002FButton';\nimport { CheckBoxField } from '..\u002Fcomponents\u002FCheckBoxField';\nimport { TextInputField } from '..\u002Fcomponents\u002FTextInputField';\nimport { useTheme } from '..\u002Fhooks\u002FuseTheme';\n\nconst SignUpForm = t.type({\n company: String64,\n \u002F\u002F Because of UniqueEmail, we can set async error 'UniqueEmail'.\n email: t.union([Email, UniqueEmail]),\n password: Password,\n phone: option(Phone),\n sendNewsletter: t.boolean,\n});\n\nconst Index: NextPage = () =\u003E {\n const theme = useTheme();\n const form = useForm(\n SignUpForm,\n {\n company: '',\n email: '',\n password: '',\n \u002F\u002F O.none, because it's explicit. Null, undefined, empty string are not.\n phone: O.none,\n sendNewsletter: false,\n },\n {\n handleSubmit(form) {\n pipe(\n form.validated,\n E.fold(constVoid, data =\u003E {\n form.disable();\n \u002F\u002F Simulate async sign up.\n setTimeout(() =\u003E {\n form.enable();\n if (data.email === 'a@a.com') {\n form.setAsyncErrors({ email: ['UniqueEmail'] });\n } else {\n alert(JSON.stringify(data, null, 2));\n form.reset();\n }\n }, 1000);\n }),\n );\n },\n },\n );\n\n return (\n \u003CScrollView\n style={theme.scrollView}\n contentContainerStyle={theme.container}\n \u003E\n \u003CView style={theme.form}\u003E\n \u003CTextInputField label=\"Company\" field={form.fields.company} \u002F\u003E\n \u003CTextInputField label=\"Email\" field={form.fields.email} \u002F\u003E\n \u003CTextInputField\n label=\"Password\"\n field={form.fields.password}\n secureTextEntry\n \u002F\u003E\n \u003CTextInputField label=\"Phone\" field={form.fields.phone} \u002F\u003E\n \u003CCheckBoxField\n field={form.fields.sendNewsletter}\n label=\"Yes, send me a newsletter\"\n \u002F\u003E\n \u003CButton\n label=\"Sign Up\"\n onPress={form.submit}\n disabled={form.isDisabled}\n \u002F\u003E\n \u003C\u002FView\u003E\n \u003C\u002FScrollView\u003E\n );\n};\n\nexport default Index;\n","directory_shortid":"HyWVZBzpl8","id":"c3b40118-d260-4e33-a527-ec9d43f04f50","inserted_at":"2020-01-15T22:40:59","is_binary":false,"sha":null,"shortid":"SJGeEbBGalL","source_id":"d31b660f-a07e-4f0f-a916-63d6b777c2cb","title":"index.tsx","updated_at":"2020-01-15T22:40:59","upload_id":null},{"code":"import { StyleSheet, Platform } from 'react-native';\n\nconst design = {\n fontFamily: {\n base:\n '-apple-system,BlinkMacSystemFont,\"Segoe UI\",Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\"',\n },\n color: {\n blue: '#3182ce',\n green: '#38a169',\n lightGray: 'rgb(226, 232, 240)',\n red: '#e53e3e',\n text: '#1a202c',\n white: '#fff',\n },\n spacing: {\n small: 8,\n base: 16,\n big: 32,\n },\n} as const;\n\nexport const theme = StyleSheet.create({\n scrollView: {\n flex: 1,\n MozOsxFontSmoothing: 'grayscale',\n WebkitFontSmoothing: 'antialiased',\n },\n container: {\n marginHorizontal: 'auto',\n maxWidth: 740,\n padding: design.spacing.base,\n width: '100%',\n },\n row: {\n flexDirection: 'row',\n },\n form: {\n borderColor: design.color.lightGray,\n borderRadius: design.spacing.small,\n borderWidth: 1,\n padding: design.spacing.base,\n width: design.spacing.small * 42,\n },\n textInput: {\n borderColor: design.color.lightGray,\n borderRadius: design.spacing.small,\n borderWidth: 1,\n color: design.color.text,\n fontFamily: design.fontFamily.base,\n fontSize: 16,\n lineHeight: 24,\n marginBottom: design.spacing.base,\n outlineWidth: 0,\n paddingHorizontal: design.spacing.base,\n paddingVertical: design.spacing.small,\n },\n textInputInvalid: {\n marginBottom: design.spacing.small,\n },\n textInputFocus: {\n borderColor: design.color.blue,\n boxShadow: `0 0 0 1px ${design.color.blue}`,\n },\n textInputLabel: {\n color: design.color.text,\n fontFamily: design.fontFamily.base,\n fontSize: 16,\n fontWeight: '500',\n lineHeight: 24,\n marginBottom: design.spacing.small,\n },\n textInputIsRequiredAsterisk: {\n color: design.color.red,\n fontFamily: design.fontFamily.base,\n fontSize: 16,\n fontWeight: '500',\n lineHeight: 24,\n },\n formErrorMessage: {\n color: design.color.red,\n fontFamily: design.fontFamily.base,\n fontSize: 14,\n lineHeight: 24,\n marginBottom: design.spacing.small,\n position: 'relative',\n top: -design.spacing.small,\n },\n checkBox: {\n alignSelf: 'center',\n color: design.color.blue,\n },\n checkBoxFocus: {\n borderRadius: 2,\n boxShadow: `0 0 0 2px ${design.color.blue}`,\n },\n checkBoxLabel: {\n color: design.color.text,\n fontFamily: design.fontFamily.base,\n fontSize: 16,\n lineHeight: 24,\n marginLeft: design.spacing.small,\n },\n button: {\n alignItems: 'center',\n backgroundColor: design.color.green,\n borderRadius: 4,\n marginTop: design.spacing.base,\n outlineWidth: 0,\n paddingVertical: design.spacing.small,\n },\n buttonFocus: {\n ...Platform.select({\n web: { boxShadow: `0 0 0 2px ${design.color.blue}` },\n }),\n },\n buttonDisabled: {\n backgroundColor: design.color.lightGray,\n },\n buttonText: {\n color: design.color.white,\n fontFamily: design.fontFamily.base,\n fontSize: 16,\n fontWeight: '500',\n lineHeight: 24,\n },\n});\n","directory_shortid":"SkzV-rzpg8","id":"b2640913-a6c5-4c30-b212-2ec0e1bca121","inserted_at":"2020-01-15T22:40:59","is_binary":false,"sha":null,"shortid":"H1meN-HMplL","source_id":"d31b660f-a07e-4f0f-a916-63d6b777c2cb","title":"theme.ts","updated_at":"2020-01-15T22:40:59","upload_id":null}],"description":null,"alias":"signup-form-react-native-web-x7y2t","npm_dependencies":{},"is_frozen":false,"custom_template":{"color":"#61DAFB","icon_url":"github","id":"5e805d80-feea-4ee6-830e-63065219e03a","official":false,"published":true,"title":"signup-form-react-native-web","url":null},"screenshot_url":"https:\u002F\u002Fcodesandbox.io\u002Fstatic\u002Fimg\u002Fbanner.png","original_git_commit_sha":null,"forked_template_sandbox":null,"updated_at":"2020-01-29T17:25:07","picks":[],"team":null,"source_id":"d31b660f-a07e-4f0f-a916-63d6b777c2cb","collection":false,"pr_number":null,"preview_secret":null,"feature_flags":{"comments":false,"container_lsp":false},"external_resources":[],"tags":[],"is_sse":true,"version":11,"base_git":null};