Skip to content

Commit 254bf73

Browse files
jaredLundejaredLunde
committed
feat: require a styles instance as the first argument for hookks
Requires that the user provide a style instance as the first argument for hooks BREAKING CHANGE: Requires that the user provide a style instance as the first argument for hooks. Also removes `DashProvider` and `useDash` utilities.
1 parent 7f9c436 commit 254bf73

File tree

4 files changed

+83
-184
lines changed

4 files changed

+83
-184
lines changed

‎README.md‎

Lines changed: 43 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434

3535
```jsx harmony
3636
import { createStyles } from "@dash-ui/styles";
37-
import { DashProvider, useGlobal } from "@dash-ui/react";
37+
import { useGlobal } from "@dash-ui/react";
3838

3939
const styles = createStyles({
4040
tokens: {
@@ -44,14 +44,9 @@ const styles = createStyles({
4444
},
4545
});
4646

47-
export const App = () => (
48-
<DashProvider styles={styles}>
49-
<Heading />
50-
</DashProvider>
51-
);
52-
5347
const Heading = () => {
5448
useGlobal(
49+
styles,
5550
({ color }) => `
5651
h1 {
5752
font-size: 2rem;
@@ -70,16 +65,14 @@ const Heading = () => {
7065

7166
### Components
7267

73-
| Component | Description |
74-
| --------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
75-
| [`<DashProvider>`](#dashprovider) | A Dash context provider. Use this to control the `styles` instance your app is using in its Dash hooks/components. |
76-
| [`<Inline>`](#inline) | A component for creating an inline `<style>` tag that is unmounted when the component unmounts. |
68+
| Component | Description |
69+
| --------------------- | ----------------------------------------------------------------------------------------------- |
70+
| [`<Inline>`](#inline) | A component for creating an inline `<style>` tag that is unmounted when the component unmounts. |
7771

7872
### Hooks
7973

8074
| Hook | Description |
8175
| --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
82-
| [`useDash()`](#usedash) | A hook that returns the Dash `styles` instance from the nearest provider. |
8376
| [`useGlobal()`](#useglobal) | A hook for inserting transient global styles into the DOM. These styles will be injected when the hook mounts and flushed when the hook unmounts. |
8477
| [`useTokens()`](#usetokens) | A hook for inserting transient CSS tokens into the DOM. These tokens will be injected when the hook mounts and flushed when the hook unmounts. |
8578
| [`useThemes()`](#usethemes) | A hook for inserting transient CSS theme tokens into the DOM. These tokens will be injected when the hook mounts and flushed when the hook unmounts. |
@@ -104,19 +97,6 @@ experience in VSCode and providing solid insurance to your TypeScript applicatio
10497

10598
---
10699

107-
### &lt;DashProvider&gt;
108-
109-
A Dash context provider. Use this to control the `styles` instance your app is using
110-
in its Dash hooks/components.
111-
112-
#### Props
113-
114-
| Prop | Type | Required? | Description |
115-
| ------ | ------------------------------------ | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
116-
| styles | `Styles<DashTokens, DashThemeNames>` | No | The Dash context provider. Use this to control the `styles` instance your app is using. Defaults to the default `styles` instance from `@dash-ui/styles`. |
117-
118-
---
119-
120100
### &lt;Inline&gt;
121101

122102
A component for creating an inline `<style>` tag that is unmounted when the component unmounts.
@@ -127,12 +107,13 @@ A component for creating an inline `<style>` tag that is unmounted when the comp
127107

128108
```tsx
129109
import * as React from 'react'
110+
import {styles} from '@dash-ui/styles'
130111
import {Inline} from '@dash-ui/react'
131112

132113
export const App = () => {
133114
return (
134115
<React.Fragment>
135-
<Inline css={`
116+
<Inline styles={styles} css={`
136117
.heading {
137118
font-size: 2rem;
138119
font-family: -apple-system, sans-serif;
@@ -146,44 +127,10 @@ export const App = () => {
146127

147128
#### Props
148129

149-
| Prop | Type | Required? | Description |
150-
| ---- | ------------------------ | --------- | -------------------------------------- |
151-
| css | `StyleValue<DashTokens>` | Yes | The CSS you want to inline in the DOM. |
152-
153-
---
154-
155-
### useDash()
156-
157-
A hook that returns the Dash `styles` instance from the nearest provider.
158-
159-
#### Example
160-
161-
```tsx
162-
import * as React from "react";
163-
import { DashProvider, useDash } from "@dash-ui/react";
164-
165-
const Component = () => {
166-
const { styles } = useDash();
167-
return <div className={styles.cls`background-color: #000;`} />;
168-
};
169-
170-
export const App = () => (
171-
<DashProvider>
172-
<Component />
173-
</DashProvider>
174-
);
175-
```
176-
177-
#### Returns
178-
179-
```typescript
180-
export interface DashContextValue {
181-
/**
182-
* A `styles` instance
183-
*/
184-
styles: Styles;
185-
}
186-
```
130+
| Prop | Type | Required? | Description |
131+
| ------ | -------------------------------- | --------- | -------------------------------------- |
132+
| styles | `Styles<DashTokens, DashThemes>` | Yes | A `styles` instance. |
133+
| css | `StyleValue<DashTokens>` | Yes | The CSS you want to inline in the DOM. |
187134

188135
---
189136

@@ -199,12 +146,13 @@ injected when the hook mounts and flushed when the hook unmounts.
199146
```tsx
200147
import * as React from "react";
201148
import { createStyles } from "@dash-ui/styles";
202-
import { DashProvider, useGlobal } from "@dash-ui/react";
149+
import { useGlobal } from "@dash-ui/react";
203150

204151
const styles = createStyles();
205152

206153
const Component = () => {
207154
useGlobal(
155+
styles,
208156
{
209157
body: {
210158
minHeight: "100vh",
@@ -226,18 +174,12 @@ const Component = () => {
226174
</div>
227175
);
228176
};
229-
230-
export const App = () => (
231-
<DashProvider styles={styles}>
232-
<Component />
233-
</DashProvider>
234-
);
235177
```
236178

237179
#### Returns
238180

239181
```typescript
240-
void
182+
null;
241183
```
242184

243185
---
@@ -254,7 +196,7 @@ injected when the hook mounts and flushed when the hook unmounts.
254196
```tsx
255197
import * as React from "react";
256198
import { createStyles } from "@dash-ui/styles";
257-
import { DashProvider, useThemes } from "@dash-ui/react";
199+
import { useThemes } from "@dash-ui/react";
258200

259201
const styles = createStyles({
260202
tokens: {
@@ -265,7 +207,7 @@ const styles = createStyles({
265207
const Component = () => {
266208
const [primaryColor, setPrimaryColor] = React.useState("#ee5b5f");
267209

268-
useTokens({ primaryColor }, [primaryColor]);
210+
useTokens(styles, { primaryColor }, [primaryColor]);
269211

270212
return (
271213
<div>
@@ -289,32 +231,27 @@ const Component = () => {
289231
</div>
290232
);
291233
};
292-
293-
export default () => (
294-
<DashProvider styles={styles}>
295-
<Component />
296-
</DashProvider>
297-
);
298234
```
299235

300236
#### Arguments
301237

302238
```typescript
303239
function useTokens(
304-
value: DeepPartial<DashTokens> | Falsy,
240+
value: PartialDeep<DashTokens> | Falsy,
305241
deps?: React.DependencyList
306242
);
307243
```
308244

309-
| Argument | Type | Required? | Description |
310-
| -------- | ------------------------ | --------- | --------------------------------------------------------------- | ------------------------------------------------------------------ |
311-
| value | `DeepPartial<DashTokens> | Falsy` | Yes | CSS tokens to inject into the DOM and flush when the hook unmounts |
312-
| deps | `React.DependencyList` | No | A dependency array that will force the hook to re-insert tokens |
245+
| Argument | Type | Required? | Description |
246+
| -------- | -------------------------------- | --------- | --------------------------------------------------------------- | ------------------------------------------------------------------ |
247+
| styles | `Styles<DashTokens, DashThemes>` | Yes | A `styles` instance. |
248+
| value | `PartialDeep<DashTokens> | Falsy` | Yes | CSS tokens to inject into the DOM and flush when the hook unmounts |
249+
| deps | `React.DependencyList` | No | A dependency array that will force the hook to re-insert tokens |
313250

314251
#### Returns
315252

316253
```typescript
317-
void
254+
null;
318255
```
319256

320257
---
@@ -331,7 +268,7 @@ will be injected when the hook mounts and flushed when the hook unmounts.
331268
```jsx
332269
import * as React from "react";
333270
import { createStyles } from "@dash-ui/styles";
334-
import { DashProvider, useThemes } from "@dash-ui/react";
271+
import { useThemes } from "@dash-ui/react";
335272

336273
const styles = createStyles({
337274
themes: {
@@ -403,36 +340,28 @@ const Component = () => {
403340
</body>
404341
);
405342
};
406-
407-
export default () => (
408-
<DashProvider styles={styles}>
409-
<Component />
410-
</DashProvider>
411-
);
412343
```
413344

414345
#### Arguments
415346

416347
```typescript
417348
function useThemes(
418-
value:
419-
| DeepPartial<{
420-
[Name in keyof DashThemes]: DashThemes[Name];
421-
}>
422-
| Falsy,
349+
styles,
350+
value: PartialDeep<DashThemes> | Falsy,
423351
deps?: React.DependencyList
424352
);
425353
```
426354

427-
| Argument | Type | Required? | Description |
428-
| -------- | --------------------------------------------------------------------- | --------- | --------------------------------------------------------------- |
429-
| value | `DeepPartial<{[Name in keyof DashThemes]: DashThemes[Name]}>\| Falsy` | Yes | Themes to inject into the DOM and flush when the hook unmounts |
430-
| deps | `React.DependencyList` | No | A dependency array that will force the hook to re-insert themes |
355+
| Argument | Type | Required? | Description |
356+
| -------- | --------------------------------- | --------- | --------------------------------------------------------------- |
357+
| styles | `Styles<DashTokens, DashThemes>` | Yes | A `styles` instance. |
358+
| value | `PartialDeep<DashThemes>\| Falsy` | Yes | Themes to inject into the DOM and flush when the hook unmounts |
359+
| deps | `React.DependencyList` | No | A dependency array that will force the hook to re-insert themes |
431360

432361
#### Returns
433362

434363
```typescript
435-
void
364+
null;
436365
```
437366

438367
### &lt;Style&gt;
@@ -467,10 +396,10 @@ export default class MyDocument extends Document {
467396

468397
#### Props
469398

470-
| Prop | Type | Required? | Description |
471-
| ------ | ------------------------------------ | --------- | -------------------------------------------------------------------------------------- |
472-
| html | `string` | Yes | HTML generated by Next.js, `renderToStaticMarkup()` or `renderToString()` |
473-
| styles | `Styles<DashTokens, DashThemeNames>` | No | An instance of `styles`. Defaults to the default styles instance in `@dash-ui/styles`. |
399+
| Prop | Type | Required? | Description |
400+
| ------ | -------------------------------- | --------- | -------------------------------------------------------------------------------------- |
401+
| html | `string` | Yes | HTML generated by Next.js, `renderToStaticMarkup()` or `renderToString()` |
402+
| styles | `Styles<DashTokens, DashThemes>` | No | An instance of `styles`. Defaults to the default styles instance in `@dash-ui/styles`. |
474403

475404
---
476405

@@ -513,10 +442,10 @@ function toComponent(
513442
): React.ReactElement;
514443
```
515444

516-
| Argument | Type | Required? | Description |
517-
| -------- | ------------------------------------ | --------- | -------------------------------------------------------------------------------------- |
518-
| html | `string` | Yes | The HTML generated by `renderToStaticMarkup()` or `renderToString()` |
519-
| styles | `Styles<DashTokens, DashThemeNames>` | No | An instance of `styles`. Defaults to the default styles instance in `@dash-ui/styles`. |
445+
| Argument | Type | Required? | Description |
446+
| -------- | -------------------------------- | --------- | -------------------------------------------------------------------------------------- |
447+
| html | `string` | Yes | The HTML generated by `renderToStaticMarkup()` or `renderToString()` |
448+
| styles | `Styles<DashTokens, DashThemes>` | No | An instance of `styles`. Defaults to the default styles instance in `@dash-ui/styles`. |
520449

521450
#### Returns
522451

@@ -547,9 +476,9 @@ exports.replaceRenderer =
547476
function createGatsbyRenderer(styles: Styles = defaultStyles);
548477
```
549478

550-
| Argument | Type | Required? | Description |
551-
| -------- | ------------------------------------ | --------- | -------------------------------------------------------------------------------------- |
552-
| styles | `Styles<DashTokens, DashThemeNames>` | Yes | An instance of `styles`. Defaults to the default styles instance in `@dash-ui/styles`. |
479+
| Argument | Type | Required? | Description |
480+
| -------- | -------------------------------- | --------- | -------------------------------------------------------------------------------------- |
481+
| styles | `Styles<DashTokens, DashThemes>` | Yes | An instance of `styles`. Defaults to the default styles instance in `@dash-ui/styles`. |
553482

554483
#### Returns
555484

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
"devDependencies": {
4444
"@commitlint/cli": "^9.0.1",
4545
"@commitlint/config-conventional": "^9.0.1",
46-
"@dash-ui/styles": "^1.0.0-alpha.1",
46+
"@dash-ui/styles": "^1.0.0-alpha.3",
4747
"@semantic-release/changelog": "^6.0.0",
4848
"@semantic-release/git": "^10.0.0",
4949
"@swc-node/core": "^1.6.0",

‎pnpm-lock.yaml‎

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)