wex-ui-lib 1.0.0

package/rollup.config.mjs

@@ -0,0 +1,42 @@
+import resolve from '@rollup/plugin-node-resolve';
+import typescript from '@rollup/plugin-typescript';
+import commonjs from '@rollup/plugin-commonjs';
+import dts from 'rollup-plugin-dts';
+import peerDepsExternalPlugin from 'rollup-plugin-peer-deps-external';
+import terser from '@rollup/plugin-terser';
+import postcss from "rollup-plugin-postcss";
+
+const packageJson = require('./package.json')
+
+export default [
+  {
+    input: 'src/index.ts',
+    output: [
+      {
+        file: packageJson.main,
+        format: 'cjs',
+        sourcemap: true
+      },
+      {
+        file: packageJson.module,
+        format: 'esm',
+        sourcemap: true
+      },
+    ],
+    plugins: [
+      peerDepsExternalPlugin(),
+      resolve(),
+      commonjs(),
+      typescript({ tsconfig: './tsconfig.json' }),
+      terser(),
+      postcss()
+    ],
+    external: ['react', 'react-dom']
+  },
+  {
+    input: './src/index.ts',
+    output: [{ file: packageJson.types }],
+    plugins: [dts.default()],
+    external: [/\.css/]
+  }
+]

package/src/components/Button/index.stories.tsx

@@ -0,0 +1,54 @@
+import React from 'react'
+import Button from '.'
+import { ButtonProps } from './index.types'
+import { Meta, StoryObj } from '@storybook/react/*'
+
+type StoryProps = ButtonProps & { buttonText: string }
+
+const meta: Meta<StoryProps> = {
+  title: 'Components/Button',
+  component: Button,
+  argTypes: { onClick: { action: 'Button clicked!' } },
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<StoryProps>
+
+export const Default: Story = {
+  args: {
+    buttonText: 'Button',
+    type: 'default',
+  },
+  render: ({ buttonText, ...args }) => <Button {...args}>{buttonText}</Button>,
+}
+
+export const Rounded: Story = {
+  args: {
+    buttonText: 'Button',
+    type: 'rounded',
+    arrow: 'arrow-caret'
+  },
+  render: ({ buttonText, ...args }) => <Button {...args}>{buttonText}</Button>,
+}
+
+export const Pill: Story = {
+  args: {
+    buttonText: 'Button',
+    type: 'pill',
+  },
+  render: ({ buttonText, ...args }) => <Button {...args}>{buttonText}</Button>,
+}
+
+export const Underlined: Story = {
+  args: {
+    buttonText: 'Button',
+    type: 'underlined',
+    arrow: 'arrow-long'
+  },
+  render: ({ buttonText, ...args }) => <Button {...args}>{buttonText}</Button>,
+}

package/src/components/Button/index.tsx

@@ -0,0 +1,157 @@
+import React from "react"
+import styled from '@emotion/styled';
+import Icon from '../../shared/components/Icon';
+import { theme } from '../../shared/styles/theme';
+import { ButtonProps } from './index.types';
+import { formatText } from "../../shared/utils/formatters";
+
+export default function Button(props: ButtonProps) {
+  const {
+    children,
+    onClick,
+    type,
+    colors,
+    arrow,
+    font = {
+      size: '16px',
+      casing: 'uppercase',
+      weight: '600'
+    },
+  } = props
+
+  switch (type) {
+    default:
+      return (
+        <DefaultButton onClick={onClick} colors={colors} font={font} hasArrow={arrow !== undefined}>
+          {font.casing ? formatText(children as string, font.casing) : children}
+          {arrow &&
+            <Icon icon={arrow} color={colors?.text || theme.white} />
+          }
+        </DefaultButton>
+      )
+    case "rounded":
+      return (
+        <RoundedButton onClick={onClick} colors={colors} font={font} hasArrow={arrow !== undefined}>
+          {font.casing ? formatText(children as string, font.casing) : children}
+          {arrow &&
+            <Icon icon={arrow} color={colors?.text || theme.white} />
+          }
+        </RoundedButton>
+      )
+    case "pill":
+      return (
+        <PillButton onClick={onClick} colors={colors} font={font} hasArrow={arrow !== undefined}>
+          {font.casing ? formatText(children as string, font.casing) : children}
+          {arrow &&
+            <Icon icon={arrow} color={colors?.text || theme.white} />
+          }
+        </PillButton>
+      )
+    case "underlined":
+      return (
+        <UnderlinedButton onClick={onClick} colors={colors} font={font} hasArrow={arrow !== undefined}>
+          {font.casing ? formatText(children as string, font.casing) : children}
+          {arrow &&
+            <Icon icon={arrow} color={colors?.text || theme.primary} />
+          }
+        </UnderlinedButton>
+      )
+  }
+}
+
+const DefaultButton = styled.button<{ colors?: ButtonProps['colors'], font?: ButtonProps['font'], hasArrow?: boolean }>`
+  all: unset; 
+  display: flex;
+  align-items: center;
+  padding: 10px 14px;
+  letter-spacing: 1px;
+  font-size: ${props => props.font?.size};
+  font-weight: ${props => props.font?.weight};
+  cursor: pointer;
+  width: fit-content;
+  grid-area: button;
+  transition: filter 0.3s, background-color 0.3s;
+  gap: 11px;
+  background-color: ${props => props.colors?.background || theme.primary};
+  color: ${props => props.colors?.text || theme.white};
+  position: relative;
+  svg {
+    fill: ${props => props.colors?.text || theme.white};
+    transition: all 0.3s;
+  }
+  &:hover{
+    ${props => props.colors?.backgroundHover ? `background-color: ${props.colors?.backgroundHover}` : `filter: brightness(1.4)`};
+    color: ${props => props.colors?.textHover || theme.white};
+    svg {
+      fill: ${props => props.colors?.textHover || theme.white};
+      transform: translateX(5px);
+    }
+    &::after{
+      transform: translateX(4px);
+    }
+  }
+  &::after{
+    display: ${props => props.hasArrow ? "unset" : "none"};
+    content: "";
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    transition: all 0.3s;
+    background-color: ${props => props.colors?.background || theme.primary};
+    left: 0;
+    top: 0;
+    z-index: -1;
+    border-radius: inherit;
+    transform-origin: left;
+  }
+`
+
+const UnderlinedButton = styled(DefaultButton)`
+  background-color: ${props => props.colors?.background || 'transparent'};
+  color: ${props => props.color || theme.black};
+  padding: 10px 0px;
+  letter-spacing: 2px;
+  &::before{
+    content: "";
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 99%;
+    height: 2.5px;
+    background-color: ${props => props.colors?.border || theme.primary};
+    transition: 0.2s;
+  }
+  svg{
+    fill: ${props => props.colors?.border || theme.primary};
+    path {
+      fill: ${props => props.colors?.border || theme.primary};
+    }
+  }
+  &::after{
+    display: none;
+  }
+  &:hover{
+    color: ${props => props.colors?.textHover || theme.black};
+    transform: translateY(-1px);
+    svg{
+      transform: translateX(6px);
+      fill: ${props => props.colors?.borderHover || theme.primary};
+      path {
+        fill: ${props => props.colors?.borderHover || theme.primary};
+      }
+    }
+    &::before{
+      transform: translateY(4px);
+    }
+  }
+`
+
+const PillButton = styled(DefaultButton)`
+  border-radius: 30px;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  `
+
+const RoundedButton = styled(DefaultButton)`
+  border-radius: 4px;
+`

package/src/components/Button/index.types.ts

@@ -0,0 +1,11 @@
+import { ArrowIcon } from "../../shared/components/Icon"
+import { ComponentColors, ComponentFont } from "../../shared/types"
+
+export type ButtonProps = {
+  children?: React.ReactNode | string,
+  onClick?: () => void,
+  type?: "default" | "rounded" | "pill" | "underlined",
+  colors?: ComponentColors
+  font?: ComponentFont
+  arrow?: ArrowIcon
+}

package/src/components/Hero/index.stories.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react';
+import Hero from '.';
+import Button from '../Button';
+
+const meta = {
+  title: 'Components/Hero',
+  component: Hero,
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof Hero>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () =>
+    <Hero
+      height='100vh'
+      imageUrls={['https://images.unsplash.com/photo-1628745277862-bc0b2d68c50c']}
+      overlay={{
+        color: "black",
+        opacity: "50%"
+      }}>
+      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', color: 'white' }}>
+        <h2>Donde el lujo se transforma en el arte de vivir</h2>
+        <h2>60 años creando espacios únicos que inspiran.</h2>
+        <Button
+          arrow='arrow-caret'
+          font={{ casing: 'first-capitalized' }}
+          colors={{ background: 'black' }}
+        >
+          Transformá tu espacio
+        </Button>
+      </div>
+    </Hero>
+};

package/src/components/Hero/index.tsx

@@ -0,0 +1,76 @@
+import React, { useState } from 'react'
+import styled from '@emotion/styled'
+import { HeroProps } from './index.types'
+import { theme } from '../../shared/styles/theme'
+import { Opacity } from '../../shared/types'
+
+export default function Hero(props: HeroProps) {
+  const {
+    children,
+    imageUrls=[""],
+    overlay,
+    marginTop,
+    height
+  } = props
+
+  const [activeBackgroundUrl, setActiveBackgroundUrl] = useState<string>(imageUrls && imageUrls[0] ? imageUrls[0] : "")
+
+  return (
+    <>
+      <Container 
+        backgroundUrl={activeBackgroundUrl}
+        marginTop={marginTop}
+        height={height}
+      >
+        {overlay && (
+          <Overlay color={overlay.color} opacity={overlay.opacity}/>
+        )}
+        <HeroContent>
+          {children}
+        </HeroContent>
+      </Container>
+    </>
+  )
+}
+
+const Container = styled.div<{backgroundUrl: string, marginTop: HeroProps['marginTop'], height: HeroProps['height']}>`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+  height: ${props => `calc(${props.height} - ${props.marginTop})`};
+  margin-top: ${props => props.marginTop};
+  background-image: url(${props => props.backgroundUrl});
+  /* background-color:  rgba(76, 88, 97, 0.7);
+  background-blend-mode: luminosity; */
+  background-position-y: 69%;
+  background-size: cover;
+  padding: 0 8vw;
+  @media only screen and (max-width: 800px) {
+    padding: 80px 10px;
+    svg {
+      max-height: 300px;
+      transform: translateX(20px);
+    }
+  }
+`
+
+const Overlay = styled.div<{color: string, opacity: Opacity}>`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  z-index: 1;
+  background-color: ${props => props.color};
+  opacity: ${props => props.opacity};
+`
+
+const HeroContent = styled.div`
+  width: 100%;
+  z-index: 2;
+`

package/src/components/Hero/index.types.ts

@@ -0,0 +1,13 @@
+import React from "react"
+import { Opacity } from "../../shared/types"
+
+export type HeroProps = {
+  children?: React.ReactNode
+  imageUrls?: string[]
+  marginTop?: string
+  height?: string
+  overlay?: {
+    color: string
+    opacity: Opacity
+  }
+}

package/src/components/Navbar/index.stories.tsx

@@ -0,0 +1,59 @@
+import React from 'react'
+import Navbar from '.'
+import { NavbarProps } from './index.types'
+import { Meta, StoryObj } from '@storybook/react/*'
+
+type StoryProps = NavbarProps
+
+const meta: Meta<StoryProps> = {
+  title: 'Components/Navbar',
+  component: Navbar,
+  parameters: {
+    layout: '',
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<StoryProps>
+
+export const Default: Story = {
+  render: () =>
+    <Navbar
+      config={{ centeredItems: true }}
+      logo={{ url: 'https://kgo.googleusercontent.com/profile_vrt_raw_bytes_1587515400_10885.png' }}
+      button={{
+        label: "Agendá una reunión",
+        type: "rounded",
+        arrow: 'arrow-long',
+        font: {
+          size: '14px',
+          weight: '500',
+          casing: 'first-capitalized'
+        }
+      }}
+      items={[
+        {
+          label: "Sobre Nosotros",
+          subitems: [
+            {
+              label: 'Quiénes somos',
+            },
+            {
+              label: 'Por qué elegirnos',
+            },
+            {
+              label: 'Testimonios y Opiniones',
+            }
+          ],
+        },
+        {
+          label: "Productos",
+        },
+        {
+          label: "Nuestros proyectos",
+        },
+      ]}
+    />,
+}

package/src/components/Navbar/index.tsx

@@ -0,0 +1,196 @@
+import React from 'react'
+import styled from '@emotion/styled';
+import { theme } from '../../shared/styles/theme';
+import Icon from '../../shared/components/Icon';
+import Button from '../Button';
+import { NavbarProps } from './index.types';
+import { appearAnimation, disappearAnimation } from '../../shared/styles/animations';
+
+export default function Navbar(props: NavbarProps) {
+  const {
+    logo,
+    items,
+    button,
+    config
+  } = props
+
+  return (
+    <>
+      <NavbarContainer height={config.height} colors={config.colors} centeredItems={config.centeredItems}>
+        <Logo src={logo?.url} onClick={logo?.onClick} />
+        <div>
+          {items?.map(item => {
+            return (
+              <a
+                key={item.label}
+                href="#"
+                onClick={(e) => {
+                  e.preventDefault();
+                  item.onClick && item.onClick()
+                }}
+              >
+                {item.label}
+                {item.subitems && (
+                  <>
+                    <Icon icon='arrow-caret' size='8px' />
+                    <div>
+                      {item.subitems?.map(subitem => {
+                        return (
+                          <ControlledNavItem key={subitem.label}>
+                            <a href="#" onClick={(e) => {
+                              e.preventDefault();
+                              subitem.onClick && subitem.onClick()
+                            }}>
+                              {subitem.label}
+                            </a>
+                          </ControlledNavItem>
+                        )
+                      })}
+                    </div>
+                  </>
+                )}
+              </a>
+            )
+          })}
+        </div>
+        {button &&
+          <Button
+            colors={button.colors}
+            type={button.type}
+            font={button.font}
+            onClick={button.onClick}
+            arrow={button.arrow}
+          >
+            {button.label}
+          </Button>
+        }
+      </NavbarContainer>
+    </>
+  )
+}
+
+const NavbarContainer = styled.div<NavbarProps['config']>`
+  background-color: ${props => props.colors?.background || theme.black};
+  width: 100vw;
+  height: ${props => props.height || '80px'};
+  display: flex;
+  position: fixed;
+  top: 0;
+  left: 0;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 4vw;
+  z-index: 99;
+  backdrop-filter: blur(4px);
+  * {
+    -webkit-user-drag: none;
+    -khtml-user-drag: none;
+    -moz-user-drag: none;
+    -o-user-drag: none;
+  }
+  @media only screen and (max-width: 800px) {
+    height: 80px;
+    padding: 0 6vw;
+  }
+  & > div {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    margin-left: ${props => props.centeredItems ? 'unset' : 'auto'};
+    & > a {
+      color: ${props => props.colors?.text || theme.white};
+      position: relative;
+      display: flex;
+      gap: 5px;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      font-size: 12px;
+      letter-spacing: 2px;
+      font-weight: 500;
+      text-transform: uppercase;
+      text-decoration: none;
+      padding: 6px 22px 0;
+      transition: 0.3s;
+      border-bottom: 4px solid transparent;
+      svg {
+        margin-bottom: 1px;
+        transform: rotateZ(90deg);
+      }
+      & > div {
+        z-index: 10;
+        position: absolute;
+        display: none;
+        flex-direction: column;
+        align-items: flex-start;
+        width: max-content;
+        gap: 12px;
+        top: 88%;
+        left: 0;
+        background-color: black;
+        padding: 16px 14px;
+        animation-name: ${disappearAnimation};
+        animation-duration: 0.3s;
+        animation-fill-mode: forwards;
+        a {
+          color: ${props => props.colors?.text || theme.white};
+          padding: 0;
+        }
+        &:hover {
+          animation-name: ${appearAnimation};
+          display: flex;
+        }
+      }
+      &:hover {
+        border-color: white;
+        svg {
+          transform: rotateZ(90deg) rotateY(-180deg) translateX(1px);
+        }
+        & > div{
+          animation-name: ${appearAnimation};
+          display: flex;
+        }
+      }
+    }
+    @media only screen and (max-width: 800px) {
+      display: none;
+    }
+  }
+`
+
+const Logo = styled.img`
+  cursor: pointer;
+  height: 56%;
+  transition: all 0.2s;
+  &:hover {
+    filter: brightness(1.2);
+  }
+`
+
+const ControlledNavItem = styled.div`
+    cursor: pointer;
+    height: 100%;
+    max-height: 90px;
+    text-transform: uppercase;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: 0.3s;
+    a {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      padding: 0 22px;
+      font-size: 12px;
+      letter-spacing: 2px;
+      font-weight: 500;
+      text-decoration: none;
+    }
+    &:hover {
+      & > div{
+        display: flex;
+      }
+    }
+  `

package/src/components/Navbar/index.types.ts

@@ -0,0 +1,27 @@
+import React from "react"
+import { ButtonProps } from "../Button/index.types"
+import { ComponentColors } from "../../shared/types"
+
+export type NavbarProps = {
+  config: {
+    colors?: ComponentColors
+    height?: string
+    centeredItems?: boolean
+  }
+  logo?: {
+    url: string
+    onClick?: () => void
+  }
+  items?: {
+    label: string
+    onClick?: () => void
+    subitems?: {
+      label: string
+      onClick?: () => void
+    }[]
+  }[]
+  button?: ButtonProps & {
+    label: string
+    onClick?: () => void
+  }
+}