@geostarters/icgc-svelte-components

A lib of Svelte Components

To use components

Installation

npm i @geostarters/icgc-svelte-components --save

Svelte sample code

 import {LogoIcgc,
         ButtonIcgc,
         LayerTreeIcgc,
         OverLayersIcgc,
         SliderOpacityIcgc,
         ModalIcgc,
         CookieGdprIcgc} from "@geostarters/icgc-svelte-components";

 <LogoIcgc type="white"/>

 <ButtonIcgc label="button" />

 <LayerTreeIcgc {mapLayersArray} on:Change={change} bind:group={selected} />
 
 <OverLayersIcgc {layerTree} />

 <SliderOpacityIcgc />
 <CookieGdprIcgc on:analytics={onAnalytics} />

 <ModalIcgc />

View demo

Components

<LogoIcgc/>

Properties

  type: "color"|| white;
  href :"url to link" || "https://www.icgc.cat";
  src : "url to logo" || default url logos;
  style : "css style" || "position: absolute;z-index: 1000;right: 50px;bottom:10px";

<ModalIcgc/>

Properties

  width: "width"|| "50%";
  height: "height" || "50%";
  style: "css style" || null;
  title: "title" || "Modal";
  description: "content" || "";
  href: "url to link" || "";
  img: "url to image" || "";
  infoLabel: "icon" || "info";
  closeLabel: "icon" || "close";

<ButtonIcgc/>

Properties

   style : "css style" || "background: #c8ffe7";

<LayerTreeIcgc/>

Properties

   mapLayersArray : layers array || [
        { id: "building", name: "Edificis", checked: true },
        { id: "place", name: "Llocs", checked: false },
        { id: "water", name: "Aigua", checked: true },
    ];

Events

   on:change={ }

<OverLayersIcgc/>

Properties

   layerTree : layers array || [
        	{
			groupLabel: "Group 1",
			groupId: "opt_group1",
			items: [
				{
					label: "Layer 1",
					id: "layer1",
					layout: { visibility: "none" },
				},
				{
					label: "Layer 2",
					id: "layer2",
					layout: { visibility: "none" },
				},
				{
					label: "Layer 3",
					id: "layer3",
					layout: { visibility: "visible" },
				},
			],
		},

		{
			groupLabel: "Group 2",
			groupId: "opt_group2",
			items: [
				{ label: "Layer A", id: "layerA" },
				{
					label: "Layer B",
					id: "layerB",
					layout: { visibility: "none" },
				},
				{
					label: "Layer C",
					id: "layerC",
					layout: { visibility: "none" },
				},
			],
		},
    ];

Events

   on:change={ }
   on:click={}

<SliderOpacityIcgc/>

Properties

      type="range"
      min="0"
      max="100"
      step="0"
      value="50";

Events

   on:change={ }

<CookieGdprIcgc/>

Properties

      cookieName = "cookieAllowICGC";
      heading = "";
      description =
    "Utilitzem galetes per distingir-vos d'altres usuaris en els nostres webs, per millorar la informació i els serveis que us oferim, i per facilitar-vos l'accés. Per a més informació, consulteu la <strong style='text-decoration: underline;'><a style='color: white; opacity: .8;' href='https://www.icgc.cat/ca/cookies'>política de galetes.</a> </strong> Pots acceptar totes les cookies prement el botó “Acceptar preferències” o configurar-les o rebutjar-ne l'ús prement el botó “Preferències”";
      acceptLabel = "Acceptar";
      settingsLabel = "Preferències";
      closeLabel = "Tancar preferències";
      showEditIcon= true;
  choices = {
    necessary: false,
    tracking: false,
    analytics: {
      label: "Cookies Analítica",
      description: "Aquest visor utilitza cookies de Google Analytics.",
      value: true,
    },
    marketing: false,
  };

Events

   on:analytics={function(status){
    console.info(status);
   }}

Common functions

  import  {isWithinCat,getEmptyGeoJSON} from "@geostarters/icgc-svelte-components";

  isWithinCat([1.4622,41.7139 ,1.8117 ,42.0330])

COMMON DOCS

Whit this repo

- Create components with Svelte
- Generate a StoryBook 
- Publish the components via NPM
- Reuse the components in other applications

To develope components

Local installation

You need Node.js installed

git clone https://github.com/geostarters/icgc-svelte-components.git

cd icgc-svelte-components

git checkout devel

npm install

To start in developement mode

npm run dev

To run storybook

npm run storybook

To deploy storybook

npm run build-storybook

New git branch

git checkout -b "nombranch"

To build for production mode

npm run build

To update code

git pull
git add .
git commit -m "text commit"
git push

In ordre to start developing

-Step 1 : Create a Svelte components in **/src/components/**
-Step 2 : Import and try component in **/src/App.svelte**
-Step 3 : Create storie component in **/src/stories** 
-Step 4 : Run StoryBook ```npm run storybook```
-Step 5 : Import component in **/src/export.js** and ```run start build```

In order to publish NPM's components

https://www.npmjs.com/package/@geostarters/icgc-svelte-components

-Step 1: Go to  **package.json** and update versión number
 

     "name": "@geostarters/icgc-svelte-components",
     "version": "0.0.2",

-Step 2: Open terminal
 

    npm run build
    npm login
    Username: icgcgeostarters
    Password: XXXXXXXX
    Email: (this IS public): geostarters [at] gmail [dot] com
    npm publish --access public 
    

Used styles

This template use Svelte Material UI

Documentation

https://sveltematerialui.com/

Material Icons

https://fonts.google.com/icons?selected=Material+Icons+Outlined:assignment_returned

Version

alpha 0.0.2

License

Reconeixement 4.0 Internacional de Creative Commons (CC-BY 4-0)

More info

Credits

Developed by :

Institut Cartogràfic i Geològic de Catalunya (ICGC) - https://icgc.cat

Àrea d’Innovació i Estratègia Digital - Unitats Geostart i Web SIG