├── .gitignore ├── .prettierrc ├── .storybook ├── addons.js ├── config.js ├── preview-head.html └── webpack.config.js ├── .travis.yml ├── Readme.md ├── babel.config.js ├── build.sh ├── codecov.yml ├── greenkeeper.json ├── jest.config.js ├── lerna.json ├── package.json ├── packages ├── pebble-shared │ ├── .gitignore │ ├── Readme.md │ ├── icons.json │ ├── package.json │ ├── rollup.config.js │ ├── scripts │ │ ├── generateIcon.js │ │ ├── generateIconEnum.js │ │ └── templates │ │ │ ├── dts.tpl │ │ │ ├── native-font.tpl │ │ │ └── pebble-css.hbs │ ├── src │ │ ├── index.ts │ │ └── theme │ │ │ ├── colors.ts │ │ │ ├── index.ts │ │ │ └── typings │ │ │ └── colors.ts │ ├── stories │ │ ├── colors.story.tsx │ │ └── icons.story.tsx │ ├── svgs │ │ ├── account_circle.svg │ │ ├── actions.svg │ │ ├── add-floors.svg │ │ ├── add.svg │ │ ├── added-details.svg │ │ ├── admin.svg │ │ ├── agreement-letter.svg │ │ ├── ai-call.svg │ │ ├── alert-filled.svg │ │ ├── alert.svg │ │ ├── allotment-letter.svg │ │ ├── apps.svg │ │ ├── arrow-back.svg │ │ ├── arrow-down.svg │ │ ├── arrow-drop-down.svg │ │ ├── arrow-drop-up.svg │ │ ├── arrow-right.svg │ │ ├── arrow-up.svg │ │ ├── article.svg │ │ ├── back.svg │ │ ├── balcony.svg │ │ ├── bar-graph.svg │ │ ├── base-price.svg │ │ ├── bathroom.svg │ │ ├── bedroom.svg │ │ ├── bolt.svg │ │ ├── bookmark-add.svg │ │ ├── building.svg │ │ ├── business.svg │ │ ├── calculate.svg │ │ ├── calendar-2.svg │ │ ├── calendar-checked.svg │ │ ├── calendar.svg │ │ ├── call-center.svg │ │ ├── call.svg │ │ ├── camera-2.svg │ │ ├── camera.svg │ │ ├── car-front.svg │ │ ├── car.svg │ │ ├── change-naming.svg │ │ ├── channel-partners.svg │ │ ├── check-bold.svg │ │ ├── check-circle-filled.svg │ │ ├── check.svg │ │ ├── checkbox-indeterminate.svg │ │ ├── checkbox-selected.svg │ │ ├── checkbox-unfilled.svg │ │ ├── checkbox-unselected.svg │ │ ├── checked-server.svg │ │ ├── chevron-down.svg │ │ ├── chevron-left.svg │ │ ├── clipboard.svg │ │ ├── clock-filled.svg │ │ ├── clock.svg │ │ ├── close-circle-filled.svg │ │ ├── close-circle.svg │ │ ├── close.svg │ │ ├── cloud-download.svg │ │ ├── cloud-upload-filled.svg │ │ ├── cloud-upload.svg │ │ ├── configure-floors.svg │ │ ├── configure-units.svg │ │ ├── contact.svg │ │ ├── control-unit.svg │ │ ├── copy-filled.svg │ │ ├── copy.svg │ │ ├── cp-icon.svg │ │ ├── cross-chart.svg │ │ ├── cross.svg │ │ ├── delete-2.svg │ │ ├── delete-filled.svg │ │ ├── delete.svg │ │ ├── description.svg │ │ ├── dialer.svg │ │ ├── digital-leads.svg │ │ ├── direct-walkins.svg │ │ ├── direction-compass.svg │ │ ├── direction.svg │ │ ├── document-uploaded.svg │ │ ├── document.svg │ │ ├── door-front.svg │ │ ├── dot.svg │ │ ├── dots.svg │ │ ├── download.svg │ │ ├── edit-2.svg │ │ ├── edit-alt.svg │ │ ├── edit-details.svg │ │ ├── edit-note.svg │ │ ├── edit-thin.svg │ │ ├── edit.svg │ │ ├── extra-area.svg │ │ ├── eye-line.svg │ │ ├── eye.svg │ │ ├── face-to-face-2.svg │ │ ├── face-to-face-3.svg │ │ ├── face-to-face.svg │ │ ├── facing.svg │ │ ├── fact-check.svg │ │ ├── file.svg │ │ ├── filter-2.svg │ │ ├── filter-alt.svg │ │ ├── filter.svg │ │ ├── fire.svg │ │ ├── firm.svg │ │ ├── flash-off.svg │ │ ├── flash-on.svg │ │ ├── folder.svg │ │ ├── follow-up-2-filled.svg │ │ ├── follow-up-2.svg │ │ ├── follow-up.svg │ │ ├── forum.svg │ │ ├── full-screen.svg │ │ ├── funnel.svg │ │ ├── grade-line.svg │ │ ├── grade.svg │ │ ├── hamburger-bold.svg │ │ ├── hamburger.svg │ │ ├── help-and-support.svg │ │ ├── help.svg │ │ ├── hidden.svg │ │ ├── history.svg │ │ ├── home-filled-2.svg │ │ ├── home-filled.svg │ │ ├── home.svg │ │ ├── house-status.svg │ │ ├── how-to-reg.svg │ │ ├── image.svg │ │ ├── incoming-call-2.svg │ │ ├── incoming-call.svg │ │ ├── incoming-calls.svg │ │ ├── info-filled.svg │ │ ├── info.svg │ │ ├── inquiry.svg │ │ ├── inventory.svg │ │ ├── invoice.svg │ │ ├── jodi.svg │ │ ├── junk.svg │ │ ├── landscape.svg │ │ ├── leads-tab.svg │ │ ├── line-chart.svg │ │ ├── link.svg │ │ ├── list.svg │ │ ├── location.svg │ │ ├── lock-clock.svg │ │ ├── lock-filled.svg │ │ ├── lock-open.svg │ │ ├── lock.svg │ │ ├── logout-door.svg │ │ ├── logout.svg │ │ ├── mail-send.svg │ │ ├── mail.svg │ │ ├── mandates.svg │ │ ├── meeting-room.svg │ │ ├── mic.svg │ │ ├── minus.svg │ │ ├── missed-call.svg │ │ ├── money.svg │ │ ├── more.svg │ │ ├── not-available.svg │ │ ├── not-called.svg │ │ ├── note-1.svg │ │ ├── note-alt.svg │ │ ├── note.svg │ │ ├── notification.svg │ │ ├── offline.svg │ │ ├── open-external.svg │ │ ├── opening-quote.svg │ │ ├── orientation.svg │ │ ├── other-leads.svg │ │ ├── others.svg │ │ ├── outgoing-call-2.svg │ │ ├── outgoing-call.svg │ │ ├── patchout.svg │ │ ├── pause.svg │ │ ├── pdf.svg │ │ ├── percentage.svg │ │ ├── person-add-disabled.svg │ │ ├── person-search.svg │ │ ├── person-square.svg │ │ ├── person.svg │ │ ├── phone-2.svg │ │ ├── phone-alt.svg │ │ ├── phone-filled.svg │ │ ├── phone-in-talk.svg │ │ ├── phone-incoming-2.svg │ │ ├── phone-incoming.svg │ │ ├── phone-missed.svg │ │ ├── phone-outgoing-2.svg │ │ ├── phone-outgoing.svg │ │ ├── phone.svg │ │ ├── play.svg │ │ ├── plus.svg │ │ ├── possession-letter.svg │ │ ├── post-sales-outlined.svg │ │ ├── post-sales.svg │ │ ├── premium.svg │ │ ├── print.svg │ │ ├── priority-change.svg │ │ ├── profile-1.svg │ │ ├── profile.svg │ │ ├── quotations.svg │ │ ├── radio-check-filled.svg │ │ ├── radio-check.svg │ │ ├── radio-selected.svg │ │ ├── radio.svg │ │ ├── redo.svg │ │ ├── reimbursements-2.svg │ │ ├── reimbursements.svg │ │ ├── reschedule.svg │ │ ├── reset.svg │ │ ├── revisit.svg │ │ ├── rules.svg │ │ ├── schedule-mail.svg │ │ ├── search.svg │ │ ├── self-added.svg │ │ ├── send-message.svg │ │ ├── settings-line.svg │ │ ├── settings.svg │ │ ├── share-with-people.svg │ │ ├── share.svg │ │ ├── site-visit-2.svg │ │ ├── site-visit.svg │ │ ├── sms.svg │ │ ├── spinner.svg │ │ ├── stats-2.svg │ │ ├── stats.svg │ │ ├── store-2.svg │ │ ├── store.svg │ │ ├── system.svg │ │ ├── table.svg │ │ ├── tag.svg │ │ ├── team.svg │ │ ├── training.svg │ │ ├── transfer-2.svg │ │ ├── transfer-alt.svg │ │ ├── transfer.svg │ │ ├── transferred.svg │ │ ├── travel.svg │ │ ├── trophy.svg │ │ ├── unchecked-radio.svg │ │ ├── undo.svg │ │ ├── unlock.svg │ │ ├── update.svg │ │ ├── updating.svg │ │ ├── upload.svg │ │ ├── user-alt.svg │ │ ├── user.svg │ │ ├── videocam.svg │ │ ├── view-details.svg │ │ ├── vpn-key.svg │ │ ├── warning-filled.svg │ │ ├── warning-line.svg │ │ ├── warning.svg │ │ ├── welcome-letter.svg │ │ ├── whatsapp-filled.svg │ │ └── whatsapp.svg │ └── tsconfig.json └── pebble-web │ ├── Readme.md │ ├── jest.config.js │ ├── package.json │ ├── rollup.config.js │ ├── src │ ├── components │ │ ├── Button.tsx │ │ ├── Calendar.tsx │ │ ├── Checkbox.tsx │ │ ├── CheckboxGroup.tsx │ │ ├── DateInput.tsx │ │ ├── DropDown.tsx │ │ ├── Input.tsx │ │ ├── Loader.tsx │ │ ├── Logo.tsx │ │ ├── Message.tsx │ │ ├── Modal.tsx │ │ ├── NativeDateInput.tsx │ │ ├── Option.tsx │ │ ├── OptionGroupCheckBox.tsx │ │ ├── OptionGroupRadio.tsx │ │ ├── OutsideClick.tsx │ │ ├── PhoneNumberInput.tsx │ │ ├── PopUp.tsx │ │ ├── Popper.tsx │ │ ├── PresetCalendar.tsx │ │ ├── Radio.tsx │ │ ├── RadioGroup.tsx │ │ ├── Rating.tsx │ │ ├── Search.tsx │ │ ├── SecondaryInput.tsx │ │ ├── Select.tsx │ │ ├── Sidebar.tsx │ │ ├── Slider.tsx │ │ ├── Stepper.tsx │ │ ├── Switch.tsx │ │ ├── Tabs.tsx │ │ ├── Tag.tsx │ │ ├── Text.tsx │ │ ├── TimePicker.tsx │ │ ├── Toast.tsx │ │ ├── Tooltip.tsx │ │ ├── TypeAhead.tsx │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ ├── button.test.tsx.snap │ │ │ │ ├── checkbox.test.tsx.snap │ │ │ │ ├── loader.test.tsx.snap │ │ │ │ ├── logo.test.tsx.snap │ │ │ │ ├── message.test.tsx.snap │ │ │ │ ├── option.test.tsx.snap │ │ │ │ ├── optionGroup.test.tsx.snap │ │ │ │ ├── phonenumberinput.test.tsx.snap │ │ │ │ ├── popper.test.tsx.snap │ │ │ │ ├── radio.test.tsx.snap │ │ │ │ ├── radioGroup.test.tsx.snap │ │ │ │ ├── select.test.tsx.snap │ │ │ │ ├── switch.test.tsx.snap │ │ │ │ ├── tag.test.tsx.snap │ │ │ │ ├── text.test.tsx.snap │ │ │ │ └── timepicker.test.tsx.snap │ │ │ ├── button.test.tsx │ │ │ ├── calendar.test.tsx │ │ │ ├── checkbox.test.tsx │ │ │ ├── checkboxGroup.test.tsx │ │ │ ├── dateInput.test.tsx │ │ │ ├── fixtures │ │ │ │ ├── countrycodes.ts │ │ │ │ └── radioSet.style.ts │ │ │ ├── loader.test.tsx │ │ │ ├── logo.test.tsx │ │ │ ├── message.test.tsx │ │ │ ├── option.test.tsx │ │ │ ├── optionGroup.test.tsx │ │ │ ├── phonenumberinput.test.tsx │ │ │ ├── popper.test.tsx │ │ │ ├── preserCalendar.test.tsx │ │ │ ├── radio.test.tsx │ │ │ ├── radioGroup.test.tsx │ │ │ ├── rating.test.tsx │ │ │ ├── search.test.tsx │ │ │ ├── select.test.tsx │ │ │ ├── sidebar.test.tsx │ │ │ ├── switch.test.tsx │ │ │ ├── tag.test.tsx │ │ │ ├── tags.test.tsx │ │ │ ├── text.test.tsx │ │ │ ├── timepicker.test.tsx │ │ │ ├── toast.test.tsx │ │ │ ├── tooltip.test.tsx │ │ │ └── typeahead.test.tsx │ │ ├── index.ts │ │ ├── shared │ │ │ ├── Control.tsx │ │ │ ├── MountTransition.tsx │ │ │ └── OptionGroup.tsx │ │ ├── styles │ │ │ ├── Button.styles.ts │ │ │ ├── Calendar.styles.ts │ │ │ ├── Control.styles.ts │ │ │ ├── Date.styles.ts │ │ │ ├── Dropdown.styles.ts │ │ │ ├── Input.styles.ts │ │ │ ├── Loader.styles.ts │ │ │ ├── Message.styles.ts │ │ │ ├── Modal.styles.ts │ │ │ ├── OptionGroup.styles.ts │ │ │ ├── OptionGroupCheckBox.styles.ts │ │ │ ├── Options.styles.ts │ │ │ ├── PhoneNumberInput.styles.ts │ │ │ ├── PopUp.styles.ts │ │ │ ├── Popper.styles.ts │ │ │ ├── PresetCalendar.styles.ts │ │ │ ├── Rating.styles.ts │ │ │ ├── Search.styles.ts │ │ │ ├── SecondaryInput.styles.ts │ │ │ ├── Select.styles.ts │ │ │ ├── Sidebar.styles.ts │ │ │ ├── Slider.styles.ts │ │ │ ├── Stepper.styles.ts │ │ │ ├── Switch.styles.ts │ │ │ ├── Tabs.styles.ts │ │ │ ├── Tag.styles.ts │ │ │ ├── TimePicker.styles.ts │ │ │ ├── Toast.styles.ts │ │ │ ├── Tooltip.styles.ts │ │ │ └── TypeAhead.styles.ts │ │ ├── typings │ │ │ ├── Button.ts │ │ │ ├── Calendar.ts │ │ │ ├── Checkbox.ts │ │ │ ├── CheckboxGroup.ts │ │ │ ├── Control.ts │ │ │ ├── DateInput.ts │ │ │ ├── Dropdown.ts │ │ │ ├── Input.ts │ │ │ ├── Loader.ts │ │ │ ├── Logo.ts │ │ │ ├── Message.ts │ │ │ ├── Modal.ts │ │ │ ├── Option.ts │ │ │ ├── OptionGroup.ts │ │ │ ├── OptionGroupCheckBox.ts │ │ │ ├── OptionGroupRadio.ts │ │ │ ├── OutsideClick.ts │ │ │ ├── PhoneNumberInput.ts │ │ │ ├── PopUp.ts │ │ │ ├── Popper.ts │ │ │ ├── PresetCalendar.ts │ │ │ ├── Radio.ts │ │ │ ├── RadioGroup.ts │ │ │ ├── Rating.ts │ │ │ ├── Search.ts │ │ │ ├── SecondaryInput.ts │ │ │ ├── Select.ts │ │ │ ├── Sidebar.ts │ │ │ ├── Slider.ts │ │ │ ├── Stepper.ts │ │ │ ├── Switch.ts │ │ │ ├── Tabs.ts │ │ │ ├── Tag.ts │ │ │ ├── Text.ts │ │ │ ├── TimePicker.ts │ │ │ ├── Toast.ts │ │ │ ├── Toggle.ts │ │ │ ├── Tooltip.ts │ │ │ └── Typeahead.ts │ │ └── utils │ │ │ └── getSelectedCheckboxes.ts │ ├── index.ts │ ├── theme │ │ ├── constants.ts │ │ ├── index.ts │ │ ├── mixins.ts │ │ ├── styles.ts │ │ ├── typings │ │ │ ├── constants.ts │ │ │ └── typography.ts │ │ └── typography.ts │ └── utils │ │ ├── analytics │ │ └── ga.ts │ │ ├── animation.ts │ │ ├── dimensions.ts │ │ ├── index.ts │ │ ├── numbers │ │ ├── __tests__ │ │ │ └── format.test.ts │ │ └── format.ts │ │ ├── strings │ │ ├── __tests__ │ │ │ └── capitalize.test.ts │ │ └── capitalize.ts │ │ └── useragent │ │ ├── Readme.md │ │ └── index.tsx │ ├── stories │ ├── button.story.tsx │ ├── cachedTypeAhead.story.tsx │ ├── calendar.story.tsx │ ├── checkbox.story.tsx │ ├── checkboxGroup.story.tsx │ ├── dropdown.story.tsx │ ├── input.story.tsx │ ├── loader.story.tsx │ ├── logo.story.tsx │ ├── message.story.tsx │ ├── modal.story.tsx │ ├── option.story.tsx │ ├── optionGroupCheckBox.story.tsx │ ├── optionGroupRadio.story.tsx │ ├── optionGroupSection.story.tsx │ ├── outsideClick.story.tsx │ ├── phoneNumberInput.story.tsx │ ├── popper.story.tsx │ ├── popup.story.tsx │ ├── presetCalendar.story.tsx │ ├── radio.story.tsx │ ├── radioGroup.story.tsx │ ├── rating.story.tsx │ ├── search.story.tsx │ ├── select.story.tsx │ ├── sidebar.story.tsx │ ├── slider.story.tsx │ ├── stepper.story.tsx │ ├── switch.story.tsx │ ├── tag.story.tsx │ ├── text.story.tsx │ ├── timepicker.story.tsx │ ├── toast.story.tsx │ ├── tooltip.story.tsx │ └── typeahead.story.tsx │ ├── tests │ ├── __mocks__ │ │ └── fileMock.ts │ ├── __setup__ │ │ ├── matchers.ts │ │ ├── setup.ts │ │ └── setupFramework.ts │ └── build │ │ ├── fixture.js │ │ └── treeShaking.test.js │ ├── tsconfig.build.json │ └── tsconfig.json ├── patches ├── @dump247+storybook-state+1.6.1.patch ├── jest-emotion+10.0.32.patch └── mitt+2.1.0.patch ├── rollupConfig.js ├── tsconfig.base.json ├── tsconfig.json ├── tslint.json ├── typings └── npm │ ├── combos.d.ts │ ├── react-calendar__Calendar.d.ts │ ├── storybook__addon-backgrounds.d.ts │ ├── storybook__addon-console.d.ts │ └── storybook__addon-viewport.d.ts └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .idea 3 | yarn-error.log 4 | compiled 5 | dist 6 | storybook-static 7 | optimized-svg 8 | package-lock.json 9 | native 10 | coverage 11 | .docz 12 | .cache 13 | .DS_Store 14 | .awcache 15 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "arrowParens": "avoid", 3 | "trailingComma": "none" 4 | } 5 | -------------------------------------------------------------------------------- /.storybook/addons.js: -------------------------------------------------------------------------------- 1 | import "@storybook/addon-storysource/register"; 2 | import "@storybook/addon-knobs/register"; 3 | import "@storybook/addon-actions/register"; 4 | import "@storybook/addon-links/register"; 5 | import "@storybook/addon-options/register"; 6 | import "@storybook/addon-backgrounds/register"; 7 | import "@storybook/addon-a11y/register"; 8 | import "@storybook/addon-viewport/register"; 9 | -------------------------------------------------------------------------------- /.storybook/preview-head.html: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "10" 4 | - "12" 5 | env: 6 | - CI=true 7 | cache: yarn 8 | git: 9 | depth: 5 10 | before_install: 11 | - chmod +x build.sh 12 | script: 13 | - yarn build 14 | - yarn test:cover 15 | - ./build.sh 16 | -------------------------------------------------------------------------------- /Readme.md: -------------------------------------------------------------------------------- 1 | # pebble 2 | 3 | [![Greenkeeper badge](https://badges.greenkeeper.io/anarock/pebble.svg)](https://greenkeeper.io/) 4 | 5 | [![Build Status](https://www.travis-ci.com/anarock/pebble.svg?branch=master)](https://www.travis-ci.com/anarock/pebble) 6 | 7 | A design system comprising of component and utilities creating using React. 8 | It consists of: 9 | 10 | - [pebble-web](./packages/pebble-web) 11 | - [pebble-shared](./packages/pebble-shared) 12 | 13 | ### Development 14 | 15 | Install yarn globally. 16 | 17 | ```$xslt 18 | npm i -g yarn 19 | ``` 20 | 21 | - Clone the repo. 22 | - Install deps `yarn install` 23 | - Run `yarn lerna bootstrap` at the root of the directory. 24 | - Run `yarn storybook` to look at the preview of all the components and start development. 25 | - To run tests, run `yarn build` before `yarn jest` 26 | 27 | ## Acknowledgements 28 | 29 | We use [Chromaticqa](https://www.chromaticqa.com/) for visual regression testing and it is awesome. 30 | 31 | ## License 32 | 33 | MIT 34 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | [ 4 | "@babel/preset-env", 5 | { 6 | targets: { 7 | node: "10" 8 | } 9 | } 10 | ], 11 | "@babel/preset-typescript" 12 | ], 13 | plugins: [ 14 | "@babel/plugin-transform-runtime", 15 | ["@babel/plugin-proposal-class-properties", { loose: false }], 16 | "@babel/plugin-syntax-jsx", 17 | ["@babel/plugin-transform-react-jsx", { useBuiltIns: true }], 18 | "emotion", 19 | "date-fns" 20 | ], 21 | env: { 22 | test: { 23 | plugins: ["require-context-hook"] 24 | } 25 | } 26 | }; 27 | -------------------------------------------------------------------------------- /build.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | if [[ $TRAVIS_EVENT_TYPE != 'pull_request' || $TRAVIS_PULL_REQUEST_SLUG != $TRAVIS_REPO_SLUG ]]; 4 | then 5 | yarn chromatic --exit-zero-on-changes 6 | fi 7 | -------------------------------------------------------------------------------- /codecov.yml: -------------------------------------------------------------------------------- 1 | coverage: 2 | status: 3 | patch: 4 | default: 5 | enabled: no 6 | project: 7 | default: 8 | threshold: 1 9 | -------------------------------------------------------------------------------- /greenkeeper.json: -------------------------------------------------------------------------------- 1 | { 2 | "groups": { 3 | "default": { 4 | "packages": [ 5 | "package.json", 6 | "packages/pebble-shared/package.json", 7 | "packages/pebble-web/package.json" 8 | ] 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | projects: ["/packages/*"], 3 | collectCoverage: true, 4 | coverageDirectory: "/coverage", 5 | preset: "ts-jest", 6 | globals: { 7 | "ts-jest": { 8 | tsConfig: "tsconfig.json" 9 | } 10 | } 11 | }; 12 | -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "packages": ["packages/*"], 3 | "npmClient": "yarn", 4 | "useWorkspaces": true, 5 | "version": "independent" 6 | } 7 | -------------------------------------------------------------------------------- /packages/pebble-shared/.gitignore: -------------------------------------------------------------------------------- 1 | src/Icon.ts 2 | -------------------------------------------------------------------------------- /packages/pebble-shared/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "pebble-shared", 3 | "version": "2.20.0", 4 | "license": "MIT", 5 | "main": "dist/pebble-shared.js", 6 | "files": [ 7 | "dist", 8 | "native" 9 | ], 10 | "esnext": "dist/pebble-shared.es.js", 11 | "module": "dist/pebble-shared.module.js", 12 | "typings": "dist/index.d.ts", 13 | "unpkg": "dist/pebble-shared.umd.js", 14 | "scripts": { 15 | "build": "rm -rf dist && yarn build:iconenum && tsc && rollup -c && yarn build:icons && yarn copy:fonts", 16 | "build:icons": "node ./scripts/generateIcon.js", 17 | "build:iconenum": "node ./scripts/generateIconEnum.js", 18 | "copy:fonts": "copy './dist/fonts/*.ttf' ./native/icons", 19 | "test": "exit 0", 20 | "prepublishOnly": "yarn build" 21 | }, 22 | "devDependencies": { 23 | "@types/react-native": "^0.68.0" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /packages/pebble-shared/rollup.config.js: -------------------------------------------------------------------------------- 1 | import { getRollupConfig } from "../../rollupConfig"; 2 | 3 | import pkg from "./package.json"; 4 | 5 | export default getRollupConfig(pkg); 6 | -------------------------------------------------------------------------------- /packages/pebble-shared/scripts/generateIconEnum.js: -------------------------------------------------------------------------------- 1 | const fs = require("fs"); 2 | const path = require("path"); 3 | const prettier = require("prettier"); 4 | 5 | const banner = `/** 6 | * THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 7 | */`; 8 | 9 | const icons = fs 10 | .readdirSync(path.resolve(__dirname, "../svgs")) 11 | .filter(file => file.endsWith(".svg")) 12 | .map(file => file.replace(".svg", "")); 13 | 14 | const namedIcons = icons 15 | .map(icon => { 16 | const iconName = icon 17 | .split(/[-_]/g) 18 | .map(str => str[0].toUpperCase() + str.slice(1)) 19 | .join(""); 20 | 21 | return `${iconName} = '${icon}'`; 22 | }) 23 | .join(","); 24 | 25 | const iconEnum = `enum PebbleIcon { ${namedIcons} } ; export default PebbleIcon`; 26 | 27 | fs.writeFileSync( 28 | "./src/Icon.ts", 29 | prettier.format(banner + "\n" + iconEnum, { parser: "typescript" }) 30 | ); 31 | -------------------------------------------------------------------------------- /packages/pebble-shared/scripts/templates/dts.tpl: -------------------------------------------------------------------------------- 1 | import { Component } from "react"; 2 | import { TextProps } from "react-native"; 3 | 4 | <% const iconNames = Object.keys(JSON.parse(glyphMap)) %> 5 | export type IconName = <%= iconNames.map(icon => `"${icon}"`).join(" | ") %>; 6 | 7 | export interface IconProps extends TextProps { 8 | name: IconName; 9 | size?: number; 10 | color?: string; 11 | } 12 | 13 | export default class Icon extends Component {} 14 | -------------------------------------------------------------------------------- /packages/pebble-shared/scripts/templates/native-font.tpl: -------------------------------------------------------------------------------- 1 | import createIconSet from 'react-native-vector-icons/lib/create-icon-set'; 2 | const glyphMap = ${glyphMap}; 3 | 4 | const iconSet = createIconSet(glyphMap, '${fontFamily}', '${fontFamily}.ttf'); 5 | 6 | export default iconSet; 7 | -------------------------------------------------------------------------------- /packages/pebble-shared/scripts/templates/pebble-css.hbs: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "{{fontName}}"; 3 | src: {{{src}}}; 4 | } 5 | 6 | {{baseSelector}} { 7 | line-height: 1; 8 | } 9 | 10 | {{baseSelector}}:before { 11 | font-family: {{fontName}} !important; 12 | font-style: normal; 13 | font-weight: normal !important; 14 | vertical-align: top; 15 | } 16 | 17 | {{#each codepoints}} 18 | .{{../classPrefix}}{{@key}}:before { 19 | content: "\\{{this}}"; 20 | } 21 | {{/each}} 22 | 23 | *, 24 | *::before, 25 | *::after { 26 | margin: 0; 27 | padding: 0; 28 | box-sizing: inherit; 29 | font-family: inherit; 30 | } 31 | 32 | body { 33 | box-sizing: border-box; 34 | font-family: "Anarock", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 35 | -webkit-font-smoothing: antialiased; 36 | -moz-osx-font-smoothing: grayscale; 37 | -webkit-tap-highlight-color: transparent; 38 | } 39 | -------------------------------------------------------------------------------- /packages/pebble-shared/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./theme"; 2 | export { default as PebbleIcon } from "./Icon"; 3 | -------------------------------------------------------------------------------- /packages/pebble-shared/src/theme/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./colors"; 2 | -------------------------------------------------------------------------------- /packages/pebble-shared/src/theme/typings/colors.ts: -------------------------------------------------------------------------------- 1 | interface Dense { 2 | darker: string; 3 | dark: string; 4 | base: string; 5 | light: string; 6 | lighter: string; 7 | lightest: string; 8 | border?: string; 9 | } 10 | 11 | interface White { 12 | base: string; 13 | } 14 | 15 | interface Light { 16 | base: string; 17 | light: string; 18 | } 19 | 20 | interface Blue { 21 | dark: string; 22 | base: string; 23 | light: string; 24 | } 25 | 26 | export interface Colors { 27 | violet: Dense; 28 | green: Light; 29 | yellow: Light; 30 | blue: Blue; 31 | white: White; 32 | emerald: Dense; 33 | red: Dense; 34 | purple: Light; 35 | pink: Light; 36 | teal: Light; 37 | coral: Light; 38 | jade: Light; 39 | gray: Dense; 40 | } 41 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/account_circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/add-floors.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/added-details.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/admin.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/agreement-letter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/alert-filled.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/arrow-back.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/arrow-down.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/arrow-drop-down.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/arrow-drop-up.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/arrow-right.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/arrow-up.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/article.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/back.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/balcony.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/bar-graph.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/base-price.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/bathroom.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/bedroom.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/bolt.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/bookmark-add.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/building.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/business.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/calculate.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/calendar-2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/change-naming.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/check-bold.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/check-circle-filled.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/check.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/checkbox-indeterminate.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/checkbox-selected.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/checkbox-unfilled.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/checkbox-unselected.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/chevron-down.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/chevron-left.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/clipboard.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/clock-filled.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/clock.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/close-circle-filled.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/close-circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/close.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/cloud-download.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/cloud-upload-filled.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/cloud-upload.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/configure-floors.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/control-unit.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/copy-filled.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/copy.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/cross.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/delete-2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/delete-filled.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/delete.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/description.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/dialer.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/direction-compass.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 9 | 10 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/direction.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/document-uploaded.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/document.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/door-front.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/dot.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/dots.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/download.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/edit-2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/edit-alt.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/edit-note.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/edit-thin.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/edit.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/extra-area.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/eye.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/face-to-face-3.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/face-to-face.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/fact-check.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/file.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/filter-2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/filter-alt.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/fire.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/flash-off.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/flash-on.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/folder.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/forum.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/full-screen.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/funnel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/grade-line.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/grade.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/hamburger-bold.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/hamburger.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/help.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/home-filled-2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/home-filled.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/home.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/house-status.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 9 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/how-to-reg.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/image.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/incoming-call-2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/incoming-call.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/info.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/inventory.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/jodi.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 7 | 8 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/junk.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/leads-tab.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/line-chart.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/list.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/location.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/lock-clock.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/lock-filled.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/lock-open.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/lock.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/logout.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/mail-send.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/mail.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/mandates.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/meeting-room.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/mic.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/minus.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/missed-call.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/money.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/more.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/not-called.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/note-alt.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/note.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/offline.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/open-external.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/opening-quote.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/outgoing-call-2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/outgoing-call.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/patchout.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/pause.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/percentage.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/person-add-disabled.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/person-search.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/person.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/phone-2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/phone-alt.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/phone-filled.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/phone-in-talk.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/phone-incoming-2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/phone-incoming.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/phone-missed.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/phone-outgoing-2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/phone-outgoing.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/play.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/plus.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/possession-letter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/post-sales.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/premium.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/print.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/priority-change.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/profile-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/profile.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/quotations.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/radio-check-filled.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/radio-check.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/radio-selected.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/radio.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/redo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/reimbursements.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/reset.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/revisit.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/rules.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/search.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/send-message.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/share.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/site-visit-2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/site-visit.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/spinner.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/stats.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/store-2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/store.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/system.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/table.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/tag.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/team.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/training.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/transfer-2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/transfer-alt.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/transfer.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/transferred.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/trophy.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/unchecked-radio.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/undo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/unlock.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/update.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/updating.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/upload.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/user-alt.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/videocam.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/view-details.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/vpn-key.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/warning-filled.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/warning-line.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/warning.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/pebble-shared/svgs/welcome-letter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/pebble-shared/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "outDir": "compiled", 5 | "declarationDir": "dist" 6 | }, 7 | "include": ["./src"] 8 | } 9 | -------------------------------------------------------------------------------- /packages/pebble-web/jest.config.js: -------------------------------------------------------------------------------- 1 | const pkg = require("./package.json"); 2 | 3 | module.exports = { 4 | displayName: pkg.name, 5 | name: pkg.name, 6 | preset: "ts-jest", 7 | snapshotSerializers: ["enzyme-to-json/serializer"], 8 | testMatch: ["**/?(*.)+(spec|test).(t|j)s?(x)"], 9 | setupFiles: ["intersection-observer", "/tests/__setup__/setup.ts"], 10 | setupFilesAfterEnv: ["/tests/__setup__/setupFramework.ts"], 11 | moduleNameMapper: { 12 | "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": 13 | "/tests/__mocks__/fileMock.ts" 14 | }, 15 | globals: { 16 | "ts-jest": { 17 | tsConfig: "tsconfig.json" 18 | } 19 | } 20 | }; 21 | -------------------------------------------------------------------------------- /packages/pebble-web/rollup.config.js: -------------------------------------------------------------------------------- 1 | import { getRollupConfig } from "../../rollupConfig"; 2 | 3 | import pkg from "./package.json"; 4 | 5 | export default getRollupConfig(pkg); 6 | -------------------------------------------------------------------------------- /packages/pebble-web/src/components/Checkbox.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Control from "./shared/Control"; 3 | import { CheckboxProps } from "./typings/Checkbox"; 4 | 5 | export default function Checkbox(props: CheckboxProps) { 6 | return ; 7 | } 8 | -------------------------------------------------------------------------------- /packages/pebble-web/src/components/Loader.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { LoaderProps } from "./typings/Loader"; 3 | import { spinnerStyle } from "./styles/Loader.styles"; 4 | import { colors } from "pebble-shared"; 5 | import { cx } from "emotion"; 6 | 7 | const Loader: React.FunctionComponent = ({ 8 | color = colors.gray.darker, 9 | scale = 1, 10 | className 11 | }) => { 12 | const style = { 13 | backgroundColor: color 14 | }; 15 | return ( 16 |
20 |
21 |
22 |
23 |
24 | ); 25 | }; 26 | 27 | export default Loader; 28 | -------------------------------------------------------------------------------- /packages/pebble-web/src/components/Message.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { cx } from "emotion"; 3 | import { _colors } from "./Toast"; 4 | import { messageWrapper } from "./styles/Message.styles"; 5 | import { AlertProps } from "./typings/Message"; 6 | 7 | const Message: React.FunctionComponent = ({ 8 | intent, 9 | className, 10 | text 11 | }) => { 12 | const bColor = _colors[intent]; 13 | 14 | const iconClass = cx("pi", { 15 | "pi-radio-check-filled": intent === "success", 16 | "pi-close-circle-filled": intent === "error" 17 | }); 18 | 19 | return ( 20 |
26 | 27 | {text} 28 |
29 | ); 30 | }; 31 | 32 | export default Message; 33 | -------------------------------------------------------------------------------- /packages/pebble-web/src/components/Radio.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { RadioProps } from "./typings/Radio"; 3 | import Control from "./shared/Control"; 4 | 5 | export default function Radio(props: RadioProps) { 6 | return ; 7 | } 8 | -------------------------------------------------------------------------------- /packages/pebble-web/src/components/Text.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { css, cx } from "emotion"; 3 | import { colors } from "pebble-shared"; 4 | import { TextProps } from "./typings/Text"; 5 | 6 | const Text: React.FunctionComponent = ({ 7 | typography, 8 | color = colors.gray.darker, 9 | children, 10 | className 11 | }) => { 12 | const _className = css({ 13 | ...typography, 14 | color 15 | }); 16 | 17 | return {children}; 18 | }; 19 | 20 | export default Text; 21 | -------------------------------------------------------------------------------- /packages/pebble-web/src/components/__tests__/__snapshots__/message.test.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`Message snapshot 1`] = ` 4 | .emotion-0 { 5 | border-radius: 3px; 6 | font-weight: 400; 7 | color: #ffffff; 8 | font-size: 14px; 9 | height: 46px; 10 | display: -webkit-box; 11 | display: -webkit-flex; 12 | display: -ms-flexbox; 13 | display: flex; 14 | -webkit-align-items: center; 15 | -webkit-box-align: center; 16 | -ms-flex-align: center; 17 | align-items: center; 18 | padding: 20px; 19 | } 20 | 21 | .emotion-0 > i { 22 | margin-right: 10px; 23 | } 24 | 25 |
33 | 36 | Hello there 37 |
38 | `; 39 | -------------------------------------------------------------------------------- /packages/pebble-web/src/components/__tests__/dateInput.test.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import DateInput from "../DateInput"; 3 | import sinon from "sinon"; 4 | import { mount } from "enzyme"; 5 | import { format } from "date-fns"; 6 | import Input from "../Input"; 7 | 8 | const date = new Date(2012, 11, 1); 9 | 10 | describe("DateInput", () => { 11 | test("should return correct value on apply", () => { 12 | const changeSpy = sinon.spy(); 13 | 14 | const dateInput = mount( 15 | 20 | ); 21 | dateInput.find(Input).simulate("click"); 22 | 23 | dateInput.find(".react-calendar__tile").at(0).simulate("click"); 24 | 25 | expect(changeSpy.calledOnce).toBeTruthy(); 26 | 27 | const argument = format(changeSpy.getCall(0).args[0], "dd-MM-yyyy"); 28 | expect(argument).toEqual("01-12-2012"); 29 | }); 30 | }); 31 | -------------------------------------------------------------------------------- /packages/pebble-web/src/components/__tests__/fixtures/radioSet.style.ts: -------------------------------------------------------------------------------- 1 | import { css } from "emotion"; 2 | import { typography } from "../../../theme"; 3 | import { colors } from "pebble-shared"; 4 | 5 | export const setWrap = css({ 6 | display: "flex", 7 | ...typography.s.regular 8 | }); 9 | 10 | export const unSelectedButton = css({ 11 | padding: "15px 20px", 12 | lineHeight: "8px", 13 | border: `1px solid ${colors.gray.lighter}`, 14 | borderRight: "none", 15 | "&:first-of-type": { 16 | borderRadius: "3px 0px 0px 3px" 17 | }, 18 | "&:last-of-type": { 19 | borderRadius: "0px 3px 3px 0px", 20 | borderRight: `1px solid ${colors.gray.lighter}` 21 | } 22 | }); 23 | 24 | export const selectedButton = css({ 25 | backgroundColor: colors.gray.lighter 26 | }); 27 | -------------------------------------------------------------------------------- /packages/pebble-web/src/components/__tests__/loader.test.tsx: -------------------------------------------------------------------------------- 1 | import renderer from "react-test-renderer"; 2 | import Loader from "../Loader"; 3 | import * as React from "react"; 4 | 5 | describe("Loader", () => { 6 | test("snapshot", () => { 7 | const logo = renderer.create(); 8 | 9 | const tree = logo.toJSON(); 10 | expect(tree).toMatchSnapshot(); 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /packages/pebble-web/src/components/__tests__/logo.test.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import renderer from "react-test-renderer"; 3 | import Logo from "../Logo"; 4 | 5 | describe("Logo", () => { 6 | test("snapshot", () => { 7 | const logo = renderer.create(); 8 | 9 | const tree = logo.toJSON(); 10 | expect(tree).toMatchSnapshot(); 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /packages/pebble-web/src/components/__tests__/message.test.tsx: -------------------------------------------------------------------------------- 1 | import renderer from "react-test-renderer"; 2 | import Message from "../Message"; 3 | import * as React from "react"; 4 | 5 | describe("Message", () => { 6 | test("snapshot", () => { 7 | const mesage = renderer.create( 8 | 9 | ); 10 | 11 | const tree = mesage.toJSON(); 12 | expect(tree).toMatchSnapshot(); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /packages/pebble-web/src/components/__tests__/rating.test.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { Rating } from "../"; 3 | import { mount } from "enzyme"; 4 | import sinon from "sinon"; 5 | 6 | describe("Rating", () => { 7 | test("should call onChange on click with correct arguments", () => { 8 | const spy = sinon.spy(); 9 | 10 | const rating = mount( 11 | 12 | ); 13 | 14 | rating.find("span").at(0).simulate("click"); 15 | 16 | expect(spy.calledWith(1)).toBeTruthy(); 17 | }); 18 | 19 | test("should not call onChange on click when disabled", () => { 20 | const spy = sinon.spy(); 21 | 22 | const rating = mount( 23 | 30 | ); 31 | 32 | rating.find("span").at(0).simulate("click"); 33 | expect(spy.called).toBeFalsy(); 34 | }); 35 | }); 36 | -------------------------------------------------------------------------------- /packages/pebble-web/src/components/__tests__/switch.test.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { shallow, mount } from "enzyme"; 3 | import sinon from "sinon"; 4 | import Switch from "../Switch"; 5 | 6 | describe("Component: Switch", () => { 7 | test("snapshot", () => { 8 | const switch1 = shallow(); 9 | expect(switch1).toMatchSnapshot(); 10 | 11 | const switch2 = shallow(); 12 | expect(switch2).toMatchSnapshot(); 13 | }); 14 | 15 | test("onChange is triggered on click", () => { 16 | const spy = sinon.spy(); 17 | 18 | const switch1 = mount(); 19 | switch1.find("input").simulate("change"); 20 | expect(spy.calledOnce).toBeTruthy(); 21 | }); 22 | }); 23 | -------------------------------------------------------------------------------- /packages/pebble-web/src/components/__tests__/tag.test.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { mount, shallow } from "enzyme"; 3 | import sinon from "sinon"; 4 | import Tag from "../Tag"; 5 | 6 | describe("Component: Tag", () => { 7 | test("snapshot", () => { 8 | const tag = shallow(); 9 | expect(tag).toMatchSnapshot(); 10 | 11 | const tag2 = shallow( 12 | {}} /> 13 | ); 14 | expect(tag2).toMatchSnapshot(); 15 | }); 16 | 17 | test("onClose is triggered correctly", () => { 18 | const spy = sinon.spy(); 19 | 20 | const tag = mount(); 21 | tag.find("i").simulate("click"); 22 | expect(spy.calledOnce).toBeTruthy(); 23 | }); 24 | }); 25 | -------------------------------------------------------------------------------- /packages/pebble-web/src/components/__tests__/tags.test.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { Tabs, TabSection } from "../Tabs"; 3 | import { mount } from "enzyme"; 4 | import sinon from "sinon"; 5 | 6 | describe("Tags", () => { 7 | test("on tab change", () => { 8 | const tabChangeSpy = sinon.spy(); 9 | const tabs = mount( 10 | 15 | {} 16 | {} 17 | 18 | ); 19 | tabs 20 | .find("span") 21 | .at(1) 22 | .simulate("click"); 23 | expect(tabChangeSpy.calledOnce).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /packages/pebble-web/src/components/__tests__/text.test.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { typography } from "../../theme"; 3 | import Text from "../Text"; 4 | import { Type } from "../../theme/typings/typography"; 5 | import { shallow } from "enzyme"; 6 | 7 | describe("Component: Tag", () => { 8 | test("snapshot", () => { 9 | const texts: JSX.Element[] = []; 10 | 11 | Object.keys(typography).forEach(size => { 12 | Object.keys(typography[size as keyof typeof typography]).forEach(type => 13 | texts.push( 14 | 20 | Hello World 21 | 22 | ) 23 | ); 24 | }); 25 | 26 | expect(shallow(
{texts}
)).toMatchSnapshot(); 27 | }); 28 | }); 29 | -------------------------------------------------------------------------------- /packages/pebble-web/src/components/shared/MountTransition.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { 3 | State, 4 | Transition, 5 | TransitionProps 6 | } from "react-spring/renderprops.cjs"; 7 | import { animationConfig } from "../../utils/animation"; 8 | import { Omit } from "utility-types"; 9 | 10 | interface MountTransitionProps 11 | extends Omit, "items">, "children"> { 12 | visible: boolean; 13 | children: ( 14 | params: React.CSSProperties, 15 | state: State, 16 | index: number 17 | ) => React.ReactNode; 18 | } 19 | 20 | const MountTransition: React.FunctionComponent = props => { 21 | return ( 22 | 23 | {(show, state, index) => 24 | show && 25 | (styles => props.children(styles as React.CSSProperties, state, index)) 26 | } 27 | 28 | ); 29 | }; 30 | 31 | export default MountTransition; 32 | -------------------------------------------------------------------------------- /packages/pebble-web/src/components/styles/Control.styles.ts: -------------------------------------------------------------------------------- 1 | import { css } from "emotion"; 2 | import { typography } from "../../theme"; 3 | import { colors } from "pebble-shared"; 4 | 5 | export const radioIconStyle = css({ 6 | marginRight: 10, 7 | fontSize: 16, 8 | paddingTop: 2, 9 | height: 18 10 | }); 11 | 12 | export const controlStyle = css({ 13 | cursor: "pointer", 14 | display: "flex", 15 | outline: "none", 16 | padding: "10px 0", 17 | position: "relative", 18 | alignItems: "center", 19 | ...typography.normal.regular, 20 | "&[data-disabled='true']": { 21 | cursor: "not-allowed", 22 | ".i": { 23 | color: colors.gray.light 24 | } 25 | } 26 | }); 27 | -------------------------------------------------------------------------------- /packages/pebble-web/src/components/styles/Date.styles.ts: -------------------------------------------------------------------------------- 1 | import { css } from "emotion"; 2 | import { colors } from "pebble-shared"; 3 | import { typography } from "../../theme"; 4 | import { inputMarginBottom } from "./Input.styles"; 5 | 6 | export const dateClass = css({ 7 | padding: 20, 8 | width: "100%" 9 | }); 10 | 11 | export const dropDownClassName = css({ 12 | marginTop: -inputMarginBottom 13 | }); 14 | 15 | export const inputStyle = css({ 16 | marginBottom: 0 17 | }); 18 | 19 | export const wrapperStyle = css({ 20 | marginBottom: 20 21 | }); 22 | 23 | export const errorStyle = css({ 24 | ...typography.s.bold, 25 | backgroundColor: colors.red.lightest, 26 | color: colors.red.darker, 27 | textAlign: "left", 28 | padding: "11px 30px" 29 | }); 30 | -------------------------------------------------------------------------------- /packages/pebble-web/src/components/styles/Dropdown.styles.ts: -------------------------------------------------------------------------------- 1 | import { constants } from "../../theme"; 2 | import { css } from "emotion"; 3 | import { colors } from "pebble-shared"; 4 | 5 | export const wrapperStyle = css({ 6 | position: "relative" 7 | }); 8 | 9 | export const dropDownStyle = css({ 10 | minWidth: 100, 11 | boxShadow: constants.boxShadow.xElevated, 12 | backgroundColor: colors.white.base, 13 | borderRadius: constants.borderRadius, 14 | position: "absolute", 15 | top: "100%", 16 | zIndex: 999, 17 | transformOrigin: "top left" 18 | }); 19 | -------------------------------------------------------------------------------- /packages/pebble-web/src/components/styles/Loader.styles.ts: -------------------------------------------------------------------------------- 1 | import { keyframes, css } from "emotion"; 2 | import { mixins } from "../../theme"; 3 | 4 | const bounceDelay = keyframes({ 5 | "0%, 80%, 100%": { 6 | transform: "scale(0)" 7 | }, 8 | "40%": { 9 | transform: "scale(1)" 10 | } 11 | }); 12 | 13 | export const spinnerStyle = css({ 14 | ...mixins.flexSpaceBetween, 15 | width: 70, 16 | "> div": { 17 | width: 18, 18 | height: 18, 19 | borderRadius: "100%", 20 | display: "inline-block", 21 | animation: `${bounceDelay} 1.4s infinite ease-in-out both`, 22 | "&:first-of-type": { 23 | animationDelay: "-0.32s" 24 | }, 25 | "&:nth-of-type(2n)": { 26 | animationDelay: "-0.16s" 27 | } 28 | } 29 | }); 30 | -------------------------------------------------------------------------------- /packages/pebble-web/src/components/styles/Message.styles.ts: -------------------------------------------------------------------------------- 1 | import { css } from "emotion"; 2 | import { constants, typography } from "../../theme"; 3 | import { colors } from "pebble-shared"; 4 | 5 | export const messageWrapper = css({ 6 | borderRadius: constants.borderRadius, 7 | ...typography.normal.regular, 8 | color: colors.white.base, 9 | height: 46, 10 | display: "flex", 11 | alignItems: "center", 12 | padding: 20, 13 | 14 | "> i": { 15 | marginRight: 10 16 | } 17 | }); 18 | -------------------------------------------------------------------------------- /packages/pebble-web/src/components/styles/Modal.styles.ts: -------------------------------------------------------------------------------- 1 | import { css } from "emotion"; 2 | 3 | export const modalContainer = css({ 4 | position: "fixed", 5 | top: 0, 6 | right: 0, 7 | bottom: 0, 8 | left: 0, 9 | backgroundColor: "rgba(0,0,0,0.4)", 10 | overflowY: "auto", 11 | WebkitOverflowScrolling: "touch", 12 | zIndex: 99998 13 | }); 14 | -------------------------------------------------------------------------------- /packages/pebble-web/src/components/styles/PhoneNumberInput.styles.ts: -------------------------------------------------------------------------------- 1 | import { css } from "emotion"; 2 | 3 | export const wrapper = css({ 4 | display: "flex" 5 | }); 6 | 7 | export const selectStyle = css({ 8 | width: "80px", 9 | marginBottom: 0 10 | }); 11 | 12 | export const combinedLabelStyle = css({ 13 | zIndex: 1 14 | }); 15 | -------------------------------------------------------------------------------- /packages/pebble-web/src/components/styles/PopUp.styles.ts: -------------------------------------------------------------------------------- 1 | import { css } from "emotion"; 2 | import { mixins, constants } from "../../theme"; 3 | import { colors } from "pebble-shared"; 4 | 5 | const modalPadding = 30; 6 | 7 | export const modalContainer = css({ 8 | background: "white", 9 | width: "360px", 10 | alignSelf: "center", 11 | borderRadius: constants.borderRadius, 12 | padding: modalPadding, 13 | position: "relative" 14 | }); 15 | 16 | export const flexCenter = css({ 17 | display: "flex", 18 | alignItems: "center", 19 | justifyContent: "center", 20 | height: "100%" 21 | }); 22 | 23 | export const buttonsContainer = css({ 24 | ...mixins.flexSpaceBetween, 25 | marginTop: "40px" 26 | }); 27 | 28 | export const iconCloseClassName = css({ 29 | cursor: "pointer", 30 | position: "absolute", 31 | right: modalPadding, 32 | top: modalPadding, 33 | fontSize: "14px", 34 | color: colors.gray.base, 35 | "&:hover": { 36 | color: colors.gray.darker 37 | } 38 | }); 39 | -------------------------------------------------------------------------------- /packages/pebble-web/src/components/styles/Popper.styles.ts: -------------------------------------------------------------------------------- 1 | import { css } from "emotion"; 2 | import { constants } from "../../theme"; 3 | 4 | export const popperStyle = css({ 5 | margin: 14, 6 | boxShadow: constants.boxShadow.xElevated, 7 | borderRadius: constants.borderRadius 8 | }); 9 | 10 | export const arrowStyle = css({ 11 | position: "absolute", 12 | textShadow: "1px 0 20px rgba(0,0,0,0.1)", 13 | "&[data-placement^='top']": { 14 | transform: "rotate(90deg)", 15 | bottom: -11 16 | }, 17 | "&[data-placement^='bottom']": { 18 | transform: "rotate(-90deg)", 19 | top: -11 20 | }, 21 | "&[data-placement^='right']": { 22 | transform: "rotate(180deg)", 23 | left: -11 24 | }, 25 | "&[data-placement^='left']": { 26 | right: -11 27 | } 28 | }); 29 | -------------------------------------------------------------------------------- /packages/pebble-web/src/components/styles/Rating.styles.ts: -------------------------------------------------------------------------------- 1 | import { css } from "emotion"; 2 | import { colors } from "pebble-shared"; 3 | import { mixins } from "../../theme"; 4 | 5 | export const wrapStyle = css({ 6 | ...mixins.flexRow, 7 | cursor: "pointer" 8 | }); 9 | 10 | export const disabledStyle = css({ 11 | cursor: "not-allowed" 12 | }); 13 | 14 | export const unSelectedStar = css({ 15 | marginLeft: "2px", 16 | color: colors.gray.border, 17 | fontSize: "20px" 18 | }); 19 | 20 | export const selectedStar = css({ 21 | color: colors.yellow.base 22 | }); 23 | -------------------------------------------------------------------------------- /packages/pebble-web/src/components/styles/Tabs.styles.ts: -------------------------------------------------------------------------------- 1 | import { css } from "emotion"; 2 | import { colors } from "pebble-shared"; 3 | import { typography } from "../../theme"; 4 | 5 | export const selectedTabStyle = css({ 6 | borderBottom: `2px solid ${colors.violet.base}`, 7 | color: colors.violet.base 8 | }); 9 | 10 | export const tabStyle = css({ 11 | padding: "10px 20px 20px", 12 | cursor: "pointer", 13 | ...typography.s.bold 14 | }); 15 | 16 | export const tabsWrap = css({ 17 | display: "flex", 18 | justifyContent: "space-around", 19 | overflow: "auto", 20 | borderBottom: `1px solid ${colors.gray.lighter}`, 21 | background: colors.white.base 22 | }); 23 | -------------------------------------------------------------------------------- /packages/pebble-web/src/components/styles/Tag.styles.ts: -------------------------------------------------------------------------------- 1 | import { constants, mixins, typography } from "../../theme"; 2 | import { css } from "emotion"; 3 | import { colors } from "pebble-shared"; 4 | 5 | export const tagStyle = css({ 6 | ...typography.s.bold, 7 | ...mixins.flexSpaceBetween, 8 | borderRadius: constants.borderRadius, 9 | padding: "0 10px", 10 | height: 28, 11 | alignItems: "center", 12 | justifyContent: "center", 13 | display: "inline-flex", 14 | lineHeight: "10px", 15 | "&.__pebble__tag__with__close": { 16 | paddingRight: 0 17 | } 18 | }); 19 | 20 | export const iconClass = css({ 21 | fontSize: 7, 22 | marginLeft: 5, 23 | height: "inherit", 24 | padding: "10px 10px", 25 | cursor: "pointer", 26 | position: "relative", 27 | ":hover": { 28 | backgroundColor: colors.violet.lighter, 29 | borderTopRightRadius: constants.borderRadius, 30 | borderBottomRightRadius: constants.borderRadius 31 | } 32 | }); 33 | -------------------------------------------------------------------------------- /packages/pebble-web/src/components/styles/TimePicker.styles.ts: -------------------------------------------------------------------------------- 1 | import { css } from "emotion"; 2 | import { colors } from "pebble-shared"; 3 | 4 | export const timePickerWrap = css({ 5 | display: "flex", 6 | alignItems: "center", 7 | border: `1px solid ${colors.gray.light}`, 8 | borderRadius: "3px", 9 | cursor: "pointer", 10 | "&:not([disabled]):hover": { 11 | background: colors.gray.light 12 | } 13 | }); 14 | 15 | export const timePickerSelected = css({ 16 | backgroundColor: colors.gray.lighter 17 | }); 18 | 19 | export const hourPicker = css({ 20 | borderRadius: "3px 0px 0px 3px", 21 | borderRight: "none" 22 | }); 23 | 24 | export const seperator = css({ 25 | color: colors.gray.dark, 26 | lineHeight: "40px" 27 | }); 28 | 29 | export const minutePicker = css({ 30 | borderLeft: "none", 31 | borderRadius: "0px 3px 3px 0px" 32 | }); 33 | 34 | export const optionStyle = css({ 35 | width: "100px" 36 | }); 37 | -------------------------------------------------------------------------------- /packages/pebble-web/src/components/styles/Toast.styles.ts: -------------------------------------------------------------------------------- 1 | import { css } from "emotion"; 2 | import { constants, typography } from "../../theme"; 3 | import { colors } from "pebble-shared"; 4 | 5 | export const toastWrapper = css({ 6 | position: "fixed", 7 | borderRadius: constants.borderRadius, 8 | ...typography.normal.regular, 9 | color: colors.white.base, 10 | display: "flex", 11 | alignItems: "center", 12 | padding: "15px 20px", 13 | zIndex: 99999, 14 | 15 | "> i": { 16 | marginRight: 10 17 | } 18 | }); 19 | -------------------------------------------------------------------------------- /packages/pebble-web/src/components/styles/Tooltip.styles.ts: -------------------------------------------------------------------------------- 1 | import { css } from "emotion"; 2 | import { typography } from "../../theme"; 3 | import { colors } from "pebble-shared"; 4 | 5 | export const textStyle = css({ 6 | ...typography.s.regular, 7 | color: colors.white.base, 8 | display: "block", 9 | padding: "10px 16px" 10 | }); 11 | 12 | export const popperStyle = css({ 13 | margin: 4, 14 | boxShadow: "none", 15 | maxWidth: 320 16 | }); 17 | -------------------------------------------------------------------------------- /packages/pebble-web/src/components/styles/TypeAhead.styles.ts: -------------------------------------------------------------------------------- 1 | import { css } from "emotion"; 2 | import { constants } from "../../theme"; 3 | 4 | export const wrapper = css({ 5 | position: "relative" 6 | }); 7 | 8 | export const optionsWrapper = css({ 9 | width: "100%", 10 | position: "absolute", 11 | marginTop: -40, 12 | zIndex: 999, 13 | boxShadow: constants.boxShadow.elevated, 14 | transformOrigin: "0 0" 15 | }); 16 | -------------------------------------------------------------------------------- /packages/pebble-web/src/components/typings/Checkbox.ts: -------------------------------------------------------------------------------- 1 | import { RadioProps } from "./Radio"; 2 | 3 | export type CheckboxProps = RadioProps; 4 | -------------------------------------------------------------------------------- /packages/pebble-web/src/components/typings/CheckboxGroup.ts: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | 3 | export interface CheckboxGroupProps { 4 | selected: OptionType[]; 5 | onChange: (value: OptionType[], e: React.MouseEvent) => void; 6 | className?: string; 7 | name: string; 8 | disabled?: boolean; 9 | } 10 | -------------------------------------------------------------------------------- /packages/pebble-web/src/components/typings/Control.ts: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | 3 | export interface ControlProps { 4 | onChange?: ( 5 | args: { value: OptionType; checked: boolean }, 6 | e: React.MouseEvent 7 | ) => void; 8 | value: OptionType; 9 | label: React.ReactNode; 10 | checked?: boolean; 11 | disabled?: boolean; 12 | children?: (props: ControlProps) => React.ReactNode; 13 | type: "radio" | "checkbox"; 14 | className?: string; 15 | iconClassName?: string; 16 | indeterminate?: boolean; 17 | } 18 | -------------------------------------------------------------------------------- /packages/pebble-web/src/components/typings/DateInput.ts: -------------------------------------------------------------------------------- 1 | import { SimpleInputProps } from "./Input"; 2 | import { Omit } from "utility-types"; 3 | import { DateSingle } from "./Calendar"; 4 | import { Placement } from "popper.js"; 5 | 6 | export interface DateInputProps { 7 | onChange: (date?: number) => void; 8 | value?: number | Date; 9 | placeholder: string; 10 | inputProps?: Omit; 11 | calendarProps?: DateSingle; 12 | disabled?: boolean; 13 | errorMessage?: string; 14 | placement?: Placement; 15 | wrapperClassName?: string; 16 | dropDownClassName?: string; 17 | initiallyOpen?: boolean; 18 | onOutsideClick?: (isOpen: boolean) => void; 19 | controlled?: boolean; 20 | isOpen?: boolean; 21 | } 22 | 23 | export interface DateInputState { 24 | stringInput: string; 25 | propsValue?: number | Date; 26 | } 27 | -------------------------------------------------------------------------------- /packages/pebble-web/src/components/typings/Dropdown.ts: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { ButtonType } from "./Button"; 3 | import { Placement, Modifiers } from "popper.js"; 4 | 5 | type Toggle = () => void; 6 | 7 | export interface DropdownProps { 8 | children: (args: { toggle: Toggle; isOpen: boolean }) => React.ReactNode; 9 | buttonLabel?: React.ReactNode; 10 | closeOnOutsideClick?: boolean; 11 | type?: ButtonType; 12 | labelComponent?: (arg: { 13 | isOpen: boolean; 14 | toggleDropdown: Toggle; 15 | }) => React.ReactNode; 16 | padding?: number | string; 17 | className?: string; 18 | dropDownClassName?: string; 19 | initiallyOpen?: boolean; 20 | isSelected?: boolean; 21 | disabled?: boolean; 22 | labelClassName?: string; 23 | onOutsideClick?: (isOpen: boolean) => void; 24 | placement?: Placement; 25 | modifiers?: Modifiers; 26 | controlled?: boolean; 27 | isOpen?: boolean; 28 | } 29 | 30 | export interface DropdownState { 31 | isOpen: boolean; 32 | } 33 | -------------------------------------------------------------------------------- /packages/pebble-web/src/components/typings/Loader.ts: -------------------------------------------------------------------------------- 1 | export interface LoaderProps { 2 | color?: string; 3 | className?: string; 4 | scale?: number; 5 | } 6 | -------------------------------------------------------------------------------- /packages/pebble-web/src/components/typings/Logo.ts: -------------------------------------------------------------------------------- 1 | export interface LogoProps { 2 | height?: number; 3 | color?: string; 4 | } 5 | -------------------------------------------------------------------------------- /packages/pebble-web/src/components/typings/Message.ts: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | 3 | export interface AlertProps { 4 | intent: "error" | "success"; 5 | className?: string; 6 | text: React.ReactChild; 7 | } 8 | -------------------------------------------------------------------------------- /packages/pebble-web/src/components/typings/Modal.ts: -------------------------------------------------------------------------------- 1 | export interface ModalProps { 2 | visible: boolean; 3 | backDropClassName?: string; 4 | modalClassName?: string; 5 | children: React.ReactNode; 6 | } 7 | -------------------------------------------------------------------------------- /packages/pebble-web/src/components/typings/Option.ts: -------------------------------------------------------------------------------- 1 | import { ControlProps } from "./Control"; 2 | import { Omit } from "utility-types"; 3 | import * as React from "react"; 4 | 5 | export interface OptionProps 6 | extends Omit, "checked" | "type"> { 7 | isActive?: boolean; 8 | isSelected?: boolean; 9 | multiSelect?: boolean; 10 | labelClassName?: string; 11 | leftElement?: (props: OptionProps) => React.ReactNode; 12 | rightElement?: (props: OptionProps) => React.ReactNode; 13 | } 14 | -------------------------------------------------------------------------------- /packages/pebble-web/src/components/typings/OptionGroupCheckBox.ts: -------------------------------------------------------------------------------- 1 | import { CommonProps, Extras } from "./OptionGroup"; 2 | 3 | export interface OptionGroupCheckBoxProps extends CommonProps { 4 | wrapClassName?: string; 5 | onChange: (value: OptionType[], extras: Extras) => void; 6 | /** 7 | * @deprecated use isSelected 8 | */ 9 | selected?: OptionType[]; 10 | isSelected?: (value: OptionType) => boolean; 11 | onApply?: ( 12 | value: OptionType[], 13 | props: OptionGroupCheckBoxProps 14 | ) => void; 15 | onClear?: () => void; 16 | } 17 | -------------------------------------------------------------------------------- /packages/pebble-web/src/components/typings/OptionGroupRadio.ts: -------------------------------------------------------------------------------- 1 | import { CommonProps, Extras } from "./OptionGroup"; 2 | 3 | export interface OptionGroupRadio extends CommonProps { 4 | onChange: (value: OptionType | undefined, extras: Extras) => void; 5 | /** 6 | * @deprecated use isSelected 7 | */ 8 | selected?: OptionType; 9 | isSelected?: (value: OptionType) => boolean; 10 | } 11 | -------------------------------------------------------------------------------- /packages/pebble-web/src/components/typings/OutsideClick.ts: -------------------------------------------------------------------------------- 1 | export interface OutsideClickProps { 2 | onOutsideClick: () => void; 3 | disabled?: boolean; 4 | className?: string; 5 | } 6 | -------------------------------------------------------------------------------- /packages/pebble-web/src/components/typings/PhoneNumberInput.ts: -------------------------------------------------------------------------------- 1 | import { SingleSelectProps } from "./Select"; 2 | import { SimpleInputProps } from "./Input"; 3 | import { Omit } from "utility-types"; 4 | 5 | export interface PhoneNumberInputProps { 6 | countryCode: OptionType; 7 | phone: string; 8 | onChange: ({ 9 | countryCode, 10 | phone 11 | }: { 12 | countryCode: OptionType; 13 | phone: string; 14 | }) => void; 15 | 16 | // Optional 17 | className?: string; 18 | selectProps?: Partial>; 19 | inputProps?: Omit; 20 | placeholder?: string; 21 | required?: boolean; 22 | } 23 | -------------------------------------------------------------------------------- /packages/pebble-web/src/components/typings/PopUp.ts: -------------------------------------------------------------------------------- 1 | import { ButtonProps } from "./Button"; 2 | 3 | export interface PopUpProps { 4 | visible: boolean; 5 | onApprove?: () => void; 6 | onReject?: () => void; 7 | onClose?: () => void; 8 | approveButtonText?: string | Element; 9 | rejectButtonText?: string | Element; 10 | approveButtonProps?: Omit; 11 | rejectButtonProps?: Omit; 12 | } 13 | -------------------------------------------------------------------------------- /packages/pebble-web/src/components/typings/Popper.ts: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { PopperProps as PopperProps_ } from "react-popper"; 3 | 4 | type Label = 5 | | string 6 | | number 7 | | ((args: { toggle: () => void; isOpen: boolean }) => React.ReactNode); 8 | 9 | export interface PopperProps 10 | extends Omit { 11 | label: Label; 12 | popperBackgroundColor?: string; 13 | children: (args: { toggle: () => void; isOpen: boolean }) => React.ReactNode; 14 | isOpen?: boolean; 15 | controlled?: boolean; 16 | popperClassName?: string; 17 | closeOnOutsideClick: boolean; 18 | onOutsideClick?: () => void; 19 | } 20 | 21 | export interface PopperState { 22 | isOpen: boolean; 23 | } 24 | -------------------------------------------------------------------------------- /packages/pebble-web/src/components/typings/PresetCalendar.ts: -------------------------------------------------------------------------------- 1 | import { DateRange } from "./Calendar"; 2 | 3 | export interface PresetDates { 4 | label: string; 5 | dateRange: [Date | undefined, Date | undefined]; 6 | } 7 | 8 | export type PresetCalendarProps = Omit & { 9 | defaultValue?: [Date | undefined, Date | undefined]; 10 | presetDateOptions: PresetDates[]; 11 | onApply: (value?: [Date, Date]) => void; 12 | isOpen: boolean; 13 | }; 14 | 15 | export interface PresetCalendarState { 16 | startTime?: Date; 17 | endTime?: Date; 18 | } 19 | -------------------------------------------------------------------------------- /packages/pebble-web/src/components/typings/Radio.ts: -------------------------------------------------------------------------------- 1 | import { Omit } from "utility-types"; 2 | import { ControlProps } from "./Control"; 3 | 4 | export type RadioProps = Omit, "type">; 5 | -------------------------------------------------------------------------------- /packages/pebble-web/src/components/typings/RadioGroup.ts: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | 3 | export interface RadioGroupProps { 4 | selected: OptionType; 5 | onChange: (value: OptionType | undefined, event: React.MouseEvent) => void; 6 | toggle?: boolean; 7 | className?: string; 8 | name: string; 9 | disabled?: boolean; 10 | } 11 | -------------------------------------------------------------------------------- /packages/pebble-web/src/components/typings/Rating.ts: -------------------------------------------------------------------------------- 1 | export interface RatingProps { 2 | name: string; 3 | maxRating: number; 4 | value: number; 5 | onChange: (value: number) => void; 6 | disabled?: boolean; 7 | className?: string; 8 | } 9 | 10 | export interface RatingState { 11 | stars: Array<{ active: boolean }>; 12 | } 13 | -------------------------------------------------------------------------------- /packages/pebble-web/src/components/typings/Search.ts: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | 3 | export interface SearchProps { 4 | type: "small" | "large" | "table"; 5 | onChange: (text: string) => void; 6 | value: string; 7 | placeholder: string; 8 | showSearchIcon?: boolean; 9 | className?: string; 10 | clearable?: boolean; 11 | inputProps?: React.InputHTMLAttributes; 12 | loading?: boolean; 13 | } 14 | -------------------------------------------------------------------------------- /packages/pebble-web/src/components/typings/SecondaryInput.ts: -------------------------------------------------------------------------------- 1 | export interface SecondaryInputProps { 2 | placeholder: string; 3 | value?: string | number; 4 | onChange: (text: string) => void; 5 | className?: string; 6 | required?: boolean; 7 | infoText?: string; 8 | readOnly?: boolean; 9 | successMessage?: string; 10 | disabled?: boolean; 11 | errorMessage?: string; 12 | inputClassName?: string; 13 | loading?: boolean; 14 | message?: string; 15 | inputProps?: React.InputHTMLAttributes & 16 | React.RefAttributes; 17 | } 18 | 19 | export interface SecondaryInputState { 20 | isFocused: boolean; 21 | } 22 | -------------------------------------------------------------------------------- /packages/pebble-web/src/components/typings/Sidebar.ts: -------------------------------------------------------------------------------- 1 | export interface SidebarProps { 2 | isOpen: boolean; 3 | width: number; 4 | onClose: () => void; 5 | closeOnOutsideClick?: boolean; 6 | onOutsideClick?: () => void; 7 | } 8 | -------------------------------------------------------------------------------- /packages/pebble-web/src/components/typings/Slider.ts: -------------------------------------------------------------------------------- 1 | import { Props } from "rheostat"; 2 | 3 | export interface SliderProps extends Props { 4 | className?: string; 5 | large?: boolean; 6 | title: string; 7 | valueLabelExtractor?: () => React.ReactNode; 8 | required?: boolean; 9 | } 10 | -------------------------------------------------------------------------------- /packages/pebble-web/src/components/typings/Switch.ts: -------------------------------------------------------------------------------- 1 | export interface SwitchProps { 2 | initialValue?: boolean; 3 | onChange?: (value: boolean) => void; 4 | className?: string; 5 | label?: string; 6 | disabled?: boolean; 7 | } 8 | 9 | export interface SwitchState { 10 | value: boolean; 11 | } 12 | -------------------------------------------------------------------------------- /packages/pebble-web/src/components/typings/Tabs.ts: -------------------------------------------------------------------------------- 1 | export interface TabsState { 2 | selectedTab: string | null; 3 | } 4 | 5 | export interface TabsProps { 6 | initialSelectedTab?: string; 7 | selectedTab?: string; 8 | tabs: string[]; 9 | tabClassName?: string; 10 | wrapClassName?: string; 11 | selectedTabClassName?: string; 12 | onTabChange?: (tab: string) => void; 13 | labels?: { [name: string]: string }; 14 | } 15 | 16 | export interface TabSectionProps { 17 | section: string; 18 | } 19 | -------------------------------------------------------------------------------- /packages/pebble-web/src/components/typings/Tag.ts: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { SetDifference } from "utility-types"; 3 | import { Colors } from "pebble-shared/dist/theme/typings/colors"; 4 | 5 | export interface TagProps { 6 | label: React.ReactNode; 7 | color: SetDifference; 8 | className?: string; 9 | onClose?: () => void; 10 | } 11 | -------------------------------------------------------------------------------- /packages/pebble-web/src/components/typings/Text.ts: -------------------------------------------------------------------------------- 1 | import { TypographyStyle } from "../../theme/typings/typography"; 2 | 3 | export interface TextProps { 4 | color?: string; 5 | className?: string; 6 | typography?: TypographyStyle; 7 | } 8 | -------------------------------------------------------------------------------- /packages/pebble-web/src/components/typings/TimePicker.ts: -------------------------------------------------------------------------------- 1 | export interface TimePickerProps { 2 | onHourChange: (value: number) => void; 3 | onMinuteChange: (value: number) => void; 4 | selectedHour?: number; 5 | selectedMinute?: number; 6 | twentyFourHourFormat?: boolean; 7 | } 8 | -------------------------------------------------------------------------------- /packages/pebble-web/src/components/typings/Toast.ts: -------------------------------------------------------------------------------- 1 | export type ToastType = "success" | "error"; 2 | 3 | export type ToastPosition = 4 | | "BOTTOM" 5 | | "BOTTOM_LEFT" 6 | | "BOTTOM_RIGHT" 7 | | "TOP" 8 | | "TOP_LEFT" 9 | | "TOP_RIGHT"; 10 | 11 | export interface ToastProps { 12 | className?: string; 13 | defaultTime?: number; 14 | defaultPosition?: ToastPosition; 15 | } 16 | 17 | export interface ToastState { 18 | type: ToastType; 19 | text: string; 20 | show: boolean; 21 | position?: ToastPosition; 22 | } 23 | -------------------------------------------------------------------------------- /packages/pebble-web/src/components/typings/Toggle.ts: -------------------------------------------------------------------------------- 1 | export interface ToggleProps { 2 | value: "ON" | "OFF"; 3 | onButtonText: string; 4 | offButtonText: string; 5 | onChange: () => void; 6 | } 7 | -------------------------------------------------------------------------------- /packages/pebble-web/src/components/typings/Tooltip.ts: -------------------------------------------------------------------------------- 1 | import * as PopperJS from "popper.js"; 2 | 3 | export interface TooltipProps { 4 | text: React.ReactNode; 5 | placement?: PopperJS.Placement; 6 | modifiers?: PopperJS.Modifiers; 7 | isOpen?: boolean; 8 | isError?: boolean; 9 | disabled?: boolean; 10 | label: (args: { 11 | onMouseEnter: () => void; 12 | onMouseLeave: () => void; 13 | }) => React.ReactNode; 14 | renderElement?: (args: { 15 | toggle: () => void; 16 | isOpen: boolean; 17 | }) => React.ReactNode; 18 | popperClassName?: string; 19 | } 20 | 21 | export interface TooltipState { 22 | isOpen: boolean; 23 | } 24 | -------------------------------------------------------------------------------- /packages/pebble-web/src/components/utils/getSelectedCheckboxes.ts: -------------------------------------------------------------------------------- 1 | export function getSelectedCheckboxes( 2 | changedValue: OptionType, 3 | prevSelected?: OptionType[] 4 | ): OptionType[] { 5 | const _selected = prevSelected || []; 6 | const cloned = _selected.slice(0); 7 | const index = _selected.findIndex(datum => datum === changedValue); 8 | if (index >= 0) { 9 | cloned.splice(index, 1); 10 | } else { 11 | cloned.push(changedValue); 12 | } 13 | return cloned; 14 | } 15 | -------------------------------------------------------------------------------- /packages/pebble-web/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./theme"; 2 | export * from "./components"; 3 | export * from "./utils/useragent"; 4 | 5 | import * as utils from "./utils"; 6 | import { colors } from "pebble-shared"; 7 | 8 | export { utils, colors }; 9 | -------------------------------------------------------------------------------- /packages/pebble-web/src/theme/constants.ts: -------------------------------------------------------------------------------- 1 | import { ThemeConstants } from "./typings/constants"; 2 | import { colors } from "pebble-shared"; 3 | 4 | export const constants: ThemeConstants = { 5 | borderRadius: 3, 6 | buttonHeight: 40, 7 | animationCurve: "cubic-bezier(.64,.09,.08,1)", 8 | padding: { 9 | base: 20, 10 | higher: 60 11 | }, 12 | 13 | border: { 14 | base: `1px solid ${colors.gray.light}`, 15 | light: `1px solid ${colors.gray.lighter}` 16 | }, 17 | 18 | boxShadow: { 19 | base: `0 2px 7px 0 #F2F2F2`, 20 | elevated: `0 4px 7px 0 ${colors.gray.light}`, 21 | xElevated: "0 2px 15px 0 rgba(0,0,0,0.1)" 22 | } 23 | }; 24 | -------------------------------------------------------------------------------- /packages/pebble-web/src/theme/index.ts: -------------------------------------------------------------------------------- 1 | import * as mixins from "./mixins"; 2 | import * as styles from "./styles"; 3 | 4 | export * from "./typography"; 5 | export * from "./constants"; 6 | export { mixins, styles }; 7 | -------------------------------------------------------------------------------- /packages/pebble-web/src/theme/mixins.ts: -------------------------------------------------------------------------------- 1 | export const textEllipsis = { 2 | overflowX: "hidden", 3 | textOverflow: "ellipsis", 4 | whiteSpace: "nowrap" 5 | } as const; 6 | 7 | export const flexRow = { 8 | display: "flex", 9 | flexDirection: "row" 10 | } as const; 11 | 12 | export const flexSpaceBetween = { 13 | ...flexRow, 14 | justifyContent: "space-between", 15 | alignContent: "initial" 16 | } as const; 17 | 18 | export const flexMiddleAlign = { 19 | display: "flex", 20 | alignItems: "center", 21 | justifyContent: "center" 22 | } as const; 23 | 24 | export const getPlaceholderStyle = (color: string) => 25 | ({ 26 | "::-webkit-input-placeholder": { color }, 27 | "::-moz-placeholder": { color }, 28 | ":-ms-input-placeholder": { color }, 29 | ":-moz-placeholder": { color }, 30 | "::placeholder": { color } 31 | } as const); 32 | -------------------------------------------------------------------------------- /packages/pebble-web/src/theme/typings/constants.ts: -------------------------------------------------------------------------------- 1 | // constants 2 | interface BoxShadow { 3 | base: string; 4 | elevated: string; 5 | xElevated: string; 6 | } 7 | 8 | interface Padding { 9 | [key: string]: number; 10 | } 11 | 12 | interface Border { 13 | [key: string]: string; 14 | } 15 | 16 | export interface ThemeConstants { 17 | buttonHeight: number; 18 | boxShadow: BoxShadow; 19 | borderRadius: number; 20 | animationCurve: string; 21 | padding: Padding; 22 | border: Border; 23 | } 24 | -------------------------------------------------------------------------------- /packages/pebble-web/src/theme/typings/typography.ts: -------------------------------------------------------------------------------- 1 | import * as CSS from "csstype"; 2 | 3 | export interface TypographyStyle { 4 | fontSize: CSS.FontSizeProperty; 5 | fontWeight: CSS.FontWeightProperty; 6 | color: CSS.ColorProperty; 7 | } 8 | 9 | export interface Type { 10 | light?: TypographyStyle; 11 | bold?: TypographyStyle; 12 | lighter?: TypographyStyle; 13 | link?: TypographyStyle; 14 | regular?: TypographyStyle; 15 | } 16 | 17 | export interface Typography { 18 | xll: Type; 19 | xl: Type; 20 | l: Type; 21 | normal: Type; 22 | s: Type; 23 | xs: Type; 24 | } 25 | -------------------------------------------------------------------------------- /packages/pebble-web/src/utils/analytics/ga.ts: -------------------------------------------------------------------------------- 1 | import isBrowser from "is-in-browser"; 2 | 3 | declare global { 4 | interface Window { 5 | GoogleAnalyticsObject: string; 6 | ga: UniversalAnalytics.ga; 7 | } 8 | } 9 | 10 | export function initGoogleAnalytics(gaId: string) { 11 | if (isBrowser) { 12 | ((s, o, g) => { 13 | window.GoogleAnalyticsObject = "ga"; 14 | window.ga = 15 | window.ga || 16 | (() => { 17 | (window.ga.q = window.ga.q || []).push(arguments); 18 | }); 19 | window.ga.l = Date.now(); 20 | const a = s.createElement(o) as HTMLScriptElement; 21 | const m = s.getElementsByTagName(o)[0]; 22 | a.async = true; 23 | a.src = g; 24 | if (m.parentNode) m.parentNode.insertBefore(a, m); 25 | })(document, "script", "https://www.google-analytics.com/analytics.js"); 26 | 27 | window.ga("create", gaId, "auto"); 28 | window.ga("send", "pageview"); 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /packages/pebble-web/src/utils/animation.ts: -------------------------------------------------------------------------------- 1 | import { State } from "react-spring"; 2 | 3 | export const animationConfig = { 4 | from: { opacity: 0, transform: "scale(0.95)" }, 5 | enter: { opacity: 1, transform: "scale(1)" }, 6 | leave: { opacity: 0, transform: "scale(0.95)", pointerEvents: "none" }, 7 | config: (_a: boolean, motion: State) => 8 | motion === "leave" ? { duration: 80 } : { duration: 200 } 9 | }; 10 | -------------------------------------------------------------------------------- /packages/pebble-web/src/utils/dimensions.ts: -------------------------------------------------------------------------------- 1 | import isBrowser from "is-in-browser"; 2 | 3 | function width() { 4 | return (isBrowser && window.screen.width) || 1025; 5 | } 6 | 7 | export const isDesktop = /*@__PURE__*/ width() >= 1024; 8 | -------------------------------------------------------------------------------- /packages/pebble-web/src/utils/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./strings/capitalize"; 2 | export * from "./numbers/format"; 3 | export * from "./analytics/ga"; 4 | export * from "./dimensions"; 5 | -------------------------------------------------------------------------------- /packages/pebble-web/src/utils/numbers/__tests__/format.test.ts: -------------------------------------------------------------------------------- 1 | import { getShortenedNumber } from "../format"; 2 | 3 | describe("utility: format", () => { 4 | test("getShortenedNumber: returns correct output", () => { 5 | expect(getShortenedNumber(0)).toEqual("0"); 6 | expect(getShortenedNumber(110)).toEqual("110"); 7 | expect(getShortenedNumber(110.1)).toEqual("110.1"); 8 | 9 | expect(getShortenedNumber(5098760909)).toEqual("509.9 Cr"); 10 | expect(getShortenedNumber(5098760909, 3)).toEqual("509.876 Cr"); 11 | 12 | expect(getShortenedNumber(120009)).toEqual("1.2 L"); 13 | expect(getShortenedNumber(120009, 6)).toEqual("1.200090 L"); 14 | 15 | expect(getShortenedNumber(15010, 0)).toEqual("15 K"); 16 | expect(getShortenedNumber(15010, 2)).toEqual("15.01 K"); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /packages/pebble-web/src/utils/numbers/format.ts: -------------------------------------------------------------------------------- 1 | export function getShortenedNumber( 2 | num?: number | null, 3 | toFixed: number = 1 4 | ): string | undefined { 5 | let formattedNum: string; 6 | if (!num && num !== 0) { 7 | return; 8 | } 9 | 10 | if (num >= 10000000) { 11 | formattedNum = (num / 10000000).toFixed(toFixed) + " Cr"; 12 | } else if (num >= 100000) { 13 | formattedNum = (num / 100000).toFixed(toFixed) + " L"; 14 | } else if (num >= 1000) { 15 | formattedNum = (num / 1000).toFixed(toFixed) + " K"; 16 | } else if (num !== Math.floor(num)) { 17 | // has decimal part 18 | formattedNum = `${num.toFixed(toFixed)}`; 19 | } else { 20 | formattedNum = `${num}`; 21 | } 22 | return formattedNum; 23 | } 24 | -------------------------------------------------------------------------------- /packages/pebble-web/src/utils/strings/__tests__/capitalize.test.ts: -------------------------------------------------------------------------------- 1 | import { capitalize } from "../capitalize"; 2 | 3 | describe("Utility: capitalize", () => { 4 | test("should convert a string into capitalized string", () => { 5 | expect(capitalize("hello world")).toEqual("Hello World"); 6 | expect(capitalize("hello")).toEqual("Hello"); 7 | expect(capitalize("Hello")).toEqual("Hello"); 8 | }); 9 | }); 10 | -------------------------------------------------------------------------------- /packages/pebble-web/src/utils/strings/capitalize.ts: -------------------------------------------------------------------------------- 1 | export function capitalize(str: string): string { 2 | return str 3 | ? str 4 | .split(" ") 5 | .map(s => s.charAt(0).toUpperCase() + s.slice(1)) 6 | .join(" ") 7 | : str; 8 | } 9 | -------------------------------------------------------------------------------- /packages/pebble-web/stories/button.story.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { storiesOf } from "@storybook/react"; 3 | import { boolean, select } from "@storybook/addon-knobs"; 4 | import { action } from "@storybook/addon-actions"; 5 | import Button from "../src/components/Button"; 6 | import { ButtonType, ButtonProps } from "../src/components/typings/Button"; 7 | 8 | const t = ["primary", "secondary", "link", "success", "alert"] as ButtonType[]; 9 | const size = ["x-small", "small", "large"]; 10 | 11 | storiesOf("Components/Button", module).add("Playground", () => ( 12 | 24 | )); 25 | -------------------------------------------------------------------------------- /packages/pebble-web/stories/checkbox.story.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { storiesOf } from "@storybook/react"; 3 | import { Checkbox } from "../src"; 4 | import { withState } from "@dump247/storybook-state"; 5 | import { boolean } from "@storybook/addon-knobs"; 6 | 7 | storiesOf("Components/Checkbox", module).add( 8 | "Default", 9 | withState({ checked: false })(({ store }) => ( 10 | store.set({ checked: !store.state.checked })} 13 | value="checkbox" 14 | label="I am a checkbox" 15 | disabled={boolean("disabled", false)} 16 | indeterminate={boolean("indeterminate", false)} 17 | /> 18 | )) 19 | ); 20 | -------------------------------------------------------------------------------- /packages/pebble-web/stories/checkboxGroup.story.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { storiesOf } from "@storybook/react"; 3 | import { Checkbox, CheckboxGroup } from "../src"; 4 | import { withState } from "@dump247/storybook-state"; 5 | 6 | storiesOf("Components/CheckboxGroup", module).add( 7 | "Default", 8 | withState({ value: ["radio"] })(({ store }) => ( 9 | 12 | store.set({ 13 | value: value as string[] 14 | }) 15 | } 16 | name="test" 17 | > 18 | 19 | 20 | 21 | )) 22 | ); 23 | -------------------------------------------------------------------------------- /packages/pebble-web/stories/loader.story.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { storiesOf } from "@storybook/react"; 3 | import { color, number } from "@storybook/addon-knobs"; 4 | import Loader from "../src/components/Loader"; 5 | 6 | storiesOf("Components/Loader", module).add("test", () => ( 7 | 8 | )); 9 | -------------------------------------------------------------------------------- /packages/pebble-web/stories/logo.story.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { storiesOf } from "@storybook/react"; 3 | import { number, color } from "@storybook/addon-knobs"; 4 | import Logo from "../src/components/Logo"; 5 | 6 | storiesOf("Components/Logo", module).add("test", () => ( 7 | 8 | )); 9 | -------------------------------------------------------------------------------- /packages/pebble-web/stories/message.story.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { storiesOf } from "@storybook/react"; 3 | import { select } from "@storybook/addon-knobs"; 4 | import Message from "../src/components/Message"; 5 | 6 | storiesOf("Components/Message", module).add("default", () => ( 7 | 11 | )); 12 | -------------------------------------------------------------------------------- /packages/pebble-web/stories/modal.story.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { storiesOf } from "@storybook/react"; 3 | import Modal from "../src/components/Modal"; 4 | import { css } from "emotion"; 5 | import { withState } from "@dump247/storybook-state"; 6 | import Button from "../src/components/Button"; 7 | import { colors } from "pebble-shared"; 8 | 9 | const style = css({ 10 | height: 200, 11 | width: 200, 12 | backgroundColor: colors.white.base 13 | }); 14 | 15 | interface State { 16 | show: boolean; 17 | } 18 | 19 | storiesOf("Components/Modal", module).add( 20 | "simple", 21 | withState({ show: false })(({ store }) => ( 22 | <> 23 | 24 | 25 |
26 | store.set({ show: false })} 29 | /> 30 |
31 | 32 | 33 | )) 34 | ); 35 | -------------------------------------------------------------------------------- /packages/pebble-web/stories/outsideClick.story.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { storiesOf } from "@storybook/react"; 3 | import Button from "../src/components/Button"; 4 | import OutsideClick from "../src/components/OutsideClick"; 5 | 6 | function noop() {} 7 | 8 | storiesOf("Utilities/OutsideClick", module).add("test", () => ( 9 | alert("You clicked outside")}> 10 | 11 | 12 | )); 13 | -------------------------------------------------------------------------------- /packages/pebble-web/stories/popper.story.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { storiesOf } from "@storybook/react"; 3 | import { Popper, Button, OptionGroupRadio, Option } from "../src"; 4 | 5 | storiesOf("Components/Popper", module).add("simple", () => ( 6 | } 8 | placement="left" 9 | modifiers={{ 10 | preventOverflow: { 11 | enabled: false 12 | }, 13 | flip: { 14 | enabled: false 15 | } 16 | }} 17 | > 18 | {({ toggle }) => ( 19 | 20 | 26 | )} 27 | 28 | )); 29 | -------------------------------------------------------------------------------- /packages/pebble-web/stories/popup.story.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { storiesOf } from "@storybook/react"; 3 | import { action } from "@storybook/addon-actions"; 4 | import PopUp from "../src/components/PopUp"; 5 | import { withState } from "@dump247/storybook-state"; 6 | import Button from "../src/components/Button"; 7 | 8 | interface State { 9 | show: boolean; 10 | } 11 | 12 | storiesOf("Components/PopUp", module).add( 13 | "simple", 14 | withState({ show: false })(({ store }) => ( 15 | <> 16 | 17 | store.set({ show: false })} 22 | approveButtonProps={{ loading: true }} 23 | > 24 |
Are you sure?
25 | 26 | 27 | )) 28 | ); 29 | -------------------------------------------------------------------------------- /packages/pebble-web/stories/radio.story.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { storiesOf } from "@storybook/react"; 3 | import { Radio } from "../src"; 4 | import { withState } from "@dump247/storybook-state"; 5 | import { boolean } from "@storybook/addon-knobs"; 6 | 7 | storiesOf("Components/Radio", module).add( 8 | "Default", 9 | withState({ checked: false })(({ store }) => ( 10 | store.set({ checked: !store.state.checked })} 13 | value="radio" 14 | label="I am radio button" 15 | disabled={boolean("disabled", false)} 16 | /> 17 | )) 18 | ); 19 | -------------------------------------------------------------------------------- /packages/pebble-web/stories/rating.story.tsx: -------------------------------------------------------------------------------- 1 | import { withState } from "@dump247/storybook-state"; 2 | import { number } from "@storybook/addon-knobs"; 3 | import { storiesOf } from "@storybook/react"; 4 | import * as React from "react"; 5 | import Rating from "../src/components/Rating"; 6 | 7 | interface State { 8 | value: number; 9 | } 10 | 11 | storiesOf("Components/Rating", module).add( 12 | "Default", 13 | withState({ value: 1 })(({ store }) => ( 14 | { 19 | store.set({ value }); 20 | }} 21 | /> 22 | )) 23 | ); 24 | -------------------------------------------------------------------------------- /packages/pebble-web/stories/switch.story.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { storiesOf } from "@storybook/react"; 3 | import Switch from "../src/components/Switch"; 4 | import { action } from "@storybook/addon-actions"; 5 | import { boolean, text } from "@storybook/addon-knobs"; 6 | 7 | storiesOf("Components/Switch", module).add("Default", () => ( 8 | 13 | )); 14 | -------------------------------------------------------------------------------- /packages/pebble-web/stories/tag.story.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { storiesOf } from "@storybook/react"; 3 | import { text, select } from "@storybook/addon-knobs"; 4 | import Tag from "../src/components/Tag"; 5 | import { TagProps } from "../src/components/typings/Tag"; 6 | import { colors } from "pebble-shared"; 7 | 8 | const _colors = Object.keys(colors).filter(x => "white" !== x) as Array< 9 | TagProps["color"] 10 | >; 11 | 12 | storiesOf("Components/Tag", module) 13 | .add("simple", () => ( 14 | 18 | )) 19 | .add("with cross", () => ( 20 | {}} 24 | /> 25 | )); 26 | -------------------------------------------------------------------------------- /packages/pebble-web/tests/__mocks__/fileMock.ts: -------------------------------------------------------------------------------- 1 | module.exports = "test-file-stub"; 2 | -------------------------------------------------------------------------------- /packages/pebble-web/tests/__setup__/matchers.ts: -------------------------------------------------------------------------------- 1 | import { ReactWrapper } from "enzyme"; 2 | import colors from "colors"; 3 | import cheerio from "cheerio"; 4 | 5 | declare global { 6 | namespace jest { 7 | interface Matchers { 8 | toNotBeInDOM(selector: string): R; 9 | } 10 | } 11 | } 12 | 13 | expect.extend({ 14 | toNotBeInDOM: (received: ReactWrapper, selector: string) => { 15 | const $ = cheerio.load(received.html()); 16 | 17 | if ($.html(selector)) { 18 | return { 19 | message: () => 20 | colors.green(`${received.name()} is not present in the DOM.`), 21 | pass: true 22 | }; 23 | } else { 24 | return { 25 | message: () => colors.red(`${received.name()} is present in the DOM.`), 26 | pass: false 27 | }; 28 | } 29 | } 30 | }); 31 | -------------------------------------------------------------------------------- /packages/pebble-web/tests/__setup__/setup.ts: -------------------------------------------------------------------------------- 1 | // tslint:disable-next-line no-var-requires 2 | require("babel-plugin-require-context-hook/register")(); 3 | -------------------------------------------------------------------------------- /packages/pebble-web/tests/__setup__/setupFramework.ts: -------------------------------------------------------------------------------- 1 | import serializer from "jest-emotion"; 2 | import Enzyme from "enzyme"; 3 | import Adapter from "enzyme-adapter-react-16"; 4 | import { createSerializer as enzymeSerializer } from "enzyme-to-json"; 5 | 6 | // @ts-ignore 7 | expect.addSnapshotSerializer(enzymeSerializer({ mode: "deep" })); 8 | 9 | Enzyme.configure({ adapter: new Adapter() }); 10 | 11 | expect.addSnapshotSerializer(serializer); 12 | -------------------------------------------------------------------------------- /packages/pebble-web/tests/build/fixture.js: -------------------------------------------------------------------------------- 1 | import "../../dist/pebble-web.es"; 2 | -------------------------------------------------------------------------------- /packages/pebble-web/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "declarationDir": "dist", 5 | "outDir": "compiled", 6 | "typeRoots": ["../../typings/npm", "../../node_modules/@types"] 7 | }, 8 | "include": ["./src", "../../typings/npm"], 9 | "exclude": ["node_modules", "dist", "tests", "compiled", "src/**/__tests__"] 10 | } 11 | -------------------------------------------------------------------------------- /packages/pebble-web/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.build.json", 3 | "include": [ 4 | "./src", 5 | "./stories", 6 | "./typings", 7 | "./tests", 8 | "./src/**/__tests__", 9 | "../../typings/npm" 10 | ], 11 | "compilerOptions": { 12 | "jsx": "react" 13 | }, 14 | "exclude": [] 15 | } 16 | -------------------------------------------------------------------------------- /patches/jest-emotion+10.0.32.patch: -------------------------------------------------------------------------------- 1 | diff --git a/node_modules/jest-emotion/types/index.d.ts b/node_modules/jest-emotion/types/index.d.ts 2 | index 86936ff..d788bb5 100644 3 | --- a/node_modules/jest-emotion/types/index.d.ts 4 | +++ b/node_modules/jest-emotion/types/index.d.ts 5 | @@ -33,7 +33,7 @@ export default serializer 6 | 7 | declare global { 8 | namespace jest { 9 | - interface Matchers { 10 | + interface Matchers { 11 | toHaveStyleRule( 12 | property: string, 13 | value: any, 14 | -------------------------------------------------------------------------------- /patches/mitt+2.1.0.patch: -------------------------------------------------------------------------------- 1 | diff --git a/node_modules/mitt/index.d.ts b/node_modules/mitt/index.d.ts 2 | index 55346dd..329d7f3 100644 3 | --- a/node_modules/mitt/index.d.ts 4 | +++ b/node_modules/mitt/index.d.ts 5 | @@ -1,5 +1,5 @@ 6 | export declare type EventType = string | symbol; 7 | -export declare type Handler = (event?: T) => void; 8 | +export declare type Handler = (event: T) => void; 9 | export declare type WildcardHandler = (type: EventType, event?: any) => void; 10 | export declare type EventHandlerList = Array; 11 | export declare type WildCardEventHandlerList = Array; 12 | -------------------------------------------------------------------------------- /tsconfig.base.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "skipLibCheck": true, 5 | "allowSyntheticDefaultImports": true, 6 | "allowUnreachableCode": true, 7 | "alwaysStrict": true, 8 | "declaration": true, 9 | "esModuleInterop": true, 10 | "experimentalDecorators": true, 11 | "importHelpers": true, 12 | "isolatedModules": false, 13 | "jsx": "preserve", 14 | "lib": ["dom", "es2015", "es2016"], 15 | "module": "esnext", 16 | "moduleResolution": "node", 17 | "noFallthroughCasesInSwitch": true, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "outDir": "compiled", 21 | "pretty": true, 22 | "removeComments": false, 23 | "sourceMap": true, 24 | "strict": true, 25 | "target": "esnext", 26 | "typeRoots": ["./node_modules/@types", "./typings/npm"] 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.base.json", 3 | "include": ["src", "stories", "typings/npm", "tests", "src/**/__tests__"], 4 | "compilerOptions": { 5 | "jsx": "react", 6 | "typeRoots": ["./node_modules/@types", "./typings/npm", "../../typings/npm"] 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /typings/npm/combos.d.ts: -------------------------------------------------------------------------------- 1 | declare module "combos" { 2 | interface Input { 3 | // tslint:disable-next-line no-any 4 | [key: string]: any[]; 5 | } 6 | 7 | export default function combos( 8 | inp: T 9 | ): Array<{ [P in keyof T]: T[P][0] }>; 10 | } 11 | -------------------------------------------------------------------------------- /typings/npm/react-calendar__Calendar.d.ts: -------------------------------------------------------------------------------- 1 | declare module "react-calendar/dist/Calendar" { 2 | import * as cal from "react-calendar"; 3 | export = cal; 4 | } 5 | -------------------------------------------------------------------------------- /typings/npm/storybook__addon-backgrounds.d.ts: -------------------------------------------------------------------------------- 1 | declare module "@storybook/addon-backgrounds" { 2 | import { DecoratorFn } from "@storybook/react"; 3 | export interface Background { 4 | name: string; 5 | value: string; 6 | default?: boolean; 7 | } 8 | export function withBackgrounds(backgrounds: Background[]): DecoratorFn; 9 | } 10 | -------------------------------------------------------------------------------- /typings/npm/storybook__addon-console.d.ts: -------------------------------------------------------------------------------- 1 | declare module "@storybook/addon-console" { 2 | import { DecoratorFn } from "@storybook/react"; 3 | interface StoryContext { 4 | kind: string; 5 | story: string; 6 | } 7 | export const withConsole: DecoratorFn; 8 | } 9 | -------------------------------------------------------------------------------- /typings/npm/storybook__addon-viewport.d.ts: -------------------------------------------------------------------------------- 1 | declare module "@storybook/addon-viewport" { 2 | import { DecoratorFn } from "@storybook/react"; 3 | export const withViewport: DecoratorFn; 4 | } 5 | --------------------------------------------------------------------------------