From deb433f6749d1ea9623444aeb36f045a5932c502 Mon Sep 17 00:00:00 2001
From: itaim18 <37772742+itaim18@users.noreply.github.com>
Date: Thu, 16 Feb 2023 18:41:59 +0200
Subject: [PATCH 1/3] feat(component): added a Toast component that reads the
 label, the position and alert type

---
 packages/daisy/src/components/toast/toast.tsx | 47 +++++++++++++++++++
 packages/daisy/src/index.ts                   |  1 +
 .../headless/src/components/toast/toast.tsx   | 32 +++++++++++++
 packages/headless/src/index.ts                |  1 +
 packages/website/src/components/menu/menu.tsx |  1 +
 .../src/routes/docs/daisy/toast/index.tsx     | 25 ++++++++++
 .../src/routes/docs/headless/toast/index.tsx  | 11 +++++
 7 files changed, 118 insertions(+)
 create mode 100644 packages/daisy/src/components/toast/toast.tsx
 create mode 100644 packages/headless/src/components/toast/toast.tsx
 create mode 100644 packages/website/src/routes/docs/daisy/toast/index.tsx
 create mode 100644 packages/website/src/routes/docs/headless/toast/index.tsx

diff --git a/packages/daisy/src/components/toast/toast.tsx b/packages/daisy/src/components/toast/toast.tsx
new file mode 100644
index 000000000..e488f7758
--- /dev/null
+++ b/packages/daisy/src/components/toast/toast.tsx
@@ -0,0 +1,47 @@
+import { component$ } from '@builder.io/qwik';
+import { Toast as HeadlessToast } from '@qwik-ui/headless';
+
+interface ToastProps {
+  class?: string;
+  top?: boolean;
+  center?: boolean;
+  end?: boolean;
+  middle?: boolean;
+  bottom?: boolean;
+  start?: boolean;
+  label?: string;
+  alert?: string;
+}
+
+export const Toast = component$((props: ToastProps) => {
+  const { label, top, start, center, end, middle, bottom, alert, ...rest } =
+    props;
+
+  return (
+    <div class="form-control">
+      <label class="label cursor-pointer">
+        <div
+          style={{
+            position: 'relative',
+            border: 'solid',
+            width: '480px',
+            height: '240px',
+            borderRadius: '12px',
+            background: 'rgb(220,220,220)',
+          }}
+        >
+          <HeadlessToast
+            alert={alert}
+            label={label}
+            class={`toast ${start && 'toast-start'} ${top && 'toast-top'} ${
+              center && 'toast-center'
+            } ${end && 'toast-end'} ${middle && 'toast-middle'} ${
+              bottom && 'toast-bottom'
+            }`}
+            {...rest}
+          />
+        </div>
+      </label>
+    </div>
+  );
+});
diff --git a/packages/daisy/src/index.ts b/packages/daisy/src/index.ts
index 7b09d5643..9bcfbec31 100644
--- a/packages/daisy/src/index.ts
+++ b/packages/daisy/src/index.ts
@@ -6,5 +6,6 @@ export * from './components/drawer/drawer';
 export * from './components/popover/popover';
 export * from './components/rating/rating';
 export * from './components/tabs';
+export * from './components/toast/toast';
 export * from './components/toggle/toggle';
 export * from './components/tooltip/tooltip';
diff --git a/packages/headless/src/components/toast/toast.tsx b/packages/headless/src/components/toast/toast.tsx
new file mode 100644
index 000000000..80b802adc
--- /dev/null
+++ b/packages/headless/src/components/toast/toast.tsx
@@ -0,0 +1,32 @@
+import { component$ } from '@builder.io/qwik';
+interface ToastProps {
+  value?: string;
+  /**
+   * The controlled state of the toast.
+   */
+
+  label?: string;
+  alert?: string;
+  /**
+   * The state of the toast when initially rendered. Use `defaultPressed`
+   * if you do not need to control the state of the toast.
+   * @defaultValue false
+   */
+}
+
+export const Toast = component$((props: ToastProps) => {
+  const { alert = 'info', label, ...toastProps } = props;
+
+  return (
+    <div class="toast" style={{ position: 'absolute' }} {...toastProps}>
+      <div
+        class={`alert alert-${alert}`}
+        style={{ background: alert === 'error' ? 'red' : 'auto' }}
+      >
+        <div>
+          <span>{label}</span>
+        </div>
+      </div>
+    </div>
+  );
+});
diff --git a/packages/headless/src/index.ts b/packages/headless/src/index.ts
index 020e5aaf5..97521cdf2 100644
--- a/packages/headless/src/index.ts
+++ b/packages/headless/src/index.ts
@@ -6,6 +6,7 @@ export * from './components/drawer';
 export * from './components/popover';
 export * from './components/rating/rating';
 export * from './components/tabs/tabs';
+export * from './components/toast/toast';
 export * from './components/toggle/toggle';
 export * from './components/tooltip/tooltip';
 export * as Select from './components/select/select';
diff --git a/packages/website/src/components/menu/menu.tsx b/packages/website/src/components/menu/menu.tsx
index 4839efb27..d60d104e3 100644
--- a/packages/website/src/components/menu/menu.tsx
+++ b/packages/website/src/components/menu/menu.tsx
@@ -26,6 +26,7 @@ export const Menu = component$<Props>(({ onClose$ }) => {
     { label: 'Popover', path: `/docs/${appState.theme.toLowerCase()}/popover` },
     { label: 'Select', path: `/docs/${appState.theme.toLowerCase()}/select` },
     { label: 'Tabs', path: `/docs/${appState.theme.toLowerCase()}/tabs` },
+    { label: 'Toast', path: `/docs/${appState.theme.toLowerCase()}/toast` },
     { label: 'Toggle', path: `/docs/${appState.theme.toLowerCase()}/toggle` },
     { label: 'Tooltip', path: `/docs/${appState.theme.toLowerCase()}/tooltip` },
   ];
diff --git a/packages/website/src/routes/docs/daisy/toast/index.tsx b/packages/website/src/routes/docs/daisy/toast/index.tsx
new file mode 100644
index 000000000..e656d18e1
--- /dev/null
+++ b/packages/website/src/routes/docs/daisy/toast/index.tsx
@@ -0,0 +1,25 @@
+import { component$ } from '@builder.io/qwik';
+import { Toast } from '@qwik-ui/theme-daisy';
+
+export default component$(() => {
+  return (
+    <>
+      <h2>This is the documentation for the Toast</h2>
+      <h1>toast with alert inside</h1>
+      <Toast label="New Message" alert="success" />
+      <h1>toast with top & start attributes</h1>
+      <Toast label="Errored" top start alert="error" />
+      <h1>toast with top & center attributes</h1>
+      <Toast label="Information" top center alert="info" />
+      <h1>toast with top & end attributes</h1>
+      <Toast
+        label="You should probably think twice about it"
+        top
+        end
+        alert="warning"
+      />
+      <h1>toast with middle & start attributes</h1>
+      <Toast label="New Message" start middle />
+    </>
+  );
+});
diff --git a/packages/website/src/routes/docs/headless/toast/index.tsx b/packages/website/src/routes/docs/headless/toast/index.tsx
new file mode 100644
index 000000000..b6acb9161
--- /dev/null
+++ b/packages/website/src/routes/docs/headless/toast/index.tsx
@@ -0,0 +1,11 @@
+import { component$ } from '@builder.io/qwik';
+import { Toast } from '@qwik-ui/headless';
+
+export default component$(() => {
+  return (
+    <>
+      <h2>This is the documentation for the Toast</h2>
+      <Toast />
+    </>
+  );
+});

From 117d26ed8faec3da1cc4167440b53ffb66c22f9a Mon Sep 17 00:00:00 2001
From: itaim18 <37772742+itaim18@users.noreply.github.com>
Date: Sat, 18 Feb 2023 21:52:24 +0200
Subject: [PATCH 2/3] feat(fix last commit: toast comp.): changing by the
 review advices

commit #157
---
 .../src/components/toast/daisy.config.ts      | 16 ++++
 packages/daisy/src/components/toast/toast.tsx | 85 +++++++++++--------
 .../headless/src/components/toast/toast.tsx   | 26 ++----
 .../docs/daisy/toast/ToastContainer.tsx       | 22 +++++
 .../src/routes/docs/daisy/toast/index.tsx     | 41 +++++----
 5 files changed, 121 insertions(+), 69 deletions(-)
 create mode 100644 packages/daisy/src/components/toast/daisy.config.ts
 create mode 100644 packages/website/src/routes/docs/daisy/toast/ToastContainer.tsx

diff --git a/packages/daisy/src/components/toast/daisy.config.ts b/packages/daisy/src/components/toast/daisy.config.ts
new file mode 100644
index 000000000..5066429fe
--- /dev/null
+++ b/packages/daisy/src/components/toast/daisy.config.ts
@@ -0,0 +1,16 @@
+export const daisyConfig = {
+  variants: {
+    info: 'alert-info',
+    success: 'alert-success',
+    warning: 'alert-warning',
+    error: 'alert-error',
+  },
+  positions: {
+    top: 'toast-top',
+    end: 'toast-end',
+    start: 'toast-start',
+    middle: 'toast-middle',
+    bottom: 'toast-bottom',
+    center: 'toast-center',
+  },
+};
diff --git a/packages/daisy/src/components/toast/toast.tsx b/packages/daisy/src/components/toast/toast.tsx
index e488f7758..b9cde4827 100644
--- a/packages/daisy/src/components/toast/toast.tsx
+++ b/packages/daisy/src/components/toast/toast.tsx
@@ -1,47 +1,58 @@
 import { component$ } from '@builder.io/qwik';
 import { Toast as HeadlessToast } from '@qwik-ui/headless';
+import { clsq } from '@qwik-ui/shared';
+import { daisyConfig } from './daisy.config';
 
-interface ToastProps {
-  class?: string;
+export type DaisyToastVariants = 'info' | 'success' | 'warning' | 'error';
+export type DaisyToastProps = {
+  variant?: DaisyToastVariants;
   top?: boolean;
-  center?: boolean;
   end?: boolean;
+  start?: boolean;
   middle?: boolean;
   bottom?: boolean;
-  start?: boolean;
+  center?: boolean;
+  class?: string;
   label?: string;
-  alert?: string;
-}
+};
 
-export const Toast = component$((props: ToastProps) => {
-  const { label, top, start, center, end, middle, bottom, alert, ...rest } =
-    props;
+export type ToastProps = DaisyToastProps;
+export const Toast = component$(
+  ({
+    class: classNames,
+    label = 'New message',
+    variant = 'info',
+    top,
+    start,
+    center,
+    end,
+    middle,
+    bottom,
+    ...rest
+  }: ToastProps) => {
+    const { variants, positions } = daisyConfig;
 
-  return (
-    <div class="form-control">
-      <label class="label cursor-pointer">
-        <div
-          style={{
-            position: 'relative',
-            border: 'solid',
-            width: '480px',
-            height: '240px',
-            borderRadius: '12px',
-            background: 'rgb(220,220,220)',
-          }}
-        >
-          <HeadlessToast
-            alert={alert}
-            label={label}
-            class={`toast ${start && 'toast-start'} ${top && 'toast-top'} ${
-              center && 'toast-center'
-            } ${end && 'toast-end'} ${middle && 'toast-middle'} ${
-              bottom && 'toast-bottom'
-            }`}
-            {...rest}
-          />
-        </div>
-      </label>
-    </div>
-  );
-});
+    return (
+      <div
+        class={clsq(
+          'toast absolute',
+          {
+            [positions.top]: top,
+            [positions.middle]: middle,
+            [positions.center]: center,
+            [positions.bottom]: bottom,
+            [positions.end]: end,
+            [positions.start]: start,
+          },
+          classNames
+        )}
+      >
+        <HeadlessToast
+          label={label}
+          class={clsq('alert', variants[variant])}
+          {...rest}
+        />
+      </div>
+    );
+  }
+);
diff --git a/packages/headless/src/components/toast/toast.tsx b/packages/headless/src/components/toast/toast.tsx
index 80b802adc..54556cafc 100644
--- a/packages/headless/src/components/toast/toast.tsx
+++ b/packages/headless/src/components/toast/toast.tsx
@@ -1,12 +1,11 @@
 import { component$ } from '@builder.io/qwik';
 interface ToastProps {
-  value?: string;
   /**
    * The controlled state of the toast.
    */
 
   label?: string;
-  alert?: string;
+  class?: string;
   /**
    * The state of the toast when initially rendered. Use `defaultPressed`
    * if you do not need to control the state of the toast.
@@ -14,19 +13,12 @@ interface ToastProps {
    */
 }
 
-export const Toast = component$((props: ToastProps) => {
-  const { alert = 'info', label, ...toastProps } = props;
-
-  return (
-    <div class="toast" style={{ position: 'absolute' }} {...toastProps}>
-      <div
-        class={`alert alert-${alert}`}
-        style={{ background: alert === 'error' ? 'red' : 'auto' }}
-      >
-        <div>
-          <span>{label}</span>
-        </div>
+export const Toast = component$(
+  ({ label = 'New Message', ...toastProps }: ToastProps) => {
+    return (
+      <div {...toastProps}>
+        <span>{label}</span>
       </div>
-    </div>
-  );
-});
+    );
+  }
+);
diff --git a/packages/website/src/routes/docs/daisy/toast/ToastContainer.tsx b/packages/website/src/routes/docs/daisy/toast/ToastContainer.tsx
new file mode 100644
index 000000000..88c0f715c
--- /dev/null
+++ b/packages/website/src/routes/docs/daisy/toast/ToastContainer.tsx
@@ -0,0 +1,22 @@
+import { component$ } from '@builder.io/qwik';
+import { Slot } from '@builder.io/qwik';
+export default component$(() => {
+  return (
+    <div class="form-control">
+      <label class="label cursor-pointer">
+        <div
+          style={{
+            position: 'relative',
+            border: 'solid',
+            width: '480px',
+            height: '240px',
+            borderRadius: '12px',
+            background: 'rgb(220,220,220)',
+          }}
+        >
+          <Slot />
+        </div>
+      </label>
+    </div>
+  );
+});
diff --git a/packages/website/src/routes/docs/daisy/toast/index.tsx b/packages/website/src/routes/docs/daisy/toast/index.tsx
index e656d18e1..84d998bdc 100644
--- a/packages/website/src/routes/docs/daisy/toast/index.tsx
+++ b/packages/website/src/routes/docs/daisy/toast/index.tsx
@@ -1,25 +1,36 @@
 import { component$ } from '@builder.io/qwik';
 import { Toast } from '@qwik-ui/theme-daisy';
+import ToastContainer from './ToastContainer';
 
 export default component$(() => {
   return (
     <>
       <h2>This is the documentation for the Toast</h2>
-      <h1>toast with alert inside</h1>
-      <Toast label="New Message" alert="success" />
-      <h1>toast with top & start attributes</h1>
-      <Toast label="Errored" top start alert="error" />
-      <h1>toast with top & center attributes</h1>
-      <Toast label="Information" top center alert="info" />
-      <h1>toast with top & end attributes</h1>
-      <Toast
-        label="You should probably think twice about it"
-        top
-        end
-        alert="warning"
-      />
-      <h1>toast with middle & start attributes</h1>
-      <Toast label="New Message" start middle />
+      <h1>Toast with alert of success inside</h1>
+      <ToastContainer>
+        <Toast label="New Message" bottom end variant="success" />
+      </ToastContainer>
+      <h1>Error toast with top & start attributes</h1>
+      <ToastContainer>
+        <Toast label="Errored" top start variant="error" />
+      </ToastContainer>
+      <h1>Info toast with top & end attributes</h1>
+      <ToastContainer>
+        <Toast label="Information" top center />
+      </ToastContainer>
+      <h1>Warning toast with middle & start attributes</h1>
+      <ToastContainer>
+        <Toast
+          label="You should probably think twice about it"
+          top
+          end
+          variant="warning"
+        />
+      </ToastContainer>
+      <h1>Toast with top & center attributes</h1>
+      <ToastContainer>
+        <Toast label="New Message" start middle />
+      </ToastContainer>
     </>
   );
 });

From b191260a0b32759c8f03117ce7aa9afc639670ea Mon Sep 17 00:00:00 2001
From: Giorgio Boa <35845425+gioboa@users.noreply.github.com>
Date: Sat, 18 Feb 2023 22:05:50 +0100
Subject: [PATCH 3/3] fix ToastProps

---
 packages/headless/src/components/toast/toast.tsx | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/packages/headless/src/components/toast/toast.tsx b/packages/headless/src/components/toast/toast.tsx
index 54556cafc..fbfe16ec5 100644
--- a/packages/headless/src/components/toast/toast.tsx
+++ b/packages/headless/src/components/toast/toast.tsx
@@ -3,14 +3,8 @@ interface ToastProps {
   /**
    * The controlled state of the toast.
    */
-
   label?: string;
   class?: string;
-  /**
-   * The state of the toast when initially rendered. Use `defaultPressed`
-   * if you do not need to control the state of the toast.
-   * @defaultValue false
-   */
 }
 
 export const Toast = component$(