Skip to main content

Getting Started with Atoms

  • As the name suggests, Atom is the smallest part into which an element can be divided. In Helium, components are the smallest running unit of code, hence we name them as Atoms. There are specifically named components in Thought Industries which are replacable when re-defined inside atoms folder.

  • When rendering components in the Thought Industries platform, if a suitable Atom replacement is found in the window.TiAtoms property, the provided component will be rendered instead. The props and actions that would regularly be passed to the Thought Industries component will be passed to the Atom component instead.


Requirements​

If you would like to update a project to include Atoms, there are several requirements that need to be met:

  1. An authenticated Helium project, create a helium project here.

  2. Within the Helium project, there must be an /atoms/ directory in the project root. Within the atoms directory, there should be an index.ts file assigning any components you would like to deploy to window.TiAtoms as seen here.

Note: The name of the component file must be the same as the component it's intended to replace. For example: this file would be rendered anywhere the Thought Industries platform would render an AudioPlayerBar component.

  1. A vite.atoms.config.ts file within the Helium project, as seen here

  2. Must include @thoughtindustries/helium at version 1.2.0-beta.1 or higher in your project's dependencies.

  3. Must update package.json#scripts with these commands:


"build:vite": "vite build",
"build:atoms": "vite build -c vite.atoms.config.ts && vite build"

Testing locally:

To test the atoms locally:

  1. Utilize these components as normal components (importing, rendering etc.). This means they will have to be tested on a local page on your localhost environment (dashboard, home, catalog etc.).
  2. Once you are happy with your new component, you should move the code to the Atoms/{component} file, and revert the changes you have made during testing.
  3. After deployment, Atoms will be preferred over regular components on non-helium pages.

As of now, there are only 3 type of Atoms:

  1. Audio Player - (AudioPlayerBar)
  2. Home Header - (HomeHeader)
  3. Learner Dash - (LearnerDashHeader)

Environment Variables​

To use a environment variable in an Atom, prefix the variable with 'VITE_', like this:

VITE_APP_VERSION='v1'

tip

Environment Variables should not contain secrets as they are processed client side.