fix(toast): 🐛 useToast is not a function (#151) Issue (#145)

* fix(toast): 🐛 useToast is not a function * chore(release): 0.1.1-beta.1 * chore(toast): 📌 pin the storybook deps to the latest beta * refactor(utils): ♻️ remove createContext utils & its test
adaptui · Nov 17, 2020 · bf476e2 · bf476e2
1 parent d7766f8
commit bf476e2
Show file tree

Hide file tree

Showing 9 changed files with 60 additions and 115 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,42 @@ 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.1](https://github.com/timelessco/renderless-components/compare/v0.1.1-beta.0...v0.1.1-beta.1) (2020-11-16)
+
+### Features
+
+- accordion types improvements
+  ([#143](https://github.com/timelessco/renderless-components/issues/143))
+  ([7e45f06](https://github.com/timelessco/renderless-components/commit/7e45f069a2a9ee6de095b6bbb2c46bf232694dab))
+
+### Bug Fixes
+
+- **toast:** 🐛 useToast is not a function
+  ([2b35a42](https://github.com/timelessco/renderless-components/commit/2b35a4239ccdd4720d4edff3ffce3dfd99abdadf))
+
+### Tests
+
+- refactored all tests
+  ([#146](https://github.com/timelessco/renderless-components/issues/146))
+  ([e61a507](https://github.com/timelessco/renderless-components/commit/e61a50794caf2696c24314e648d0013cb57f798c))
+
+### Docs
+
+- **story:** ✨ isolate story styles with post css
+  ([#149](https://github.com/timelessco/renderless-components/issues/149))
+  ([d66712c](https://github.com/timelessco/renderless-components/commit/d66712caad314443db2796df1bb78222507d5f14))
+- **update:** 📝 beta as deps in stories
+  ([c79dc71](https://github.com/timelessco/renderless-components/commit/c79dc71be6e91c8db0efa0ef0d6b451439e45e8f))
+
+### Others
+
+- reorganize slider components & improved js generation script
+  ([#148](https://github.com/timelessco/renderless-components/issues/148))
+  ([9e9ef1d](https://github.com/timelessco/renderless-components/commit/9e9ef1d4a04c6210f53797488581c1aa64550011)),
+  closes [#150](https://github.com/timelessco/renderless-components/issues/150)
+- **release:** 0.1.1-beta.0
+  ([0820b0a](https://github.com/timelessco/renderless-components/commit/0820b0ab80f05f63264ce2fe3d383fbb997bebca))
+
 ### [0.1.1-beta.0](https://github.com/timelessco/renderless-components/compare/v0.1.1-alpha.6...v0.1.1-beta.0) (2020-11-09)
 
 ### Docs

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "renderless-components",
-  "version": "0.1.1-beta.0",
+  "version": "0.1.1-beta.1",
   "description": "Renderless Components",
   "keywords": [
     "renderless-component"

diff --git a/scripts/create-preview-tabs.ts b/scripts/create-preview-tabs.ts
@@ -13,7 +13,7 @@ interface Props {
 
 export function createPreviewTabs(props: Props) {
   const { js, ts, css, deps: extraDeps = [] } = props;
-  const deps = ["[email protected].0", ...extraDeps];
+  const deps = ["[email protected].1", ...extraDeps];
   const tabs = [];
 
   if (js) {

diff --git a/src/toast/ToastProvider.tsx b/src/toast/ToastProvider.tsx
@@ -1,11 +1,11 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import { canUseDOM } from "reakit-utils";
+import { objectKeys } from "@chakra-ui/utils";
 
+import { isFunction } from "../utils";
 import { ToastController } from "./ToastController";
-import { isFunction, createContext } from "../utils";
 import { IToast, useToastState, ToastStateReturn } from "./ToastState";
-import { objectKeys } from "@chakra-ui/utils";
 
 const DEFAULT_TIMEOUT = 5000;
 const PLACEMENTS = {
@@ -24,12 +24,19 @@ interface IToastContext extends ToastStateReturn {
   toastTypes: ToastTypes;
 }
 
-export const [ToastContextProvider, useToast] = createContext<IToastContext>({
-  name: "useToast",
-  errorMessage:
-    "The `useToasts` hook must be called from a descendent of the `ToastProvider`.",
-  strict: true,
-});
+const ToastContext = React.createContext<IToastContext | undefined>(undefined);
+export const ToastContextProvider = ToastContext.Provider;
+export function useToast() {
+  const context = React.useContext(ToastContext);
+
+  if (!context) {
+    throw new Error(
+      "The `useToasts` hook must be called from a descendent of the `ToastProvider`.",
+    );
+  }
+
+  return context;
+}
 
 export type ToastTypes = Record<
   string,

diff --git a/src/toast/stories/ToastBasic.stories.tsx b/src/toast/stories/ToastBasic.stories.tsx
@@ -14,11 +14,11 @@ import { CreateToastSandbox } from "../../../scripts/create-preview-tabs";
 
 const sandboxJs = CreateToastSandbox({
   type: "jsx",
-  deps: ["[email protected].0"],
+  deps: ["[email protected].1"],
 });
 const sandboxTs = CreateToastSandbox({
   type: "tsx",
-  deps: ["[email protected].0"],
+  deps: ["[email protected].1"],
 });
 
 export default {

diff --git a/src/toast/stories/ToastCSSAnimated.stories.tsx b/src/toast/stories/ToastCSSAnimated.stories.tsx
@@ -14,11 +14,11 @@ import { CreateToastSandbox } from "../../../scripts/create-preview-tabs";
 
 const sandboxJs = CreateToastSandbox({
   type: "jsx",
-  deps: ["[email protected].0", "react-transition-group"],
+  deps: ["[email protected].1", "react-transition-group"],
 });
 const sandboxTs = CreateToastSandbox({
   type: "tsx",
-  deps: ["[email protected].0", "react-transition-group"],
+  deps: ["[email protected].1", "react-transition-group"],
 });
 
 export default {

diff --git a/src/toast/stories/ToastReactSpring.stories.tsx b/src/toast/stories/ToastReactSpring.stories.tsx
@@ -14,11 +14,11 @@ import { CreateToastSandbox } from "../../../scripts/create-preview-tabs";
 
 const sandboxJs = CreateToastSandbox({
   type: "jsx",
-  deps: ["[email protected].0", "react-spring"],
+  deps: ["[email protected].1", "react-spring"],
 });
 const sandboxTs = CreateToastSandbox({
   type: "tsx",
-  deps: ["[email protected].0", "react-spring"],
+  deps: ["[email protected].1", "react-spring"],
 });
 
 export default {

diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -1,4 +1,3 @@
-import React from "react";
 import { warn } from "@chakra-ui/utils";
 
 import { Booleanish } from "./types";
@@ -70,55 +69,6 @@ export const dataAttr = (condition: boolean | undefined) =>
 export const ariaAttr = (condition: boolean | undefined) =>
   condition ? true : undefined;
 
-export interface CreateContextOptions {
-  /**
-   * If `true`, React will throw if context is `null` or `undefined`
-   * In some cases, you might want to support nested context, so you can set it to `false`
-   */
-  strict?: boolean;
-  /**
-   * Error message to throw if the context is `undefined`
-   */
-  errorMessage?: string;
-  /**
-   * The display name of the context
-   */
-  name?: string;
-}
-
-type CreateContextReturn<T> = [React.Provider<T>, () => T, React.Context<T>];
-
-/**
- * Creates a named context, provider, and hook.
- *
- * @param options create context options
- */
-export function createContext<ContextType>(options: CreateContextOptions = {}) {
-  const {
-    strict = true,
-    errorMessage = "useContext: `context` is undefined. Seems you forgot to wrap component within the Provider",
-    name,
-  } = options;
-
-  const Context = React.createContext<ContextType | undefined>(undefined);
-
-  Context.displayName = name;
-
-  function useContext() {
-    const context = React.useContext(Context);
-
-    if (!context && strict) {
-      throw new Error(errorMessage);
-    }
-
-    return context;
-  }
-
-  return [Context.Provider, useContext, Context] as CreateContextReturn<
-    ContextType
-  >;
-}
-
 export const cx = (...classNames: any[]) =>
   classNames.filter(Boolean).join(" ");
 

diff --git a/src/utils/utils.test.tsx b/src/utils/utils.test.tsx
@@ -1,14 +1,13 @@
 import React from "react";
 import MockDate from "mockdate";
-import { render } from "reakit-test-utils";
 
 import {
   parseDate,
   stringifyDate,
   parseRangeDate,
   isInvalidDateRange,
 } from "./date";
-import { clampValue, createContext, valueToPercent, getOptimumValue } from ".";
+import { clampValue, valueToPercent, getOptimumValue } from ".";
 
 describe("Utils", () => {
   test("parseDate", () => {
@@ -118,53 +117,6 @@ afterAll(() => {
   console.error = oldLog;
 });
 
-describe("createContext", () => {
-  it("should create a context", () => {
-    const [Provider, useContext, Context] = createContext({
-      errorMessage: "context is undefined",
-      name: "Test",
-    });
-
-    const ExampleContext: React.FC = () => {
-      const { count } = useContext() as any;
-
-      return <p data-testid="val">{count}</p>;
-    };
-
-    const { getByTestId } = render(
-      <Provider value={{ count: 1 }}>
-        <ExampleContext />
-      </Provider>,
-    );
-
-    expect(getByTestId("val")).toHaveTextContent("1");
-  });
-
-  it("should throw error if Provider not wrapped", () => {
-    const [Provider, useContext, Context] = createContext({
-      errorMessage: "context is undefined",
-      name: "Test",
-    });
-
-    const ExampleContext: React.FC = () => {
-      const { count } = useContext() as any;
-      return <p data-testid="val">{count}</p>;
-    };
-
-    const spy = jest.spyOn(ErrorBoundary.prototype, "componentDidCatch");
-
-    render(
-      <ErrorBoundary>
-        <ExampleContext />
-      </ErrorBoundary>,
-    );
-
-    expect(ErrorBoundary.prototype.componentDidCatch).toHaveBeenCalled();
-
-    expect(spy).toHaveBeenCalledTimes(1);
-  });
-});
-
 class ErrorBoundary extends React.Component<any, { hasError: boolean }> {
   constructor(props: any) {
     super(props);