Getting started

Welcome to the design system.

Import the Regsoft Component Library

If you are working in the Regsoft elixir mono-repo, you can use the following syntax to import the component library in your mix.exs file:

{:regsoft_component_library, in_umbrella: true},

If you are not working within the mono-repo, you will need to use a git-style url to import the component library.

Update your application shell

Phoenix offers the ability to add a default shell in a plug pipeline. In your router.ex file, you will need to change the plug to:

plug :put_root_layout, html: {Reg.Shell, :regsoft}

Modify asset build to copy the necessary js files

You will need to add lines to your config.exs file to copy across the js and style sheets for the component library as well as the theme you are implementing.

First, in the `config/config.ex` file, add a task to the :esbuild config to copy across the component JS files:

component_to_your_web: [
args:
  ~w(js/rds.js --bundle --target=es2022 --outdir=../../../apps/your_web/priv/static/assets/js --external:/fonts/* --external:/images/* --alias:@=.),
  cd: Path.expand("../apps/regsoft_component_library/assets", __DIR__),
  env: %{"NODE_PATH" => [Path.expand("../deps", __DIR__), Mix.Project.build_path()]}]

You will see the pattern in the config file

Modify asset build to copy the necessary css files