chaeditor 0.1.0

package/recipes/host-presets/emotion-host-preset.tsx.template

@@ -0,0 +1,109 @@
+import 'chaeditor/styles.css';
+
+import { css } from '@emotion/react';
+
+import { createChaeditorThemeVars } from 'chaeditor/core';
+import {
+  Button,
+  Input,
+  MarkdownEditor,
+  Modal,
+  Popover,
+  Textarea,
+  Tooltip,
+} from 'chaeditor/react';
+
+const themeScope = css({
+  ...createChaeditorThemeVars({
+    primary: '#0f766e',
+    primarySubtle: '#ccfbf1',
+    surface: '#f8fafc',
+    surfaceMuted: '#ecfeff',
+    text: '#0f172a',
+    textSubtle: '#475569',
+    sansFont: 'var(--app-font-sans), system-ui, sans-serif',
+    monoFont: "var(--font-d2coding), 'D2Coding', monospace",
+  }),
+});
+
+const hostButton = css({
+  background: '#ccfbf1',
+  borderColor: '#0f766e',
+  borderRadius: 20,
+  boxShadow: '0 1px 3px rgba(15, 23, 42, 0.12)',
+  color: '#0f172a',
+  fontWeight: 600,
+});
+
+const hostField = css({
+  background: '#ecfeff',
+  borderColor: '#0f766e',
+  borderRadius: 20,
+  color: '#0f172a',
+});
+
+const hostPopoverPanel = css({
+  background: '#fff',
+  borderColor: '#0f766e',
+  borderRadius: 24,
+  boxShadow: '0 24px 48px rgba(15, 23, 42, 0.18)',
+});
+
+const hostModalFrame = css({
+  background: '#fff',
+  borderColor: '#0f766e',
+  borderRadius: 28,
+  boxShadow: '0 24px 48px rgba(15, 23, 42, 0.24)',
+});
+
+const hostModalBackdrop = css({
+  background: 'rgba(15, 23, 42, 0.55)',
+});
+
+const hostTooltip = css({
+  background: '#0f766e',
+  borderColor: '#0f766e',
+  color: '#fff',
+});
+
+const HostButton = props => <Button {...props} className={hostButton} />;
+
+const HostInput = props => <Input {...props} className={hostField} />;
+
+const HostTextarea = props => <Textarea {...props} className={hostField} />;
+
+const HostPopover = props => (
+  <Popover
+    {...props}
+    panelClassName={hostPopoverPanel}
+    triggerClassName={hostButton}
+  />
+);
+
+const HostModal = props => (
+  <Modal
+    {...props}
+    backdropClassName={hostModalBackdrop}
+    frameClassName={hostModalFrame}
+  />
+);
+
+const HostTooltip = props => <Tooltip {...props} contentClassName={hostTooltip} />;
+
+export const EmotionHostEditorPreset = () => (
+  <div css={themeScope}>
+    <MarkdownEditor
+      contentType="article"
+      onChange={() => {}}
+      primitiveRegistry={{
+        Button: HostButton,
+        Input: HostInput,
+        Modal: HostModal,
+        Popover: HostPopover,
+        Textarea: HostTextarea,
+        Tooltip: HostTooltip,
+      }}
+      value=""
+    />
+  </div>
+);

package/recipes/host-presets/styled-components-host-preset.tsx.template

@@ -0,0 +1,102 @@
+import 'chaeditor/styles.css';
+
+import styled from 'styled-components';
+
+import { createChaeditorThemeVars } from 'chaeditor/core';
+import {
+  Button,
+  Input,
+  MarkdownEditor,
+  Modal,
+  Popover,
+  Textarea,
+  Tooltip,
+} from 'chaeditor/react';
+
+const EditorThemeScope = styled.div(
+  createChaeditorThemeVars({
+    primary: '#0f766e',
+    primarySubtle: '#ccfbf1',
+    surface: '#f8fafc',
+    surfaceMuted: '#ecfeff',
+    text: '#0f172a',
+    textSubtle: '#475569',
+    sansFont: 'var(--app-font-sans), system-ui, sans-serif',
+    monoFont: "var(--font-d2coding), 'D2Coding', monospace",
+  }),
+);
+
+const HostButton = styled(Button)`
+  background: #ccfbf1;
+  border-color: #0f766e;
+  border-radius: 20px;
+  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
+  color: #0f172a;
+  font-weight: 600;
+`;
+
+const HostInput = styled(Input)`
+  background: #ecfeff;
+  border-color: #0f766e;
+  border-radius: 20px;
+  color: #0f172a;
+`;
+
+const HostTextarea = styled(Textarea)`
+  background: #ecfeff;
+  border-color: #0f766e;
+  border-radius: 24px;
+  color: #0f172a;
+`;
+
+const HostPopoverPanel = styled.div`
+  background: #fff;
+  border: 1px solid #0f766e;
+  border-radius: 24px;
+  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18);
+`;
+
+const HostModalFrameClass = 'host-modal-frame';
+const HostModalBackdropClass = 'host-modal-backdrop';
+const HostTooltipClass = 'host-tooltip';
+
+const HostPopover = props => (
+  <Popover
+    {...props}
+    panelClassName={`${HostPopoverPanel.styledComponentId} ${props.panelClassName ?? ''}`.trim()}
+    triggerClassName={`${HostButton.styledComponentId} ${props.triggerClassName ?? ''}`.trim()}
+  />
+);
+
+const HostModal = props => (
+  <Modal
+    {...props}
+    backdropClassName={`${HostModalBackdropClass} ${props.backdropClassName ?? ''}`.trim()}
+    frameClassName={`${HostModalFrameClass} ${props.frameClassName ?? ''}`.trim()}
+  />
+);
+
+const HostTooltip = props => (
+  <Tooltip
+    {...props}
+    contentClassName={`${HostTooltipClass} ${props.contentClassName ?? ''}`.trim()}
+  />
+);
+
+export const StyledComponentsHostEditorPreset = () => (
+  <EditorThemeScope>
+    <MarkdownEditor
+      contentType="article"
+      onChange={() => {}}
+      primitiveRegistry={{
+        Button: HostButton,
+        Input: HostInput,
+        Modal: HostModal,
+        Popover: HostPopover,
+        Textarea: HostTextarea,
+        Tooltip: HostTooltip,
+      }}
+      value=""
+    />
+  </EditorThemeScope>
+);

package/recipes/host-presets/tailwind-host-preset.tsx.template

@@ -0,0 +1,116 @@
+import 'chaeditor/styles.css';
+
+import {
+  Button,
+  Input,
+  MarkdownEditor,
+  Modal,
+  Popover,
+  Textarea,
+  Tooltip,
+} from 'chaeditor/react';
+
+const HostButton = props => (
+  <Button
+    {...props}
+    className={[
+      'rounded-xl border border-teal-700 bg-teal-50 font-semibold text-teal-950 shadow-sm',
+      props.className ?? '',
+    ]
+      .join(' ')
+      .trim()}
+  />
+);
+
+const HostInput = props => (
+  <Input
+    {...props}
+    className={[
+      'rounded-xl border border-teal-700 bg-cyan-50 text-slate-950 placeholder:text-slate-500',
+      props.className ?? '',
+    ]
+      .join(' ')
+      .trim()}
+  />
+);
+
+const HostTextarea = props => (
+  <Textarea
+    {...props}
+    className={[
+      'rounded-2xl border border-teal-700 bg-cyan-50 text-slate-950 placeholder:text-slate-500',
+      props.className ?? '',
+    ]
+      .join(' ')
+      .trim()}
+  />
+);
+
+const HostPopover = props => (
+  <Popover
+    {...props}
+    panelClassName={['rounded-2xl border border-teal-700 bg-white shadow-xl', props.panelClassName ?? '']
+      .join(' ')
+      .trim()}
+    triggerClassName={[
+      'rounded-xl border border-teal-700 bg-teal-50 text-teal-950',
+      props.triggerClassName ?? '',
+    ]
+      .join(' ')
+      .trim()}
+  />
+);
+
+const HostModal = props => (
+  <Modal
+    {...props}
+    backdropClassName={['bg-slate-950/55', props.backdropClassName ?? ''].join(' ').trim()}
+    frameClassName={[
+      'rounded-[28px] border border-teal-700 bg-white shadow-2xl',
+      props.frameClassName ?? '',
+    ]
+      .join(' ')
+      .trim()}
+  />
+);
+
+const HostTooltip = props => (
+  <Tooltip
+    {...props}
+    contentClassName={[
+      'rounded-lg border border-teal-700 bg-teal-700 text-white shadow-lg',
+      props.contentClassName ?? '',
+    ]
+      .join(' ')
+      .trim()}
+  />
+);
+
+export const TailwindHostEditorPreset = () => (
+  <div
+    className={[
+      '[--chaeditor-color-primary:#0f766e]',
+      '[--chaeditor-color-primary-subtle:#ccfbf1]',
+      '[--chaeditor-color-surface:#f8fafc]',
+      '[--chaeditor-color-surface-muted:#ecfeff]',
+      '[--chaeditor-color-text:#0f172a]',
+      '[--chaeditor-color-text-subtle:#475569]',
+      '[--chaeditor-font-sans:var(--app-font-sans),system-ui,sans-serif]',
+      '[--chaeditor-font-mono:var(--font-d2coding),D2Coding,monospace]',
+    ].join(' ')}
+  >
+    <MarkdownEditor
+      contentType="article"
+      onChange={() => {}}
+      primitiveRegistry={{
+        Button: HostButton,
+        Input: HostInput,
+        Modal: HostModal,
+        Popover: HostPopover,
+        Textarea: HostTextarea,
+        Tooltip: HostTooltip,
+      }}
+      value=""
+    />
+  </div>
+);

package/recipes/host-presets/vanilla-extract-host-preset.tsx.template

@@ -0,0 +1,116 @@
+import 'chaeditor/styles.css';
+
+import { style } from '@vanilla-extract/css';
+
+import { createChaeditorThemeVars } from 'chaeditor/core';
+import {
+  Button,
+  Input,
+  MarkdownEditor,
+  Modal,
+  Popover,
+  Textarea,
+  Tooltip,
+} from 'chaeditor/react';
+
+const themeScope = style({
+  vars: createChaeditorThemeVars({
+    primary: '#0f766e',
+    primarySubtle: '#ccfbf1',
+    surface: '#f8fafc',
+    surfaceMuted: '#ecfeff',
+    text: '#0f172a',
+    textSubtle: '#475569',
+    sansFont: 'var(--app-font-sans), system-ui, sans-serif',
+    monoFont: "var(--font-d2coding), 'D2Coding', monospace",
+  }),
+});
+
+const hostButton = style({
+  background: '#ccfbf1',
+  borderColor: '#0f766e',
+  borderRadius: 20,
+  boxShadow: '0 1px 3px rgba(15, 23, 42, 0.12)',
+  color: '#0f172a',
+  fontWeight: 600,
+});
+
+const hostField = style({
+  background: '#ecfeff',
+  borderColor: '#0f766e',
+  borderRadius: 20,
+  color: '#0f172a',
+});
+
+const hostTextarea = style({
+  background: '#ecfeff',
+  borderColor: '#0f766e',
+  borderRadius: 24,
+  color: '#0f172a',
+});
+
+const hostPopoverPanel = style({
+  background: '#fff',
+  border: '1px solid #0f766e',
+  borderRadius: 24,
+  boxShadow: '0 24px 48px rgba(15, 23, 42, 0.18)',
+});
+
+const hostModalFrame = style({
+  background: '#fff',
+  border: '1px solid #0f766e',
+  borderRadius: 28,
+  boxShadow: '0 24px 48px rgba(15, 23, 42, 0.24)',
+});
+
+const hostModalBackdrop = style({
+  background: 'rgba(15, 23, 42, 0.55)',
+});
+
+const hostTooltip = style({
+  background: '#0f766e',
+  border: '1px solid #0f766e',
+  color: '#fff',
+});
+
+const HostButton = props => <Button {...props} className={hostButton} />;
+
+const HostInput = props => <Input {...props} className={hostField} />;
+
+const HostTextarea = props => <Textarea {...props} className={hostTextarea} />;
+
+const HostPopover = props => (
+  <Popover
+    {...props}
+    panelClassName={hostPopoverPanel}
+    triggerClassName={hostButton}
+  />
+);
+
+const HostModal = props => (
+  <Modal
+    {...props}
+    backdropClassName={hostModalBackdrop}
+    frameClassName={hostModalFrame}
+  />
+);
+
+const HostTooltip = props => <Tooltip {...props} contentClassName={hostTooltip} />;
+
+export const VanillaExtractHostEditorPreset = () => (
+  <div className={themeScope}>
+    <MarkdownEditor
+      contentType="article"
+      onChange={() => {}}
+      primitiveRegistry={{
+        Button: HostButton,
+        Input: HostInput,
+        Modal: HostModal,
+        Popover: HostPopover,
+        Textarea: HostTextarea,
+        Tooltip: HostTooltip,
+      }}
+      value=""
+    />
+  </div>
+);