@soul-refiner/design-system 0.1.26 → 0.1.28

package/src/components/editor/plugins/text.tsx

@@ -1,137 +1,151 @@
 import React from 'react';
-import { PlateRenderElementProps, createPluginFactory } from '@udecode/plate';
+import {
+  createPluginFactory,
+  PlateElement,
+  PlateElementProps,
+  PlateRenderElementProps,
+} from '@udecode/plate';
 import { H, P } from 'components';
 import * as Elements from '../constants';
 
-const ParagraphElement = ({
-  attributes,
-  nodeProps,
-  children,
-}: PlateRenderElementProps) => {
+export const ParagraphElement = React.forwardRef<
+  React.ElementRef<typeof PlateElement>,
+  PlateElementProps
+>(({ children, ...props }: PlateRenderElementProps, ref) => {
+  const textAlign = (props as any)?.style?.textAlign;
   return (
-    <P {...attributes} {...nodeProps}>
-      {children}
-    </P>
+    <PlateElement asChild ref={ref} {...props}>
+      <>
+        <P as="div" $textAlign={textAlign}>
+          {children}
+        </P>
+      </>
+    </PlateElement>
   );
-};
+});
 
 export const createParagraphPlugin = createPluginFactory({
   key: Elements.ELEMENT_PARAGRAPH,
   type: Elements.ELEMENT_PARAGRAPH,
   isElement: true,
-  component: ParagraphElement,
 });
 
-const HOneElement = ({
-  attributes,
-  nodeProps,
-  children,
-}: PlateRenderElementProps) => {
+export const HOneElement = React.forwardRef<
+  React.ElementRef<typeof PlateElement>,
+  PlateElementProps
+>(({ children, ...props }: PlateRenderElementProps, ref) => {
+  const textAlign = (props as any)?.style?.textAlign;
   return (
-    <H.One {...attributes} {...nodeProps}>
-      {children}
-    </H.One>
+    <PlateElement asChild ref={ref} {...props}>
+      <>
+        <H.One $textAlign={textAlign}>{children}</H.One>
+      </>
+    </PlateElement>
   );
-};
+});
 
 export const createHOnePlugin = createPluginFactory({
   key: Elements.ELEMENT_H1,
   type: Elements.ELEMENT_H1,
   isElement: true,
-  component: HOneElement,
 });
 
-const HTwoElement = ({
-  attributes,
-  nodeProps,
-  children,
-}: PlateRenderElementProps) => {
+export const HTwoElement = React.forwardRef<
+  React.ElementRef<typeof PlateElement>,
+  PlateElementProps
+>(({ children, ...props }: PlateRenderElementProps, ref) => {
+  const textAlign = (props as any)?.style?.textAlign;
   return (
-    <H.Two {...attributes} {...nodeProps}>
-      {children}
-    </H.Two>
+    <PlateElement asChild ref={ref} {...props}>
+      <>
+        <H.Two $textAlign={textAlign}>{children}</H.Two>
+      </>
+    </PlateElement>
   );
-};
+});
 
 export const createHTwoPlugin = createPluginFactory({
   key: Elements.ELEMENT_H2,
   type: Elements.ELEMENT_H2,
   isElement: true,
-  component: HTwoElement,
 });
 
-const HThreeElement = ({
-  attributes,
-  nodeProps,
-  children,
-}: PlateRenderElementProps) => {
+export const HThreeElement = React.forwardRef<
+  React.ElementRef<typeof PlateElement>,
+  PlateElementProps
+>(({ children, ...props }: PlateRenderElementProps, ref) => {
+  const textAlign = (props as any)?.style?.textAlign;
   return (
-    <H.Three {...attributes} {...nodeProps}>
-      {children}
-    </H.Three>
+    <PlateElement asChild ref={ref} {...props}>
+      <>
+        <H.Three $textAlign={textAlign}>{children}</H.Three>
+      </>
+    </PlateElement>
   );
-};
+});
 
 export const createHThreePlugin = createPluginFactory({
   key: Elements.ELEMENT_H3,
   type: Elements.ELEMENT_H3,
   isElement: true,
-  component: HThreeElement,
 });
 
-const HFourElement = ({
-  attributes,
-  nodeProps,
-  children,
-}: PlateRenderElementProps) => {
+export const HFourElement = React.forwardRef<
+  React.ElementRef<typeof PlateElement>,
+  PlateElementProps
+>(({ children, ...props }: PlateRenderElementProps, ref) => {
+  const textAlign = (props as any)?.style?.textAlign;
   return (
-    <H.Four {...attributes} {...nodeProps}>
-      {children}
-    </H.Four>
+    <PlateElement asChild ref={ref} {...props}>
+      <>
+        <H.Four $textAlign={textAlign}>{children}</H.Four>
+      </>
+    </PlateElement>
   );
-};
+});
 
 export const createHFourPlugin = createPluginFactory({
   key: Elements.ELEMENT_H4,
   type: Elements.ELEMENT_H4,
   isElement: true,
-  component: HFourElement,
 });
 
-const HFiveElement = ({
-  attributes,
-  nodeProps,
-  children,
-}: PlateRenderElementProps) => {
+export const HFiveElement = React.forwardRef<
+  React.ElementRef<typeof PlateElement>,
+  PlateElementProps
+>(({ children, ...props }: PlateRenderElementProps, ref) => {
+  const textAlign = (props as any)?.style?.textAlign;
   return (
-    <H.Five {...attributes} {...nodeProps}>
-      {children}
-    </H.Five>
+    <PlateElement asChild ref={ref} {...props}>
+      <>
+        <H.Five $textAlign={textAlign}>{children}</H.Five>
+      </>
+    </PlateElement>
   );
-};
+});
 
 export const createHFivePlugin = createPluginFactory({
   key: Elements.ELEMENT_H5,
   type: Elements.ELEMENT_H5,
   isElement: true,
-  component: HFiveElement,
 });
 
-const HSixElement = ({
-  attributes,
-  nodeProps,
-  children,
-}: PlateRenderElementProps) => {
+export const HSixElement = React.forwardRef<
+  React.ElementRef<typeof PlateElement>,
+  PlateElementProps
+>(({ children, ...props }: PlateRenderElementProps, ref) => {
+  const textAlign = (props as any)?.style?.textAlign;
   return (
-    <H.Six {...attributes} {...nodeProps}>
-      {children}
-    </H.Six>
+    <PlateElement asChild ref={ref} {...props}>
+      <>
+        <H.Six $textAlign={textAlign}>{children}</H.Six>
+      </>
+    </PlateElement>
   );
-};
+});
 
 export const createHSixPlugin = createPluginFactory({
   key: Elements.ELEMENT_H6,
   type: Elements.ELEMENT_H6,
   isElement: true,
-  component: HSixElement,
 });

package/src/components/input/radio/radio.tsx

@@ -18,7 +18,7 @@ export interface RadioProps extends NativeProps {
   checked: boolean;
   disabled?: boolean;
   label?: string;
-  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
   name?: string;
   reversed?: boolean;
   sx?: string;
@@ -37,7 +37,7 @@ const Radio = ({
 }: RadioProps) => {
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     event.stopPropagation();
-    onChange(event);
+    onChange && onChange(event);
   };
 
   return (

package/src/components/surfaces/modal/modal.tsx

@@ -47,6 +47,7 @@ Modal.Trigger = ModalTrigger;
 
 const ModalDismiss = ({
   children: child,
+
   setClosed,
 }: {
   children: React.ReactElement;
@@ -73,6 +74,7 @@ export interface ModalContentProps extends React.PropsWithChildren {
   footer?: React.ReactElement;
   header?: React.ReactElement;
   setClosed?: () => void;
+  sx?: string;
 }
 
 const ModalContent = ({
@@ -81,6 +83,7 @@ const ModalContent = ({
   footer,
   header,
   setClosed,
+  sx,
   ...props
 }: ModalContentProps) => {
   const [open, setOpen] = React.useContext(ModalContext);
@@ -96,7 +99,7 @@ const ModalContent = ({
       $open={open}
       onClick={handleOutsideClick}
     >
-      <Content {...props}>
+      <Content {...props} $sx={sx}>
         {header && (
           <div className="header">
             <div>{header}</div>
@@ -144,7 +147,7 @@ const Wrapper = styled.div<{
   overflow: hidden;
 `;
 
-const Content = styled.div`
+const Content = styled.div<{ $sx?: string }>`
   position: absolute;
   z-index: 101;
   background-color: var(--color-white);
@@ -169,4 +172,5 @@ const Content = styled.div`
     position: relative;
     padding-top: 16px;
   }
+  ${({ $sx }) => ($sx ? $sx : '')}
 `;

package/src/icons/text/align_justified.tsx

@@ -7,7 +7,7 @@ export const AlignJustified = (props: IconProps) => {
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M14.6673 4.66671V3.33337H1.33398V4.66671H14.6673ZM12.6673 6.00004V7.33337H3.33398V6.00004H12.6673ZM14.6673 10V8.66671H1.33398V10H14.6673ZM12.6673 12.6667V11.3334H3.33398V12.6667H12.6673Z"
+        d="M14.6673 4.66671V3.33337H1.33398V4.66671H14.6673ZM14.6673 6.00004V7.33337H1.33398V6.00004H14.6673ZM14.6673 10V8.66671H1.33398V10H14.6673ZM14.6673 12.6667V11.3334H1.33398V12.6667H14.6673Z"
       />
     </Icon>
   );

package/tsconfig.json

@@ -22,6 +22,6 @@
       "types/*": ["./src/types/*"]
     }
   },
-  "include": ["src/**/*.tsx", "src/**/*.ts", "src/icons/home.tsx"],
+  "include": ["src/**/*.tsx", "src/**/*.ts"],
   "exclude": ["node_modules"]
 }