Integrate @specialdoom/proi-ui in your svelte project

specialdoom — Wed, 21 Sep 2022 09:19:58 +0000

Intro

This article provides some tech details for integrating @specialdoom/proi-ui in your new or existing svelte project.

Agenda

Introduction
Creating a svelte project. Integration of @specialdoom/proi-ui
Demo

Introduction

I am aware of the multiple UI components libraries provided by the open source community. I mean look at this following @MadeWithSvelte category, it has 2 pages 😲. So, we can admit that the frontend community is trying to consider @svelte as part of their tech stack by improving and updating the svelte resources, not only the UI ones.

Here I am, part of the community, presenting the UI lib I have developed during the past years and it's integration. Starting with a very simple and naive library to a third version including a redesigned process using Figma and it's components approach.

Prerequisites

JavaScript, HTML, CSS
Svelte
Visual Studio Code

Code

Let's create a new svelte project by running the following command provided by svelte docs.

npm create vite@latest appname -- --template svelte
cd appname
npm install

Now we should have a simple svelte app and we are ready to develop some amazing features for it. To integrate @specialdoom/proi-ui, first, we need to install it in our project by running the npm install command

npm i @specialdoom/proi-ui

Second step of the integration is to import css variables in our main app file

// App.js
import App from './App.svelte'
import './global.css';
import '@specialdoom/proi-ui/variables.css';

const app = new App({
  target: document.getElementById('app')
})

export default app;

or in our global css file.

/* global.css */
@import "@specialdoom/proi-ui/variables.css";

Right now everything is up and ready and we can use the provided components like

// App.svelte
<script>
  import { Button } from '@specialdoom/proi-ui';

  function handleClick() {
    console.log('[Button] click...');
  }
</script>

<Button variant="primary" on:click={handleClick}>
  Click here
</Button>