@repobit/dex-system-design 0.21.2 → 0.22.0

package/src/components/input/custom-form.stories.js

@@ -1,17 +1,159 @@
 import { html } from 'lit';
-
 import '../dropdown/dropdown.js';
 import './input-clipboard.js';
 import './input.js';
 
-
 export default {
-  title: 'Components/Form Inputs and Dropdown'
+  title: 'Components/Form Inputs and Dropdown',
+  tags : ['autodocs']
+};
+
+// ---------- INPUT COMPONENT ----------
+const InputTemplate = (args) => {
+  return html`
+    <bd-custom-input
+      label="${args.label}"
+      type="${args.type}"
+      placeholder="${args.placeholder}"
+      kind="${args.kind}"
+      ?required="${args.required}"
+      ?focused="${args.focused}"
+      ?invalid="${args.invalid}"
+      ?validated="${args.validated}"
+      ?disabled="${args.disabled}"
+      tooltip="${args.tooltip}"
+    ></bd-custom-input>
+  `;
+};
+
+export const Input = InputTemplate.bind({});
+Input.args = {
+  label      : 'Nume complet',
+  type       : 'text',
+  placeholder: 'Introdu numele tău',
+  kind       : 'sm',
+  required   : false,
+  focused    : false,
+  invalid    : false,
+  validated  : false,
+  disabled   : false,
+  tooltip    : ''
+};
+
+Input.argTypes = {
+  label: { control: 'text' },
+  type : {
+    control: { type: 'select' },
+    options: ['text', 'email', 'password', 'number', 'tel']
+  },
+  placeholder: { control: 'text' },
+  kind       : {
+    control: { type: 'select' },
+    options: ['sm', 'md', 'lg']
+  },
+  required : { control: 'boolean' },
+  focused  : { control: 'boolean' },
+  invalid  : { control: 'boolean' },
+  validated: { control: 'boolean' },
+  disabled : { control: 'boolean' },
+  tooltip  : { control: 'text' }
+};
+
+Input.parameters = {
+  docs: {
+    description: {
+      component: 'Custom input component with various states and sizes.'
+    }
+  }
+};
+
+// ---------- DROPDOWN COMPONENT ----------
+const DropdownTemplate = (args) => {
+  return html`
+    <bd-custom-dropdown
+      label="${args.label}"
+      kind="${args.kind}"
+      options='${JSON.stringify(args.options)}'
+      tooltip="${args.tooltip}"
+    ></bd-custom-dropdown>
+  `;
+};
+
+export const Dropdown = DropdownTemplate.bind({});
+Dropdown.args = {
+  label  : 'Select size',
+  kind   : 'md',
+  options: ['Small', 'Medium', 'Large'],
+  tooltip: 'Choose an option'
+};
+
+Dropdown.argTypes = {
+  label: { control: 'text' },
+  kind : {
+    control: { type: 'select' },
+    options: ['sm', 'md', 'lg']
+  },
+  options: { control: 'object' },
+  tooltip: { control: 'text' }
 };
 
-// ---------- INPUT ----------
-export const Inputs = () => html`
-  <div style="display: grid; gap: 1rem; max-width: 400px;">
+Dropdown.parameters = {
+  docs: {
+    description: {
+      component: 'Custom dropdown component with configurable options.'
+    }
+  }
+};
+
+// ---------- INPUT CLIPBOARD COMPONENT ----------
+const InputClipboardTemplate = (args) => {
+  return html`
+    <bd-custom-input-clipboard
+      label="${args.label}"
+      kind="${args.kind}"
+      placeholder="${args.placeholder}"
+      value="${args.value}"
+      ?disabled="${args.disabled}"
+      tooltip="${args.tooltip}"
+    ></bd-custom-input-clipboard>
+  `;
+};
+
+export const InputClipboard = InputClipboardTemplate.bind({});
+InputClipboard.args = {
+  label      : 'Token',
+  kind       : 'sm',
+  placeholder: 'Paste token here',
+  value      : '',
+  disabled   : false,
+  tooltip    : ''
+};
+
+InputClipboard.argTypes = {
+  label: { control: 'text' },
+  kind : {
+    control: { type: 'select' },
+    options: ['sm', 'md', 'lg']
+  },
+  placeholder: { control: 'text' },
+  value      : { control: 'text' },
+  disabled   : { control: 'boolean' },
+  tooltip    : { control: 'text' }
+};
+
+InputClipboard.parameters = {
+  docs: {
+    description: {
+      component: 'Input field with clipboard functionality for easy copy/paste.'
+    }
+  }
+};
+
+// ---------- SHOWCASE STORIES ----------
+export const InputsShowcase = () => html`
+  <div style="display: grid; gap: 1rem; max-width: 400px; margin: 2rem auto;">
+    <h3>Input Variants</h3>
+    
     <bd-custom-input 
       label="Nume complet" 
       placeholder="Introdu numele tău" 
@@ -57,9 +199,10 @@ export const Inputs = () => html`
   </div>
 `;
 
-// ---------- DROPDOWN ----------
-export const Dropdowns = () => html`
-  <div style="display: grid; gap: 1rem; max-width: 400px;">
+export const DropdownsShowcase = () => html`
+  <div style="display: grid; gap: 1rem; max-width: 400px; margin: 2rem auto;">
+    <h3>Dropdown Variants</h3>
+    
     <bd-custom-dropdown 
       label="Select size" 
       kind="md" 
@@ -76,9 +219,10 @@ export const Dropdowns = () => html`
   </div>
 `;
 
-// ---------- INPUT CLIPBOARD ----------
-export const InputClipboard = () => html`
-  <div style="display: grid; gap: 1rem; max-width: 400px;">
+export const InputClipboardShowcase = () => html`
+  <div style="display: grid; gap: 1rem; max-width: 400px; margin: 2rem auto;">
+    <h3>Input Clipboard</h3>
+    
     <bd-custom-input-clipboard 
       label="Token" 
       kind="sm" 
@@ -86,3 +230,56 @@ export const InputClipboard = () => html`
     </bd-custom-input-clipboard>
   </div>
 `;
+
+// ---------- COMBINED FORM EXAMPLE ----------
+export const FormExample = () => html`
+  <div style="max-width: 500px; margin: 2rem auto; padding: 2rem; border: 1px solid #e0e0e0; border-radius: 8px;">
+    <h3 style="margin-top: 0;">Complete Form Example</h3>
+    
+    <div style="display: grid; gap: 1.5rem;">
+      <bd-custom-input 
+        label="Full Name" 
+        placeholder="John Doe" 
+        kind="md" 
+        required>
+      </bd-custom-input>
+
+      <bd-custom-input 
+        label="Email Address" 
+        type="email" 
+        placeholder="john@example.com" 
+        kind="md" 
+        required>
+      </bd-custom-input>
+
+      <bd-custom-dropdown 
+        label="Country" 
+        kind="md" 
+        options='["Select a country", "United States", "Canada", "United Kingdom", "Germany", "France"]'
+        required>
+      </bd-custom-dropdown>
+
+      <bd-custom-input-clipboard 
+        label="API Token" 
+        kind="md" 
+        placeholder="Click to paste your token"
+        tooltip="Copy your API token from your account settings">
+      </bd-custom-input-clipboard>
+
+      <div style="display: flex; gap: 1rem; margin-top: 1rem;">
+        <bd-button 
+          label="Submit" 
+          size="md" 
+          kind="primary"
+          strong>
+        </bd-button>
+        
+        <bd-button 
+          label="Cancel" 
+          size="md" 
+          kind="outline">
+        </bd-button>
+      </div>
+    </div>
+  </div>
+`;

package/src/components/link/link.css.js

@@ -43,8 +43,8 @@ export default css`
   }
 
   .bd-link--light:hover {
-    color: var(--color-neutral-0); /* Rămâne albă */
-    text-decoration: none; /* Fără underline */
+    color: var(--color-neutral-0);
+    text-decoration: none;
   }
 
   /* Danger */