components-pkg

Usage

1. Install the package

   npm install @smg-automotive/components

2. run the setup script

   npx components setup --path=<path to you public dir>

   The setup script will:

   • add a postinstall script that will copy self hosted fonts to your public directory. They need to be served from /assets/fonts to be correctly loaded.
   • add the copied font directory to your .gitignore
   • copy the fonts

   Default path is public, which is the publicly available directory in nextjs projects.

   After postinstall script is added fonts will be copied every time you install the dependencies, you don't need to manually copy fonts after updating the components package.

3. Dealing with fonts

   There are three ways of making sure that fonts are loaded:

   • self-hosting fonts and using provided fonts/hosted module.

     To leverage it:

     1. Make sure that you're hosting the fonts under /assets/fonts
     2. On the top level of your application render the <Fonts /> component from:

     import Fonts from '@smg-automotive/components/fonts/hosted'
     
     const App: () => {
      // ...
     
      return (<>
       <Fonts />
       <!-- rest of the application -->
      </>)
     }

     The provided component makes sure that correct font-faces are declared

   • using @next/fonts to leverage font optimizations from nextjs

     Unfortunately due to technical limitations in how @next/fonts are set up we can't provide a module similar to self-hosted fonts. We do the next best thing and provide a component generator. Simply run:

     npx components setup-next-fonts --fonts-path <path-to-which-fonts-were-copied> --component-path <path-to-save-the-component>

     This will generate the <Fonts /> component with the @next/font configuration ready to use in your project.

   • handling fonts yourself

     You can also deal with the fonts yourself. That means you're responsible for declaring font-face and hosting fonts. The only thing that you need to do is to provide a --font-primary CSS variable so the components package picks your font declaration up:

     :root {
        --font-primary: '<your font family name>'
      }

     We recommend adding fallback font families of Arial, Helvetica, Sans-Serif

Development

npm run build

You can link your local npm package to integrate it with any local project:

cd smg-automotive-components-pkg
npm run build

cd <project directory>
npm link ../smg-automotive-components-pkg

Theming

As agreed upon in the RFC we will handle the differences between AS24 and MS24 with two different themes. They can be then used via a theme provider that needs to wrap the application:

// app.tsx
import { ThemeProvider } from '@smg-automotive/components';

const App = ({ Component, pageProps }) => {
  return (
    <ThemeProvider theme="autoscout24">
      <Component {...pageProps} />
    </ThemeProvider>
  );
};

export default MyApp;

Theme objects can also be imported directly from the package (for showcasing, debugging, etc.):

import { autoScout24Theme } from '@smg-automotive/components';

Switching themes in storybook

We leverage a theming addon in storybook. It allows us to use top bar to switch themes.

Release a new version

New versions are released on the ci using semantic-release as soon as you merge into master. Please make sure your merge commit message adheres to the corresponding conventions.