Skip to content

Commit d24e556

Browse files
jaredLundejaredLunde
committed
feat: make it compatible with styles alpha
Updates types, tests, and README to be compatible with new styles alpha BREAKING CHANGE: Updates some types to be compatible with the latest alpha of Dash
1 parent a780a58 commit d24e556

File tree

6 files changed

+850
-818
lines changed

6 files changed

+850
-818
lines changed

‎README.md‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -70,16 +70,16 @@ const Heading = () => {
7070

7171
### Components
7272

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. |
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. |
7777

7878
### Hooks
7979

8080
| Hook | Description |
8181
| --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
82-
| [`useDash()`](#usedash) | A hook that returns the Dash `styles()` instance from the nearest provider. |
82+
| [`useDash()`](#usedash) | A hook that returns the Dash `styles` instance from the nearest provider. |
8383
| [`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. |
8484
| [`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. |
8585
| [`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. |
@@ -106,14 +106,14 @@ experience in VSCode and providing solid insurance to your TypeScript applicatio
106106

107107
### &lt;DashProvider&gt;
108108

109-
A Dash context provider. Use this to control the `styles()` instance your app is using
109+
A Dash context provider. Use this to control the `styles` instance your app is using
110110
in its Dash hooks/components.
111111

112112
#### Props
113113

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`. |
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`. |
117117

118118
---
119119

@@ -154,7 +154,7 @@ export const App = () => {
154154

155155
### useDash()
156156

157-
A hook that returns the Dash `styles()` instance from the nearest provider.
157+
A hook that returns the Dash `styles` instance from the nearest provider.
158158

159159
#### Example
160160

@@ -179,7 +179,7 @@ export const App = () => (
179179
```typescript
180180
export interface DashContextValue {
181181
/**
182-
* A `styles()` instance
182+
* A `styles` instance
183183
*/
184184
styles: Styles;
185185
}
@@ -467,10 +467,10 @@ export default class MyDocument extends Document {
467467

468468
#### Props
469469

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`. |
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`. |
474474

475475
---
476476

@@ -513,10 +513,10 @@ function toComponent(
513513
): React.ReactElement;
514514
```
515515

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`. |
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`. |
520520

521521
#### Returns
522522

@@ -547,9 +547,9 @@ exports.replaceRenderer =
547547
function createGatsbyRenderer(styles: Styles = defaultStyles);
548548
```
549549

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`. |
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`. |
553553

554554
#### Returns
555555

‎package.json‎

Lines changed: 106 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -2,57 +2,18 @@
22
"name": "@dash-ui/react",
33
"version": "0.9.1",
44
"description": "React components and hooks for dash-ui",
5-
"keywords": [
6-
"react",
7-
"react hook",
8-
"react component",
9-
"css-in-js",
10-
"css-in-react",
11-
"dash-ui",
12-
"dash",
13-
"react css library",
14-
"react styles",
15-
"react themes",
16-
"react ssr",
17-
"react css variables"
18-
],
19-
"homepage": "https://github.com/dash-ui/react#readme",
20-
"bugs": "https://github.com/dash-ui/react/issues",
21-
"repository": "github:dash-ui/react",
225
"license": "MIT",
236
"author": "Jared Lunde <[email protected]> (https://jaredLunde.com)",
24-
"sideEffects": false,
25-
"exports": {
26-
".": {
27-
"browser": "./dist/module/index.js",
28-
"import": "./dist/esm/index.mjs",
29-
"require": "./dist/main/index.js",
30-
"umd": "./dist/umd/dash-react.js",
31-
"source": "./src/index.tsx",
32-
"types": "./types/index.d.ts",
33-
"default": "./dist/main/index.js"
34-
},
35-
"./server": {
36-
"browser": "./server/dist/module/index.js",
37-
"import": "./server/dist/esm/index.mjs",
38-
"require": "./server/dist/main/index.js",
39-
"source": "./server/src/index.tsx",
40-
"types": "./server/types/index.d.ts",
41-
"default": "./server/dist/main/index.js"
42-
},
43-
"./package.json": "./package.json",
44-
"./": "./"
45-
},
7+
"homepage": "https://github.com/dash-ui/react#readme",
8+
"repository": "github:dash-ui/react",
9+
"bugs": "https://github.com/dash-ui/react/issues",
4610
"main": "dist/main/index.js",
47-
"unpkg": "dist/umd/dash-react.js",
4811
"module": "dist/module/index.js",
49-
"source": "src/index.tsx",
50-
"types": "types/index.d.ts",
5112
"files": [
5213
"/dist",
14+
"/server",
5315
"/src",
54-
"/types",
55-
"/server"
16+
"/types"
5617
],
5718
"scripts": {
5819
"build": "lundle build",
@@ -64,25 +25,69 @@
6425
"test": "jest",
6526
"validate": "lundle check-types && npm run lint && jest --coverage"
6627
},
67-
"commitlint": {
68-
"extends": [
69-
"@commitlint/config-conventional"
70-
]
71-
},
72-
"lint-staged": {
73-
"**/*.{ts,tsx,js,jsx}": [
74-
"eslint --ext .js,.jsx,.ts,.tsx --fix",
75-
"prettier --write"
76-
],
77-
"**/*.{md,yml,json}": [
78-
"prettier --write"
79-
]
80-
},
8128
"config": {
8229
"commitizen": {
8330
"path": "./node_modules/cz-conventional-changelog"
8431
}
8532
},
33+
"sideEffects": false,
34+
"types": "types/index.d.ts",
35+
"dependencies": {
36+
"@react-hook/passive-layout-effect": "^1.2.0"
37+
},
38+
"peerDependencies": {
39+
"@dash-ui/styles": ">=1.0.0-alpha.1",
40+
"react": ">=16.8",
41+
"react-dom": ">=16.8"
42+
},
43+
"devDependencies": {
44+
"@commitlint/cli": "^9.0.1",
45+
"@commitlint/config-conventional": "^9.0.1",
46+
"@dash-ui/styles": "^1.0.0-alpha.1",
47+
"@semantic-release/changelog": "^6.0.0",
48+
"@semantic-release/git": "^10.0.0",
49+
"@swc-node/core": "^1.6.0",
50+
"@swc-node/jest": "^1.3.2",
51+
"@testing-library/jest-dom": "latest",
52+
"@testing-library/react": "latest",
53+
"@testing-library/react-hooks": "latest",
54+
"@testing-library/user-event": "latest",
55+
"@types/jest": "latest",
56+
"@types/react": "latest",
57+
"@types/react-dom": "latest",
58+
"babel-jest": "latest",
59+
"cz-conventional-changelog": "^3.2.0",
60+
"eslint": "^7.32.0",
61+
"eslint-config-lunde": "^0.5.0",
62+
"husky": "^7.0.2",
63+
"jest": "latest",
64+
"lint-staged": "latest",
65+
"lundle": "^0.4.9",
66+
"prettier": "latest",
67+
"react": "latest",
68+
"react-dom": "latest",
69+
"react-test-renderer": "latest",
70+
"typescript": "^4.4.3"
71+
},
72+
"keywords": [
73+
"css-in-js",
74+
"css-in-react",
75+
"dash",
76+
"dash-ui",
77+
"react",
78+
"react component",
79+
"react css library",
80+
"react css variables",
81+
"react hook",
82+
"react ssr",
83+
"react styles",
84+
"react themes"
85+
],
86+
"commitlint": {
87+
"extends": [
88+
"@commitlint/config-conventional"
89+
]
90+
},
8691
"eslintConfig": {
8792
"extends": [
8893
"lunde"
@@ -104,6 +109,27 @@
104109
"*.config.js",
105110
"*.d.ts"
106111
],
112+
"exports": {
113+
".": {
114+
"browser": "./dist/module/index.js",
115+
"import": "./dist/esm/index.mjs",
116+
"require": "./dist/main/index.js",
117+
"umd": "./dist/umd/dash-react.js",
118+
"source": "./src/index.tsx",
119+
"types": "./types/index.d.ts",
120+
"default": "./dist/main/index.js"
121+
},
122+
"./server": {
123+
"browser": "./server/dist/module/index.js",
124+
"import": "./server/dist/esm/index.mjs",
125+
"require": "./server/dist/main/index.js",
126+
"source": "./server/src/index.tsx",
127+
"types": "./server/types/index.d.ts",
128+
"default": "./server/dist/main/index.js"
129+
},
130+
"./package.json": "./package.json",
131+
"./": "./"
132+
},
107133
"jest": {
108134
"collectCoverageFrom": [
109135
"**/src/**/*.{ts,tsx}"
@@ -138,48 +164,29 @@
138164
]
139165
}
140166
},
141-
"dependencies": {
142-
"@react-hook/passive-layout-effect": "^1.2.0"
143-
},
144-
"devDependencies": {
145-
"@commitlint/cli": "^9.0.1",
146-
"@commitlint/config-conventional": "^9.0.1",
147-
"@dash-ui/styles": "^0.8.0",
148-
"@semantic-release/changelog": "^6.0.0",
149-
"@semantic-release/git": "^10.0.0",
150-
"@swc-node/core": "^1.6.0",
151-
"@swc-node/jest": "^1.3.2",
152-
"@testing-library/jest-dom": "latest",
153-
"@testing-library/react": "latest",
154-
"@testing-library/react-hooks": "latest",
155-
"@testing-library/user-event": "latest",
156-
"@types/jest": "latest",
157-
"@types/react": "latest",
158-
"@types/react-dom": "latest",
159-
"babel-jest": "latest",
160-
"cz-conventional-changelog": "^3.2.0",
161-
"eslint": "latest",
162-
"eslint-config-lunde": "^0.5.0",
163-
"husky": "^7.0.2",
164-
"jest": "latest",
165-
"lint-staged": "latest",
166-
"lundle": "^0.4.9",
167-
"prettier": "latest",
168-
"react": "latest",
169-
"react-dom": "latest",
170-
"react-test-renderer": "latest",
171-
"typescript": "^4.4.3"
172-
},
173-
"peerDependencies": {
174-
"@dash-ui/styles": ">=0.6.1",
175-
"react": ">=16.8",
176-
"react-dom": ">=16.8"
167+
"lint-staged": {
168+
"package.json": [
169+
"pnpx -y prettier-package-json --write"
170+
],
171+
"**/*.{ts,tsx,js,jsx}": [
172+
"eslint --ext .js,.jsx,.ts,.tsx --fix",
173+
"prettier --write"
174+
],
175+
"**/*.{md,yml,json}": [
176+
"prettier --write"
177+
]
177178
},
178179
"release": {
179180
"branches": [
180181
"main",
181-
"next",
182-
"alpha"
182+
{
183+
"name": "next",
184+
"prerelease": true
185+
},
186+
{
187+
"name": "alpha",
188+
"prerelease": true
189+
}
183190
],
184191
"plugins": [
185192
"@semantic-release/commit-analyzer",
@@ -199,5 +206,7 @@
199206
],
200207
"@semantic-release/github"
201208
]
202-
}
209+
},
210+
"source": "src/index.tsx",
211+
"unpkg": "dist/umd/dash-react.js"
203212
}

0 commit comments

Comments
 (0)