do-ui-design-system 0.0.10 → 0.0.12

package/dist/components/atoms/Button/Button.stories.svelte

@@ -0,0 +1,92 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Button from './Button.svelte';
+	import { fn } from '@storybook/test';
+	import type { ArgTypes, Args } from '@storybook/core/types';
+
+	const colorOptions = ['btn-primary', 'btn-secondary', 'btn-accent', 'btn-neutral'];
+	const sizeOptions = ['btn-sm', 'btn-md', 'btn-lg'];
+	// const typeOptions = ['rounded'];
+
+	const { Story } = defineMeta({
+		title: 'DO - Sistema de diseño/Átomos/Botón',
+		component: Button,
+		tags: ['autodocs'],
+		parameters: {
+			docs: {
+				toc: {
+					disable: true // 👈 Disables the table of contents
+				}
+			}
+		}
+	});
+	const argTypes: ArgTypes = {
+		label: {
+			control: { type: 'text' },
+			description: 'Texto del botón'
+		},
+		color: {
+			control: { type: 'radio' },
+			options: colorOptions,
+			description: 'Color del botón'
+		},
+		size: {
+			control: { type: 'radio' },
+			options: sizeOptions,
+			description: 'Tamaño del botón'
+		},
+		disabled: {
+			control: { type: 'boolean' },
+			description: 'Deshabilitar el botón'
+		},
+		loading: {
+			control: { type: 'boolean' },
+			description: 'Mostrar el estado de carga'
+		},
+		type: {
+			control: { type: 'radio' },
+			options: ['button', 'submit', 'reset'],
+			description: 'Tipo de botón'
+		}
+	};
+	const args: Args = {
+		size: 'btn-md',
+		label: 'Botón',
+		color: 'btn-primary',
+		type: 'button',
+		disabled: false,
+		loading: false
+	};
+	const colors = [
+		{ color: 'btn-primary', label: 'Primary', size: 'btn-md' },
+		{ color: 'btn-secondary', label: 'Secondary', size: 'btn-md' },
+		{ color: 'btn-neutral', label: 'Neutral', size: 'btn-md' },
+		{ color: 'btn-accent', label: 'Accent', size: 'btn-md' }
+	] as const;
+</script>
+
+<Story name="Botón" {argTypes} {args} />
+
+<Story name="Colores" parameters={{ controls: { disable: true } }}>
+	<div class="margin mb-4 flex flex-row gap-[2rem]">
+		{#each colors as { color, label, size }}
+			<Button {color} {size} {label} on:click={()=> args.onClick()} />
+		{/each}
+	</div>
+</Story>
+
+<Story name="Modo: disabled" parameters={{ controls: { disable: true } }}>
+	<div class="margin mb-4 flex flex-row gap-[2rem]">
+		{#each colors as { color, label, size }}
+			<Button {color} {size} {label} onClick={fn()} disabled={true} />
+		{/each}
+	</div>
+</Story>
+
+<Story name="Modo: loading" parameters={{ controls: { disable: true } }}>
+	<div class="margin mb-4 flex flex-row gap-[2rem]">
+		{#each colors as { color, label, size }}
+			<Button {color} {size} loading {label} onClick={fn()} />
+		{/each}
+	</div>
+</Story>

package/dist/components/atoms/Button/Button.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import Button from './Button.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Button: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Button = InstanceType<typeof Button>;
+export default Button;

package/dist/{atoms → components/atoms}/Icons/Icon.svelte.d.ts

@@ -22,7 +22,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
  */
 declare const Icon: $$__sveltets_2_IsomorphicComponent<{
     [x: string]: any;
-    name?: iProps["name"] | undefined;
+    name?: iProps["name"];
     color?: string | undefined;
     size?: string | undefined;
 }, {

package/dist/components/atoms/Icons/Icons.stories.svelte

@@ -0,0 +1,50 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import type { ArgTypes, Args } from '@storybook/core/types';
+  import Icon from './Icon.svelte';
+  import iconList from "../../../do-theme/icomoon/iconList.ts";
+
+  const colorOptions = ['text-red-600', 'text-zinc-600', 'text-green-600', 'text-blue-600'];
+	const sizeOptions = ['text-xs', 'text-sm', 'text-base', 'text-lg', 'text-xl', 'text-2xl', 'text-3xl'];
+
+  const { Story } = defineMeta({
+    title: 'DO - Sistema de diseño/Átomos/Íconos',
+    component: Icon,
+    tags: ['autodocs'],
+    parameters:{ 
+      docs: {
+        source: {
+          code: `
+          <i class="icon-name some-tw-text-size some-tw-text-color"></i>
+          `
+        }
+      }
+    }
+  });
+
+  const argTypes: ArgTypes = {
+    name: {
+      control: { type: 'select' }
+    },
+    color: {
+      control: { type: 'select' },
+      defaultValue: 'text-red-600',
+      options: colorOptions
+    },
+    size: {
+      control: { type: 'select' },
+      options: sizeOptions
+    },
+  }
+</script>
+
+<Story name="Ícono" {argTypes} />
+
+
+<Story name="Listado" {argTypes} parameters={{ controls: { disable: true } }}>
+  <section class="flex flex-wrap gap-4">
+    {#each iconList as icon}
+      <Icon name={icon}/>
+    {/each}
+  </section>
+</Story>

package/dist/components/atoms/Icons/Icons.stories.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Icons: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Icons = InstanceType<typeof Icons>;
+export default Icons;

package/dist/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './atoms';
+export * from './molecules';

package/dist/components/index.js

@@ -0,0 +1,3 @@
+// src/lib/components/index.ts
+export * from './atoms';
+export * from './molecules';

package/dist/components/molecules/IconButton/IconButton.stories.svelte

@@ -0,0 +1,77 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import IconButton from './IconButton.svelte';
+	import { fn } from '@storybook/test';
+	import type { Args, ArgTypes } from '@storybook/core/types';
+
+	const colorOptions = ['btn-primary', 'btn-secondary', 'btn-accent', 'btn-neutral'];
+	const sizeOptions = ['btn-sm', 'btn-md', 'btn-lg'];
+
+	// const typeOptions = ['rounded'];
+
+	const { Story } = defineMeta({
+		title: 'DO - Sistema de diseño/Moléculas',
+		component: IconButton,
+		argTypes: {
+			label: {
+				control: { type: 'text' },
+				description: 'Texto del botón',
+			}
+		}
+	});
+	const argTypes: ArgTypes = {
+		disabled: {
+			control: { type: 'boolean' },
+			options: [true, false],
+			description: 'Deshabilitar el botón'
+		},
+		size: {
+			control: { type: 'radio' },
+			options: sizeOptions,
+			description: 'Tamaño del botón'
+		},
+		label: {
+			control: { type: 'text' },
+			description: 'Texto del botón'
+		},
+		color: {
+			control: { type: 'radio' },
+			options: colorOptions,
+			description: 'Color del botón'
+		},
+		onClick: {
+			action: 'clicked',
+			description: 'Función que se ejecuta al hacer clic en el botón',
+		},
+		iconPosition: {
+			control: { type: 'radio' },
+			options: ['start', 'end'],
+			description: 'Posición del ícono'
+		},
+		iconSize: {
+			control: { type: 'select' },
+			options: ['inherit', 'text-sm', 'text-md', 'text-lg', 'text-xl', 'text-2xl'],
+			description: 'Tamaño del ícono'
+		},
+		iconName: {
+			control: { type: 'select' },
+			description: 'Nombre del ícono'
+		},
+	};
+
+	const args: Args = {
+		color: 'btn-primary',
+		size: 'btn-md',
+		label: 'Botón ícono',
+		disabled: false,
+		onClick: fn(),
+		iconName: 'icon-arrow',
+		iconColor: 'inherit',
+		iconPosition: 'end',
+		type: 'button',
+		loading: false,
+		iconSize: 'inherit'
+	};
+</script>
+
+<Story name="Boton ícono" {argTypes} {args}/>

package/dist/components/molecules/IconButton/IconButton.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import IconButton from './IconButton.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const IconButton: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type IconButton = InstanceType<typeof IconButton>;
+export default IconButton;

package/dist/{molecules → components/molecules}/IconButton/iProps.d.ts

@@ -1,4 +1,4 @@
-import type { IconNames } from '../../do-theme/icomoon/iconList.ts';
+import type { IconNames } from '../../../do-theme/icomoon/iconList.ts';
 import type { HTMLButtonAttributes } from 'svelte/elements';
 export interface iProps extends HTMLButtonAttributes {
     color?: 'btn-primary' | 'btn-secondary' | 'btn-neutral' | 'btn-accent' | string;

package/dist/do-theme/index.css

@@ -1,5 +1,3 @@
-@plugin "daisyui";
-
 @import "./var-light.css";
 @import "./var-dark.css";
 @import "./button.css";