,
9 | );
10 |
--------------------------------------------------------------------------------
/packages/graph-engine/typedoc.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://typedoc.org/schema.json",
3 | "tsconfig": "./tsconfig.docs.json",
4 | "entryPoints": ["./src/index.ts", "./src/nodes/**/*.ts"],
5 | "externalPattern": [
6 | "**/node_modules/**",
7 | "src/nodes/*+(index|.spec|.e2e).ts"
8 | ],
9 | "excludeExternals": true,
10 | "cleanOutputDir": true
11 | }
12 |
--------------------------------------------------------------------------------
/packages/nodes-audio/typedoc.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://typedoc.org/schema.json",
3 | "tsconfig": "./tsconfig.docs.json",
4 | "entryPoints": ["./src/index.ts", "./src/nodes/**/*.ts"],
5 | "externalPattern": [
6 | "**/node_modules/**",
7 | "src/nodes/*+(index|.spec|.e2e).ts"
8 | ],
9 | "excludeExternals": true,
10 | "cleanOutputDir": true
11 | }
12 |
--------------------------------------------------------------------------------
/packages/nodes-figma/typedoc.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://typedoc.org/schema.json",
3 | "tsconfig": "./tsconfig.docs.json",
4 | "entryPoints": ["./src/index.ts", "./src/nodes/**/*.ts"],
5 | "externalPattern": [
6 | "**/node_modules/**",
7 | "src/nodes/*+(index|.spec|.e2e).ts"
8 | ],
9 | "excludeExternals": true,
10 | "cleanOutputDir": true
11 | }
12 |
--------------------------------------------------------------------------------
/packages/nodes-previews/typedoc.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://typedoc.org/schema.json",
3 | "tsconfig": "./tsconfig.docs.json",
4 | "entryPoints": ["./src/index.ts", "./src/nodes/**/*.ts"],
5 | "externalPattern": [
6 | "**/node_modules/**",
7 | "src/nodes/*+(index|.spec|.e2e).ts"
8 | ],
9 | "excludeExternals": true,
10 | "cleanOutputDir": true
11 | }
12 |
--------------------------------------------------------------------------------
/.husky/post-checkout:
--------------------------------------------------------------------------------
1 | #!/bin/sh
2 | command -v git-lfs >/dev/null 2>&1 || { echo >&2 "\nThis repository is configured for Git LFS but 'git-lfs' was not found on your path. If you no longer wish to use Git LFS, remove this hook by deleting the 'post-checkout' file in the hooks directory (set by 'core.hookspath'; usually '.git/hooks').\n"; exit 2; }
3 | git lfs post-checkout "$@"
4 |
--------------------------------------------------------------------------------
/.lintstagedrc:
--------------------------------------------------------------------------------
1 | {
2 | "*.js": ["eslint --resolve-plugins-relative-to . --fix", "prettier --write"],
3 | "*.tsx": ["eslint --resolve-plugins-relative-to . --fix", "prettier --write"],
4 | "*.ts": ["eslint --resolve-plugins-relative-to . --fix", "prettier --write"],
5 | "*.md": ["prettier --write"],
6 | "package.json": ["npx prettier-package-json --write package.json"]
7 | }
--------------------------------------------------------------------------------
/packages/graph-editor/src/components/curveEditor/override.css:
--------------------------------------------------------------------------------
1 | .MafsView {
2 |
3 |
4 | --mafs-fg: var(--color-accent-base);
5 | --mafs-bg: var(--color-neutral-canvas-subtle-bg);
6 | --mafs-origin-color: var(--color-neutral-canvas-minimal-fg-default);
7 | --mafs-line-color: var(--stroke-default);
8 | --grid-line-subdivision-color: var(--stroke-subtle);
9 | }
--------------------------------------------------------------------------------
/packages/nodes-design-tokens/typedoc.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://typedoc.org/schema.json",
3 | "tsconfig": "./tsconfig.docs.json",
4 | "entryPoints": ["./src/index.ts", "./src/nodes/**/*.ts"],
5 | "externalPattern": [
6 | "**/node_modules/**",
7 | "src/nodes/*+(index|.spec|.e2e).ts"
8 | ],
9 | "excludeExternals": true,
10 | "cleanOutputDir": true
11 | }
12 |
--------------------------------------------------------------------------------
/packages/ui/src/api/sdk/getServerClient.ts:
--------------------------------------------------------------------------------
1 | import { QueryClient } from '@tanstack/query-core';
2 |
3 | //Always make a new server client each time to prevent data leaking between requests
4 | export const getServerClient = () => {
5 | return new QueryClient({
6 | defaultOptions: {
7 | queries: {
8 | staleTime: 60 * 1000
9 | }
10 | }
11 | });
12 | };
13 |
--------------------------------------------------------------------------------
/packages/ui/src/app/page.tsx:
--------------------------------------------------------------------------------
1 | import { auth } from '@/auth/index.ts';
2 | import { redirect } from 'next/navigation.js';
3 | import IndexPage from '@/components/pages/index.tsx';
4 |
5 | export default async function Index() {
6 | const session = await auth();
7 | if (session?.user) {
8 | return redirect('/editor');
9 | }
10 |
11 | return ;
12 | }
13 |
--------------------------------------------------------------------------------
/packages/ui/src/components/container/layout.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | position: relative;
3 | width: 100%;
4 | height: 100%;
5 | overflow: auto;
6 | background: var(--color-neutral-canvas-minimal-bg);
7 | padding-top: var(--component-spacing-2xl);
8 | }
9 |
10 | .holder{
11 | padding: var(--component-spacing-2xl);
12 | width: 80%;
13 | }
--------------------------------------------------------------------------------
/.env:
--------------------------------------------------------------------------------
1 | # Used by docker-compose
2 | POSTGRES_USER=test
3 | POSTGRES_PASSWORD=insecurePassword
4 | POSTGRES_DB=graphengine
5 |
6 | # Whether open telemetry is enabled
7 | OTEL_ENABLED=
8 | OTEL_SERVICE_NAME=graph-engine
9 | OTELCOL_IMG=otel/opentelemetry-collector:0.67.0
10 | # Nodemailer settings
11 | EMAIL_SERVER=smtp://localhost:1025
12 | EMAIL_FROM=noreply@example.com
13 |
--------------------------------------------------------------------------------
/packages/graph-editor/src/components/controls/variadicColor.module.css:
--------------------------------------------------------------------------------
1 | .colorButton {
2 | all: unset;
3 | cursor: pointer;
4 | border-radius: var(--component-radii-sm);
5 | width: 16px;
6 | height: 16px;
7 | outline: 1px solid var(--stroke-subtle);
8 | flex-shrink: 0;
9 | }
10 |
11 | .colorButton:hover {
12 | outline: 1px solid var(--stroke-default);
13 | }
--------------------------------------------------------------------------------
/packages/nodes-audio/src/nodes/base.ts:
--------------------------------------------------------------------------------
1 | import { Node } from '@tokens-studio/graph-engine';
2 | export class AudioBaseNode extends Node {
3 | //All audio nodes need the web-audio capability
4 | static annotations = {
5 | 'engine.capability.web-audio': true
6 | };
7 | getAudioCtx(): AudioContext {
8 | return this.getGraph().capabilities['web-audio'];
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/packages/nodes-image/typedoc.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://typedoc.org/schema.json",
3 | "tsconfig": "./tsconfig.docs.json",
4 | "entryPoints": ["./src/index.ts", "./src/nodes/**/*.ts"],
5 | "externalPattern": [
6 | "**/node_modules/**",
7 | "src/nodes/*+(index|.spec|.e2e).ts"
8 | ],
9 | "excludeExternals": true,
10 | "cleanOutputDir": true
11 | }
12 |
--------------------------------------------------------------------------------
/packages/nodes-previews/src/color/scale/panel.module.css:
--------------------------------------------------------------------------------
1 | .scale {
2 | display: flex;
3 | flex-direction: column;
4 | align-items: center;
5 | justify-content: center;
6 | overflow: auto;
7 | height: 100%;
8 | }
9 |
10 | .swatch {
11 | display: flex;
12 | align-items: center;
13 | justify-content: center;
14 | width: 100%;
15 | min-height: 80px;
16 | }
--------------------------------------------------------------------------------
/packages/storybook-lit/.storybook/preview.ts:
--------------------------------------------------------------------------------
1 | import type { Preview } from '@storybook/web-components';
2 |
3 | const preview: Preview = {
4 | parameters: {
5 | actions: { argTypesRegex: '^on[A-Z].*' },
6 | controls: {
7 | matchers: {
8 | color: /(background|color)$/i,
9 | date: /Date$/
10 | }
11 | }
12 | }
13 | };
14 |
15 | export default preview;
16 |
--------------------------------------------------------------------------------
/packages/storybook-lit/src/components/button.generated.ts:
--------------------------------------------------------------------------------
1 | export const keyOrder = ['theme', 'mode'];
2 | export const defaultValues = {
3 | theme: 'samurai',
4 | mode: 'light'
5 | };
6 |
7 | export type theme = 'samurai' | 'knight' | 'ninja';
8 | export type mode = 'light' | 'dark' | 'dim';
9 |
10 | export type Context = {
11 | theme: theme;
12 | mode: mode;
13 | };
14 |
--------------------------------------------------------------------------------
/packages/storybook-react/src/button/button.generated.ts:
--------------------------------------------------------------------------------
1 | export const keyOrder = ['theme', 'mode'];
2 | export const defaultValues = {
3 | theme: 'samurai',
4 | mode: 'light'
5 | };
6 |
7 | export type theme = 'samurai' | 'knight' | 'ninja';
8 | export type mode = 'light' | 'dark' | 'dim';
9 |
10 | export type Context = {
11 | theme: theme;
12 | mode: mode;
13 | };
14 |
--------------------------------------------------------------------------------
/packages/graph-editor/src/components/flow/nodes/noteNode.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | padding: var(--components-spacing-md);
3 | flex: 1;
4 | min-height: 100px;
5 | min-width: 100px;
6 | }
7 |
8 | .textareaWrapper {
9 | height: 100%;
10 | }
11 |
12 | .textareaWrapper > * {
13 | height: 100%;
14 | }
15 |
16 | .textarea {
17 | height: 100%;
18 | width: 100%;
19 | }
--------------------------------------------------------------------------------
/packages/graph-editor/src/redux/selectors/roots.ts:
--------------------------------------------------------------------------------
1 | import { RootState } from '../store.js';
2 | export const settings = (state: RootState) => state.settings;
3 | export const ui = (state: RootState) => state.ui;
4 | export const graph = (state: RootState) => state.graph;
5 | export const refs = (state: RootState) => state.refs;
6 | export const registry = (state: RootState) => state.registry;
7 |
--------------------------------------------------------------------------------
/packages/nodes-previews/src/utils/index.ts:
--------------------------------------------------------------------------------
1 | import { Color, toColor, toHex } from '@tokens-studio/graph-engine';
2 |
3 | export const arrayOf = (schema: object) => {
4 | return {
5 | type: 'array',
6 | items: schema
7 | };
8 | };
9 |
10 | export const castToHex = (col: Color) => {
11 | try {
12 | return toHex(toColor(col));
13 | } catch {
14 | return '';
15 | }
16 | };
17 |
--------------------------------------------------------------------------------
/packages/prettier-config-custom/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@tokens-studio/prettier-config-custom",
3 | "version": "0.0.0",
4 | "license": "MPL-2.0",
5 | "publishConfig": {
6 | "access": "public"
7 | },
8 | "private": true,
9 | "exports": {
10 | ".": "./index.js"
11 | },
12 | "dependencies": {
13 | "prettier": "^3.3.2"
14 | },
15 | "files": [
16 | "index.js"
17 | ]
18 | }
--------------------------------------------------------------------------------
/packages/graph-editor/cypress/support/component-index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Components App
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/packages/graph-engine/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-undef */
2 | /** @type {import("eslint").Linter.Config} */
3 | module.exports = {
4 | root: true,
5 | extends: [require.resolve('@tokens-studio/eslint-config-custom')],
6 | "rules": {
7 | //There are multiple legitimate use cases for the any type in this project
8 | "@typescript-eslint/no-explicit-any": "off"
9 | }
10 | };
--------------------------------------------------------------------------------
/packages/graph-engine/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from './constants.js';
2 | export * from './types.js';
3 | export * from './graph/index.js';
4 | export * from './nodes/index.js';
5 | export * from './programmatic/index.js';
6 | export * from './schemas/index.js';
7 | export * from './annotations/index.js';
8 | export * from './graph/interfaces.js';
9 | export * from './nodes/color/lib/utils.js';
10 |
--------------------------------------------------------------------------------
/packages/nodes-fs/vite.config.mts:
--------------------------------------------------------------------------------
1 | ///
2 | import { defineConfig } from 'vitest/config';
3 |
4 | export default defineConfig({
5 | test: {
6 | include: ['tests/**/*.test.[jt]s?(x)'],
7 | globals: true,
8 | server: {
9 | deps: {
10 | // to ensure importing CSS files is working
11 | inline: ['@tokens-studio/ui']
12 | }
13 | }
14 | }
15 | });
16 |
--------------------------------------------------------------------------------
/packages/storybook-lit/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/packages/graph-engine/src/nodes/typing/index.ts:
--------------------------------------------------------------------------------
1 | import assertDefined from './assertDefined.js';
2 | import hasValue from './hasValue.js';
3 | import parseNumber from './parseNumber.js';
4 | import parseUnit from './parseUnit.js';
5 | import passUnit from './passUnit.js';
6 |
7 | export const nodes = [
8 | assertDefined,
9 | hasValue,
10 | parseNumber,
11 | parseUnit,
12 | passUnit
13 | ];
14 |
--------------------------------------------------------------------------------
/packages/graph-engine/src/schemas/utils.ts:
--------------------------------------------------------------------------------
1 | import { type SchemaObject } from 'ajv';
2 |
3 | export const extractArray = (schema: SchemaObject): SchemaObject => {
4 | if (schema.type === 'array') {
5 | return schema.items;
6 | }
7 | return schema;
8 | };
9 |
10 | export const arrayOf = (schema: SchemaObject) => {
11 | return {
12 | type: 'array',
13 | items: schema
14 | };
15 | };
16 |
--------------------------------------------------------------------------------
/packages/storybook-react/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # @tokens-studio/react-storybook-graph-engine
2 |
3 | ## 1.0.2
4 |
5 | ### Patch Changes
6 |
7 | - f08f85f: Fix clsx and remove classnames.
8 |
9 | ## 1.0.1
10 |
11 | ### Patch Changes
12 |
13 | - 809ef95: Upgrade @tokens-studio dependencies to latest, to avoid un-dedupable shared deps with Studio App and stitches styles from old UI leaking through.
14 |
--------------------------------------------------------------------------------
/packages/ui/src/api/contracts/index.ts:
--------------------------------------------------------------------------------
1 | import { aiContract } from './ai.ts';
2 | import { contract as authContract } from './auth.ts';
3 | import { graphContract } from './graph.ts';
4 | import { marketplaceContract } from './marketplace.ts';
5 |
6 | export const contract = {
7 | ai: aiContract,
8 | graph: graphContract,
9 | auth: authContract,
10 | marketplace: marketplaceContract
11 | };
12 |
--------------------------------------------------------------------------------
/packages/ui/.env:
--------------------------------------------------------------------------------
1 | HOSTNAME=localhost
2 | DATABASE_URL=postgres://test:insecurePassword@localhost:5432/graphengine
3 | AUTH_SECRET=mMDrwG7Cg54aZoDnJz6dZRgRxrt3KG9gDh+UMv2U7ds=
4 | OTEL_SERVICE_NAME=graph-engine
5 |
6 | # Create a new .env.local file in the packages/ui directory and add the following content:
7 | # Note that your callback is locked to a specific port
8 | AUTH_GITHUB_ID=set
9 | AUTH_GITHUB_SECRET=me
--------------------------------------------------------------------------------
/packages/ui/src/api/utils/common.ts:
--------------------------------------------------------------------------------
1 | import { z } from 'zod';
2 |
3 | export const ErrorResponse = z.object({
4 | message: z.string()
5 | });
6 |
7 | export const withCursor = possibleCursor => {
8 | const cursorId = possibleCursor;
9 | let cursorAdd = {};
10 | if (cursorId) {
11 | cursorAdd = {
12 | cursor: {
13 | id: cursorId
14 | }
15 | };
16 | }
17 | return cursorAdd;
18 | };
19 |
--------------------------------------------------------------------------------
/packages/ui/src/image.d.ts:
--------------------------------------------------------------------------------
1 | //Not sure why the link is breaking in the next.js package, but this is a workaround to fix it
2 | declare module 'next/image.js' {
3 | interface ImageProps {
4 | src: unknown;
5 | alt?: string;
6 | width?: number;
7 | height?: number;
8 | }
9 | // eslint-disable-next-line @typescript-eslint/no-unused-vars
10 | export = (props: ImageProps) => JSX.Element;
11 | }
12 |
--------------------------------------------------------------------------------
/packages/ui/src/api/index.ts:
--------------------------------------------------------------------------------
1 | import { contract } from './contracts/index.ts';
2 | import { generateOpenApi } from '@ts-rest/open-api';
3 |
4 | export const openApiDocument = generateOpenApi(contract, {
5 | info: {
6 | title: 'Graph API',
7 | version: '1.0.0',
8 | description: 'The backend API for the graph service'
9 | },
10 | servers: [
11 | {
12 | url: '/api/v1'
13 | }
14 | ]
15 | });
16 |
--------------------------------------------------------------------------------
/packages/storybook-lit/src/components/base.css:
--------------------------------------------------------------------------------
1 | @import url('./generated/styles/index.css');
2 |
3 |
4 | .button{
5 | color: var(--colorsText);
6 | background-color: var(--colorsBg);
7 | border: 3px solid var(--colorsPrimary);
8 | border-radius: var(--borderRadiusRounded);
9 | padding: 8px 16px;
10 | font-size: 16px;
11 | cursor: pointer;
12 | transition: background-color 0.2s;
13 | }
--------------------------------------------------------------------------------
/packages/storybook-react/src/button/base.css:
--------------------------------------------------------------------------------
1 | @import url('./generated/styles/index.css');
2 |
3 |
4 | .button{
5 | color: var(--colorsText);
6 | background-color: var(--colorsBg);
7 | border: 3px solid var(--colorsPrimary);
8 | border-radius: var(--borderRadiusRounded);
9 | padding: 8px 16px;
10 | font-size: 16px;
11 | cursor: pointer;
12 | transition: background-color 0.2s;
13 | }
--------------------------------------------------------------------------------
/packages/ui/src/app/editor/layout.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { Stack } from '@tokens-studio/ui/Stack.js';
4 | import Rail from '@/components/rail.tsx';
5 |
6 | export default function Layout({ children }) {
7 | return (
8 |
9 |
10 |
11 |
12 | {children}
13 |
14 | );
15 | }
16 |
--------------------------------------------------------------------------------
/packages/nodes-image/src/ui/controls/index.tsx:
--------------------------------------------------------------------------------
1 | import { IMAGE } from "../../schemas/index.js"
2 | import { Image } from "./image.js";
3 | import type { Input, Port } from "@tokens-studio/graph-engine"
4 |
5 | export const controls = [{
6 | matcher: (port: Port) => {
7 | const inputPort = port as Input;
8 | return inputPort.type.$id == IMAGE
9 | },
10 | component: Image,
11 | },
12 | ]
13 |
--------------------------------------------------------------------------------
/packages/ui/src/components/preview/preview.css:
--------------------------------------------------------------------------------
1 | .preview-layout{
2 | height:100%;
3 | }
4 |
5 | .preview-wrapper{
6 | height:100% !important;
7 | }
8 |
9 | .preview-layout>*{
10 | height:100% !important
11 | }
12 |
13 | .sp-stack{
14 | height: 100%;
15 | }
16 | .preview-explorer{
17 | height: 100%;
18 | }
19 | .preview-explorer>*{
20 | height: 100%;
21 | max-width: unset !important;
22 | }
--------------------------------------------------------------------------------
/packages/ui/src/link.d.ts:
--------------------------------------------------------------------------------
1 | //Not sure why the link is breaking in the next.js package, but this is a workaround to fix it
2 | /* eslint-disable @typescript-eslint/no-unused-vars */
3 | declare module 'next/link.js' {
4 | import React from 'react';
5 |
6 | const Link: React.FC<{
7 | href: string;
8 | children: React.ReactNode;
9 | [key: string]: any;
10 | }> = _ => JSX.Element;
11 | export default Link;
12 | }
13 |
--------------------------------------------------------------------------------
/packages/nodes-previews/vite.config.mts:
--------------------------------------------------------------------------------
1 | ///
2 | import { defineConfig } from 'vitest/config';
3 |
4 | export default defineConfig({
5 | test: {
6 | include: ['tests/**/*.test.[jt]s?(x)', 'src/**/*.test.[jt]s?(x)'],
7 | globals: true,
8 | server: {
9 | deps: {
10 | // to ensure importing CSS files is working
11 | inline: ['@tokens-studio/ui']
12 | }
13 | }
14 | }
15 | });
16 |
--------------------------------------------------------------------------------
/packages/ui/src/app/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Tokens Studio Graph",
3 | "short_name": "Graph Editor",
4 | "description": "Tokens Studio Graph Editor as a standalone app",
5 | "start_url": "/",
6 | "display": "standalone",
7 | "background_color": "#fff",
8 | "theme_color": "#fff",
9 | "icons": [
10 | {
11 | "src": "/favicon.ico",
12 | "sizes": "any",
13 | "type": "image/x-icon"
14 | }
15 | ]
16 | }
17 |
--------------------------------------------------------------------------------
/packages/vscode-extension/app/src/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | }
10 | ],
11 | "start_url": "./index.html",
12 | "display": "standalone",
13 | "theme_color": "#000000",
14 | "background_color": "#ffffff"
15 | }
16 |
--------------------------------------------------------------------------------
/packages/graph-editor/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite';
2 | import react from '@vitejs/plugin-react-swc';
3 |
4 | import tsconfigPaths from 'vite-tsconfig-paths';
5 |
6 | // https://vitejs.dev/config/
7 | export default defineConfig({
8 | server: {
9 | port: 3001,
10 | },
11 | mode: 'development',
12 | root: 'examples/defaults',
13 | plugins: [react({ tsDecorators: true }), tsconfigPaths()],
14 | });
15 |
--------------------------------------------------------------------------------
/packages/ui/src/assets/svgs/react.svg:
--------------------------------------------------------------------------------
1 |
2 |
11 |
--------------------------------------------------------------------------------
/packages/graph-engine/src/nodes/preview/index.ts:
--------------------------------------------------------------------------------
1 | import colorCompare from './colorCompare.js';
2 | import colorScale from './colorScale.js';
3 | import curve from './curve.js';
4 | import mathExpression from './mathExpression.js';
5 | import number from './number.js';
6 | import swatch from './swatch.js';
7 |
8 | export const nodes = [
9 | colorCompare,
10 | colorScale,
11 | curve,
12 | mathExpression,
13 | number,
14 | swatch
15 | ];
16 |
--------------------------------------------------------------------------------
/packages/storybook-lit/src/components/generated/tokens/knight-dark.json:
--------------------------------------------------------------------------------
1 | {
2 | "colors": {
3 | "primary": {
4 | "value": "#2653BB",
5 | "type": "color"
6 | },
7 | "text": {
8 | "value": "#ffffff",
9 | "type": "color"
10 | },
11 | "bg": {
12 | "value": "#000000",
13 | "type": "color"
14 | }
15 | },
16 | "borderRadius": {
17 | "rounded": {
18 | "value": "1em",
19 | "type": "dimension"
20 | }
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/packages/storybook-lit/src/components/generated/tokens/knight-dim.json:
--------------------------------------------------------------------------------
1 | {
2 | "colors": {
3 | "primary": {
4 | "value": "#2653BB",
5 | "type": "color"
6 | },
7 | "text": {
8 | "value": "#333333",
9 | "type": "color"
10 | },
11 | "bg": {
12 | "value": "#cccccc",
13 | "type": "color"
14 | }
15 | },
16 | "borderRadius": {
17 | "rounded": {
18 | "value": "1em",
19 | "type": "dimension"
20 | }
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/packages/storybook-lit/src/components/generated/tokens/ninja-dark.json:
--------------------------------------------------------------------------------
1 | {
2 | "colors": {
3 | "primary": {
4 | "value": "#13ADAD",
5 | "type": "color"
6 | },
7 | "text": {
8 | "value": "#ffffff",
9 | "type": "color"
10 | },
11 | "bg": {
12 | "value": "#000000",
13 | "type": "color"
14 | }
15 | },
16 | "borderRadius": {
17 | "rounded": {
18 | "value": "4px",
19 | "type": "dimension"
20 | }
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/packages/storybook-lit/src/components/generated/tokens/ninja-dim.json:
--------------------------------------------------------------------------------
1 | {
2 | "colors": {
3 | "primary": {
4 | "value": "#13ADAD",
5 | "type": "color"
6 | },
7 | "text": {
8 | "value": "#333333",
9 | "type": "color"
10 | },
11 | "bg": {
12 | "value": "#cccccc",
13 | "type": "color"
14 | }
15 | },
16 | "borderRadius": {
17 | "rounded": {
18 | "value": "4px",
19 | "type": "dimension"
20 | }
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/packages/storybook-lit/src/components/generated/tokens/ninja-light.json:
--------------------------------------------------------------------------------
1 | {
2 | "colors": {
3 | "primary": {
4 | "value": "#13ADAD",
5 | "type": "color"
6 | },
7 | "text": {
8 | "value": "#000000",
9 | "type": "color"
10 | },
11 | "bg": {
12 | "value": "#ffffff",
13 | "type": "color"
14 | }
15 | },
16 | "borderRadius": {
17 | "rounded": {
18 | "value": "4px",
19 | "type": "dimension"
20 | }
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/packages/storybook-lit/src/components/generated/tokens/samurai-dark.json:
--------------------------------------------------------------------------------
1 | {
2 | "colors": {
3 | "primary": {
4 | "value": "#17D617",
5 | "type": "color"
6 | },
7 | "text": {
8 | "value": "#ffffff",
9 | "type": "color"
10 | },
11 | "bg": {
12 | "value": "#000000",
13 | "type": "color"
14 | }
15 | },
16 | "borderRadius": {
17 | "rounded": {
18 | "value": "0",
19 | "type": "dimension"
20 | }
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/packages/storybook-lit/src/components/generated/tokens/samurai-dim.json:
--------------------------------------------------------------------------------
1 | {
2 | "colors": {
3 | "primary": {
4 | "value": "#17D617",
5 | "type": "color"
6 | },
7 | "text": {
8 | "value": "#333333",
9 | "type": "color"
10 | },
11 | "bg": {
12 | "value": "#cccccc",
13 | "type": "color"
14 | }
15 | },
16 | "borderRadius": {
17 | "rounded": {
18 | "value": "0",
19 | "type": "dimension"
20 | }
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/packages/storybook-lit/src/components/generated/tokens/samurai-light.json:
--------------------------------------------------------------------------------
1 | {
2 | "colors": {
3 | "primary": {
4 | "value": "#17D617",
5 | "type": "color"
6 | },
7 | "text": {
8 | "value": "#000000",
9 | "type": "color"
10 | },
11 | "bg": {
12 | "value": "#ffffff",
13 | "type": "color"
14 | }
15 | },
16 | "borderRadius": {
17 | "rounded": {
18 | "value": "0",
19 | "type": "dimension"
20 | }
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/packages/migrations/tsconfig.prod.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "include": ["src"],
4 | "compilerOptions": {
5 | "incremental": true,
6 | "rootDir": "src",
7 | "module": "NodeNext",
8 | "skipLibCheck": true,
9 | "moduleResolution": "NodeNext",
10 | "plugins": []
11 | },
12 | "exclude": [
13 | "cypress.config.ts",
14 | "cypress",
15 | "node_modules",
16 | "**/*.stories.tsx",
17 | "**/*.cy.tsx"
18 | ]
19 | }
20 |
--------------------------------------------------------------------------------
/packages/nodes-audio/tsconfig.prod.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "include": ["src"],
4 | "compilerOptions": {
5 | "incremental": true,
6 | "rootDir": "src",
7 | "module": "NodeNext",
8 | "skipLibCheck": true,
9 | "moduleResolution": "NodeNext",
10 | "plugins": []
11 | },
12 | "exclude": [
13 | "cypress.config.ts",
14 | "cypress",
15 | "node_modules",
16 | "**/*.stories.tsx",
17 | "**/*.cy.tsx"
18 | ]
19 | }
20 |
--------------------------------------------------------------------------------
/packages/storybook-lit/src/components/generated/tokens/knight-light.json:
--------------------------------------------------------------------------------
1 | {
2 | "colors": {
3 | "primary": {
4 | "value": "#2653BB",
5 | "type": "color"
6 | },
7 | "text": {
8 | "value": "#000000",
9 | "type": "color"
10 | },
11 | "bg": {
12 | "value": "#ffffff",
13 | "type": "color"
14 | }
15 | },
16 | "borderRadius": {
17 | "rounded": {
18 | "value": "1em",
19 | "type": "dimension"
20 | }
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/.changeset/config.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://unpkg.com/@changesets/config@2.3.0/schema.json",
3 | "changelog": "@changesets/cli/changelog",
4 | "commit": false,
5 | "fixed": [],
6 | "linked": [],
7 | "access": "public",
8 | "baseBranch": "master",
9 | "updateInternalDependencies": "patch",
10 | "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
11 | "onlyUpdatePeerDependentsWhenOutOfRange": true
12 | },
13 | "ignore": []
14 | }
--------------------------------------------------------------------------------
/packages/graph-editor/src/hooks/useCanDeleteNode.ts:
--------------------------------------------------------------------------------
1 | import { annotatedDeleteable } from '@tokens-studio/graph-engine';
2 | import { useLocalGraph } from './useLocalGraph.js';
3 |
4 | export const useCanDeleteNode = (nodeId: string) => {
5 | const graph = useLocalGraph();
6 | const node = graph.getNode(nodeId);
7 |
8 | if (node && node.annotations[annotatedDeleteable] === false) {
9 | return false;
10 | }
11 |
12 | return true;
13 | };
14 |
--------------------------------------------------------------------------------
/packages/nodes-figma/readme.md:
--------------------------------------------------------------------------------
1 | # @tokens-studio/graph-engine-nodes-figma
2 |
3 | Figma-specific nodes for the graph engine.
4 |
5 | ## Installation
6 |
7 | `npm install @tokens-studio/graph-engine-nodes-figma`
8 |
9 | ## Available Nodes
10 |
11 | - `scopeNumber`: Generates scope-specific numbering for Figma (implementation pending)
12 |
13 | ## Development
14 |
15 | 1. Build: `npm run build`
16 | 2. Test: `npm run test`
17 | 3. Lint: `npm run lint`
18 |
--------------------------------------------------------------------------------
/packages/ui/src/assets/svgs/vue.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/packages/graph-editor/src/utils/isActiveElementTextEditable.ts:
--------------------------------------------------------------------------------
1 | export const isActiveElementTextEditable = () => {
2 | const activeElement = document.activeElement as HTMLElement;
3 |
4 | if (!activeElement) {
5 | return false;
6 | }
7 |
8 | const tagName = activeElement.tagName.toLowerCase();
9 | const isContentEditable = activeElement.isContentEditable;
10 |
11 | return ['input', 'textarea'].includes(tagName) || isContentEditable;
12 | };
13 |
--------------------------------------------------------------------------------
/packages/nodes-previews/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # @tokens-studio/graph-engine-nodes-preview
2 |
3 | ## 1.1.1
4 |
5 | ### Patch Changes
6 |
7 | - 82e2e96: Update to the latest DS version
8 |
9 | ## 1.1.0
10 |
11 | ### Minor Changes
12 |
13 | - 08d51d0: Add typography tokens preview
14 | - 485e01f: Add color palette preview for design tokens
15 | - ae83d50: Add a tokens preview table
16 |
17 | ### Patch Changes
18 |
19 | - f08f85f: Fix clsx and remove classnames.
20 |
--------------------------------------------------------------------------------
/packages/nodes-previews/src/color/swatch/node.ts:
--------------------------------------------------------------------------------
1 | import { ColorSchema, Node } from '@tokens-studio/graph-engine';
2 |
3 | export default class NodeDefinition extends Node {
4 | static title = 'Color Swatch';
5 | static type = 'studio.tokens.previews.color.swatch';
6 | static description = 'Previews a single color';
7 |
8 | constructor(props) {
9 | super(props);
10 |
11 | this.addInput('color', {
12 | type: ColorSchema
13 | });
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/packages/ui/src/components/loader/index.tsx:
--------------------------------------------------------------------------------
1 | export default function Loading() {
2 | return (
3 |
17 | Loading Data...
18 |
19 | );
20 | }
21 |
--------------------------------------------------------------------------------
/packages/ui/src/components/pages/index.module.css:
--------------------------------------------------------------------------------
1 | .wrapper {
2 | display: grid;
3 | place-items: center;
4 | min-height: 100vh;
5 | }
6 |
7 | .card {
8 | background: var(--color-neutral-canvas-minimal-bg);
9 | padding: var(--component-spacing-xl);
10 | border-radius: var(--component-radii-xl);
11 | max-width: 480px;
12 | display: flex;
13 | flex-direction: column;
14 | align-items: center;
15 | gap: var(--component-spacing-xl);
16 | }
17 |
--------------------------------------------------------------------------------
/packages/ui/src/lib/prisma/index.ts:
--------------------------------------------------------------------------------
1 | import { PrismaClient } from '@prisma/client';
2 |
3 | const prismaClientSingleton = () => {
4 | return new PrismaClient();
5 | };
6 |
7 | declare const globalThis: {
8 | prismaGlobal: ReturnType;
9 | } & typeof global;
10 |
11 | export const prisma = globalThis.prismaGlobal ?? prismaClientSingleton();
12 |
13 | if (process.env.NODE_ENV !== 'production') globalThis.prismaGlobal = prisma;
14 |
--------------------------------------------------------------------------------
/packages/graph-editor/src/utils/stripVariadic.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Variadic named handles have the name of the handle followed by [index] where index is a number
3 | * @param name
4 | * @returns
5 | */
6 | export const stripVariadic = (name: string) => name.split('[')[0];
7 |
8 | export const getVariadicIndex = (name: string) => {
9 | const index = name.match(/\[(\d+)\]/);
10 | if (index) {
11 | return parseInt(index[1]);
12 | }
13 | return -1;
14 | };
15 |
--------------------------------------------------------------------------------
/packages/ui/src/hooks/useGetEditor.ts:
--------------------------------------------------------------------------------
1 | import globalState from '@/mobx/index.tsx';
2 | import type { SerializedGraph } from '@tokens-studio/graph-engine';
3 |
4 | export function useGetEditor() {
5 | async function loadExample(file) {
6 | const editor = globalState.refs.editor;
7 | if (!editor) {
8 | return;
9 | }
10 |
11 | await editor.clear();
12 | await editor.loadRaw(file as SerializedGraph);
13 | }
14 |
15 | return { loadExample };
16 | }
17 |
--------------------------------------------------------------------------------
/packages/graph-editor/examples/barebones/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vite + React + TS
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/packages/nodes-design-tokens/src/nodes/naming/index.ts:
--------------------------------------------------------------------------------
1 | import alphabetic from './alphabetic.js';
2 | import alphanumeric from './alphanumeric.js';
3 | import greekLetter from './greekLetter.js';
4 | import hierarchyLevel from './hierarchyLevel.js';
5 | import numeric from './numeric.js';
6 | import tshirtSize from './tshirtSize.js';
7 |
8 | export const nodes = [
9 | alphabetic,
10 | alphanumeric,
11 | greekLetter,
12 | hierarchyLevel,
13 | numeric,
14 | tshirtSize
15 | ];
16 |
--------------------------------------------------------------------------------
/packages/graph-editor/src/components/panels/settings/story.stories.tsx:
--------------------------------------------------------------------------------
1 | import { Settings } from './index.js';
2 | import React from 'react';
3 | import type { Meta, StoryObj } from '@storybook/react';
4 |
5 | const meta: Meta = {
6 | title: 'Panels/Settings',
7 | component: Settings,
8 | };
9 |
10 | export default meta;
11 | type Story = StoryObj;
12 | export const Default: Story = {
13 | render: () => ,
14 | args: {},
15 | };
16 |
--------------------------------------------------------------------------------
/packages/graph-editor/src/components/panels/index.tsx:
--------------------------------------------------------------------------------
1 | export * from './alignment/index.js';
2 | export * from './debugger/index.js';
3 | export * from './dropPanel/index.js';
4 | export * from './graph/index.js';
5 | export * from './inputs/index.js';
6 | export * from './legend/index.js';
7 | export * from './logs/index.js';
8 | export * from './nodeSettings/index.js';
9 | export * from './output/index.js';
10 | export * from './play/index.js';
11 | export * from './settings/index.js';
12 |
--------------------------------------------------------------------------------
/packages/graph-editor/examples/defaults/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vite + React + TS
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/packages/graph-engine/src/nodes/preview/curve.ts:
--------------------------------------------------------------------------------
1 | import { CurveSchema } from '../../schemas/index.js';
2 | import { Node } from '../../programmatic/node.js';
3 |
4 | export default class NodeDefinition extends Node {
5 | static title = 'PreviewCurve';
6 | static type = 'studio.tokens.preview.curve';
7 |
8 | static description = 'Previews a curve';
9 |
10 | constructor(props) {
11 | super(props);
12 |
13 | this.addInput('value', {
14 | type: CurveSchema
15 | });
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/packages/ui/src/api/contracts/ai.ts:
--------------------------------------------------------------------------------
1 | import { SerializedGraph } from '../schemas/graph.ts';
2 | import { initContract } from '@ts-rest/core';
3 | import { z } from 'zod';
4 |
5 | const c = initContract();
6 |
7 | export const aiContract = c.router({
8 | getAISummary: {
9 | method: 'POST',
10 | path: '/ai/summarize',
11 | body: z.object({
12 | graph: SerializedGraph
13 | }),
14 | responses: {
15 | 200: z.object({
16 | summary: z.string()
17 | })
18 | }
19 | }
20 | });
21 |
--------------------------------------------------------------------------------
/packages/ui/src/app/marketplace/layout.tsx:
--------------------------------------------------------------------------------
1 | import { Container } from '@/components/container/index.tsx';
2 | import { Stack } from '@tokens-studio/ui/Stack.js';
3 | import Rail from '@/components/rail.tsx';
4 |
5 | export default function Layout({ children }) {
6 | return (
7 |
8 |
9 |
10 |
11 |
12 | {children}
13 |
14 |
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/packages/graph-editor/vitest.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vitest/config';
2 | import tsconfigPaths from 'vite-tsconfig-paths';
3 |
4 | export default defineConfig({
5 | test: {
6 | include: ['src/**/*.test.[jt]s?(x)'],
7 | globals: true,
8 | environment: 'jsdom',
9 | server: {
10 | deps: {
11 | // to ensure importing CSS files is working
12 | inline: ['@tokens-studio/ui'],
13 | },
14 | },
15 | },
16 | plugins: [tsconfigPaths()],
17 | });
18 |
--------------------------------------------------------------------------------
/packages/graph-engine/src/nodes/preview/swatch.ts:
--------------------------------------------------------------------------------
1 | import { ColorSchema } from '../../schemas/index.js';
2 | import { Node } from '../../programmatic/node.js';
3 |
4 | export default class NodeDefinition extends Node {
5 | static title = 'Color Swatch';
6 | static type = 'studio.tokens.preview.swatch';
7 |
8 | static description = 'Previews a color swatch';
9 |
10 | constructor(props) {
11 | super(props);
12 |
13 | this.addInput('value', {
14 | type: ColorSchema
15 | });
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/packages/graph-engine/src/nodes/vector2/index.ts:
--------------------------------------------------------------------------------
1 | import add from './add.js';
2 | import create from './create.js';
3 | import destructure from './destructure.js';
4 | import dot from './dot.js';
5 | import length from './length.js';
6 | import normalize from './normalize.js';
7 | import scale from './scale.js';
8 | import subtract from './subtract.js';
9 |
10 | export const nodes = [
11 | add,
12 | create,
13 | destructure,
14 | dot,
15 | length,
16 | normalize,
17 | scale,
18 | subtract
19 | ];
20 |
--------------------------------------------------------------------------------
/dockercompose.build.yaml:
--------------------------------------------------------------------------------
1 | version: "3"
2 |
3 | services:
4 |
5 | web:
6 | container_name: web
7 | build:
8 | context: .
9 | dockerfile: ./packages/ui/Dockerfile
10 | restart: always
11 | env_file:
12 | - ./packages/ui/.env
13 | ports:
14 | - 3000:3000
15 | docs:
16 | container_name: docs
17 | build:
18 | context: .
19 | dockerfile: ./packages/documentation/Dockerfile
20 | restart: always
21 |
22 | ports:
23 | - 4000:3000
24 |
--------------------------------------------------------------------------------
/packages/storybook-react/src/button/button.tsx:
--------------------------------------------------------------------------------
1 | import './base.css';
2 | import { Context, defaultValues, keyOrder } from './button.generated';
3 | import { useStyledClass } from '../context';
4 | import React from 'react';
5 |
6 | export type ButtonProps = {
7 | children: React.ReactNode;
8 | } & Context;
9 |
10 | export const Button = (props: ButtonProps) => {
11 | const styledClass = useStyledClass('button', keyOrder, defaultValues);
12 | return ;
13 | };
14 |
--------------------------------------------------------------------------------
/packages/documentation/src/pages/index.module.css:
--------------------------------------------------------------------------------
1 | /**
2 | * CSS files with the .module.css suffix will be treated as CSS modules
3 | * and scoped locally.
4 | */
5 |
6 | .heroBanner {
7 | padding: 4rem 0;
8 | text-align: center;
9 | position: relative;
10 | overflow: hidden;
11 | }
12 |
13 | @media screen and (max-width: 996px) {
14 | .heroBanner {
15 | padding: 2rem;
16 | }
17 | }
18 |
19 | .buttons {
20 | display: flex;
21 | align-items: center;
22 | justify-content: center;
23 | }
24 |
--------------------------------------------------------------------------------
/packages/graph-editor/examples/defaults/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "barebones",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite"
8 | },
9 | "dependencies": {
10 | "react": "^18.2.0",
11 | "react-dom": "^18.2.0"
12 | },
13 | "devDependencies": {
14 | "@types/react": "18.0.37",
15 | "@types/react-dom": "18.0.11",
16 | "@vitejs/plugin-react-swc": "^3.5.0",
17 | "typescript": "^5.4.5",
18 | "vite": "^5.2.10"
19 | }
20 | }
--------------------------------------------------------------------------------
/packages/nodes-figma/src/nodes/index.ts:
--------------------------------------------------------------------------------
1 | import codeSyntax from './codeSyntax.js';
2 | import publish from './publish.js';
3 | import scopeAll from './scopeAll.js';
4 | import scopeByType from './scopeByType.js';
5 | import scopeColor from './scopeColor.js';
6 | import scopeNumber from './scopeNumber.js';
7 | import scopeString from './scopeString.js';
8 |
9 | export const nodes = [
10 | codeSyntax,
11 | publish,
12 | scopeAll,
13 | scopeByType,
14 | scopeColor,
15 | scopeNumber,
16 | scopeString
17 | ];
18 |
--------------------------------------------------------------------------------
/packages/ui/src/api/sdk/provider.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 | import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
3 |
4 | const queryClient = new QueryClient({
5 | defaultOptions: {
6 | queries: {
7 | //Neeeded to prevent immediate refecting on the client from the server
8 | staleTime: 60 * 1000
9 | }
10 | }
11 | });
12 |
13 | export function QueryProvider({ children }) {
14 | return (
15 | {children}
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/packages/vscode-example-workspace/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "vite";
2 | import react from "@vitejs/plugin-react-swc";
3 |
4 | import tsconfigPaths from "vite-tsconfig-paths";
5 |
6 | // https://vitejs.dev/config/
7 | export default defineConfig({
8 | server: {
9 | port: 3123,
10 | },
11 | build: {
12 | target: "es2015",
13 | manifest: true,
14 | },
15 | mode: "development",
16 | root: ".tsgraph",
17 | plugins: [react({ tsDecorators: true }), tsconfigPaths()],
18 | });
19 |
--------------------------------------------------------------------------------
/packages/graph-editor/examples/barebones/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "barebones",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite"
8 | },
9 | "dependencies": {
10 | "react": "^18.2.0",
11 | "react-dom": "^18.2.0"
12 | },
13 | "devDependencies": {
14 | "@types/react": "18.0.37",
15 | "@types/react-dom": "18.0.11",
16 | "@vitejs/plugin-react-swc": "^3.5.0",
17 | "typescript": "^5.4.5",
18 | "vite": "^5.2.0"
19 | }
20 | }
--------------------------------------------------------------------------------
/packages/graph-editor/src/hooks/onEnter.ts:
--------------------------------------------------------------------------------
1 | import { useCallback } from 'react';
2 |
3 | /**
4 | * Add this to your keyUp event to call a function when the user presses enter
5 | * @param callback
6 | * @returns
7 | */
8 | export const useOnEnter = (callback?: (event: React.KeyboardEvent) => void) => {
9 | return useCallback(
10 | (event: React.KeyboardEvent) => {
11 | if (event.key === 'Enter') {
12 | callback && callback(event);
13 | }
14 | },
15 | [callback],
16 | );
17 | };
18 |
--------------------------------------------------------------------------------
/packages/storybook-react/.storybook/main.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.tsx'],
3 | addons: ['@storybook/addon-essentials'],
4 | framework: {
5 | name: '@storybook/react-vite',
6 | options: {
7 | plugins: []
8 | }
9 | },
10 | typescript: {
11 | // Overrides the default Typescript configuration to allow multi-package components to be documented via AutoDocs.
12 | reactDocgen: 'react-docgen',
13 | checkOptions: {},
14 | check: false
15 | }
16 | };
17 |
--------------------------------------------------------------------------------
/packages/ui/src/scripts/wdyr.ts:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line @typescript-eslint/no-unused-vars
2 | import React from 'react';
3 | // eslint-disable-next-line @typescript-eslint/no-unused-vars
4 | import whyDidYouRender from '@welldone-software/why-did-you-render';
5 |
6 | // Uncomment if want to do perf checks
7 |
8 | // if (process.env.NODE_ENV !== 'production') {
9 | // //@ts-ignore
10 | // whyDidYouRender(React, {
11 | // trackAllPureComponents: true,
12 | // trackHooks: true,
13 | // });
14 | // }
15 |
--------------------------------------------------------------------------------
/adrs/0000-efficient-caching.md:
--------------------------------------------------------------------------------
1 | # Efficient Caching
2 |
3 | ## Context and Problem Statement
4 |
5 | Efficient graph execution when varying inputs. Caching needs to be enabled to not recalculate values in case that a node has an expensive calculation.
6 |
7 | ## Considered Options
8 |
9 | - Pure functions
10 |
11 | ## Decision Outcome
12 |
13 | Chosen option: "Pure functions", because By making nodes explicitly pure without side effects, the engine can cache calculations by performing deep equality checks on the values
14 |
--------------------------------------------------------------------------------
/packages/graph-engine/tests/suites/nodes/math/abs.test.ts:
--------------------------------------------------------------------------------
1 | import { Graph } from '../../../../src/graph/graph.js';
2 | import { describe, expect, test } from 'vitest';
3 | import Node from '../../../../src/nodes/math/abs.js';
4 |
5 | describe('math/abs', () => {
6 | test('absolutes the input', async () => {
7 | const graph = new Graph();
8 | const node = new Node({ graph });
9 |
10 | node.inputs.input.setValue(-1);
11 | await node.execute();
12 | expect(node.outputs.value.value).to.equal(1);
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/packages/nodes-previews/src/color/scale/node.ts:
--------------------------------------------------------------------------------
1 | import { ColorSchema, Node } from '@tokens-studio/graph-engine';
2 | import { arrayOf } from '../../utils/index.js';
3 |
4 | export default class NodeDefinition extends Node {
5 | static title = 'Color Scale';
6 | static type = 'studio.tokens.previews.color.scale';
7 |
8 | static description = 'Previews a color scale';
9 |
10 | constructor(props) {
11 | super(props);
12 |
13 | this.addInput('scale', {
14 | type: arrayOf(ColorSchema)
15 | });
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/packages/ui/src/app/dashboard/layout.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { Container } from '@/components/container/index.tsx';
4 | import { Stack } from '@tokens-studio/ui/Stack.js';
5 | import Rail from '@/components/rail.tsx';
6 |
7 | export default function Layout({ children }) {
8 | return (
9 |
10 |
11 |
12 |
13 |
14 | {children}
15 |
16 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/packages/graph-editor/src/components/controls/default.tsx:
--------------------------------------------------------------------------------
1 | import { IField } from './interface.js';
2 | import { JSONTree } from 'react-json-tree';
3 | import { observer } from 'mobx-react-lite';
4 | import { toJS } from 'mobx';
5 | import React from 'react';
6 |
7 | export const DefaultField = observer(({ port }: IField) => {
8 | let value = toJS(port.value);
9 | if (Array.isArray(value)) {
10 | value = { items: value };
11 | }
12 |
13 | return true} />;
14 | });
15 |
--------------------------------------------------------------------------------
/packages/nodes-fs/src/nodes/index.ts:
--------------------------------------------------------------------------------
1 | import { GetDirectoryNode } from './getDirectoryListing.js';
2 | import { GetFileNode } from './getFile.js';
3 | import { GetJSONNode } from './getJson.js';
4 | import { GetTextNode } from './getText.js';
5 | import type { Node } from '@tokens-studio/graph-engine';
6 |
7 | /**
8 | * All nodes in the system available as an array
9 | */
10 | export const nodes: (typeof Node)[] = ([] as (typeof Node)[]).concat(
11 | GetFileNode,
12 | GetJSONNode,
13 | GetTextNode,
14 | GetDirectoryNode
15 | );
16 |
--------------------------------------------------------------------------------
/packages/storybook-lit/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Vite + Lit + TS
7 |
8 |
9 |
10 |
11 |
12 | Vite + Lit
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/packages/graph-editor/src/components/controls/variadicNumber.tsx:
--------------------------------------------------------------------------------
1 | import { Edge, Port } from '@tokens-studio/graph-engine';
2 | import { TextInput } from '@tokens-studio/ui';
3 | import React from 'react';
4 | import withVariadicField from './withVariadicField.js';
5 |
6 | const VariadicNumberUI = ({ port, edge }: { port: Port; edge: Edge }) => {
7 | return (
8 |
9 | );
10 | };
11 |
12 | export const VariadicNumber = withVariadicField(VariadicNumberUI);
13 |
--------------------------------------------------------------------------------
/packages/graph-editor/src/types/controls.ts:
--------------------------------------------------------------------------------
1 | import { IField } from '@/components/controls/interface.js';
2 | import { Port } from '@tokens-studio/graph-engine';
3 |
4 | /**
5 | * Additional options for the control
6 | */
7 | export type ControlOptions = {
8 | readOnly: boolean;
9 | };
10 |
11 | /**
12 | * Controls are used to provide for auto generated controls based on matchers for the UI
13 | */
14 | export type Control = {
15 | matcher: (port: Port, opts: ControlOptions) => boolean;
16 | component: React.FC;
17 | };
18 |
--------------------------------------------------------------------------------
/packages/ui/src/api/controllers/index.ts:
--------------------------------------------------------------------------------
1 | import { router as ai } from './ai.ts';
2 | import { router as auth } from './auth.ts';
3 | import { contract } from '../contracts/index.ts';
4 | import { router as graph } from './graph.ts';
5 | import { router as marketplace } from './marketplace.ts';
6 | import { tsr } from '@ts-rest/serverless/next';
7 | import type { Context } from '../utils/types.ts';
8 |
9 | export const root = tsr.router(contract, {
10 | ai,
11 | auth,
12 | graph,
13 | marketplace
14 | });
15 |
--------------------------------------------------------------------------------
/packages/ui/src/app/marketplace/clientPage.module.css:
--------------------------------------------------------------------------------
1 | .wrapper {
2 | flex: 33%;
3 | max-width: 33%;
4 | padding: var(--component-spacing-md);
5 | }
6 |
7 | .imageHolder {
8 | padding-bottom: 50%;
9 | position: relative;
10 | }
11 |
12 | .previewImage {
13 | position: absolute;
14 | width: 100%;
15 | height: 100%;
16 | display: block;
17 | }
18 |
19 | .itemPadding {
20 | padding: var(--component-spacing-md);
21 | }
22 |
23 | .flexWrapContainer {
24 | flex-wrap: wrap;
25 | padding: var(--component-spacing-md);
26 | }
27 |
--------------------------------------------------------------------------------
/.changeset/README.md:
--------------------------------------------------------------------------------
1 | # Changesets
2 |
3 | Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
4 | with multi-package repos, or single-package repos to help you version and publish your code. You can
5 | find the full documentation for it [in our repository](https://github.com/changesets/changesets)
6 |
7 | We have a quick list of common questions to get you started engaging with this project in
8 | [our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)
9 |
--------------------------------------------------------------------------------
/packages/graph-editor/src/components/preview/mathExpression.tsx:
--------------------------------------------------------------------------------
1 | import { Text } from '@tokens-studio/ui';
2 | import React from 'react';
3 |
4 | export const MathExpression = ({ value }) => {
5 | return (
6 | <>
7 | {value && (
8 |
14 | {value}
15 |
16 | )}
17 |
18 | );
19 | };
20 |
21 | export default MathExpression;
22 |
--------------------------------------------------------------------------------
/packages/nodes-previews/postcss.config.js:
--------------------------------------------------------------------------------
1 | import postcssImport from 'postcss-import';
2 | import postcssNested from 'postcss-nested';
3 | import postcssPresetEnv from 'postcss-preset-env';
4 |
5 | export default {
6 | plugins: [
7 | postcssImport,
8 | postcssNested,
9 | postcssPresetEnv({
10 | stage: 3,
11 | features: {
12 | 'nesting-rules': true,
13 | 'custom-properties': true,
14 | 'custom-media-queries': true,
15 | 'media-query-ranges': true,
16 | 'custom-selectors': true
17 | }
18 | })
19 | ]
20 | };
21 |
--------------------------------------------------------------------------------
/packages/ui/src/app/marketplace/graph/[id]/clientPage.module.css:
--------------------------------------------------------------------------------
1 | .contentBox {
2 | padding: var(--component-spacing-2xl);
3 | }
4 |
5 | .headerStack {
6 | padding: var(--component-spacing-2xl);
7 | }
8 |
9 | .imageContainer {
10 | width: 40%;
11 | }
12 |
13 | .aboutContent {
14 | padding: var(--component-spacing-md);
15 | }
16 |
17 | .imageHolder {
18 | padding-bottom: 50%;
19 | position: relative;
20 | }
21 |
22 | .previewImage {
23 | position: absolute;
24 | width: 100%;
25 | height: 100%;
26 | display: block;
27 | }
28 |
--------------------------------------------------------------------------------
/packages/graph-editor/src/redux/models/root.ts:
--------------------------------------------------------------------------------
1 | import { Models } from '@rematch/core';
2 | import { graphState } from './graph.js';
3 | import { refState } from './refs.js';
4 | import { registryState } from './registry.js';
5 | import { settingsState } from './settings.js';
6 | import { uiState } from './ui.js';
7 |
8 | export interface RootModel extends Models {
9 | settings: typeof settingsState;
10 | ui: typeof uiState;
11 | graph: typeof graphState;
12 | refs: typeof refState;
13 | registry: typeof registryState;
14 | }
15 |
--------------------------------------------------------------------------------
/packages/graph-engine/tests/suites/nodes/math/add.test.ts:
--------------------------------------------------------------------------------
1 | import { Graph } from '../../../../src/graph/graph.js';
2 | import { describe, expect, test } from 'vitest';
3 | import Node from '../../../../src/nodes/math/add.js';
4 |
5 | describe('math/add', () => {
6 | test('adds two numbers', async () => {
7 | const graph = new Graph();
8 | const node = new Node({ graph });
9 |
10 | node.inputs.a.setValue(2);
11 | node.inputs.b.setValue(1);
12 | await node.execute();
13 | expect(node.outputs.value.value).to.equal(3);
14 | });
15 | });
16 |
--------------------------------------------------------------------------------
/packages/migrations/src/migrations/removePositionAnnotations.ts:
--------------------------------------------------------------------------------
1 | import type {
2 | SerializedGraph,
3 | SerializedNode
4 | } from '@tokens-studio/graph-engine';
5 |
6 | export const removePositionAnnotations = async (
7 | graph: SerializedGraph
8 | ): Promise => {
9 | if (graph.nodes) {
10 | graph.nodes.forEach((node: SerializedNode | null | undefined) => {
11 | if (node?.annotations) {
12 | delete node.annotations.xpos;
13 | delete node.annotations.ypos;
14 | }
15 | });
16 | }
17 | return graph;
18 | };
19 |
--------------------------------------------------------------------------------
/packages/vscode-example-workspace/metadata.json:
--------------------------------------------------------------------------------
1 | {
2 | "editor": {
3 | "version": "4.0.0",
4 | "layout": "full",
5 | "options": {
6 | "showInlineTypes": true,
7 | "showInlineValues": true,
8 | "useDelayedInteraction": true,
9 | "clickToConnect": true,
10 | "showExecutionTime": true,
11 | "showMinimap": true,
12 | "enableContextMenus": true,
13 | "edgeType": "bezier",
14 | "layoutType": "dagre"
15 | }
16 | },
17 | "logs": {
18 | "output": "./output.log"
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/packages/graph-editor/src/components/colorPicker/index.module.css:
--------------------------------------------------------------------------------
1 | .colorPickerTrigger {
2 | cursor: pointer;
3 | border-radius: var(--component-radii-sm);
4 | border: var(--component-border-width-md) solid var(--stroke-subtle);
5 | width: var(--size-150);
6 | height: var(--size-150);
7 | flex-shrink: 0;
8 | padding: 0;
9 |
10 | &:hover {
11 | outline: var(--component-border-width-md) solid var(--stroke-default);
12 | }
13 | }
14 |
15 | .popoverCloseRemoveButton {
16 | all: unset;
17 | margin: var(--component-spacing-md);
18 | }
--------------------------------------------------------------------------------
/packages/graph-editor/src/redux/models/index.ts:
--------------------------------------------------------------------------------
1 | import { RootModel } from './root.js';
2 |
3 | import { graphState } from './graph.js';
4 | import { refState } from './refs.js';
5 | import { registryState } from './registry.js';
6 | import { settingsState } from './settings.js';
7 | import { uiState } from './ui.js';
8 |
9 | export const models: RootModel = {
10 | graph: graphState,
11 | settings: settingsState,
12 | ui: uiState,
13 | refs: refState,
14 | registry: registryState,
15 | };
16 |
17 | export type { RootModel } from './root.js';
18 |
--------------------------------------------------------------------------------
/packages/graph-engine/tests/suites/nodes/math/pow.test.ts:
--------------------------------------------------------------------------------
1 | import { Graph } from '../../../../src/graph/graph.js';
2 | import { describe, expect, test } from 'vitest';
3 | import Node from '../../../../src/nodes/math/pow.js';
4 |
5 | describe('math/pow', () => {
6 | test('powers two numbers', async () => {
7 | const graph = new Graph();
8 | const node = new Node({ graph });
9 | node.inputs.base.setValue(2);
10 | node.inputs.exponent.setValue(2);
11 | await node.execute();
12 | expect(node.outputs.value.value).to.equal(4);
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/packages/graph-engine/tests/suites/nodes/math/sub.test.ts:
--------------------------------------------------------------------------------
1 | import { Graph } from '../../../../src/graph/graph.js';
2 | import { describe, expect, test } from 'vitest';
3 | import Node from '../../../../src/nodes/math/subtract.js';
4 |
5 | describe('math/sub', () => {
6 | test('subtracts two numbers', async () => {
7 | const graph = new Graph();
8 | const node = new Node({ graph });
9 | node.inputs.a.setValue(1);
10 | node.inputs.b.setValue(2);
11 | await node.execute();
12 | expect(node.outputs.value.value).to.equal(-1);
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/packages/vscode-extension/app/src/data/nodeTypes/index.ts:
--------------------------------------------------------------------------------
1 | import { nodeLookup as audioLookup } from '@tokens-studio/graph-engine-nodes-audio';
2 | import { nodes as fsNodes } from '@tokens-studio/graph-engine-nodes-fs';
3 | import { nodeLookup } from '@tokens-studio/graph-engine';
4 |
5 | //These are all the nodes that are available in the editor
6 | export const nodeTypes = {
7 | //Default
8 | ...nodeLookup,
9 | ...audioLookup,
10 | ...fsNodes.reduce((acc, node) => {
11 | acc[node.type] = node;
12 | return acc;
13 | }, {}),
14 | };
15 |
--------------------------------------------------------------------------------
/packages/documentation/docs/guides/packages/custom.md:
--------------------------------------------------------------------------------
1 | # Custom packages
2 |
3 | Custom packages can be installed from npm. The below is an example with the [Design Tokens](https://www.npmjs.com/package/@tokens-studio/graph-engine-nodes-design-tokens) package
4 |
5 | 1. First install the package
6 |
7 | ```bash
8 | npm install @tokens-studio/graph-engine-nodes-design-tokens
9 | ```
10 |
11 | or
12 |
13 | ```bash
14 | yarn add @tokens-studio/graph-engine-nodes-design-tokens
15 | ```
16 |
17 | 2. Create a graph
18 |
19 | ```
20 |
21 |
22 |
23 | ```
24 |
--------------------------------------------------------------------------------
/packages/graph-engine/tests/suites/nodes/array/length.test.ts:
--------------------------------------------------------------------------------
1 | import { Graph } from '../../../../src/graph/graph.js';
2 | import { describe, expect, test } from 'vitest';
3 | import Node from '../../../../src/nodes/array/length.js';
4 |
5 | describe('array/length', () => {
6 | test('return length of array', async () => {
7 | const graph = new Graph();
8 | const node = new Node({ graph });
9 |
10 | node.inputs.array.setValue([4, 5, 6]);
11 |
12 | await node.execute();
13 |
14 | expect(node.outputs.length.value).to.equal(3);
15 | });
16 | });
17 |
--------------------------------------------------------------------------------
/packages/graph-engine/tests/suites/nodes/string/uppercase.test.ts:
--------------------------------------------------------------------------------
1 | import { Graph } from '../../../../src/graph/graph.js';
2 | import { describe, expect, test } from 'vitest';
3 | import Node from '../../../../src/nodes/string/uppercase.js';
4 |
5 | describe('string/uppercase', () => {
6 | test('uppercases all characters', async () => {
7 | const graph = new Graph();
8 | const node = new Node({ graph });
9 |
10 | node.inputs.value.setValue('jjj');
11 | await node.execute();
12 | expect(node.outputs.value.value).to.equal('JJJ');
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/packages/graph-engine/tests/suites/nodes/math/multiply.test.ts:
--------------------------------------------------------------------------------
1 | import { Graph } from '../../../../src/graph/graph.js';
2 | import { describe, expect, test } from 'vitest';
3 | import Node from '../../../../src/nodes/math/multiply.js';
4 |
5 | describe('math/mul', () => {
6 | test('multiplies two numbers', async () => {
7 | const graph = new Graph();
8 | const node = new Node({ graph });
9 |
10 | node.inputs.a.setValue(1);
11 | node.inputs.b.setValue(2);
12 | await node.execute();
13 | expect(node.outputs.value.value).to.equal(2);
14 | });
15 | });
16 |
--------------------------------------------------------------------------------
/packages/nodes-previews/src/token/dimension/panel.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | padding: 1rem;
3 | }
4 |
5 | .stacked {
6 | .item {
7 | flex-shrink: 0;
8 | flex-grow: 0;
9 |
10 | .box {
11 | display: block;
12 | flex-shrink: 0;
13 | flex-grow: 0;
14 | }
15 | }
16 | }
17 |
18 | .layered {
19 | position: relative;
20 |
21 | .item {
22 | position: absolute;
23 | top: 0;
24 | left: 0;
25 | background-color: transparent;
26 | border: var(--component-border-width-sm) solid var(--stroke-subtle);
27 | }
28 | }
--------------------------------------------------------------------------------
/packages/vscode-example-workspace/graphs/test/graph.metadata.json:
--------------------------------------------------------------------------------
1 | {
2 | "capabilities": [
3 | {
4 | "name": "web-audio",
5 | "version": "0.0.0"
6 | },
7 | {
8 | "name": "fs",
9 | "version": "0.0.0"
10 | }
11 | ],
12 | "ui": {
13 | "viewport": {
14 | "x": -39.44401416206222,
15 | "y": -106.86520579770138,
16 | "zoom": 0.6138991546274897
17 | },
18 | "viewports": [null, null, null, null, null, null, null, null, null]
19 | },
20 | "output": {
21 | "path": "./output.json"
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/packages/graph-engine/src/nodes/preview/colorScale.ts:
--------------------------------------------------------------------------------
1 | import { ColorSchema } from '../../schemas/index.js';
2 | import { Node } from '../../programmatic/node.js';
3 | import { arrayOf } from '../../schemas/utils.js';
4 |
5 | export default class NodeDefinition extends Node {
6 | static title = 'Color Scale';
7 | static type = 'studio.tokens.preview.colorScale';
8 |
9 | static description = 'Previews a color scale';
10 |
11 | constructor(props) {
12 | super(props);
13 |
14 | this.addInput('value', {
15 | type: arrayOf(ColorSchema)
16 | });
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/packages/graph-engine/tests/suites/nodes/string/lowercase.test.ts:
--------------------------------------------------------------------------------
1 | import { Graph } from '../../../../src/graph/graph.js';
2 | import { describe, expect, test } from 'vitest';
3 | import Node from '../../../../src/nodes/string/lowercase.js';
4 |
5 | describe('string/lowercase', () => {
6 | test('lowercases all characters', async () => {
7 | const graph = new Graph();
8 | const node = new Node({ graph });
9 |
10 | node.inputs.value.setValue('HHH');
11 |
12 | await node.execute();
13 |
14 | expect(node.outputs.value.value).to.equal('hhh');
15 | });
16 | });
17 |
--------------------------------------------------------------------------------
/packages/vscode-extension/src/test/extension.test.ts:
--------------------------------------------------------------------------------
1 | import * as assert from 'assert';
2 |
3 | // You can import and use all API from the 'vscode' module
4 | // as well as import your extension to test it
5 | import * as vscode from 'vscode';
6 | // import * as myExtension from '../../extension';
7 |
8 | suite('Extension Test Suite', () => {
9 | vscode.window.showInformationMessage('Start all tests.');
10 |
11 | test('Sample test', () => {
12 | assert.strictEqual(-1, [1, 2, 3].indexOf(5));
13 | assert.strictEqual(-1, [1, 2, 3].indexOf(0));
14 | });
15 | });
16 |
--------------------------------------------------------------------------------
/scripts/diff.js:
--------------------------------------------------------------------------------
1 | const stdin = process.openStdin();
2 |
3 | let data = '';
4 |
5 | stdin.on('data', function (chunk) {
6 | data += chunk;
7 | });
8 |
9 | stdin.on('end', function () {
10 | const input = JSON.parse(data);
11 | const flatpack = input.tasks.reduce((acc, task) => {
12 | if (task.command == '\u003cNONEXISTENT\u003e') {
13 | return acc;
14 | }
15 |
16 | if (task.cache.status == 'MISS') {
17 | acc.push(task.package);
18 | }
19 | return acc;
20 | }, []);
21 |
22 | const uniq = [...new Set(flatpack)];
23 | console.log(uniq.join(' '));
24 | });
25 |
--------------------------------------------------------------------------------
/packages/graph-editor/src/components/toolbar/buttons/settings.tsx:
--------------------------------------------------------------------------------
1 | import { IconButton } from '@tokens-studio/ui';
2 | import { useLayoutButton } from '../../../hooks/useLayoutButton.js';
3 | import React from 'react';
4 | import Settings from '@tokens-studio/icons/Settings.js';
5 |
6 | export const SettingsToolbarButton = () => {
7 | const onClick = useLayoutButton();
8 | return (
9 | onClick('settings')}
12 | icon={}
13 | data-tooltip-content="Settings"
14 | />
15 | );
16 | };
17 |
--------------------------------------------------------------------------------
/packages/graph-engine/tests/data/processed/noInput.ts:
--------------------------------------------------------------------------------
1 | import { SerializedNode } from '../../../src/graph/index.js';
2 |
3 | export default {
4 | nodes: [
5 | {
6 | id: '33952fc4-eced-4c10-a56d-7bdb65182b34',
7 | type: 'studio.tokens.generic.output',
8 | inputs: []
9 | }
10 | ] as SerializedNode[],
11 | edges: [
12 | {
13 | id: 'b7786ca3-f93c-4806-9c4e-ccc6e8e48825',
14 | target: '33952fc4-eced-4c10-a56d-7bdb65182b34',
15 | source: 'c15d874f-f7e7-42a6-a6b3-8f238da52007',
16 | sourceHandle: 'xxx',
17 | targetHandle: 'input'
18 | }
19 | ]
20 | };
21 |
--------------------------------------------------------------------------------
/packages/graph-engine/tests/suites/schema/schema.test.ts:
--------------------------------------------------------------------------------
1 | import {
2 | AnyArraySchema,
3 | AnySchema,
4 | NumberSchema
5 | } from '../../../src/schemas/index.js';
6 | import { describe, expect, test } from 'vitest';
7 | import ZSchema from 'z-schema-esm';
8 |
9 | const zschema = new ZSchema();
10 |
11 | describe('schema', () => {
12 | [NumberSchema, AnySchema, AnyArraySchema].forEach(schema => {
13 | test(`should validate ${schema.title}`, async () => {
14 | const validate = zschema.validateSchema(schema);
15 | expect(validate).to.be.true;
16 | });
17 | });
18 | });
19 |
--------------------------------------------------------------------------------
/packages/migrations/src/migrations/index.ts:
--------------------------------------------------------------------------------
1 | import { UpgradeFunction } from './types.js';
2 | import { compareVersions } from 'compare-versions';
3 | import { removePositionAnnotations } from './removePositionAnnotations.js';
4 | import { removeRedundantInputValues } from './removeRedundantInputValues.js';
5 |
6 | export const lookup: Record = {
7 | '0.9.11': removeRedundantInputValues,
8 | '0.9.12': removePositionAnnotations
9 | };
10 |
11 | export const sortedUpgrades = Object.entries(lookup).sort((a, b) =>
12 | compareVersions(a[0], b[0])
13 | );
14 |
--------------------------------------------------------------------------------
/packages/nodes-audio/src/capabilities/web.ts:
--------------------------------------------------------------------------------
1 | import type { CapabilityFactory, Graph } from '@tokens-studio/graph-engine';
2 | /**
3 | * A factory to return the AudioContext
4 | * @returns
5 | */
6 | export const WebAudioCapability: CapabilityFactory = {
7 | name: 'web-audio',
8 | register: (graph: Graph) => {
9 | const ctx = new AudioContext();
10 |
11 | graph.on('stop', () => ctx.suspend());
12 | graph.on('pause', () => ctx.suspend());
13 | graph.on('start', () => ctx.resume());
14 | graph.on('resume', () => ctx.resume());
15 |
16 | return ctx;
17 | }
18 | };
19 |
--------------------------------------------------------------------------------
/packages/vscode-extension/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite';
2 | import react from '@vitejs/plugin-react-swc';
3 |
4 | import tsconfigPaths from 'vite-tsconfig-paths';
5 |
6 | // https://vitejs.dev/config/
7 | export default defineConfig({
8 | server: {
9 | port: 3000,
10 | },
11 | build: {
12 | target: 'es2015',
13 | manifest: true,
14 | outDir: '../../build',
15 | emptyOutDir: true, // also necessary
16 | },
17 | mode: 'development',
18 | root: 'app/src',
19 | plugins: [react({ tsDecorators: true }), tsconfigPaths()],
20 | });
21 |
--------------------------------------------------------------------------------
/packages/graph-editor/src/components/hotKeys/utils.ts:
--------------------------------------------------------------------------------
1 | export function focusReactFlowPane(containerSelector?: string) {
2 | setTimeout(() => {
3 | let rfPane;
4 |
5 | if (containerSelector) {
6 | const container = document.querySelector(containerSelector);
7 | if (container) {
8 | rfPane = container.querySelector('.react-flow__pane');
9 | }
10 | }
11 |
12 | if (rfPane && rfPane instanceof HTMLElement) {
13 | // make the pane focusable
14 | rfPane.setAttribute('tabIndex', '0');
15 | rfPane.focus();
16 | }
17 | });
18 | }
19 |
--------------------------------------------------------------------------------
/packages/graph-editor/src/components/controls/floatCurve.tsx:
--------------------------------------------------------------------------------
1 | import { FloatCurveEditor } from '../floatCurveEditor/index.js';
2 | import { IField } from './interface.js';
3 | import { Input } from '@tokens-studio/graph-engine';
4 | import { observer } from 'mobx-react-lite';
5 | import React from 'react';
6 |
7 | export const FloatCurveField = observer(({ port, readOnly }: IField) => {
8 | const onChange = (curve) => {
9 | if (!readOnly) {
10 | (port as Input).setValue(curve);
11 | }
12 | };
13 | return ;
14 | });
15 |
--------------------------------------------------------------------------------
/packages/graph-editor/src/components/menubar/index.stories.tsx:
--------------------------------------------------------------------------------
1 | import { MenuBar } from './index.js';
2 | import { defaultMenuDataFactory } from './defaults.js';
3 | import React from 'react';
4 | import type { Meta, StoryObj } from '@storybook/react';
5 |
6 | const meta: Meta = {
7 | title: 'Components/MenuBar',
8 | component: MenuBar,
9 | };
10 |
11 | const menu = defaultMenuDataFactory();
12 |
13 | export default meta;
14 | type Story = StoryObj;
15 | export const Default: Story = {
16 | render: () => ,
17 | args: {},
18 | };
19 |
--------------------------------------------------------------------------------
/packages/graph-editor/src/redux/models/refs.ts:
--------------------------------------------------------------------------------
1 | import { MutableRefObject } from 'react';
2 | import { RootModel } from './root.js';
3 | import { createModel } from '@rematch/core';
4 |
5 | export interface RefState {
6 | [key: string]: MutableRefObject;
7 | }
8 |
9 | export const refState = createModel()({
10 | state: {} as RefState,
11 | reducers: {
12 | setRef(state, payload: { key: string; value: MutableRefObject }) {
13 | return {
14 | ...state,
15 | [payload.key]: payload.value,
16 | };
17 | },
18 | },
19 | });
20 |
--------------------------------------------------------------------------------
/packages/nodes-design-tokens/src/ui/icons/token.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export function TokenIcon() {
4 | return (
5 |
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/packages/graph-editor/.storybook/preview.module.css:
--------------------------------------------------------------------------------
1 | .themeBlock {
2 | position: absolute;
3 | top: 0;
4 | right: 0;
5 | height: 100%;
6 | width: 50%;
7 | bottom: 0;
8 | overflow: auto;
9 | background: var(--color-neutral-canvas-default-bg);
10 | display: flex;
11 | }
12 |
13 | .themeBlock.fill {
14 | left: 0;
15 | width: 100%;
16 | }
17 |
18 | .themeBlock.left {
19 | border-right: 1px solid var(--stroke-subtle);
20 | right: 50%;
21 | left: 0;
22 | }
23 |
24 | .inner {
25 | padding: 1rem;
26 | display: flex;
27 | align-items: flex-start;
28 | width: 100%;
29 | }
--------------------------------------------------------------------------------
/packages/nodes-previews/src/token/table/node.ts:
--------------------------------------------------------------------------------
1 | import { Node } from '@tokens-studio/graph-engine';
2 | import { TokenSchema } from '@tokens-studio/graph-engine-nodes-design-tokens';
3 | import { arrayOf } from '../../utils/index.js';
4 |
5 | export default class NodeDefinition extends Node {
6 | static title = 'Token Table';
7 | static type = 'studio.tokens.previews.tokens.table';
8 | static description = 'Displays tokens in a table format';
9 |
10 | constructor(props) {
11 | super(props);
12 |
13 | this.addInput('tokens', {
14 | type: arrayOf(TokenSchema)
15 | });
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/.gimlet/k8s/graph-engine/values.yaml:
--------------------------------------------------------------------------------
1 | onechart:
2 | containerPort: 3000
3 | replicas: 1
4 | resources:
5 | ignoreLimits: true
6 |
7 | ## @param postgresql.secret The secret to reference
8 | ## @param postgresql.owner The owner of the database
9 | ## @param postgresql.database Name for a custom database to create.
10 | ## @param postgresql.superUser The name of the secret for the superuser
11 | ##
12 | postgresql:
13 | enabled: false
14 | # secret: db-graph-engine-secrets
15 | owner: nextjs
16 | database: graphengine
17 | cluster: graphengine
18 | # superUser: superuser-secret
19 |
--------------------------------------------------------------------------------
/adrs/0001-strong-typing.md:
--------------------------------------------------------------------------------
1 | # Strong Typing
2 |
3 | ## Context and Problem Statement
4 |
5 | Inputs and outputs should be strongly typed for users with typescript, etc , but also to enable automatic type conversions between nodes and to limit connections.
6 |
7 | Typing has to be runtime because of the dynamic nature of the graph engine.
8 |
9 | Typing should follow the declarative model we have, but it also needs to support dynamic inputs
10 |
11 | ## Considered Options
12 |
13 | - None
14 |
15 | ## Decision Outcome
16 |
17 | Chosen option: "None", because No choice has been decided as of yet
18 |
--------------------------------------------------------------------------------
/packages/graph-engine/tests/suites/nodes/string/split.test.ts:
--------------------------------------------------------------------------------
1 | import { Graph } from '../../../../src/graph/graph.js';
2 | import { describe, expect, test } from 'vitest';
3 | import Node from '../../../../src/nodes/string/split.js';
4 |
5 | describe('string/split', () => {
6 | test('splits a string as expected', async () => {
7 | const graph = new Graph();
8 | const node = new Node({ graph });
9 |
10 | node.inputs.value.setValue('HHH');
11 | node.inputs.value.setValue('H,H,H');
12 | await node.execute();
13 | expect(node.outputs.value.value).to.eql(['H', 'H', 'H']);
14 | });
15 | });
16 |
--------------------------------------------------------------------------------
/packages/graph-editor/src/components/panels/legend/story.stories.tsx:
--------------------------------------------------------------------------------
1 | import { LegendInner } from './index.js';
2 | import { icons } from '@/registry/icon.js';
3 | import React from 'react';
4 | import type { Meta, StoryObj } from '@storybook/react';
5 |
6 | const meta: Meta = {
7 | title: 'Panels/Legend',
8 | component: LegendInner,
9 | };
10 | const iconsRegistry = icons();
11 |
12 | export default meta;
13 | type Story = StoryObj;
14 | export const Default: Story = {
15 | render: () => ,
16 | args: {},
17 | };
18 |
--------------------------------------------------------------------------------
/packages/graph-engine/src/nodes/preview/number.ts:
--------------------------------------------------------------------------------
1 | import { Node } from '../../programmatic/node.js';
2 | import { NumberSchema } from '../../schemas/index.js';
3 |
4 | export default class NodeDefinition extends Node {
5 | static title = 'Number';
6 | static type = 'studio.tokens.preview.number';
7 |
8 | static description = 'Previews a number';
9 |
10 | constructor(props) {
11 | super(props);
12 |
13 | this.addInput('value', {
14 | type: { ...NumberSchema, default: 0 }
15 | });
16 |
17 | this.addInput('precision', {
18 | type: { ...NumberSchema, default: 2 }
19 | });
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/packages/graph-editor/postcss.config.js:
--------------------------------------------------------------------------------
1 | import autoprefixer from 'autoprefixer';
2 | import cssnano from 'cssnano';
3 | import postcssImport from 'postcss-import';
4 | import postcssNested from 'postcss-nested';
5 | import postcssPresetEnv from 'postcss-preset-env';
6 |
7 | export default {
8 | plugins: [
9 | postcssImport({
10 | filter: (url) => {
11 | if (url.startsWith('.')) {
12 | return true;
13 | }
14 | return false;
15 | },
16 | }),
17 | postcssNested(),
18 | postcssPresetEnv(),
19 | autoprefixer(),
20 | cssnano(),
21 | ],
22 | };
23 |
--------------------------------------------------------------------------------
/packages/graph-editor/scripts/extractVersion.mjs:
--------------------------------------------------------------------------------
1 | import fs from 'fs/promises';
2 | import path from 'path';
3 |
4 |
5 | async function extractVersion() {
6 | const raw = await fs.readFile('./package.json');
7 | const packageJson = JSON.parse(raw);
8 | const version = packageJson.version;
9 | const filePath = path.join( 'src', 'data', 'version.ts');
10 | const fileContent = `export const version = '${version}';\n`;
11 |
12 | await fs.writeFile(filePath, fileContent);
13 | console.log(`Updated version to ${version} in ${filePath}`);
14 |
15 | }
16 |
17 |
18 | extractVersion();
19 |
--------------------------------------------------------------------------------
/packages/graph-editor/src/components/flow/nodes/loadingNode.tsx:
--------------------------------------------------------------------------------
1 | import { Spinner, Stack, Text } from '@tokens-studio/ui';
2 | import NodeWrapper from '../wrapper/base.js';
3 | import React from 'react';
4 |
5 | export const LoadingNode = ({ id }) => {
6 | return (
7 |
8 |
14 |
15 | Loading...
16 |
17 |
18 | );
19 | };
20 |
--------------------------------------------------------------------------------
/packages/graph-editor/src/components/preview/mathExpression.stories.tsx:
--------------------------------------------------------------------------------
1 | import { MathExpression } from './mathExpression.js';
2 | import React from 'react';
3 | import type { Meta, StoryObj } from '@storybook/react';
4 |
5 | const meta: Meta = {
6 | title: 'Components/Preview/MathExpression',
7 | component: MathExpression,
8 | };
9 |
10 | export default meta;
11 | type Story = StoryObj;
12 | export const Default: Story = {
13 | render: () => {
14 | return ;
15 | },
16 | args: {},
17 | };
18 |
--------------------------------------------------------------------------------
/packages/nodes-previews/src/token/dimension/node.ts:
--------------------------------------------------------------------------------
1 | import { Node } from '@tokens-studio/graph-engine';
2 | import { TokenSchema } from '@tokens-studio/graph-engine-nodes-design-tokens';
3 | import { arrayOf } from '../../utils/index.js';
4 |
5 | export default class NodeDefinition extends Node {
6 | static title = 'Dimension Scale';
7 | static type = 'studio.tokens.previews.tokens.dimension';
8 | static description = 'Previews a scale of dimension tokens';
9 |
10 | constructor(props) {
11 | super(props);
12 |
13 | this.addInput('scale', {
14 | type: arrayOf(TokenSchema)
15 | });
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/packages/ui/src/components/toast.tsx:
--------------------------------------------------------------------------------
1 | import { toast } from '@tokens-studio/ui/Toast.js';
2 | import React from 'react';
3 |
4 | export interface TriggeredToastProps {
5 | description: string;
6 | title: string;
7 | children: React.ReactNode;
8 | }
9 |
10 | export const TriggeredToast = React.forwardRef((props, ref) => {
11 | React.useImperativeHandle(ref, () => ({
12 | publish: (props: TriggeredToastProps) => {
13 | toast(props.title, {
14 | description: props.description
15 | });
16 | }
17 | }));
18 |
19 | return null;
20 | });
21 |
22 | TriggeredToast.displayName = 'TriggeredToast';
23 |
--------------------------------------------------------------------------------
/packages/graph-editor/src/hooks/useRegisterRef.ts:
--------------------------------------------------------------------------------
1 | import { MutableRefObject, useCallback, useRef } from 'react';
2 | import { useDispatch } from './useDispatch.js';
3 |
4 | export const useRegisterRef = (name: string): ((x: T) => void) => {
5 | const dispatch = useDispatch();
6 |
7 | const ref = useRef() as MutableRefObject;
8 |
9 | const register = useCallback(
10 | (value) => {
11 | ref.current = value;
12 | dispatch.refs.setRef({
13 | key: name,
14 | value: ref,
15 | });
16 | },
17 | [dispatch, name],
18 | );
19 |
20 | return register;
21 | };
22 |
--------------------------------------------------------------------------------
/packages/graph-engine/src/nodes/preview/mathExpression.ts:
--------------------------------------------------------------------------------
1 | import { Node } from '../../programmatic/node.js';
2 | import { StringSchema } from '../../schemas/index.js';
3 |
4 | export default class NodeDefinition extends Node {
5 | static title = 'Math Expression';
6 | static type = 'studio.tokens.preview.mathExpression';
7 |
8 | static description = 'Visualize a math expression';
9 |
10 | static annotations: Record = {
11 | deprecated: true
12 | };
13 |
14 | constructor(props) {
15 | super(props);
16 |
17 | this.addInput('value', {
18 | type: StringSchema
19 | });
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/packages/ui/src/styles/styles.css:
--------------------------------------------------------------------------------
1 | #__next {
2 | height: 100%;
3 | }
4 |
5 | html,
6 | body {
7 | max-width: 100vw;
8 | overflow-x: hidden;
9 | margin: 0;
10 | padding:0;
11 | }
12 |
13 | a {
14 | text-decoration: none;
15 | color: inherit;
16 | }
17 |
18 | body {
19 | height: 100vh;
20 | color: var(--color-neutral-canvas-default-fg-default);
21 | background: var(--color-neutral-canvas-default-bg);
22 | overscroll-behavior-x: none; /* Prevent browser back/forward navigation */
23 | }
24 |
25 |
26 | @media (prefers-color-scheme: dark) {
27 | html {
28 | color-scheme: dark;
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/packages/graph-engine/tests/suites/nodes/string/join.test.ts:
--------------------------------------------------------------------------------
1 | import { Graph } from '../../../../src/graph/graph.js';
2 | import { describe, expect, test } from 'vitest';
3 | import Node from '../../../../src/nodes/string/join.js';
4 |
5 | describe('string/join', () => {
6 | test('should join the string array correctly', async () => {
7 | const graph = new Graph();
8 | const node = new Node({ graph });
9 |
10 | node.inputs.array.setValue(['a', 'b', 'c']);
11 | node.inputs.delimiter.setValue(',');
12 |
13 | await node.execute();
14 |
15 | expect(node.outputs.value.value).to.equal('a,b,c');
16 | });
17 | });
18 |
--------------------------------------------------------------------------------
/packages/nodes-previews/src/token/typography/node.ts:
--------------------------------------------------------------------------------
1 | import { Node } from '@tokens-studio/graph-engine';
2 | import { TokenSchema } from '@tokens-studio/graph-engine-nodes-design-tokens';
3 | import { arrayOf } from '../../utils/index.js';
4 |
5 | export default class NodeDefinition extends Node {
6 | static title = 'Typography Preview';
7 | static type = 'studio.tokens.previews.tokens.typography';
8 | static description = 'Displays typography tokens with visual preview';
9 |
10 | constructor(props) {
11 | super(props);
12 |
13 | this.addInput('tokens', {
14 | type: arrayOf(TokenSchema)
15 | });
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/packages/graph-editor/cypress/e2e/nodes.cy.ts:
--------------------------------------------------------------------------------
1 | describe('Nodes', () => {
2 | it('can create a node from the drop panel', () => {
3 | cy.visit('/');
4 | cy.waitForReact(2000);
5 | //Open the first group
6 | cy.react('DropPanel').should('exist');
7 | cy.react('DropPanel').react('Styled.AccordionTrigger').first().click();
8 | cy.react('DragItem')
9 | .first()
10 | .drag('[data-testid="rf__wrapper"]')
11 | .then((success) => {
12 | assert.isTrue(success);
13 | });
14 | // A node should have been created
15 | cy.get('.react-flow__node').should('exist');
16 | });
17 | });
18 |
--------------------------------------------------------------------------------
/packages/graph-editor/src/redux/selectors/ui.ts:
--------------------------------------------------------------------------------
1 | import { createSelector } from 'reselect';
2 | import { ui } from './roots.js';
3 |
4 | export const showNodesCmdPaletteSelector = createSelector(
5 | ui,
6 | (state) => state.showNodesCmdPalette,
7 | );
8 |
9 | export const storeNodeInsertPositionSelector = createSelector(
10 | ui,
11 | (state) => state.storeNodeInsertPosition,
12 | );
13 |
14 | export const contextMenuSelector = createSelector(
15 | ui,
16 | (state) => state.contextMenus,
17 | );
18 |
19 | export const currentFlowSelector = createSelector(
20 | ui,
21 | (state) => state.currentReactFlow,
22 | );
23 |
--------------------------------------------------------------------------------
/packages/graph-editor/examples/barebones/readme.md:
--------------------------------------------------------------------------------
1 | # Barebones example
2 |
3 | In this example we show the bare minimum of having an editable graph. No menu is shown, or any other controls exposed.
4 |
5 | The basics of the layout is provided by selecting an initial layout and passing it through.
6 |
7 | We override the default set of nodes exposed from the engine to pass in our own.
8 |
9 | ## To run
10 |
11 | 1. Ensure the graph editor is built. This can be done by running `npm run dev:ui` in the root of the monorepo as the side effect of this build the graph-editor package
12 |
13 | 2. Execute `npm run dev` within this folder.
14 |
--------------------------------------------------------------------------------
/packages/graph-editor/examples/defaults/readme.md:
--------------------------------------------------------------------------------
1 | # Barebones example
2 |
3 | In this example we show the bare minimum of having an editable graph. No menu is shown, or any other controls exposed.
4 |
5 | The basics of the layout is provided by selecting an initial layout and passing it through.
6 |
7 | We override the default set of nodes exposed from the engine to pass in our own.
8 |
9 | ## To run
10 |
11 | 1. Ensure the graph editor is built. This can be done by running `npm run dev:ui` in the root of the monorepo as the side effect of this build the graph-editor package
12 |
13 | 2. Execute `npm run dev` within this folder.
14 |
--------------------------------------------------------------------------------
/patches/react-virtualized+9.22.5.patch:
--------------------------------------------------------------------------------
1 | diff --git a/node_modules/react-virtualized/dist/es/WindowScroller/utils/onScroll.js b/node_modules/react-virtualized/dist/es/WindowScroller/utils/onScroll.js
2 | index d00f0f1..c8496e8 100644
3 | --- a/node_modules/react-virtualized/dist/es/WindowScroller/utils/onScroll.js
4 | +++ b/node_modules/react-virtualized/dist/es/WindowScroller/utils/onScroll.js
5 | @@ -71,4 +71,3 @@ export function unregisterScrollListener(component, element) {
6 | }
7 | }
8 | }
9 | \ No newline at end of file
10 | -import { bpfrpt_proptype_WindowScroller } from "../WindowScroller.js";
11 | \ No newline at end of file
12 |
--------------------------------------------------------------------------------
/packages/graph-engine/src/nodes/series/index.ts:
--------------------------------------------------------------------------------
1 | import alternating from './alternating.js';
2 | import arithmetic from './arithmetic.js';
3 | import exponentialDecay from './exponentialDecay.js';
4 | import fibonacci from './fibonacci.js';
5 | import geometric from './geometric.js';
6 | import harmonic from './harmonic.js';
7 | import inverseLinear from './inverseLinear.js';
8 | import linear from './linear.js';
9 | import power from './power.js';
10 |
11 | export const nodes = [
12 | alternating,
13 | arithmetic,
14 | exponentialDecay,
15 | fibonacci,
16 | geometric,
17 | harmonic,
18 | inverseLinear,
19 | linear,
20 | power
21 | ];
22 |
--------------------------------------------------------------------------------
/packages/nodes-image/src/nodes/base.ts:
--------------------------------------------------------------------------------
1 | import { Image } from "../schemas/types.js";
2 | import { Node } from "@tokens-studio/graph-engine";
3 | import type { ImageMagick } from "@imagemagick/magick-wasm";
4 |
5 | export class BaseNode extends Node {
6 | static annotations = {
7 | "engine.capability.imageMagick": true,
8 | };
9 | getImageMagick(): typeof ImageMagick {
10 | return this.getGraph().capabilities["imageMagick"];
11 | }
12 |
13 | cloneImage = (image: ImageData | Image) => {
14 | const dst = new Uint8Array(image.data.byteLength);
15 | dst.set(new Uint8Array(image.data));
16 | return dst;
17 | };
18 | }
19 |
--------------------------------------------------------------------------------
/packages/graph-editor/src/components/panels/dropPanel/story.stories.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | DropPanel,
3 | DropPanelInner,
4 | defaultPanelGroupsFactory,
5 | } from './index.js';
6 | import React from 'react';
7 | import type { Meta, StoryObj } from '@storybook/react';
8 |
9 | const meta: Meta = {
10 | title: 'Panels/DropPanel',
11 | component: DropPanel,
12 | };
13 |
14 | const defaultPanelItems = defaultPanelGroupsFactory();
15 |
16 | export default meta;
17 | type Story = StoryObj;
18 | export const Default: Story = {
19 | render: () => ,
20 | args: {},
21 | };
22 |
--------------------------------------------------------------------------------
/packages/graph-editor/src/editor/graphEditor.tsx:
--------------------------------------------------------------------------------
1 | import { EditorApp } from './graph.js';
2 | import { GraphEditorProps, ImperativeEditorRef } from './editorTypes.js';
3 | import { ReactFlowProvider } from 'reactflow';
4 | import React from 'react';
5 |
6 | /**
7 | * Each graph editor instance is wrapped in a ReactFlowProvider to provide the necessary context for the graph editor.
8 | */
9 | export const GraphEditor = React.forwardRef<
10 | ImperativeEditorRef,
11 | GraphEditorProps
12 | >((props, ref) => {
13 | return (
14 |
15 |
16 |
17 | );
18 | });
19 |
--------------------------------------------------------------------------------
/packages/ui/src/api/middleware.ts/auth.ts:
--------------------------------------------------------------------------------
1 | import { type ExtendedRequest } from '../utils/types.ts';
2 | import { auth } from '@/auth/index.ts';
3 |
4 | export const authMiddleware = async (
5 | req: ExtendedRequest
6 | ): Promise => {
7 | const session = await auth();
8 | if (!session) {
9 | return Response.json(
10 | {},
11 | {
12 | status: 401
13 | }
14 | );
15 | }
16 | req.session = session;
17 | req.user = session.user!.id!;
18 |
19 | //Ensure that the id can never be falsy
20 | if (!req.user) {
21 | return Response.json(
22 | {},
23 | {
24 | status: 401
25 | }
26 | );
27 | }
28 | };
29 |
--------------------------------------------------------------------------------
/packages/graph-editor/src/hooks/useSelectAddedNodes.tsx:
--------------------------------------------------------------------------------
1 | import { Node, useReactFlow } from 'reactflow';
2 |
3 | export const useSelectAddedNodes = () => {
4 | const reactFlowInstance = useReactFlow();
5 |
6 | const selectAddedNodes = (newNodes: Node[]) => {
7 | reactFlowInstance.setNodes((nds) => {
8 | return [
9 | ...nds.map((node) => {
10 | node.selected = false;
11 | return node;
12 | }),
13 | ...newNodes.map((flowNode) => {
14 | flowNode.selected = true;
15 | return flowNode;
16 | }),
17 | ];
18 | });
19 | };
20 |
21 | return selectAddedNodes;
22 | };
23 |
--------------------------------------------------------------------------------
/packages/graph-engine/src/nodes/curves/index.ts:
--------------------------------------------------------------------------------
1 | import bezier from './bezier.js';
2 | import constructFloatCurve from './constructFloatCurve.js';
3 | import deconstructFloatCurve from './deconstructFloatCurve.js';
4 | import flipFloatCurve from './flipFloatCurve.js';
5 | import floatCurve from './floatCurve.js';
6 | import presetBezier from './presetBeziers.js';
7 | import sample from './sample.js';
8 | import sampleFloatCurve from './sampleFloatCurve.js';
9 |
10 | export const nodes = [
11 | bezier,
12 | floatCurve,
13 | presetBezier,
14 | sample,
15 | deconstructFloatCurve,
16 | flipFloatCurve,
17 | constructFloatCurve,
18 | sampleFloatCurve
19 | ];
20 |
--------------------------------------------------------------------------------
/packages/nodes-image/src/capabilities/imageMagick.ts:
--------------------------------------------------------------------------------
1 | import { ImageMagick, initializeImageMagick } from "@imagemagick/magick-wasm";
2 | import { load } from "./wasmLoader.js";
3 | import type { CapabilityFactory } from "@tokens-studio/graph-engine";
4 | /**
5 | * A factory to return the ImageMagick capability
6 | * @returns
7 | */
8 | export const ImageCapability: CapabilityFactory = {
9 | name: "imageMagick",
10 | register: async () => {
11 | const wasmBytes = await load("@imagemagick/magick-wasm/magick.wasm", {
12 | autoResolve: true,
13 | });
14 | await initializeImageMagick(wasmBytes);
15 | return ImageMagick;
16 | },
17 | };
18 |
--------------------------------------------------------------------------------
/packages/storybook-lit/src/assets/lit.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/packages/graph-editor/cypress.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'cypress';
2 |
3 | export default defineConfig({
4 | experimentalStudio: true,
5 | projectId: 'op7qiw',
6 | env: {
7 | 'cypress-react-selector': {
8 | root: '#__cy_root',
9 | },
10 | },
11 |
12 | e2e: {
13 | baseUrl: 'http://localhost:3001',
14 | // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-undef
15 | setupNodeEvents(on, config) {
16 | // implement node event listeners here
17 | },
18 | },
19 |
20 | component: {
21 | devServer: {
22 | framework: 'react',
23 | bundler: 'vite',
24 | },
25 | },
26 | });
27 |
--------------------------------------------------------------------------------
/packages/graph-engine/src/capabilities/secret.ts:
--------------------------------------------------------------------------------
1 | import { CapabilityFactory } from '../graph/index.js';
2 |
3 | export type SecretConfig = {
4 | secret: string;
5 | key: string;
6 | };
7 |
8 | export interface SecretCapability {
9 | getSecret(config: SecretConfig): Promise;
10 | }
11 |
12 | /**
13 | * This is a dummy factory that shows how to suport the secret capability
14 | * @returns
15 | */
16 | export const SecretCapability: CapabilityFactory = {
17 | name: 'secret',
18 | register: () => {
19 | const ctx = {
20 | getSecret: async () => {
21 | return '';
22 | }
23 | } as SecretCapability;
24 |
25 | return ctx;
26 | }
27 | };
28 |
--------------------------------------------------------------------------------
/packages/graph-engine/tests/suites/nodes/css/box.test.ts:
--------------------------------------------------------------------------------
1 | import { Graph } from '../../../../src/graph/graph.js';
2 | import { describe, expect, test } from 'vitest';
3 | import Node from '../../../../src/nodes/css/box.js';
4 |
5 | describe('css/box', () => {
6 | test('produces the css box descriptionbs', async () => {
7 | const graph = new Graph();
8 | const node = new Node({ graph });
9 |
10 | node.inputs.top.setValue(5);
11 | node.inputs.right.setValue(6);
12 | node.inputs.bottom.setValue(3);
13 | node.inputs.left.setValue(4);
14 |
15 | await node.execute();
16 |
17 | expect(node.outputs.value.value).to.equal('5 6 3 4');
18 | });
19 | });
20 |
--------------------------------------------------------------------------------
/packages/migrations/readme.md:
--------------------------------------------------------------------------------
1 | # Graph Engine migration
2 |
3 |  
4 |
5 | This project exposes controls for updating old graphs to the latest version that the graph-engine supports.
6 |
7 | Use as follows
8 |
9 | ```ts
10 | import type { SerializedGraph } from '@tokens-studio/graph-engine';
11 | import { updateGraph } from '@tokens-studio/graph-engine-migration';
12 |
13 | const myGraph: SerializedGraph = {
14 | /**... */
15 | };
16 |
17 | const updatedGraph = await updateGraph(myGraph);
18 | ```
19 |
--------------------------------------------------------------------------------
/packages/storybook-lit/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ES2020",
4 | "experimentalDecorators": true,
5 | "useDefineForClassFields": false,
6 | "module": "ESNext",
7 | "lib": ["ES2020", "DOM", "DOM.Iterable"],
8 | "skipLibCheck": true,
9 |
10 | /* Bundler mode */
11 | "moduleResolution": "bundler",
12 | "allowImportingTsExtensions": true,
13 | "resolveJsonModule": true,
14 | "isolatedModules": true,
15 | "noEmit": true,
16 |
17 | /* Linting */
18 | "strict": true,
19 | "noUnusedLocals": true,
20 | "noUnusedParameters": true,
21 | "noFallthroughCasesInSwitch": true
22 | },
23 | "include": ["src"]
24 | }
25 |
--------------------------------------------------------------------------------
/packages/ui/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | **/node_modules/**
5 | **/dist/**
6 | /.pnp
7 | .pnp.js
8 |
9 | # JetBrains IDE files
10 | .idea/
11 |
12 | # testing
13 | /coverage
14 |
15 | # next.js
16 | /.next/
17 | /out/
18 |
19 | # production
20 | /build
21 |
22 | # misc
23 | .DS_Store
24 | *.pem
25 |
26 | # debug
27 | npm-debug.log*
28 | yarn-debug.log*
29 | yarn-error.log*
30 | .pnpm-debug.log*
31 |
32 | # local env files
33 | .env*.local
34 |
35 | # vercel
36 | .vercel
37 |
38 | # typescript
39 | *.tsbuildinfo
40 | next-env.d.ts
41 | docs/**
42 | .turbo
43 |
44 |
--------------------------------------------------------------------------------
/packages/graph-editor/src/components/toolbar/index.stories.tsx:
--------------------------------------------------------------------------------
1 | import { GraphToolbar } from './index.js';
2 | import { ReactFlowProvider } from 'reactflow';
3 | import React from 'react';
4 | import type { Meta, StoryObj } from '@storybook/react';
5 |
6 | const meta: Meta = {
7 | title: 'Components/Graph Toolbar',
8 | component: GraphToolbar,
9 | };
10 |
11 | export default meta;
12 | type Story = StoryObj;
13 | export const Default: Story = {
14 | render: () => {
15 | return (
16 |
17 |
18 |
19 | );
20 | },
21 | args: {},
22 | };
23 |
--------------------------------------------------------------------------------
/packages/nodes-previews/src/token/table/panel.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | padding: var(--component-spacing-md);
3 | width: 100%;
4 | height: 100%;
5 | overflow: auto;
6 | display: flex;
7 | flex-direction: column;
8 | gap: var(--component-spacing-md);
9 | }
10 |
11 | .table {
12 | width: 100%;
13 | border-collapse: collapse;
14 | font: var(--font-code-md);
15 | }
16 |
17 | .table th,
18 | .table td {
19 | padding: var(--component-spacing-md);
20 | text-align: left;
21 | border-bottom: var(--component-border-width-sm) solid var(--color-neutral-canvas-default-border-default);
22 | }
23 |
24 | .table th {
25 | font: var(--font-body-md-bold);
26 | }
--------------------------------------------------------------------------------
/.gimlet/k8s/graph-engine/templates/db.yaml:
--------------------------------------------------------------------------------
1 | {{- if and .Values.postgresql.enabled -}}
2 | apiVersion: postgresql.cnpg.io/v1
3 | kind: Cluster
4 | metadata:
5 | name: {{ .Values.postgresql.cluster }}
6 | namespace: {{ .Release.Namespace }}
7 | spec:
8 | instances: 1
9 | superuserSecret:
10 | name: {{ .Values.postgresql.superUser | quote }}
11 | bootstrap:
12 | initdb:
13 | database: {{ .Values.postgresql.database | quote }}
14 | owner: {{ .Values.postgresql.owner | quote }}
15 | secret:
16 | name: {{ .Values.postgresql.secret | quote }}
17 | monitoring:
18 | enablePodMonitor: true
19 | storage:
20 | size: 5Gi
21 | {{- end -}}
--------------------------------------------------------------------------------
/packages/documentation/src/theme/MDXContent/index.tsx:
--------------------------------------------------------------------------------
1 | import MDXContent from '@theme-original/MDXContent';
2 | import React from 'react';
3 | import type { WrapperProps } from '@docusaurus/types';
4 | import type MDXContentType from '@theme/MDXContent';
5 |
6 | type Props = WrapperProps;
7 |
8 | export default function MDXContentWrapper(props: Props): JSX.Element {
9 | return (
10 | <>
11 | {/* TODO remove */}
12 | {/* Needed for injection of appropriate styles from the editor due to some of them being scoped internally by stitches*/}
13 |
14 |
15 |
16 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/packages/graph-editor/src/components/controls/boolean.tsx:
--------------------------------------------------------------------------------
1 | import { Checkbox } from '@tokens-studio/ui/Checkbox.js';
2 | import { IField } from './interface.js';
3 | import { Input } from '@tokens-studio/graph-engine';
4 | import { observer } from 'mobx-react-lite';
5 | import React, { useCallback } from 'react';
6 |
7 | export const BooleanField = observer(({ port, readOnly }: IField) => {
8 | const onChange = useCallback(
9 | (checked) => {
10 | if (!readOnly) {
11 | (port as Input).setValue(checked);
12 | }
13 | },
14 | [port, readOnly],
15 | );
16 |
17 | return ;
18 | });
19 |
--------------------------------------------------------------------------------
/packages/graph-engine/tests/suites/nodes/array/reverse.test.ts:
--------------------------------------------------------------------------------
1 | import { Graph } from '../../../../src/graph/graph.js';
2 | import { describe, expect, test } from 'vitest';
3 | import Node from '../../../../src/nodes/array/reverse.js';
4 |
5 | describe('array/reverse', () => {
6 | test('does a non mutative reverse', async () => {
7 | const graph = new Graph();
8 | const node = new Node({ graph });
9 |
10 | const array = [1, 2, 3];
11 |
12 | node.inputs.array.setValue(array);
13 |
14 | await node.execute();
15 |
16 | expect(node.outputs.value.value).to.eql([3, 2, 1]);
17 | //don't mutate the original array
18 | expect(array).to.eql([1, 2, 3]);
19 | });
20 | });
21 |
--------------------------------------------------------------------------------
/packages/graph-engine/src/nodes/string/index.ts:
--------------------------------------------------------------------------------
1 | import caseConvert from './case.js';
2 | import interpolate from './interpolate.js';
3 | import join from './join.js';
4 | import lowercase from './lowercase.js';
5 | import normalize from './normalize.js';
6 | import pad from './pad.js';
7 | import regex from './regex.js';
8 | import replace from './replace.js';
9 | import split from './split.js';
10 | import stringify from './stringify.js';
11 | import uppercase from './uppercase.js';
12 |
13 | export const nodes = [
14 | interpolate,
15 | join,
16 | caseConvert,
17 | lowercase,
18 | normalize,
19 | pad,
20 | regex,
21 | replace,
22 | split,
23 | stringify,
24 | uppercase
25 | ];
26 |
--------------------------------------------------------------------------------
/packages/vscode-extension/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | // Place your settings in this file to overwrite default and user settings.
2 | {
3 | "files.exclude": {
4 | "out": false, // set this to true to hide the "out" folder with the compiled JS files
5 | "dist": false // set this to true to hide the "dist" folder with the compiled JS files
6 | },
7 | "search.exclude": {
8 | "out": true, // set this to false to include "out" folder in search results
9 | "dist": true // set this to false to include "dist" folder in search results
10 | },
11 | // Turn off tsc task auto detection since we have the necessary tasks as npm scripts
12 | "typescript.tsc.autoDetect": "off"
13 | }
14 |
--------------------------------------------------------------------------------
/packages/ui/src/app/contexts.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { QueryProvider } from '@/api/sdk/provider.tsx';
4 | import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
5 | import { Toaster } from '@tokens-studio/ui/Toast.js';
6 | import { TooltipContainer } from '@tokens-studio/ui';
7 | import React from 'react';
8 |
9 | const inDevEnvironment = !!process && process.env.NODE_ENV === 'development';
10 |
11 | export default function Contexts({ children }) {
12 | return (
13 |
14 | {children}
15 |
16 |
17 | {inDevEnvironment && }
18 |
19 | );
20 | }
21 |
--------------------------------------------------------------------------------
/packages/ui/src/app/thumbnails/[id]/route.ts:
--------------------------------------------------------------------------------
1 | import { NextResponse } from 'next/server.js';
2 | import { prisma } from '@/lib/prisma/index.ts';
3 |
4 | export const GET = async (req, { params }) => {
5 | const { id } = params;
6 |
7 | //Split the id
8 |
9 | const [file, extension] = id.split('.');
10 |
11 | const thumbnail = await prisma.thumbnail.findFirst({
12 | where: {
13 | id: file,
14 | extension
15 | }
16 | });
17 |
18 | if (!thumbnail) {
19 | return new NextResponse('Thumbnail not found', { status: 404 });
20 | }
21 |
22 | const response = new NextResponse(thumbnail.data);
23 | response.headers.set('content-type', thumbnail.type);
24 | return response;
25 | };
26 |
--------------------------------------------------------------------------------
/packages/graph-editor/src/components/preview/colorContrast.stories.tsx:
--------------------------------------------------------------------------------
1 | import { ColorContrast } from './colorContrast.js';
2 | import React from 'react';
3 | import type { Meta, StoryObj } from '@storybook/react';
4 |
5 | const meta: Meta = {
6 | title: 'Components/Preview/ColorContrast',
7 | component: ColorContrast,
8 | };
9 |
10 | export default meta;
11 | type Story = StoryObj;
12 | export const Default: Story = {
13 | render: () => {
14 | return (
15 |
21 | );
22 | },
23 | args: {},
24 | };
25 |
--------------------------------------------------------------------------------
/packages/nodes-previews/src/token/palette/node.ts:
--------------------------------------------------------------------------------
1 | import { Node } from '@tokens-studio/graph-engine';
2 | import { StringSchema } from '@tokens-studio/graph-engine';
3 | import { TokenSetSchema } from '@tokens-studio/graph-engine-nodes-design-tokens';
4 |
5 | export default class NodeDefinition extends Node {
6 | static title = 'Color Palette';
7 | static type = 'studio.tokens.previews.tokens.palette';
8 | static description = 'Displays a color palette with grouped swatches';
9 |
10 | constructor(props) {
11 | super(props);
12 |
13 | this.addInput('tokenSet', {
14 | type: TokenSetSchema
15 | });
16 |
17 | this.addInput('path', {
18 | type: StringSchema
19 | });
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/packages/graph-editor/src/components/index.ts:
--------------------------------------------------------------------------------
1 | export * from './colorPicker/index.js';
2 | export * from './commandPalette/index.js';
3 | export * from './contextMenus/index.js';
4 | export * from './controls/index.js';
5 | export * from './curveEditor/index.js';
6 | export * from './debugger/index.js';
7 | export * from './dialogs/findDialog.js';
8 | export * from './flow/index.js';
9 | export * from './hotKeys/index.js';
10 | export * from './icons/index.js';
11 | export * from './menubar/index.js';
12 | export * from './panels/index.js';
13 | export * from './portPanel/index.js';
14 | export * from './preview/index.js';
15 | export * from './slider/index.js';
16 | export * from './toolbar/index.js';
17 |
--------------------------------------------------------------------------------
/packages/graph-editor/src/components/toolbar/toolbar.cy.tsx:
--------------------------------------------------------------------------------
1 | import { GraphToolbar } from './index.js';
2 | import { Provider } from 'react-redux';
3 | import { ReactFlowProvider } from 'reactflow';
4 | import { TooltipContainer } from '@tokens-studio/ui';
5 | import { store } from '@/redux/store.js';
6 | import React from 'react';
7 |
8 | describe('', () => {
9 | it('renders', () => {
10 | cy.mount(
11 | <>
12 |
13 |
14 |
15 |
16 |
17 |
18 | ,
19 | );
20 | });
21 | });
22 |
--------------------------------------------------------------------------------
/packages/graph-engine/src/graph/terminals.ts:
--------------------------------------------------------------------------------
1 | import { Graph } from './graph.js';
2 | import { Node } from '../programmatic/node.js';
3 |
4 | export type Terminals = {
5 | input?: Node;
6 | output?: Node;
7 | };
8 |
9 | export const findTerminals = (graph: Graph): Terminals => {
10 | const terminals: Terminals = {
11 | input: undefined,
12 | output: undefined
13 | };
14 |
15 | Object.values(graph.nodes).forEach(node => {
16 | switch (node.factory.type) {
17 | case 'studio.tokens.generic.input':
18 | terminals.input = node;
19 | break;
20 | case 'studio.tokens.generic.output':
21 | terminals.output = node;
22 | break;
23 | }
24 | });
25 | return terminals;
26 | };
27 |
--------------------------------------------------------------------------------
/packages/nodes-previews/src/color/swatch/panel.module.css:
--------------------------------------------------------------------------------
1 | .swatch {
2 | --text-light: hsl(from var(--color) h s 95%);
3 | --text-dark: hsl(from var(--color) h s 10%);
4 |
5 | color: color-contrast(var(--color) vs var(--text-light), var(--text-dark));
6 | display: flex;
7 | flex-direction: column;
8 | justify-content: space-between;
9 | width: 100%;
10 | height: 100%;
11 | padding: var(--ui-spacing-xl);
12 |
13 | }
14 |
15 | .colorName {
16 | font: var(--font-display-lg);
17 | }
18 |
19 | .info {
20 | dt {
21 | font: var(--font-body-sm-bold);
22 | text-transform: uppercase;
23 | }
24 | dd {
25 | font: var(--font-code-md);
26 | font-size: var(--size-150);
27 | }
28 | }
--------------------------------------------------------------------------------
/packages/graph-engine/tests/suites/nodes/array/push.test.ts:
--------------------------------------------------------------------------------
1 | import { Graph } from '../../../../src/graph/graph.js';
2 | import { describe, expect, test } from 'vitest';
3 | import Node from '../../../../src/nodes/array/push.js';
4 |
5 | describe('array/push', () => {
6 | test('does a non mutative push', async () => {
7 | const graph = new Graph();
8 | const node = new Node({ graph });
9 |
10 | const array = [1, 2, 3];
11 |
12 | node.inputs.array.setValue(array);
13 | node.inputs.item.setValue(4);
14 |
15 | await node.execute();
16 |
17 | expect(node.outputs.value.value).to.eql([1, 2, 3, 4]);
18 | //don't mutate the original array
19 | expect(array).to.eql([1, 2, 3]);
20 | });
21 | });
22 |
--------------------------------------------------------------------------------
/packages/ui/src/assets/svgs/js.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/packages/graph-editor/src/editor/hooks/useAutolayout.ts:
--------------------------------------------------------------------------------
1 | import { useCallback } from 'react';
2 | import { useSelector } from 'react-redux';
3 |
4 | import { LayoutType } from '@/redux/models/settings.js';
5 | import { layoutType as layoutTypeSelector } from '@/redux/selectors/settings.js';
6 |
7 | import { useDagreLayout } from '@/layouts/dagre.js';
8 |
9 | export const useAutoLayout = () => {
10 | const dagreAutoLayout = useDagreLayout();
11 | const layoutType = useSelector(layoutTypeSelector);
12 |
13 | return useCallback(() => {
14 | switch (layoutType) {
15 | case LayoutType.dagre:
16 | dagreAutoLayout();
17 | break;
18 | }
19 | }, [dagreAutoLayout, layoutType]);
20 | };
21 |
--------------------------------------------------------------------------------
/packages/graph-editor/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | node_modules
5 | .pnp
6 | .pnp.js
7 |
8 | # testing
9 | coverage
10 |
11 | # next.js
12 | .next/
13 | out/
14 | build
15 |
16 | # output
17 | dist
18 |
19 | # storybook
20 | storybook-static/
21 |
22 | # misc
23 | .DS_Store
24 | *.pem
25 |
26 | # debug
27 | npm-debug.log*
28 | yarn-debug.log*
29 | yarn-error.log*
30 | .pnpm-debug.log*
31 |
32 | # local env files
33 | .env.local
34 | .env.development.local
35 | .env.test.local
36 | .env.production.local
37 |
38 | # turbo
39 | .turbo
40 |
41 | graphs/*.pdf
42 |
43 | *.tsbuildinfo
44 | *.rollup.cache
45 |
46 | cypress/screenshots/**
--------------------------------------------------------------------------------
/packages/nodes-fs/tsconfig.prod.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "include": ["src"],
4 | "compilerOptions": {
5 | "incremental": true,
6 | "rootDir": "src",
7 | "module": "NodeNext",
8 | "skipLibCheck": true,
9 | "moduleResolution": "NodeNext",
10 | "plugins": [
11 | {
12 | "transform": "typescript-transform-paths"
13 | },
14 | // Transform paths in output .d.ts files (Include this line if you output declarations files)
15 | {
16 | "transform": "typescript-transform-paths",
17 | "afterDeclarations": true
18 | }
19 | ]
20 | },
21 | "exclude": [
22 | "cypress.config.ts",
23 | "cypress",
24 | "node_modules",
25 | "**/*.stories.tsx",
26 | "**/*.cy.tsx"
27 | ]
28 | }
29 |
--------------------------------------------------------------------------------
/packages/nodes-image/src/nodes/preview.ts:
--------------------------------------------------------------------------------
1 | import { BaseNode } from "./base.js";
2 | import { INodeDefinition, ToInput } from "@tokens-studio/graph-engine";
3 | import { Image } from "../schemas/types.js";
4 | import { ImageSchema } from "../schemas/index.js";
5 |
6 | export class PreviewNode extends BaseNode {
7 | static title = "Preview Image";
8 | static type = "studio.tokens.image.preview";
9 |
10 | declare inputs: ToInput<{
11 | image: Image;
12 | }>;
13 |
14 | static description = "Applies sepia effect to an image.";
15 | constructor(props: INodeDefinition) {
16 | super(props);
17 | this.addInput("image", {
18 | type: ImageSchema,
19 | });
20 | }
21 |
22 | async execute() {}
23 | }
24 |
--------------------------------------------------------------------------------
/packages/graph-engine/tsconfig.prod.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "include": ["src"],
4 | "compilerOptions": {
5 | "incremental": true,
6 | "rootDir": "src",
7 | "module": "NodeNext",
8 | "skipLibCheck": true,
9 | "moduleResolution": "NodeNext",
10 | "plugins": [
11 | {
12 | "transform": "typescript-transform-paths"
13 | },
14 | // Transform paths in output .d.ts files (Include this line if you output declarations files)
15 | {
16 | "transform": "typescript-transform-paths",
17 | "afterDeclarations": true
18 | }
19 | ]
20 | },
21 | "exclude": [
22 | "cypress.config.ts",
23 | "cypress",
24 | "node_modules",
25 | "**/*.stories.tsx",
26 | "**/*.cy.tsx"
27 | ]
28 | }
29 |
--------------------------------------------------------------------------------