Initial Storybook installation. Adds basic configuration for base button component.

Author: juliacanzani

.gitignore

@@ -23,3 +23,5 @@ yarn.lock
 /test-results
 
 *.swp
+
+*storybook.log

.storybook/main.js

@@ -0,0 +1,20 @@
+
+
+/** @type { import('@storybook/react-webpack5').StorybookConfig } */
+const config = {
+  "stories": [
+    "../assets/src/components/**/*.mdx",
+    "../assets/src/components/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-webpack5-compiler-swc",
+    "@storybook/addon-essentials",
+    "@storybook/addon-onboarding",
+    "@storybook/addon-interactions"
+  ],
+  "framework": {
+    "name": "@storybook/react-webpack5",
+    "options": {}
+  }
+};
+export default config;

.storybook/preview.js

@@ -0,0 +1,13 @@
+/** @type { import('@storybook/react').Preview } */
+const preview = {
+  parameters: {
+    controls: {
+      matchers: {
+       color: /(background|color)$/i,
+       date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

assets/build/index.min.js

@@ -8,6 +8,8 @@ import {
   VisuallyHidden
 } from 'react-aria'
 
+import PropTypes from 'prop-types';
+
 import { triggerEvent } from '../../../events'
 
 /**
@@ -62,4 +64,31 @@ const Button = forwardRef(({
   )
 })
 
+Button.propTypes = {
+  /** How large should the button be? */
+  layout: PropTypes.oneOf(['small', 'medium', 'large']),
+  /** Button contents */
+  content: PropTypes.string,
+  /** Button context for styling */
+  context: PropTypes.string,
+  /** Additional class names */
+  className: PropTypes.string,
+  /** Inline styles */
+  style: PropTypes.object,
+  /** Button name */
+  name: PropTypes.string,
+  /** Change the tag used to render the button */
+  changeTag: PropTypes.oneOf(['button', 'span']),
+  /** Visually hidden content */
+  contentVisuallyHidden: PropTypes.bool,
+  /** Button type attribute */
+  buttonType: PropTypes.oneOf(['button', 'submit', 'reset']),
+  /** Children nodes */
+  children: PropTypes.node,
+};
+
+Button.defaultProps = {
+  buttonType: 'button',
+};
+
 export default Button

assets/src/components/base/button/Button.jsx

@@ -0,0 +1,31 @@
+import { fn } from '@storybook/test';
+
+import Button from './Button.jsx';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+export default {
+  title: 'Button',
+  component: Button,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+};
+
+export const Primary = {
+  args: {
+    layout: 'large',
+    content: 'Primary Button',
+    context: 'primary',
+  },
+};
+
+export const Secondary = {
+  args: {
+    layout: 'large',
+    content: 'Secondary Button',
+    context: 'secondary',
+  },
+};