From bfd91eaa100a2497703f341498caa8af890cf7e1 Mon Sep 17 00:00:00 2001 From: Simon Farshid Date: Wed, 3 Jul 2024 23:42:07 -0700 Subject: [PATCH] fix: split style resets into a separate component for now (#389) * fix: split style resets into a separate component for now * remove unused plugin --- packages/react-ui/package.json | 7 +- packages/react-ui/postcss.config.mjs | 1 - .../src/components/assistant-modal.tsx | 4 +- .../react-ui/src/components/base/reset.tsx | 18 ++ packages/react-ui/src/components/index.ts | 25 +++ packages/react-ui/src/components/thread.tsx | 4 +- packages/react-ui/src/reset.css | 212 ++++++++++++++++++ packages/react-ui/src/styles.css | 4 +- packages/react-ui/tailwind.config.ts | 1 + packages/react-ui/tsup.config.ts | 1 + pnpm-lock.yaml | 21 +- 11 files changed, 276 insertions(+), 22 deletions(-) create mode 100644 packages/react-ui/src/components/base/reset.tsx create mode 100644 packages/react-ui/src/reset.css diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index b469372b4..81884deea 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -1,6 +1,6 @@ { "name": "@assistant-ui/react-ui", - "version": "0.0.7", + "version": "0.0.8", "license": "MIT", "exports": { ".": { @@ -21,6 +21,10 @@ "types": "./dist/markdown-styles.css.d.ts", "default": "./dist/markdown-styles.css" }, + "./reset.css": { + "types": "./dist/reset.css.d.ts", + "default": "./dist/reset.css" + }, "./themes/default.css": { "types": "./dist/themes/default.css.d.ts", "default": "./dist/themes/default.css" @@ -64,7 +68,6 @@ "@types/node": "^20.14.9", "esbuild": "^0.23.0", "eslint-config-next": "14.2.4", - "postcss-nested": "^6.0.1", "tailwindcss": "^3.4.4", "tailwindcss-animate": "^1.0.7", "tsup": "^8.1.0", diff --git a/packages/react-ui/postcss.config.mjs b/packages/react-ui/postcss.config.mjs index 1607a5d4d..2ef30fcf4 100644 --- a/packages/react-ui/postcss.config.mjs +++ b/packages/react-ui/postcss.config.mjs @@ -1,7 +1,6 @@ /** @type {import('postcss-load-config').Config} */ const config = { plugins: { - "postcss-nested": {}, tailwindcss: {}, autoprefixer: {}, }, diff --git a/packages/react-ui/src/components/assistant-modal.tsx b/packages/react-ui/src/components/assistant-modal.tsx index fcea4a6c9..d6e9344c6 100644 --- a/packages/react-ui/src/components/assistant-modal.tsx +++ b/packages/react-ui/src/components/assistant-modal.tsx @@ -41,7 +41,7 @@ export const AssistantModalTrigger = forwardRef< AssistantModalTrigger.displayName = "AssistantModalTrigger"; const AssistantModalAnchor = styled(AssistantModalPrimitive.Anchor, { - className: "aui-root aui-assistant-modal-anchor", + className: "aui-assistant-modal-anchor", }); AssistantModalAnchor.displayName = "AssistantModalAnchor"; @@ -98,7 +98,7 @@ const AssistantModalButton = forwardRef< AssistantModalButton.displayName = "AssistantModalButton"; export const AssistantModalContent = styled(AssistantModalPrimitive.Content, { - className: "aui-root aui-assistant-modal-content", + className: "aui-assistant-modal-content", sideOffset: 16, }); diff --git a/packages/react-ui/src/components/base/reset.tsx b/packages/react-ui/src/components/base/reset.tsx new file mode 100644 index 000000000..40e3dc1df --- /dev/null +++ b/packages/react-ui/src/components/base/reset.tsx @@ -0,0 +1,18 @@ +import { ComponentPropsWithoutRef, forwardRef } from "react"; + +export const Reset = forwardRef< + HTMLDivElement, + ComponentPropsWithoutRef<"div"> +>(({ children, className, ...rest }, ref) => { + return ( +
+ {children} +
+ ); +}); + +Reset.displayName = "Reset"; diff --git a/packages/react-ui/src/components/index.ts b/packages/react-ui/src/components/index.ts index b53e70f11..376685559 100644 --- a/packages/react-ui/src/components/index.ts +++ b/packages/react-ui/src/components/index.ts @@ -2,6 +2,11 @@ export { ThreadConfigProvider, useThreadConfig, type ThreadConfig, + type ThreadWelcomeConfig, + type UserMessageConfig, + type AssistantMessageConfig, + type StringsConfig, + type ThreadConfigProviderProps, } from "./thread-config"; export { @@ -72,3 +77,23 @@ export { AssistantModal, AssistantModalTrigger } from "./assistant-modal"; export { ThreadWelcome, ThreadWelcomeRoot } from "./thread-welcome"; export { MarkdownText } from "./markdown-text"; + +export { Reset } from "./base/reset"; +export { + Avatar, + AvatarRoot, + AvatarImage, + AvatarFallback, + type AvatarProps, +} from "./base/avatar"; + +export { Button, buttonVariants, type ButtonProps } from "./base/button"; + +export { Tooltip, TooltipContent, TooltipTrigger } from "./base/tooltip"; + +export { + TooltipIconButton, + type TooltipIconButtonProps, +} from "./base/tooltip-icon-button"; + +export { CircleStopIcon } from "./base/CircleStopIcon"; diff --git a/packages/react-ui/src/components/thread.tsx b/packages/react-ui/src/components/thread.tsx index 8b0a4f78f..f3431324d 100644 --- a/packages/react-ui/src/components/thread.tsx +++ b/packages/react-ui/src/components/thread.tsx @@ -23,7 +23,7 @@ import { ThreadPrimitiveRootProps } from "@assistant-ui/react"; export const Thread: FC = (config) => { return ( - + @@ -40,7 +40,7 @@ export type ThreadRootProps = ThreadPrimitiveRootProps & ThreadConfigProviderProps; const ThreadRootStyled = styled(ThreadPrimitive.Root, { - className: "aui-root aui-thread-root", + className: "aui-thread-root", }); export const ThreadRoot = forwardRef( diff --git a/packages/react-ui/src/reset.css b/packages/react-ui/src/reset.css new file mode 100644 index 000000000..d2c9ea346 --- /dev/null +++ b/packages/react-ui/src/reset.css @@ -0,0 +1,212 @@ +.aui-reset *, +.aui-reset ::before, +.aui-reset ::after { + box-sizing: border-box; + border-width: 0; + border-style: solid; + border-color: #e5e7eb; +} +.aui-reset ::before, +.aui-reset ::after { + --tw-content: ""; +} +.aui-reset html, +.aui-reset :host { + line-height: 1.5; + -webkit-text-size-adjust: 100%; + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", + "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-feature-settings: normal; + font-variation-settings: normal; + -webkit-tap-highlight-color: transparent; +} +.aui-reset body { + margin: 0; + line-height: inherit; +} +.aui-reset hr { + height: 0; + color: inherit; + border-top-width: 1px; +} +.aui-reset abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} +.aui-reset h1, +.aui-reset h2, +.aui-reset h3, +.aui-reset h4, +.aui-reset h5, +.aui-reset h6 { + font-size: inherit; + font-weight: inherit; +} +.aui-reset a { + color: inherit; + text-decoration: inherit; +} +.aui-reset b, +.aui-reset strong { + font-weight: bolder; +} +.aui-reset code, +.aui-reset kbd, +.aui-reset samp, +.aui-reset pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, + "Liberation Mono", "Courier New", monospace; + font-feature-settings: normal; + font-variation-settings: normal; + font-size: 1em; +} +.aui-reset small { + font-size: 80%; +} +.aui-reset sub, +.aui-reset sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} +.aui-reset sub { + bottom: -0.25em; +} +.aui-reset sup { + top: -0.5em; +} +.aui-reset table { + text-indent: 0; + border-color: inherit; + border-collapse: collapse; +} +.aui-reset button, +.aui-reset input, +.aui-reset optgroup, +.aui-reset select, +.aui-reset textarea { + font-family: inherit; + font-feature-settings: inherit; + font-variation-settings: inherit; + font-size: 100%; + font-weight: inherit; + line-height: inherit; + letter-spacing: inherit; + color: inherit; + margin: 0; + padding: 0; +} +.aui-reset button, +.aui-reset select { + text-transform: none; +} +.aui-reset button, +.aui-reset input:where([type="button"]), +.aui-reset input:where([type="reset"]), +.aui-reset input:where([type="submit"]) { + -webkit-appearance: button; + background-color: transparent; + background-image: none; +} +.aui-reset :-moz-focusring { + outline: auto; +} +.aui-reset :-moz-ui-invalid { + box-shadow: none; +} +.aui-reset progress { + vertical-align: baseline; +} +.aui-reset ::-webkit-inner-spin-button, +.aui-reset ::-webkit-outer-spin-button { + height: auto; +} +.aui-reset [type="search"] { + -webkit-appearance: textfield; + outline-offset: -2px; +} +.aui-reset ::-webkit-search-decoration { + -webkit-appearance: none; +} +.aui-reset ::-webkit-file-upload-button { + -webkit-appearance: button; + font: inherit; +} +.aui-reset summary { + display: list-item; +} +.aui-reset blockquote, +.aui-reset dl, +.aui-reset dd, +.aui-reset h1, +.aui-reset h2, +.aui-reset h3, +.aui-reset h4, +.aui-reset h5, +.aui-reset h6, +.aui-reset hr, +.aui-reset figure, +.aui-reset p, +.aui-reset pre { + margin: 0; +} +.aui-reset fieldset { + margin: 0; + padding: 0; +} +.aui-reset legend { + padding: 0; +} +.aui-reset ol, +.aui-reset ul, +.aui-reset menu { + list-style: none; + margin: 0; + padding: 0; +} +.aui-reset dialog { + padding: 0; +} +.aui-reset textarea { + resize: vertical; +} +.aui-reset input::-moz-placeholder, +.aui-reset textarea::-moz-placeholder { + opacity: 1; + color: #9ca3af; +} +.aui-reset input::placeholder, +.aui-reset textarea::placeholder { + opacity: 1; + color: #9ca3af; +} +.aui-reset button, +.aui-reset [role="button"] { + cursor: pointer; +} +.aui-reset :disabled { + cursor: default; +} +.aui-reset img, +.aui-reset svg, +.aui-reset video, +.aui-reset canvas, +.aui-reset audio, +.aui-reset iframe, +.aui-reset embed, +.aui-reset object { + display: block; + vertical-align: middle; +} +.aui-reset img, +.aui-reset video { + max-width: 100%; + height: auto; +} +.aui-reset [hidden] { + display: none; +} diff --git a/packages/react-ui/src/styles.css b/packages/react-ui/src/styles.css index 0b5b7e978..f300abed1 100644 --- a/packages/react-ui/src/styles.css +++ b/packages/react-ui/src/styles.css @@ -1,6 +1,4 @@ -.aui-root { - @tailwind base; -} +@tailwind base; @tailwind components; /* shadcn-ui/button */ diff --git a/packages/react-ui/tailwind.config.ts b/packages/react-ui/tailwind.config.ts index 2d178926c..8efda6a2c 100644 --- a/packages/react-ui/tailwind.config.ts +++ b/packages/react-ui/tailwind.config.ts @@ -3,6 +3,7 @@ import type { Config } from "tailwindcss"; const config = { content: ["./src/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}"], corePlugins: { + preflight: false, backgroundOpacity: false, }, theme: { diff --git a/packages/react-ui/tsup.config.ts b/packages/react-ui/tsup.config.ts index c849f0369..e8182db24 100644 --- a/packages/react-ui/tsup.config.ts +++ b/packages/react-ui/tsup.config.ts @@ -6,6 +6,7 @@ export default defineConfig(() => { "src/index.ts", "src/styles.css", "src/markdown-styles.css", + "src/reset.css", "src/themes/default.css", ], format: ["cjs", "esm"], diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0b56610bf..a7deecd85 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -763,9 +763,6 @@ importers: eslint-config-next: specifier: 14.2.4 version: 14.2.4(eslint@8.57.0)(typescript@5.5.3) - postcss-nested: - specifier: ^6.0.1 - version: 6.0.1(postcss@8.4.39) tailwindcss: specifier: ^3.4.4 version: 3.4.4 @@ -8905,8 +8902,8 @@ snapshots: '@typescript-eslint/parser': 7.2.0(eslint@8.57.0)(typescript@5.5.3) eslint: 8.57.0 eslint-import-resolver-node: 0.3.9 - eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0) - eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0) + eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0) + eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) eslint-plugin-jsx-a11y: 6.9.0(eslint@8.57.0) eslint-plugin-react: 7.34.3(eslint@8.57.0) eslint-plugin-react-hooks: 4.6.2(eslint@8.57.0) @@ -8924,13 +8921,13 @@ snapshots: transitivePeerDependencies: - supports-color - eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0): + eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0): dependencies: debug: 4.3.5 enhanced-resolve: 5.17.0 eslint: 8.57.0 - eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0) - eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0) + eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) + eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) fast-glob: 3.3.2 get-tsconfig: 4.7.5 is-core-module: 2.14.0 @@ -8941,18 +8938,18 @@ snapshots: - eslint-import-resolver-webpack - supports-color - eslint-module-utils@2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0): + eslint-module-utils@2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0): dependencies: debug: 3.2.7 optionalDependencies: '@typescript-eslint/parser': 7.2.0(eslint@8.57.0)(typescript@5.5.3) eslint: 8.57.0 eslint-import-resolver-node: 0.3.9 - eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0) + eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0) transitivePeerDependencies: - supports-color - eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0): + eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0): dependencies: array-includes: 3.1.8 array.prototype.findlastindex: 1.2.5 @@ -8962,7 +8959,7 @@ snapshots: doctrine: 2.1.0 eslint: 8.57.0 eslint-import-resolver-node: 0.3.9 - eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0) + eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) hasown: 2.0.2 is-core-module: 2.14.0 is-glob: 4.0.3