Skip to content

Commit

Permalink
feat: release v1
Browse files Browse the repository at this point in the history
  • Loading branch information
@jaredLunde
jaredLunde authored Jun 25, 2022
2 parents a780a58 + 3d9a386 commit 5fcf22f
Show file tree
Hide file tree
Showing 11 changed files with 2,429 additions and 1,685 deletions.
49 changes: 49 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,52 @@
# [1.0.0-alpha.6](https://github.com/dash-ui/react/compare/v1.0.0-alpha.5...v1.0.0-alpha.6) (2022-06-25)

### Features

- remove alpha peers ([4d99dcd](https://github.com/dash-ui/react/commit/4d99dcdeedd243428d81cf79b66640f7ea1f9f7b))

# [1.0.0-alpha.5](https://github.com/dash-ui/react/compare/v1.0.0-alpha.4...v1.0.0-alpha.5) (2021-11-07)

### Features

- allow nonce on server style tag ([92e527a](https://github.com/dash-ui/react/commit/92e527a05eb4e07423faf04b1cd0b29ce3a28b95))

# [1.0.0-alpha.4](https://github.com/dash-ui/react/compare/v1.0.0-alpha.3...v1.0.0-alpha.4) (2021-11-06)

### Bug Fixes

- dont import react-dom/server directly ([c48eb5f](https://github.com/dash-ui/react/commit/c48eb5fad5d0153951e35610f027739d1b9f234d))

# [1.0.0-alpha.3](https://github.com/dash-ui/react/compare/v1.0.0-alpha.2...v1.0.0-alpha.3) (2021-10-30)

### Bug Fixes

- make server types more generalized ([874b7f8](https://github.com/dash-ui/react/commit/874b7f8593f27f33ff6789ba5bdc1575d9207483))

# [1.0.0-alpha.2](https://github.com/dash-ui/react/compare/v1.0.0-alpha.1...v1.0.0-alpha.2) (2021-10-29)

### Bug Fixes

- fix broken tests ([0a015eb](https://github.com/dash-ui/react/commit/0a015ebe934b3d4f3b2aa1df916acdd45dd1c892))

### Features

- require a styles instance as the first argument for hookks ([254bf73](https://github.com/dash-ui/react/commit/254bf73790e74c43b6a882e283cd356bb9c5c163))

### BREAKING CHANGES

- Requires that the user provide a style instance as the first argument for hooks.
Also removes `DashProvider` and `useDash` utilities.

# [1.0.0-alpha.1](https://github.com/dash-ui/react/compare/v0.9.1...v1.0.0-alpha.1) (2021-10-29)

### Features

- make it compatible with styles alpha ([d24e556](https://github.com/dash-ui/react/commit/d24e556d6dbf98fa402bb6bb4c37838679a95baf))

### BREAKING CHANGES

- Updates some types to be compatible with the latest alpha of Dash

# Changelog

All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
Expand Down
157 changes: 43 additions & 114 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@

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

const styles = createStyles({
tokens: {
Expand All @@ -44,14 +44,9 @@ const styles = createStyles({
},
});

export const App = () => (
<DashProvider styles={styles}>
<Heading />
</DashProvider>
);

const Heading = () => {
useGlobal(
styles,
({ color }) => `
h1 {
font-size: 2rem;
Expand All @@ -70,16 +65,14 @@ const Heading = () => {

### Components

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

### Hooks

| Hook | Description |
| --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| [`useDash()`](#usedash) | A hook that returns the Dash `styles()` instance from the nearest provider. |
| [`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. |
| [`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. |
| [`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. |
Expand All @@ -104,19 +97,6 @@ experience in VSCode and providing solid insurance to your TypeScript applicatio

---

### &lt;DashProvider&gt;

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

#### Props

| Prop | Type | Required? | Description |
| ------ | ------------------------------------ | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 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`. |

---

### &lt;Inline&gt;

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

```tsx
import * as React from 'react'
import {styles} from '@dash-ui/styles'
import {Inline} from '@dash-ui/react'

export const App = () => {
return (
<React.Fragment>
<Inline css={`
<Inline styles={styles} css={`
.heading {
font-size: 2rem;
font-family: -apple-system, sans-serif;
Expand All @@ -146,44 +127,10 @@ export const App = () => {

#### Props

| Prop | Type | Required? | Description |
| ---- | ------------------------ | --------- | -------------------------------------- |
| css | `StyleValue<DashTokens>` | Yes | The CSS you want to inline in the DOM. |

---

### useDash()

A hook that returns the Dash `styles()` instance from the nearest provider.

#### Example

```tsx
import * as React from "react";
import { DashProvider, useDash } from "@dash-ui/react";

const Component = () => {
const { styles } = useDash();
return <div className={styles.cls`background-color: #000;`} />;
};

export const App = () => (
<DashProvider>
<Component />
</DashProvider>
);
```

#### Returns

```typescript
export interface DashContextValue {
/**
* A `styles()` instance
*/
styles: Styles;
}
```
| Prop | Type | Required? | Description |
| ------ | -------------------------------- | --------- | -------------------------------------- |
| styles | `Styles<DashTokens, DashThemes>` | Yes | A `styles` instance. |
| css | `StyleValue<DashTokens>` | Yes | The CSS you want to inline in the DOM. |

---

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

const styles = createStyles();

const Component = () => {
useGlobal(
styles,
{
body: {
minHeight: "100vh",
Expand All @@ -226,18 +174,12 @@ const Component = () => {
</div>
);
};

export const App = () => (
<DashProvider styles={styles}>
<Component />
</DashProvider>
);
```

#### Returns

```typescript
void
null;
```

---
Expand All @@ -254,7 +196,7 @@ injected when the hook mounts and flushed when the hook unmounts.
```tsx
import * as React from "react";
import { createStyles } from "@dash-ui/styles";
import { DashProvider, useThemes } from "@dash-ui/react";
import { useThemes } from "@dash-ui/react";

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

useTokens({ primaryColor }, [primaryColor]);
useTokens(styles, { primaryColor }, [primaryColor]);

return (
<div>
Expand All @@ -289,32 +231,27 @@ const Component = () => {
</div>
);
};

export default () => (
<DashProvider styles={styles}>
<Component />
</DashProvider>
);
```

#### Arguments

```typescript
function useTokens(
value: DeepPartial<DashTokens> | Falsy,
value: PartialDeep<DashTokens> | Falsy,
deps?: React.DependencyList
);
```

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

#### Returns

```typescript
void
null;
```

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

const styles = createStyles({
themes: {
Expand Down Expand Up @@ -403,36 +340,28 @@ const Component = () => {
</body>
);
};

export default () => (
<DashProvider styles={styles}>
<Component />
</DashProvider>
);
```

#### Arguments

```typescript
function useThemes(
value:
| DeepPartial<{
[Name in keyof DashThemes]: DashThemes[Name];
}>
| Falsy,
styles,
value: PartialDeep<DashThemes> | Falsy,
deps?: React.DependencyList
);
```

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

#### Returns

```typescript
void
null;
```

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

#### Props

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

---

Expand Down Expand Up @@ -513,10 +442,10 @@ function toComponent(
): React.ReactElement;
```

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

#### Returns

Expand Down Expand Up @@ -547,9 +476,9 @@ exports.replaceRenderer =
function createGatsbyRenderer(styles: Styles = defaultStyles);
```

| Argument | Type | Required? | Description |
| -------- | ------------------------------------ | --------- | ---------------------------------------------------------------------------------------- |
| styles | `Styles<DashTokens, DashThemeNames>` | Yes | An instance of `styles()`. Defaults to the default styles instance in `@dash-ui/styles`. |
| Argument | Type | Required? | Description |
| -------- | -------------------------------- | --------- | -------------------------------------------------------------------------------------- |
| styles | `Styles<DashTokens, DashThemes>` | Yes | An instance of `styles`. Defaults to the default styles instance in `@dash-ui/styles`. |

#### Returns

Expand Down
Loading

0 comments on commit 5fcf22f

Please sign in to comment.