wex-ui-lib 1.0.3 → 1.0.4

package/dist/src/shared/utils/formatters.d.ts

@@ -1,2 +0,0 @@
-export type TextCasing = 'first-capitalized' | 'uppercase' | 'lowercase';
-export declare const formatText: (text: string, format: TextCasing) => string;

package/dist/src/shared/utils/useIntObs.d.ts

@@ -1,19 +0,0 @@
-interface UseIntObsOptions {
-    threshold?: number | number[];
-    root?: any;
-    rootMargin?: string;
-    freezeOnceVisible?: boolean;
-    initialIsIntersecting?: boolean;
-    onChange?: (isIntersecting: boolean, entry: IntersectionObserverEntry) => void;
-}
-type UseIntObsResult = [
-    (node: Element | null) => void,
-    boolean,
-    IntersectionObserverEntry | undefined
-] & {
-    ref: (node: Element | null) => void;
-    isIntersecting: boolean;
-    entry: IntersectionObserverEntry | undefined;
-};
-export declare function useIntObs({ threshold, root, rootMargin, freezeOnceVisible, initialIsIntersecting, onChange, }?: UseIntObsOptions): UseIntObsResult;
-export {};

package/rollup.config.mjs

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

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

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

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

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

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

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

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

@@ -1,196 +0,0 @@
-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;
-      }
-    }
-  `