├── .all-contributorsrc ├── .babelrc ├── .dockerignore ├── .eslintrc ├── .github ├── FUNDING.yml ├── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md ├── PULL_REQUEST_TEMPLATE.md ├── config.yml ├── stale.yml └── workflows │ └── npmpublish.yml ├── .gitignore ├── .mergify.yml ├── .netlify └── state.json ├── .prettierrc ├── .travis.yml ├── CHANGELOG.md ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── Dockerfile ├── Dockerfile-prod ├── LICENSE ├── README.md ├── TODO.md ├── __mocks__ ├── fileMock.js └── styleMock.js ├── babel.config.js ├── codecov.yml ├── docker-compose.yml ├── fix.md ├── fix.md.txt ├── package-lock.json ├── package.json ├── src ├── .storybook │ ├── addons.js │ ├── config.js │ └── zapify.js ├── components │ ├── Box │ │ ├── Box.scss │ │ ├── __snapshots__ │ │ │ └── box.test.js.snap │ │ ├── box.test.js │ │ └── index.js │ ├── Card │ │ ├── Card.scss │ │ └── index.js │ ├── Colors │ │ └── index.js │ ├── Container │ │ ├── Container.scss │ │ ├── Container.test.js │ │ ├── __snapshots__ │ │ │ └── Container.test.js.snap │ │ └── index.js │ ├── Grid │ │ ├── Grid.scss │ │ └── index.js │ ├── InfoCard │ │ ├── InfoCard.scss │ │ └── index.js │ ├── Media │ │ ├── Media.scss │ │ ├── Media.test.js │ │ ├── __snapshots__ │ │ │ └── Media.test.js.snap │ │ └── index.js │ ├── Switch │ │ ├── Switch.scss │ │ └── index.js │ ├── TextField │ │ ├── TextField.scss │ │ ├── TextField.test.js │ │ ├── __snapshots__ │ │ │ └── TextField.test.js.snap │ │ └── index.js │ ├── Typography │ │ ├── Typography.scss │ │ ├── Typography.test.js │ │ ├── __snapshots__ │ │ │ └── Typography.test.js.snap │ │ └── index.js │ ├── ZapBar │ │ ├── ZapBar.scss │ │ ├── ZapBar.test.js │ │ ├── __snapshots__ │ │ │ └── ZapBar.test.js.snap │ │ └── index.js │ ├── ZapButton │ │ ├── ZapButton.scss │ │ └── index.js │ └── index.js ├── stories │ ├── box.stories.js │ ├── card.stories.js │ ├── colors.stories.js │ ├── components.stories.js │ ├── container.stories.js │ ├── grid.stories.js │ ├── infocard.stories.js │ ├── media.stories.js │ ├── switch.stories.js │ ├── textfield.stories.js │ ├── typography.stories.js │ ├── zapbar.stories.js │ └── zapbutton.stories.js └── styles │ ├── ColorSchema.js │ └── ColorSchema.scss └── webpack.config.js /.all-contributorsrc: -------------------------------------------------------------------------------- 1 | { 2 | "files": [ 3 | "README.md" 4 | ], 5 | "imageSize": 100, 6 | "commit": false, 7 | "contributors": [ 8 | { 9 | "login": "piyush97", 10 | "name": "Piyush Mehta", 11 | "avatar_url": "https://avatars3.githubusercontent.com/u/18229627?s=460&v=4", 12 | "profile": "https://github.com/piyush97", 13 | "contributions": [ 14 | "code" 15 | ] 16 | }, 17 | { 18 | "login": "is124", 19 | "name": "Tilak", 20 | "avatar_url": "https://avatars2.githubusercontent.com/u/51227848?v=4", 21 | "profile": "https://github.com/is124", 22 | "contributions": [ 23 | "code", 24 | "design" 25 | ] 26 | }, 27 | { 28 | "login": "vinaybiradar1717", 29 | "name": "Vinay Biradar", 30 | "avatar_url": "https://avatars2.githubusercontent.com/u/46494289?v=4", 31 | "profile": "https://github.com/vinaybiradar1717", 32 | "contributions": [ 33 | "code" 34 | ] 35 | }, 36 | { 37 | "login": "sawood14012", 38 | "name": "Meer Sawood", 39 | "avatar_url": "https://avatars1.githubusercontent.com/u/18240985?v=4", 40 | "profile": "https://github.com/sawood14012", 41 | "contributions": [ 42 | "userTesting" 43 | ] 44 | }, 45 | { 46 | "login": "harshraj24", 47 | "name": "harshraj24", 48 | "avatar_url": "https://avatars0.githubusercontent.com/u/54536823?v=4", 49 | "profile": "https://github.com/harshraj24", 50 | "contributions": [ 51 | "design" 52 | ] 53 | } 54 | ], 55 | "contributorsPerLine": 7, 56 | "projectName": "zapify", 57 | "projectOwner": "zapify-ui", 58 | "repoType": "github", 59 | "repoHost": "https://github.com" 60 | } 61 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env", "@babel/preset-react"] 3 | } 4 | -------------------------------------------------------------------------------- /.dockerignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["airbnb", "prettier", "prettier/react"], 3 | "plugins": ["prettier"], 4 | "parser": "babel-eslint", 5 | "parserOptions": { 6 | "sourceType": "module", 7 | "allowImportExportEverywhere": false, 8 | "codeFrame": true 9 | }, 10 | "rules": { 11 | "react/jsx-filename-extension": [ 12 | 1, 13 | { 14 | "extensions": [".js", ".jsx"] 15 | } 16 | ], 17 | "react/prop-types": 0, 18 | "no-underscore-dangle": 0, 19 | "import/imports-first": ["error", "absolute-first"], 20 | "import/newline-after-import": "error" 21 | }, 22 | "globals": { 23 | "window": true, 24 | "document": true, 25 | "localStorage": true, 26 | "FormData": true, 27 | "FileReader": true, 28 | "Blob": true, 29 | "navigator": true 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: piyush97 4 | patreon: # Replace with a single Patreon username 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | otechie: # Replace with a single Otechie username 12 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 13 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | - OS: [e.g. iOS] 28 | - Browser [e.g. chrome, safari] 29 | - Version [e.g. 22] 30 | 31 | **Smartphone (please complete the following information):** 32 | - Device: [e.g. iPhone6] 33 | - OS: [e.g. iOS8.1] 34 | - Browser [e.g. stock browser, safari] 35 | - Version [e.g. 22] 36 | 37 | **Additional context** 38 | Add any other context about the problem here. 39 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | - [ ] I have read [Zapify's contribution guidelines](https://github.com/zapify-ui/zapify/blob/master/CONTRIBUTING.md). 4 | - [ ] My pull request has a descriptive title (not a vague title like `Update index.md`) 5 | - [ ] My pull request targets the `master` branch of zapify. 6 | - [ ] None of my changes are plagiarized from another source without proper attribution. 7 | - [ ] All the files I changed are in the same world language (for example: only English changes, or only Chinese changes, etc.) 8 | - [ ] My changes do not use shortened URLs or affiliate links. 9 | 10 | 11 | 12 | Closes #XXXXX 13 | -------------------------------------------------------------------------------- /.github/config.yml: -------------------------------------------------------------------------------- 1 | # Configuration for welcome - https://github.com/zapify-ui/zapify 2 | 3 | # Configuration for new-issue-welcome - https://github.com/zapify-ui/zapify 4 | 5 | # Comment to be posted to on first time issues 6 | newIssueWelcomeComment: > 7 | Thanks for opening your first issue here! Be sure to follow the issue template! 8 | 9 | # Configuration for new-pr-welcome - https://github.com/zapify-ui/zapify 10 | 11 | # Comment to be posted to on PRs from first time contributors in your repository 12 | newPRWelcomeComment: > 13 | Thanks for opening this pull request! Please check out our contributing guidelines. 14 | 15 | # Configuration for first-pr-merge -https://github.com/zapify-ui/zapify 16 | 17 | # Comment to be posted to on pull requests merged by a first time user 18 | firstPRMergeComment: > 19 | Congrats on merging your first pull request! We here at Zapify are proud of you! 20 | 21 | # It is recommended to include as many gifs and emojis as possible! 22 | -------------------------------------------------------------------------------- /.github/stale.yml: -------------------------------------------------------------------------------- 1 | # Number of days of inactivity before an issue becomes stale 2 | daysUntilStale: 60 3 | # Number of days of inactivity before a stale issue is closed 4 | daysUntilClose: 7 5 | # Issues with these labels will never be considered stale 6 | exemptLabels: 7 | - pinned 8 | - security 9 | # Label to use when marking an issue as stale 10 | staleLabel: wontfix 11 | # Comment to post when marking an issue as stale. Set to `false` to disable 12 | markComment: > 13 | This issue has been automatically marked as stale because it has not had 14 | recent activity. It will be closed if no further activity occurs. Thank you 15 | for your contributions. 16 | # Comment to post when closing a stale issue. Set to `false` to disable 17 | closeComment: false 18 | -------------------------------------------------------------------------------- /.github/workflows/npmpublish.yml: -------------------------------------------------------------------------------- 1 | name: Node.js Package 2 | 3 | on: 4 | pull_request: 5 | branches: 6 | - master 7 | push: 8 | branches: 9 | - master 10 | 11 | jobs: 12 | build: 13 | runs-on: ubuntu-latest 14 | steps: 15 | - uses: actions/checkout@v1 16 | - uses: actions/setup-node@v1 17 | with: 18 | node-version: 12 19 | - run: npm ci 20 | - run: npm test 21 | 22 | publish-npm: 23 | needs: build 24 | runs-on: ubuntu-latest 25 | steps: 26 | - uses: actions/checkout@v1 27 | - uses: actions/setup-node@v1 28 | with: 29 | node-version: 12 30 | registry-url: https://registry.npmjs.org/ 31 | - run: npm publish 32 | env: 33 | NODE_AUTH_TOKEN: ${{secrets.npm_token}} 34 | 35 | publish-gpr: 36 | needs: build 37 | runs-on: ubuntu-latest 38 | steps: 39 | - uses: actions/checkout@v1 40 | - uses: actions/setup-node@v1 41 | with: 42 | node-version: 12 43 | registry-url: https://npm.pkg.github.com/ 44 | scope: '@piyush97' 45 | - run: npm publish 46 | env: 47 | NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}} 48 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | lib 3 | node_modules 4 | *.log 5 | .cache 6 | src/components/**/*.css 7 | dist/* 8 | storybook-static 9 | -------------------------------------------------------------------------------- /.mergify.yml: -------------------------------------------------------------------------------- 1 | pull_request_rules: 2 | - name: automatic merge on CI success and review 3 | conditions: 4 | - status-success=continuous-integration/travis-ci/pr 5 | - "#approved-reviews-by>=1" 6 | actions: 7 | merge: 8 | method: merge 9 | -------------------------------------------------------------------------------- /.netlify/state.json: -------------------------------------------------------------------------------- 1 | { 2 | "siteId": "71ceb923-c95d-413d-9519-30c7931fc134" 3 | } -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": false 3 | } 4 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - stable 4 | install: 5 | - npm install 6 | cache: 7 | directories: 8 | - node_modules 9 | - storybook-static 10 | script: 11 | - npm run test 12 | - npm run build 13 | - ./node_modules/.bin/codecov --token="fb6b058a-5c4f-40c9-a5ff-d351fda90dd0" 14 | after_success: 15 | - npm run build-storybook 16 | - bash <(curl -s https://codecov.io/bash) -e TRAVIS_NODE_VERSION 17 | deploy: 18 | - provider: pages 19 | skip-cleanup: true 20 | github-token: $github_token 21 | local_dir: storybook-static 22 | repo: zapify-ui/zapify 23 | target_branch: gh-pages 24 | on: 25 | branch: master 26 | 27 | - provider: npm 28 | email: me@piyushmehta.com 29 | api_key: 30 | secure: TbQLAlf1zh5NKLym+JxRi1XUnR7LtnISOsOfxxPdJTORaH/DUMywuNl4XHIMvLln0Fk/oRtJCBl2afBuASGbVPTGlDfbj3ytwRHcLmPFRpSJ96gpShBLa3YVhnOre7EUpjoBpCA7iF+jfEEjXI4T/AdbRbmiwHMRcIHQcCSy4OeuL9EfWRM9BtPD2zRku/i2p7zD+N0zOvxYgMJErK3JfdxZQTsGI959irUpy6LeEDNH6Id+oEMriaDhrcryOYBWhpJgvr4jE55UiEcRKECfjrDPDzP7CFI8GgVhB6yBPC9xn1WlqyfCw/GF6IHEdQakLbfCSHl521dSbS/WkBccpK1MYFqaUBPJzF5fspMF3isDs5tSCmSRVVkIWfl5jGnDfWHeNpO0TQfqNzxt+qA5WYXh6eaIfZN7BAPx/aMr6gM837R8GTGE4zBRy4NROUgYp1fLByowZfjw/V198yLIi5cyFfM0FJt+bzwW7aG08WBBiEsa3Dnrn8cG9YcW5zJEAiC0mJ8WJHCrQ+7+Q3meI7Kh3KDXc69tnaWqpqHdSxmRf0XAyAL7QY7O67/MDoZmLDY42+4OVJtoh3CnrhkifmzdudIE3zPqHHUDO2eBRpgvu4xY76j+m6feRe1QzbnTtzRGm6xi6Gd5BoE8Ja0IGjb89a6bL1RjnrDLBfm5oaM= 31 | on: 32 | repo: zapify-ui/zapify 33 | branch: master 34 | 35 | notifications: 36 | slack: 37 | secure: v+Z8pMUbHHhgpJh7ajaJTW6Cw38lYC33mqR+7HdwB9PN+gtuE7rtqxlWoGjuFGIjzeETw3xNDgXYd9Pzy1ybG5d3/8vMyuyEj8Kxl7YlRAC3Az1k7GjUiMnHvZ2gKE2j8M6DQRB+FpqZWEdW7XEi2i03oPHUg3mLDmgIRvSJRTcv8xHozdGjdkXrowXHYQgNRqfHRkmGX7CccptAyOvVQVorkrOWvUhnYdKmYnzKQIvDzQFZmlnJ1IReZZTBMihYq1uASkvLUgD+6RWE0uv2HtEy9JHH4KldRAA9HMO0cZJpNUEikgtQ0mIpD9suna5hKM5+YFH54EeCIo4wwZ3Xtz1zyhBQZPwWZ3JRu8fsqhxywK6nGPqt/X82s3+W2Ua5SB69wUmV/Frai5uAZ4mXplpqmhGcp4SyRvBhLj58JKbedeoNwRATz/C4vNb6Ir1VW3Jo15Aul9o5CTf/Wj0RpjptjWCbC65Cw152KCG6Pp3KnaQlnqHkEVZZTUD/9D1u5n60iMs5bZoeG/J3BL0pvuufdKYjPH8UxhmBX23Eq/HhkXkVis7ttGQQue3UXujfsF9L6edfUIieaP8f5fO5QmUzaTgSqJijDBRBJZ0jlCbUL4WBqexI5N6Da5WD82InFYxxG8g8VK1DV8iRaR2r1CeRAlWjOy9gD6YeQg6jt5M= -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | ## [V.1.0.0](https://github.com/zapify-ui/zapify/tree/V.1.0.0) (2019-08-17) 4 | [Full Changelog](https://github.com/zapify-ui/zapify/compare/V1.0.1...V.1.0.0) 5 | 6 | **Closed issues:** 7 | 8 | - Test ticket from Code Climate [\#52](https://github.com/zapify-ui/zapify/issues/52) 9 | 10 | ## [V1.0.1](https://github.com/zapify-ui/zapify/tree/V1.0.1) (2019-08-17) 11 | [Full Changelog](https://github.com/zapify-ui/zapify/compare/V.0.2.1...V1.0.1) 12 | 13 | **Implemented enhancements:** 14 | 15 | - Create PULL\_REQUEST\_TEMPLATE.md [\#58](https://github.com/zapify-ui/zapify/pull/58) ([piyush97](https://github.com/piyush97)) 16 | - Grid Implementation [\#56](https://github.com/zapify-ui/zapify/pull/56) ([piyush97](https://github.com/piyush97)) 17 | - Card component [\#51](https://github.com/zapify-ui/zapify/pull/51) ([vinaybiradar1717](https://github.com/vinaybiradar1717)) 18 | - Storybook [\#49](https://github.com/zapify-ui/zapify/pull/49) ([piyush97](https://github.com/piyush97)) 19 | - Typography Dynamically fixed with props and default props [\#47](https://github.com/zapify-ui/zapify/pull/47) ([piyush97](https://github.com/piyush97)) 20 | - Text box [\#45](https://github.com/zapify-ui/zapify/pull/45) ([piyush97](https://github.com/piyush97)) 21 | 22 | **Closed issues:** 23 | 24 | - Update readme for new release [\#32](https://github.com/zapify-ui/zapify/issues/32) 25 | - Weekly Digest \(31 July, 2019 - 7 August, 2019\) [\#19](https://github.com/zapify-ui/zapify/issues/19) 26 | 27 | **Merged pull requests:** 28 | 29 | - Update issue templates [\#57](https://github.com/zapify-ui/zapify/pull/57) ([piyush97](https://github.com/piyush97)) 30 | - Grid [\#55](https://github.com/zapify-ui/zapify/pull/55) ([sawood14012](https://github.com/sawood14012)) 31 | - added info card [\#54](https://github.com/zapify-ui/zapify/pull/54) ([sawood14012](https://github.com/sawood14012)) 32 | - Card component [\#53](https://github.com/zapify-ui/zapify/pull/53) ([piyush97](https://github.com/piyush97)) 33 | - Box refactor [\#48](https://github.com/zapify-ui/zapify/pull/48) ([piyush97](https://github.com/piyush97)) 34 | - added tests [\#46](https://github.com/zapify-ui/zapify/pull/46) ([sawood14012](https://github.com/sawood14012)) 35 | - Testing components [\#44](https://github.com/zapify-ui/zapify/pull/44) ([piyush97](https://github.com/piyush97)) 36 | - Readme My name 😜 [\#43](https://github.com/zapify-ui/zapify/pull/43) ([piyush97](https://github.com/piyush97)) 37 | - docs: add sawood14012 as a contributor [\#42](https://github.com/zapify-ui/zapify/pull/42) ([allcontributors[bot]](https://github.com/apps/allcontributors)) 38 | - Testing components [\#41](https://github.com/zapify-ui/zapify/pull/41) ([sawood14012](https://github.com/sawood14012)) 39 | - Vinay refactor [\#40](https://github.com/zapify-ui/zapify/pull/40) ([vinaybiradar1717](https://github.com/vinaybiradar1717)) 40 | - media prettier [\#39](https://github.com/zapify-ui/zapify/pull/39) ([piyush97](https://github.com/piyush97)) 41 | 42 | ## [V.0.2.1](https://github.com/zapify-ui/zapify/tree/V.0.2.1) (2019-08-13) 43 | **Implemented enhancements:** 44 | 45 | - Button Component to be made [\#2](https://github.com/zapify-ui/zapify/issues/2) 46 | - Layout Implementation assigned! [\#1](https://github.com/zapify-ui/zapify/issues/1) 47 | - Piyush97 appbar [\#23](https://github.com/zapify-ui/zapify/pull/23) ([piyush97](https://github.com/piyush97)) 48 | - Vinay test [\#15](https://github.com/zapify-ui/zapify/pull/15) ([vinaybiradar1717](https://github.com/vinaybiradar1717)) 49 | - Grid vinay [\#12](https://github.com/zapify-ui/zapify/pull/12) ([vinaybiradar1717](https://github.com/vinaybiradar1717)) 50 | - Box vinaybiradar1717 [\#5](https://github.com/zapify-ui/zapify/pull/5) ([vinaybiradar1717](https://github.com/vinaybiradar1717)) 51 | - Input button piyush97 [\#4](https://github.com/zapify-ui/zapify/pull/4) ([piyush97](https://github.com/piyush97)) 52 | - Input button piyush97 [\#3](https://github.com/zapify-ui/zapify/pull/3) ([piyush97](https://github.com/piyush97)) 53 | 54 | **Closed issues:** 55 | 56 | - Refactor the code with StoryBook and test [\#24](https://github.com/zapify-ui/zapify/issues/24) 57 | 58 | **Merged pull requests:** 59 | 60 | - docs: add vinaybiradar1717 as a contributor [\#37](https://github.com/zapify-ui/zapify/pull/37) ([allcontributors[bot]](https://github.com/apps/allcontributors)) 61 | - docs: add piyush97 as a contributor [\#36](https://github.com/zapify-ui/zapify/pull/36) ([allcontributors[bot]](https://github.com/apps/allcontributors)) 62 | - docs: add is124 as a contributor [\#34](https://github.com/zapify-ui/zapify/pull/34) ([allcontributors[bot]](https://github.com/apps/allcontributors)) 63 | - Readme [\#33](https://github.com/zapify-ui/zapify/pull/33) ([piyush97](https://github.com/piyush97)) 64 | - Refactoring components [\#31](https://github.com/zapify-ui/zapify/pull/31) ([vinaybiradar1717](https://github.com/vinaybiradar1717)) 65 | - DEV [\#30](https://github.com/zapify-ui/zapify/pull/30) ([piyush97](https://github.com/piyush97)) 66 | - Mass media [\#29](https://github.com/zapify-ui/zapify/pull/29) ([piyush97](https://github.com/piyush97)) 67 | - story [\#28](https://github.com/zapify-ui/zapify/pull/28) ([piyush97](https://github.com/piyush97)) 68 | - Boxing box restructured [\#27](https://github.com/zapify-ui/zapify/pull/27) ([vinaybiradar1717](https://github.com/vinaybiradar1717)) 69 | - box restructured [\#26](https://github.com/zapify-ui/zapify/pull/26) ([vinaybiradar1717](https://github.com/vinaybiradar1717)) 70 | - resolved bug fix [\#25](https://github.com/zapify-ui/zapify/pull/25) ([piyush97](https://github.com/piyush97)) 71 | - different boxes [\#22](https://github.com/zapify-ui/zapify/pull/22) ([vinaybiradar1717](https://github.com/vinaybiradar1717)) 72 | - gridspacing modified to functional component [\#21](https://github.com/zapify-ui/zapify/pull/21) ([vinaybiradar1717](https://github.com/vinaybiradar1717)) 73 | - input label modification [\#20](https://github.com/zapify-ui/zapify/pull/20) ([vinaybiradar1717](https://github.com/vinaybiradar1717)) 74 | - Create CODE\_OF\_CONDUCT.md [\#18](https://github.com/zapify-ui/zapify/pull/18) ([piyush97](https://github.com/piyush97)) 75 | - Piyush97 switches [\#17](https://github.com/zapify-ui/zapify/pull/17) ([piyush97](https://github.com/piyush97)) 76 | - Staging [\#16](https://github.com/zapify-ui/zapify/pull/16) ([piyush97](https://github.com/piyush97)) 77 | - Staging [\#14](https://github.com/zapify-ui/zapify/pull/14) ([piyush97](https://github.com/piyush97)) 78 | - Development! [\#10](https://github.com/zapify-ui/zapify/pull/10) ([piyush97](https://github.com/piyush97)) 79 | - Media [\#9](https://github.com/zapify-ui/zapify/pull/9) ([is124](https://github.com/is124)) 80 | - Create README.md [\#7](https://github.com/zapify-ui/zapify/pull/7) ([piyush97](https://github.com/piyush97)) 81 | - Create LICENSE [\#6](https://github.com/zapify-ui/zapify/pull/6) ([piyush97](https://github.com/piyush97)) 82 | 83 | 84 | 85 | \* *This Change Log was automatically generated by [github_changelog_generator](https://github.com/skywinder/Github-Changelog-Generator)* -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to making participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, body 8 | size, disability, ethnicity, sex characteristics, gender identity and expression, 9 | level of experience, education, socio-economic status, nationality, personal 10 | appearance, race, religion, or sexual identity and orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to creating a positive environment 15 | include: 16 | 17 | * Using welcoming and inclusive language 18 | * Being respectful of differing viewpoints and experiences 19 | * Gracefully accepting constructive criticism 20 | * Focusing on what is best for the community 21 | * Showing empathy towards other community members 22 | 23 | Examples of unacceptable behavior by participants include: 24 | 25 | * The use of sexualized language or imagery and unwelcome sexual attention or 26 | advances 27 | * Trolling, insulting/derogatory comments, and personal or political attacks 28 | * Public or private harassment 29 | * Publishing others' private information, such as a physical or electronic 30 | address, without explicit permission 31 | * Other conduct which could reasonably be considered inappropriate in a 32 | professional setting 33 | 34 | ## Our Responsibilities 35 | 36 | Project maintainers are responsible for clarifying the standards of acceptable 37 | behavior and are expected to take appropriate and fair corrective action in 38 | response to any instances of unacceptable behavior. 39 | 40 | Project maintainers have the right and responsibility to remove, edit, or 41 | reject comments, commits, code, wiki edits, issues, and other contributions 42 | that are not aligned to this Code of Conduct, or to ban temporarily or 43 | permanently any contributor for other behaviors that they deem inappropriate, 44 | threatening, offensive, or harmful. 45 | 46 | ## Scope 47 | 48 | This Code of Conduct applies both within project spaces and in public spaces 49 | when an individual is representing the project or its community. Examples of 50 | representing a project or community include using an official project e-mail 51 | address, posting via an official social media account, or acting as an appointed 52 | representative at an online or offline event. Representation of a project may be 53 | further defined and clarified by project maintainers. 54 | 55 | ## Enforcement 56 | 57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 58 | reported by contacting the project team at me@piyushmehta.com. All 59 | complaints will be reviewed and investigated and will result in a response that 60 | is deemed necessary and appropriate to the circumstances. The project team is 61 | obligated to maintain confidentiality with regard to the reporter of an incident. 62 | Further details of specific enforcement policies may be posted separately. 63 | 64 | Project maintainers who do not follow or enforce the Code of Conduct in good 65 | faith may face temporary or permanent repercussions as determined by other 66 | members of the project's leadership. 67 | 68 | ## Attribution 69 | 70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 71 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html 72 | 73 | [homepage]: https://www.contributor-covenant.org 74 | 75 | For answers to common questions about this code of conduct, see 76 | https://www.contributor-covenant.org/faq 77 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to Zapify-ui 2 | Welcome, and thank you for taking the time to contribute to Zapify-ui! 3 | ## Code of Conduct 4 | By participating in this project, you're agreeing to comply with our [CODE_OF_CONDUCT](https://github.com/zapify-ui/zapify/blob/master/CODE_OF_CONDUCT.md) 5 | ## How can I contribute? 6 | There are several ways that you can contribute. We would be tremendously grateful for bug fixes, development of new features as well as early feedback on in-development features, bug reports with repro steps, documentation updates, feature tests, suggestions, and ideas. 7 | ### Reporting Issues 8 | The preferred way of reporting issues, requesting features is to file an issue on our [issue page]. 9 | Before creating an issue, search the existing issue to see if the issue or feature request has already been filed. 10 | A new issue should have: 11 | * A short and clear title 12 | * Description 13 | * Repro steps (if it is a bug) 14 | * Actual (what you get) 15 | * Expected (what is expected) 16 | * Screenshots/gifs if applicable 17 | Feel free to add GitHub labels to the issues. 18 | ### Bug fixes and feature enhancements 19 | Pick an issue and leave a comment that you would like to grab it. After the issue was assigned to you, you're good to start hacking! 20 | #### Setup 21 | 1. Fork the repository on GitHub 22 | 2. Clone your forked repository to your machine: 23 | `git clone https://github.com/zapify-ui/zapify.git` 24 | 3. Change directory to the cloned repository: `cd zapify` 25 | 4. Add a remote: `git remote add upstream https://github.com/zapify-ui/zapify.git` 26 | 5. Create a branch for your patch: `git checkout -b issue-branch-name` 27 | 6. Install dependencies by running `npm install` 28 | 7. Run `npm start` to build and run your local dev environment. 29 | 8. Open http://localhost:9001/ to see the Storybook with the library components. 30 | 31 | #### Code Style 32 | We use ESLint as our JavaScript linter (we recommend to use an ESLint extension in your IDE, so the errors will be highlighted). Before you commit your changes, run prettier to format the code: `npm run prettier`. 33 | 34 | Make your changes, run linter, make sure there is no eslint errors/warnings in your changes. After that push your code to git: 35 | `git push origin issue-branch-name` 36 | 37 | ## Submitting a Pull Request 38 | **All pull requests must be associated with a specific GitHub issue.** 39 | After you have pushed your changes to the forked repository,create a Pull Request on GitHub. Your pull request should follow the following rules: 40 | 1. Your title should have the following format: `Fix #: .` 41 | Example: `Fix #57: Added tests for Textbox component.` 42 | 2. In the description, write about changes you implemented, and don't forget to mention the issue # there. Include screenshots/gifs if applicable. 43 | -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | # base image 2 | FROM node:12.2.0-alpine 3 | 4 | # set working directory 5 | WORKDIR /app 6 | 7 | # add `/app/node_modules/.bin` to $PATH 8 | ENV PATH /app/node_modules/.bin:$PATH 9 | 10 | # install and cache app dependencies 11 | COPY package.json /app/package.json 12 | RUN npm install --silent 13 | RUN npm install react-scripts@3.0.1 -g --silent 14 | 15 | # start app 16 | CMD ["npm", "start"] 17 | -------------------------------------------------------------------------------- /Dockerfile-prod: -------------------------------------------------------------------------------- 1 | # build environment 2 | FROM node:12.2.0-alpine as build 3 | WORKDIR /app 4 | ENV PATH /app/node_modules/.bin:$PATH 5 | COPY package.json /app/package.json 6 | RUN npm install --silent 7 | RUN npm install react-scripts@3.0.1 -g --silent 8 | COPY . /app 9 | RUN npm run build 10 | 11 | # production environment 12 | FROM nginx:1.16.0-alpine 13 | COPY --from=build /app/build /usr/share/nginx/html 14 | EXPOSE 80 15 | CMD ["nginx", "-g", "daemon off;"] -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Zapify 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

a

2 |

🚀 Blazing fast react Ui library with Hooks 🚀

3 | 4 |

Status Badges

5 | 6 | [![Build Status](https://travis-ci.org/zapify-ui/zapify.svg?branch=Staging)](https://travis-ci.org/zapify-ui/zapify) 7 | [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/zapify-ui/zapify/blob/Staging/LICENSE) 8 | [![npm version](https://badge.fury.io/js/zapify-ui.svg)](https://badge.fury.io/js/zapify-ui) 9 | [![Netlify Status](https://api.netlify.com/api/v1/badges/71ceb923-c95d-413d-9519-30c7931fc134/deploy-status)](https://app.netlify.com/sites/zapify/deploys) 10 | ![Dependencies](https://david-dm.org/zapify-ui/zapify.svg) 11 | [![All Contributors](https://img.shields.io/badge/all_contributors-4-orange.svg?style=flat-square)](#contributors) 12 | [![GitHub stars](https://img.shields.io/github/stars/zapify-ui/zapify)](https://github.com/zapify-ui/zapify/stargazers) 13 | [![GitHub forks](https://img.shields.io/github/forks/zapify-ui/zapify)](https://github.com/zapify-ui/zapify/network) 14 | [![Storybook](https://cdn.jsdelivr.net/gh/storybookjs/brand@master/badge/badge-storybook.svg)](https://zapify-ui.github.io/zapify) 15 | [![Maintainability](https://api.codeclimate.com/v1/badges/c42c480d78c0db5ca8e2/maintainability)](https://codeclimate.com/github/zapify-ui/zapify/maintainability) 16 | 17 | ## Installation 18 | ``` npm install zapify-ui``` 19 | 20 | ## Basic Usage 21 | In the following example, you can see how to import ```ZapBar``` component 22 | ### With default Props 23 | 24 | ```jsx 25 | import React from 'react'; 26 | import ReactDOM from 'react-dom'; 27 | import {ZapBar} from 'zapify-ui'; 28 | 29 | ReactDOM.render( 30 | , 31 | document.getElementById('app') 32 | ); 33 | ``` 34 | 35 | ### with custom Props 36 | 37 | ```jsx 38 | import React from 'react'; 39 | import ReactDOM from 'react-dom'; 40 | import {ZapBar} from 'zapify-ui'; 41 | ReactDOM.render( 42 | , 52 | document.getElementById('app') 53 | ); 54 | ``` 55 | 56 | ## Contributing 57 | You are more than welcome to make contributions to the project! See the [CONTRIBUTING.md](https://github.com/zapify-ui/zapify/blob/master/CONTRIBUTING.md). 58 | 59 | ## Contributors ✨ 60 | 61 | Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)): 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 |
Piyush Mehta
Piyush Mehta
💻		Tilak
Tilak
💻 🎨		Vinay Biradar
Vinay Biradar
💻		Meer Sawood
Meer Sawood
📓
73 | 74 | 75 | 76 | ## License 77 | [MIT](http://opensource.org/licenses/MIT) 78 | -------------------------------------------------------------------------------- /TODO.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /__mocks__/fileMock.js: -------------------------------------------------------------------------------- 1 | module.exports = 'test-file-stub'; -------------------------------------------------------------------------------- /__mocks__/styleMock.js: -------------------------------------------------------------------------------- 1 | module.exports = {}; 2 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ["@babel/preset-env", "@babel/preset-react"] 3 | }; 4 | -------------------------------------------------------------------------------- /codecov.yml: -------------------------------------------------------------------------------- 1 | codecov: 2 | notify: 3 | require_ci_to_pass: yes 4 | 5 | coverage: 6 | precision: 2 7 | round: down 8 | range: "70...100" 9 | 10 | status: 11 | project: yes 12 | patch: yes 13 | changes: no 14 | 15 | parsers: 16 | gcov: 17 | branch_detection: 18 | conditional: yes 19 | loop: yes 20 | method: no 21 | macro: no 22 | 23 | comment: 24 | layout: "header, diff" 25 | behavior: default 26 | require_changes: no 27 | -------------------------------------------------------------------------------- /docker-compose.yml: -------------------------------------------------------------------------------- 1 | version: '3.7' 2 | 3 | services: 4 | 5 | zapify: 6 | container_name: zapify 7 | build: 8 | context: . 9 | dockerfile: Dockerfile 10 | volumes: 11 | - '.:/app' 12 | - '/app/node_modules' 13 | ports: 14 | - '3001:3000' 15 | environment: 16 | - NODE_ENV=development -------------------------------------------------------------------------------- /fix.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /fix.md.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zapify-ui/zapify/eae055d87bb3ebd2d5ec4e73368336d8c2c9a0a5/fix.md.txt -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "zapify-ui", 3 | "version": "1.0.5", 4 | "private": false, 5 | "author": "piyush97 ", 6 | "main": "lib/index/index.js", 7 | "husky": { 8 | "hooks": { 9 | "precommit": "NODE_ENV=production lint-staged" 10 | } 11 | }, 12 | "keywords": [ 13 | "react", 14 | "javascript", 15 | "js", 16 | "git", 17 | "github", 18 | "hooks", 19 | "components", 20 | "react-ui", 21 | "zapify", 22 | "zapify-ui" 23 | ], 24 | "scripts": { 25 | "build": "webpack --mode production", 26 | "test": "jest", 27 | "build-css": "node-sass-chokidar src/components/ -o src/components/", 28 | "dev": "webpack --mode development --env.dist=false", 29 | "dev:dist": "webpack --mode development", 30 | "lint": "eslint src/**; exit 0", 31 | "build-storybook": "build-storybook -c src/.storybook", 32 | "deploy-storybook": "storybook-to-ghpages", 33 | "lint:watch": "esw -w lib/**", 34 | "lint-staged": { 35 | "*.{js,jsx}": [ 36 | "pretty-quick --staged", 37 | "eslint src/ --fix", 38 | "git add" 39 | ] 40 | }, 41 | "prepare": "npm run build-css && npm run build", 42 | "prettier": "prettier src/**/*.js src/components/**/*.js --write", 43 | "start": "npm-run-all -p watch-css storybook", 44 | "storybook": "start-storybook -p 9001 -c src/.storybook", 45 | "watch-css": "npm run build-css && node-sass-chokidar src/components/ -o src/components/ --watch --recursive" 46 | }, 47 | "jest": { 48 | "moduleNameMapper": { 49 | "\\.(css|less|sass|scss)$": "/__mocks__/styleMock.js", 50 | "\\.(gif|ttf|eot|svg)$": "identity-obj-proxy" 51 | } 52 | }, 53 | "storybook-deployer": { 54 | "gitUsername": "piyush97", 55 | "gitEmail": "me@piyushmehta.com", 56 | "commitMessage": "Deploy Storybook [skip ci]" 57 | }, 58 | "repository": { 59 | "type": "git", 60 | "url": "git+https://github.com/zapify-ui/zapify" 61 | }, 62 | "license": "MIT", 63 | "dependencies": { 64 | "prop-types": "^15.7.2" 65 | }, 66 | "peerDependencies": { 67 | "react": "^16.8.6", 68 | "react-dom": "^16.8.6" 69 | }, 70 | "devDependencies": { 71 | "@babel/core": "^7.5.5", 72 | "@babel/preset-env": "^7.5.5", 73 | "@babel/preset-react": "^7.0.0", 74 | "@storybook/addon-actions": "^5.1.11", 75 | "@storybook/addon-info": "^5.1.11", 76 | "@storybook/addon-links": "5.1.11", 77 | "@storybook/addon-storysource": "^5.1.11", 78 | "@storybook/react": "5.1.11", 79 | "@storybook/storybook-deployer": "^2.8.1", 80 | "babel-cli": "^6.26.0", 81 | "babel-eslint": "^10.0.1", 82 | "babel-jest": "^24.8.0", 83 | "babel-loader": "^8.0.0-beta.6", 84 | "babel-preset-env": "^1.7.0", 85 | "babel-preset-es2015": "^6.24.1", 86 | "babel-preset-react": "^6.24.1", 87 | "codecov": "^3.5.0", 88 | "css-loader": "^3.2.0", 89 | "eslint": "^6.2.1", 90 | "eslint-config-airbnb": "^17.1.0", 91 | "eslint-config-prettier": "^6.0.0", 92 | "eslint-plugin-import": "^2.18.2", 93 | "eslint-plugin-jsx-a11y": "^6.2.3", 94 | "eslint-plugin-prettier": "^3.1.0", 95 | "eslint-plugin-react": "^7.14.3", 96 | "eslint-watch": "^6.0.0", 97 | "extract-text-webpack-plugin": "^4.0.0-beta.0", 98 | "husky": "3.0.4", 99 | "identity-obj-proxy": "^3.0.0", 100 | "jest": "^24.8.0", 101 | "lint-staged": "^8.1.0", 102 | "mini-css-extract-plugin": "^0.8.0", 103 | "node-sass": "^4.12.0", 104 | "node-sass-chokidar": "^1.3.4", 105 | "npm-run-all": "^4.1.5", 106 | "prettier": "^1.18.2", 107 | "pretty-quick": "^1.11.1", 108 | "prop-types": "^15.7.2", 109 | "react": "^16.9.0", 110 | "react-dom": "^16.9.0", 111 | "react-test-renderer": "^16.9.0", 112 | "sass-loader": "^7.3.1", 113 | "storybook-addon-jsx": "^7.1.5", 114 | "style-loader": "^1.0.0", 115 | "webpack": "^4.39.2", 116 | "webpack-cli": "^3.3.7" 117 | }, 118 | "pre-commit": [ 119 | "lint-fix", 120 | "prettier" 121 | ], 122 | "sideEffects": false 123 | } 124 | -------------------------------------------------------------------------------- /src/.storybook/addons.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */ 2 | 3 | import "@storybook/addon-actions/register"; 4 | import "@storybook/addon-links/register"; 5 | import "storybook-addon-jsx/register"; 6 | import '@storybook/addon-storysource/register'; 7 | -------------------------------------------------------------------------------- /src/.storybook/config.js: -------------------------------------------------------------------------------- 1 | import { addParameters, configure, setAddon } from "@storybook/react"; 2 | import JSXAddon from "storybook-addon-jsx"; 3 | import { themes } from "@storybook/theming"; 4 | import zapify from "./zapify"; 5 | 6 | setAddon(JSXAddon); 7 | const req = require.context("../stories", true, /\.stories\.js$/); 8 | 9 | function loadStories() { 10 | req.keys().forEach(filename => req(filename)); 11 | } 12 | 13 | // Option defaults: 14 | addParameters({ 15 | options: { 16 | name: "Zapify-ui", 17 | title: "Zapify-ui", 18 | theme: zapify 19 | } 20 | }); 21 | 22 | configure(loadStories, module); 23 | -------------------------------------------------------------------------------- /src/.storybook/zapify.js: -------------------------------------------------------------------------------- 1 | import { create } from "@storybook/theming"; 2 | 3 | export default create({ 4 | base: "light", 5 | colorPrimary: "#FF6F61", 6 | colorSecondary: "deepskyblue", 7 | 8 | // Typography 9 | fontBase: '"Open Sans", sans-serif', 10 | fontCode: "monospace", 11 | 12 | brandTitle: "Zapify-ui", 13 | brandUrl: "https://zapify.netlify.com", 14 | brandImage: 15 | "https://lh3.google.com/u/0/d/19wiBbEPkhSiNjDOcIFIqGHEfdeq3Gy1S=w2560-h978-iv1" 16 | }); 17 | -------------------------------------------------------------------------------- /src/components/Box/Box.scss: -------------------------------------------------------------------------------- 1 | .box { 2 | width: 100%; 3 | height: 100vh; 4 | } 5 | -------------------------------------------------------------------------------- /src/components/Box/__snapshots__/box.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`box default test case 1`] = ` 4 |
12 | `; 13 | -------------------------------------------------------------------------------- /src/components/Box/box.test.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import renderer from "react-test-renderer"; 3 | import Box from "./index"; 4 | 5 | test("box default test case", () => { 6 | const component = renderer.create(); 7 | const tree = component.toJSON(); 8 | expect(tree).toMatchSnapshot(); 9 | }); 10 | -------------------------------------------------------------------------------- /src/components/Box/index.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable jsx-a11y/label-has-associated-control */ 2 | /* eslint-disable jsx-a11y/label-has-for */ 3 | /* eslint-disable linebreak-style */ 4 | /* eslint-disable react/destructuring-assignment */ 5 | /* eslint-disable react/button-has-type */ 6 | /* eslint-disable react/prefer-stateless-function */ 7 | import React from "react"; 8 | import Proptypes from "prop-types"; 9 | import { COLORS } from "../../styles/ColorSchema"; 10 | import "./Box.css"; 11 | 12 | function Box(props) { 13 | const { color } = props; 14 | let _style; 15 | if (color === "primary") { 16 | _style = { backgroundColor: COLORS.primary }; 17 | } else { 18 | _style = { backgroundColor: COLORS.primary }; 19 | } 20 | 21 | return
; 22 | } 23 | 24 | Box.defaultProps = { 25 | color: COLORS.primary 26 | }; 27 | 28 | Box.propTypes = { 29 | color: Proptypes.string 30 | }; 31 | 32 | export default Box; 33 | -------------------------------------------------------------------------------- /src/components/Card/Card.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/ColorSchema.scss"; 2 | 3 | 4 | 5 | @mixin commonproperty{ 6 | border-width: 0.1rem; 7 | border-radius: 2.2rem; 8 | border-color: $black; 9 | border-style: solid; 10 | background-color: $blue; 11 | position: absolute; 12 | } 13 | 14 | .container { 15 | position: absolute; 16 | left: 0rem; 17 | top: 0rem; 18 | width: 2rem; 19 | height: 1rem; 20 | z-index: 8; 21 | } 22 | .Button_text { 23 | font-size: 0.8rem; 24 | font-family: $zapFont; 25 | color: $white; 26 | line-height: 1; 27 | text-align: center; 28 | position: absolute; 29 | padding: 1.9rem; 30 | margin-top: -1rem; 31 | height: 1.7rem; 32 | z-index: 7; 33 | } 34 | .button { 35 | @include commonproperty; 36 | top: 22rem; 37 | left: 11.3rem; 38 | width: 8.4rem; 39 | height: 3rem; 40 | z-index: 6; 41 | } 42 | .text { 43 | font-size: 1rem; 44 | font-family: $zapFont; 45 | color: $black; 46 | text-align: left; 47 | position: absolute; 48 | padding: 1.2rem; 49 | z-index: 5; 50 | width: 13rem; 51 | white-space: nowrap; 52 | overflow: hidden; 53 | text-overflow: ellipsis; 54 | } 55 | .Title__text { 56 | font-size: 1.3rem; 57 | font-family: $zapFont; 58 | color: $white; 59 | text-align: center; 60 | position: absolute; 61 | padding: 1rem; 62 | width: 5rem; 63 | height: 9rem; 64 | z-index: 4; 65 | } 66 | .title_rectangle { 67 | @include commonproperty 68 | left: 1rem; 69 | top: 0.01rem; 70 | width: 8.4rem; 71 | height: 3rem; 72 | z-index: 3; 73 | } 74 | .card { 75 | @include commonproperty; 76 | background-color:white; 77 | padding: 1rem; 78 | margin: 1rem; 79 | width: 17rem; 80 | height: 21rem; 81 | z-index: 2; 82 | } 83 | -------------------------------------------------------------------------------- /src/components/Card/index.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable jsx-a11y/label-has-associated-control */ 2 | /* eslint-disable jsx-a11y/label-has-for */ 3 | /* eslint-disable linebreak-style */ 4 | /* eslint-disable react/destructuring-assignment */ 5 | /* eslint-disable react/button-has-type */ 6 | /* eslint-disable react/prefer-stateless-function */ 7 | import React from "react"; 8 | import Proptypes from "prop-types"; 9 | import Typography from "../Typography"; 10 | import "./Card.css"; 11 | 12 | function Card(props) { 13 | const { children, buttonText, titleText } = props; 14 | return ( 15 |
16 |
17 |
18 | {" "} 19 | 20 | {children} 21 | 22 |
23 |
24 |
25 | {" "} 26 |
{titleText}
27 |
28 | 29 |
30 |
{buttonText}
31 |
32 |
33 | ); 34 | } 35 | Card.defaultProps = { 36 | buttonText: "Done", 37 | titleText: "ZapCard", 38 | children: "Contents" 39 | }; 40 | 41 | Card.propTypes = { 42 | buttonText: Proptypes.string, 43 | titleText: Proptypes.string, 44 | children: Proptypes.string 45 | }; 46 | export default Card; 47 | -------------------------------------------------------------------------------- /src/components/Colors/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default function Colors() { 4 | // eslint-disable-next-line no-plusplus 5 | const _colors = [ 6 | "#967adc", 7 | "#967adc", 8 | "#4a89dc", 9 | "#656d78", 10 | "#8cc152", 11 | "#f6bb42", 12 | "#d770ad", 13 | "#967adc", 14 | "#da4453", 15 | "#ffce54", 16 | "#ccd1d9", 17 | "#434a54" 18 | ]; 19 | const _names = [ 20 | "primary", 21 | "lavendar", 22 | "blue", 23 | "gray", 24 | "green", 25 | "orange", 26 | "pink", 27 | "purple", 28 | "red", 29 | "yellow", 30 | "white", 31 | "black" 32 | ]; 33 | const items = []; 34 | for (let i = 0; i < 10; i += 1) { 35 | items.push( 36 |
37 |
51 | {_names[i].toUpperCase()} 52 |
53 |
54 | ); 55 | } 56 | return items; 57 | } 58 | -------------------------------------------------------------------------------- /src/components/Container/Container.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/ColorSchema.scss"; 2 | 3 | .sm{ 4 | background-color: $blue-grad; 5 | height:20vh; 6 | } 7 | .md{ 8 | background-color: $dark-gray-grad; 9 | height:60vh; 10 | } 11 | .xl{ 12 | background-color: $dark-gray-grad; 13 | height: 100vh; 14 | } -------------------------------------------------------------------------------- /src/components/Container/Container.test.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import renderer from "react-test-renderer"; 3 | import Container from "./index"; 4 | 5 | test("Container tests", () => { 6 | const component = renderer.create( ); 7 | const tree = component.toJSON(); 8 | expect(tree).toMatchSnapshot(); 9 | }); 10 | -------------------------------------------------------------------------------- /src/components/Container/__snapshots__/Container.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`Container tests 1`] = ` 4 |
5 |
13 |
14 | `; 15 | -------------------------------------------------------------------------------- /src/components/Container/index.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable jsx-a11y/label-has-associated-control */ 2 | /* eslint-disable jsx-a11y/label-has-for */ 3 | /* eslint-disable linebreak-style */ 4 | /* eslint-disable react/destructuring-assignment */ 5 | /* eslint-disable react/button-has-type */ 6 | /* eslint-disable react/prefer-stateless-function */ 7 | import React from "react"; 8 | import Proptypes from "prop-types"; 9 | 10 | import "./Container.css"; 11 | 12 | function Container(props) { 13 | const { maxWidth, typeName } = props; 14 | 15 | return ( 16 |
17 | {typeName === "fluid" ? ( 18 |
19 | ) : ( 20 |
21 | )} 22 |
23 | ); 24 | } 25 | 26 | Container.propType = { 27 | typeName: Proptypes.string, 28 | maxWidth: Proptypes.string 29 | }; 30 | 31 | export default Container; 32 | -------------------------------------------------------------------------------- /src/components/Grid/Grid.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Roboto&display=swap'); 2 | //body { font-family: 'Roboto', sans-serif; margin-bottom: 5em;} 3 | 4 | 5 | 6 | // Container width 7 | $width: 100%; 8 | 9 | // Array of columns 10 | $cols: ( 11 | "wide": 16, 12 | "base": 12, 13 | "small": 8 14 | ); 15 | 16 | 17 | // Grid container 18 | .grid { 19 | margin: 0 auto; 20 | width: $width; 21 | display: grid; 22 | grid-gap: 1vw; 23 | grid-template-columns: repeat(auto-fill, minmax(21.875rem, 1fr)); 24 | 25 | &:not(last-of-type) { 26 | margin-bottom: 1vw; 27 | } 28 | 29 | @each $col, $i in $cols { 30 | &.grid_#{$i} { 31 | //grid-template-columns: repeat($i, 1fr); 32 | 33 | 34 | .col { 35 | color: white; 36 | padding: .1vw; 37 | //background: gray; 38 | text-align: center; 39 | font-size: 2vw; 40 | &:nth-child(even) { 41 | //background: blueviolet; 42 | } 43 | 44 | @for $col from 1 through $i { 45 | &.col-#{$col} { 46 | grid-column: span #{$col} 47 | } 48 | } 49 | } 50 | } 51 | } 52 | } 53 | 54 | @media only screen 55 | and (min-width : 48rem) 56 | and (max-width : 160rem) { 57 | .grid { 58 | margin: 0 auto; 59 | width: $width; 60 | display: grid; 61 | grid-gap: 1vw; 62 | grid-template-columns: repeat(auto-fill, minmax(21.875rem, 1fr)); 63 | 64 | &:not(last-of-type) { 65 | margin-bottom: 1vw; 66 | } 67 | 68 | @each $col, $i in $cols { 69 | &.grid_#{$i} { 70 | grid-template-columns: repeat($i, 1fr); 71 | 72 | .col { 73 | color: white; 74 | padding: .1vw; 75 | //background: gray; 76 | text-align: center; 77 | font-size: 2vw; 78 | &:nth-child(even) { 79 | //background: blueviolet; 80 | } 81 | 82 | @for $col from 1 through $i { 83 | &.col-#{$col} { 84 | grid-column: span #{$col} 85 | } 86 | } 87 | } 88 | } 89 | } 90 | } 91 | 92 | } 93 | -------------------------------------------------------------------------------- /src/components/Grid/index.js: -------------------------------------------------------------------------------- 1 | import Proptypes from "prop-types"; 2 | import React from "react"; 3 | import "./Grid.css"; 4 | // eslint-disable-next-line import/imports-first 5 | /* eslint-disable react/destructuring-assignment */ 6 | /* eslint-disable react/button-has-type */ 7 | /* eslint-disable react/prefer-stateless-function */ 8 | 9 | function Grid(props) { 10 | return ( 11 |
12 |
{props.children}
13 |
14 | ); 15 | } 16 | 17 | Grid.propType = { 18 | type: Proptypes.string 19 | }; 20 | export default Grid; 21 | -------------------------------------------------------------------------------- /src/components/InfoCard/InfoCard.scss: -------------------------------------------------------------------------------- 1 | @mixin commonprop{ 2 | background-repeat: no-repeat; 3 | background-position: right; 4 | background-size: 5rem; 5 | display:inline-block; 6 | } 7 | 8 | 9 | 10 | .icard{ 11 | display:inline-block; 12 | width: 80%; 13 | border-radius: 0.25rem; 14 | background: #fff; 15 | box-shadow: 0 0.375rem 0.625rem rgba(0,0,0,.08), 0 0 0.375rem rgba(0,0,0,.05); 16 | transition: .3s transform cubic-bezier(.155,1.105,.295,1.12),.3s box-shadow,.3s -webkit-transform cubic-bezier(.155,1.105,.295,1.12); 17 | padding: 0.875rem 5rem 1.125rem 2.25rem; 18 | cursor: pointer; 19 | } 20 | 21 | .icard:hover{ 22 | transform: scale(1.05); 23 | box-shadow: 0 0.625rem 1.25rem rgba(0,0,0,.12), 0 0.25rem 0.5rem rgba(0,0,0,.06); 24 | } 25 | 26 | .icard h3{ 27 | font-weight: 600; 28 | color: black; 29 | } 30 | 31 | .icard p{ 32 | color:black; 33 | } 34 | 35 | .icard img{ 36 | position: absolute; 37 | top: 1.25rem; 38 | right: 0.94rem; 39 | max-height: 7.5rem; 40 | } 41 | 42 | 43 | 44 | .icard-1{ 45 | background-image: url(https://ionicframework.com/img/getting-started/ionic-native-card.png); 46 | @include commonprop; 47 | } 48 | 49 | .icard-2{ 50 | background-image: url(https://ionicframework.com/img/getting-started/components-card.png); 51 | @include commonprop; 52 | } 53 | 54 | .icard-3{ 55 | background-image: url(https://ionicframework.com/img/getting-started/theming-card.png); 56 | @include commonprop; 57 | } 58 | 59 | @media(max-width: 61.87rem){ 60 | .icard{ 61 | margin: 1.25rem; 62 | } 63 | } -------------------------------------------------------------------------------- /src/components/InfoCard/index.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable jsx-a11y/label-has-associated-control */ 2 | /* eslint-disable jsx-a11y/label-has-for */ 3 | /* eslint-disable linebreak-style */ 4 | /* eslint-disable react/destructuring-assignment */ 5 | /* eslint-disable react/button-has-type */ 6 | /* eslint-disable react/prefer-stateless-function */ 7 | import React from "react"; 8 | import "./InfoCard.css"; 9 | 10 | function InfoCard(props) { 11 | return ( 12 |
13 |

Title

14 |

15 | Sed ut perspiciatis unde omnis iste natus error sit voluptatem 16 | accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab 17 | illo inventore veritatis et quasi architecto beatae vitae dicta sunt 18 | explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut 19 | odit aut fugit, sed quia consequuntur magni dolores eos qui ratione 20 | voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum 21 | quia dolor sit amet, 22 |

23 |
24 | ); 25 | } 26 | 27 | export default InfoCard; 28 | -------------------------------------------------------------------------------- /src/components/Media/Media.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/ColorSchema.scss"; 2 | 3 | .Media { 4 | display: flex; 5 | color: #000; 6 | } 7 | 8 | .Media p { 9 | line-height: 1.375rem; 10 | } 11 | 12 | .Media h1 { 13 | margin: 1em 0 0.5em 0; 14 | color: #4d0000; 15 | font-weight: normal; 16 | font-family: 'Ultra', sans-serif; 17 | font-size: 2.25rem; 18 | line-height: 2.62rem; 19 | text-transform: uppercase; 20 | text-decoration-line: underline; 21 | text-shadow: 0.06rem 0.125rem white, 0.125rem 0.125rem yellowgreen; 22 | } 23 | 24 | .Media img { 25 | height: 10rem; 26 | width: 10rem; 27 | margin: 0 1rem; 28 | transition: .3s ease-in-out; 29 | } 30 | 31 | .Media img:hover { 32 | transform: scale(1.3); 33 | } 34 | 35 | 36 | .mediaNested, .mediaLinear { 37 | margin: 3rem 7rem; 38 | padding: 2rem; 39 | border: 1px solid teal; 40 | background: #fff; 41 | padding: 1.87rem; 42 | position: relative; 43 | } 44 | 45 | .mediaNested, .mediaLinear, 46 | .mediaLinear::before, 47 | .mediaLinear::after, 48 | .mediaNested::before, 49 | .mediaNested::after { 50 | /* Styles to distinguish sheets from one another */ 51 | box-shadow: 0.0625rem 0.0625rem 0.0625rem rgba(0,0,0,0.25); 52 | border: 0.0625rem solid #bbb; 53 | } 54 | 55 | .mediaLinear::before, 56 | .mediaLinear::after, 57 | .mediaNested::before, 58 | .mediaNested::after { 59 | content: ""; 60 | position: absolute; 61 | height: 95%; 62 | width: 99%; 63 | background-color: #eee; 64 | } 65 | 66 | 67 | .mediaLinear::before, 68 | .mediaNested::before { 69 | right: 0.94rem; 70 | top: 0; 71 | transform: rotate(-1deg); 72 | z-index: -1; 73 | } 74 | 75 | .mediaLinear::after, 76 | .mediaNested::after { 77 | top: 0.31rem; 78 | right: -0.31rem; 79 | transform: rotate(1deg); 80 | z-index: -2; 81 | } -------------------------------------------------------------------------------- /src/components/Media/Media.test.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import renderer from "react-test-renderer"; 3 | import Media from "./index"; 4 | 5 | test("Media default test case", () => { 6 | const component = renderer.create( 7 | 8 | Lorem Ipsum is simply dummy text of the printing and typesetting industry. 9 | Lorem Ipsum has been the industry's standard dummy. 10 | 11 | ); 12 | const tree = component.toJSON(); 13 | expect(tree).toMatchSnapshot(); 14 | }); 15 | -------------------------------------------------------------------------------- /src/components/Media/__snapshots__/Media.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`Media default test case 1`] = ` 4 |
5 |
8 |
11 |
12 | Generic placeholder 15 |
16 |
17 |

18 | Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy. 19 |

20 |
21 |
22 |
23 |
24 | `; 25 | -------------------------------------------------------------------------------- /src/components/Media/index.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/no-access-state-in-setstate */ 2 | /* eslint-disable react/destructuring-assignment */ 3 | /* eslint-disable jsx-a11y/click-events-have-key-events */ 4 | /* eslint-disable jsx-a11y/no-static-element-interactions */ 5 | /* eslint-disable jsx-a11y/label-has-associated-control */ 6 | /* eslint-disable jsx-a11y/label-has-for */ 7 | import React from "react"; 8 | import Proptypes from "prop-types"; 9 | import "./Media.css"; 10 | 11 | function Media(props) { 12 | const { typeGet, image } = props; 13 | const content = props.children; 14 | return ( 15 |
16 | 17 |
18 | ); 19 | } 20 | 21 | function Rendering({ typeGet, content, image }) { 22 | if (typeGet === "linear") { 23 | return ; 24 | } 25 | if (typeGet === "nested") { 26 | return ; 27 | } 28 | } 29 | 30 | const Linear = ({ content, image }) => { 31 | return ( 32 |
33 |
34 |
35 | Generic placeholder 36 |
37 |
38 |

{content}

39 |
40 |
41 |
42 | ); 43 | }; 44 | 45 | const Nested = ({ props, image }) => { 46 | return ( 47 |
48 |
49 |
50 | Generic placeholder 51 |
52 |
53 |

{props.children}

54 |
55 |
56 |
57 | ); 58 | }; 59 | 60 | Media.propType = { 61 | typeGet: Proptypes.oneOf(["linear", "nested"]), 62 | image: Proptypes.string 63 | }; 64 | 65 | export default Media; 66 | -------------------------------------------------------------------------------- /src/components/Switch/Switch.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/ColorSchema.scss"; 2 | 3 | .ToggleSwitch { 4 | position: relative; 5 | width: 5rem; 6 | height: 2.35rem; 7 | display: inline-block; 8 | 9 | &.ToggleSwitch__rounded { 10 | .Slider { 11 | border-radius: 15rem; 12 | background: $white; 13 | border: 1px solid $gray; 14 | &:before { 15 | border-radius: 50%; 16 | } 17 | } 18 | } 19 | 20 | .ToggleSwitch__wrapper { 21 | position: relative; 22 | width: 5rem; 23 | height: 2.35rem; 24 | .Slider { 25 | position: absolute; 26 | cursor: pointer; 27 | top: 0; 28 | left: 0; 29 | right: 0; 30 | bottom: 0; 31 | transition: 0.4s ease; 32 | &:before { 33 | width: 2.45rem; 34 | height: 2.45rem; 35 | position: absolute; 36 | background: $white; 37 | content: ""; 38 | margin: 0; 39 | padding: 0; 40 | top: 50%; 41 | left: 0.1rem; 42 | transform: translateY(-50%); 43 | transition: 0.4s; 44 | cursor: pointer; 45 | box-shadow: 0 0.19rem 0.375rem rgba(0, 0, 0, 0.16), 0 0.19rem 0.375rem rgba(0, 0, 0, 0.23); 46 | } 47 | 48 | &.isChecked { 49 | background: $white; 50 | 51 | &:before { 52 | left: calc(100% - 0.1rem - 2.45rem); 53 | background: $primary; 54 | } 55 | } 56 | } 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /src/components/Switch/index.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/no-access-state-in-setstate */ 2 | /* eslint-disable react/destructuring-assignment */ 3 | /* eslint-disable jsx-a11y/click-events-have-key-events */ 4 | /* eslint-disable jsx-a11y/no-static-element-interactions */ 5 | /* eslint-disable jsx-a11y/label-has-associated-control */ 6 | /* eslint-disable jsx-a11y/label-has-for */ 7 | import React from "react"; 8 | import "./Switch.css"; 9 | 10 | class Switch extends React.Component { 11 | constructor() { 12 | super(); 13 | 14 | this.state = { 15 | checked: false 16 | }; 17 | 18 | this.onToggleSwitchChange = this.onToggleSwitchChange.bind(this); 19 | } 20 | 21 | onToggleSwitchChange() { 22 | this.setState({ 23 | checked: !this.state.checked 24 | }); 25 | } 26 | 27 | render() { 28 | return ( 29 |
30 |
31 |
35 |
36 |
37 | ); 38 | } 39 | } 40 | 41 | export default Switch; 42 | -------------------------------------------------------------------------------- /src/components/TextField/TextField.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/ColorSchema.scss"; 2 | 3 | input { 4 | display: inline-block; 5 | font-family: $zapFont; 6 | -webkit-box-sizing: content-box; 7 | -moz-box-sizing: content-box; 8 | box-sizing: content-box; 9 | padding: 1.25rem 1.25rem 1.25rem 1.25rem; 10 | border: 0.625rem solid; 11 | -webkit-border-radius: 0.19rem; 12 | border-radius: 0.19rem; 13 | font-size: 1rem; 14 | -o-text-overflow: clip; 15 | text-overflow: clip; 16 | background: rgba(252, 252, 252, 1); 17 | -webkit-box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.2) inset; 18 | box-shadow: 0.125rem 0.125rem 0.125rem 0 rgba(0, 0, 0, 0.2) inset; 19 | outline: none; 20 | } 21 | ::placeholder { 22 | color: black; 23 | } 24 | 25 | label { 26 | font-weight: 800; 27 | text-align: left; 28 | font-family: $zapFont; 29 | font-size: 0.78rem; 30 | padding-left: 0rem; 31 | padding-bottom: 0.125rem; 32 | display: block; 33 | } 34 | -------------------------------------------------------------------------------- /src/components/TextField/TextField.test.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import renderer from "react-test-renderer"; 3 | import TextField from "./index"; 4 | 5 | test("Container tests", () => { 6 | const component = renderer.create( 7 | 12 | Input Hook with custom placeholder 13 | 14 | ); 15 | 16 | const tree = component.toJSON(); 17 | expect(tree).toMatchSnapshot(); 18 | }); 19 | -------------------------------------------------------------------------------- /src/components/TextField/__snapshots__/TextField.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`Container tests 1`] = ` 4 |
5 | 19 | 20 | 29 |
30 | `; 31 | -------------------------------------------------------------------------------- /src/components/TextField/index.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable jsx-a11y/label-has-associated-control */ 2 | /* eslint-disable jsx-a11y/label-has-for */ 3 | /* eslint-disable linebreak-style */ 4 | /* eslint-disable react/destructuring-assignment */ 5 | /* eslint-disable react/button-has-type */ 6 | /* eslint-disable react/prefer-stateless-function */ 7 | import React, { useState } from "react"; 8 | import "./TextField.css"; 9 | 10 | function TextField(props) { 11 | const [input, setInput] = useState(""); 12 | const styles = { color: props.color }; 13 | const styleForInput = { 14 | backgroundColor: props.backgroundColor, 15 | color: props.color 16 | }; 17 | const handleChange = e => { 18 | e.preventDefault(); 19 | setInput(e.target.value); 20 | }; 21 | const { placeholderText } = props; 22 | return ( 23 |
24 | {" "} 33 | 34 |
35 | ); 36 | } 37 | 38 | export default TextField; 39 | -------------------------------------------------------------------------------- /src/components/Typography/Typography.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/ColorSchema.scss"; 2 | 3 | .typography { 4 | font-family: $zapFont, sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /src/components/Typography/Typography.test.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import renderer from "react-test-renderer"; 3 | import Typography from "./index"; 4 | 5 | test("Container tests", () => { 6 | const component = renderer.create( 7 | Zapify Ui Text 8 | ); 9 | 10 | const tree = component.toJSON(); 11 | expect(tree).toMatchSnapshot(); 12 | }); 13 | -------------------------------------------------------------------------------- /src/components/Typography/__snapshots__/Typography.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`Container tests 1`] = ` 4 |
12 | Zapify Ui Text 13 |
14 | `; 15 | -------------------------------------------------------------------------------- /src/components/Typography/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import PropTypes from "prop-types"; 3 | import "./Typography.css"; 4 | 5 | function Typography(props) { 6 | const { variant, children, color } = props; 7 | const _styles = { color }; 8 | switch (variant) { 9 | case "h1": 10 | return ( 11 |

12 | {children} 13 |

14 | ); 15 | case "h2": 16 | return ( 17 |

18 | {children} 19 |

20 | ); 21 | case "h3": 22 | return ( 23 |

24 | {children} 25 |

26 | ); 27 | case "h4": 28 | return ( 29 |

30 | {children} 31 |

32 | ); 33 | case "h5": 34 | return ( 35 |
36 | {children} 37 |
38 | ); 39 | default: 40 | return ( 41 |

42 | {children} 43 |

44 | ); 45 | } 46 | } 47 | Typography.propTypes = { 48 | variant: PropTypes.string, 49 | children: PropTypes.string, 50 | color: PropTypes.string 51 | }; 52 | 53 | Typography.defaultProps = { 54 | variant: "h5", 55 | children: "Zapify Ui Text", 56 | color: "#111" 57 | }; 58 | export default Typography; 59 | -------------------------------------------------------------------------------- /src/components/ZapBar/ZapBar.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/ColorSchema"; 2 | nav { 3 | overflow: hidden; 4 | position: fixed; 5 | top: 0; 6 | width: 100%; 7 | #logo { 8 | font-size: 1.2em; 9 | font-family: $zapFont; 10 | font-weight: bold; 11 | } 12 | ul { 13 | text-align: left; 14 | font-family: $zapFont; 15 | 16 | list-style-type: none; 17 | list-style-type: none; 18 | margin: 0; 19 | padding: 0.94rem; 20 | li { 21 | display: inline; 22 | font-family: $zapFont; 23 | font-size: 1.06; 24 | 25 | a { 26 | color: #f2f2f2; 27 | text-decoration: none; 28 | } 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/components/ZapBar/ZapBar.test.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import renderer from "react-test-renderer"; 3 | import ZapBar from "./index"; 4 | 5 | test("Container tests", () => { 6 | const component = renderer.create( 7 | 25 | ); 26 | const tree = component.toJSON(); 27 | expect(tree).toMatchSnapshot(); 28 | }); 29 | -------------------------------------------------------------------------------- /src/components/ZapBar/__snapshots__/ZapBar.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`Container tests 1`] = ` 4 | 82 | `; 83 | -------------------------------------------------------------------------------- /src/components/ZapBar/index.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-plusplus */ 2 | /* eslint-disable jsx-a11y/anchor-is-valid */ 3 | import React from "react"; 4 | import PropTypes from "prop-types"; 5 | import "./ZapBar.css"; 6 | 7 | function ZapBar(props) { 8 | const { 9 | title, 10 | links, 11 | logoImage, 12 | color, 13 | linkColor, 14 | logoColor, 15 | logoSize 16 | } = props; 17 | const appBarBackground = { 18 | backgroundColor: color 19 | }; 20 | 21 | const _styles = { 22 | height: "3em", 23 | margin: logoSize 24 | }; 25 | 26 | const _logoColor = { 27 | color: logoColor 28 | }; 29 | 30 | const _linkList = links.map(({ name, url }) => ( 31 |
  • 36 | 37 | {name} 38 | 39 |
    • 40 | )); 41 | return ( 42 | 56 | ); 57 | } 58 | 59 | ZapBar.propTypes = { 60 | title: PropTypes.string, 61 | links: PropTypes.arrayOf(PropTypes.object), 62 | color: PropTypes.string, 63 | linkColor: PropTypes.string, 64 | logoColor: PropTypes.string, 65 | logoImage: PropTypes.string, 66 | logoSize: PropTypes.string 67 | }; 68 | 69 | ZapBar.defaultProps = { 70 | title: "Zapify UI", 71 | links: [ 72 | { name: "Rebooting", url: "https://zapify.netlify.com" }, 73 | { name: "UI With Hooks", url: "https://zapify.netlify.com" } 74 | ], 75 | color: "#222", 76 | linkColor: "grey", 77 | logoColor: "grey", 78 | logoImage: 79 | "https://camo.githubusercontent.com/56702c11ebd0c8817ee8d95b1e45022b97083b8a/68747470733a2f2f692e6962622e636f2f5832334e4877362f612e706e67", 80 | logoSize: "-2em 0em -0.8em 0.2em" 81 | }; 82 | 83 | export default ZapBar; 84 | -------------------------------------------------------------------------------- /src/components/ZapButton/ZapButton.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/ColorSchema.scss"; 2 | 3 | 4 | .paperButton { 5 | color: black; 6 | background-color: white; 7 | width: 13rem; 8 | height: 2.5rem; 9 | position: relative; 10 | overflow: hidden; 11 | outline:none; 12 | border: 1px solid white; 13 | transform: translate3d(0, 0, 0); 14 | box-shadow: 0rem 0.625rem 0.625rem 0rem rgba(21, 22, 22, 0.4); 15 | } 16 | 17 | .funkgradientButton1 { 18 | background: $blue-grad; 19 | border: 1px solid $blue; 20 | } 21 | 22 | .funkgradientButton2 { 23 | background: $dark-gray-grad; 24 | border: 1px solid $black; 25 | } 26 | 27 | .funkgradientButton3 { 28 | background: $green-grad; 29 | border: 1px solid $green; 30 | } 31 | 32 | .funkgradientButton4 { 33 | background: $orange-grad; 34 | border: 1px solid $orange; 35 | } 36 | 37 | .funkgradientButton5 { 38 | background: $purple-grad; 39 | border: 1px solid $purple; 40 | } 41 | 42 | .funkgradientButton6 { 43 | background: $red-grad; 44 | border: 1px solid $red; 45 | } 46 | 47 | 48 | 49 | 50 | .funkgradientButton1, 51 | .funkgradientButton2, 52 | .funkgradientButton3, 53 | .funkgradientButton4, 54 | .funkgradientButton5, 55 | .funkgradientButton6 { 56 | color: white; 57 | width: 13rem; 58 | height: 2.5rem; 59 | outline: none; 60 | position: relative; 61 | overflow: hidden; 62 | transform: translate3d(0, 0, 0); 63 | box-shadow: 0rem 0.625rem 0.625rem 0rem rgba(21, 22, 22, 0.4); 64 | } 65 | 66 | .paperButton:after, 67 | .funkgradientButton1:after, 68 | .funkgradientButton2:after, 69 | .funkgradientButton3:after, 70 | .funkgradientButton4:after, 71 | .funkgradientButton5:after, 72 | .funkgradientButton6:after{ 73 | content: ""; 74 | display: block; 75 | position: absolute; 76 | width: 100%; 77 | height: 100%; 78 | top: 0; 79 | left: 0; 80 | pointer-events: none; 81 | background-image: radial-gradient(circle, #ccd1d9 10%, transparent 10.01%); 82 | background-repeat: no-repeat; 83 | background-position: 50%; 84 | transform: scale(10, 10); 85 | opacity: 0; 86 | transition: transform 0.5s, opacity 1s; 87 | } 88 | 89 | .paperButton:active:after, 90 | .funkgradientButton1:active:after, 91 | .funkgradientButton2:active:after, 92 | .funkgradientButton3:active:after, 93 | .funkgradientButton4:active:after, 94 | .funkgradientButton5:active:after, 95 | .funkgradientButton6:active:after{ 96 | transform: scale(0, 0); 97 | opacity: 0.3; 98 | transition: 0s; 99 | } 100 | 101 | 102 | 103 | .blackBorderButton{ 104 | border: 0.06rem solid #2d3436; 105 | color: #2d3436; 106 | }.blackBorderButton:hover{ 107 | background-color: #2d3436; 108 | } 109 | 110 | 111 | .orangeBorderButton{ 112 | border: 0.06rem solid $orange; 113 | color: $orange; 114 | }.orangeBorderButton:hover{ 115 | background-color: $orange; 116 | } 117 | 118 | .purpleBorderButton{ 119 | border: 0.06rem solid $purple; 120 | color: $purple; 121 | }.purpleBorderButton:hover{ 122 | background-color: $purple; 123 | } 124 | 125 | .blueBorderButton{ 126 | border: 0.06rem solid $blue; 127 | color: $blue; 128 | }.blueBorderButton:hover{ 129 | background-color: $blue; 130 | } 131 | 132 | .yellowBorderButton{ 133 | border: 0.06rem solid $yellow; 134 | color: $yellow; 135 | }.yellowBorderButton:hover{ 136 | background-color: $yellow; 137 | } 138 | 139 | .redBorderButton{ 140 | border: 0.06rem solid $red; 141 | color: $red; 142 | }.redBorderButton:hover{ 143 | background-color: $red; 144 | } 145 | 146 | .blackBorderButton, 147 | .orangeBorderButton, 148 | .purpleBorderButton, 149 | .blueBorderButton, 150 | .yellowBorderButton, 151 | .redBorderButton { 152 | display: inline-block; 153 | margin: 0.2rem 0.1rem; 154 | padding: 0.7rem 1.2rem; 155 | width: 12.5rem; 156 | border-radius: 0.625rem; 157 | background-color: transparent; 158 | transition: all ease .3s; 159 | font-size: 1.1rem; 160 | } 161 | .blackBorderButton:hover, 162 | .orangeBorderButton:hover, 163 | .purpleBorderButton:hover, 164 | .blueBorderButton:hover, 165 | .yellowBorderButton:hover, 166 | .redBorderButton:hover{ 167 | cursor: pointer; 168 | color: white; 169 | } -------------------------------------------------------------------------------- /src/components/ZapButton/index.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/destructuring-assignment */ 2 | /* eslint-disable react/button-has-type */ 3 | /* eslint-disable react/prefer-stateless-function */ 4 | import React from "react"; 5 | import Proptypes from "prop-types"; 6 | import "./ZapButton.css"; 7 | 8 | function ZapButton(props) { 9 | const { variant } = props; 10 | const _styles = { 11 | margin: "15px" 12 | }; 13 | return ( 14 |
    15 | 18 |
    19 | ); 20 | } 21 | 22 | ZapButton.propType = { 23 | variant: Proptypes.string 24 | }; 25 | 26 | ZapButton.defaultProps = { 27 | variant: "paperButton" 28 | }; 29 | export default ZapButton; 30 | -------------------------------------------------------------------------------- /src/components/index.js: -------------------------------------------------------------------------------- 1 | // eslint-disable-next-line import/prefer-default-export 2 | export { default as Box } from "./Box"; 3 | export { default as Typography } from "./Typography"; 4 | export { default as TextField } from "./TextField"; 5 | export { default as Container } from "./Container"; 6 | export { default as Grid } from "./Grid"; 7 | export { default as Media } from "./Media"; 8 | export { default as Switch } from "./Switch"; 9 | export { default as ZapBar } from "./ZapBar"; 10 | export { default as Colors } from "./Colors"; 11 | export { default as ZapButton } from "./ZapButton"; 12 | export { default as Card } from "./Card"; 13 | -------------------------------------------------------------------------------- /src/stories/box.stories.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-extraneous-dependencies */ 2 | 3 | import React from "react"; 4 | import { storiesOf } from "@storybook/react"; 5 | import Box from "../components/Box"; 6 | import Typography from "../components/Typography"; 7 | 8 | storiesOf("Box", module) 9 | .addWithJSX("With Default Props", () => ( 10 |
    11 |
    12 | 13 | Default Props 14 | 15 |
    {" "} 16 | 17 |
    18 | )) 19 | .addWithJSX("color primary", () => ( 20 |
    21 |
    22 | color primary 23 |
    {" "} 24 | 25 |
    26 | )); 27 | -------------------------------------------------------------------------------- /src/stories/card.stories.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-extraneous-dependencies */ 2 | 3 | import React from "react"; 4 | import { storiesOf } from "@storybook/react"; 5 | import Card from "../components/Card"; 6 | 7 | storiesOf("Card", module) 8 | .addWithJSX("Card with default Props", () => ) 9 | .addWithJSX("Card with custom props", () => ( 10 | 11 | Contents will be here! 12 | 13 | )); 14 | -------------------------------------------------------------------------------- /src/stories/colors.stories.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-extraneous-dependencies */ 2 | 3 | import React from "react"; 4 | import { storiesOf } from "@storybook/react"; 5 | import Colors from "../components/Colors"; 6 | import { Typography } from "../components"; 7 | 8 | storiesOf("Colors", module).addWithJSX("Color and Gradient Pallete", () => ( 9 |
    10 | 11 | Colors 12 | {" "} 13 | 14 |
    15 | )); 16 | -------------------------------------------------------------------------------- /src/stories/components.stories.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-extraneous-dependencies */ 2 | 3 | import React from "react"; 4 | import { storiesOf } from "@storybook/react"; 5 | 6 | storiesOf("Components", module) 7 | .addWithJSX("All", () => ( 8 |
    9 |

    All Components

    10 |
    11 | )) 12 | .addWithJSX("Default theme", () => ( 13 |
    14 |

    Default theme

    15 |
    16 | )); 17 | -------------------------------------------------------------------------------- /src/stories/container.stories.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-extraneous-dependencies */ 2 | 3 | import React from "react"; 4 | import { storiesOf } from "@storybook/react"; 5 | import Container from "../components/Container"; 6 | 7 | storiesOf("Container", module).add("fluid", () => ( 8 |
    9 | {" "} 10 | 11 | {" "} 12 | 13 | 14 | {" "} 15 | 16 | 17 | {" "} 18 | 19 |
    20 | )); 21 | -------------------------------------------------------------------------------- /src/stories/grid.stories.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-extraneous-dependencies */ 2 | 3 | import React from "react"; 4 | import { storiesOf } from "@storybook/react"; 5 | import Grid from "../components/Grid"; 6 | import InfoCard from "../components/InfoCard/index"; 7 | import Box from "../components/Box"; 8 | 9 | function calculategrid(numrows, text, columns) { 10 | // eslint-disable-next-line no-plusplus 11 | const items = []; 12 | for (let i = 0; i < numrows; i++) { 13 | items.push( 14 |
    15 | 16 | {" "} 17 | {text} 18 | 19 |
    20 | ); 21 | } 22 | return items; 23 | } 24 | 25 | storiesOf("Grid", module) 26 | .addWithJSX("Grid with 16 Columns ", () => ( 27 |
    28 | {calculategrid(16, "01", "col col-1")} 29 | 30 | {calculategrid(8, "02", "col col-2")} 31 | {calculategrid(4, "04", "col col-4")} 32 | {calculategrid(2, "08", "col col-8")} 33 | {calculategrid(1, "16", "col col-16")} 34 |
    35 | )) 36 | .addWithJSX("Grid with 12 Columns", () => ( 37 |
    38 | {calculategrid(12, "01", "col col-1")} 39 | {calculategrid(6, "02", "col col-2")} 40 | {calculategrid(4, "03", "col col-3")} 41 | 42 | {calculategrid(2, "06", "col col-6")} 43 | {calculategrid(1, "12", "col col-12")} 44 | 45 | {calculategrid(1, "09", "col col-9")} 46 | {calculategrid(1, "03", "col col-3")} 47 | 48 |
    49 | )) 50 | .addWithJSX("Grid with 8 Columns", () => ( 51 |
    52 | {calculategrid(8, "01", "col col-1")} 53 | {calculategrid(4, "02", "col col-2")} 54 | {calculategrid(2, "04", "col col-4")} 55 | {calculategrid(1, "08", "col col-8")} 56 |
    57 | )) 58 | .addWithJSX("Grid with Card", () => ( 59 |
    60 | 61 |
    62 | 63 |
    64 |
    65 | 66 |
    67 |     68 |
    69 | )); 70 | -------------------------------------------------------------------------------- /src/stories/infocard.stories.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-extraneous-dependencies */ 2 | 3 | import React from "react"; 4 | import { storiesOf } from "@storybook/react"; 5 | import InfoCard from "../components/InfoCard"; 6 | 7 | storiesOf("InfoCard", module).addWithJSX("InfoCard", () => ); 8 | -------------------------------------------------------------------------------- /src/stories/media.stories.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-extraneous-dependencies */ 2 | 3 | import React from "react"; 4 | import { storiesOf } from "@storybook/react"; 5 | import Media from "../components/Media"; 6 | 7 | storiesOf("Media", module).addWithJSX("with h1", () => ( 8 |
    9 | 14 | hello 15 | 16 |
    17 | )); 18 | -------------------------------------------------------------------------------- /src/stories/switch.stories.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-extraneous-dependencies */ 2 | 3 | import React from "react"; 4 | import { storiesOf } from "@storybook/react"; 5 | import Switch from "../components/Switch"; 6 | 7 | storiesOf("Switch", module).add("default", () => On); 8 | -------------------------------------------------------------------------------- /src/stories/textfield.stories.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-extraneous-dependencies */ 2 | 3 | import React from "react"; 4 | import { storiesOf, addDecorator } from "@storybook/react"; 5 | import TextField from "../components/TextField"; 6 | 7 | storiesOf("TextField", module) 8 | .addWithJSX("Input Hook with custom placeholder", () => ( 9 | 10 | Input Hook with custom placeholder 11 | 12 | )) 13 | .addWithJSX("Input Hook with custom color", () => ( 14 | 15 | Input Hook with custom placeholder 16 | 17 | )) 18 | .addWithJSX("Input Hook with custom backgroundColor", () => ( 19 | 24 | Input Hook with custom placeholder 25 | 26 | )); 27 | -------------------------------------------------------------------------------- /src/stories/typography.stories.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-extraneous-dependencies */ 2 | 3 | import React from "react"; 4 | import { storiesOf } from "@storybook/react"; 5 | import Typography from "../components/Typography"; 6 | 7 | storiesOf("Typography", module) 8 | .addWithJSX("with default Props", () => ( 9 | With Default Props 10 | )) 11 | .addWithJSX("with h1", () => with h1) 12 | .addWithJSX("with h2", () => with h2) 13 | .addWithJSX("with h3", () => with h3) 14 | .addWithJSX("with h4", () => with h4) 15 | .addWithJSX("with h5", () => with h5) 16 | .addWithJSX("with custom color", () => ( 17 | 18 | with h2 and custom color prop 19 | 20 | )); 21 | -------------------------------------------------------------------------------- /src/stories/zapbar.stories.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-extraneous-dependencies */ 2 | 3 | import React from "react"; 4 | import { storiesOf, addDecorator } from "@storybook/react"; 5 | 6 | import ZapBar from "../components/ZapBar"; 7 | 8 | storiesOf("ZapBar", module) 9 | .addWithJSX("With Default Props", () => ) 10 | .addWithJSX("With User Customisation", () => ( 11 | 21 | )); 22 | -------------------------------------------------------------------------------- /src/stories/zapbutton.stories.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable func-names */ 2 | /* eslint-disable import/no-extraneous-dependencies */ 3 | 4 | import React from "react"; 5 | import { storiesOf } from "@storybook/react"; 6 | import ZapButton from "../components/ZapButton"; 7 | import Typography from "../components/Typography"; 8 | 9 | const borderColors = [ 10 | "blackBorderButton", 11 | "purpleBorderButton", 12 | "orangeBorderButton", 13 | "blueBorderButton", 14 | "yellowBorderButton", 15 | "redBorderButton" 16 | ]; 17 | const gradColors = [ 18 | "funkgradientButton1", 19 | "funkgradientButton2", 20 | "funkgradientButton3", 21 | "funkgradientButton4", 22 | "funkgradientButton5", 23 | "funkgradientButton6" 24 | ]; 25 | storiesOf("ZapButton", module) 26 | .addWithJSX("This is of variant-> paperButton", () => ( 27 |
    28 |
    29 | paperButton 30 |
    31 | Zap Button 32 |
    33 | )) 34 | .addWithJSX("This is of variant-> funkgradientButton", () => ( 35 |
    36 |
    37 | funkgradientButtons 38 |
    39 | {gradColors.map(function(colors) { 40 | return Zap Button; 41 | })} 42 |
    43 | )) 44 | .addWithJSX("This is of variant-> BorderButton", () => ( 45 |
    46 |
    47 | BorderButtons 48 |
    49 | {borderColors.map(function(colors) { 50 | return Zap Button; 51 | })} 52 |
    53 | )); 54 | -------------------------------------------------------------------------------- /src/styles/ColorSchema.js: -------------------------------------------------------------------------------- 1 | export const COLORS = { 2 | primary: "#967adc", 3 | lavendar: "#967adc", 4 | blue: "#4a89dc", 5 | gray: "#656d78", 6 | green: "#8cc152", 7 | orange: "#f6bb42", 8 | pink: "#d770ad", 9 | purple: "#967adc", 10 | red: "#da4453", 11 | yellow: "#ffce54", 12 | white: "#ccd1d9", 13 | black: "#434a54" 14 | }; 15 | 16 | export const GRADIENTS = { 17 | blue: "linear-gradient(180deg, #1BADF8 0%, #2B7DE5 100%)", 18 | grey: "linear-gradient(180deg, #6C6C6C 0%, #434343 100%)", 19 | green: "linear-gradient(180deg, #63DA38 0%, #00AB21 100%)", 20 | orange: "linear-gradient(180deg, #FF9500 0%, #D75F00 100%)", 21 | pink: "linear-gradient(180deg, #FF2968 0%, #99195E 100%)", 22 | purple: "linear-gradient(180deg, #CC73E1 0%, #7C1FA1 100%)", 23 | red: "linear-gradient(180deg, #FF3B30 0%, #C22518 100%)", 24 | yellow: "linear-gradient(180deg, #FFCC00 0%, #D8AC21 100%)" 25 | }; 26 | -------------------------------------------------------------------------------- /src/styles/ColorSchema.scss: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Montserrat&display=swap"); 2 | 3 | $primary: #967adc; 4 | $lavendar: #967adc; 5 | $blue: #4a89dc; 6 | $gray: #656d78; 7 | $dark-gray: #434a54; 8 | $green: #8cc152; 9 | $orange: #ff9500; 10 | $pink: #d770ad; 11 | $purple: #967adc; 12 | $red: #da4453; 13 | $yellow: #ffce54; 14 | $white: #ccd1d9; 15 | $black: #434a54; 16 | //GRADIENTS 17 | $blue-grad: linear-gradient(-45deg, #1badf8 50%, #2b7de5 100%); 18 | $dark-gray-grad: linear-gradient(-45deg, #6c6c6c 50%, #434343 100%); 19 | $green-grad: linear-gradient(-45deg, #63da38 50%, #00ab21 100%); 20 | $orange-grad: linear-gradient(-45deg, #ff9500 50%, #d75f00 100%); 21 | $pink-grad: linear-gradient(-45deg, #ff2968 50%, #99195e 100%); 22 | $purple-grad: linear-gradient(-45deg, #cc73e1 50%, #7c1fa1 100%); 23 | $red-grad: linear-gradient(-45deg, #ff3b30 50%, #c22518 100%); 24 | $yellow-grad: linear-gradient(-45deg, #ffcc00 50%, #d8ac21 100%); 25 | //Fonts 26 | $zapFont: Montserrat; 27 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | const ExtractTextPlugin = require('extract-text-webpack-plugin'); 3 | const path = require('path'); 4 | const webpack = require('webpack'); 5 | const packageInfo = require('./package.json'); 6 | 7 | const outputPath = path.join(__dirname, 'lib'); 8 | const srcPath = path.join(__dirname, 'src'); 9 | const componentsPath = path.join(srcPath, 'components'); 10 | const keepCSSFileReference = true; 11 | 12 | const componentExternals = []; 13 | const entryPoints = { 14 | index: './src/components/index.js' 15 | }; 16 | 17 | // Assign entry points and externals 18 | fs.readdirSync(componentsPath) 19 | .filter(x => x !== '.DS_Store' && x !== 'index.js' && !x.match(/\.md/)) 20 | .forEach(component => { 21 | /* define component entry points */ 22 | entryPoints[component] = [`./src/components/${component}`]; 23 | /* extern individual Components for smaller code */ 24 | componentExternals.push(`../${component}`); 25 | }); 26 | 27 | const externals = [] 28 | .concat(Object.keys(packageInfo.dependencies)) 29 | .concat(componentExternals); 30 | 31 | module.exports = { 32 | entry: entryPoints, 33 | output: { 34 | path: outputPath, 35 | filename: '[name]/index.js', 36 | publicPath: '/dist/', 37 | library: packageInfo.name, 38 | libraryTarget: 'commonjs2' 39 | }, 40 | resolve: { 41 | modules: ['node_modules', path.resolve(__dirname, 'lib/index')], 42 | extensions: ['.js', '.jsx'] 43 | }, 44 | externals, 45 | plugins: [ 46 | new webpack.optimize.OccurrenceOrderPlugin(true), 47 | new ExtractTextPlugin( 48 | '[name]/[name].css?[hash]-[chunkhash]-[contenthash]-[name]', 49 | { 50 | disable: false, 51 | allChunks: true, 52 | keepCSSFileReference 53 | } 54 | ), 55 | new webpack.DefinePlugin({ 56 | 'process.env': { 57 | NODE_ENV: '"production"' 58 | } 59 | }) 60 | ], 61 | 62 | module: { 63 | rules: [ 64 | { 65 | test: /\.js$/, 66 | loader: 'babel-loader', 67 | options: { 68 | presets: ['@babel/preset-env', '@babel/react'] 69 | }, 70 | include: srcPath 71 | }, 72 | { 73 | test: /\.css$/, 74 | use: ['style-loader', 'css-loader'] 75 | }, 76 | { 77 | test: /\.svg$/, 78 | loader: 'url-loader?limit=10000&mimetype=image/svg+xml' 79 | } 80 | ] 81 | } 82 | }; 83 | --------------------------------------------------------------------------------