Switched to tsdx and Typescript

Added storybook with examples from readme

stories/defaults/intro.tsx

@@ -0,0 +1,11 @@
+import { FunctionComponent } from "react";
+
+type Props = {};
+
+export const Intro: FunctionComponent<Props> = () => {
+  return (
+    <h1>
+      <p>Debug is turned on for all stories so that the bar always shows up</p>
+    </h1>
+  );
+};

stories/defaults/storyProps.ts

@@ -0,0 +1,3 @@
+import { CookieConsentProps, defaultCookieConsentProps } from "../../src/CookieConsent.props";
+
+export const defaultStoryProps: CookieConsentProps = { ...defaultCookieConsentProps, debug: true };

stories/defaults/template.tsx

@@ -0,0 +1,13 @@
+import { Story } from "@storybook/react";
+import CookieConsent from "../../src";
+import { Intro } from "./intro";
+
+export const DefaultTemplate: Story<any> = (args) => (
+  <>
+    <Intro />
+    <CookieConsent {...args}>
+      This website uses cookies to enhance the user experience.
+      <span style={{ fontSize: "10px" }}>This bit of text is smaller :O</span>
+    </CookieConsent>
+  </>
+);

stories/index.stories.tsx

@@ -0,0 +1,34 @@
+import { Meta } from "@storybook/react";
+import { CookieConsent } from "../src";
+import { defaultStoryProps } from "./defaults/storyProps";
+import { DefaultTemplate } from "./defaults/template";
+
+const meta: Meta = {
+  title: "CookieConsent",
+  component: CookieConsent,
+  argTypes: {
+    children: {
+      control: {
+        type: "text",
+      },
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+export default meta;
+
+export const Default = DefaultTemplate.bind({});
+Default.args = defaultStoryProps;
+
+// stories
+export * from "./stories/acceptOnScroll.story";
+export * from "./stories/additionalButtons.story";
+export * from "./stories/customStyling.story";
+export * from "./stories/flippedButtons.story";
+export * from "./stories/muiButtons.story";
+export * from "./stories/onAccept.story";
+export * from "./stories/overlay.story";
+export * from "./stories/rainbows.story";

stories/stories/acceptOnScroll.story.tsx

@@ -0,0 +1,34 @@
+import { Story } from "@storybook/react";
+import CookieConsent from "../../src";
+import { CookieConsentProps } from "../../src/CookieConsent.props";
+import { Intro } from "../defaults/intro";
+import { defaultStoryProps } from "../defaults/storyProps";
+
+const AcceptOnScrollTemplate: Story<any> = (args) => (
+  <>
+    <Intro />
+    {Array.from(Array(25).keys()).map((_something) => (
+      <p>
+        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates ipsa sequi soluta
+        mollitia illum, hic quaerat ipsum sint odit delectus magni neque sunt adipisci culpa harum
+        aut distinctio quisquam ab!
+      </p>
+    ))}
+
+    <CookieConsent {...args}>
+      Scroll for {args.acceptOnScrollPercentage}% and the onAccept will trigger
+    </CookieConsent>
+  </>
+);
+
+const AcceptOnScroll = AcceptOnScrollTemplate.bind({});
+AcceptOnScroll.args = {
+  ...defaultStoryProps,
+  onAccept: (acceptedByScrolling) => {
+    alert(`ACCEPTED! By scrolling? ${JSON.stringify(acceptedByScrolling)}`);
+  },
+  acceptOnScroll: true,
+  acceptOnScrollPercentage: 25,
+} as CookieConsentProps;
+
+export { AcceptOnScroll };

stories/stories/additionalButtons.story.tsx

@@ -0,0 +1,17 @@
+import { Story } from "@storybook/react";
+import CookieConsent from "../../src";
+import { Intro } from "../defaults/intro";
+import { defaultStoryProps } from "../defaults/storyProps";
+
+const AdditionalButtonsTemplate: Story<any> = (args) => (
+  <>
+    <Intro />
+    <CookieConsent {...args}>
+      <button style={{ color: "gray" }}>I am a custom config button</button>
+      <span style={{ fontSize: "10px" }}>This bit of text is smaller :O</span>
+    </CookieConsent>
+  </>
+);
+const AdditionalButtons = AdditionalButtonsTemplate.bind({});
+AdditionalButtons.args = defaultStoryProps;
+export { AdditionalButtons };

stories/stories/customStyling.story.tsx

@@ -0,0 +1,12 @@
+import { CookieConsentProps } from "../../src/CookieConsent.props";
+import { defaultStoryProps } from "../defaults/storyProps";
+import { DefaultTemplate } from "../defaults/template";
+
+const CustomStyling = DefaultTemplate.bind({});
+CustomStyling.args = {
+  ...defaultStoryProps,
+  style: { background: "red" },
+  buttonStyle: { fontWeight: "bold" },
+} as CookieConsentProps;
+
+export { CustomStyling };

stories/stories/flippedButtons.story.tsx

@@ -0,0 +1,12 @@
+import { CookieConsentProps } from "../../src/CookieConsent.props";
+import { defaultStoryProps } from "../defaults/storyProps";
+import { DefaultTemplate } from "../defaults/template";
+
+const FlippedButtons = DefaultTemplate.bind({});
+FlippedButtons.args = {
+  ...defaultStoryProps,
+  flipButtons: true,
+  enableDeclineButton: true,
+} as CookieConsentProps;
+
+export { FlippedButtons };

stories/stories/muiButtons.story.ts

@@ -0,0 +1,14 @@
+import { Button } from "@mui/material";
+import { CookieConsentProps } from "../../src/CookieConsent.props";
+import { defaultStoryProps } from "../defaults/storyProps";
+import { DefaultTemplate } from "../defaults/template";
+
+const CustomMuiButton = DefaultTemplate.bind({});
+CustomMuiButton.args = {
+  ...defaultStoryProps,
+  disableButtonStyles: true,
+  ButtonComponent: Button,
+  customButtonProps: { variant: "contained", style: { marginRight: "10px" } },
+} as CookieConsentProps;
+
+export { CustomMuiButton };

stories/stories/onAccept.story.tsx

@@ -0,0 +1,13 @@
+import { CookieConsentProps } from "../../src/CookieConsent.props";
+import { defaultStoryProps } from "../defaults/storyProps";
+import { DefaultTemplate } from "../defaults/template";
+
+const CustomOnAccept = DefaultTemplate.bind({});
+CustomOnAccept.args = {
+  ...defaultStoryProps,
+  onAccept: (acceptedByScrolling) => {
+    alert(`ACCEPTED! By scrolling? ${JSON.stringify(acceptedByScrolling)}`);
+  },
+} as CookieConsentProps;
+
+export { CustomOnAccept };

stories/stories/overlay.story.tsx

@@ -0,0 +1,11 @@
+import { CookieConsentProps } from "../../src/CookieConsent.props";
+import { defaultStoryProps } from "../defaults/storyProps";
+import { DefaultTemplate } from "../defaults/template";
+
+const Overlay = DefaultTemplate.bind({});
+Overlay.args = {
+  ...defaultStoryProps,
+  overlay: true,
+} as CookieConsentProps;
+
+export { Overlay };

stories/stories/rainbows.story.tsx

@@ -0,0 +1,22 @@
+import { CookieConsentProps } from "../../src/CookieConsent.props";
+import { defaultStoryProps } from "../defaults/storyProps";
+import { DefaultTemplate } from "../defaults/template";
+
+const Rainbows = DefaultTemplate.bind({});
+Rainbows.args = {
+  ...defaultStoryProps,
+  buttonText: "OMG DOUBLE RAINBOW",
+
+  style: {
+    background: "linear-gradient(to right, orange , yellow, green, cyan, blue, violet)",
+    textShadow: "2px 2px black",
+  },
+  buttonStyle: {
+    background: "linear-gradient(to left, orange , yellow, green, cyan, blue, violet)",
+    color: "white",
+    fontWeight: "bolder",
+    textShadow: "2px 2px black",
+  },
+} as CookieConsentProps;
+
+export { Rainbows };