├── .bundlemonrc ├── .editorconfig ├── .eslintignore ├── .eslintrc.json ├── .github ├── actions │ ├── build_argos_desktop_cache │ │ └── action.yml │ ├── build_argos_kss_cache │ │ └── action.yml │ ├── build_argos_mobile_cache │ │ └── action.yml │ ├── build_cache │ │ └── action.yml │ ├── build_cache_read │ │ └── action.yml │ ├── setup_argos │ │ └── action.yml │ └── setup_modules │ │ └── action.yml ├── auto-merge.yml ├── dependabot.yml └── workflows │ └── deploy.yml ├── .gitignore ├── .npmignore ├── .nvmrc ├── .remarkignore ├── .remarkrc ├── .stylintrc ├── CHANGELOG.md ├── CODEOWNERS ├── LICENSE ├── assets ├── fonts │ ├── Lato-Bold.woff │ ├── Lato-Bold.woff2 │ ├── Lato-Regular.woff │ └── Lato-Regular.woff2 └── icons │ ├── animated │ ├── icon-check-animated.svg │ └── icon-cross-animated.svg │ ├── illus │ ├── account.svg │ ├── assistant.svg │ ├── bottom-select.svg │ ├── chat-text.svg │ ├── chat.svg │ ├── check-white.svg │ ├── cloud-broken.svg │ ├── cloud-sync.svg │ ├── cloud-sync2.svg │ ├── contacts-text.svg │ ├── contacts.svg │ ├── cozy-authentification.svg │ ├── cozy-logo.svg │ ├── cozy-upgrade.svg │ ├── cozy.svg │ ├── credit-card-large.svg │ ├── cross-white.svg │ ├── dash-white.svg │ ├── device-browser.svg │ ├── device-laptop.svg │ ├── device-phone.svg │ ├── device-tablet.svg │ ├── dots-white.svg │ ├── drive-text.svg │ ├── drive.svg │ ├── file-type-audio.svg │ ├── file-type-banking-account.svg │ ├── file-type-bin.svg │ ├── file-type-code.svg │ ├── file-type-files.svg │ ├── file-type-folder.svg │ ├── file-type-image.svg │ ├── file-type-note.svg │ ├── file-type-pdf.svg │ ├── file-type-server.svg │ ├── file-type-sheet.svg │ ├── file-type-slide.svg │ ├── file-type-text.svg │ ├── file-type-video.svg │ ├── file-type-zip.svg │ ├── forbidden-sign.svg │ ├── google.svg │ ├── keychain.svg │ ├── logout-large.svg │ ├── mail-text.svg │ ├── mail.svg │ ├── notes-text.svg │ ├── notes.svg │ ├── papers.svg │ ├── pass-text.svg │ ├── pass.svg │ ├── photos-text.svg │ ├── photos.svg │ ├── share-grey08.svg │ ├── store-text.svg │ ├── store.svg │ ├── top-select.svg │ ├── trash-duotone.svg │ ├── twake-text.svg │ ├── twake-workplace.svg │ └── workplace-text.svg │ └── ui │ ├── album-add.svg │ ├── album-remove.svg │ ├── album.svg │ ├── answer.svg │ ├── apple.svg │ ├── archive.svg │ ├── arrow-up.svg │ ├── attachment.svg │ ├── attention.svg │ ├── bank-check.svg │ ├── bank.svg │ ├── banking-add.svg │ ├── banking.svg │ ├── bell.svg │ ├── benefit.svg │ ├── bike.svg │ ├── bill.svg │ ├── bottom.svg │ ├── browser-brave.svg │ ├── browser-chrome.svg │ ├── browser-duckduckgo.svg │ ├── browser-edge-chromium.svg │ ├── browser-edge.svg │ ├── browser-firefox.svg │ ├── browser-ie.svg │ ├── browser-opera.svg │ ├── browser-safari.svg │ ├── burger.svg │ ├── bus.svg │ ├── calendar.svg │ ├── camera.svg │ ├── car.svg │ ├── carbonCopy.svg │ ├── carpooling.svg │ ├── categories.svg │ ├── certified.svg │ ├── check-circle.svg │ ├── check-list.svg │ ├── check-square.svg │ ├── check.svg │ ├── checkbox.svg │ ├── chess.svg │ ├── child.svg │ ├── circle-filled.svg │ ├── clock-outline.svg │ ├── clock.svg │ ├── cloud-happy.svg │ ├── cloud-plus-outlined.svg │ ├── cloud-rainbow.svg │ ├── cloud.svg │ ├── cloud2.svg │ ├── cocktail.svg │ ├── collect.svg │ ├── comment.svg │ ├── company.svg │ ├── compare.svg │ ├── compass.svg │ ├── connector.svg │ ├── contract.svg │ ├── contrast.svg │ ├── copy.svg │ ├── cozy-circle.svg │ ├── cozy-laugh.svg │ ├── cozy-lock.svg │ ├── cozy-release.svg │ ├── cozy-text.svg │ ├── credit-card-add.svg │ ├── credit-card.svg │ ├── credit.svg │ ├── crop.svg │ ├── cross-circle-outline.svg │ ├── cross-circle.svg │ ├── cross-medium.svg │ ├── cross-small.svg │ ├── cross.svg │ ├── cube.svg │ ├── dash.svg │ ├── dashboard.svg │ ├── data-control.svg │ ├── debit.svg │ ├── desktop-download.svg │ ├── devices.svg │ ├── discuss.svg │ ├── dots.svg │ ├── down.svg │ ├── download.svg │ ├── drawing-arrow-up.svg │ ├── dropdown-close.svg │ ├── dropdown-open.svg │ ├── dropdown.svg │ ├── dropup.svg │ ├── electric-bike.svg │ ├── electric-car.svg │ ├── electric-scooter.svg │ ├── email-notification.svg │ ├── email-open.svg │ ├── email.svg │ ├── eu.svg │ ├── euro.svg │ ├── exchange.svg │ ├── eye-closed.svg │ ├── eye.svg │ ├── face-id.svg │ ├── file-add.svg │ ├── file-duotone.svg │ ├── file-new.svg │ ├── file-none.svg │ ├── file-outline.svg │ ├── file.svg │ ├── filter.svg │ ├── fingerprint.svg │ ├── fitness.svg │ ├── flag-outlined.svg │ ├── flag.svg │ ├── flash-auto.svg │ ├── flashlight.svg │ ├── folder-add.svg │ ├── folder-moveto.svg │ ├── folder-open.svg │ ├── folder.svg │ ├── forbidden.svg │ ├── from-user.svg │ ├── gear.svg │ ├── globe.svg │ ├── gouv.svg │ ├── graph-circle.svg │ ├── grid.svg │ ├── group-list.svg │ ├── groups.svg │ ├── growth.svg │ ├── hand.svg │ ├── heart.svg │ ├── help-outlined.svg │ ├── help.svg │ ├── history.svg │ ├── home.svg │ ├── hourglass.svg │ ├── image.svg │ ├── info-outlined.svg │ ├── info.svg │ ├── justice.svg │ ├── key.svg │ ├── key2.svg │ ├── label-outlined.svg │ ├── label.svg │ ├── laptop.svg │ ├── laudry.svg │ ├── left.svg │ ├── library.svg │ ├── lightbulb.svg │ ├── lightning.svg │ ├── link-out.svg │ ├── link.svg │ ├── list-min.svg │ ├── list.svg │ ├── location.svg │ ├── lock-screen.svg │ ├── lock.svg │ ├── logout.svg │ ├── magic-trick.svg │ ├── magnet.svg │ ├── magnifier.svg │ ├── merge.svg │ ├── moped.svg │ ├── mosaic-min.svg │ ├── mosaic.svg │ ├── motorcycle.svg │ ├── mountain.svg │ ├── movement-in.svg │ ├── movement-out.svg │ ├── movement.svg │ ├── moveto.svg │ ├── multi-files.svg │ ├── music.svg │ ├── new.svg │ ├── next.svg │ ├── note.svg │ ├── notification-email.svg │ ├── number.svg │ ├── offline.svg │ ├── online.svg │ ├── openapp.svg │ ├── openwith.svg │ ├── palette.svg │ ├── paper.svg │ ├── paperplane.svg │ ├── password.svg │ ├── pen.svg │ ├── people.svg │ ├── peoples.svg │ ├── percent-circle.svg │ ├── percent.svg │ ├── permissions │ ├── accounts.svg │ ├── apps.svg │ ├── bank-accounts.svg │ ├── bank-groups.svg │ ├── bank-operations.svg │ ├── bank-recurrence.svg │ ├── bill-permissions.svg │ ├── bill.svg │ ├── bug-report.svg │ ├── calendar-permissions.svg │ ├── calendar.svg │ ├── category.svg │ ├── certified-permissions.svg │ ├── certified.svg │ ├── connected-clients.svg │ ├── consumption.svg │ ├── contacts-accounts.svg │ ├── contacts-groups.svg │ ├── contacts.svg │ ├── contract-permissions.svg │ ├── contract.svg │ ├── ecolyo.svg │ ├── energy.svg │ ├── energybreakdown.svg │ ├── fallback.svg │ ├── family.svg │ ├── files-pen.svg │ ├── files-versions.svg │ ├── files.svg │ ├── home-permissions.svg │ ├── home.svg │ ├── identities.svg │ ├── konnectors-result.svg │ ├── konnectors.svg │ ├── location-permissions.svg │ ├── location.svg │ ├── notifications.svg │ ├── opinions.svg │ ├── passwords.svg │ ├── permissions.svg │ ├── photos-album.svg │ ├── photos-settings.svg │ ├── profile.svg │ ├── safe-permissions.svg │ ├── safe.svg │ ├── settings.svg │ ├── sharings.svg │ ├── sinister.svg │ ├── tags.svg │ ├── task-to-effectuate.svg │ ├── triggers.svg │ └── versioning.svg │ ├── person-add.svg │ ├── personal-data.svg │ ├── phone-download.svg │ ├── phone-upload.svg │ ├── phone.svg │ ├── pie-chart.svg │ ├── pin.svg │ ├── plane.svg │ ├── plus-small.svg │ ├── plus.svg │ ├── pop-inside.svg │ ├── previous.svg │ ├── printer.svg │ ├── qualify.svg │ ├── radio-checked.svg │ ├── radio-unchecked.svg │ ├── refresh.svg │ ├── relationship.svg │ ├── remboursement.svg │ ├── rename.svg │ ├── repare.svg │ ├── reply.svg │ ├── restaurant.svg │ ├── restore-straight.svg │ ├── restore.svg │ ├── right.svg │ ├── rise.svg │ ├── rotate-left.svg │ ├── rotate-right.svg │ ├── sad-cozy.svg │ ├── safe.svg │ ├── school.svg │ ├── scooter.svg │ ├── security.svg │ ├── select-all.svg │ ├── server.svg │ ├── setting.svg │ ├── share-circle.svg │ ├── share-ios.svg │ ├── share.svg │ ├── shield.svg │ ├── shop.svg │ ├── sound.svg │ ├── spinner.svg │ ├── sport-bag.svg │ ├── stack.svg │ ├── star-outline.svg │ ├── star.svg │ ├── stats.svg │ ├── stop.svg │ ├── subway.svg │ ├── support.svg │ ├── swap.svg │ ├── sync-cozy.svg │ ├── sync.svg │ ├── tab.svg │ ├── tag.svg │ ├── target.svg │ ├── task.svg │ ├── team.svg │ ├── telecom.svg │ ├── telephone.svg │ ├── text-info.svg │ ├── text.svg │ ├── to-the-cloud.svg │ ├── top.svg │ ├── train.svg │ ├── tram.svg │ ├── trash.svg │ ├── trophy.svg │ ├── uncloud.svg │ ├── unknow.svg │ ├── unlink.svg │ ├── unlock.svg │ ├── up.svg │ ├── upload.svg │ ├── videos.svg │ ├── walk.svg │ ├── wallet-add.svg │ ├── wallet-new.svg │ ├── wallet.svg │ ├── warn.svg │ ├── warning-circle.svg │ ├── warning.svg │ ├── water.svg │ ├── work.svg │ └── wrench-circle.svg ├── babel.config.js ├── docs ├── README.md ├── _config.yml ├── cloud-wallpaper.jpg ├── components │ ├── DemoProvider.jsx │ ├── IntentExample.jsx │ ├── Readme.md │ ├── Readme │ │ ├── Readme.md │ │ └── index.js │ ├── SectionsRenderer.jsx │ ├── TableOfContentsRenderer.jsx │ ├── Variants.jsx │ ├── Variants.spec.jsx │ └── Wrapper.jsx ├── cozy-logo_white_128.png ├── dev.md ├── fixtures │ ├── content.js │ └── en.json ├── guidelines.md ├── how-to-extract.md ├── how-to-transpile.md ├── placeholders │ └── img.jsx ├── style.styl ├── styleguide.config.js ├── styleguide.setup.js ├── template.html ├── toc.yml ├── utils.js └── webpack.config.js ├── examples ├── parcel-app │ ├── .babelrc │ ├── App.js │ ├── README.md │ ├── dev │ ├── index.html │ ├── index.js │ ├── package.json │ └── yarn.lock └── webpack-app │ ├── .babelrc │ ├── App.js │ ├── index.html │ ├── index.js │ ├── package.json │ ├── webpack.config.js │ └── yarn.lock ├── index.js ├── jest.config.js ├── loaders └── strip-fill-loader.js ├── package.json ├── postcss.config.js ├── preprocess.js ├── react ├── Accordion │ ├── Readme.md │ └── index.js ├── AccordionActions │ └── index.js ├── AccordionDetails │ └── index.js ├── AccordionSummary │ ├── AccordionExpandIcon.jsx │ └── index.js ├── ActionsBar │ ├── Readme.md │ ├── ResponsiveAction.jsx │ ├── index.jsx │ └── locales │ │ ├── en.json │ │ ├── fr.json │ │ └── withActionsLocales.jsx ├── ActionsMenu │ ├── Actions │ │ ├── addToFavorites.js │ │ ├── call.js │ │ ├── copyToClipboard.js │ │ ├── divider.js │ │ ├── download.js │ │ ├── editAttribute.js │ │ ├── emailTo.js │ │ ├── helpers.js │ │ ├── helpers.spec.js │ │ ├── index.js │ │ ├── locales │ │ │ ├── en.json │ │ │ ├── fr.json │ │ │ └── withActionsLocales.jsx │ │ ├── modify.js │ │ ├── others.jsx │ │ ├── print.js │ │ ├── removeFromFavorites.js │ │ ├── smsTo.js │ │ ├── viewInContacts.js │ │ └── viewInDrive.js │ ├── ActionsItems.jsx │ ├── ActionsMenuItem.jsx │ ├── ActionsMenuMobileHeader.jsx │ ├── ActionsMenuWrapper.jsx │ ├── Readme.md │ └── index.jsx ├── Alert │ ├── Readme.md │ └── index.jsx ├── AlertTitle │ └── index.jsx ├── AppBar │ └── index.js ├── AppIcon │ ├── Readme.md │ ├── index.jsx │ ├── styles.styl │ └── test │ │ └── AppIcon.spec.js ├── AppLinker │ ├── Readme.md │ ├── __snapshots__ │ │ └── index.spec.jsx.snap │ ├── index.jsx │ ├── index.spec.jsx │ ├── native.config.js │ ├── native.js │ └── native.spec.js ├── AppSections │ ├── Readme.md │ ├── Sections.jsx │ ├── Sections.styl │ ├── __snapshots__ │ │ └── search.spec.js.snap │ ├── _mockApps.js │ ├── categories.js │ ├── categories.spec.js │ ├── components │ │ ├── AppsSection.jsx │ │ ├── AppsSection.spec.jsx │ │ ├── AppsSection.styl │ │ ├── DropdownFilter.jsx │ │ └── DropdownFilter.styl │ ├── constants.js │ ├── generateI18nConfig.ts │ ├── helpers.js │ ├── helpers.spec.js │ ├── index.jsx │ ├── index.spec.jsx │ ├── locales │ │ ├── en.json │ │ └── fr.json │ ├── search.js │ └── search.spec.js ├── AppTile │ ├── AppTile.spec.jsx │ ├── Readme.md │ ├── helpers.js │ ├── index.jsx │ ├── locales │ │ ├── en.json │ │ └── fr.json │ └── styles.styl ├── AppTitle │ ├── Readme.md │ ├── index.jsx │ └── styles.styl ├── Avatar │ ├── Readme.md │ ├── helpers.js │ └── index.jsx ├── AvatarGroup │ └── index.js ├── Backdrop │ └── index.js ├── Badge │ ├── Readme.md │ └── index.jsx ├── Banner │ ├── Readme.md │ ├── index.jsx │ ├── index.spec.jsx │ └── styles.styl ├── BarButton │ ├── Readme.md │ ├── index.jsx │ └── styles.styl ├── BarContextProvider │ ├── index.jsx │ └── index.spec.jsx ├── BarTitle │ ├── Readme.md │ ├── index.jsx │ └── styles.styl ├── BottomNavigation │ └── index.js ├── BottomNavigationAction │ └── index.js ├── BottomSheet │ ├── BackdropOrFragment.jsx │ ├── BottomSheet.jsx │ ├── BottomSheetHeader.jsx │ ├── BottomSheetItem.jsx │ ├── BottomSheetTitle.jsx │ ├── README.md │ ├── constants.js │ ├── helpers.js │ ├── helpers.spec.js │ ├── index.jsx │ └── styles.styl ├── Box │ └── index.js ├── Breadcrumbs │ ├── Readme.md │ └── index.js ├── Button │ └── index.js ├── ButtonBase │ └── index.js ├── Buttons │ ├── Readme.md │ └── index.jsx ├── Card │ ├── Readme.md │ ├── index.jsx │ └── styles.styl ├── CardActionArea │ └── index.js ├── CardActions │ └── index.js ├── CardContent │ └── index.js ├── CardHeader │ └── index.js ├── CardMedia │ └── index.js ├── Checkbox │ ├── Readme.md │ ├── index.jsx │ └── styles.styl ├── Chips │ ├── Readme.md │ └── index.jsx ├── CipherIcon │ ├── Readme.md │ ├── index.jsx │ └── index.spec.jsx ├── Circle │ ├── Readme.md │ ├── index.jsx │ └── styles.styl ├── CircleButton │ ├── Readme.md │ ├── helpers.js │ ├── helpers.spec.js │ └── index.jsx ├── CircularChart │ ├── CircularChartProgress.jsx │ ├── CircularProgressWithBackground.jsx │ ├── Readme.md │ ├── helper.spec.ts │ ├── helpers.ts │ └── index.jsx ├── CircularProgress │ └── index.js ├── ClickAwayListener │ └── index.js ├── Collapse │ └── index.js ├── ContactPicker │ ├── Readme.md │ ├── index.jsx │ ├── index.spec.jsx │ └── styles.styl ├── ContactsList │ ├── ContactRow.jsx │ ├── ContactRow.spec.js │ ├── Contacts │ │ ├── ContactCozy.jsx │ │ ├── ContactEmail.jsx │ │ ├── ContactIdentity.jsx │ │ ├── ContactName.jsx │ │ └── ContactPhone.jsx │ ├── ContactsList.jsx │ ├── Readme.md │ ├── _mockContacts.json │ ├── helpers.js │ ├── helpers.spec.js │ ├── index.js │ ├── locales │ │ ├── en.json │ │ ├── fr.json │ │ └── withContactsListLocales.jsx │ └── styles.styl ├── ContactsListModal │ ├── AddContact │ │ ├── AddContactActions.jsx │ │ ├── AddContactContent.jsx │ │ ├── AddContactDialog.jsx │ │ ├── AddContactTitle.jsx │ │ ├── helpers.js │ │ ├── helpers.spec.js │ │ └── styles.styl │ ├── ContactsListContent.jsx │ ├── ContactsListModal.jsx │ ├── ContactsListModalWithQuery.jsx │ ├── EmptyMessage.jsx │ ├── MobileHeader.jsx │ ├── Readme.md │ ├── index.jsx │ ├── locales │ │ ├── en.json │ │ └── fr.json │ ├── mockClient.jsx │ ├── queries.js │ ├── styles.styl │ └── withContactsListLocales.jsx ├── Container │ └── index.js ├── Counter │ ├── Readme.md │ └── index.jsx ├── CozyDialogs │ ├── ConfirmDialog.jsx │ ├── Dialog.jsx │ ├── DialogBackButton.jsx │ ├── DialogCloseButton.jsx │ ├── DialogTransition.jsx │ ├── FixedActionsDialog.jsx │ ├── FixedDialog.jsx │ ├── IllustrationDialog.jsx │ ├── PermissionDialog.jsx │ ├── Readme.md │ ├── SpecificDialogs │ │ ├── AllowLocationDialog.jsx │ │ ├── AuthentificationDialog.jsx │ │ ├── InstallFlagshipAppDialog.jsx │ │ ├── Readme.md │ │ ├── icons │ │ │ ├── CozyLocation.jsx │ │ │ ├── QRCodeInstallFlagshipAppDialog.png │ │ │ ├── appstore.png │ │ │ └── playstore.png │ │ ├── index.jsx │ │ ├── locales │ │ │ ├── en.json │ │ │ └── fr.json │ │ └── withSpecificDialogsLocales.jsx │ ├── TopAnchoredDialog.jsx │ ├── background.png │ ├── dialogPropTypes.js │ ├── e2e.js │ ├── index.jsx │ ├── locales.js │ ├── styles.styl │ ├── testing.js │ ├── testing.spec.jsx │ └── useCozyDialog.js ├── CssBaseline │ └── index.js ├── DateMonthPicker │ ├── Readme.md │ ├── index.jsx │ ├── index.spec.jsx │ └── styles.styl ├── DatePicker │ ├── Readme.md │ ├── helpers.js │ ├── helpers.spec.js │ ├── index.jsx │ └── locales │ │ ├── en.json │ │ ├── fr.json │ │ └── withOwnLocales.jsx ├── Dialog │ ├── DialogActions.jsx │ ├── DialogContent.jsx │ ├── DialogContentText.jsx │ ├── DialogEffects.spec.tsx │ ├── DialogEffects.ts │ ├── DialogTitle.jsx │ ├── Readme.md │ └── index.jsx ├── DialogActions │ └── index.js ├── DialogContent │ └── index.js ├── DialogContentText │ └── index.js ├── DialogTitle │ └── index.js ├── Divider │ ├── Readme.md │ ├── TextDivider │ │ ├── index.jsx │ │ └── styles.styl │ └── index.jsx ├── Drawer │ └── index.js ├── DropdownButton │ ├── Readme.md │ └── index.jsx ├── DropdownText │ ├── Readme.md │ └── index.jsx ├── Empty │ ├── Readme.md │ ├── index.jsx │ └── styles.styl ├── Fab │ ├── ExtendableFab.jsx │ ├── Readme.md │ └── index.js ├── Fade │ └── index.js ├── Field │ ├── Readme.md │ ├── index.jsx │ ├── index.spec.js │ └── styles.styl ├── Figure │ ├── Figure.jsx │ ├── Figure.md │ ├── Figure.spec.jsx │ ├── Figure.styl │ ├── FigureBlock.jsx │ ├── FigureBlock.md │ ├── FigureBlock.styl │ ├── __snapshots__ │ │ └── Figure.spec.jsx.snap │ └── index.js ├── FileImageLoader │ ├── Readme.md │ ├── checkImageSource.js │ ├── index.jsx │ └── index.spec.jsx ├── FileInput │ ├── Readme.md │ ├── index.jsx │ ├── index.spec.jsx │ └── styles.styl ├── FilePath │ ├── Readme.md │ ├── index.jsx │ └── styles.styl ├── FilePathLink │ ├── Readme.md │ └── index.jsx ├── FilePicker │ ├── FilePickerBody.jsx │ ├── FilePickerBodyItem.jsx │ ├── FilePickerBodyItem.spec.jsx │ ├── FilePickerBreadcrumb.jsx │ ├── FilePickerFooter.jsx │ ├── FilePickerFooter.spec.jsx │ ├── FilePickerHeader.jsx │ ├── Readme.md │ ├── docs │ │ └── DemoProvider.jsx │ ├── index.jsx │ ├── locales │ │ ├── en.json │ │ └── fr.json │ ├── queries.js │ └── styles.styl ├── Filename │ ├── Readme.md │ ├── index.jsx │ └── styles.styl ├── FilledInput │ └── index.js ├── FormControl │ └── index.js ├── FormControlLabel │ └── index.js ├── FormGroup │ └── index.js ├── FormHelperText │ └── index.js ├── FormLabel │ └── index.js ├── GhostFileBadge │ ├── Readme.md │ └── index.jsx ├── Grid │ ├── Readme.md │ └── index.js ├── GridList │ └── index.js ├── GridListTile │ └── index.js ├── GridListTileBar │ └── index.js ├── Grow │ └── index.js ├── Hero │ ├── Readme.md │ ├── index.jsx │ └── styles.styl ├── Hidden │ └── index.js ├── HistoryRow │ ├── Readme.md │ ├── index.jsx │ └── styles.styl ├── I18n │ ├── index.js │ └── withLocales.js ├── Icon │ ├── Readme.md │ ├── Sprite.jsx │ ├── index.jsx │ └── styles.styl ├── IconButton │ ├── Readme.md │ └── index.jsx ├── IconStack │ ├── Readme.md │ ├── index.jsx │ └── styles.styl ├── Icons │ ├── Account.jsx │ ├── Accounts.jsx │ ├── Album.jsx │ ├── AlbumAdd.jsx │ ├── AlbumRemove.jsx │ ├── Answer.jsx │ ├── Apple.jsx │ ├── Apps.jsx │ ├── Archive.jsx │ ├── ArrowUp.jsx │ ├── Assistant.jsx │ ├── Attachment.jsx │ ├── Attention.jsx │ ├── Bank.jsx │ ├── BankAccounts.jsx │ ├── BankCheck.jsx │ ├── BankGroups.jsx │ ├── BankOperations.jsx │ ├── BankRecurrence.jsx │ ├── Banking.jsx │ ├── BankingAdd.jsx │ ├── Bell.jsx │ ├── Benefit.jsx │ ├── Bike.jsx │ ├── Bill.jsx │ ├── BillPermissions.jsx │ ├── Bottom.jsx │ ├── BottomSelect.jsx │ ├── BrowserBrave.jsx │ ├── BrowserChrome.jsx │ ├── BrowserDuckduckgo.jsx │ ├── BrowserEdge.jsx │ ├── BrowserEdgeChromium.jsx │ ├── BrowserFirefox.jsx │ ├── BrowserIe.jsx │ ├── BrowserOpera.jsx │ ├── BrowserSafari.jsx │ ├── BugReport.jsx │ ├── Burger.jsx │ ├── Bus.jsx │ ├── Calendar.jsx │ ├── CalendarPermissions.jsx │ ├── Camera.jsx │ ├── Car.jsx │ ├── CarbonCopy.jsx │ ├── Carpooling.jsx │ ├── Categories.jsx │ ├── Category.jsx │ ├── Certified.jsx │ ├── CertifiedPermissions.jsx │ ├── Chat.jsx │ ├── ChatText.jsx │ ├── Check.jsx │ ├── CheckCircle.jsx │ ├── CheckList.jsx │ ├── CheckSquare.jsx │ ├── CheckWhite.jsx │ ├── Checkbox.jsx │ ├── Chess.jsx │ ├── Child.jsx │ ├── CircleFilled.jsx │ ├── Clock.jsx │ ├── ClockOutline.jsx │ ├── Cloud.jsx │ ├── Cloud2.jsx │ ├── CloudBroken.jsx │ ├── CloudHappy.jsx │ ├── CloudPlusOutlined.jsx │ ├── CloudRainbow.jsx │ ├── CloudSync.jsx │ ├── CloudSync2.jsx │ ├── Cocktail.jsx │ ├── Collect.jsx │ ├── Comment.jsx │ ├── Company.jsx │ ├── Compare.jsx │ ├── Compass.jsx │ ├── ConnectedClients.jsx │ ├── Connector.jsx │ ├── Consumption.jsx │ ├── Contacts.jsx │ ├── ContactsAccounts.jsx │ ├── ContactsGroups.jsx │ ├── ContactsText.jsx │ ├── Contract.jsx │ ├── ContractPermissions.jsx │ ├── Contrast.jsx │ ├── Copy.jsx │ ├── Cozy.jsx │ ├── CozyAuthentification.jsx │ ├── CozyCircle.jsx │ ├── CozyLaugh.jsx │ ├── CozyLock.jsx │ ├── CozyLogo.jsx │ ├── CozyRelease.jsx │ ├── CozyText.jsx │ ├── CozyUpgrade.jsx │ ├── Credit.jsx │ ├── CreditCard.jsx │ ├── CreditCardAdd.jsx │ ├── CreditCardLarge.jsx │ ├── Crop.jsx │ ├── Cross.jsx │ ├── CrossCircle.jsx │ ├── CrossCircleOutline.jsx │ ├── CrossMedium.jsx │ ├── CrossSmall.jsx │ ├── CrossWhite.jsx │ ├── Cube.jsx │ ├── Dash.jsx │ ├── DashWhite.jsx │ ├── Dashboard.jsx │ ├── DataControl.jsx │ ├── Debit.jsx │ ├── DesktopDownload.jsx │ ├── DeviceBrowser.jsx │ ├── DeviceLaptop.jsx │ ├── DevicePhone.jsx │ ├── DeviceTablet.jsx │ ├── Devices.jsx │ ├── Discuss.jsx │ ├── Dots.jsx │ ├── DotsWhite.jsx │ ├── Down.jsx │ ├── Download.jsx │ ├── DrawingArrowUp.jsx │ ├── Drive.jsx │ ├── DriveText.jsx │ ├── Dropdown.jsx │ ├── DropdownClose.jsx │ ├── DropdownOpen.jsx │ ├── Dropup.jsx │ ├── Ecolyo.jsx │ ├── ElectricBike.jsx │ ├── ElectricCar.jsx │ ├── ElectricScooter.jsx │ ├── Email.jsx │ ├── EmailNotification.jsx │ ├── EmailOpen.jsx │ ├── Energy.jsx │ ├── Energybreakdown.jsx │ ├── Eu.jsx │ ├── Euro.jsx │ ├── Exchange.jsx │ ├── Eye.jsx │ ├── EyeClosed.jsx │ ├── FaceId.jsx │ ├── Fallback.jsx │ ├── Family.jsx │ ├── File.jsx │ ├── FileAdd.jsx │ ├── FileDuotone.jsx │ ├── FileNew.jsx │ ├── FileNone.jsx │ ├── FileOutline.jsx │ ├── FileTypeAudio.jsx │ ├── FileTypeBankingAccount.jsx │ ├── FileTypeBin.jsx │ ├── FileTypeCode.jsx │ ├── FileTypeFiles.jsx │ ├── FileTypeFolder.jsx │ ├── FileTypeImage.jsx │ ├── FileTypeNote.jsx │ ├── FileTypePdf.jsx │ ├── FileTypeServer.jsx │ ├── FileTypeSheet.jsx │ ├── FileTypeSlide.jsx │ ├── FileTypeText.jsx │ ├── FileTypeVideo.jsx │ ├── FileTypeZip.jsx │ ├── Files.jsx │ ├── FilesPen.jsx │ ├── FilesVersions.jsx │ ├── Filter.jsx │ ├── Fingerprint.jsx │ ├── Fitness.jsx │ ├── Flag.jsx │ ├── FlagOutlined.jsx │ ├── FlashAuto.jsx │ ├── Flashlight.jsx │ ├── Folder.jsx │ ├── FolderAdd.jsx │ ├── FolderMoveto.jsx │ ├── FolderOpen.jsx │ ├── Forbidden.jsx │ ├── ForbiddenSign.jsx │ ├── FromUser.jsx │ ├── Gear.jsx │ ├── Globe.jsx │ ├── Google.jsx │ ├── Gouv.jsx │ ├── GraphCircle.jsx │ ├── Grid.jsx │ ├── GroupList.jsx │ ├── Groups.jsx │ ├── Growth.jsx │ ├── Hand.jsx │ ├── Heart.jsx │ ├── Help.jsx │ ├── HelpOutlined.jsx │ ├── History.jsx │ ├── Home.jsx │ ├── HomePermissions.jsx │ ├── Hourglass.jsx │ ├── IconCheckAnimated.jsx │ ├── IconCrossAnimated.jsx │ ├── Identities.jsx │ ├── Image.jsx │ ├── Info.jsx │ ├── InfoOutlined.jsx │ ├── Justice.jsx │ ├── Key.jsx │ ├── Key2.jsx │ ├── Keychain.jsx │ ├── Konnectors.jsx │ ├── KonnectorsResult.jsx │ ├── Label.jsx │ ├── LabelOutlined.jsx │ ├── Laptop.jsx │ ├── Laudry.jsx │ ├── Left.jsx │ ├── Library.jsx │ ├── Lightbulb.jsx │ ├── Lightning.jsx │ ├── Link.jsx │ ├── LinkOut.jsx │ ├── List.jsx │ ├── ListMin.jsx │ ├── Location.jsx │ ├── LocationPermissions.jsx │ ├── Lock.jsx │ ├── LockScreen.jsx │ ├── Logout.jsx │ ├── LogoutLarge.jsx │ ├── MagicTrick.jsx │ ├── Magnet.jsx │ ├── Magnifier.jsx │ ├── Mail.jsx │ ├── MailText.jsx │ ├── Merge.jsx │ ├── Moped.jsx │ ├── Mosaic.jsx │ ├── MosaicMin.jsx │ ├── Motorcycle.jsx │ ├── Mountain.jsx │ ├── Movement.jsx │ ├── MovementIn.jsx │ ├── MovementOut.jsx │ ├── Moveto.jsx │ ├── MultiFiles.jsx │ ├── Music.jsx │ ├── New.jsx │ ├── Next.jsx │ ├── Note.jsx │ ├── Notes.jsx │ ├── NotesText.jsx │ ├── NotificationEmail.jsx │ ├── Notifications.jsx │ ├── Number.jsx │ ├── Offline.jsx │ ├── Online.jsx │ ├── Openapp.jsx │ ├── Openwith.jsx │ ├── Opinions.jsx │ ├── Palette.jsx │ ├── Paper.jsx │ ├── Paperplane.jsx │ ├── Papers.jsx │ ├── Pass.jsx │ ├── PassText.jsx │ ├── Password.jsx │ ├── Passwords.jsx │ ├── Pen.jsx │ ├── People.jsx │ ├── Peoples.jsx │ ├── Percent.jsx │ ├── PercentCircle.jsx │ ├── Permissions.jsx │ ├── PersonAdd.jsx │ ├── PersonalData.jsx │ ├── Phone.jsx │ ├── PhoneDownload.jsx │ ├── PhoneUpload.jsx │ ├── Photos.jsx │ ├── PhotosAlbum.jsx │ ├── PhotosSettings.jsx │ ├── PhotosText.jsx │ ├── PieChart.jsx │ ├── Pin.jsx │ ├── Plane.jsx │ ├── Plus.jsx │ ├── PlusSmall.jsx │ ├── PopInside.jsx │ ├── Previous.jsx │ ├── Printer.jsx │ ├── Profile.jsx │ ├── Qualify.jsx │ ├── RadioChecked.jsx │ ├── RadioUnchecked.jsx │ ├── Refresh.jsx │ ├── Relationship.jsx │ ├── Remboursement.jsx │ ├── Rename.jsx │ ├── Repare.jsx │ ├── Reply.jsx │ ├── Restaurant.jsx │ ├── Restore.jsx │ ├── RestoreStraight.jsx │ ├── Right.jsx │ ├── Rise.jsx │ ├── RotateLeft.jsx │ ├── RotateRight.jsx │ ├── SadCozy.jsx │ ├── Safe.jsx │ ├── SafePermissions.jsx │ ├── School.jsx │ ├── Scooter.jsx │ ├── Security.jsx │ ├── SelectAll.jsx │ ├── Server.jsx │ ├── Setting.jsx │ ├── Settings.jsx │ ├── Share.jsx │ ├── ShareCircle.jsx │ ├── ShareGrey08.jsx │ ├── ShareIos.jsx │ ├── Sharings.jsx │ ├── Shield.jsx │ ├── Shop.jsx │ ├── Sinister.jsx │ ├── Sound.jsx │ ├── Spinner.jsx │ ├── SportBag.jsx │ ├── Stack.jsx │ ├── Star.jsx │ ├── StarOutline.jsx │ ├── Stats.jsx │ ├── Stop.jsx │ ├── Store.jsx │ ├── StoreText.jsx │ ├── Subway.jsx │ ├── Support.jsx │ ├── Swap.jsx │ ├── Sync.jsx │ ├── SyncCozy.jsx │ ├── Tab.jsx │ ├── Tag.jsx │ ├── Tags.jsx │ ├── Target.jsx │ ├── Task.jsx │ ├── TaskToEffectuate.jsx │ ├── Team.jsx │ ├── Telecom.jsx │ ├── Telephone.jsx │ ├── Text.jsx │ ├── TextInfo.jsx │ ├── ToTheCloud.jsx │ ├── Top.jsx │ ├── TopSelect.jsx │ ├── Train.jsx │ ├── Tram.jsx │ ├── Trash.jsx │ ├── TrashDuotone.jsx │ ├── Triggers.jsx │ ├── Trophy.jsx │ ├── TwakeText.jsx │ ├── TwakeWorkplace.jsx │ ├── Uncloud.jsx │ ├── Unknow.jsx │ ├── Unlink.jsx │ ├── Unlock.jsx │ ├── Up.jsx │ ├── Upload.jsx │ ├── Versioning.jsx │ ├── Videos.jsx │ ├── Walk.jsx │ ├── Wallet.jsx │ ├── WalletAdd.jsx │ ├── WalletNew.jsx │ ├── Warn.jsx │ ├── Warning.jsx │ ├── WarningCircle.jsx │ ├── Water.jsx │ ├── Work.jsx │ ├── WorkplaceText.jsx │ └── WrenchCircle.jsx ├── InfosBadge │ ├── Readme.md │ └── index.jsx ├── Input │ ├── Readme.md │ ├── index.jsx │ └── styles.styl ├── InputAdornment │ └── index.js ├── InputBase │ └── index.js ├── InputGroup │ ├── Readme.md │ ├── index.jsx │ └── styles.styl ├── IntentDialogOpener │ ├── IntentDialogOpener.jsx │ ├── IntentDialogOpener.md │ └── index.js ├── IntentHeader │ ├── index.jsx │ └── styles.styl ├── IntentIframe │ ├── IntentIframe.jsx │ ├── Readme.md │ ├── index.js │ └── styles.styl ├── IntentWrapper │ ├── index.jsx │ └── styles.styl ├── Label │ ├── Readme.md │ ├── index.jsx │ └── styles.styl ├── Labs │ ├── CollectionField │ │ ├── Readme.md │ │ ├── index.jsx │ │ └── styles.styl │ ├── ExperimentalDialog │ │ └── index.jsx │ ├── IconGrid │ │ ├── Readme.md │ │ ├── index.jsx │ │ └── styles.styl │ ├── PasswordInput │ │ ├── Readme.md │ │ ├── helpers.js │ │ ├── helpers.spec.js │ │ ├── index.jsx │ │ └── styles.styl │ ├── Readme.md │ └── index.jsx ├── Layout │ ├── Layout.jsx │ ├── Layout.md │ ├── index.js │ └── styles.styl ├── LinearProgress │ └── index.js ├── Link │ └── index.js ├── List │ ├── Readme.md │ └── index.js ├── ListItem │ ├── ExpandedAttributes │ │ ├── ExpandedAttribute.jsx │ │ ├── helpers.js │ │ ├── helpers.spec.js │ │ └── index.jsx │ ├── ListItemBase │ │ ├── Renaming │ │ │ ├── RenameDialog.jsx │ │ │ ├── RenameInput.jsx │ │ │ └── helpers.js │ │ └── index.jsx │ ├── ListItemByDoc │ │ └── index.jsx │ ├── ListItemContact │ │ ├── helpers.js │ │ ├── helpers.spec.js │ │ ├── index.jsx │ │ └── useActions.jsx │ ├── ListItemFile │ │ ├── ExpirationAnnotation.jsx │ │ ├── ItemIcon.jsx │ │ ├── PrimaryText.jsx │ │ ├── SecondaryText.jsx │ │ └── index.jsx │ ├── Readme.md │ ├── hoc │ │ └── withListItemLocales.jsx │ ├── index.js │ └── locales │ │ ├── en.json │ │ └── fr.json ├── ListItemAvatar │ └── index.js ├── ListItemIcon │ └── index.js ├── ListItemSecondaryAction │ └── index.js ├── ListItemText │ ├── Readme.md │ └── index.jsx ├── ListSubheader │ ├── Readme.md │ └── index.js ├── LoadMore │ ├── Readme.md │ └── index.jsx ├── Markdown │ ├── Readme.md │ └── index.jsx ├── Menu │ ├── Readme.md │ └── index.js ├── MenuItem │ └── index.js ├── MenuList │ └── index.js ├── MidEllipsis │ ├── Readme.md │ └── index.jsx ├── MobileStepper │ ├── Readme.md │ └── index.js ├── Modal │ └── index.js ├── MuiCozyTheme │ ├── Divider │ │ └── index.jsx │ ├── List │ │ └── index.jsx │ ├── ListItem │ │ └── index.jsx │ ├── ListItemIcon │ │ └── index.jsx │ ├── ListItemSecondaryAction │ │ └── index.jsx │ ├── Readme.md │ ├── helpers.js │ ├── index.jsx │ ├── makePalette.js │ ├── makeTheme.jsx │ ├── makeTypography.js │ ├── overrides │ │ ├── makeDarkInvertedOverrides.js │ │ ├── makeDarkNormalOverrides.js │ │ ├── makeLightInvertedOverrides.js │ │ └── makeLightNormalOverrides.js │ └── theme.jsx ├── MuiTabs │ ├── Readme.md │ └── index.jsx ├── NativeSelect │ └── index.js ├── Nav │ ├── index.jsx │ ├── locales │ │ ├── en.json │ │ ├── fr.json │ │ └── withNavLocales.jsx │ └── styles.styl ├── NavigationList │ ├── Readme.md │ ├── index.jsx │ └── styles.styl ├── NestedSelect │ ├── BottomSheet.jsx │ ├── ItemRow.jsx │ ├── Modal.jsx │ ├── NestedSelect.jsx │ ├── NestedSelect.md │ ├── NestedSelect.spec.jsx │ ├── NestedSelectResponsive.jsx │ ├── helpers.js │ ├── helpers.spec.js │ ├── index.jsx │ ├── styles.styl │ └── testing.js ├── NoSsr │ └── index.js ├── OrderedList │ ├── Readme.md │ ├── index.jsx │ └── styles.styl ├── OutlinedInput │ └── index.js ├── Page │ ├── Readme.md │ ├── index.jsx │ ├── keyboard.js │ └── styles.styl ├── Panel │ ├── index.jsx │ └── styles.styl ├── Paper │ ├── Readme.md │ └── index.js ├── PasswordExample │ ├── Readme.md │ ├── index.jsx │ └── styles.styl ├── PasswordField │ ├── Readme.md │ ├── index.jsx │ └── locales │ │ ├── en.json │ │ └── fr.json ├── Paywall │ ├── MaxAccountsByKonnectorPaywall.jsx │ ├── MaxAccountsPaywall.jsx │ ├── MaxDaysToCapturePaywall.jsx │ ├── MaxPapersPaywall.jsx │ ├── OnlyOfficePaywall.jsx │ ├── PasswordSharingPaywall.jsx │ ├── Paywall.jsx │ ├── Paywall.spec.jsx │ ├── QuotaPaywall.jsx │ ├── Readme.md │ ├── helpers.js │ ├── howto.md │ ├── index.jsx │ └── locales │ │ ├── en.json │ │ ├── fr.json │ │ └── withPaywallLocales.jsx ├── PieChart │ ├── Readme.md │ ├── index.jsx │ └── index.spec.jsx ├── PointerAlert │ ├── Readme.md │ └── index.jsx ├── Popover │ └── index.js ├── Popper │ ├── index.js │ └── testing.js ├── Popup │ ├── Readme.md │ ├── index.jsx │ └── index.spec.jsx ├── PopupOpener │ ├── Readme.md │ └── index.jsx ├── Portal │ └── index.jsx ├── Progress │ ├── Readme.md │ └── index.js ├── ProgressionBanner │ ├── Readme.md │ └── index.jsx ├── QualificationGrid │ ├── Readme.md │ ├── helpers.js │ ├── index.jsx │ └── locales │ │ ├── en.json │ │ ├── fr.json │ │ └── withLocales.jsx ├── QualificationIconStack │ ├── Readme.md │ └── index.jsx ├── QualificationItem │ ├── Readme.md │ └── index.jsx ├── QualificationModal │ ├── Readme.md │ ├── helpers.js │ ├── helpers.spec.js │ ├── index.jsx │ └── locales │ │ ├── en.json │ │ ├── fr.json │ │ └── index.jsx ├── README.md ├── RadioGroup │ └── index.js ├── Radios │ ├── Readme.md │ └── index.jsx ├── RootRef │ └── index.js ├── ScopedCssBaseline │ └── index.js ├── SearchBar │ ├── Readme.md │ ├── index.jsx │ └── locales │ │ ├── en.json │ │ ├── fr.json │ │ └── withOnlyLocales.jsx ├── Select │ └── index.js ├── SelectBox │ ├── ControlDefault.jsx │ ├── Readme.md │ ├── SelectBox.jsx │ ├── SelectBoxWithFixedOptions.jsx │ ├── index.jsx │ ├── styles.styl │ └── test │ │ └── SelectBox.spec.js ├── SelectionBar │ ├── Readme.md │ ├── SelectionBarAction.jsx │ ├── SelectionBarMore.jsx │ ├── helpers.js │ ├── helpers.spec.js │ ├── index.jsx │ ├── styles.styl │ └── useMaxActions.jsx ├── ShortcutTile │ └── index.tsx ├── Sidebar │ ├── Readme.md │ ├── index.jsx │ └── styles.styl ├── Skeleton │ └── index.js ├── Skeletons │ ├── ListItemSkeleton.jsx │ ├── ListSkeleton.jsx │ ├── Readme.md │ └── index.js ├── Slide │ └── index.js ├── Slider │ └── index.js ├── Snackbar │ ├── Readme.md │ └── index.jsx ├── SnackbarContent │ └── index.js ├── Spinner │ ├── Readme.md │ ├── index.jsx │ └── styles.styl ├── SquareAppIcon │ ├── Readme.md │ ├── SquareAppIcon.spec.js │ ├── __snapshots__ │ │ └── SquareAppIcon.spec.js.snap │ ├── constants.json │ ├── index.jsx │ └── styles.styl ├── Stack │ ├── Readme.md │ ├── index.jsx │ └── styles.styl ├── Step │ └── index.js ├── StepButton │ └── index.js ├── StepConnector │ └── index.js ├── StepContent │ └── index.js ├── StepIcon │ └── index.js ├── StepLabel │ └── index.js ├── Stepper │ ├── Readme.md │ ├── index.jsx │ └── testing.jsx ├── SvgIcon │ └── index.js ├── SwipeableDrawer │ └── index.js ├── Switch │ ├── Readme.md │ └── index.jsx ├── Tab │ └── index.js ├── Table │ ├── Readme.md │ ├── Virtualized │ │ ├── Cell.jsx │ │ ├── Dnd │ │ │ ├── CustomDrag │ │ │ │ ├── CustomDragLayer.jsx │ │ │ │ ├── DragPreview.jsx │ │ │ │ └── DragPreviewWrapper.jsx │ │ │ ├── DnDConfigWrapper.jsx │ │ │ └── TableRow.jsx │ │ ├── FixedHeaderContent.jsx │ │ ├── HeadCell.jsx │ │ ├── RowContent.jsx │ │ ├── helpers.js │ │ ├── helpers.spec.js │ │ ├── index.jsx │ │ └── virtuosoComponents.jsx │ └── index.js ├── TableBody │ └── index.js ├── TableCell │ └── index.js ├── TableContainer │ └── index.js ├── TableFooter │ └── index.js ├── TableHead │ └── index.js ├── TablePagination │ └── index.js ├── TableRow │ └── index.js ├── TableSortLabel │ └── index.js ├── Tabs │ ├── Readme.md │ └── index.jsx ├── TextField │ ├── MobileSelect.jsx │ ├── Readme.md │ └── index.jsx ├── Textarea │ ├── Readme.md │ ├── index.jsx │ └── styles.styl ├── TextareaAutosize │ └── index.js ├── Thumbnail │ ├── Readme.md │ ├── Thumbnail.styl │ └── index.jsx ├── Tile │ ├── index.jsx │ └── styles.styl ├── Timeline │ └── index.js ├── TimelineConnector │ └── index.js ├── TimelineContent │ └── index.js ├── TimelineDot │ └── index.js ├── TimelineItem │ └── index.js ├── TimelineOppositeContent │ └── index.js ├── TimelineSeparator │ └── index.js ├── Toggle │ ├── index.jsx │ └── styles.styl ├── ToggleButton │ ├── Readme.md │ └── index.js ├── ToggleButtonGroup │ ├── Readme.md │ └── index.js ├── Toolbar │ └── index.js ├── Tooltip │ ├── Readme.md │ └── index.jsx ├── Typography │ ├── Readme.md │ └── index.jsx ├── UnorderedList │ ├── Readme.md │ ├── index.jsx │ └── styles.styl ├── UploadQueue │ ├── FileUploadProgress.jsx │ ├── Item.jsx │ ├── Pending.jsx │ ├── Readme.md │ ├── RemainingTime.jsx │ ├── helpers.js │ ├── index.jsx │ ├── index.spec.jsx │ ├── locales │ │ ├── en.json │ │ ├── es.json │ │ └── fr.json │ ├── styles.styl │ └── useStatusIcon.js ├── Wizard │ ├── Readme.md │ ├── index.jsx │ └── styles.styl ├── Zoom │ └── index.js ├── deprecated │ ├── ActionMenu │ │ ├── ActionMenuEffects.ts │ │ ├── ActionMenuHeader.jsx │ │ ├── ActionMenuItem.jsx │ │ ├── ActionMenuItemWrapper.jsx │ │ ├── ActionMenuRadio.jsx │ │ ├── ActionMenuWithClose.jsx │ │ ├── ActionMenuWrapper.jsx │ │ ├── Actions │ │ │ ├── ActionsItems.jsx │ │ │ ├── call.js │ │ │ ├── emailTo.js │ │ │ ├── helpers.js │ │ │ ├── helpers.spec.js │ │ │ ├── hr.js │ │ │ ├── index.js │ │ │ ├── locales │ │ │ │ ├── en.json │ │ │ │ ├── fr.json │ │ │ │ └── withActionsLocales.jsx │ │ │ ├── modify.js │ │ │ ├── smsTo.js │ │ │ └── viewInContacts.js │ │ ├── NotInlineWrapper.jsx │ │ ├── Readme.md │ │ ├── index.jsx │ │ └── styles.styl │ ├── Alerter │ │ ├── Alert.jsx │ │ ├── Readme.md │ │ ├── index.jsx │ │ └── styles.styl │ ├── BottomDrawer │ │ ├── Readme.md │ │ ├── index.jsx │ │ └── styles.styl │ ├── Button │ │ ├── Readme.md │ │ ├── index.jsx │ │ └── styles.styl │ ├── ButtonAction │ │ ├── index.jsx │ │ └── styles.styl │ ├── Chip │ │ ├── Readme.md │ │ ├── index.jsx │ │ └── styles.styl │ ├── CompositeRow │ │ ├── Readme.md │ │ ├── index.jsx │ │ └── styles.styl │ ├── GridItem │ │ ├── Readme.md │ │ ├── index.jsx │ │ └── styles.styl │ ├── Infos │ │ ├── Readme.md │ │ ├── index.jsx │ │ └── styles.styl │ ├── InfosCarrousel │ │ ├── Readme.md │ │ ├── index.jsx │ │ └── styles.styl │ ├── InlineCard │ │ ├── Readme.md │ │ ├── index.jsx │ │ └── styles.styl │ ├── IntentModal │ │ ├── IntentModal.jsx │ │ ├── IntentModal.md │ │ ├── index.js │ │ └── styles.styl │ ├── IntentOpener │ │ ├── IntentOpener.jsx │ │ ├── IntentOpener.md │ │ └── index.js │ ├── Media │ │ ├── Media.jsx │ │ ├── Readme.md │ │ ├── index.js │ │ └── styles.styl │ ├── Menus │ │ ├── Readme.md │ │ └── index.js │ ├── Modal │ │ ├── AnimatedContentHeader.jsx │ │ ├── ModalBackButton.jsx │ │ ├── ModalButtons.jsx │ │ ├── ModalContent.jsx │ │ ├── ModalCross.jsx │ │ ├── ModalEffects.ts │ │ ├── ModalFooter.jsx │ │ ├── ModalHeader.jsx │ │ ├── ModalSection.jsx │ │ ├── Readme.md │ │ ├── index.jsx │ │ └── styles.styl │ ├── NarrowContent │ │ ├── Readme.md │ │ ├── index.jsx │ │ └── styles.styl │ ├── Overlay │ │ ├── Readme.md │ │ ├── index.jsx │ │ └── styles.styl │ ├── PercentageBar │ │ ├── Readme.md │ │ ├── index.jsx │ │ └── styles.styl │ ├── PercentageLine │ │ ├── PercentageLine.styl │ │ ├── Readme.md │ │ └── index.jsx │ ├── PushClientButton │ │ ├── Readme.md │ │ ├── index.jsx │ │ ├── index.spec.jsx │ │ └── styles.styl │ ├── QuotaAlert │ │ ├── Readme.md │ │ └── index.jsx │ ├── Radio │ │ ├── Readme.md │ │ ├── index.jsx │ │ ├── index.spec.jsx │ │ └── styles.styl │ ├── RaisedList │ │ ├── README.md │ │ └── index.js │ ├── Table │ │ ├── Readme.md │ │ ├── index.jsx │ │ └── styles.styl │ ├── ViewStack │ │ ├── ModalStack.jsx │ │ ├── Readme.md │ │ ├── ViewStack.jsx │ │ ├── context.js │ │ ├── example.jsx │ │ ├── hooks.js │ │ └── index.js │ └── readme.md ├── helpers │ ├── acceptedTypes.js │ ├── acceptedTypes.spec.js │ ├── appDataset.js │ ├── appDataset.spec.js │ ├── breakpoints.js │ ├── createDepreciationLogger.js │ ├── createDepreciationLogger.spec.js │ ├── getRandomUUID.js │ ├── getRandomUUID.spec.js │ ├── getSafeArea.ts │ ├── isTesting.js │ ├── migrateProps.jsx │ ├── ref.js │ ├── ref.spec.js │ ├── useProgression.jsx │ ├── withBreakpoints.jsx │ ├── withOffline.jsx │ └── withState.jsx ├── hooks │ ├── useBreakpoints.md │ ├── useBrowserOffline.js │ ├── useBrowserOffline.md │ ├── useBrowserOffline.spec.js │ ├── useClientErrors.jsx │ ├── useClientErrors.spec.jsx │ ├── useConfirmExit │ │ ├── Readme.md │ │ ├── index.jsx │ │ ├── index.spec.js │ │ └── locales │ │ │ ├── en.json │ │ │ └── fr.json │ ├── useCycle.jsx │ ├── useCycle.md │ ├── useCycle.spec.jsx │ ├── useEventListener.js │ ├── useEventListener.md │ ├── useEventListener.spec.js │ ├── useMediaQuery.js │ ├── usePeriodicRender.js │ ├── usePeriodicRender.md │ ├── usePeriodicRender.spec.js │ ├── useRealtime.js │ ├── useRealtime.spec.js │ ├── useScroll.jsx │ ├── useScroll.md │ ├── useScroll.spec.jsx │ └── useSetFlagshipUi │ │ ├── helpers.js │ │ ├── useSetFlagshipUI.spec.ts │ │ └── useSetFlagshipUI.ts ├── index.js ├── jestLib │ └── I18n.js ├── legacy │ ├── Avatar │ │ ├── Readme.md │ │ ├── helpers.js │ │ ├── index.jsx │ │ └── styles.styl │ ├── Breadcrumbs │ │ ├── Readme.md │ │ ├── index.jsx │ │ └── styles.styl │ └── readme.md ├── mocks │ └── apps.js ├── proptypes.js ├── providers │ ├── Alert │ │ ├── Readme.md │ │ └── index.jsx │ ├── Breakpoints │ │ ├── Readme.md │ │ └── index.jsx │ ├── CozyTheme │ │ ├── CozyThemeWithQuery.jsx │ │ ├── DumbCozyTheme.jsx │ │ ├── Readme.md │ │ ├── index.jsx │ │ └── queries.js │ ├── DemoProvider.jsx │ ├── Encrypted │ │ └── index.jsx │ ├── I18n │ │ ├── createUseI18n.jsx │ │ ├── format.jsx │ │ ├── format.spec.jsx │ │ ├── helpers.js │ │ ├── index.jsx │ │ ├── index.spec.jsx │ │ ├── translate.jsx │ │ ├── translation.jsx │ │ ├── useExtendI18n.jsx │ │ ├── withLocales.jsx │ │ ├── withLocales.spec.jsx │ │ └── withOnlyLocales.jsx │ ├── Intent │ │ └── index.jsx │ └── Readme.md ├── styles │ └── index.js ├── types.d.ts ├── types.js ├── utils.jsx └── utils │ ├── color.js │ ├── color.spec.js │ ├── dom.jsx │ └── react.js ├── release.config.js ├── renovate.json ├── rsgscreenshots.json ├── scripts ├── babel-transform-relative-paths-plugin.js ├── build-utils.js ├── generate-svgr-icon.sh ├── make-icon-sprite.sh ├── make-palette.sh ├── pixelmatch-server │ ├── index.hbs │ ├── pixelmatch.js │ ├── queue.js │ ├── server.js │ └── spawnPromise.js ├── removeEmptyCss.js ├── removeEmptyCss.spec.js ├── screenshots.js ├── screenshots │ ├── fetchAllComponents.js │ ├── helpers.js │ ├── parser.js │ ├── prepares.js │ ├── screenshotComponent.js │ ├── screenshotKSSStyleguide.js │ └── screenshotReactStyleguide.js └── svgr-template.js ├── stylus ├── components │ ├── accordion.styl │ ├── action-menu.styl │ ├── alerts.styl │ ├── apptitle.styl │ ├── avatar.styl │ ├── button.styl │ ├── card.styl │ ├── chip.styl │ ├── circle.styl │ ├── empty.styl │ ├── forms.styl │ ├── list.styl │ ├── menu.styl │ ├── modals.styl │ ├── nav.styl │ ├── overlay.styl │ ├── panels.styl │ ├── popover.styl │ ├── sections.styl │ ├── selectionbar.styl │ ├── table.styl │ ├── tabs.styl │ └── wizard.styl ├── cozy-ui │ ├── build.styl │ ├── index.styl │ └── utils.styl ├── elements │ └── defaults.styl ├── generic │ ├── animations.styl │ └── normalize.styl ├── index.js ├── objects │ ├── layouts.styl │ ├── media.styl │ └── sidebar.styl ├── scripts │ └── deprecate.js ├── settings │ ├── breakpoints.styl │ ├── fontstack.styl │ ├── icons.styl │ ├── palette.json │ ├── palettes.styl │ ├── radius.styl │ ├── shadows.styl │ ├── spaces.styl │ ├── themes │ │ ├── dark-inverted.styl │ │ ├── dark-normal.styl │ │ ├── light-inverted.styl │ │ └── light-normal.styl │ ├── typography.styl │ └── z-index.styl ├── styleguide.md ├── tools │ └── mixins.styl └── utilities │ ├── bgcolor.styl │ ├── border.styl │ ├── boxsizing.styl │ ├── card.styl │ ├── colors.styl │ ├── cursor.styl │ ├── debug.styl │ ├── dimensions.styl │ ├── display.styl │ ├── effects.styl │ ├── elevation.styl │ ├── filter.styl │ ├── flexbox.styl │ ├── list.styl │ ├── media.styl │ ├── opacity.styl │ ├── overflow.styl │ ├── position.styl │ ├── spaces.styl │ ├── stack.styl │ ├── text.styl │ └── typography.styl ├── svgo.config.js ├── test ├── __mocks__ │ └── fileMock.js ├── basefont.styl └── jestsetup.js ├── theme ├── palette.json └── shadows.js ├── tsconfig-build.json ├── tsconfig.json └── yarn.lock /.bundlemonrc: -------------------------------------------------------------------------------- 1 | { 2 | "baseDir": ".", 3 | "files": [ 4 | { 5 | "path": "dist/cozy-ui.min.css" 6 | }, 7 | { 8 | "path": "dist/cozy-ui.utils.min.css" 9 | }, 10 | { 11 | "path": "transpiled/react/stylesheet.css" 12 | } 13 | ], 14 | "groups": [ 15 | { 16 | "path": "transpiled/react/**" 17 | } 18 | ], 19 | "reportOutput": ["github"] 20 | } 21 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # editorconfig.org 4 | 5 | root = true 6 | 7 | [*] 8 | end_of_line = lf 9 | charset = utf-8 10 | trim_trailing_whitespace = true 11 | insert_final_newline = true 12 | indent_style = space 13 | indent_size = 2 14 | 15 | [*.styl] 16 | indent_size = 4 17 | 18 | [*.md] 19 | trim_trailing_whitespace = false 20 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | react/Icon/icons-sprite.js 2 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["cozy-app/react"], 3 | "rules": { 4 | "no-console": "off", 5 | "no-param-reassign": "error", 6 | "react/display-name": "off", 7 | "react-hooks/exhaustive-deps": "error" 8 | }, 9 | "globals": { 10 | "mount": true, 11 | "shallow": true 12 | }, 13 | "settings": { 14 | "react": { 15 | "version": "16.5.2" 16 | } 17 | }, 18 | "parserOptions": { 19 | "project": "tsconfig.json" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /.github/actions/build_argos_desktop_cache/action.yml: -------------------------------------------------------------------------------- 1 | name: "Cache Argos desktop" 2 | 3 | runs: 4 | using: "composite" 5 | steps: 6 | - name: Cache Argos desktop 7 | id: cache-argos-desktop 8 | uses: actions/cache@v4 9 | env: 10 | cache-name: cache-argos-desktop 11 | with: 12 | path: | 13 | ${{ github.workspace }}/screenshots/reactDesktop 14 | key: ${{ runner.os }}-${{ env.cache-name }}-${{ github.run_id }} 15 | -------------------------------------------------------------------------------- /.github/actions/build_argos_kss_cache/action.yml: -------------------------------------------------------------------------------- 1 | name: "Cache Argos kss" 2 | 3 | runs: 4 | using: "composite" 5 | steps: 6 | - name: Cache Argos kss 7 | id: cache-argos-kss 8 | uses: actions/cache@v4 9 | env: 10 | cache-name: cache-argos-kss 11 | with: 12 | path: | 13 | ${{ github.workspace }}/screenshots/kss 14 | key: ${{ runner.os }}-${{ env.cache-name }}-${{ github.run_id }} 15 | -------------------------------------------------------------------------------- /.github/actions/build_argos_mobile_cache/action.yml: -------------------------------------------------------------------------------- 1 | name: "Cache Argos mobile" 2 | 3 | runs: 4 | using: "composite" 5 | steps: 6 | - name: Cache Argos mobile 7 | id: cache-argos-mobile 8 | uses: actions/cache@v4 9 | env: 10 | cache-name: cache-argos-mobile 11 | with: 12 | path: | 13 | ${{ github.workspace }}/screenshots/reactMobile 14 | key: ${{ runner.os }}-${{ env.cache-name }}-${{ github.run_id }} 15 | -------------------------------------------------------------------------------- /.github/auto-merge.yml: -------------------------------------------------------------------------------- 1 | minApprovals: 2 | MEMBER: 1 3 | requiredLabels: 4 | - merge 5 | reportStatus: true 6 | blockingChecks: 7 | status: 'pending' 8 | mergeMethod: rebase 9 | -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | updates: 3 | - package-ecosystem: "npm" 4 | directory: "/" 5 | commit-message: 6 | # Prefix all commit messages with "fix" 7 | prefix: "fix" 8 | schedule: 9 | interval: "weekly" 10 | day: "saturday" 11 | labels: 12 | - ":package: dependencies" 13 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | 20 2 | -------------------------------------------------------------------------------- /.remarkignore: -------------------------------------------------------------------------------- 1 | CHANGELOG.md 2 | -------------------------------------------------------------------------------- /.remarkrc: -------------------------------------------------------------------------------- 1 | { 2 | "settings": { 3 | "bullet": "*", 4 | "fences": true, 5 | "listItemIndent": "1" 6 | }, 7 | "plugins": [ 8 | "remark-preset-lint-recommended", 9 | ["lint-list-item-indent", "space"] 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /CODEOWNERS: -------------------------------------------------------------------------------- 1 | # General code owners 2 | * @JF-Cozy @Merkur39 @Ldoppea @zatteo 3 | -------------------------------------------------------------------------------- /assets/fonts/Lato-Bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cozy/cozy-ui/2cee962e6185e5916ab61dae163ff87e1e6dba92/assets/fonts/Lato-Bold.woff -------------------------------------------------------------------------------- /assets/fonts/Lato-Bold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cozy/cozy-ui/2cee962e6185e5916ab61dae163ff87e1e6dba92/assets/fonts/Lato-Bold.woff2 -------------------------------------------------------------------------------- /assets/fonts/Lato-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cozy/cozy-ui/2cee962e6185e5916ab61dae163ff87e1e6dba92/assets/fonts/Lato-Regular.woff -------------------------------------------------------------------------------- /assets/fonts/Lato-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cozy/cozy-ui/2cee962e6185e5916ab61dae163ff87e1e6dba92/assets/fonts/Lato-Regular.woff2 -------------------------------------------------------------------------------- /assets/icons/illus/account.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/illus/bottom-select.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/illus/check-white.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/illus/credit-card-large.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/illus/dash-white.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /assets/icons/illus/device-laptop.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/illus/device-phone.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/illus/device-tablet.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/illus/file-type-video.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/illus/top-select.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/illus/trash-duotone.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/album-add.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/album-remove.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/album.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/archive.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/attachment.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/attention.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/bank-check.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/bank.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/banking-add.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/banking.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/bill.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/bottom.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/browser-safari.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/icons/ui/burger.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/calendar.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/categories.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/check-list.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/check-square.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/check.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/circle-filled.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/clock-outline.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/clock.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/cloud-happy.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/icons/ui/cocktail.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/comment.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/compare.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/compass.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/contract.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/contrast.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/copy.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/cozy-laugh.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/icons/ui/credit-card-add.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/credit-card.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/credit.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /assets/icons/ui/crop.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/cross-medium.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/cross-small.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/cross.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/dash.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/dashboard.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/data-control.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/debit.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/desktop-download.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/devices.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/dots.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/down.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/download.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/dropdown.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/dropup.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/email.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/exchange.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/file-add.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/file-new.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/file-outline.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/file.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/fitness.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/flag-outlined.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/flag.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/flash-auto.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/flashlight.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/folder-add.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/folder-moveto.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/folder.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/forbidden.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/globe.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/graph-circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/grid.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/group-list.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/groups.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/growth.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/heart.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/help-outlined.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/help.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/history.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/home.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/hourglass.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/image.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/info-outlined.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/key.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/label-outlined.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/label.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/laptop.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/left.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/lightbulb.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/lightning.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/link-out.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/link.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/list-min.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/list.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/location.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/logout.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/magnet.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/icons/ui/magnifier.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/merge.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/mosaic-min.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/mountain.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/movement-in.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/movement-out.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/movement.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/moveto.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/multi-files.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/music.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/new.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/notification-email.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/online.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/openwith.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/paperplane.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/people.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/percent-circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/percent.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/permissions/bank-accounts.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/permissions/calendar-permissions.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/permissions/consumption.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/permissions/contacts-groups.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/permissions/energy.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/permissions/energybreakdown.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/permissions/fallback.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/permissions/home-permissions.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/permissions/home.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/permissions/konnectors-result.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/permissions/location.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/permissions/opinions.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/permissions/photos-album.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/permissions/sinister.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/permissions/tags.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/permissions/task-to-effectuate.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/permissions/triggers.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/permissions/versioning.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/phone-download.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/phone-upload.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/phone.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/pin.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/plane.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/pop-inside.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/previous.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/printer.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/qualify.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/radio-checked.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/radio-unchecked.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/refresh.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/rename.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/reply.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/restaurant.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/right.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/rise.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/school.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/security.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/select-all.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/share-circle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/icons/ui/shield.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/sport-bag.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/stack.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/star-outline.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/star.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/stats.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/stop.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/swap.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/sync.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/tab.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/tag.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/task.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/text-info.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/text.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/top.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/trash.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/upload.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/videos.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/walk.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/wallet-add.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/icons/ui/wallet-new.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/icons/ui/wallet.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/warn.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/warning-circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/warning.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/ui/work.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-cayman 2 | -------------------------------------------------------------------------------- /docs/cloud-wallpaper.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cozy/cozy-ui/2cee962e6185e5916ab61dae163ff87e1e6dba92/docs/cloud-wallpaper.jpg -------------------------------------------------------------------------------- /docs/components/Readme.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/components/Readme/Readme.md: -------------------------------------------------------------------------------- 1 | Welcome on Cozy-ui documentation. Cozy-ui is largely based on [Material-ui v4](https://v4.mui.com/) so this documentation only presents the high-level components and the overridden Mui components. 2 | 3 | You can find everything you need to know about cozy-ui there : 4 | 5 | Use left sidebar to pick a component and see how it works. 6 | -------------------------------------------------------------------------------- /docs/components/Readme/index.js: -------------------------------------------------------------------------------- 1 | // useless mandatory file for styleguidist docu 2 | -------------------------------------------------------------------------------- /docs/components/SectionsRenderer.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import DefaultSectionsRenderer from 'react-styleguidist/lib/client/rsg-components/Sections/SectionsRenderer' 3 | 4 | export default class SectionsRenderer extends Component { 5 | render() { 6 | return ( 7 | <> 8 | {this.props.children} 9 | 10 | ) 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /docs/cozy-logo_white_128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cozy/cozy-ui/2cee962e6185e5916ab61dae163ff87e1e6dba92/docs/cozy-logo_white_128.png -------------------------------------------------------------------------------- /docs/how-to-extract.md: -------------------------------------------------------------------------------- 1 | ## How to extract particular styles from Cozy-UI 2 | 3 | Sometimes, you only need some parts of Cozy UI. You can 4 | manually use `stylus`. 5 | 6 | ``` 7 | $ git clone git@github.com:cozy/cozy-ui.git 8 | $ cd cozy-ui 9 | $ yarn stylus react/Button/styles.styl 10 | compiled react/Button/styles.css 11 | ``` 12 | -------------------------------------------------------------------------------- /docs/style.styl: -------------------------------------------------------------------------------- 1 | @require 'cozy-ui' 2 | 3 | html, body 4 | height auto 5 | overflow auto 6 | 7 | -------------------------------------------------------------------------------- /docs/styleguide.setup.js: -------------------------------------------------------------------------------- 1 | import '!!style-loader!css-loader!../transpiled/react/stylesheet.css' 2 | import '!!style-loader!css-loader!../dist/cozy-ui.utils.min.css' 3 | 4 | window.SHOW_DEPRECATION_WARNINGS = true 5 | -------------------------------------------------------------------------------- /docs/template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | <%=htmlWebpackPlugin.options.title%> 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /docs/toc.yml: -------------------------------------------------------------------------------- 1 | - README: ./README.md 2 | -------------------------------------------------------------------------------- /examples/parcel-app/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "babelrc": false, 3 | "presets": ["env", "react"], 4 | "plugins": ["react-hot-loader/babel", "transform-class-properties"] 5 | } 6 | -------------------------------------------------------------------------------- /examples/parcel-app/README.md: -------------------------------------------------------------------------------- 1 | Parcel app using Cozy UI. 2 | 3 | ⚠️ Due to a problem with .babelrc loading, you need to temporarily move 4 | the `.babelrc` at cozy-ui root folder to run this example. 5 | 6 | ``` 7 | $ mv ../../.babelrc ../../.babelrc.bak 8 | $ yarn dev 9 | $ mv ../../.babelrc.bak ../../.babelrc 10 | ``` 11 | -------------------------------------------------------------------------------- /examples/parcel-app/index.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | -------------------------------------------------------------------------------- /examples/parcel-app/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { render } from 'react-dom' 3 | import App from './App' 4 | 5 | const node = document.querySelector('#app') 6 | render(, node) 7 | -------------------------------------------------------------------------------- /examples/parcel-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "parcel-app", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "license": "MIT", 6 | "scripts": { 7 | "dev": "./dev" 8 | }, 9 | "devDependencies": { 10 | "babel-core": "^6.26.3" 11 | }, 12 | "dependencies": { 13 | "parcel-bundler": "^1.10.3" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /examples/webpack-app/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env", "@babel/preset-react"], 3 | "plugins": ["react-hot-loader/babel", "transform-class-properties"] 4 | } 5 | -------------------------------------------------------------------------------- /examples/webpack-app/index.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | export default {} 2 | -------------------------------------------------------------------------------- /loaders/strip-fill-loader.js: -------------------------------------------------------------------------------- 1 | const isIcon = function (resourcePath) { 2 | return resourcePath.indexOf('/icon-') > -1 && resourcePath.indexOf('-white') === -1 3 | } 4 | 5 | module.exports = function (source) { 6 | this.cacheable(true) 7 | if (!isIcon(this.resourcePath)) { 8 | // Bail out if it is not an icon 9 | return source 10 | } 11 | const replaced = source 12 | .replace(/fill=["']#f{3,6}["']/gi, '') 13 | return replaced 14 | } 15 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require('cssnano')({ 4 | preset: [ 5 | 'advanced', 6 | { 7 | mergeIdents: false, 8 | reduceIdents: false, 9 | zindex: false 10 | } 11 | ] 12 | }) 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /preprocess.js: -------------------------------------------------------------------------------- 1 | const stylus = require('stylus') 2 | const cozyStylusPlugin = require('./stylus') 3 | 4 | const renderStylus = function(css, filename) { 5 | try { 6 | return stylus(css) 7 | .use(cozyStylusPlugin()) 8 | .set('filename', filename) 9 | .render() 10 | } catch (e) { 11 | console.log(e) 12 | } 13 | } 14 | 15 | module.exports = renderStylus 16 | -------------------------------------------------------------------------------- /react/Accordion/index.js: -------------------------------------------------------------------------------- 1 | import Accordion from '@material-ui/core/Accordion' 2 | 3 | export default Accordion 4 | -------------------------------------------------------------------------------- /react/AccordionActions/index.js: -------------------------------------------------------------------------------- 1 | import MuiAccordionActions from '@material-ui/core/AccordionActions' 2 | 3 | export default MuiAccordionActions 4 | -------------------------------------------------------------------------------- /react/AccordionDetails/index.js: -------------------------------------------------------------------------------- 1 | import AccordionDetails from '@material-ui/core/AccordionDetails' 2 | 3 | export default AccordionDetails 4 | -------------------------------------------------------------------------------- /react/AccordionSummary/AccordionExpandIcon.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | import Icon from '../Icon' 4 | import BottomIcon from '../Icons/Bottom' 5 | 6 | const AccordionExpandIcon = () => 7 | 8 | export default AccordionExpandIcon 9 | -------------------------------------------------------------------------------- /react/AccordionSummary/index.js: -------------------------------------------------------------------------------- 1 | import AccordionSummary from '@material-ui/core/AccordionSummary' 2 | import React from 'react' 3 | 4 | import AccordionExpandIcon from './AccordionExpandIcon' 5 | 6 | AccordionSummary.defaultProps = { 7 | expandIcon: 8 | } 9 | 10 | export default AccordionSummary 11 | -------------------------------------------------------------------------------- /react/ActionsBar/locales/en.json: -------------------------------------------------------------------------------- 1 | { 2 | "selected": "%{smart_count} item selected |||| %{smart_count} items selected", 3 | "selected_light": "%{smart_count} item |||| %{smart_count} items" 4 | } 5 | -------------------------------------------------------------------------------- /react/ActionsBar/locales/fr.json: -------------------------------------------------------------------------------- 1 | { 2 | "selected": "%{smart_count} élément sélectionné |||| %{smart_count} éléments sélectionnés", 3 | "selected_light": "%{smart_count} élément |||| %{smart_count} éléments" 4 | } 5 | -------------------------------------------------------------------------------- /react/ActionsBar/locales/withActionsLocales.jsx: -------------------------------------------------------------------------------- 1 | import en from './en.json' 2 | import fr from './fr.json' 3 | import withOnlyLocales from '../../providers/I18n/withOnlyLocales' 4 | 5 | export const locales = { 6 | en, 7 | fr 8 | } 9 | 10 | export default withOnlyLocales(locales) 11 | -------------------------------------------------------------------------------- /react/ActionsMenu/Actions/divider.js: -------------------------------------------------------------------------------- 1 | import React, { forwardRef } from 'react' 2 | 3 | import Divider from '../../Divider' 4 | 5 | export const divider = () => { 6 | return { 7 | name: 'divider', 8 | Component: forwardRef((props, ref) => { 9 | return 10 | }) 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /react/ActionsMenu/Actions/locales/withActionsLocales.jsx: -------------------------------------------------------------------------------- 1 | import en from './en.json' 2 | import fr from './fr.json' 3 | import { getI18n } from '../../../providers/I18n/helpers' 4 | import withOnlyLocales from '../../../providers/I18n/withOnlyLocales' 5 | 6 | export const locales = { 7 | en, 8 | fr 9 | } 10 | 11 | export const getActionsI18n = () => getI18n(undefined, lang => locales[lang]) 12 | export default withOnlyLocales(locales) 13 | -------------------------------------------------------------------------------- /react/ActionsMenu/Actions/others.jsx: -------------------------------------------------------------------------------- 1 | import { getActionsI18n } from './locales/withActionsLocales' 2 | import DotsIcon from '../../Icons/Dots' 3 | 4 | export const others = () => { 5 | const { t } = getActionsI18n() 6 | 7 | return { 8 | name: 'others', 9 | label: t('others'), 10 | icon: DotsIcon 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /react/AlertTitle/index.jsx: -------------------------------------------------------------------------------- 1 | import MuiAlertTitle from '@material-ui/lab/AlertTitle' 2 | 3 | export default MuiAlertTitle 4 | -------------------------------------------------------------------------------- /react/AppBar/index.js: -------------------------------------------------------------------------------- 1 | import MuiAppBar from '@material-ui/core/AppBar' 2 | 3 | export default MuiAppBar 4 | -------------------------------------------------------------------------------- /react/AppLinker/__snapshots__/index.spec.jsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`app icon should render correctly 1`] = ` 4 |
5 | 12 |
13 | `; 14 | -------------------------------------------------------------------------------- /react/AppLinker/native.config.js: -------------------------------------------------------------------------------- 1 | export const UNIVERSAL_LINK_URL = 'https://links.mycozy.cloud' 2 | -------------------------------------------------------------------------------- /react/AppSections/Sections.styl: -------------------------------------------------------------------------------- 1 | .Sections__section 2 | margin-bottom 4rem 3 | 4 | 5 | -------------------------------------------------------------------------------- /react/AppSections/components/AppsSection.styl: -------------------------------------------------------------------------------- 1 | .AppsSection 2 | margin-bottom 1rem 3 | 4 | .AppsSection__list 5 | display flex 6 | flex-wrap wrap 7 | justify-content flex-start 8 | -------------------------------------------------------------------------------- /react/AppSections/components/DropdownFilter.styl: -------------------------------------------------------------------------------- 1 | .Dropdown__icon 2 | padding: 0 .5rem; 3 | 4 | @media (max-width: 48rem) 5 | .Dropdown .Select__control 6 | padding .5rem .5rem .5rem .2rem 7 | border-radius 0 8 | height 2.75rem 9 | 10 | .Dropdown .Select__menu 11 | top 2rem 12 | 13 | .Dropdown > div 14 | max-width none 15 | -------------------------------------------------------------------------------- /react/AppSections/constants.js: -------------------------------------------------------------------------------- 1 | export const APP_TYPE = { 2 | KONNECTOR: 'konnector', 3 | WEBAPP: 'webapp', 4 | FILE: 'file' 5 | } 6 | 7 | export const APP_CLASS = { 8 | SHORTCUT: 'shortcut' 9 | } 10 | -------------------------------------------------------------------------------- /react/AppSections/index.jsx: -------------------------------------------------------------------------------- 1 | export { default } from './Sections' 2 | import * as categoryUtils from './categories' 3 | export { categoryUtils } 4 | -------------------------------------------------------------------------------- /react/AppTile/locales/en.json: -------------------------------------------------------------------------------- 1 | { 2 | "app_item": { 3 | "by": "By", 4 | "installed": "Installed", 5 | "maintenance": "In maintenance", 6 | "update": "Update available", 7 | "favorite": "Added to home page" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /react/AppTile/locales/fr.json: -------------------------------------------------------------------------------- 1 | { 2 | "app_item": { 3 | "by": "Par", 4 | "installed": "Installée", 5 | "maintenance": "En maintenance", 6 | "update": "Mise à jour dispo.", 7 | "favorite": "Ajouté sur l'accueil" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /react/BarButton/styles.styl: -------------------------------------------------------------------------------- 1 | @require 'tools/mixins' 2 | 3 | .BarButton 4 | display flex 5 | align-items center 6 | justify-content center 7 | width rem(48) 8 | height rem(48) 9 | 10 | :root 11 | --barIconColor var(--coolGrey) 12 | --barIconColorDisabled var(--silver) 13 | 14 | .BarButtonIcon 15 | color var(--barIconColor) 16 | 17 | .BarButton--disabled 18 | .BarButtonIcon 19 | color var(--barIconColorDisabled) 20 | -------------------------------------------------------------------------------- /react/BarTitle/styles.styl: -------------------------------------------------------------------------------- 1 | @require 'settings/typography.styl' 2 | 3 | .BarTitle 4 | margin 0 5 | height 3rem 6 | display flex 7 | align-items center 8 | font-size $bar-font-size 9 | -------------------------------------------------------------------------------- /react/BottomNavigation/index.js: -------------------------------------------------------------------------------- 1 | import MuiBottomNavigation from '@material-ui/core/BottomNavigation' 2 | 3 | export default MuiBottomNavigation 4 | -------------------------------------------------------------------------------- /react/BottomNavigationAction/index.js: -------------------------------------------------------------------------------- 1 | import MuiBottomNavigationAction from '@material-ui/core/BottomNavigationAction' 2 | 3 | export default MuiBottomNavigationAction 4 | -------------------------------------------------------------------------------- /react/BottomSheet/constants.js: -------------------------------------------------------------------------------- 1 | export const ANIMATION_DURATION = 250 2 | -------------------------------------------------------------------------------- /react/BottomSheet/index.jsx: -------------------------------------------------------------------------------- 1 | export { default } from './BottomSheet' 2 | export { default as BottomSheetItem } from './BottomSheetItem' 3 | export { default as BottomSheetHeader } from './BottomSheetHeader' 4 | export { default as BottomSheetTitle } from './BottomSheetTitle' 5 | -------------------------------------------------------------------------------- /react/BottomSheet/styles.styl: -------------------------------------------------------------------------------- 1 | .renderSaferAnim 2 | position absolute 3 | bottom 0 4 | height 0 5 | width 100% 6 | animation slidein 1s 7 | 8 | @keyframes slidein { 9 | from { 10 | height 100% 11 | } 12 | to { 13 | height 0 14 | } 15 | } -------------------------------------------------------------------------------- /react/Box/index.js: -------------------------------------------------------------------------------- 1 | import MuiBox from '@material-ui/core/Box' 2 | 3 | export default MuiBox 4 | -------------------------------------------------------------------------------- /react/Breadcrumbs/index.js: -------------------------------------------------------------------------------- 1 | import Breadcrumbs from '@material-ui/core/Breadcrumbs' 2 | 3 | export default Breadcrumbs 4 | -------------------------------------------------------------------------------- /react/Button/index.js: -------------------------------------------------------------------------------- 1 | import Button from '@material-ui/core/Button' 2 | 3 | export default Button 4 | -------------------------------------------------------------------------------- /react/ButtonBase/index.js: -------------------------------------------------------------------------------- 1 | import ButtonBase from '@material-ui/core/ButtonBase' 2 | 3 | export default ButtonBase 4 | -------------------------------------------------------------------------------- /react/Card/styles.styl: -------------------------------------------------------------------------------- 1 | @require '../../stylus/components/card' 2 | 3 | .c-card 4 | @extend $card 5 | 6 | .c-card--inset 7 | @extend $card--inset 8 | 9 | -------------------------------------------------------------------------------- /react/CardActionArea/index.js: -------------------------------------------------------------------------------- 1 | import MuiCardActionArea from '@material-ui/core/CardActionArea' 2 | 3 | export default MuiCardActionArea 4 | -------------------------------------------------------------------------------- /react/CardActions/index.js: -------------------------------------------------------------------------------- 1 | import MuiCardActions from '@material-ui/core/CardActions' 2 | 3 | export default MuiCardActions 4 | -------------------------------------------------------------------------------- /react/CardContent/index.js: -------------------------------------------------------------------------------- 1 | import MuiCardContent from '@material-ui/core/CardContent' 2 | 3 | export default MuiCardContent 4 | -------------------------------------------------------------------------------- /react/CardHeader/index.js: -------------------------------------------------------------------------------- 1 | import MuiCardHeader from '@material-ui/core/CardHeader' 2 | 3 | export default MuiCardHeader 4 | -------------------------------------------------------------------------------- /react/CardMedia/index.js: -------------------------------------------------------------------------------- 1 | import MuiCardMedia from '@material-ui/core/CardMedia' 2 | 3 | export default MuiCardMedia 4 | -------------------------------------------------------------------------------- /react/CipherIcon/Readme.md: -------------------------------------------------------------------------------- 1 | This is an icon representing a cipher for a given konnector 2 | 3 | ```jsx 4 | import CipherIcon from 'cozy-ui/transpiled/react/CipherIcon'; 5 | 6 |
7 |
8 | 9 |
10 |
11 | 12 |
13 |
14 | ``` 15 | -------------------------------------------------------------------------------- /react/Circle/styles.styl: -------------------------------------------------------------------------------- 1 | @require '../../stylus/components/circle' 2 | 3 | .c-circle 4 | @extend $circle 5 | 6 | .c-circle-text 7 | @extend $circle-text 8 | -------------------------------------------------------------------------------- /react/CircularProgress/index.js: -------------------------------------------------------------------------------- 1 | import MuiCircularProgress from '@material-ui/core/CircularProgress' 2 | 3 | export default MuiCircularProgress 4 | -------------------------------------------------------------------------------- /react/ClickAwayListener/index.js: -------------------------------------------------------------------------------- 1 | import MuiClickAwayListener from '@material-ui/core/ClickAwayListener' 2 | 3 | export default MuiClickAwayListener 4 | -------------------------------------------------------------------------------- /react/Collapse/index.js: -------------------------------------------------------------------------------- 1 | import MuiCollapse from '@material-ui/core/Collapse' 2 | 3 | export default MuiCollapse 4 | -------------------------------------------------------------------------------- /react/ContactPicker/styles.styl: -------------------------------------------------------------------------------- 1 | @require 'tools/mixins' 2 | @require 'components/forms' 3 | 4 | .SelectControl 5 | @extend $select 6 | -------------------------------------------------------------------------------- /react/ContactsList/index.js: -------------------------------------------------------------------------------- 1 | import ContactsList from './ContactsList' 2 | 3 | export default ContactsList 4 | -------------------------------------------------------------------------------- /react/ContactsList/locales/en.json: -------------------------------------------------------------------------------- 1 | { 2 | "empty": "EMPTY", 3 | "me": "ME" 4 | } 5 | -------------------------------------------------------------------------------- /react/ContactsList/locales/fr.json: -------------------------------------------------------------------------------- 1 | { 2 | "empty": "VIDE", 3 | "me": "MOI" 4 | } 5 | -------------------------------------------------------------------------------- /react/ContactsList/locales/withContactsListLocales.jsx: -------------------------------------------------------------------------------- 1 | import en from './en.json' 2 | import fr from './fr.json' 3 | import withOnlyLocales from '../../providers/I18n/withOnlyLocales' 4 | 5 | const locales = { 6 | en, 7 | fr 8 | } 9 | 10 | export default withOnlyLocales(locales) 11 | -------------------------------------------------------------------------------- /react/ContactsListModal/AddContact/AddContactTitle.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | import { withContactsListLocales } from '../withContactsListLocales' 4 | 5 | const AddContactTitle = ({ t }) => { 6 | return <>{t('newContact')} 7 | } 8 | 9 | export default withContactsListLocales(AddContactTitle) 10 | -------------------------------------------------------------------------------- /react/ContactsListModal/AddContact/helpers.js: -------------------------------------------------------------------------------- 1 | export const handleSubmit = async ({ 2 | client, 3 | contactValues, 4 | onCreate, 5 | onListClose 6 | }) => { 7 | const { givenName, familyName } = contactValues 8 | 9 | if (!givenName && !familyName) return 10 | 11 | const { data: contact } = await client.save({ 12 | _type: 'io.cozy.contacts', 13 | name: { familyName, givenName } 14 | }) 15 | 16 | onCreate(contact) 17 | onListClose() 18 | } 19 | -------------------------------------------------------------------------------- /react/ContactsListModal/AddContact/styles.styl: -------------------------------------------------------------------------------- 1 | .icon 2 | margin 1rem 1.5rem 0 0.5rem -------------------------------------------------------------------------------- /react/ContactsListModal/EmptyMessage.jsx: -------------------------------------------------------------------------------- 1 | import cx from 'classnames' 2 | import React from 'react' 3 | 4 | import Typography from '../Typography' 5 | 6 | const EmptyMessage = props => { 7 | const { className, ...rest } = props 8 | 9 | return ( 10 | 15 | ) 16 | } 17 | 18 | export default EmptyMessage 19 | -------------------------------------------------------------------------------- /react/ContactsListModal/locales/en.json: -------------------------------------------------------------------------------- 1 | { 2 | "cancel": "Cancel", 3 | "save": "Save", 4 | "newContact": "New contact", 5 | "coordinates": "Coordinates", 6 | "givenName": "Firstname", 7 | "familyName": "Lastname", 8 | "addContact": "Add a contact", 9 | "searchContact": "Search a contact", 10 | "emptyContact": "No contact" 11 | } -------------------------------------------------------------------------------- /react/ContactsListModal/locales/fr.json: -------------------------------------------------------------------------------- 1 | { 2 | "cancel": "Annuler", 3 | "save": "Enregistrer", 4 | "newContact": "Nouveau contact", 5 | "coordinates": "Coordonnées", 6 | "givenName": "Prénom", 7 | "familyName": "Nom", 8 | "addContact": "Ajouter un contact", 9 | "searchContact": "Rechercher un contact", 10 | "emptyContact": "Aucun contact" 11 | } -------------------------------------------------------------------------------- /react/ContactsListModal/queries.js: -------------------------------------------------------------------------------- 1 | import { Q, fetchPolicies } from 'cozy-client' 2 | import { CONTACTS_DOCTYPE } from 'cozy-client/dist/models/contact' 3 | 4 | const defaultFetchPolicy = fetchPolicies.olderThan(30 * 1000) 5 | 6 | export const buildContactsQuery = () => ({ 7 | definition: () => Q(CONTACTS_DOCTYPE).limitBy(1000), 8 | options: { 9 | as: `${CONTACTS_DOCTYPE}`, 10 | fetchPolicy: defaultFetchPolicy 11 | } 12 | }) 13 | -------------------------------------------------------------------------------- /react/ContactsListModal/styles.styl: -------------------------------------------------------------------------------- 1 | @require 'settings/breakpoints' 2 | @require 'settings/spaces' 3 | 4 | .ContactsListModal__addContactContainer 5 | display flex 6 | justify-content center 7 | margin-bottom spacing_values.m 8 | margin 0 spacing_values.xs spacing_values.m 9 | 10 | +small-screen() 11 | > * 12 | flex 1 13 | -------------------------------------------------------------------------------- /react/ContactsListModal/withContactsListLocales.jsx: -------------------------------------------------------------------------------- 1 | import en from './locales/en.json' 2 | import fr from './locales/fr.json' 3 | import withLocales from '../providers/I18n/withLocales' 4 | 5 | export const locales = { 6 | en, 7 | fr 8 | } 9 | 10 | export const withContactsListLocales = withLocales(locales) 11 | -------------------------------------------------------------------------------- /react/Container/index.js: -------------------------------------------------------------------------------- 1 | import MuiContainer from '@material-ui/core/Container' 2 | 3 | export default MuiContainer 4 | -------------------------------------------------------------------------------- /react/Counter/index.jsx: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types' 2 | import React from 'react' 3 | 4 | const Counter = ({ count, max }) => ( 5 | {count > max ? `${max}+` : count} 6 | ) 7 | 8 | Counter.propTypes = { 9 | count: PropTypes.number, 10 | max: PropTypes.number 11 | } 12 | 13 | Counter.defaultProps = { 14 | count: 0, 15 | max: 99 16 | } 17 | 18 | export default Counter 19 | -------------------------------------------------------------------------------- /react/CozyDialogs/SpecificDialogs/icons/QRCodeInstallFlagshipAppDialog.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cozy/cozy-ui/2cee962e6185e5916ab61dae163ff87e1e6dba92/react/CozyDialogs/SpecificDialogs/icons/QRCodeInstallFlagshipAppDialog.png -------------------------------------------------------------------------------- /react/CozyDialogs/SpecificDialogs/icons/appstore.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cozy/cozy-ui/2cee962e6185e5916ab61dae163ff87e1e6dba92/react/CozyDialogs/SpecificDialogs/icons/appstore.png -------------------------------------------------------------------------------- /react/CozyDialogs/SpecificDialogs/icons/playstore.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cozy/cozy-ui/2cee962e6185e5916ab61dae163ff87e1e6dba92/react/CozyDialogs/SpecificDialogs/icons/playstore.png -------------------------------------------------------------------------------- /react/CozyDialogs/SpecificDialogs/index.jsx: -------------------------------------------------------------------------------- 1 | export { default as AllowLocationDialog } from './AllowLocationDialog' 2 | export { default as InstallFlagshipAppDialog } from './InstallFlagshipAppDialog' 3 | export { default as AuthentificationDialog } from './AuthentificationDialog' 4 | -------------------------------------------------------------------------------- /react/CozyDialogs/SpecificDialogs/withSpecificDialogsLocales.jsx: -------------------------------------------------------------------------------- 1 | import en from './locales/en.json' 2 | import fr from './locales/fr.json' 3 | import withOnlyLocales from '../../providers/I18n/withOnlyLocales' 4 | 5 | export const locales = { 6 | en, 7 | fr 8 | } 9 | 10 | export default withOnlyLocales(locales) 11 | -------------------------------------------------------------------------------- /react/CozyDialogs/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cozy/cozy-ui/2cee962e6185e5916ab61dae163ff87e1e6dba92/react/CozyDialogs/background.png -------------------------------------------------------------------------------- /react/CozyDialogs/locales.js: -------------------------------------------------------------------------------- 1 | export default { 2 | en: { 3 | closeButton: 'Close', 4 | backButton: 'Back' 5 | }, 6 | fr: { 7 | closeButton: 'Fermer', 8 | backButton: 'Retour' 9 | }, 10 | es: { 11 | closeButton: 'Cerrar', 12 | backButton: 'Atrás' 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /react/CozyDialogs/styles.styl: -------------------------------------------------------------------------------- 1 | @require 'settings/breakpoints.styl' 2 | 3 | .DialogCloseButton 4 | position absolute 5 | top 1.15rem 6 | right 1.15rem 7 | z-index 1 8 | +small-screen() 9 | top 0.25rem 10 | right 0.25rem 11 | 12 | .DialogBackButton 13 | position absolute 14 | top 1.15rem 15 | left 1.15rem 16 | z-index 1 17 | +small-screen() 18 | top 0.25rem 19 | left 0.25rem 20 | -------------------------------------------------------------------------------- /react/CssBaseline/index.js: -------------------------------------------------------------------------------- 1 | import MuiCssBaseline from '@material-ui/core/CssBaseline' 2 | 3 | export default MuiCssBaseline 4 | -------------------------------------------------------------------------------- /react/DatePicker/locales/en.json: -------------------------------------------------------------------------------- 1 | { 2 | "cancel": "Cancel", 3 | "clear": "Clear", 4 | "invalidDate": "Invalid date", 5 | "ok": "Ok", 6 | "today": "Today", 7 | "minDateLabelError": "Date should not be before minimal date (%{date})" 8 | } 9 | -------------------------------------------------------------------------------- /react/DatePicker/locales/fr.json: -------------------------------------------------------------------------------- 1 | { 2 | "cancel": "Annuler", 3 | "clear": "Supprimer", 4 | "invalidDate": "Date invalide", 5 | "ok": "Ok", 6 | "today": "Aujourd'hui", 7 | "minDateLabelError": "La date ne doit pas être antérieure à la date minimale (%{date})" 8 | } 9 | -------------------------------------------------------------------------------- /react/DatePicker/locales/withOwnLocales.jsx: -------------------------------------------------------------------------------- 1 | import en from './en.json' 2 | import fr from './fr.json' 3 | import withOnlyLocales from '../../providers/I18n/withOnlyLocales' 4 | 5 | export const locales = { 6 | en, 7 | fr 8 | } 9 | 10 | export default withOnlyLocales(locales) 11 | -------------------------------------------------------------------------------- /react/Dialog/DialogActions.jsx: -------------------------------------------------------------------------------- 1 | import DialogActions from '@material-ui/core/DialogActions' 2 | 3 | export default DialogActions 4 | -------------------------------------------------------------------------------- /react/Dialog/DialogContent.jsx: -------------------------------------------------------------------------------- 1 | import DialogContent from '@material-ui/core/DialogContent' 2 | 3 | export default DialogContent 4 | -------------------------------------------------------------------------------- /react/Dialog/DialogContentText.jsx: -------------------------------------------------------------------------------- 1 | import DialogContentText from '@material-ui/core/DialogContentText' 2 | 3 | export default DialogContentText 4 | -------------------------------------------------------------------------------- /react/Dialog/DialogTitle.jsx: -------------------------------------------------------------------------------- 1 | import DialogTitle from '@material-ui/core/DialogTitle' 2 | 3 | export default DialogTitle 4 | -------------------------------------------------------------------------------- /react/DialogActions/index.js: -------------------------------------------------------------------------------- 1 | import MuiDialogActions from '@material-ui/core/DialogActions' 2 | 3 | export default MuiDialogActions 4 | -------------------------------------------------------------------------------- /react/DialogContent/index.js: -------------------------------------------------------------------------------- 1 | import MuiDialogContent from '@material-ui/core/DialogContent' 2 | 3 | export default MuiDialogContent 4 | -------------------------------------------------------------------------------- /react/DialogContentText/index.js: -------------------------------------------------------------------------------- 1 | import MuiDialogContentText from '@material-ui/core/DialogContentText' 2 | 3 | export default MuiDialogContentText 4 | -------------------------------------------------------------------------------- /react/DialogTitle/index.js: -------------------------------------------------------------------------------- 1 | import MuiDialogTitle from '@material-ui/core/DialogTitle' 2 | 3 | export default MuiDialogTitle 4 | -------------------------------------------------------------------------------- /react/Divider/TextDivider/styles.styl: -------------------------------------------------------------------------------- 1 | .divider 2 | align-items center 3 | display flex 4 | 5 | &::after, 6 | &::before { 7 | content '' 8 | height 1px 9 | background-color var(--dividerColor) 10 | } 11 | 12 | &::before { 13 | display none 14 | margin-right 0.5rem 15 | } 16 | 17 | &::after { 18 | flex 1 19 | margin-left 0.5rem 20 | } 21 | 22 | .center 23 | &::before { 24 | display block 25 | flex 1 26 | } 27 | -------------------------------------------------------------------------------- /react/Drawer/index.js: -------------------------------------------------------------------------------- 1 | import MuiDrawer from '@material-ui/core/Drawer' 2 | 3 | export default MuiDrawer 4 | -------------------------------------------------------------------------------- /react/Empty/styles.styl: -------------------------------------------------------------------------------- 1 | @import '../../stylus/components/empty' 2 | 3 | .c-empty 4 | @extend $empty 5 | 6 | .c-empty--centered 7 | @extend $empty--centered 8 | 9 | .c-empty-img 10 | @extend $empty-img 11 | 12 | .c-empty-img--medium 13 | @extend $empty-img--medium 14 | 15 | .c-empty-img--large 16 | @extend $empty-img--large 17 | 18 | .c-empty-title 19 | @extend $empty-title 20 | 21 | .c-empty-text 22 | @extend $empty-text 23 | -------------------------------------------------------------------------------- /react/Fab/index.js: -------------------------------------------------------------------------------- 1 | import Fab from '@material-ui/core/Fab' 2 | 3 | Fab.defaultProps = { 4 | size: 'medium' 5 | } 6 | 7 | export default Fab 8 | export { default as ExtendableFab } from './ExtendableFab' 9 | -------------------------------------------------------------------------------- /react/Fade/index.js: -------------------------------------------------------------------------------- 1 | import MuiFade from '@material-ui/core/Fade' 2 | 3 | export default MuiFade 4 | -------------------------------------------------------------------------------- /react/Figure/Figure.md: -------------------------------------------------------------------------------- 1 | ```jsx 2 | import { Figure } from 'cozy-ui/transpiled/react/Figure'; 3 |
4 |
8 | 9 |
13 | 14 |
18 |
19 | ``` 20 | -------------------------------------------------------------------------------- /react/Figure/FigureBlock.styl: -------------------------------------------------------------------------------- 1 | @require 'settings/breakpoints' 2 | 3 | .FigureBlock 4 | color var(--primaryTextColor) 5 | 6 | .FigureBlock-figure 7 | font-size 2rem 8 | line-height 2.625rem 9 | 10 | +small-screen() 11 | .FigureBlock 12 | font-size .7em 13 | -------------------------------------------------------------------------------- /react/Figure/index.js: -------------------------------------------------------------------------------- 1 | export { default, default as Figure } from './Figure' 2 | export { default as FigureBlock } from './FigureBlock' 3 | -------------------------------------------------------------------------------- /react/FileInput/styles.styl: -------------------------------------------------------------------------------- 1 | .c-file-input 2 | cursor pointer 3 | -------------------------------------------------------------------------------- /react/FilePath/Readme.md: -------------------------------------------------------------------------------- 1 | ```jsx 2 | import FilePath from 'cozy-ui/transpiled/react/FilePath'; 3 | 4 | /Partages reçus/Cozy 🗄 - Team/Customers & Partners 🛒/Xxxxxx (Xxxxxxxx)/4_Suivi opérationnel/Point de synchro 5 | ``` 6 | -------------------------------------------------------------------------------- /react/FilePath/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | import styles from './styles.styl' 4 | import MidEllipsis from '../MidEllipsis' 5 | 6 | const FilePath = ({ children, className }) => ( 7 | 8 | {children} 9 | 10 | ) 11 | 12 | export default FilePath 13 | -------------------------------------------------------------------------------- /react/FilePath/styles.styl: -------------------------------------------------------------------------------- 1 | .c-file-path 2 | display block 3 | color var(--secondaryTextColor) 4 | font-size .75rem 5 | text-decoration none 6 | position relative 7 | overflow hidden 8 | text-overflow ellipsis 9 | white-space nowrap 10 | -------------------------------------------------------------------------------- /react/FilePathLink/Readme.md: -------------------------------------------------------------------------------- 1 | ```jsx 2 | import FilePathLink from 'cozy-ui/transpiled/react/FilePathLink'; 3 | 4 | /Partages reçus/Cozy 🗄 - Team/Customers & Partners 🛒/Xxxxxx (Xxxxxxxx)/4_Suivi opérationnel/Point de synchro 5 | ``` 6 | -------------------------------------------------------------------------------- /react/FilePathLink/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | import FilePath from '../FilePath' 4 | import Link from '../Link' 5 | 6 | const FilePathLink = ({ children, ...props }) => ( 7 | 8 | {children} 9 | 10 | ) 11 | 12 | export default FilePathLink 13 | -------------------------------------------------------------------------------- /react/FilePicker/locales/en.json: -------------------------------------------------------------------------------- 1 | { 2 | "footer": { 3 | "buttons": { 4 | "cancel": "Cancel", 5 | "confirm": "Select" 6 | } 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /react/FilePicker/locales/fr.json: -------------------------------------------------------------------------------- 1 | { 2 | "footer": { 3 | "buttons": { 4 | "cancel": "Annuler", 5 | "confirm": "Sélectionner" 6 | } 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /react/Filename/styles.styl: -------------------------------------------------------------------------------- 1 | .icon-withPath 2 | float left 3 | top 4px 4 | -------------------------------------------------------------------------------- /react/FilledInput/index.js: -------------------------------------------------------------------------------- 1 | import MuiFilledInput from '@material-ui/core/FilledInput' 2 | 3 | export default MuiFilledInput 4 | -------------------------------------------------------------------------------- /react/FormControl/index.js: -------------------------------------------------------------------------------- 1 | import MuiFormControl from '@material-ui/core/FormControl' 2 | 3 | export default MuiFormControl 4 | -------------------------------------------------------------------------------- /react/FormControlLabel/index.js: -------------------------------------------------------------------------------- 1 | import MuiFormControlLabel from '@material-ui/core/FormControlLabel' 2 | 3 | export default MuiFormControlLabel 4 | -------------------------------------------------------------------------------- /react/FormGroup/index.js: -------------------------------------------------------------------------------- 1 | import MuiFormGroup from '@material-ui/core/FormGroup' 2 | 3 | export default MuiFormGroup 4 | -------------------------------------------------------------------------------- /react/FormHelperText/index.js: -------------------------------------------------------------------------------- 1 | import MuiFormHelperText from '@material-ui/core/FormHelperText' 2 | 3 | export default MuiFormHelperText 4 | -------------------------------------------------------------------------------- /react/FormLabel/index.js: -------------------------------------------------------------------------------- 1 | import MuiFormLabel from '@material-ui/core/FormLabel' 2 | 3 | export default MuiFormLabel 4 | -------------------------------------------------------------------------------- /react/Grid/index.js: -------------------------------------------------------------------------------- 1 | import Grid from '@material-ui/core/Grid' 2 | 3 | export default Grid 4 | -------------------------------------------------------------------------------- /react/GridList/index.js: -------------------------------------------------------------------------------- 1 | import MuiGridList from '@material-ui/core/GridList' 2 | 3 | export default MuiGridList 4 | -------------------------------------------------------------------------------- /react/GridListTile/index.js: -------------------------------------------------------------------------------- 1 | import MuiGridListTile from '@material-ui/core/GridListTile' 2 | 3 | export default MuiGridListTile 4 | -------------------------------------------------------------------------------- /react/GridListTileBar/index.js: -------------------------------------------------------------------------------- 1 | import MuiGridListTileBar from '@material-ui/core/GridListTileBar' 2 | 3 | export default MuiGridListTileBar 4 | -------------------------------------------------------------------------------- /react/Grow/index.js: -------------------------------------------------------------------------------- 1 | import MuiGrow from '@material-ui/core/Grow' 2 | 3 | export default MuiGrow 4 | -------------------------------------------------------------------------------- /react/Hidden/index.js: -------------------------------------------------------------------------------- 1 | import MuiHidden from '@material-ui/core/Hidden' 2 | 3 | export default MuiHidden 4 | -------------------------------------------------------------------------------- /react/Icon/Sprite.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | import IconSprintContent from './icons-sprite' 4 | 5 | const displayNone = { display: 'none' } 6 | 7 | const Sprite = () => { 8 | return ( 9 |
13 | ) 14 | } 15 | 16 | export default Sprite 17 | -------------------------------------------------------------------------------- /react/Icon/styles.styl: -------------------------------------------------------------------------------- 1 | @require 'settings/icons.styl' 2 | 3 | .icon 4 | fill currentColor 5 | // Fix blurry icons on Firefox 6 | transform translateZ(0) 7 | 8 | .icon--preserveColor 9 | fill inherit 10 | 11 | .icon--spin 12 | @extend $icon-spin 13 | -------------------------------------------------------------------------------- /react/IconStack/styles.styl: -------------------------------------------------------------------------------- 1 | .IconStack-wrapper { 2 | position relative 3 | display inline-block 4 | } 5 | .IconStack-foregroundIcon{ 6 | position absolute 7 | left 50% 8 | top 50% 9 | transform translate(-50%,-50%) 10 | } -------------------------------------------------------------------------------- /react/Icons/AlbumRemove.jsx: -------------------------------------------------------------------------------- 1 | // Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/album-remove.svg` to regenerate; 2 | import React from 'react' 3 | 4 | function SvgAlbumRemove(props) { 5 | return ( 6 | 7 | 8 | 9 | ) 10 | } 11 | 12 | export default SvgAlbumRemove 13 | -------------------------------------------------------------------------------- /react/Icons/Attention.jsx: -------------------------------------------------------------------------------- 1 | // Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/attention.svg` to regenerate; 2 | import React from 'react' 3 | 4 | function SvgAttention(props) { 5 | return ( 6 | 7 | 8 | 9 | ) 10 | } 11 | 12 | export default SvgAttention 13 | -------------------------------------------------------------------------------- /react/Icons/Bottom.jsx: -------------------------------------------------------------------------------- 1 | // Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/bottom.svg` to regenerate; 2 | import React from 'react' 3 | 4 | function SvgBottom(props) { 5 | return ( 6 | 7 | 8 | 9 | ) 10 | } 11 | 12 | export default SvgBottom 13 | -------------------------------------------------------------------------------- /react/Icons/Burger.jsx: -------------------------------------------------------------------------------- 1 | // Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/burger.svg` to regenerate; 2 | import React from 'react' 3 | 4 | function SvgBurger(props) { 5 | return ( 6 | 7 | 8 | 9 | ) 10 | } 11 | 12 | export default SvgBurger 13 | -------------------------------------------------------------------------------- /react/Icons/Check.jsx: -------------------------------------------------------------------------------- 1 | // Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/check.svg` to regenerate; 2 | import React from 'react' 3 | 4 | function SvgCheck(props) { 5 | return ( 6 | 7 | 8 | 9 | ) 10 | } 11 | 12 | export default SvgCheck 13 | -------------------------------------------------------------------------------- /react/Icons/CircleFilled.jsx: -------------------------------------------------------------------------------- 1 | // Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/circle-filled.svg` to regenerate; 2 | import React from 'react' 3 | 4 | function SvgCircleFilled(props) { 5 | return ( 6 | 7 | 8 | 9 | ) 10 | } 11 | 12 | export default SvgCircleFilled 13 | -------------------------------------------------------------------------------- /react/Icons/Cocktail.jsx: -------------------------------------------------------------------------------- 1 | // Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/cocktail.svg` to regenerate; 2 | import React from 'react' 3 | 4 | function SvgCocktail(props) { 5 | return ( 6 | 7 | 8 | 9 | ) 10 | } 11 | 12 | export default SvgCocktail 13 | -------------------------------------------------------------------------------- /react/Icons/Compare.jsx: -------------------------------------------------------------------------------- 1 | // Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/compare.svg` to regenerate; 2 | import React from 'react' 3 | 4 | function SvgCompare(props) { 5 | return ( 6 | 7 | 8 | 9 | ) 10 | } 11 | 12 | export default SvgCompare 13 | -------------------------------------------------------------------------------- /react/Icons/Cross.jsx: -------------------------------------------------------------------------------- 1 | // Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/cross.svg` to regenerate; 2 | import React from 'react' 3 | 4 | function SvgCross(props) { 5 | return ( 6 | 7 | 8 | 9 | ) 10 | } 11 | 12 | export default SvgCross 13 | -------------------------------------------------------------------------------- /react/Icons/CrossMedium.jsx: -------------------------------------------------------------------------------- 1 | // Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/cross-medium.svg` to regenerate; 2 | import React from 'react' 3 | 4 | function SvgCrossMedium(props) { 5 | return ( 6 | 7 | 8 | 9 | ) 10 | } 11 | 12 | export default SvgCrossMedium 13 | -------------------------------------------------------------------------------- /react/Icons/CrossSmall.jsx: -------------------------------------------------------------------------------- 1 | // Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/cross-small.svg` to regenerate; 2 | import React from 'react' 3 | 4 | function SvgCrossSmall(props) { 5 | return ( 6 | 7 | 8 | 9 | ) 10 | } 11 | 12 | export default SvgCrossSmall 13 | -------------------------------------------------------------------------------- /react/Icons/Dash.jsx: -------------------------------------------------------------------------------- 1 | // Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/dash.svg` to regenerate; 2 | import React from 'react' 3 | 4 | function SvgDash(props) { 5 | return ( 6 | 7 | 8 | 9 | ) 10 | } 11 | 12 | export default SvgDash 13 | -------------------------------------------------------------------------------- /react/Icons/DashWhite.jsx: -------------------------------------------------------------------------------- 1 | // Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/illus/dash-white.svg` to regenerate; 2 | import React from 'react' 3 | 4 | function SvgDashWhite(props) { 5 | return ( 6 | 7 | 8 | 9 | ) 10 | } 11 | 12 | export default SvgDashWhite 13 | -------------------------------------------------------------------------------- /react/Icons/Download.jsx: -------------------------------------------------------------------------------- 1 | // Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/download.svg` to regenerate; 2 | import React from 'react' 3 | 4 | function SvgDownload(props) { 5 | return ( 6 | 7 | 8 | 9 | ) 10 | } 11 | 12 | export default SvgDownload 13 | -------------------------------------------------------------------------------- /react/Icons/Energy.jsx: -------------------------------------------------------------------------------- 1 | // Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/permissions/energy.svg` to regenerate; 2 | import React from 'react' 3 | 4 | function SvgEnergy(props) { 5 | return ( 6 | 7 | 8 | 9 | ) 10 | } 11 | 12 | export default SvgEnergy 13 | -------------------------------------------------------------------------------- /react/Icons/Growth.jsx: -------------------------------------------------------------------------------- 1 | // Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/growth.svg` to regenerate; 2 | import React from 'react' 3 | 4 | function SvgGrowth(props) { 5 | return ( 6 | 7 | 8 | 9 | ) 10 | } 11 | 12 | export default SvgGrowth 13 | -------------------------------------------------------------------------------- /react/Icons/Home.jsx: -------------------------------------------------------------------------------- 1 | // Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/home.svg` to regenerate; 2 | import React from 'react' 3 | 4 | function SvgHome(props) { 5 | return ( 6 | 7 | 8 | 9 | ) 10 | } 11 | 12 | export default SvgHome 13 | -------------------------------------------------------------------------------- /react/Icons/Hourglass.jsx: -------------------------------------------------------------------------------- 1 | // Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/hourglass.svg` to regenerate; 2 | import React from 'react' 3 | 4 | function SvgHourglass(props) { 5 | return ( 6 | 7 | 8 | 9 | ) 10 | } 11 | 12 | export default SvgHourglass 13 | -------------------------------------------------------------------------------- /react/Icons/Movement.jsx: -------------------------------------------------------------------------------- 1 | // Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/movement.svg` to regenerate; 2 | import React from 'react' 3 | 4 | function SvgMovement(props) { 5 | return ( 6 | 7 | 8 | 9 | ) 10 | } 11 | 12 | export default SvgMovement 13 | -------------------------------------------------------------------------------- /react/Icons/Next.jsx: -------------------------------------------------------------------------------- 1 | // Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/next.svg` to regenerate; 2 | import React from 'react' 3 | 4 | function SvgNext(props) { 5 | return ( 6 | 7 | 8 | 9 | ) 10 | } 11 | 12 | export default SvgNext 13 | -------------------------------------------------------------------------------- /react/Icons/Previous.jsx: -------------------------------------------------------------------------------- 1 | // Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/previous.svg` to regenerate; 2 | import React from 'react' 3 | 4 | function SvgPrevious(props) { 5 | return ( 6 | 7 | 8 | 9 | ) 10 | } 11 | 12 | export default SvgPrevious 13 | -------------------------------------------------------------------------------- /react/Icons/Reply.jsx: -------------------------------------------------------------------------------- 1 | // Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/reply.svg` to regenerate; 2 | import React from 'react' 3 | 4 | function SvgReply(props) { 5 | return ( 6 | 7 | 8 | 9 | ) 10 | } 11 | 12 | export default SvgReply 13 | -------------------------------------------------------------------------------- /react/Icons/Rise.jsx: -------------------------------------------------------------------------------- 1 | // Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/rise.svg` to regenerate; 2 | import React from 'react' 3 | 4 | function SvgRise(props) { 5 | return ( 6 | 7 | 8 | 9 | ) 10 | } 11 | 12 | export default SvgRise 13 | -------------------------------------------------------------------------------- /react/Icons/Star.jsx: -------------------------------------------------------------------------------- 1 | // Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/star.svg` to regenerate; 2 | import React from 'react' 3 | 4 | function SvgStar(props) { 5 | return ( 6 | 7 | 8 | 9 | ) 10 | } 11 | 12 | export default SvgStar 13 | -------------------------------------------------------------------------------- /react/Icons/Stop.jsx: -------------------------------------------------------------------------------- 1 | // Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/stop.svg` to regenerate; 2 | import React from 'react' 3 | 4 | function SvgStop(props) { 5 | return ( 6 | 7 | 8 | 9 | ) 10 | } 11 | 12 | export default SvgStop 13 | -------------------------------------------------------------------------------- /react/Icons/Text.jsx: -------------------------------------------------------------------------------- 1 | // Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/text.svg` to regenerate; 2 | import React from 'react' 3 | 4 | function SvgText(props) { 5 | return ( 6 | 7 | 8 | 9 | ) 10 | } 11 | 12 | export default SvgText 13 | -------------------------------------------------------------------------------- /react/Icons/Top.jsx: -------------------------------------------------------------------------------- 1 | // Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/top.svg` to regenerate; 2 | import React from 'react' 3 | 4 | function SvgTop(props) { 5 | return ( 6 | 7 | 8 | 9 | ) 10 | } 11 | 12 | export default SvgTop 13 | -------------------------------------------------------------------------------- /react/Icons/Upload.jsx: -------------------------------------------------------------------------------- 1 | // Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/upload.svg` to regenerate; 2 | import React from 'react' 3 | 4 | function SvgUpload(props) { 5 | return ( 6 | 7 | 8 | 9 | ) 10 | } 11 | 12 | export default SvgUpload 13 | -------------------------------------------------------------------------------- /react/Icons/Warning.jsx: -------------------------------------------------------------------------------- 1 | // Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/warning.svg` to regenerate; 2 | import React from 'react' 3 | 4 | function SvgWarning(props) { 5 | return ( 6 | 7 | 8 | 9 | ) 10 | } 11 | 12 | export default SvgWarning 13 | -------------------------------------------------------------------------------- /react/Input/styles.styl: -------------------------------------------------------------------------------- 1 | @require '../../stylus/components/forms' 2 | 3 | .c-input-text 4 | @extend $input-text 5 | 6 | .c-input-text--tiny 7 | @extend $input-text--tiny 8 | 9 | .c-input-text--medium 10 | @extend $input-text--medium 11 | 12 | .c-input-text--large 13 | @extend $input-text--large 14 | 15 | .c-input-text--fullwidth 16 | @extend $input-text--fullwidth 17 | -------------------------------------------------------------------------------- /react/InputAdornment/index.js: -------------------------------------------------------------------------------- 1 | import InputAdornment from '@material-ui/core/InputAdornment' 2 | 3 | export default InputAdornment 4 | -------------------------------------------------------------------------------- /react/InputBase/index.js: -------------------------------------------------------------------------------- 1 | import InputBase from '@material-ui/core/InputBase' 2 | 3 | export default InputBase 4 | -------------------------------------------------------------------------------- /react/IntentDialogOpener/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './IntentDialogOpener' 2 | -------------------------------------------------------------------------------- /react/IntentIframe/index.js: -------------------------------------------------------------------------------- 1 | export { default, iframeProps } from './IntentIframe' 2 | -------------------------------------------------------------------------------- /react/IntentWrapper/styles.styl: -------------------------------------------------------------------------------- 1 | @require 'tools/mixins' 2 | @require 'components/modals' 3 | 4 | .intentWrapper 5 | @extend $modal 6 | 7 | .intentHeader 8 | display flex 9 | align-items center 10 | padding rem(4 16) 11 | margin 0 12 | 13 | .intentContent [class^='c-header-icon--ghost'] 14 | margin 0 15 | -------------------------------------------------------------------------------- /react/Label/styles.styl: -------------------------------------------------------------------------------- 1 | @require '../../stylus/components/forms' 2 | 3 | .c-label 4 | @extend $label 5 | 6 | .c-label--block 7 | @extend $label--block 8 | -------------------------------------------------------------------------------- /react/Labs/CollectionField/styles.styl: -------------------------------------------------------------------------------- 1 | @require 'settings/spaces.styl' 2 | 3 | .CollectionField__addBtn 4 | margin-left 0 5 | margin-right 0 6 | 7 | .CollectionField__addBtnIcon 8 | margin-right spacing_values.xs 9 | 10 | .CollectionField__row 11 | display flex 12 | align-items center 13 | 14 | > * + * 15 | margin-left spacing_values.m 16 | -------------------------------------------------------------------------------- /react/Labs/IconGrid/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | import styles from './styles.styl' 4 | 5 | const IconGrid = ({ children }) => ( 6 |
{children}
7 | ) 8 | 9 | export default IconGrid 10 | -------------------------------------------------------------------------------- /react/Labs/IconGrid/styles.styl: -------------------------------------------------------------------------------- 1 | .iconGrid 2 | display grid 3 | grid-template-columns repeat(2, 16px) 4 | grid-template-rows repeat(2, 16px) 5 | grid-gap 1px 6 | -------------------------------------------------------------------------------- /react/Labs/Readme.md: -------------------------------------------------------------------------------- 1 | # Labs 2 | 3 | In this directory, components you will find are experimental and 4 | subject to API change without creating any breaking change. 5 | -------------------------------------------------------------------------------- /react/Labs/index.jsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cozy/cozy-ui/2cee962e6185e5916ab61dae163ff87e1e6dba92/react/Labs/index.jsx -------------------------------------------------------------------------------- /react/Layout/index.js: -------------------------------------------------------------------------------- 1 | export { Layout, Main, Content } from './Layout' 2 | -------------------------------------------------------------------------------- /react/Layout/styles.styl: -------------------------------------------------------------------------------- 1 | @require '../../stylus/objects/layouts' 2 | 3 | .o-layout 4 | @extend $app 5 | 6 | .o-layout--withTopBar 7 | @extend $app--withTopBar 8 | 9 | .o-layout-2panes 10 | @extend $app-2panes-sticky 11 | 12 | .o-layout-2panes--withTopBar 13 | @extend $app-2panes--withTopBar 14 | -------------------------------------------------------------------------------- /react/LinearProgress/index.js: -------------------------------------------------------------------------------- 1 | import MuiLinearProgress from '@material-ui/core/LinearProgress' 2 | 3 | export default MuiLinearProgress 4 | -------------------------------------------------------------------------------- /react/Link/index.js: -------------------------------------------------------------------------------- 1 | import MuiLink from '@material-ui/core/Link' 2 | 3 | export default MuiLink 4 | -------------------------------------------------------------------------------- /react/List/index.js: -------------------------------------------------------------------------------- 1 | import List from '@material-ui/core/List' 2 | 3 | import { withStyles } from '../styles' 4 | 5 | export const BorderedList = withStyles({ 6 | root: { 7 | borderTop: '1px solid var(--silver)' 8 | } 9 | })(List) 10 | 11 | export default List 12 | -------------------------------------------------------------------------------- /react/ListItem/hoc/withListItemLocales.jsx: -------------------------------------------------------------------------------- 1 | import withLocales from '../../providers/I18n/withLocales' 2 | import en from '../locales/en.json' 3 | import fr from '../locales/fr.json' 4 | 5 | export const locales = { 6 | en, 7 | fr 8 | } 9 | 10 | export default withLocales(locales) 11 | -------------------------------------------------------------------------------- /react/ListItemAvatar/index.js: -------------------------------------------------------------------------------- 1 | import ListItemAvatar from '@material-ui/core/ListItemAvatar' 2 | 3 | export default ListItemAvatar 4 | -------------------------------------------------------------------------------- /react/ListItemSecondaryAction/index.js: -------------------------------------------------------------------------------- 1 | import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction' 2 | 3 | export default ListItemSecondaryAction 4 | -------------------------------------------------------------------------------- /react/Menu/index.js: -------------------------------------------------------------------------------- 1 | import Menu from '@material-ui/core/Menu' 2 | 3 | export default Menu 4 | -------------------------------------------------------------------------------- /react/MenuList/index.js: -------------------------------------------------------------------------------- 1 | import MuiMenuList from '@material-ui/core/MenuList' 2 | 3 | export default MuiMenuList 4 | -------------------------------------------------------------------------------- /react/MidEllipsis/Readme.md: -------------------------------------------------------------------------------- 1 | #### Ellipsis in the middle 2 | 3 | Text can be passed in `text` prop or as `child`. 4 | 5 | ```jsx 6 | import MidEllipsis from 'cozy-ui/transpiled/react/MidEllipsis' 7 | 8 | ; 9 | 10 | 11 | ``` 12 | -------------------------------------------------------------------------------- /react/MobileStepper/index.js: -------------------------------------------------------------------------------- 1 | import MuiMobileStepper from '@material-ui/core/MobileStepper' 2 | 3 | export default MuiMobileStepper 4 | -------------------------------------------------------------------------------- /react/Modal/index.js: -------------------------------------------------------------------------------- 1 | import Modal from '@material-ui/core/Modal' 2 | 3 | export default Modal 4 | -------------------------------------------------------------------------------- /react/MuiCozyTheme/Readme.md: -------------------------------------------------------------------------------- 1 | ```jsx static 2 | import MuiCozyTheme from 'cozy-ui/transpiled/react/MuiCozyTheme' 3 | import Button from '@material-ui/core/Button' 4 | 5 | const DisplayButtonWithCozyTheme = () => ( 6 | 7 | 8 | 9 | ) 10 | ``` 11 | -------------------------------------------------------------------------------- /react/MuiCozyTheme/overrides/makeDarkInvertedOverrides.js: -------------------------------------------------------------------------------- 1 | import { makeLightInvertedOverrides } from './makeLightInvertedOverrides' 2 | 3 | export const makeDarkInvertedOverrides = theme => { 4 | return makeLightInvertedOverrides(theme) 5 | } 6 | -------------------------------------------------------------------------------- /react/MuiCozyTheme/overrides/makeDarkNormalOverrides.js: -------------------------------------------------------------------------------- 1 | import { makeLightNormalOverrides } from './makeLightNormalOverrides' 2 | 3 | export const makeDarkNormalOverrides = theme => { 4 | return makeLightNormalOverrides(theme) 5 | } 6 | -------------------------------------------------------------------------------- /react/NativeSelect/index.js: -------------------------------------------------------------------------------- 1 | import MuiNativeSelect from '@material-ui/core/NativeSelect' 2 | 3 | export default MuiNativeSelect 4 | -------------------------------------------------------------------------------- /react/Nav/locales/en.json: -------------------------------------------------------------------------------- 1 | { 2 | "navLimiter": { 3 | "showMore": "Show More", 4 | "showLess": "Show Less" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /react/Nav/locales/fr.json: -------------------------------------------------------------------------------- 1 | { 2 | "navLimiter": { 3 | "showMore": "Voir plus", 4 | "showLess": "Voir moins" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /react/Nav/locales/withNavLocales.jsx: -------------------------------------------------------------------------------- 1 | import en from './en.json' 2 | import fr from './fr.json' 3 | import withOnlyLocales from '../../providers/I18n/withOnlyLocales' 4 | 5 | export const locales = { 6 | en, 7 | fr 8 | } 9 | 10 | export default withOnlyLocales(locales) 11 | -------------------------------------------------------------------------------- /react/NavigationList/styles.styl: -------------------------------------------------------------------------------- 1 | .DesktopSectionWrapper 2 | list-style-type none 3 | -------------------------------------------------------------------------------- /react/NestedSelect/NestedSelectResponsive.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | import BottomSheet from './BottomSheet' 4 | import Modal from './Modal' 5 | import useBreakpoints from '../providers/Breakpoints' 6 | 7 | const NestedSelectResponsive = props => { 8 | const { isMobile } = useBreakpoints() 9 | 10 | const Wrapper = isMobile ? BottomSheet : Modal 11 | 12 | return 13 | } 14 | 15 | export default NestedSelectResponsive 16 | -------------------------------------------------------------------------------- /react/NestedSelect/index.jsx: -------------------------------------------------------------------------------- 1 | export { default } from './NestedSelect' 2 | export { default as NestedSelectModal } from './Modal' 3 | export { default as NestedSelectBottomSheet } from './BottomSheet' 4 | export { default as NestedSelectResponsive } from './NestedSelectResponsive' 5 | -------------------------------------------------------------------------------- /react/NestedSelect/testing.js: -------------------------------------------------------------------------------- 1 | import { ItemRow } from './NestedSelect' 2 | 3 | export const findOptions = root => root.find(ItemRow) 4 | -------------------------------------------------------------------------------- /react/NoSsr/index.js: -------------------------------------------------------------------------------- 1 | import MuiNoSsr from '@material-ui/core/NoSsr' 2 | 3 | export default MuiNoSsr 4 | -------------------------------------------------------------------------------- /react/OrderedList/Readme.md: -------------------------------------------------------------------------------- 1 | ```jsx 2 | import { OrderedList, ListItem } from 'cozy-ui/transpiled/react/OrderedList'; 3 | 4 | 5 | Do this 6 | Then do this 7 | And finally do this 8 | 9 | ``` 10 | -------------------------------------------------------------------------------- /react/OutlinedInput/index.js: -------------------------------------------------------------------------------- 1 | import MuiOutlinedInput from '@material-ui/core/OutlinedInput' 2 | 3 | export default MuiOutlinedInput 4 | -------------------------------------------------------------------------------- /react/Page/styles.styl: -------------------------------------------------------------------------------- 1 | .PageFooter 2 | flex-grow 0 3 | 4 | .PageContent 5 | flex-grow 1 6 | 7 | .PageLayout 8 | display flex 9 | flex-direction column 10 | -------------------------------------------------------------------------------- /react/Panel/index.jsx: -------------------------------------------------------------------------------- 1 | import styles from './styles.styl' 2 | import { mkComponent } from '../utils' 3 | 4 | export const Group = mkComponent('div', { className: styles['Panel-group'] }) 5 | export const Main = mkComponent('div', { className: styles['Panel-main'] }) 6 | export const Side = mkComponent('aside', { className: styles['Panel-side'] }) 7 | 8 | export default { 9 | Group, 10 | Main, 11 | Side 12 | } 13 | -------------------------------------------------------------------------------- /react/Panel/styles.styl: -------------------------------------------------------------------------------- 1 | @require '../../stylus/components/panels' 2 | 3 | .Panel-group 4 | @extend $panel-group 5 | 6 | .Panel-main 7 | @extend $panel-main 8 | 9 | .Panel-side 10 | @extend $panel-side 11 | -------------------------------------------------------------------------------- /react/Paper/index.js: -------------------------------------------------------------------------------- 1 | import Paper from '@material-ui/core/Paper' 2 | 3 | export default Paper 4 | -------------------------------------------------------------------------------- /react/PasswordExample/Readme.md: -------------------------------------------------------------------------------- 1 | ```jsx 2 | import PasswordExample from 'cozy-ui/transpiled/react/PasswordExample'; 3 | 4 | 5 | 6 | ``` 7 | 8 | Color can be deactivated: 9 | 10 | ```jsx 11 | import PasswordExample from 'cozy-ui/transpiled/react/PasswordExample'; 12 | 13 | ``` 14 | -------------------------------------------------------------------------------- /react/PasswordExample/styles.styl: -------------------------------------------------------------------------------- 1 | palette=json('../../stylus/settings/palette.json', { hash: true }) 2 | 3 | .Token--number 4 | color palette['dodgerBlue'] 5 | 6 | .Token--special 7 | color palette['lightishPurple'] 8 | -------------------------------------------------------------------------------- /react/PasswordField/Readme.md: -------------------------------------------------------------------------------- 1 | ```jsx 2 | import PasswordField from 'cozy-ui/transpiled/react/PasswordField' 3 | import DemoProvider from 'cozy-ui/docs/components/DemoProvider'; 4 | 5 | 6 | 7 | 8 | ``` 9 | -------------------------------------------------------------------------------- /react/PasswordField/locales/en.json: -------------------------------------------------------------------------------- 1 | { 2 | "password-field": { 3 | "show": "Show password", 4 | "hide": "Hide password" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /react/PasswordField/locales/fr.json: -------------------------------------------------------------------------------- 1 | { 2 | "password-field": { 3 | "show": "Afficher le mot de passe", 4 | "hide": "Masquer le mot de passe" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /react/Paywall/locales/withPaywallLocales.jsx: -------------------------------------------------------------------------------- 1 | import en from './en.json' 2 | import fr from './fr.json' 3 | import withOnlyLocales from '../../providers/I18n/withOnlyLocales' 4 | 5 | const locales = { 6 | en, 7 | fr 8 | } 9 | 10 | export default withOnlyLocales(locales) 11 | -------------------------------------------------------------------------------- /react/Popover/index.js: -------------------------------------------------------------------------------- 1 | import Popover from '@material-ui/core/Popover' 2 | 3 | export default Popover 4 | -------------------------------------------------------------------------------- /react/Popper/index.js: -------------------------------------------------------------------------------- 1 | import Popper from '@material-ui/core/Popper' 2 | 3 | export default Popper 4 | -------------------------------------------------------------------------------- /react/PopupOpener/Readme.md: -------------------------------------------------------------------------------- 1 | #### An popup opener 2 | 3 | ```jsx 4 | import PopupOpener from 'cozy-ui/transpiled/react/PopupOpener'; 5 | 6 | 7 | 8 | ``` 9 | -------------------------------------------------------------------------------- /react/Portal/index.jsx: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom' 2 | 3 | const Portal = ({ into, children }) => { 4 | const targetElement = document.querySelector(into) 5 | return ReactDOM.createPortal(children, targetElement) 6 | } 7 | 8 | export default Portal 9 | -------------------------------------------------------------------------------- /react/Progress/index.js: -------------------------------------------------------------------------------- 1 | export { default as LinearProgress } from '@material-ui/core/LinearProgress' 2 | export { default as CircularProgress } from '@material-ui/core/CircularProgress' 3 | -------------------------------------------------------------------------------- /react/QualificationGrid/helpers.js: -------------------------------------------------------------------------------- 1 | import { themesList } from 'cozy-client/dist/models/document/documentTypeData' 2 | import flag from 'cozy-flags' 3 | 4 | export const getThemesList = () => 5 | flag('hide.healthTheme.enabled') 6 | ? themesList.filter(theme => theme.label !== 'health') 7 | : themesList 8 | -------------------------------------------------------------------------------- /react/QualificationGrid/locales/en.json: -------------------------------------------------------------------------------- 1 | { 2 | "themes": { 3 | "activity": "Activity", 4 | "family": "Family", 5 | "finance": "Finance", 6 | "health": "Health", 7 | "home": "Home", 8 | "identity": "Identity", 9 | "invoice": "Invoice", 10 | "others": "Others", 11 | "transport": "Transport", 12 | "undefined": "Undefined", 13 | "work_study": "Work" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /react/QualificationGrid/locales/fr.json: -------------------------------------------------------------------------------- 1 | { 2 | "themes": { 3 | "activity": "Loisirs", 4 | "family": "Famille", 5 | "finance": "Finances", 6 | "health": "Santé", 7 | "home": "Logement", 8 | "identity": "Identité", 9 | "invoice": "Factures", 10 | "others": "Autres", 11 | "transport": "Transport", 12 | "undefined": "Indéfini", 13 | "work_study": "Travail" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /react/QualificationGrid/locales/withLocales.jsx: -------------------------------------------------------------------------------- 1 | import en from './en.json' 2 | import fr from './fr.json' 3 | import withOnlyLocales from '../../providers/I18n/withOnlyLocales' 4 | 5 | export const locales = { 6 | en, 7 | fr 8 | } 9 | 10 | export default withOnlyLocales(locales) 11 | -------------------------------------------------------------------------------- /react/QualificationItem/Readme.md: -------------------------------------------------------------------------------- 1 | ```jsx 2 | import QualificationItem from 'cozy-ui/transpiled/react/QualificationItem' 3 | import PeopleIcon from 'cozy-ui/transpiled/react/Icons/People' 4 | 5 | ; 6 | 7 | 8 | ``` 9 | -------------------------------------------------------------------------------- /react/QualificationModal/locales/en.json: -------------------------------------------------------------------------------- 1 | { 2 | "QualificationModal": { 3 | "title": "Document type", 4 | "noDataLabel": "No result" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /react/QualificationModal/locales/fr.json: -------------------------------------------------------------------------------- 1 | { 2 | "QualificationModal": { 3 | "title": "Type de document", 4 | "noDataLabel": "Aucun résultat" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /react/QualificationModal/locales/index.jsx: -------------------------------------------------------------------------------- 1 | import en from './en.json' 2 | import fr from './fr.json' 3 | 4 | export const locales = { 5 | en, 6 | fr 7 | } 8 | -------------------------------------------------------------------------------- /react/RadioGroup/index.js: -------------------------------------------------------------------------------- 1 | import MuiRadioGroup from '@material-ui/core/RadioGroup' 2 | 3 | export default MuiRadioGroup 4 | -------------------------------------------------------------------------------- /react/RootRef/index.js: -------------------------------------------------------------------------------- 1 | import MuiRootRef from '@material-ui/core/RootRef' 2 | 3 | export default MuiRootRef 4 | -------------------------------------------------------------------------------- /react/ScopedCssBaseline/index.js: -------------------------------------------------------------------------------- 1 | import MuiScopedCssBaseline from '@material-ui/core/ScopedCssBaseline' 2 | 3 | export default MuiScopedCssBaseline 4 | -------------------------------------------------------------------------------- /react/SearchBar/locales/en.json: -------------------------------------------------------------------------------- 1 | { 2 | "SearchBar": { 3 | "placeholder": "Search" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /react/SearchBar/locales/fr.json: -------------------------------------------------------------------------------- 1 | { 2 | "SearchBar": { 3 | "placeholder": "Rechercher" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /react/SearchBar/locales/withOnlyLocales.jsx: -------------------------------------------------------------------------------- 1 | import en from './en.json' 2 | import fr from './fr.json' 3 | import withOnlyLocales from '../../providers/I18n/withOnlyLocales' 4 | 5 | export const locales = { 6 | en, 7 | fr 8 | } 9 | 10 | export default withOnlyLocales(locales) 11 | -------------------------------------------------------------------------------- /react/Select/index.js: -------------------------------------------------------------------------------- 1 | import MuiSelect from '@material-ui/core/Select' 2 | 3 | export default MuiSelect 4 | -------------------------------------------------------------------------------- /react/SelectBox/index.jsx: -------------------------------------------------------------------------------- 1 | export * from 'react-select' 2 | 3 | export { 4 | default, 5 | Option, 6 | CheckboxOption, 7 | ActionsOption, 8 | reactSelectControl 9 | } from './SelectBox' 10 | 11 | export { default as SelectBoxWithFixedOptions } from './SelectBoxWithFixedOptions' 12 | 13 | export { default as ControlDefault } from './ControlDefault' 14 | -------------------------------------------------------------------------------- /react/SelectionBar/styles.styl: -------------------------------------------------------------------------------- 1 | @require '../../stylus/tools/mixins' 2 | @require '../../stylus/components/button' 3 | @require '../../stylus/components/selectionbar' 4 | 5 | .SelectionBar 6 | @extend $selectionbar 7 | -------------------------------------------------------------------------------- /react/Sidebar/styles.styl: -------------------------------------------------------------------------------- 1 | @require 'objects/sidebar' 2 | 3 | .o-sidebar 4 | @extend $sidebar 5 | -------------------------------------------------------------------------------- /react/Skeleton/index.js: -------------------------------------------------------------------------------- 1 | import Skeleton from '@material-ui/lab/Skeleton' 2 | 3 | export default Skeleton 4 | -------------------------------------------------------------------------------- /react/Skeletons/index.js: -------------------------------------------------------------------------------- 1 | export { default as ListItemSkeleton } from './ListItemSkeleton' 2 | export { default as ListSkeleton } from './ListSkeleton' 3 | -------------------------------------------------------------------------------- /react/Slide/index.js: -------------------------------------------------------------------------------- 1 | import MuiSlide from '@material-ui/core/Slide' 2 | 3 | export default MuiSlide 4 | -------------------------------------------------------------------------------- /react/Slider/index.js: -------------------------------------------------------------------------------- 1 | import MuiSlider from '@material-ui/core/Slider' 2 | 3 | export default MuiSlider 4 | -------------------------------------------------------------------------------- /react/SnackbarContent/index.js: -------------------------------------------------------------------------------- 1 | import MuiSnackbarContent from '@material-ui/core/SnackbarContent' 2 | 3 | export default MuiSnackbarContent 4 | -------------------------------------------------------------------------------- /react/SquareAppIcon/constants.json: -------------------------------------------------------------------------------- 1 | { 2 | "iconSize": "4rem", 3 | "iconPadding": "0.625rem", 4 | "mobileIconSize": "4rem", 5 | "mobileIconPadding": "0.625rem" 6 | } 7 | -------------------------------------------------------------------------------- /react/Stack/styles.styl: -------------------------------------------------------------------------------- 1 | @require 'settings/spaces.styl' 2 | 3 | for k,v in spacing_values 4 | modifier = "--" + k 5 | .Stack{modifier} > * + * 6 | margin-top: v[0] 7 | -------------------------------------------------------------------------------- /react/Step/index.js: -------------------------------------------------------------------------------- 1 | import MuiStep from '@material-ui/core/Step' 2 | 3 | export default MuiStep 4 | -------------------------------------------------------------------------------- /react/StepButton/index.js: -------------------------------------------------------------------------------- 1 | import MuiStepButton from '@material-ui/core/StepButton' 2 | 3 | export default MuiStepButton 4 | -------------------------------------------------------------------------------- /react/StepConnector/index.js: -------------------------------------------------------------------------------- 1 | import MuiStepConnector from '@material-ui/core/StepConnector' 2 | 3 | export default MuiStepConnector 4 | -------------------------------------------------------------------------------- /react/StepContent/index.js: -------------------------------------------------------------------------------- 1 | import MuiStepContent from '@material-ui/core/StepContent' 2 | 3 | export default MuiStepContent 4 | -------------------------------------------------------------------------------- /react/StepIcon/index.js: -------------------------------------------------------------------------------- 1 | import MuiStepIcon from '@material-ui/core/StepIcon' 2 | 3 | export default MuiStepIcon 4 | -------------------------------------------------------------------------------- /react/StepLabel/index.js: -------------------------------------------------------------------------------- 1 | import MuiStepLabel from '@material-ui/core/StepLabel' 2 | 3 | export default MuiStepLabel 4 | -------------------------------------------------------------------------------- /react/Stepper/index.jsx: -------------------------------------------------------------------------------- 1 | export { default as Stepper } from '@material-ui/core/Stepper' 2 | export { default as Step } from '@material-ui/core/Step' 3 | export { default as StepButton } from '@material-ui/core/StepButton' 4 | export { default as StepLabel } from '@material-ui/core/StepLabel' 5 | -------------------------------------------------------------------------------- /react/SvgIcon/index.js: -------------------------------------------------------------------------------- 1 | import MuiSvgIcon from '@material-ui/core/SvgIcon' 2 | 3 | export default MuiSvgIcon 4 | -------------------------------------------------------------------------------- /react/SwipeableDrawer/index.js: -------------------------------------------------------------------------------- 1 | import MuiSwipeableDrawer from '@material-ui/core/SwipeableDrawer' 2 | 3 | export default MuiSwipeableDrawer 4 | -------------------------------------------------------------------------------- /react/Tab/index.js: -------------------------------------------------------------------------------- 1 | import MuiTab from '@material-ui/core/Tab' 2 | 3 | export default MuiTab 4 | -------------------------------------------------------------------------------- /react/Table/index.js: -------------------------------------------------------------------------------- 1 | import Table from '@material-ui/core/Table' 2 | 3 | export default Table 4 | -------------------------------------------------------------------------------- /react/TableBody/index.js: -------------------------------------------------------------------------------- 1 | import TableBody from '@material-ui/core/TableBody' 2 | 3 | export default TableBody 4 | -------------------------------------------------------------------------------- /react/TableCell/index.js: -------------------------------------------------------------------------------- 1 | import TableCell from '@material-ui/core/TableCell' 2 | 3 | export default TableCell 4 | -------------------------------------------------------------------------------- /react/TableContainer/index.js: -------------------------------------------------------------------------------- 1 | import TableContainer from '@material-ui/core/TableContainer' 2 | 3 | export default TableContainer 4 | -------------------------------------------------------------------------------- /react/TableFooter/index.js: -------------------------------------------------------------------------------- 1 | import TableFooter from '@material-ui/core/TableFooter' 2 | 3 | export default TableFooter 4 | -------------------------------------------------------------------------------- /react/TableHead/index.js: -------------------------------------------------------------------------------- 1 | import TableHead from '@material-ui/core/TableHead' 2 | 3 | export default TableHead 4 | -------------------------------------------------------------------------------- /react/TablePagination/index.js: -------------------------------------------------------------------------------- 1 | import TablePagination from '@material-ui/core/TablePagination' 2 | 3 | export default TablePagination 4 | -------------------------------------------------------------------------------- /react/TableSortLabel/index.js: -------------------------------------------------------------------------------- 1 | import TableSortLabel from '@material-ui/core/TableSortLabel' 2 | 3 | export default TableSortLabel 4 | -------------------------------------------------------------------------------- /react/Textarea/styles.styl: -------------------------------------------------------------------------------- 1 | @require '../../stylus/components/forms' 2 | 3 | .c-textarea 4 | @extend $textarea 5 | 6 | .c-textarea--tiny 7 | @extend $textarea--tiny 8 | 9 | .c-textarea--medium 10 | @extend $textarea--medium 11 | 12 | .c-textarea--fullwidth 13 | @extend $textarea--fullwidth 14 | -------------------------------------------------------------------------------- /react/TextareaAutosize/index.js: -------------------------------------------------------------------------------- 1 | import MuiTextareaAutosize from '@material-ui/core/TextareaAutosize' 2 | 3 | export default MuiTextareaAutosize 4 | -------------------------------------------------------------------------------- /react/Timeline/index.js: -------------------------------------------------------------------------------- 1 | import Timeline from '@material-ui/lab/Timeline' 2 | 3 | export default Timeline 4 | -------------------------------------------------------------------------------- /react/TimelineConnector/index.js: -------------------------------------------------------------------------------- 1 | import TimelineConnector from '@material-ui/lab/TimelineConnector' 2 | 3 | export default TimelineConnector 4 | -------------------------------------------------------------------------------- /react/TimelineContent/index.js: -------------------------------------------------------------------------------- 1 | import TimelineContent from '@material-ui/lab/TimelineContent' 2 | 3 | export default TimelineContent 4 | -------------------------------------------------------------------------------- /react/TimelineDot/index.js: -------------------------------------------------------------------------------- 1 | import TimelineDot from '@material-ui/lab/TimelineDot' 2 | 3 | export default TimelineDot 4 | -------------------------------------------------------------------------------- /react/TimelineItem/index.js: -------------------------------------------------------------------------------- 1 | import TimelineItem from '@material-ui/lab/TimelineItem' 2 | 3 | export default TimelineItem 4 | -------------------------------------------------------------------------------- /react/TimelineOppositeContent/index.js: -------------------------------------------------------------------------------- 1 | import TimelineOppositeContent from '@material-ui/lab/TimelineOppositeContent' 2 | 3 | export default TimelineOppositeContent 4 | -------------------------------------------------------------------------------- /react/TimelineSeparator/index.js: -------------------------------------------------------------------------------- 1 | import TimelineSeparator from '@material-ui/lab/TimelineSeparator' 2 | 3 | export default TimelineSeparator 4 | -------------------------------------------------------------------------------- /react/ToggleButtonGroup/index.js: -------------------------------------------------------------------------------- 1 | import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup' 2 | 3 | export default ToggleButtonGroup 4 | -------------------------------------------------------------------------------- /react/Toolbar/index.js: -------------------------------------------------------------------------------- 1 | import MuiToolbar from '@material-ui/core/Toolbar' 2 | 3 | export default MuiToolbar 4 | -------------------------------------------------------------------------------- /react/Tooltip/index.jsx: -------------------------------------------------------------------------------- 1 | import MUITooltip from '@material-ui/core/Tooltip' 2 | 3 | MUITooltip.defaultProps = { 4 | arrow: true 5 | } 6 | 7 | export default MUITooltip 8 | -------------------------------------------------------------------------------- /react/UnorderedList/Readme.md: -------------------------------------------------------------------------------- 1 | ```jsx 2 | import { UnorderedList, ListItem } from 'cozy-ui/transpiled/react/UnorderedList'; 3 | 4 | 5 | Do this 6 | And this 7 | Oh, and this, too 8 | 9 | ``` 10 | -------------------------------------------------------------------------------- /react/UploadQueue/Pending.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | import Typography from '../Typography' 4 | import { translate } from '../providers/I18n' 5 | 6 | const Pending = translate()(props => ( 7 | 8 | {props.t('item.pending')} 9 | 10 | )) 11 | 12 | export default Pending 13 | -------------------------------------------------------------------------------- /react/UploadQueue/helpers.js: -------------------------------------------------------------------------------- 1 | // https://date-fns.org/v2.28.0/docs/formatDistanceToNow 2 | export const numberOfReferencesForPluralForm = durationInSec => 3 | durationInSec < 90 || (durationInSec > 2670 && durationInSec < 5370) ? 1 : 2 4 | -------------------------------------------------------------------------------- /react/UploadQueue/locales/en.json: -------------------------------------------------------------------------------- 1 | { 2 | "header": "Uploading %{smart_count} photo to %{app} |||| Uploading %{smart_count} photos to %{app}", 3 | "header_mobile": "Uploading %{done} of %{smart_count}", 4 | "header_done": "Uploaded %{done} out of %{smart_count} successfully", 5 | "close": "close", 6 | "item": { 7 | "pending": "Pending", 8 | "remainingTime": "%{time} remaining" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /react/UploadQueue/locales/es.json: -------------------------------------------------------------------------------- 1 | { 2 | "header": "Subiendo %{smart_count} foto a %{app} |||| Subiendo %{smart_count} fotos a %{app}", 3 | "header_mobile": "Subiendo %{done} de %{smart_count}", 4 | "header_done": "Subidos %{done} de %{smart_count} con éxito", 5 | "close": "cerrar", 6 | "item": { 7 | "pending": "Pendiente", 8 | "remainingTime": "%{time} restante |||| %{time} restantes" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /react/Zoom/index.js: -------------------------------------------------------------------------------- 1 | import MuiZoom from '@material-ui/core/Zoom' 2 | 3 | export default MuiZoom 4 | -------------------------------------------------------------------------------- /react/deprecated/ActionMenu/ActionMenuRadio.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | import styles from './styles.styl' 4 | import Radio from '../Radio' 5 | 6 | export const ActionMenuRadio = props => { 7 | return 8 | } 9 | -------------------------------------------------------------------------------- /react/deprecated/ActionMenu/Actions/hr.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export const hr = () => { 4 | return { 5 | name: 'hr', 6 | Component: function hr() { 7 | return
8 | } 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /react/deprecated/ActionMenu/Actions/index.js: -------------------------------------------------------------------------------- 1 | export { makeActions } from './helpers' 2 | export { hr } from './hr' 3 | export { modify } from './modify' 4 | export { call } from './call' 5 | export { emailTo } from './emailTo' 6 | export { smsTo } from './smsTo' 7 | export { viewInContacts } from './viewInContacts' 8 | -------------------------------------------------------------------------------- /react/deprecated/ActionMenu/Actions/locales/en.json: -------------------------------------------------------------------------------- 1 | { 2 | "viewInContacts": "View in Cozy Contacts", 3 | "modify": "Modify", 4 | "emailTo": "Send an email", 5 | "smsTo": "Send a message", 6 | "print": "Print", 7 | "call": "Call" 8 | } 9 | -------------------------------------------------------------------------------- /react/deprecated/ActionMenu/Actions/locales/fr.json: -------------------------------------------------------------------------------- 1 | { 2 | "viewInContacts": "Voir dans Cozy Contacts", 3 | "modify": "Modifier", 4 | "emailTo": "Envoyer un e-mail", 5 | "smsTo": "Envoyer un message", 6 | "print": "Imprimer", 7 | "call": "Appeler" 8 | } 9 | -------------------------------------------------------------------------------- /react/deprecated/ActionMenu/Actions/locales/withActionsLocales.jsx: -------------------------------------------------------------------------------- 1 | import en from './en.json' 2 | import fr from './fr.json' 3 | import withLocales from '../../../../providers/I18n/withLocales' 4 | 5 | export const locales = { 6 | en, 7 | fr 8 | } 9 | 10 | export default withLocales(locales) 11 | -------------------------------------------------------------------------------- /react/deprecated/ActionMenu/styles.styl: -------------------------------------------------------------------------------- 1 | @require 'components/action-menu' 2 | 3 | .c-actionmenu 4 | @extends $actionmenu 5 | 6 | .c-actionmenu--inline 7 | @extends $actionmenu--inline 8 | 9 | .c-actionmenu-header 10 | @extends $actionmenu-header 11 | 12 | .c-actionmenu-item 13 | @extends $actionmenu-item 14 | 15 | .c-actionmenu-radio 16 | @extends $actionmenu-radio 17 | 18 | -------------------------------------------------------------------------------- /react/deprecated/BottomDrawer/styles.styl: -------------------------------------------------------------------------------- 1 | @require 'tools/mixins' 2 | @require 'settings/spaces' 3 | @require 'settings/breakpoints' 4 | @require 'generic/animations' 5 | 6 | .with-transition 7 | @extends $transition-transform-ease-out 8 | 9 | .BottomDrawer-content 10 | z-index var(--zIndex-drawer) 11 | position fixed 12 | bottom 0 13 | left 0 14 | right 0 15 | width 100% 16 | margin 0 17 | max-height 100vh 18 | overflow-y auto 19 | -------------------------------------------------------------------------------- /react/deprecated/CompositeRow/styles.styl: -------------------------------------------------------------------------------- 1 | @require 'settings/spaces.styl' 2 | 3 | // Cannot use spacing_values.m directly otherwise stylus 4 | // does not pick it up, we have to use a temporary variable 5 | row_padding=spacing_values.m 6 | 7 | .CompositeRow 8 | min-height 3rem 9 | padding row_padding 10 | 11 | &__dense 12 | padding-top 0 13 | padding-bottom 0 14 | 15 | .CompositeRow__body 16 | > * + * 17 | margin-top 2px 18 | -------------------------------------------------------------------------------- /react/deprecated/GridItem/styles.styl: -------------------------------------------------------------------------------- 1 | .gridItem-container { 2 | text-align center 3 | box-sizing border-box 4 | border-radius 4px 5 | white-space nowrap 6 | overflow hidden 7 | text-overflow ellipsis 8 | } -------------------------------------------------------------------------------- /react/deprecated/InlineCard/Readme.md: -------------------------------------------------------------------------------- 1 | A inline card is a small inline block used to separate some content from the rest of the UI. 2 | 3 | ```jsx 4 | import InlineCard from 'cozy-ui/transpiled/react/deprecated/InlineCard'; 5 | 6 | I am an inline card 7 | 8 | ``` 9 | -------------------------------------------------------------------------------- /react/deprecated/InlineCard/styles.styl: -------------------------------------------------------------------------------- 1 | @require 'tools/mixins' 2 | 3 | .c-inline-card 4 | display inline-block 5 | border rem(1) solid var(--silver) 6 | box-shadow 0 0 rem(10) rgba(0,0,0,0.1) 7 | padding rem(6) 8 | -------------------------------------------------------------------------------- /react/deprecated/IntentModal/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './IntentModal' 2 | -------------------------------------------------------------------------------- /react/deprecated/IntentOpener/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './IntentOpener' 2 | -------------------------------------------------------------------------------- /react/deprecated/Media/index.js: -------------------------------------------------------------------------------- 1 | export { Media, Bd, Img } from './Media' 2 | -------------------------------------------------------------------------------- /react/deprecated/Media/styles.styl: -------------------------------------------------------------------------------- 1 | @require 'objects/media' 2 | 3 | .media 4 | @extend $media 5 | 6 | .media--top 7 | @extend $media--top 8 | 9 | .media--bottom 10 | @extend $media--bottom 11 | 12 | .bd 13 | @extend $media__grow 14 | 15 | .img 16 | @extend $media__fixed 17 | -------------------------------------------------------------------------------- /react/deprecated/Modal/AnimatedContentHeader.jsx: -------------------------------------------------------------------------------- 1 | import { Component } from 'react' 2 | 3 | class AnimatedContentHeader extends Component { 4 | render() { 5 | return this.props.children 6 | } 7 | } 8 | 9 | export default AnimatedContentHeader 10 | -------------------------------------------------------------------------------- /react/deprecated/Modal/ModalFooter.jsx: -------------------------------------------------------------------------------- 1 | import cx from 'classnames' 2 | import React from 'react' 3 | 4 | import styles from './styles.styl' 5 | 6 | const ModalFooter = ({ children, className }) => ( 7 |
{children}
8 | ) 9 | 10 | export default ModalFooter 11 | -------------------------------------------------------------------------------- /react/deprecated/Modal/ModalSection.jsx: -------------------------------------------------------------------------------- 1 | import cx from 'classnames' 2 | import React from 'react' 3 | 4 | import styles from './styles.styl' 5 | 6 | const ModalSection = ({ children, className }) => ( 7 |
14 | {children} 15 |
16 | ) 17 | 18 | export default ModalSection 19 | -------------------------------------------------------------------------------- /react/deprecated/NarrowContent/index.jsx: -------------------------------------------------------------------------------- 1 | import cx from 'classnames' 2 | import React from 'react' 3 | 4 | import styles from './styles.styl' 5 | 6 | const NarrowContent = props => { 7 | const { className, ...rest } = props 8 | 9 | return
10 | } 11 | 12 | export default NarrowContent 13 | -------------------------------------------------------------------------------- /react/deprecated/NarrowContent/styles.styl: -------------------------------------------------------------------------------- 1 | .NarrowContent 2 | max-width 32rem 3 | -------------------------------------------------------------------------------- /react/deprecated/Overlay/styles.styl: -------------------------------------------------------------------------------- 1 | @require 'components/overlay' 2 | 3 | .c-overlay 4 | @extend $overlay 5 | -------------------------------------------------------------------------------- /react/deprecated/PercentageBar/styles.styl: -------------------------------------------------------------------------------- 1 | radius = 4px 2 | 3 | .PercentageBar 4 | background-color var(--defaultBackgroundColor) 5 | border 1px solid var(--borderMainColor) 6 | height 1.5rem 7 | border-radius radius 8 | 9 | .PercentageBar__line 10 | height 100% 11 | border-radius radius 12 | -------------------------------------------------------------------------------- /react/deprecated/PercentageLine/PercentageLine.styl: -------------------------------------------------------------------------------- 1 | .PercentageLine 2 | transition transform 0.3s ease 3 | transform-origin 0 0 4 | height 5px 5 | -------------------------------------------------------------------------------- /react/deprecated/PercentageLine/Readme.md: -------------------------------------------------------------------------------- 1 | ```jsx 2 | import PercentageLine from 'cozy-ui/transpiled/react/deprecated/PercentageLine'; 3 | initialState = { percentage: 0.5 * 100 }; 4 | 5 | <> 6 | 7 | {(state.percentage).toFixed(2)}% 8 | 9 | ``` 10 | -------------------------------------------------------------------------------- /react/deprecated/PushClientButton/styles.styl: -------------------------------------------------------------------------------- 1 | @require 'components/button.styl' 2 | 3 | .c-btn-client 4 | @extend $button-client 5 | -------------------------------------------------------------------------------- /react/deprecated/Radio/styles.styl: -------------------------------------------------------------------------------- 1 | @require 'components/forms' 2 | 3 | .c-input-radio 4 | @extend $radio 5 | -------------------------------------------------------------------------------- /react/deprecated/Table/styles.styl: -------------------------------------------------------------------------------- 1 | @require 'components/table.styl' 2 | 3 | .Table 4 | @extend $table 5 | 6 | .TableHead 7 | @extend $table-head 8 | 9 | .TableRow 10 | @extend $table-row-head 11 | 12 | .TableBody 13 | @extend $table-body 14 | 15 | .TableRow 16 | @extend $table-row 17 | 18 | .TableCell 19 | @extend $table-cell 20 | 21 | .TableHeader 22 | @extend $table-header 23 | -------------------------------------------------------------------------------- /react/deprecated/ViewStack/Readme.md: -------------------------------------------------------------------------------- 1 | ⚠️ You can see in the example below that the paragraph used in the slide needed to be changed to use padding instead of margin. Otherwise react-swipeable-view computes the height of the slide incorrectly. 2 | 3 | ```jsx 4 | import ViewStack from 'cozy-ui/transpiled/react/deprecated/ViewStack'; 5 | import { Slide } from './example'; 6 | 7 | 8 | 9 | 10 | ``` 11 | -------------------------------------------------------------------------------- /react/deprecated/ViewStack/context.js: -------------------------------------------------------------------------------- 1 | import React, { useContext } from 'react' 2 | 3 | export const ViewStackContext = React.createContext() 4 | export const useViewStack = () => useContext(ViewStackContext) 5 | -------------------------------------------------------------------------------- /react/deprecated/ViewStack/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './ViewStack' 2 | export { default as ModalStack } from './ModalStack' 3 | export { useViewStack, ViewStackContext } from './context' 4 | -------------------------------------------------------------------------------- /react/deprecated/readme.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /react/helpers/createDepreciationLogger.js: -------------------------------------------------------------------------------- 1 | const createDepreciationLogger = () => { 2 | let warned = false 3 | 4 | return message => { 5 | if (!warned) console.warn(message) 6 | warned = true 7 | } 8 | } 9 | 10 | export default createDepreciationLogger 11 | -------------------------------------------------------------------------------- /react/helpers/getRandomUUID.spec.js: -------------------------------------------------------------------------------- 1 | import { getRandomUUID } from './getRandomUUID' 2 | 3 | describe('getRandomUUID', () => { 4 | it('returns a random uuid', () => { 5 | const uuid = getRandomUUID() 6 | 7 | expect(uuid).toBe('random-uuid-for-jest') 8 | }) 9 | }) 10 | -------------------------------------------------------------------------------- /react/helpers/isTesting.js: -------------------------------------------------------------------------------- 1 | export default () => 2 | navigator && navigator.userAgent && navigator.userAgent.includes('Argos') 3 | -------------------------------------------------------------------------------- /react/helpers/ref.js: -------------------------------------------------------------------------------- 1 | export function isRef(obj) { 2 | return ( 3 | obj !== null && 4 | typeof obj === 'object' && 5 | Object.prototype.hasOwnProperty.call(obj, 'current') 6 | ) 7 | } 8 | 9 | export function unRef(element) { 10 | return isRef(element) ? element.current : element 11 | } 12 | -------------------------------------------------------------------------------- /react/hooks/useBreakpoints.md: -------------------------------------------------------------------------------- 1 | ## useBreakpoints 2 | 3 | Used to have access to the current breakpoint based on the window's size. 4 | The component will be refreshed if the window's size changes. 5 | 6 | ```jsx static 7 | import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints' 8 | 9 | const Component = () => { 10 | const { isMobile } = useBreakpoints() 11 | } 12 | ``` 13 | -------------------------------------------------------------------------------- /react/hooks/useBrowserOffline.md: -------------------------------------------------------------------------------- 1 | Access the current network status. 2 | 3 | ```jsx static 4 | import useBrowserOffline from 'cozy-ui/transpiled/react/hooks/useBrowserOffline' 5 | 6 | const Component = () => { 7 | const isOffline = useBrowserOffline() 8 | } 9 | ``` 10 | -------------------------------------------------------------------------------- /react/hooks/useConfirmExit/locales/en.json: -------------------------------------------------------------------------------- 1 | { 2 | "useConfirmExit": { 3 | "back": "Cancel", 4 | "leave": "Leave without saving", 5 | "title": "Abandon your changes?", 6 | "message": "Some changes may not be saved yet. Do you really want to leave and lose these changes?" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /react/hooks/useConfirmExit/locales/fr.json: -------------------------------------------------------------------------------- 1 | { 2 | "useConfirmExit": { 3 | "back": "Retour", 4 | "leave": "Quitter", 5 | "title": "Abandonner les modifications ?", 6 | "message": "Des modifications n'ont pas encore pu être enregistrées. Voulez-vous vraiment quitter et perdre ces modifications ?" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /react/hooks/useEventListener.md: -------------------------------------------------------------------------------- 1 | Subscribes to a DOM element event while the component is mounted. 2 | 3 | ```jsx static 4 | import useEventListener from 'cozy-ui/transpiled/react/hooks/useEventListener' 5 | 6 | const Component = () => { 7 | const cb = useCallback(() => { 8 | alert('Hello world') 9 | }) 10 | useEventListener(document, 'click', cb) 11 | return
12 | } 13 | ``` 14 | -------------------------------------------------------------------------------- /react/hooks/useMediaQuery.js: -------------------------------------------------------------------------------- 1 | import MuiuseMediaQuery from '@material-ui/core/useMediaQuery' 2 | 3 | const useMediaQuery = (args, options) => 4 | MuiuseMediaQuery(args, { ...options, noSsr: true }) 5 | 6 | export default useMediaQuery 7 | -------------------------------------------------------------------------------- /react/jestLib/I18n.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | import { I18n } from '../providers/I18n' 4 | 5 | export const I18nContext = options => { 6 | const I18nComponent = new I18n({ 7 | lang: options.lang, 8 | defaultLang: options.defaultLang, 9 | dictRequire: () => options.locale 10 | }) 11 | 12 | return I18nComponent.getContextValue() 13 | } 14 | -------------------------------------------------------------------------------- /react/legacy/readme.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /react/providers/Readme.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /react/styles/index.js: -------------------------------------------------------------------------------- 1 | export * from '@material-ui/core/styles' 2 | -------------------------------------------------------------------------------- /react/types.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.styl' { 2 | const classes: Record 3 | export default classes 4 | } 5 | -------------------------------------------------------------------------------- /react/utils/color.spec.js: -------------------------------------------------------------------------------- 1 | import { getCssVariableValue } from './color' 2 | 3 | describe('getCssVariableValue', () => { 4 | it('should return a mocked value in test env', () => { 5 | expect(getCssVariableValue('dodgerBlue')).toBe('#fff') 6 | expect(getCssVariableValue('whatever')).toBe('#fff') 7 | }) 8 | }) 9 | -------------------------------------------------------------------------------- /react/utils/dom.jsx: -------------------------------------------------------------------------------- 1 | export const getScrollParent = element => { 2 | let el = element 3 | let scrollTop = 0 4 | 5 | while (el && el.parentNode !== document) { 6 | scrollTop += el.scrollTop 7 | el = el.parentNode 8 | } 9 | return scrollTop 10 | } 11 | -------------------------------------------------------------------------------- /renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["cozy-libs"] 3 | } 4 | -------------------------------------------------------------------------------- /scripts/build-utils.js: -------------------------------------------------------------------------------- 1 | const isUsingDevStyleguidist = () => { 2 | const buildEnv = process.env.BUILD_ENV 3 | return buildEnv === 'watch-styleguidist' 4 | } 5 | 6 | module.exports = { 7 | isUsingDevStyleguidist 8 | } 9 | -------------------------------------------------------------------------------- /scripts/make-palette.sh: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | 3 | set -eu 4 | 5 | # Palette needs to be accessible from stylus and from JS 6 | JS_PALETTE='react/palette.js' 7 | 8 | echo "Making palette, output file : ${JS_PALETTE}..." 9 | echo "// GENERATED AUTOMATICALLY FROM stylus/settings/palette.json" > $JS_PALETTE 10 | echo "export default `cat stylus/settings/palette.json`" >> $JS_PALETTE 11 | node_modules/.bin/eslint --fix $JS_PALETTE 12 | -------------------------------------------------------------------------------- /scripts/removeEmptyCss.js: -------------------------------------------------------------------------------- 1 | const replace = require('replace-in-file') 2 | 3 | const REGEX = /[^\};\{\n]+\{\s*\}/gm 4 | const options = { 5 | files: ['dist/cozy-ui.min.css', 'dist/cozy-ui.utils.min.css'], 6 | from: REGEX, 7 | to: '' 8 | } 9 | 10 | replace(options) 11 | .then(results => { 12 | console.log('Replacement results:', results) 13 | }) 14 | .catch(error => { 15 | console.error('Error occurred:', error) 16 | }) 17 | -------------------------------------------------------------------------------- /scripts/removeEmptyCss.spec.js: -------------------------------------------------------------------------------- 1 | it('should test the removeEmptyCSS method', () => { 2 | const CSS = `.emptyClass{} .emptyClass1 {} .emptyClass2 { } .notEmpty{color: red} .notEmpty1 {color: red} .noteEmpty2 { color: red }` 3 | const cleanedCSS = CSS.replace(/[^\};\{\n]+\{\s*\}/gm, '') 4 | expect(cleanedCSS).toBe( 5 | ' .notEmpty{color: red} .notEmpty1 {color: red} .noteEmpty2 { color: red }' 6 | ) 7 | }) 8 | -------------------------------------------------------------------------------- /stylus/components/apptitle.styl: -------------------------------------------------------------------------------- 1 | $apptitle 2 | display inline-flex 3 | align-items center 4 | margin 0 5 | 6 | -------------------------------------------------------------------------------- /stylus/components/avatar.styl: -------------------------------------------------------------------------------- 1 | @require '../tools/mixins' 2 | 3 | $avatar 4 | background-color var(--paleGrey) 5 | color var(--silver) 6 | position relative 7 | 8 | svg 9 | width 50% 10 | height 50% 11 | 12 | $avatar-image 13 | width 100% 14 | -------------------------------------------------------------------------------- /stylus/components/card.styl: -------------------------------------------------------------------------------- 1 | @require 'settings/breakpoints' 2 | @require 'tools/mixins' 3 | 4 | $card 5 | border rem(1) solid var(--dividerColor) 6 | border-radius rem(8) 7 | padding rem(16) 8 | text-decoration none 9 | display block 10 | 11 | $card--inset 12 | margin rem(16 32) 13 | 14 | +small-screen() 15 | margin rem(8) 16 | -------------------------------------------------------------------------------- /stylus/components/list.styl: -------------------------------------------------------------------------------- 1 | @require '../tools/mixins' 2 | 3 | $list-text 4 | display flex 5 | flex-direction column 6 | justify-content center 7 | min-height rem(40) 8 | 9 | .u-caption 10 | margin-top rem(3) 11 | -------------------------------------------------------------------------------- /stylus/components/menu.styl: -------------------------------------------------------------------------------- 1 | @require './popover' 2 | @require '../tools/mixins' 3 | 4 | $menu 5 | .coz-menu 6 | @extend $popover 7 | right 0 8 | padding rem(5) 0 9 | margin 0 10 | margin-top rem(1) 11 | min-width rem(220) 12 | -------------------------------------------------------------------------------- /stylus/components/overlay.styl: -------------------------------------------------------------------------------- 1 | $overlay 2 | z-index var(--zIndex-overlay) 3 | position fixed 4 | top 0 5 | left 0 6 | height 100% 7 | width 100% 8 | background var(--overlay) 9 | visibility visible 10 | transition opacity .3s, visibility 0s ease-out 11 | -------------------------------------------------------------------------------- /stylus/cozy-ui/index.styl: -------------------------------------------------------------------------------- 1 | @require '../generic/*' 2 | @require '../elements/*' 3 | @require '../utilities/*' 4 | -------------------------------------------------------------------------------- /stylus/cozy-ui/utils.styl: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 | CSS utility classes only 3 | \*------------------------------------*/ 4 | @require '../utilities/*' 5 | @require '../settings/palettes.styl' 6 | @require '../settings/z-index.styl' 7 | -------------------------------------------------------------------------------- /stylus/objects/media.styl: -------------------------------------------------------------------------------- 1 | $media 2 | display flex 3 | align-items center 4 | 5 | $media--top 6 | align-items flex-start 7 | 8 | $media--bottom 9 | align-items flex-end 10 | 11 | $media__grow 12 | flex 1 1 auto 13 | overflow hidden 14 | 15 | $media__fixed 16 | line-height 0 17 | flex 0 0 auto 18 | -------------------------------------------------------------------------------- /stylus/settings/radius.styl: -------------------------------------------------------------------------------- 1 | radius-8=8px 2 | -------------------------------------------------------------------------------- /stylus/settings/shadows.styl: -------------------------------------------------------------------------------- 1 | $elevation-0 2 | box-shadow none !important // @stylint ignore 3 | 4 | box-shadow-12=0 4px 12px 0 rgba(0, 0, 0, .08) 5 | 6 | $elevation-1 7 | box-shadow box-shadow-12 8 | border 1px solid rgba(0, 0, 0, .08) 9 | -------------------------------------------------------------------------------- /stylus/utilities/bgcolor.styl: -------------------------------------------------------------------------------- 1 | @require '../tools/mixins' 2 | @require './colors' 3 | 4 | json_colors=json('../settings/palette.json', { hash: true }) 5 | 6 | for color in utility_colors 7 | $bg-color-{color} 8 | background-color: json_colors[color] !important // @stylint ignore 9 | 10 | global('.u-bg-' + color, '$bg-color-' + color) 11 | 12 | .u-bg-transparent 13 | background-color transparent !important // @stylint ignore 14 | -------------------------------------------------------------------------------- /stylus/utilities/boxsizing.styl: -------------------------------------------------------------------------------- 1 | @require '../tools/mixins' 2 | /*------------------------------------*\ 3 | Box-sizing utility 4 | \*------------------------------------*/ 5 | 6 | $box-sizing-border 7 | box-sizing border-box 8 | 9 | // Global classes 10 | global('.u-bxz', $box-sizing-border) 11 | -------------------------------------------------------------------------------- /stylus/utilities/card.styl: -------------------------------------------------------------------------------- 1 | @require '../components/card' 2 | 3 | .u-card 4 | @extend $card 5 | 6 | -------------------------------------------------------------------------------- /stylus/utilities/debug.styl: -------------------------------------------------------------------------------- 1 | .u-debug 2 | background rgba(0, 0, 0, .075) 3 | border 1px solid red 4 | 5 | .u-debug .u-debug 6 | border-color blue 7 | 8 | .u-debug .u-debug .u-debug 9 | border-color green 10 | -------------------------------------------------------------------------------- /stylus/utilities/elevation.styl: -------------------------------------------------------------------------------- 1 | @require '../settings/shadows' 2 | 3 | .u-elevation-0 4 | @extend $elevation-0 5 | 6 | .u-elevation-1 7 | @extend $elevation-1 8 | -------------------------------------------------------------------------------- /stylus/utilities/filter.styl: -------------------------------------------------------------------------------- 1 | .u-filter-gray-100 2 | filter: grayscale(1) 3 | -------------------------------------------------------------------------------- /stylus/utilities/list.styl: -------------------------------------------------------------------------------- 1 | @require '../settings/breakpoints' 2 | @require '../tools/mixins' 3 | 4 | nolist() 5 | list-style-type none 6 | 7 | props = { 8 | 'nolist': 'nolist' 9 | } 10 | 11 | if cssmodules == true 12 | cssModulesUtils(props, breakpoints) 13 | else 14 | nativeUtils(props, breakpoints) 15 | -------------------------------------------------------------------------------- /stylus/utilities/media.styl: -------------------------------------------------------------------------------- 1 | @require '../tools/mixins' 2 | @require '../objects/media' 3 | 4 | global('.u-media', $media) 5 | global('.u-media-top', $media--top) 6 | global('.u-media-bottom', $media--bottom) 7 | global('.u-media-grow', $media__grow) 8 | global('.u-media-fixed', $media__fixed) 9 | -------------------------------------------------------------------------------- /stylus/utilities/opacity.styl: -------------------------------------------------------------------------------- 1 | .u-o-100 2 | opacity 1 3 | .u-o-90 4 | opacity .9 5 | .u-o-80 6 | opacity .8 7 | .u-o-70 8 | opacity .7 9 | .u-o-60 10 | opacity .6 11 | .u-o-50 12 | opacity .5 13 | .u-o-40 14 | opacity .4 15 | .u-o-30 16 | opacity .3 17 | .u-o-20 18 | opacity .2 19 | .u-o-10 20 | opacity .1 21 | .u-o-05 22 | opacity .05 23 | .u-o-025 24 | opacity .025 25 | .u-o-0 26 | opacity 0 27 | -------------------------------------------------------------------------------- /svgo.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | { 4 | name: 'preset-default', 5 | params: { 6 | overrides: { 7 | removeViewBox: false, 8 | inlineStyles: { 9 | onlyMatchedOnce: false 10 | }, 11 | cleanupIDs: { 12 | minify: false 13 | } 14 | } 15 | } 16 | } 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /test/__mocks__/fileMock.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | export default 'test-file-stub' 4 | -------------------------------------------------------------------------------- /test/basefont.styl: -------------------------------------------------------------------------------- 1 | body 2 | font-size 12px 3 | 4 | p 5 | font-size .875rem 6 | padding-top 1.4rem 7 | padding-bottom .875rem 8 | 9 | li 10 | a 11 | font-size 0.875rem 12 | -------------------------------------------------------------------------------- /tsconfig-build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "include": [ 4 | "react/**/*.js", 5 | "react/**/*.jsx", 6 | "react/**/*.ts", 7 | "react/**/*.tsx", 8 | ], 9 | "exclude": [ 10 | "test", 11 | "**/*.spec.tsx", 12 | "**/*.spec.ts", 13 | "**/*.test.tsx", 14 | "**/*.test.ts" 15 | ] 16 | } 17 | --------------------------------------------------------------------------------