storybook primary and secondary button added

.storybook/main.js

+module.exports = {
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "@storybook/preset-create-react-app"
+  ],
+  "framework": "@storybook/react",
+  "core": {
+    "builder": "webpack5"
+  }
+}
\ No newline at end of file

.storybook/preview.js

+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}
\ No newline at end of file

db.json

 {
   "students": [
     {
-      "text": "Arun S",
-      "mark": "98",
+      "text": "aruny",
+      "mark": "100",
       "id": 1
     },
     {
-      "text": "Partha P",
-      "mark": "99",
+      "text": "partha",
+      "mark": "997",
       "id": 2
-    },
-    {
-      "text": "Ajmal aju",
-      "mark": "2434",
-      "id": 3
     }
   ]
 }
\ No newline at end of file

package.json

@@ -19,12 +19,24 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "server": "json-server --watch db.json --port 5000"
+    "server": "json-server --watch db.json --port 5000",
+    "storybook": "start-storybook -p 6006 -s public",
+    "build-storybook": "build-storybook -s public"
   },
   "eslintConfig": {
     "extends": [
       "react-app",
       "react-app/jest"
+    ],
+    "overrides": [
+      {
+        "files": [
+          "**/*.stories.*"
+        ],
+        "rules": {
+          "import/no-anonymous-default-export": "off"
+        }
+      }
     ]
   },
   "browserslist": {
@@ -38,5 +50,18 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@storybook/addon-actions": "^6.4.19",
+    "@storybook/addon-essentials": "^6.4.19",
+    "@storybook/addon-interactions": "^6.4.19",
+    "@storybook/addon-links": "^6.4.19",
+    "@storybook/builder-webpack5": "^6.4.19",
+    "@storybook/manager-webpack5": "^6.4.19",
+    "@storybook/node-logger": "^6.4.19",
+    "@storybook/preset-create-react-app": "^4.0.1",
+    "@storybook/react": "^6.4.19",
+    "@storybook/testing-library": "^0.0.9",
+    "webpack": "^5.70.0"
   }
 }

src/App.js

-import { useState, useEffect } from 'react';
+import React,{ useState, useEffect } from 'react';
 import Students from './components/Students';
 import Header from './components/Header'
 import Form from './components/Form';
 
+export const valueContext = React.createContext();
+
 function App() {
 
   const [studentsData, setStudentsData] = useState([]);
@@ -33,7 +35,7 @@ function App() {
   };
 
   const deleteStudent = async (id) => {
-   if(window.confirm('Are you sure you want to Delete?') === true) {
+    if (window.confirm('Are you sure you want to Delete?') === true) {
       await fetch(`http://localhost:5000/students/${id}`, { method: 'DELETE' })
       setStudentsData(studentsData.filter((data) => data.id !== id))
     }
@@ -61,8 +63,11 @@ function App() {
 
   return (
     <div className="c-container">
+      <valueContext.Provider value="Students Mark List
+">
         <Header />
-      <Form editId={editId} setEdit={setEdit} text={text} setText={setText} mark={mark} setMark={setMark} onAdd={addStudent} onEdit={updateStudent} editMode={editMode}/>
+      </valueContext.Provider>
+      <Form editId={editId} setEdit={setEdit} text={text} setText={setText} mark={mark} setMark={setMark} onAdd={addStudent} onEdit={updateStudent} editMode={editMode} />
       {studentsData.map((data, index) => (
         <Students key={data.id} index={index} id={data.id} marks={data.mark} onAdd={addStudent} onDelete={deleteStudent} handleEditChange={handleEditChange}>{data.text}</Students>
       ))}

src/components/Button.js

+import PropTypes from "prop-types";
+import '../stories/button.css';
+
+function Button({ primary, label, size, backgroundColor, handleClick, disable }) {
+  const variant = primary ? 'sb-button--primary' : 'sb-button--secondary';
+  return (
+    <button onClick={handleClick} className={['sb-button', `sb-button--${size}`, variant].join(' ')}
+      style={backgroundColor && { backgroundColor }} disabled={disable}>
+      {label}
+    </button>
+  )
+}
+
+Button.propTypes = {
+  label: PropTypes.string,
+  disable:PropTypes.bool,
+  backgroundColor: PropTypes.string,
+  size: PropTypes.oneOf(["sm", "md", "lg"]),
+  handleClick: PropTypes.func,
+}
+
+export default Button
\ No newline at end of file

src/components/Header.js

-import React from 'react'
+import React, { useContext } from 'react'
+import { valueContext } from '../App'
 
 const Header = () => {
+  // const value = useContext(valueContext);
   return (
     <div className='header'>
-      <h3>Students Mark List</h3>
+      <valueContext.Consumer>
+      {value => <h3>{value}</h3>}
+      </valueContext.Consumer>
     </div>
   )
 }

src/stories/Button.stories.js

+import Button from "../components/Button";
+
+export default {
+  title: "Components/Button",
+  component: Button,
+  argTypes: { handleClick: { action: "handleClick" } },
+}
+
+const Template = args => <Button {...args} />
+
+export const Primary = Template.bind({})
+Primary.args = {
+  primary: true,
+  label: "Primary",
+  size: "md",
+}
+
+export const Secondary = Template.bind({})
+Secondary.args = {
+  label: "Secondary",
+  size: "md",
+}
+
+export const Disabled = Template.bind({})
+Disabled.args = {
+  disable: true,
+  label: "Disable",
+  size: "md",
+}

src/stories/button.css

+.sb-button {
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-weight: 700;
+  border: 0;
+  border-radius: 0.2em;
+  cursor: pointer;
+  display: inline-block;
+  line-height: 1;
+}
+
+.sb-button--primary {
+  color: white;
+  background-color: #1ea7fd;
+}
+
+.sb-button--secondary {
+  color: #333;
+  background-color: transparent;
+  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
+}
+
+button[disabled]{
+  cursor: not-allowed;
+  color: #c0c0c0;
+  background-color: #ffffff;
+}
+
+.sb-button--sm {
+  font-size: 12px;
+  padding: 10px 16px;
+}
+
+.sb-button--md {
+  font-size: 14px;
+  padding: 11px 20px;
+}
+
+.sb-button--lg {
+  font-size: 16px;
+  padding: 12px 24px;
+}
\ No newline at end of file