Merge branch 'master' of github.com:COMPFEST/jasper into shafiya/visu…

…al-language

.storybook/themeDecorator.js

@@ -8,8 +8,17 @@ const defaulTheme = {
   }
 }
 
+const testTheme = {
+  colors: {
+    primary:undefined,
+    secondary:undefined,
+    background:undefined,
+    inputColor:undefined,
+  }
+}
+
 const ThemeDecorator = (storyFn) => (
-  <ThemeProvider theme={defaulTheme}>{storyFn()}</ThemeProvider>
+  <ThemeProvider theme={testTheme}>{storyFn()}</ThemeProvider>
 )
 
 export default ThemeDecorator

CONTRIBUTING.md

@@ -0,0 +1,48 @@
+# Contributing
+
+We welcome community support with both pull requests and reporting bugs. Please
+don't hesitate to jump in.
+
+## Review others' work
+
+Check out the list of outstanding pull requests if there is something you might
+be interested in. Maybe somebody is trying to fix that stupid bug that bothers
+you. Review the PR. Do you have any better ideas how to fix this problem? Let us
+know.
+
+## Issues
+
+The issue tracker is the preferred channel for bug reports, features requests
+and submitting pull requests, but please respect the following restrictions:
+
+- Please do not use the issue tracker for personal support requests.
+- Please do not open issues or pull requests regarding the code in React or
+Docusaurus (open them in their respective repositories).
+
+## Local setup
+
+To install jasper-ui:
+- npm install
+
+To install documentation page:
+- cd docusaurus && npm install
+
+To run storybook:
+- npm run storybook
+
+To run documentation page:
+- Run this in one terminal:
+  - npm start
+- Run this in another terminal:
+  - cd docusaurus && npm start
+
+## Testing
+
+To run all tests:
+- npm test
+
+To run test with coverage:
+- npm run test:coverage
+
+To run test and update snapshots:
+- npm run test:watch

README.md

@@ -35,35 +35,9 @@ class Example extends Component {
 }
 ```
 
-## Local setup
-
-To install jasper-ui:
-- npm install
-
-To install documentation page:
-- cd docusaurus && npm install
-
-To run storybook:
-- npm run storybook
-
-To run documentation page:
-- Run this in one terminal:
-  - npm start
-- Run this in another terminal:
-  - cd docusaurus && npm start
-
-
-## Testing
-
-To run all tests:
-- npm test
-
-To run test with coverage:
-- npm run test:coverage
-
-To run test and update snapshots:
-- npm run test:watch
+## Contributing
 
+> #### [Please follow these steps to contribute](CONTRIBUTING.md).
 
 ## License
 

debug.log

@@ -0,0 +1,7 @@
+[0828/162432.724:ERROR:scoped_process_suspend.cc(31)] NtSuspendProcess: An attempt was made to access an exiting process. (0xc000010a)
+[0828/162433.599:ERROR:process_info.cc(118)] ReadProcessMemory bool __cdecl crashpad::(anonymous namespace)::ReadStruct(HANDLE, crashpad::WinVMAddress, T *) [T = crashpad::process_types::PEB<crashpad::process_types::internal::Traits64>]: Only part of a ReadProcessMemory or WriteProcessMemory request was completed. (0x12B)
+[0828/162433.599:ERROR:process_info.cc(551)] ReadProcessData failed
+[0828/162433.599:ERROR:process_info.cc(118)] ReadProcessMemory bool __cdecl crashpad::(anonymous namespace)::ReadStruct(HANDLE, crashpad::WinVMAddress, T *) [T = crashpad::process_types::PEB<crashpad::process_types::internal::Traits64>]: Only part of a ReadProcessMemory or WriteProcessMemory request was completed. (0x12B)
+[0828/162433.599:ERROR:process_info.cc(551)] ReadProcessData failed
+[0828/162433.599:ERROR:exception_snapshot_win.cc(98)] thread ID 11836 not found in process
+[0828/162433.740:ERROR:scoped_process_suspend.cc(40)] NtResumeProcess: An attempt was made to access an exiting process. (0xc000010a)

docusaurus/docs/carousel.md

@@ -0,0 +1,49 @@
+---
+id: carousel
+title: Carousel
+---
+
+import { Carousel, Button, Card } from 'jasper-ui'
+
+Carousel is a list of cards that can be shuffled to display different content in a single space.
+Each card may consist of text, images, or both.
+
+### Usage
+Each card contains a different item that a user can browse from left and right.
+
+### Code
+```jsx
+const content1 = "/img/carousel-card-img.png"
+const content2 = "/img/carousel-card-img.png"
+const content3 = "/img/carousel-card-img.png"
+
+<Carousel
+    prevButton={(<img src="/img/carousel-prev.svg" alt="prev button"/>)}
+    nextButton={(<img src="/img/carousel-next.svg" alt="next button"/>)}
+>
+<div className="first-content" style={{ color: "blue" }}><img src={content1} alt="content 1" /></div>
+<div className="second-content" style={{ color: "yellow" }}><img src={content2} alt="content 2"/></div>
+<div className="third-content" style={{ color: "red" }}><img src={content3} alt="content 3"/></div>
+</Carousel>
+```
+
+### Result
+<Carousel
+    prevButton={(<img src="/img/carousel_prev.svg" alt="prev button"/>)}
+    nextButton={(<img src="/img/carousel_next.svg" alt="next button"/>)}
+>
+<div className="first-content" style={{ color: "blue" }}>content 1</div>
+<div className="second-content" style={{ color: "yellow" }}>content 2</div>
+<div className="third-content" style={{ color: "red" }}>content 3</div>
+</Carousel>
+
+### Props
+
+| Prop name | Type   | Mandatory/Optional | Description                                  |
+|-----------|--------|--------------------|----------------------------------------------|
+| content#  | Object | Mandatory          | Carousel card (number determines card order) |
+
+| Key       | Type   | Mandatory/Optional | Description                |
+|-----------|--------|--------------------|----------------------------|
+| style     | String | Optional           | Style of the card          |
+| color     | String | Optional           | Color of the card          |

docusaurus/docs/footer.md

@@ -0,0 +1,50 @@
+---
+id: footer
+title: Footer
+---
+
+import { Footer } from '../../src/Footer/Docusaurus'
+
+Footer is a component that contains brief information about Compfest and also contacts that can be used to reach Compfest. There also an input field to contain user email, that can be used by users to subscribe to Compfest so will not get lost of updated news from Compfest.
+
+### Usage
+
+We use footer to tell user brief information about Compfest and which contact that can be used for users to reach Compfest.
+
+### Code
+
+```jsx
+import Facebook from "/img/Facebook.svg"
+import Instagram from "/img/Instagram.svg"
+import Line from "/img/Line.svg"
+import Twitter from "/img/twitter.svg"
+import Linkedin from "/img/LinkedIn.svg"
+import Youtube from "/img/youtube.svg"
+import Compfest from "/img/compfest-white.svg"
+
+<Footer
+  Facebook={Facebook}
+  Instagram={Instagram}
+  Line={Line}
+  Twitter={Twitter}
+  LinkedIn={Linkedin}
+  Youtube={Youtube}
+  Compfest={Compfest}
+/>
+```
+
+### Result
+
+<Footer Facebook='/img/Facebook.svg' Instagram='/img/Instagram.svg' Line='/img/Line.svg' Twitter='/img/twitter.svg' LinkedIn='/img/LinkedIn.svg' Youtube='/img/youtube.svg' Compfest='/img/compfest-white.svg' />
+
+### Props
+
+| Prop name | Type   | Mandatory/Optional | Description                                                                                 |
+| --------- | ------ | ------------------ | ------------------------------------------------------------------------------------------- |
+| Facebook  | String | Mandatory          | Path of Facebook SVG file that navigates to the Facebook account of Compfest when clicked   |
+| Instagram | String | Mandatory          | Path of Instagram SVG file that navigates to the Instagram account of Compfest when clicked |
+| Line      | String | Mandatory          | Path of Line SVG file that navigates to the Line account of Compfest when clicked           |
+| Twitter   | String | Mandatory          | Path of Twitter SVG file that navigates to the Twitter account of Compfest when clicked     |
+| LinkedIn  | String | Mandatory          | Path of LinkedIn SVG file that navigates to the LinkedIn account of Compfest when clicked   |
+| Youtube   | String | Mandatory          | Path of Youtube SVG file that navigates to the Youtube account of Compfest when clicked     |
+| Compfest  | String | Mandatory          | Path of Compfest logo SVG file                                                              |

docusaurus/docs/form-fields.md

@@ -3,6 +3,8 @@ id: form-fields
 title: Form Fields
 ---
 
+import {Input} from "jasper-ui"
+
 Form fields are used in forms where input from user is required. They are part of the django form fields implemented on our web. Typically used for registration, login, and signup.
 
 ## Dropdown
@@ -32,3 +34,131 @@ choices={["Finance", "Academy", "Competition"]}
 label="Departments"
 name="DropdownInput"
 />
+
+## Text Input
+
+### Usage
+
+Text input field is a commonly-defined single-line text field that a user can enter text into. Usually used for username in registration form.
+
+### Code
+
+```jsx
+<Input.Text
+  name="name"
+  placeholder="text placeholder"
+/>
+```
+
+<!-- ### Result
+
+<Input.Text name="input-name" placeholder="text placeholder"/> -->
+
+## Radio Input
+
+### Usage
+
+We add Radio input field to display many options with only one radio can be selected at the same time.
+
+### Code
+
+The name parameter must be the same to be detected as one Radio Input.
+
+```jsx
+<Input.Radio name="name" value="One">
+  One
+</Input.Radio>
+<Input.Radio name="name" value="Two">
+  Two
+</Input.Radio>
+<Input.Radio name="name" value="Three">
+  Three
+</Input.Radio>
+```
+
+<!-- ### Result
+
+<Input.Radio name="name" value="One">
+  One
+</Input.Radio>
+<Input.Radio name="name" value="Two">
+  Two
+</Input.Radio>
+<Input.Radio name="name" value="Three">
+  Three
+</Input.Radio> -->
+
+## Number Input
+
+### Usage
+
+Number input define a field for entering a number. Usually used to write down a price, or count.
+
+### Code
+
+```jsx
+<Input.Number
+  name="input-name" 
+  placeholder="number placeholder"
+/>
+```
+
+<!-- ### Result
+
+<Input.Number name="input-name" placeholder="number placeholder" /> -->
+
+## TextArea Input
+
+### Usage
+
+TextArea input is multi-line text field that usually used to collect user inputs like comments or reviews.
+
+### Code
+
+```jsx
+<Input.TextArea
+  name="input-name"
+  placeholder="placeholder"
+/>
+```
+
+<!-- ### Result
+
+<Input.TextArea name="input-name" placeholder="placeholder" /> -->
+
+## Phone Input
+
+### Usage
+
+We implement phone input field similiar to number input with a phone span. As the name said, it is used for a phone number input in a form.
+
+### Code
+
+```jsx
+<Input.Phone
+  name="input-name"
+  placeholder="phone placeholder"
+/>
+```
+
+<!-- ### Result
+
+<Input.Phone name="input-name" placeholder="phone placeholder" /> -->
+
+## Checkbox Input
+
+### Usage
+
+Checkbox input is used to display one or more options with the user and the user can select one or more from the options.
+
+### Code
+
+```jsx
+<Input.Checkbox name="input-name">
+  Hello
+</Input.Checkbox>
+```
+
+<!-- ### Result
+
+<Input.Checkbox name="input-name">Hello</Input.Checkbox> -->

docusaurus/docs/small-nav.md

@@ -5,11 +5,11 @@ title: Small Nav
 
 import { SmallNav, Card } from 'jasper-ui'
 
-Small Nav is a component for navigation. Small Nav act like Navbar but in the small version.
+Small Nav is a component of navigation. Small Nav acts like Navbar but it used to show different components, not a different page.
 
 ### Usage
 
-Small Nav contain titles, each of them represent its own component that navigated by its own title.
+Small Nav contains titles, each of them represents its component that navigated by its title. Therefore, we use Small Nav to determine which component will be displayed.
 
 ### Code
 
@@ -59,11 +59,11 @@ component: <Card title="Component4" text="Lorem ipsum dolor sit amet" />
 
 ## Props
 
-| Prop name | Type   | Mandatory/Optional | Description                                                       |
-| --------- | ------ | ------------------ | ----------------------------------------------------------------- |
-| navItems  | Object | Mandatory          | Array of objects, that each object consist of title and component |
+| Prop name | Type   | Mandatory/Optional | Description                                                          |
+| --------- | ------ | ------------------ | -------------------------------------------------------------------- |
+| navItems  | Object | Mandatory          | An array of objects, that each object consist of title and component |
 
 | Key       | Value Type | Description                                                                 |
 | --------- | ---------- | --------------------------------------------------------------------------- |
-| title     | String     | Text that act as navigation                                                 |
+| title     | String     | Text that acts as a navigation                                              |
 | component | Object     | The object that will be displayed when the title representing it is clicked |