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.exs` 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

The component library and each theme ship their own stylesheets. Add a :tailwind task per stylesheet to config/config.exs so the build copies them into your app's priv/static/assets/css directory. Mirror the existing *_to_rds tasks in this repo's config/config.exs, swapping in your app:

component_to_your_web: [
  args:
    ~w(--input=assets/css/rds.css --output=../../apps/your_web/priv/static/assets/css/rds.css),
  cd: Path.expand("../apps/regsoft_component_library", __DIR__)
],
regsoft_to_your_web: [
  args:
    ~w(--input=assets/regsoft/css/regsoft.css --output=../../apps/your_web/priv/static/assets/css/regsoft.css),
  cd: Path.expand("../apps/regsoft_component_library", __DIR__)
]

Add one task per theme you support (for example ripple_to_your_web or nt_tourism_to_your_web), pointing --input at that theme's stylesheet under the component library.