palerdot · palerdot · Feb 23, 2023 · Apr 3, 2022 · Apr 3, 2022 · Apr 3, 2022
diff --git a/.github/workflows/workflow.yml b/.github/workflows/workflow.yml
@@ -13,7 +13,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: [16.x]
 
     steps:
     - name: Checkout repository
@@ -24,11 +24,20 @@ jobs:
       with:
         node-version: ${{ matrix.node-version }}
 
+    # we are using --force so that mismatching peer dependencies is ignored
     - name: Install dependencies
-      run: npm install
+      run: yarn 
+
+    # ref: https://github.com/cypress-io/github-action
+    - name: Setup cypress
+      uses: cypress-io/github-action@v2
+      with:
+        runTests: false
+        browser: chrome
+        headless: true
 
     - name: Run the tests and generate coverage report
-      run: npm run testonly -- --coverage
+      run: yarn full-test 
 
     - name: Upload coverage to Codecov
-      uses: codecov/codecov-action@v1.0.13
+      uses: codecov/codecov-action@v2
diff --git a/.scripts/prepublish.sh b/.scripts/prepublish.sh
diff --git a/.scripts/user/prepublish.sh b/.scripts/user/prepublish.sh
diff --git a/.scripts/user/pretest.js b/.scripts/user/pretest.js
diff --git a/.storybook/babel.config.js b/.storybook/babel.config.js
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -1,18 +1,34 @@
+// ref: https://github.com/storybookjs/builder-vite/blob/main/examples/react-18/.storybook/main.js
+const { mergeConfig } = require('vite')
+
 module.exports = {
-  stories: [
-    "../**/*.stories.js",
-    // "../src/stories/index.js"
-  ],
-  addons: [
-    // "@storybook/addon-knobs/register",
-    "@storybook/addon-storysource",
-    {
-      name: "@storybook/addon-docs",
-      options: {
-        configureJSX: true,
-        babelOptions: {},
-        sourceLoaderOptions: null,
+  features: {
+    storyStoreV7: true,
+  },
+  async viteFinal(config, { configType }) {
+    // customize the Vite config here
+    // https://github.com/storybookjs/builder-vite/issues/237#issuecomment-1047819614
+    const { dirname } = require('path')
+    // https://github.com/eirslett/storybook-builder-vite/issues/55
+    config.root = dirname(require.resolve('@storybook/builder-vite'))
+
+    return mergeConfig(config, {
+      define: {
+        ...config.define,
+        global: 'window',
       },
-    },
+    })
+  },
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    // '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    // '@storybook/addon-interactions',
   ],
+  framework: '@storybook/react',
+  core: {
+    builder: '@storybook/builder-vite',
+    // ref: https://storybook.js.org/docs/react/configure/telemetry
+    disableTelemetry: true, // 👈 Disables telemetry
+  },
 }
diff --git a/.storybook/manager.js b/.storybook/manager.js
@@ -1,7 +1,16 @@
-import { addons } from "@storybook/addons"
-import { themes } from "@storybook/theming"
+import { addons } from '@storybook/addons'
+import { themes, create } from '@storybook/theming'
+
+import speedoTheme from '../src/core/theme'
+
+const theme = create(speedoTheme)
+const finalTheme = {
+  ...themes.dark,
+  ...theme,
+}
 
 addons.setConfig({
   showPanel: true,
-  theme: themes.dark,
+  // theme: themes.dark,
+  theme: finalTheme,
 })
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -0,0 +1,3 @@
+<script>
+  window.global = window;
+</script>
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -1,26 +1,3 @@
-import { addParameters } from "@storybook/react"
-import { create } from "@storybook/theming/create"
-import theme from "../src/core/theme/"
+import theme from '../src/core/theme/'
 
-const speedoTheme = create({
-  ...theme,
-  // appContentBg: "#413c69",
-
-  brandTitle: "react-d3-speedometer",
-  brandUrl: "https://github.com/palerdot/react-d3-speedometer",
-})
-
-addParameters({
-  options: {
-    /**
-     * display the top-level grouping as a "root" in the sidebar
-     * @type {Boolean}
-     */
-    showPanel: true,
-    showRoots: true,
-    theme: speedoTheme,
-  },
-  docs: {
-    previewSource: "open",
-  },
-})
+export const parameters = {}
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,7 +1,7 @@
 # Change Log
 
-## 1.1.0
-- `segmentValueFormatter` prop for customizing segment values.
+## 2.1.0-rc.0 (`next`, `React 18`)
+- `segmentValueFormatter` function prop for customizing segment values.
 
 ## 1.0.2
 - `svgAriaLabel` prop for accessibility. More details - https://github.com/palerdot/react-d3-speedometer/issues/135

diff --git a/README.md b/README.md
@@ -2,16 +2,17 @@
 
 > React library for showing speedometer like gauge using d3.
 
-![react-d3-speedometer](https://raw.githubusercontent.com/palerdot/react-d3-speedometer/master/speedo.gif)
+
+![react-d3-speedometer](./speedo.gif)
 
 [![CircleCI Build Status](https://circleci.com/gh/palerdot/react-d3-speedometer.svg?style=svg)](https://circleci.com/gh/palerdot/react-d3-speedometer)
 [![Codecov](https://img.shields.io/codecov/c/gh/palerdot/react-d3-speedometer)](https://codecov.io/gh/palerdot/react-d3-speedometer)
-[![npm](https://img.shields.io/npm/v/react-d3-speedometer)](https://www.npmjs.com/package/react-d3-speedometer)
+[![npm](https://img.shields.io/npm/v/react-d3-speedometer/next?style=flat-square)](https://www.npmjs.com/package/react-d3-speedometer)
 [![npm](https://img.shields.io/npm/dt/react-d3-speedometer.svg)](https://www.npmjs.com/package/react-d3-speedometer)
 [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
 
 
-**Note**: `v1.x` is compatible with `React 17`. Please use latest `v0.x` (`v0.14.1` at the time of writing) if you are using `React 16`.
+**Note**: `v2.x` is compatible with `React v18`. `v1.x` is compatible with `React 17`. Please use latest `v0.x` (`v0.14.1` at the time of writing) if you are using `React 16`.
 
 [![NPM](https://nodei.co/npm/react-d3-speedometer.png)](https://npmjs.org/package/react-d3-speedometer)
 
@@ -48,6 +49,16 @@ import ReactSpeedometer from "react-d3-speedometer"
 <ReactSpeedometer />
 ```
 
+### Slim Build:
+
+There is a `Slim` build available without bundling `d3`. This project uses `d3` *micro bundles*. If your project also uses `d3` *microbundles*, you can opt for **slim build**. Necessary `d3` dependencies required for slim build to work are - `d3-array`, `d3-color`, `d3-ease`, `d3-format`, `d3-interpolate`, `d3-scale`, `d3-selection`, `d3-shape`, `d3-transition`. 
+```javascript
+// sample slim build usage
+import ReactSpeedometer from "react-d3-speedometer/slim"
+// and use it
+<ReactSpeedometer />
+```
+
 [Live Examples](https://palerdot.in/react-d3-speedometer)
 
 ## Configuration Options:

diff --git a/babel.config.js b/babel.config.js
diff --git a/cypress.config.ts b/cypress.config.ts
@@ -0,0 +1,20 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  video: false,
+
+  component: {
+    setupNodeEvents(on, config) {},
+    specPattern: "src/__tests__/**/*.spec.js*",
+    devServer: {
+      framework: "react",
+      bundler: "vite",
+    },
+  },
+
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+});
diff --git a/cypress/fixtures/example.json b/cypress/fixtures/example.json
@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}
diff --git a/cypress/plugins/index.js b/cypress/plugins/index.js
@@ -0,0 +1,33 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+// ref: https://docs.cypress.io/guides/component-testing/framework-configuration#Vite-Based-Projects-Vue-React
+const path = require('path')
+const { startDevServer } = require('@cypress/vite-dev-server')
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+
+// eslint-disable-next-line no-unused-vars
+module.exports = (on, config) => {
+  on('dev-server:start', options => {
+    return startDevServer({
+      options,
+      viteConfig: {
+        configFile: path.resolve(__dirname, '..', '..', 'vite.config.js'),
+      },
+    })
+  })
+}
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
@@ -0,0 +1,37 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }