Adding theme switcher and sample components

Author: vikash

.idea/workspace.xml

@@ -7,6 +7,7 @@ const config = {
     "@storybook/addon-essentials",
     "@chromatic-com/storybook",
     "@storybook/addon-interactions",
+    "@storybook/addon-themes"
   ],
   framework: {
     name: "@storybook/react-webpack5",

.storybook/main.js

@@ -1,5 +1,7 @@
 import '../src/index.css';
 
+import { withThemeByClassName } from "@storybook/addon-themes";
+
 /** @type { import('@storybook/react').Preview } */
 const preview = {
   parameters: {
@@ -10,6 +12,15 @@ const preview = {
       },
     },
   },
+
+  decorators: [withThemeByClassName({
+      themes: {
+          // nameOfTheme: 'classNameForTheme',
+          'ZopDev': 'zopdev',
+          'Forest': 'forest'
+      },
+      defaultTheme: 'ZopDev',
+  })]
 };
 
 export default preview;

.storybook/preview.js

@@ -4,7 +4,7 @@ This component library is made for React using tailwindcss.
 Goal of this project is to provide ready to use UI components to
 develop UI applications faster. 
 
-All components are documented in storybook. Use `npm run storybook`
+All components are documented in storybook. Use `npm run start`
 to start the storybook locally. Latest version of stories can also
 be accessed at https://zop.dev/ui-components 
 

README.md

@@ -13,12 +13,8 @@
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "start": "storybook dev -p 6006",
+    "build": "storybook build"
   },
   "eslintConfig": {
     "extends": [
@@ -45,17 +41,21 @@
     "@storybook/addon-interactions": "^8.3.6",
     "@storybook/addon-links": "^8.3.6",
     "@storybook/addon-onboarding": "^8.3.6",
+    "@storybook/addon-themes": "^8.3.6",
     "@storybook/blocks": "^8.3.6",
+    "@storybook/manager-api": "^8.3.6",
     "@storybook/preset-create-react-app": "^8.3.6",
     "@storybook/react": "^8.3.6",
     "@storybook/react-webpack5": "^8.3.6",
     "@storybook/test": "^8.3.6",
+    "@storybook/theming": "^8.3.6",
     "autoprefixer": "^10.4.20",
     "eslint-plugin-storybook": "^0.10.1",
     "postcss": "^8.4.47",
     "prop-types": "^15.8.1",
     "storybook": "^8.3.6",
     "tailwindcss": "^3.4.14",
+    "tw-colors": "^3.3.2",
     "webpack": "^5.95.0"
   }
 }

package-lock.json

@@ -0,0 +1,43 @@
+import PropTypes from "prop-types";
+
+export default function Button({ label, size, ...props}) {
+    let classes = "bg-primary-500 shadow-sm font-semibold text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 hover:bg-primary-400 "
+    switch (size) {
+        case 'XS':
+            classes += 'rounded px-2 py-1 text-xs'
+            break;
+        case 'S':
+            classes += 'rounded px-2 py-1 text-sm'
+            break;
+        case 'M':
+            classes += 'rounded-md px-2.5 py-1.5 text-sm'
+            break;
+        case 'L':
+            classes += 'rounded-md px-3 py-2 text-sm'
+            break;
+        case 'XL':
+            classes += 'rounded-md px-3.5 py-2.5 text-sm'
+            break;
+        default:
+            classes += 'rounded-md px-2.5 py-1.5 text-sm'
+    }
+
+    return (
+        <button type="button" className={classes} {...props}>{label}</button>
+    )
+}
+
+Button.propTypes = {
+    /** How large should the button be? */
+    size: PropTypes.oneOf(['XS', 'S', 'M', 'L', 'XL']),
+    /** Button contents */
+    label: PropTypes.string.isRequired,
+    /** Optional click handler */
+    onClick: PropTypes.func,
+};
+
+Button.defaultProps = {
+    label: 'Get Started',
+    size: 'M',
+    onClick: undefined,
+};