From 6fb2546c2e45d2125de8b8588b0fdfa8a34c5fda Mon Sep 17 00:00:00 2001 From: Maxim Alyoshin Date: Tue, 18 Jul 2023 16:00:51 +0400 Subject: [PATCH 1/3] fix(docs): add correct types for `theme` --- README.md | 64 ++++++++++--------- .../create-styled-breakpoints-theme.d.ts | 5 -- .../create-styled-breakpoints-theme.js | 6 +- .../use-media-query/use-media-query.spec.js | 2 + 4 files changed, 38 insertions(+), 39 deletions(-) diff --git a/README.md b/README.md index 0c0fcdb9..8ae5f1dc 100644 --- a/README.md +++ b/README.md @@ -182,7 +182,7 @@ declare module 'styled-components' { `app.tsx` ```tsx -import styled { ThemeProvider } from 'styled-components'; +import styled { DefaultTheme, ThemeProvider } from 'styled-components'; import { createStyledBreakpointsTheme, StyledBreakpointsTheme } from 'styled-breakpoints'; const Box = styled.div` @@ -192,8 +192,7 @@ const Box = styled.div` display: block; } ` - -const theme = createStyledBreakpointsTheme() as StyledBreakpointsTheme; +const theme: DefaultTheme = createStyledBreakpointsTheme(); const App = () => ( @@ -232,13 +231,9 @@ declare module '@emotion/react' { `app.tsx` ```tsx -import styled from '@emotion/styled'; -import { ThemeProvider } from '@emotion/react'; - -import { - createStyledBreakpointsTheme, - StyledBreakpointsTheme, -} from 'styled-breakpoints'; +import styled, from '@emotion/styled'; +import { Theme, ThemeProvider } from '@emotion/react'; +import { createStyledBreakpointsTheme } from 'styled-breakpoints'; const Box = styled.div` display: none; @@ -248,7 +243,7 @@ const Box = styled.div` } `; -const theme = createStyledBreakpointsTheme() as StyledBreakpointsTheme; +const theme: Theme = createStyledBreakpointsTheme(); const App = () => ( @@ -518,7 +513,7 @@ const SomeComponent = () => { `app.tsx` ```tsx -import styled from 'styled-components'; // or from '@emotion/react' +import styled, { DefaultTheme } from 'styled-components'; // or from '@emotion/react' import { createStyledBreakpointsTheme, MediaQueries } from 'styled-breakpoints'; const breakpoints = { @@ -529,18 +524,9 @@ const breakpoints = { xxLarge: '1440px', } as const; -type Min = keyof typeof breakpoints; - -// For max values remove the first key. -type Max = Exclude; - -export interface StyledBreakpointsTheme { - breakpoints: MediaQueries; -} - -const theme = createStyledBreakpointsTheme({ +const theme: DefaultTheme = createStyledBreakpointsTheme({ breakpoints, -}) as StyledBreakpointsTheme; +}); const App = () => ( @@ -555,10 +541,18 @@ const App = () => ( ```ts import 'styled-components'; -import { StyledBreakpointsTheme } from './app'; +import { MediaQueries } from 'styled-breakpoints'; +import { breakpoints } from './app'; + +type Min = keyof typeof breakpoints; + +// For max values remove the first key. +type Max = Exclude; declare module 'styled-components' { - export interface DefaultTheme extends StyledBreakpointsTheme {} + export interface DefaultTheme { + breakpoints: MediaQueries; + } } ``` @@ -570,10 +564,18 @@ declare module 'styled-components' { ```ts import '@emotion/react'; -import { StyledBreakpointsTheme } from './app'; +import { MediaQueries } from 'styled-breakpoints'; +import { breakpoints } from './app'; + +type Min = keyof typeof breakpoints; + +// For max values remove the first key. +type Max = Exclude; declare module '@emotion/react' { - export interface Theme extends StyledBreakpointsTheme {} + export interface Theme extends { + breakpoints: MediaQueries; + } } ``` @@ -585,8 +587,8 @@ declare module '@emotion/react' { `app.tsx` ```tsx -import { ThemeProvider } from 'styled-components'; // or from '@emotion/react'; -import { createStyledBreakpointsTheme, StyledBreakpointsTheme } from 'styled-breakpoints'; +import { DefaultTheme, ThemeProvider } from 'styled-components'; // or from '@emotion/react'; +import { createStyledBreakpointsTheme } from 'styled-breakpoints'; export const primaryTheme = { fonts: ['sans-serif', 'Roboto'], @@ -597,9 +599,9 @@ export const primaryTheme = { }, } as const; -const const theme = { +const const theme: DefaultTheme = { ...primaryTheme, - ...createStyledBreakpointsTheme() as StyledBreakpointsTheme, + ...createStyledBreakpointsTheme(), } const App = () => ( diff --git a/styled-breakpoints/create-styled-breakpoints-theme/create-styled-breakpoints-theme.d.ts b/styled-breakpoints/create-styled-breakpoints-theme/create-styled-breakpoints-theme.d.ts index 895a8f0b..20caa807 100644 --- a/styled-breakpoints/create-styled-breakpoints-theme/create-styled-breakpoints-theme.d.ts +++ b/styled-breakpoints/create-styled-breakpoints-theme/create-styled-breakpoints-theme.d.ts @@ -5,11 +5,6 @@ type Min = BreakpointKeys; type Max = Exclude; -type Up = (min: Min, orientation?: Orientation) => string; -type Down = (max: Max, orientation?: Orientation) => string; -type Between = (min: Min, max: Max, orientation?: Orientation) => string; -type Only = (key: BreakpointKeys, orientation?: Orientation) => string; - interface Options { breakpoints?: Record; errorPrefix?: string; diff --git a/styled-breakpoints/create-styled-breakpoints-theme/create-styled-breakpoints-theme.js b/styled-breakpoints/create-styled-breakpoints-theme/create-styled-breakpoints-theme.js index 065d7551..cd902966 100644 --- a/styled-breakpoints/create-styled-breakpoints-theme/create-styled-breakpoints-theme.js +++ b/styled-breakpoints/create-styled-breakpoints-theme/create-styled-breakpoints-theme.js @@ -62,14 +62,14 @@ exports.createStyledBreakpointsTheme = ({ ); } - function withOrientationOrNot(orientation, result) { + function withOrientationOrNot(orientation, mediaQuery) { return orientation ? withOrientation({ - mediaQuery: result, + mediaQuery, orientation, invariant: api.invariant && api.invariant, }) - : result; + : mediaQuery; } function withMinWidth(value) { diff --git a/use-media-query/use-media-query/use-media-query.spec.js b/use-media-query/use-media-query/use-media-query.spec.js index 0435227b..ec8c6137 100644 --- a/use-media-query/use-media-query/use-media-query.spec.js +++ b/use-media-query/use-media-query/use-media-query.spec.js @@ -47,6 +47,7 @@ describe('useMediaQuery hook', () => { viewport.cleanup(); }); }); + describe('down', () => { it('should return true if the screen width is less than the specified breakpoint', () => { const viewport = mockViewport({ @@ -82,6 +83,7 @@ describe('useMediaQuery hook', () => { viewport.cleanup(); }); }); + describe('between', () => { it('should return true if the screen width is between the specified breakpoints', () => { const viewport = mockViewport({ From 83bc266f2268766ad0d313eae4488b2bee28ea74 Mon Sep 17 00:00:00 2001 From: Maxim Alyoshin Date: Tue, 18 Jul 2023 17:11:21 +0400 Subject: [PATCH 2/3] chore(docs): add emoji --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 8ae5f1dc..373d96b5 100644 --- a/README.md +++ b/README.md @@ -508,7 +508,7 @@ const SomeComponent = () => { ## Customization -

Strict Typed Breakpoints

 +

⚙️ Strict Typed Breakpoints

 `app.tsx` @@ -582,7 +582,7 @@ declare module '@emotion/react' {
-

Merge with another theme

 +

🎨 Merge with another theme

 `app.tsx` From 7bfa45dc1100d7fc45166db84d59865a8d468a74 Mon Sep 17 00:00:00 2001 From: Maxim Alyoshin Date: Tue, 18 Jul 2023 17:32:34 +0400 Subject: [PATCH 3/3] build: update peer dependencies --- package.json | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index f23cb19a..6e76fa92 100644 --- a/package.json +++ b/package.json @@ -50,12 +50,9 @@ "access": "public" }, "peerDependencies": { - "react": "^18.x.x" - }, - "peerDependenciesMeta": { - "react": { - "optional": true - } + "react": ">= 16.8.0", + "react-dom": ">= 16.8.0", + "styled-components": ">= 5.0.0" }, "devDependencies": { "@commitlint/cli": "^17.0.0",