@stackshift-ui/blockstyle 6.0.2 → 6.0.3

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@stackshift-ui/blockstyle",
   "description": "",
-  "version": "6.0.2",
+  "version": "6.0.3",
   "private": false,
   "sideEffects": false,
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "files": [
-    "dist/**"
+    "dist/**",
+    "src"
   ],
   "author": "WebriQ <info@webriq.com>",
   "devDependencies": {
@@ -33,12 +34,12 @@
   },
   "dependencies": {
     "@portabletext/react": "^3.1.0",
-    "@stackshift-ui/heading": "6.0.2",
     "@stackshift-ui/scripts": "6.0.2",
-    "@stackshift-ui/system": "6.0.2",
-    "@stackshift-ui/link": "6.0.2",
-    "@stackshift-ui/image": "6.0.2",
-    "@stackshift-ui/text": "6.0.2"
+    "@stackshift-ui/system": "6.0.3",
+    "@stackshift-ui/heading": "6.0.3",
+    "@stackshift-ui/text": "6.0.3",
+    "@stackshift-ui/image": "6.0.3",
+    "@stackshift-ui/link": "6.0.3"
   },
   "peerDependencies": {
     "@stackshift-ui/system": ">=0.0.0",

package/src/blockstyle.test.tsx

@@ -0,0 +1,14 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, test } from "vitest";
+import { Blockstyle } from "./blockstyle";
+
+describe.concurrent("blockstyle", () => {
+  afterEach(cleanup);
+
+  test("Common: Blockstyle - test if renders without errors", ({ expect }) => {
+    const clx = "blockStyle-class";
+    render(<Blockstyle className={clx} />);
+
+    expect(screen.getByTestId("div").classList).toContain(clx);
+  });
+});

package/src/blockstyle.tsx

@@ -0,0 +1,31 @@
+import { DefaultComponent, useStackShiftUIComponents } from "@stackshift-ui/system";
+import type { ElementType, HTMLProps, ReactNode } from "react";
+import { PortableText } from "@portabletext/react";
+import { defaultBlockStyle } from "./defaultBlockStyle";
+
+export interface BlockstyleProps extends Omit<HTMLProps<HTMLElement>, "as"> {
+  children?: ReactNode;
+  className?: string;
+  as?: ElementType;
+  content?: any;
+}
+
+const displayName = "Blockstyle";
+
+export const Blockstyle: React.FC<BlockstyleProps> = ({
+  children,
+  className,
+  as,
+  content,
+  ...props
+}) => {
+  const { [displayName]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  return (
+    <Component as={as} className={className} {...props} data-testid={displayName}>
+      {content ? <PortableText value={content} components={defaultBlockStyle} /> : children}
+    </Component>
+  );
+};
+
+Blockstyle.displayName = displayName;

package/src/defaultBlockStyle.tsx

@@ -0,0 +1,85 @@
+import { Heading } from "@stackshift-ui/heading";
+import { Text } from "@stackshift-ui/text";
+import { Link } from "@stackshift-ui/link";
+import { Image } from "@stackshift-ui/image";
+import { PortableTextComponents } from "@portabletext/react";
+
+export type MyPortableTextComponents = PortableTextComponents & {
+  code?: ({ value }: { value: { language?: string; code?: string } }) => JSX.Element;
+};
+
+export const defaultBlockStyle: MyPortableTextComponents = {
+  block: {
+    h1: ({ children }) => (
+      <Heading fontSize="3xl" weight="bold" className="mb-8 leading-normal text-black">
+        {children}
+      </Heading>
+    ),
+    h2: ({ children }) => (
+      <Heading type="h2" weight="bold" fontSize="2xl" className="mb-8 text-black">
+        {children}
+      </Heading>
+    ),
+    h3: ({ children }) => (
+      <Heading type="h3" fontSize="xl" weight="bold" className="mb-8 leading-normal text-black">
+        {children}
+      </Heading>
+    ),
+    h4: ({ children }) => (
+      <Heading type="h4" weight="bold" fontSize="lg" className="mb-8 leading-normal text-black">
+        {children}
+      </Heading>
+    ),
+    normal: ({ children }) => <Text className="mb-8 leading-relaxed">{children}</Text>,
+    blockquote: ({ children }) => (
+      <blockquote className="mb-6 italic leading-loose text-gray-500 px-14">
+        - {children}
+      </blockquote>
+    ),
+  },
+  code: ({ value }) => (
+    <pre data-language={value.language}>
+      <code>{value.code}</code>
+    </pre>
+  ),
+  list: {
+    bullet: ({ children }) => (
+      <ul className="flex flex-col pl-10 mb-8 space-y-4 leading-relaxed list-disc">{children}</ul>
+    ),
+    number: ({ children }) => (
+      <ol className="flex flex-col pl-10 mb-8 space-y-4 leading-relaxed list-decimal">
+        {children}
+      </ol>
+    ),
+  },
+  listItem: {
+    bullet: ({ children }) => <li className="leading-relaxed">{children}</li>,
+    number: ({ children }) => <li className="leading-relaxed">{children}</li>,
+  },
+  marks: {
+    strong: ({ children }) => <strong>{children}</strong>,
+    em: ({ children }) => <em>{children}</em>,
+    code: ({ children }) => <code>{children}</code>,
+    link: ({ children, value }) => (
+      <Link
+        className="hover:text-primary-foreground text-primary"
+        href={value.href}
+        target="_blank"
+        rel="noopener noreferrer">
+        {children}
+      </Link>
+    ),
+  },
+  types: {
+    addImage: ({ value }) => (
+      <Image
+        className="w-full h-full mb-5"
+        width={500}
+        height={500}
+        sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+        src={value?.image}
+        alt={value?.alt ?? value?.image?.asset?._ref}
+      />
+    ),
+  },
+};

package/src/index.ts

@@ -0,0 +1,5 @@
+"use client";
+
+// component exports
+export { Blockstyle } from "./blockstyle";
+export { defaultBlockStyle } from "./defaultBlockStyle";