├── .nvmrc ├── .npmrc ├── CODEOWNERS ├── .wuf ├── .gitignore ├── generator │ ├── templates │ │ └── Component │ │ │ ├── index.tsx │ │ │ ├── perf │ │ │ ├── ComponentExtended.st.css │ │ │ ├── ComponentBasic.tsx │ │ │ └── ComponentExtended.tsx │ │ │ ├── docs │ │ │ ├── ComponentWiringExample.tsx │ │ │ ├── ComponentWiringExample.st.css │ │ │ └── examples.ts │ │ │ ├── Component.meta.tsx │ │ │ └── Component.driver.ts │ └── codemods │ │ ├── index-file.js │ │ └── index.js ├── required-component-files.json └── testkits │ ├── puppeteer.template.ejs │ └── vanilla.template.ejs ├── src ├── components │ ├── Card │ │ ├── index.tsx │ │ ├── docs │ │ │ └── examples.st.css │ │ ├── mixins.st.css │ │ └── Card.e2e.ts │ ├── Grid │ │ ├── index.tsx │ │ ├── constants.ts │ │ ├── DataHooks.ts │ │ └── Item │ │ │ └── Item.driver.ts │ ├── Avatar │ │ ├── index.tsx │ │ ├── docs │ │ │ └── examples.ts │ │ ├── Avatar.meta.tsx │ │ └── Avatar.driver.ts │ ├── Badge │ │ ├── index.tsx │ │ ├── perf │ │ │ ├── BadgeBasic.tsx │ │ │ ├── BadgeExtendedBad.tsx │ │ │ ├── BadgeExtendedGood.tsx │ │ │ ├── BadgeExtendedBad.st.css │ │ │ └── BadgeExtendedGood.st.css │ │ ├── Badge.meta.tsx │ │ └── Badge.visual.st.css │ ├── Button │ │ ├── index.tsx │ │ ├── perf │ │ │ ├── ButtonBasic.tsx │ │ │ ├── ButtonExtended.tsx │ │ │ └── ButtonExtended.st.css │ │ ├── docs │ │ │ ├── examples.tsx │ │ │ └── ButtonWiringExample.st.css │ │ └── Button.driver.ts │ ├── Counter │ │ ├── index.tsx │ │ ├── docs │ │ │ └── CounterExtendedExample.st.css │ │ └── Counter.meta.tsx │ ├── Divider │ │ ├── index.tsx │ │ ├── docs │ │ │ ├── examples.tsx │ │ │ ├── DividerExtendedExample.tsx │ │ │ └── DividerExtendedExample.st.css │ │ ├── Divider.tsx │ │ └── Divider.st.css │ ├── Input │ │ ├── index.tsx │ │ ├── Input.protractor.driver.ts │ │ ├── docs │ │ │ ├── InputExtendedExample.tsx │ │ │ ├── InputExtendedExample.st.css │ │ │ └── index.story.tsx │ │ └── Input.driver.ts │ ├── NewCard │ │ ├── index.tsx │ │ ├── docs │ │ │ ├── examples.ts │ │ │ ├── NewCardWiringExample.st.css │ │ │ └── index.story.tsx │ │ ├── dataHooks.ts │ │ ├── NewCard.st.css │ │ ├── NewCard.meta.tsx │ │ └── NewCard.driver.ts │ ├── Picker │ │ ├── index.tsx │ │ ├── docs │ │ │ ├── examples.ts │ │ │ └── PickerWiringExample.st.css │ │ ├── dataHooks.ts │ │ └── Picker.visual.tsx │ ├── Ratings │ │ ├── index.tsx │ │ ├── docs │ │ │ ├── RatingsExtendedExample.st.css │ │ │ └── examples.ts │ │ └── dataHooks.ts │ ├── Tooltip │ │ ├── index.tsx │ │ ├── TooltipEnums.ts │ │ ├── docs │ │ │ ├── examples.tsx │ │ │ ├── testProps.ts │ │ │ └── TooltipTestStory.tsx │ │ ├── Tooltip.driver.ts │ │ ├── Tooltip.protractor.driver.ts │ │ ├── Arrows.tsx │ │ └── Arrows.spec.tsx │ ├── Checkbox │ │ ├── index.tsx │ │ ├── dataHooks.ts │ │ └── docs │ │ │ └── CheckboxExtendedExample.st.css │ ├── StripCard │ │ └── index.tsx │ ├── Autocomplete │ │ ├── index.tsx │ │ ├── Autocomplete.protractor.driver.ts │ │ └── Autocomplete.driver.ts │ ├── AvatarGroup │ │ ├── index.tsx │ │ ├── AvatarGroupTextButton │ │ │ ├── index.ts │ │ │ └── AvatarGroupTextButton.tsx │ │ ├── docs │ │ │ └── ExtendedExample.st.css │ │ └── AvatarGroup.driver.ts │ ├── BoxSelection │ │ ├── index.tsx │ │ ├── dataHooks.ts │ │ └── docs │ │ │ └── BoxSelectionWiringExample.st.css │ ├── CalendarCell │ │ ├── index.tsx │ │ ├── dataHooks.ts │ │ └── docs │ │ │ └── CalendarCellWiringExample.st.css │ ├── ColorPicker │ │ ├── index.tsx │ │ ├── ColorPickerItem │ │ │ ├── index.tsx │ │ │ └── tooltipCommonProps.ts │ │ ├── dataHooks.ts │ │ ├── docs │ │ │ ├── ColorPickerExtendedExample.st.css │ │ │ ├── ColorPickerAnotherExtendedExample.st.css │ │ │ └── ColorPickerFocusTabExample.st.css │ │ └── ColorPicker.meta.tsx │ ├── CounterBadge │ │ ├── index.tsx │ │ ├── constant.ts │ │ ├── CounterBadge.visual.st.css │ │ ├── CounterBadge.meta.tsx │ │ ├── docs │ │ │ ├── examples.tsx │ │ │ └── CounterBadgeExtendedExample.st.css │ │ └── CounterBadge.driver.ts │ ├── IconButton │ │ ├── index.tsx │ │ ├── IconButton.driver.ts │ │ ├── IconButton.meta.tsx │ │ └── docs │ │ │ ├── IconButtonExtendedExample.st.css │ │ │ └── examples.ts │ ├── IconToggle │ │ ├── index.tsx │ │ ├── IconToggle.protractor.driver.ts │ │ ├── docs │ │ │ ├── IconToggleExtendedExample.st.css │ │ │ └── examples.tsx │ │ └── IconToggle.driver.ts │ ├── Pagination │ │ ├── index.tsx │ │ ├── Pagination.protractor.driver.ts │ │ ├── docs │ │ │ ├── examples.ts │ │ │ └── PaginationWiringExample.st.css │ │ └── Pagination.driver.ts │ ├── Tabs │ │ ├── Tab │ │ │ └── index.tsx │ │ ├── index.tsx │ │ ├── TabsNavButton │ │ │ ├── index.tsx │ │ │ └── TabsNavButton.st.css │ │ ├── ScrollableTabs │ │ │ └── index.tsx │ │ ├── docs │ │ │ ├── TabsExtendedExample.st.css │ │ │ ├── TabsMobileExample.tsx │ │ │ └── TabsExtendedExample.tsx │ │ ├── constants.ts │ │ ├── dataHooks.ts │ │ └── Tabs.meta.tsx │ ├── TextButton │ │ ├── index.tsx │ │ └── docs │ │ │ ├── TextButtonWiringExample.tsx │ │ │ ├── TextButtonWiringExample.st.css │ │ │ └── examples.tsx │ ├── ToggleSwitch │ │ ├── index.tsx │ │ └── docs │ │ │ ├── examples.ts │ │ │ └── ToggleSwitchExtensionExample.st.css │ ├── DotNavigation │ │ ├── index.tsx │ │ ├── dataHooks.ts │ │ ├── docs │ │ │ ├── DotNavigationExtendedExample.st.css │ │ │ ├── DotNavigationTestStory.tsx │ │ │ ├── examples.ts │ │ │ └── DotNavigationExtendedExample.tsx │ │ └── README.md │ ├── CalendarPopover │ │ ├── index.tsx │ │ └── dataHooks.ts │ ├── Dialog │ │ ├── index.tsx │ │ ├── constants.ts │ │ └── docs │ │ │ └── DialogWiringExample.st.css │ ├── Event │ │ ├── index.tsx │ │ ├── dataHooks.ts │ │ ├── docs │ │ │ └── EventWiringExample.st.css │ │ └── Event.visual.tsx │ ├── OverlappingCard │ │ ├── index.tsx │ │ └── docs │ │ │ └── OverlappingCardExtendedExample.st.css │ ├── ErrorMessageWrapper │ │ ├── index.tsx │ │ ├── ErrorMessageWrapper.st.css │ │ └── ErrorMessageWrapper.driver.ts │ ├── TPAComponentsConfig │ │ ├── index.ts │ │ └── TPAComponentsConfig.tsx │ ├── Tags │ │ ├── index.tsx │ │ ├── dataHooks.ts │ │ ├── docs │ │ │ └── examples.ts │ │ ├── constants.ts │ │ ├── Tags.meta.tsx │ │ └── Tags.driver.ts │ ├── Toast │ │ ├── CloseIconButton │ │ │ ├── index.tsx │ │ │ ├── CloseIconButton.st.css │ │ │ └── CloseIconButton.tsx │ │ ├── index.tsx │ │ ├── helpers.ts │ │ └── Toast.meta.tsx │ ├── Text │ │ ├── index.tsx │ │ ├── docs │ │ │ ├── TextWiringExample.st.css │ │ │ ├── examples.tsx │ │ │ └── TextWiringExample.tsx │ │ ├── constants.ts │ │ ├── Text.visual.tsx │ │ ├── Text.driver.ts │ │ ├── Text.protractor.driver.ts │ │ └── Text.e2e.ts │ ├── Image │ │ ├── index.tsx │ │ ├── RelativeMediaImage │ │ │ ├── index.tsx │ │ │ └── RelativeMediaImage.st.css │ │ ├── docs │ │ │ ├── index.tsx │ │ │ ├── ImageWiringExample.tsx │ │ │ └── ImageWiringExample.st.css │ │ ├── Image.meta.tsx │ │ ├── Image.visual.st.css │ │ └── Image.driver.ts │ ├── SectionNotification │ │ ├── docs │ │ │ └── examples.scss │ │ ├── index.tsx │ │ ├── dataHooks.ts │ │ ├── Icon │ │ │ └── SectionNotificationIcon.tsx │ │ └── Text │ │ │ └── SectionNotificationText.tsx │ ├── DatePicker │ │ ├── index.tsx │ │ ├── constants.ts │ │ └── DatePicker.visual.st.css │ ├── ProgressBar │ │ ├── index.tsx │ │ ├── docs │ │ │ ├── ProgressBarWiringExample.st.css │ │ │ ├── ProgressBarWiringExample.tsx │ │ │ └── examples.ts │ │ ├── ProgressBar.driver.ts │ │ └── ProgressBar.visual.tsx │ ├── ShareButton │ │ ├── index.tsx │ │ ├── docs │ │ │ ├── ShareButtonWiringExample.st.css │ │ │ └── ShareButtonWiringExample.tsx │ │ ├── ShareButton.driver.ts │ │ ├── ShareButton.meta.tsx │ │ ├── ShareButton.st.css │ │ └── ShareButton.visual.tsx │ ├── TextArea │ │ ├── index.tsx │ │ ├── TextAreaEnums.ts │ │ ├── dataHooks.ts │ │ ├── dataKeys.ts │ │ ├── docs │ │ │ ├── connected │ │ │ │ ├── index.tsx │ │ │ │ └── TextAreaOverrides.st.css │ │ │ ├── TextAreaExtendedExample.st.css │ │ │ └── TextAreaTestStory.tsx │ │ └── TextArea.meta.tsx │ ├── HeroImage │ │ ├── index.tsx │ │ ├── types.ts │ │ ├── docs │ │ │ ├── HeroImageWiringExample.st.css │ │ │ ├── examples.ts │ │ │ └── HeroImageWiringExample.tsx │ │ ├── HeroImage.driver.ts │ │ ├── HeroImage.meta.tsx │ │ ├── HeroImage.visual.tsx │ │ └── HeroImage.tsx │ ├── LikeButton │ │ ├── index.tsx │ │ ├── LikeButton.driver.ts │ │ ├── docs │ │ │ ├── examples.tsx │ │ │ ├── LikeButtonWiringExample.st.css │ │ │ └── LikeButtonWiringExample.tsx │ │ └── LikeButton.protractor.driver.ts │ ├── StatesButton │ │ ├── index.ts │ │ ├── constants.ts │ │ ├── README.md │ │ ├── StatesButton.driver.ts │ │ └── docs │ │ │ └── StatesButtonExample.st.css │ ├── Tag │ │ ├── index.tsx │ │ ├── constants.ts │ │ ├── docs │ │ │ ├── TagWiringExample.st.css │ │ │ └── TagWiringExample.tsx │ │ ├── Tag.meta.tsx │ │ ├── Tag.driver.ts │ │ └── Tag.visual.tsx │ ├── TextField │ │ ├── index.tsx │ │ ├── TextFieldEnums.ts │ │ ├── dataKeys.ts │ │ ├── docs │ │ │ ├── TextFieldExtendedExample.st.css │ │ │ └── TextFieldExtendedExample.tsx │ │ ├── TextField.protractor.driver.ts │ │ └── ClearIcon.tsx │ ├── CopyUrlButton │ │ ├── index.tsx │ │ ├── docs │ │ │ ├── CopyUrlButtonWiringExample.st.css │ │ │ ├── CopyUrlButtonWiringExample.tsx │ │ │ └── examples.ts │ │ ├── CopyUrlButton.driver.ts │ │ ├── CopyUrlButton.meta.tsx │ │ └── CopyUrlButton.visual.tsx │ ├── SocialBar │ │ ├── docs │ │ │ └── SocialBarWiringExample.st.css │ │ ├── index.tsx │ │ ├── SocialBar.visual.tsx │ │ ├── SocialBar.meta.tsx │ │ ├── SocialBar.driver.ts │ │ ├── SocialBarIcon.st.css │ │ └── SocialBar.st.css │ ├── Spinner │ │ ├── index.tsx │ │ ├── docs │ │ │ ├── SpinnerWiringExample.st.css │ │ │ ├── SpinnerWiringExample.tsx │ │ │ └── examples.ts │ │ ├── Spinner.visual.tsx │ │ ├── Spinner.meta.tsx │ │ ├── Spinner.driver.ts │ │ └── types.ts │ ├── AddItem │ │ ├── constants.ts │ │ ├── index.tsx │ │ ├── docs │ │ │ ├── AddItemWiringExample.tsx │ │ │ └── AddItemWiringExample.st.css │ │ └── WSRTheme.tsx │ ├── FloatingDropdown │ │ ├── index.tsx │ │ ├── FloatingDropdownOption.ts │ │ ├── constants.ts │ │ ├── docs │ │ │ └── FloatingDropdownWiringExample.st.css │ │ ├── FloatingDropdown.meta.tsx │ │ ├── test-props.ts │ │ └── README.md │ ├── Popover │ │ ├── index.tsx │ │ ├── constants.ts │ │ ├── Popover.protractor.driver.ts │ │ ├── docs │ │ │ └── PopoverWiringExample.st.css │ │ └── Popover.driver.ts │ ├── RadioButton │ │ ├── index.tsx │ │ ├── docs │ │ │ └── RadioButtonWiringExample.st.css │ │ ├── dataHooks.ts │ │ └── RadioButton.meta.tsx │ ├── ThumbnailImage │ │ ├── index.tsx │ │ ├── types.ts │ │ ├── ThumbnailImage.driver.ts │ │ ├── ThumbnailImage.meta.tsx │ │ ├── ThumbnailImage.visual.tsx │ │ ├── docs │ │ │ ├── ThumbnailImageWiringExample.st.css │ │ │ └── ThumbnailImageWiringExample.tsx │ │ └── ThumbnailImage.tsx │ ├── internal │ │ └── Modal │ │ │ ├── index.tsx │ │ │ ├── dataHooks.ts │ │ │ ├── Modal.spec.tsx │ │ │ ├── types.ts │ │ │ └── Modal.st.css │ ├── ActionsMenuLayout │ │ ├── index.tsx │ │ ├── dataHooks.ts │ │ ├── ActionsMenuLayoutDivider │ │ │ ├── ActionsMenuLayoutDivider.st.css │ │ │ └── ActionsMenuLayoutDivider.tsx │ │ ├── perf │ │ │ └── ActionsMenuLayoutExtended.st.css │ │ ├── ActionsMenuLayout.meta.tsx │ │ └── docs │ │ │ └── ActionsMenuLayoutExtendedExample.st.css │ ├── CheckboxGroup │ │ ├── index.tsx │ │ └── docs │ │ │ └── CheckboxGroupExtendedExample.st.css │ ├── DatePickerInput │ │ ├── constants.ts │ │ ├── index.tsx │ │ └── docs │ │ │ └── DatePickerInputWiringExample.tsx │ ├── Dropdown │ │ ├── index.tsx │ │ └── constants.ts │ ├── RadioButtonGroup │ │ ├── index.tsx │ │ ├── README.md │ │ └── docs │ │ │ └── RadioButtonGroupWiringExample.st.css │ └── temp.visual.tsx ├── common │ ├── variables.st.css │ ├── random.ts │ ├── constants.ts │ ├── palette.st.css │ ├── fonts.st.css │ └── deprecationLog.ts ├── external-types.d.ts ├── assets │ └── icons │ │ ├── Social │ │ ├── Stitcher.svg │ │ ├── Rss.svg │ │ ├── Tumblr.svg │ │ ├── Facebook.svg │ │ ├── Youtube.svg │ │ ├── Linkedin.svg │ │ ├── Vimeo.svg │ │ ├── Twitter.svg │ │ ├── CopyLink.svg │ │ ├── Spotify.svg │ │ └── Pinterest.svg │ │ ├── Share.svg │ │ ├── XSmall.svg │ │ ├── Camera.svg │ │ ├── Close.svg │ │ ├── PlusS.svg │ │ ├── PlusXL.svg │ │ ├── plus.svg │ │ ├── CaretDown.svg │ │ ├── Star.svg │ │ ├── PlusL.svg │ │ ├── ChevronLeft.svg │ │ ├── ChevronRight.svg │ │ ├── ChevronRight.tsx │ │ ├── ChevronLeft.tsx │ │ ├── Calendar.svg │ │ └── CheckSuccess.svg ├── types.ts └── test │ └── visualTestUtils.ts ├── .storybook ├── addons.js ├── main.js ├── public │ └── product.png ├── webpack.config.js ├── addons │ └── FocusRingToggle │ │ ├── shared.js │ │ └── index.js ├── stories.scss └── preview-head.html ├── .swm └── swimm.json ├── .storybook-test ├── addons.js ├── webpack.config.js ├── stories.scss ├── preview-head.html └── config.js ├── wallaby.js ├── tslint.json ├── .prettierignore ├── mocks └── index.tsx ├── scripts ├── base-ui-version.js ├── ensure-build.sh ├── logger.js ├── utils.js └── tag.js ├── test ├── enzyme-setup.js ├── visual │ └── StyleProcessorUtil.ts └── protractor.d.ts ├── janet.json ├── .perfer └── package.json ├── .ci_config ├── stories ├── helperComponents │ ├── FocusRing.st.css │ ├── baseUI.global.scss │ └── FocusRing.tsx ├── utils │ ├── MobilePageStory.tsx │ ├── GenericApi.st.css │ ├── variableInfo.interface.ts │ ├── MobileExample.st.css │ └── SettingsApi.ts ├── storyHierarchy.ts ├── testStories.ts └── OptimizedStylesBanner.tsx ├── README.md ├── .autotools └── webpack.config.js ├── applitools.config.js ├── protractor.conf.js ├── .gitignore ├── docs └── MIGRATING-V1-V2.md ├── tsconfig.json └── .travis.yml /.nvmrc: -------------------------------------------------------------------------------- 1 | 12 2 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | package-lock=false 2 | -------------------------------------------------------------------------------- /CODEOWNERS: -------------------------------------------------------------------------------- 1 | * @wix/wix-ui-tpa 2 | -------------------------------------------------------------------------------- /.wuf/.gitignore: -------------------------------------------------------------------------------- 1 | components.json 2 | -------------------------------------------------------------------------------- /src/components/Card/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './Card'; 2 | -------------------------------------------------------------------------------- /src/components/Grid/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './Grid'; 2 | -------------------------------------------------------------------------------- /src/components/Avatar/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './Avatar'; 2 | -------------------------------------------------------------------------------- /src/components/Badge/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './Badge'; 2 | -------------------------------------------------------------------------------- /src/components/Button/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './Button'; 2 | -------------------------------------------------------------------------------- /src/components/Counter/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './Counter'; 2 | -------------------------------------------------------------------------------- /src/components/Divider/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './Divider'; 2 | -------------------------------------------------------------------------------- /src/components/Input/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './Input'; 2 | -------------------------------------------------------------------------------- /src/components/NewCard/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './NewCard'; 2 | -------------------------------------------------------------------------------- /src/components/Picker/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './Picker'; 2 | -------------------------------------------------------------------------------- /src/components/Ratings/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './Ratings'; 2 | -------------------------------------------------------------------------------- /src/components/Tooltip/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './Tooltip'; 2 | -------------------------------------------------------------------------------- /.storybook/addons.js: -------------------------------------------------------------------------------- 1 | import '@storybook/addon-links/register'; 2 | -------------------------------------------------------------------------------- /.swm/swimm.json: -------------------------------------------------------------------------------- 1 | { 2 | "repo_id": "mCFinbf3SsrtTfRx9agB" 3 | } -------------------------------------------------------------------------------- /src/components/Checkbox/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './Checkbox'; 2 | -------------------------------------------------------------------------------- /src/components/StripCard/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './StripCard'; 2 | -------------------------------------------------------------------------------- /.storybook-test/addons.js: -------------------------------------------------------------------------------- 1 | import '@storybook/addon-links/register'; 2 | -------------------------------------------------------------------------------- /src/components/Autocomplete/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './Autocomplete'; 2 | -------------------------------------------------------------------------------- /src/components/AvatarGroup/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './AvatarGroup'; 2 | -------------------------------------------------------------------------------- /src/components/BoxSelection/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './BoxSelection'; 2 | -------------------------------------------------------------------------------- /src/components/CalendarCell/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './CalendarCell'; 2 | -------------------------------------------------------------------------------- /src/components/ColorPicker/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './ColorPicker'; 2 | -------------------------------------------------------------------------------- /src/components/CounterBadge/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './CounterBadge'; 2 | -------------------------------------------------------------------------------- /src/components/IconButton/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './IconButton'; 2 | -------------------------------------------------------------------------------- /src/components/IconToggle/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './IconToggle'; 2 | -------------------------------------------------------------------------------- /src/components/Pagination/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './Pagination'; 2 | -------------------------------------------------------------------------------- /src/components/Tabs/Tab/index.tsx: -------------------------------------------------------------------------------- 1 | export { TabItem } from './Tab'; 2 | -------------------------------------------------------------------------------- /src/components/TextButton/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './TextButton'; 2 | -------------------------------------------------------------------------------- /src/components/ToggleSwitch/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './ToggleSwitch'; 2 | -------------------------------------------------------------------------------- /wallaby.js: -------------------------------------------------------------------------------- 1 | module.exports = require('yoshi/config/wallaby-jest'); 2 | -------------------------------------------------------------------------------- /src/components/DotNavigation/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './DotNavigation'; 2 | -------------------------------------------------------------------------------- /src/components/CalendarPopover/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './CalendarPopover'; 2 | -------------------------------------------------------------------------------- /src/components/Dialog/index.tsx: -------------------------------------------------------------------------------- 1 | export { Dialog, DialogProps } from './Dialog'; 2 | -------------------------------------------------------------------------------- /src/components/Event/index.tsx: -------------------------------------------------------------------------------- 1 | export { Event, EventProps } from './Event'; 2 | -------------------------------------------------------------------------------- /src/components/OverlappingCard/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './OverlappingCard'; 2 | -------------------------------------------------------------------------------- /src/components/ErrorMessageWrapper/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './ErrorMessageWrapper'; 2 | -------------------------------------------------------------------------------- /src/components/TPAComponentsConfig/index.ts: -------------------------------------------------------------------------------- 1 | export * from './TPAComponentsConfig'; 2 | -------------------------------------------------------------------------------- /src/components/Tags/index.tsx: -------------------------------------------------------------------------------- 1 | export { Tags, TagsProps, TagItem } from './Tags'; 2 | -------------------------------------------------------------------------------- /src/components/Toast/CloseIconButton/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './CloseIconButton'; 2 | -------------------------------------------------------------------------------- /src/components/Toast/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './Toast'; 2 | export * from './types'; 3 | -------------------------------------------------------------------------------- /src/common/variables.st.css: -------------------------------------------------------------------------------- 1 | :vars { 2 | HighlightColor: '"color(color-8)"'; 3 | } 4 | -------------------------------------------------------------------------------- /src/components/ColorPicker/ColorPickerItem/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './ColorPickerItem'; 2 | -------------------------------------------------------------------------------- /src/components/Tabs/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './Tabs'; 2 | export * from './constants'; 3 | -------------------------------------------------------------------------------- /src/components/Text/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './Text'; 2 | export * from './constants'; 3 | -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["./tslint_base.json", "tslint-config-prettier"] 3 | } 4 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | package.json 2 | package-lock.json 3 | README.md 4 | src/assets/ 5 | src/testkit/ -------------------------------------------------------------------------------- /src/components/Image/index.tsx: -------------------------------------------------------------------------------- 1 | export { Image } from './Image'; 2 | export * from './types'; 3 | -------------------------------------------------------------------------------- /src/components/SectionNotification/docs/examples.scss: -------------------------------------------------------------------------------- 1 | .infoIcon g { 2 | stroke: #000000; 3 | } -------------------------------------------------------------------------------- /src/components/Tabs/TabsNavButton/index.tsx: -------------------------------------------------------------------------------- 1 | export { TabsNavButton } from './TabsNavButton'; 2 | -------------------------------------------------------------------------------- /src/components/DatePicker/index.tsx: -------------------------------------------------------------------------------- 1 | export { DatePicker, DatePickerProps } from './DatePicker'; 2 | -------------------------------------------------------------------------------- /src/components/Dialog/constants.ts: -------------------------------------------------------------------------------- 1 | export const DATA_HOOKS = { 2 | CLOSE_BTN: 'close-btn', 3 | }; 4 | -------------------------------------------------------------------------------- /src/components/ProgressBar/index.tsx: -------------------------------------------------------------------------------- 1 | export { ProgressBar, ProgressBarProps } from './ProgressBar'; 2 | -------------------------------------------------------------------------------- /src/components/ShareButton/index.tsx: -------------------------------------------------------------------------------- 1 | export { ShareButton, ShareButtonProps } from './ShareButton'; 2 | -------------------------------------------------------------------------------- /src/components/Tabs/ScrollableTabs/index.tsx: -------------------------------------------------------------------------------- 1 | export { ScrollableTabs } from './ScrollableTabs'; 2 | -------------------------------------------------------------------------------- /src/components/TextArea/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './TextArea'; 2 | export * from './TextAreaEnums'; 3 | -------------------------------------------------------------------------------- /src/components/HeroImage/index.tsx: -------------------------------------------------------------------------------- 1 | export { HeroImage } from './HeroImage'; 2 | export * from './types'; 3 | -------------------------------------------------------------------------------- /src/components/LikeButton/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './LikeButton'; 2 | export * from '../IconToggle'; 3 | -------------------------------------------------------------------------------- /src/components/StatesButton/index.ts: -------------------------------------------------------------------------------- 1 | export * from './StatesButton'; 2 | export * from './constants'; 3 | -------------------------------------------------------------------------------- /src/components/Tag/index.tsx: -------------------------------------------------------------------------------- 1 | export { Tag, TagProps } from './Tag'; 2 | export * from './constants'; 3 | -------------------------------------------------------------------------------- /src/components/TextField/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './TextField'; 2 | export * from './TextFieldEnums'; 3 | -------------------------------------------------------------------------------- /src/components/CopyUrlButton/index.tsx: -------------------------------------------------------------------------------- 1 | export { CopyUrlButton, CopyUrlButtonProps } from './CopyUrlButton'; 2 | -------------------------------------------------------------------------------- /src/components/DatePicker/constants.ts: -------------------------------------------------------------------------------- 1 | export const DATA_HOOKS = { 2 | WSR_CALENDAR: 'wsr-calendar', 3 | }; 4 | -------------------------------------------------------------------------------- /src/components/Image/RelativeMediaImage/index.tsx: -------------------------------------------------------------------------------- 1 | export { RelativeMediaImage } from './RelativeMediaImage'; 2 | -------------------------------------------------------------------------------- /.storybook/main.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | addons: [__dirname + '/addons/FocusRingToggle/register.js'], 3 | }; 4 | -------------------------------------------------------------------------------- /.storybook/public/product.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wix-incubator/wix-ui-tpa/HEAD/.storybook/public/product.png -------------------------------------------------------------------------------- /src/components/CounterBadge/constant.ts: -------------------------------------------------------------------------------- 1 | export const DATA_HOOKS = { 2 | VALUE: 'counter-badge-value', 3 | }; 4 | -------------------------------------------------------------------------------- /src/components/Image/docs/index.tsx: -------------------------------------------------------------------------------- 1 | export { commonExampleProps, commonWiringNumberParams } from './examples'; 2 | -------------------------------------------------------------------------------- /src/components/SectionNotification/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './SectionNotification'; 2 | export * from './types'; 3 | -------------------------------------------------------------------------------- /src/components/SocialBar/docs/SocialBarWiringExample.st.css: -------------------------------------------------------------------------------- 1 | .root { 2 | 3 | } 4 | 5 | .component { 6 | 7 | } 8 | -------------------------------------------------------------------------------- /src/components/Spinner/index.tsx: -------------------------------------------------------------------------------- 1 | export { SpinnerProps } from './types'; 2 | export { Spinner } from './Spinner'; 3 | -------------------------------------------------------------------------------- /src/components/TextArea/TextAreaEnums.ts: -------------------------------------------------------------------------------- 1 | export enum TextAreaTheme { 2 | Box = 'box', 3 | Line = 'line', 4 | } 5 | -------------------------------------------------------------------------------- /src/components/AddItem/constants.ts: -------------------------------------------------------------------------------- 1 | export const DATA_HOOKS = { 2 | ADD_ITEM: 'add-item', 3 | TEXT: 'text', 4 | }; 5 | -------------------------------------------------------------------------------- /src/components/CopyUrlButton/docs/CopyUrlButtonWiringExample.st.css: -------------------------------------------------------------------------------- 1 | .root { 2 | 3 | } 4 | 5 | .component { 6 | 7 | } 8 | -------------------------------------------------------------------------------- /src/components/FloatingDropdown/index.tsx: -------------------------------------------------------------------------------- 1 | export { FloatingDropdown, FloatingDropdownProps } from './FloatingDropdown'; 2 | -------------------------------------------------------------------------------- /src/components/Popover/index.tsx: -------------------------------------------------------------------------------- 1 | export { Popover, PopoverProps } from './Popover'; 2 | export * from './constants'; 3 | -------------------------------------------------------------------------------- /src/components/RadioButton/index.tsx: -------------------------------------------------------------------------------- 1 | export { RadioButton, RadioButtonProps, RadioButtonTheme } from './RadioButton'; 2 | -------------------------------------------------------------------------------- /src/components/ShareButton/docs/ShareButtonWiringExample.st.css: -------------------------------------------------------------------------------- 1 | .root { 2 | 3 | } 4 | 5 | .component { 6 | 7 | } 8 | -------------------------------------------------------------------------------- /src/components/SocialBar/index.tsx: -------------------------------------------------------------------------------- 1 | export { SocialBar, SocialBarProps, SocialBarInjectedProps } from './SocialBar'; 2 | -------------------------------------------------------------------------------- /src/components/TextField/TextFieldEnums.ts: -------------------------------------------------------------------------------- 1 | export enum TextFieldTheme { 2 | Line = 'line', 3 | Box = 'box', 4 | } 5 | -------------------------------------------------------------------------------- /src/components/ThumbnailImage/index.tsx: -------------------------------------------------------------------------------- 1 | export { ThumbnailImage } from './ThumbnailImage'; 2 | export * from './types'; 3 | -------------------------------------------------------------------------------- /src/components/AvatarGroup/AvatarGroupTextButton/index.ts: -------------------------------------------------------------------------------- 1 | export { AvatarGroupTextButton } from './AvatarGroupTextButton'; 2 | -------------------------------------------------------------------------------- /src/components/Image/RelativeMediaImage/RelativeMediaImage.st.css: -------------------------------------------------------------------------------- 1 | .root, 2 | .placeholder { 3 | grid-area: 1 / 1; 4 | } 5 | -------------------------------------------------------------------------------- /src/components/Tooltip/TooltipEnums.ts: -------------------------------------------------------------------------------- 1 | export enum TooltipSkin { 2 | Standard = 'standard', 3 | Error = 'error', 4 | } 5 | -------------------------------------------------------------------------------- /.wuf/generator/templates/Component/index.tsx: -------------------------------------------------------------------------------- 1 | export { {%ComponentName%}, {%ComponentName%}Props } from './{%ComponentName%}'; 2 | -------------------------------------------------------------------------------- /.storybook/webpack.config.js: -------------------------------------------------------------------------------- 1 | const storybookConfig = require('../webpack.config.storybook'); 2 | module.exports = storybookConfig; 3 | -------------------------------------------------------------------------------- /mocks/index.tsx: -------------------------------------------------------------------------------- 1 | import tpaResponse from './fakeTPAInitResponse.json'; 2 | 3 | window.postMessage(JSON.stringify(tpaResponse), '*'); 4 | -------------------------------------------------------------------------------- /src/components/internal/Modal/index.tsx: -------------------------------------------------------------------------------- 1 | export { Modal } from './Modal'; 2 | export { ModalProps, ModalDefaultProps } from './types'; 3 | -------------------------------------------------------------------------------- /.storybook-test/webpack.config.js: -------------------------------------------------------------------------------- 1 | const storybookConfig = require('../webpack.config.storybook'); 2 | module.exports = storybookConfig; 3 | -------------------------------------------------------------------------------- /src/components/ActionsMenuLayout/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './ActionsMenuLayout'; 2 | export { Alignment } from './Item/ActionsMenuLayoutItem'; 3 | -------------------------------------------------------------------------------- /.wuf/required-component-files.json: -------------------------------------------------------------------------------- 1 | { 2 | "index.ts*": "", 3 | "Component.ts*": "", 4 | "docs": { 5 | "index.story.ts*": "" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /scripts/base-ui-version.js: -------------------------------------------------------------------------------- 1 | const STORYBOOK_BASE_UI_VERSION = require('@wix/wix-base-ui/package.json').version; 2 | console.log(STORYBOOK_BASE_UI_VERSION) -------------------------------------------------------------------------------- /src/components/LikeButton/LikeButton.driver.ts: -------------------------------------------------------------------------------- 1 | export { iconToggleDriverFactory as likeButtonDriverFactory } from '../IconToggle/IconToggle.driver'; 2 | -------------------------------------------------------------------------------- /src/common/random.ts: -------------------------------------------------------------------------------- 1 | export function generateKey(prefix = 'prefix'): string { 2 | return `${prefix}_${Math.random().toString(36).substr(2, 9)}`; 3 | } 4 | -------------------------------------------------------------------------------- /src/components/AddItem/index.tsx: -------------------------------------------------------------------------------- 1 | export { 2 | AddItem, 3 | AddItemProps, 4 | ICON_SIZE, 5 | ALIGNMENT, 6 | DIRECTION, 7 | } from './AddItem'; 8 | -------------------------------------------------------------------------------- /src/components/CheckboxGroup/index.tsx: -------------------------------------------------------------------------------- 1 | export { 2 | CheckboxGroup, 3 | CheckboxGroupProps, 4 | CheckboxGroupLayout, 5 | } from './CheckboxGroup'; 6 | -------------------------------------------------------------------------------- /src/components/DatePickerInput/constants.ts: -------------------------------------------------------------------------------- 1 | export const DATA_HOOKS = { 2 | WSR_DATE_PICKER: 'wsr-date-picker', 3 | DATE_INPUT: 'date-input', 4 | }; 5 | -------------------------------------------------------------------------------- /src/components/TextArea/dataHooks.ts: -------------------------------------------------------------------------------- 1 | export const TEXT_AREA_DATA_HOOK = 'text-area'; 2 | export const TEXT_AREA_ERROR_DATA_HOOK = 'text-area-error-icon'; 3 | -------------------------------------------------------------------------------- /src/components/internal/Modal/dataHooks.ts: -------------------------------------------------------------------------------- 1 | export enum MODAL_DATA_HOOKS { 2 | CONTENT = 'tpa-modal-content', 3 | OVERLAY = 'tpa-modal-overlay', 4 | } 5 | -------------------------------------------------------------------------------- /.storybook-test/stories.scss: -------------------------------------------------------------------------------- 1 | html { 2 | -webkit-font-smoothing: antialiased; 3 | -moz-osx-font-smoothing: grayscale; 4 | padding: 0; 5 | margin: 0; 6 | } 7 | -------------------------------------------------------------------------------- /src/components/DatePickerInput/index.tsx: -------------------------------------------------------------------------------- 1 | export { 2 | DatePickerInput, 3 | DatePickerInputProps, 4 | popoverPlacementType, 5 | } from './DatePickerInput'; 6 | -------------------------------------------------------------------------------- /test/enzyme-setup.js: -------------------------------------------------------------------------------- 1 | const Enzyme = require('enzyme'); 2 | const Adapter = require('enzyme-adapter-react-16'); 3 | 4 | Enzyme.configure({adapter: new Adapter()}); 5 | -------------------------------------------------------------------------------- /src/components/Dropdown/index.tsx: -------------------------------------------------------------------------------- 1 | export { Dropdown, DropdownProps, DROPDOWN_ALIGNMENT } from './Dropdown'; 2 | export { DropdownOptionProps } from './DropdownOption'; 3 | -------------------------------------------------------------------------------- /src/components/RadioButtonGroup/index.tsx: -------------------------------------------------------------------------------- 1 | export { 2 | RadioButtonGroup, 3 | RadioButtonGroupProps, 4 | RadioButtonGroupLayout, 5 | } from './RadioButtonGroup'; 6 | -------------------------------------------------------------------------------- /src/components/SectionNotification/dataHooks.ts: -------------------------------------------------------------------------------- 1 | export enum SECTION_NOTIFICATION_DATA_HOOKS { 2 | icon = 'icon', 3 | text = 'text', 4 | button = 'button', 5 | } 6 | -------------------------------------------------------------------------------- /janet.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "wix-ui-tpa", 3 | "rootDir": "storybook-static", 4 | "files": [ 5 | "*" 6 | ], 7 | "exposure": [ 8 | "bo" 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /src/components/Popover/constants.ts: -------------------------------------------------------------------------------- 1 | export { Placement } from 'wix-ui-core/popover'; 2 | 3 | export enum TriggerAction { 4 | hover = 'hover', 5 | click = 'click', 6 | } 7 | -------------------------------------------------------------------------------- /src/components/HeroImage/types.ts: -------------------------------------------------------------------------------- 1 | import { ImageProps } from '../Image'; 2 | 3 | export interface HeroImageProps extends ImageProps {} 4 | 5 | export * from '../Image/types'; 6 | -------------------------------------------------------------------------------- /src/components/Input/Input.protractor.driver.ts: -------------------------------------------------------------------------------- 1 | export { 2 | inputDriverFactory, 3 | InputDriver, 4 | } from 'wix-ui-core/dist/src/components/input/Input.protractor.driver'; 5 | -------------------------------------------------------------------------------- /.perfer/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "components-bundles", 3 | "scripts": { 4 | "build": "NODE_OPTIONS=--max_old_space_size=8000 NODE_ENV=production yoshi build" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /src/components/NewCard/docs/examples.ts: -------------------------------------------------------------------------------- 1 | export const importExample = `import { NewCard } from 'wix-ui-tpa/NewCard';`; 2 | 3 | export const example = ` 4 | 5 | `; 6 | -------------------------------------------------------------------------------- /src/components/StatesButton/constants.ts: -------------------------------------------------------------------------------- 1 | export enum BUTTON_STATES { 2 | IDLE = 'IDLE', 3 | IN_PROGRESS = 'IN_PROGRESS', 4 | SUCCESS = 'SUCCESS', 5 | FAILURE = 'FAILURE', 6 | } 7 | -------------------------------------------------------------------------------- /src/common/constants.ts: -------------------------------------------------------------------------------- 1 | export const enum KEY_CODES { 2 | ENTER = 13, 3 | SPACEBAR = 32, 4 | ARROW_UP = 38, 5 | ARROW_DOWN = 40, 6 | ARROW_RIGHT = 39, 7 | ARROW_LEFT = 37, 8 | } 9 | -------------------------------------------------------------------------------- /src/components/LikeButton/docs/examples.tsx: -------------------------------------------------------------------------------- 1 | export const importExample = `import { LikeButton } from 'wix-ui-tpa/LikeButton';`; 2 | 3 | export const basic = ``; 4 | -------------------------------------------------------------------------------- /src/components/Popover/Popover.protractor.driver.ts: -------------------------------------------------------------------------------- 1 | export { 2 | popoverDriverFactory, 3 | PopoverDriver, 4 | } from 'wix-ui-core/dist/src/components/popover/Popover.protractor.driver'; 5 | -------------------------------------------------------------------------------- /src/components/RadioButtonGroup/README.md: -------------------------------------------------------------------------------- 1 | ## RadioButtonGroup 2 | An implementation of an RadioButtonGroup for TPAs 3 | This Readme was auto-generated and needs to be filled manually 4 | 5 | -------------------------------------------------------------------------------- /src/components/StatesButton/README.md: -------------------------------------------------------------------------------- 1 | **ATTENTION: The current API for this component will be deprecated on the next major version.
2 | Please use the new API using the `upgrade` prop.
** -------------------------------------------------------------------------------- /src/components/ThumbnailImage/types.ts: -------------------------------------------------------------------------------- 1 | import { ImageProps } from '../Image'; 2 | 3 | export interface ThumbnailImageProps extends ImageProps {} 4 | 5 | export * from '../Image/types'; 6 | -------------------------------------------------------------------------------- /src/components/Badge/perf/BadgeBasic.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Badge } from '../'; 3 | 4 | export const BadgePerfer = () => { 5 | return text; 6 | }; 7 | -------------------------------------------------------------------------------- /src/components/FloatingDropdown/FloatingDropdownOption.ts: -------------------------------------------------------------------------------- 1 | import { DropdownOptionProps } from '../Dropdown'; 2 | 3 | export interface FloatingDropdownOptionProps extends DropdownOptionProps {} 4 | -------------------------------------------------------------------------------- /src/external-types.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.st.css'; 2 | declare module '*.json'; 3 | declare module '*.tsx'; 4 | declare module '*.md'; 5 | declare module '*.scss'; 6 | declare module '*.md'; 7 | -------------------------------------------------------------------------------- /.storybook/addons/FocusRingToggle/shared.js: -------------------------------------------------------------------------------- 1 | export const ADDON_TITLE = 'FocusRingToggle'; 2 | export const ADDON_ID = `storybooks/${ADDON_TITLE}`; 3 | export const PANEL_ID = `${ADDON_ID}/panel`; 4 | -------------------------------------------------------------------------------- /src/components/Button/perf/ButtonBasic.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Button } from '../'; 3 | 4 | export const ButtonPerfer = () => { 5 | return ; 6 | }; 7 | -------------------------------------------------------------------------------- /.ci_config: -------------------------------------------------------------------------------- 1 | { 2 | "pr_env_params" : { 3 | "APPLITOOLS_GITHUB_FT": "true", 4 | "node.publish": "" 5 | }, 6 | "env_params" : {"APPLITOOLS_GITHUB_FT": "true"}, 7 | "publishOnPr": "true" 8 | } 9 | -------------------------------------------------------------------------------- /src/components/Pagination/Pagination.protractor.driver.ts: -------------------------------------------------------------------------------- 1 | export { 2 | paginationDriverFactory, 3 | PaginationDriver, 4 | } from 'wix-ui-core/dist/src/components/pagination/Pagination.protractor.driver'; 5 | -------------------------------------------------------------------------------- /src/components/Pagination/docs/examples.ts: -------------------------------------------------------------------------------- 1 | export const importExample = `import { Pagination } from 'wix-ui-tpa/Pagination';`; 2 | 3 | export const basic = ``; 4 | -------------------------------------------------------------------------------- /stories/helperComponents/FocusRing.st.css: -------------------------------------------------------------------------------- 1 | .root { 2 | -st-states: active; 3 | } 4 | 5 | .root:active *:focus { 6 | box-shadow: 0 0 0 1px #ffffff, 0 0 0 3px #116dff !important; 7 | z-index: 999; 8 | } 9 | -------------------------------------------------------------------------------- /src/components/Divider/docs/examples.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | export const importExample = `import { Divider } from 'wix-ui-tpa/Divider';`; 4 | 5 | export const defaultExample = ``; 6 | -------------------------------------------------------------------------------- /src/components/Autocomplete/Autocomplete.protractor.driver.ts: -------------------------------------------------------------------------------- 1 | export { 2 | autocompleteDriverFactory, 3 | AutocompleteDriver, 4 | } from 'wix-ui-core/dist/src/components/autocomplete/Autocomplete.protractor.driver'; 5 | -------------------------------------------------------------------------------- /src/components/Tag/constants.ts: -------------------------------------------------------------------------------- 1 | export enum SIZE { 2 | small = 'small', 3 | medium = 'medium', 4 | large = 'large', 5 | } 6 | 7 | export enum SKIN { 8 | solid = 'solid', 9 | light = 'light', 10 | } 11 | -------------------------------------------------------------------------------- /src/components/CalendarCell/dataHooks.ts: -------------------------------------------------------------------------------- 1 | export enum CALENDAR_DATA_KEYS { 2 | Stertchable = 'data-stretchable', 3 | TimeType = 'data-time-type', 4 | Current = 'data-current', 5 | Alignment = 'data-alignment', 6 | } 7 | -------------------------------------------------------------------------------- /.wuf/generator/templates/Component/perf/ComponentExtended.st.css: -------------------------------------------------------------------------------- 1 | :import { 2 | -st-from: "../Component.st.css"; 3 | -st-named: overrideStyleParams; 4 | } 5 | 6 | .root { 7 | -st-mixin: overrideStyleParams(); 8 | } 9 | -------------------------------------------------------------------------------- /src/components/LikeButton/LikeButton.protractor.driver.ts: -------------------------------------------------------------------------------- 1 | export { 2 | iconToggleDriverFactory as likeButtonDriverFactory, 3 | IconToggleDriver as LikeButtonDriver, 4 | } from '../IconToggle/IconToggle.protractor.driver'; 5 | -------------------------------------------------------------------------------- /src/components/ColorPicker/dataHooks.ts: -------------------------------------------------------------------------------- 1 | export const colorPickerDataHook = 'ColorPicker'; 2 | export const colorPickerItemDataHook = 'ColorPickerItem'; 3 | export const colorPickerItemTooltipDataHook = 'color-picker-item-tooltip'; 4 | -------------------------------------------------------------------------------- /.wuf/generator/templates/Component/perf/ComponentBasic.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { {%ComponentName%} } from '../'; 3 | 4 | export const {%ComponentName%}PerferBasic = () => { 5 | return <{%ComponentName%} />; 6 | }; 7 | -------------------------------------------------------------------------------- /src/components/NewCard/dataHooks.ts: -------------------------------------------------------------------------------- 1 | export enum NEWCARD_DATA_HOOKS { 2 | NewCardRoot = 'new-card-root', 3 | NewCardContainer = 'new-card-container', 4 | } 5 | 6 | export enum NEWCARD_DATA_KEYS { 7 | Stacked = 'data-stacked', 8 | } 9 | -------------------------------------------------------------------------------- /src/components/Picker/docs/examples.ts: -------------------------------------------------------------------------------- 1 | export const importExample = `import { Picker } from 'wix-ui-tpa/Picker';`; 2 | 3 | export const example = ` 4 | 5 | `; 6 | -------------------------------------------------------------------------------- /src/components/TextArea/dataKeys.ts: -------------------------------------------------------------------------------- 1 | export const TEXT_AREA_DISABLED = 'data-disabled'; 2 | export const TEXT_AREA_THEME = 'data-theme'; 3 | export const TEXT_AREA_ERROR = 'data-error'; 4 | export const TEXT_AREA_SUCCESS = 'data-success'; 5 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # wix-ui-tpa moved to a new home! 2 | 3 | wix-ui-tpa is now part of the Wix Design Systems MonorepoTM. 4 | You can check out the new repo [here](https://github.com/wix/wix-style-react/tree/master/packages/wix-ui-tpa) 5 | -------------------------------------------------------------------------------- /src/components/IconToggle/IconToggle.protractor.driver.ts: -------------------------------------------------------------------------------- 1 | export { 2 | checkboxDriverFactory as iconToggleDriverFactory, 3 | CheckboxDriver as IconToggleDriver, 4 | } from 'wix-ui-core/dist/src/components/checkbox/Checkbox.protractor.driver'; 5 | -------------------------------------------------------------------------------- /src/components/Spinner/docs/SpinnerWiringExample.st.css: -------------------------------------------------------------------------------- 1 | :import { 2 | -st-from: "../Spinner.st.css"; 3 | -st-default: Spinner; 4 | } 5 | 6 | .root { 7 | -st-mixin: Spinner( 8 | PathColor '"--pathColor"', 9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /src/components/Tags/dataHooks.ts: -------------------------------------------------------------------------------- 1 | export enum TAGS_DATA_KEYS { 2 | alignment = 'data-alignment', 3 | skin = 'data-skin', 4 | size = 'data-size', 5 | rtl = 'data-rtl', 6 | index = 'data-tag-index', 7 | tagIsChecked = 'data-tag-checked', 8 | } 9 | -------------------------------------------------------------------------------- /src/common/palette.st.css: -------------------------------------------------------------------------------- 1 | :vars { 2 | successColor: #008250; 3 | errorColor: #DF3131; 4 | emptyErrorColor: #ff5e5e; 5 | } 6 | 7 | .focusRing { 8 | box-shadow: 0 0 0 1px #ffffff, 0 0 0 3px #116dff !important; 9 | z-index: 999; 10 | } -------------------------------------------------------------------------------- /stories/helperComponents/baseUI.global.scss: -------------------------------------------------------------------------------- 1 | // TODO - these imports should move to baseUI's src/baseUI.scss entry file 2 | 3 | @import "@wix/wix-base-ui/src/controls/colorPicker/palette.scss"; 4 | @import "@wix/wix-base-ui/src/controls/colorPicker/palettePicker.scss"; -------------------------------------------------------------------------------- /src/components/RadioButtonGroup/docs/RadioButtonGroupWiringExample.st.css: -------------------------------------------------------------------------------- 1 | .root { 2 | display: flex; 3 | flex-direction: column; 4 | } 5 | 6 | .component { 7 | margin: 10px 0 24px 0; 8 | display: flex; 9 | flex-direction: column; 10 | } 11 | -------------------------------------------------------------------------------- /src/components/ActionsMenuLayout/dataHooks.ts: -------------------------------------------------------------------------------- 1 | export enum ACTIONS_MENU_DATA_KEYS { 2 | mobile = 'data-mobile', 3 | } 4 | 5 | export const ACTIONS_MENU_ITEM_DATA_HOOK = 'actions-menu-item'; 6 | 7 | export const ACTIONS_MENU_E2E_DATA_HOOK = 'storybook-e2e-actions-menu'; 8 | -------------------------------------------------------------------------------- /src/components/DotNavigation/dataHooks.ts: -------------------------------------------------------------------------------- 1 | export enum DotNavigationDataKeys { 2 | ShowBorder = 'data-show-border', 3 | Theme = 'data-theme', 4 | SavedCurrentIndex = 'data-current', 5 | } 6 | 7 | export enum DotNavigationDataHooks { 8 | Dot = 'dot', 9 | } 10 | -------------------------------------------------------------------------------- /src/components/Picker/dataHooks.ts: -------------------------------------------------------------------------------- 1 | export enum PICKER_DATA_HOOKS { 2 | Next = 'next-button', 3 | Prev = 'prev-button', 4 | } 5 | 6 | export enum PICKER_DATA_PROPS { 7 | NextDisabled = 'data-disabled-next', 8 | PrevDisabled = 'data-disabled-prev', 9 | } 10 | -------------------------------------------------------------------------------- /scripts/ensure-build.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | if ! test -d dist; then 4 | echo "Welcome to wix-ui-tpa!" 5 | echo "" 6 | echo "allow me to build project and prepare storybook for first run..." 7 | echo "" 8 | 9 | npm run build 10 | fi 11 | 12 | exit 0 13 | -------------------------------------------------------------------------------- /src/components/Tooltip/docs/examples.tsx: -------------------------------------------------------------------------------- 1 | export const importExample = `import { Tooltip } from 'wix-ui-tpa/Tooltip';`; 2 | 3 | export const basic = ` 4 | 5 | 6 | Hover me for a tooltip! 7 | 8 | 9 | `; 10 | -------------------------------------------------------------------------------- /src/components/ColorPicker/ColorPickerItem/tooltipCommonProps.ts: -------------------------------------------------------------------------------- 1 | import { TooltipProps } from 'src/components/Tooltip'; 2 | 3 | export const TOOLTIP_COMMON_PROPS: Partial = { 4 | moveBy: { x: 0, y: 2 }, 5 | appendTo: 'scrollParent', 6 | placement: 'top', 7 | }; 8 | -------------------------------------------------------------------------------- /src/components/Popover/docs/PopoverWiringExample.st.css: -------------------------------------------------------------------------------- 1 | :import { 2 | -st-from: "../Popover.st.css"; 3 | -st-named: overrideStyleParams; 4 | } 5 | 6 | .root { 7 | -st-mixin: overrideStyleParams( 8 | BackgroundColor '"color(--BackgroundOverride)"' 9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /src/components/Toast/CloseIconButton/CloseIconButton.st.css: -------------------------------------------------------------------------------- 1 | :import { 2 | -st-from: "../../IconButton/IconButton.st.css"; 3 | -st-default: TPAIconButton; 4 | } 5 | 6 | .root { 7 | -st-mixin: TPAIconButton( 8 | IconColor #FFFFFF 9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /stories/utils/MobilePageStory.tsx: -------------------------------------------------------------------------------- 1 | import { storiesOf } from '@storybook/react'; 2 | import * as React from 'react'; 3 | import { StoryCategory } from '../storyHierarchy'; 4 | 5 | storiesOf(StoryCategory.TESTS, module).add('MobilePage', () => ( 6 |
7 | )); 8 | -------------------------------------------------------------------------------- /src/components/Badge/perf/BadgeExtendedBad.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Badge } from '../'; 3 | import { st, classes } from './BadgeExtendedBad.st.css'; 4 | 5 | export const BadgePerfer = () => { 6 | return text; 7 | }; 8 | -------------------------------------------------------------------------------- /src/components/Badge/perf/BadgeExtendedGood.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Badge } from '../'; 3 | import { st, classes } from './BadgeExtendedGood.st.css'; 4 | 5 | export const BadgePerfer = () => { 6 | return text; 7 | }; 8 | -------------------------------------------------------------------------------- /src/components/Button/perf/ButtonExtended.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Button } from '../'; 3 | import { st, classes } from './ButtonExtended.st.css'; 4 | 5 | export const ButtonPerfer = () => { 6 | return ; 7 | }; 8 | -------------------------------------------------------------------------------- /src/components/Picker/docs/PickerWiringExample.st.css: -------------------------------------------------------------------------------- 1 | :import { 2 | -st-from: "../Picker.st.css"; 3 | -st-default: Picker; 4 | } 5 | 6 | .root { 7 | -st-mixin: Picker( 8 | MainColor '"--mainColor"', 9 | FontStyle '"--fontStyle"' 10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /src/components/Tags/docs/examples.ts: -------------------------------------------------------------------------------- 1 | export const importExample = `import { Tags } from 'wix-ui-tpa/Tags';`; 2 | 3 | export const example = ` 4 | 5 | `; 6 | -------------------------------------------------------------------------------- /src/components/Spinner/docs/SpinnerWiringExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Spinner } from '../'; 3 | import { classes } from './SpinnerWiringExample.st.css'; 4 | 5 | export const SpinnerWiringExample = () => { 6 | return ; 7 | }; 8 | -------------------------------------------------------------------------------- /src/components/CheckboxGroup/docs/CheckboxGroupExtendedExample.st.css: -------------------------------------------------------------------------------- 1 | :import { 2 | -st-from: "../CheckboxGroup.st.css"; 3 | -st-default: TPACheckboxGroup; 4 | } 5 | 6 | .root { 7 | -st-mixin: TPACheckboxGroup( 8 | LabelColor '"--labelColor"' 9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /src/components/Text/docs/TextWiringExample.st.css: -------------------------------------------------------------------------------- 1 | :import { 2 | -st-from: "../Text.st.css"; 3 | -st-default: TPAText; 4 | } 5 | 6 | .root { 7 | -st-mixin: TPAText( 8 | MainTextColor '"--textColor"', 9 | MainTextFont '"--textFont"' 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /src/components/ToggleSwitch/docs/examples.ts: -------------------------------------------------------------------------------- 1 | export const importExample = `import { ToggleSwitch } from 'wix-ui-tpa/ToggleSwitch';`; 2 | 3 | export const defult = ``; 4 | export const checked = ``; 5 | export const disabled = ``; 6 | -------------------------------------------------------------------------------- /src/components/Event/dataHooks.ts: -------------------------------------------------------------------------------- 1 | export enum EVENT_DATA_KEYS { 2 | IsTimeShown = 'data-time-shown', 3 | IsFullDay = 'data-fullday', 4 | IsRightToLeft = 'data-right-to-left', 5 | IsSelected = 'data-selected', 6 | ARIA_Has_Popup = 'aria-haspopup', 7 | ARIA_Expanded = 'aria-expanded', 8 | } 9 | -------------------------------------------------------------------------------- /stories/utils/GenericApi.st.css: -------------------------------------------------------------------------------- 1 | .tableTitle { 2 | font-family: "HelveticaNeueW01-65Medi","HelveticaNeueW02-65Medi","HelveticaNeueW10-65Medi","Helvetica Neue","Helvetica","Arial","メイリオ","meiryo","ヒラギノ角ゴ pro w3","hiragino kaku gothic pro","sans-serif"; 3 | margin-bottom: 20px; 4 | font-size: 18px; 5 | } -------------------------------------------------------------------------------- /src/components/AddItem/docs/AddItemWiringExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { AddItem } from '../'; 3 | import { classes } from './AddItemWiringExample.st.css'; 4 | 5 | export const AddItemWiringExample = () => { 6 | return Add Item; 7 | }; 8 | -------------------------------------------------------------------------------- /src/components/Badge/perf/BadgeExtendedBad.st.css: -------------------------------------------------------------------------------- 1 | :import { 2 | -st-from: "../Badge.st.css"; 3 | -st-default: TPABadge; 4 | } 5 | 6 | .bad { 7 | -st-mixin: TPABadge( 8 | BadgeBgColor '"color(--badgeBgColor)"', 9 | BadgeTextColor '"color(--badgeTextColor)"', 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /src/components/Divider/docs/DividerExtendedExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Divider } from '../Divider'; 3 | import { classes } from './DividerExtendedExample.st.css'; 4 | 5 | export const DividerExtendedExample = (props) => ( 6 | 7 | ); 8 | -------------------------------------------------------------------------------- /src/components/Divider/docs/DividerExtendedExample.st.css: -------------------------------------------------------------------------------- 1 | :import { 2 | -st-from: "../Divider.st.css"; 3 | -st-default: TPADivider; 4 | } 5 | 6 | .root { 7 | -st-mixin: TPADivider( 8 | MainDividerColor '"--dividerColor"', 9 | MainDividerWidth '"--dividerWidth"' 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /src/assets/icons/Social/Stitcher.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/Spinner/Spinner.visual.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { visualize, story, snap } from 'storybook-snapper'; 3 | import { Spinner } from './'; 4 | 5 | visualize('Spinner', () => { 6 | story('simple', () => { 7 | snap('default props', ); 8 | }); 9 | }); 10 | -------------------------------------------------------------------------------- /src/components/ActionsMenuLayout/ActionsMenuLayoutDivider/ActionsMenuLayoutDivider.st.css: -------------------------------------------------------------------------------- 1 | :import { 2 | -st-from: "../../Divider/Divider.st.css"; 3 | -st-default: TPADivider; 4 | } 5 | 6 | .root { 7 | st-extends: TPADivider; 8 | margin: 10px 13px; 9 | width: auto; 10 | opacity: 0.2; 11 | } 12 | -------------------------------------------------------------------------------- /src/components/Badge/perf/BadgeExtendedGood.st.css: -------------------------------------------------------------------------------- 1 | :import { 2 | -st-from: "../Badge.st.css"; 3 | -st-named: overrideStyleParams; 4 | } 5 | 6 | .good { 7 | -st-mixin: overrideStyleParams( 8 | BadgeBgColor '"color(--badgeBgColor)"', 9 | BadgeTextColor '"color(--badgeTextColor)"', 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /src/components/Tags/constants.ts: -------------------------------------------------------------------------------- 1 | export enum SIZE { 2 | small = 'small', 3 | medium = 'medium', 4 | large = 'large', 5 | } 6 | 7 | export enum ALIGNMENT { 8 | center = 'center', 9 | left = 'left', 10 | right = 'right', 11 | } 12 | 13 | export enum SKIN { 14 | light = 'light', 15 | solid = 'solid', 16 | } 17 | -------------------------------------------------------------------------------- /src/components/TextButton/docs/TextButtonWiringExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { TextButton } from '../TextButton'; 3 | import { classes } from './TextButtonWiringExample.st.css'; 4 | 5 | export const TextButtonWiringExample = () => ( 6 | Some text 7 | ); 8 | -------------------------------------------------------------------------------- /src/components/Tooltip/docs/testProps.ts: -------------------------------------------------------------------------------- 1 | import { TooltipSkin } from '../TooltipEnums'; 2 | 3 | export const testPropsList: { [key: string]: any } = [ 4 | ...Object.values(TooltipSkin).map((skin) => { 5 | return { 6 | skin, 7 | 'data-hook': `tooltip-skin-${skin}-data-hook`, 8 | }; 9 | }), 10 | ]; 11 | -------------------------------------------------------------------------------- /.wuf/generator/templates/Component/perf/ComponentExtended.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { {%ComponentName%} } from '../'; 3 | import { st, classes } from './ComponentExtended.st.css'; 4 | 5 | export const {%ComponentName%}PerferExtended = () => { 6 | return <{%ComponentName%} className={st(classes.root)} />; 7 | }; 8 | -------------------------------------------------------------------------------- /src/components/HeroImage/docs/HeroImageWiringExample.st.css: -------------------------------------------------------------------------------- 1 | :import { 2 | -st-from: '../HeroImage.st.css'; 3 | -st-named: overrideStyleParams; 4 | } 5 | 6 | .root { 7 | -st-mixin: overrideStyleParams( 8 | BackgroundColor '"color(--backgroundColor)"', 9 | ImageOpacity '"unit(--imageOpacity, %)"' 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /src/components/DotNavigation/docs/DotNavigationExtendedExample.st.css: -------------------------------------------------------------------------------- 1 | :import { 2 | -st-from: "../DotNavigation.st.css"; 3 | -st-default: DotNavigation; 4 | } 5 | 6 | .root { 7 | -st-mixin: DotNavigation( 8 | SelectedDotColor '"--selectedDotColor"', 9 | SelectedBorderColor '"--selectedBorderColor"' 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /src/components/Spinner/Spinner.meta.tsx: -------------------------------------------------------------------------------- 1 | import { Spinner } from '.'; 2 | import Registry from '@ui-autotools/registry'; 3 | 4 | const SpinnerMetadata = Registry.getComponentMetadata(Spinner); 5 | SpinnerMetadata.nonReactStrictModeCompliant = true; 6 | 7 | SpinnerMetadata.addSim({ 8 | title: 'render', 9 | props: {}, 10 | }); 11 | -------------------------------------------------------------------------------- /src/components/Toast/helpers.ts: -------------------------------------------------------------------------------- 1 | import { TOAST_SKIN } from './types'; 2 | 3 | export const skinMessages: { [skin in keyof typeof TOAST_SKIN]: string } = { 4 | [TOAST_SKIN.success]: '24 photos were uploaded successfully.', 5 | [TOAST_SKIN.error]: 'These files exceed the upload limit.', 6 | [TOAST_SKIN.status]: 'Uploading...', 7 | }; 8 | -------------------------------------------------------------------------------- /.wuf/generator/templates/Component/docs/ComponentWiringExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { {%ComponentName%} } from '../'; 3 | import { classes } from './{%ComponentName%}WiringExample.st.css'; 4 | 5 | export const {%ComponentName%}WiringExample = () => { 6 | return <{%ComponentName%} className={classes.root} />; 7 | }; 8 | -------------------------------------------------------------------------------- /src/components/HeroImage/docs/examples.ts: -------------------------------------------------------------------------------- 1 | export const importExample = `import { HeroImage } from 'wix-ui-tpa/HeroImage';`; 2 | 3 | export const basicExample = ` 4 | 10 | `; 11 | -------------------------------------------------------------------------------- /src/components/Input/docs/InputExtendedExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Input, InputProps } from '../Input'; 3 | import { classes } from './InputExtendedExample.st.css'; 4 | 5 | export const InputExtendedExample: React.FunctionComponent = ( 6 | props, 7 | ) => ; 8 | -------------------------------------------------------------------------------- /src/components/ProgressBar/docs/ProgressBarWiringExample.st.css: -------------------------------------------------------------------------------- 1 | :import { 2 | -st-from: "../ProgressBar.st.css"; 3 | -st-default: ProgressBar; 4 | } 5 | 6 | .root { 7 | -st-mixin: ProgressBar( 8 | BarBGColor '"--barBGColor"', 9 | BarColor '"--barColor"', 10 | TextFont '"--textFont"' 11 | ) 12 | } 13 | -------------------------------------------------------------------------------- /.wuf/generator/codemods/index-file.js: -------------------------------------------------------------------------------- 1 | module.exports = (file, api, options) => { 2 | const j = api.jscodeshift; 3 | const root = j(file.source); 4 | 5 | const { ComponentName } = options; 6 | 7 | root.get().node.program.body.push( `export { ${ComponentName} } from './${ComponentName}';`); 8 | 9 | return root.toSource(); 10 | }; 11 | -------------------------------------------------------------------------------- /.wuf/generator/templates/Component/docs/ComponentWiringExample.st.css: -------------------------------------------------------------------------------- 1 | :import { 2 | -st-from: "../<%= ComponentName %>.st.css"; 3 | -st-named: overrideStyleParams; 4 | } 5 | 6 | .root { 7 | -st-mixin: overrideStyleParams( 8 | BgColor ''"color(--myBackgroundOverride)"'', 9 | TextFont ''"font(--myFontOverride)"'' 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /src/components/LikeButton/docs/LikeButtonWiringExample.st.css: -------------------------------------------------------------------------------- 1 | :import { 2 | -st-from: "../LikeButton.st.css"; 3 | -st-default: LikeButton; 4 | } 5 | 6 | .root { 7 | -st-mixin: LikeButton( 8 | IconColor '"--iconColor"', 9 | LabelColor '"--labelColor"', 10 | LabelFont '"--labelFont"' 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /src/components/CalendarPopover/dataHooks.ts: -------------------------------------------------------------------------------- 1 | export enum POPOVER_DATA_KEYS { 2 | WithShadow = 'data-shadow', 3 | WithArrow = 'data-arrow', 4 | Title = 'data-title', 5 | ArrowTop = 'data-arrow-top', 6 | Animated = 'data-animated', 7 | Shown = 'data-shown', 8 | ArrowSide = 'data-side', 9 | ManualFocus = 'data-manual-focused', 10 | } 11 | -------------------------------------------------------------------------------- /src/components/IconToggle/docs/IconToggleExtendedExample.st.css: -------------------------------------------------------------------------------- 1 | :import { 2 | -st-from: "../IconToggle.st.css"; 3 | -st-default: TPAIconToggle; 4 | } 5 | 6 | .root { 7 | -st-mixin: TPAIconToggle( 8 | IconColor '"color(--iconColor)"', 9 | LabelColor '"color(--labelColor)"', 10 | LabelFont '"font(--labelFont)"' 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /src/components/Popover/Popover.driver.ts: -------------------------------------------------------------------------------- 1 | import { testkit as corePopoverDriverFactory } from 'wix-ui-core/dist/src/components/popover/Popover.uni.driver'; 2 | import { UniDriver } from 'wix-ui-test-utils/unidriver'; 3 | 4 | export const popoverDriverFactory = (base: UniDriver, body: UniDriver) => { 5 | return corePopoverDriverFactory(base, body); 6 | }; 7 | -------------------------------------------------------------------------------- /src/components/Text/constants.ts: -------------------------------------------------------------------------------- 1 | export enum TYPOGRAPHY { 2 | largeTitle = 'largeTitle', 3 | smallTitle = 'smallTitle', 4 | listText = 'listText', 5 | runningText = 'runningText', 6 | } 7 | 8 | export enum TEXT_PRIORITY { 9 | primary = 'primary', 10 | secondary = 'secondary', 11 | } 12 | 13 | export const DEFAULT_TAG_NAME = 'span'; 14 | -------------------------------------------------------------------------------- /src/components/Tooltip/Tooltip.driver.ts: -------------------------------------------------------------------------------- 1 | import { tooltipDriverFactory as coreTooltipDriverFactory } from 'wix-ui-core/dist/src/components/tooltip/Tooltip.driver'; 2 | 3 | export const tooltipDriverFactory = (component) => { 4 | const tooltipDriver = coreTooltipDriverFactory(component); 5 | 6 | return { 7 | ...tooltipDriver, 8 | }; 9 | }; 10 | -------------------------------------------------------------------------------- /src/components/ColorPicker/docs/ColorPickerExtendedExample.st.css: -------------------------------------------------------------------------------- 1 | :import { 2 | -st-from: "../ColorPicker.st.css"; 3 | -st-default: TPAColorPicker; 4 | } 5 | 6 | .root { 7 | -st-mixin: TPAColorPicker( 8 | ItemSize '"--itemSize"', 9 | BorderRadius '"unit(fallback(zeroAsTrue(--borderRadius), 12), px)"' 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /src/components/Counter/docs/CounterExtendedExample.st.css: -------------------------------------------------------------------------------- 1 | :import { 2 | -st-from: "../Counter.st.css"; 3 | -st-default: TPACounter; 4 | } 5 | 6 | .root { 7 | -st-mixin: TPACounter( 8 | MainColor '"--mainColor"', 9 | DisabledColor '"--disabledColor"', 10 | MainWidth '"unit(--mainWidth, px)"' 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /src/components/Divider/Divider.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { st, classes } from './Divider.st.css'; 3 | import { TPAComponentProps } from '../../types'; 4 | 5 | export const Divider = (props: TPAComponentProps) => ( 6 |
10 | ); 11 | -------------------------------------------------------------------------------- /src/components/RadioButton/docs/RadioButtonWiringExample.st.css: -------------------------------------------------------------------------------- 1 | :import { 2 | -st-from: "../RadioButton.st.css"; 3 | -st-default: TPARadioButton; 4 | } 5 | 6 | .root { 7 | -st-mixin: TPARadioButton( 8 | TextColor '"--textColor"', 9 | BorderColor '"--borderColor"', 10 | IconColor '"--iconColor"' 11 | ); 12 | } -------------------------------------------------------------------------------- /src/components/SocialBar/SocialBar.visual.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { visualize, story, snap } from 'storybook-snapper'; 3 | import { SocialBarWiringExample } from './docs/SocialBarWiringExample'; 4 | 5 | visualize('SocialBar', () => { 6 | story('render', () => { 7 | snap('default', ); 8 | }); 9 | }); 10 | -------------------------------------------------------------------------------- /src/types.ts: -------------------------------------------------------------------------------- 1 | export interface TPAComponentProps { 2 | /** 3 | * Class Name to pass to the root of the component 4 | */ 5 | className?: string; 6 | /** 7 | * A data-hook attribute to pass to the root of the component 8 | */ 9 | 'data-hook'?: string; 10 | } 11 | 12 | export type Omit = Pick>; 13 | -------------------------------------------------------------------------------- /src/components/TextButton/docs/TextButtonWiringExample.st.css: -------------------------------------------------------------------------------- 1 | :import { 2 | -st-from: "../TextButton.st.css"; 3 | -st-default: TPAButton; 4 | } 5 | 6 | .root { 7 | -st-extends: TPAButton; 8 | -st-mixin: TPAButton( 9 | MainTextColor '"--textButtonTextColor"', 10 | MainTextFont '"--textButtonTextFont"' 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /stories/utils/variableInfo.interface.ts: -------------------------------------------------------------------------------- 1 | export enum VariableType { 2 | color = 'color', 3 | font = 'font', 4 | number = 'number', 5 | } 6 | 7 | export interface IVariableManifest { 8 | name: string; 9 | type: VariableType; 10 | defaultValue: string; 11 | description: string; 12 | min?: string; 13 | max?: string; 14 | unit?: string; 15 | } 16 | -------------------------------------------------------------------------------- /.wuf/generator/templates/Component/docs/examples.ts: -------------------------------------------------------------------------------- 1 | export const importExample = `import { {%ComponentName%} } from 'wix-ui-tpa/{%ComponentName%}';`; 2 | 3 | export const example = ` 4 | <{%ComponentName%} /> 5 | `; 6 | 7 | export const mobileExample = ` 8 | 9 | <{%ComponentName%} /> 10 | 11 | `; 12 | -------------------------------------------------------------------------------- /src/assets/icons/Social/Rss.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/NewCard/NewCard.st.css: -------------------------------------------------------------------------------- 1 | .root { 2 | -st-states: stacked; 3 | display: inline-flex; 4 | flex-wrap: wrap; 5 | } 6 | 7 | .root:stacked { 8 | flex-direction: column; 9 | } 10 | 11 | .container { 12 | flex: 1; 13 | max-height: 100%; 14 | box-sizing: border-box; 15 | } 16 | 17 | .container img { 18 | max-width: 100%; 19 | } 20 | -------------------------------------------------------------------------------- /scripts/logger.js: -------------------------------------------------------------------------------- 1 | const chalk = require('chalk'); 2 | 3 | function log(...args) { 4 | console.log(chalk.green(...args)); 5 | } 6 | 7 | function error(...args) { 8 | console.log(chalk.red(...args)); 9 | } 10 | 11 | function warn(...args) { 12 | console.log(chalk.yellow(...args)); 13 | } 14 | 15 | module.exports = { 16 | log, 17 | error, 18 | warn, 19 | }; 20 | -------------------------------------------------------------------------------- /src/components/ColorPicker/docs/ColorPickerAnotherExtendedExample.st.css: -------------------------------------------------------------------------------- 1 | :import { 2 | -st-from: "../ColorPicker.st.css"; 3 | -st-default: TPAColorPicker; 4 | } 5 | 6 | .root { 7 | -st-mixin: TPAColorPicker( 8 | ItemSize '"--itemSize"', 9 | BorderRadius '"unit(fallback(zeroAsTrue(--anotherBorderRadius), 12), %)"' 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /src/components/FloatingDropdown/constants.ts: -------------------------------------------------------------------------------- 1 | export const DATA_HOOKS = { 2 | base: 'floating-dropdown-base', 3 | baseSelectedValue: 'floating-dropdown-base-selected-value', 4 | coreDropdown: 'core-dropdown', 5 | nativeSelect: 'floating-dropdown-native-select', 6 | floatingDropdownButton: 'floating-dropdown-button', 7 | }; 8 | 9 | export const ICON_SIZE = 24; 10 | -------------------------------------------------------------------------------- /src/components/Ratings/docs/RatingsExtendedExample.st.css: -------------------------------------------------------------------------------- 1 | :import { 2 | -st-from: "../Ratings.st.css"; 3 | -st-default: TPARatings; 4 | } 5 | 6 | .root {} 7 | 8 | .ratings { 9 | -st-mixin: TPARatings( 10 | IconColor '"--iconColor"', 11 | IconEmptyColor '"--iconEmptyColor"', 12 | TextColor '"--textColor"' 13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /src/components/SocialBar/SocialBar.meta.tsx: -------------------------------------------------------------------------------- 1 | import { SocialBar } from '.'; 2 | import Registry from '@ui-autotools/registry'; 3 | 4 | const SocialBarMetadata = Registry.getComponentMetadata(SocialBar); 5 | SocialBarMetadata.nonReactStrictModeCompliant = true; 6 | 7 | SocialBarMetadata.addSim({ 8 | title: 'render', 9 | props: { 10 | theme: 'light', 11 | }, 12 | }); 13 | -------------------------------------------------------------------------------- /src/components/AvatarGroup/docs/ExtendedExample.st.css: -------------------------------------------------------------------------------- 1 | :import { 2 | -st-from: "../AvatarGroup.st.css"; 3 | -st-default: AvatarGroup; 4 | } 5 | 6 | .root { 7 | -st-mixin: AvatarGroup( 8 | AvatarBorderColor '"--AvatarBorderColor"', 9 | TextButtonColor '"--AvatarTextButtonColor"', 10 | TextButtonFont '"--AvatarTextButtonFont' 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /src/components/Checkbox/dataHooks.ts: -------------------------------------------------------------------------------- 1 | export enum CHECKBOX_DATA_HOOKS { 2 | CheckboxWrapper = 'checkbox-wrapper', 3 | IconWrapper = 'icon-wrapper', 4 | LabelWrapper = 'label-wrapper', 5 | } 6 | 7 | export enum CHEKCBOX_DATA_KEYS { 8 | Error = 'data-error', 9 | Disabled = 'data-disabled', 10 | Checked = 'data-checked', 11 | Indeterminate = 'data-indeterminate', 12 | } 13 | -------------------------------------------------------------------------------- /src/components/NewCard/NewCard.meta.tsx: -------------------------------------------------------------------------------- 1 | import { NewCardWiringExample } from './docs/NewCardWiringExample'; 2 | import Registry from '@ui-autotools/registry'; 3 | 4 | const NewCardMetadata = Registry.getComponentMetadata(NewCardWiringExample); 5 | NewCardMetadata.nonReactStrictModeCompliant = true; 6 | 7 | NewCardMetadata.addSim({ 8 | title: 'render', 9 | props: {}, 10 | }); 11 | -------------------------------------------------------------------------------- /src/components/TextArea/docs/connected/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { classes } from './TextAreaOverrides.st.css'; 3 | import { TextArea } from '../../TextArea'; 4 | 5 | const TextAreaConnected = (props) => ( 6 |