datastake-daf 0.6.101 → 0.6.102

package/src/@daf/core/components/ProgressTabs/demo.jsx

@@ -1,167 +0,0 @@
-import React, { useState } from 'react';
-import { Button, Space } from 'antd';
-import { CheckOutlined, ScanOutlined, FileTextOutlined, CheckCircleOutlined, LockOutlined } from '@ant-design/icons';
-import ProgressTabs from './index';
-
-const ProgressTabsDemo = () => {
-  const [value, setValue] = useState('setup');
-
-  const options = [
-    { label: 'Set Up', value: 'setup' },
-    { label: 'Project Scan', value: 'scan' },
-    { label: 'Review & Submission', value: 'review' },
-    { label: 'Submission Status', value: 'status' }
-  ];
-
-  const currentOption = options.find(option => option.value === value);
-  const currentIndex = options.findIndex(option => option.value === value);
-
-  const handleNext = () => {
-    const nextIndex = Math.min(options.length - 1, currentIndex + 1);
-    setValue(options[nextIndex].value);
-  };
-
-  const handlePrevious = () => {
-    const prevIndex = Math.max(0, currentIndex - 1);
-    setValue(options[prevIndex].value);
-  };
-
-  const handleValueChange = (newValue) => {
-    setValue(newValue);
-  };
-
-  return (
-    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
-      <h2>ProgressTabs Component Demo</h2>
-      <p>This component creates a horizontal progress bar with clickable segments, similar to the design you provided. It uses Ant Design&apos;s Segmented component as the base.</p>
-      
-      <div style={{ marginBottom: '20px' }}>
-        <ProgressTabs 
-          value={value} 
-          options={options}
-          onChange={handleValueChange}
-        />
-      </div>
-
-      <div style={{ textAlign: 'center', marginBottom: '20px' }}>
-        <p><strong>Current Step:</strong> {currentOption?.label}</p>
-        <p><strong>Step Value:</strong> {value}</p>
-        <p><strong>Step Index:</strong> {currentIndex}</p>
-      </div>
-
-      <Space>
-        <Button 
-          onClick={handlePrevious}
-          disabled={value === 'setup'}
-        >
-          Previous
-        </Button>
-        <Button 
-          type="primary"
-          onClick={handleNext}
-          disabled={value === 'status'}
-        >
-          Next
-        </Button>
-      </Space>
-
-      <div style={{ marginTop: '30px' }}>
-        <h3>Usage Example:</h3>
-        <pre style={{ 
-          background: '#f5f5f5', 
-          padding: '15px', 
-          borderRadius: '4px',
-          overflow: 'auto'
-        }}>
-{`import { ProgressTabs } from 'datastake-daf/dist/components';
-import { CheckOutlined, ScanOutlined, FileTextOutlined, CheckCircleOutlined } from '@ant-design/icons';
-
-const MyComponent = () => {
-  const [value, setValue] = useState('setup');
-  
-  const options = [
-    { label: 'Set Up', value: 'setup', icon: <CheckOutlined /> },
-    { label: 'Project Scan', value: 'scan', icon: <ScanOutlined />, isDisabled: true },
-    { label: 'Review & Submission', value: 'review', icon: <FileTextOutlined />, isDisabled: true },
-    { label: 'Submission Status', value: 'status', icon: <CheckCircleOutlined />, isDisabled: true }
-  ];
-
-  return (
-    <ProgressTabs 
-      value={value} 
-      options={options}
-      onChange={setValue}
-      width="100%" // Default is 100%, can be customized
-    />
-  );
-};`}
-        </pre>
-      </div>
-
-      <div style={{ marginTop: '20px' }}>
-        <h3>Advanced Examples:</h3>
-        
-        <div style={{ marginBottom: '20px' }}>
-          <h4>With Icons:</h4>
-          <ProgressTabs 
-            value="setup" 
-            options={[
-              { label: 'Set Up', value: 'setup', icon: <CheckOutlined /> },
-              { label: 'Project Scan', value: 'scan', icon: <ScanOutlined /> },
-              { label: 'Review & Submission', value: 'review', icon: <FileTextOutlined /> },
-              { label: 'Submission Status', value: 'status', icon: <CheckCircleOutlined /> }
-            ]}
-          />
-        </div>
-        
-        <div style={{ marginBottom: '20px' }}>
-          <h4>With Disabled States:</h4>
-          <ProgressTabs 
-            value="setup" 
-            options={[
-              { label: 'Set Up', value: 'setup' },
-              { label: 'Project Scan', value: 'scan', isDisabled: true },
-              { label: 'Review & Submission', value: 'review', isDisabled: true },
-              { label: 'Submission Status', value: 'status', isDisabled: true }
-            ]}
-          />
-        </div>
-        
-        <div style={{ marginBottom: '20px' }}>
-          <h4>With Icons and Disabled States:</h4>
-          <ProgressTabs 
-            value="setup" 
-            options={[
-              { label: 'Set Up', value: 'setup', icon: <CheckOutlined /> },
-              { label: 'Project Scan', value: 'scan', icon: <ScanOutlined />, isDisabled: true },
-              { label: 'Review & Submission', value: 'review', icon: <FileTextOutlined />, isDisabled: true },
-              { label: 'Submission Status', value: 'status', icon: <CheckCircleOutlined />, isDisabled: true }
-            ]}
-          />
-        </div>
-        
-        <div style={{ marginBottom: '20px' }}>
-          <h4>Custom Width (400px):</h4>
-          <ProgressTabs 
-            value="scan" 
-            options={options}
-            width="400px"
-          />
-        </div>
-        
-        <div style={{ marginBottom: '20px' }}>
-          <h4>Small Width (300px):</h4>
-          <ProgressTabs 
-            value="review" 
-            options={options}
-            width="300px"
-          />
-        </div>
-      </div>
-
-      
-    </div>
-  );
-};
-
-export default ProgressTabsDemo;

package/src/@daf/core/components/ProgressTabs/index.jsx

@@ -1,69 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Segmented } from 'antd';
-import './_index.scss';
-
-const ProgressTabs = ({ 
-  value = 'setup', 
-  options = [
-    { label: 'Set Up', value: 'setup' },
-    { label: 'Project Scan', value: 'scan' },
-    { label: 'Review & Submission', value: 'review' },
-    { label: 'Submission Status', value: 'status' }
-  ],
-  onChange = () => {},
-  className = '',
-  width = '100%',
-  ...rest 
-}) => {
-  // Transform options to include icons and handle disabled state
-  const transformedOptions = options.map(option => ({
-    ...option,
-    label: (
-      <div className="progress-tabs__option-content">
-      
-        <span className="progress-tabs__label">
-          {option.label}
-        </span> 
-         {option.icon && (
-          <span className="progress-tabs__icon">
-            {option.icon}
-          </span>
-        )}
-      </div>
-    ),
-    disabled: option.isDisabled || false,
-  }));
-
-  return (
-    <div 
-      className={`progress-tabs ${className}`}
-      style={{ width }}
-    >
-      <Segmented
-        value={value}
-        options={transformedOptions}
-        onChange={onChange}
-        className="progress-tabs__segmented"
-        {...rest}
-      />
-    </div>
-  );
-};
-
-ProgressTabs.propTypes = {
-  value: PropTypes.string,
-  options: PropTypes.arrayOf(
-    PropTypes.shape({
-      label: PropTypes.string.isRequired,
-      value: PropTypes.string.isRequired,
-      isDisabled: PropTypes.bool,
-      icon: PropTypes.node,
-    })
-  ),
-  onChange: PropTypes.func,
-  className: PropTypes.string,
-  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-};
-
-export default ProgressTabs;