Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

move to the new DS #522

Merged
merged 43 commits into from
Dec 5, 2024
Merged
Changes from 1 commit
Commits
Show all changes
43 commits
Select commit Hold shift + click to select a range
7f64c5d
first batch of variant and box replacements
mck Nov 14, 2024
7fc7ec0
second batch of file changes
mck Nov 16, 2024
b4c0f70
update to canary ds
mck Nov 18, 2024
829983f
Merge branch 'master' into upgrade-ds
mck Nov 21, 2024
199902c
Merge branch 'master' into upgrade-ds
mck Nov 26, 2024
f2e3e7f
style updates and postcss fix
mck Nov 27, 2024
9fe8938
Merge branch 'upgrade-ds' of github.com:tokens-studio/graph-engine in…
mck Nov 27, 2024
d47e556
Merge branch 'master' into upgrade-ds
mck Nov 27, 2024
4c3f557
Merge branch 'master' into upgrade-ds
mck Nov 27, 2024
d518def
format and merge
mck Nov 27, 2024
661f7a7
change rail, add more styles
mck Nov 28, 2024
3d45928
Improved settings panel UI (addresses #538)
AlexBxl Nov 28, 2024
ef501ed
Merge branch 'upgrade-ds' into improve-settings-layout
mck Dec 2, 2024
5cd6889
more changes
mck Dec 2, 2024
82017e7
add transforms
six7 Dec 2, 2024
5a9be0e
style handles, fix watcher
mck Dec 2, 2024
c4c73e3
Merge branch 'upgrade-ds' of github.com:tokens-studio/graph-engine in…
mck Dec 2, 2024
7375488
the commit
six7 Dec 2, 2024
6d53d04
Merge branch 'upgrade-ds' of github.com:tokens-studio/graph-engine in…
six7 Dec 2, 2024
e75d899
format
mck Dec 2, 2024
968a3a3
fixed linting issues
AlexBxl Dec 3, 2024
4aedb86
fixed missing type definitions
AlexBxl Dec 3, 2024
3e6b225
style handle
mck Dec 3, 2024
b5f7afe
updated package lock
AlexBxl Dec 3, 2024
e090d35
style node header
mck Dec 3, 2024
6cd0641
fix cmdk input
mck Dec 3, 2024
af31951
colorMode switch
mck Dec 3, 2024
0ffd05f
replaced stitches code with CSS definitions
AlexBxl Dec 3, 2024
aa7addd
Merge branch 'upgrade-ds' into improve-settings-layout
AlexBxl Dec 3, 2024
cfb1f9c
update packages and typography
mck Dec 4, 2024
d62c2ff
format
mck Dec 4, 2024
ee400d9
fixing linting issues
AlexBxl Dec 4, 2024
eea3f7c
fixed more linting issues
brainshift-design Dec 4, 2024
63ba245
Merge remote-tracking branch 'remotes/origin/upgrade-ds' into improve…
AlexBxl Dec 4, 2024
a1bec55
Fix issues with testing
SorsOps Dec 4, 2024
c2b6874
removed stitches import
brainshift-design Dec 4, 2024
413c360
resolving commit issues
AlexBxl Dec 4, 2024
1b5e9d6
Merge pull request #539 from tokens-studio/improve-settings-layout
mck Dec 4, 2024
3cae07b
Merge branch 'master' into upgrade-ds
mck Dec 4, 2024
83fe281
Fixed centering of EmptyStateEditor (#540)
AlexBxl Dec 4, 2024
43261eb
remove transform scripts
mck Dec 5, 2024
685d6f9
address comments
mck Dec 5, 2024
731eb10
format
mck Dec 5, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
more changes
  • Loading branch information
mck committed Dec 2, 2024
commit 5cd68893c99a6c15d6c8914f6a0e49d762918a27
2 changes: 1 addition & 1 deletion packages/graph-editor/.storybook/preview.tsx
Original file line number Diff line number Diff line change
@@ -56,7 +56,7 @@ const StyledThemeBlock = styled('div', {
width: '50%',
bottom: 0,
overflow: 'auto',
background: '$bgCanvas',
background: "var(--color-neutral-canvas-minimal-bg)",
display: 'flex',
variants: {
fill: {
6 changes: 3 additions & 3 deletions packages/graph-editor/package.json
Original file line number Diff line number Diff line change
@@ -30,7 +30,7 @@
"build": "node ./scripts/extractVersion.mjs && tspc -p tsconfig.prod.json && npm run build:css",
"build:css": "postcss \"src/**/*.css\" --base src --dir dist --ext css",
"build:storybook": "storybook build",
"dev": "tspc -p tsconfig.prod.json --watch || npm run build:css --watch",
"dev": "tspc -p tsconfig.prod.json --watch || npm run build:css -- --watch",
"format": "npm run format:eslint && npm run format:prettier",
"format:eslint": "eslint . --fix",
"format:prettier": "prettier \"**/*.{tsx,ts,js,md,json}\" --write",
@@ -57,8 +57,8 @@
"@stitches/react": "1.2.8",
"@tokens-studio/graph-engine": "*",
"@tokens-studio/icons": "^0.1.4",
"@tokens-studio/tokens": "0.2.6-canary.1",
"@tokens-studio/ui": "0.11.1-canary.2",
"@tokens-studio/tokens": "0.3.1",
"@tokens-studio/ui": "^1.0.0",
"@tokens-studio/types": "^0.2.3",
"@xzdarcy/react-timeline-editor": "^0.1.9",
"array-move": "^4.0.0",
6 changes: 3 additions & 3 deletions packages/graph-editor/src/components/commandPalette/index.tsx
Original file line number Diff line number Diff line change
@@ -59,10 +59,10 @@ const CommandMenuGroup = observer(
handleSelectItem: (PanelItem) => void;
}) => {
return (
<Command.Group
(<Command.Group
key={group.key}
heading={
<Stack align="center" gap={2} style={{ color: '$fgMuted' }}>
<Stack align="center" gap={2} style={{ color: "var(--color-neutral-canvas-default-fg-subtle)" }}>
{group.icon}
{group.title}
</Stack>
@@ -71,7 +71,7 @@ const CommandMenuGroup = observer(
{group.items.map((item) => (
<CommandItem item={item} handleSelectItem={handleSelectItem} />
))}
</Command.Group>
</Command.Group>)
);
},
);
11 changes: 5 additions & 6 deletions packages/graph-editor/src/components/debugger/index.tsx
Original file line number Diff line number Diff line change
@@ -33,7 +33,7 @@ const DebuggerInner = observer<DebuggerProps>(
/** @ts-expect-error observer not typed here...? */
({ data, domRef, timeline, scale }) => {
return (
<Stack style={{ flex: 1 }}>
(<Stack style={{ flex: 1 }}>
<div
ref={domRef}
style={{ overflow: 'auto' }}
@@ -45,17 +45,16 @@ const DebuggerInner = observer<DebuggerProps>(
>
{data.rows.map((item) => {
return (
<div
(<div
className="timeline-list-item"
key={item.id}
style={{ padding: '$1' }}
style={{ padding: "var(--component-spacing-3xs)" }}
>
<Text>{item.name}</Text>
</div>
</div>)
);
})}
</div>

<Timeline
editorData={[...data.rows]}
onChange={() => {}}
@@ -81,7 +80,7 @@ const DebuggerInner = observer<DebuggerProps>(
);
}}
/>
</Stack>
</Stack>)
);
},
);
8 changes: 4 additions & 4 deletions packages/graph-editor/src/components/flow/handles.tsx
Original file line number Diff line number Diff line change
@@ -115,7 +115,7 @@ export const Handle = (props: HandleProps) => {
.join(' ');

return (
<div
(<div
className={holderClasses}
style={{
flexDirection: type === 'target' ? 'row' : 'row-reverse',
@@ -141,15 +141,15 @@ export const Handle = (props: HandleProps) => {
style={{
flex: 1,
justifyContent: type === 'target' ? 'start' : 'end',
paddingLeft: shouldHideHandles ? 0 : 'var(--space-2)',
paddingRight: shouldHideHandles ? 0 : 'var(--space-2)',
paddingLeft: shouldHideHandles ? 0 : "var(--component-spacing-2xs)",
paddingRight: shouldHideHandles ? 0 : "var(--component-spacing-2xs)",
fontFamily: 'var(--fonts-mono)',
fontSize: 'var(--fontSizes-xxsmall)',
flexDirection: type === 'target' ? 'row' : 'row-reverse',
}}
>
{children}
</Stack>
</div>
</div>)
);
};
Original file line number Diff line number Diff line change
@@ -8,7 +8,7 @@
background: var(--color-neutral-surface-default-idle-bg);
color: var(--color-neutral-surface-default-idle-fg-default);
padding: var(--component-spacing-sm);
font: var(--typography-label-xs);
font: var(--typography-code-xs);
border-radius: var(--radii-small);
text-transform: uppercase;
}
7 changes: 4 additions & 3 deletions packages/graph-editor/src/components/hotKeys/index.tsx
Original file line number Diff line number Diff line change
@@ -165,11 +165,12 @@ export const useHotkeys = () => {
.filter((x) => x.selected)
.map(
(x) =>
({
(({
//Its possible we are attempting to duplicate a note that does not exist in the engine
engine: graph.getNode(x.id)?.serialize(),
editor: reactFlowInstance.getNode(x.id),
}) as SerializedNode,

editor: reactFlowInstance.getNode(x.id)
}) as SerializedNode),
);
//get the values from the graph
const values = {
4 changes: 2 additions & 2 deletions packages/graph-editor/src/components/menubar/menuItem.tsx
Original file line number Diff line number Diff line change
@@ -21,13 +21,13 @@ export const MenuItemElement = ({
}: IMenuItemElement) => {
return (
// @ts-expect-error This is the correct attribute
<Item selectable={'false'} {...rest}>
(<Item selectable={'false'} {...rest}>
{inner(
<Stack gap={2} align="center">
<div>{icon}</div>
<Text>{children}</Text>
</Stack>,
)}
</Item>
</Item>)
);
};
Original file line number Diff line number Diff line change
@@ -3,7 +3,6 @@ import {
Checkbox,
Heading,
Label,
Scroll,
Select,
Stack,
TextInput,
@@ -90,13 +89,13 @@ export const DynamicInputs = observer(({ node }: { node: Node }) => {
<Select value={inputType} onValueChange={setInputType}>
<Select.Trigger label="Type" value={inputType} />
<Select.Content>
<Scroll height="200">
<div style={{ height: '200px' }}>
{schemas.map((x, i) => (
<Select.Item value={x.$id!} key={i}>
{x.title || x.$id}
</Select.Item>
))}
</Scroll>
</div>
</Select.Content>
</Select>

Original file line number Diff line number Diff line change
@@ -7,7 +7,7 @@
border-radius: var(--component-radii-lg);
background-color: var(--color-neutral-canvas-subtle-bg);
color: var(--color-neutral-canvas-subtle-fg-default);
box-shadow: 0 2px 10px var(--color-neutral-canvas-subtle-fg-subtle);
box-shadow: 0 2px 10px red;
}

.separator {
9 changes: 9 additions & 0 deletions packages/graph-editor/src/css/base.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
@layer graphEditor {
:root {
--colors-pageBg: var(--color-neutral-canvas-default-bg);
--colors-nodeBg: var(--color-neutral-canvas-default-bg);
--colors-nodeBorder: var(--color-neutral-stroke-subtle);
--colors-graphBg: var(--color-neutral-canvas-minimal-bg);
--colors-panelBg: var(--color-neutral-canvas-default-bg);
}
}
58 changes: 32 additions & 26 deletions packages/graph-editor/src/css/reactflow.css
Original file line number Diff line number Diff line change
@@ -5,41 +5,54 @@
background: var(--color-neutral-canvas-minimal-bg);
}

.react-flow__node {
display: flex;
background: var(--colors-nodeBg);
&.filtered {
opacity: 0.25;
}
}

.react-flow__handle {

--handle-border-width: var(--component-border-width-lg);
--handle-core-size: var(--size-50);

position: absolute;
user-select: none;
pointer-events: all;
box-sizing: content-box;
cursor: grab;
padding: 0;
width: var(--sizes-4);
height: var(--sizes-4);
border: 4px solid var(--colors-graphBg);
border-radius: 99px;
width: var(--handle-core-size);
height: var(--handle-core-size);
border: var(--handle-border-width) solid var(--colors-graphBg);
border-radius: var(--component-radii-pill);
box-shadow: var(--shadows-small);
outline: 2px solid transparent;
outline-offset: -4px;
display: grid;
place-items: center;
}
.react-flow__handle svg {
pointer-events: none;
}

.react-flow__node.filtered {
opacity: 0.25;
}
&-right {
right: calc((var(--handle-border-width) + (var(--handle-core-size) / 2)) * -1);
}

.react-flow__node {
display: flex;
background: var(--color-neutral-surface-minimal-idle-bg);
&-left {
left: calc((var(--handle-border-width) + (var(--handle-core-size) / 2)) * -1);
}

&-valid {
outline-color: var(--color-success-stroke-default);
}

svg {
pointer-events: none;
}
}


.react-flow__edge.updating {
stroke: var(--colors-graphBg);
}
.react-flow__handle-valid {
outline-color: var(--colors-borderDefault);
}
.react-flow__node.selectable.selected,
.react-flow__node.selectable:focus {
--nodeBorderColor: var(--colors-borderDefault);
@@ -62,13 +75,6 @@
fill: var(--colors-bgDefault) !important;
}

.react-flow__handle-right {
right: -12px;
}

.react-flow__handle-left {
left: -12px;
}
.react-flow__edge {
stroke-width: 1 !important;
stroke-opacity: 1;
2 changes: 1 addition & 1 deletion packages/graph-editor/src/editor/graph.tsx
Original file line number Diff line number Diff line change
@@ -842,7 +842,7 @@ export const EditorApp = React.forwardRef<
>
{showGridValue && (
<Background
color="var(--colors-borderMuted)"
color="var(--color-neutral-stroke-default)"
gap={16}
size={2}
variant={BackgroundVariant.Dots}
7 changes: 1 addition & 6 deletions packages/graph-editor/src/index.css
Original file line number Diff line number Diff line change
@@ -5,6 +5,7 @@
@import url('rc-menu/assets/index.css');
@import url('./components/menubar/menubar.css');
@import url('./components/debugger/index.scss');
@import url('./css/base.css');
@import url('./css/reactflow.css');
@import url('./css/cmdk.css');
@import url('./css/contextify.css');
@@ -25,12 +26,6 @@
border-bottom: none;
}







.dock-panel.dock-style-main .dock-bar {
border-bottom-color: var(--colors-borderDefault);
}
6 changes: 3 additions & 3 deletions packages/graph-editor/src/registry/icon.tsx
Original file line number Diff line number Diff line change
@@ -21,12 +21,12 @@ import Text from '@tokens-studio/icons/Text.js';
* These icons are used to represent the different types of custom types in the graph editor
*/
export const icons = () =>
({
(({
[COLOR]: <Droplet />,
[CURVE]: <EaseCurveControlPoints />,
[STRING]: <Text />,
[BOOLEAN]: <InputOutput />,
[NUMBER]: <Hashtag />,
[OBJECT]: <Cube />,
[ANY]: <SelectPoint3d />,
}) as Record<string, React.ReactNode>;
[ANY]: <SelectPoint3d />
}) as Record<string, React.ReactNode>);
6 changes: 3 additions & 3 deletions packages/graph-editor/src/registry/inputControls.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Button, Heading, Scroll, Select, Stack } from '@tokens-studio/ui';
import { Button, Heading, Select, Stack } from '@tokens-studio/ui';
import { Node } from '@tokens-studio/graph-engine';
import { StringSchema } from '@tokens-studio/graph-engine';
import { deletable } from '@/annotations/index.js';
@@ -33,13 +33,13 @@ const CSSMapSpecifics = observer(({ node }: { node: Node }) => {
<Select value={inputName} onValueChange={setInputName}>
<Select.Trigger label="Type" value={inputName} />
<Select.Content>
<Scroll height="200">
<div style={{ height: '200px' }}>
{CSSProperties.map((x) => (
<Select.Item value={x} key={x}>
{x}
</Select.Item>
))}
</Scroll>
</div>
</Select.Content>
</Select>

4 changes: 2 additions & 2 deletions packages/ui/package.json
Original file line number Diff line number Diff line change
@@ -41,8 +41,8 @@
"@tokens-studio/graph-engine-nodes-figma": "*",
"@tokens-studio/graph-engine-nodes-image": "*",
"@tokens-studio/icons": "0.1.4",
"@tokens-studio/tokens": "0.2.6-canary.1",
"@tokens-studio/ui": "0.11.1-canary.2",
"@tokens-studio/tokens": "0.3.1",
"@tokens-studio/ui": "^1.0.0",
"@ts-rest/core": "3.51.0",
"@ts-rest/open-api": "^3.51.0",
"@ts-rest/react-query": "^3.51.0",
2 changes: 1 addition & 1 deletion packages/ui/src/app/layout.tsx
Original file line number Diff line number Diff line change
@@ -88,7 +88,7 @@ export default function RootLayout({
}) {
return (
<html lang='en'>
<body className='dark'>{children}</body>
<body className='ts-theme-light'>{children}</body>
</html>
);
}
Loading
Loading