react-jupiter 6.0.0-beta.2 → 6.0.0-beta.4

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

@@ -1,304 +0,0 @@
-import React from 'react';
-import Button from './index';
-// import '../storybook.css';
-import { Text } from '../typography';
-
-export default {
-  title: 'Button',
-  component: Button,
-  argTypes: {
-    size: {
-      control: 'select',
-      options: ['sm', 'md', 'lg', 'xs'],
-      defaultValue: 'md',
-    },
-    icon: {
-      control: 'select',
-      options: ['warning', 'arrow-down-on-square', 'bell-alert', 'help'],
-      defaultValue: undefined,
-    },
-    wide: {
-      control: 'boolean',
-      defaultValue: false,
-    },
-    disabled: {
-      control: 'boolean',
-      defaultValue: false,
-    },
-    styleType: {
-      control: 'select',
-      options: ['primary', 'secondary', 'tertiary'],
-      defaultValue: 'primary',
-    },
-    mainColor: {
-      control: 'select',
-      options: ['red', 'blue', 'green', 'yellow', 'darkBlue', 'gray'],
-      defaultValue: 'blue',
-    },
-    children: {
-      control: 'text',
-      defaultValue: 'متن زیبای داخل دکمه',
-    },
-  },
-};
-
-const Template = (args) => <Button {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-  size: 'md',
-  styleType: 'primary',
-  mainColor: 'blue',
-  children: 'متن زیبای داخل دکمه',
-};
-
-export const WithIcon = Template.bind({});
-WithIcon.args = {
-  icon: 'watch-later',
-  children: 'دکمه‌ با آیکون',
-};
-
-export const WithSpecificWidth = Template.bind({});
-WithSpecificWidth.args = {
-  icon: 'watch-later',
-  width: '184px',
-  children: 'دکمه‌ با آیکون',
-};
-
-export const WideButton = Template.bind({});
-WideButton.args = {
-  wide: true,
-  children: 'دکمه‌ی تمام عرض',
-};
-
-export const ExtraSmall = Template.bind({});
-ExtraSmall.args = {
-  size: 'xs',
-  children: 'دکمه‌ی خیلی کوچک',
-};
-
-export const Small = Template.bind({});
-Small.args = {
-  size: 'sm',
-  children: 'دکمه‌ی کوچک',
-};
-
-export const Medium = Template.bind({});
-Medium.args = {
-  size: 'md',
-  children: 'دکمه‌ی متوسط',
-};
-
-export const Large = Template.bind({});
-Large.args = {
-  size: 'lg',
-  children: 'دکمه‌ی بزرگ',
-};
-
-export const ExtraSmallWithIcon = Template.bind({});
-ExtraSmallWithIcon.args = {
-  size: 'xs',
-  icon: 'watch-later',
-  children: 'دکمه‌ی خیلی کوچک با آیکون',
-};
-
-export const SmallWithIcon = Template.bind({});
-SmallWithIcon.args = {
-  size: 'sm',
-  icon: 'watch-later',
-  children: 'دکمه‌ی کوچک با آیکون',
-};
-
-export const MediumWithIcon = Template.bind({});
-MediumWithIcon.args = {
-  size: 'md',
-  icon: 'watch-later',
-  children: 'دکمه‌ی متوسط با آیکون',
-};
-
-export const LargeWithIcon = Template.bind({});
-LargeWithIcon.args = {
-  size: 'lg',
-  icon: 'watch-later',
-  children: 'دکمه‌ی بزرگ با آیکون',
-};
-
-export const Primary = Template.bind({});
-Primary.args = {
-  styleType: 'primary',
-  children: 'دکمه‌ی دیفالت اولیه',
-};
-
-export const Secondary = Template.bind({});
-Secondary.args = {
-  styleType: 'secondary',
-  children: 'دکمه‌ی دیفالت ثانویه',
-};
-
-export const Tertiary = Template.bind({});
-Tertiary.args = {
-  styleType: 'tertiary',
-  children: 'دکمه‌ی دیفالت ثالثیه',
-};
-
-export const PrimaryDisabled = Template.bind({});
-PrimaryDisabled.args = {
-  disabled: true,
-  children: 'دکمه‌ی دیفالت غیر فعال',
-};
-
-export const SecondaryDisabled = Template.bind({});
-SecondaryDisabled.args = {
-  styleType: 'secondary',
-  disabled: true,
-  children: 'دکمه‌ی دیفالت ثانویه غیر فعال',
-};
-
-export const TertiaryDisabled = Template.bind({});
-TertiaryDisabled.args = {
-  styleType: 'tertiary',
-  disabled: true,
-  children: 'دکمه‌ی دیفالت ثالثیه غیر فعال',
-};
-
-export const RedPrimary = Template.bind({});
-RedPrimary.args = {
-  styleType: 'primary',
-  mainColor: 'red',
-  children: 'دکمه‌ی قرمز اولیه',
-};
-
-export const RedSecondary = Template.bind({});
-RedSecondary.args = {
-  styleType: 'secondary',
-  mainColor: 'red',
-  children: 'دکمه‌ی قرمز ثانویه',
-};
-
-export const RedPrimaryDisabled = Template.bind({});
-RedPrimaryDisabled.args = {
-  mainColor: 'red',
-  disabled: true,
-  children: 'دکمه‌ی قرمز اولیه غیر فعال',
-};
-
-export const RedSecondaryDisabled = Template.bind({});
-RedSecondaryDisabled.args = {
-  styleType: 'secondary',
-  mainColor: 'red',
-  disabled: true,
-  children: 'دکمه‌ی قرمز ثانویه غیر فعال',
-};
-
-export const BluePrimary = Template.bind({});
-BluePrimary.args = {
-  styleType: 'primary',
-  mainColor: 'blue',
-  children: 'دکمه‌ی آبی اولیه',
-};
-
-export const BlueSecondary = Template.bind({});
-BlueSecondary.args = {
-  styleType: 'secondary',
-  mainColor: 'blue',
-  children: 'دکمه‌ی آبی ثانویه',
-};
-
-export const BluePrimaryDisabled = Template.bind({});
-BluePrimaryDisabled.args = {
-  mainColor: 'blue',
-  disabled: true,
-  children: 'دکمه‌ی آبی اولیه غیر فعال',
-};
-
-export const BlueSecondaryDisabled = Template.bind({});
-BlueSecondaryDisabled.args = {
-  styleType: 'secondary',
-  mainColor: 'blue',
-  disabled: true,
-  children: 'دکمه‌ی آبیه ثانویه غیر فعال',
-};
-
-export const GrayPrimary = Template.bind({});
-GrayPrimary.args = {
-  styleType: 'primary',
-  mainColor: 'gray',
-  icon: 'watch-later',
-  children: 'دکمه‌ی خاکستری اولیه',
-};
-
-export const GreenPrimary = Template.bind({});
-GreenPrimary.args = {
-  styleType: 'primary',
-  mainColor: 'green',
-  children: 'دکمه‌ی سبز اولیه',
-};
-
-export const GreenSecondary = Template.bind({});
-GreenSecondary.args = {
-  styleType: 'secondary',
-  mainColor: 'green',
-  children: 'دکمه‌ی سبز ثانویه',
-};
-
-export const GreenPrimaryDisabled = Template.bind({});
-GreenPrimaryDisabled.args = {
-  mainColor: 'green',
-  disabled: true,
-  children: 'دکمه‌ی سبز اولیه غیر فعال',
-};
-
-export const GreenSecondaryDisabled = Template.bind({});
-GreenSecondaryDisabled.args = {
-  styleType: 'secondary',
-  mainColor: 'green',
-  disabled: true,
-  children: 'دکمه‌ی سبز ثانویه غیر فعال',
-};
-
-export const YellowPrimary = Template.bind({});
-YellowPrimary.args = {
-  styleType: 'primary',
-  mainColor: 'yellow',
-  children: 'دکمه‌ی زرد اولیه',
-};
-
-export const YellowSecondary = Template.bind({});
-YellowSecondary.args = {
-  styleType: 'secondary',
-  mainColor: 'yellow',
-  children: 'دکمه‌ی زرد ثانویه',
-};
-
-export const YellowPrimaryDisabled = Template.bind({});
-YellowPrimaryDisabled.args = {
-  mainColor: 'yellow',
-  disabled: true,
-  children: 'دکمه‌ی زرد اولیه غیر فعال',
-};
-
-export const YellowSecondaryDisabled = Template.bind({});
-YellowSecondaryDisabled.args = {
-  styleType: 'secondary',
-  mainColor: 'yellow',
-  disabled: true,
-  children: 'دکمه‌ی زرد ثانویه غیر فعال',
-};
-
-export const LinkButton = Template.bind({});
-LinkButton.args = {
-  renderLink: (element) => <a href="http://google.com">{element}</a>,
-  children: 'لینک به گوگل',
-};
-
-export const ExternalLinkButton = Template.bind({});
-ExternalLinkButton.args = {
-  linkTo: 'http://google.com',
-  children: 'لینک به گوگل',
-};
-
-export const WithReactNodeChildren = Template.bind({});
-WithReactNodeChildren.args = {
-  size: 'md',
-  children: <Text color="white">این یک متن  تستی است</Text>,
-};

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

@@ -1,104 +0,0 @@
-import styled from 'styled-components';
-import Icon from '../icon';
-import { getColorFromName, getHoverColorFromName, getFocusColorFromName } from '../utils/theme';
-
-export const BaseButton = styled.button`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  width: ${({ width, wide }) => (width ? `${width}` : wide ? '100%' : 'auto')};
-  height: ${({ height }) => (height ? `${height}` : 'auto')};
-  min-width: ${({ size, theme, width }) => (width ? `${width}` : `${theme.size[size].minWidth}px`)};
-  min-height: ${({ size, theme, height }) => (height ? `${height}` : `${theme.size[size].height}px`)};
-
-  padding: ${({ size, theme }) => theme.size[size].padding};
-  box-sizing: border-box;
-
-  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
-  opacity: ${({ disabled }) => (disabled ? '0.25' : '1')};
-  border-radius: ${({ theme }) => `${theme.borderRadius}px`};
-
-  margin: ${({
-    marginRight, marginLeft,
-  }) => `0 ${marginRight || 0}px 0 ${marginLeft || 0}px`};
-
-  &[data-styletype="primary"] {
-    border: none;
-    background: ${({ theme, mainColor }) => getColorFromName(theme, mainColor)};
-    
-    &:hover { 
-      transition: all 0.25s;
-      background: ${({ theme, mainColor, disabled }) => (!disabled ? getHoverColorFromName(theme, mainColor) : getColorFromName(theme, mainColor))};
-    }
-    &:active {
-      transition: all 0.25s;
-      background: ${({ theme, mainColor, disabled }) => (!disabled ? getFocusColorFromName(theme, mainColor) : getColorFromName(theme, mainColor))};
-    }
-  }
-  
-  &[data-styletype="secondary"] {
-    border: 1px solid ${({ theme, mainColor }) => getColorFromName(theme, mainColor)};
-    background: transparent;
-
-    &:hover { 
-      border-color: ${({ theme, disabled, mainColor }) => (!disabled ? 'transparent' : getColorFromName(theme, mainColor))};
-      transition: all 0.25s;
-      background: ${({ theme, mainColor, disabled }) => (!disabled ? getColorFromName(theme, mainColor) : 'transparent')};
-      * {
-        transition: all 0.25s;
-        color: ${({ theme, mainColor, disabled }) => (!disabled ? theme.colors.white : getColorFromName(theme, mainColor))};
-      }
-    }
-    &:active {
-      border-color: ${({ theme, disabled, mainColor }) => (!disabled ? 'transparent' : getColorFromName(theme, mainColor))};
-      background: ${({ theme, mainColor, disabled }) => (!disabled ? getFocusColorFromName(theme, mainColor) : 'transparent')};
-      * {
-        transition: all 0.25s;
-        color: ${({ theme, mainColor, disabled }) => (!disabled ? theme.colors.white : getColorFromName(theme, mainColor))};
-      }
-    }
-  }
-
-  &[data-styletype="tertiary"] {
-    border: none;
-    background: transparent;
-
-    &:hover { 
-      * {
-        transition: all 0.25s;
-        color: ${({ theme }) => theme.colors.darkBlue400};
-      }
-    }
-    &:active {
-      * {
-        transition: all 0.25s;
-        color: ${({ theme }) => theme.colors.darkBlue800};
-      }
-    }
-
-  }
-`;
-
-export const StyledIcon = styled(Icon)`
-  margin-right: 0;
-`;
-
-export const ExternalLink = styled.a`
-  color: ${({ theme, color }) => getColorFromName(theme, color)};
-  text-decoration: none;
-  &:hover {
-    text-decoration: none;
-  }
-  &:visited {
-    color: ${({ theme, color }) => getColorFromName(theme, color)};
-    text-decoration: none;
-  }
-`;
-
-export const InternalLink = styled.div`
-  a {
-    color: ${({ theme, color }) => getColorFromName(theme, color)};
-    text-decoration: none;
-  }
-`;

package/src/components/button/theme.js

@@ -1,60 +0,0 @@
-import defaultTheme from '../themes';
-
-const theme = {
-  colors: defaultTheme.colors,
-  borderRadius: defaultTheme.borderRadius.low,
-};
-const sizes = {
-  xs: 'px-2 py-1 text-xs min-h-[24px]',
-  sm: 'px-3 py-1 text-xs min-h-[32px]',
-  md: 'px-4 py-2 text-sm min-h-[40px]',
-  lg: 'px-6 py-3 text-base min-h-[48px]',
-};
-
-// Color mapping to Tailwind colors
-const colorMap = {
-  red: {
-    base: 'red-600',
-    hover: 'red-700',
-    active: 'red-800',
-    light: 'red-50',
-    lighter: 'red-100',
-  },
-  blue: {
-    base: 'secondary',
-    hover: 'secondary/90',
-    active: 'secondary/80',
-    light: 'secondary/10',
-    lighter: 'secondary/20',
-  },
-  green: {
-    base: 'green-600',
-    hover: 'green-700',
-    active: 'green-800',
-    light: 'green-50',
-    lighter: 'green-100',
-  },
-  yellow: {
-    base: 'yellow-500',
-    hover: 'yellow-600',
-    active: 'yellow-700',
-    light: 'yellow-50',
-    lighter: 'yellow-100',
-  },
-  darkBlue: {
-    base: 'main',
-    hover: 'main/90',
-    active: 'main/80',
-    light: 'main/10',
-    lighter: 'main/20',
-  },
-  gray: {
-    base: 'gray-600',
-    hover: 'gray-700',
-    active: 'gray-800',
-    light: 'gray-50',
-    lighter: 'gray-100',
-  },
-};
-
-export { theme, colorMap, sizes };

package/src/components/button/utils.js

@@ -1,12 +0,0 @@
-function setFontColor(styleType, mainColor) {
-  switch (styleType) {
-    case 'secondary':
-      return mainColor;
-    case 'tertiary':
-      return 'darkBlue';
-    default:
-      return 'white';
-  }
-}
-
-export default setFontColor;

package/src/components/card/card-template/index.js

@@ -1,74 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { ThemeProvider } from 'styled-components';
-import GlobalStyle from '../../globalStyle';
-import generalTheme from '../../themes';
-import TemplateContainer from './index.style';
-
-const CardTemplate = ({
-  level = 1,
-  hoverToLevel = 1,
-  maxWidth = null,
-  renderLink = undefined,
-  direction = 'vertical',
-  background = '',
-  children,
-  ...rest
-}) => {
-  const renderContent = () => {
-    if (renderLink) {
-      return renderLink(
-        <TemplateContainer
-          maxWidth={maxWidth}
-          level={level}
-          hoverToLevel={hoverToLevel}
-          direction={direction}
-          data-test="card-template"
-          background={background}
-          {...rest}
-        >
-          {children}
-        </TemplateContainer>,
-      );
-    }
-    return (
-      <TemplateContainer
-        maxWidth={maxWidth}
-        level={level}
-        hoverToLevel={hoverToLevel}
-        direction={direction}
-        data-test="card-template"
-        background={background}
-        {...rest}
-      >
-        {children}
-      </TemplateContainer>
-    );
-  };
-
-  return (
-    <ThemeProvider theme={generalTheme}>
-      <GlobalStyle />
-      {renderContent()}
-    </ThemeProvider>
-  );
-};
-
-CardTemplate.propTypes = {
-  children: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node,
-    PropTypes.string,
-  ]).isRequired,
-  level: PropTypes.oneOf([1, 2, 3, 4, 5]),
-  hoverToLevel: PropTypes.number,
-  maxWidth: PropTypes.oneOfType([
-    PropTypes.number,
-    PropTypes.string,
-  ]),
-  renderLink: PropTypes.func,
-  direction: PropTypes.oneOf(['vertical', 'horizontal']),
-  background: PropTypes.string,
-};
-
-export default CardTemplate;

package/src/components/card/card-template/index.stories.js

@@ -1,110 +0,0 @@
-import React from 'react';
-import CardTemplate from './index';
-
-export default {
-  title: 'Components/Card/CardTemplate',
-  component: CardTemplate,
-  argTypes: {
-    level: {
-      control: 'number',
-      description: 'The level of the card (1-5)',
-    },
-    hoverToLevel: {
-      control: 'number',
-      description: 'The level to hover to',
-    },
-    direction: {
-      control: 'select',
-      options: ['vertical', 'horizontal'],
-      description: 'The direction of the card content',
-    },
-    background: {
-      control: 'text',
-      description: 'The background image URL',
-    },
-    renderLink: {
-      control: 'function',
-      description: 'Function to render a link wrapper',
-    },
-    style: {
-      control: 'object',
-      description: 'Additional styles to apply',
-    },
-    children: {
-      control: 'text',
-      description: 'The content of the card',
-    },
-  },
-};
-
-const Template = (args) => (
-  <CardTemplate {...args}>
-    <div style={{ height: '100px' }}>Hello card template.</div>
-  </CardTemplate>
-);
-
-export const Default = Template.bind({});
-
-export const Level2 = Template.bind({});
-Level2.args = {
-  level: 2,
-  style: { marginTop: '50px' },
-};
-
-export const Level3 = Template.bind({});
-Level3.args = {
-  level: 3,
-  style: { marginTop: '50px' },
-};
-
-export const Level4 = Template.bind({});
-Level4.args = {
-  level: 4,
-  style: { marginTop: '50px' },
-};
-
-export const Level5 = Template.bind({});
-Level5.args = {
-  level: 5,
-  style: { marginTop: '50px' },
-};
-
-export const HoverLevel1To4 = Template.bind({});
-HoverLevel1To4.args = {
-  level: 1,
-  hoverToLevel: 4,
-  style: { marginTop: '50px' },
-};
-
-export const WithLink = Template.bind({});
-WithLink.args = {
-  renderLink: (el) => <a href="http://google.com">{el}</a>,
-  children: <div style={{ height: '100px' }}>with link to google</div>,
-};
-
-export const VerticalDirection = Template.bind({});
-VerticalDirection.args = {
-  direction: 'vertical',
-  children: (
-    <>
-      <div style={{ height: '100px', backgroundColor: 'lightgray' }}>Hello card template.</div>
-      <div style={{ height: '100px', backgroundColor: 'oldlace' }}>Hello card template.</div>
-    </>
-  ),
-};
-
-export const HorizontalDirection = Template.bind({});
-HorizontalDirection.args = {
-  direction: 'horizontal',
-  children: (
-    <>
-      <div style={{ height: '100px', backgroundColor: 'lightgray' }}>Hello card template.</div>
-      <div style={{ height: '100px', backgroundColor: 'oldlace' }}>Hello card template.</div>
-    </>
-  ),
-};
-
-export const WithBackground = Template.bind({});
-WithBackground.args = {
-  background: 'http://static.simpledesktops.com/uploads/desktops/2019/11/08/Jupiter.png',
-};

package/src/components/card/card-template/index.style.js

@@ -1,25 +0,0 @@
-import styled from 'styled-components';
-
-const TemplateContainer = styled.section`
-  display: flex;
-  flex-direction: ${({ direction }) => (direction === 'vertical' ? 'column' : 'row')};
-  border-radius: ${({ theme }) => (`${theme.borderRadius.low}px`)};
-  overflow: hidden;
-  ${({ maxWidth }) => (maxWidth ? `max-width: ${maxWidth}px` : '')};
-  box-shadow: ${({ theme, level }) => (
-    `0 0 ${theme.shadows[level].blur}px ${theme.shadows[level].spread}px rgba(0, 0, 0, ${theme.shadows[level].opacity})`
-  )};
-  text-decoration: none;
-  transition: ${({ theme }) => (`all ${theme.animation.time}s ${theme.animation.method}`)};
-  ${({ background }) => (background ? `background: url(${background}) bottom left / 142px no-repeat` : '')};
-
-  &:hover {
-    ${({ theme, level, hoverToLevel }) => (
-    hoverToLevel > level
-      ? `box-shadow: 0 0 ${theme.shadows[hoverToLevel].blur}px ${theme.shadows[hoverToLevel].spread}px rgba(0, 0, 0, ${theme.shadows[hoverToLevel].opacity})`
-      : ''
-  )};
-  }
-`;
-
-export default TemplateContainer;