Fix all typos

Author: akshay5995

CONTRIBUTING.md

@@ -1,7 +1,7 @@
-# Steps to contibute
+# Steps to contribute
 
 1. Fork the repo
-2. Create a new PR with decription of your changes and why it's needed
+2. Create a new PR with description of your changes and why it's needed
 3. Wait ~1 day to get your changes reviewed
 4. Once the comments are fixed and PR is merged new version of package will be deployed
 

README.md

@@ -16,7 +16,7 @@ Existing users of the package please refer to Change Log [here](https://github.c
 
 `npm i powerbi-report-component`
 
-## Usuage for Report
+## Usage for Report
 
 ```javascript
 import React, {Component} from 'react';
@@ -25,7 +25,7 @@ import { Report } from 'powerbi-report-component';
 class MyComponent extends Component {
   constructor(props) {
     super(props);
-    this.report = null; // to store the loaded report's object to perform operations like print, fullscreen etc..
+    this.report = null; // to store the loaded report's object to perform operations like print, full screen etc..
   }
   ...
   handleDataSelected = (data) => {
@@ -63,7 +63,7 @@ class MyComponent extends Component {
     const extraSettings = {
             filterPaneEnabled: false, //true
             navContentPaneEnabled: false, //true
-            hideErrors: false // Use this *only* when you want to overide error experience i.e, use onError
+            hideErrors: false // Use this *only* when you want to override error experience i.e, use onError
             // ... more custom settings
     };
     return (
@@ -93,7 +93,7 @@ class MyComponent extends Component {
 
 ```
 
-## Usuage for Dashboard
+## Usage for Dashboard
 
 ```javascript
 import { Dashboard } from 'powerbi-report-component';
@@ -116,7 +116,7 @@ import { Dashboard } from 'powerbi-report-component';
 />
 ```
 
-## Usuage for Tile
+## Usage for Tile
 
 ```javascript
 import { Tile } from 'powerbi-report-component';
@@ -188,7 +188,7 @@ export default MyReport;
 
 ## Report features and props you can pass into the component
 
-Inside your compoent where you're using { Report } component.
+Inside your component where you're using { Report } component.
 
 _Constructor:_
 
@@ -514,7 +514,7 @@ onClick = {(data) => {
 }}
 ```
 
-For playgroud visit:
+For playground visit:
 
 > http://akshay5995.github.io/powerbi-report-component
 

src/docs/CreateReport/Form.jsx

@@ -3,7 +3,7 @@ import { Form, Input, Select } from 'antd';
 import { layout } from '../styles/formLayoutStyles';
 import FormButtonGroup from '../common/FormButtonGroup';
 
-const ReportForm = ({ onSubmit, initalReportProps, onReset }) => {
+const ReportForm = ({ onSubmit, initialReportProps, onReset }) => {
   const [isSubmit, setIsSubmit] = React.useState(false);
 
   const onSubmitForm = ({ reportProps }) => {
@@ -23,7 +23,7 @@ const ReportForm = ({ onSubmit, initalReportProps, onReset }) => {
       colon={false}
       name="reportProps"
       onFinish={onSubmitForm}
-      initialValues={{ reportProps: initalReportProps }}
+      initialValues={{ reportProps: initialReportProps }}
     >
       <Form.Item
         label="Token Type"

src/docs/CreateReport/index.jsx

@@ -7,16 +7,16 @@ import Form from './Form';
 const { Content } = Layout;
 const { TabPane } = Tabs;
 
-const initalReportProps = {
+const initialReportProps = {
   tokenType: 'Embed',
   reportMode: 'create',
 };
 
 const ReportDemo = () => {
   const [reportProps, setReportProps] = React.useState(
-    initalReportProps
+    initialReportProps
   );
-  const [isVaildConfig, setIsValidConfig] = React.useState(false);
+  const [isValidConfig, setIsValidConfig] = React.useState(false);
   const [activeTab, setActiveTab] = React.useState('form');
 
   const onTabClick = (key, event) => setActiveTab(key);
@@ -31,7 +31,7 @@ const ReportDemo = () => {
 
   const onReset = React.useCallback(() => {
     setIsValidConfig(false);
-  }, [isVaildConfig]);
+  }, [isValidConfig]);
 
   return (
     <Content>
@@ -46,15 +46,15 @@ const ReportDemo = () => {
           key="form"
         >
           <Form
-            initalReportProps={initalReportProps}
+            initialReportProps={initialReportProps}
             onSubmit={renderWithReportProps}
             onReset={onReset}
           />
         </TabPane>
         <TabPane
-          disabled={!isVaildConfig}
+          disabled={!isValidConfig}
           tab={
-            <Badge dot={isVaildConfig}>
+            <Badge dot={isValidConfig}>
               <span>
                 <CheckCircleTwoTone twoToneColor="#52c41a" />
                 Create Report
@@ -63,7 +63,7 @@ const ReportDemo = () => {
           }
           key="report"
         >
-          {isVaildConfig && (
+          {isValidConfig && (
             <Report
               style={{
                 height: '100%',
@@ -74,7 +74,7 @@ const ReportDemo = () => {
                 console.log('Report Loaded!');
               }}
               onRender={(report) => {
-                console.log('Report Redered!');
+                console.log('Report Rendered!');
               }}
               onSave={(data) => {
                 console.log('Report saved. Event data ', data);

src/docs/Dashboard/Form.jsx

@@ -3,7 +3,7 @@ import { Form, Input, Select } from 'antd';
 import { layout } from '../styles/formLayoutStyles';
 import FormButtonGroup from '../common/FormButtonGroup';
 
-const DashboardForm = ({ onSubmit, initalDashboardProps, onReset }) => {
+const DashboardForm = ({ onSubmit, initialDashboardProps, onReset }) => {
   const [isSubmit, setIsSubmit] = React.useState(false);
 
   const onSubmitForm = ({ dashboardProps }) => {
@@ -23,7 +23,7 @@ const DashboardForm = ({ onSubmit, initalDashboardProps, onReset }) => {
       colon={false}
       name="dashboardProps"
       onFinish={onSubmitForm}
-      initialValues={{ dashboardProps: initalDashboardProps }}
+      initialValues={{ dashboardProps: initialDashboardProps }}
     >
       <Form.Item
         label="Token Type"
@@ -63,7 +63,7 @@ const DashboardForm = ({ onSubmit, initalDashboardProps, onReset }) => {
         <Select placeholder="Page View (optional)">
           <Select.Option value="fitToWidth">fitToWidth</Select.Option>
           <Select.Option value="oneColumn">oneColumn</Select.Option>
-          <Select.Option value="actualtSize">actualtSize</Select.Option>
+          <Select.Option value="actualSize">actualSize</Select.Option>
         </Select>
       </Form.Item>
       <FormButtonGroup isSubmit={isSubmit} onReset={onResetForm} />

src/docs/Dashboard/index.jsx

@@ -7,20 +7,20 @@ import Form from './Form';
 const { Content } = Layout;
 const { TabPane } = Tabs;
 
-const initalDashboardProps = {
+const initialDashboardProps = {
   tokenType: 'Embed',
 };
 
 const DashboardDemo = () => {
   const [dashboardProps, setDashboardProps] = React.useState(
-    initalDashboardProps
+    initialDashboardProps
   );
-  const [isVaildConfig, setIsValidConfig] = React.useState(false);
+  const [isValidConfig, setIsValidConfig] = React.useState(false);
   const [activeTab, setActiveTab] = React.useState('form');
 
   const onTabClick = (key, event) => setActiveTab(key);
 
-  const renderWithDashboardrops = React.useCallback(
+  const renderWithDashboardProps = React.useCallback(
     ({ dashboardProps }) => {
       setDashboardProps(dashboardProps);
       setIsValidConfig(true);
@@ -30,7 +30,7 @@ const DashboardDemo = () => {
 
   const onReset = React.useCallback(() => {
     setIsValidConfig(false);
-  }, [isVaildConfig]);
+  }, [isValidConfig]);
 
   return (
     <Content>
@@ -45,15 +45,15 @@ const DashboardDemo = () => {
           key="form"
         >
           <Form
-            initalDashboardProps={initalDashboardProps}
-            onSubmit={renderWithDashboardrops}
+            initialDashboardProps={initialDashboardProps}
+            onSubmit={renderWithDashboardProps}
             onReset={onReset}
           />
         </TabPane>
         <TabPane
-          disabled={!isVaildConfig}
+          disabled={!isValidConfig}
           tab={
-            <Badge dot={isVaildConfig}>
+            <Badge dot={isValidConfig}>
               <span>
                 <CheckCircleTwoTone twoToneColor="#52c41a" />
                 Dashboard
@@ -62,7 +62,7 @@ const DashboardDemo = () => {
           }
           key="dashboard"
         >
-          {isVaildConfig && (
+          {isValidConfig && (
             <Dashboard
               {...dashboardProps}
               style={{

src/docs/MultiplePageDemo/Form.jsx

@@ -3,7 +3,7 @@ import { Form, Input, Select } from 'antd';
 import { layout } from '../styles/formLayoutStyles';
 import FormButtonGroup from '../common/FormButtonGroup';
 
-const ReportForm = ({ onSubmit, initalReportProps, onReset }) => {
+const ReportForm = ({ onSubmit, initialReportProps, onReset }) => {
   const [isSubmit, setIsSubmit] = React.useState(false);
 
   const onSubmitForm = ({ reportProps }) => {
@@ -24,7 +24,7 @@ const ReportForm = ({ onSubmit, initalReportProps, onReset }) => {
       title="Multiple page demo"
       name="reportProps"
       onFinish={onSubmitForm}
-      initialValues={{ reportProps: initalReportProps }}
+      initialValues={{ reportProps: initialReportProps }}
     >
       <Form.Item
         label="Token Type"

src/docs/Report/Form.jsx

@@ -3,10 +3,10 @@ import { Form, Input, Select } from 'antd';
 import { layout } from '../styles/formLayoutStyles';
 import FormButtonGroup from '../common/FormButtonGroup';
 
-const ReportForm = ({ onSubmit, initalReportProps, onReset }) => {
+const ReportForm = ({ onSubmit, initialReportProps, onReset }) => {
   const [isSubmit, setIsSubmit] = React.useState(false);
 
-  const onSumitForm = ({ reportProps }) => {
+  const onSubmitForm = ({ reportProps }) => {
     setIsSubmit(true);
     onSubmit({ reportProps });
   };
@@ -22,8 +22,8 @@ const ReportForm = ({ onSubmit, initalReportProps, onReset }) => {
       size="large"
       colon={false}
       name="reportProps"
-      onFinish={onSumitForm}
-      initialValues={{ reportProps: initalReportProps }}
+      onFinish={onSubmitForm}
+      initialValues={{ reportProps: initialReportProps }}
     >
       <Form.Item
         label="Token Type"
@@ -77,7 +77,7 @@ const ReportForm = ({ onSubmit, initalReportProps, onReset }) => {
         </Select>
       </Form.Item>
       <Form.Item name={['reportProps', 'datasetId']} label="Dataset Id">
-        <Input placeholder="Dataset Id (opional)" />
+        <Input placeholder="Dataset Id (optional)" />
       </Form.Item>
       <Form.Item name={['reportProps', 'pageName']} label="Page Name">
         <Input placeholder="Page Name (optional)" />

src/docs/Tile/Form.jsx

@@ -3,7 +3,7 @@ import { Form, Input, Select } from 'antd';
 import { layout } from '../styles/formLayoutStyles';
 import FormButtonGroup from '../common/FormButtonGroup';
 
-const TileForm = ({ onSubmit, initalTileProps, onReset }) => {
+const TileForm = ({ onSubmit, initialTileProps, onReset }) => {
   const [isSubmit, setIsSubmit] = React.useState(false);
 
   const onSubmitForm = ({ tileProps }) => {
@@ -23,7 +23,7 @@ const TileForm = ({ onSubmit, initalTileProps, onReset }) => {
       colon={false}
       name="tileProps"
       onFinish={onSubmitForm}
-      initialValues={{ tileProps: initalTileProps }}
+      initialValues={{ tileProps: initialTileProps }}
     >
       <Form.Item
         label="Token Type"
@@ -56,7 +56,7 @@ const TileForm = ({ onSubmit, initalTileProps, onReset }) => {
           { required: true, message: 'Dashboard Id is required' },
         ]}
       >
-        <Input placeholder="Dasboard Id" />
+        <Input placeholder="Dashboard Id" />
       </Form.Item>
       <Form.Item
         name={['tileProps', 'embedId']}

src/docs/Tile/index.jsx

@@ -7,13 +7,13 @@ import Form from './Form';
 const { Content } = Layout;
 const { TabPane } = Tabs;
 
-const initalTileProps = {
+const initialTileProps = {
   tokenType: 'Embed',
 };
 
 const TileDemo = () => {
-  const [tileProps, setTileProps] = React.useState(initalTileProps);
-  const [isVaildConfig, setIsValidConfig] = React.useState(false);
+  const [tileProps, setTileProps] = React.useState(initialTileProps);
+  const [isValidConfig, setIsValidConfig] = React.useState(false);
   const [activeTab, setActiveTab] = React.useState('form');
 
   const onTabClick = (key, event) => setActiveTab(key);
@@ -28,7 +28,7 @@ const TileDemo = () => {
 
   const onReset = React.useCallback(() => {
     setIsValidConfig(false);
-  }, [isVaildConfig]);
+  }, [isValidConfig]);
 
   return (
     <Content>
@@ -43,15 +43,15 @@ const TileDemo = () => {
           key="form"
         >
           <Form
-            initalTileProps={initalTileProps}
+            initialTileProps={initialTileProps}
             onSubmit={renderWithTileProps}
             onReset={onReset}
           />
         </TabPane>
         <TabPane
-          disabled={!isVaildConfig}
+          disabled={!isValidConfig}
           tab={
-            <Badge dot={isVaildConfig}>
+            <Badge dot={isValidConfig}>
               <span>
                 <CheckCircleTwoTone twoToneColor="#52c41a" />
                 Tile
@@ -60,7 +60,7 @@ const TileDemo = () => {
           }
           key="tile"
         >
-          {isVaildConfig && (
+          {isValidConfig && (
             <Tile
               style={{
                 height: '100%',