react-jupiter 5.12.0 → 6.0.0-beta.2

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

@@ -0,0 +1,304 @@
+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

@@ -0,0 +1,104 @@
+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

@@ -0,0 +1,60 @@
+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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,74 @@
+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

@@ -0,0 +1,110 @@
+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

@@ -0,0 +1,25 @@
+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;