Shared UI components library

The principle of this library is to provide a set of components that can be used across multiple projects, and to ensure that the components are consistent in terms of design and functionality. The components are built using React and styled-components.

Development

This is a public package

It shouldn't have any relation or dependency to Apify internal logic - we want to use it across our repositories and some of them might be public.

Shared logic with web and docs

If you’re changing any shared logic with the web that might affect the behavior, performance, or SEO, you need to always test it on both applications before it’s merged and published as a new version of the packages and after it’s done it’s your duty to make sure there are the latest versions within both repositories.

Purpose and documentation

There should be a clear purpose for each component and the component should be properly documented - both code and storybook.

Architecture design and dependencies

No technology-specific logic. We don’t want to use anything technology or codebase-specific (such as Meteor, React router, Next …) as there might be different approaches for the technology where the component is used (examples as linking logic - in Next.js there is Next Link component, same of Next Image instead of using normal tag). This kind of behavior should not happen on the component level. Browser vs. server - some of the components might be used on the web with SSR (Server Side Renderings) and such a component can’t be using browser-specific features (such as accessing window.location)

Supernova typography tokens update

New supernova typography tokens are available in supernova_typography_tokens.json, specific code is generated with npm run generate-theme command

Color tokens update

We use the Design Tokens Manager Figma plugin to export color tokens from our design files. This tool allows us to convert design-defined color styles into structured token JSON format that developers can easily consume. The design team is responsible for exporting and maintaining the tokens. Once finalized, the exported file is shared with developers to integrate into the codebase, ensuring consistent color usage across platforms.

The exported tokens are stored in the src/design_system/colors/figma_color_tokens.light.json and src/design_system/colors/figma_color_tokens.dark.json files.

Source code based on these tokens is generated with npm run build-color-tokens command.

TODO: run automatically on npm run build.