Skip to main content

Creating a new component

In this guide, we will walk you through the process of creating a new React component in the Blueprint project. Depending on your needs, you can create either a single app component or a shared component.

App or Shared?​

Before you start, determine whether your component will be used only within the Foundation app or can be shared (e.g. in a package). This will help you decide where to place your component. For example, if your component uses API features that are global across Kraken instances, it should be shared. Conversely, if it is client-specific, such as a custom component for billing information for a particular configuration, it should live in the app.

I need an app component​

  1. Create the component file: Navigate to the appropriate directory within your app (e.g., apps/foundation/src/components) and create a new file for your component (e.g., SampleComponent.tsx). If the component is specific to a feature, navigate to the feature directory (e.g., apps/foundation/src/features/sampleFeature/components).

  2. Write the component code: Implement your component using React and TypeScript. Here is a basic example:

    interface SampleComponentProps {
        title: string;
    }

    const SampleComponent = ({ title }: SampleComponentProps) => {
        return <div>{title}</div>;
    };

    export default SampleComponent;

  3. Use the component: Import and use your new component within your app as needed.

    import SampleComponent from './components/SampleComponent';

    const SampleDestinationComponent = () => {
        return (
            <div>
                <SampleComponent title="Sample title" />
            </div>
        );
    };

    export default SampleDestinationComponent;

I need a shared package component​

  1. Create the component file: Navigate to the appropriate feature directory within the packages directory (e.g., utils/src/components/SampleFeature/components) and create a new file for your component (e.g., SampleSharedComponent.tsx).

  2. Write the component code: Implement your component using React and TypeScript. Here is a basic example:

    interface SampleSharedComponentProps {
        title: string;
    }

    const SampleSharedComponent = ({ title }: SampleSharedComponentProps) => {
        return <div>{title}</div>;
    };

    export default SampleSharedComponent;

  3. Export the component: Ensure your component is exported from the package's entry point (e.g., packages/utils/src/index.ts).

  4. Build the package: Run pnpm build:packages at the root to build the package and ensure your changes are implemented.

  5. Use the component: Import and use your new shared component within any app as needed.

    import { SampleSharedComponent } from '@krakentech/blueprint-utils/client';

    const SampleDestinationComponent = () => {
        return (
            <div>
                <SampleSharedComponent title="Sample title" />
            </div>
        );
    };

    export default SampleDestinationComponent;

By following these steps, you can create and integrate new components into your project, whether they are specific to a single app or shared across multiple apps.