Merge pull request #59 from nginformatica/chore/refact-stories

chore/refact stories
nginformatica · Oct 14, 2024 · be9d599 · be9d599
2 parents c51cdf6 + e5521cb
commit be9d599
Show file tree

Hide file tree

Showing 9 changed files with 797 additions and 3,174 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -3,19 +3,16 @@ import type { StorybookConfig } from '@storybook/react-webpack5'
 const config: StorybookConfig = {
     framework: '@storybook/react-webpack5',
     stories: [
-        '../stories/*.stories.mdx',
-        '../src/**/**/*.stories.@(js|jsx|mjs|ts|tsx)',
-        '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'
+        '../stories/**/**/*.mdx',
+        '../src/**/*.stories.@(ts|tsx)',
+        '../src/**/**/*.stories.@(ts|tsx)'
+    ],
+    addons: [
+        '@storybook/addon-essentials',
+        '@storybook/addon-webpack5-compiler-babel'
     ],
-    features: {
-        storyStoreV7: false
-    },
-    addons: ['@storybook/addon-essentials'],
     docs: {
         autodocs: true
-    },
-    typescript: {
-        reactDocgen: 'react-docgen-typescript'
     }
 }
 

diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -1,3 +1,3 @@
-<link
-    rel="stylesheet"
-    href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap" rel="stylesheet">
diff --git a/package.json b/package.json
@@ -1,15 +1,13 @@
 {
     "name": "amazing-react-charts",
-    "version": "1.1.2",
+    "version": "1.1.3",
     "description": "An amazing react charts package based in echarts",
-    "license": "MIT",
     "main": "dist/index.js",
+    "license": "MIT",
     "repository": {
         "type": "git",
         "url": "https://github.com/nginformatica/amazing-react-charts.git"
     },
-    "types": "dist/index.d.ts",
-    "typings": "dist/index.d.ts",
     "scripts": {
         "start": "sb dev -p 6006",
         "clean": "rm -rf ./dist",
@@ -31,54 +29,55 @@
         "pre-test": "node checkTestFiles.js"
     },
     "dependencies": {
-        "date-fns": "2.30.0",
         "echarts": "5.5.1",
-        "echarts-for-react": "3.0.2",
-        "ramda": "0.29.1"
+        "echarts-for-react": "3.0.2"
     },
     "devDependencies": {
         "@babel/cli": "7.25.7",
-        "@babel/core": "7.25.7",
+        "@babel/core": "7.25.8",
         "@babel/plugin-transform-modules-commonjs": "7.25.7",
         "@babel/plugin-transform-runtime": "7.25.7",
-        "@babel/preset-env": "7.25.7",
+        "@babel/preset-env": "7.25.8",
         "@babel/preset-react": "7.25.7",
         "@babel/preset-typescript": "7.25.7",
-        "@storybook/addon-essentials": "7.6.17",
-        "@storybook/blocks": "7.6.17",
-        "@storybook/react": "7.6.17",
-        "@storybook/react-webpack5": "7.6.17",
-        "@stylistic/eslint-plugin": "2.8.0",
+        "@storybook/addon-essentials": "8.3.5",
+        "@storybook/addon-webpack5-compiler-babel": "3.0.3",
+        "@storybook/blocks": "8.3.5",
+        "@storybook/react": "8.3.5",
+        "@storybook/react-webpack5": "8.3.5",
+        "@stylistic/eslint-plugin": "2.9.0",
         "@testing-library/dom": "10.4.0",
         "@testing-library/jest-dom": "6.5.0",
         "@testing-library/react": "16.0.1",
         "@testing-library/user-event": "14.5.2",
         "@types/jest": "29.5.13",
-        "@types/node": "22.7.4",
-        "@types/ramda": "0.29.12",
+        "@types/node": "22.7.5",
+        "@types/ramda": "0.30.2",
         "@types/react": "18.3.11",
-        "@typescript-eslint/eslint-plugin": "8.8.0",
-        "@typescript-eslint/parser": "8.8.0",
+        "@typescript-eslint/eslint-plugin": "8.8.1",
+        "@typescript-eslint/parser": "8.8.1",
         "babel-plugin-import": "1.13.8",
         "canvas": "2.11.2",
+        "date-fns": "4.1.0",
         "eslint": "8.57.0",
         "eslint-config-prettier": "9.1.0",
         "eslint-import-resolver-typescript": "3.6.3",
         "eslint-plugin-import": "2.31.0",
         "eslint-plugin-prettier": "5.2.1",
         "eslint-plugin-react": "7.37.1",
-        "eslint-plugin-react-hooks": "4.6.2",
+        "eslint-plugin-react-hooks": "5.0.0",
         "flipper-ui": "0.34.7",
         "jest": "29.7.0",
         "jest-environment-jsdom": "29.7.0",
         "prettier": "3.3.3",
+        "ramda": "0.30.1",
         "react": "18.3.1",
         "react-dom": "18.3.1",
-        "storybook": "7.6.17",
+        "storybook": "8.3.5",
         "styled-components": "6.1.13",
         "ts-jest": "29.2.5",
         "ts-node": "10.9.2",
-        "typescript": "5.6.2",
+        "typescript": "5.6.3",
         "webpack": "5.95.0"
     },
     "peerDependencies": {

diff --git a/src/core/audiometry-chart/AudiometryChart.tsx b/src/core/audiometry-chart/AudiometryChart.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import ReactEcharts from 'echarts-for-react'
-import { filter, map, zipWith } from 'ramda'
+import { zipWith } from 'ramda'
 import type {
     IDefaultChartProps,
     TAudiometryDataEntry,
@@ -84,11 +84,11 @@ const AudiometryChart = (props: IProps) => {
 
     const defaultTooltip = (items: AudiometryDataTooltip[]) => {
         if (legends) {
-            const generateTooltip = map(item => {
+            const generateTooltip = items.map(item => {
                 const marker = tooltipMarker ? item.marker : ''
 
                 return `${marker} ${item.seriesName}: ${item.data.value} dB <br>`
-            }, items)
+            })
 
             return generateTooltip.join(' ')
         }
@@ -110,16 +110,13 @@ const AudiometryChart = (props: IProps) => {
     }
 
     const takeYData = (item: TAudiometryDataEntry[]) =>
-        map(
-            item => ({
-                value: item.result,
-                symbol: item.symbol,
-                symbolSize: symbolsSize || 12,
-                name: item.result,
-                boneValue: item.boneResult
-            }),
-            item
-        )
+        item.map(item => ({
+            value: item.result,
+            symbol: item.symbol,
+            symbolSize: symbolsSize || 12,
+            name: item.result,
+            boneValue: item.boneResult
+        }))
 
     const takeMarks = (item: TAudiometryDataEntry[]) =>
         zipWith(
@@ -174,19 +171,17 @@ const AudiometryChart = (props: IProps) => {
         data: takeMarks(item)
     }))
 
-    const removedUndefinedMarks = map(
-        item => filter(serie => serie.value !== undefined, item.data),
-        seriesMarks
+    const removedUndefinedMarks = seriesMarks.map(item =>
+        item.data.filter(serie => serie.value !== undefined)
     )
 
-    const marksWithTypes = map(
-        item => ({
+    const marksWithTypes = removedUndefinedMarks
+        .filter(item => item.length > 0)
+        .map(item => ({
             name: 'marks',
             type: 'scatter',
             data: item
-        }),
-        removedUndefinedMarks.filter(item => item.length > 0)
-    )
+        }))
 
     const seriesData = data.map(item => ({
         type: 'line',

diff --git a/src/core/coordinate-line-chart/CoordinateLineChart.tsx b/src/core/coordinate-line-chart/CoordinateLineChart.tsx
@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from 'react'
 import ReactEcharts from 'echarts-for-react'
-import { map } from 'ramda'
 import type { IDefaultChartProps, Coordinates, WidthProps } from '../types'
 import type { EChartsOption } from 'echarts/types/dist/echarts'
 import {
@@ -37,7 +36,7 @@ const getWidthStyle = (width: WidthProps, height: number | undefined) => ({
     height: height
 })
 
-const toTuples = (args: Coordinates[]) => map(item => [item.x, item.y], args)
+const toTuples = (args: Coordinates[]) => args.map(item => [item.x, item.y])
 
 const CoordinateLineChart = (props: IProps) => {
     const {

diff --git a/src/core/donut-chart/DonutChart.tsx b/src/core/donut-chart/DonutChart.tsx
@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react'
 import ReactEcharts from 'echarts-for-react'
-import { map, sum } from 'ramda'
 import type { IProps } from '../pie-chart/PieChart'
 import type { PieChartFormatter, PieDataLabel } from '../types'
 import type { EChartsOption } from 'echarts/types/dist/echarts'
@@ -90,9 +89,9 @@ const DonutChart = (props: IDonutProps) => {
         }
     }
 
-    const xData = map(item => item.name, data)
+    const xData = data.map(item => item.name)
 
-    const totalValues = sum(map(item => item.value, data))
+    const totalValues = data.reduce((acc, item) => acc + item.value, 0)
 
     const formatTooltip = ({ name, value, marker }: PieChartFormatter) => {
         const percent = getPercentage(value, totalValues)

diff --git a/src/core/pie-chart/PieChart.tsx b/src/core/pie-chart/PieChart.tsx
@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from 'react'
 import ReactEcharts from 'echarts-for-react'
-import { map, sum } from 'ramda'
 import type {
     IDefaultChartProps,
     PieChartData,
@@ -60,9 +59,9 @@ const PieChart = (props: IProps) => {
 
     const [title, setTitle] = useState(false)
 
-    const names = map(item => item.name, data)
+    const names = data.map(item => item.name)
 
-    const totalValues = sum(map(item => item.value, data))
+    const totalValues = data.reduce((acc, item) => acc + item.value, 0)
 
     useEffect(() => {
         if (toolboxTooltip?.saveAsImageWithTitle) {

diff --git a/stories/intro.stories.mdx → stories/Introduction.mdx b/stories/intro.stories.mdx → stories/Introduction.mdx