Merge branch 'main' of https:/davidhu2000/react-spinners

.github/workflows/deploy.yml

@@ -15,7 +15,7 @@ jobs:
  tests:
  runs-on: ubuntu-latest
  steps:
- - uses: actions/checkout@v3
+ - uses: actions/checkout@v4
  - uses: ./.github/actions/setup-node
  - run: yarn run clean
  - run: yarn run test
@@ -27,7 +27,7 @@ jobs:
  runs-on: ubuntu-latest
 
  steps:
- - uses: actions/checkout@v3
+ - uses: actions/checkout@v4
  - uses: ./.github/actions/setup-node
  - run: yarn run clean
  - run: yarn run lint --max-warnings=0
@@ -36,7 +36,7 @@ jobs:
  runs-on: ubuntu-latest
 
  steps:
- - uses: actions/checkout@v3
+ - uses: actions/checkout@v4
  - uses: ruby/setup-ruby@v1
  with:
  ruby-version: "3.0"
@@ -50,7 +50,7 @@ jobs:
 
  - name: Upload Pages Artifact
  if: ${{ github.event_name != 'pull_request' }}
- uses: actions/upload-pages-artifact@v1
+ uses: actions/upload-pages-artifact@v3
  with:
  path: "./dist"
 
@@ -64,4 +64,4 @@ jobs:
  steps:
  - name: Deploy to GitHub Pages
  id: deployment
- uses: actions/deploy-pages@v1
+ uses: actions/deploy-pages@v4

.storybook/google-analytics-v4/register.js

@@ -1,7 +1,5 @@
-import { window } from "global";
 import { addons } from "@storybook/addons";
 import { STORY_CHANGED, STORY_ERRORED, STORY_MISSING } from "@storybook/core-events";
-
 import ReactGa from "react-ga4";
 
 addons.register("storybook/google-analytics-v4", (api) => {

.storybook/main.js

@@ -1,17 +1,28 @@
 module.exports = {
  stories: ["../stories/*.stories.@(ts|tsx)"],
+
  addons: [
  "@storybook/addon-links",
  "@storybook/addon-essentials",
  "@storybook/addon-interactions",
- // "@storybook/addon-google-analytics",
  "storybook-dark-mode",
  "./google-analytics-v4/register.js",
  "./canonical-link/register.js",
+ "@storybook/addon-webpack5-compiler-swc",
  ],
- framework: "@storybook/react",
+
+ framework: {
+ name: "@storybook/react-vite",
+ options: {},
+ },
+
  core: {
- builder: "@storybook/builder-webpack5",
  disableTelemetry: true,
  },
+
+ docs: {},
+
+ typescript: {
+ reactDocgen: "react-docgen-typescript",
+ },
 };

.storybook/preview.js

@@ -1,30 +1,11 @@
-import React from "react";
-import { DocsContainer } from "@storybook/addon-docs";
-import { themes } from "@storybook/theming";
-import { useDarkMode } from "storybook-dark-mode";
-
 export const parameters = {
- actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
  matchers: {
  color: /(background|color)$/i,
  date: /Date$/,
  },
  },
  layout: "centered",
- docs: {
- container: (props) => {
- const isDark = useDarkMode();
-
- const { id: storyId, storyById } = props.context;
- const {
- parameters: { docs = {} },
- } = storyById(storyId);
- docs.theme = isDark ? themes.dark : themes.light;
-
- return React.createElement(DocsContainer, props);
- },
- },
 };
 
 export const argTypes = {
@@ -46,3 +27,4 @@ export const argTypes = {
  control: { type: "object" },
  },
 };
+export const tags = ["autodocs"];

package.json

@@ -48,20 +48,19 @@
  "coveralls": "cat ./coverage/lcov.info | ./node_modules/.bin/coveralls",
  "remove:tag": "npm dist-tag rm react-spinners next",
  "publish:next": "npm publish --tag next && npm run clean",
- "storybook": "start-storybook --docs -p 6006",
- "build-storybook": "build-storybook --docs -o ./dist/storybook"
+ "storybook": "storybook dev --docs -p 6006",
+ "build-storybook": "storybook build --docs -o ./dist/storybook"
  },
  "devDependencies": {
- "@storybook/addon-actions": "^6.5.14",
- "@storybook/addon-docs": "^6.5.14",
- "@storybook/addon-essentials": "^6.5.14",
- "@storybook/addon-google-analytics": "^6.2.9",
- "@storybook/addon-interactions": "^6.5.14",
- "@storybook/addon-links": "^6.5.14",
- "@storybook/builder-webpack5": "^6.5.14",
- "@storybook/manager-webpack5": "^6.5.14",
- "@storybook/react": "^6.5.14",
- "@storybook/testing-library": "^0.0.13",
+ "@storybook/addon-actions": "^8.1.10",
+ "@storybook/addon-docs": "^8.1.10",
+ "@storybook/addon-essentials": "^8.1.10",
+ "@storybook/addon-interactions": "^8.1.10",
+ "@storybook/addon-links": "^8.1.10",
+ "@storybook/addon-webpack5-compiler-swc": "^1.0.4",
+ "@storybook/addons": "7.6.17",
+ "@storybook/react": "^8.1.10",
+ "@storybook/react-vite": "^8.1.10",
  "@testing-library/jest-dom": "^5.16.5",
  "@testing-library/react": "^13.4.0",
  "@types/jest": "^29.5.12",
@@ -87,7 +86,8 @@
  "react-colorful": "^5.6.1",
  "react-dom": "^18.3.1",
  "react-ga4": "^2.1.0",
- "storybook-dark-mode": "^1.1.2",
+ "storybook": "^8.1.10",
+ "storybook-dark-mode": "^4.0.2",
  "ts-jest": "^29.1.5",
  "typescript": "^5.5.2",
  "vite": "^5.3.1"

scripts/stories.template

@@ -1,17 +1,17 @@
-import * as React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import type { Meta, StoryObj } from '@storybook/react';
 
 import LOADER_NAME from "../src/LOADER_NAME";
 
-const argTypes = {
+const meta: Meta<typeof LOADER_NAME> = {
+ component: LOADER_NAME,
+ argTypes:{
 ARG_TYPES
-}
+ }
+};
 
-export default {
- component: LOADER_NAME,
- argTypes
-} as ComponentMeta<typeof LOADER_NAME>;
+export default meta;
+
+type Story = StoryObj<typeof LOADER_NAME>;
 
-const Template: ComponentStory<typeof LOADER_NAME> = (args) => <LOADER_NAME {...args} />;
+export const Primary: Story = {};
 
-export const Main = Template.bind({});