Skip to content

Commit

Permalink
fix: 🐛 quick fix for breaking changes of @types/react 18
Browse files Browse the repository at this point in the history
  • Loading branch information
Can-Sahin committed Apr 12, 2022
1 parent f824ea8 commit 69a5bb7
Show file tree
Hide file tree
Showing 9 changed files with 1,896 additions and 1,776 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { css } from 'styled-components/macro';

describe('media', () => {
it('should return media query in css', () => {
const mediaQuery = media.small`color: red;`.join('');
const mediaQuery = media.small`color:red;`.join('');
const cssVersion = css`
@media (min-width: ${sizes.small}px) {
color: red;
Expand Down
8 changes: 4 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -96,8 +96,8 @@
"react": "17.0.2",
"react-app-polyfill": "3.0.0",
"react-dom": "17.0.2",
"react-helmet-async": "1.2.2",
"react-i18next": "11.15.3",
"react-helmet-async": "1.3.0",
"react-i18next": "11.16.5",
"react-is": "17.0.2",
"react-redux": "7.2.6",
"react-router-dom": "5.2.0",
Expand All @@ -115,8 +115,8 @@
"@types/fontfaceobserver": "2.1.0",
"@types/jest": "27.4.0",
"@types/node": "14.14.31",
"@types/react": "17.0.38",
"@types/react-dom": "17.0.11",
"@types/react": "18.0.2",
"@types/react-dom": "18.0.0",
"@types/react-redux": "7.1.22",
"@types/react-router-dom": "5.3.2",
"@types/react-test-renderer": "17.0.1",
Expand Down
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<NavBar /> should match snapshot 1`] = `
<styled.header>
<styled.div>
<NavBar__Wrapper>
<PageWrapper>
<Logo />
<Nav />
</styled.div>
</styled.header>
</PageWrapper>
</NavBar__Wrapper>
`;
168 changes: 84 additions & 84 deletions src/app/pages/HomePage/__tests__/__snapshots__/Features.test.tsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -196,12 +196,12 @@ exports[`<Features /> should render with de translations 1`] = `

exports[`<Features /> should render with en translations 1`] = `
<React.Fragment>
<styled.h1
<Title
as="h2"
>
Features
</styled.h1>
<styled.p>
</Title>
<Lead>
Crafted for
<strong>
highly scalable
Expand All @@ -226,164 +226,164 @@ exports[`<Features /> should render with en translations 1`] = `
best practices
</strong>
.
</styled.p>
<styled.ul>
<styled.li>
</Lead>
<Features__List>
<Features__Feature>
<ForwardRef(SvgState)
className="feature-icon"
/>
<styled.div>
<styled.h3>
<Features__Content>
<SubTitle>
Predictable State
</styled.h3>
<styled.p>
</SubTitle>
<P>
Build easy to test and debug, flexible and extensible applications using
<styled.a
<A
href="https://redux.js.org/basics/usage-with-react"
rel="noopener noreferrer"
target="_blank"
>
Redux
</styled.a>
</A>
. Unidirectional data flow allows for change logging and time travel debugging.
<styled.a
<A
href="https://github.com/zalmoxisus/redux-devtools-extension"
rel="noopener noreferrer"
target="_blank"
>
Install Chrome Redux Dev Tools
</styled.a>
</A>
to see how your application's state changes and travel in time to debug. Type any github username below and see it in action with Redux Dev Tools.
</styled.p>
</P>
<GithubRepoForm />
</styled.div>
</styled.li>
<styled.li>
</Features__Content>
</Features__Feature>
<Features__Feature>
<ForwardRef(SvgCss)
className="feature-icon"
/>
<styled.div>
<styled.h3>
<Features__Content>
<SubTitle>
Next Generation CSS
</styled.h3>
<styled.p>
</SubTitle>
<P>
Write composable CSS that’s co-located with your components for complete modularity. Ship only the styles that are on the page for the best performance. Generate application-wide styles and themes for your components. Change the theme below to see how easy and intuitive theming can ever be!
</styled.p>
</P>
<ThemeSwitch />
</styled.div>
</styled.li>
<styled.li>
</Features__Content>
</Features__Feature>
<Features__Feature>
<ForwardRef(SvgIntl)
className="feature-icon"
/>
<styled.div>
<styled.h3>
<Features__Content>
<SubTitle>
i18n Internationalization & Pluralization
</styled.h3>
<styled.p>
</SubTitle>
<P>
Scalable apps need to support multiple languages, easily add and support multiple languages. Change the language below to see how instantly it updates the page without refreshing.
<br />
<small>
(Only some of the features below are translated to demonstrate an example)
</small>
</styled.p>
</P>
<LanguageSwitch />
</styled.div>
</styled.li>
<styled.li>
</Features__Content>
</Features__Feature>
<Features__Feature>
<ForwardRef(SvgRoute)
className="feature-icon"
/>
<styled.div>
<styled.h3>
<Features__Content>
<SubTitle>
Industry-standard Routing
</styled.h3>
<styled.p>
</SubTitle>
<P>
It's natural to want to add pages (e.g. \`/about\`) to your application, and routing makes this possible.
<br />
<small>
Go to our
<Styled(Link)
<Link
to="/notfound"
>
/NotFound
</Styled(Link)>
</Link>
page to see how routing works
</small>
</styled.p>
</styled.div>
</styled.li>
<styled.li>
</P>
</Features__Content>
</Features__Feature>
<Features__Feature>
<ForwardRef(SvgInstantFeedback)
className="feature-icon"
/>
<styled.div>
<styled.h3>
<Features__Content>
<SubTitle>
Instant Feedback
</styled.h3>
<styled.p>
</SubTitle>
<P>
Enjoy the best DX and code your app at the speed of thought! Your saved changes to the CSS and JS are reflected instantaneously without refreshing the page.
</styled.p>
</styled.div>
</styled.li>
<styled.li>
</P>
</Features__Content>
</Features__Feature>
<Features__Feature>
<ForwardRef(SvgScaffolding)
className="feature-icon"
/>
<styled.div>
<styled.h3>
<Features__Content>
<SubTitle>
Quick Scaffolding
</styled.h3>
<styled.p>
</SubTitle>
<P>
Automate the creation of components, features, routes, selectors and sagas - and their tests - right from the CLI! Avoid fighting the glue of your code and focus on your app!
</styled.p>
</styled.div>
</styled.li>
<styled.li>
</P>
</Features__Content>
</Features__Feature>
<Features__Feature>
<ForwardRef(SvgSeo)
className="feature-icon"
/>
<styled.div>
<styled.h3>
<Features__Content>
<SubTitle>
SEO
</styled.h3>
<styled.p>
</SubTitle>
<P>
Supports SEO (document head tags management) for search engines that support indexing of JavaScript content.
</styled.p>
</styled.div>
</styled.li>
<styled.li>
</P>
</Features__Content>
</Features__Feature>
<Features__Feature>
<ForwardRef(SvgTs)
className="feature-icon"
/>
<styled.div>
<styled.h3>
<Features__Content>
<SubTitle>
TypeScript
</styled.h3>
<styled.p>
</SubTitle>
<P>
Typescript is the key to scalability. Build self-documented code, easy-to-debug code and create maintainable large applications and codebases with a highly productive development experience.
</styled.p>
</styled.div>
</styled.li>
<styled.li>
</P>
</Features__Content>
</Features__Feature>
<Features__Feature>
<ForwardRef(SvgCodeAnalysis)
className="feature-icon"
/>
<styled.div>
<styled.h3>
<Features__Content>
<SubTitle>
Static Code Analysis
</styled.h3>
<styled.p>
</SubTitle>
<P>
Focus on writing new features without worrying about formatting or code quality. With the right editor setup, your code will automatically be formatted and linted as you work.
</styled.p>
</styled.div>
</styled.li>
</styled.ul>
</P>
</Features__Content>
</Features__Feature>
</Features__List>
</React.Fragment>
`;
Original file line number Diff line number Diff line change
@@ -1,33 +1,33 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<Masthead /> should render and match the snapshot 1`] = `
<styled.main>
<Masthead__Wrapper>
<Logos />
<styled.h1>
<Title>
React Boilerplate meets CRA
</styled.h1>
<styled.p>
</Title>
<Lead>
Now you can use the
<styled.a
<A
href="https://www.reactboilerplate.com/"
rel="noopener noreferrer"
target="_blank"
>
React Boilerplate
</styled.a>
</A>
as a
<styled.a
<A
href="https://github.com/facebook/create-react-app"
rel="noopener noreferrer"
target="_blank"
>
Create React App
</styled.a>
</A>
template.
</styled.p>
</styled.main>
</Lead>
</Masthead__Wrapper>
`;
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,9 @@ exports[`<HomePage /> should render and match the snapshot 1`] = `
/>
</Helmet>
<NavBar />
<styled.div>
<PageWrapper>
<Masthead />
<Features />
</styled.div>
</PageWrapper>
</React.Fragment>
`;
2 changes: 1 addition & 1 deletion src/styles/__tests__/media.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { css } from 'styled-components/macro';

describe('media', () => {
it('should return media query in css', () => {
const mediaQuery = media.small`color: red;`.join('');
const mediaQuery = media.small`color:red;`.join('');
const cssVersion = css`
@media (min-width: ${sizes.small}px) {
color: red;
Expand Down
8 changes: 4 additions & 4 deletions template.json
Original file line number Diff line number Diff line change
Expand Up @@ -46,8 +46,8 @@
"react": "17.0.2",
"react-app-polyfill": "3.0.0",
"react-dom": "17.0.2",
"react-helmet-async": "1.2.2",
"react-i18next": "11.15.3",
"react-helmet-async": "1.3.0",
"react-i18next": "11.16.5",
"react-is": "17.0.2",
"react-redux": "7.2.6",
"react-router-dom": "5.2.0",
Expand All @@ -62,8 +62,8 @@
"@types/fontfaceobserver": "2.1.0",
"@types/jest": "27.4.0",
"@types/node": "14.14.31",
"@types/react": "17.0.38",
"@types/react-dom": "17.0.11",
"@types/react": "18.0.2",
"@types/react-dom": "18.0.0",
"@types/react-redux": "7.1.22",
"@types/react-router-dom": "5.3.2",
"@types/react-test-renderer": "17.0.1",
Expand Down
Loading

0 comments on commit 69a5bb7

Please sign in to comment.