fix(docs): improve the doc's structure (#1773)

* fix: 🐛 reorganize the doc's structure

* docs: ✏️ update links

* docs: ✏️ fix title `Merge with Another Theme`

.czrc

@@ -1,3 +1,3 @@
 {
-   "path": "cz-conventional-changelog"
-}
+  "path": "git-cz"
+}

README.md

@@ -43,6 +43,8 @@ styled-breakpoints <br>
 
 Breakpoints serve as adjustable widths that determine the behavior of your responsive layout across different device or viewport sizes.
 
+<br>
+
 ## Preview
 
 For **own** components.
@@ -61,6 +63,8 @@ const Box = styled.div`
 `;
 ```
 
+<br>
+
 For **third party** components.
 
 ```tsx
@@ -85,6 +89,8 @@ From smallest to largest
   </a>
 </div>
 
+<br>
+
 ### Desktop First
 
 From largest to smallest
@@ -95,7 +101,9 @@ From largest to smallest
   </a>
 </div>
 
-### hooks API
+<br>
+
+### Hooks API
 
 <div>
   <a href="https://codesandbox.io/s/styled-components-hooks-api-6q6w8?fontsize=14&hidenavigation=1&module=%2Fsrc%2Fapp.tsx&theme=dark">
@@ -112,13 +120,15 @@ From largest to smallest
 - core concepts
 - available breakpoints
 - [quick start](#quick-start)
-- [media queries](#media-queries)
-  - [min-width](#min-width)
-  - [max-width](#max-width)
-  - [single breakpoint](#single-breakpoint)
-  - [between breakpoints](#between-breakpoints)
-  - [useMediaQuery hook](#usemediaquery-hook)
-- [customization](#customization)
+- [`Media Queries` API](#media-queries-api)
+
+  - [min-width - `up`](#min-width---up)
+  - [max-width - `down`](#max-width---down)
+  - [single breakpoint - `only`](#single-breakpoint---only)
+  - [breakpoints range - `between`](#breakpoints-range---between)
+  - [customization](#customization)
+
+- [`useMediaQuery` hook](#usemediaquery-hook)
 
 <br>
 
@@ -285,11 +295,15 @@ const App = () => (
 
 <br>
 
-## Media queries
+## Media queries API
 
 - 🚀 Caching is implemented in all functions to optimize performance.
 
-### Min-width
+<br>
+
+### Min-width `up`
+
+<br>
 
 <details><summary><strong>Type declaration</strong></summary>
 
@@ -312,6 +326,7 @@ const Box = styled.div`
 `;
 ```
 
+<br>
 <details><summary><strong>Convert to pure css: </strong></summary>
 
 ```css
@@ -324,10 +339,12 @@ const Box = styled.div`
 <hr/>
 <br>
 
-### Max-width
+### Max-width - `down`
 
 We occasionally use media queries that go in the other direction (the given screen size or smaller):
 
+<br>
+
 <details><summary><strong>Type declaration</strong></summary>
 
 ```ts
@@ -349,6 +366,7 @@ const Box = styled.div`
 `;
 ```
 
+<br>
 <details><summary><strong>Convert to: </strong></summary>
 
 ```css
@@ -359,15 +377,19 @@ const Box = styled.div`
 
 </details>
 
+<br>
+
 > <strong>Why subtract .02px?</strong> Browsers don’t currently support [range context queries](https://www.w3.org/TR/mediaqueries-4/#range-context), so we work around the limitations of [min- and max- prefixes](https://www.w3.org/TR/mediaqueries-4/#mq-min-max) and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision.
 
 <hr/>
 <br>
 
-### Single breakpoint
+### Single breakpoint - `only`
 
 There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths.
 
+<br>
+
 <details><summary><strong>Type declaration</strong></summary>
 
 ```ts
@@ -389,6 +411,7 @@ const Box = styled.div`
 `;
 ```
 
+<br>
 <details><summary><strong>Convert to: </strong></summary>
 
 ```css
@@ -401,10 +424,12 @@ const Box = styled.div`
 <hr/>
 <br>
 
-### Between breakpoints
+### Breakpoints range - `between`
 
 Similarly, media queries may span multiple breakpoint widths.
 
+<br>
+
 <details><summary><strong>Type declaration</strong></summary>
 
 ```ts
@@ -427,6 +452,7 @@ const Box = styled.div`
 `;
 ```
 
+<br>
 <details><summary><strong>Convert to: </strong></summary>
 
 ```css
@@ -437,13 +463,14 @@ const Box = styled.div`
 
 </details>
 <hr/>
-
 <br>
 
 ## Customization
 
 <h3>🛠️ Custom breakpoints</h3>
 
+<br>
+
 `theme/config.ts`
 
 ```tsx
@@ -462,7 +489,9 @@ export const theme = createStyledBreakpointsTheme({
 
 <br>
 
-<h3>🎨 Merge With another theme</h3>
+<h3>🎨 Merge with Another Theme</h3>
+
+<br>
 
 `theme/config.ts`
 
@@ -510,7 +539,8 @@ import { useMediaQuery } from 'styled-breakpoints/use-media-query';
 import { Box } from 'third-party-library';
 
 const SomeComponent = () => {
-  const isMd = useMediaQuery(useTheme().breakpoints.only('md'));
+  const { breakpoints } = useTheme();
+  const isMd = useMediaQuery(breakpoints.only('md'));
 
   return <AnotherComponent>{isMd && <Box />}</AnotherComponent>;
 };

package.json

@@ -74,7 +74,6 @@
     "commitizen": "^4.2.1",
     "coveralls": "^3.1.0",
     "cross-env": "^7.0.2",
-    "cz-conventional-changelog": "^3.3.0",
     "eslint": "^8.0.1",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-airbnb-base": "^15.0.0",
@@ -85,6 +84,7 @@
     "eslint-plugin-react": "^7.21.5",
     "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-vitest": "^0.3.10",
+    "git-cz": "^4.9.0",
     "husky": "^8.0.3",
     "jsdom": "^24.0.0",
     "lint-staged": "^15.1.0",

yarn.lock

@@ -2587,7 +2587,7 @@ csstype@^3.0.2:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
   integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
 
-[email protected], cz-conventional-changelog@^3.3.0:
+[email protected]:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/cz-conventional-changelog/-/cz-conventional-changelog-3.3.0.tgz#9246947c90404149b3fe2cf7ee91acad3b7d22d2"
   integrity sha512-U466fIzU5U22eES5lTNiNbZ+d8dfcHcssH4o7QsdWaCcRs/feIPCxKYSWkYBNs5mny7MvEfwpTLWjvbm94hecw==
@@ -3670,6 +3670,11 @@ getpass@^0.1.1:
   dependencies:
     assert-plus "^1.0.0"
 
+git-cz@^4.9.0:
+  version "4.9.0"
+  resolved "https://registry.yarnpkg.com/git-cz/-/git-cz-4.9.0.tgz#c0604ff85b37046d51fd85e265040032c9617bf2"
+  integrity sha512-cSRL8IIOXU7UFLdbziCYqg8f8InwLwqHezkiRHNSph7oZqGv0togId1kMTfKil6gzK0VaSXeVBb4oDl0fQCHiw==
+
 git-raw-commits@^2.0.11:
   version "2.0.11"
   resolved "https://registry.yarnpkg.com/git-raw-commits/-/git-raw-commits-2.0.11.tgz#bc3576638071d18655e1cc60d7f524920008d723"