diff --git a/.storybook/themeDecorator.js b/.storybook/themeDecorator.js index 07ea0b7..329276c 100644 --- a/.storybook/themeDecorator.js +++ b/.storybook/themeDecorator.js @@ -8,8 +8,17 @@ const defaulTheme = { } } +const testTheme = { + colors: { + primary:undefined, + secondary:undefined, + background:undefined, + inputColor:undefined, + } +} + const ThemeDecorator = (storyFn) => ( - {storyFn()} + {storyFn()} ) export default ThemeDecorator diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000..0a8e76e --- /dev/null +++ b/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 diff --git a/README.md b/README.md index c92d3ca..9556e7c 100644 --- a/README.md +++ b/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 diff --git a/debug.log b/debug.log new file mode 100644 index 0000000..bb44280 --- /dev/null +++ b/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]: 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]: 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) diff --git a/docusaurus/docs/carousel.md b/docusaurus/docs/carousel.md new file mode 100644 index 0000000..ded1f4c --- /dev/null +++ b/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" + +)} + nextButton={(next button)} +> +
content 1
+
content 2
+
content 3
+ +``` + +### Result +)} + nextButton={(next button)} +> +
content 1
+
content 2
+
content 3
+ + +### 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 | \ No newline at end of file diff --git a/docusaurus/docs/footer.md b/docusaurus/docs/footer.md new file mode 100644 index 0000000..5c16144 --- /dev/null +++ b/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" + +