mertani-web-toolkit 0.1.21 → 0.1.23

package/dist/icons/index.js

@@ -0,0 +1,221 @@
+import BsActivity from './BsActivity.svelte';
+import BsArrow90degLeft from './BsArrow90degLeft.svelte';
+import BsArrow90degRight from './BsArrow90degRight.svelte';
+import BsArrowDownCircle from './BsArrowDownCircle.svelte';
+import BsArrowRepeat from './BsArrowRepeat.svelte';
+import BsArrowReturnLeft from './BsArrowReturnLeft.svelte';
+import BsArrowRightShort from './BsArrowRightShort.svelte';
+import BsArrowUpCircle from './BsArrowUpCircle.svelte';
+import BsBarChart from './BsBarChart.svelte';
+import BsBarChartLine from './BsBarChartLine.svelte';
+import BsBatteryHalf from './BsBatteryHalf.svelte';
+import BsBoxArrowInRight from './BsBoxArrowInRight.svelte';
+import BsBoxArrowLeft from './BsBoxArrowLeft.svelte';
+import BsBoxArrowRight from './BsBoxArrowRight.svelte';
+import BsBoxArrowUpRight from './BsBoxArrowUpRight.svelte';
+import BsCalendar from './BsCalendar.svelte';
+import BsCalendar3 from './BsCalendar3.svelte';
+import BsCalendar4 from './BsCalendar4.svelte';
+import BsCameraVideoOff from './BsCameraVideoOff.svelte';
+import BsCheck2Circle from './BsCheck2Circle.svelte';
+import BsCheckCircle from './BsCheckCircle.svelte';
+import BsCheckCircleFill from './BsCheckCircleFill.svelte';
+import BsCheckLg from './BsCheckLg.svelte';
+import BsChevronDown from './BsChevronDown.svelte';
+import BsChevronLeft from './BsChevronLeft.svelte';
+import BsChevronRight from './BsChevronRight.svelte';
+import BsChevronUp from './BsChevronUp.svelte';
+import BsClock from './BsClock.svelte';
+import BsClockHistory from './BsClockHistory.svelte';
+import BsCopy from './BsCopy.svelte';
+import BsDashLg from './BsDashLg.svelte';
+import BsDownload from './BsDownload.svelte';
+import BsExclamationCircle from './BsExclamationCircle.svelte';
+import BsExclamationOctagonFill from './BsExclamationOctagonFill.svelte';
+import BsExclamationTriangle from './BsExclamationTriangle.svelte';
+import BsEye from './BsEye.svelte';
+import BsFileText from './BsFileText.svelte';
+import BsFilter from './BsFilter.svelte';
+import BsFloppy from './BsFloppy.svelte';
+import BsFullscreen from './BsFullscreen.svelte';
+import BsFullscreenExit from './BsFullscreenExit.svelte';
+import BsGear from './BsGear.svelte';
+import BsGrid from './BsGrid.svelte';
+import BsGrid3x3Gap from './BsGrid3x3Gap.svelte';
+import BsHdd from './BsHdd.svelte';
+import BsCheckSquare from './BsCheckSquare.svelte';
+import BsImage from './BsImage.svelte';
+import BsInfoCircle from './BsInfoCircle.svelte';
+import BsInputPrefix from './BsInputPrefix.svelte';
+import BsLayoutSidebar from './BsLayoutSidebar.svelte';
+import BsList from './BsList.svelte';
+import BsMap from './BsMap.svelte';
+import BsNut from './BsNut.svelte';
+import BsPencil from './BsPencil.svelte';
+import BsPlusLg from './BsPlusLg.svelte';
+import BsSearch from './BsSearch.svelte';
+import BsSliders2Vertical from './BsSliders2Vertical.svelte';
+import BsTextCenter from './BsTextCenter.svelte';
+import BsTextLeft from './BsTextLeft.svelte';
+import BsTextRight from './BsTextRight.svelte';
+import BsThreeDots from './BsThreeDots.svelte';
+import BsThreeDotsVertical from './BsThreeDotsVertical.svelte';
+import BsTrash from './BsTrash.svelte';
+import BsTypeBold from './BsTypeBold.svelte';
+import BsTypeItalic from './BsTypeItalic.svelte';
+import BsTypeUnderline from './BsTypeUnderline.svelte';
+import BsUpload from './BsUpload.svelte';
+import BsViewStacked from './BsViewStacked.svelte';
+import BsXCircle from './BsXCircle.svelte';
+import BsXCircleFill from './BsXCircleFill.svelte';
+import BsXLg from './BsXLg.svelte';
+import BsXSquare from './BsXSquare.svelte';
+import ChevronDown from './ChevronDown.svelte';
+import CoGarisLurus from './CoGarisLurus.svelte';
+import CoLink from './CoLink.svelte';
+import CoPalawija from './CoPalawija.svelte';
+import CoPadi from './CoPadi.svelte';
+import CoTebu from './CoTebu.svelte';
+import GearTwo from './GearTwo.svelte';
+import Logout from './Logout.svelte';
+import MsArrowRange from './MsArrowRange.svelte';
+import MsControlCamera from './MsControlCamera.svelte';
+import MsGarageDoor from './MsGarageDoor.svelte';
+import MsGarageHome from './MsGarageHome.svelte';
+import MsGraph1 from './MsGraph1.svelte';
+import MsGridOn from './MsGridOn.svelte';
+import MsHighDensity from './MsHighDensity.svelte';
+import MsRoute from './MsRoute.svelte';
+import MsSpatialSpeaker from './MsSpatialSpeaker.svelte';
+import Sim_B_Bagi from './Sim_B_Bagi.svelte';
+import Sim_B_Bagi_Sadap from './Sim_B_Bagi_Sadap.svelte';
+import Sim_B_Intake_Bendung from './Sim_B_Intake_Bendung.svelte';
+import Sim_B_Sadap from './Sim_B_Sadap.svelte';
+import Sim_Box_Tersier from './Sim_Box_Tersier.svelte';
+import Sim_Freetext from './Sim_Freetext.svelte';
+import Sim_Gorong2 from './Sim_Gorong2.svelte';
+import Sim_Jembatan from './Sim_Jembatan.svelte';
+import Sim_Petak_Tersier from './Sim_Petak_Tersier.svelte';
+import Sim_Saluran_Pembuang from './Sim_Saluran_Pembuang.svelte';
+import Sim_Saluran_Primer from './Sim_Saluran_Primer.svelte';
+import Sim_Saluran_Sekunder from './Sim_Saluran_Sekunder.svelte';
+import Sim_Saluran_Tersier from './Sim_Saluran_Tersier.svelte';
+import Sim_Subskema from './Sim_Subskema.svelte';
+import Sim_Syphon from './Sim_Syphon.svelte';
+import Sim_Talang from './Sim_Talang.svelte';
+import Sim_Terowongan from './Sim_Terowongan.svelte';
+import User from './User.svelte';
+import Window from './Window.svelte';
+// Icon component map dengan nama custom
+export const iconMap = {
+    'bs-activity': BsActivity,
+    'bs-arrow-90deg-left': BsArrow90degLeft,
+    'bs-arrow-90deg-right': BsArrow90degRight,
+    'bs-arrow-down-circle': BsArrowDownCircle,
+    'bs-arrow-repeat': BsArrowRepeat,
+    'bs-arrow-return-left': BsArrowReturnLeft,
+    'bs-arrow-right-short': BsArrowRightShort,
+    'bs-arrow-up-circle': BsArrowUpCircle,
+    'bs-bar-chart': BsBarChart,
+    'bs-bar-chart-line': BsBarChartLine,
+    'bs-battery-half': BsBatteryHalf,
+    'bs-box-arrow-in-right': BsBoxArrowInRight,
+    'bs-box-arrow-left': BsBoxArrowLeft,
+    'bs-box-arrow-right': BsBoxArrowRight,
+    'bs-box-arrow-up-right': BsBoxArrowUpRight,
+    'bs-calendar': BsCalendar,
+    'bs-calendar3': BsCalendar3,
+    'bs-calendar4': BsCalendar4,
+    'bs-camera-video-off': BsCameraVideoOff,
+    'bs-check2-circle': BsCheck2Circle,
+    'bs-check-circle': BsCheckCircle,
+    'bs-check-circle-fill': BsCheckCircleFill,
+    'bs-check-lg': BsCheckLg,
+    'bs-chevron-down': BsChevronDown,
+    'bs-chevron-left': BsChevronLeft,
+    'bs-chevron-right': BsChevronRight,
+    'bs-chevron-up': BsChevronUp,
+    'bs-clock': BsClock,
+    'bs-clock-history': BsClockHistory,
+    'bs-copy': BsCopy,
+    'bs-dash-lg': BsDashLg,
+    'bs-download': BsDownload,
+    'bs-exclamation-circle': BsExclamationCircle,
+    'bs-exclamation-octagon-fill': BsExclamationOctagonFill,
+    'bs-exclamation-triangle': BsExclamationTriangle,
+    'bs-eye': BsEye,
+    'bs-file-text': BsFileText,
+    'bs-filter': BsFilter,
+    'bs-floppy': BsFloppy,
+    'bs-fullscreen': BsFullscreen,
+    'bs-fullscreen-exit': BsFullscreenExit,
+    'bs-gear': BsGear,
+    'bs-grid': BsGrid,
+    'bs-grid-3x3-gap': BsGrid3x3Gap,
+    'bs-hdd': BsHdd,
+    'bs-check-square': BsCheckSquare,
+    'bs-image': BsImage,
+    'bs-info-circle': BsInfoCircle,
+    'bs-input-prefix': BsInputPrefix,
+    'bs-layout-sidebar': BsLayoutSidebar,
+    'bs-list': BsList,
+    'bs-map': BsMap,
+    'bs-nut': BsNut,
+    'bs-pencil': BsPencil,
+    'bs-plus-lg': BsPlusLg,
+    'bs-search': BsSearch,
+    'bs-sliders2-vertical': BsSliders2Vertical,
+    'bs-text-center': BsTextCenter,
+    'bs-text-left': BsTextLeft,
+    'bs-text-right': BsTextRight,
+    'bs-three-dots': BsThreeDots,
+    'bs-three-dots-vertical': BsThreeDotsVertical,
+    'bs-trash': BsTrash,
+    'bs-type-bold': BsTypeBold,
+    'bs-type-italic': BsTypeItalic,
+    'bs-type-underline': BsTypeUnderline,
+    'bs-upload': BsUpload,
+    'bs-view-stacked': BsViewStacked,
+    'bs-x-circle': BsXCircle,
+    'bs-x-circle-fill': BsXCircleFill,
+    'bs-x-lg': BsXLg,
+    'bs-x-square': BsXSquare,
+    'chevron-down': ChevronDown,
+    'co-Garis_Lurus': CoGarisLurus,
+    'co-link': CoLink,
+    'co-Palawija': CoPalawija,
+    'co-Padi': CoPadi,
+    'co-Tebu': CoTebu,
+    'gear-two': GearTwo,
+    logout: Logout,
+    'ms-arrow_range': MsArrowRange,
+    'ms-control_camera': MsControlCamera,
+    'ms-garage_door': MsGarageDoor,
+    'ms-garage_home': MsGarageHome,
+    'ms-graph_1': MsGraph1,
+    'ms-grid_on': MsGridOn,
+    'ms-high_density': MsHighDensity,
+    'ms-route': MsRoute,
+    'ms-spatial_speaker': MsSpatialSpeaker,
+    'sim-b-bagi': Sim_B_Bagi,
+    'sim-b-bagi-sadap': Sim_B_Bagi_Sadap,
+    'sim-b-intake-bendung': Sim_B_Intake_Bendung,
+    'sim-b-sadap': Sim_B_Sadap,
+    'sim-box-tersier': Sim_Box_Tersier,
+    'sim-freetext': Sim_Freetext,
+    'sim-gorong2': Sim_Gorong2,
+    'sim-jembatan': Sim_Jembatan,
+    'sim-petak-tersier': Sim_Petak_Tersier,
+    'sim-saluran-pembuang': Sim_Saluran_Pembuang,
+    'sim-saluran-primer': Sim_Saluran_Primer,
+    'sim-saluran-sekunder': Sim_Saluran_Sekunder,
+    'sim-saluran-tersier': Sim_Saluran_Tersier,
+    'sim-subskema': Sim_Subskema,
+    'sim-syphon': Sim_Syphon,
+    'sim-talang': Sim_Talang,
+    'sim-terowongan': Sim_Terowongan,
+    user: User,
+    window: Window
+};
+// Export icon names untuk type safety
+export const IconNames = Object.keys(iconMap);

package/dist/index.d.ts

@@ -1,3 +1,3 @@
 export { default as Button } from './components/Button/Button.svelte';
-export { default as Header } from './components/Header/Header.svelte';
+export { default as Icon } from './components/Icon/Icon.svelte';
 export { default as IMSLayout1 } from './layouts/IMS/IMSLayout1/IMSLayout1.svelte';

package/dist/index.js

@@ -1,4 +1,4 @@
 // Reexport your entry components here
 export { default as Button } from './components/Button/Button.svelte';
-export { default as Header } from './components/Header/Header.svelte';
+export { default as Icon } from './components/Icon/Icon.svelte';
 export { default as IMSLayout1 } from './layouts/IMS/IMSLayout1/IMSLayout1.svelte';

package/dist/layouts/IMS/IMSLayout1/components/ImsSidebar.svelte

@@ -10,6 +10,7 @@
 	import { USER_ROLE_ADMIN, UserStore } from '../../../../stores/UserStore.js';
 	import { deleteCookie, USER_TOKEN } from '../../../../utils/Cookie.js';
 	import Window from '../../../../icons/Window.svelte';
+	import Icon from '../../../../components/Icon/Icon.svelte';
 
 	const {
 		show = $bindable(true),
@@ -183,7 +184,9 @@
 		onclick={onToggleSidebar}
 		class={`absolute top-1 right-2 flex h-10 w-10 items-center justify-center rounded-lg border border-transparent bg-[#fff] text-[#495057] transition hover:border-[#e0e0e0] hover:bg-[#f5f5f5]`}
 	>
-		<Window color={'currentColor'} width={20} height={20} rotate={showSidebar ? true : false} />
+		<div class={`transition-transform duration-300 ${show ? '' : 'rotate-180'}`}>
+			<Icon name="window" width={16} height={16} />
+		</div>
 	</button>
 
 	{#if show}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "mertani-web-toolkit",
-	"version": "0.1.21",
+	"version": "0.1.23",
 	"homepage": "https://storybook.mertani.com/",
 	"scripts": {
 		"dev": "vite dev",

package/dist/components/Header/Header.svelte

@@ -1,45 +0,0 @@
-<script lang="ts">
-	import Button from '../Button/Button.svelte';
-	import './header.css';
-
-	interface Props {
-		user?: { name: string };
-		onLogin?: () => void;
-		onLogout?: () => void;
-		onCreateAccount?: () => void;
-	}
-
-	const { user, onLogin, onLogout, onCreateAccount }: Props = $props();
-</script>
-
-<header>
-	<div class="storybook-header">
-		<div>
-			<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
-				<g fill="none" fill-rule="evenodd">
-					<path
-						d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
-						fill="#FFF"
-					/>
-					<path
-						d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
-						fill="#555AB9"
-					/>
-					<path d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z" fill="#91BAF8" />
-				</g>
-			</svg>
-			<h1>Acme</h1>
-		</div>
-		<div>
-			{#if user}
-				<span class="welcome">
-					Welcome, <b>{user.name}</b>!
-				</span>
-				<Button size="small" onclick={onLogout} label="Log out" />
-			{:else}
-				<Button size="small" onclick={onLogin} label="Log in" />
-				<Button primary size="small" onclick={onCreateAccount} label="Sign up" />
-			{/if}
-		</div>
-	</div>
-</header>

package/dist/components/Header/Header.svelte.d.ts

@@ -1,12 +0,0 @@
-import './header.css';
-interface Props {
-    user?: {
-        name: string;
-    };
-    onLogin?: () => void;
-    onLogout?: () => void;
-    onCreateAccount?: () => void;
-}
-declare const Header: import("svelte").Component<Props, {}, "">;
-type Header = ReturnType<typeof Header>;
-export default Header;

package/dist/components/Header/header.css

@@ -1,32 +0,0 @@
-.storybook-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  padding: 15px 20px;
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-}
-
-.storybook-header svg {
-  display: inline-block;
-  vertical-align: top;
-}
-
-.storybook-header h1 {
-  display: inline-block;
-  vertical-align: top;
-  margin: 6px 0 6px 10px;
-  font-weight: 700;
-  font-size: 20px;
-  line-height: 1;
-}
-
-.storybook-header button + button {
-  margin-left: 10px;
-}
-
-.storybook-header .welcome {
-  margin-right: 10px;
-  color: #333;
-  font-size: 14px;
-}