build(reakit): 📌 make reakit as a peer deps

CHANGELOG.md

@@ -4,6 +4,62 @@ 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.
 
+### [0.1.1-beta.3](https://github.com/timelessco/renderless-components/compare/v0.1.1-beta.2...v0.1.1-beta.3) (2020-11-17)
+
+### Bug Fixes
+
+- **toast:** 🐛 useToast is not a function
+  ([2b35a42](https://github.com/timelessco/renderless-components/commit/2b35a4239ccdd4720d4edff3ffce3dfd99abdadf))
+
+### Build System
+
+- **reakit:** 📌 make reakit as a peer deps
+  ([64f5bee](https://github.com/timelessco/renderless-components/commit/64f5bee61887f1d56226229776da8b74ca22d3e6))
+
+### Code Refactoring
+
+- **utils:** ♻️ remove createContext utils & its test
+  ([797aefa](https://github.com/timelessco/renderless-components/commit/797aefaf6050372af6e4e230ae9fb05be8707f0e))
+- **uuid:** ➖ remove uuid from deps
+  ([b205d1c](https://github.com/timelessco/renderless-components/commit/b205d1c9aa9f1cf8382b8ff0a0322429eb5a3462))
+
+### Others
+
+- **reakitwarning:** ➕ add reakit warning to the prod deps
+  ([013feee](https://github.com/timelessco/renderless-components/commit/013feeede303944dc51ba2a4aff6d10d944bfbdf))
+- **release:** 0.1.1-beta.1
+  ([5512921](https://github.com/timelessco/renderless-components/commit/551292113dfe16f613027150f9c53143041a0c1d))
+- **release:** 0.1.1-beta.2
+  ([9fb7534](https://github.com/timelessco/renderless-components/commit/9fb7534a27ac74491304032513e74fa31b4a3ca1))
+- **toast:** 📌 pin the storybook deps to the latest beta
+  ([3fc971c](https://github.com/timelessco/renderless-components/commit/3fc971c827314d6c7b84bbbc0b6c9b5f9b9b2e0b))
+
+### [0.1.1-beta.2](https://github.com/timelessco/renderless-components/compare/v0.1.1-beta.1...v0.1.1-beta.2) (2020-11-17)
+
+### Bug Fixes
+
+- **toast:** 🐛 useToast is not a function
+  ([2b35a42](https://github.com/timelessco/renderless-components/commit/2b35a4239ccdd4720d4edff3ffce3dfd99abdadf))
+
+### Others
+
+- **release:** 0.1.1-beta.1
+  ([5512921](https://github.com/timelessco/renderless-components/commit/551292113dfe16f613027150f9c53143041a0c1d))
+- **toast:** 📌 pin the storybook deps to the latest beta
+  ([3fc971c](https://github.com/timelessco/renderless-components/commit/3fc971c827314d6c7b84bbbc0b6c9b5f9b9b2e0b))
+
+### Build System
+
+- **reakit:** 📌 make reakit as a peer deps
+  ([64f5bee](https://github.com/timelessco/renderless-components/commit/64f5bee61887f1d56226229776da8b74ca22d3e6))
+
+### Code Refactoring
+
+- **utils:** ♻️ remove createContext utils & its test
+  ([797aefa](https://github.com/timelessco/renderless-components/commit/797aefaf6050372af6e4e230ae9fb05be8707f0e))
+- **uuid:** ➖ remove uuid from deps
+  ([b205d1c](https://github.com/timelessco/renderless-components/commit/b205d1c9aa9f1cf8382b8ff0a0322429eb5a3462))
+
 ### [0.1.1-beta.1](https://github.com/timelessco/renderless-components/compare/v0.1.1-beta.0...v0.1.1-beta.1) (2020-11-16)
 
 ### Features

package.json

@@ -1,9 +1,15 @@
 {
   "name": "renderless-components",
-  "version": "0.1.1-beta.1",
-  "description": "Renderless Components",
+  "version": "0.1.1-beta.3",
+  "description": "Renderless Components for building accessible components with any UI",
   "keywords": [
-    "renderless-component"
+    "renderless-component",
+    "reakit",
+    "a11y",
+    "react",
+    "ui",
+    "toolkit",
+    "components"
   ],
   "homepage": "https://github.com/timelessco/renderless-components#readme",
   "bugs": {
@@ -55,10 +61,9 @@
     "@react-aria/interactions": "^3.3.0",
     "@react-aria/utils": "3.4.0",
     "date-fns": "2.16.1",
-    "reakit": "1.3.0",
     "reakit-system": "0.15.0",
     "reakit-utils": "0.15.0",
-    "uuid": "8.3.1"
+    "reakit-warning": "^0.6.0"
   },
   "devDependencies": {
     "@babel/cli": "7.12.1",
@@ -85,7 +90,6 @@
     "@types/react-dom": "16.9.9",
     "@types/react-transition-group": "4.4.0",
     "@types/testing-library__jest-dom": "5.9.5",
-    "@types/uuid": "8.3.0",
     "@typescript-eslint/eslint-plugin": "4.6.0",
     "@typescript-eslint/parser": "4.6.0",
     "babel-eslint": "10.1.0",
@@ -131,6 +135,7 @@
     "react-test-renderer": "16.14.0",
     "react-transition-group": "4.4.1",
     "react-virtual": "^2.3.1",
+    "reakit": "1.3.0",
     "reakit-test-utils": "0.14.5",
     "rimraf": "3.0.2",
     "sort-package-json": "1.46.1",
@@ -144,7 +149,8 @@
   },
   "peerDependencies": {
     "react": "^16.8.0",
-    "react-dom": "^16.8.0"
+    "react-dom": "^16.8.0",
+    "reakit": "^1.3.0"
   },
   "publishConfig": {
     "access": "public"

scripts/create-preview-tabs.ts

@@ -1,19 +1,19 @@
-import {
-  CodeSandboxTemplate,
-  DEFAULT_REACT_CODESANDBOX,
-  DEFAULT_REACTJS_CODESANDBOX,
-} from "storybook-addon-preview";
+import { CodeSandboxTemplate } from "storybook-addon-preview";
 
 interface Props {
   js?: string;
   ts?: string;
+  jsUtils?: string;
+  tsUtils?: string;
   css?: string;
   deps?: string[];
+  jsSandbox?: CodeSandboxTemplate;
+  tsSandbox?: CodeSandboxTemplate;
 }
 
 export function createPreviewTabs(props: Props) {
-  const { js, ts, css, deps: extraDeps = [] } = props;
-  const deps = ["renderless-components@0.1.1-beta.1", ...extraDeps];
+  const { js, ts, jsUtils, tsUtils, css, deps: extraDeps = [] } = props;
+  const deps = ["renderless-components@0.1.1-beta.3", "reakit", ...extraDeps];
   const tabs = [];
 
   if (js) {
@@ -22,7 +22,17 @@ export function createPreviewTabs(props: Props) {
       template: js,
       language: "jsx",
       copy: true,
-      codesandbox: DEFAULT_REACTJS_CODESANDBOX(deps),
+      codesandbox: REACTJS_CUSTOM_CODESANDBOX(deps),
+    });
+  }
+
+  if (jsUtils) {
+    tabs.push({
+      tab: "UtilsJS",
+      template: jsUtils,
+      language: "jsx",
+      copy: true,
+      codesandbox: REACTJS_CUSTOM_CODESANDBOX(deps),
     });
   }
 
@@ -32,7 +42,17 @@ export function createPreviewTabs(props: Props) {
       template: ts,
       language: "tsx",
       copy: true,
-      codesandbox: DEFAULT_REACT_CODESANDBOX(deps),
+      codesandbox: REACT_CUSTOM_CODESANDBOX(deps),
+    });
+  }
+
+  if (tsUtils) {
+    tabs.push({
+      tab: "Utils",
+      template: tsUtils,
+      language: "tsx",
+      copy: true,
+      codesandbox: REACT_CUSTOM_CODESANDBOX(deps),
     });
   }
 
@@ -52,25 +72,28 @@ const joinStrs = (strs: string[]) => {
   return `[${strs.map(str => `"${str}"`).join(", ")}]`;
 };
 
-export const CreateToastSandbox = ({
-  type = "tsx",
-  deps = [],
-}: {
-  type?: string;
-  deps?: string[];
-}) => {
-  const utilTab = type === "tsx" ? "Utils.tsx" : "Utils.jsx";
-  const ReactTab = type === "tsx" ? "React" : "ReactJS";
+const REACTJS_CUSTOM_CODESANDBOX = (dependencies: string[]) =>
+  new Function(`
+var previews = arguments[0];
+return {
+    framework: "reactjs",
+    files: {
+        "src/App.js": previews["ReactJS"][0],
+        "src/styles.css": previews["CSS"] ? previews["CSS"][0] : "",
+        "src/Utils.component.js": previews["UtilsJS"] ? previews["UtilsJS"][0] : "",
+    },
+    userDependencies: ${joinStrs(dependencies)},
+};`) as CodeSandboxTemplate;
 
-  return new Function(`
-  var previews = arguments[0];
-  return {
-      framework: "${ReactTab.toLowerCase()}",
-      files: {
-          "src/App.${type}": previews["${ReactTab}"][0],
-          "src/styles.css": previews["CSS"] ? previews["CSS"][0] : "",
-          "src/ToastUtils.component.${type}": previews["${utilTab}"] ? previews["${utilTab}"][0] : "",
-      },
-      userDependencies: ${joinStrs(deps)},
-  };`) as CodeSandboxTemplate;
-};
+const REACT_CUSTOM_CODESANDBOX = (dependencies: string[]) =>
+  new Function(`
+var previews = arguments[0];
+return {
+    framework: "react",
+    files: {
+        "src/App.tsx": previews["React"][0],
+        "src/styles.css": previews["CSS"] ? previews["CSS"][0] : "",
+        "src/Utils.component.tsx": previews["Utils"] ? previews["Utils"][0] : "",
+    },
+    userDependencies: ${joinStrs(dependencies)},
+};`) as CodeSandboxTemplate;

src/accordion/stories/AccordionBasic.component.tsx

@@ -6,7 +6,6 @@ import {
   AccordionTrigger,
   useAccordionState,
 } from "renderless-components";
-import { AccordionInitialState } from "../types";
 
 export function App(props: any) {
   const state = useAccordionState(props);

src/accordion/stories/AccordionBasic.stories.tsx

@@ -4,8 +4,8 @@ import { Meta } from "@storybook/react";
 import { CompositeState } from "reakit/ts";
 import { AccordionInitialState } from "../types";
 import { App as Accordion } from "./AccordionBasic.component";
-import { accordionBasicTemplate, accordionBasicTemplateJs } from "./templates";
 import { createPreviewTabs } from "../../../scripts/create-preview-tabs";
+import { accordionBasicTemplate, accordionBasicTemplateJs } from "./templates";
 
 export const Default: React.FC<Omit<
   AccordionInitialState,

src/select/stories/Select.component.tsx

@@ -1,12 +1,12 @@
 import * as React from "react";
 
 import {
-  SelectInitialState,
-  useSelectState,
   Select,
-  SelectPopover,
   SelectOption,
-} from "../index";
+  SelectPopover,
+  useSelectState,
+  SelectInitialState,
+} from "renderless-components";
 
 export const App: React.FC<SelectInitialState> = props => {
   const select = useSelectState({ gutter: 8, ...props });

src/select/stories/SelectControlled.component.tsx

@@ -1,14 +1,13 @@
 import * as React from "react";
-import { isUndefined } from "@chakra-ui/utils";
 
 import {
-  SelectInitialState,
-  useSelectState,
   Select,
-  SelectPopover,
   SelectOption,
-} from "../index";
-import { fruits } from "./fruits";
+  SelectPopover,
+  useSelectState,
+  SelectInitialState,
+} from "renderless-components";
+import { fruits } from "./Utils.component";
 
 export const App: React.FC = () => {
   const [fruit, setFruit] = React.useState<string | null>(null);
@@ -51,7 +50,7 @@ const SelectComp: React.FC<SelectCompProps> = props => {
   });
 
   React.useEffect(() => {
-    if (!isUndefined(value)) select.setSelectedValue(value);
+    if (value !== undefined) select.setSelectedValue(value);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [select.setSelectedValue, value]);
 

src/select/stories/SelectControlled.stories.tsx

@@ -3,9 +3,11 @@ import { Meta, Story } from "@storybook/react";
 
 import "./Select.css";
 import {
+  utilsTemplate,
+  utilsTemplateJs,
+  selectCssTemplate,
   selectControlledTemplate,
   selectControlledTemplateJs,
-  selectCssTemplate,
 } from "./templates";
 import { App as SelectControlled } from "./SelectControlled.component";
 import { createPreviewTabs } from "../../../scripts/create-preview-tabs";
@@ -16,7 +18,9 @@ export default {
   parameters: {
     preview: createPreviewTabs({
       js: selectControlledTemplateJs,
+      jsUtils: utilsTemplateJs,
       ts: selectControlledTemplate,
+      tsUtils: utilsTemplate,
       css: selectCssTemplate,
     }),
   },

src/select/stories/SelectCustom.component.tsx

@@ -1,13 +1,13 @@
 import * as React from "react";
 
 import {
-  SelectInitialState,
-  useSelectState,
   Select,
-  SelectPopover,
   SelectOption,
-} from "../index";
-import { fruits } from "./fruits";
+  SelectPopover,
+  useSelectState,
+  SelectInitialState,
+} from "renderless-components";
+import { fruits } from "./Utils.component";
 
 export const App: React.FC<SelectInitialState> = props => {
   const select = useSelectState({ gutter: 8, ...props });

src/select/stories/SelectCustom.stories.tsx

@@ -3,9 +3,11 @@ import { Meta, Story } from "@storybook/react";
 
 import "./Select.css";
 import {
+  utilsTemplate,
+  utilsTemplateJs,
+  selectCssTemplate,
   selectCustomTemplate,
   selectCustomTemplateJs,
-  selectCssTemplate,
 } from "./templates";
 import { App as SelectCustom } from "./SelectCustom.component";
 import { createPreviewTabs } from "../../../scripts/create-preview-tabs";
@@ -16,7 +18,9 @@ export default {
   parameters: {
     preview: createPreviewTabs({
       js: selectCustomTemplateJs,
+      jsUtils: utilsTemplateJs,
       ts: selectCustomTemplate,
+      tsUtils: utilsTemplate,
       css: selectCssTemplate,
     }),
   },

src/select/stories/SelectDynamic.component.tsx

@@ -1,13 +1,13 @@
 import * as React from "react";
 
 import {
-  SelectInitialState,
-  useSelectState,
   Select,
-  SelectPopover,
   SelectOption,
-} from "../index";
-import { fruits } from "./fruits";
+  SelectPopover,
+  useSelectState,
+  SelectInitialState,
+} from "renderless-components";
+import { fruits } from "./Utils.component";
 
 export const App: React.FC<SelectInitialState> = props => {
   const select = useSelectState({ gutter: 8, ...props });