@onereach/ui-components 2.62.3-beta.1902.0 → 2.63.0-beta.1894.0

package/src/components/or-icon-button-v3/OrIconButton.docs.mdx

@@ -1,9 +1,5 @@
 import { DocsPage } from '@storybook/addon-docs';
 
-```ts
-import { OrIconButtonV3 as OrIconButton } from '@onereach/ui-components';
-```
-
 <DocsPage />
 
 ## Migration Guide from V1

package/src/components/or-icon-button-v3/styles.ts

@@ -45,5 +45,6 @@ export const IconButtonRootColors: Record<IconButtonColor, string[]> = {
     'dark:theme-preset-3-primary-dark',
 
     'theme-foreground-inherit',
+    'dark:theme-foreground-inherit',
   ],
 };

package/src/components/or-icon-v3/OrIcon.docs.mdx

@@ -1,9 +1,5 @@
 import { DocsPage } from '@storybook/addon-docs';
 
-```ts
-import { OrIconV3 as OrIcon } from '@onereach/ui-components';
-```
-
 <DocsPage />
 
 ## Migration Guide from V1

package/src/components/or-inline-input-v3/OrInlineInput.docs.mdx

@@ -1,7 +1,3 @@
 import { DocsPage } from '@storybook/addon-docs';
 
-```ts
-import { OrInlineInputV3 as OrInlineInput } from '@onereach/ui-components';
-```
-
 <DocsPage />

package/src/components/or-inline-textarea-v3/OrInlineTextarea.docs.mdx

@@ -1,7 +1,3 @@
 import { DocsPage } from '@storybook/addon-docs';
 
-```ts
-import { OrInlineTextareaV3 as OrInlineTextarea } from '@onereach/ui-components';
-```
-
 <DocsPage />

package/src/components/or-input-v3/OrInput.docs.mdx

@@ -1,9 +1,5 @@
 import { DocsPage } from '@storybook/addon-docs';
 
-```ts
-import { OrInputV3 as OrInput } from '@onereach/ui-components';
-```
-
 <DocsPage />
 
 ## Migration Guide from V1

package/src/components/or-label-v3/OrLabel.docs.mdx

@@ -1,9 +1,5 @@
 import { DocsPage } from '@storybook/addon-docs';
 
-```ts
-import { OrLabelV3 as OrLabel } from '@onereach/ui-components';
-```
-
 <DocsPage />
 
 ## Migration Guide from V1

package/src/components/or-link-v3/OrLink.docs.mdx

@@ -1,7 +1,3 @@
 import { DocsPage } from '@storybook/addon-docs';
 
-```ts
-import { OrLinkV3 as OrLink } from '@onereach/ui-components';
-```
-
 <DocsPage />

package/src/components/or-loader-v3/OrLoader.docs.mdx

@@ -1,9 +1,5 @@
 import { DocsPage } from '@storybook/addon-docs';
 
-```ts
-import { OrLoaderV3 as OrLoader } from '@onereach/ui-components';
-```
-
 <DocsPage />
 
 ## Migration Guide from V1

package/src/components/or-menu-item-v3/OrMenuItem.docs.mdx

@@ -1,7 +1,3 @@
 import { DocsPage } from '@storybook/addon-docs';
 
-```ts
-import { OrMenuItemV3 as OrMenuItem } from '@onereach/ui-components';
-```
-
 <DocsPage />

package/src/components/or-menu-v3/OrMenu.docs.mdx

@@ -1,7 +1,3 @@
 import { DocsPage } from '@storybook/addon-docs';
 
-```ts
-import { OrMenuV3 as OrMenu } from '@onereach/ui-components';
-```
-
 <DocsPage />

package/src/components/or-modal-v3/OrModal.docs.mdx

@@ -1,9 +1,5 @@
 import { DocsPage } from '@storybook/addon-docs';
 
-```ts
-import { OrModalV3 as OrModal } from '@onereach/ui-components';
-```
-
 <DocsPage />
 
 ## Migration Guide from V1

package/src/components/or-notification-v3/OrNotification.docs.mdx

@@ -1,7 +1,3 @@
 import { DocsPage } from '@storybook/addon-docs';
 
-```ts
-import { OrNotificationV3 as OrNotification } from '@onereach/ui-components';
-```
-
 <DocsPage />

package/src/components/or-overlay-v3/OrOverlay.docs.mdx

@@ -1,9 +1,5 @@
 import { DocsPage } from '@storybook/addon-docs';
 
-```ts
-import { OrOverlayV3 as OrOverlay } from '@onereach/ui-components';
-```
-
 <DocsPage />
 
 ## Migration Guide from V1

package/src/components/or-popover-v3/OrPopover.docs.mdx

@@ -1,9 +1,5 @@
 import { DocsPage } from '@storybook/addon-docs';
 
-```ts
-import { OrPopoverV3 as OrPopover } from '@onereach/ui-components';
-```
-
 <DocsPage />
 
 ## Migration Guide from V1

package/src/components/or-progress-v3/OrProgress.docs.mdx

@@ -1,9 +1,5 @@
 import { DocsPage } from '@storybook/addon-docs';
 
-```ts
-import { OrProgressV3 as OrProgress } from '@onereach/ui-components';
-```
-
 <DocsPage />
 
 ## Migration Guide from V1

package/src/components/or-radio-v3/OrRadio.docs.mdx

@@ -1,9 +1,5 @@
 import { DocsPage } from '@storybook/addon-docs';
 
-```ts
-import { OrRadioV3 as OrRadio } from '@onereach/ui-components';
-```
-
 <DocsPage />
 
 ## Migration Guide from V1

package/src/components/or-rich-text-editor-v3/OrRichTextEditor.docs.mdx

@@ -0,0 +1,16 @@
+import {
+  Title,
+  Subtitle,
+  Description,
+  Primary,
+  ArgsTable,
+  Stories,
+  PRIMARY_STORY
+} from '@storybook/addon-docs';
+
+<Title />
+<Subtitle />
+<Description />
+<Primary />
+<ArgsTable story={PRIMARY_STORY} />
+<Stories />

package/src/components/or-rich-text-editor-v3/OrRichTextEditor.stories3.ts

@@ -0,0 +1,57 @@
+import { Meta, StoryFn } from '@storybook/vue3';
+import { ref } from 'vue-demi';
+import OrRichTextEditorDocs from './OrRichTextEditor.docs.mdx';
+import OrRichTextEditor from './OrRichTextEditor.vue';
+
+export default {
+  title: 'Demo/OrRichTextEditor',
+  component: OrRichTextEditor,
+
+  argTypes: {
+    // Props
+    description: {
+      control: { type: 'text' },
+    },
+    placeholder: {
+      control: { type: 'text' },
+    },
+    modelValue: {
+      control: { type: 'text' },
+    },
+  },
+
+  parameters: {
+    docs: {
+      page: OrRichTextEditorDocs,
+    },
+
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/o7DdkaznUW2PtX4wiSuhhQ/Core?node-id=608%3A2926',
+    },
+  },
+} as Meta<typeof OrRichTextEditor>;
+
+const Template: StoryFn<typeof OrRichTextEditor> = (args) => ({
+  components: {
+    OrRichTextEditor,
+  },
+
+  setup() {
+    // Refs
+    const text = ref('');
+    return {
+      args,
+      text,
+    };
+  },
+
+  template: `
+  <OrRichTextEditor
+  v-bind="args"
+  v-model="text"
+  />
+  `,
+});
+
+export const RichTextEditor = Template.bind({});

package/src/components/or-rich-text-editor-v3/OrRichTextEditor.vue

@@ -0,0 +1,295 @@
+<template>
+  <div
+    ref="root"
+    v-bind="$attrs"
+    :class="rootStyles"
+  >
+    <or-label>
+      {{ description }}
+    </or-label>
+    <div
+      ref="containerRef"
+      :class="containerStyles"
+      @click="handleEditorClick()"
+    >
+      <div :class="toolbarContainerStyles">
+        <div
+          v-for="tool in toolbar"
+          :key="tool"
+          :class="toolbarStyles"
+        >
+          <div
+            v-for="item in tool"
+            :key="item"
+            :class="toolbarButtonStyles(item)"
+          >
+            <or-icon-button
+              :tooltip="{text: iconTooltipsEnum[item], placement: 'top'}"
+              :icon="{icon: iconsEnum[item], variant: 'inherit', size: 's'}"
+              @click="handleToolbarClick(item)"
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        ref="editorRef"
+        :class="editorInputStyles"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, onMounted, onBeforeUnmount, computed, watch } from 'vue-demi';
+import { useClassAttribute } from '../../hooks';
+import { Editor } from '@tiptap/core';
+import StarterKit from '@tiptap/starter-kit';
+import Underline from '@tiptap/extension-underline';
+// import Link from '@tiptap/extension-link';
+import Highlight from '@tiptap/extension-highlight';
+import Placeholder from '@tiptap/extension-placeholder';
+import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
+import { OrLabelV3 as OrLabel } from '../or-label-v3';
+import { flatMap } from 'lodash';
+import {
+  EditorContainer,
+  EditorContainerFilled,
+  ToolbarContainer,
+  Toolbar,
+  ToolbarButtonActive,
+  ToolbarButton,
+  EditorInput,
+} from './styles';
+
+export default defineComponent({
+  name: 'OrRichTextEditor',
+
+  components: {
+    OrIconButton,
+    OrLabel,
+  },
+
+  inheritAttrs: false,
+
+  props: {
+    modelValue: {
+      type: String,
+      default: '',
+      required: false,
+    },
+    toolbar: {
+      type: Array,
+      default: () => [['bold', 'italic', 'strike'], ['underline', 'highlight'], ['bulletList', 'orderedList'], ['undo', 'redo']],
+    },
+    description: {
+      type: String,
+      default: '',
+    },
+    placeholder: {
+      type: String,
+      default: 'Write something...',
+    },
+    autofocus: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  emits: ['update:modelValue'],
+
+  setup(props, { emit }) {
+    // Refs
+    let editor = null as Editor | null;
+    const editorRef = ref<HTMLDivElement>();
+    const containerRef = ref<HTMLDivElement>();
+    const isActive = ref<{[key: string]: boolean;}>({});
+    const isFilled = ref<boolean>(false);
+    const iconsEnum = ref<{[key: string]: string;}>({
+      bold: 'format_bold',
+      italic: 'format_italic',
+      underline: 'format_underlined',
+      strike: 'format_strikethrough',
+      bulletList: 'format_list_bulleted',
+      orderedList: 'format_list_numbered',
+      link: 'link',
+      highlight: 'highlight',
+      redo: 'redo',
+      undo: 'undo',
+    });
+
+    const iconTooltipsEnum = ref<{[key: string]: string;}>({
+      bold: 'Bold',
+      italic: 'Italic',
+      underline: 'Underline',
+      strike: 'Strike',
+      bulletList: 'Bulleted List',
+      orderedList: 'Numbered List',
+      link: 'Link',
+      highlight: 'Highlight',
+      redo: 'Redo',
+      undo: 'Undo',
+    });
+
+    onMounted(() => {
+      editor = new Editor({
+        onUpdate: ({ editor }) => {
+          setActiveFormats();
+          const html = editor.getHTML();
+          const text = editor.getText();
+          emit('update:modelValue', text === '' ? text : html);
+          isFilled.value = text !== '';
+        },
+        element: editorRef.value,
+        content: props.modelValue,
+        autofocus: props.autofocus,
+        extensions: [
+          StarterKit,
+          Underline,
+          // Link.configure({
+          //   openOnClick: true,
+          //   linkOnPaste: true,
+          //   protocols: ['ftp', 'mailto'],
+          //   validate: href => /^https?:\/\//.test(href),
+          //   HTMLAttributes: {
+          //     class: 'text-primary cursor-pointer',
+          //   },
+          // }),
+          Highlight,
+          Placeholder
+            .configure({
+              placeholder: props.placeholder,
+              emptyEditorClass: 'is-editor-empty text-outline',
+            }),
+        ],
+        editorProps: {
+          attributes: {
+            class: 'focus:outline-none',
+          },
+        },
+      });
+      setActiveFormats();
+      isFilled.value = props.modelValue !== '';
+    });
+
+    onBeforeUnmount(() => {
+      editor?.destroy();
+    });
+
+    // Methods
+    const handleEditorClick = () => {
+      setActiveFormats();
+      editor?.commands.focus();
+    };
+
+    const handleToolbarClick = (item: string) => {
+      if (item === 'bulletList' || item === 'orderedList') {
+        item === 'bulletList' ? editor?.commands.toggleBulletList() : editor?.commands.toggleOrderedList();
+      }
+      else if (item === 'undo' || item === 'redo') {
+        item === 'undo' ? editor?.commands.undo() : editor?.commands.redo();
+      }
+      else {
+        editor?.chain().focus().toggleMark(item).run();
+      }
+    };
+
+    const setActiveFormats = () => {
+      const toolbarList = flatMap(props.toolbar) as string[];
+      toolbarList.forEach((item) => {
+        isActive.value[item] = editor?.isActive(item) || false;
+      });
+    };
+
+    // Styles
+    const classAttribute = useClassAttribute();
+
+    const rootStyles = computed(() => {
+      return [
+        'or-rich-text-editor',
+        classAttribute.value,
+      ];
+    });
+
+    const containerStyles = computed(() => {
+      return [
+        ...EditorContainer,
+        ...(isFilled.value ? EditorContainerFilled : []),
+      ];
+    });
+
+    const toolbarContainerStyles = computed(() => {
+      return [
+        ...ToolbarContainer,
+      ];
+    });
+
+    const toolbarStyles = computed(() => {
+      return [
+        ...Toolbar,
+      ];
+    });
+
+    const editorInputStyles = computed(() => {
+      return [
+        'tiptap-editor',
+        ...EditorInput,
+      ];
+    });
+
+    const toolbarButtonStyles = (item: string) => {
+      return [
+        // Layout
+        'flex',
+        // Spacing
+        'gap-md',
+        ...isActive.value[item] ? ToolbarButtonActive : ToolbarButton,
+      ];
+    };
+
+    //Effects
+    watch(() => props.modelValue, (value) => {
+      if (value !== editor?.getHTML()) {
+        editor?.commands.setContent(value);
+      }
+    });
+
+    return {
+      editor,
+      editorRef,
+      containerRef,
+      iconsEnum,
+      handleToolbarClick,
+      handleEditorClick,
+      isActive,
+      iconTooltipsEnum,
+      containerStyles,
+      toolbarContainerStyles,
+      toolbarStyles,
+      rootStyles,
+      toolbarButtonStyles,
+      editorInputStyles,
+    };
+  },
+});
+</script>
+
+<style lang="scss">
+.tiptap-editor {
+  ol { //see if editor can not inherit it
+    margin: 0 24px;
+    list-style: decimal;
+  }
+
+  ul {
+    margin: 0 24px;
+    list-style: initial;
+  }
+
+  .is-editor-empty::before {
+    content: attr(data-placeholder);
+    height: 0;
+    pointer-events: none;
+    float: left;
+  }
+}
+</style>

package/src/components/or-rich-text-editor-v3/index.ts

@@ -0,0 +1 @@
+export { default as OrRichTextEditor } from './OrRichTextEditor.vue';

package/src/components/or-rich-text-editor-v3/styles.ts

@@ -0,0 +1,71 @@
+export const EditorContainer: string[] = [
+  // Colors
+  'border-disabled',
+  'dark:border-outline-dark',
+  'focus-within:theme-border-1-primary',
+  'dark:focus-within:theme-border-1-primary-dark',
+  'focus-within:bg-primary-opacity-0-08',
+  'dark:focus-within:bg-primary-opacity-0-08-dark',
+  'focus-within:theme-outline-primary',
+  'dark:focus-within:theme-outline-primary-dark',
+
+  // Sizing
+  'border-1',
+  'rounded-md',
+];
+
+export const EditorContainerFilled: string[] = [
+  //Colors
+  'bg-primary-opacity-0-08',
+  'dark:bg-primary-opacity-0-08-dark',
+];
+
+export const ToolbarContainer: string[] = [
+  // Layout
+  'flex',
+  //Spacing
+  'py-sm',
+  //Sizing
+  'border-b-1',
+  //Colors
+  'border-b-disabled',
+  'dark:border-b-outline-dark',
+];
+
+export const Toolbar: string[] = [
+  // Layout
+  'flex',
+  // Spacing
+  'px-sm',
+  'gap-md',
+  // Sizing
+  'border-r-1',
+  //Colors
+  'border-r-disabled',
+  'dark:border-r-outline-dark',
+  // Last child
+  'last-of-type:border-none',
+];
+
+export const ToolbarButton: string[] = [
+  // Typography
+  'text-on-disabled',
+  'dark:text-outline-dark',
+];
+
+export const ToolbarButtonActive: string[] = [
+  // Typography
+  'text-on-background',
+  'dark:text-on-background-dark',
+];
+
+export const EditorInput: string[] = [
+  // Spacing
+  'p-sm',
+  // Typography
+  'typography-body-2-regular',
+  'text-on-background',
+  'dark:text-on-background-dark',
+  // Sizing
+  'min-h-[88px]',
+];

package/src/components/or-search-v3/OrSearch.docs.mdx

@@ -1,9 +1,5 @@
 import { DocsPage } from '@storybook/addon-docs';
 
-```ts
-import { OrSearchV3 as OrSearch } from '@onereach/ui-components';
-```
-
 <DocsPage />
 
 ## Migration Guide from V1

package/src/components/or-select-v3/OrSelect.docs.mdx

@@ -1,9 +1,5 @@
 import { DocsPage } from '@storybook/addon-docs';
 
-```ts
-import { OrSelectV3 as OrSelect } from '@onereach/ui-components';
-```
-
 <DocsPage />
 
 ## Migration Guide from V1

package/src/components/or-sidebar-v3/OrSidebar.docs.mdx

@@ -1,7 +1,3 @@
 import { DocsPage } from '@storybook/addon-docs';
 
-```ts
-import { OrSidebarV3 as OrSidebar } from '@onereach/ui-components';
-```
-
 <DocsPage />

package/src/components/or-skeleton-v3/OrSkeleton.docs.mdx

@@ -1,13 +1,5 @@
 import { DocsPage } from '@storybook/addon-docs';
 
-```ts
-import {
-    OrSkeletonCircleV3 as OrSkeletonCircle,
-    OrSkeletonRectV3 as OrSkeletonRect,
-    OrSkeletonTextV3 as OrSkeletonText,
-} from '@onereach/ui-components';
-```
-
 <DocsPage />
 
 ## Migration Guide from V1

package/src/components/or-switch-v3/OrSwitch.docs.mdx

@@ -1,7 +1,3 @@
 import { DocsPage } from '@storybook/addon-docs';
 
-```ts
-import { OrSwitchV3 as OrSwitch } from '@onereach/ui-components';
-```
-
 <DocsPage />

package/src/components/or-tab-v3/OrTab.docs.mdx

@@ -1,7 +1,3 @@
 import { DocsPage } from '@storybook/addon-docs';
 
-```ts
-import { OrTabV3 as OrTab } from '@onereach/ui-components';
-```
-
 <DocsPage />

package/src/components/or-tabs-v3/OrTabs.docs.mdx

@@ -1,7 +1,3 @@
 import { DocsPage } from '@storybook/addon-docs';
 
-```ts
-import { OrTabsV3 as OrTabs } from '@onereach/ui-components';
-```
-
 <DocsPage />