From d2a21141990ddf555a0f66d1c97cfd7d3670c48b Mon Sep 17 00:00:00 2001 From: Ozzie Gooen Date: Mon, 15 Apr 2024 13:45:54 -0700 Subject: [PATCH 01/18] Improving Playground styles, added IconByName in UI --- .../src/components/SquiggleEditor.tsx | 2 +- .../LeftPlaygroundPanel/index.tsx | 13 +- .../ResizableTwoPanelLayout.tsx | 2 +- .../components/SquigglePlayground/index.tsx | 2 +- .../components/ViewerWithMenuBar/Layout.tsx | 5 +- .../ViewerWithMenuBar/RandomizeSeedButton.tsx | 4 +- .../ViewerWithMenuBar/SimulatingIndicator.tsx | 6 +- .../ViewerWithMenuBar/ViewerMenu.tsx | 10 +- .../src/components/ui/FormSection.tsx | 2 +- .../ui/PanelWithToolbar/ToolbarItem.tsx | 9 +- .../components/ui/PanelWithToolbar/index.tsx | 4 +- .../Dropdown/DropdownMenuHeader.tsx | 2 +- packages/ui/src/icons/IconByName.tsx | 153 ++++++++++++++++++ packages/ui/src/index.ts | 1 + .../src/stories/Icons/IconByName.stories.tsx | 40 +++++ 15 files changed, 223 insertions(+), 32 deletions(-) create mode 100644 packages/ui/src/icons/IconByName.tsx create mode 100644 packages/ui/src/stories/Icons/IconByName.stories.tsx diff --git a/packages/components/src/components/SquiggleEditor.tsx b/packages/components/src/components/SquiggleEditor.tsx index c611ebffc1..6758b600e6 100644 --- a/packages/components/src/components/SquiggleEditor.tsx +++ b/packages/components/src/components/SquiggleEditor.tsx @@ -56,7 +56,7 @@ export const SquiggleEditor: FC = ({ return (
( /> + > + Format + ( @@ -118,9 +119,7 @@ export const LeftPlaygroundPanel = forwardRef( )} > - - Menu - + Menu
{props.renderExtraControls?.({ openModal })} diff --git a/packages/components/src/components/SquigglePlayground/ResizableTwoPanelLayout.tsx b/packages/components/src/components/SquigglePlayground/ResizableTwoPanelLayout.tsx index 17226d4830..c9c25ad998 100644 --- a/packages/components/src/components/SquigglePlayground/ResizableTwoPanelLayout.tsx +++ b/packages/components/src/components/SquigglePlayground/ResizableTwoPanelLayout.tsx @@ -91,7 +91,7 @@ export const ResizableTwoPanelLayout: FC = ({ >
diff --git a/packages/components/src/components/SquigglePlayground/index.tsx b/packages/components/src/components/SquigglePlayground/index.tsx index 7bc87f4f66..2a9af732f2 100644 --- a/packages/components/src/components/SquigglePlayground/index.tsx +++ b/packages/components/src/components/SquigglePlayground/index.tsx @@ -195,7 +195,7 @@ export const SquigglePlayground: React.FC = ( } else { return (
- +
); } diff --git a/packages/components/src/components/ViewerWithMenuBar/Layout.tsx b/packages/components/src/components/ViewerWithMenuBar/Layout.tsx index 7c7dd77f57..670acd1636 100644 --- a/packages/components/src/components/ViewerWithMenuBar/Layout.tsx +++ b/packages/components/src/components/ViewerWithMenuBar/Layout.tsx @@ -13,16 +13,17 @@ export const Layout: FC<{
- {menu} +
{menu}
{indicator} {changeSeedAndRunButton}
+
= ({ size: 16, className: clsx( isSimulating - ? "animate-spin text-violet-400 group-hover:text-violet-900" - : "text-violet-200 group-hover:text-violet-500" + ? "animate-spin text-gray-500 group-hover:text-gray-600" + : "text-gray-300 group-hover:text-gray-600" ), }; switch (side) { diff --git a/packages/components/src/components/ViewerWithMenuBar/SimulatingIndicator.tsx b/packages/components/src/components/ViewerWithMenuBar/SimulatingIndicator.tsx index f47319685b..a7e5022cc6 100644 --- a/packages/components/src/components/ViewerWithMenuBar/SimulatingIndicator.tsx +++ b/packages/components/src/components/ViewerWithMenuBar/SimulatingIndicator.tsx @@ -16,11 +16,11 @@ export const SimulatingIndicator: FC<{ return (
- {`simulation #${simulation.executionId} in ${showTime( + {`Simulation #${simulation.executionId} in ${showTime( simulation.executionTime )}`}
diff --git a/packages/components/src/components/ViewerWithMenuBar/ViewerMenu.tsx b/packages/components/src/components/ViewerWithMenuBar/ViewerMenu.tsx index a6ce958358..417f6e2ca5 100644 --- a/packages/components/src/components/ViewerWithMenuBar/ViewerMenu.tsx +++ b/packages/components/src/components/ViewerWithMenuBar/ViewerMenu.tsx @@ -2,17 +2,16 @@ import clsx from "clsx"; import { FC } from "react"; import { - Button, CodeBracketIcon, Dropdown, DropdownMenu, DropdownMenuActionItem, DropdownMenuHeader, - TriangleIcon, } from "@quri/ui"; import { SqOutputResult } from "../../../../squiggle-lang/src/public/types.js"; import { SelectableViewerTab, ViewerTab } from "../../lib/utility.js"; +import { ToolbarItem } from "../ui/PanelWithToolbar/ToolbarItem.js"; const MenuItemTitle: FC<{ title: string; type: string | null }> = ({ title, @@ -104,12 +103,7 @@ export const ViewerMenu: FC = ({ )} > - + {viewerTabTitle(viewerTab)} ); }; diff --git a/packages/components/src/components/ui/FormSection.tsx b/packages/components/src/components/ui/FormSection.tsx index 853ecc0f3e..3c9ca2bb2c 100644 --- a/packages/components/src/components/ui/FormSection.tsx +++ b/packages/components/src/components/ui/FormSection.tsx @@ -5,7 +5,7 @@ export const FormSection: React.FC<{ children: React.ReactNode; }> = ({ title, children }) => (
-
+
{title}
{children}
diff --git a/packages/components/src/components/ui/PanelWithToolbar/ToolbarItem.tsx b/packages/components/src/components/ui/PanelWithToolbar/ToolbarItem.tsx index 15a7997101..e0004bd814 100644 --- a/packages/components/src/components/ui/PanelWithToolbar/ToolbarItem.tsx +++ b/packages/components/src/components/ui/PanelWithToolbar/ToolbarItem.tsx @@ -1,7 +1,7 @@ import { clsx } from "clsx"; import { ComponentType, FC, ReactNode } from "react"; -import { TextTooltip } from "@quri/ui"; +import { ChevronRightIcon, TextTooltip } from "@quri/ui"; type Props = { icon?: ComponentType<{ className?: string }>; @@ -11,6 +11,7 @@ type Props = { onClick?: () => void; tooltipText?: string; className?: string; + showDropdownArrow?: boolean; }; export const ToolbarItem: FC = ({ @@ -20,6 +21,7 @@ export const ToolbarItem: FC = ({ className, onClick, tooltipText, + showDropdownArrow = false, children, }) => { const withTooltip = (jsx: JSX.Element) => ( @@ -31,7 +33,7 @@ export const ToolbarItem: FC = ({ const main = (
= ({ )} {children &&
{children}
} + {showDropdownArrow && }
); diff --git a/packages/components/src/components/ui/PanelWithToolbar/index.tsx b/packages/components/src/components/ui/PanelWithToolbar/index.tsx index 5673626d02..fed1a95d25 100644 --- a/packages/components/src/components/ui/PanelWithToolbar/index.tsx +++ b/packages/components/src/components/ui/PanelWithToolbar/index.tsx @@ -43,7 +43,7 @@ export function PanelWithToolbar({ > ← Back -
+
{modal.title}
@@ -52,7 +52,7 @@ export function PanelWithToolbar({ return (
-
+
{modal ? ( modalHeader ) : ( diff --git a/packages/ui/src/components/Dropdown/DropdownMenuHeader.tsx b/packages/ui/src/components/Dropdown/DropdownMenuHeader.tsx index a30e89a645..85fe471a63 100644 --- a/packages/ui/src/components/Dropdown/DropdownMenuHeader.tsx +++ b/packages/ui/src/components/Dropdown/DropdownMenuHeader.tsx @@ -2,7 +2,7 @@ import { FC, PropsWithChildren } from "react"; export const DropdownMenuHeader: FC = ({ children }) => { return ( -
+
{children}
); diff --git a/packages/ui/src/icons/IconByName.tsx b/packages/ui/src/icons/IconByName.tsx new file mode 100644 index 0000000000..4872075a7d --- /dev/null +++ b/packages/ui/src/icons/IconByName.tsx @@ -0,0 +1,153 @@ +import { FC } from "react"; + +import { + Die1Icon, + Die2Icon, + Die3Icon, + Die4Icon, + Die5Icon, + Die6Icon, +} from "./DieIcons.js"; +import { DotsHorizontalIcon } from "./DotsHorizontalIcon.js"; +import { EditIcon } from "./EditIcon.js"; +import { EmptyIcon } from "./EmptyIcon.js"; +import { ErrorIcon } from "./ErrorIcon.js"; +import { ExternalLinkIcon } from "./ExternalLinkIcon.js"; +import { FocusIcon } from "./FocusIcon.js"; +import { + AdjustmentsHorizontalIcon, + AdjustmentsVerticalIcon, + ArchiveBoxIcon, + BackwardIcon, + BarChartIcon, + Bars3CenterLeftIcon, + Bars4Icon, + BoltIcon, + BookOpenIcon, + CalculatorIcon, + CheckIcon, + ChevronLeftIcon, + ChevronRightIcon, + ClipboardCopyIcon, + CodeBracketIcon, + CodeBracketSquareIcon, + Cog8ToothIcon, + CommandLineIcon, + CommentIcon, + CubeTransparentIcon, + CurlyBracketsIcon, + DocumentTextIcon, + FireIcon, + GlobeIcon, + GroupIcon, + HashIcon, + HelpIcon, + LinkIcon, + ListBulletIcon, + LockIcon, + PauseIcon, + PlayIcon, + PuzzleIcon, + RectangleStackIcon, + ResetIcon, + RightArrowIcon, + ScaleIcon, + ScatterPlotIcon, + SearchIcon, + ShareIcon, + SquareBracketIcon, + TableCellsIcon, + UserCircleIcon, + UserIcon, + VariableIcon, + WrenchIcon, +} from "./HeroIcons.js"; +import type { IconProps } from "./Icon.js"; +import { PlusIcon } from "./PlusIcon.js"; +import { RefreshIcon } from "./RefreshIcon.js"; +import { SignOutIcon } from "./SignOutIcon.js"; +import { TrashIcon } from "./TrashIcon.js"; +import { TriangleIcon } from "./TriangleIcon.js"; +import { XIcon } from "./XIcon.js"; + +export const allIconsMap: Record | null> = { + AdjustmentsHorizontalIcon, + AdjustmentsVerticalIcon, + ArchiveBoxIcon, + BackwardIcon, + BarChartIcon, + Bars3CenterLeftIcon, + Bars4Icon, + BoltIcon, + BookOpenIcon, + CalculatorIcon, + CheckIcon, + ChevronLeftIcon, + ChevronRightIcon, + ClipboardCopyIcon, + CodeBracketIcon, + CodeBracketSquareIcon, + Cog8ToothIcon, + CommandLineIcon, + CommentIcon, + CubeTransparentIcon, + CurlyBracketsIcon, + DocumentTextIcon, + DotsHorizontalIcon, + EditIcon, + EmptyIcon, + ErrorIcon, + ExternalLinkIcon, + FireIcon, + FocusIcon, + GlobeIcon, + GroupIcon, + HashIcon, + HelpIcon, + LinkIcon, + ListBulletIcon, + LockIcon, + PauseIcon, + PlayIcon, + PlusIcon, + PuzzleIcon, + RectangleStackIcon, + RefreshIcon, + ResetIcon, + RightArrowIcon, + ScaleIcon, + ScatterPlotIcon, + SearchIcon, + ShareIcon, + SignOutIcon, + SquareBracketIcon, + TableCellsIcon, + TrashIcon, + TriangleIcon, + UserCircleIcon, + UserIcon, + VariableIcon, + WrenchIcon, + XIcon, + Die1Icon, + Die2Icon, + Die3Icon, + Die4Icon, + Die5Icon, + Die6Icon, +}; + +const findByName = (name: string) => allIconsMap[name] || null; + +export const IconByName: FC = ({ + name, + ...props +}) => { + const IconComponent = findByName(name); + + if (!IconComponent) { + return null; + } + + return ; +}; diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index ecbe4acdee..8335404bd7 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -108,6 +108,7 @@ export { Die6Icon, } from "./icons/DieIcons.js"; export { ErrorIcon } from "./icons/ErrorIcon.js"; +export { IconByName } from "./icons/IconByName.js"; export { useToast, WithToasts } from "./components/WithToasts/index.js"; diff --git a/packages/ui/src/stories/Icons/IconByName.stories.tsx b/packages/ui/src/stories/Icons/IconByName.stories.tsx new file mode 100644 index 0000000000..9df946861d --- /dev/null +++ b/packages/ui/src/stories/Icons/IconByName.stories.tsx @@ -0,0 +1,40 @@ +import type { Meta, StoryObj } from "@storybook/react"; + +import { allIconsMap, IconByName } from "../../icons/IconByName.js"; + +const meta = { component: IconByName } satisfies Meta; +export default meta; +type Story = StoryObj; + +export const AllIcons: Story = { + args: { + name: "DocumentTextIcon", + }, + render: ({ size }) => ( +
+ {Object.keys(allIconsMap).map((name) => ( +
+
+ +
+
{name}
+
+ ))} +
+ ), +}; From 5a3a655865c3c20f285beee4f5c57ac42524bc83 Mon Sep 17 00:00:00 2001 From: Ozzie Gooen Date: Mon, 15 Apr 2024 13:59:17 -0700 Subject: [PATCH 02/18] Thinner chevron icons --- .../ui/PanelWithToolbar/ToolbarItem.tsx | 4 ++- packages/ui/src/icons/HeroIcons.tsx | 28 +++++++++++++------ packages/ui/src/icons/Icon.tsx | 16 ++++++++++- 3 files changed, 38 insertions(+), 10 deletions(-) diff --git a/packages/components/src/components/ui/PanelWithToolbar/ToolbarItem.tsx b/packages/components/src/components/ui/PanelWithToolbar/ToolbarItem.tsx index e0004bd814..04eca31642 100644 --- a/packages/components/src/components/ui/PanelWithToolbar/ToolbarItem.tsx +++ b/packages/components/src/components/ui/PanelWithToolbar/ToolbarItem.tsx @@ -49,7 +49,9 @@ export const ToolbarItem: FC = ({ /> )} {children &&
{children}
} - {showDropdownArrow && } + {showDropdownArrow && ( + + )}
); diff --git a/packages/ui/src/icons/HeroIcons.tsx b/packages/ui/src/icons/HeroIcons.tsx index 63898505dd..243eebd8ce 100644 --- a/packages/ui/src/icons/HeroIcons.tsx +++ b/packages/ui/src/icons/HeroIcons.tsx @@ -162,21 +162,33 @@ export const LinkIcon: FC = (props) => ( ); export const ChevronRightIcon: FC = (props) => ( - + ); export const ChevronLeftIcon: FC = (props) => ( - + ); diff --git a/packages/ui/src/icons/Icon.tsx b/packages/ui/src/icons/Icon.tsx index 5014a2698c..2c035f7b68 100644 --- a/packages/ui/src/icons/Icon.tsx +++ b/packages/ui/src/icons/Icon.tsx @@ -4,6 +4,11 @@ export type IconProps = PropsWithChildren<{ size?: number; className?: string; onClick?: () => void; + strokeWidth?: number; + stroke?: string; + strokeLinecap?: "butt" | "round" | "square"; + strokeLinejoin?: "miter" | "round" | "bevel"; + fill?: string; }>; export const Icon: FC = ({ @@ -11,15 +16,24 @@ export const Icon: FC = ({ className, onClick, viewBox = "0 0 20 20", + strokeWidth, + stroke, + strokeLinecap, + strokeLinejoin, + fill = "currentColor", children, }) => ( {children} From 69eba71640ce3baeceaa81589aef112d3c2b5b93 Mon Sep 17 00:00:00 2001 From: Ozzie Gooen Date: Mon, 15 Apr 2024 14:10:27 -0700 Subject: [PATCH 03/18] Light color changes --- .../SquiggleViewer/ValueWithContextViewer.tsx | 4 ++-- .../components/src/components/SquiggleViewer/index.tsx | 10 ++++++---- .../ViewerWithMenuBar/RandomizeSeedButton.tsx | 2 +- 3 files changed, 9 insertions(+), 7 deletions(-) diff --git a/packages/components/src/components/SquiggleViewer/ValueWithContextViewer.tsx b/packages/components/src/components/SquiggleViewer/ValueWithContextViewer.tsx index 7fc1ad6544..f730151491 100644 --- a/packages/components/src/components/SquiggleViewer/ValueWithContextViewer.tsx +++ b/packages/components/src/components/SquiggleViewer/ValueWithContextViewer.tsx @@ -263,7 +263,7 @@ export const ValueWithContextViewer: FC = ({ > {(isRootImport && exportData?.sourceId) || taggedName || name}
- {showColon &&
:
} + {showColon &&
:
}
); }; @@ -276,7 +276,7 @@ export const ValueWithContextViewer: FC = ({ className="group w-4 shrink-0 flex justify-center cursor-pointer" onClick={handle.toggleCollapsed} > -
+
); } else { diff --git a/packages/components/src/components/SquiggleViewer/index.tsx b/packages/components/src/components/SquiggleViewer/index.tsx index 47cfcbc545..34b0c1700a 100644 --- a/packages/components/src/components/SquiggleViewer/index.tsx +++ b/packages/components/src/components/SquiggleViewer/index.tsx @@ -24,11 +24,13 @@ const ZoomedInNavigationItem: FC<{
{text} - + + +
); @@ -51,7 +53,7 @@ const ZoomedInNavigation: FC<{ : 0; return ( -
+
{!rootPath?.edges.length && ( )} @@ -89,7 +91,7 @@ export const SquiggleViewerWithoutProvider: FC< } return zoomedInPath ? ( -
+
= ({ isSimulating, }) => { const props = { - size: 16, + size: 14, className: clsx( isSimulating ? "animate-spin text-gray-500 group-hover:text-gray-600" From be4f0b32fd5b5db9764a7511901bbd269a31667a Mon Sep 17 00:00:00 2001 From: Ozzie Gooen Date: Mon, 15 Apr 2024 15:43:23 -0700 Subject: [PATCH 04/18] Better pass at version picker button --- .../[owner]/[slug]/EditSquiggleSnippetModel.tsx | 2 +- .../src/SquigglePlaygroundVersionPicker.tsx | 7 ++----- .../src/SquiggleVersionShower.tsx | 14 +++++--------- 3 files changed, 8 insertions(+), 15 deletions(-) diff --git a/packages/hub/src/app/models/[owner]/[slug]/EditSquiggleSnippetModel.tsx b/packages/hub/src/app/models/[owner]/[slug]/EditSquiggleSnippetModel.tsx index 73f39fa2f5..a6c17e7f98 100644 --- a/packages/hub/src/app/models/[owner]/[slug]/EditSquiggleSnippetModel.tsx +++ b/packages/hub/src/app/models/[owner]/[slug]/EditSquiggleSnippetModel.tsx @@ -339,7 +339,7 @@ export const EditSquiggleSnippetModel: FC = ({ offset={5} > {/* div wrapper is required because TextTooltip clones its children and SquiggleVersionShower doesn't forwardRef */} -
+
diff --git a/packages/versioned-components/src/SquigglePlaygroundVersionPicker.tsx b/packages/versioned-components/src/SquigglePlaygroundVersionPicker.tsx index 7e51980e42..2ee10c60cf 100644 --- a/packages/versioned-components/src/SquigglePlaygroundVersionPicker.tsx +++ b/packages/versioned-components/src/SquigglePlaygroundVersionPicker.tsx @@ -2,7 +2,6 @@ import { FC } from "react"; import { - Button, Dropdown, DropdownMenu, DropdownMenuActionItem, @@ -32,7 +31,7 @@ export const SquigglePlaygroundVersionPicker: FC<{ size: "small" | "medium"; }> = ({ version, onChange, showUpdatePolicy, size }) => { return ( -
+
( @@ -91,9 +90,7 @@ export const SquigglePlaygroundVersionPicker: FC<{ )} > - +
); diff --git a/packages/versioned-components/src/SquiggleVersionShower.tsx b/packages/versioned-components/src/SquiggleVersionShower.tsx index 2ecfc6191a..87595e6f5d 100644 --- a/packages/versioned-components/src/SquiggleVersionShower.tsx +++ b/packages/versioned-components/src/SquiggleVersionShower.tsx @@ -1,12 +1,12 @@ "use client"; import { FC } from "react"; -import { CodeBracketIcon, WrenchIcon } from "@quri/ui"; +import { ChevronRightIcon, CodeBracketIcon, WrenchIcon } from "@quri/ui"; import { checkSquiggleVersion, SquiggleVersion } from "./versions.js"; export function versionTitle(version: SquiggleVersion) { - return version === "dev" ? "Next" : version; + return version === "dev" ? "vNext" : `v${version}`; } export function uncheckedVersionTitle(version: string) { @@ -23,14 +23,10 @@ export function versionIcon(version: string) { } export const SquiggleVersionShower: FC<{ version: string }> = ({ version }) => { - const CurrentIcon = versionIcon(version); - return ( -
- -
- {uncheckedVersionTitle(version)} -
+
+
{uncheckedVersionTitle(version)}
+
); }; From 53be9aa088ef9a59b47f421ff9b835192a063877 Mon Sep 17 00:00:00 2001 From: Ozzie Gooen Date: Mon, 15 Apr 2024 16:03:29 -0700 Subject: [PATCH 05/18] green -> emerald --- packages/components/src/components/ui/Alert.tsx | 8 ++++---- .../components/src/widgets/SpecificationWidget.tsx | 14 +++++++------- packages/hub/src/app/benchmarks/page.tsx | 2 +- .../[owner]/[slug]/EditSquiggleSnippetModel.tsx | 7 ++++++- .../[slug]/revisions/ModelRevisionsList.tsx | 2 +- packages/ui/src/components/Button.tsx | 4 ++-- 6 files changed, 21 insertions(+), 16 deletions(-) diff --git a/packages/components/src/components/ui/Alert.tsx b/packages/components/src/components/ui/Alert.tsx index 0b91166181..9a4039e01d 100644 --- a/packages/components/src/components/ui/Alert.tsx +++ b/packages/components/src/components/ui/Alert.tsx @@ -80,10 +80,10 @@ export const SuccessAlert: React.FC<{ }> = (props) => ( ); diff --git a/packages/components/src/widgets/SpecificationWidget.tsx b/packages/components/src/widgets/SpecificationWidget.tsx index dcd9954f23..979caab956 100644 --- a/packages/components/src/widgets/SpecificationWidget.tsx +++ b/packages/components/src/widgets/SpecificationWidget.tsx @@ -51,7 +51,7 @@ const SpecificationDropdownContent: FC<{ "rounded-sm px-2 py-0.5 inline-flex font-medium text-sm items-center space-x-2", hasError ? "bg-red-100 text-red-900" - : "bg-green-100 text-green-900" + : "bg-emerald-100 text-emerald-900" )} > {hasError ? : } @@ -103,11 +103,11 @@ const SpecificationView: FC<{ specification: SqSpecification }> = ({ }) => { return (
-
+
Specification
-
+
{specification.name}
{specification.documentation && ( @@ -129,27 +129,27 @@ const SpecificationStatusPreview: FC<{ "rounded-sm cursor-pointer transition px-0.5 flex flex-row items-center space-x-1.5", hasError ? "bg-red-100 hover:bg-red-300" - : "bg-green-100 hover:bg-green-300" + : "bg-emerald-100 hover:bg-emerald-300" )} > {hasError ? ( ) : ( - + )}
); }; widgetRegistry.register("Specification", { - Preview: () => , + Preview: () => , Chart: (value) => (
diff --git a/packages/hub/src/app/benchmarks/page.tsx b/packages/hub/src/app/benchmarks/page.tsx index f4b4b5b5b3..a1898bc481 100644 --- a/packages/hub/src/app/benchmarks/page.tsx +++ b/packages/hub/src/app/benchmarks/page.tsx @@ -118,7 +118,7 @@ const Benchmark: FC<{ version: SquiggleVersion; code: string }> = ({ ) : outcome ? (
{outcome.ok ? ( - + ) : ( )} diff --git a/packages/hub/src/app/models/[owner]/[slug]/EditSquiggleSnippetModel.tsx b/packages/hub/src/app/models/[owner]/[slug]/EditSquiggleSnippetModel.tsx index a6c17e7f98..28f551bacf 100644 --- a/packages/hub/src/app/models/[owner]/[slug]/EditSquiggleSnippetModel.tsx +++ b/packages/hub/src/app/models/[owner]/[slug]/EditSquiggleSnippetModel.tsx @@ -270,6 +270,8 @@ export const EditSquiggleSnippetModel: FC = ({ } }; + const codeHasChanged = form.watch("code") !== content.code; + // We don't want to control SquigglePlayground, it's uncontrolled by design. // Instead, we reset the `defaultCode` that we pass to it when version is changed or draft is restored. const [defaultCode, setDefaultCode] = useState(content.code); @@ -345,7 +347,10 @@ export const EditSquiggleSnippetModel: FC = ({ )} {model.isEditable && ( - + )}
), diff --git a/packages/hub/src/app/models/[owner]/[slug]/revisions/ModelRevisionsList.tsx b/packages/hub/src/app/models/[owner]/[slug]/revisions/ModelRevisionsList.tsx index 8a15c45798..a873504f35 100644 --- a/packages/hub/src/app/models/[owner]/[slug]/revisions/ModelRevisionsList.tsx +++ b/packages/hub/src/app/models/[owner]/[slug]/revisions/ModelRevisionsList.tsx @@ -85,7 +85,7 @@ const ModelRevisionItem: FC<{
{`Build Time: ${revision.lastBuild.runSeconds.toFixed(2)}s`}
)} {revision.variableRevisions.length > 0 ? ( -
+
{`${revision.variableRevisions.length} variables`}
) : null} diff --git a/packages/ui/src/components/Button.tsx b/packages/ui/src/components/Button.tsx index 10ef9b38b3..6832b5a1ec 100644 --- a/packages/ui/src/components/Button.tsx +++ b/packages/ui/src/components/Button.tsx @@ -37,12 +37,12 @@ export const Button: FC = ({ className={clsx( "border text-sm font-medium", theme === "primary" - ? "bg-green-700 border-green-900 text-white" + ? "bg-emerald-500 border-emerald-600 text-white" : "bg-slate-100 border-slate-300 text-gray-600", disabled ? "opacity-60" : theme === "primary" - ? "hover:bg-green-800 hover:border-green-800 hover:text-white" + ? "hover:bg-emerald-600" : "hover:bg-slate-200 hover:text-gray-900", wide && "w-full", size === "medium" && "h-8 rounded-md", From bdd8a6744a956f3df9eadb99d52532f255282e6a Mon Sep 17 00:00:00 2001 From: Ozzie Gooen Date: Tue, 16 Apr 2024 11:52:53 -0700 Subject: [PATCH 06/18] Ran formatter, fixed other linter errors --- packages/components/src/components/SquiggleEditor.tsx | 2 +- .../SquigglePlayground/ResizableTwoPanelLayout.tsx | 2 +- .../src/components/SquigglePlayground/index.tsx | 2 +- .../src/components/SquiggleViewer/ValueViewer/Title.tsx | 2 +- .../components/SquiggleViewer/ValueViewer/WithContext.tsx | 4 ++-- .../src/components/SquiggleViewer/ZoomedInNavigation.tsx | 2 +- .../src/components/ViewerWithMenuBar/Layout.tsx | 4 ++-- .../components/ViewerWithMenuBar/SimulatingIndicator.tsx | 2 +- packages/components/src/components/ui/FormSection.tsx | 2 +- .../src/components/ui/PanelWithToolbar/ToolbarItem.tsx | 2 +- .../src/components/ui/PanelWithToolbar/index.tsx | 6 +++--- packages/components/src/widgets/SpecificationWidget.tsx | 4 ++-- packages/ui/src/components/Button.tsx | 4 ++-- .../ui/src/components/Dropdown/DropdownMenuHeader.tsx | 2 +- packages/ui/src/icons/HeroIcons.tsx | 8 ++++---- .../src/SquigglePlaygroundVersionPicker.tsx | 4 +--- .../versioned-components/src/SquiggleVersionShower.tsx | 2 +- 17 files changed, 26 insertions(+), 28 deletions(-) diff --git a/packages/components/src/components/SquiggleEditor.tsx b/packages/components/src/components/SquiggleEditor.tsx index 6758b600e6..c06e36789c 100644 --- a/packages/components/src/components/SquiggleEditor.tsx +++ b/packages/components/src/components/SquiggleEditor.tsx @@ -56,7 +56,7 @@ export const SquiggleEditor: FC = ({ return (
= ({ >
diff --git a/packages/components/src/components/SquigglePlayground/index.tsx b/packages/components/src/components/SquigglePlayground/index.tsx index a5d0caa892..bf163e0290 100644 --- a/packages/components/src/components/SquigglePlayground/index.tsx +++ b/packages/components/src/components/SquigglePlayground/index.tsx @@ -194,7 +194,7 @@ export const SquigglePlayground: React.FC = ( ); } else { return ( -
+
); diff --git a/packages/components/src/components/SquiggleViewer/ValueViewer/Title.tsx b/packages/components/src/components/SquiggleViewer/ValueViewer/Title.tsx index da474936b3..7ea631cd60 100644 --- a/packages/components/src/components/SquiggleViewer/ValueViewer/Title.tsx +++ b/packages/components/src/components/SquiggleViewer/ValueViewer/Title.tsx @@ -100,7 +100,7 @@ export const Title: FC = (props) => { return (
diff --git a/packages/components/src/components/SquiggleViewer/ValueViewer/WithContext.tsx b/packages/components/src/components/SquiggleViewer/ValueViewer/WithContext.tsx index 166b1e4bec..d47b58c85c 100644 --- a/packages/components/src/components/SquiggleViewer/ValueViewer/WithContext.tsx +++ b/packages/components/src/components/SquiggleViewer/ValueViewer/WithContext.tsx @@ -137,7 +137,7 @@ export const ValueWithContextViewer: FC = ({ return (
= ({ }} tabIndex={viewerType === "tooltip" ? undefined : 0} className={clsx( - "flex justify-between group pr-0.5 hover:bg-gray-100 rounded-sm focus-visible:outline-none", + "group flex justify-between rounded-sm pr-0.5 hover:bg-gray-100 focus-visible:outline-none", isZoomedIn ? "mb-2 px-0.5 py-1 focus:bg-indigo-50" : "focus:bg-indigo-100" diff --git a/packages/components/src/components/SquiggleViewer/ZoomedInNavigation.tsx b/packages/components/src/components/SquiggleViewer/ZoomedInNavigation.tsx index 3d25b9c67d..ad2f2c839b 100644 --- a/packages/components/src/components/SquiggleViewer/ZoomedInNavigation.tsx +++ b/packages/components/src/components/SquiggleViewer/ZoomedInNavigation.tsx @@ -34,7 +34,7 @@ export const ZoomedInNavigation: FC<{ : zoomedInPath.allPrefixPaths(); return ( -
+
{/* We remove the last element, because it's the one being shown */} diff --git a/packages/components/src/components/ViewerWithMenuBar/Layout.tsx b/packages/components/src/components/ViewerWithMenuBar/Layout.tsx index 670acd1636..064e5bd85f 100644 --- a/packages/components/src/components/ViewerWithMenuBar/Layout.tsx +++ b/packages/components/src/components/ViewerWithMenuBar/Layout.tsx @@ -13,11 +13,11 @@ export const Layout: FC<{
-
{menu}
+
{menu}
{indicator} {changeSeedAndRunButton} diff --git a/packages/components/src/components/ViewerWithMenuBar/SimulatingIndicator.tsx b/packages/components/src/components/ViewerWithMenuBar/SimulatingIndicator.tsx index a7e5022cc6..a68008121e 100644 --- a/packages/components/src/components/ViewerWithMenuBar/SimulatingIndicator.tsx +++ b/packages/components/src/components/ViewerWithMenuBar/SimulatingIndicator.tsx @@ -16,7 +16,7 @@ export const SimulatingIndicator: FC<{ return (
diff --git a/packages/components/src/components/ui/FormSection.tsx b/packages/components/src/components/ui/FormSection.tsx index 3c9ca2bb2c..0c7ced8a83 100644 --- a/packages/components/src/components/ui/FormSection.tsx +++ b/packages/components/src/components/ui/FormSection.tsx @@ -5,7 +5,7 @@ export const FormSection: React.FC<{ children: React.ReactNode; }> = ({ title, children }) => (
-
+
{title}
{children}
diff --git a/packages/components/src/components/ui/PanelWithToolbar/ToolbarItem.tsx b/packages/components/src/components/ui/PanelWithToolbar/ToolbarItem.tsx index 04eca31642..066eacb1a0 100644 --- a/packages/components/src/components/ui/PanelWithToolbar/ToolbarItem.tsx +++ b/packages/components/src/components/ui/PanelWithToolbar/ToolbarItem.tsx @@ -33,7 +33,7 @@ export const ToolbarItem: FC = ({ const main = (
({ > ← Back -
+
{modal.title}
@@ -51,8 +51,8 @@ export function PanelWithToolbar({ ); return ( -
-
+
+
{modal ? ( modalHeader ) : ( diff --git a/packages/components/src/widgets/SpecificationWidget.tsx b/packages/components/src/widgets/SpecificationWidget.tsx index 2ded992038..9647752e34 100644 --- a/packages/components/src/widgets/SpecificationWidget.tsx +++ b/packages/components/src/widgets/SpecificationWidget.tsx @@ -103,11 +103,11 @@ const SpecificationView: FC<{ specification: SqSpecification }> = ({ }) => { return (
-
+
Specification
-
+
{specification.name}
{specification.documentation && ( diff --git a/packages/ui/src/components/Button.tsx b/packages/ui/src/components/Button.tsx index 66ab98f765..3fef9210eb 100644 --- a/packages/ui/src/components/Button.tsx +++ b/packages/ui/src/components/Button.tsx @@ -37,8 +37,8 @@ export const Button: FC = ({ className={clsx( "border text-sm font-medium", theme === "primary" - ? "bg-emerald-500 border-emerald-600 text-white" - : "bg-slate-100 border-slate-300 text-gray-600", + ? "border-emerald-600 bg-emerald-500 text-white" + : "border-slate-300 bg-slate-100 text-gray-600", disabled ? "opacity-60" : theme === "primary" diff --git a/packages/ui/src/components/Dropdown/DropdownMenuHeader.tsx b/packages/ui/src/components/Dropdown/DropdownMenuHeader.tsx index 85fe471a63..d612f8de54 100644 --- a/packages/ui/src/components/Dropdown/DropdownMenuHeader.tsx +++ b/packages/ui/src/components/Dropdown/DropdownMenuHeader.tsx @@ -2,7 +2,7 @@ import { FC, PropsWithChildren } from "react"; export const DropdownMenuHeader: FC = ({ children }) => { return ( -
+
{children}
); diff --git a/packages/ui/src/icons/HeroIcons.tsx b/packages/ui/src/icons/HeroIcons.tsx index e91e5584cf..9bc2a5348a 100644 --- a/packages/ui/src/icons/HeroIcons.tsx +++ b/packages/ui/src/icons/HeroIcons.tsx @@ -173,8 +173,8 @@ export const ChevronRightIcon: FC = (props) => ( fill="none" > @@ -189,8 +189,8 @@ export const ChevronLeftIcon: FC = (props) => ( fill="none" > diff --git a/packages/versioned-components/src/SquigglePlaygroundVersionPicker.tsx b/packages/versioned-components/src/SquigglePlaygroundVersionPicker.tsx index 2ee10c60cf..95740f97ca 100644 --- a/packages/versioned-components/src/SquigglePlaygroundVersionPicker.tsx +++ b/packages/versioned-components/src/SquigglePlaygroundVersionPicker.tsx @@ -27,9 +27,7 @@ export const SquigglePlaygroundVersionPicker: FC<{ onChange: (newVersion: SquiggleVersion) => void; // This is mostly Squiggle Hub specific, but we might later decide to do auto-updates in Squiggle Playground too. showUpdatePolicy?: boolean; - // "medium" was intended for "New Model" form in Squiggle Hub, but it's currently unused - size: "small" | "medium"; -}> = ({ version, onChange, showUpdatePolicy, size }) => { +}> = ({ version, onChange, showUpdatePolicy }) => { return (
= ({ version }) => { return ( -
+
{uncheckedVersionTitle(version)}
From e42196c488679ac6dfb5ce3dfac7d3de15eeedf9 Mon Sep 17 00:00:00 2001 From: Ozzie Gooen Date: Tue, 16 Apr 2024 12:05:40 -0700 Subject: [PATCH 07/18] Minor fixes --- .../src/app/models/[owner]/[slug]/EditSquiggleSnippetModel.tsx | 1 - packages/website/src/components/PlaygroundPage/index.tsx | 1 - 2 files changed, 2 deletions(-) diff --git a/packages/hub/src/app/models/[owner]/[slug]/EditSquiggleSnippetModel.tsx b/packages/hub/src/app/models/[owner]/[slug]/EditSquiggleSnippetModel.tsx index 5363d8e885..a6ca2252dd 100644 --- a/packages/hub/src/app/models/[owner]/[slug]/EditSquiggleSnippetModel.tsx +++ b/packages/hub/src/app/models/[owner]/[slug]/EditSquiggleSnippetModel.tsx @@ -331,7 +331,6 @@ export const EditSquiggleSnippetModel: FC = ({ ) : ( diff --git a/packages/website/src/components/PlaygroundPage/index.tsx b/packages/website/src/components/PlaygroundPage/index.tsx index aa68e91f3d..7bdbb0e62c 100644 --- a/packages/website/src/components/PlaygroundPage/index.tsx +++ b/packages/website/src/components/PlaygroundPage/index.tsx @@ -113,7 +113,6 @@ export const PlaygroundPage: FC<{ version: string | null }> = (props) => {
From e2b8d181779fa757c6b3ad08a05cfaea0d7003e6 Mon Sep 17 00:00:00 2001 From: Ozzie Gooen Date: Tue, 16 Apr 2024 17:46:32 -0700 Subject: [PATCH 08/18] Minor touch-ups to playground colors --- .../src/components/CodeEditor/focusGutterExtension.tsx | 6 +++--- .../src/components/SquiggleViewer/ValueViewer/Title.tsx | 5 +---- .../components/SquiggleViewer/ValueViewer/WithContext.tsx | 6 ++---- packages/components/src/styles/common.css | 4 ++-- 4 files changed, 8 insertions(+), 13 deletions(-) diff --git a/packages/components/src/components/CodeEditor/focusGutterExtension.tsx b/packages/components/src/components/CodeEditor/focusGutterExtension.tsx index b2bb5d2b7a..d3f44f94b3 100644 --- a/packages/components/src/components/CodeEditor/focusGutterExtension.tsx +++ b/packages/components/src/components/CodeEditor/focusGutterExtension.tsx @@ -125,10 +125,10 @@ class FocusableMarker extends GutterMarker {
diff --git a/packages/components/src/components/SquiggleViewer/ValueViewer/Title.tsx b/packages/components/src/components/SquiggleViewer/ValueViewer/Title.tsx index 7ea631cd60..bbd1fe8aaa 100644 --- a/packages/components/src/components/SquiggleViewer/ValueViewer/Title.tsx +++ b/packages/components/src/components/SquiggleViewer/ValueViewer/Title.tsx @@ -29,7 +29,6 @@ type StandardProps = { title?: string; color?: string; textSize?: string; - font?: string; icon?: JSX.Element; hasEdges?: boolean; isFocusEnabled?: boolean; @@ -71,7 +70,6 @@ const getStandardProps = (props: TitleProps): StandardProps => { }, taggedName && { title: taggedName, - font: "font-sans", }, isRootImport && { title: exportData?.sourceId || undefined, @@ -94,7 +92,6 @@ export const Title: FC = (props) => { hasEdges = false, isFocusEnabled = true, textSize = "text-sm", - font = "font-mono", } = standards; return ( @@ -109,7 +106,7 @@ export const Title: FC = (props) => { className={clsx( color, textSize, - font, + "font-mono", isFocusEnabled && "cursor-pointer hover:underline" )} onClick={() => isFocusEnabled && zoomIn(valuePath)} diff --git a/packages/components/src/components/SquiggleViewer/ValueViewer/WithContext.tsx b/packages/components/src/components/SquiggleViewer/ValueViewer/WithContext.tsx index d47b58c85c..9190855678 100644 --- a/packages/components/src/components/SquiggleViewer/ValueViewer/WithContext.tsx +++ b/packages/components/src/components/SquiggleViewer/ValueViewer/WithContext.tsx @@ -178,10 +178,8 @@ export const ValueWithContextViewer: FC = ({ }} tabIndex={viewerType === "tooltip" ? undefined : 0} className={clsx( - "group flex justify-between rounded-sm pr-0.5 hover:bg-gray-100 focus-visible:outline-none", - isZoomedIn - ? "mb-2 px-0.5 py-1 focus:bg-indigo-50" - : "focus:bg-indigo-100" + "group flex justify-between rounded-sm pr-0.5 hover:bg-gray-100 focus:bg-slate-100 focus-visible:outline-none", + isZoomedIn && "mb-2 px-0.5 py-1" )} onFocus={(_) => { scrollEditorToPath(); diff --git a/packages/components/src/styles/common.css b/packages/components/src/styles/common.css index 8bf7a040e4..bf52394743 100644 --- a/packages/components/src/styles/common.css +++ b/packages/components/src/styles/common.css @@ -40,11 +40,11 @@ } .cm-gutterElement.cm-activeLineGutter { - background-color: #abd3e857; + background-color: #f1f5f9; } .ͼ2 .cm-activeLine { - background-color: #abd3e857; + background-color: #f1f5f9; } .cm-gutter.cm-lineNumbers { From 35ac26247df9977b62abff4033b174ed5b2020a8 Mon Sep 17 00:00:00 2001 From: Ozzie Gooen Date: Tue, 16 Apr 2024 18:04:12 -0700 Subject: [PATCH 09/18] SquiggleViewer to use cyan instead of purple --- .../SquiggleViewer/ValueViewer/Title.tsx | 4 ++-- .../ValueViewer/WithContext.tsx | 2 +- .../ViewerWithMenuBar/ViewerMenu.tsx | 21 +++++++++++++++---- 3 files changed, 20 insertions(+), 7 deletions(-) diff --git a/packages/components/src/components/SquiggleViewer/ValueViewer/Title.tsx b/packages/components/src/components/SquiggleViewer/ValueViewer/Title.tsx index bbd1fe8aaa..e61da606ae 100644 --- a/packages/components/src/components/SquiggleViewer/ValueViewer/Title.tsx +++ b/packages/components/src/components/SquiggleViewer/ValueViewer/Title.tsx @@ -73,8 +73,8 @@ const getStandardProps = (props: TitleProps): StandardProps => { }, isRootImport && { title: exportData?.sourceId || undefined, - color: "text-violet-900", - icon: , + color: "text-cyan-600", + icon: , hasEdges: false, }, ]); diff --git a/packages/components/src/components/SquiggleViewer/ValueViewer/WithContext.tsx b/packages/components/src/components/SquiggleViewer/ValueViewer/WithContext.tsx index 9190855678..6129270c4e 100644 --- a/packages/components/src/components/SquiggleViewer/ValueViewer/WithContext.tsx +++ b/packages/components/src/components/SquiggleViewer/ValueViewer/WithContext.tsx @@ -237,7 +237,7 @@ export const ValueWithContextViewer: FC = ({ className={clsx( "cursor-pointer transition", isRootImport - ? "text-violet-400 hover:!text-violet-900 group-hover:text-violet-500 group-focus:text-violet-600" + ? "text-cyan-200 hover:!text-cyan-900 group-hover:text-cyan-700 group-focus:text-cyan-700" : "text-slate-200 hover:!text-slate-900 group-hover:text-slate-400 group-focus:text-slate-400" )} /> diff --git a/packages/components/src/components/ViewerWithMenuBar/ViewerMenu.tsx b/packages/components/src/components/ViewerWithMenuBar/ViewerMenu.tsx index 475ae3ee01..fcfd09a8cf 100644 --- a/packages/components/src/components/ViewerWithMenuBar/ViewerMenu.tsx +++ b/packages/components/src/components/ViewerWithMenuBar/ViewerMenu.tsx @@ -2,7 +2,6 @@ import clsx from "clsx"; import { FC } from "react"; import { - CodeBracketIcon, Dropdown, DropdownMenu, DropdownMenuActionItem, @@ -77,12 +76,27 @@ export const ViewerMenu: FC = ({ return null; } }; + const viewerName = () => { + switch (tab) { + case "Imports": + return "Imports"; + case "Variables": + return "Private Variables"; + case "Exports": + return "Exports"; + case "Result": + return "Final Result"; + default: + return ""; + } + }; return ( tab !== "AST" && ( } + title={ + + } onClick={() => { setViewerTab(tab); close(); @@ -93,7 +107,6 @@ export const ViewerMenu: FC = ({ })} Debugging } onClick={() => { setViewerTab("AST"); From e6188a88b21d6d186cddb39238f7141fc190ec11 Mon Sep 17 00:00:00 2001 From: Ozzie Gooen Date: Tue, 16 Apr 2024 18:22:18 -0700 Subject: [PATCH 10/18] Adjustments in ui colors. Slate->gray, indigo->blue --- packages/ui/src/components/Button.tsx | 6 +++--- .../Dropdown/DropdownMenuHeader.tsx | 4 +--- .../Dropdown/DropdownMenuItemLayout.tsx | 6 +++--- .../Dropdown/DropdownMenuSeparator.tsx | 2 +- packages/ui/src/components/Dropdown/index.tsx | 2 +- packages/ui/src/components/Modal.tsx | 2 +- packages/ui/src/components/StyledTab.tsx | 4 ++-- .../ui/src/components/WithToasts/index.tsx | 2 +- .../ui/src/forms/common/FormFieldLayout.tsx | 4 ++-- .../ui/src/forms/fields/SelectFormField.tsx | 21 +++++++++---------- .../ui/src/forms/styled/StyledCheckbox.tsx | 2 +- .../ui/src/forms/styled/StyledColorInput.tsx | 4 ++-- packages/ui/src/forms/styled/StyledInput.tsx | 2 +- packages/ui/src/forms/styled/StyledRadio.tsx | 4 ++-- .../ui/src/forms/styled/StyledTextArea.tsx | 4 ++-- packages/ui/src/stories/StyledTab.stories.tsx | 2 +- 16 files changed, 34 insertions(+), 37 deletions(-) diff --git a/packages/ui/src/components/Button.tsx b/packages/ui/src/components/Button.tsx index 3fef9210eb..7f1aa66f3b 100644 --- a/packages/ui/src/components/Button.tsx +++ b/packages/ui/src/components/Button.tsx @@ -38,14 +38,14 @@ export const Button: FC = ({ "border text-sm font-medium", theme === "primary" ? "border-emerald-600 bg-emerald-500 text-white" - : "border-slate-300 bg-slate-100 text-gray-600", + : "border-gray-300 bg-gray-50 text-gray-500", disabled ? "opacity-60" : theme === "primary" ? "hover:bg-emerald-600" - : "hover:bg-slate-200 hover:text-gray-900", + : "hover:bg-gray-200 hover:text-gray-900", wide && "w-full", - size === "medium" && "h-8 rounded-md", + size === "medium" && "h-8 rounded-sm", size === "small" && "h-6 rounded-sm", // This could probably be simplified, but I'm not sure how. // Tailwind group-* styles don't allow styling based on parent, only on parent state. diff --git a/packages/ui/src/components/Dropdown/DropdownMenuHeader.tsx b/packages/ui/src/components/Dropdown/DropdownMenuHeader.tsx index d612f8de54..8ba52c669f 100644 --- a/packages/ui/src/components/Dropdown/DropdownMenuHeader.tsx +++ b/packages/ui/src/components/Dropdown/DropdownMenuHeader.tsx @@ -2,8 +2,6 @@ import { FC, PropsWithChildren } from "react"; export const DropdownMenuHeader: FC = ({ children }) => { return ( -
- {children} -
+
{children}
); }; diff --git a/packages/ui/src/components/Dropdown/DropdownMenuItemLayout.tsx b/packages/ui/src/components/Dropdown/DropdownMenuItemLayout.tsx index e98fe36cd8..9a8127708e 100644 --- a/packages/ui/src/components/Dropdown/DropdownMenuItemLayout.tsx +++ b/packages/ui/src/components/Dropdown/DropdownMenuItemLayout.tsx @@ -17,7 +17,7 @@ const iconDisplay = (icon?: FC, acting?: boolean) => { @@ -30,9 +30,9 @@ export const DropdownMenuItemLayout: FC = ({ acting, }) => { return ( -
+
{iconDisplay(icon, acting)} -
+
{title}
diff --git a/packages/ui/src/components/Dropdown/DropdownMenuSeparator.tsx b/packages/ui/src/components/Dropdown/DropdownMenuSeparator.tsx index 8bb2e89881..9a408af82a 100644 --- a/packages/ui/src/components/Dropdown/DropdownMenuSeparator.tsx +++ b/packages/ui/src/components/Dropdown/DropdownMenuSeparator.tsx @@ -1,5 +1,5 @@ import { FC, PropsWithChildren } from "react"; export const DropdownMenuSeparator: FC = ({ children }) => { - return
{children}
; + return
{children}
; }; diff --git a/packages/ui/src/components/Dropdown/index.tsx b/packages/ui/src/components/Dropdown/index.tsx index 137f60f88f..011e3b3399 100644 --- a/packages/ui/src/components/Dropdown/index.tsx +++ b/packages/ui/src/components/Dropdown/index.tsx @@ -78,7 +78,7 @@ export const Dropdown: FC = ({
= ({ children }) => {
{children}
{description !== undefined && ( -
{description}
+
{description}
)} ); diff --git a/packages/ui/src/forms/fields/SelectFormField.tsx b/packages/ui/src/forms/fields/SelectFormField.tsx index 2b137b8269..6496b43fe9 100644 --- a/packages/ui/src/forms/fields/SelectFormField.tsx +++ b/packages/ui/src/forms/fields/SelectFormField.tsx @@ -204,29 +204,28 @@ export function SelectFormField< * But it would require @emotion/cache dependency and also I'm unsure about performance implications. */ "!min-h-0", - "bg-white border-slate-300 border rounded-md shadow-sm focus-within:ring-indigo-500 focus-within:border-indigo-500 focus-within:ring-1" + "bg-white border-gray-300 border rounded-sm shadow-sm focus-within:ring-blue-500 focus-within:border-blue-500 focus-within:ring-1" ), // disable default browser focus style input: () => "[&_input:focus]:!ring-transparent", placeholder: () => - clsx("text-slate-300", size === "small" && "text-sm"), + clsx("text-gray-300", size === "small" && "text-sm"), valueContainer: () => "px-3", - clearIndicator: () => - "text-slate-300 hover:text-slate-500 px-2", + clearIndicator: () => "text-gray-300 hover:text-gray-500 px-2", loadingIndicator: () => - "text-slate-300 hover:text-slate-500 px-2", - indicatorSeparator: () => "w-px bg-slate-300 my-2", + "text-gray-300 hover:text-gray-500 px-2", + indicatorSeparator: () => "w-px bg-gray-300 my-2", dropdownIndicator: () => - "text-slate-300 hover:text-slate-500 px-2", + "text-gray-300 hover:text-gray-500 px-2", menuPortal: () => "!z-[100]", // based on Dropdown styles menu: () => - "mt-2 rounded-md bg-white shadow-xl border border-slate-300 overflow-hidden", + "mt-2 rounded-sm bg-white shadow-xl border border-gray-300 overflow-hidden", menuList: () => "p-1 overflow-auto", option: () => - "px-2 py-1.5 rounded hover:bg-blue-100 text-slate-700 hover:text-slate-900", - loadingMessage: () => "text-slate-500", - noOptionsMessage: () => "text-slate-400 p-2", + "px-2 py-1.5 rounded hover:bg-slate-100 text-gray-700 hover:text-gray-700", + loadingMessage: () => "text-gray-500", + noOptionsMessage: () => "text-gray-400 p-2", }} menuPortalTarget={ typeof document === "undefined" ? undefined : document.body diff --git a/packages/ui/src/forms/styled/StyledCheckbox.tsx b/packages/ui/src/forms/styled/StyledCheckbox.tsx index 9cf1716a18..013f0f04f4 100644 --- a/packages/ui/src/forms/styled/StyledCheckbox.tsx +++ b/packages/ui/src/forms/styled/StyledCheckbox.tsx @@ -9,7 +9,7 @@ export const StyledCheckbox = forwardRef< type="checkbox" ref={ref} {...props} - className="form-checkbox h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" + className="form-checkbox h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500" /> ); }); diff --git a/packages/ui/src/forms/styled/StyledColorInput.tsx b/packages/ui/src/forms/styled/StyledColorInput.tsx index 018cc74cad..2b008b3a1e 100644 --- a/packages/ui/src/forms/styled/StyledColorInput.tsx +++ b/packages/ui/src/forms/styled/StyledColorInput.tsx @@ -20,13 +20,13 @@ export function StyledColorInput({ value, onChange }: Props) { color={value} onChange={onChange} prefixed - className="mt-1 w-20 border border-gray-300 bg-slate-100 px-1 py-0 text-sm outline-indigo-500" + className="mt-1 w-20 border border-gray-300 bg-gray-100 px-1 py-0 text-sm outline-blue-500" />
)} > -
+
( type={type} {...props} className={clsx( - "form-input block w-full rounded-md border-slate-300 text-sm shadow-sm placeholder:text-slate-300 focus:border-indigo-500 focus:ring-indigo-500 active:border-indigo-500 active:ring-indigo-500 disabled:text-slate-400", + "form-input block w-full rounded-sm border-gray-300 text-sm shadow-sm placeholder:text-gray-300 focus:border-blue-500 focus:ring-blue-500 active:border-blue-500 active:ring-blue-500 disabled:text-gray-400", size === "normal" ? "h-10" : "h-8" )} /> diff --git a/packages/ui/src/forms/styled/StyledRadio.tsx b/packages/ui/src/forms/styled/StyledRadio.tsx index 6dbc9add2e..b0492b45cd 100644 --- a/packages/ui/src/forms/styled/StyledRadio.tsx +++ b/packages/ui/src/forms/styled/StyledRadio.tsx @@ -28,7 +28,7 @@ export function StyledRadio({ value, options, onChange }: StyledRadioProps) { onChange={() => onChange(option.id)} checked={option.id === value} className={clsx( - "form-radio text-indigo-500 focus:ring-transparent", + "form-radio text-blue-500 focus:ring-transparent", option.disabled ? "cursor-not-allowed" : "cursor-pointer" )} disabled={option.disabled} @@ -40,7 +40,7 @@ export function StyledRadio({ value, options, onChange }: StyledRadioProps) { "text-sm font-medium", option.disabled ? "cursor-not-allowed text-gray-400" - : "cursor-pointer text-gray-600 group-hover:text-gray-900" + : "cursor-pointer text-gray-600 group-hover:text-gray-800" )} > {option.name} diff --git a/packages/ui/src/forms/styled/StyledTextArea.tsx b/packages/ui/src/forms/styled/StyledTextArea.tsx index 6c21be99ab..80514c257a 100644 --- a/packages/ui/src/forms/styled/StyledTextArea.tsx +++ b/packages/ui/src/forms/styled/StyledTextArea.tsx @@ -16,8 +16,8 @@ export const StyledTextArea = forwardRef< ref={ref} {...props} className={clsx( - "form-input block w-full rounded-md border-slate-300 text-sm shadow-sm placeholder:text-slate-300 focus:border-indigo-500 focus:ring-indigo-500 active:border-indigo-500 active:ring-indigo-500" - // disabled && "text-slate-400" + "form-input block w-full rounded-sm border-gray-300 text-sm shadow-sm placeholder:text-gray-300 focus:border-blue-500 focus:ring-blue-500 active:border-blue-500 active:ring-blue-500" + // disabled && "text-gray-400" )} /> ); diff --git a/packages/ui/src/stories/StyledTab.stories.tsx b/packages/ui/src/stories/StyledTab.stories.tsx index f7cab6e3ba..ced41cba86 100644 --- a/packages/ui/src/stories/StyledTab.stories.tsx +++ b/packages/ui/src/stories/StyledTab.stories.tsx @@ -21,7 +21,7 @@ export const Default: Story = { -
+
Code panel Settings panel From bb076cf5a84906cd7308a960a16b9cdd0b3677aa Mon Sep 17 00:00:00 2001 From: Ozzie Gooen Date: Tue, 16 Apr 2024 20:31:03 -0700 Subject: [PATCH 11/18] Added StyledToggle, some refactoring --- .../CodeEditor/focusGutterExtension.tsx | 4 +- .../AutorunnerMenuItem.tsx | 19 +++++-- .../ViewerWithMenuBar/ViewerMenu.tsx | 6 +-- .../layout/RootLayout/PageMenuLink.tsx | 2 +- packages/ui/src/components/StyledTab.tsx | 31 ++++------- packages/ui/src/forms/styled/StyledToggle.tsx | 52 +++++++++++++++++++ packages/ui/src/index.ts | 1 + .../stories/{ => Forms}/StyledTab.stories.tsx | 4 +- .../stories/Forms/StyledToggle.stories.tsx | 51 ++++++++++++++++++ 9 files changed, 138 insertions(+), 32 deletions(-) create mode 100644 packages/ui/src/forms/styled/StyledToggle.tsx rename packages/ui/src/stories/{ => Forms}/StyledTab.stories.tsx (91%) create mode 100644 packages/ui/src/stories/Forms/StyledToggle.stories.tsx diff --git a/packages/components/src/components/CodeEditor/focusGutterExtension.tsx b/packages/components/src/components/CodeEditor/focusGutterExtension.tsx index d3f44f94b3..8242acaf50 100644 --- a/packages/components/src/components/CodeEditor/focusGutterExtension.tsx +++ b/packages/components/src/components/CodeEditor/focusGutterExtension.tsx @@ -125,9 +125,9 @@ class FocusableMarker extends GutterMarker {
setAutorunMode(!autorunMode)} > - Autorun +
+ { + setAutorunMode(isChecked); + }} + /> + Autorun +
); diff --git a/packages/components/src/components/ViewerWithMenuBar/ViewerMenu.tsx b/packages/components/src/components/ViewerWithMenuBar/ViewerMenu.tsx index fcfd09a8cf..56b4ed231b 100644 --- a/packages/components/src/components/ViewerWithMenuBar/ViewerMenu.tsx +++ b/packages/components/src/components/ViewerWithMenuBar/ViewerMenu.tsx @@ -19,11 +19,11 @@ const MenuItemTitle: FC<{ title: string; type: string | null }> = ({ const isEmpty = type === null; return (
- {title} + {title} {isEmpty ? ( - Empty + Empty ) : ( - {type} + {type} )}
); diff --git a/packages/hub/src/components/layout/RootLayout/PageMenuLink.tsx b/packages/hub/src/components/layout/RootLayout/PageMenuLink.tsx index ce9ff17a78..38bab96c58 100644 --- a/packages/hub/src/components/layout/RootLayout/PageMenuLink.tsx +++ b/packages/hub/src/components/layout/RootLayout/PageMenuLink.tsx @@ -34,7 +34,7 @@ export const PageMenuLink: FC = ({ const Icon = icon; return mode === "desktop" ? ( diff --git a/packages/ui/src/components/StyledTab.tsx b/packages/ui/src/components/StyledTab.tsx index 018b48319d..bbabd76722 100644 --- a/packages/ui/src/components/StyledTab.tsx +++ b/packages/ui/src/components/StyledTab.tsx @@ -1,4 +1,5 @@ "use client"; + import { Tab } from "@headlessui/react"; import { clsx } from "clsx"; import { FC, Fragment, ReactNode } from "react"; @@ -25,7 +26,7 @@ type StyledTabType = FC & { }; const tabStyle = - "group flex rounded-md focus:outline-none focus-visible:ring-offset-gray-100 hover:bg-gray-300 mx-px cursor-pointer"; + "group flex rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-gray-500 hover:bg-gray-100 mx-1 cursor-pointer transition-colors duration-200"; const StyledTabInner: FC = ({ name, @@ -35,36 +36,27 @@ const StyledTabInner: FC = ({ <> {Icon && ( )} - - {name} - + {name} ); -//The really annoying thing is that if button isn't in this component, then clicking it won't work. -//So we have to include button here, don't try to move into StyledTabInner export const StyledTab: StyledTabType = ({ name, icon: Icon }) => ( {({ selected }) => ( @@ -81,8 +73,7 @@ const StyledTabButton: FC = (props) => (
); -const tabListStyle = - "flex w-fit py-0.5 px-0.5 rounded-md bg-gray-100 hover:bg-gray-200"; +const tabListStyle = "flex space-x-1 rounded-md bg-gray-100 p-1"; StyledTab.List = function StyledTabList({ children }) { return {children}; diff --git a/packages/ui/src/forms/styled/StyledToggle.tsx b/packages/ui/src/forms/styled/StyledToggle.tsx new file mode 100644 index 0000000000..3d18973e6d --- /dev/null +++ b/packages/ui/src/forms/styled/StyledToggle.tsx @@ -0,0 +1,52 @@ +import { Switch } from "@headlessui/react"; +import clsx from "clsx"; + +export type StyledToggleProps = { + checked: boolean; + showFocusRing?: boolean; + size?: "medium" | "tiny"; + onChange(newValue: boolean): void; +}; + +export function StyledToggle({ + checked, + showFocusRing = true, + size = "medium", + onChange, +}: StyledToggleProps) { + const sizeClasses = { + medium: { + toggle: "h-6 w-11", + circle: "h-5 w-5", + translate: "translate-x-5", + }, + tiny: { + toggle: "h-3 w-5", + circle: "h-2 w-2", + translate: "translate-x-2", + }, + }; + + const { toggle, circle, translate } = sizeClasses[size]; + + return ( + + Toggle + + ); +} diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index 8335404bd7..6429dfb88d 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -38,6 +38,7 @@ export { StyledCheckbox } from "./forms/styled/StyledCheckbox.js"; export { StyledColorInput } from "./forms/styled/StyledColorInput.js"; export { StyledInput } from "./forms/styled/StyledInput.js"; export { StyledTextArea } from "./forms/styled/StyledTextArea.js"; +export { StyledToggle } from "./forms/styled/StyledToggle.js"; export { DotsHorizontalIcon } from "./icons/DotsHorizontalIcon.js"; export { EditIcon } from "./icons/EditIcon.js"; diff --git a/packages/ui/src/stories/StyledTab.stories.tsx b/packages/ui/src/stories/Forms/StyledTab.stories.tsx similarity index 91% rename from packages/ui/src/stories/StyledTab.stories.tsx rename to packages/ui/src/stories/Forms/StyledTab.stories.tsx index ced41cba86..1a2df0fd45 100644 --- a/packages/ui/src/stories/StyledTab.stories.tsx +++ b/packages/ui/src/stories/Forms/StyledTab.stories.tsx @@ -1,7 +1,7 @@ import type { Meta, StoryObj } from "@storybook/react"; -import { StyledTab } from "../components/StyledTab.js"; -import { BoltIcon, FireIcon } from "../index.js"; +import { StyledTab } from "../../components/StyledTab.js"; +import { BoltIcon, FireIcon } from "../../icons/HeroIcons.js"; /** * StyledTab component wraps the [\](https://headlessui.com/react/tabs) component from Headless UI. diff --git a/packages/ui/src/stories/Forms/StyledToggle.stories.tsx b/packages/ui/src/stories/Forms/StyledToggle.stories.tsx new file mode 100644 index 0000000000..3d04c8e700 --- /dev/null +++ b/packages/ui/src/stories/Forms/StyledToggle.stories.tsx @@ -0,0 +1,51 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import { useState } from "react"; + +import { + StyledToggle, + StyledToggleProps, +} from "../../forms/styled/StyledToggle.js"; + +const meta = { component: StyledToggle } satisfies Meta; + +export default meta; + +type Story = StoryObj; + +const renderToggle = (args: StyledToggleProps) => { + const [checked, setChecked] = useState(false); + return ; +}; + +export const Default: Story = { + args: { + checked: false, + onChange: (newValue: boolean) => { + console.log("Toggle value changed to:", newValue); + }, + }, + + render: (args) => renderToggle(args), +}; + +export const WithoutFocusRing: Story = { + args: { + checked: false, + showFocusRing: false, + onChange: (newValue: boolean) => { + console.log("Toggle value changed to:", newValue); + }, + }, + render: (args) => renderToggle(args), +}; + +export const Tiny: Story = { + args: { + checked: false, + size: "tiny", + onChange: (newValue: boolean) => { + console.log("Toggle value changed to:", newValue); + }, + }, + render: (args) => renderToggle(args), +}; From 363a0dd63ef0f44acfeb50adb4dca0caa3d4b2df Mon Sep 17 00:00:00 2001 From: Ozzie Gooen Date: Wed, 17 Apr 2024 08:52:41 -0700 Subject: [PATCH 12/18] Changing version picker --- .../AutorunnerMenuItem.tsx | 1 + .../[slug]/EditSquiggleSnippetModel.tsx | 14 +-- .../src/SquigglePlaygroundVersionPicker.tsx | 95 ------------------- ...quigglePlaygroundVersionPickerDropdown.tsx | 90 ++++++++++++++++++ .../src/SquiggleVersionShower.tsx | 2 +- packages/versioned-components/src/index.ts | 7 +- 6 files changed, 104 insertions(+), 105 deletions(-) delete mode 100644 packages/versioned-components/src/SquigglePlaygroundVersionPicker.tsx create mode 100644 packages/versioned-components/src/SquigglePlaygroundVersionPickerDropdown.tsx diff --git a/packages/components/src/components/SquigglePlayground/LeftPlaygroundPanel/AutorunnerMenuItem.tsx b/packages/components/src/components/SquigglePlayground/LeftPlaygroundPanel/AutorunnerMenuItem.tsx index 45f8c848ef..e084f26915 100644 --- a/packages/components/src/components/SquigglePlayground/LeftPlaygroundPanel/AutorunnerMenuItem.tsx +++ b/packages/components/src/components/SquigglePlayground/LeftPlaygroundPanel/AutorunnerMenuItem.tsx @@ -26,6 +26,7 @@ export const AutorunnerMenuItem: React.FC<{ { setAutorunMode(isChecked); }} diff --git a/packages/hub/src/app/models/[owner]/[slug]/EditSquiggleSnippetModel.tsx b/packages/hub/src/app/models/[owner]/[slug]/EditSquiggleSnippetModel.tsx index a6ca2252dd..9f1ccc7d38 100644 --- a/packages/hub/src/app/models/[owner]/[slug]/EditSquiggleSnippetModel.tsx +++ b/packages/hub/src/app/models/[owner]/[slug]/EditSquiggleSnippetModel.tsx @@ -17,9 +17,9 @@ import { } from "@quri/ui"; import { checkSquiggleVersion, - SquigglePlaygroundVersionPicker, + SquigglePlaygroundVersionPickerDropdown, type SquiggleVersion, - SquiggleVersionShower, + uncheckedVersionTitle, useAdjustSquiggleVersion, versionedSquigglePackages, versionSupportsDropdownMenu, @@ -328,11 +328,13 @@ export const EditSquiggleSnippetModel: FC = ({ renderExtraControls: () => (
{model.isEditable || forceVersionPicker ? ( - + > + {uncheckedVersionTitle(version)}{" "} + ) : ( = ({ offset={5} > {/* div wrapper is required because TextTooltip clones its children and SquiggleVersionShower doesn't forwardRef */} -
- -
+
{uncheckedVersionTitle(version)}
 )} {model.isEditable && ( diff --git a/packages/versioned-components/src/SquigglePlaygroundVersionPicker.tsx b/packages/versioned-components/src/SquigglePlaygroundVersionPicker.tsx deleted file mode 100644 index 95740f97ca..0000000000 --- a/packages/versioned-components/src/SquigglePlaygroundVersionPicker.tsx +++ /dev/null @@ -1,95 +0,0 @@ -"use client"; -import { FC } from "react"; - -import { - Dropdown, - DropdownMenu, - DropdownMenuActionItem, - DropdownMenuHeader, - DropdownMenuLinkItem, - DropdownMenuModalActionItem, - DropdownMenuSeparator, - HelpIcon, - Modal, -} from "@quri/ui"; - -import { - SquiggleVersionShower, - versionIcon, - versionTitle, -} from "./SquiggleVersionShower.js"; -import { SquiggleVersion, squiggleVersions } from "./versions.js"; - -const CHANGELOG_URL = "https://www.squiggle-language.com/docs/Changelog"; - -export const SquigglePlaygroundVersionPicker: FC<{ - version: string; - onChange: (newVersion: SquiggleVersion) => void; - // This is mostly Squiggle Hub specific, but we might later decide to do auto-updates in Squiggle Playground too. - showUpdatePolicy?: boolean; -}> = ({ version, onChange, showUpdatePolicy }) => { - return ( -
- ( - - Squiggle Version - {squiggleVersions.map((version) => ( - { - onChange(version); - close(); - }} - /> - ))} - - {showUpdatePolicy ? ( - ( - - -
- - Version Update Policy -
- - - {/* Markdown here would be nice, but we don't have it available in @quri/ui. */} -
-

- We’ll auto-update your model to the most recent - non-breaking version of Squiggle. -

-

- However, if you use the{" "} - Next version, - it will always stay on the Beta - so only do this if - you’re okay fixing it if it breaks, or temporarily if - you need to use a feature that’s not been released - yet. -

-
- - - )} - /> - ) : null} - - - )} - > - - -
- ); -}; diff --git a/packages/versioned-components/src/SquigglePlaygroundVersionPickerDropdown.tsx b/packages/versioned-components/src/SquigglePlaygroundVersionPickerDropdown.tsx new file mode 100644 index 0000000000..a5feaef9fb --- /dev/null +++ b/packages/versioned-components/src/SquigglePlaygroundVersionPickerDropdown.tsx @@ -0,0 +1,90 @@ +"use client"; +import { FC, PropsWithChildren } from "react"; + +import { + Dropdown, + DropdownMenu, + DropdownMenuActionItem, + DropdownMenuHeader, + DropdownMenuLinkItem, + DropdownMenuModalActionItem, + DropdownMenuSeparator, + HelpIcon, + Modal, +} from "@quri/ui"; + +import { versionIcon, versionTitle } from "./SquiggleVersionShower.js"; +import { SquiggleVersion, squiggleVersions } from "./versions.js"; + +const CHANGELOG_URL = "https://www.squiggle-language.com/docs/Changelog"; + +export const SquigglePlaygroundVersionPickerDropdown: FC< + PropsWithChildren<{ + version: string; + onChange: (newVersion: SquiggleVersion) => void; + // This is mostly Squiggle Hub specific, but we might later decide to do auto-updates in Squiggle Playground too. + showUpdatePolicy?: boolean; + }> +> = ({ version, onChange, showUpdatePolicy, children }) => { + return ( + ( + + Squiggle Version + {squiggleVersions.map((version) => ( + { + onChange(version); + close(); + }} + /> + ))} + + {showUpdatePolicy ? ( + ( + + +
+ + Version Update Policy +
+ + + {/* Markdown here would be nice, but we don't have it available in @quri/ui. */} +
+

+ We’ll auto-update your model to the most recent + non-breaking version of Squiggle. +

+

+ However, if you use the{" "} + Next version, it + will always stay on the Beta - so only do this if you’re + okay fixing it if it breaks, or temporarily if you need + to use a feature that’s not been released yet. +

+
+ + + )} + /> + ) : null} + + + )} + > + {children} + + ); +}; diff --git a/packages/versioned-components/src/SquiggleVersionShower.tsx b/packages/versioned-components/src/SquiggleVersionShower.tsx index 3a9147a2d2..a45e17c782 100644 --- a/packages/versioned-components/src/SquiggleVersionShower.tsx +++ b/packages/versioned-components/src/SquiggleVersionShower.tsx @@ -6,7 +6,7 @@ import { ChevronRightIcon, CodeBracketIcon, WrenchIcon } from "@quri/ui"; import { checkSquiggleVersion, SquiggleVersion } from "./versions.js"; export function versionTitle(version: SquiggleVersion) { - return version === "dev" ? "vNext" : `v${version}`; + return version === "dev" ? "next" : `v${version}`; } export function uncheckedVersionTitle(version: string) { diff --git a/packages/versioned-components/src/index.ts b/packages/versioned-components/src/index.ts index a53155908c..bc11323cb3 100644 --- a/packages/versioned-components/src/index.ts +++ b/packages/versioned-components/src/index.ts @@ -1,5 +1,8 @@ -export { SquigglePlaygroundVersionPicker } from "./SquigglePlaygroundVersionPicker.js"; -export { SquiggleVersionShower } from "./SquiggleVersionShower.js"; +export { SquigglePlaygroundVersionPickerDropdown } from "./SquigglePlaygroundVersionPickerDropdown.js"; +export { + SquiggleVersionShower, + uncheckedVersionTitle, +} from "./SquiggleVersionShower.js"; export { versionedSquigglePackages } from "./versionedSquigglePackages.js"; export { From 013c8c6bb9ae24e62c3a7040a134816eff612c0d Mon Sep 17 00:00:00 2001 From: Ozzie Gooen Date: Wed, 17 Apr 2024 09:39:07 -0700 Subject: [PATCH 13/18] Removed StyledToggle export from UI, as it was stopping Hub building --- .../AutorunnerMenuItem.tsx | 20 ++++--------------- packages/ui/src/index.ts | 2 +- 2 files changed, 5 insertions(+), 17 deletions(-) diff --git a/packages/components/src/components/SquigglePlayground/LeftPlaygroundPanel/AutorunnerMenuItem.tsx b/packages/components/src/components/SquigglePlayground/LeftPlaygroundPanel/AutorunnerMenuItem.tsx index e084f26915..a706fbc6ad 100644 --- a/packages/components/src/components/SquigglePlayground/LeftPlaygroundPanel/AutorunnerMenuItem.tsx +++ b/packages/components/src/components/SquigglePlayground/LeftPlaygroundPanel/AutorunnerMenuItem.tsx @@ -1,7 +1,7 @@ import clsx from "clsx"; import React from "react"; -import { StyledToggle } from "@quri/ui"; +import { BoltIcon, PauseIcon } from "@quri/ui"; import { ToolbarItem } from "../../ui/PanelWithToolbar/ToolbarItem.js"; @@ -16,23 +16,11 @@ export const AutorunnerMenuItem: React.FC<{ > setAutorunMode(!autorunMode)} > -
- { - setAutorunMode(isChecked); - }} - /> - Autorun -
+ Autorun
); diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index 6429dfb88d..11ec3103fb 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -38,7 +38,7 @@ export { StyledCheckbox } from "./forms/styled/StyledCheckbox.js"; export { StyledColorInput } from "./forms/styled/StyledColorInput.js"; export { StyledInput } from "./forms/styled/StyledInput.js"; export { StyledTextArea } from "./forms/styled/StyledTextArea.js"; -export { StyledToggle } from "./forms/styled/StyledToggle.js"; +// export { StyledToggle } from "./forms/styled/StyledToggle.js"; // For some reason, this breaks the Hub, in dev. export { DotsHorizontalIcon } from "./icons/DotsHorizontalIcon.js"; export { EditIcon } from "./icons/EditIcon.js"; From c434140c602cd399805d202018b6b0c53609050f Mon Sep 17 00:00:00 2001 From: Ozzie Gooen Date: Wed, 17 Apr 2024 09:55:57 -0700 Subject: [PATCH 14/18] Integrated SquigglePlaygroundVersionPickerDropdown --- .../[owner]/[slug]/EditSquiggleSnippetModel.tsx | 11 +++++++++-- .../src/SquigglePlaygroundVersionPickerDropdown.tsx | 1 + .../website/src/components/PlaygroundPage/index.tsx | 13 ++++++++++--- 3 files changed, 20 insertions(+), 5 deletions(-) diff --git a/packages/hub/src/app/models/[owner]/[slug]/EditSquiggleSnippetModel.tsx b/packages/hub/src/app/models/[owner]/[slug]/EditSquiggleSnippetModel.tsx index 9f1ccc7d38..b263ee1aab 100644 --- a/packages/hub/src/app/models/[owner]/[slug]/EditSquiggleSnippetModel.tsx +++ b/packages/hub/src/app/models/[owner]/[slug]/EditSquiggleSnippetModel.tsx @@ -4,6 +4,7 @@ import { BaseSyntheticEvent, FC, use, useMemo, useState } from "react"; import { FormProvider, useFieldArray, useForm } from "react-hook-form"; import { graphql, useFragment } from "react-relay"; +import { PlaygroundToolbarItem } from "@quri/squiggle-components"; import { ButtonWithDropdown, CommentIcon, @@ -333,7 +334,9 @@ export const EditSquiggleSnippetModel: FC = ({ onChange={handleVersionChange} showUpdatePolicy > - {uncheckedVersionTitle(version)}{" "} + + {uncheckedVersionTitle(version)} + ) : ( = ({ offset={5} > {/* div wrapper is required because TextTooltip clones its children and SquiggleVersionShower doesn't forwardRef */} -
{uncheckedVersionTitle(version)}
+
+ + {uncheckedVersionTitle(version)}{" "} + +
)} {model.isEditable && ( diff --git a/packages/versioned-components/src/SquigglePlaygroundVersionPickerDropdown.tsx b/packages/versioned-components/src/SquigglePlaygroundVersionPickerDropdown.tsx index a5feaef9fb..f0412dc255 100644 --- a/packages/versioned-components/src/SquigglePlaygroundVersionPickerDropdown.tsx +++ b/packages/versioned-components/src/SquigglePlaygroundVersionPickerDropdown.tsx @@ -28,6 +28,7 @@ export const SquigglePlaygroundVersionPickerDropdown: FC< > = ({ version, onChange, showUpdatePolicy, children }) => { return ( ( Squiggle Version diff --git a/packages/website/src/components/PlaygroundPage/index.tsx b/packages/website/src/components/PlaygroundPage/index.tsx index 7bdbb0e62c..4fba4824d6 100644 --- a/packages/website/src/components/PlaygroundPage/index.tsx +++ b/packages/website/src/components/PlaygroundPage/index.tsx @@ -2,11 +2,13 @@ import { fromByteArray, toByteArray } from "base64-js"; import { deflate, inflate } from "pako"; import { FC, useEffect, useState } from "react"; +import { PlaygroundToolbarItem } from "@quri/squiggle-components"; import { defaultSquiggleVersion, - SquigglePlaygroundVersionPicker, + SquigglePlaygroundVersionPickerDropdown, type SquiggleVersion, squiggleVersions, + uncheckedVersionTitle, versionedSquigglePackages, } from "@quri/versioned-squiggle-components"; @@ -112,10 +114,15 @@ export const PlaygroundPage: FC<{ version: string | null }> = (props) => { renderExtraControls={() => (
- + showUpdatePolicy + > + + {uncheckedVersionTitle(version)} + +
)} onCodeChange={(code) => updateUrl({ defaultCode: code }, version)} From 0cfd6982399adda678af1ef7484711f7d07839b9 Mon Sep 17 00:00:00 2001 From: Ozzie Gooen Date: Wed, 17 Apr 2024 10:44:21 -0700 Subject: [PATCH 15/18] Version picker cleanup --- .../[slug]/EditSquiggleSnippetModel.tsx | 1 - ...quigglePlaygroundVersionPickerDropdown.tsx | 29 ++++++++++++++--- .../src/SquiggleVersionShower.tsx | 32 ------------------- packages/versioned-components/src/index.ts | 5 ++- .../src/components/PlaygroundPage/index.tsx | 1 - 5 files changed, 27 insertions(+), 41 deletions(-) delete mode 100644 packages/versioned-components/src/SquiggleVersionShower.tsx diff --git a/packages/hub/src/app/models/[owner]/[slug]/EditSquiggleSnippetModel.tsx b/packages/hub/src/app/models/[owner]/[slug]/EditSquiggleSnippetModel.tsx index b263ee1aab..cb7d306377 100644 --- a/packages/hub/src/app/models/[owner]/[slug]/EditSquiggleSnippetModel.tsx +++ b/packages/hub/src/app/models/[owner]/[slug]/EditSquiggleSnippetModel.tsx @@ -330,7 +330,6 @@ export const EditSquiggleSnippetModel: FC = ({
{model.isEditable || forceVersionPicker ? ( diff --git a/packages/versioned-components/src/SquigglePlaygroundVersionPickerDropdown.tsx b/packages/versioned-components/src/SquigglePlaygroundVersionPickerDropdown.tsx index f0412dc255..7eb89d35d9 100644 --- a/packages/versioned-components/src/SquigglePlaygroundVersionPickerDropdown.tsx +++ b/packages/versioned-components/src/SquigglePlaygroundVersionPickerDropdown.tsx @@ -2,6 +2,7 @@ import { FC, PropsWithChildren } from "react"; import { + CodeBracketIcon, Dropdown, DropdownMenu, DropdownMenuActionItem, @@ -11,21 +12,41 @@ import { DropdownMenuSeparator, HelpIcon, Modal, + WrenchIcon, } from "@quri/ui"; -import { versionIcon, versionTitle } from "./SquiggleVersionShower.js"; -import { SquiggleVersion, squiggleVersions } from "./versions.js"; +import { + checkSquiggleVersion, + SquiggleVersion, + squiggleVersions, +} from "./versions.js"; + +export function versionTitle(version: SquiggleVersion) { + return version === "dev" ? "next" : `v${version}`; +} + +export function uncheckedVersionTitle(version: string) { + const versionIsValid = checkSquiggleVersion(version); + if (versionIsValid) { + return versionTitle(version); + } else { + return `${version} (unknown)`; + } +} + +export function versionIcon(version: string) { + return version === "dev" ? WrenchIcon : CodeBracketIcon; +} const CHANGELOG_URL = "https://www.squiggle-language.com/docs/Changelog"; export const SquigglePlaygroundVersionPickerDropdown: FC< PropsWithChildren<{ - version: string; onChange: (newVersion: SquiggleVersion) => void; // This is mostly Squiggle Hub specific, but we might later decide to do auto-updates in Squiggle Playground too. showUpdatePolicy?: boolean; }> -> = ({ version, onChange, showUpdatePolicy, children }) => { +> = ({ onChange, showUpdatePolicy, children }) => { return ( = ({ version }) => { - return ( -
-
{uncheckedVersionTitle(version)}
- -
- ); -}; diff --git a/packages/versioned-components/src/index.ts b/packages/versioned-components/src/index.ts index bc11323cb3..ef9c73930f 100644 --- a/packages/versioned-components/src/index.ts +++ b/packages/versioned-components/src/index.ts @@ -1,8 +1,7 @@ -export { SquigglePlaygroundVersionPickerDropdown } from "./SquigglePlaygroundVersionPickerDropdown.js"; export { - SquiggleVersionShower, + SquigglePlaygroundVersionPickerDropdown, uncheckedVersionTitle, -} from "./SquiggleVersionShower.js"; +} from "./SquigglePlaygroundVersionPickerDropdown.js"; export { versionedSquigglePackages } from "./versionedSquigglePackages.js"; export { diff --git a/packages/website/src/components/PlaygroundPage/index.tsx b/packages/website/src/components/PlaygroundPage/index.tsx index 4fba4824d6..49255ce14b 100644 --- a/packages/website/src/components/PlaygroundPage/index.tsx +++ b/packages/website/src/components/PlaygroundPage/index.tsx @@ -115,7 +115,6 @@ export const PlaygroundPage: FC<{ version: string | null }> = (props) => {
From 59e7bc12510dd135707306d90afa21103fc1c666 Mon Sep 17 00:00:00 2001 From: Ozzie Gooen Date: Wed, 17 Apr 2024 13:42:00 -0700 Subject: [PATCH 16/18] Added changeset --- .changeset/fresh-rings-occur.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .changeset/fresh-rings-occur.md diff --git a/.changeset/fresh-rings-occur.md b/.changeset/fresh-rings-occur.md new file mode 100644 index 0000000000..9e466e66ad --- /dev/null +++ b/.changeset/fresh-rings-occur.md @@ -0,0 +1,7 @@ +--- +"@quri/versioned-squiggle-components": patch +"@quri/squiggle-components": patch +"@quri/ui": patch +--- + +Updated playground styles to look more professional, added StyledToggle From 283f9b54ecf40aa5ce4274f0690541110d4261a2 Mon Sep 17 00:00:00 2001 From: Ozzie Gooen Date: Wed, 24 Apr 2024 08:42:58 -0700 Subject: [PATCH 17/18] Minor reversion and fixes --- .../ViewerWithMenuBar/ViewerMenu.tsx | 4 +-- packages/ui/src/components/StyledTab.tsx | 31 ++++++++++++------- 2 files changed, 22 insertions(+), 13 deletions(-) diff --git a/packages/components/src/components/ViewerWithMenuBar/ViewerMenu.tsx b/packages/components/src/components/ViewerWithMenuBar/ViewerMenu.tsx index 56b4ed231b..d7962b4491 100644 --- a/packages/components/src/components/ViewerWithMenuBar/ViewerMenu.tsx +++ b/packages/components/src/components/ViewerWithMenuBar/ViewerMenu.tsx @@ -81,9 +81,9 @@ export const ViewerMenu: FC = ({ case "Imports": return "Imports"; case "Variables": - return "Private Variables"; + return "Local Variables"; case "Exports": - return "Exports"; + return "Exported Variables"; case "Result": return "Final Result"; default: diff --git a/packages/ui/src/components/StyledTab.tsx b/packages/ui/src/components/StyledTab.tsx index bbabd76722..018b48319d 100644 --- a/packages/ui/src/components/StyledTab.tsx +++ b/packages/ui/src/components/StyledTab.tsx @@ -1,5 +1,4 @@ "use client"; - import { Tab } from "@headlessui/react"; import { clsx } from "clsx"; import { FC, Fragment, ReactNode } from "react"; @@ -26,7 +25,7 @@ type StyledTabType = FC & { }; const tabStyle = - "group flex rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-gray-500 hover:bg-gray-100 mx-1 cursor-pointer transition-colors duration-200"; + "group flex rounded-md focus:outline-none focus-visible:ring-offset-gray-100 hover:bg-gray-300 mx-px cursor-pointer"; const StyledTabInner: FC = ({ name, @@ -36,27 +35,36 @@ const StyledTabInner: FC = ({ <> {Icon && ( )} - {name} + + {name} + ); +//The really annoying thing is that if button isn't in this component, then clicking it won't work. +//So we have to include button here, don't try to move into StyledTabInner export const StyledTab: StyledTabType = ({ name, icon: Icon }) => ( {({ selected }) => ( @@ -73,7 +81,8 @@ const StyledTabButton: FC = (props) => (
); -const tabListStyle = "flex space-x-1 rounded-md bg-gray-100 p-1"; +const tabListStyle = + "flex w-fit py-0.5 px-0.5 rounded-md bg-gray-100 hover:bg-gray-200"; StyledTab.List = function StyledTabList({ children }) { return {children}; From db6de0c953a73143cfa01b6b8b10769c12f8f6ee Mon Sep 17 00:00:00 2001 From: Ozzie Gooen Date: Wed, 24 Apr 2024 08:51:22 -0700 Subject: [PATCH 18/18] Added lint override for stories --- packages/ui/package.json | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/ui/package.json b/packages/ui/package.json index a193bd8d98..79e2b95893 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -108,6 +108,16 @@ "no-console": "error", "react/react-in-jsx-scope": "off", "react/prop-types": "off" - } + }, + "overrides": [ + { + "files": [ + "src/stories/**/*.tsx" + ], + "rules": { + "no-console": "off" + } + } + ] } }