this.gui 1.0.15 → 1.0.17

package/src/stories/Atoms/Label/Label.stories.jsx

@@ -1,41 +1,180 @@
-
+// src/stories/Atoms/Label/Label.stories.jsx
+import React from 'react';
 import { Label } from './Label';
+import './Label.css';
 
-// Storybook configuration for Label component
 export default {
   title: 'Atoms/Text/Label',
   component: Label,
-  parameters: {
-    layout: 'centered',
-  },
   argTypes: {
-    children: { control: 'text' },
+    text: {
+      control: 'text',
+      description: 'Text content of the label.',
+    },
+    color: {
+      control: {
+        type: 'select',
+        options: [
+          'primary',
+          'secondary',
+          'info',
+          'warning',
+          'alert',
+          'success',
+          'neutral',
+          'dark',
+          'classy-color-1',
+          'classy-color-2',
+          'classy-color-3',
+          'classy-color-4',
+          'classy-color-5',
+          'small-switch-color-1',
+          'small-switch-color-2',
+          'natural-color-1',
+          'natural-color-2',
+          'natural-color-3',
+          'grey-friend-1',
+          'grey-friend-2',
+          'shade-1',
+          'shade-2',
+          'shade-3',
+          'shade-4',
+        ],
+      },
+      description: 'Color of the label.',
+    },
+    background: {
+      control: 'boolean',
+      description: 'Whether the label has a background.',
+    },
+    shape: {
+      control: {
+        type: 'select',
+        options: ['rounded', 'square', 'pill'],
+      },
+      description: 'Shape of the label.',
+    },
+    size: {
+      control: {
+        type: 'select',
+        options: ['xs', 'sm', 'md', 'lg', 'xl'],
+      },
+      description: 'Size of the label.',
+    },
+    className: {
+      control: 'text',
+      description: 'Additional CSS classes.',
+    },
+    style: {
+      control: 'object',
+      description: 'Inline styles.',
+    },
   },
 };
 
-export const Primary = {
-  args: {
-    primary: true,
-    children: 'This is a primary Label',
-  },
-};
+/**
+ * Primary Label with Background
+ */
+export const PrimaryLabel = () => (
+  <Label
+    text="Primary Label"
+    color="primary"
+    background={true}
+    shape="pill"
+    size="md"
+  />
+);
 
-export const Secondary = {
-  args: {
-    children: 'This is a secondary Label',
-  },
-};
+/**
+ * Secondary Label without Background
+ */
+export const SecondaryLabel = () => (
+  <Label
+    text="Secondary Label"
+    color="secondary"
+    background={false}
+    shape="rounded"
+    size="md"
+  />
+);
 
-export const Large = {
-  args: {
-    size: 'large',
-    children: 'This is a large Label',
-  },
-};
+/**
+ * All Color Variations
+ */
+export const AllColors = () => (
+  <div className="label-colors">
+    {[
+      'primary',
+      'secondary',
+      'info',
+      'warning',
+      'alert',
+      'success',
+      'neutral',
+      'dark',
+      'classy-color-1',
+      'classy-color-2',
+      'classy-color-3',
+      'classy-color-4',
+      'classy-color-5',
+      'small-switch-color-1',
+      'small-switch-color-2',
+      'natural-color-1',
+      'natural-color-2',
+      'natural-color-3',
+      'grey-friend-1',
+      'grey-friend-2',
+      'shade-1',
+      'shade-2',
+      'shade-3',
+      'shade-4',
+    ].map((color) => (
+      <Label
+        key={color}
+        text={color}
+        color={color}
+        background={color !== 'secondary'}
+        shape="rounded"
+        size="sm"
+      />
+    ))}
+  </div>
+);
 
-export const Small = {
-  args: {
-    size: 'small',
-    children: 'This is a small Label',
-  },
+/**
+ * Label Shapes
+ */
+export const LabelShapes = () => (
+  <div className="label-shapes">
+    <Label text="Rounded" color="info" background={true} shape="rounded" size="md" />
+    <Label text="Square" color="warning" background={true} shape="square" size="md" />
+    <Label text="Pill" color="success" background={true} shape="pill" size="md" />
+  </div>
+);
+
+/**
+ * Label Sizes
+ */
+export const LabelSizes = () => (
+  <div className="label-sizes">
+    <Label text="XS" color="neutral" background={true} shape="rounded" size="xs" />
+    <Label text="SM" color="neutral" background={true} shape="rounded" size="sm" />
+    <Label text="MD" color="neutral" background={true} shape="rounded" size="md" />
+    <Label text="LG" color="neutral" background={true} shape="rounded" size="lg" />
+    <Label text="XL" color="neutral" background={true} shape="rounded" size="xl" />
+  </div>
+);
+
+/**
+ * Interactive Label
+ */
+const Template = (args) => <Label {...args} />;
+
+export const InteractiveLabel = Template.bind({});
+InteractiveLabel.args = {
+  text: 'Interactive Label',
+  color: 'primary',
+  background: true,
+  shape: 'pill',
+  size: 'md',
 };

package/src/stories/Atoms/Link/Link.css

@@ -1,29 +1,71 @@
+/* src/stories/Atoms/Link/Link.css */
 
 .link {
-  padding: 16px;
-  border-radius: 8px;
-  background-color: #f0f0f0;
-  border: 1px solid #ddd;
+  color: var(--link-color);
+  font-size: var(--font-size-base);
+  font-family: var(--font-family);
+  transition: color var(--transition-speed) ease, text-decoration var(--transition-speed) ease;
 }
 
-.link--primary {
-  background-color: #e3f2fd;
-  border-color: #1e88e5;
+.link--underline {
+  text-decoration: underline;
 }
 
-.link--secondary {
-  background-color: #fff;
-  border-color: #ccc;
+.link--no-underline {
+  text-decoration: none;
+}
+
+.link--bold {
+  font-weight: var(--font-weight-bold);
+}
+
+.link--external {
+  display: inline-flex;
+  align-items: center;
+}
+
+.link__external-icon {
+  margin-left: 0.25em;
+  font-size: 0.8em;
+}
+
+.link:hover {
+  color: var(--link-hover-color);
 }
 
-.link--small {
-  padding: 8px;
+.link:hover.text-decoration {
+  text-decoration: underline;
+}
+
+/* Experimental Preview Styles */
+.link__preview {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90%;
+  max-width: 700px;
+  height: 90%;
+  max-height: 500px;
+  background-color: #fff;
+  border: 2px solid var(--primary-color);
+  box-shadow: var(--box-shadow);
+  z-index: var(--z-index-modal);
+  overflow: hidden;
 }
 
-.link--medium {
-  padding: 16px;
+.link__preview-iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
 }
 
-.link--large {
-  padding: 32px;
+/* Responsive */
+@media (max-width: 768px) {
+  .link__preview {
+    width: 95%;
+    height: 80%;
+    max-width: 90%;
+    max-height: 400px;
+  }
 }

package/src/stories/Atoms/Link/Link.jsx

@@ -1,41 +1,82 @@
-
-import React from 'react';
+// src/stories/Atoms/Link/Link.jsx
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import './Link.css';
 
-/**
- * Link component for user interaction
- */
-export const Link = ({ primary, size, children, ...props }) => {
-  const mode = primary ? 'link--primary' : 'link--secondary';
+export const Link = ({
+  text,
+  href,
+  underline = true,
+  bold = false,
+  newWindow = false,
+  external = false,
+  experimentalPreview = false,
+  className = '',
+  style = {},
+  ...props
+}) => {
+  const [showPreview, setShowPreview] = useState(false);
+
+  const handleMouseDown = () => {
+    if (experimentalPreview) {
+      setShowPreview(true);
+    }
+  };
+
+  const handleMouseUp = () => {
+    if (experimentalPreview) {
+      setShowPreview(false);
+    }
+  };
+
+  const linkClasses = classNames('link', className, {
+    'link--underline': underline,
+    'link--no-underline': !underline,
+    'link--bold': bold,
+    'link--external': external,
+  });
+
   return (
-    <div
-      className={['link', `link--${size}`, mode].join(' ')}
-      {...props}
-    >
-      {children}
-    </div>
+    <>
+      <a
+        href={href}
+        className={linkClasses}
+        target={newWindow ? '_blank' : '_self'}
+        rel={newWindow ? 'noopener noreferrer' : undefined}
+        onMouseDown={handleMouseDown}
+        onMouseUp={handleMouseUp}
+        onBlur={() => setShowPreview(false)}
+        {...props}
+      >
+        {text} {external && <span className="link__external-icon">🔗</span>}
+      </a>
+      {showPreview && (
+        <div className="link__preview">
+          <iframe src={href} title="Preview" className="link__preview-iframe" />
+        </div>
+      )}
+    </>
   );
 };
 
 Link.propTypes = {
-  /**
-   * Is this the primary style for the component?
-   */
-  primary: PropTypes.bool,
-  /**
-   * Size of the component
-   */
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
-  /**
-   * Content to be rendered inside the component
-   */
-  children: PropTypes.node.isRequired,
-};
-
-Link.defaultProps = {
-  primary: false,
-  size: 'medium',
+  /** Text content of the link */
+  text: PropTypes.string.isRequired,
+  /** URL the link points to */
+  href: PropTypes.string.isRequired,
+  /** Whether the link is underlined */
+  underline: PropTypes.bool,
+  /** Whether the link text is bold */
+  bold: PropTypes.bool,
+  /** Whether the link opens in a new window */
+  newWindow: PropTypes.bool,
+  /** Whether the link is external */
+  external: PropTypes.bool,
+  /** Enable experimental preview on press */
+  experimentalPreview: PropTypes.bool,
+  /** Additional CSS classes */
+  className: PropTypes.string,
+  /** Inline styles */
+  style: PropTypes.object,
 };
-
-export default Link;

package/src/stories/Atoms/Link/Link.stories.jsx

@@ -1,41 +1,153 @@
-
+// src/stories/Atoms/Link/Link.stories.jsx
+import React from 'react';
 import { Link } from './Link';
+import './Link.css';
 
-// Storybook configuration for Link component
 export default {
-  title: 'Atoms/Interactive/Link',
+  title: 'Atoms/Text/Link',
   component: Link,
-  parameters: {
-    layout: 'centered',
-  },
   argTypes: {
-    children: { control: 'text' },
+    text: {
+      control: 'text',
+      description: 'Text content of the link.',
+    },
+    href: {
+      control: 'text',
+      description: 'URL the link points to.',
+    },
+    underline: {
+      control: 'boolean',
+      description: 'Whether the link is underlined.',
+    },
+    bold: {
+      control: 'boolean',
+      description: 'Whether the link text is bold.',
+    },
+    newWindow: {
+      control: 'boolean',
+      description: 'Whether the link opens in a new window.',
+    },
+    external: {
+      control: 'boolean',
+      description: 'Whether the link is external.',
+    },
+    experimentalPreview: {
+      control: 'boolean',
+      description: 'Enable experimental preview on press.',
+    },
+    className: {
+      control: 'text',
+      description: 'Additional CSS classes.',
+    },
+    style: {
+      control: 'object',
+      description: 'Inline styles.',
+    },
   },
 };
 
-export const Primary = {
-  args: {
-    primary: true,
-    children: 'This is a primary Link',
-  },
-};
+/**
+ * Default Link
+ */
+export const DefaultLink = () => (
+  <Link
+    text="Visit Neurons.me"
+    href="https://neurons.me"
+    underline={true}
+    bold={false}
+    newWindow={false}
+    external={false}
+    experimentalPreview={false}
+  />
+);
 
-export const Secondary = {
-  args: {
-    children: 'This is a secondary Link',
-  },
-};
+/**
+ * Underlined and Bold Link
+ */
+export const UnderlinedBoldLink = () => (
+  <Link
+    text="Bold & Underlined Link"
+    href="https://neurons.me"
+    underline={true}
+    bold={true}
+    newWindow={false}
+    external={false}
+    experimentalPreview={false}
+  />
+);
 
-export const Large = {
-  args: {
-    size: 'large',
-    children: 'This is a large Link',
-  },
-};
+/**
+ * No Underline, Not Bold Link
+ */
+export const NoUnderlineNotBoldLink = () => (
+  <Link
+    text="Simple Link"
+    href="https://neurons.me"
+    underline={false}
+    bold={false}
+    newWindow={false}
+    external={false}
+    experimentalPreview={false}
+  />
+);
 
-export const Small = {
-  args: {
-    size: 'small',
-    children: 'This is a small Link',
-  },
+/**
+ * Open in New Window Link
+ */
+export const OpenInNewWindow = () => (
+  <Link
+    text="Open in New Window"
+    href="https://neurons.me"
+    underline={true}
+    bold={false}
+    newWindow={true}
+    external={false}
+    experimentalPreview={false}
+  />
+);
+
+/**
+ * External Link with Notification
+ */
+export const ExternalLink = () => (
+  <Link
+    text="External Link"
+    href="https://external.com"
+    underline={true}
+    bold={false}
+    newWindow={true}
+    external={true}
+    experimentalPreview={false}
+  />
+);
+
+/**
+ * Experimental Preview Link
+ */
+export const ExperimentalPreview = () => (
+  <Link
+    text="Preview Link"
+    href="https://neurons.me"
+    underline={true}
+    bold={false}
+    newWindow={false}
+    external={false}
+    experimentalPreview={true}
+  />
+);
+
+/**
+ * Interactive Link
+ */
+const Template = (args) => <Link {...args} />;
+
+export const InteractiveLink = Template.bind({});
+InteractiveLink.args = {
+  text: 'Interactive Link',
+  href: 'https://neurons.me',
+  underline: true,
+  bold: true,
+  newWindow: true,
+  external: true,
+  experimentalPreview: true,
 };