24.2.0 • Published 30 days ago

@smg-automotive/components v24.2.0

Weekly downloads
-
License
MIT
Repository
github
Last release
30 days ago

components-pkg

CircleCI Deployment semantic-release

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.

23.18.1

7 months ago

23.18.0

7 months ago

23.18.3

7 months ago

23.18.2

7 months ago

23.18.5

6 months ago

23.18.4

7 months ago

23.31.0

3 months ago

23.40.0

1 month ago

23.40.1

1 month ago

23.40.2

1 month ago

23.40.3

1 month ago

23.40.4

30 days ago

23.23.1

5 months ago

23.23.0

5 months ago

23.23.2

5 months ago

23.32.0

3 months ago

23.10.0

8 months ago

23.27.0

4 months ago

23.19.12

6 months ago

23.19.11

6 months ago

23.19.10

6 months ago

23.36.1

2 months ago

23.36.0

2 months ago

23.14.0

8 months ago

23.19.0

6 months ago

23.19.2

6 months ago

23.19.1

6 months ago

23.19.4

6 months ago

23.19.3

6 months ago

23.19.6

6 months ago

23.19.5

6 months ago

23.19.8

6 months ago

23.19.7

6 months ago

23.19.9

6 months ago

23.9.0

8 months ago

23.11.0

8 months ago

23.11.3

8 months ago

23.11.1

8 months ago

23.11.2

8 months ago

23.24.0

5 months ago

23.24.2

5 months ago

23.24.1

5 months ago

23.33.0

3 months ago

23.15.0

7 months ago

23.28.0

3 months ago

23.28.1

3 months ago

23.37.0

2 months ago

23.37.2

2 months ago

23.37.1

2 months ago

23.37.4

2 months ago

23.37.3

2 months ago

24.2.0

1 month ago

23.29.1

3 months ago

23.29.0

3 months ago

23.29.3

3 months ago

23.29.2

3 months ago

23.8.0

8 months ago

23.8.2

8 months ago

23.8.1

8 months ago

23.20.0

6 months ago

23.20.2

6 months ago

23.20.1

6 months ago

23.20.4

5 months ago

23.20.3

5 months ago

23.20.6

5 months ago

23.20.5

5 months ago

23.20.8

5 months ago

23.20.7

5 months ago

23.34.1

2 months ago

23.34.0

2 months ago

23.34.2

2 months ago

23.12.2

8 months ago

23.12.0

8 months ago

23.12.1

8 months ago

23.21.0

5 months ago

23.38.0

2 months ago

23.16.0

7 months ago

23.25.1

4 months ago

23.25.0

4 months ago

23.25.3

4 months ago

23.25.2

4 months ago

23.25.4

4 months ago

24.1.0

2 months ago

23.17.0

7 months ago

23.30.1

3 months ago

23.30.0

3 months ago

23.30.3

3 months ago

23.30.2

3 months ago

23.35.0

2 months ago

23.35.2

2 months ago

23.35.1

2 months ago

23.22.0

5 months ago

23.39.0

1 month ago

23.13.1

8 months ago

23.13.0

8 months ago

23.26.0

4 months ago

23.26.2

4 months ago

23.26.1

4 months ago

23.26.3

4 months ago

24.0.0

2 months ago

23.7.0

8 months ago

23.6.0

8 months ago

23.5.1

9 months ago

23.5.0

9 months ago

23.5.3

9 months ago

23.5.2

9 months ago

23.4.0

9 months ago

23.3.0

9 months ago

23.1.0

9 months ago

23.0.8

9 months ago

23.2.2

9 months ago

23.2.1

9 months ago

23.2.0

9 months ago

23.0.7

9 months ago

23.0.6

9 months ago

23.0.5

9 months ago

23.0.4

9 months ago

23.0.3

9 months ago

23.0.0

9 months ago

23.0.2

9 months ago

23.0.1

9 months ago

22.21.1

11 months ago

20.31.0

2 years ago

22.21.0

11 months ago

20.40.1

1 year ago

20.40.0

1 year ago

22.8.0

1 year ago

22.30.0

10 months ago

22.25.3

11 months ago

22.25.4

11 months ago

22.25.1

11 months ago

22.25.2

11 months ago

22.25.0

11 months ago

20.18.0

2 years ago

20.18.1

2 years ago

22.12.1

12 months ago

22.12.0

12 months ago

22.34.0

10 months ago

22.29.0

10 months ago

20.39.5

1 year ago

20.39.4

1 year ago

20.39.3

1 year ago

20.39.2

1 year ago

20.39.1

1 year ago

20.39.0

1 year ago

22.29.1

10 months ago

22.29.2

10 months ago

20.26.0

2 years ago

21.1.1

1 year ago

21.1.0

1 year ago

21.1.3

1 year ago

21.1.2

1 year ago

21.1.5

1 year ago

21.1.4

1 year ago

21.1.6

1 year ago

20.3.2

2 years ago

20.3.1

2 years ago

20.3.0

2 years ago

20.3.4

2 years ago

20.3.3

2 years ago

22.16.0

12 months ago

19.28.0

2 years ago

19.28.1

2 years ago

20.48.0

1 year ago

20.17.0

2 years ago

19.28.4

2 years ago

20.17.1

2 years ago

19.28.2

2 years ago

19.28.3

2 years ago

20.35.0

2 years ago

20.22.0

2 years ago

20.22.1

2 years ago

20.22.2

2 years ago

20.22.3

2 years ago

20.22.4

2 years ago

20.22.5

2 years ago

20.22.6

2 years ago

22.3.0

1 year ago

22.3.1

1 year ago

20.7.8

2 years ago

20.7.7

2 years ago

21.5.4

1 year ago

21.5.1

1 year ago

21.5.0

1 year ago

21.5.3

1 year ago

21.5.2

1 year ago

20.7.2

2 years ago

20.7.1

2 years ago

20.7.0

2 years ago

20.7.6

2 years ago

20.7.5

2 years ago

20.7.4

2 years ago

20.7.3

2 years ago

20.44.1

1 year ago

20.44.0

1 year ago

20.13.0

2 years ago

20.13.1

2 years ago

20.43.3

1 year ago

20.43.2

1 year ago

20.43.1

1 year ago

20.43.0

1 year ago

22.7.1

1 year ago

22.7.0

1 year ago

22.31.1

10 months ago

22.31.0

10 months ago

20.30.0

2 years ago

22.13.0

12 months ago

22.35.0

10 months ago

22.22.0

11 months ago

21.0.2

1 year ago

21.0.1

1 year ago

21.0.4

1 year ago

21.0.3

1 year ago

21.0.0

1 year ago

21.0.6

1 year ago

21.0.5

1 year ago

21.0.8

1 year ago

21.0.7

1 year ago

20.2.3

2 years ago

20.2.2

2 years ago

20.2.1

2 years ago

20.2.0

2 years ago

20.2.5

2 years ago

20.2.4

2 years ago

22.17.0

12 months ago

20.25.0

2 years ago

19.27.1

2 years ago

19.27.2

2 years ago

20.16.0

2 years ago

20.16.1

2 years ago

19.27.5

2 years ago

19.27.3

2 years ago

19.27.4

2 years ago

22.26.0

11 months ago

22.26.1

11 months ago

20.38.1

1 year ago

20.38.0

1 year ago

22.2.0

1 year ago

21.4.0

1 year ago

20.6.0

2 years ago

20.47.0

1 year ago

20.21.0

2 years ago

20.21.1

2 years ago

20.21.2

2 years ago

20.21.3

2 years ago

20.21.4

2 years ago

20.21.5

2 years ago

20.21.6

2 years ago

20.21.7

2 years ago

20.12.0

2 years ago

20.12.1

2 years ago

20.12.2

2 years ago

20.34.3

2 years ago

20.34.2

2 years ago

20.34.1

2 years ago

20.34.0

2 years ago

20.42.0

1 year ago

22.10.0

1 year ago

22.6.3

1 year ago

22.6.2

1 year ago

22.6.1

1 year ago

22.6.0

1 year ago

21.8.2

1 year ago

21.8.1

1 year ago

21.8.4

1 year ago

21.8.3

1 year ago

21.8.0

1 year ago

21.8.5

1 year ago

22.32.0

10 months ago

20.20.0

2 years ago

20.20.1

2 years ago

20.20.2

2 years ago

20.20.3

2 years ago

20.20.4

2 years ago

20.20.5

2 years ago

22.14.3

12 months ago

22.14.1

12 months ago

22.14.2

12 months ago

22.14.0

12 months ago

22.36.1

10 months ago

22.36.0

10 months ago

20.29.0

2 years ago

20.29.1

2 years ago

20.29.2

2 years ago

20.29.3

2 years ago

20.29.4

2 years ago

20.29.5

2 years ago

22.23.0

11 months ago

20.1.0

2 years ago

20.1.2

2 years ago

20.1.1

2 years ago

22.18.0

12 months ago

20.15.0

2 years ago

20.15.1

2 years ago

20.15.2

2 years ago

22.27.1

11 months ago

22.27.0

11 months ago

20.37.1

1 year ago

20.37.0

1 year ago

20.28.0

2 years ago

22.1.1

1 year ago

22.1.0

1 year ago

21.3.0

1 year ago

20.5.9

2 years ago

20.5.0

2 years ago

20.5.4

2 years ago

20.5.3

2 years ago

20.5.2

2 years ago

20.5.1

2 years ago

20.5.7

2 years ago

20.5.6

2 years ago

20.5.5

2 years ago

20.46.0

1 year ago

20.11.0

2 years ago

20.33.4

2 years ago

20.33.3

2 years ago

20.33.2

2 years ago

20.33.1

2 years ago

20.33.0

2 years ago

20.24.0

2 years ago

20.24.1

2 years ago

22.5.0

1 year ago

21.7.1

1 year ago

21.7.0

1 year ago

20.9.0

2 years ago

22.33.0

10 months ago

20.32.0

2 years ago

22.20.0

11 months ago

22.0.10

1 year ago

20.41.2

1 year ago

20.41.1

1 year ago

20.41.0

1 year ago

22.9.1

1 year ago

22.9.0

1 year ago

20.19.0

2 years ago

20.19.1

2 years ago

22.24.0

11 months ago

20.0.0

2 years ago

22.11.0

1 year ago

19.29.0

2 years ago

20.14.0

2 years ago

22.28.0

11 months ago

22.28.1

11 months ago

22.28.2

11 months ago

22.0.3

1 year ago

22.0.2

1 year ago

22.0.1

1 year ago

22.0.0

1 year ago

22.0.9

1 year ago

22.0.8

1 year ago

22.0.7

1 year ago

22.0.6

1 year ago

22.0.5

1 year ago

22.0.4

1 year ago

21.2.0

1 year ago

21.2.2

1 year ago

21.2.1

1 year ago

20.4.1

2 years ago

20.4.0

2 years ago

20.4.3

2 years ago

20.4.2

2 years ago

22.15.0

12 months ago

20.49.2

1 year ago

20.49.1

1 year ago

20.49.0

1 year ago

20.27.0

2 years ago

20.10.0

2 years ago

20.36.2

2 years ago

20.36.1

2 years ago

20.36.0

2 years ago

22.4.0

1 year ago

21.6.4

1 year ago

21.6.3

1 year ago

21.6.6

1 year ago

21.6.5

1 year ago

21.6.0

1 year ago

21.6.2

1 year ago

21.6.1

1 year ago

21.6.7

1 year ago

20.8.1

2 years ago

20.8.0

2 years ago

20.8.4

2 years ago

20.8.3

2 years ago

20.8.2

2 years ago

20.45.0

1 year ago

22.19.0

12 months ago

22.19.1

12 months ago

20.23.0

2 years ago

19.26.3

2 years ago

19.27.0

2 years ago

19.21.3

2 years ago

19.21.4

2 years ago

19.21.1

2 years ago

19.21.2

2 years ago

19.21.5

2 years ago

19.21.6

2 years ago

19.21.0

2 years ago

19.19.2

2 years ago

19.19.1

2 years ago

19.19.0

2 years ago

19.17.1

2 years ago

19.17.0

2 years ago

19.17.5

2 years ago

19.17.4

2 years ago

19.17.3

2 years ago

19.17.2

2 years ago

19.17.6

2 years ago

19.26.2

2 years ago

19.26.0

2 years ago

19.26.1

2 years ago

19.24.0

2 years ago

19.24.1

2 years ago

19.22.2

2 years ago

19.22.3

2 years ago

19.22.0

2 years ago

19.22.1

2 years ago

19.22.4

2 years ago

19.20.0

2 years ago

19.20.1

2 years ago

19.18.0

2 years ago

19.18.4

2 years ago

19.18.3

2 years ago

19.18.2

2 years ago

19.18.1

2 years ago

19.18.6

2 years ago

19.18.5

2 years ago

19.16.6

2 years ago

19.16.5

2 years ago

19.16.4

2 years ago

19.25.0

2 years ago

19.25.3

2 years ago

19.25.4

2 years ago

19.25.1

2 years ago

19.25.2

2 years ago

19.25.5

2 years ago

19.23.1

2 years ago

19.23.0

2 years ago

19.10.3

2 years ago

19.10.2

2 years ago

19.10.1

2 years ago

19.10.0

2 years ago

18.1.0

2 years ago

17.1.2

2 years ago

17.1.0

2 years ago

19.3.0

2 years ago

19.1.0

2 years ago

18.3.3

2 years ago

19.1.1

2 years ago

18.3.2

2 years ago

18.3.1

2 years ago

18.3.0

2 years ago

19.8.1

2 years ago

19.8.0

2 years ago

15.14.0

2 years ago

19.6.1

2 years ago

19.6.0

2 years ago

19.15.0

2 years ago

16.1.0

2 years ago

19.13.1

2 years ago

19.13.0

2 years ago

19.11.0

2 years ago

15.12.1

2 years ago

15.12.2

2 years ago

15.12.0

2 years ago

19.0.0

2 years ago

18.2.0

2 years ago

18.0.2

2 years ago

18.0.1

2 years ago

18.0.0

2 years ago

19.4.1

2 years ago

19.4.0

2 years ago

19.4.3

2 years ago

19.4.2

2 years ago

19.4.5

2 years ago

19.4.4

2 years ago

19.2.1

2 years ago

19.2.0

2 years ago

15.13.6

2 years ago

15.13.7

2 years ago

15.13.4

2 years ago

15.13.5

2 years ago

15.13.2

2 years ago

15.13.3

2 years ago

15.13.0

2 years ago

15.13.1

2 years ago

19.7.0

2 years ago

19.16.2

2 years ago

19.16.1

2 years ago

19.16.0

2 years ago

15.15.0

2 years ago

19.16.3

2 years ago

19.5.0

2 years ago

19.14.0

2 years ago

19.14.2

2 years ago

19.14.1

2 years ago

17.0.0

2 years ago

19.12.1

2 years ago

19.12.0

2 years ago

15.11.5

2 years ago

19.9.0

2 years ago

19.9.1

2 years ago

16.0.2

2 years ago

16.0.1

2 years ago

16.0.0

2 years ago

15.8.8

2 years ago

15.9.0

2 years ago

15.9.1

2 years ago

15.10.5

2 years ago

15.10.3

2 years ago

15.10.4

2 years ago

15.10.1

2 years ago

15.10.2

2 years ago

15.10.0

2 years ago

15.11.4

2 years ago

15.11.2

2 years ago

15.11.3

2 years ago

15.11.0

2 years ago

15.11.1

2 years ago

15.7.0

2 years ago

15.7.2

2 years ago

15.7.1

2 years ago

15.7.4

2 years ago

15.7.3

2 years ago

15.8.1

2 years ago

15.8.0

2 years ago

15.8.3

2 years ago

15.8.2

2 years ago

15.8.5

2 years ago

15.8.4

2 years ago

15.8.7

2 years ago

15.8.6

2 years ago

15.5.0

2 years ago

11.0.4

3 years ago

15.6.0

2 years ago

12.0.0

3 years ago

13.0.0

3 years ago

13.0.1

3 years ago

11.1.1

3 years ago

11.1.2

3 years ago

11.1.0

3 years ago

12.2.5

3 years ago

12.2.6

3 years ago

12.2.7

3 years ago

12.2.8

3 years ago

12.2.1

3 years ago

12.2.2

3 years ago

12.2.3

3 years ago

12.2.4

3 years ago

12.2.0

3 years ago

12.1.0

3 years ago

14.1.0

3 years ago

14.1.1

3 years ago

14.1.2

3 years ago

15.0.0

3 years ago

14.2.0

3 years ago

14.2.1

3 years ago

12.3.0

3 years ago

14.0.0

3 years ago

15.3.0

3 years ago

15.3.1

2 years ago

15.4.1

2 years ago

15.4.0

2 years ago

15.1.1

3 years ago

15.1.2

3 years ago

15.1.0

3 years ago

15.1.3

3 years ago

14.3.0

3 years ago

14.3.1

3 years ago

15.2.0

3 years ago

15.2.1

3 years ago

15.2.4

3 years ago

15.2.5

3 years ago

15.2.2

3 years ago

15.2.3

3 years ago

15.2.8

3 years ago

15.2.6

3 years ago

15.2.7

3 years ago

10.0.0

3 years ago

10.0.1

3 years ago

10.0.2

3 years ago

6.17.0

3 years ago

6.17.1

3 years ago

6.16.0

3 years ago

10.2.0

3 years ago

6.15.4

3 years ago

6.15.3

3 years ago

6.15.2

3 years ago

6.15.1

3 years ago

6.15.0

3 years ago

11.0.2

3 years ago

11.0.3

3 years ago

11.0.0

3 years ago

11.0.1

3 years ago

10.1.0

3 years ago

6.14.0

3 years ago

10.4.0

3 years ago

8.6.1

3 years ago

8.6.0

3 years ago

7.8.0

3 years ago

7.8.2

3 years ago

7.8.1

3 years ago

10.3.0

3 years ago

10.6.0

3 years ago

10.5.0

3 years ago

6.18.1

3 years ago

6.18.0

3 years ago

10.8.0

3 years ago

10.8.1

3 years ago

10.8.2

3 years ago

10.8.3

3 years ago

10.8.4

3 years ago

10.8.5

3 years ago

7.3.1

3 years ago

7.3.0

3 years ago

8.1.0

3 years ago

10.7.0

3 years ago

10.7.1

3 years ago

10.7.2

3 years ago

10.7.3

3 years ago

8.3.2

3 years ago

8.3.1

3 years ago

8.3.3

3 years ago

7.4.0

3 years ago

7.5.0

3 years ago

9.0.1

3 years ago

9.0.0

3 years ago

8.4.0

3 years ago

7.6.2

3 years ago

7.6.1

3 years ago

7.6.0

3 years ago

7.6.3

3 years ago

8.3.0

3 years ago

9.1.0

3 years ago

8.5.0

3 years ago

8.5.1

3 years ago

7.7.0

3 years ago

9.2.0

3 years ago

6.13.0

3 years ago

7.0.0

3 years ago

6.12.8

3 years ago

7.0.1

3 years ago

6.12.9

3 years ago

7.1.0

3 years ago

7.2.1

3 years ago

7.2.0

3 years ago

7.3.2

3 years ago

8.0.0

3 years ago

6.6.1

3 years ago

6.6.3

3 years ago

6.6.2

3 years ago

6.6.5

3 years ago

6.6.4

3 years ago

6.6.6

3 years ago

6.7.0

3 years ago

6.8.1

3 years ago

6.8.0

3 years ago

6.9.0

3 years ago

6.12.7

3 years ago

6.12.6

3 years ago

6.12.5

3 years ago

6.12.0

3 years ago

6.12.4

3 years ago

6.12.3

3 years ago

6.12.2

3 years ago

6.12.1

3 years ago

6.11.1

3 years ago

6.11.0

3 years ago

6.10.1

3 years ago

6.10.0

3 years ago

6.6.0

3 years ago

6.5.0

3 years ago

6.4.2

3 years ago

6.4.1

3 years ago

6.4.0

3 years ago

4.0.0

3 years ago

5.8.0

3 years ago

5.0.3

3 years ago

5.0.2

3 years ago

5.0.1

3 years ago

5.0.0

3 years ago

5.1.0

3 years ago

3.0.0

3 years ago

4.6.0

3 years ago

1.13.1

3 years ago

5.2.0

3 years ago

6.0.1

3 years ago

6.0.0

3 years ago

6.0.3

3 years ago

6.0.2

3 years ago

4.5.0

3 years ago

5.3.0

3 years ago

6.1.0

3 years ago

2.0.0

3 years ago

4.4.1

3 years ago

4.4.0

3 years ago

5.4.1

3 years ago

5.4.0

3 years ago

6.2.0

3 years ago

4.3.0

3 years ago

5.5.1

3 years ago

5.5.0

3 years ago

6.3.0

3 years ago

6.3.2

3 years ago

6.3.1

3 years ago

4.2.0

3 years ago

5.6.1

3 years ago

5.6.0

3 years ago

4.1.0

3 years ago

5.7.0

3 years ago

1.13.0

3 years ago

1.12.3

3 years ago

1.12.2

3 years ago

1.12.1

3 years ago

1.12.0

3 years ago

1.11.0

3 years ago

1.10.0

3 years ago

1.9.0

3 years ago

1.8.1

3 years ago

1.8.0

3 years ago

1.7.0

3 years ago

1.6.1

3 years ago

1.6.0

3 years ago

1.5.0

3 years ago

1.4.0

3 years ago

1.3.0

3 years ago

1.2.0

3 years ago

1.1.0

3 years ago

1.0.0

3 years ago