move components to new project structure

layerx-labs · Jan 20, 2021 · f50085e · f50085e
1 parent 3cb61de
commit f50085e
Show file tree

Hide file tree

Showing 23 changed files with 882 additions and 882 deletions.
diff --git a/src/atoms/avatar.tsx b/src/atoms/avatar.tsx
diff --git a/src/atoms/avatar/index.tsx b/src/atoms/avatar/index.tsx
@@ -0,0 +1,14 @@
+import React, { HTMLAttributes } from 'react';
+import * as Styles from './styles';
+
+interface Props extends HTMLAttributes<HTMLDivElement> {
+  url: string;
+  alt: string;
+}
+
+const Avatar = (props: Props) => {
+  const { url, alt, style } = props;
+  return <Styles.Image src={url} alt={alt} style={style} />;
+};
+
+export default Avatar;
diff --git a/src/atoms/avatar/styles.tsx b/src/atoms/avatar/styles.tsx
@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+export const Image = styled.img`
+  border: 1px solid var(--default, hsl(0, 0%, 16%));
+  border-radius: 999px;
+  width: 30px;
+  height: 30px;
+  object-fit: cover;
+  overflow: hidden;
+`;
diff --git a/src/atoms/button/index.tsx b/src/atoms/button/index.tsx
@@ -40,7 +40,7 @@ const Button = (props: ButtonProps) => {
     if (!document) return;
     const element: HTMLElement | null = document.querySelector(querySelector);
     if (!element) return;
-    element.addEventListener('mousemove', (event) => {
+    element.addEventListener('mousemove', event => {
       const x = event.pageX - event.offsetX;
       const y = event.pageY - event.offsetY;
       element.style.setProperty('--x', `${x}px`);

diff --git a/src/atoms/button/styles.tsx b/src/atoms/button/styles.tsx
@@ -28,36 +28,35 @@ export const ButtonWrapper = styled.button<ButtonProps>`
   --txt: var(--white, hsl(0, 0%, 100%));
   --hover: hsl(186, 62%, 49%);
 
-  border-width: ${(props) => (props.variant === 'outline' ? '3px' : 0)};
+  border-width: ${props => (props.variant === 'outline' ? '3px' : 0)};
   border-style: solid;
   border-color: var(--button);
-  border-radius: ${(props) => (props.variant === 'text' ? 0 : '999px')};
-  background-color: ${(props) =>
+  border-radius: ${props => (props.variant === 'text' ? 0 : '999px')};
+  background-color: ${props =>
     props.variant === 'solid' ? 'var(--button)' : 'transparent'};
-  width: ${(props) =>
+  width: ${props =>
     props.value ? (props.circle ? '36px' : 'min-content') : '36px'};
   height: 36px;
   display: flex;
   justify-content: center;
   align-items: center;
-  padding: ${(props) => (props.value ? (props.circle ? 0 : '0 20px') : 0)};
+  padding: ${props => (props.value ? (props.circle ? 0 : '0 20px') : 0)};
   text-transform: uppercase;
   white-space: nowrap;
   transition-duration: 0.3s;
   cursor: pointer;
 
   &:hover {
-    border-color: ${(props) =>
-      props.variant === 'solid' ? '' : 'var(--hover)'};
-    background-color: ${(props) =>
+    border-color: ${props => (props.variant === 'solid' ? '' : 'var(--hover)')};
+    background-color: ${props =>
       props.variant === 'solid' ? 'var(--hover)' : 'transparent'};
 
     span {
-      color: ${(props) => (props.variant === 'solid' ? '' : 'var(--hover)')};
+      color: ${props => (props.variant === 'solid' ? '' : 'var(--hover)')};
     }
 
     svg {
-      fill: ${(props) => (props.variant === 'solid' ? '' : 'var(--hover)')};
+      fill: ${props => (props.variant === 'solid' ? '' : 'var(--hover)')};
     }
   }
 
@@ -75,15 +74,15 @@ export const ButtonWrapper = styled.button<ButtonProps>`
   }
 
   .spinner {
-    border-top-color: ${(props) =>
+    border-top-color: ${props =>
       props.variant === 'solid' ? '' : 'var(--button)'};
   }
 
   span {
     position: relative;
     font-size: 0.75rem;
     font-weight: var(--bold, 700);
-    color: ${(props) =>
+    color: ${props =>
       props.variant === 'solid' ? 'var(--txt)' : 'var(--button)'};
     pointer-events: none;
     transition-duration: 0.3s;
@@ -93,47 +92,47 @@ export const ButtonWrapper = styled.button<ButtonProps>`
     width: auto;
     min-width: 20px;
     height: 20px;
-    fill: ${(props) =>
+    fill: ${props =>
       props.variant === 'solid' ? 'var(--txt)' : 'var(--button)'};
     transition: 0.3s;
   }
 
-  ${(props) =>
+  ${props =>
     props.color === 'danger' &&
     css`
       --button: var(--red, hsl(354, 83%, 64%));
       --hover: hsl(354, 83%, 54%);
     `}
 
-  ${(props) =>
+  ${props =>
     props.color === 'info' &&
     css`
       --button: var(--grey, hsl(0, 0%, 85%));
       --hover: hsl(0, 0%, 75%);
     `}
 
-  ${(props) =>
+  ${props =>
     props.color === 'purple' &&
     css`
       --button: var(--purple, hsl(256, 55%, 43%));
       --hover: hsl(256, 55%, 33%);
     `}
 
-  ${(props) =>
+  ${props =>
     props.color === 'white' &&
     css`
       --button: var(--white);
       --hover: var(--grey);
     `}
 
-  ${(props) =>
+  ${props =>
     props.color === 'black' &&
     css`
       --button: var(--default, hsl(0, 0%, 16%));
       --hover: hsl(0, 0%, 6%);
     `}
 
-  ${(props) =>
+  ${props =>
     props.color === 'magic' &&
     css`
       position: relative;
@@ -168,7 +167,7 @@ export const ButtonWrapper = styled.button<ButtonProps>`
       }
     `}
 
-  ${(props) =>
+  ${props =>
     props.color === 'live' &&
     css`
       animation: ${live} 1s infinite;

diff --git a/src/atoms/checkbox/index.tsx b/src/atoms/checkbox/index.tsx
@@ -0,0 +1,49 @@
+import React, { HTMLAttributes } from 'react';
+import {
+  CheckboxWrapper,
+  CheckboxLabel,
+  CheckboxInput,
+  Checkmark,
+} from './styles';
+
+interface Props extends HTMLAttributes<HTMLDivElement> {
+  value: string;
+  label?: string;
+  checked?: boolean;
+  onChange?: () => {};
+  error?: string;
+  disabled?: boolean;
+}
+
+const Checkbox = (props: Props) => {
+  const {
+    label,
+    value,
+    checked = false,
+    onChange = () => {},
+    error,
+    disabled = false,
+    style,
+    className = '',
+  } = props;
+  return (
+    <CheckboxWrapper
+      error={error}
+      disabled={disabled}
+      style={style}
+      className={className}
+    >
+      <CheckboxLabel>{label}</CheckboxLabel>
+      <CheckboxInput
+        type="checkbox"
+        name={value}
+        checked={checked}
+        onChange={onChange}
+        disabled={disabled}
+      />
+      <Checkmark />
+    </CheckboxWrapper>
+  );
+};
+
+export default Checkbox;
diff --git a/src/atoms/checkbox.tsx → src/atoms/checkbox/styles.tsx b/src/atoms/checkbox.tsx → src/atoms/checkbox/styles.tsx
@@ -1,20 +1,18 @@
-import React, { HTMLAttributes } from 'react';
 import styled from 'styled-components';
 
 interface CheckboxErrorProps {
   error?: string;
 }
-
 interface CheckboxWrapperProps extends CheckboxErrorProps {
   disabled?: boolean;
 }
 
-const CheckboxWrapper = styled.label<CheckboxWrapperProps>`
+export const CheckboxWrapper = styled.label<CheckboxWrapperProps>`
   display: inline-block;
   position: relative;
   height: 24px;
   padding-left: 0;
-  cursor: ${(props) => (props.disabled ? 'auto' : 'pointer')};
+  cursor: ${props => (props.disabled ? 'auto' : 'pointer')};
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -25,24 +23,24 @@ const CheckboxWrapper = styled.label<CheckboxWrapperProps>`
   }
 
   span {
-    color: ${(props) =>
+    color: ${props =>
       props.error
         ? 'var(--red, hsl(354, 83%, 64%))'
         : props.disabled
         ? 'var(--grey, hsl(0, 0%, 85%))'
         : null};
-    border-color: ${(props) =>
+    border-color: ${props =>
       props.error ? 'var(--red, hsl(354, 83%, 64%))' : null};
   }
 `;
 
-const Label = styled.span`
+export const CheckboxLabel = styled.span`
   padding-left: 30px;
   line-height: 24px;
   vertical-align: middle;
 `;
 
-const Input = styled.input`
+export const CheckboxInput = styled.input`
   position: absolute;
   opacity: 0;
   cursor: pointer;
@@ -76,12 +74,12 @@ const Input = styled.input`
   }
 `;
 
-const Checkmark = styled.span<CheckboxErrorProps>`
+export const Checkmark = styled.span<CheckboxErrorProps>`
   position: absolute;
   top: 0;
   left: 0;
   border: 2px solid
-    ${(props) =>
+    ${props =>
       props.error
         ? 'var(--red, hsl(354, 83%, 64%))'
         : 'var(--grey, hsl(0, 0%, 85%))'};
@@ -105,45 +103,3 @@ const Checkmark = styled.span<CheckboxErrorProps>`
     transform: rotate(45deg);
   }
 `;
-
-interface Props extends HTMLAttributes<HTMLDivElement> {
-  value: string;
-  label?: string;
-  checked?: boolean;
-  onChange?: () => {};
-  error?: string;
-  disabled?: boolean;
-}
-
-const Checkbox = (props: Props) => {
-  const {
-    label,
-    value,
-    checked = false,
-    onChange = () => {},
-    error,
-    disabled = false,
-    style,
-    className = '',
-  } = props;
-  return (
-    <CheckboxWrapper
-      error={error}
-      disabled={disabled}
-      style={style}
-      className={className}
-    >
-      <Label>{label}</Label>
-      <Input
-        type="checkbox"
-        name={value}
-        checked={checked}
-        onChange={onChange}
-        disabled={disabled}
-      />
-      <Checkmark />
-    </CheckboxWrapper>
-  );
-};
-
-export default Checkbox;
diff --git a/src/atoms/spinner/styles.tsx b/src/atoms/spinner/styles.tsx
@@ -16,10 +16,9 @@ const rotation = keyframes`
 
 export const Loading = styled.div<LoadingProps>`
   border: 5px solid rgba(255, 255, 255, 0.4);
-  border-top-color: ${(props) =>
-    props.fill || 'var(--white, hsl(0, 0%, 100%))'};
+  border-top-color: ${props => props.fill || 'var(--white, hsl(0, 0%, 100%))'};
   border-radius: 50%;
-  width: ${(props) => props.size || '20px'};
-  height: ${(props) => props.size || '20px'};
+  width: ${props => props.size || '20px'};
+  height: ${props => props.size || '20px'};
   animation: ${rotation} 0.8s ease infinite;
 `;
diff --git a/src/atoms/tag/index.tsx b/src/atoms/tag/index.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import * as Styles from './styles';
+import { TagColor } from './types';
+
+interface TagProps {
+  color?: TagColor;
+  value: string;
+}
+
+const Tag = (props: TagProps) => {
+  const { color = 'primary', value } = props;
+  return <Styles.TagWrapper color={color}>{value}</Styles.TagWrapper>;
+};
+
+export default Tag;