refactor: folders structure and create template

.storybook/main.js

@@ -1,7 +1,7 @@
 const { resolve } = require('path')
 
 module.exports = {
-  stories: ['../stories/**/*.tsx'],
+  stories: ['../src/**/stories.tsx'],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',

src/components/Arrows.tsx → src/components/Arrows/index.tsx

@@ -1,7 +1,7 @@
-import styled from 'styled-components'
-
 import Button from 'components/Button'
 
+import * as S from './styles'
+
 export interface Props {
   disableUp?: boolean
   onClickUp?: () => void
@@ -11,7 +11,7 @@ export interface Props {
 
 const Arrows = ({ disableUp, onClickUp, disableDown, onClickDown }: Props) => {
   return (
-    <Container>
+    <S.Wrapper>
       <Button
         id='arrow-up'
         skin='transparent'
@@ -34,14 +34,8 @@ const Arrows = ({ disableUp, onClickUp, disableDown, onClickDown }: Props) => {
           alt='Arrow down'
         />
       </Button>
-    </Container>
+    </S.Wrapper>
   )
 }
 
 export default Arrows
-
-const Container = styled.div`
-  display: flex;
-  flex-direction: row;
-  gap: ${({ theme }) => theme.spacings.xsm};
-`

stories/Arrows.tsx → src/components/Arrows/stories.tsx

@@ -1,5 +1,5 @@
 import { Story, Meta } from '@storybook/react'
-import Arrows, { Props } from 'components/Arrows'
+import Arrows, { Props } from '.'
 
 export default {
   title: 'Arrows',

src/components/Arrows/styles.ts

@@ -0,0 +1,7 @@
+import styled from 'styled-components'
+
+export const Wrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: ${({ theme }) => theme.spacings.xsm};
+`

src/components/Button/index.tsx

@@ -0,0 +1,15 @@
+import * as S from './styles'
+
+import type { ButtonHTMLAttributes } from 'react'
+
+export interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
+  skin?: 'outlined' | 'default' | 'transparent'
+  rounded?: boolean
+  size?: 'small' | 'medium'
+}
+
+const Button = (props: Props) => {
+  return <S.Button {...props} />
+}
+
+export default Button

stories/Button.tsx → src/components/Button/stories.tsx

@@ -1,5 +1,5 @@
 import { Story, Meta } from '@storybook/react'
-import Button, { Props } from 'components/Button'
+import Button, { Props } from '.'
 
 export default {
   title: 'Button',

src/components/Button.tsx → src/components/Button/styles.ts

@@ -1,19 +1,8 @@
-import React from 'react'
-import styled, { css } from 'styled-components'
-
-export interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  skin?: 'outlined' | 'default' | 'transparent'
-  rounded?: boolean
-  size?: 'small' | 'medium'
-}
+import type { Props } from '.'
 
-const Button = (props: Props) => {
-  return <Container {...props} />
-}
-
-export default Button
+import styled, { css } from 'styled-components'
 
-const Container = styled.button<Props>`
+export const Button = styled.button<Props>`
   ${({ theme, rounded, skin, size }) => css`
     font-family: 'Open Sans';
     font-style: normal;
@@ -38,11 +27,11 @@ const Container = styled.button<Props>`
       ? `border: none; background: ${theme.colors.gray200};color: white;`
       : ''}
 
-  ${skin === 'transparent' &&
+    ${skin === 'transparent' &&
     `border: none;background: transparent;filter: none;box-shadow: none !important;padding: 0 !important;`}
 
-  ${size === 'small' || !size ? 'padding: 7px 20px;' : ''}
-  ${size === 'medium' || !size ? 'padding: 15px 80px;' : ''}
+    ${size === 'small' || !size ? 'padding: 7px 20px;' : ''}
+    ${size === 'medium' || !size ? 'padding: 15px 80px;' : ''}
 
   filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1))
     drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));

src/components/Loading/index.tsx

@@ -1,5 +1,29 @@
-import dynamic from 'next/dynamic'
+import { useState, useEffect } from 'react'
 
-export default dynamic(() => import('./Loading'), {
-  ssr: false
-})
+import Title from 'components/Title'
+
+import { getRandomValueFromArray } from 'utils'
+
+import * as S from './styles'
+
+const Loading = () => {
+  const [phase, setPhase] = useState('')
+
+  const phases = [
+    'The age is only a number!',
+    'Pls hire me :)',
+    'Nice code buddy :)'
+  ]
+
+  useEffect(() => {
+    setPhase(getRandomValueFromArray(phases))
+  }, [])
+
+  return (
+    <S.Container>
+      <Title tag='h1'>{phase}</Title>
+    </S.Container>
+  )
+}
+
+export default Loading

stories/Loading.tsx → src/components/Loading/stories.tsx

@@ -1,5 +1,5 @@
 import { Story, Meta } from '@storybook/react'
-import Loading from 'components/Loading'
+import Loading from '.'
 
 export default {
   title: 'Loading',

src/components/Logo.tsx → src/components/Logo/index.tsx

@@ -1,6 +1,6 @@
-import React from 'react'
+import type { ImgHTMLAttributes } from 'react'
 
-type Props = Partial<React.ImgHTMLAttributes<HTMLImageElement>>
+type Props = Partial<ImgHTMLAttributes<HTMLImageElement>>
 
 const Logo = (props: Props) => {
   return (

stories/Logo.tsx → src/components/Logo/stories.tsx

@@ -1,5 +1,5 @@
 import { Story, Meta } from '@storybook/react'
-import Logo from 'components/Logo'
+import Logo from '.'
 
 export default {
   title: 'Logo',

src/components/Progress/index.tsx

@@ -0,0 +1,9 @@
+import * as S from './styles'
+
+import type { ProgressHTMLAttributes } from 'react'
+
+export type Props = ProgressHTMLAttributes<HTMLProgressElement>
+
+const Progress = (props: Props) => <S.Progress {...props} />
+
+export default Progress

stories/Progress.tsx → src/components/Progress/stories.tsx

@@ -1,5 +1,5 @@
 import { Story, Meta } from '@storybook/react'
-import Progress, { Props } from 'components/Progress'
+import Progress, { Props } from '.'
 
 export default {
   title: 'Progress',

src/components/Progress.tsx → src/components/Progress/styles.ts

@@ -1,15 +1,6 @@
-import React from 'react'
 import styled from 'styled-components'
 
-export type Props = React.ProgressHTMLAttributes<HTMLProgressElement>
-
-const Progress = (props: Props) => {
-  return <Container {...props} />
-}
-
-export default Progress
-
-const Container = styled.progress`
+export const Progress = styled.progress`
   position: fixed;
   top: 0;
   left: 0;

src/components/Question/index.tsx

@@ -0,0 +1,38 @@
+import Title from 'components/Title'
+import Ranger from 'components/Ranger'
+
+import { useQuestions } from 'contexts/QuestionsContext'
+
+import * as S from './styles'
+
+const Question = () => {
+  const {
+    currentQuestion,
+    currentQuestionIndex,
+    questionsAnswers,
+    answerQuestion
+  } = useQuestions()
+
+  return (
+    <S.Wrapper>
+      <Title tag='h2'>
+        {currentQuestionIndex + 1}. {currentQuestion?.category.name}
+      </Title>
+
+      <Title tag='h3' style={{ marginTop: '30px' }}>
+        {currentQuestion?.title}
+      </Title>
+
+      <Ranger
+        selected={
+          questionsAnswers.find(({ id }) => id === currentQuestion?.id)?.answer
+        }
+        optionsSize={3}
+        side='both'
+        onSelect={(answer) => answerQuestion(currentQuestion?.id || '', answer)}
+      />
+    </S.Wrapper>
+  )
+}
+
+export default Question

src/components/Question/styles.ts

@@ -0,0 +1,8 @@
+import styled from 'styled-components'
+
+export const Wrapper = styled.div`
+  height: 100%;
+
+  display: flex;
+  flex-direction: column;
+`