react-jupiter 5.11.34 → 6.0.0-beta.1

package/src/components/accordion/index.stories.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import Accordion from '.';
+
+const items = [
+    {
+        title: 'عنوان اول',
+        mode: 'dark',
+        key: 'acc-1',
+        status: true,
+        collapse: false,
+        bold: false,
+        meta: <span>۳/۰</span>,
+        body: <div>
+                لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
+            </div>,
+    },
+    {
+        title: 'عنوان دوم',
+        mode: 'white',
+        key: 'acc-2',
+        status: false,
+        bold: true,
+        collapse: true,
+        meta: <span>حداقل امتیاز: ۵۰</span>,
+        body: <div>
+                لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
+            </div>,
+    },
+    {
+        title: 'عنوان سوم',
+        mode: 'white',
+        key: 'acc-3',
+        status: false,
+        collapse: true,
+        bold: false,
+        meta: <span>حداقل امتیاز: ۵۰</span>,
+        body: <div>
+                لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
+            </div>,
+    },
+];
+
+export default {
+  title: 'Components/Accordion',
+  component: Accordion,
+  argTypes: {
+    items: {
+      control: 'object',
+      description: 'Array of accordion items',
+    },
+  },
+};
+
+const Template = (args) => <Accordion {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  items,
+};
+
+export const WithCustomStyling = Template.bind({});
+WithCustomStyling.args = {
+  items: [
+    { title: 'Styled Item 1', content: 'Styled content 1' },
+    { title: 'Styled Item 2', content: 'Styled content 2' },
+  ],
+  style: { border: '1px solid blue', borderRadius: '8px' },
+};
+
+export const SingleItemExpanded = Template.bind({});
+SingleItemExpanded.args = {
+  items: [
+    { title: 'Expanded Item', content: 'This item starts expanded', expanded: true },
+  ],
+};
+
+export const WithIcons = Template.bind({});
+WithIcons.args = {
+  items: [
+    { title: 'Item with Icon', content: 'Content for item with icon', icon: 'info' },
+  ],
+};

package/src/components/accordion/index.styles.js

@@ -0,0 +1,52 @@
+import styled from 'styled-components';
+
+export const PanelGroup = styled.div`
+    font-family: 'IranSharp';
+`;
+
+export const Panel = styled.div`
+    background-color: #fff;
+    margin: 10px 0;
+    border: ${(props) => ((props.status || props.bold) ? '2px solid rgb(80, 89, 117)' : '1px solid #000000')};
+    border-radius: 7px;
+    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
+    padding: 10px;
+
+    &.white {
+        background: #ffffff;
+    }
+    &.light {
+        background: #caf0fc;
+    }
+    &.white, &.light {
+        & .panel-heading {
+            color: #000000;
+        }
+    }
+    &.dark {
+        background: rgb(80, 89, 117);
+        & .panel-heading {
+            color: #ffffff;
+        }
+    }
+
+    .collapse {
+        display: none;
+    }
+
+    .panel-heading {
+        padding: 10px 15px;
+        display: flex;
+        justify-content: space-between;
+        &:hover {
+            cursor: pointer;
+        }        
+    }
+    
+    .panel-title {
+        margin-top: 0;
+        margin-bottom: 0;
+        font-size: 16px;
+        color: inherit;
+    }
+`;

package/src/components/accordion/panel.js

@@ -0,0 +1,41 @@
+import React, { useRef } from 'react';
+import { isMobile } from '../utils/detectMobile';
+import { Panel as StyledPanel } from './index.styles';
+import Icon from '../icon';
+
+const Panel = ({ item }) => {
+  const panelRef = useRef();
+
+  const handleClick = () => {
+    const icon = document.getElementById(`icon-${item.key}`);
+
+    if (panelRef.current.classList.contains('collapse')) {
+      panelRef.current.classList.remove('collapse');
+      icon.classList.remove('new-icon-arrow-drop-down');
+      icon.classList.add('new-icon-arrow-drop-up');
+    } else {
+      panelRef.current.classList.add('collapse');
+      icon.classList.remove('new-icon-arrow-drop-up');
+      icon.classList.add('new-icon-arrow-drop-down');
+    }
+  };
+
+  return (
+    <StyledPanel className={item.mode} status={item.status} bold={item.bold}>
+      <a className="panel-heading" onClick={() => handleClick(item.key)}>
+        <h4 className="panel-title">
+          <Icon name={item.status ? 'check-circle' : 'error'} size="sm" color={item.status ? 'green' : 'gray'} />
+          <span>{item.title}</span>
+        </h4>
+        <div>
+          {!isMobile && item.meta}
+          <Icon id={`icon-${item.key}`} name="arrow-drop-down" size="sm" color={item.status ? 'white' : 'darkBlue'} />
+        </div>
+      </a>
+      <div id={item.key} ref={panelRef} className={`panel-collapse ${item.collapse && 'collapse'}`}>
+        <div className="panel-body">{item.body}</div>
+      </div>
+    </StyledPanel>
+  );
+};
+export default Panel;

package/src/components/avatar/index.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ThemeProvider } from 'styled-components';
+import GlobalStyle from '../globalStyle';
+import Image from './index.styles';
+import avatarTheme from './theme';
+
+const defaultImageUrl = 'https://static.evand.net/assets/images/defaults/avatar.svg';
+
+const Avatar = ({
+  alt = 'آواتار',
+  size = 'md',
+  sizeMobile = 'md',
+  src = defaultImageUrl,
+  round = false,
+  ...rest
+}) => (
+  <ThemeProvider theme={avatarTheme}>
+    <GlobalStyle />
+    <Image
+      src={src}
+      alt={alt}
+      size={size}
+      sizeMobile={sizeMobile}
+      data-test="avatar"
+      round={round}
+      onError={(e) => (e.target.onerror = null, e.target.src = defaultImageUrl)}
+      {...rest}
+    />
+  </ThemeProvider>
+);
+
+Avatar.propTypes = {
+  src: PropTypes.string,
+  alt: PropTypes.string,
+  round: PropTypes.bool,
+  size: PropTypes.oneOf(['lg', 'md', 'sm', 'xs']),
+  sizeMobile: PropTypes.oneOf(['lg', 'md', 'sm']),
+};
+
+export default Avatar;

package/src/components/avatar/index.stories.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import Avatar from './index';
+
+export default {
+  title: 'Components/Avatar',
+  component: Avatar,
+  argTypes: {
+    avatar: {
+      control: 'text',
+      description: 'URL of the avatar image',
+    },
+    size: {
+      control: 'text',
+      description: 'Size of the avatar',
+    },
+    showTooltip: {
+      control: 'boolean',
+      description: 'Whether to show a tooltip on hover',
+    },
+    tooltipText: {
+      control: 'text',
+      description: 'Text to display in the tooltip',
+    },
+  },
+};
+
+const Template = (args) => <Avatar {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  avatar: 'https://via.placeholder.com/40',
+  size: "md",
+};
+
+export const Small = Template.bind({});
+Small.args = {
+  avatar: 'https://via.placeholder.com/40',
+  size: "sm",
+};
+
+export const Medium = Template.bind({});
+Medium.args = {
+  avatar: 'https://via.placeholder.com/60',
+  size: "md",
+};
+
+export const Large = Template.bind({});
+Large.args = {
+  avatar: 'https://via.placeholder.com/80',
+  size: "lg",
+};
+
+export const WithTooltip = Template.bind({});
+WithTooltip.args = {
+  avatar: 'https://via.placeholder.com/40',
+  size: "md",
+  showTooltip: true,
+  tooltipText: 'User Avatar',
+};

package/src/components/avatar/index.styles.js

@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+import defaultTheme from '../themes';
+
+const Image = styled.img`
+  font-family: 'IranSharp';
+  width: ${({ theme, size }) => `${theme.size[size]}px`};
+  height: ${({ theme, size }) => `${theme.size[size]}px`};
+  @media only screen and (max-width: ${defaultTheme.breakpoints.sm}px) {
+    width: ${({ theme, sizeMobile }) => `${theme.size[sizeMobile]}px`};
+    height: ${({ theme, sizeMobile }) => `${theme.size[sizeMobile]}px`};
+  }
+  border-radius: ${({ theme, round }) => (round ? '50%' : `${theme.borderRadius}px`)};
+  display: block;
+  background-size: cover;
+`;
+
+export default Image;

package/src/components/avatar/index.test.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { render, screen } from '../../test-utils';
+import Avatar from './index';
+
+describe('Avatar', () => {
+  it('renders avatar component', () => {
+    render(<Avatar data-testid="avatar" />);
+    expect(screen.getByTestId('avatar')).toBeInTheDocument();
+  });
+});

package/src/components/avatar/theme.js

@@ -0,0 +1,13 @@
+import defaultTheme from '../themes';
+
+const avatarTheme = {
+  borderRadius: defaultTheme.borderRadius.low,
+  size: {
+    lg: 128,
+    md: 64,
+    sm: 32,
+    xs: 24,
+  },
+};
+
+export default avatarTheme;