Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(docs): add correct types for the theme #1554

Merged
merged 3 commits into from
Jul 18, 2023
Merged

fix(docs): add correct types for the theme #1554

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6fb2546
fix(docs): add correct types for `theme`
mg901 Jul 18, 2023
83bc266
chore(docs): add emoji
mg901 Jul 18, 2023
7bfa45d
build: update peer dependencies
mg901 Jul 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 35 additions & 33 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Expand All @@ -192,8 +192,7 @@ const Box = styled.div`
display: block;
}
`

const theme = createStyledBreakpointsTheme() as StyledBreakpointsTheme;
const theme: DefaultTheme = createStyledBreakpointsTheme();

const App = () => (
<ThemeProvider theme={theme}>
Expand Down Expand Up @@ -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;
Expand All @@ -248,7 +243,7 @@ const Box = styled.div`
}
`;

const theme = createStyledBreakpointsTheme() as StyledBreakpointsTheme;
const theme: Theme = createStyledBreakpointsTheme();

const App = () => (
<ThemeProvider theme={theme}>
Expand Down Expand Up @@ -513,12 +508,12 @@ const SomeComponent = () => {

## Customization

<details><summary><h3> Strict Typed Breakpoints</h3></summary>
<details><summary><h3> ⚙️ Strict Typed Breakpoints</h3></summary>

`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 = {
Expand All @@ -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<keyof typeof breakpoints, 'small'>;

export interface StyledBreakpointsTheme {
breakpoints: MediaQueries<Min, Max>;
}

const theme = createStyledBreakpointsTheme({
const theme: DefaultTheme = createStyledBreakpointsTheme({
breakpoints,
}) as StyledBreakpointsTheme;
});

const App = () => (
<ThemeProvider theme={theme}>
Expand All @@ -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<keyof typeof breakpoints, 'small'>;

declare module 'styled-components' {
export interface DefaultTheme extends StyledBreakpointsTheme {}
export interface DefaultTheme {
breakpoints: MediaQueries<Min, Max>;
}
}
```

Expand All @@ -570,23 +564,31 @@ 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<keyof typeof breakpoints, 'small'>;

declare module '@emotion/react' {
export interface Theme extends StyledBreakpointsTheme {}
export interface Theme extends {
breakpoints: MediaQueries<Min, Max>;
}
}
```

</details>
</details>

<details><summary><h3>Merge with another theme</h3></summary>
<details><summary><h3>🎨 Merge with another theme</h3></summary>

`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'],
Expand All @@ -597,9 +599,9 @@ export const primaryTheme = {
},
} as const;

const const theme = {
const const theme: DefaultTheme = {
...primaryTheme,
...createStyledBreakpointsTheme() as StyledBreakpointsTheme,
...createStyledBreakpointsTheme(),
}

const App = () => (
Expand Down
9 changes: 3 additions & 6 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
5 changes: 0 additions & 5 deletions styled-breakpoints/create-styled-breakpoints-theme/create-styled-breakpoints-theme.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,6 @@ type Min = BreakpointKeys;

type Max = Exclude<BreakpointKeys, 'xs'>;

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<string, `${number}px`>;
errorPrefix?: string;
Expand Down
6 changes: 3 additions & 3 deletions styled-breakpoints/create-styled-breakpoints-theme/create-styled-breakpoints-theme.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
2 changes: 2 additions & 0 deletions use-media-query/use-media-query/use-media-query.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down Expand Up @@ -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({
Expand Down