diff --git a/packages/tsconfig/react-library.json b/packages/tsconfig/react-library.json index bdd954367..c26befad7 100644 --- a/packages/tsconfig/react-library.json +++ b/packages/tsconfig/react-library.json @@ -4,8 +4,9 @@ "extends": "./base.json", "compilerOptions": { "jsx": "react", - "lib": ["ES2015"], + "lib": ["ES2015", "DOM"], "module": "ESNext", - "target": "es6" + "target": "es6", + "sourceMap": true } } diff --git a/packages/ui/dist/index.d.ts b/packages/ui/dist/index.d.ts new file mode 100644 index 000000000..8fbac38bd --- /dev/null +++ b/packages/ui/dist/index.d.ts @@ -0,0 +1,20 @@ +import * as React from 'react'; + +declare const Button: () => JSX.Element; + +interface InputProps { + type: string; + id: string; + value: string; + name: string; + onChange: () => void; + className?: string; + mode?: "primary" | "transparent" | "true-transparent"; + size?: "sm" | "md" | "lg"; + hasError?: boolean; + placeholder?: string; + disabled?: boolean; +} +declare const Input: React.ForwardRefExoticComponent>; + +export { Button, Input, InputProps }; diff --git a/packages/ui/dist/index.js b/packages/ui/dist/index.js new file mode 100644 index 000000000..8371035d1 --- /dev/null +++ b/packages/ui/dist/index.js @@ -0,0 +1,73 @@ +"use strict"; +var __create = Object.create; +var __defProp = Object.defineProperty; +var __getOwnPropDesc = Object.getOwnPropertyDescriptor; +var __getOwnPropNames = Object.getOwnPropertyNames; +var __getProtoOf = Object.getPrototypeOf; +var __hasOwnProp = Object.prototype.hasOwnProperty; +var __export = (target, all) => { + for (var name in all) + __defProp(target, name, { get: all[name], enumerable: true }); +}; +var __copyProps = (to, from, except, desc) => { + if (from && typeof from === "object" || typeof from === "function") { + for (let key of __getOwnPropNames(from)) + if (!__hasOwnProp.call(to, key) && key !== except) + __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable }); + } + return to; +}; +var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps( + isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, + mod +)); +var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod); + +// src/index.tsx +var src_exports = {}; +__export(src_exports, { + Button: () => Button, + Input: () => Input +}); +module.exports = __toCommonJS(src_exports); + +// src/buttons/index.tsx +var React = __toESM(require("react")); +var Button = () => { + return /* @__PURE__ */ React.createElement("button", null, "button"); +}; + +// src/form-fields/input.tsx +var React2 = __toESM(require("react")); +var Input = React2.forwardRef((props, ref) => { + const { + id, + type, + value, + name, + onChange, + className = "", + mode = "primary", + size = "md", + hasError = false, + placeholder = "", + disabled = false + } = props; + return /* @__PURE__ */ React2.createElement("input", { + id, + ref, + type, + value, + name, + onChange, + placeholder, + disabled, + className: `block rounded-md bg-transparent text-sm focus:outline-none placeholder-custom-text-400 ${mode === "primary" ? "rounded-md border border-custom-border-200" : mode === "transparent" ? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-custom-primary" : mode === "true-transparent" ? "rounded border-none bg-transparent ring-0" : ""} ${hasError ? "border-red-500" : ""} ${hasError && mode === "primary" ? "bg-red-500/20" : ""} ${size === "sm" ? "px-3 py-2" : size === "lg" ? "p-3" : ""} ${className}` + }); +}); +Input.displayName = "form-input-field"; +// Annotate the CommonJS export names for ESM import in node: +0 && (module.exports = { + Button, + Input +}); diff --git a/packages/ui/dist/index.mjs b/packages/ui/dist/index.mjs new file mode 100644 index 000000000..55db46eed --- /dev/null +++ b/packages/ui/dist/index.mjs @@ -0,0 +1,39 @@ +// src/buttons/index.tsx +import * as React from "react"; +var Button = () => { + return /* @__PURE__ */ React.createElement("button", null, "button"); +}; + +// src/form-fields/input.tsx +import * as React2 from "react"; +var Input = React2.forwardRef((props, ref) => { + const { + id, + type, + value, + name, + onChange, + className = "", + mode = "primary", + size = "md", + hasError = false, + placeholder = "", + disabled = false + } = props; + return /* @__PURE__ */ React2.createElement("input", { + id, + ref, + type, + value, + name, + onChange, + placeholder, + disabled, + className: `block rounded-md bg-transparent text-sm focus:outline-none placeholder-custom-text-400 ${mode === "primary" ? "rounded-md border border-custom-border-200" : mode === "transparent" ? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-custom-primary" : mode === "true-transparent" ? "rounded border-none bg-transparent ring-0" : ""} ${hasError ? "border-red-500" : ""} ${hasError && mode === "primary" ? "bg-red-500/20" : ""} ${size === "sm" ? "px-3 py-2" : size === "lg" ? "p-3" : ""} ${className}` + }); +}); +Input.displayName = "form-input-field"; +export { + Button, + Input +}; diff --git a/packages/ui/index.tsx b/packages/ui/index.tsx deleted file mode 100644 index 677dc8f4d..000000000 --- a/packages/ui/index.tsx +++ /dev/null @@ -1,17 +0,0 @@ -// import * as React from "react"; -// components -// export * from "./breadcrumbs"; -// export * from "./button"; -// export * from "./custom-listbox"; -// export * from "./custom-menu"; -// export * from "./custom-select"; -// export * from "./empty-space"; -// export * from "./header-button"; -// export * from "./input"; -// export * from "./loader"; -// export * from "./outline-button"; -// export * from "./select"; -// export * from "./spinner"; -// export * from "./text-area"; -// export * from "./tooltip"; -export * from "./button"; diff --git a/packages/ui/package.json b/packages/ui/package.json index 6a9132fca..1f95e468b 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -1,23 +1,33 @@ { - "name": "ui", - "version": "0.0.0", - "main": "./index.tsx", - "types": "./index.tsx", + "name": "@plane/ui", + "version": "0.0.1", + "main": "./dist/index.js", + "module": "./dist/index.mjs", + "types": "./dist/index.d.ts", + "sideEffects": false, "license": "MIT", + "files": [ + "dist/**" + ], "scripts": { - "lint": "eslint *.ts*" + "build": "tsup src/index.tsx --format esm,cjs --dts --external react", + "dev": "tsup src/index.tsx --format esm,cjs --watch --dts --external react", + "lint": "eslint src/", + "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist" }, "devDependencies": { - "@types/react": "^18.0.17", - "@types/react-dom": "^18.0.6", - "@typescript-eslint/eslint-plugin": "^5.51.0", + "@types/node": "^20.5.2", + "@types/react": "18.2.0", + "@types/react-dom": "18.2.0", "classnames": "^2.3.2", - "eslint": "^7.32.0", "eslint-config-custom": "*", - "next": "12.3.2", "react": "^18.2.0", "tsconfig": "*", "tailwind-config-custom": "*", + "tsup": "^5.10.1", "typescript": "4.7.4" + }, + "publishConfig": { + "access": "public" } } diff --git a/packages/ui/button/index.tsx b/packages/ui/src/buttons/index.tsx similarity index 67% rename from packages/ui/button/index.tsx rename to packages/ui/src/buttons/index.tsx index 0a1550ec0..de1b0da31 100644 --- a/packages/ui/button/index.tsx +++ b/packages/ui/src/buttons/index.tsx @@ -1,3 +1,5 @@ +import * as React from "react"; + export const Button = () => { return ; }; diff --git a/packages/ui/src/form-fields/index.tsx b/packages/ui/src/form-fields/index.tsx new file mode 100644 index 000000000..4ce4a8893 --- /dev/null +++ b/packages/ui/src/form-fields/index.tsx @@ -0,0 +1 @@ +export * from "./input"; diff --git a/packages/ui/src/form-fields/input.tsx b/packages/ui/src/form-fields/input.tsx new file mode 100644 index 000000000..7c9389848 --- /dev/null +++ b/packages/ui/src/form-fields/input.tsx @@ -0,0 +1,61 @@ +import * as React from "react"; + +export interface InputProps { + type: string; + id: string; + value: string; + name: string; + onChange: () => void; + className?: string; + mode?: "primary" | "transparent" | "true-transparent"; + size?: "sm" | "md" | "lg"; + hasError?: boolean; + placeholder?: string; + disabled?: boolean; +} + +const Input = React.forwardRef((props, ref) => { + const { + id, + type, + value, + name, + onChange, + className = "", + mode = "primary", + size = "md", + hasError = false, + placeholder = "", + disabled = false, + } = props; + + return ( + + ); +}); + +Input.displayName = "form-input-field"; + +export { Input }; diff --git a/packages/ui/src/form-fields/textarea.tsx b/packages/ui/src/form-fields/textarea.tsx new file mode 100644 index 000000000..45ef24372 --- /dev/null +++ b/packages/ui/src/form-fields/textarea.tsx @@ -0,0 +1,77 @@ +import * as React from "react"; + +export interface TextAreaProps { + id: string; + placeholder?: string; + value?: string; + rows: number; + cols: number; + disabled?: boolean; + onChange: () => void; + mode?: "primary" | "transparent"; + hasError?: boolean; + className?: string; +} + +// Updates the height of a