Merge pull request #80 from storyblok/feature/replace-sb-types-naming…

…-to-storyblok

feat(types)!: replace sb types naming to storyblok

README.md

@@ -97,7 +97,7 @@ This way the `@storyblok/richtext` is ignorant of framework specific types, avoi
 
 ```ts
 // Vanilla
-const options: SbRichtextOptions<string> = {
+const options: StoryblokRichTextOptions<string> = {
   resolvers: {
     [MarkTypes.LINK]: (node: Node<string>) => {
       return `<button href="${node.attrs?.href}" target="${node.attrs?.target}">${node.children}</button>`
@@ -110,7 +110,7 @@ const html = richTextResolver<string>(options).render(doc)
 
 ```ts
 // Vue
-const options: SbRichtextOptions<VNode> = {
+const options: StoryblokRichTextOptions<VNode> = {
   renderFn: h,
 }
 const root = () => richTextResolver<VNode>(options).render(doc)

coverage/images-optimization.ts.html

@@ -246,7 +246,7 @@ <h1><a href="index.html">All files</a> images-optimization.ts</h1>
 &nbsp;
   function validateAndPushFilterParam(value: number, min: number, max: number, filter: string, filterParams: string[]) {
     if (typeof value !== 'number' || value &lt;= min || value &gt;= max) {
-      console.warn(`[SbRichText] - ${filter.charAt(0).toUpperCase() + filter.slice(1)} value must be a number between ${min} and ${max} (inclusive)`);
+      console.warn(`[StoryblokRichText] - ${filter.charAt(0).toUpperCase() + filter.slice(1)} value must be a number between ${min} and ${max} (inclusive)`);
     } else {
       filterParams.push(`${filter}(${value})`);
     }
@@ -257,13 +257,13 @@ <h1><a href="index.html">All files</a> images-optimization.ts</h1>
         attrs.width = options.width;
         w = options.width;
       } else {
-        console.warn("[SbRichText] - Width value must be a number greater than 0");
+        console.warn("[StoryblokRichText] - Width value must be a number greater than 0");
       }
       if (options.height &amp;&amp; typeof options.height === 'number' &amp;&amp; options.height &gt; 0) {
         attrs.height = options.height;
         h = options.height;
       } else {
-        console.warn("[SbRichText] - Height value must be a number greater than 0");
+        console.warn("[StoryblokRichText] - Height value must be a number greater than 0");
       }
       if(options.loading &amp;&amp; ['lazy', 'eager'].includes(options.loading)) attrs.loading = options.loading;
       if(options.class) attrs.class = options.class;

packages/react/src/StoryblokRichText.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+
+import { forwardRef } from 'react'
+import { convertAttributesInElement } from './utils'
+import { useStoryblokRichTextResolver } from '.'
+import { StoryblokRichTextNode, StoryblokRichTextResolvers } from '@storyblok/richtext'
+
+interface StoryblokRichTextProps {
+  doc:  StoryblokRichTextNode<React.ReactElement> // Try to avoid 'any' by specifying a more accurate type
+  resolvers?: StoryblokRichTextResolvers<React.ReactElement> // Same here for resolvers
+}
+
+// If you're forwarding a ref to StoryblokRichText
+const StoryblokRichText = forwardRef<HTMLDivElement, StoryblokRichTextProps>(({ doc, resolvers }, ref) => {
+  // Assuming useStoryblokRichTextResolver is a hook you've created
+  const { render } = useStoryblokRichTextResolver({
+    resolvers,
+  })
+
+  /* const Root = () => render(doc) */
+  const html = render(doc)
+  const formattedHtml = convertAttributesInElement(html)
+
+  // If you're forwarding a ref, make sure to attach the ref to a DOM element.
+  // For example, wrapping <Root /> in a div and attaching the ref to it:
+  return <div ref={ref}>{formattedHtml}</div>
+})
+
+export default StoryblokRichText

packages/react/src/index.ts

@@ -1,16 +1,16 @@
 import React from 'react'
 import { StoryblokComponent } from '@storyblok/react'
-import type { SbRichTextNode, SbRichTextOptions } from '@storyblok/richtext'
+import type { StoryblokRichTextNode, StoryblokRichTextOptions } from '@storyblok/richtext'
 import { BlockTypes, richTextResolver } from '@storyblok/richtext'
-import SbRichText from './SbRichText'
+import StoryblokRichText from './StoryblokRichText'
 
-function componentResolver(node: SbRichTextNode<React.ReactElement>) {
+function componentResolver(node: StoryblokRichTextNode<React.ReactElement>) {
   // Convert this to use React.createElement or JSX
   // Example with JSX:
   return React.createElement(StoryblokComponent, { blok: node?.attrs?.body[0], id: node.attrs?.id })
 }
 
-export function useSbRichtextResolver(options: SbRichTextOptions<React.ReactElement>) {
+export function useStoryblokRichTextResolver(options: StoryblokRichTextOptions<React.ReactElement>) {
   const mergedOptions = {
     renderFn: React.createElement,
     resolvers: {
@@ -21,4 +21,4 @@ export function useSbRichtextResolver(options: SbRichTextOptions<React.ReactElem
   return richTextResolver(mergedOptions)
 }
 
-export { SbRichText }
+export { StoryblokRichText }

packages/react/vite.config.ts

@@ -26,7 +26,7 @@ export default defineConfig({
   build: {
     lib: {
       entry: 'src/index.ts',
-      name: 'StoryblokRichtext',
+      name: 'StoryblokRichText',
       fileName: format => `storyblok-richtext-react.${format}.js`,
     },
   },

packages/vue/src/components/StoryblokRichText.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { VNode } from 'vue';
+import { useStoryblokRichTextResolver } from '..'
+import { StoryblokRichTextNode } from '@storyblok/richtext';
+import { StoryblokRichTextProps } from '../types'
+
+const props = defineProps<StoryblokRichTextProps>()
+
+const { render } = useStoryblokRichTextResolver({
+  resolvers: props.resolvers,
+})
+
+const root = () => render(props.doc as StoryblokRichTextNode<VNode>)
+</script>
+
+<template>
+  <root />
+</template>

packages/vue/src/index.ts

@@ -2,24 +2,24 @@ import type { VNode } from 'vue'
 import { createTextVNode, h } from 'vue'
 import { RouterLink } from 'vue-router'
 
-import type { SbRichTextNode, SbRichTextNodeResolver, SbRichTextOptions } from '@storyblok/richtext'
+import type { StoryblokRichTextNode, StoryblokRichTextNodeResolver, StoryblokRichTextOptions } from '@storyblok/richtext'
 import { BlockTypes, MarkTypes, richTextResolver } from '@storyblok/richtext'
 import { StoryblokComponent } from '@storyblok/vue'
-import SbRichText from './components/SbRichText.vue'
+import StoryblokRichText from './components/StoryblokRichText.vue'
 
-const componentResolver: SbRichTextNodeResolver<VNode> = (node: SbRichTextNode<VNode>): VNode => {
+const componentResolver: StoryblokRichTextNodeResolver<VNode> = (node: StoryblokRichTextNode<VNode>): VNode => {
   return h(StoryblokComponent, {
     blok: node?.attrs?.body[0],
     id: node.attrs?.id,
   }, node.children)
 }
 
-export function useSbRichtextResolver(options: SbRichTextOptions<VNode>) {
-  const mergedOptions: SbRichTextOptions<VNode> = {
+export function useStoryblokRichTextResolver(options: StoryblokRichTextOptions<VNode>) {
+  const mergedOptions: StoryblokRichTextOptions<VNode> = {
     renderFn: h,
     textFn: createTextVNode,
     resolvers: {
-      [MarkTypes.LINK]: (node: SbRichTextNode<VNode>) => {
+      [MarkTypes.LINK]: (node: StoryblokRichTextNode<VNode>) => {
         return node.attrs?.linktype === 'STORY'
           ? h(RouterLink, {
             to: node.attrs?.href,
@@ -37,4 +37,4 @@ export function useSbRichtextResolver(options: SbRichTextOptions<VNode>) {
   return richTextResolver<VNode>(mergedOptions)
 }
 
-export { SbRichText }
+export { StoryblokRichText }

packages/vue/src/types/index.ts

@@ -1,7 +1,7 @@
 import { VNode } from 'vue';
-import { SbRichTextDocumentNode, SbRichTextResolvers } from '@storyblok/richtext';
+import { StoryblokRichTextDocumentNode, StoryblokRichTextResolvers } from '@storyblok/richtext';
 
-export interface SbRichTextProps {
-  doc: SbRichTextDocumentNode;
-  resolvers: SbRichTextResolvers<VNode>
+export interface StoryblokRichTextProps {
+  doc: StoryblokRichTextDocumentNode;
+  resolvers: StoryblokRichTextResolvers<VNode>
 }

packages/vue/vite.config.ts

@@ -25,7 +25,7 @@ export default defineConfig({
   build: {
     lib: {
       entry: 'src/index.ts',
-      name: 'StoryblokRichtext',
+      name: 'StoryblokRichText',
       fileName: format => `storyblok-richtext-vue.${format}.js`,
     },
   },

playground/react/src/App.tsx

@@ -1,6 +1,6 @@
 import { richTextResolver } from '@storyblok/richtext'
 import { StoryblokComponent, useStoryblok } from '@storyblok/react'
-import { SbRichText } from '@storyblok/react-richtext'
+import { StoryblokRichText } from '@storyblok/react-richtext'
 import './App.css'
 import React from 'react'
 
@@ -464,7 +464,7 @@ function App() {
   console.log('formattedHtml', formattedHtml) */
   return (
     <>
-      <SbRichText doc={story.content.richtext} />
+      <StoryblokRichText doc={story.content.richtext} />
     </>
   )
 }

playground/vanilla/src/main.ts

@@ -1,8 +1,8 @@
 import './style.css'
-import { richTextResolver, type SbRichtextOptions, type SbRichTextDocumentNode, MarkTypes, SbRichTextNode } from '@storyblok/richtext'
+import { richTextResolver, type StoryblokRichTextOptions, type StoryblokRichTextDocumentNode, MarkTypes, StoryblokRichTextNode } from '@storyblok/richtext'
 import StoryblokClient from 'storyblok-js-client'
 
-const doc: SbRichTextDocumentNode = {
+const doc: StoryblokRichTextDocumentNode = {
   type: 'doc',
   content: [
     {
@@ -436,9 +436,9 @@ const story = await client.get('cdn/stories/home', {
 
 const docFromStory = story.data.story.content.richtext
 
-const options: SbRichtextOptions<string> = {
+const options: StoryblokRichTextOptions<string> = {
   resolvers: {
-    [MarkTypes.LINK]: (node: SbRichTextNode<string>) => {
+    [MarkTypes.LINK]: (node: StoryblokRichTextNode<string>) => {
       return `<button href="${node.attrs?.href}" target="${node.attrs?.target}">${node.children}</button>`
     },
   },

playground/vue/src/components/HomeView.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { VNode, createTextVNode, h } from 'vue'
-import { BlockTypes, richTextResolver, SbRichTextDocumentNode, type SbRichTextNode, type SbRichTextOptions} from '@storyblok/richtext'
+import { BlockTypes, richTextResolver, StoryblokRichTextDocumentNode, type StoryblokRichTextNode, type StoryblokRichTextOptions} from '@storyblok/richtext'
 import { RouterLink } from 'vue-router'
-import { SbRichText } from '@storyblok/vue-richtext'
+import { StoryblokRichText } from '@storyblok/vue-richtext'
 import { useStoryblok } from '@storyblok/vue'
 
 import CodeBlock from './CodeBlock.vue'
-const doc: SbRichTextDocumentNode = {
+const doc: StoryblokRichTextDocumentNode = {
   type: 'doc',
   content: [
     {
@@ -372,11 +372,11 @@ const story = await useStoryblok('/home', {
   version: 'draft',
 })
 
-const options : SbRichTextOptions<VNode> = {
+const options : StoryblokRichTextOptions<VNode> = {
   renderFn: h,
   textFn: createTextVNode,
   resolvers: {
-    [BlockTypes.CODE_BLOCK]: (node: SbRichTextNode<VNode>) => {
+    [BlockTypes.CODE_BLOCK]: (node: StoryblokRichTextNode<VNode>) => {
       return h(CodeBlock, {
         class: node?.attrs?.class,
       }, node.children)
@@ -390,5 +390,5 @@ const root = () => richTextResolver<VNode>(options).render(story.value.content.r
 <template>
   <RouterLink to="http://alvarosaburido.dev">About</RouterLink>
 <!--   <root /> -->
-  <SbRichText v-if="story && options.resolvers" :doc="doc" :resolvers="options.resolvers"/>
+  <StoryblokRichText v-if="story && options.resolvers" :doc="doc" :resolvers="options.resolvers"/>
 </template>