@stoked-ui/complete

This package provides a complete bundle of all the Stoked UI editor-related packages, making it easier to use the full editor stack in your projects.

Installation

npm install @stoked-ui/complete
# or
yarn add @stoked-ui/complete
# or
pnpm add @stoked-ui/complete

Usage

import * as React from 'react';
import { Editor, MediaSelector, FileExplorer, Timeline } from '@stoked-ui/complete';

function App() {
  return (
    <div>
      <Editor />
    </div>
  );
}

Included Packages

This package includes and re-exports:

@stoked-ui/editor - Main editor component
@stoked-ui/file-explorer - File explorer component
@stoked-ui/media-selector - Media selector component
@stoked-ui/timeline - Timeline component
@stoked-ui/common - Common utilities and components

Namespace Exports

To avoid naming conflicts, the packages are exported as namespaces:

import { Editor } from '@stoked-ui/complete'; // Direct export from editor
import { FileExplorer, MediaSelector, Timeline, Common } from '@stoked-ui/complete';

// Use components from namespaces
<FileExplorer.FileExplorerComponent />
<MediaSelector.MediaSelectorComponent />
<Timeline.TimelineComponent />

Types

Common types are also exported directly:

import { EditorState, MediaFile, FileBase, TimelineProps } from '@stoked-ui/complete';

Build Instructions

To rebuild this package from scratch:

Setup Package Directory

mkdir -p packages/sui-complete/src packages/sui-complete/scripts

Create Configuration Files
- package.json: Package configuration with dependencies and scripts
- tsconfig.json: Base TypeScript configuration
- tsconfig.build.json: Build-specific TypeScript configuration
- src/index.ts: Main entry point that re-exports all components
Create Build Scripts
- scripts/build.mjs: Handles transpilation using esbuild for different targets
- scripts/customCopyFiles.mjs: Copies necessary files to the build directory

Make Scripts Executable

chmod +x scripts/build.mjs scripts/customCopyFiles.mjs

Run Build

# Build all versions (modern, node, stable)
node scripts/build.mjs modern
node scripts/build.mjs node
node scripts/build.mjs stable

# Copy files and create package.json for distribution
node scripts/customCopyFiles.mjs

Verify Build
```
ls -la build
```

The build directory will contain all the necessary files for distribution, including transpiled JavaScript files, type declarations, and package metadata.

Quick Rebuild Workflow

If you've made changes to this package or any of its dependencies and need to quickly rebuild:

# From the workspace root (stoked-ui)
pnpm -F @stoked-ui/complete build:no-typesafety

This command will:

Build all JavaScript versions (modern, node, stable)
Copy necessary files to the build directory
Skip type checking to make the build process faster

This is useful during development when you need to quickly test changes without waiting for TypeScript validation.

Bundle Approach

This package provides a truly portable solution for using Stoked UI components:

It includes all Stoked UI editor-related packages as dependencies
When you publish this package, it automatically resolves workspace references to actual version numbers
In your projects, you only need to install this one package - no need to install each component separately

This approach offers several key benefits:

Simplified dependency management - install just one package instead of five or more
Version consistency - all components are guaranteed to work together
Portability - make changes in one place, build, publish, and use anywhere
Streamlined workflow - only need to manage one package instead of multiple packages

Quick Workflow for Updates

When you need to make changes and publish a new version:

Make your changes to the component packages
Run the build process for the modified packages

Update the complete package:

cd packages/sui-complete
pnpm build:no-typesafety

Publish the complete package:
```
cd build
npm publish
```

This creates a self-contained package that you can easily install in other projects with:

npm install @stoked-ui/complete

License

MIT