@soul-refiner/design-system 1.4.2 → 1.6.1-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "1.4.2",
+  "version": "1.6.1-alpha.0",
   "main": "dist/index.js",
   "license": "MIT",
   "publishConfig": {
@@ -21,17 +21,23 @@
         "types": "./dist/index.d.ts",
         "default": "./dist/index.js"
       }
+    },
+    "./dist/*.css": {
+      "import": "./dist/*.css",
+      "require": "./dist/*.css"
     }
   },
   "devDependencies": {
     "@storybook/addon-essentials": "^7.6.7",
     "@storybook/addon-interactions": "^7.6.7",
     "@storybook/addon-links": "^7.6.7",
+    "@storybook/addon-themes": "^7.2.3",
     "@storybook/addons": "^7.6.7",
     "@storybook/blocks": "^7.6.7",
     "@storybook/nextjs": "~7.5.3",
     "@storybook/react": "~7.2.1",
     "@storybook/testing-library": "~0.2.0",
+    "@types/react": "^18.2.48",
     "@types/react-dom": "18.2.0",
     "@types/styled-components": "~5.1.26",
     "chromatic": "~6.17.4",
@@ -40,20 +46,30 @@
     "pretty-quick": "~3.1.3",
     "prop-types": "~15.8.1",
     "storybook": "~7.5.3",
+    "tailwindcss": "^3.4.1",
+    "ts-loader": "^9.5.1",
     "tsconfig-paths-webpack-plugin": "~4.0.1",
     "typescript": "~5.0.4",
-    "webpack": "~5.89.0"
+    "url-loader": "^4.1.1",
+    "webpack": "~5.89.0",
+    "webpack-cli": "^5.1.4"
   },
   "scripts": {
-    "build": "tsc -p tsconfig.build.json",
+    "build": "yarn build:tailwind && tsc -p tsconfig.build.json",
+    "build:tailwind": "npx tailwindcss -i ./src/styles/globals.css -o ./dist/styles/output.css",
     "format": "prettier --write .",
     "lint": "yarn eslint ./**/*.{ts,tsx}",
-    "storybook": "storybook dev -p 6006",
+    "storybook": "yarn build:tailwind && storybook dev -p 6006",
     "build-storybook": "storybook build",
     "prepare": "husky install"
   },
   "dependencies": {
     "@emoji-mart/react": "~1.1.1",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-separator": "^1.0.3",
+    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-tooltip": "^1.0.7",
     "@udecode/cn": "~29.0.1",
     "@udecode/plate": "~30.0.0",
     "class-variance-authority": "~0.7.0",
@@ -74,7 +90,6 @@
     "slate-react": "~0.101.5",
     "styled-components": "~6.1.8",
     "tailwind-merge": "~2.2.0",
-    "tailwindcss": "~3.4.1",
     "tailwindcss-animate": "~1.0.7"
   },
   "peerDependencies": {

package/dist/components/editor/plate.d.ts

@@ -1,34 +0,0 @@
-/// <reference types="react" />
-export declare const plateUI: {
-    p: import("react").ForwardRefExoticComponent<Omit<import("@udecode/plate-utils").PlateElementProps, "ref"> & import("react").RefAttributes<any>>;
-    h1: import("react").ForwardRefExoticComponent<Omit<import("@udecode/plate-utils").PlateElementProps, "ref"> & import("react").RefAttributes<any>>;
-    h2: import("react").ForwardRefExoticComponent<Omit<import("@udecode/plate-utils").PlateElementProps, "ref"> & import("react").RefAttributes<any>>;
-    h3: import("react").ForwardRefExoticComponent<Omit<import("@udecode/plate-utils").PlateElementProps, "ref"> & import("react").RefAttributes<any>>;
-    h4: import("react").ForwardRefExoticComponent<Omit<import("@udecode/plate-utils").PlateElementProps, "ref"> & import("react").RefAttributes<any>>;
-    h5: import("react").ForwardRefExoticComponent<Omit<import("@udecode/plate-utils").PlateElementProps, "ref"> & import("react").RefAttributes<any>>;
-    h6: import("react").ForwardRefExoticComponent<Omit<import("@udecode/plate-utils").PlateElementProps, "ref"> & import("react").RefAttributes<any>>;
-    blockquote: import("react").ForwardRefExoticComponent<Omit<import("@udecode/plate-utils").PlateElementProps, "ref"> & import("react").RefAttributes<any>>;
-    a: import("react").ForwardRefExoticComponent<Omit<import("@udecode/plate-utils").PlateElementProps<import("@udecode/slate").Value, import("@udecode/plate-link").TLinkElement>, "ref"> & import("react").RefAttributes<any>>;
-    ol: import("react").ForwardRefExoticComponent<Omit<import("@udecode/plate-core").PlateRenderNodeProps<import("@udecode/slate").Value, import("@udecode/plate-core").PlateEditor<import("@udecode/slate").Value>> & Omit<import("slate-react").RenderElementProps, "element"> & {
-        element: import("@udecode/slate").TElement;
-    } & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        as?: import("react").ElementType<any> | undefined;
-        asChild?: boolean | undefined;
-    } & import("react").RefAttributes<any> & {
-        elementToAttributes?: ((element: import("@udecode/slate").TElement) => any) | undefined;
-    } & {
-        variant: "ol" | "ul";
-    }, "ref"> & import("react").RefAttributes<any>>;
-    ul: import("react").ForwardRefExoticComponent<Omit<import("@udecode/plate-core").PlateRenderNodeProps<import("@udecode/slate").Value, import("@udecode/plate-core").PlateEditor<import("@udecode/slate").Value>> & Omit<import("slate-react").RenderElementProps, "element"> & {
-        element: import("@udecode/slate").TElement;
-    } & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        as?: import("react").ElementType<any> | undefined;
-        asChild?: boolean | undefined;
-    } & import("react").RefAttributes<any> & {
-        elementToAttributes?: ((element: import("@udecode/slate").TElement) => any) | undefined;
-    } & {
-        variant: "ol" | "ul";
-    }, "ref"> & import("react").RefAttributes<any>>;
-    img: ({ ...props }: import("@udecode/plate-utils").PlateElementProps<import("@udecode/slate").Value, import("@udecode/plate-media").TImageElement>) => import("react").JSX.Element;
-    button: import("react").ForwardRefExoticComponent<Omit<import("@udecode/plate-utils").PlateElementProps, "ref"> & import("react").RefAttributes<any>>;
-};

package/dist/components/editor/plate.js

@@ -1,27 +0,0 @@
-import { withProps } from '@udecode/cn';
-import { BlockquoteElement } from './plugins/blockquote';
-import { Button } from './plugins/buttons';
-import { ImageElement } from './plugins/image';
-import { LinkElement } from './plugins/link';
-import { ListElement } from './plugins/list';
-import { ParagraphElement, HOneElement, HTwoElement, HThreeElement, HFourElement, HFiveElement, HSixElement, } from './plugins/text';
-import * as Elements from './constants';
-export const plateUI = {
-    [Elements.ELEMENT_PARAGRAPH]: ParagraphElement,
-    [Elements.ELEMENT_H1]: HOneElement,
-    [Elements.ELEMENT_H2]: HTwoElement,
-    [Elements.ELEMENT_H3]: HThreeElement,
-    [Elements.ELEMENT_H4]: HFourElement,
-    [Elements.ELEMENT_H5]: HFiveElement,
-    [Elements.ELEMENT_H6]: HSixElement,
-    [Elements.ELEMENT_BLOCKQUOTE]: BlockquoteElement,
-    [Elements.ELEMENT_LINK]: LinkElement,
-    [Elements.ELEMENT_OL]: withProps(ListElement, {
-        variant: Elements.ELEMENT_OL,
-    }),
-    [Elements.ELEMENT_UL]: withProps(ListElement, {
-        variant: Elements.ELEMENT_UL,
-    }),
-    [Elements.ELEMENT_IMAGE]: ImageElement,
-    [Elements.ELEMENT_BUTTON]: Button,
-};

package/dist/components/editor/plugins/image.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { PlateElementProps, TImageElement, Value } from '@udecode/plate';
-export declare const ImageElement: ({ ...props }: PlateElementProps<Value, TImageElement>) => React.JSX.Element;

package/dist/components/editor/plugins/image.js

@@ -1,33 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import { Image, PlateElement, Resizable, useMediaState, } from '@udecode/plate';
-import { useReadOnly } from 'slate-react';
-const align = 'center';
-export const ImageElement = ({ ...props }) => {
-    const { children, nodeProps } = props;
-    const readOnly = useReadOnly();
-    useMediaState();
-    return (React.createElement(PlateElement, { ...props },
-        React.createElement(Figure, { className: "group", contentEditable: false },
-            React.createElement(Resizable, { style: {
-                    alignItems: 'center',
-                    width: '100%',
-                    maxWidth: '100%',
-                    marginLeft: 'auto',
-                    marginRight: 'auto',
-                }, options: {
-                    align,
-                    readOnly,
-                } },
-                React.createElement(Image, { ...nodeProps }))),
-        children));
-};
-const Figure = styled.figure `
-  position: relative;
-  margin: 0px;
-  width: 100%;
-
-  img {
-    width: 100%;
-  }
-`;