@iroco/ui 0.21.0 → 0.50.0

package/RadioButtonTest.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        group?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type RadioButtonTestProps = typeof __propDef.props;
+export type RadioButtonTestEvents = typeof __propDef.events;
+export type RadioButtonTestSlots = typeof __propDef.slots;
+export default class RadioButtonTest extends SvelteComponentTyped<RadioButtonTestProps, RadioButtonTestEvents, RadioButtonTestSlots> {
+    get group(): string | undefined;
+    /**accessor*/
+    set group(_: string | undefined);
+}
+export {};

package/SlottedComponentWrapper.svelte

@@ -0,0 +1,7 @@
+<script>
+	export let Component;
+</script>
+
+<svelte:component this={Component}>
+	<h1 data-testid="slot">Slot value</h1>
+</svelte:component>

package/SlottedComponentWrapper.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  SlottedComponentWrapperProps */
+/** @typedef {typeof __propDef.events}  SlottedComponentWrapperEvents */
+/** @typedef {typeof __propDef.slots}  SlottedComponentWrapperSlots */
+export default class SlottedComponentWrapper extends SvelteComponentTyped<{
+    Component: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type SlottedComponentWrapperProps = typeof __propDef.props;
+export type SlottedComponentWrapperEvents = typeof __propDef.events;
+export type SlottedComponentWrapperSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        Component: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/TextInput.svelte

@@ -0,0 +1,148 @@
+<script>import { TextInputType } from "./definition";
+export let id;
+export let type;
+export let name;
+export let label = null;
+export let placeholder;
+export let error = null;
+export let htmlError = false;
+export let value = null;
+export let onFocus;
+export let onBlur;
+export let readonly = false;
+export let border = false;
+function typeAction(node) {
+  node.type = type;
+}
+</script>
+
+<div class="iroco-ui-input">
+	{#if label}
+		<label class="iroco-ui-label" for={id}>{label}</label>
+	{/if}
+	<input
+		on:input
+		bind:value
+		on:focus={onFocus}
+		on:blur={onBlur}
+		{id}
+		type="text"
+		{name}
+		{placeholder}
+		class:border
+		class:error={error !== null}
+		class:readonlyInput={readonly == true}
+		use:typeAction
+		{readonly}
+	/>
+	{#if error != null}
+		<p data-testid="error" class="error">
+			{#if htmlError}
+				{@html error !== null ? error : ''}
+			{:else}
+				{error !== null ? error : ''}
+			{/if}
+		</p>
+	{/if}
+</div>
+
+<style>.font-color-blue {
+  color: #00b9ff;
+}
+
+.font-color-darkBlue {
+  color: #211d28;
+}
+
+.font-color-nightBlue {
+  color: #18151e;
+}
+
+.font-color-green {
+  color: #00d692;
+}
+
+.font-color-red {
+  color: #ff504d;
+}
+
+.font-color-yellow {
+  color: #ffe032;
+}
+
+.font-color-beige {
+  color: #f2ebe3;
+}
+
+.font-color-darkBeige {
+  color: #a9a29e;
+}
+
+.font-color-mediumGrey {
+  color: #464452;
+}
+
+.font-color-darkGrey {
+  color: #33323a;
+}
+
+.font-color-lightGrey {
+  color: #f5f5f5;
+}
+
+input,
+textarea {
+  outline: none;
+  text-decoration: none;
+  font-size: 14px;
+}
+input:focus,
+textarea:focus {
+  outline: none;
+  text-decoration: none;
+  font-size: 14px;
+}
+
+.iroco-ui-input {
+  display: flex;
+  flex-direction: column;
+}
+.iroco-ui-input > input {
+  color: #f2ebe3;
+  background: #211d28;
+  border: 1px solid #211d28;
+  padding: 1em 1.5em;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  border-radius: 0.3em;
+}
+.iroco-ui-input > input.border {
+  border: 1px solid #f2ebe3;
+}
+.iroco-ui-input > input::placeholder {
+  color: rgba(242, 235, 227, 0.5);
+}
+.iroco-ui-input > input.error {
+  border-color: #ff504d;
+}
+.iroco-ui-input > input.readonlyInput {
+  cursor: not-allowed;
+}
+.iroco-ui-input .error {
+  color: #ff504d;
+}
+
+.iroco-ui-label {
+  color: rgba(242, 235, 227, 0.6);
+  font-weight: bold;
+  padding-bottom: 10px;
+  display: inline-block;
+}
+
+.field {
+  margin-top: 20px;
+}
+.field:first-child {
+  margin: 0;
+}</style>

package/TextInput.svelte.d.ts

@@ -0,0 +1,30 @@
+import { SvelteComponentTyped } from "svelte";
+import { TextInputType } from './definition';
+declare const __propDef: {
+    props: {
+        id: string;
+        type: TextInputType;
+        name: string;
+        label?: string | null | undefined;
+        placeholder: string | undefined;
+        error?: string | null | undefined;
+        htmlError?: boolean | undefined;
+        value?: string | null | undefined;
+        onFocus: (e: FocusEvent) => void;
+        onBlur: (e: Event) => void;
+        readonly?: boolean | undefined;
+        border?: boolean | undefined;
+    };
+    events: {
+        input: Event;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TextInputProps = typeof __propDef.props;
+export type TextInputEvents = typeof __propDef.events;
+export type TextInputSlots = typeof __propDef.slots;
+export default class TextInput extends SvelteComponentTyped<TextInputProps, TextInputEvents, TextInputSlots> {
+}
+export {};

package/TopBar.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  TopBarProps */
+/** @typedef {typeof __propDef.events}  TopBarEvents */
+/** @typedef {typeof __propDef.slots}  TopBarSlots */
+export default class TopBar extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type TopBarProps = typeof __propDef.props;
+export type TopBarEvents = typeof __propDef.events;
+export type TopBarSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/definition.d.ts

@@ -0,0 +1,28 @@
+export declare class NavigationItem {
+    hrefOrCallback: string | (() => void);
+    name: string;
+    button: boolean;
+    constructor(name: string, hrefOrCallback: string | (() => void), button?: boolean);
+}
+export declare enum TextInputType {
+    text = "text",
+    email = "email",
+    password = "password"
+}
+export declare enum Color {
+    blue = "#00B9FF",
+    darkBlue = "#211D28",
+    nightBlue = "#18151E",
+    green = "#00D692",
+    red = "#ff504d",
+    yellow = "#FFE032",
+    beige = "#f2ebe3",
+    darkBeige = "#a9a29e",
+    mediumGrey = "#464452",
+    darkGrey = "#33323a",
+    lightGrey = "#f5f5f5"
+}
+export declare enum ButtonKind {
+    REGULAR = "regular",
+    DANGER = "danger"
+}

package/definition.js

@@ -0,0 +1,35 @@
+export class NavigationItem {
+    hrefOrCallback;
+    name;
+    button;
+    constructor(name, hrefOrCallback, button = false) {
+        this.hrefOrCallback = hrefOrCallback;
+        this.name = name;
+        this.button = button;
+    }
+}
+export var TextInputType;
+(function (TextInputType) {
+    TextInputType["text"] = "text";
+    TextInputType["email"] = "email";
+    TextInputType["password"] = "password";
+})(TextInputType || (TextInputType = {}));
+export var Color;
+(function (Color) {
+    Color["blue"] = "#00B9FF";
+    Color["darkBlue"] = "#211D28";
+    Color["nightBlue"] = "#18151E";
+    Color["green"] = "#00D692";
+    Color["red"] = "#ff504d";
+    Color["yellow"] = "#FFE032";
+    Color["beige"] = "#f2ebe3";
+    Color["darkBeige"] = "#a9a29e";
+    Color["mediumGrey"] = "#464452";
+    Color["darkGrey"] = "#33323a";
+    Color["lightGrey"] = "#f5f5f5";
+})(Color || (Color = {}));
+export var ButtonKind;
+(function (ButtonKind) {
+    ButtonKind["REGULAR"] = "regular";
+    ButtonKind["DANGER"] = "danger";
+})(ButtonKind || (ButtonKind = {}));

package/index.d.ts

@@ -0,0 +1,18 @@
+import './scss/style.scss';
+export { default as Button } from './Button.svelte';
+export { default as TextInput } from './TextInput.svelte';
+export { default as RadioButton } from './RadioButton.svelte';
+export { default as NumberInput } from './NumberInput.svelte';
+export { default as Loader } from './Loader.svelte';
+export { default as IconInfo } from './IconInfo.svelte';
+export { default as IconMastodon } from './IconMastodon.svelte';
+export { default as NavBar } from './NavBar.svelte';
+export { default as Navigation } from './Navigation.svelte';
+export { default as DataTable } from './DataTable.svelte';
+export { default as IconMore } from './IconMoreSign.svelte';
+export { default as IconFloppyDisk } from './IconFloppyDisk.svelte';
+export { default as IconTrashCan } from './IconTrashCan.svelte';
+export { default as Alert } from './Alert.svelte';
+export { default as IconIrocoLogo } from './IconIrocoLogo.svelte';
+export { default as IrocoLogo } from './IrocoLogo.svelte';
+export * from './definition';

package/index.js

@@ -0,0 +1,18 @@
+import './scss/style.scss';
+export { default as Button } from './Button.svelte';
+export { default as TextInput } from './TextInput.svelte';
+export { default as RadioButton } from './RadioButton.svelte';
+export { default as NumberInput } from './NumberInput.svelte';
+export { default as Loader } from './Loader.svelte';
+export { default as IconInfo } from './IconInfo.svelte';
+export { default as IconMastodon } from './IconMastodon.svelte';
+export { default as NavBar } from './NavBar.svelte';
+export { default as Navigation } from './Navigation.svelte';
+export { default as DataTable } from './DataTable.svelte';
+export { default as IconMore } from './IconMoreSign.svelte';
+export { default as IconFloppyDisk } from './IconFloppyDisk.svelte';
+export { default as IconTrashCan } from './IconTrashCan.svelte';
+export { default as Alert } from './Alert.svelte';
+export { default as IconIrocoLogo } from './IconIrocoLogo.svelte';
+export { default as IrocoLogo } from './IrocoLogo.svelte';
+export * from './definition';

package/package.json

@@ -1,126 +1,84 @@
 {
   "name": "@iroco/ui",
-  "version": "0.21.0",
+  "version": "0.50.0",
   "description": "Iroco design system based on Svelte",
-  "main": "lib/index.js",
-  "module": "lib/index.mjs",
-  "svelte": "src/index.ts",
-  "files": [
-    "lib",
-    "src",
-    "scss"
-  ],
-  "scripts": {
-    "test": "jest",
-    "test:watch": "npm run test -- --watch",
-    "build:scripts": "rollup -c",
-    "lint": "eslint --max-warnings 3 --ignore-path .gitignore .",
-    "copy:styles": "rsync -av --include='*/' --include='**/*.scss' --exclude='*' ./scss/ ./lib/",
-    "build": "npm run build:scripts && npm run copy:styles && sass ./scss/iroco.scss ./lib/iroco.css",
-    "copy-docs": "rsync -av docs/__DOCS__/dist/iroco-ui/* ../iroco-ui-docs",
-    "dev": "rollup -c -w",
-    "release": "npm run build && release-it",
-    "prepare": "husky install",
-    "clean": "rm -rf lib .svelte-kit"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/iroco-co/iroco-ui.git"
-  },
-  "keywords": [
-    "iroco",
-    "design",
-    "system",
-    "svelte",
-    "components"
-  ],
-  "author": "Iroco",
-  "license": "ISC",
-  "bugs": {
-    "url": "https://github.com/iroco-co/iroco-ui/issues"
-  },
-  "homepage": "https://github.com/iroco-co/iroco-ui#readme",
+  "main": "lib/index.ts",
+  "svelte": "index.js",
   "devDependencies": {
-    "@babel/core": "^7.14.6",
-    "@babel/preset-env": "^7.14.5",
-    "@rollup/plugin-commonjs": "^19.0.0",
-    "@rollup/plugin-node-resolve": "^13.0.0",
-    "@rollup/plugin-typescript": "^8.2.1",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/svelte": "^3.0.3",
-    "@testing-library/user-event": "^13.1.9",
-    "@tsconfig/svelte": "^2.0.1",
-    "@types/feather-icons": "^4.7.0",
-    "@typescript-eslint/eslint-plugin": "^4.31.2",
-    "@typescript-eslint/parser": "^4.31.2",
-    "babel-jest": "^27.0.2",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-jest": "^24.4.2",
-    "eslint-plugin-svelte3": "^3.2.1",
-    "gh-pages": "^3.2.3",
-    "husky": "^7.0.2",
-    "jest": "^26.6.3",
-    "lint-staged": "^11.1.2",
-    "node-sass": "^7.0.1",
-    "npm-watch": "^0.10.0",
-    "prettier": "^2.3.1",
-    "prettier-plugin-svelte": "^2.3.0",
-    "release-it": "^14.9.0",
-    "rollup": "^2.52.1",
-    "rollup-plugin-scss": "^2.6.1",
-    "rollup-plugin-svelte": "^7.1.0",
-    "rollup-plugin-terser": "^7.0.2",
-    "sass": "^1.35.1",
-    "svelte": "^3.38.2",
-    "svelte-jester": "^1.7.0",
-    "svelte-preprocess": "^4.7.3",
-    "ts-jest": "^26.5.5",
-    "typescript": "^4.3.3"
+    "@sveltejs/adapter-auto": "^1.0.0",
+    "@sveltejs/kit": "^1.0.0",
+    "@sveltejs/package": "^1.0.0",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/svelte": "^3.2.2",
+    "@testing-library/user-event": "^14.4.3",
+    "@typescript-eslint/eslint-plugin": "^5.45.0",
+    "@typescript-eslint/parser": "^5.45.0",
+    "eslint": "^8.28.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-storybook": "^0.6.8",
+    "eslint-plugin-svelte3": "^4.0.0",
+    "jsdom": "^20.0.3",
+    "lint-staged": "^13.1.0",
+    "prettier": "^2.8.0",
+    "prettier-plugin-svelte": "^2.8.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "sass": "^1.57.0",
+    "storybook": "^7.0.0-beta.12",
+    "storybook-dark-mode": "^2.0.4",
+    "svelte": "^3.54.0",
+    "svelte-check": "^2.9.2",
+    "testing-library": "^0.0.2",
+    "tslib": "^2.4.1",
+    "typescript": "^4.9.3",
+    "vite": "^4.0.0",
+    "vitest": "^0.25.3"
   },
   "peerDependencies": {
-    "svelte": ">=3.38.2"
+    "svelte": "^3.54.0"
   },
   "lint-staged": {
     "*.{js,ts,svelte}": [
       "eslint"
     ]
   },
-  "jest": {
-    "rootDir": "test",
-    "transform": {
-      "^.+\\.svelte$": [
-        "svelte-jester",
-        {
-          "preprocess": true
-        }
-      ],
-      "^.+\\.js$": "babel-jest",
-      "^.+\\.ts$": "ts-jest"
-    },
-    "testEnvironment": "jsdom",
-    "moduleFileExtensions": [
-      "js",
-      "ts",
-      "svelte"
-    ],
-    "setupFilesAfterEnv": [
-      "@testing-library/jest-dom/extend-expect"
-    ],
-    "moduleNameMapper": {
-      "^.+\\.(css|less|scss)$": "babel-jest"
-    }
-  },
-  "watch": {
-    "build": {
-      "patterns": [
-        "src"
-      ],
-      "extensions": "svelte,scss,ts"
-    },
-    "quiet": false
-  },
-  "dependencies": {
-    "feather-icons": "^4.28.0"
+  "type": "module",
+  "exports": {
+    "./package.json": "./package.json",
+    "./Alert.svelte": "./Alert.svelte",
+    "./Button.svelte": "./Button.svelte",
+    "./DataTable.svelte": "./DataTable.svelte",
+    "./IconBurger.svelte": "./IconBurger.svelte",
+    "./IconClose.svelte": "./IconClose.svelte",
+    "./IconFloppyDisk.svelte": "./IconFloppyDisk.svelte",
+    "./IconInfo.svelte": "./IconInfo.svelte",
+    "./IconIrocoLogo.svelte": "./IconIrocoLogo.svelte",
+    "./IconMastodon.svelte": "./IconMastodon.svelte",
+    "./IconMoreSign.svelte": "./IconMoreSign.svelte",
+    "./IconTrashCan.svelte": "./IconTrashCan.svelte",
+    "./IrocoLogo.svelte": "./IrocoLogo.svelte",
+    "./Loader.svelte": "./Loader.svelte",
+    "./NavBar.svelte": "./NavBar.svelte",
+    "./Navigation.svelte": "./Navigation.svelte",
+    "./NumberInput.svelte": "./NumberInput.svelte",
+    "./NumberInputSized.svelte": "./NumberInputSized.svelte",
+    "./RadioButton.svelte": "./RadioButton.svelte",
+    "./RadioButtonTest.svelte": "./RadioButtonTest.svelte",
+    "./SlottedComponentWrapper.svelte": "./SlottedComponentWrapper.svelte",
+    "./TextInput.svelte": "./TextInput.svelte",
+    "./TopBar.svelte": "./TopBar.svelte",
+    "./definition": "./definition.js",
+    ".": "./index.js",
+    "./scss/button.scss": "./scss/button.scss",
+    "./scss/check.scss": "./scss/check.scss",
+    "./scss/colors.scss": "./scss/colors.scss",
+    "./scss/constants.scss": "./scss/constants.scss",
+    "./scss/containers.scss": "./scss/containers.scss",
+    "./scss/fonts.scss": "./scss/fonts.scss",
+    "./scss/forms.scss": "./scss/forms.scss",
+    "./scss/iroco.scss": "./scss/iroco.scss",
+    "./scss/layouts.scss": "./scss/layouts.scss",
+    "./scss/loader.scss": "./scss/loader.scss",
+    "./scss/style.scss": "./scss/style.scss"
   }
-}
+}