this.gui 1.0.18 → 1.1.0

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

@@ -1,180 +0,0 @@
-// src/stories/Atoms/Label/Label.stories.jsx
-import React from 'react';
-import { Label } from './Label';
-import './Label.css';
-
-export default {
-  title: 'Atoms/Text/Label',
-  component: Label,
-  argTypes: {
-    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.',
-    },
-  },
-};
-
-/**
- * Primary Label with Background
- */
-export const PrimaryLabel = () => (
-  <Label
-    text="Primary Label"
-    color="primary"
-    background={true}
-    shape="pill"
-    size="md"
-  />
-);
-
-/**
- * Secondary Label without Background
- */
-export const SecondaryLabel = () => (
-  <Label
-    text="Secondary Label"
-    color="secondary"
-    background={false}
-    shape="rounded"
-    size="md"
-  />
-);
-
-/**
- * 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>
-);
-
-/**
- * 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,51 +0,0 @@
-.link {
-  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;
-}
-
-/* Hover states */
-.link:hover {
-  color: var(--link-hover-color);
-  text-decoration: underline; /* Default hover behavior */
-}
-
-/* External link icon styling */
-.link__external-icon {
-  margin-left: 0.25em;
-  font-size: 0.8em;
-}
-
-/* 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__preview-iframe {
-  width: 100%;
-  height: 100%;
-  border: none;
-}
-
-/* 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,72 +0,0 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import './Link.css';
-
-export const Link = ({
-  text,
-  href,
-  underline = true, // Controls underline
-  bold = false,      // Controls bold text
-  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);
-    }
-  };
-
-  // Build dynamic inline styles based on props
-  const dynamicStyles = {
-    textDecoration: underline ? 'underline' : 'none',
-    fontWeight: bold ? 'bold' : 'normal',
-    ...style, // Include any additional styles passed via props
-  };
-
-  return (
-    <>
-      <a
-        href={href}
-        className={`link ${className}`} // Keep the base 'link' class for consistent styling
-        style={dynamicStyles} // Apply dynamic styles here
-        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 = {
-  text: PropTypes.string.isRequired,
-  href: PropTypes.string.isRequired,
-  underline: PropTypes.bool,
-  bold: PropTypes.bool,
-  newWindow: PropTypes.bool,
-  external: PropTypes.bool,
-  experimentalPreview: PropTypes.bool,
-  className: PropTypes.string,
-  style: PropTypes.object,
-};

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

@@ -1,153 +0,0 @@
-// src/stories/Atoms/Link/Link.stories.jsx
-import React from 'react';
-import { Link } from './Link';
-import './Link.css';
-
-export default {
-  title: 'Atoms/Text/Link',
-  component: Link,
-  argTypes: {
-    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.',
-    },
-  },
-};
-
-/**
- * Default Link
- */
-export const DefaultLink = () => (
-  <Link
-    text="Visit Neurons.me"
-    href="https://neurons.me"
-    underline={true}
-    bold={false}
-    newWindow={false}
-    external={false}
-    experimentalPreview={false}
-  />
-);
-
-/**
- * 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}
-  />
-);
-
-/**
- * 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}
-  />
-);
-
-/**
- * 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,
-};

package/src/stories/Atoms/Loader/Loader.css

@@ -1,106 +0,0 @@
-/* src/stories/Atoms/Loader/Loader.css */
-
-.loader {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.loader--spinner .loader__spinner {
-  border: 4px solid var(--loader-background-color, #f3f3f3);
-  border-top: 4px solid var(--loader-color, #1F877D);
-  border-radius: 50%;
-  width: var(--loader-size, 40px);
-  height: var(--loader-size, 40px);
-  animation: spin 1s linear infinite;
-}
-
-.loader--dots .loader__dots {
-  display: flex;
-  gap: 8px;
-}
-
-.loader--dots .loader__dot {
-  width: 12px;
-  height: 12px;
-  background-color: var(--loader-color, #1F877D);
-  border-radius: 50%;
-  animation: bounce 1.4s infinite ease-in-out both;
-}
-
-.loader--dots .loader__dot:nth-child(1) {
-  animation-delay: -0.32s;
-}
-
-.loader--dots .loader__dot:nth-child(2) {
-  animation-delay: -0.16s;
-}
-
-.loader--bars .loader__bars {
-  display: flex;
-  gap: 4px;
-}
-
-.loader--bars .loader__bar {
-  width: 4px;
-  height: 20px;
-  background-color: var(--loader-color, #1F877D);
-  animation: stretch 1.2s infinite ease-in-out;
-}
-
-.loader--bars .loader__bar:nth-child(1) {
-  animation-delay: -0.24s;
-}
-
-.loader--bars .loader__bar:nth-child(2) {
-  animation-delay: -0.12s;
-}
-
-.loader--size-sm .loader__spinner {
-  width: 20px;
-  height: 20px;
-  border-width: 2px;
-}
-
-.loader--size-md .loader__spinner {
-  width: 40px;
-  height: 40px;
-  border-width: 4px;
-}
-
-.loader--size-lg .loader__spinner {
-  width: 60px;
-  height: 60px;
-  border-width: 6px;
-}
-
-.loader--custom {
-  --loader-color: var(--loader-color, #1F877D);
-}
-
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-
-@keyframes bounce {
-  0%, 80%, 100% { transform: scale(0); }
-  40% { transform: scale(1); }
-}
-
-@keyframes stretch {
-  0%, 40%, 100% { transform: scaleY(0.4); }
-  20% { transform: scaleY(1); }
-}
-
-/* Color Variants */
-.loader--primary .loader__spinner,
-.loader--primary .loader__dot,
-.loader--primary .loader__bar {
-  --loader-color: #1F877D;
-}
-
-.loader--secondary .loader__spinner,
-.loader--secondary .loader__dot,
-.loader--secondary .loader__bar {
-  --loader-color: #39a182;
-}

package/src/stories/Atoms/Loader/Loader.jsx

@@ -1,58 +0,0 @@
-// src/stories/Atoms/Loader/Loader.jsx
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import './Loader.css';
-
-export const Loader = ({
-  variant = 'spinner', // 'spinner', 'dots', 'bars'
-  color = 'primary', // 'primary', 'secondary', 'custom'
-  size = 'md', // 'sm', 'md', 'lg'
-  customColor,
-  className = '',
-  style = {},
-  ...props
-}) => {
-  const loaderClasses = classNames('loader', className, {
-    [`loader--${variant}`]: variant,
-    [`loader--${color}`]: color && color !== 'custom',
-    [`loader--size-${size}`]: size,
-  });
-
-  const loaderStyle = color === 'custom' && customColor ? { ...style, '--loader-color': customColor } : style;
-
-  return (
-    <div className={loaderClasses} style={loaderStyle} {...props}>
-      {variant === 'spinner' && <div className="loader__spinner"></div>}
-      {variant === 'dots' && (
-        <div className="loader__dots">
-          <div className="loader__dot"></div>
-          <div className="loader__dot"></div>
-          <div className="loader__dot"></div>
-        </div>
-      )}
-      {variant === 'bars' && (
-        <div className="loader__bars">
-          <div className="loader__bar"></div>
-          <div className="loader__bar"></div>
-          <div className="loader__bar"></div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-Loader.propTypes = {
-  /** Variant of the loader */
-  variant: PropTypes.oneOf(['spinner', 'dots', 'bars']),
-  /** Color of the loader */
-  color: PropTypes.oneOf(['primary', 'secondary', 'custom']),
-  /** Custom color when color is set to 'custom' */
-  customColor: PropTypes.string,
-  /** Size of the loader */
-  size: PropTypes.oneOf(['sm', 'md', 'lg']),
-  /** Additional CSS classes */
-  className: PropTypes.string,
-  /** Inline styles */
-  style: PropTypes.object,
-};