feat: add inputtext, inputfield, and passwordInput components (#11)

* feat(ui): add field

* feat(ui): add input text

* feat(ui): add label

* feat(ui): add system and utils

* feat(doc): misc update

* refactor(editor): improve functionality and optimize performance (#10)

* Update README.md

* chore: update env example variable

* chore(web): remove unwanted files

* chore(web): remove console log in production mode

* chore(web): remove landing page

* chore: update dockerfile (#5)

* feat(editor): add prosekit editor

* feat(editor): add holder

* feat: editor demo

* feat(web): change text field to password input (#6)

* feat: added github actions (#7)

* feat: add github action

* fix: github action

* feat: cache the pnpm store action

* fix: production deployment

* fix: check current org before deletion and switch to Personal account (#8)

* fix: check current org before deletion and switch to Personal account

* chore: add funding-manifest-urls for Floss

* chore: update readme

* chore: rename setting up status with draft (#9)

* feat: add hard break extension

* feat: add markdown export

* feat: add list item extension

* feat: add text highlight extension

* chore: update editor

* refactor(editor): editor

* feat(editor): insert block content

* refactor(editor): misc update

* refactor(editor): misc update

* fix: hard break

* fix(editor): table handle

* refactor: editor

* chore: disable placeholder edit option in content view mode

* chore: misc update

* feat(ui): add password input

README.md

@@ -20,16 +20,6 @@
 
 **Wraft** is a comprehensive open-source platform for managing contracts and documents through their lifecycle. It helps users simplify, streamline, and automate document creation, processing, approval, and signing.
 
-## ✨ Features
-
-- **Document Creation**: Generate documents quickly and easily using customizable templates.
-- **High-Volume Automation**: Support for high-volume document creation via automated pipelines.
-- **Secure E-Signatures(WIP)**: Get documents signed securely online, compliant with international standards.
-- **Customizable Workflows**: Design approval workflows that fit your organization’s processes.
-- **Compliance and Security**: Built with strong security features and compliance in mind.
-
----
-
 ## 🌟 About Wraft
 
 Wraft focuses on efficiency, security, and flexibility, making it ideal for businesses and individuals who want to modernize their document-related processes. Whether you're managing contracts, agreements, or any official documentation, Wraft provides a seamless solution from start to finish.

apps/docs/.storybook/main.ts

@@ -1,5 +1,5 @@
-import type { StorybookConfig } from '@storybook/react-vite';
-import react from '@vitejs/plugin-react';
+import type { StorybookConfig } from "@storybook/react-vite";
+import react from "@vitejs/plugin-react";
 
 import { dirname, join, resolve } from "path";
 
@@ -11,8 +11,7 @@ const config: StorybookConfig = {
     "../stories/**/*.mdx",
     "../stories/*.mdx",
     "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
-    "../../../packages/ui/src/**/*.mdx",
-    "../../../packages/ui/src/**/*.stories.@(js|jsx|ts|tsx)",
+    "../../../packages/ui/src/components/**/*.stories.@(js|jsx|ts|tsx)",
   ],
   addons: [
     "@storybook/addon-links",
@@ -29,8 +28,7 @@ const config: StorybookConfig = {
   ],
   framework: {
     name: getAbsolutePath("@storybook/react-vite"),
-    options: {
-    }
+    options: {},
   },
   core: {
     disableTelemetry: true,
@@ -49,6 +47,10 @@ const config: StorybookConfig = {
             find: "ui",
             replacement: resolve(__dirname, "../../../packages/ui/"),
           },
+          {
+            find: "@",
+            replacement: resolve(__dirname, "../../../packages/ui/src"),
+          },
         ],
       },
     };

apps/docs/package.json

@@ -17,26 +17,26 @@
     "@wraft/icon": "*",
     "@wraft/ui": "*",
     "@xstyled/emotion": "^3.8.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^8.2.7",
-    "@storybook/addon-interactions": "^8.2.7",
-    "@storybook/addon-docs": "^8.2.7",
-    "@storybook/addon-essentials": "^8.2.7",
-    "@storybook/addon-onboarding": "^8.2.7",
-    "@storybook/addon-links": "^8.2.7",
-    "@storybook/blocks": "^8.2.7",
-    "@storybook/react": "^8.2.7",
-    "@storybook/react-vite": "^8.2.7",
+    "@storybook/addon-actions": "^8.4.7",
+    "@storybook/addon-interactions": "^8.4.7",
+    "@storybook/addon-docs": "^8.4.7",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-onboarding": "^8.4.7",
+    "@storybook/addon-links": "^8.4.7",
+    "@storybook/blocks": "^8.4.7",
+    "@storybook/react": "^8.4.7",
+    "@storybook/react-vite": "^8.4.7",
     "@vitejs/plugin-react": "^4.3.0",
     "@wraft/eslint-config": "*",
     "@wraft/typescript-config": "*",
     "eslint": "^8.57.0",
     "eslint-plugin-storybook": "^0.6.15",
-    "storybook": "^8.2.7",
+    "storybook": "^8.4.7",
     "typescript": "^5.3.3",
-    "vite": "^5.2.11"
+    "vite": "^6.0.1"
   }
 }

docker/Dockerfile

@@ -1,27 +1,63 @@
-# Use the official Node.js 18 image as a base
-FROM node:18
+ARG NODE_VERSION=18.18.0
+# Alpine image
+FROM node:${NODE_VERSION}-alpine AS alpine
+RUN apk update
+RUN apk add --no-cache libc6-compat
+
+# Setup pnpm and turbo on the alpine base
+FROM alpine as base
+RUN npm install pnpm@8.15.6 turbo --global
+RUN pnpm config set store-dir ~/.pnpm-store
+
+# Prune projects
+FROM base AS pruner
+ARG PROJECT=@wraft/web
+
+WORKDIR /app
+COPY . .
+RUN turbo prune --scope=${PROJECT} --docker
 
-# Set the working directory inside the container
-WORKDIR /usr/src/app
+# Build the project
+FROM base AS builder
+ARG PROJECT=@wraft/web
 
-# Copy package.json and package-lock.json (if available) to the working directory
-COPY package*.json ./
+WORKDIR /app
 
-# Install dependencies
-RUN npm install
+# Copy lockfile and package.json's of isolated subworkspace
+COPY --from=pruner /app/out/pnpm-lock.yaml ./pnpm-lock.yaml
+COPY --from=pruner /app/out/pnpm-workspace.yaml ./pnpm-workspace.yaml
+COPY --from=pruner /app/out/json/ .
 
-# Copy the rest of your application code to the working directory
-COPY . .
 
-# Build your TypeScript application
-RUN npm run build
+# First install the dependencies (as they change less often)
+RUN --mount=type=cache,id=pnpm,target=~/.pnpm-store pnpm install
+
+# Copy source code of isolated subworkspace
+COPY --from=pruner /app/out/full/ .
+
+RUN turbo build --filter=@wraft/web
+RUN --mount=type=cache,id=pnpm,target=~/.pnpm-store pnpm prune --prod --no-optional
+RUN rm -rf ./services/*/src
+RUN rm -rf ./libs/*/src
+
+# Final image
+FROM alpine AS runner
+ARG PROJECT=@wraft/web
 
-# Generate and run migrations
-RUN npm run db:migrate
-RUN npm run db:push
+# Don't run production as root
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+USER nextjs
+
+COPY --from=builder /app/apps/web/next.config.js .
+COPY --from=builder /app/apps/web/package.json .
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/apps/web/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/apps/web/.next/static ./apps/web/.next/static
+COPY --from=builder --chown=nextjs:nodejs /app/apps/web/public ./apps/web/public
 
-# Expose the port your app runs on
 EXPOSE 3000
 
-# Command to run your app
-CMD ["node", "dist/index.js"]
+CMD node apps/web/server.js

packages/icon/src/icons/Hide.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgHideIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    className="Hide_svg__sc-iJQrDl Hide_svg__iqihnf Hide_svg__wui-icon"
+    viewBox="0 0 100 100"
+    width={props.width || 24}
+    height={props.height || 24}
+    aria-hidden="true"
+    role="icon"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M97.664 43.98q-.014-.114-.035-.225c-.016-.072-.04-.142-.061-.214a2 2 0 0 0-.088-.232c-.013-.031-.02-.063-.035-.094-.078-.159-4.804-9.391-15.31-16.305l-3.117 3.453c7.894 4.966 12.204 11.479 13.64 13.948-2.573 4.953-15.372 26.807-42.246 29.85-3.97.451-7.618.42-10.97.041l-3.755 4.158c2.805.529 5.802.838 9.02.838 1.998 0 4.08-.114 6.24-.359 32.848-3.721 45.996-32.41 46.538-33.63.014-.03.02-.063.033-.094q.045-.116.077-.24c.02-.07.04-.14.05-.21q.02-.116.029-.233.009-.112.009-.224a2 2 0 0 0-.019-.228m-32.507 4.417a11.6 11.6 0 0 1-4.987 2.844L46.754 66.103a16.5 16.5 0 0 0 3.732.008c6.536-.741 12.096-5.16 14.949-10.859.99-1.982 1.474-4.076 1.666-5.862.113-1.058-1.174-1.733-1.944-.993M8.702 54.316c2.572-4.953 15.371-26.807 42.245-29.852 6.854-.773 12.747-.125 17.79 1.324L49.523 47.07c-.717-1.302-1.128-2.82-1.128-4.483 0-2.786 1.135-5.434 2.97-7.469.855-.948.088-2.464-1.18-2.277-2.438.362-5.148 1.318-7.457 2.787-5.327 3.385-8.963 9.35-8.963 15.748 0 3.703 1.236 6.97 3.295 9.498l-9.249 10.247C16.398 66.2 10.438 57.304 8.701 54.316Zm76.252-42.97a2.374 2.374 0 0 0-3.342.18l-9.455 10.472c-6.045-2.102-13.247-3.174-21.745-2.21-32.848 3.722-45.996 32.41-46.538 33.63-.014.03-.02.062-.033.093q-.045.119-.077.241c-.02.07-.04.14-.05.21a2 2 0 0 0-.028.234 2 2 0 0 0 .01.452q.012.112.034.224.025.108.061.213.038.119.088.233c.012.032.02.063.035.094.09.184 6.385 12.48 20.64 19.317l-8.333 9.23a2.34 2.34 0 0 0 .179 3.322 2.37 2.37 0 0 0 1.58.603c.648 0 1.295-.264 1.761-.781L85.133 14.67a2.344 2.344 0 0 0-.18-3.324Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgHideIcon;

packages/icon/src/icons/Show.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgShowIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 100 100"
+    width={props.width || 24}
+    height={props.height || 24}
+    aria-hidden="true"
+    role="icon"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M97.664 43.98q-.014-.114-.035-.225c-.016-.072-.04-.142-.061-.214a2 2 0 0 0-.088-.232c-.013-.031-.02-.063-.035-.094-.078-.159-4.804-9.391-15.31-16.305l-3.117 3.453c7.894 4.966 12.204 11.479 13.64 13.948-2.573 4.953-15.372 26.807-42.246 29.85-3.97.451-7.618.42-10.97.041l-3.755 4.158c2.805.529 5.802.838 9.02.838 1.998 0 4.08-.114 6.24-.359 32.848-3.721 45.996-32.41 46.538-33.63.014-.03.02-.063.033-.094q.045-.116.077-.24c.02-.07.04-.14.05-.21q.02-.116.029-.233.009-.112.009-.224a2 2 0 0 0-.019-.228m-32.507 4.417a11.6 11.6 0 0 1-4.987 2.844L46.754 66.103a16.5 16.5 0 0 0 3.732.008c6.536-.741 12.096-5.16 14.949-10.859.99-1.982 1.474-4.076 1.666-5.862.113-1.058-1.174-1.733-1.944-.993M8.702 54.316c2.572-4.953 15.371-26.807 42.245-29.852 6.854-.773 12.747-.125 17.79 1.324L49.523 47.07c-.717-1.302-1.128-2.82-1.128-4.483 0-2.786 1.135-5.434 2.97-7.469.855-.948.088-2.464-1.18-2.277-2.438.362-5.148 1.318-7.457 2.787-5.327 3.385-8.963 9.35-8.963 15.748 0 3.703 1.236 6.97 3.295 9.498l-9.249 10.247C16.398 66.2 10.438 57.304 8.701 54.316Zm76.252-42.97a2.374 2.374 0 0 0-3.342.18l-9.455 10.472c-6.045-2.102-13.247-3.174-21.745-2.21-32.848 3.722-45.996 32.41-46.538 33.63-.014.03-.02.062-.033.093q-.045.119-.077.241c-.02.07-.04.14-.05.21a2 2 0 0 0-.028.234 2 2 0 0 0 .01.452q.012.112.034.224.025.108.061.213.038.119.088.233c.012.032.02.063.035.094.09.184 6.385 12.48 20.64 19.317l-8.333 9.23a2.34 2.34 0 0 0 .179 3.322 2.37 2.37 0 0 0 1.58.603c.648 0 1.295-.264 1.761-.781L85.133 14.67a2.344 2.344 0 0 0-.18-3.324Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgShowIcon;

packages/icon/src/icons/index.ts

@@ -31,6 +31,7 @@ export { default as FontIcon } from "./Font";
 export { default as H1Icon } from "./H1";
 export { default as H2Icon } from "./H2";
 export { default as H3Icon } from "./H3";
+export { default as HideIcon } from "./Hide";
 export { default as HomeIcon } from "./Home";
 export { default as InkIcon } from "./Ink";
 export { default as ItalicsIcon } from "./Italics";
@@ -50,6 +51,7 @@ export { default as RedoIcon } from "./Redo";
 export { default as RightIcon } from "./Right";
 export { default as SearchIcon } from "./Search";
 export { default as SettingIcon } from "./Setting";
+export { default as ShowIcon } from "./Show";
 export { default as SignIcon } from "./Sign";
 export { default as SomethingWentIcon } from "./SomethingWent";
 export { default as SortIcon } from "./Sort";

apps/docs/stories/button.stories.tsx → packages/ui/src/components/Button/Button.stories.tsx

@@ -1,9 +1,10 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { Button } from "@wraft/ui";
+
+import { Button } from ".";
 
 const meta: Meta<typeof Button> = {
   component: Button,
-  title: "Compontent/Button",
+  title: "Forms/Button",
   argTypes: {
     variant: {
       control: "select",

packages/ui/src/components/DropdownMenu/DropdownMenu.stories.tsx

@@ -1,10 +1,10 @@
-import type { Meta } from '@storybook/react';
+import type { Meta } from "@storybook/react";
 
-import { DropdownMenu } from '.';
+import { DropdownMenu } from ".";
 
 const meta: Meta<any> = {
   component: DropdownMenu,
-  title: 'Compontent/DropdownMenu',
+  title: "Navigation/DropdownMenu",
 };
 // export default {
 // 	title: 'Components/DropdownMenu',

packages/ui/src/components/Field/Field.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta } from "@storybook/react";
+
+import { InputText } from "../InputText";
+
+import { Field } from ".";
+
+const meta: Meta<any> = {
+  component: Field,
+  title: "Forms/Field",
+};
+
+export const Basic = () => (
+  <Field hint="A hint" label="Label">
+    <InputText placeholder="Placeholder" />
+  </Field>
+);
+
+export default meta;