This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import * as React from 'react'; | |
import { SafeAreaView, StyleSheet, View, Text } from 'react-native'; | |
import { UiHeading } from '@acme/ui-heading'; | |
const App = () => { | |
return ( | |
<> | |
<SafeAreaView> | |
<View style={styles.box}> | |
<UiHeading text="Hello World!" /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import * as React from 'react'; | |
import { StyleSheet, View, Text } from 'react-native'; | |
export interface UiHeadingProps { | |
text: string; | |
} | |
export const UiHeading = (props: UiHeadingProps) => { | |
return ( | |
<View style={styles.container}> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const fetchUsers = createAsyncThunk( | |
"users/fetch", | |
(function () { | |
// use `p` to ensure promises are returned in order. | |
let p = Promise.resolve(); | |
return () => { | |
// Wait for previous promise to resolve first to guarantee ordering. | |
return p.then(() => { | |
// Change binding to new API call. | |
p = usersAPI.fetchAll(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
describe('demo', () => { | |
beforeEach(() => { | |
cy.viewport(1024, 768); | |
cy.visit('/'); | |
}); | |
it('should display viewport dimensions', () => { | |
cy.get('.app').contains('1024px / 768px'); | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
margin: 0; | |
} | |
.app { | |
font-family: sans-serif; | |
font-size: 10vh; | |
height: 100vh; | |
display: flex; | |
align-items: center; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
import { useViewportSize } from '@use-viewport-size/use-viewport-size'; | |
import './app.css'; | |
export const App = () => { | |
const size = useViewportSize(); | |
return ( | |
<div className="app"> | |
{size.width}px / {size.height}px | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
import ReactDOM from 'react-dom'; | |
import { act } from '@testing-library/react'; | |
import { useViewportSize } from './use-viewport-size'; | |
describe(' UseViewportSize', () => { | |
it('should render successfully', () => { | |
// Setup | |
let container = document.createElement('div'); | |
document.body.appendChild(container); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { useState, useEffect } from 'react'; | |
export function useViewportSize() { | |
const getSize = () => { | |
return { width: window.innerWidth, height: window.innerHeight }; | |
}; | |
const [size, setSize] = useState(getSize); | |
useEffect(() => { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const getConfig = require('@nrwl/react/plugins/babel'); | |
const cssModuleRegex = /\.module\.css$/; | |
module.exports = (config) => { | |
config = getConfig(config); | |
config.module.rules.forEach((rule, idx) => { | |
// Find rule tests for CSS. | |
// Then make sure it excludes .module.css files. | |
if (rule.test.test('foo.css')) { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
// ... | |
"build": { | |
"builder": "@nrwl/web:build", | |
"options": { | |
"differentialLoading": false, | |
"outputPath": "dist/apps/demo", | |
"index": "apps/demo/src/index.html", | |
"main": "apps/demo/src/main.tsx", | |
"polyfills": "apps/demo/src/polyfills.ts", |