diff --git a/packages/docs/.storybook/main.js b/packages/docs/.storybook/main.js new file mode 100644 index 0000000..3a3fe88 --- /dev/null +++ b/packages/docs/.storybook/main.js @@ -0,0 +1,18 @@ +module.exports = { + "stories": [ + "../stories/**/*.stories.mdx", + "../stories/**/*.stories.@(js|jsx|ts|tsx)" + ], + "addons": [ + "@storybook/addon-links", + "@storybook/addon-essentials", + "@storybook/addon-interactions" + ], + "framework": "@storybook/react", + "core": { + "builder": "@storybook/builder-vite" + }, + "features": { + "storyStoreV7": true + } +} \ No newline at end of file diff --git a/packages/docs/.storybook/preview-head.html b/packages/docs/.storybook/preview-head.html new file mode 100644 index 0000000..05da1e9 --- /dev/null +++ b/packages/docs/.storybook/preview-head.html @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/packages/docs/.storybook/preview.js b/packages/docs/.storybook/preview.js new file mode 100644 index 0000000..48afd56 --- /dev/null +++ b/packages/docs/.storybook/preview.js @@ -0,0 +1,9 @@ +export const parameters = { + actions: { argTypesRegex: "^on[A-Z].*" }, + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/, + }, + }, +} \ No newline at end of file diff --git a/packages/docs/package.json b/packages/docs/package.json new file mode 100644 index 0000000..ae97a69 --- /dev/null +++ b/packages/docs/package.json @@ -0,0 +1,27 @@ +{ + "name": "@ignite-ui/docs", + "version": "1.0.0", + "main": "index.js", + "license": "MIT", + "devDependencies": { + "@babel/core": "^7.20.5", + "@storybook/addon-actions": "^6.5.14", + "@storybook/addon-essentials": "^6.5.14", + "@storybook/addon-interactions": "^6.5.14", + "@storybook/addon-links": "^6.5.14", + "@storybook/builder-vite": "^0.2.5", + "@storybook/react": "^6.5.14", + "@storybook/testing-library": "^0.0.13", + "@vitejs/plugin-react": "^3.0.0", + "babel-loader": "^8.3.0", + "vite": "^4.0.0" + }, + "dependencies": { + "react": "^18.2.0", + "react-dom": "^18.2.0" + }, + "scripts": { + "dev": "start-storybook -p 6006", + "build": "build-storybook" + } +} diff --git a/packages/docs/stories/Button.jsx b/packages/docs/stories/Button.jsx new file mode 100644 index 0000000..15dde39 --- /dev/null +++ b/packages/docs/stories/Button.jsx @@ -0,0 +1,50 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import './button.css'; + +/** + * Primary UI component for user interaction + */ +export const Button = ({ primary, backgroundColor, size, label, ...props }) => { + const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'; + return ( + + ); +}; + +Button.propTypes = { + /** + * Is this the principal call to action on the page? + */ + primary: PropTypes.bool, + /** + * What background color to use + */ + backgroundColor: PropTypes.string, + /** + * How large should the button be? + */ + size: PropTypes.oneOf(['small', 'medium', 'large']), + /** + * Button contents + */ + label: PropTypes.string.isRequired, + /** + * Optional click handler + */ + onClick: PropTypes.func, +}; + +Button.defaultProps = { + backgroundColor: null, + primary: false, + size: 'medium', + onClick: undefined, +}; diff --git a/packages/docs/stories/Button.stories.jsx b/packages/docs/stories/Button.stories.jsx new file mode 100644 index 0000000..61f6e19 --- /dev/null +++ b/packages/docs/stories/Button.stories.jsx @@ -0,0 +1,40 @@ +import React from 'react'; + +import { Button } from './Button'; + +// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export +export default { + title: 'Example/Button', + component: Button, + // More on argTypes: https://storybook.js.org/docs/react/api/argtypes + argTypes: { + backgroundColor: { control: 'color' }, + }, +}; + +// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args +const Template = (args) =>