plethora-react-library-bp - npm Package Compare versions

Comparing version 1.0.9 to 1.1.0

.storybook/main.js

 /** @type { import('@storybook/react-vite').StorybookConfig } */
 const config = {
-  stories: ["../src/**/*.mdx", "../src/**/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  stories: ['../src/**/*.mdx', '../src/**/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-onboarding",
-    "@storybook/addon-interactions",
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-interactions',
     // Additional addons :)
-    "storybook-css-modules", // for css modules
-    '@storybook/addon-notes', // for markdown notes at stories
-    '@storybook/addon-docs', // for block styling 
+    // for css modules
+    'storybook-css-modules',
+    // for markdown notes at stories
+    '@storybook/addon-notes',
+    // for block styling
+    '@storybook/addon-docs',
+    {
+      name: '@storybook/addon-styling',
+      options: {
+        postCss: {
+          implementation: require.resolve('postcss'),
+        },
+      },
+    },
   ],
   framework: {
-    name: "@storybook/react-vite",
+    name: '@storybook/react-vite',
     options: {},
   },
   docs: {
-    autodocs: "tag",
+    autodocs: 'tag',
   },
 };
 export default config;

.storybook/preview.js

@@ -0,5 +1,12 @@
+import '../src/index.css';
+
+import { withThemeByClassName } from '@storybook/addon-styling';
+
+/* TODO: update import to your tailwind styles file. If you're using Angular, inject this through your angular.json config instead */
+import '../src/index.css';
+
 /** @type { import('@storybook/react').Preview } */
 const preview = {
   parameters: {
-    actions: { argTypesRegex: "^on[A-Z].*" },
+    actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {
@@ -12,4 +19,16 @@ matchers: {
   },
+
+  decorators: [
+    // Adds theme switching support.
+    // NOTE: requires setting "darkMode" to "class" in your tailwind config
+    withThemeByClassName({
+      themes: {
+        light: 'light',
+        dark: 'dark',
+      },
+      defaultTheme: 'light',
+    }),
+  ],
 };
 
 export default preview;

package.json

 {
   "name": "plethora-react-library-bp",
-  "version": "1.0.9",
+  "version": "1.1.0",
   "description": "This is a boilerplate for plethora's react libraries",
@@ -31,2 +31,3 @@ "main": "dist/index.js",
     "@storybook/addon-onboarding": "^1.0.8",
+    "@storybook/addon-styling": "^1.3.7",
     "@storybook/blocks": "^7.4.0",
@@ -36,5 +37,8 @@ "@storybook/react": "^7.4.0",
     "@storybook/testing-library": "^0.2.0",
+    "autoprefixer": "^10.4.15",
     "babel-loader": "^9.1.3",
     "clean-webpack-plugin": "^4.0.0",
     "css-loader": "^6.8.1",
+    "mini-css-extract-plugin": "^2.7.6",
+    "postcss": "^8.4.29",
     "react": ">=18.2.0",
@@ -45,2 +49,3 @@ "react-dom": ">=18.2.0",
     "style-loader": "^3.3.3",
+    "tailwindcss": "^3.3.3",
     "webpack": "^5.88.2",
@@ -47,0 +52,0 @@ "webpack-cli": "^5.1.4",

src/components/CallToAction/CallToAction.jsx

@@ -6,5 +6,5 @@ import React from "react";
 
-function CallToAction({buttonText}) {
+function CallToAction({buttonText, className}) {
     return (
-        <div>
+        <div className={className}>
             <img src="https://picsum.photos/800/300" alt="Pic" />
@@ -11,0 +11,0 @@ <Button>{buttonText}</Button>

src/stories/CalltoAction.stories.jsx

@@ -43,3 +43,4 @@ import CallToAction from "../components/CallToAction/CallToAction";
 WithButtonText.args = {
-    buttonText: 'Default CTA button text'
+    buttonText: 'Default CTA button text',
+    className: 'bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded'
 }

No alert changes

Improved metrics

Total package byte prevSize

15036

10.96%

Number of package files

22

22.22%

Lines of code

245

24.37%

Worsened metrics

Dev dependency count

30

20%

No dependency changes