Skip to content

Commit

Permalink
fix: split style resets into a separate component for now (#389)
Browse files Browse the repository at this point in the history
* fix: split style resets into a separate component for now

* remove unused plugin
  • Loading branch information
Yonom authored Jul 4, 2024
1 parent 920f7ff commit bfd91ea
Show file tree
Hide file tree
Showing 11 changed files with 276 additions and 22 deletions.
7 changes: 5 additions & 2 deletions packages/react-ui/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@assistant-ui/react-ui",
"version": "0.0.7",
"version": "0.0.8",
"license": "MIT",
"exports": {
".": {
Expand All @@ -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"
Expand Down Expand Up @@ -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",
Expand Down
1 change: 0 additions & 1 deletion packages/react-ui/postcss.config.mjs
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
/** @type {import('postcss-load-config').Config} */
const config = {
plugins: {
"postcss-nested": {},
tailwindcss: {},
autoprefixer: {},
},
Expand Down
4 changes: 2 additions & 2 deletions packages/react-ui/src/components/assistant-modal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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,
});

Expand Down
18 changes: 18 additions & 0 deletions packages/react-ui/src/components/base/reset.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { ComponentPropsWithoutRef, forwardRef } from "react";

export const Reset = forwardRef<
HTMLDivElement,
ComponentPropsWithoutRef<"div">
>(({ children, className, ...rest }, ref) => {
return (
<div
ref={ref}
className={"aui-reset" + (className ? " " + className : "")}
{...rest}
>
{children}
</div>
);
});

Reset.displayName = "Reset";
25 changes: 25 additions & 0 deletions packages/react-ui/src/components/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,11 @@ export {
ThreadConfigProvider,
useThreadConfig,
type ThreadConfig,
type ThreadWelcomeConfig,
type UserMessageConfig,
type AssistantMessageConfig,
type StringsConfig,
type ThreadConfigProviderProps,
} from "./thread-config";

export {
Expand Down Expand Up @@ -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";
4 changes: 2 additions & 2 deletions packages/react-ui/src/components/thread.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import { ThreadPrimitiveRootProps } from "@assistant-ui/react";

export const Thread: FC<ThreadConfig> = (config) => {
return (
<ThreadRoot config={config} asChild>
<ThreadRoot config={config}>
<ThreadViewport>
<ThreadWelcome />
<ThreadMessages />
Expand All @@ -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<HTMLDivElement, ThreadRootProps>(
Expand Down
212 changes: 212 additions & 0 deletions packages/react-ui/src/reset.css
Original file line number Diff line number Diff line change
@@ -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;
}
4 changes: 1 addition & 3 deletions packages/react-ui/src/styles.css
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
.aui-root {
@tailwind base;
}
@tailwind base;
@tailwind components;

/* shadcn-ui/button */
Expand Down
1 change: 1 addition & 0 deletions packages/react-ui/tailwind.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import type { Config } from "tailwindcss";
const config = {
content: ["./src/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}"],
corePlugins: {
preflight: false,
backgroundOpacity: false,
},
theme: {
Expand Down
1 change: 1 addition & 0 deletions packages/react-ui/tsup.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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"],
Expand Down
Loading

0 comments on commit bfd91ea

Please sign in to comment.