Initiate

Dependencies

Install dependencies

npm i

Build/Watch

Opens browser tab containing CloudSigma layout and custom component

npm run serve

Component will open at http://local.cloudsigma.com:3000, if you can not access it add this line to your hosts files.

127.0.0.1 local.cloudsigma.com

Checks

Tests

For tests Playwright is used. You can find tests in tests/e2e folder, to run tests manually execute the following command:

npm test

Package

Checks if package can be build

npm run build

CSS

Styling components can be made only with using inline CSS. For example:

function ComponentWithInlineCss() {
  return (
    <div
      style={{
        width: '10px',
        height: '10px',
        backgroundColor: '#000',
      }}
    >
      Inline CSS
    </div>
  );
}

By following these guidelines, you maintain a clean and isolated styling approach within your components,preventing unintended style conflicts when using external css.

Image Integration

In your component file, use the import statement to bring in the image:

import logo from '../../assets/logo.svg';

Place the imported image in your component's JSX:

 <img src={logo} alt="Logo" />

Organize your images within the project structure. For example:

project-root/
|-- src/
|   |-- component/
|       |-- assets/
|           |-- logo.svg
|-- ...

Icons

For Icons we use Font Awesome version 4.7, you can find icons it provides here

Localisation

You can add custom translations in src/component/locales - [language].js files.

To add translation to component, useTranslation must be imported from react-i18next. For example:

import { useTranslation } from 'react-i18next';

...

function ComponentWithTranslation() {
  const {t} = useTranslation();

  return (
    <h2>
      {t('Translation Key')}
    </h2>
  );
}

You can test different locales by chaning lng: 'en' key in static src/config.jsx file to match desired locale.

i18next Documentation