Componente de calendário

styleguide/cypress/support/index.js

@@ -17,5 +17,6 @@ import './commands'
 import '@cypress/code-coverage/support'
 import { setGlobalConfig } from "@storybook/testing-react"
 import * as sbPreview from "../../.storybook/preview"
+import 'babel-polyfill'
 
 setGlobalConfig(sbPreview)

styleguide/package.json

@@ -136,13 +136,17 @@
   "dependencies": {
     "@loja-integrada/tailwindcss-config": "^1.7.6",
     "@tippyjs/react": "^4.2.5",
+    "@types/react-datepicker": "^6.2.0",
     "@types/react-select": "^4.0.17",
     "babel-jest": "^29.2.2",
+    "babel-polyfill": "^6.26.0",
     "child-process": "^1.0.2",
     "dotenv": "^16.0.3",
     "react": "^17.0.2",
+    "react-datepicker": "^6.9.0",
     "react-dom": "^17.0.2",
     "react-modal": "^3.14.3",
+    "react-responsive": "^10.0.0",
     "react-select": "^4.3.1",
     "react-table": "^7.7.0",
     "react-text-mask": "^5.4.3",

styleguide/src/Forms/Calendar/Calendar.spec.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react'
+import { composeStories } from '@storybook/testing-react'
+import { mount } from '@cypress/react'
+import * as stories from './Calendar.stories'
+import {
+  CUSTOM_PERIOD,
+  PREVIOUS_SEVEN_DAYS,
+  PREVIOUS_THIRTY_DAYS,
+  YESTERDAY,
+} from './constants'
+import { subDays } from 'date-fns'
+
+const { Default } = composeStories(stories)
+
+const today = new Date('2024-06-15')
+const tenDaysAgo = subDays(today, 10)
+const _tenDaysAgo = tenDaysAgo.getDate()
+// const fiveDaysAgo = subDays(today, 5)
+// const _fiveDaysAgo = fiveDaysAgo.getDate()
+
+const specTitle = require('cypress-sonarqube-reporter/specTitle')
+describe(specTitle('Calendar tests'), () => {
+  it('Default', () => {
+    mount(<Default today={today} testOnDesktop />)
+    // default periods click tests
+    cy.get(`#${YESTERDAY.id}`).within(() => {
+      cy.get('button')
+        .should('have.class', 'text-primary-dark')
+        .contains(YESTERDAY.label)
+    })
+    cy.get(`#${PREVIOUS_SEVEN_DAYS.id}`).within(() => {
+      cy.get('button')
+        .click()
+        .should('have.class', 'text-primary-dark')
+        .contains(PREVIOUS_SEVEN_DAYS.label)
+    })
+    cy.get(`#${PREVIOUS_THIRTY_DAYS.id}`).within(() => {
+      cy.get('button')
+        .click()
+        .should('have.class', 'text-primary-dark')
+        .contains(PREVIOUS_THIRTY_DAYS.label)
+    })
+    cy.get(`#${CUSTOM_PERIOD.id}`).within(() => {
+      cy.get('button')
+        .click()
+        .should('have.class', 'text-primary-dark')
+        .contains(CUSTOM_PERIOD.label)
+    })
+
+    // calendar days visual behaviour
+    // TODO: fix it!
+    cy.get('#startCalendar').within(() => {
+      cy.get(`.react-datepicker__day--00${_tenDaysAgo}`).click()
+      // cy.get(`.react-datepicker__day--00${_fiveDaysAgo}`).should('have.css', 'background-color', '#E4F3F3')
+    })
+  })
+})

styleguide/src/Forms/Calendar/Calendar.stories.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import { Story, Meta } from '@storybook/react'
+
+import { Calendar, CalendarProps } from '.'
+import { CUSTOM_PERIOD, YESTERDAY } from './constants'
+
+export default {
+  title: 'Forms/Calendar',
+  component: Calendar,
+  parameters: {
+    layout: 'padded',
+  }
+} as Meta
+
+const Template: Story<CalendarProps> = args => <Calendar {...args} />
+
+export const Default = Template.bind({})
+Default.args = {
+  onDatesChange: function (startDate: Date, endDate: Date) {
+    return [startDate, endDate]
+  },
+}
+
+export const CustomPeriods = Template.bind({})
+CustomPeriods.args = {
+  onDatesChange: function (startDate: Date, endDate: Date) {
+    return [startDate, endDate]
+  },
+  periods: [YESTERDAY, CUSTOM_PERIOD]
+}
+
+export const OnTheRight = Template.bind({})
+OnTheRight.args = {
+  onDatesChange: function (startDate: Date, endDate: Date) {
+    return [startDate, endDate]
+  },
+  position: 'right'
+}

styleguide/src/Forms/Calendar/constants.ts

@@ -0,0 +1,50 @@
+import { PeriodsType } from '.'
+
+export const YESTERDAY: PeriodsType = {
+  id: 'ontem',
+  label: 'Ontem',
+  value: 1,
+}
+
+export const PREVIOUS_SEVEN_DAYS: PeriodsType = {
+  id: '7-dias',
+  label: '7 dias',
+  value: 7,
+}
+
+export const PREVIOUS_THIRTY_DAYS: PeriodsType = {
+  id: '30-dias',
+  label: '30 dias',
+  value: 30,
+}
+
+export const CUSTOM_PERIOD: PeriodsType = {
+  id: 'selecionar-periodo',
+  label: 'Selecionar período',
+  icon: 'calendarAlt',
+}
+
+export const defaultPeriods: PeriodsType[] = [
+  YESTERDAY,
+  PREVIOUS_SEVEN_DAYS,
+  PREVIOUS_THIRTY_DAYS,
+  CUSTOM_PERIOD,
+]
+
+export const months = [
+  'Janeiro',
+  'Fevereiro',
+  'Março',
+  'Abril',
+  'Maio',
+  'Junho',
+  'Julho',
+  'Agosto',
+  'Setembro',
+  'Outubro',
+  'Novembro',
+  'Dezembro',
+]
+
+export const WIDTH_TRANSITION_DURATION = 100
+export const POSITION_TRANSITION_DURATION = 200