@uniformdev/design-extensions-tools

@uniformdev/design-extensions-tools is a command-line interface (CLI) tool and a set of utilities for working with design extension integrations. It allows you to manage design tokens, UI components, and configurations efficiently.

Installation

To use @uniformdev/design-extensions-tools, install it as a dependency in your project:

npm install @uniformdev/design-extensions-tools

Setup Instructions

Wrap Pages with DesignExtensionsProvider

Wrap your page using DesignExtensionsProvider from @uniformdev/design-extensions-tools/components/providers/server:

import { cookies } from 'next/headers';
import { notFound } from 'next/navigation';
import {
  createServerUniformContext,
  ContextUpdateTransfer,
  PageParameters,
  UniformComposition,
} from '@uniformdev/canvas-next-rsc';
import { emptyPlaceholderResolver } from '@uniformdev/csk-components/components/canvas/emptyPlaceholders';
import { isRouteWithoutErrors } from '@uniformdev/csk-components/utils/routing';
import { DesignExtensionsProvider } from '@uniformdev/design-extensions-tools/components/providers/server';
import { componentResolver } from '@/components';
import locales from '@/i18n/locales.json';
import retrieveRoute from '@/utils/retrieveRoute';

export default async function Home(props: PageParameters) {
  const route = await retrieveRoute(props, locales.defaultLocale);
  if (!isRouteWithoutErrors(route)) return notFound();

  const cookie = await cookies();
  const theme = cookie.get('theme')?.value || 'light';
  const searchParams = await props.searchParams;
  const serverContext = await createServerUniformContext({
    searchParams,
  });
  const isPreviewMode = searchParams?.preview === 'true';

  return (
    <DesignExtensionsProvider isPreviewMode={isPreviewMode}>
      <ContextUpdateTransfer
        serverContext={serverContext}
        update={{
          quirks: {
            theme,
          },
        }}
      />
      <UniformComposition
        {...props}
        route={route}
        resolveComponent={componentResolver}
        serverContext={serverContext}
        mode="server"
        resolveEmptyPlaceholder={emptyPlaceholderResolver}
      />
    </DesignExtensionsProvider>
  );
}

export { generateMetadata } from '@/utils/metadata';

Commands

pull Command

The pull command fetches design token data from the integration.

Usage

design-extensions-tools pull [options]

Options

• -c, --colors – Pulls colors configuration.
• -d, --dimensions – Pulls dimensions configuration.
• -f, --fonts – Pulls fonts configuration.
• -b, --borders – Pulls borders configuration.
• -g, --groups – Pulls groups configuration.
• -at, --allTokens – Pulls all tokens.
• -as, --allSettings – Pulls all settings.

Example

design-extensions-tools pull --colors --dimensions

push Command

The push command sends design token data to the integration.

Usage

design-extensions-tools push [options]

Options

• -c, --colors – Pushes colors configuration.
• -d, --dimensions – Pushes dimensions configuration.
• -f, --fonts – Pushes fonts configuration.
• -b, --borders – Pushes borders configuration.
• -g, --groups – Pushes groups configuration.
• -at, --allTokens – Pushes all tokens.
• -as, --allSettings – Pushes all settings.

Example

design-extensions-tools push --allTokens