release v0.2 with form-type Feelbacks

SDKs bumped to v0.2.0 - feat: added FeelbackMessage and FeelbackTaggedMessage components - feat: style improvements with per-component styling possible Samples - added nextjs with bare template - added nextra with doc template
giuseppelt · May 29, 2023 · 289dd08 · 289dd08
1 parent e23023a
commit 289dd08
Show file tree

Hide file tree

Showing 85 changed files with 5,449 additions and 733 deletions.
diff --git a/.vscode/cspell.json b/.vscode/cspell.json
@@ -49,6 +49,7 @@
         "mjml",
         "mobx",
         "nestjs",
+        "nextra",
         "nocheck",
         "nodenext",
         "outdir",

diff --git a/.vscode/tasks.json b/.vscode/tasks.json
@@ -56,6 +56,20 @@
             "presentation": {
                 "reveal": "never"
             }
+        },
+        {
+            "label": "example docusaurus",
+            "type": "npm",
+            "script": "start",
+            "group": "build",
+            "path": "${workspaceFolder}/samples/docusaurus",
+            "options": {
+                "cwd": "${workspaceFolder}/samples/docusaurus"
+            },
+            "isBackground": true,
+            "presentation": {
+                "reveal": "never"
+            }
         }
     ]
 }
diff --git a/README.md b/README.md
@@ -8,7 +8,7 @@ Feelback is a service allowing to collect any type of feedback for your content,
 ## Repository structure
 This repository includes:
 - Integration SDKs with many frameworks and site builders -- dir [packages](packages)
-- Integrations examples with complete projects -- dir [samples](samples)
+- Integration examples with complete projects -- dir [samples](samples)
 
 
 ## Contributing

diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
     "watch:ts": "tsc --build tsconfig.dev.json --watch --incremental --force"
   },
   "devDependencies": {
-    "@types/node": "^18.16.1",
+    "@types/node": "^18.16.16",
     "ts-node": "^10.9.1",
     "typescript": "^5.0.4"
   }

diff --git a/packages/astro/CHANGELOG.md b/packages/astro/CHANGELOG.md
@@ -1,4 +1,10 @@
 # astro-feelback changelog
 
+## 0.2.0 Major release
+- feat: added FeelbackMessage and FeelbackTaggedMessage components
+- feat: style improvements with per-component styling possible
+
+Check the [documentation](https://www.feelback.dev/docs) for full details.
+
 ## 0.1.0 Initial release
 Check the [readme](readme.md) for the documentation.
diff --git a/packages/astro/components/FeelbackForm.astro b/packages/astro/components/FeelbackForm.astro
@@ -0,0 +1,25 @@
+---
+import type { TargetContent } from "../src";
+import Component from "./parts/Component.astro";
+import SwitchResult from "./parts/SwitchResult.astro";
+
+type Props = TargetContent & {
+  class?: string;
+  title?: string;
+  textAnswer?: string;
+};
+
+const {
+  class: className,
+  title = "Send feedback",
+  textAnswer = "Thanks for your feedback",
+  ...target
+  /* */
+} = Astro.props;
+---
+
+<Component component="form" class={className} {...target}>
+  <SwitchResult textAnswer={textAnswer}>
+    <slot />
+  </SwitchResult>
+</Component>
diff --git a/packages/astro/components/FeelbackMessage.astro b/packages/astro/components/FeelbackMessage.astro
@@ -0,0 +1,76 @@
+---
+import type { TargetContent } from "../src";
+import Component from "./parts/Component.astro";
+import SwitchResult from "./parts/SwitchResult.astro";
+import TriggerButton from "./parts/TriggerButton.astro";
+import MessageForm from "./forms/MessageForm.astro";
+import FeelbackForm from "./FeelbackForm.astro";
+
+type Props = TargetContent & {
+  layout?: "button-switch" | "button-dialog" | "inline";
+  title?: string;
+  label?: string;
+  minLength?: number;
+  maxLength?: number;
+  textAnswer?: string;
+  placeholder?: string;
+};
+
+const {
+  layout = "inline",
+  label = "Send feedback",
+  title = "Send feedback",
+  textAnswer = "Thanks for your feedback",
+  placeholder = "Type your message",
+  minLength,
+  maxLength,
+  ...target
+} = Astro.props;
+
+const behavior = layout === "button-dialog" ? "dialog" : layout === "button-switch" ? "switch" : undefined;
+
+const formAttrs = {
+  title,
+  placeholder,
+  minLength,
+  maxLength,
+};
+
+const btnCancelAttrs =
+  layout === "button-switch"
+    ? {
+        "data-behavior-action": "switch",
+        "data-behavior-target": ".trigger-btn",
+        "data-behavior-source": ".feelback-form",
+      }
+    : {
+        "data-behavior-action": "cancel",
+      };
+---
+
+{
+  (layout === "button-dialog" || layout === "button-switch") && (
+    <Component component="form" class={`feelback-message layout-${layout}`} behavior={behavior} {...target}>
+      <SwitchResult textAnswer={textAnswer}>
+        <TriggerButton
+          action={layout === "button-dialog" ? "dialog" : "switch"}
+          target=".feelback-form"
+          label={label}
+        />
+        <MessageForm {...formAttrs} class={`hidden${layout === "button-dialog" ? " dialog" : ""}`}>
+          <button slot="btn-cancel" class="feelback-btn btn-cancel" title="Cancel" {...btnCancelAttrs}>
+            Cancel
+          </button>
+        </MessageForm>
+      </SwitchResult>
+    </Component>
+  )
+}
+
+{
+  layout === "inline" && (
+    <FeelbackForm class="feelback-message layout-inline" textAnswer={textAnswer} {...target}>
+      <MessageForm {...formAttrs} />
+    </FeelbackForm>
+  )
+}
diff --git a/packages/astro/components/FeelbackPulse.astro b/packages/astro/components/FeelbackPulse.astro
@@ -2,7 +2,7 @@
 import type { TargetContent } from "../src";
 import ButtonValueList from "./parts/ButtonValueList.astro";
 import type { PresetName as ButtonsPresetName } from "./parts/ButtonValueList.astro";
-import Container from "./parts/Container.astro";
+import Component from "./parts/Component.astro";
 
 type PresetName = "heart" | "star" | "like";
 
@@ -13,11 +13,20 @@ type Props = TargetContent & {
   revokable?: boolean;
 };
 
-const { revokable, showCount, showTitle, preset = "heart", ...target } = Astro.props;
+const {
+  preset = "heart",
+  revokable,
+  showCount,
+  showTitle,
+  ...target
+  /* */
+} = Astro.props;
 
 const items = typeof preset === "string" ? (`pulse-${preset}` as ButtonsPresetName) : ([["+", ...preset]] as const);
 ---
 
-<Container {...{...target, revokable, showCount}}>
-  <ButtonValueList {...{items, showTitle, showCount}} />
-</Container>
+<Component component="buttons" class="feelback-pulse" {...{ ...target, revokable, showCount }}>
+  <div class="feelback-q">
+    <ButtonValueList {...{ items, showTitle, showCount }} />
+  </div>
+</Component>
diff --git a/packages/astro/components/FeelbackReaction.astro b/packages/astro/components/FeelbackReaction.astro
@@ -4,19 +4,20 @@ import type { ButtonItem } from "./parts/ButtonValueList.astro";
 import FeelbackReactionPicker from "./FeelbackReactionPicker.astro";
 import FeelbackReactionList from "./FeelbackReactionList.astro";
 
-type PresetName = "sentiment" | "github" | "facebook";
+type PresetName = "feeling" | "github" | "facebook";
 
 type Props = TargetContent & {
   preset: PresetName | readonly ButtonItem[];
   layout?: "picker" | "list";
+  pickerTitle?: string;
   showCount?: boolean;
   showTitle?: boolean;
   revokable?: boolean;
   textQuestion?: string;
   textAnswer?: string;
 };
 
-const { layout = "list", ...props } = Astro.props;
+const { layout = "list", pickerTitle, ...props } = Astro.props;
 ---
 
-{layout === "list" ? <FeelbackReactionList {...props} /> : <FeelbackReactionPicker {...props} />}
+{layout === "list" ? <FeelbackReactionList {...props} /> : <FeelbackReactionPicker title={pickerTitle} {...props} />}
diff --git a/packages/astro/components/FeelbackReactionList.astro b/packages/astro/components/FeelbackReactionList.astro
@@ -2,9 +2,10 @@
 import type { TargetContent } from "../src";
 import type { ButtonItem } from "./parts/ButtonValueList.astro";
 import ButtonValueList from "./parts/ButtonValueList.astro";
-import SwitchContainer from "./parts/SwitchContainer.astro";
+import Component from "./parts/Component.astro";
+import SwitchResult from "./parts/SwitchResult.astro";
 
-type PresetName = "sentiment" | "github" | "facebook";
+type PresetName = "feeling" | "github" | "facebook";
 
 type Props = TargetContent & {
   preset: PresetName | readonly ButtonItem[];
@@ -26,6 +27,11 @@ const {
 } = Astro.props;
 ---
 
-<SwitchContainer {...{...target,revokable,showCount,textQuestion,textAnswer}}>
-  <ButtonValueList {...{items, showTitle,showCount}} />
-</SwitchContainer>
+<Component component="buttons" class="feelback-reaction layout-list" {...{ ...target, revokable, showCount }}>
+  <SwitchResult textAnswer={textAnswer}>
+    <div class="feelback-q">
+      {textQuestion && <span class="feelback-text">{textQuestion}</span>}
+      <ButtonValueList {...{ items, showTitle, showCount }} />
+    </div>
+  </SwitchResult>
+</Component>
diff --git a/packages/astro/components/FeelbackReactionPicker.astro b/packages/astro/components/FeelbackReactionPicker.astro
@@ -2,27 +2,30 @@
 import type { TargetContent } from "../src";
 import type { ButtonItem } from "./parts/ButtonValueList.astro";
 import ButtonValueList from "./parts/ButtonValueList.astro";
-import Container from "./parts/Container.astro";
+import Component from "./parts/Component.astro";
 import iconHappy from "@feelback/js/icons/icon-happy.svg?raw";
 
-type PresetName = "sentiment" | "github" | "facebook";
+type PresetName = "feeling" | "github" | "facebook";
 
 type Props = TargetContent & {
   preset: PresetName | readonly ButtonItem[];
+  title?: string;
   showCount?: boolean;
   showTitle?: boolean;
   revokable?: boolean;
 };
 
-const { revokable, showCount = true, showTitle, preset: items, ...target } = Astro.props;
+const { revokable, title = "Pick a reaction", showCount = true, showTitle, preset: items, ...target } = Astro.props;
 ---
 
-<Container {...{...target,revokable,showCount}}>
-  <button class="feelback-btn btn-picker">
-    <span class="feelback-icon" set:html={iconHappy} />
-  </button>
-  <div class="picker">
-    <ButtonValueList {...{items, showTitle}} />
+<Component component="buttons" class="feelback-reaction layout-picker" {...{ ...target, revokable, showCount }}>
+  <div class="feelback-q">
+    <button class="feelback-btn btn-reaction-picker" title={title} data-behavior-action="popup">
+      <span class="feelback-icon" set:html={iconHappy} />
+    </button>
+    <div class="hidden popup">
+      <ButtonValueList class="attached" {...{ items, showTitle }} />
+    </div>
+    <ButtonValueList hideZero {...{ items, showTitle, showCount }} />
   </div>
-  <ButtonValueList {...{items, showTitle,showCount}} hideZero />
-</Container>
+</Component>
diff --git a/packages/astro/components/FeelbackTaggedMessage.astro b/packages/astro/components/FeelbackTaggedMessage.astro
@@ -0,0 +1,79 @@
+---
+import type { TargetContent } from "../src";
+import Component from "./parts/Component.astro";
+import SwitchResult from "./parts/SwitchResult.astro";
+import TriggerButton from "./parts/TriggerButton.astro";
+import TaggedMessageForm, { PresetName } from "./forms/TaggedMessageForm.astro";
+import FeelbackForm from "./FeelbackForm.astro";
+
+type Props = TargetContent & {
+  layout?: "button-switch" | "button-dialog" | "inline";
+  preset?: PresetName;
+  title?: string;
+  label?: string;
+  minLength?: number;
+  maxLength?: number;
+  textAnswer?: string;
+  placeholder?: string;
+};
+
+const {
+  layout = "inline",
+  label = "Send feedback",
+  title = "Send feedback",
+  textAnswer = "Thanks for your feedback",
+  placeholder = "Type your message",
+  preset = "feedback",
+  minLength,
+  maxLength,
+  ...target
+} = Astro.props;
+
+const behavior = layout === "button-dialog" ? "dialog" : layout === "button-switch" ? "switch" : undefined;
+
+const formAttrs = {
+  preset,
+  title,
+  placeholder,
+  minLength,
+  maxLength,
+};
+
+const btnCancelAttrs =
+  layout === "button-switch"
+    ? {
+        "data-behavior-action": "switch",
+        "data-behavior-target": ".trigger-btn",
+        "data-behavior-source": ".feelback-form",
+      }
+    : {
+        "data-behavior-action": "cancel",
+      };
+---
+
+{
+  (layout === "button-dialog" || layout === "button-switch") && (
+    <Component component="form" class={`feelback-tagged-message layout-${layout}`} behavior={behavior} {...target}>
+      <SwitchResult textAnswer={textAnswer}>
+        <TriggerButton
+          action={layout === "button-dialog" ? "dialog" : "switch"}
+          target=".feelback-form"
+          label={label}
+        />
+        <TaggedMessageForm {...formAttrs} class={`hidden${layout === "button-dialog" ? " dialog" : ""}`}>
+          <button slot="btn-cancel" class="feelback-btn btn-cancel" title="Cancel" {...btnCancelAttrs}>
+            Cancel
+          </button>
+        </TaggedMessageForm>
+      </SwitchResult>
+    </Component>
+  )
+}
+
+{
+  layout === "inline" && (
+    <FeelbackForm class="feelback-tagged-message layout-inline" textAnswer={textAnswer} {...target}>
+      <TaggedMessageForm {...formAttrs} />
+    </FeelbackForm>
+  )
+}