feat: add ColorSelect

src/components/Button/index.tsx

@@ -5,10 +5,10 @@ import { Wrapper } from './styles'
 
 type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
   children: ReactNode
-  theme?: ButtonVariantProps['theme']
-  schema?: ButtonVariantProps['schema']
-  outline?: ButtonVariantProps['outline']
+  colorSchema?: ButtonVariantProps['colorSchema']
+  styleSchema?: ButtonVariantProps['styleSchema']
   font?: ButtonVariantProps['font']
+  outline?: ButtonVariantProps['outline']
 }
 
 export function Button({ children, ...rest }: ButtonProps) {

src/components/Button/styles.ts

@@ -1,6 +1,6 @@
 import { Colors, styled, theme, VariantProps } from '../../styles/stitches.config'
 
-const themeVariantFn = (
+const colorSchemaFn = (
   lightColor: Colors,
   regularColor: Colors,
   darkColor: Colors,
@@ -51,32 +51,28 @@ export const Wrapper = styled('button', {
   },
 
   variants: {
-    theme: {
-      slate: themeVariantFn('slate50', 'slate600', 'slate700', 'slate800'),
-      gray: themeVariantFn('gray50', 'gray600', 'gray700', 'gray800'),
-      zinc: themeVariantFn('zinc50', 'zinc600', 'zinc700', 'zinc800'),
-      neutral: themeVariantFn('neutral50', 'neutral600', 'neutral700', 'neutral800'),
-      stone: themeVariantFn('stone50', 'stone600', 'stone700', 'stone800'),
-      red: themeVariantFn('red50', 'red600', 'red700', 'red800'),
-      orange: themeVariantFn('orange50', 'orange600', 'orange700', 'orange800'),
-      amber: themeVariantFn('amber50', 'amber600', 'amber700', 'amber800'),
-      yellow: themeVariantFn('yellow50', 'yellow600', 'yellow700', 'yellow800'),
-      lime: themeVariantFn('lime50', 'lime600', 'lime700', 'lime800'),
-      green: themeVariantFn('green50', 'green600', 'green700', 'green800'),
-      emerald: themeVariantFn('emerald50', 'emerald600', 'emerald700', 'emerald800'),
-      teal: themeVariantFn('teal50', 'teal600', 'teal700', 'teal800'),
-      cyan: themeVariantFn('cyan50', 'cyan600', 'cyan700', 'cyan800'),
-      sky: themeVariantFn('sky50', 'sky600', 'sky700', 'sky800'),
-      blue: themeVariantFn('blue50', 'blue600', 'blue700', 'blue800'),
-      indigo: themeVariantFn('indigo50', 'indigo600', 'indigo700', 'indigo800'),
-      violet: themeVariantFn('violet50', 'violet600', 'violet700', 'violet800'),
-      purple: themeVariantFn('purple50', 'purple600', 'purple700', 'purple800'),
-      fuchsia: themeVariantFn('fuchsia50', 'fuchsia600', 'fuchsia700', 'fuchsia800'),
-      pink: themeVariantFn('pink50', 'pink600', 'pink700', 'pink800'),
-      rose: themeVariantFn('rose50', 'rose600', 'rose700', 'rose800')
+    colorSchema: {
+      slate: colorSchemaFn('slate50', 'slate600', 'slate700', 'slate800'),
+      red: colorSchemaFn('red50', 'red600', 'red700', 'red800'),
+      orange: colorSchemaFn('orange50', 'orange600', 'orange700', 'orange800'),
+      amber: colorSchemaFn('amber50', 'amber600', 'amber700', 'amber800'),
+      yellow: colorSchemaFn('yellow50', 'yellow600', 'yellow700', 'yellow800'),
+      lime: colorSchemaFn('lime50', 'lime600', 'lime700', 'lime800'),
+      green: colorSchemaFn('green50', 'green600', 'green700', 'green800'),
+      emerald: colorSchemaFn('emerald50', 'emerald600', 'emerald700', 'emerald800'),
+      teal: colorSchemaFn('teal50', 'teal600', 'teal700', 'teal800'),
+      cyan: colorSchemaFn('cyan50', 'cyan600', 'cyan700', 'cyan800'),
+      sky: colorSchemaFn('sky50', 'sky600', 'sky700', 'sky800'),
+      blue: colorSchemaFn('blue50', 'blue600', 'blue700', 'blue800'),
+      indigo: colorSchemaFn('indigo50', 'indigo600', 'indigo700', 'indigo800'),
+      violet: colorSchemaFn('violet50', 'violet600', 'violet700', 'violet800'),
+      purple: colorSchemaFn('purple50', 'purple600', 'purple700', 'purple800'),
+      fuchsia: colorSchemaFn('fuchsia50', 'fuchsia600', 'fuchsia700', 'fuchsia800'),
+      pink: colorSchemaFn('pink50', 'pink600', 'pink700', 'pink800'),
+      rose: colorSchemaFn('rose50', 'rose600', 'rose700', 'rose800')
     },
 
-    schema: {
+    styleSchema: {
       square: {
         borderRadius: '0'
       },
@@ -109,120 +105,100 @@ export const Wrapper = styled('button', {
 
   compoundVariants: [
     {
-      theme: 'slate',
+      colorSchema: 'slate',
       outline: true,
       css: outlineVariantFn('slate600')
     },
     {
-      theme: 'gray',
-      outline: true,
-      css: outlineVariantFn('gray600')
-    },
-    {
-      theme: 'zinc',
-      outline: true,
-      css: outlineVariantFn('zinc600')
-    },
-    {
-      theme: 'neutral',
-      outline: true,
-      css: outlineVariantFn('neutral600')
-    },
-    {
-      theme: 'stone',
-      outline: true,
-      css: outlineVariantFn('stone600')
-    },
-    {
-      theme: 'red',
+      colorSchema: 'red',
       outline: true,
       css: outlineVariantFn('red600')
     },
     {
-      theme: 'orange',
+      colorSchema: 'orange',
       outline: true,
       css: outlineVariantFn('orange600')
     },
     {
-      theme: 'amber',
+      colorSchema: 'amber',
       outline: true,
       css: outlineVariantFn('amber600')
     },
     {
-      theme: 'yellow',
+      colorSchema: 'yellow',
       outline: true,
       css: outlineVariantFn('yellow600')
     },
     {
-      theme: 'lime',
+      colorSchema: 'lime',
       outline: true,
       css: outlineVariantFn('lime600')
     },
     {
-      theme: 'green',
+      colorSchema: 'green',
       outline: true,
       css: outlineVariantFn('green600')
     },
     {
-      theme: 'emerald',
+      colorSchema: 'emerald',
       outline: true,
       css: outlineVariantFn('emerald600')
     },
     {
-      theme: 'teal',
+      colorSchema: 'teal',
       outline: true,
       css: outlineVariantFn('teal600')
     },
     {
-      theme: 'cyan',
+      colorSchema: 'cyan',
       outline: true,
       css: outlineVariantFn('cyan600')
     },
     {
-      theme: 'sky',
+      colorSchema: 'sky',
       outline: true,
       css: outlineVariantFn('sky600')
     },
     {
-      theme: 'blue',
+      colorSchema: 'blue',
       outline: true,
       css: outlineVariantFn('blue600')
     },
     {
-      theme: 'indigo',
+      colorSchema: 'indigo',
       outline: true,
       css: outlineVariantFn('indigo600')
     },
     {
-      theme: 'violet',
+      colorSchema: 'violet',
       outline: true,
       css: outlineVariantFn('violet600')
     },
     {
-      theme: 'purple',
+      colorSchema: 'purple',
       outline: true,
       css: outlineVariantFn('purple600')
     },
     {
-      theme: 'fuchsia',
+      colorSchema: 'fuchsia',
       outline: true,
       css: outlineVariantFn('fuchsia600')
     },
     {
-      theme: 'pink',
+      colorSchema: 'pink',
       outline: true,
       css: outlineVariantFn('pink600')
     },
     {
-      theme: 'rose',
+      colorSchema: 'rose',
       outline: true,
       css: outlineVariantFn('rose600')
     }
   ],
 
   defaultVariants: {
-    theme: 'teal',
-    schema: 'pill',
+    colorSchema: 'teal',
+    styleSchema: 'pill',
     font: 'roboto',
     outline: false
   }

src/components/Dash/ColorSelect/index.tsx

@@ -0,0 +1,84 @@
+import { useState } from 'react'
+
+import { useData } from '../../../hooks/useData'
+import type { Colors } from '../../../styles/stitches.config'
+import { theme } from '../../../styles/stitches.config'
+import { Color, SelectButton, Wrapper } from './styles'
+
+type ColorSelectProps = {
+  prop: 'texts' | 'socialLinks' | 'background' | 'buttonLinks'
+}
+
+export function ColorSelect({ prop }: ColorSelectProps) {
+  const { data, setData } = useData()
+  const [activeColor, setActiveColor] = useState<string>(data.settings.colors[prop] as string)
+
+  const allColors = Object.keys(theme.colors) as Colors[]
+  const colorsSchema = [
+    'slate',
+    'red',
+    'orange',
+    'amber',
+    'yellow',
+    'lime',
+    'green',
+    'emerald',
+    'teal',
+    'cyan',
+    'sky',
+    'blue',
+    'indigo',
+    'violet',
+    'purple',
+    'fuchsia',
+    'pink',
+    'rose'
+  ]
+
+  const colors = {
+    texts: allColors,
+    socialLinks: colorsSchema,
+    background: allColors,
+    buttonLinks: colorsSchema
+  }[prop]
+
+  const backgroundColor = (color: string) => {
+    if (prop === 'background' || prop === 'texts') {
+      return theme.colors[color as Colors]
+    }
+
+    return theme.colors[`${color}600` as Colors]
+  }
+
+  const handleChange = (color: string) => {
+    setActiveColor(color)
+    setData({
+      ...data,
+      settings: {
+        ...data.settings,
+        colors: {
+          ...data.settings.colors,
+          [prop]: color
+        }
+      }
+    })
+  }
+
+  return (
+    <Wrapper>
+      {colors.map(color => (
+        <SelectButton
+          key={color}
+          active={color === activeColor}
+          onClick={() => handleChange(color)}
+        >
+          <Color
+            css={{
+              backgroundColor: backgroundColor(color)
+            }}
+          />
+        </SelectButton>
+      ))}
+    </Wrapper>
+  )
+}

src/components/Dash/ColorSelect/styles.ts

@@ -0,0 +1,32 @@
+import { styled, theme } from '../../../styles/stitches.config'
+
+export const Wrapper = styled('div', {
+  display: 'grid',
+  gridTemplateColumns: 'repeat(10, 1fr)',
+  gridGap: '0.5rem'
+})
+
+export const SelectButton = styled('button', {
+  width: '100%',
+  height: '3rem',
+  padding: '0.25rem',
+  borderRadius: '0.25rem',
+  borderWidth: '3px',
+  borderStyle: 'solid',
+  borderColor: theme.colors.slate200,
+  cursor: 'pointer',
+
+  variants: {
+    active: {
+      true: {
+        borderColor: theme.colors.sky500
+      }
+    }
+  }
+})
+
+export const Color = styled('div', {
+  width: '100%',
+  height: '100%',
+  borderRadius: '0.25rem'
+})

src/components/Dash/index.tsx

@@ -4,16 +4,16 @@ import { useEffect, useState } from 'react'
 
 import { useData } from '../../hooks/useData'
 import { api } from '../../services/api'
-import type { Colors, Fonts } from '../../styles/stitches.config'
-import { theme } from '../../styles/stitches.config'
+import type { Fonts } from '../../styles/stitches.config'
 import type { Data } from '../../types/Data'
 import {
   getLocalStorageData,
   removeLocalStorageData,
   setLocalStorageData
 } from '../../utils/localStorage'
-import type { ButtonVariantProps } from '../Button'
+import { ButtonVariantProps } from '../Button'
 import { Home } from '../Home'
+import { ColorSelect } from './ColorSelect'
 import { DescriptionInput } from './DescriptionInput'
 import { NameInput } from './NameInput'
 import { Content, Preview, Wrapper } from './styles'
@@ -56,14 +56,7 @@ export function Dash({ initialData }: DashProps) {
     }
   }
 
-  const handleChangeBackground = (background: Colors) => {
-    setData({
-      ...data,
-      settings: { ...data.settings, colors: { ...data.settings.colors, background } }
-    })
-  }
-
-  const handleChangeButtonsSchema = (schema: ButtonVariantProps['schema']) => {
+  const handleChangeButtonsSchema = (schema: ButtonVariantProps['styleSchema']) => {
     setData({ ...data, settings: { ...data.settings, buttonsSchema: schema } })
   }
 
@@ -98,20 +91,16 @@ export function Dash({ initialData }: DashProps) {
           <option value="roboto">Roboto</option>
         </select>
 
-        <select
-          value={data.settings.colors.background}
-          onChange={e => handleChangeBackground(e.target.value as Colors)}
-        >
-          {Object.keys(theme.colors).map(color => (
-            <option key={color} value={color}>
-              {color}
-            </option>
-          ))}
-        </select>
+        <ColorSelect prop="texts" />
+        <ColorSelect prop="socialLinks" />
+        <ColorSelect prop="buttonLinks" />
+        <ColorSelect prop="background" />
 
         <select
           value={data.settings.buttonsSchema as string}
-          onChange={e => handleChangeButtonsSchema(e.target.value as ButtonVariantProps['schema'])}
+          onChange={e =>
+            handleChangeButtonsSchema(e.target.value as ButtonVariantProps['styleSchema'])
+          }
         >
           <option value="square">Square</option>
           <option value="rounded">Rounded</option>

src/components/Home/index.tsx

@@ -24,8 +24,8 @@ export const Home = () => {
         <Description>{description}</Description>
         {data.buttonLinks?.map(link => (
           <Button
-            theme={colors.buttonLinks}
-            schema={buttonsSchema}
+            colorSchema={colors.buttonLinks}
+            styleSchema={buttonsSchema}
             outline={outline}
             font={font}
             key={link.href}

src/components/Home/styles.ts

@@ -2,7 +2,8 @@ import { styled } from '../../styles/stitches.config'
 
 export const Wrapper = styled('main', {
   width: '100%',
-  height: '100vh'
+  height: '100vh',
+  transition: 'all 0.25s ease-in-out'
 })
 
 export const Content = styled('div', {

src/components/Link/styles.ts

@@ -20,11 +20,6 @@ export const Wrapper = styled('a', {
   variants: {
     theme: {
       slate: themeVariantFn('slate600', 'slate700', 'slate800'),
-      gray: themeVariantFn('gray600', 'gray700', 'gray800'),
-      zinc: themeVariantFn('zinc600', 'zinc700', 'zinc800'),
-      neutral: themeVariantFn('neutral600', 'neutral700', 'neutral800'),
-      stone: themeVariantFn('stone600', 'stone700', 'stone800'),
-      red: themeVariantFn('red600', 'red700', 'red800'),
       orange: themeVariantFn('orange600', 'orange700', 'orange800'),
       amber: themeVariantFn('amber600', 'amber700', 'amber800'),
       yellow: themeVariantFn('yellow600', 'yellow700', 'yellow800'),

src/styles/stitches.config.ts

@@ -20,50 +20,6 @@ export const { css, styled, globalCss, theme, keyframes, getCssText } = createSt
       slate800: '#1e293b',
       slate900: '#0f172a',
 
-      gray50: '#f9fafb',
-      gray100: '#f3f4f6',
-      gray200: '#e5e7eb',
-      gray300: '#d1d5db',
-      gray400: '#9ca3af',
-      gray500: '#6b7280',
-      gray600: '#4b5563',
-      gray700: '#374151',
-      gray800: '#1f2937',
-      gray900: '#111827',
-
-      zinc50: '#fafafa',
-      zinc100: '#f4f4f5',
-      zinc200: '#e4e4e7',
-      zinc300: '#d4d4d8',
-      zinc400: '#a1a1aa',
-      zinc500: '#71717a',
-      zinc600: '#52525b',
-      zinc700: '#3f3f46',
-      zinc800: '#27272a',
-      zinc900: '#18181b',
-
-      neutral50: '#fafafa',
-      neutral100: '#f5f5f5',
-      neutral200: '#e5e5e5',
-      neutral300: '#d4d4d4',
-      neutral400: '#a3a3a3',
-      neutral500: '#737373',
-      neutral600: '#525252',
-      neutral700: '#404040',
-      neutral800: '#262626',
-      neutral900: '#171717',
-
-      stone50: '#fafaf9',
-      stone100: '#f5f5f4',
-      stone200: '#e7e5e4',
-      stone300: '#d6d3d1',
-      stone400: '#a8a29e',
-      stone500: '#78716c',
-      stone600: '#57534e',
-      stone700: '#44403c',
-      stone800: '#292524',
-      stone900: '#1c1917',
-
       red50: '#fef2f2',
       red100: '#fee2e2',
       red200: '#fecaca',

src/types/Data.ts

@@ -8,12 +8,12 @@ export type Data = {
     name: string
     description: string
     font: Fonts
-    buttonsSchema: ButtonVariantProps['schema']
+    buttonsSchema: ButtonVariantProps['styleSchema']
     outline: ButtonVariantProps['outline']
     colors: {
       texts: Colors
       socialLinks: LinkVariantProps['theme']
-      buttonLinks: ButtonVariantProps['theme']
+      buttonLinks: ButtonVariantProps['colorSchema']
       background: Colors
     }
   }