Merge pull request #4 from claudaniloxavier/main

feat: button and avatar release

.github/workflows/release.yml

@@ -0,0 +1,32 @@
+name: Release
+
+on:
+  push:
+    banches:
+      - releases
+
+jobs: 
+  release:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v2
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: 20
+
+      - name: Install Dependencies
+        run: npm install
+
+      # - name: Run Tests 
+        # run: npm test
+
+      - name: Semantic Release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: npx semantic-release
+

.releaserc.json

@@ -0,0 +1,38 @@
+{
+  "branches": [
+    "releases"
+  ],
+  "preset": "angular",
+  "plugins": [
+    "@semantic-release/commit-analyzer",
+    "@semantic-release/release-notes-generator",
+    [
+      "@semantic-release/changelog",
+      {
+        "changelogTitle": "# Changelog"
+      }
+    ],
+    [
+      "@semantic-release/npm",
+      {
+        "npmPublish": false
+      }
+    ],
+    [
+      "@semantic-release/git",
+      {
+        "assets": [
+          "package.json",
+          "CHANGELOG.md"
+        ],
+        "message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
+      }
+    ],
+    [
+      "@semantic-release/github",
+      {
+        "assets": "dist/*.{js,css}"
+      }
+    ]
+  ]
+}

.storybook/main.ts

@@ -9,6 +9,7 @@ const config: StorybookConfig = {
     "@storybook/addon-essentials",
     "@storybook/addon-onboarding",
     "@storybook/addon-interactions",
+    "@storybook/addon-a11y"
   ],
   framework: {
     name: "@storybook/react-vite",

.storybook/preview.ts

@@ -9,6 +9,9 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+    docs: {
+      toc: true
+    }
   },
 };
 

lib/components/Avatar/index.tsx

@@ -0,0 +1,57 @@
+import { FC } from 'react'
+
+// TYPES
+import { AvatarProps as Props } from './types'
+
+// STYLES
+import classNames from 'classnames'
+import styles from './styles.module.scss'
+
+const Avatar: FC<Props> = ({ 
+  backgroundColor = '#339AF0',
+  className,
+  fontColor = '#FFFFFF',
+  image,
+  name,
+  size = 'md',
+  withTitle = true,
+  ...rest 
+}: Props) => {
+  const getInitials = (): string => {
+    const names = name.split(' ')
+    const initials = (names[0] ? names[0][0] : '') + (names.length > 1 ? names[names.length -1][0] : '')
+
+    return initials
+  }
+
+  const avatarInitials = getInitials()
+
+  return (
+    <div
+      className={classNames(className, styles.avatar, {
+        [styles.xsmall]: size === 'xs',
+        [styles.small]: size === 'sm',
+        [styles.medium]: size === 'md',
+        [styles.large]: size === 'lg',
+        [styles.xlarge]: size === 'xl',
+      })}
+      title={withTitle ? name : undefined}
+      style={{
+        backgroundColor: backgroundColor
+      }} 
+      {...rest} 
+    >
+      {image && (
+        <img src={image} alt={name} />
+      )}
+
+      {!image && (
+        <span style={{ color: fontColor }}>
+          {avatarInitials}
+        </span>
+      )}
+    </div>
+  )
+}
+
+export { Avatar }

lib/components/Avatar/styles.module.scss

@@ -0,0 +1,73 @@
+@use '../../theme/helpers.scss' as *;
+@use '../../theme/variables/font' as font;
+
+.avatar {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  overflow: hidden;
+  user-select: none;
+
+  &.xsmall {
+    width: to-rem(24);
+    height: to-rem(24);
+
+    span {
+      font-size: to-rem(10);
+      line-height: to-rem(10);
+    }
+  }
+
+  &.small {
+    width: to-rem(32);
+    height: to-rem(32);
+
+    span {
+      font-size: font.$size-xxxs;
+      line-height: to-rem(12);
+    }
+  }
+
+  &.medium {
+    width: to-rem(48);
+    height: to-rem(48);
+
+    span {
+      font-size: font.$size-xs;
+      line-height: to-rem(16);
+    }
+  }
+
+  &.large {
+    width: to-rem(64);
+    height: to-rem(64);
+
+    span {
+      font-size: font.$size-md;
+      line-height: to-rem(20);
+    }
+  }
+
+  &.xlarge {
+    width: to-rem(96);
+    height: to-rem(96);
+
+    span {
+      font-size: font.$size-lg;
+      line-height: to-rem(24);
+    }
+  }
+
+  img {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+  }
+
+  span {
+    font-family: font.$family-primary;
+    font-weight: font.$weight-semibold;
+  }
+}

lib/components/Avatar/types.ts

@@ -0,0 +1,12 @@
+import { HTMLAttributes } from 'react'
+
+type DivOwnProps = HTMLAttributes<HTMLDivElement>
+
+export interface AvatarProps extends DivOwnProps {
+  size: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  name: string
+  image?: string
+  backgroundColor?: string
+  fontColor?: string
+  withTitle?: boolean
+}

lib/components/Button/index.tsx

@@ -1,12 +1,76 @@
-import { FC, ButtonHTMLAttributes } from "react";
+import { FC, useRef } from 'react'
+
+// HOOKS
+import useRipple from '../../hooks/useRipple'
+
+// TYPES
+import { ButtonProps as Props } from './types'
 
 // STYLES
-import styles from './styles.module.css'
+import classNames from 'classnames'
+import styles from './styles.module.scss'
+
+const Button: FC<Props> = ({ 
+  className,
+  children,
+  shape = 'solid',
+  variant = 'primary',
+  size = 'medium',
+  radius = 'default',
+  raised = false,
+  disabled = false,
+  icon,
+  iconPosition = 'left',
+  onClick,
+  ...rest 
+}: Props) => {
+  const buttonRef = useRef<HTMLButtonElement>(null)
+  const ripples = useRipple(buttonRef)
+
+  return (
+    <button
+      ref={buttonRef}
+      onClick={disabled ? undefined : onClick} 
+      disabled={disabled}
+      className={classNames(className, styles.button, {
+        [styles.primary]: variant === 'primary',
+        [styles.secondary]: variant === 'secondary',
+        [styles.success]: variant === 'success',
+        [styles.error]: variant === 'error',
+        [styles.warning]: variant === 'warning',
+
+        [styles.solid]: shape === 'solid',
+        [styles.outlined]: shape === 'outlined',
+        [styles.text]: shape === 'text',
+
+        [styles.small]: size === 'small',
+        [styles.medium]: size === 'medium',
+        [styles.large]: size === 'large',
+        [styles.xlarge]: size === 'x-large',
+
+        [styles.radius]: radius === 'default',
+        [styles.pill]: radius === 'pill',
+
+        [styles.raised]: raised === true && shape === 'solid',
+
+        [styles.row]: iconPosition === 'left',
+        [styles.rowReverse]: iconPosition === 'right'
+      })} 
+      {...rest} 
+    >
+      {ripples}
 
-const Button: FC<ButtonHTMLAttributes<HTMLButtonElement>> = (props: ButtonHTMLAttributes<HTMLButtonElement>) => {
-  const { className, ...rest } = props
-
-  return <button className={`${className} ${styles.button}`} {...rest} />
+      {icon && (
+        <span className={styles.icon}>
+          {icon}
+        </span>
+      )}
+
+      <span className={styles.label}>
+        {children}
+      </span>
+    </button>
+  )
 }
 
 export { Button }