feat(callbox): scaffold component - vue3

index.js

@@ -61,6 +61,7 @@ export * from './recipes/leftbar/unread_pill';
 export * from './recipes/conversation_view/feed_item_row';
 export * from './recipes/conversation_view/time_pill';
 export * from './recipes/conversation_view/emoji_row';
+export * from './recipes/leftbar/callbox';
 
 // Mixins
 export * from './common/mixins';

recipes/leftbar/callbox/callbox.mdx

@@ -0,0 +1,48 @@
+import { Canvas, Story, Subtitle, Controls, Meta } from '@storybook/blocks';
+import * as DtRecipeCallboxStories from './callbox.stories.js';
+
+<Meta of={DtRecipeCallboxStories}/>
+
+# DtRecipeCallbox
+
+<Subtitle>
+  Some description of the component functionality.
+</Subtitle>
+
+## Base Style
+
+Some description of how to use the base component, potential gotchas and limitations.
+
+<Canvas of={DtRecipeCallboxStories.Default} />
+
+## Variants
+
+<Canvas of={DtRecipeCallboxStories.Variants} />
+
+## Slots, Props & Events
+
+<Controls />
+
+## Usage
+
+### Import
+
+```jsx
+import { DtRecipeCallbox } from '@dialpad/dialtone-vue';
+```
+
+### With Some Variant
+
+```jsx
+<dt-recipe-callbox
+  some="variant"
+/>
+```
+
+### With Some Other Variant
+
+```jsx
+<dt-recipe-callbox
+  some-other="variant"
+/>
+```

recipes/leftbar/callbox/callbox.stories.js

@@ -0,0 +1,61 @@
+import { createTemplateFromVueFile } from '@/common/storybook_utils';
+import DtRecipeCallbox from './callbox.vue';
+import DtRecipeCallboxDefaultTemplate from './callbox_default.story.vue';
+import DtRecipeCallboxVariantsTemplate from './callbox_variants.story.vue';
+
+export const argTypesData = {
+  // Props: only define things here that cannot be set by jsdoc comments on the component itself.
+
+  // Slots
+
+  /*
+    We use the following naming scheme `<SLOT_NAME>Slot` for slot controls to prevent conflicts with props that share
+    the same name.
+  */
+
+  // Events: Exclude this from the table as event names will automatically be added from the component itself.
+
+};
+
+const decorator = () => ({
+  template: `<div style="background-color: var(--dt-theme-sidebar-color-background)" class="d-wmx264 d-p8"><story />
+  </div>`,
+});
+
+// Set default values at the story level here.
+export const argsData = {
+  title: 'Somebody',
+  avatarFullName: 'Somebody',
+};
+
+// Story Collection
+export default {
+  title: 'Recipes/Leftbar/Callbox',
+  component: DtRecipeCallbox,
+  args: argsData,
+  argTypes: argTypesData,
+  decorators: [decorator],
+  excludeStories: /.*Data$/,
+};
+
+// Templates
+const DefaultTemplate = (args) => createTemplateFromVueFile(
+  args,
+  DtRecipeCallboxDefaultTemplate,
+);
+
+// Stories
+export const Default = {
+  render: DefaultTemplate,
+  args: {},
+};
+
+const VariantsTemplate = (args) => createTemplateFromVueFile(
+  args,
+  DtRecipeCallboxVariantsTemplate,
+);
+
+export const Variants = {
+  render: VariantsTemplate,
+  args: {},
+};

recipes/leftbar/callbox/callbox.test.js

@@ -0,0 +1,107 @@
+import { mount } from '@vue/test-utils';
+import DtRecipeCallbox from './callbox.vue';
+
+/**
+ * Environment Constants variables
+ * Will be always present in every test
+ * @prefix base
+ * @notation base[NAME]
+ */
+const baseProps = {};
+const baseAttrs = {};
+const baseSlots = {};
+const baseProvide = {};
+
+/**
+ * Environment variables
+ * Will be reset after each test
+ * @prefix mock
+ * @notation mock[NAME]
+ */
+let mockProps = {};
+let mockAttrs = {};
+let mockSlots = {};
+let mockProvide = {};
+
+describe('DtRecipeCallbox Tests', () => {
+  /**
+   * Wrappers
+   * Will contain the component and all its necessary children
+   */
+  let wrapper;
+
+  const updateWrapper = () => {
+    wrapper = mount(DtRecipeCallbox, {
+      props: { ...baseProps, ...mockProps },
+      attrs: { ...baseAttrs, ...mockAttrs },
+      slots: { ...baseSlots, ...mockSlots },
+      global: {
+        provide: { ...baseProvide, ...mockProvide },
+      },
+    });
+  };
+
+  /**
+   * Setup
+   * Will prepare the environment for each test
+   */
+  beforeEach(() => {
+    updateWrapper();
+  });
+
+  /**
+   * Teardown
+   * Will reset the environment after each test
+   */
+  afterEach(() => {
+    mockProps = {};
+    mockAttrs = {};
+    mockSlots = {};
+    mockProvide = {};
+  });
+
+  describe('Presentation Tests', () => {
+    /*
+     * Test(s) to ensure that the component is correctly rendering
+     */
+    it('Should render the component', () => {
+      expect(wrapper).toBeDefined();
+    });
+  });
+
+  describe('Accessibility Tests', () => {
+    /*
+     * Test(s) to ensure that the component is accessible
+     */
+    it('Bypass tests', () => {
+      expect(true).toBeTruthy();
+    });
+  });
+
+  describe('Interactivity Tests', () => {
+    /*
+     * Test(s) to ensure that the component correctly handles user input
+     */
+    it('Bypass tests', () => {
+      expect(true).toBeTruthy();
+    });
+  });
+
+  describe('Validation Tests', () => {
+    /*
+     * Test(s) to ensure that custom validators are working as expected
+     */
+    it('Bypass tests', () => {
+      expect(true).toBeTruthy();
+    });
+  });
+
+  describe('Extendability Tests', () => {
+    /*
+     * Test(s) to ensure that the component can be correctly extended
+     */
+    it('Bypass tests', () => {
+      expect(true).toBeTruthy();
+    });
+  });
+});