From fe709db82b6a514aa7605a4d2cab3c70da60d4a3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krzysztof=20=C5=BBuraw?= <9116238+krzysztofzuraw@users.noreply.github.com> Date: Thu, 5 Jan 2023 13:34:34 +0100 Subject: [PATCH] Clean up storybook (#2941) --- .dockerignore | 3 +- .eslintrc.json | 2 +- package.json | 4 +- .../AppActivateDialog.stories.tsx | 18 --- .../AppDeactivateDialog.stories.tsx | 20 --- .../AppDeleteDialog.stories.tsx | 19 --- .../AppDetailsPage/AppDetailsPage.stories.tsx | 2 +- .../AppInProgressDeleteDialog.stories.tsx | 20 --- .../AppInstallPage/AppInstallPage.stories.tsx | 2 +- .../components/AppPage/AppPage.stories.tsx | 2 +- .../AppsListPage/AppListPage.stories.tsx | 2 +- .../HorizontalSpacer.stories.tsx | 36 ----- .../LoginLoading/LoginLoading.stories.tsx | 9 -- .../LoginPage/LoginPage.stories.tsx | 4 +- .../NewPasswordPage.stories.tsx | 2 +- .../ResetPasswordPage.stories.tsx | 4 +- .../ResetPasswordSuccessPage.stories.tsx | 2 +- .../CategoryCratePage.stories.tsx} | 6 +- .../CategoryListPage.stories.tsx} | 8 +- .../CategoryUpdatePage.stories.tsx} | 10 +- ...DefineChannelsAvailabilityCard.stories.tsx | 11 -- .../ChannelDeleteDialog.stories.tsx | 26 --- .../ChannelForm/ChannelForm.stories.tsx | 60 ------- .../ChannelPickerDialog.stories.tsx | 24 --- .../ChannelStatus/ChannelStatus.stories.tsx | 16 -- .../ShippingZones/ShippingZones.stories.tsx | 46 ------ .../Warehouses/Warehouses.stories.tsx | 44 ----- .../ChannelDetailsPage.stories.tsx | 4 +- .../ChannelsListPage.stories.tsx | 4 +- .../CollectionCreatePage.stories.tsx} | 6 +- .../CollectionDetailsPage.stories.tsx} | 10 +- .../CollectionListPage.stories.tsx} | 4 +- .../Accordion/Accordion.stories.tsx | 21 --- .../AccountPermissionGroups.stories.tsx | 76 --------- .../AssignAttributeDialog.stories.tsx | 34 ---- .../AttributeUnassignDialog.stories.tsx | 21 --- .../Attributes/Attributes.stories.tsx | 40 ----- .../BulkAttributeUnassignDialog.stories.tsx | 21 --- .../ChannelsAvailabilityCard.stories.tsx | 65 -------- .../ChannelsAvailabilityDialog.stories.tsx | 32 ---- .../ChannelsAvailabilityDropdown.stories.tsx | 16 -- src/components/Chip/Chip.stories.tsx | 15 -- .../ColorPicker/ColorPicker.stories.tsx | 19 --- src/components/Datagrid/Datagrid.stories.tsx | 151 ------------------ .../DeletableItem/DeletableItem.stories.tsx | 9 -- .../ErrorPage/ErrorPage.stories.tsx} | 6 +- .../FileUploadField.stories.tsx | 68 -------- .../LinkChoice/LinkChoice.stories.tsx | 26 --- src/components/Metadata/Metadata.stories.tsx | 19 --- .../MultiAutocompleteSelectField.stories.tsx | 88 ---------- .../NavigatorButton.stories.tsx | 12 -- .../NotFoundPage/NotFoundPage.stories.tsx} | 6 +- .../PreviewPill/PreviewPill.stories.tsx | 9 -- .../RichTextEditor/RichTextEditor.stories.tsx | 32 ---- .../SingleAutocompleteSelectField.stories.tsx | 125 --------------- .../SortableChip/SortableChip.stories.tsx | 29 ---- .../SortableChipsField.stories.tsx | 34 ---- .../TableCellHeader.stories.tsx | 80 ---------- .../TypeDeleteWarningDialog.stories.tsx | 40 ----- .../ConfigurationPage.stories.tsx} | 5 +- .../TokenDeleteDialog.stories.tsx | 17 -- .../WebhookDeleteDialog.stories.tsx | 22 --- .../WebhookDetailsPage.stories.tsx | 2 +- .../CustomerAddressListPage.stories.tsx} | 10 +- .../CustomerCreatePage.stories.tsx} | 6 +- .../CustomerDetailsPage.stories.tsx} | 10 +- .../CustomerListPage.stories.tsx} | 26 +-- .../SaleCreatePage.stories.tsx} | 8 +- .../SaleDetailsPage.stories.tsx} | 10 +- .../SaleListPage/SaleListPage.stories.tsx} | 22 ++- .../VoucherCreatePage.stories.tsx} | 6 +- .../VoucherDetailsPage.stories.tsx} | 10 +- .../VoucherListPage.stories.tsx} | 22 ++- src/fixtures.ts | 4 +- .../components/HomePage/HomePage.stories.tsx} | 12 +- .../MenuDetailsPage.stories.tsx} | 10 +- .../MenuListPage/MenuListPage.stories.tsx} | 22 ++- .../OrderChangeWarehouseDialog.stories.tsx | 45 ------ .../OrderChannelSectionCard.stories.tsx | 21 --- ...derCustomerAddressesEditDialog.stories.tsx | 64 -------- .../OrderCustomerChangeDialog.stories.tsx | 24 --- .../OrderDetailsPage.stories.tsx} | 16 +- .../OrderDiscountCommonModal.stories.tsx | 67 -------- .../OrderDraftListPage.stories.tsx} | 20 +-- .../OrderDraftPage.stories.tsx} | 20 ++- .../OrderDraftPage/storybook.utils.tsx} | 0 .../OrderFulfillPage.stories.tsx | 2 +- .../OrderListPage/OrderListPage.stories.tsx} | 26 ++- .../OrderRefundPage.stories.tsx | 2 +- .../OrderSettingsPage.stories.tsx | 6 +- .../PageTypeCreatePage.stories.tsx | 8 +- .../PageTypeDetailsPage.stories.tsx | 8 +- .../PageTypeListPage.stories.tsx | 18 +-- .../PageDetailsPage.stories.tsx} | 10 +- .../PageListPage/PageListPage.stories.tsx} | 22 ++- .../PageTypePickerDialog.stories.tsx | 29 ---- .../AssignMembersDialog.stories.tsx | 41 ----- .../MembersErrorDialog.stories.tsx | 21 --- .../PermissionGroupCreatePage.stories.tsx | 11 +- .../PermissionGroupDeleteDialog.stories.tsx | 42 ----- .../PermissionGroupDetailsPage.stories.tsx | 15 +- .../PermissionGroupListPage.stories.tsx | 13 +- .../UnassignMembersDialog.stories.tsx | 21 --- .../PluginSecretFieldDialog.stories.tsx | 36 ----- .../PluginDetailsPage.stories.tsx} | 8 +- .../PluginsListPage.stories.tsx} | 24 ++- .../ProductTypeCreatePage.stories.tsx} | 8 +- .../ProductTypeDetailsPage.stories.tsx} | 10 +- .../ProductTypeListPage.stories.tsx} | 22 +-- .../ProductCreatePage.stories.tsx} | 16 +- .../ProductExportDialog.stories.tsx | 55 ------- .../ProductListAttribute.stories.tsx | 107 ------------- .../ProductListPage.stories.tsx} | 28 ++-- .../ProductMediaPage.stories.tsx} | 6 +- .../ProductTypePickerDialog.stories.tsx | 29 ---- .../ProductUpdatePage.stories.tsx} | 12 +- .../ProductVariantCreatePage.stories.tsx} | 8 +- .../ProductVarinatPage.stories.tsx} | 8 +- .../DeleteShippingRateDialog.stories.tsx | 22 --- .../OrderValue/OrderValue.stories.tsx | 23 --- .../OrderWeight/OrderWeight.stories.tsx | 32 ---- .../PricingCard/PricingCard.stories.tsx | 21 --- .../ShippingMethodProducts.stories.tsx | 31 ---- ...hippingMethodProductsAddDialog.stories.tsx | 24 --- .../ShippingZoneCreatePage.stories.tsx} | 6 +- .../ShippingZoneDetailsPage.stories.tsx} | 8 +- ...ppingZonePostalCodeRangeDialog.stories.tsx | 16 -- .../ShippingZoneRatesCreatePage.stories.tsx | 2 +- .../ShippingZoneRatesPage.stories.tsx | 2 +- .../ShippingZoneSettingsCard.stories.tsx | 60 ------- .../ShippingZonesListPage.stories.tsx} | 20 +-- .../UnassignDialog/UnassignDialog.stories.tsx | 17 -- .../SiteSettingsPage.stories.tsx} | 10 +- .../StaffDetailsPage.stories.tsx | 7 +- .../StaffListPage/StaffListPage.stories.tsx | 4 +- src/storybook/CentralPlacementDecorator.tsx | 18 --- .../customers => }/MockedUserProvider.tsx | 0 src/storybook/UserDecorator.tsx | 21 --- src/storybook/config.js | 139 ---------------- src/storybook/{misc.ts => formError.ts} | 0 src/storybook/mock.tsx | 98 ------------ src/storybook/preview-body.html | 2 + src/storybook/preview-head.html | 10 ++ .../attributes/AttributeBulkDeleteDialog.tsx | 19 --- .../attributes/AttributeDeleteDialog.tsx | 19 --- .../stories/attributes/AttributeListPage.tsx | 59 ------- .../stories/attributes/AttributePage.tsx | 78 --------- .../attributes/AttributeValueDeleteDialog.tsx | 20 --- .../attributes/AttributeValueEditDialog.tsx | 36 ----- .../stories/components/ActionDialog.tsx | 26 --- .../stories/components/AddressEdit.tsx | 32 ---- .../stories/components/AddressFormatter.tsx | 15 -- .../components/AssignProductDialog.tsx | 24 --- .../components/AutocompleteSelectMenu.tsx | 114 ------------- src/storybook/stories/components/CardMenu.tsx | 15 -- src/storybook/stories/components/Checkbox.tsx | 39 ----- .../stories/components/ColumnPicker.tsx | 49 ------ src/storybook/stories/components/Date.tsx | 12 -- src/storybook/stories/components/DateTime.tsx | 14 -- .../components/DeleteFilterTabDialog.tsx | 19 --- .../stories/components/EditableTableCell.tsx | 32 ---- .../stories/components/ErrorMessageCard.tsx | 12 -- .../stories/components/ExternalLink.tsx | 18 --- src/storybook/stories/components/Filter.tsx | 100 ------------ src/storybook/stories/components/Money.tsx | 18 --- .../stories/components/MoneyRange.tsx | 24 --- .../stories/components/MultiSelectField.tsx | 81 ---------- .../stories/components/PageHeader.tsx | 18 --- src/storybook/stories/components/Percent.tsx | 11 -- .../stories/components/PhoneField.tsx | 20 --- .../stories/components/PriceField.tsx | 44 ----- .../components/SaveFilterTabDialog.tsx | 18 --- .../stories/components/SingleSelectField.tsx | 102 ------------ src/storybook/stories/components/Skeleton.tsx | 11 -- .../stories/components/TablePagination.tsx | 55 ------- src/storybook/stories/components/Timeline.tsx | 67 -------- src/storybook/stories/components/Weight.tsx | 18 --- .../stories/components/WeightRange.tsx | 24 --- src/storybook/stories/components/messages.tsx | 62 ------- .../customers/CustomerAddressDialog.tsx | 29 ---- .../discounts/DiscountCountrySelectDialog.tsx | 26 --- .../stories/navigation/MenuCreateDialog.tsx | 35 ---- .../stories/navigation/MenuItemDialog.tsx | 58 ------- .../stories/orders/OrderBulkCancelDialog.tsx | 19 --- .../stories/orders/OrderCancelDialog.tsx | 45 ------ .../stories/orders/OrderCustomer.tsx | 54 ------- .../stories/orders/OrderDraftCancelDialog.tsx | 36 ----- .../orders/OrderFulfillmentCancelDialog.tsx | 37 ----- .../orders/OrderFulfillmentTrackingDialog.tsx | 44 ----- src/storybook/stories/orders/OrderHistory.tsx | 18 --- .../stories/orders/OrderInvoiceList.tsx | 23 --- .../stories/orders/OrderMarkAsPaidDialog.tsx | 37 ----- .../stories/orders/OrderPaymentDialog.tsx | 44 ----- .../stories/orders/OrderPaymentVoidDialog.tsx | 35 ---- .../stories/orders/OrderProductAddDialog.tsx | 43 ----- .../orders/OrderShippingMethodEditDialog.tsx | 47 ------ .../ProductVariantImageSelectDialog.tsx | 25 --- .../ShippingZoneCountriesAssignDialog.tsx | 36 ----- .../TaxChannelsPage.stories.tsx | 2 +- .../TaxClassesPage/TaxClassesPage.stories.tsx | 2 +- .../TaxCountriesPage.stories.tsx | 2 +- .../TranslationsEntitiesListPage.stories.tsx} | 10 +- .../TranslationsLanguageListPage.stories.tsx} | 4 +- .../TranslationsLanguageListPage.tsx | 12 +- .../WarehouseCreatePage.stories.tsx | 2 +- .../WarehouseDetailsPage.stories.tsx | 2 +- .../WarehouseListPage.stories.tsx | 6 +- testUtils/ApolloMockedProvider.tsx | 20 ++- testUtils/mocks/address.ts | 52 ++++++ .../apolloMocks.ts => testUtils/mocks/apps.ts | 5 +- testUtils/mocks/index.ts | 4 + testUtils/mocks/pageTypes.ts | 41 +++++ testUtils/mocks/warehouses.ts | 41 +++++ 213 files changed, 507 insertions(+), 5004 deletions(-) delete mode 100644 src/apps/components/AppActivateDialog/AppActivateDialog.stories.tsx delete mode 100644 src/apps/components/AppDeactivateDialog/AppDeactivateDialog.stories.tsx delete mode 100644 src/apps/components/AppDeleteDialog/AppDeleteDialog.stories.tsx delete mode 100644 src/apps/components/AppInProgressDeleteDialog/AppInProgressDeleteDialog.stories.tsx delete mode 100644 src/apps/components/HorizontalSpacer/HorizontalSpacer.stories.tsx delete mode 100644 src/auth/components/LoginLoading/LoginLoading.stories.tsx rename src/{storybook/stories/categories/CategoryCreatePage.tsx => categories/components/CategoryCreatePage/CategoryCratePage.stories.tsx} (86%) rename src/{storybook/stories/categories/CategoryListPage.tsx => categories/components/CategoryListPage/CategoryListPage.stories.tsx} (83%) rename src/{storybook/stories/categories/CategoryUpdatePage.tsx => categories/components/CategoryUpdatePage/CategoryUpdatePage.stories.tsx} (89%) delete mode 100644 src/channels/components/CannotDefineChannelsAvailabilityCard/CannotDefineChannelsAvailabilityCard.stories.tsx delete mode 100644 src/channels/components/ChannelDeleteDialog/ChannelDeleteDialog.stories.tsx delete mode 100644 src/channels/components/ChannelForm/ChannelForm.stories.tsx delete mode 100644 src/channels/components/ChannelPickerDialog/ChannelPickerDialog.stories.tsx delete mode 100644 src/channels/components/ChannelStatus/ChannelStatus.stories.tsx delete mode 100644 src/channels/components/ShippingZones/ShippingZones.stories.tsx delete mode 100644 src/channels/components/Warehouses/Warehouses.stories.tsx rename src/{storybook/stories/collections/CollectionCreatePage.tsx => collections/components/CollectionCreatePage/CollectionCreatePage.stories.tsx} (89%) rename src/{storybook/stories/collections/CollectionDetailsPage.tsx => collections/components/CollectionDetailsPage/CollectionDetailsPage.stories.tsx} (86%) rename src/{storybook/stories/collections/CollectionListPage.tsx => collections/components/CollectionListPage/CollectionListPage.stories.tsx} (92%) delete mode 100644 src/components/Accordion/Accordion.stories.tsx delete mode 100644 src/components/AccountPermissionGroups/AccountPermissionGroups.stories.tsx delete mode 100644 src/components/AssignAttributeDialog/AssignAttributeDialog.stories.tsx delete mode 100644 src/components/AttributeUnassignDialog/AttributeUnassignDialog.stories.tsx delete mode 100644 src/components/Attributes/Attributes.stories.tsx delete mode 100644 src/components/BulkAttributeUnassignDialog/BulkAttributeUnassignDialog.stories.tsx delete mode 100644 src/components/ChannelsAvailabilityCard/ChannelsAvailabilityCard.stories.tsx delete mode 100644 src/components/ChannelsAvailabilityDialog/ChannelsAvailabilityDialog.stories.tsx delete mode 100644 src/components/ChannelsAvailabilityDropdown/ChannelsAvailabilityDropdown.stories.tsx delete mode 100644 src/components/Chip/Chip.stories.tsx delete mode 100644 src/components/ColorPicker/ColorPicker.stories.tsx delete mode 100644 src/components/Datagrid/Datagrid.stories.tsx delete mode 100644 src/components/DeletableItem/DeletableItem.stories.tsx rename src/{storybook/stories/components/ErrorPage.tsx => components/ErrorPage/ErrorPage.stories.tsx} (86%) delete mode 100644 src/components/FileUploadField/FileUploadField.stories.tsx delete mode 100644 src/components/LinkChoice/LinkChoice.stories.tsx delete mode 100644 src/components/Metadata/Metadata.stories.tsx delete mode 100644 src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.stories.tsx delete mode 100644 src/components/NavigatorButton/NavigatorButton.stories.tsx rename src/{storybook/stories/components/NotFoundPage.tsx => components/NotFoundPage/NotFoundPage.stories.tsx} (52%) delete mode 100644 src/components/PreviewPill/PreviewPill.stories.tsx delete mode 100644 src/components/RichTextEditor/RichTextEditor.stories.tsx delete mode 100644 src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.stories.tsx delete mode 100644 src/components/SortableChip/SortableChip.stories.tsx delete mode 100644 src/components/SortableChipsField/SortableChipsField.stories.tsx delete mode 100644 src/components/TableCellHeader/TableCellHeader.stories.tsx delete mode 100644 src/components/TypeDeleteWarningDialog/TypeDeleteWarningDialog.stories.tsx rename src/{storybook/stories/configuration/ConfigurationPage.tsx => configuration/ConfigurationPage.stories.tsx} (91%) delete mode 100644 src/custom-apps/components/TokenDeleteDialog/TokenDeleteDialog.stories.tsx delete mode 100644 src/custom-apps/components/WebhookDeleteDialog/WebhookDeleteDialog.stories.tsx rename src/{storybook/stories/customers/CustomerAddressListPage.tsx => customers/components/CustomerAddressListPage/CustomerAddressListPage.stories.tsx} (68%) rename src/{storybook/stories/customers/CustomerCreatePage.tsx => customers/components/CustomerCreatePage/CustomerCreatePage.stories.tsx} (89%) rename src/{storybook/stories/customers/CustomerDetailsPage.tsx => customers/components/CustomerDetailsPage/CustomerDetailsPage.stories.tsx} (89%) rename src/{storybook/stories/customers/CustomerListPage.tsx => customers/components/CustomerListPage/CustomerListPage.stories.tsx} (78%) rename src/{storybook/stories/discounts/SaleCreatePage.tsx => discounts/components/SaleCreatePage/SaleCreatePage.stories.tsx} (84%) rename src/{storybook/stories/discounts/SaleDetailsPage.tsx => discounts/components/SaleDetailsPage/SaleDetailsPage.stories.tsx} (90%) rename src/{storybook/stories/discounts/SaleListPage.tsx => discounts/components/SaleListPage/SaleListPage.stories.tsx} (85%) rename src/{storybook/stories/discounts/VoucherCreatePage.tsx => discounts/components/VoucherCreatePage/VoucherCreatePage.stories.tsx} (88%) rename src/{storybook/stories/discounts/VoucherDetailsPage.tsx => discounts/components/VoucherDetailsPage/VoucherDetailsPage.stories.tsx} (89%) rename src/{storybook/stories/discounts/VoucherListPage.tsx => discounts/components/VoucherListPage/VoucherListPage.stories.tsx} (86%) rename src/{storybook/stories/home/HomePage.tsx => home/components/HomePage/HomePage.stories.tsx} (87%) rename src/{storybook/stories/navigation/MenuDetailsPage.tsx => navigation/components/MenuDetailsPage/MenuDetailsPage.stories.tsx} (78%) rename src/{storybook/stories/navigation/MenuListPage.tsx => navigation/components/MenuListPage/MenuListPage.stories.tsx} (74%) delete mode 100644 src/orders/components/OrderChangeWarehouseDialog/OrderChangeWarehouseDialog.stories.tsx delete mode 100644 src/orders/components/OrderChannelSectionCard/OrderChannelSectionCard.stories.tsx delete mode 100644 src/orders/components/OrderCustomerAddressesEditDialog/OrderCustomerAddressesEditDialog.stories.tsx delete mode 100644 src/orders/components/OrderCustomerChangeDialog/OrderCustomerChangeDialog.stories.tsx rename src/{storybook/stories/orders/OrderDetailsPage.tsx => orders/components/OrderDetailsPage/OrderDetailsPage.stories.tsx} (93%) delete mode 100644 src/orders/components/OrderDiscountCommonModal/OrderDiscountCommonModal.stories.tsx rename src/{storybook/stories/orders/OrderDraftListPage.tsx => orders/components/OrderDraftListPage/OrderDraftListPage.stories.tsx} (85%) rename src/{storybook/stories/orders/OrderDraftPage/OrderDraftPage.tsx => orders/components/OrderDraftPage/OrderDraftPage.stories.tsx} (87%) rename src/{storybook/stories/orders/OrderDraftPage/utils.tsx => orders/components/OrderDraftPage/storybook.utils.tsx} (100%) rename src/{storybook/stories/orders/OrderListPage.tsx => orders/components/OrderListPage/OrderListPage.stories.tsx} (88%) rename src/{storybook/stories/pages/PageDetailsPage.tsx => pages/components/PageDetailsPage/PageDetailsPage.stories.tsx} (84%) rename src/{storybook/stories/pages/PageListPage.tsx => pages/components/PageListPage/PageListPage.stories.tsx} (77%) delete mode 100644 src/pages/components/PageTypePickerDialog/PageTypePickerDialog.stories.tsx delete mode 100644 src/permissionGroups/components/AssignMembersDialog/AssignMembersDialog.stories.tsx delete mode 100644 src/permissionGroups/components/MembersErrorDialog/MembersErrorDialog.stories.tsx delete mode 100644 src/permissionGroups/components/PermissionGroupDeleteDialog/PermissionGroupDeleteDialog.stories.tsx delete mode 100644 src/permissionGroups/components/UnassignMembersDialog/UnassignMembersDialog.stories.tsx delete mode 100644 src/plugins/components/PluginSecretFieldDialog/PluginSecretFieldDialog.stories.tsx rename src/{storybook/stories/plugins/PluginDetailsPage.tsx => plugins/components/PluginsDetailsPage/PluginDetailsPage.stories.tsx} (87%) rename src/{storybook/stories/plugins/PluginsListPage.tsx => plugins/components/PluginsListPage/PluginsListPage.stories.tsx} (82%) rename src/{storybook/stories/productTypes/ProductTypeCreatePage.tsx => productTypes/components/ProductTypeCreatePage/ProductTypeCreatePage.stories.tsx} (81%) rename src/{storybook/stories/productTypes/ProductTypeDetailsPage.tsx => productTypes/components/ProductTypeDetailsPage/ProductTypeDetailsPage.stories.tsx} (84%) rename src/{storybook/stories/productTypes/ProductTypeListPage.tsx => productTypes/components/ProductTypeListPage/ProductTypeListPage.stories.tsx} (83%) rename src/{storybook/stories/products/ProductCreatePage.tsx => products/components/ProductCreatePage/ProductCreatePage.stories.tsx} (92%) delete mode 100644 src/products/components/ProductExportDialog/ProductExportDialog.stories.tsx delete mode 100644 src/products/components/ProductList/ProductListAttribute.stories.tsx rename src/{storybook/stories/products/ProductListPage.tsx => products/components/ProductListPage/ProductListPage.stories.tsx} (91%) rename src/{storybook/stories/products/ProductImagePage.tsx => products/components/ProductMediaPage/ProductMediaPage.stories.tsx} (85%) delete mode 100644 src/products/components/ProductTypePickerDialog/ProductTypePickerDialog.stories.tsx rename src/{storybook/stories/products/ProductUpdatePage.tsx => products/components/ProductUpdatePage/ProductUpdatePage.stories.tsx} (92%) rename src/{storybook/stories/products/ProductVariantCreatePage.tsx => products/components/ProductVariantCreatePage/ProductVariantCreatePage.stories.tsx} (94%) rename src/{storybook/stories/products/ProductVariantPage.tsx => products/components/ProductVariantPage/ProductVarinatPage.stories.tsx} (94%) delete mode 100644 src/shipping/components/DeleteShippingRateDialog/DeleteShippingRateDialog.stories.tsx delete mode 100644 src/shipping/components/OrderValue/OrderValue.stories.tsx delete mode 100644 src/shipping/components/OrderWeight/OrderWeight.stories.tsx delete mode 100644 src/shipping/components/PricingCard/PricingCard.stories.tsx delete mode 100644 src/shipping/components/ShippingMethodProducts/ShippingMethodProducts.stories.tsx delete mode 100644 src/shipping/components/ShippingMethodProductsAddDialog/ShippingMethodProductsAddDialog.stories.tsx rename src/{storybook/stories/shipping/ShippingZoneCreatePage.tsx => shipping/components/ShippingZoneCreatePage/ShippingZoneCreatePage.stories.tsx} (90%) rename src/{storybook/stories/shipping/ShippingZoneDetailsPage.tsx => shipping/components/ShippingZoneDetailsPage/ShippingZoneDetailsPage.stories.tsx} (86%) delete mode 100644 src/shipping/components/ShippingZonePostalCodeRangeDialog/ShippingZonePostalCodeRangeDialog.stories.tsx delete mode 100644 src/shipping/components/ShippingZoneSettingsCard/ShippingZoneSettingsCard.stories.tsx rename src/{storybook/stories/shipping/ShippingZonesListPage.tsx => shipping/components/ShippingZonesListPage/ShippingZonesListPage.stories.tsx} (81%) delete mode 100644 src/shipping/components/UnassignDialog/UnassignDialog.stories.tsx rename src/{storybook/stories/siteSettings/SiteSettingsPage.tsx => siteSettings/components/SiteSettingsPage/SiteSettingsPage.stories.tsx} (77%) delete mode 100644 src/storybook/CentralPlacementDecorator.tsx rename src/storybook/{stories/customers => }/MockedUserProvider.tsx (100%) delete mode 100644 src/storybook/UserDecorator.tsx rename src/storybook/{misc.ts => formError.ts} (100%) delete mode 100644 src/storybook/mock.tsx create mode 100644 src/storybook/preview-body.html create mode 100644 src/storybook/preview-head.html delete mode 100644 src/storybook/stories/attributes/AttributeBulkDeleteDialog.tsx delete mode 100644 src/storybook/stories/attributes/AttributeDeleteDialog.tsx delete mode 100644 src/storybook/stories/attributes/AttributeListPage.tsx delete mode 100644 src/storybook/stories/attributes/AttributePage.tsx delete mode 100644 src/storybook/stories/attributes/AttributeValueDeleteDialog.tsx delete mode 100644 src/storybook/stories/attributes/AttributeValueEditDialog.tsx delete mode 100644 src/storybook/stories/components/ActionDialog.tsx delete mode 100644 src/storybook/stories/components/AddressEdit.tsx delete mode 100644 src/storybook/stories/components/AddressFormatter.tsx delete mode 100644 src/storybook/stories/components/AssignProductDialog.tsx delete mode 100644 src/storybook/stories/components/AutocompleteSelectMenu.tsx delete mode 100644 src/storybook/stories/components/CardMenu.tsx delete mode 100644 src/storybook/stories/components/Checkbox.tsx delete mode 100644 src/storybook/stories/components/ColumnPicker.tsx delete mode 100644 src/storybook/stories/components/Date.tsx delete mode 100644 src/storybook/stories/components/DateTime.tsx delete mode 100644 src/storybook/stories/components/DeleteFilterTabDialog.tsx delete mode 100644 src/storybook/stories/components/EditableTableCell.tsx delete mode 100644 src/storybook/stories/components/ErrorMessageCard.tsx delete mode 100644 src/storybook/stories/components/ExternalLink.tsx delete mode 100644 src/storybook/stories/components/Filter.tsx delete mode 100644 src/storybook/stories/components/Money.tsx delete mode 100644 src/storybook/stories/components/MoneyRange.tsx delete mode 100644 src/storybook/stories/components/MultiSelectField.tsx delete mode 100644 src/storybook/stories/components/PageHeader.tsx delete mode 100644 src/storybook/stories/components/Percent.tsx delete mode 100644 src/storybook/stories/components/PhoneField.tsx delete mode 100644 src/storybook/stories/components/PriceField.tsx delete mode 100644 src/storybook/stories/components/SaveFilterTabDialog.tsx delete mode 100644 src/storybook/stories/components/SingleSelectField.tsx delete mode 100644 src/storybook/stories/components/Skeleton.tsx delete mode 100644 src/storybook/stories/components/TablePagination.tsx delete mode 100644 src/storybook/stories/components/Timeline.tsx delete mode 100644 src/storybook/stories/components/Weight.tsx delete mode 100644 src/storybook/stories/components/WeightRange.tsx delete mode 100644 src/storybook/stories/components/messages.tsx delete mode 100644 src/storybook/stories/customers/CustomerAddressDialog.tsx delete mode 100644 src/storybook/stories/discounts/DiscountCountrySelectDialog.tsx delete mode 100644 src/storybook/stories/navigation/MenuCreateDialog.tsx delete mode 100644 src/storybook/stories/navigation/MenuItemDialog.tsx delete mode 100644 src/storybook/stories/orders/OrderBulkCancelDialog.tsx delete mode 100644 src/storybook/stories/orders/OrderCancelDialog.tsx delete mode 100644 src/storybook/stories/orders/OrderCustomer.tsx delete mode 100644 src/storybook/stories/orders/OrderDraftCancelDialog.tsx delete mode 100644 src/storybook/stories/orders/OrderFulfillmentCancelDialog.tsx delete mode 100644 src/storybook/stories/orders/OrderFulfillmentTrackingDialog.tsx delete mode 100644 src/storybook/stories/orders/OrderHistory.tsx delete mode 100644 src/storybook/stories/orders/OrderInvoiceList.tsx delete mode 100644 src/storybook/stories/orders/OrderMarkAsPaidDialog.tsx delete mode 100644 src/storybook/stories/orders/OrderPaymentDialog.tsx delete mode 100644 src/storybook/stories/orders/OrderPaymentVoidDialog.tsx delete mode 100644 src/storybook/stories/orders/OrderProductAddDialog.tsx delete mode 100644 src/storybook/stories/orders/OrderShippingMethodEditDialog.tsx delete mode 100644 src/storybook/stories/products/ProductVariantImageSelectDialog.tsx delete mode 100644 src/storybook/stories/shipping/ShippingZoneCountriesAssignDialog.tsx rename src/{storybook/stories/translations/TranslationsEntitiesListPage.tsx => translations/components/TranslationsEntitiesListPage/TranslationsEntitiesListPage.stories.tsx} (81%) rename src/{storybook/stories/translations/TranslationsLanguageListPage.tsx => translations/components/TranslationsLanguageListPage/TranslationsLanguageListPage.stories.tsx} (86%) create mode 100644 testUtils/mocks/address.ts rename src/apps/apolloMocks.ts => testUtils/mocks/apps.ts (61%) create mode 100644 testUtils/mocks/index.ts create mode 100644 testUtils/mocks/pageTypes.ts create mode 100644 testUtils/mocks/warehouses.ts diff --git a/.dockerignore b/.dockerignore index b7dab5e9c..e5d2c9fdc 100644 --- a/.dockerignore +++ b/.dockerignore @@ -1,2 +1,3 @@ node_modules -build \ No newline at end of file +build +*.stories.tsx diff --git a/.eslintrc.json b/.eslintrc.json index 573801e93..aa243bc37 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -21,7 +21,7 @@ ], "overrides": [ { - "files": ["src/**/*.test.*"], + "files": ["src/**/*.test.*", "src/**/*.stories.*"], "rules": { "react-refresh/only-export-components": "off" } diff --git a/package.json b/package.json index e98210676..13c231c8e 100644 --- a/package.json +++ b/package.json @@ -169,7 +169,6 @@ "workbox-strategies": "^6.1.2" }, "optionalDependencies": { - "@storybook/addon-storyshots": "^5.2.8", "@storybook/react": "^5.1.9", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^12.1.5", @@ -177,7 +176,6 @@ "@testing-library/user-event": "^14.4.3", "@types/jest": "^26.0.14", "@types/setup-polly-jest": "^0.5.0", - "@types/storybook__addon-storyshots": "^3.4.9", "@types/storybook__react": "^4.0.2", "cypress": "^10.0.2", "cypress-file-upload": "^5.0.8", @@ -293,4 +291,4 @@ "prepare": "is-ci || husky install" }, "description": "![Saleor Dashboard](https://user-images.githubusercontent.com/249912/82305745-5c52fd00-99be-11ea-9ac6-cc04a6f28c91.png)" -} \ No newline at end of file +} diff --git a/src/apps/components/AppActivateDialog/AppActivateDialog.stories.tsx b/src/apps/components/AppActivateDialog/AppActivateDialog.stories.tsx deleted file mode 100644 index 8e3991fca..000000000 --- a/src/apps/components/AppActivateDialog/AppActivateDialog.stories.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import Decorator from "@saleor/storybook/Decorator"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import AppActivateDialog, { AppActivateDialogProps } from "./AppActivateDialog"; - -const props: AppActivateDialogProps = { - confirmButtonState: "default", - name: "App", - onClose: () => undefined, - onConfirm: () => undefined, - open: true, -}; - -storiesOf("Views / Apps / Activate app", module) - .addDecorator(Decorator) - .add("default", () => ) - .add("unnamed app", () => ); diff --git a/src/apps/components/AppDeactivateDialog/AppDeactivateDialog.stories.tsx b/src/apps/components/AppDeactivateDialog/AppDeactivateDialog.stories.tsx deleted file mode 100644 index ab30b1bde..000000000 --- a/src/apps/components/AppDeactivateDialog/AppDeactivateDialog.stories.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import Decorator from "@saleor/storybook/Decorator"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import AppDeactivateDialog, { - AppDeactivateDialogProps, -} from "./AppDeactivateDialog"; - -const props: AppDeactivateDialogProps = { - confirmButtonState: "default", - name: "App", - onClose: () => undefined, - onConfirm: () => undefined, - open: true, -}; - -storiesOf("Views / Apps / Deactivate app", module) - .addDecorator(Decorator) - .add("default", () => ) - .add("unnamed app", () => ); diff --git a/src/apps/components/AppDeleteDialog/AppDeleteDialog.stories.tsx b/src/apps/components/AppDeleteDialog/AppDeleteDialog.stories.tsx deleted file mode 100644 index 3f62edb13..000000000 --- a/src/apps/components/AppDeleteDialog/AppDeleteDialog.stories.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import Decorator from "@saleor/storybook/Decorator"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import AppDeleteDialog, { AppDeleteDialogProps } from "./AppDeleteDialog"; - -const props: AppDeleteDialogProps = { - confirmButtonState: "default", - name: "App", - onClose: () => undefined, - onConfirm: () => undefined, - open: true, - type: "EXTERNAL", -}; - -storiesOf("Views / Apps / Delete app", module) - .addDecorator(Decorator) - .add("default", () => ) - .add("unnamed app", () => ); diff --git a/src/apps/components/AppDetailsPage/AppDetailsPage.stories.tsx b/src/apps/components/AppDetailsPage/AppDetailsPage.stories.tsx index 2b8f8d13e..dea8cad7f 100644 --- a/src/apps/components/AppDetailsPage/AppDetailsPage.stories.tsx +++ b/src/apps/components/AppDetailsPage/AppDetailsPage.stories.tsx @@ -13,7 +13,7 @@ const props: AppDetailsPageProps = { onAppDeactivateOpen: () => undefined, }; -storiesOf("Views / Apps / App details", module) +storiesOf("Apps / App details", module) .addDecorator(Decorator) .add("default", () => ) .add("loading", () => ); diff --git a/src/apps/components/AppInProgressDeleteDialog/AppInProgressDeleteDialog.stories.tsx b/src/apps/components/AppInProgressDeleteDialog/AppInProgressDeleteDialog.stories.tsx deleted file mode 100644 index 8a274cddd..000000000 --- a/src/apps/components/AppInProgressDeleteDialog/AppInProgressDeleteDialog.stories.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import Decorator from "@saleor/storybook/Decorator"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import AppInProgressDeleteDialog, { - AppInProgressDeleteDialogProps, -} from "./AppInProgressDeleteDialog"; - -const props: AppInProgressDeleteDialogProps = { - confirmButtonState: "default", - name: "App", - onClose: () => undefined, - onConfirm: () => undefined, - open: true, -}; - -storiesOf("Views / Apps / Delete app failed installation", module) - .addDecorator(Decorator) - .add("default", () => ) - .add("unnamed app", () => ); diff --git a/src/apps/components/AppInstallPage/AppInstallPage.stories.tsx b/src/apps/components/AppInstallPage/AppInstallPage.stories.tsx index 26d248955..7c15c2416 100644 --- a/src/apps/components/AppInstallPage/AppInstallPage.stories.tsx +++ b/src/apps/components/AppInstallPage/AppInstallPage.stories.tsx @@ -12,7 +12,7 @@ const props: AppInstallPageProps = { onSubmit: () => Promise.resolve([]), }; -storiesOf("Views / Apps / Install App", module) +storiesOf("Apps / Install App", module) .addDecorator(Decorator) .add("default", () => ) .add("loading", () => ); diff --git a/src/apps/components/AppPage/AppPage.stories.tsx b/src/apps/components/AppPage/AppPage.stories.tsx index 61a8f7995..ae4718e16 100644 --- a/src/apps/components/AppPage/AppPage.stories.tsx +++ b/src/apps/components/AppPage/AppPage.stories.tsx @@ -12,7 +12,7 @@ const props: AppPageProps = { onError: () => undefined, }; -storiesOf("Views / Apps / App", module) +storiesOf("Apps / App", module) .addDecorator(Decorator) .add("default", () => ) .add("settings", () => ( diff --git a/src/apps/components/AppsListPage/AppListPage.stories.tsx b/src/apps/components/AppsListPage/AppListPage.stories.tsx index 160a3f5ad..4a5bd81a9 100644 --- a/src/apps/components/AppsListPage/AppListPage.stories.tsx +++ b/src/apps/components/AppsListPage/AppListPage.stories.tsx @@ -31,7 +31,7 @@ const props: AppsListPageProps = { onInstalledAppRemove: () => undefined, }; -storiesOf("Views / Apps / Apps list", module) +storiesOf("Apps / Apps list", module) .addDecorator(Decorator) .addDecorator(story => ( = ({ children }) => ( -
{children}
-); - -const Text: React.FC = () => {"<- The spacer is here"}; - -storiesOf("Generics / Horizontal Spacer", module) - .addDecorator(Decorator) - .add("without", () => ( - - No spacer - - )) - .add("default", () => ( - - - - - )) - .add("with bigger spacing provided", () => ( - - - - - )); diff --git a/src/auth/components/LoginLoading/LoginLoading.stories.tsx b/src/auth/components/LoginLoading/LoginLoading.stories.tsx deleted file mode 100644 index 8945047ff..000000000 --- a/src/auth/components/LoginLoading/LoginLoading.stories.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import Decorator from "@saleor/storybook/Decorator"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import LoginLoading from "."; - -storiesOf("Views / Authentication / Verifying remembered user", module) - .addDecorator(Decorator) - .add("default", () => ); diff --git a/src/auth/components/LoginPage/LoginPage.stories.tsx b/src/auth/components/LoginPage/LoginPage.stories.tsx index e2233f88b..37308a3ba 100644 --- a/src/auth/components/LoginPage/LoginPage.stories.tsx +++ b/src/auth/components/LoginPage/LoginPage.stories.tsx @@ -3,7 +3,7 @@ import Decorator from "@saleor/storybook/Decorator"; import { storiesOf } from "@storybook/react"; import React from "react"; -import LoginPage, { LoginCardProps } from "../../../auth/components/LoginPage"; +import LoginPage, { LoginCardProps } from "./LoginPage"; const props: Omit = { disabled: false, @@ -20,7 +20,7 @@ const props: Omit = { onSubmit: () => undefined, }; -storiesOf("Views / Authentication / Log in", module) +storiesOf("Authentication / Log in", module) .addDecorator(CardDecorator) .addDecorator(Decorator) .add("default", () => ) diff --git a/src/auth/components/NewPasswordPage/NewPasswordPage.stories.tsx b/src/auth/components/NewPasswordPage/NewPasswordPage.stories.tsx index c79ab8c25..64bd5d438 100644 --- a/src/auth/components/NewPasswordPage/NewPasswordPage.stories.tsx +++ b/src/auth/components/NewPasswordPage/NewPasswordPage.stories.tsx @@ -6,7 +6,7 @@ import React from "react"; import NewPasswordPage from "./NewPasswordPage"; -storiesOf("Views / Authentication / Set up a new password", module) +storiesOf("Authentication / Set up a new password", module) .addDecorator(CardDecorator) .addDecorator(Decorator) .add("default", () => ( diff --git a/src/auth/components/ResetPasswordPage/ResetPasswordPage.stories.tsx b/src/auth/components/ResetPasswordPage/ResetPasswordPage.stories.tsx index ee8a75b54..1318bbedc 100644 --- a/src/auth/components/ResetPasswordPage/ResetPasswordPage.stories.tsx +++ b/src/auth/components/ResetPasswordPage/ResetPasswordPage.stories.tsx @@ -1,6 +1,6 @@ import CardDecorator from "@saleor/storybook/CardDecorator"; import Decorator from "@saleor/storybook/Decorator"; -import { formError } from "@saleor/storybook/misc"; +import { formError } from "@saleor/storybook/formError"; import { storiesOf } from "@storybook/react"; import React from "react"; @@ -11,7 +11,7 @@ const props: ResetPasswordPageProps = { error: undefined, onSubmit: () => undefined, }; -storiesOf("Views / Authentication / Reset password", module) +storiesOf("Authentication / Reset password", module) .addDecorator(CardDecorator) .addDecorator(Decorator) .add("default", () => ) diff --git a/src/auth/components/ResetPasswordSuccessPage/ResetPasswordSuccessPage.stories.tsx b/src/auth/components/ResetPasswordSuccessPage/ResetPasswordSuccessPage.stories.tsx index a18ef5c0e..6b1b90e84 100644 --- a/src/auth/components/ResetPasswordSuccessPage/ResetPasswordSuccessPage.stories.tsx +++ b/src/auth/components/ResetPasswordSuccessPage/ResetPasswordSuccessPage.stories.tsx @@ -5,7 +5,7 @@ import React from "react"; import ResetPasswordSuccessPage from "./ResetPasswordSuccessPage"; -storiesOf("Views / Authentication / Reset password success", module) +storiesOf("Authentication / Reset password success", module) .addDecorator(CardDecorator) .addDecorator(Decorator) .add("default", () => undefined} />); diff --git a/src/storybook/stories/categories/CategoryCreatePage.tsx b/src/categories/components/CategoryCreatePage/CategoryCratePage.stories.tsx similarity index 86% rename from src/storybook/stories/categories/CategoryCreatePage.tsx rename to src/categories/components/CategoryCreatePage/CategoryCratePage.stories.tsx index a676a8542..a98950b03 100644 --- a/src/storybook/stories/categories/CategoryCreatePage.tsx +++ b/src/categories/components/CategoryCreatePage/CategoryCratePage.stories.tsx @@ -1,11 +1,11 @@ import { ProductErrorCode } from "@saleor/graphql"; +import Decorator from "@saleor/storybook/Decorator"; import { storiesOf } from "@storybook/react"; import React from "react"; import CategoryCreatePage, { CategoryCreatePageProps, -} from "../../../categories/components/CategoryCreatePage"; -import Decorator from "../../Decorator"; +} from "./CategoryCreatePage"; const createProps: CategoryCreatePageProps = { backUrl: "", @@ -15,7 +15,7 @@ const createProps: CategoryCreatePageProps = { saveButtonBarState: "default", }; -storiesOf("Views / Categories / Create category", module) +storiesOf("Categories / Create category", module) .addDecorator(Decorator) .add("default", () => ) .add("When loading", () => ( diff --git a/src/storybook/stories/categories/CategoryListPage.tsx b/src/categories/components/CategoryListPage/CategoryListPage.stories.tsx similarity index 83% rename from src/storybook/stories/categories/CategoryListPage.tsx rename to src/categories/components/CategoryListPage/CategoryListPage.stories.tsx index 7cb03a0f4..b55d2e8d1 100644 --- a/src/storybook/stories/categories/CategoryListPage.tsx +++ b/src/categories/components/CategoryListPage/CategoryListPage.stories.tsx @@ -1,6 +1,3 @@ -import CategoryListPage, { - CategoryTableProps, -} from "@saleor/categories/components/CategoryListPage"; import { categories } from "@saleor/categories/fixtures"; import { CategoryListUrlSortField } from "@saleor/categories/urls"; import { @@ -10,11 +7,12 @@ import { sortPageProps, tabPageProps, } from "@saleor/fixtures"; +import Decorator from "@saleor/storybook/Decorator"; import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator"; import { storiesOf } from "@storybook/react"; import React from "react"; -import Decorator from "../../Decorator"; +import CategoryListPage, { CategoryTableProps } from "./CategoryListPage"; const categoryTableProps: CategoryTableProps = { categories, @@ -30,7 +28,7 @@ const categoryTableProps: CategoryTableProps = { }, }; -storiesOf("Views / Categories / Category list", module) +storiesOf("Categories / Category list", module) .addDecorator(Decorator) .addDecorator(PaginatorContextDecorator) .add("default", () => ) diff --git a/src/storybook/stories/categories/CategoryUpdatePage.tsx b/src/categories/components/CategoryUpdatePage/CategoryUpdatePage.stories.tsx similarity index 89% rename from src/storybook/stories/categories/CategoryUpdatePage.tsx rename to src/categories/components/CategoryUpdatePage/CategoryUpdatePage.stories.tsx index 25f388784..2008066b3 100644 --- a/src/storybook/stories/categories/CategoryUpdatePage.tsx +++ b/src/categories/components/CategoryUpdatePage/CategoryUpdatePage.stories.tsx @@ -1,5 +1,8 @@ import placeholderImage from "@assets/images/placeholder255x255.png"; +import { category as categoryFixture } from "@saleor/categories/fixtures"; +import { listActionsProps } from "@saleor/fixtures"; import { ProductErrorCode } from "@saleor/graphql"; +import Decorator from "@saleor/storybook/Decorator"; import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator"; import { mapEdgesToItems } from "@saleor/utils/maps"; import { storiesOf } from "@storybook/react"; @@ -8,10 +11,7 @@ import React from "react"; import CategoryUpdatePage, { CategoryPageTab, CategoryUpdatePageProps, -} from "../../../categories/components/CategoryUpdatePage"; -import { category as categoryFixture } from "../../../categories/fixtures"; -import { listActionsProps } from "../../../fixtures"; -import Decorator from "../../Decorator"; +} from "./CategoryUpdatePage"; const category = categoryFixture(placeholderImage); @@ -35,7 +35,7 @@ const updateProps: Omit = { ...listActionsProps, }; -storiesOf("Views / Categories / Update category", module) +storiesOf("Categories / Update category", module) .addDecorator(Decorator) .addDecorator(PaginatorContextDecorator) .add("default", () => ) diff --git a/src/channels/components/CannotDefineChannelsAvailabilityCard/CannotDefineChannelsAvailabilityCard.stories.tsx b/src/channels/components/CannotDefineChannelsAvailabilityCard/CannotDefineChannelsAvailabilityCard.stories.tsx deleted file mode 100644 index a3fc47af2..000000000 --- a/src/channels/components/CannotDefineChannelsAvailabilityCard/CannotDefineChannelsAvailabilityCard.stories.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import CentralPlacementDecorator from "@saleor/storybook/CentralPlacementDecorator"; -import CommonDecorator from "@saleor/storybook/Decorator"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import CannotDefineChannelsAvailabilityCard from "./CannotDefineChannelsAvailabilityCard"; - -storiesOf("Channels / Cannot define channels availability card", module) - .addDecorator(CommonDecorator) - .addDecorator(CentralPlacementDecorator) - .add("default", () => ); diff --git a/src/channels/components/ChannelDeleteDialog/ChannelDeleteDialog.stories.tsx b/src/channels/components/ChannelDeleteDialog/ChannelDeleteDialog.stories.tsx deleted file mode 100644 index 5abc7f8c4..000000000 --- a/src/channels/components/ChannelDeleteDialog/ChannelDeleteDialog.stories.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import Decorator from "@saleor/storybook/Decorator"; -import { mapNodeToChoice } from "@saleor/utils/maps"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import { channelsList } from "../../fixtures"; -import ChannelDeleteDialog, { - ChannelDeleteDialogProps, -} from "./ChannelDeleteDialog"; - -const props: ChannelDeleteDialogProps = { - channelsChoices: mapNodeToChoice(channelsList), - confirmButtonState: "default", - hasOrders: true, - onBack: () => undefined, - onClose: () => undefined, - onConfirm: () => undefined, - open: true, -}; - -storiesOf("Views / Channels / Delete channel", module) - .addDecorator(Decorator) - .add("default", () => ) - .add("without channels to choose", () => ( - - )); diff --git a/src/channels/components/ChannelForm/ChannelForm.stories.tsx b/src/channels/components/ChannelForm/ChannelForm.stories.tsx deleted file mode 100644 index 83c11a60d..000000000 --- a/src/channels/components/ChannelForm/ChannelForm.stories.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import { countries } from "@saleor/fixtures"; -import { AllocationStrategyEnum, CountryCode } from "@saleor/graphql"; -import Decorator from "@saleor/storybook/Decorator"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import { channelCreateErrors } from "../../fixtures"; -import ChannelForm, { ChannelFormProps } from "./ChannelForm"; - -const props: ChannelFormProps = { - data: { - currencyCode: "euro", - shippingZonesIdsToAdd: [], - shippingZonesIdsToRemove: [], - warehousesIdsToAdd: [], - warehousesIdsToRemove: [], - name: "Test", - slug: "test", - defaultCountry: CountryCode.PL, - allocationStrategy: AllocationStrategyEnum.PRIORITIZE_HIGH_STOCK, - warehousesToDisplay: [ - { - __typename: "Warehouse", - id: "1", - name: "Warehouse 1", - }, - { - __typename: "Warehouse", - id: "2", - name: "Warehouse 2", - }, - ], - shippingZonesToDisplay: [ - { - __typename: "ShippingZone", - id: "1", - name: "Shipping Zone 1", - }, - { - __typename: "ShippingZone", - id: "2", - name: "Shipping Zone 2", - }, - ], - }, - disabled: false, - errors: [], - selectedCountryDisplayName: "Poland", - countries: countries.map(({ name, code }) => ({ label: name, value: code })), - onChange: () => undefined, - onDefaultCountryChange: () => undefined, -}; - -storiesOf("Views / Channels / Channel form", module) - .addDecorator(Decorator) - .add("default", () => ) - .add("disabled", () => ) - .add("with errors", () => ( - - )); diff --git a/src/channels/components/ChannelPickerDialog/ChannelPickerDialog.stories.tsx b/src/channels/components/ChannelPickerDialog/ChannelPickerDialog.stories.tsx deleted file mode 100644 index a483966a5..000000000 --- a/src/channels/components/ChannelPickerDialog/ChannelPickerDialog.stories.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import Decorator from "@saleor/storybook/Decorator"; -import { mapNodeToChoice } from "@saleor/utils/maps"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import { channelsList } from "../../fixtures"; -import ChannelPickerDialog, { - ChannelPickerDialogProps, -} from "./ChannelPickerDialog"; - -const channelsChoices = mapNodeToChoice(channelsList); - -const props: ChannelPickerDialogProps = { - channelsChoices, - confirmButtonState: "default", - defaultChoice: channelsChoices[0]?.value, - onClose: () => undefined, - onConfirm: () => undefined, - open: true, -}; - -storiesOf("Views / Channels / Settings dialog", module) - .addDecorator(Decorator) - .add("default", () => ); diff --git a/src/channels/components/ChannelStatus/ChannelStatus.stories.tsx b/src/channels/components/ChannelStatus/ChannelStatus.stories.tsx deleted file mode 100644 index d82afd2f5..000000000 --- a/src/channels/components/ChannelStatus/ChannelStatus.stories.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import Decorator from "@saleor/storybook/Decorator"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import ChannelStatus, { ChannelStatusProps } from "./ChannelStatus"; - -const props: ChannelStatusProps = { - disabled: false, - isActive: false, - updateChannelStatus: () => undefined, -}; - -storiesOf("Views / Channels / Channel status", module) - .addDecorator(Decorator) - .add("inactive", () => ) - .add("active", () => ); diff --git a/src/channels/components/ShippingZones/ShippingZones.stories.tsx b/src/channels/components/ShippingZones/ShippingZones.stories.tsx deleted file mode 100644 index c11946203..000000000 --- a/src/channels/components/ShippingZones/ShippingZones.stories.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { ChannelShippingZones } from "@saleor/channels/pages/ChannelDetailsPage/types"; -import CommonDecorator from "@saleor/storybook/Decorator"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import ShippingZones, { ShippingZonesProps } from "./ShippingZones"; - -const shippingZones = [ - { - __typename: "ShippingZone", - id: "2", - name: "Fancy shipping zone", - }, - { - __typename: "ShippingZone", - id: "3", - name: "Nice shipping zone", - }, -]; - -const baseProps: ShippingZonesProps = { - addShippingZone: () => undefined, - removeShippingZone: () => undefined, - searchShippingZones: () => undefined, - fetchMoreShippingZones: { - loading: false, - hasMore: false, - onFetchMore: () => undefined, - totalCount: 0, - }, - shippingZones: [], - shippingZonesChoices: shippingZones as ChannelShippingZones, - totalCount: 10, - loading: false, -}; - -storiesOf("Shipping zones", module) - .addDecorator(CommonDecorator) - .add("with no options selected", () => ) - .add("with options selected", () => ( - - )) - .add("loading", () => ); diff --git a/src/channels/components/Warehouses/Warehouses.stories.tsx b/src/channels/components/Warehouses/Warehouses.stories.tsx deleted file mode 100644 index b9dca3da2..000000000 --- a/src/channels/components/Warehouses/Warehouses.stories.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import { ChannelWarehouses } from "@saleor/channels/pages/ChannelDetailsPage/types"; -import CommonDecorator from "@saleor/storybook/Decorator"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import Warehouses, { WarehousesProps } from "./Warehouses"; - -const warehouses = [ - { - __typename: "Warehouse", - id: "2", - name: "Fancy warehouse", - }, - { - __typename: "Warehouse", - id: "3", - name: "Nice warehouse", - }, -]; - -const baseProps: WarehousesProps = { - addWarehouse: () => undefined, - removeWarehouse: () => undefined, - searchWarehouses: () => undefined, - fetchMoreWarehouses: { - loading: false, - hasMore: false, - onFetchMore: () => undefined, - totalCount: 0, - }, - reorderWarehouses: () => undefined, - warehouses: [], - warehousesChoices: warehouses as ChannelWarehouses, - totalCount: 10, - loading: false, -}; - -storiesOf("Warehouses", module) - .addDecorator(CommonDecorator) - .add("with no options selected", () => ) - .add("with options selected", () => ( - - )) - .add("loading", () => ); diff --git a/src/channels/pages/ChannelDetailsPage/ChannelDetailsPage.stories.tsx b/src/channels/pages/ChannelDetailsPage/ChannelDetailsPage.stories.tsx index 32528d284..6a26ba6d7 100644 --- a/src/channels/pages/ChannelDetailsPage/ChannelDetailsPage.stories.tsx +++ b/src/channels/pages/ChannelDetailsPage/ChannelDetailsPage.stories.tsx @@ -1,10 +1,10 @@ +import { channel, channelCreateErrors } from "@saleor/channels/fixtures"; import { countries } from "@saleor/fixtures"; import { ChannelErrorFragment } from "@saleor/graphql"; import Decorator from "@saleor/storybook/Decorator"; import { storiesOf } from "@storybook/react"; import React from "react"; -import { channel, channelCreateErrors } from "../../fixtures"; import ChannelDetailsPage, { ChannelDetailsPageProps, } from "./ChannelDetailsPage"; @@ -69,7 +69,7 @@ const props: ChannelDetailsPageProps = { }, }; -storiesOf("Views / Channels / Channel details", module) +storiesOf("Channels / Channel details", module) .addDecorator(Decorator) .add("default", () => ) .add("disabled", () => ) diff --git a/src/channels/pages/ChannelsListPage/ChannelsListPage.stories.tsx b/src/channels/pages/ChannelsListPage/ChannelsListPage.stories.tsx index 0ae8ffbb1..254c5a8a7 100644 --- a/src/channels/pages/ChannelsListPage/ChannelsListPage.stories.tsx +++ b/src/channels/pages/ChannelsListPage/ChannelsListPage.stories.tsx @@ -1,9 +1,9 @@ +import { channelsList } from "@saleor/channels/fixtures"; import { limits, limitsReached } from "@saleor/fixtures"; import Decorator from "@saleor/storybook/Decorator"; import { storiesOf } from "@storybook/react"; import React from "react"; -import { channelsList } from "../../fixtures"; import ChannelsListPage, { ChannelsListPageProps } from "./ChannelsListPage"; const props: ChannelsListPageProps = { @@ -12,7 +12,7 @@ const props: ChannelsListPageProps = { onRemove: () => undefined, }; -storiesOf("Views / Channels / Channels list", module) +storiesOf("Channels / Channels list", module) .addDecorator(Decorator) .add("default", () => ) .add("empty", () => ) diff --git a/src/storybook/stories/collections/CollectionCreatePage.tsx b/src/collections/components/CollectionCreatePage/CollectionCreatePage.stories.tsx similarity index 89% rename from src/storybook/stories/collections/CollectionCreatePage.tsx rename to src/collections/components/CollectionCreatePage/CollectionCreatePage.stories.tsx index 8d19e3b39..c96b2f979 100644 --- a/src/storybook/stories/collections/CollectionCreatePage.tsx +++ b/src/collections/components/CollectionCreatePage/CollectionCreatePage.stories.tsx @@ -1,13 +1,13 @@ import { channelsList } from "@saleor/channels/fixtures"; import { createCollectionChannels } from "@saleor/channels/utils"; import { CollectionErrorCode } from "@saleor/graphql"; +import Decorator from "@saleor/storybook/Decorator"; import { storiesOf } from "@storybook/react"; import React from "react"; import CollectionCreatePage, { CollectionCreatePageProps, -} from "../../../collections/components/CollectionCreatePage"; -import Decorator from "../../Decorator"; +} from "./CollectionCreatePage"; const channels = createCollectionChannels(channelsList); @@ -23,7 +23,7 @@ const props: Omit = { saveButtonBarState: "default", }; -storiesOf("Views / Collections / Create collection", module) +storiesOf("Collections / Create collection", module) .addDecorator(Decorator) .add("default", () => ) .add("loading", () => ) diff --git a/src/storybook/stories/collections/CollectionDetailsPage.tsx b/src/collections/components/CollectionDetailsPage/CollectionDetailsPage.stories.tsx similarity index 86% rename from src/storybook/stories/collections/CollectionDetailsPage.tsx rename to src/collections/components/CollectionDetailsPage/CollectionDetailsPage.stories.tsx index 03871bc99..db60c09e3 100644 --- a/src/storybook/stories/collections/CollectionDetailsPage.tsx +++ b/src/collections/components/CollectionDetailsPage/CollectionDetailsPage.stories.tsx @@ -1,17 +1,17 @@ import placeholderCollectionImage from "@assets/images/block1.jpg"; import placeholderProductImage from "@assets/images/placeholder60x60.png"; import { createCollectionChannelsData } from "@saleor/channels/utils"; +import { collection as collectionFixture } from "@saleor/collections/fixtures"; +import { listActionsProps, pageListProps } from "@saleor/fixtures"; import { CollectionErrorCode } from "@saleor/graphql"; +import Decorator from "@saleor/storybook/Decorator"; import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator"; import { storiesOf } from "@storybook/react"; import React from "react"; import CollectionDetailsPage, { CollectionDetailsPageProps, -} from "../../../collections/components/CollectionDetailsPage"; -import { collection as collectionFixture } from "../../../collections/fixtures"; -import { listActionsProps, pageListProps } from "../../../fixtures"; -import Decorator from "../../Decorator"; +} from "./CollectionDetailsPage"; const collection = collectionFixture( placeholderCollectionImage, @@ -39,7 +39,7 @@ const props: Omit = { selectedChannelId: "123", }; -storiesOf("Views / Collections / Collection detailsCollection details", module) +storiesOf("Collections / Collection detailsCollection details", module) .addDecorator(Decorator) .addDecorator(PaginatorContextDecorator) .add("default", () => ) diff --git a/src/storybook/stories/collections/CollectionListPage.tsx b/src/collections/components/CollectionListPage/CollectionListPage.stories.tsx similarity index 92% rename from src/storybook/stories/collections/CollectionListPage.tsx rename to src/collections/components/CollectionListPage/CollectionListPage.stories.tsx index d88affc87..08289705c 100644 --- a/src/storybook/stories/collections/CollectionListPage.tsx +++ b/src/collections/components/CollectionListPage/CollectionListPage.stories.tsx @@ -1,4 +1,5 @@ import { CollectionListUrlSortField } from "@saleor/collections/urls"; +import Decorator from "@saleor/storybook/Decorator"; import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator"; import { storiesOf } from "@storybook/react"; import React from "react"; @@ -17,7 +18,6 @@ import { sortPageProps, tabPageProps, } from "../../../fixtures"; -import Decorator from "../../Decorator"; const props: CollectionListPageProps = { ...listActionsProps, @@ -34,7 +34,7 @@ const props: CollectionListPageProps = { filterOpts: collectionListFilterOpts, }; -storiesOf("Views / Collections / Collection list", module) +storiesOf("Collections / Collection list", module) .addDecorator(Decorator) .addDecorator(PaginatorContextDecorator) .add("default", () => ) diff --git a/src/components/Accordion/Accordion.stories.tsx b/src/components/Accordion/Accordion.stories.tsx deleted file mode 100644 index 752a160de..000000000 --- a/src/components/Accordion/Accordion.stories.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import CardDecorator from "@saleor/storybook/CardDecorator"; -import Decorator from "@saleor/storybook/Decorator"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import Accordion from "./Accordion"; - -storiesOf("Generics / Accordion", module) - .addDecorator(Decorator) - .addDecorator(CardDecorator) - .add("default", () => Content) - .add("opened", () => ( - - Content - - )) - .add("with quick peek", () => ( - - Content - - )); diff --git a/src/components/AccountPermissionGroups/AccountPermissionGroups.stories.tsx b/src/components/AccountPermissionGroups/AccountPermissionGroups.stories.tsx deleted file mode 100644 index aba06f21a..000000000 --- a/src/components/AccountPermissionGroups/AccountPermissionGroups.stories.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import { - AccountErrorCode, - SearchPermissionGroupsQuery, - StaffErrorFragment, -} from "@saleor/graphql"; -import Decorator from "@saleor/storybook/Decorator"; -import { RelayToFlat } from "@saleor/types"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import { MultiAutocompleteChoiceType } from "../MultiAutocompleteSelectField"; -import AccountPermissionGroups, { AccountPermissionGroupsProps } from "."; - -const availablePermissionGroups: RelayToFlat = [ - { - __typename: "Group", - id: "R3JvdXA6MQ==", - name: "Unmanagable by user", - userCanManage: false, - }, - { - __typename: "Group", - id: "R3JvdXA6Mg==", - name: "Default group", - userCanManage: true, - }, - { - __typename: "Group", - id: "R3JvdXA6Mz==", - name: "Translators", - userCanManage: false, - }, - { - __typename: "Group", - id: "R3JvdXA6My==", - name: "CMS", - userCanManage: true, - }, -]; - -const displayValues: MultiAutocompleteChoiceType[] = [ - { disabled: true, label: "Unmanagable by user", value: "R3JvdXA6MQ==" }, - { disabled: false, label: "Default group", value: "R3JvdXA6Mg==" }, -]; - -const formData = { - permissionGroups: ["R3JvdXA6MQ==", "R3JvdXA6Mg=="], -}; - -const errors: StaffErrorFragment[] = [ - { - __typename: "StaffError", - code: AccountErrorCode.OUT_OF_SCOPE_GROUP, - field: "addGroups", - message: "Group out of scope", - }, -]; - -const props: AccountPermissionGroupsProps = { - availablePermissionGroups, - disabled: false, - displayValues, - errors: [], - formData, - hasMore: false, - initialSearch: "", - loading: false, - onChange: () => undefined, - onFetchMore: () => undefined, - onSearchChange: () => undefined, -}; - -storiesOf("Generics / Account Permission Groups Widget", module) - .addDecorator(Decorator) - .add("default", () => ) - .add("error", () => ); diff --git a/src/components/AssignAttributeDialog/AssignAttributeDialog.stories.tsx b/src/components/AssignAttributeDialog/AssignAttributeDialog.stories.tsx deleted file mode 100644 index 4a83ee42c..000000000 --- a/src/components/AssignAttributeDialog/AssignAttributeDialog.stories.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { attributes } from "@saleor/attributes/fixtures"; -import AssignAttributeDialog, { - AssignAttributeDialogProps, -} from "@saleor/components/AssignAttributeDialog"; -import { fetchMoreProps } from "@saleor/fixtures"; -import { formError } from "@saleor/storybook/misc"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import Decorator from "../../storybook/Decorator"; - -const props: AssignAttributeDialogProps = { - ...fetchMoreProps, - attributes: attributes.slice(0, 5), - confirmButtonState: "default", - errors: [], - onClose: () => undefined, - onFetch: () => undefined, - onOpen: () => undefined, - onSubmit: () => undefined, - onToggle: () => undefined, - open: true, - selected: [attributes[0].id, attributes[3].id], -}; - -storiesOf("Generics / Assign attributes dialog", module) - .addDecorator(Decorator) - .add("default", () => ) - .add("loading", () => ( - - )) - .add("errors", () => ( - - )); diff --git a/src/components/AttributeUnassignDialog/AttributeUnassignDialog.stories.tsx b/src/components/AttributeUnassignDialog/AttributeUnassignDialog.stories.tsx deleted file mode 100644 index 7012f0e2f..000000000 --- a/src/components/AttributeUnassignDialog/AttributeUnassignDialog.stories.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import AttributeUnassignDialog, { - AttributeUnassignDialogProps, -} from "@saleor/components/AttributeUnassignDialog"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import Decorator from "../../storybook/Decorator"; - -const props: AttributeUnassignDialogProps = { - attributeName: "Size", - confirmButtonState: "default", - itemTypeName: "Shoes", - onClose: () => undefined, - onConfirm: () => undefined, - open: true, - title: "Unassign Attribute from Shoes", -}; - -storiesOf("Generics / Unassign attribute", module) - .addDecorator(Decorator) - .add("default", () => ); diff --git a/src/components/Attributes/Attributes.stories.tsx b/src/components/Attributes/Attributes.stories.tsx deleted file mode 100644 index 6c6edf631..000000000 --- a/src/components/Attributes/Attributes.stories.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import Attributes, { AttributesProps } from "@saleor/components/Attributes"; -import { fetchMoreProps } from "@saleor/fixtures"; -import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import Decorator from "../../storybook/Decorator"; -import { ATTRIBUTES, ATTRIBUTES_SELECTED } from "./fixtures"; - -const props: AttributesProps = { - attributes: ATTRIBUTES, - attributeValues: [], - disabled: false, - errors: [], - loading: false, - onChange: () => undefined, - onFileChange: () => undefined, - onMultiChange: () => undefined, - onReferencesAddClick: () => undefined, - onReferencesRemove: () => undefined, - onReferencesReorder: () => undefined, - fetchAttributeValues: () => undefined, - fetchMoreAttributeValues: fetchMoreProps, - onAttributeSelectBlur: () => undefined, - richTextGetters: { - getDefaultValue: () => undefined, - getHandleChange: () => () => undefined, - getMountEditor: () => () => undefined, - getShouldMount: () => true, - }, -}; - -storiesOf("Attributes / Attributes", module) - .addDecorator(Decorator) - .addDecorator(PaginatorContextDecorator) - .add("default", () => ) - .add("selected", () => ( - - )) - .add("disabled", () => ); diff --git a/src/components/BulkAttributeUnassignDialog/BulkAttributeUnassignDialog.stories.tsx b/src/components/BulkAttributeUnassignDialog/BulkAttributeUnassignDialog.stories.tsx deleted file mode 100644 index 7b1f5bad7..000000000 --- a/src/components/BulkAttributeUnassignDialog/BulkAttributeUnassignDialog.stories.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import BulkAttributeUnassignDialog, { - BulkAttributeUnassignDialogProps, -} from "@saleor/components/BulkAttributeUnassignDialog"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import Decorator from "../../storybook/Decorator"; - -const props: BulkAttributeUnassignDialogProps = { - attributeQuantity: 4, - confirmButtonState: "default", - itemTypeName: "Shoes", - onClose: () => undefined, - onConfirm: () => undefined, - open: true, - title: "Unassign Attribute from Shoes", -}; - -storiesOf("Generics / Unassign multiple attributes", module) - .addDecorator(Decorator) - .add("default", () => ); diff --git a/src/components/ChannelsAvailabilityCard/ChannelsAvailabilityCard.stories.tsx b/src/components/ChannelsAvailabilityCard/ChannelsAvailabilityCard.stories.tsx deleted file mode 100644 index ae9a115f0..000000000 --- a/src/components/ChannelsAvailabilityCard/ChannelsAvailabilityCard.stories.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import { createChannelsDataFromProduct } from "@saleor/channels/utils"; -import { PermissionEnum, UserFragment } from "@saleor/graphql"; -import { product } from "@saleor/products/fixtures"; -import Decorator from "@saleor/storybook/Decorator"; -import UserDecorator from "@saleor/storybook/UserDecorator"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import ChannelsAvailabilityCard, { - ChannelsAvailabilityCardProps, -} from "./ChannelsAvailabilityCard"; - -const user: UserFragment = { - __typename: "User", - avatar: null, - email: "email@example.com", - firstName: "User", - id: "123", - isStaff: true, - lastName: "User", - userPermissions: [ - { - __typename: "UserPermission", - code: PermissionEnum.MANAGE_CHANNELS, - name: "Manage Channels", - }, - ], -}; - -const productChannels = createChannelsDataFromProduct(product("")); - -const props: ChannelsAvailabilityCardProps = { - allChannelsCount: 4, - managePermissions: [PermissionEnum.MANAGE_CHANNELS], - channelsList: productChannels.map(channel => ({ - id: channel.id, - name: channel.name, - })), - errors: [], - onChange: () => undefined, - openModal: () => undefined, -}; - -storiesOf("Generics / Channels availability card", module) - .addDecorator(Decorator) - .addDecorator(UserDecorator(user)) - .add("default", () => ) - .add("with onChange", () => ( - - )); diff --git a/src/components/ChannelsAvailabilityDialog/ChannelsAvailabilityDialog.stories.tsx b/src/components/ChannelsAvailabilityDialog/ChannelsAvailabilityDialog.stories.tsx deleted file mode 100644 index 815a7495d..000000000 --- a/src/components/ChannelsAvailabilityDialog/ChannelsAvailabilityDialog.stories.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { channelsList } from "@saleor/channels/fixtures"; -import { createChannelsData } from "@saleor/channels/utils"; -import Decorator from "@saleor/storybook/Decorator"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import ChannelsAvailabilityDialog, { - ChannelsAvailabilityDialogProps, -} from "./ChannelsAvailabilityDialog"; - -const props: ChannelsAvailabilityDialogProps = { - channels: createChannelsData(channelsList), - confirmButtonState: "default", - disabled: false, - isSelected: () => undefined, - onChange: () => undefined, - onClose: () => undefined, - onConfirm: () => undefined, - open: true, - title: "Channels", - toggleAll: () => undefined, -}; - -storiesOf("Generics / ChannelsAvailabilityDialog", module) - .addDecorator(Decorator) - .add("default", () => ) - .add("with text", () => ( - - )) - .add("disabled", () => ( - - )); diff --git a/src/components/ChannelsAvailabilityDropdown/ChannelsAvailabilityDropdown.stories.tsx b/src/components/ChannelsAvailabilityDropdown/ChannelsAvailabilityDropdown.stories.tsx deleted file mode 100644 index b35ef1bb3..000000000 --- a/src/components/ChannelsAvailabilityDropdown/ChannelsAvailabilityDropdown.stories.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { productChannels } from "@saleor/channels/fixtures"; -import Decorator from "@saleor/storybook/Decorator"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import ChannelsAvailabilityDropdown, { - ChannelsAvailabilityDropdownProps, -} from "./ChannelsAvailabilityDropdown"; - -const props: ChannelsAvailabilityDropdownProps = { - channels: productChannels, -}; - -storiesOf("Generics / ChannelsAvailabilityDropdown", module) - .addDecorator(Decorator) - .add("default", () => ); diff --git a/src/components/Chip/Chip.stories.tsx b/src/components/Chip/Chip.stories.tsx deleted file mode 100644 index 626771704..000000000 --- a/src/components/Chip/Chip.stories.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import Chip, { ChipProps } from "@saleor/components/Chip"; -import CardDecorator from "@saleor/storybook/CardDecorator"; -import Decorator from "@saleor/storybook/Decorator"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -const props: ChipProps = { - label: "Lorem Ipsum", -}; - -storiesOf("Generics / Chip", module) - .addDecorator(CardDecorator) - .addDecorator(Decorator) - .add("default", () => ) - .add("with x", () => undefined} />); diff --git a/src/components/ColorPicker/ColorPicker.stories.tsx b/src/components/ColorPicker/ColorPicker.stories.tsx deleted file mode 100644 index 83b7b111c..000000000 --- a/src/components/ColorPicker/ColorPicker.stories.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import CentralPlacementDecorator from "@saleor/storybook/CentralPlacementDecorator"; -import Decorator from "@saleor/storybook/Decorator"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import { ColorPicker, ColorPickerProps } from "./ColorPicker"; - -const props: ColorPickerProps = { - data: {}, - setError: () => null, - errors: {}, - clearErrors: () => null, - onColorChange: () => null, -}; - -storiesOf("Generics / ColorPicker", module) - .addDecorator(Decorator) - .addDecorator(CentralPlacementDecorator) - .add("default", () => ); diff --git a/src/components/Datagrid/Datagrid.stories.tsx b/src/components/Datagrid/Datagrid.stories.tsx deleted file mode 100644 index 0ed503ee9..000000000 --- a/src/components/Datagrid/Datagrid.stories.tsx +++ /dev/null @@ -1,151 +0,0 @@ -import { GridCell, Item } from "@glideapps/glide-data-grid"; -import { Button } from "@saleor/macaw-ui"; -import Decorator from "@saleor/storybook/Decorator"; -import { storiesOf } from "@storybook/react"; -import { score } from "fuzzaldrin"; -import sortBy from "lodash/sortBy"; -import throttle from "lodash/throttle"; -import React from "react"; - -import { - booleanCell, - dropdownCell, - moneyCell, - numberCell, - textCell, -} from "./cells"; -import Datagrid, { GetCellContentOpts } from "./Datagrid"; -import { DropdownChoice } from "./DropdownCell"; -import { initialData } from "./fixtures"; -import { numberCellEmptyValue } from "./NumberCell"; -import { - DatagridChangeStateContext, - useDatagridChangeState, -} from "./useDatagridChange"; - -const availableColumns = [ - { title: "ID", id: "uuid", width: 300 }, - { title: "Loaned", id: "loan-active", width: 70 }, - { title: "Loaned Amount", id: "loan", width: 200 }, - { title: "Name", id: "name", width: 200 }, - { title: "Job", id: "job", width: 200 }, - { title: "Balance", id: "balance", width: 200 }, - { title: "Eye color", id: "eyeColor", width: 200 }, - { title: "Age", id: "age", width: 80 }, -] as const; - -const jobChoices = [ - { label: "QA", value: "qa" }, - { label: "Engineer", value: "eng" }, - { label: "Designer", value: "designer" }, - { label: "Director", value: "director" }, -]; - -const getJobChoices = throttle( - (text: string) => - new Promise(resolve => - setTimeout(() => { - resolve( - sortBy(jobChoices, choice => -score(choice.label, text)).slice(0, 2), - ); - }, 500), - ), - 500, -); - -const DefaultStory: React.FC<{ error?: boolean }> = ({ error }) => { - const changeProps = useDatagridChangeState(); - const getCellContent = React.useCallback( - ( - [column, row]: Item, - { changes, getChangeIndex, added, removed }: GetCellContentOpts, - ): GridCell => { - const columnId = availableColumns[column].id; - const change = changes.current[getChangeIndex(columnId, row)]?.data; - const dataRow = added.includes(row) - ? undefined - : initialData[row + removed.filter(r => r <= row).length]; - - if (columnId === "loan-active") { - return booleanCell(change ?? dataRow?.loan.active ?? null); - } - - if (columnId === "loan") { - return moneyCell( - change?.value ?? dataRow?.loan.amount ?? null, - dataRow?.loan.currency ?? "USD", - ); - } - - if (columnId === "balance") { - return moneyCell( - change?.value ?? dataRow?.balance.amount ?? null, - dataRow?.balance.currency ?? "USD", - ); - } - - if (columnId === "job") { - return dropdownCell(change?.value ?? dataRow?.job, { - update: getJobChoices, - }); - } - - if (columnId === "age") { - return numberCell( - change?.value ?? dataRow?.age ?? numberCellEmptyValue, - ); - } - - const data = change ?? (dataRow ? dataRow[columnId] : ""); - return textCell(data); - }, - [], - ); - - const getCellError = React.useCallback(([column, row]: Item): boolean => { - if (!error) { - return false; - } - const columnId = availableColumns[column].id; - - return row === 3 && columnId === "uuid"; - }, []); - - return ( - -
- [ - { - label: "Do something", - onSelect: () => undefined, - }, - ]} - selectionActions={selection => ( - - )} - rows={initialData.length} - title="Datagrid" - /> -
- - ); -}; - -storiesOf("Generics / Datagrid", module) - .addDecorator(Decorator) - .add("default", () => ) - .add("with errors", () => ); diff --git a/src/components/DeletableItem/DeletableItem.stories.tsx b/src/components/DeletableItem/DeletableItem.stories.tsx deleted file mode 100644 index 9761a7921..000000000 --- a/src/components/DeletableItem/DeletableItem.stories.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import CommonDecorator from "@saleor/storybook/Decorator"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import DeletableItem from "./DeletableItem"; - -storiesOf("Generics / Deletable Item", module) - .addDecorator(CommonDecorator) - .add("default", () => undefined} />); diff --git a/src/storybook/stories/components/ErrorPage.tsx b/src/components/ErrorPage/ErrorPage.stories.tsx similarity index 86% rename from src/storybook/stories/components/ErrorPage.tsx rename to src/components/ErrorPage/ErrorPage.stories.tsx index 476305633..17e48980a 100644 --- a/src/storybook/stories/components/ErrorPage.tsx +++ b/src/components/ErrorPage/ErrorPage.stories.tsx @@ -1,13 +1,13 @@ -import ErrorPage, { ErrorPageProps } from "@saleor/components/ErrorPage"; import { AppStateContext, AppStateContextType, } from "@saleor/containers/AppState"; import { initialAppState } from "@saleor/containers/AppState/state"; +import Decorator from "@saleor/storybook/Decorator"; import { storiesOf } from "@storybook/react"; import React from "react"; -import Decorator from "../../Decorator"; +import ErrorPage, { ErrorPageProps } from "./ErrorPage"; const initialAppStateFixture: AppStateContextType = [ initialAppState, @@ -29,7 +29,7 @@ const props: Omit = { onRefresh: () => undefined, }; -storiesOf("Views / Error page", module) +storiesOf("Error / Error page", module) .addDecorator(Decorator) .add("default", () => ( diff --git a/src/components/FileUploadField/FileUploadField.stories.tsx b/src/components/FileUploadField/FileUploadField.stories.tsx deleted file mode 100644 index 703d81fa7..000000000 --- a/src/components/FileUploadField/FileUploadField.stories.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import CardDecorator from "@saleor/storybook/CardDecorator"; -import Decorator from "@saleor/storybook/Decorator"; -import { storiesOf } from "@storybook/react"; -import React, { useState } from "react"; - -import FileUploadField, { FileUploadFieldProps } from "./FileUploadField"; -import * as fixtures from "./fixtures"; - -const props: FileUploadFieldProps = { - disabled: false, - file: { label: undefined, value: undefined }, - inputProps: { - name: "country", - placeholder: "Select country", - }, - loading: false, - onFileDelete: () => undefined, - onFileUpload: () => undefined, -}; - -const InteractiveStory: React.FC = () => { - const [file, setFile] = useState(); - - return ( - setFile(file)} - onFileDelete={() => setFile(null)} - /> - ); -}; - -storiesOf("Generics / File upload field", module) - .addDecorator(CardDecorator) - .addDecorator(Decorator) - .add("default", () => ) - .add("with ready to upload file", () => ( - - )) - .add("with uploaded file", () => ( - - )) - .add("with error", () => ( - - )) - .add("interactive", () => ); diff --git a/src/components/LinkChoice/LinkChoice.stories.tsx b/src/components/LinkChoice/LinkChoice.stories.tsx deleted file mode 100644 index 7d4dc0a00..000000000 --- a/src/components/LinkChoice/LinkChoice.stories.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { countries } from "@saleor/fixtures"; -import CardDecorator from "@saleor/storybook/CardDecorator"; -import Decorator from "@saleor/storybook/Decorator"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import Form from "../Form"; -import LinkChoice, { LinkChoiceProps } from "./LinkChoice"; - -const suggestions = countries.map(c => ({ label: c.name, value: c.code })); - -const props: Omit = { - choices: suggestions.slice(0, 10), - name: "country", -}; - -storiesOf("Generics / Link with choices", module) - .addDecorator(CardDecorator) - .addDecorator(Decorator) - .add("default", () => ( -
- {({ change, data }) => ( - - )} - - )); diff --git a/src/components/Metadata/Metadata.stories.tsx b/src/components/Metadata/Metadata.stories.tsx deleted file mode 100644 index f60c6ac6c..000000000 --- a/src/components/Metadata/Metadata.stories.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import useForm from "@saleor/hooks/useForm"; -import Decorator from "@saleor/storybook/Decorator"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import { props } from "./fixtures"; -import Metadata from "./Metadata"; - -const InteractiveStory: React.FC = () => { - const { change, data } = useForm(props.data, () => undefined); - - return ; -}; - -storiesOf("Generics / Metadata", module) - .addDecorator(Decorator) - .add("default", () => ) - .add("loading", () => ) - .add("interactive", () => ); diff --git a/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.stories.tsx b/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.stories.tsx deleted file mode 100644 index be18a95af..000000000 --- a/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.stories.tsx +++ /dev/null @@ -1,88 +0,0 @@ -import { countries } from "@saleor/fixtures"; -import useMultiAutocomplete from "@saleor/hooks/useMultiAutocomplete"; -import CardDecorator from "@saleor/storybook/CardDecorator"; -import Decorator from "@saleor/storybook/Decorator"; -import { ChoiceProvider } from "@saleor/storybook/mock"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import MultiAutocompleteSelectField, { - MultiAutocompleteSelectFieldProps, -} from "./MultiAutocompleteSelectField"; -import MultiAutocompleteSelectFieldContent, { - MultiAutocompleteSelectFieldContentProps, -} from "./MultiAutocompleteSelectFieldContent"; - -const suggestions = countries.map(c => ({ label: c.name, value: c.code })); - -const props: MultiAutocompleteSelectFieldProps = { - choices: undefined, - displayValues: [], - label: "Country", - loading: false, - name: "country", - onChange: () => undefined, - placeholder: "Select country", - value: undefined, -}; - -const Story: React.FC> = ({ enableLoadMore, ...rest }) => { - const { change, data: countries } = useMultiAutocomplete([suggestions[0]]); - - return ( - - {({ choices, fetchChoices, onFetchMore, hasMore, loading }) => ( - country.value) - .join(", ")}`} - onChange={event => change(event, choices)} - value={countries.map(country => country.value)} - loading={loading} - hasMore={enableLoadMore ? hasMore : false} - onFetchMore={enableLoadMore ? onFetchMore : undefined} - {...rest} - /> - )} - - ); -}; - -const contentProps: MultiAutocompleteSelectFieldContentProps = { - choices: suggestions.slice(0, 10), - displayCustomValue: false, - displayValues: [suggestions[0]], - getItemProps: () => undefined, - hasMore: false, - highlightedIndex: 0, - inputValue: suggestions[0].label, - loading: false, - onFetchMore: () => undefined, -}; - -storiesOf("Generics / Multiple select with autocomplete", module) - .addDecorator(CardDecorator) - .addDecorator(Decorator) - .add("default", () => ( - - )) - .add("can load more", () => ( - - )) - .add("no data", () => ( - - )) - .add("interactive", () => ) - .add("interactive with custom option", () => ( - - )) - .add("interactive with load more", () => ) - .add("interactive with error", () => ); diff --git a/src/components/NavigatorButton/NavigatorButton.stories.tsx b/src/components/NavigatorButton/NavigatorButton.stories.tsx deleted file mode 100644 index 95e7f0881..000000000 --- a/src/components/NavigatorButton/NavigatorButton.stories.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import CardDecorator from "@saleor/storybook/CardDecorator"; -import Decorator from "@saleor/storybook/Decorator"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import NavigatorButton from "./NavigatorButton"; - -storiesOf("Generics / NavigatorButton", module) - .addDecorator(Decorator) - .addDecorator(CardDecorator) - .add("mac", () => ) - .add("other", () => ); diff --git a/src/storybook/stories/components/NotFoundPage.tsx b/src/components/NotFoundPage/NotFoundPage.stories.tsx similarity index 52% rename from src/storybook/stories/components/NotFoundPage.tsx rename to src/components/NotFoundPage/NotFoundPage.stories.tsx index 8109952e5..7bc94b549 100644 --- a/src/storybook/stories/components/NotFoundPage.tsx +++ b/src/components/NotFoundPage/NotFoundPage.stories.tsx @@ -1,9 +1,9 @@ -import NotFoundPage from "@saleor/components/NotFoundPage"; +import Decorator from "@saleor/storybook/Decorator"; import { storiesOf } from "@storybook/react"; import React from "react"; -import Decorator from "../../Decorator"; +import NotFoundPage from "./NotFoundPage"; -storiesOf("Views / Not found error page", module) +storiesOf("Error / Not found", module) .addDecorator(Decorator) .add("default", () => undefined} />); diff --git a/src/components/PreviewPill/PreviewPill.stories.tsx b/src/components/PreviewPill/PreviewPill.stories.tsx deleted file mode 100644 index f8aee682d..000000000 --- a/src/components/PreviewPill/PreviewPill.stories.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import Decorator from "@saleor/storybook/Decorator"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import PreviewPill from "./PreviewPill"; - -storiesOf("Component / Preview Pill", module) - .addDecorator(Decorator) - .add("default", () => ); diff --git a/src/components/RichTextEditor/RichTextEditor.stories.tsx b/src/components/RichTextEditor/RichTextEditor.stories.tsx deleted file mode 100644 index de73cf477..000000000 --- a/src/components/RichTextEditor/RichTextEditor.stories.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { OutputData } from "@editorjs/editorjs"; -import RichTextEditor from "@saleor/components/RichTextEditor"; -import CardDecorator from "@saleor/storybook/CardDecorator"; -import Decorator from "@saleor/storybook/Decorator"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import * as fixtures from "./fixtures.json"; -import { RichTextEditorProps } from "./RichTextEditor"; -import RichTextEditorContent from "./RichTextEditorContent"; - -export const defaultValue: OutputData = fixtures.richTextEditor; - -const props: RichTextEditorProps = { - defaultValue, - disabled: false, - error: false, - helperText: "Lorem ipsum dolor sit amet, consectetur adipiscing elit", - label: "Content", - name: "content", - editorRef: null, -}; - -storiesOf("Generics / Rich text editor", module) - .addDecorator(CardDecorator) - .addDecorator(Decorator) - .add("default", () => ) - .add("disabled", () => ) - .add("error", () => ) - .add("static", () => ( - - )); diff --git a/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.stories.tsx b/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.stories.tsx deleted file mode 100644 index 35c32690e..000000000 --- a/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.stories.tsx +++ /dev/null @@ -1,125 +0,0 @@ -import Form from "@saleor/components/Form"; -import { countries } from "@saleor/fixtures"; -import CardDecorator from "@saleor/storybook/CardDecorator"; -import Decorator from "@saleor/storybook/Decorator"; -import { ChoiceProvider } from "@saleor/storybook/mock"; -import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import SingleAutocompleteSelectField, { - SingleAutocompleteSelectFieldProps, -} from "./SingleAutocompleteSelectField"; -import SingleAutocompleteSelectFieldContent, { - SingleAutocompleteSelectFieldContentProps, -} from "./SingleAutocompleteSelectFieldContent"; - -const suggestions = countries.map(c => ({ label: c.name, value: c.code })); - -const props: SingleAutocompleteSelectFieldProps = { - choices: undefined, - displayValue: undefined, - label: "Country", - loading: false, - name: "country", - onChange: () => undefined, - placeholder: "Select country", - value: suggestions[0].value, -}; - -const Story: React.FC> = ({ - allowCustomValues, - emptyOption, - enableLoadMore, - nakedInput, - disabled, -}) => { - const [displayValue, setDisplayValue] = React.useState(suggestions[0].label); - - return ( -
- {({ change, data }) => ( - - {({ choices, fetchChoices, onFetchMore, hasMore, loading }) => { - const handleSelect = createSingleAutocompleteSelectHandler( - change, - setDisplayValue, - choices, - ); - - return ( - - ); - }} - - )} -
- ); -}; - -const contentProps: SingleAutocompleteSelectFieldContentProps = { - add: undefined, - choices: suggestions.slice(0, 10), - displayCustomValue: false, - emptyOption: false, - getItemProps: () => undefined, - hasMore: false, - highlightedIndex: 0, - inputValue: suggestions[0].label, - isCustomValueSelected: false, - loading: false, - onFetchMore: () => undefined, - selectedItem: suggestions[0].value, -}; - -storiesOf("Generics / Select with autocomplete", module) - .addDecorator(CardDecorator) - .addDecorator(Decorator) - .add("default", () => ( - - )) - .add("with add", () => ( - undefined, - }} - /> - )) - .add("can load more", () => ( - - )) - .add("no data", () => ( - - )) - .add("naked", () => ) - .add("naked and disabled", () => ) - .add("interactive", () => ) - .add("interactive with custom option", () => ( - - )) - .add("interactive with empty option", () => ) - .add("interactive with load more", () => ) - .add("disabled", () => ( - - )); diff --git a/src/components/SortableChip/SortableChip.stories.tsx b/src/components/SortableChip/SortableChip.stories.tsx deleted file mode 100644 index 97d6f9bd1..000000000 --- a/src/components/SortableChip/SortableChip.stories.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import SortableChip, { - SortableChipProps, -} from "@saleor/components/SortableChip"; -import CardDecorator from "@saleor/storybook/CardDecorator"; -import Decorator from "@saleor/storybook/Decorator"; -import { storiesOf } from "@storybook/react"; -import React from "react"; -import { SortableContainer } from "react-sortable-hoc"; - -const Container = SortableContainer(props => props.children); - -const props: SortableChipProps = { - index: 0, - label: "Lorem Ipsum", -}; - -storiesOf("Generics / Sortable chip", module) - .addDecorator(CardDecorator) - .addDecorator(Decorator) - .add("default", () => ( - - - - )) - .add("with x", () => ( - - undefined} /> - - )); diff --git a/src/components/SortableChipsField/SortableChipsField.stories.tsx b/src/components/SortableChipsField/SortableChipsField.stories.tsx deleted file mode 100644 index 720581362..000000000 --- a/src/components/SortableChipsField/SortableChipsField.stories.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import CardDecorator from "@saleor/storybook/CardDecorator"; -import Decorator from "@saleor/storybook/Decorator"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import SortableChipsField, { - SortableChipsFieldProps, -} from "./SortableChipsField"; - -const props: SortableChipsFieldProps = { - onValueDelete: () => undefined, - onValueReorder: () => undefined, - values: [ - { label: "Item 1", value: "item-1" }, - { label: "Item 2", value: "item-2" }, - { label: "Item 3", value: "item-3" }, - { label: "Item 4", value: "item-4" }, - { label: "Item 5", value: "item-5" }, - { label: "Item 6", value: "item-6" }, - ], -}; - -storiesOf("Generics / Sortable chips field", module) - .addDecorator(CardDecorator) - .addDecorator(Decorator) - .add("default", () => ) - .add("loading", () => ) - .add("with error", () => ( - - )); diff --git a/src/components/TableCellHeader/TableCellHeader.stories.tsx b/src/components/TableCellHeader/TableCellHeader.stories.tsx deleted file mode 100644 index 66cabc945..000000000 --- a/src/components/TableCellHeader/TableCellHeader.stories.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import { Card, TableBody, TableCell, TableHead } from "@material-ui/core"; -import ResponsiveTable from "@saleor/components/ResponsiveTable"; -import TableRowLink from "@saleor/components/TableRowLink"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import Decorator from "../../storybook/Decorator"; -import TableCellHeader, { - TableCellHeaderArrowDirection, -} from "./TableCellHeader"; - -type Field = "name" | "type"; -interface StoryProps { - direction: TableCellHeaderArrowDirection; - field?: Field; - onHeaderClick?: (field: Field) => void; -} - -const Story: React.FC = ({ - direction, - field = "name", - onHeaderClick = () => undefined, -}) => ( - - - - - onHeaderClick("name")} - > - Name - - onHeaderClick("type")} - > - Type - - - - - - Apple Juice - Juice - - - - -); -const InteractiveStory: React.FC = () => { - const [direction, setDirection] = React.useState< - TableCellHeaderArrowDirection - >("asc"); - const [field, setField] = React.useState("name"); - - const handleHeaderClick = (selectedField: Field) => { - if (field === selectedField) { - setDirection(direction === "asc" ? "desc" : "asc"); - } else { - setField(selectedField); - setDirection("asc"); - } - }; - - return ( - - ); -}; - -storiesOf("Generics / Table header", module) - .addDecorator(Decorator) - .add("ascending", () => ) - .add("descending", () => ) - .add("interactive", () => ); diff --git a/src/components/TypeDeleteWarningDialog/TypeDeleteWarningDialog.stories.tsx b/src/components/TypeDeleteWarningDialog/TypeDeleteWarningDialog.stories.tsx deleted file mode 100644 index c073fc418..000000000 --- a/src/components/TypeDeleteWarningDialog/TypeDeleteWarningDialog.stories.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import CentralPlacementDecorator from "@saleor/storybook/CentralPlacementDecorator"; -import CommonDecorator from "@saleor/storybook/Decorator"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import * as messages from "../../pageTypes/hooks/usePageTypeDelete/messages"; -import TypeDeleteWarningDialog, { - TypeBaseData, - TypeDeleteWarningDialogProps, -} from "./TypeDeleteWarningDialog"; - -const props: TypeDeleteWarningDialogProps = { - ...messages, - isOpen: true, - onClose: () => undefined, - onDelete: () => undefined, - typesData: [{ id: "id-1", name: "Interesting Pages" }], - isLoading: false, - assignedItemsCount: 4, - typesToDelete: ["id-1"], - viewAssignedItemsUrl: "some-url", - deleteButtonState: "default", -}; - -storiesOf("TypeDeleteWarningDialog.stories", module) - .addDecorator(CommonDecorator) - .addDecorator(CentralPlacementDecorator) - .add("loading", () => ) - .add("single type no assigned items", () => ( - - )) - .add("single type some assigned items", () => ( - - )) - .add("multiple type no assigned items", () => ( - - )) - .add("multiple types some assigned items", () => ( - - )); diff --git a/src/storybook/stories/configuration/ConfigurationPage.tsx b/src/configuration/ConfigurationPage.stories.tsx similarity index 91% rename from src/storybook/stories/configuration/ConfigurationPage.tsx rename to src/configuration/ConfigurationPage.stories.tsx index 068860199..0a02cdcff 100644 --- a/src/storybook/stories/configuration/ConfigurationPage.tsx +++ b/src/configuration/ConfigurationPage.stories.tsx @@ -1,5 +1,4 @@ import { createConfigurationMenu } from "@saleor/configuration"; -import ConfigurationPage from "@saleor/configuration/ConfigurationPage"; import { UserFragment } from "@saleor/graphql"; import { staffMember } from "@saleor/staff/fixtures"; import Decorator from "@saleor/storybook/Decorator"; @@ -7,6 +6,8 @@ import { storiesOf } from "@storybook/react"; import React from "react"; import { useIntl } from "react-intl"; +import ConfigurationPage from "./ConfigurationPage"; + const user = { __typename: staffMember.__typename, avatar: { @@ -39,7 +40,7 @@ const Story: React.FC<{ user: UserFragment }> = ({ user }) => { ); }; -storiesOf("Views / Configuration", module) +storiesOf("Configuration", module) .addDecorator(Decorator) .add("default", () => ) .add("partial access", () => ( diff --git a/src/custom-apps/components/TokenDeleteDialog/TokenDeleteDialog.stories.tsx b/src/custom-apps/components/TokenDeleteDialog/TokenDeleteDialog.stories.tsx deleted file mode 100644 index b9d7bc963..000000000 --- a/src/custom-apps/components/TokenDeleteDialog/TokenDeleteDialog.stories.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import Decorator from "@saleor/storybook/Decorator"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import TokenDeleteDialog, { TokenDeleteDialogProps } from "./TokenDeleteDialog"; - -const props: TokenDeleteDialogProps = { - confirmButtonState: "default", - name: "Slack", - onClose: () => undefined, - onConfirm: () => undefined, - open: true, -}; - -storiesOf("Views / Apps / Custom app details / Token delete", module) - .addDecorator(Decorator) - .add("default", () => ); diff --git a/src/custom-apps/components/WebhookDeleteDialog/WebhookDeleteDialog.stories.tsx b/src/custom-apps/components/WebhookDeleteDialog/WebhookDeleteDialog.stories.tsx deleted file mode 100644 index af50089c3..000000000 --- a/src/custom-apps/components/WebhookDeleteDialog/WebhookDeleteDialog.stories.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import Decorator from "@saleor/storybook/Decorator"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import WebhookDeleteDialog, { - WebhookDeleteDialogProps, -} from "./WebhookDeleteDialog"; - -const props: WebhookDeleteDialogProps = { - confirmButtonState: "default", - name: "Magento Importer", - onClose: () => undefined, - onConfirm: () => undefined, - open: true, -}; - -storiesOf("Views / Apps / Webhooks / Delete webhook", module) - .addDecorator(Decorator) - .add("default", () => ) - .add("unnamed webhook", () => ( - - )); diff --git a/src/custom-apps/components/WebhookDetailsPage/WebhookDetailsPage.stories.tsx b/src/custom-apps/components/WebhookDetailsPage/WebhookDetailsPage.stories.tsx index 7a75ed7aa..1b88c99dd 100644 --- a/src/custom-apps/components/WebhookDetailsPage/WebhookDetailsPage.stories.tsx +++ b/src/custom-apps/components/WebhookDetailsPage/WebhookDetailsPage.stories.tsx @@ -17,7 +17,7 @@ const props: WebhookDetailsPageProps = { saveButtonBarState: "default", webhook, }; -storiesOf("Views / Apps / Webhooks / Webhook details", module) +storiesOf("Apps / Webhooks / Webhook details", module) .addDecorator(Decorator) .add("default", () => ) .add("undefined", () => ) diff --git a/src/storybook/stories/customers/CustomerAddressListPage.tsx b/src/customers/components/CustomerAddressListPage/CustomerAddressListPage.stories.tsx similarity index 68% rename from src/storybook/stories/customers/CustomerAddressListPage.tsx rename to src/customers/components/CustomerAddressListPage/CustomerAddressListPage.stories.tsx index f0f606ac5..986c00d3d 100644 --- a/src/storybook/stories/customers/CustomerAddressListPage.tsx +++ b/src/customers/components/CustomerAddressListPage/CustomerAddressListPage.stories.tsx @@ -1,11 +1,9 @@ +import Decorator from "@saleor/storybook/Decorator"; import { storiesOf } from "@storybook/react"; import React from "react"; -import CustomerAddressListPage, { - CustomerAddressListPageProps, -} from "../../../customers/components/CustomerAddressListPage"; -import { customer } from "../../../customers/fixtures"; -import Decorator from "../../Decorator"; +import { customer } from "../../fixtures"; +import CustomerAddressListPage, { CustomerAddressListPageProps } from "."; const props: CustomerAddressListPageProps = { customer, @@ -16,7 +14,7 @@ const props: CustomerAddressListPageProps = { onSetAsDefault: () => undefined, }; -storiesOf("Views / Customers / Address Book", module) +storiesOf("Customers / Address Book", module) .addDecorator(Decorator) .add("default", () => ) .add("loading", () => ( diff --git a/src/storybook/stories/customers/CustomerCreatePage.tsx b/src/customers/components/CustomerCreatePage/CustomerCreatePage.stories.tsx similarity index 89% rename from src/storybook/stories/customers/CustomerCreatePage.tsx rename to src/customers/components/CustomerCreatePage/CustomerCreatePage.stories.tsx index d2f0b9784..c5d27007a 100644 --- a/src/storybook/stories/customers/CustomerCreatePage.tsx +++ b/src/customers/components/CustomerCreatePage/CustomerCreatePage.stories.tsx @@ -1,12 +1,12 @@ import { AccountErrorCode } from "@saleor/graphql"; +import Decorator from "@saleor/storybook/Decorator"; import { storiesOf } from "@storybook/react"; import React from "react"; import CustomerCreatePage, { CustomerCreatePageFormData, CustomerCreatePageProps, -} from "../../../customers/components/CustomerCreatePage"; -import Decorator from "../../Decorator"; +} from "./CustomerCreatePage"; const props: Omit = { countries: [ @@ -19,7 +19,7 @@ const props: Omit = { saveButtonBar: "default", }; -storiesOf("Views / Customers / Create customer", module) +storiesOf("Customers / Create customer", module) .addDecorator(Decorator) .add("default", () => ) .add("loading", () => ) diff --git a/src/storybook/stories/customers/CustomerDetailsPage.tsx b/src/customers/components/CustomerDetailsPage/CustomerDetailsPage.stories.tsx similarity index 89% rename from src/storybook/stories/customers/CustomerDetailsPage.tsx rename to src/customers/components/CustomerDetailsPage/CustomerDetailsPage.stories.tsx index 594d94d77..53f983989 100644 --- a/src/storybook/stories/customers/CustomerDetailsPage.tsx +++ b/src/customers/components/CustomerDetailsPage/CustomerDetailsPage.stories.tsx @@ -1,13 +1,13 @@ import { AccountErrorCode } from "@saleor/graphql"; +import Decorator from "@saleor/storybook/Decorator"; +import { MockedUserProvider } from "@saleor/storybook/MockedUserProvider"; import { storiesOf } from "@storybook/react"; import React from "react"; +import { customer } from "../../fixtures"; import CustomerDetailsPageComponent, { CustomerDetailsPageProps, -} from "../../../customers/components/CustomerDetailsPage"; -import { customer } from "../../../customers/fixtures"; -import Decorator from "../../Decorator"; -import { MockedUserProvider } from "./MockedUserProvider"; +} from "./CustomerDetailsPage"; const props: Omit = { customerId: "123", @@ -32,7 +32,7 @@ const CustomerDetailsPage = props => ( ); -storiesOf("Views / Customers / Customer details", module) +storiesOf("Customers / Customer details", module) .addDecorator(Decorator) .add("default", () => ) .add("loading", () => ( diff --git a/src/storybook/stories/customers/CustomerListPage.tsx b/src/customers/components/CustomerListPage/CustomerListPage.stories.tsx similarity index 78% rename from src/storybook/stories/customers/CustomerListPage.tsx rename to src/customers/components/CustomerListPage/CustomerListPage.stories.tsx index 0d9ace7e8..956474de4 100644 --- a/src/storybook/stories/customers/CustomerListPage.tsx +++ b/src/customers/components/CustomerListPage/CustomerListPage.stories.tsx @@ -1,12 +1,3 @@ -import { CustomerListUrlSortField } from "@saleor/customers/urls"; -import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import CustomerListPageComponent, { - CustomerListPageProps, -} from "../../../customers/components/CustomerListPage"; -import { customerList } from "../../../customers/fixtures"; import { filterPageProps, listActionsProps, @@ -14,9 +5,18 @@ import { searchPageProps, sortPageProps, tabPageProps, -} from "../../../fixtures"; -import Decorator from "../../Decorator"; -import { MockedUserProvider } from "./MockedUserProvider"; +} from "@saleor/fixtures"; +import Decorator from "@saleor/storybook/Decorator"; +import { MockedUserProvider } from "@saleor/storybook/MockedUserProvider"; +import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator"; +import { storiesOf } from "@storybook/react"; +import React from "react"; + +import { customerList } from "../../fixtures"; +import { CustomerListUrlSortField } from "../../urls"; +import CustomerListPageComponent, { + CustomerListPageProps, +} from "./CustomerListPage"; const props: CustomerListPageProps = { ...filterPageProps, @@ -55,7 +55,7 @@ const CustomerListPage = props => ( ); -storiesOf("Views / Customers / Customer list", module) +storiesOf("Customers / Customer list", module) .addDecorator(Decorator) .addDecorator(PaginatorContextDecorator) .add("default", () => ) diff --git a/src/storybook/stories/discounts/SaleCreatePage.tsx b/src/discounts/components/SaleCreatePage/SaleCreatePage.stories.tsx similarity index 84% rename from src/storybook/stories/discounts/SaleCreatePage.tsx rename to src/discounts/components/SaleCreatePage/SaleCreatePage.stories.tsx index e7470386b..c1fff9a6d 100644 --- a/src/storybook/stories/discounts/SaleCreatePage.tsx +++ b/src/discounts/components/SaleCreatePage/SaleCreatePage.stories.tsx @@ -1,13 +1,11 @@ import { channelsList } from "@saleor/channels/fixtures"; import { createSaleChannels } from "@saleor/channels/utils"; import { DiscountErrorCode } from "@saleor/graphql"; +import Decorator from "@saleor/storybook/Decorator"; import { storiesOf } from "@storybook/react"; import React from "react"; -import SaleCreatePage, { - SaleCreatePageProps, -} from "../../../discounts/components/SaleCreatePage"; -import Decorator from "../../Decorator"; +import SaleCreatePage, { SaleCreatePageProps } from "./SaleCreatePage"; const channels = createSaleChannels(channelsList); @@ -23,7 +21,7 @@ const props: SaleCreatePageProps = { saveButtonBarState: "default", }; -storiesOf("Views / Discounts / Sale create", module) +storiesOf("Discounts / Sale create", module) .addDecorator(Decorator) .add("default", () => ) .add("loading", () => ) diff --git a/src/storybook/stories/discounts/SaleDetailsPage.tsx b/src/discounts/components/SaleDetailsPage/SaleDetailsPage.stories.tsx similarity index 90% rename from src/storybook/stories/discounts/SaleDetailsPage.tsx rename to src/discounts/components/SaleDetailsPage/SaleDetailsPage.stories.tsx index 6037f93e9..18913e3f0 100644 --- a/src/storybook/stories/discounts/SaleDetailsPage.tsx +++ b/src/discounts/components/SaleDetailsPage/SaleDetailsPage.stories.tsx @@ -1,6 +1,9 @@ import { channelsList } from "@saleor/channels/fixtures"; import { createSaleChannels } from "@saleor/channels/utils"; +import { sale } from "@saleor/discounts/fixtures"; +import { listActionsProps } from "@saleor/fixtures"; import { DiscountErrorCode } from "@saleor/graphql"; +import Decorator from "@saleor/storybook/Decorator"; import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator"; import { storiesOf } from "@storybook/react"; import React from "react"; @@ -8,10 +11,7 @@ import React from "react"; import SaleDetailsPage, { SaleDetailsPageProps, SaleDetailsPageTab, -} from "../../../discounts/components/SaleDetailsPage"; -import { sale } from "../../../discounts/fixtures"; -import { listActionsProps } from "../../../fixtures"; -import Decorator from "../../Decorator"; +} from "./SaleDetailsPage"; const channels = createSaleChannels(channelsList); @@ -50,7 +50,7 @@ const props: SaleDetailsPageProps = { ...listActionsProps, }; -storiesOf("Views / Discounts / Sale details", module) +storiesOf(" Discounts / Sale details", module) .addDecorator(Decorator) .addDecorator(PaginatorContextDecorator) .add("default", () => ) diff --git a/src/storybook/stories/discounts/SaleListPage.tsx b/src/discounts/components/SaleListPage/SaleListPage.stories.tsx similarity index 85% rename from src/storybook/stories/discounts/SaleListPage.tsx rename to src/discounts/components/SaleListPage/SaleListPage.stories.tsx index 84ce08221..9ad123541 100644 --- a/src/storybook/stories/discounts/SaleListPage.tsx +++ b/src/discounts/components/SaleListPage/SaleListPage.stories.tsx @@ -1,21 +1,19 @@ +import { saleList } from "@saleor/discounts/fixtures"; import { SaleListUrlSortField } from "@saleor/discounts/urls"; -import { DiscountStatusEnum, DiscountValueTypeEnum } from "@saleor/graphql"; -import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import SaleListPage, { - SaleListPageProps, -} from "../../../discounts/components/SaleListPage"; -import { saleList } from "../../../discounts/fixtures"; import { filterPageProps, listActionsProps, pageListProps, sortPageProps, tabPageProps, -} from "../../../fixtures"; -import Decorator from "../../Decorator"; +} from "@saleor/fixtures"; +import { DiscountStatusEnum, DiscountValueTypeEnum } from "@saleor/graphql"; +import Decorator from "@saleor/storybook/Decorator"; +import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator"; +import { storiesOf } from "@storybook/react"; +import React from "react"; + +import SaleListPage, { SaleListPageProps } from "./SaleListPage"; const props: SaleListPageProps = { ...listActionsProps, @@ -58,7 +56,7 @@ const props: SaleListPageProps = { }, }; -storiesOf("Views / Discounts / Sale list", module) +storiesOf("Discounts / Sale list", module) .addDecorator(Decorator) .addDecorator(PaginatorContextDecorator) .add("default", () => ) diff --git a/src/storybook/stories/discounts/VoucherCreatePage.tsx b/src/discounts/components/VoucherCreatePage/VoucherCreatePage.stories.tsx similarity index 88% rename from src/storybook/stories/discounts/VoucherCreatePage.tsx rename to src/discounts/components/VoucherCreatePage/VoucherCreatePage.stories.tsx index c1456aee1..8ffc057a7 100644 --- a/src/storybook/stories/discounts/VoucherCreatePage.tsx +++ b/src/discounts/components/VoucherCreatePage/VoucherCreatePage.stories.tsx @@ -1,14 +1,14 @@ import { channelsList } from "@saleor/channels/fixtures"; import { createVoucherChannels } from "@saleor/channels/utils"; import { DiscountErrorCode } from "@saleor/graphql"; +import Decorator from "@saleor/storybook/Decorator"; import { storiesOf } from "@storybook/react"; import React from "react"; import VoucherCreatePage, { FormData, VoucherCreatePageProps, -} from "../../../discounts/components/VoucherCreatePage"; -import Decorator from "../../Decorator"; +} from "./VoucherCreatePage"; const channels = createVoucherChannels(channelsList); @@ -23,7 +23,7 @@ const props: VoucherCreatePageProps = { saveButtonBarState: "default", }; -storiesOf("Views / Discounts / Voucher create", module) +storiesOf("Discounts / Voucher create", module) .addDecorator(Decorator) .add("default", () => ) .add("form errors", () => ( diff --git a/src/storybook/stories/discounts/VoucherDetailsPage.tsx b/src/discounts/components/VoucherDetailsPage/VoucherDetailsPage.stories.tsx similarity index 89% rename from src/storybook/stories/discounts/VoucherDetailsPage.tsx rename to src/discounts/components/VoucherDetailsPage/VoucherDetailsPage.stories.tsx index 415ed929b..7bdaedd04 100644 --- a/src/storybook/stories/discounts/VoucherDetailsPage.tsx +++ b/src/discounts/components/VoucherDetailsPage/VoucherDetailsPage.stories.tsx @@ -1,18 +1,18 @@ import { channelsList } from "@saleor/channels/fixtures"; import { createChannelsDataWithDiscountPrice } from "@saleor/channels/utils"; +import { listActionsProps, pageListProps } from "@saleor/fixtures"; import { DiscountErrorCode } from "@saleor/graphql"; +import Decorator from "@saleor/storybook/Decorator"; import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator"; import { storiesOf } from "@storybook/react"; import React from "react"; +import { voucherDetails } from "../../fixtures"; import VoucherDetailsPage, { VoucherDetailsPageFormData, VoucherDetailsPageProps, VoucherDetailsPageTab, -} from "../../../discounts/components/VoucherDetailsPage"; -import { voucherDetails } from "../../../discounts/fixtures"; -import { listActionsProps, pageListProps } from "../../../fixtures"; -import Decorator from "../../Decorator"; +} from "./VoucherDetailsPage"; const channels = createChannelsDataWithDiscountPrice( voucherDetails, @@ -54,7 +54,7 @@ const props: VoucherDetailsPageProps = { voucher: voucherDetails, }; -storiesOf("Views / Discounts / Voucher details", module) +storiesOf("Discounts / Voucher details", module) .addDecorator(Decorator) .addDecorator(PaginatorContextDecorator) .add("default", () => ) diff --git a/src/storybook/stories/discounts/VoucherListPage.tsx b/src/discounts/components/VoucherListPage/VoucherListPage.stories.tsx similarity index 86% rename from src/storybook/stories/discounts/VoucherListPage.tsx rename to src/discounts/components/VoucherListPage/VoucherListPage.stories.tsx index c9ea43534..0efd34faa 100644 --- a/src/storybook/stories/discounts/VoucherListPage.tsx +++ b/src/discounts/components/VoucherListPage/VoucherListPage.stories.tsx @@ -1,13 +1,5 @@ +import { voucherList } from "@saleor/discounts/fixtures"; import { VoucherListUrlSortField } from "@saleor/discounts/urls"; -import { DiscountStatusEnum, VoucherDiscountType } from "@saleor/graphql"; -import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import VoucherListPage, { - VoucherListPageProps, -} from "../../../discounts/components/VoucherListPage"; -import { voucherList } from "../../../discounts/fixtures"; import { filterPageProps, listActionsProps, @@ -15,8 +7,14 @@ import { searchPageProps, sortPageProps, tabPageProps, -} from "../../../fixtures"; -import Decorator from "../../Decorator"; +} from "@saleor/fixtures"; +import { DiscountStatusEnum, VoucherDiscountType } from "@saleor/graphql"; +import Decorator from "@saleor/storybook/Decorator"; +import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator"; +import { storiesOf } from "@storybook/react"; +import React from "react"; + +import VoucherListPage, { VoucherListPageProps } from "./VoucherListPage"; const props: VoucherListPageProps = { ...listActionsProps, @@ -67,7 +65,7 @@ const props: VoucherListPageProps = { vouchers: voucherList, }; -storiesOf("Views / Discounts / Voucher list", module) +storiesOf("Discounts / Voucher list", module) .addDecorator(Decorator) .addDecorator(PaginatorContextDecorator) .add("default", () => ) diff --git a/src/fixtures.ts b/src/fixtures.ts index e67a1b3c6..7d7073359 100644 --- a/src/fixtures.ts +++ b/src/fixtures.ts @@ -510,8 +510,8 @@ export const address = { companyName: "", country: { __typename: "CountryDisplay" as "CountryDisplay", - code: "SE", - country: "Szwecja", + code: "UA", + country: "United Arab Emirates", }, countryArea: "", firstName: "Elizabeth", diff --git a/src/storybook/stories/home/HomePage.tsx b/src/home/components/HomePage/HomePage.stories.tsx similarity index 87% rename from src/storybook/stories/home/HomePage.tsx rename to src/home/components/HomePage/HomePage.stories.tsx index 9b77610e3..1818bd5b1 100644 --- a/src/storybook/stories/home/HomePage.tsx +++ b/src/home/components/HomePage/HomePage.stories.tsx @@ -1,16 +1,14 @@ import placeholderImage from "@assets/images/placeholder60x60.png"; import { adminUserPermissions } from "@saleor/fixtures"; import { PermissionEnum } from "@saleor/graphql"; +import { shop as shopFixture } from "@saleor/home/fixtures"; +import Decorator from "@saleor/storybook/Decorator"; +import { MockedUserProvider } from "@saleor/storybook/MockedUserProvider"; import { mapEdgesToItems } from "@saleor/utils/maps"; import { storiesOf } from "@storybook/react"; import React from "react"; -import HomePageComponent, { - HomePageProps, -} from "../../../home/components/HomePage"; -import { shop as shopFixture } from "../../../home/fixtures"; -import Decorator from "../../Decorator"; -import { MockedUserProvider } from "../customers/MockedUserProvider"; +import HomePageComponent, { HomePageProps } from "./HomePage"; const shop = shopFixture(placeholderImage); @@ -40,7 +38,7 @@ const HomePage = props => { ); }; -storiesOf("Views / HomePage", module) +storiesOf("Home", module) .addDecorator(Decorator) .add("default", () => ) .add("loading", () => ( diff --git a/src/storybook/stories/navigation/MenuDetailsPage.tsx b/src/navigation/components/MenuDetailsPage/MenuDetailsPage.stories.tsx similarity index 78% rename from src/storybook/stories/navigation/MenuDetailsPage.tsx rename to src/navigation/components/MenuDetailsPage/MenuDetailsPage.stories.tsx index 36ac56b56..0a3ef108d 100644 --- a/src/storybook/stories/navigation/MenuDetailsPage.tsx +++ b/src/navigation/components/MenuDetailsPage/MenuDetailsPage.stories.tsx @@ -1,12 +1,10 @@ import { MenuErrorCode } from "@saleor/graphql"; +import { menu } from "@saleor/navigation/fixtures"; +import Decorator from "@saleor/storybook/Decorator"; import { storiesOf } from "@storybook/react"; import React from "react"; -import MenuDetailsPage, { - MenuDetailsPageProps, -} from "../../../navigation/components/MenuDetailsPage"; -import { menu } from "../../../navigation/fixtures"; -import Decorator from "../../Decorator"; +import MenuDetailsPage, { MenuDetailsPageProps } from "./MenuDetailsPage"; const props: MenuDetailsPageProps = { disabled: false, @@ -20,7 +18,7 @@ const props: MenuDetailsPageProps = { saveButtonState: "default", }; -storiesOf("Views / Navigation / Menu details", module) +storiesOf("Navigation / Menu details", module) .addDecorator(Decorator) .add("default", () => ) .add("loading", () => ( diff --git a/src/storybook/stories/navigation/MenuListPage.tsx b/src/navigation/components/MenuListPage/MenuListPage.stories.tsx similarity index 74% rename from src/storybook/stories/navigation/MenuListPage.tsx rename to src/navigation/components/MenuListPage/MenuListPage.stories.tsx index 786fcb6c5..ec38abd67 100644 --- a/src/storybook/stories/navigation/MenuListPage.tsx +++ b/src/navigation/components/MenuListPage/MenuListPage.stories.tsx @@ -1,18 +1,16 @@ -import { MenuListUrlSortField } from "@saleor/navigation/urls"; -import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - import { listActionsProps, pageListProps, sortPageProps, -} from "../../../fixtures"; -import MenuListPage, { - MenuListPageProps, -} from "../../../navigation/components/MenuListPage"; -import { menuList } from "../../../navigation/fixtures"; -import Decorator from "../../Decorator"; +} from "@saleor/fixtures"; +import { menuList } from "@saleor/navigation/fixtures"; +import { MenuListUrlSortField } from "@saleor/navigation/urls"; +import Decorator from "@saleor/storybook/Decorator"; +import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator"; +import { storiesOf } from "@storybook/react"; +import React from "react"; + +import MenuListPage, { MenuListPageProps } from "./MenuListPage"; const props: MenuListPageProps = { ...pageListProps.default, @@ -26,7 +24,7 @@ const props: MenuListPageProps = { }, }; -storiesOf("Views / Navigation / Menu list", module) +storiesOf("Navigation / Menu list", module) .addDecorator(Decorator) .addDecorator(PaginatorContextDecorator) .add("default", () => ) diff --git a/src/orders/components/OrderChangeWarehouseDialog/OrderChangeWarehouseDialog.stories.tsx b/src/orders/components/OrderChangeWarehouseDialog/OrderChangeWarehouseDialog.stories.tsx deleted file mode 100644 index 89da17cd8..000000000 --- a/src/orders/components/OrderChangeWarehouseDialog/OrderChangeWarehouseDialog.stories.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import { MockedProvider, MockedResponse } from "@apollo/client/testing"; -import { allPermissions } from "@saleor/hooks/makeQuery"; -import { fulfillOrderLine, warehouseSearch } from "@saleor/orders/fixtures"; -import { searchWarehouses } from "@saleor/searches/useWarehouseSearch"; -import Decorator from "@saleor/storybook/Decorator"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import OrderChangeWarehouseDialog, { OrderChangeWarehouseDialogProps } from "."; - -const props: OrderChangeWarehouseDialogProps = { - open: true, - line: fulfillOrderLine("abc"), - currentWarehouseId: null, - onConfirm: () => null, - onClose: () => null, -}; - -const mocks: MockedResponse[] = [ - { - request: { - query: searchWarehouses, - variables: { - first: 20, - after: null, - query: "", - ...allPermissions, - }, - }, - result: { - data: { search: warehouseSearch }, - }, - }, -]; - -storiesOf( - "Orders / Order details fulfillment warehouse selection modal", - module, -) - .addDecorator(Decorator) - .add("default", () => ( - - - - )); diff --git a/src/orders/components/OrderChannelSectionCard/OrderChannelSectionCard.stories.tsx b/src/orders/components/OrderChannelSectionCard/OrderChannelSectionCard.stories.tsx deleted file mode 100644 index dc3d0cd70..000000000 --- a/src/orders/components/OrderChannelSectionCard/OrderChannelSectionCard.stories.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import CardDecorator from "@saleor/storybook/CardDecorator"; -import Decorator from "@saleor/storybook/Decorator"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import OrderChannelSectionCard, { OrderChannelSectionCardProps } from "."; - -const props: OrderChannelSectionCardProps = { - channel: { - id: "dh87hf34hk8i", - name: "International store", - }, -}; - -storiesOf("Orders / Order details channel section", module) - .addDecorator(CardDecorator) - .addDecorator(Decorator) - .add("default", () => ) - .add("loading", () => ( - - )); diff --git a/src/orders/components/OrderCustomerAddressesEditDialog/OrderCustomerAddressesEditDialog.stories.tsx b/src/orders/components/OrderCustomerAddressesEditDialog/OrderCustomerAddressesEditDialog.stories.tsx deleted file mode 100644 index 5df6705ff..000000000 --- a/src/orders/components/OrderCustomerAddressesEditDialog/OrderCustomerAddressesEditDialog.stories.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import Decorator from "@saleor/storybook/Decorator"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import { countries, order as orderFixture } from "../../fixtures"; -import OrderCustomerAddressesEditDialog, { - OrderCustomerAddressesEditDialogProps, -} from "."; -import { AddressEditDialogVariant } from "./types"; - -const order = orderFixture(""); - -const props: OrderCustomerAddressesEditDialogProps = { - confirmButtonState: "default", - variant: AddressEditDialogVariant.CHANGE_CUSTOMER, - loading: false, - onClose: () => undefined, - onConfirm: () => undefined, - open: true, - errors: undefined, - countries, -}; - -storiesOf("Orders / Changing address in order", module) - .addDecorator(Decorator) - .add("address change when customer is changed", () => ( - - )) - .add("shipping address change", () => ( - - )) - .add("billing address change", () => ( - - )) - .add("no customer addresses", () => ( - - )) - .add("loading", () => ( - - )); diff --git a/src/orders/components/OrderCustomerChangeDialog/OrderCustomerChangeDialog.stories.tsx b/src/orders/components/OrderCustomerChangeDialog/OrderCustomerChangeDialog.stories.tsx deleted file mode 100644 index ccdd762fb..000000000 --- a/src/orders/components/OrderCustomerChangeDialog/OrderCustomerChangeDialog.stories.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import Decorator from "@saleor/storybook/Decorator"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import OrderCustomerChangeDialog, { - OrderCustomerChangeDialogProps, -} from "./OrderCustomerChangeDialog"; - -const props: OrderCustomerChangeDialogProps = { - onClose: () => undefined, - onConfirm: () => undefined, - open: true, -}; - -storiesOf("Orders / OrderCustomerChangeDialog", module) - .addDecorator(Decorator) - .add("default", () => ( - undefined} - onConfirm={() => undefined} - open={true} - /> - )); diff --git a/src/storybook/stories/orders/OrderDetailsPage.tsx b/src/orders/components/OrderDetailsPage/OrderDetailsPage.stories.tsx similarity index 93% rename from src/storybook/stories/orders/OrderDetailsPage.tsx rename to src/orders/components/OrderDetailsPage/OrderDetailsPage.stories.tsx index 3e3d5d42e..50092bb2c 100644 --- a/src/storybook/stories/orders/OrderDetailsPage.tsx +++ b/src/orders/components/OrderDetailsPage/OrderDetailsPage.stories.tsx @@ -4,17 +4,15 @@ import { OrderStatus, PaymentChargeStatusEnum, } from "@saleor/graphql"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import OrderDetailsPage, { - OrderDetailsPageProps, -} from "../../../orders/components/OrderDetailsPage"; import { order as orderFixture, shop as shopFixture, -} from "../../../orders/fixtures"; -import Decorator from "../../Decorator"; +} from "@saleor/orders/fixtures"; +import Decorator from "@saleor/storybook/Decorator"; +import { storiesOf } from "@storybook/react"; +import React from "react"; + +import OrderDetailsPage, { OrderDetailsPageProps } from "./OrderDetailsPage"; const order = orderFixture(placeholderImage); @@ -45,7 +43,7 @@ const props: Omit = { saveButtonBarState: "default", }; -storiesOf("Views / Orders / Order details", module) +storiesOf("Orders / Order details", module) .addDecorator(Decorator) .add("default", () => ) .add("loading", () => ) diff --git a/src/orders/components/OrderDiscountCommonModal/OrderDiscountCommonModal.stories.tsx b/src/orders/components/OrderDiscountCommonModal/OrderDiscountCommonModal.stories.tsx deleted file mode 100644 index 1c1f081ca..000000000 --- a/src/orders/components/OrderDiscountCommonModal/OrderDiscountCommonModal.stories.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import { DiscountValueTypeEnum } from "@saleor/graphql"; -import Decorator from "@saleor/storybook/Decorator"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import OrderDiscountCommonModal, { - OrderDiscountCommonModalProps, -} from "./OrderDiscountCommonModal"; -import { ORDER_DISCOUNT } from "./types"; - -/* eslint-disable-next-line */ -const emptyFunction = () => {}; - -const basicProps: OrderDiscountCommonModalProps = { - anchorRef: React.createRef(), - confirmStatus: "default", - dialogPlacement: "top-start", - existingDiscount: null, - isOpen: true, - maxPrice: { - __typename: "Money", - amount: 15, - currency: "PLN", - }, - modalType: ORDER_DISCOUNT, - onClose: emptyFunction, - onConfirm: emptyFunction, - onRemove: emptyFunction, - removeStatus: "default", -}; - -storiesOf("Orders / Order Discount common modal", module) - .addDecorator(Decorator) - .add("percentage without existing discount", () => ( - - )) - .add("percentage with existing discount", () => ( - - )) - .add("fixed amount with existing discount", () => ( - - )) - .add("fixed amount with loading confirm", () => ( - - )); diff --git a/src/storybook/stories/orders/OrderDraftListPage.tsx b/src/orders/components/OrderDraftListPage/OrderDraftListPage.stories.tsx similarity index 85% rename from src/storybook/stories/orders/OrderDraftListPage.tsx rename to src/orders/components/OrderDraftListPage/OrderDraftListPage.stories.tsx index f7587303e..f39268158 100644 --- a/src/storybook/stories/orders/OrderDraftListPage.tsx +++ b/src/orders/components/OrderDraftListPage/OrderDraftListPage.stories.tsx @@ -1,8 +1,3 @@ -import { OrderDraftListUrlSortField } from "@saleor/orders/urls"; -import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - import { filterPageProps, limits, @@ -12,12 +7,17 @@ import { searchPageProps, sortPageProps, tabPageProps, -} from "../../../fixtures"; +} from "@saleor/fixtures"; +import { OrderDraftListUrlSortField } from "@saleor/orders/urls"; +import Decorator from "@saleor/storybook/Decorator"; +import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator"; +import { storiesOf } from "@storybook/react"; +import React from "react"; + +import { orders } from "../../fixtures"; import OrderDraftListPage, { OrderDraftListPageProps, -} from "../../../orders/components/OrderDraftListPage"; -import { orders } from "../../../orders/fixtures"; -import Decorator from "../../Decorator"; +} from "./OrderDraftListPage"; const props: OrderDraftListPageProps = { ...listActionsProps, @@ -48,7 +48,7 @@ const props: OrderDraftListPageProps = { }, }; -storiesOf("Views / Orders / Draft order list", module) +storiesOf("Orders / Draft order list", module) .addDecorator(Decorator) .addDecorator(PaginatorContextDecorator) .add("default", () => ) diff --git a/src/storybook/stories/orders/OrderDraftPage/OrderDraftPage.tsx b/src/orders/components/OrderDraftPage/OrderDraftPage.stories.tsx similarity index 87% rename from src/storybook/stories/orders/OrderDraftPage/OrderDraftPage.tsx rename to src/orders/components/OrderDraftPage/OrderDraftPage.stories.tsx index 508a42fd2..590425556 100644 --- a/src/storybook/stories/orders/OrderDraftPage/OrderDraftPage.tsx +++ b/src/orders/components/OrderDraftPage/OrderDraftPage.stories.tsx @@ -1,20 +1,18 @@ import placeholderImage from "@assets/images/placeholder60x60.png"; import { fetchMoreProps } from "@saleor/fixtures"; import { OrderErrorCode, OrderErrorFragment } from "@saleor/graphql"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import OrderDraftPageComponent, { - OrderDraftPageProps, -} from "../../../../orders/components/OrderDraftPage"; import { channelUsabilityData, clients, draftOrder, -} from "../../../../orders/fixtures"; -import Decorator from "../../../Decorator"; -import { MockedUserProvider } from "../../customers/MockedUserProvider"; -import { getDiscountsProvidersWrapper } from "./utils"; +} from "@saleor/orders/fixtures"; +import Decorator from "@saleor/storybook/Decorator"; +import { MockedUserProvider } from "@saleor/storybook/MockedUserProvider"; +import { storiesOf } from "@storybook/react"; +import React from "react"; + +import OrderDraftPageComponent, { OrderDraftPageProps } from "./OrderDraftPage"; +import { getDiscountsProvidersWrapper } from "./storybook.utils"; const finalizeErrors: OrderErrorFragment[] = [ { @@ -81,7 +79,7 @@ const OrderDraftPage = props => { ); }; -storiesOf("Views / Orders / Order draft", module) +storiesOf("Orders / Order draft", module) .addDecorator(Decorator) .addDecorator(DiscountsDecorator) .add("default", () => ) diff --git a/src/storybook/stories/orders/OrderDraftPage/utils.tsx b/src/orders/components/OrderDraftPage/storybook.utils.tsx similarity index 100% rename from src/storybook/stories/orders/OrderDraftPage/utils.tsx rename to src/orders/components/OrderDraftPage/storybook.utils.tsx diff --git a/src/orders/components/OrderFulfillPage/OrderFulfillPage.stories.tsx b/src/orders/components/OrderFulfillPage/OrderFulfillPage.stories.tsx index 2561da0f5..2b62507ad 100644 --- a/src/orders/components/OrderFulfillPage/OrderFulfillPage.stories.tsx +++ b/src/orders/components/OrderFulfillPage/OrderFulfillPage.stories.tsx @@ -18,7 +18,7 @@ const props: OrderFulfillPageProps = { closeModal: () => undefined, }; -storiesOf("Views / Orders / Fulfill order", module) +storiesOf("Orders / Fulfill order", module) .addDecorator(Decorator) .add("default", () => ) .add("loading", () => ( diff --git a/src/storybook/stories/orders/OrderListPage.tsx b/src/orders/components/OrderListPage/OrderListPage.stories.tsx similarity index 88% rename from src/storybook/stories/orders/OrderListPage.tsx rename to src/orders/components/OrderListPage/OrderListPage.stories.tsx index 804e4f53f..07a1aaae9 100644 --- a/src/storybook/stories/orders/OrderListPage.tsx +++ b/src/orders/components/OrderListPage/OrderListPage.stories.tsx @@ -1,13 +1,3 @@ -import { OrderStatusFilter, PaymentChargeStatusEnum } from "@saleor/graphql"; -import OrderListPage, { - OrderFilterGiftCard, - OrderListPageProps, -} from "@saleor/orders/components/OrderListPage"; -import { OrderListUrlSortField } from "@saleor/orders/urls"; -import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - import { filterPageProps, limits, @@ -15,9 +5,17 @@ import { listActionsProps, pageListProps, sortPageProps, -} from "../../../fixtures"; -import { orders } from "../../../orders/fixtures"; -import Decorator from "../../Decorator"; +} from "@saleor/fixtures"; +import { OrderStatusFilter, PaymentChargeStatusEnum } from "@saleor/graphql"; +import { orders } from "@saleor/orders/fixtures"; +import { OrderListUrlSortField } from "@saleor/orders/urls"; +import Decorator from "@saleor/storybook/Decorator"; +import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator"; +import { storiesOf } from "@storybook/react"; +import React from "react"; + +import { OrderFilterGiftCard } from "./filters"; +import OrderListPage, { OrderListPageProps } from "./OrderListPage"; const props: OrderListPageProps = { ...listActionsProps, @@ -82,7 +80,7 @@ const props: OrderListPageProps = { }, }; -storiesOf("Views / Orders / Order list", module) +storiesOf("Orders / Order list", module) .addDecorator(Decorator) .addDecorator(PaginatorContextDecorator) .add("default", () => ) diff --git a/src/orders/components/OrderRefundPage/OrderRefundPage.stories.tsx b/src/orders/components/OrderRefundPage/OrderRefundPage.stories.tsx index 96f8b0e96..57ba7cb5f 100644 --- a/src/orders/components/OrderRefundPage/OrderRefundPage.stories.tsx +++ b/src/orders/components/OrderRefundPage/OrderRefundPage.stories.tsx @@ -14,7 +14,7 @@ const props: OrderRefundPageProps = { order: orderToRefund(placeholderImage), }; -storiesOf("Views / Orders / Refund order", module) +storiesOf("Orders / Refund order", module) .addDecorator(Decorator) .add("products", () => ( diff --git a/src/orders/components/OrderSettingsPage/OrderSettingsPage.stories.tsx b/src/orders/components/OrderSettingsPage/OrderSettingsPage.stories.tsx index 41aa2d8b8..ff380df6d 100644 --- a/src/orders/components/OrderSettingsPage/OrderSettingsPage.stories.tsx +++ b/src/orders/components/OrderSettingsPage/OrderSettingsPage.stories.tsx @@ -2,11 +2,11 @@ import { orderSettings as orderSettingsFixture, shopOrderSettings as shopOrderSettingsFixture, } from "@saleor/orders/fixtures"; +import Decorator from "@saleor/storybook/Decorator"; import { storiesOf } from "@storybook/react"; import React from "react"; -import Decorator from "../../../storybook/Decorator"; -import OrderSettings, { OrderSettingsPageProps } from "."; +import OrderSettings, { OrderSettingsPageProps } from "./OrderSettingsPage"; const props: OrderSettingsPageProps = { orderSettings: orderSettingsFixture, @@ -16,7 +16,7 @@ const props: OrderSettingsPageProps = { saveButtonBarState: "default", }; -storiesOf("Views / Orders / Order settings", module) +storiesOf(" Orders / Order settings", module) .addDecorator(Decorator) .add("default", () => ) .add("loading", () => ( diff --git a/src/pageTypes/components/PageTypeCreatePage/PageTypeCreatePage.stories.tsx b/src/pageTypes/components/PageTypeCreatePage/PageTypeCreatePage.stories.tsx index 0379020d9..df53e0307 100644 --- a/src/pageTypes/components/PageTypeCreatePage/PageTypeCreatePage.stories.tsx +++ b/src/pageTypes/components/PageTypeCreatePage/PageTypeCreatePage.stories.tsx @@ -1,9 +1,11 @@ import { PageErrorCode } from "@saleor/graphql"; +import Decorator from "@saleor/storybook/Decorator"; import { storiesOf } from "@storybook/react"; import React from "react"; -import Decorator from "../../../storybook/Decorator"; -import PageTypeCreatePage, { PageTypeCreatePageProps } from "."; +import PageTypeCreatePage, { + PageTypeCreatePageProps, +} from "./PageTypeCreatePage"; const props: Omit = { disabled: false, @@ -12,7 +14,7 @@ const props: Omit = { saveButtonBarState: "default", }; -storiesOf("Views / Page types / Create page type", module) +storiesOf("Page types / Create page type", module) .addDecorator(Decorator) .add("default", () => ) .add("loading", () => ) diff --git a/src/pageTypes/components/PageTypeDetailsPage/PageTypeDetailsPage.stories.tsx b/src/pageTypes/components/PageTypeDetailsPage/PageTypeDetailsPage.stories.tsx index 34d353db8..92155e6fd 100644 --- a/src/pageTypes/components/PageTypeDetailsPage/PageTypeDetailsPage.stories.tsx +++ b/src/pageTypes/components/PageTypeDetailsPage/PageTypeDetailsPage.stories.tsx @@ -1,11 +1,13 @@ import { listActionsProps } from "@saleor/fixtures"; import { PageErrorCode } from "@saleor/graphql"; +import Decorator from "@saleor/storybook/Decorator"; import { storiesOf } from "@storybook/react"; import React from "react"; -import Decorator from "../../../storybook/Decorator"; import { pageType } from "../../fixtures"; -import PageTypeDetailsPage, { PageTypeDetailsPageProps } from "."; +import PageTypeDetailsPage, { + PageTypeDetailsPageProps, +} from "./PageTypeDetailsPage"; const props: Omit = { attributeList: listActionsProps, @@ -21,7 +23,7 @@ const props: Omit = { saveButtonBarState: "default", }; -storiesOf("Views / Page types / Page type details", module) +storiesOf("Page types / Page type details", module) .addDecorator(Decorator) .add("default", () => ) .add("loading", () => ( diff --git a/src/pageTypes/components/PageTypeListPage/PageTypeListPage.stories.tsx b/src/pageTypes/components/PageTypeListPage/PageTypeListPage.stories.tsx index bee90bb12..adf3e669c 100644 --- a/src/pageTypes/components/PageTypeListPage/PageTypeListPage.stories.tsx +++ b/src/pageTypes/components/PageTypeListPage/PageTypeListPage.stories.tsx @@ -1,18 +1,18 @@ -import { PageTypeListUrlSortField } from "@saleor/pageTypes/urls"; -import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - import { listActionsProps, pageListProps, searchPageProps, sortPageProps, tabPageProps, -} from "../../../fixtures"; -import Decorator from "../../../storybook/Decorator"; +} from "@saleor/fixtures"; +import { PageTypeListUrlSortField } from "@saleor/pageTypes/urls"; +import Decorator from "@saleor/storybook/Decorator"; +import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator"; +import { storiesOf } from "@storybook/react"; +import React from "react"; + import { pageTypes } from "../../fixtures"; -import PageTypeListPage, { PageTypeListPageProps } from "."; +import PageTypeListPage, { PageTypeListPageProps } from "./PageTypeListPage"; const props: PageTypeListPageProps = { ...listActionsProps, @@ -27,7 +27,7 @@ const props: PageTypeListPageProps = { pageTypes, }; -storiesOf("Views / Page types / Page types list", module) +storiesOf("Page types / Page types list", module) .addDecorator(Decorator) .addDecorator(PaginatorContextDecorator) .add("default", () => ) diff --git a/src/storybook/stories/pages/PageDetailsPage.tsx b/src/pages/components/PageDetailsPage/PageDetailsPage.stories.tsx similarity index 84% rename from src/storybook/stories/pages/PageDetailsPage.tsx rename to src/pages/components/PageDetailsPage/PageDetailsPage.stories.tsx index a40405cd7..af685a148 100644 --- a/src/storybook/stories/pages/PageDetailsPage.tsx +++ b/src/pages/components/PageDetailsPage/PageDetailsPage.stories.tsx @@ -1,14 +1,12 @@ import { fetchMoreProps } from "@saleor/fixtures"; import { PageErrorCode } from "@saleor/graphql"; import { PageData } from "@saleor/pages/components/PageDetailsPage/form"; +import { page } from "@saleor/pages/fixtures"; +import Decorator from "@saleor/storybook/Decorator"; import { storiesOf } from "@storybook/react"; import React from "react"; -import PageDetailsPage, { - PageDetailsPageProps, -} from "../../../pages/components/PageDetailsPage"; -import { page } from "../../../pages/fixtures"; -import Decorator from "../../Decorator"; +import PageDetailsPage, { PageDetailsPageProps } from "./PageDetailsPage"; const props: PageDetailsPageProps = { errors: [], @@ -27,7 +25,7 @@ const props: PageDetailsPageProps = { fetchMoreAttributeValues: fetchMoreProps, }; -storiesOf("Views / Pages / Page details", module) +storiesOf("Pages / Page details", module) .addDecorator(Decorator) .add("default", () => ) .add("loading", () => ( diff --git a/src/storybook/stories/pages/PageListPage.tsx b/src/pages/components/PageListPage/PageListPage.stories.tsx similarity index 77% rename from src/storybook/stories/pages/PageListPage.tsx rename to src/pages/components/PageListPage/PageListPage.stories.tsx index d2b49bab9..99729a3f0 100644 --- a/src/storybook/stories/pages/PageListPage.tsx +++ b/src/pages/components/PageListPage/PageListPage.stories.tsx @@ -1,18 +1,16 @@ -import { PageListUrlSortField } from "@saleor/pages/urls"; -import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - import { listActionsProps, pageListProps, sortPageProps, -} from "../../../fixtures"; -import PageListPage, { - PageListPageProps, -} from "../../../pages/components/PageListPage"; -import { pageList } from "../../../pages/fixtures"; -import Decorator from "../../Decorator"; +} from "@saleor/fixtures"; +import { pageList } from "@saleor/pages/fixtures"; +import { PageListUrlSortField } from "@saleor/pages/urls"; +import Decorator from "@saleor/storybook/Decorator"; +import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator"; +import { storiesOf } from "@storybook/react"; +import React from "react"; + +import PageListPage, { PageListPageProps } from "./PageListPage"; const props: PageListPageProps = { ...listActionsProps, @@ -32,7 +30,7 @@ const props: PageListPageProps = { }, }; -storiesOf("Views / Pages / Page list", module) +storiesOf("Pages / Page list", module) .addDecorator(Decorator) .addDecorator(PaginatorContextDecorator) .add("default", () => ) diff --git a/src/pages/components/PageTypePickerDialog/PageTypePickerDialog.stories.tsx b/src/pages/components/PageTypePickerDialog/PageTypePickerDialog.stories.tsx deleted file mode 100644 index b8e64d190..000000000 --- a/src/pages/components/PageTypePickerDialog/PageTypePickerDialog.stories.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import Decorator from "@saleor/storybook/Decorator"; -import { mapNodeToChoice } from "@saleor/utils/maps"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import { pageTypesList } from "../../fixtures"; -import PageTypePickerDialog, { - PageTypePickerDialogProps, -} from "./PageTypePickerDialog"; - -const pageTypes = mapNodeToChoice(pageTypesList); - -const props: PageTypePickerDialogProps = { - pageTypes, - confirmButtonState: "default", - fetchPageTypes: () => undefined, - fetchMorePageTypes: { - hasMore: false, - loading: false, - onFetchMore: () => undefined, - }, - onClose: () => undefined, - onConfirm: () => undefined, - open: true, -}; - -storiesOf("Views / Pages / Page type dialog", module) - .addDecorator(Decorator) - .add("default", () => ); diff --git a/src/permissionGroups/components/AssignMembersDialog/AssignMembersDialog.stories.tsx b/src/permissionGroups/components/AssignMembersDialog/AssignMembersDialog.stories.tsx deleted file mode 100644 index abe777ae2..000000000 --- a/src/permissionGroups/components/AssignMembersDialog/AssignMembersDialog.stories.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import AssignMembersDialog, { - AssignMembersDialogProps, -} from "@saleor/permissionGroups/components/AssignMembersDialog"; -import Decorator from "@saleor/storybook/Decorator"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import { users } from "../../fixtures"; - -const props: AssignMembersDialogProps = { - confirmButtonState: "default", - disabled: false, - hasMore: true, - initialSearch: "", - loading: false, - onClose: () => undefined, - onFetchMore: () => undefined, - onSearchChange: () => undefined, - onSubmit: () => undefined, - open: true, - staffMembers: users, -}; - -storiesOf( - "Views / Permission Groups / Permission Group User Assignment", - module, -) - .addDecorator(Decorator) - .add("submitting loading", () => ( - - )) - .add("search loading", () => ( - - )) - .add("default", () => ); diff --git a/src/permissionGroups/components/MembersErrorDialog/MembersErrorDialog.stories.tsx b/src/permissionGroups/components/MembersErrorDialog/MembersErrorDialog.stories.tsx deleted file mode 100644 index 774707608..000000000 --- a/src/permissionGroups/components/MembersErrorDialog/MembersErrorDialog.stories.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import Decorator from "@saleor/storybook/Decorator"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import MembersErrorDialog, { - MembersErrorDialogProps, -} from "./MembersErrorDialog"; - -const props: MembersErrorDialogProps = { - confirmButtonState: "default", - onClose: () => undefined, - onConfirm: () => undefined, - open: true, -}; - -storiesOf( - "Views / Permission Groups / Permission Group Unassign Error Modal", - module, -) - .addDecorator(Decorator) - .add("Unassign member", () => ); diff --git a/src/permissionGroups/components/PermissionGroupCreatePage/PermissionGroupCreatePage.stories.tsx b/src/permissionGroups/components/PermissionGroupCreatePage/PermissionGroupCreatePage.stories.tsx index dd9ee75c4..98266ef9d 100644 --- a/src/permissionGroups/components/PermissionGroupCreatePage/PermissionGroupCreatePage.stories.tsx +++ b/src/permissionGroups/components/PermissionGroupCreatePage/PermissionGroupCreatePage.stories.tsx @@ -1,12 +1,13 @@ import { permissions } from "@saleor/fixtures"; -import PermissionGroupCreatePage, { - PermissionGroupCreatePageProps, -} from "@saleor/permissionGroups/components/PermissionGroupCreatePage"; -import { errorsOfPermissionGroupCreate } from "@saleor/permissionGroups/fixtures"; import Decorator from "@saleor/storybook/Decorator"; import { storiesOf } from "@storybook/react"; import React from "react"; +import { errorsOfPermissionGroupCreate } from "../../fixtures"; +import PermissionGroupCreatePage, { + PermissionGroupCreatePageProps, +} from "./PermissionGroupCreatePage"; + const props: PermissionGroupCreatePageProps = { disabled: false, errors: [], @@ -15,7 +16,7 @@ const props: PermissionGroupCreatePageProps = { saveButtonBarState: undefined, }; -storiesOf("Views / Permission Groups / Permission Group Create", module) +storiesOf("Permission Groups / Permission Group Create", module) .addDecorator(Decorator) .add("default", () => ) .add("loading", () => ( diff --git a/src/permissionGroups/components/PermissionGroupDeleteDialog/PermissionGroupDeleteDialog.stories.tsx b/src/permissionGroups/components/PermissionGroupDeleteDialog/PermissionGroupDeleteDialog.stories.tsx deleted file mode 100644 index 612038bb6..000000000 --- a/src/permissionGroups/components/PermissionGroupDeleteDialog/PermissionGroupDeleteDialog.stories.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import { - PermissionGroupErrorCode, - PermissionGroupErrorFragment, -} from "@saleor/graphql"; -import PermissionGroupDeleteDialog, { - PermissionDeleteDialogProps, -} from "@saleor/permissionGroups/components/PermissionGroupDeleteDialog"; -import Decorator from "@saleor/storybook/Decorator"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -const permissionsError: PermissionGroupErrorFragment = { - __typename: "PermissionGroupError", - code: PermissionGroupErrorCode.OUT_OF_SCOPE_PERMISSION, - field: null, - message: "Permission out of scope", -}; - -const requiredError: PermissionGroupErrorFragment = { - __typename: "PermissionGroupError", - code: PermissionGroupErrorCode.REQUIRED, - field: null, - message: "Permission required", -}; - -const props: PermissionDeleteDialogProps = { - confirmButtonState: "default", - name: "Full Access", - onClose: () => undefined, - onConfirm: () => undefined, - open: true, -}; - -storiesOf("Views / Permission Groups / Permission Group Delete", module) - .addDecorator(Decorator) - .add("remove single", () => ) - .add("Got permissions error", () => ( - - )) - .add("Get random permission group error", () => ( - - )); diff --git a/src/permissionGroups/components/PermissionGroupDetailsPage/PermissionGroupDetailsPage.stories.tsx b/src/permissionGroups/components/PermissionGroupDetailsPage/PermissionGroupDetailsPage.stories.tsx index 50d188d7b..13a46b9c7 100644 --- a/src/permissionGroups/components/PermissionGroupDetailsPage/PermissionGroupDetailsPage.stories.tsx +++ b/src/permissionGroups/components/PermissionGroupDetailsPage/PermissionGroupDetailsPage.stories.tsx @@ -1,16 +1,13 @@ import { permissions } from "@saleor/fixtures"; -import PermissionGroupDetailsPage, { - PermissionGroupDetailsPageProps, -} from "@saleor/permissionGroups/components/PermissionGroupDetailsPage"; -import { - emptyPermissionGroup, - permissionGroup, - users, -} from "@saleor/permissionGroups/fixtures"; import Decorator from "@saleor/storybook/Decorator"; import { storiesOf } from "@storybook/react"; import React from "react"; +import { emptyPermissionGroup, permissionGroup, users } from "../../fixtures"; +import PermissionGroupDetailsPage, { + PermissionGroupDetailsPageProps, +} from "./PermissionGroupDetailsPage"; + const props: PermissionGroupDetailsPageProps = { disabled: false, errors: [], @@ -31,7 +28,7 @@ const props: PermissionGroupDetailsPageProps = { toolbar: null, }; -storiesOf("Views / Permission Groups / Permission Group Details", module) +storiesOf("Permission Groups / Permission Group Details", module) .addDecorator(Decorator) .add("default", () => ) .add("no members", () => ( diff --git a/src/permissionGroups/components/PermissionGroupListPage/PermissionGroupListPage.stories.tsx b/src/permissionGroups/components/PermissionGroupListPage/PermissionGroupListPage.stories.tsx index 2c6f4b607..65c7445ea 100644 --- a/src/permissionGroups/components/PermissionGroupListPage/PermissionGroupListPage.stories.tsx +++ b/src/permissionGroups/components/PermissionGroupListPage/PermissionGroupListPage.stories.tsx @@ -3,16 +3,17 @@ import { pageListProps, sortPageProps, } from "@saleor/fixtures"; -import PermissionGroupListPage, { - PermissionGroupListPageProps, -} from "@saleor/permissionGroups/components/PermissionGroupListPage"; -import { permissionGroups } from "@saleor/permissionGroups/fixtures"; -import { PermissionGroupListUrlSortField } from "@saleor/permissionGroups/urls"; import Decorator from "@saleor/storybook/Decorator"; import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator"; import { storiesOf } from "@storybook/react"; import React from "react"; +import { permissionGroups } from "../../fixtures"; +import { PermissionGroupListUrlSortField } from "../../urls"; +import PermissionGroupListPage, { + PermissionGroupListPageProps, +} from "./PermissionGroupListPage"; + const props: PermissionGroupListPageProps = { permissionGroups, ...listActionsProps, @@ -26,7 +27,7 @@ const props: PermissionGroupListPageProps = { }, }; -storiesOf("Views / Permission Groups / Permission Group List", module) +storiesOf("Permission Groups / Permission Group List", module) .addDecorator(Decorator) .addDecorator(PaginatorContextDecorator) .add("default", () => ) diff --git a/src/permissionGroups/components/UnassignMembersDialog/UnassignMembersDialog.stories.tsx b/src/permissionGroups/components/UnassignMembersDialog/UnassignMembersDialog.stories.tsx deleted file mode 100644 index dfa15724e..000000000 --- a/src/permissionGroups/components/UnassignMembersDialog/UnassignMembersDialog.stories.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import UnassignMembersDialog, { - UnassignMembersDialogProps, -} from "@saleor/permissionGroups/components/UnassignMembersDialog"; -import Decorator from "@saleor/storybook/Decorator"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -const props: UnassignMembersDialogProps = { - confirmButtonState: "default", - onClose: () => undefined, - onConfirm: () => undefined, - open: true, - quantity: 3, -}; - -storiesOf( - "Views / Permission Groups / Permission Group Unassign Member", - module, -) - .addDecorator(Decorator) - .add("Unassign members", () => ); diff --git a/src/plugins/components/PluginSecretFieldDialog/PluginSecretFieldDialog.stories.tsx b/src/plugins/components/PluginSecretFieldDialog/PluginSecretFieldDialog.stories.tsx deleted file mode 100644 index 2aeef33ff..000000000 --- a/src/plugins/components/PluginSecretFieldDialog/PluginSecretFieldDialog.stories.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { ConfigurationTypeFieldEnum } from "@saleor/graphql"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import Decorator from "../../../storybook/Decorator"; -import PluginSecretFieldDialog, { - PluginSecretFieldDialogProps, -} from "./PluginSecretFieldDialog"; - -const props: PluginSecretFieldDialogProps = { - confirmButtonState: "default", - field: { - __typename: "ConfigurationItem", - helpText: "", - label: "Generic Secret Field", - name: "secret", - type: ConfigurationTypeFieldEnum.SECRET, - value: "value", - }, - onClose: () => undefined, - onConfirm: () => undefined, - open: true, -}; - -storiesOf("Views / Plugins / Edit secret field", module) - .addDecorator(Decorator) - .add("secret key", () => ) - .add("password", () => ( - - )); diff --git a/src/storybook/stories/plugins/PluginDetailsPage.tsx b/src/plugins/components/PluginsDetailsPage/PluginDetailsPage.stories.tsx similarity index 87% rename from src/storybook/stories/plugins/PluginDetailsPage.tsx rename to src/plugins/components/PluginsDetailsPage/PluginDetailsPage.stories.tsx index e7d76ef20..048a2761d 100644 --- a/src/storybook/stories/plugins/PluginDetailsPage.tsx +++ b/src/plugins/components/PluginsDetailsPage/PluginDetailsPage.stories.tsx @@ -1,13 +1,13 @@ import { PluginErrorCode } from "@saleor/graphql"; +import Decorator from "@saleor/storybook/Decorator"; import { storiesOf } from "@storybook/react"; import React from "react"; +import { plugin } from "../../fixtures"; import PluginsDetailsPage, { PluginDetailsPageFormData, PluginsDetailsPageProps, -} from "../../../plugins/components/PluginsDetailsPage"; -import { plugin } from "../../../plugins/fixtures"; -import Decorator from "../../Decorator"; +} from "./PluginsDetailsPage"; const props: PluginsDetailsPageProps = { disabled: false, @@ -20,7 +20,7 @@ const props: PluginsDetailsPageProps = { setSelectedChannelId: () => undefined, }; -storiesOf("Views / Plugins / Plugin details", module) +storiesOf("Plugins / Plugin details", module) .addDecorator(Decorator) .add("default", () => ) .add("loading", () => ( diff --git a/src/storybook/stories/plugins/PluginsListPage.tsx b/src/plugins/components/PluginsListPage/PluginsListPage.stories.tsx similarity index 82% rename from src/storybook/stories/plugins/PluginsListPage.tsx rename to src/plugins/components/PluginsListPage/PluginsListPage.stories.tsx index a3bb600ff..02944eee9 100644 --- a/src/storybook/stories/plugins/PluginsListPage.tsx +++ b/src/plugins/components/PluginsListPage/PluginsListPage.stories.tsx @@ -1,19 +1,17 @@ -import { PluginConfigurationType } from "@saleor/graphql"; -import { PluginListUrlSortField } from "@saleor/plugins/urls"; -import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - import { filterPageProps, pageListProps, sortPageProps, -} from "../../../fixtures"; -import PluginsListPage, { - PluginsListPageProps, -} from "../../../plugins/components/PluginsListPage"; -import { pluginList } from "../../../plugins/fixtures"; -import Decorator from "../../Decorator"; +} from "@saleor/fixtures"; +import { PluginConfigurationType } from "@saleor/graphql"; +import { pluginList } from "@saleor/plugins/fixtures"; +import { PluginListUrlSortField } from "@saleor/plugins/urls"; +import Decorator from "@saleor/storybook/Decorator"; +import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator"; +import { storiesOf } from "@storybook/react"; +import React from "react"; + +import PluginsListPage, { PluginsListPageProps } from "./PluginsListPage"; const props: PluginsListPageProps = { ...pageListProps.default, @@ -51,7 +49,7 @@ const props: PluginsListPageProps = { }, }; -storiesOf("Views / Plugins / Plugin list", module) +storiesOf("Plugins / Plugin list", module) .addDecorator(Decorator) .addDecorator(PaginatorContextDecorator) .add("default", () => ) diff --git a/src/storybook/stories/productTypes/ProductTypeCreatePage.tsx b/src/productTypes/components/ProductTypeCreatePage/ProductTypeCreatePage.stories.tsx similarity index 81% rename from src/storybook/stories/productTypes/ProductTypeCreatePage.tsx rename to src/productTypes/components/ProductTypeCreatePage/ProductTypeCreatePage.stories.tsx index 8ebf29495..2b5373dd6 100644 --- a/src/storybook/stories/productTypes/ProductTypeCreatePage.tsx +++ b/src/productTypes/components/ProductTypeCreatePage/ProductTypeCreatePage.stories.tsx @@ -1,5 +1,6 @@ import { ProductTypeKindEnum, WeightUnitsEnum } from "@saleor/graphql"; -import { formError } from "@saleor/storybook/misc"; +import Decorator from "@saleor/storybook/Decorator"; +import { formError } from "@saleor/storybook/formError"; import { taxClasses } from "@saleor/taxes/fixtures"; import { storiesOf } from "@storybook/react"; import React from "react"; @@ -7,8 +8,7 @@ import React from "react"; import ProductTypeCreatePage, { ProductTypeCreatePageProps, ProductTypeForm, -} from "../../../productTypes/components/ProductTypeCreatePage"; -import Decorator from "../../Decorator"; +} from "./ProductTypeCreatePage"; const props: Omit = { defaultWeightUnit: "kg" as WeightUnitsEnum, @@ -23,7 +23,7 @@ const props: Omit = { onChangeKind: () => undefined, }; -storiesOf("Views / Product types / Create product type", module) +storiesOf("Product types / Create product type", module) .addDecorator(Decorator) .add("default", () => ) .add("loading", () => ( diff --git a/src/storybook/stories/productTypes/ProductTypeDetailsPage.tsx b/src/productTypes/components/ProductTypeDetailsPage/ProductTypeDetailsPage.stories.tsx similarity index 84% rename from src/storybook/stories/productTypes/ProductTypeDetailsPage.tsx rename to src/productTypes/components/ProductTypeDetailsPage/ProductTypeDetailsPage.stories.tsx index 5c57c9d5d..de0e1e58b 100644 --- a/src/storybook/stories/productTypes/ProductTypeDetailsPage.tsx +++ b/src/productTypes/components/ProductTypeDetailsPage/ProductTypeDetailsPage.stories.tsx @@ -1,16 +1,16 @@ import { listActionsProps } from "@saleor/fixtures"; import { WeightUnitsEnum } from "@saleor/graphql"; -import { formError } from "@saleor/storybook/misc"; +import Decorator from "@saleor/storybook/Decorator"; +import { formError } from "@saleor/storybook/formError"; import { taxClasses } from "@saleor/taxes/fixtures"; import { storiesOf } from "@storybook/react"; import React from "react"; +import { productType } from "../../fixtures"; import ProductTypeDetailsPage, { ProductTypeDetailsPageProps, ProductTypeForm, -} from "../../../productTypes/components/ProductTypeDetailsPage"; -import { productType } from "../../../productTypes/fixtures"; -import Decorator from "../../Decorator"; +} from "./ProductTypeDetailsPage"; const props: Omit = { defaultWeightUnit: "kg" as WeightUnitsEnum, @@ -33,7 +33,7 @@ const props: Omit = { selectedVariantAttributes: [], }; -storiesOf("Views / Product types / Product type details", module) +storiesOf("Product types / Product type details", module) .addDecorator(Decorator) .add("default", () => ) .add("loading", () => ( diff --git a/src/storybook/stories/productTypes/ProductTypeListPage.tsx b/src/productTypes/components/ProductTypeListPage/ProductTypeListPage.stories.tsx similarity index 83% rename from src/storybook/stories/productTypes/ProductTypeListPage.tsx rename to src/productTypes/components/ProductTypeListPage/ProductTypeListPage.stories.tsx index fd01a2809..7c3a9ba4d 100644 --- a/src/storybook/stories/productTypes/ProductTypeListPage.tsx +++ b/src/productTypes/components/ProductTypeListPage/ProductTypeListPage.stories.tsx @@ -1,9 +1,3 @@ -import { ProductTypeConfigurable, ProductTypeEnum } from "@saleor/graphql"; -import { ProductTypeListUrlSortField } from "@saleor/productTypes/urls"; -import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - import { filterPageProps, listActionsProps, @@ -11,12 +5,18 @@ import { searchPageProps, sortPageProps, tabPageProps, -} from "../../../fixtures"; +} from "@saleor/fixtures"; +import { ProductTypeConfigurable, ProductTypeEnum } from "@saleor/graphql"; +import { ProductTypeListUrlSortField } from "@saleor/productTypes/urls"; +import Decorator from "@saleor/storybook/Decorator"; +import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator"; +import { storiesOf } from "@storybook/react"; +import React from "react"; + +import { productTypes } from "../../fixtures"; import ProductTypeListPage, { ProductTypeListPageProps, -} from "../../../productTypes/components/ProductTypeListPage"; -import { productTypes } from "../../../productTypes/fixtures"; -import Decorator from "../../Decorator"; +} from "./ProductTypeListPage"; const props: ProductTypeListPageProps = { ...listActionsProps, @@ -42,7 +42,7 @@ const props: ProductTypeListPageProps = { productTypes, }; -storiesOf("Views / Product types / Product types list", module) +storiesOf("Product types / Product types list", module) .addDecorator(Decorator) .addDecorator(PaginatorContextDecorator) .add("default", () => ) diff --git a/src/storybook/stories/products/ProductCreatePage.tsx b/src/products/components/ProductCreatePage/ProductCreatePage.stories.tsx similarity index 92% rename from src/storybook/stories/products/ProductCreatePage.tsx rename to src/products/components/ProductCreatePage/ProductCreatePage.stories.tsx index 941c8efac..6286e3a8e 100644 --- a/src/storybook/stories/products/ProductCreatePage.tsx +++ b/src/products/components/ProductCreatePage/ProductCreatePage.stories.tsx @@ -2,25 +2,21 @@ import { channelsList } from "@saleor/channels/fixtures"; import { createChannelsData } from "@saleor/channels/utils"; import { fetchMoreProps } from "@saleor/fixtures"; import { ProductErrorCode } from "@saleor/graphql"; +import { productTypes, productTypeSearch } from "@saleor/productTypes/fixtures"; +import Decorator from "@saleor/storybook/Decorator"; import { taxClasses } from "@saleor/taxes/fixtures"; import { warehouseList } from "@saleor/warehouses/fixtures"; import { storiesOf } from "@storybook/react"; import React from "react"; -import ProductCreatePage, { - ProductCreateFormData, -} from "../../../products/components/ProductCreatePage"; -import { product as productFixture } from "../../../products/fixtures"; -import { - productTypes, - productTypeSearch, -} from "../../../productTypes/fixtures"; -import Decorator from "../../Decorator"; +import { product as productFixture } from "../../fixtures"; +import { ProductCreateFormData } from "./form"; +import ProductCreatePage from "./ProductCreatePage"; const product = productFixture(""); const channels = createChannelsData(channelsList); -storiesOf("Views / Products / Create product", module) +storiesOf("Products / Create product", module) .addDecorator(Decorator) .add("default", () => ( ({ - __typename: "Attribute", - id: attr.id, - name: attr.name, - })), - channels: channelsList, - confirmButtonState: "default", - errors: [], - hasMore: true, - loading: true, - onClose: () => undefined, - onFetch: () => undefined, - onFetchMore: () => undefined, - onSubmit: () => undefined, - open: true, - productQuantity: { - all: 100, - filter: 32, - }, - selectedProducts: 18, - warehouses: warehouseList, -}; - -storiesOf("Views / Products / Export / Export settings", module) - .addDecorator(Decorator) - .add("interactive", () => ) - .add("no products selected", () => ( - - )) - .add("errors", () => ( - ).map(field => ({ - __typename: "ExportError", - code: ExportErrorCode.INVALID, - field, - message: "Export invalid", - }))} - /> - )); diff --git a/src/products/components/ProductList/ProductListAttribute.stories.tsx b/src/products/components/ProductList/ProductListAttribute.stories.tsx deleted file mode 100644 index 1eb95efe2..000000000 --- a/src/products/components/ProductList/ProductListAttribute.stories.tsx +++ /dev/null @@ -1,107 +0,0 @@ -import { ProductListAttributeFragment } from "@saleor/graphql"; -import Decorator from "@saleor/storybook/Decorator"; -import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import ProductListAttribute from "./ProductListAttribute"; - -const attributes: ProductListAttributeFragment[] = [ - { - __typename: "SelectedAttribute", - attribute: { - __typename: "Attribute", - id: "1", - }, - values: [ - { - id: "QXR0cmlidXRlVmFsdWU6MTEz", - name: "2022-03-11", - slug: "72_37", - file: null, - reference: null, - boolean: null, - date: "2022-03-11", - dateTime: null, - value: "", - __typename: "AttributeValue", - }, - ], - }, - { - attribute: { - id: "2", - __typename: "Attribute", - }, - values: [ - { - id: "QXR0cmlidXRlVmFsdWU6MTE1", - name: "2022-03-01 16:24:00+01:00", - slug: "74_38", - file: null, - reference: null, - boolean: null, - date: null, - dateTime: "2022-03-01T15:24:00+00:00", - value: "", - __typename: "AttributeValue", - }, - ], - __typename: "SelectedAttribute", - }, - { - attribute: { - id: "3", - __typename: "Attribute", - }, - values: [ - { - id: "QXR0cmlidXRlOjMw", - name: "Lorem Ipsum", - slug: "72_2", - file: null, - reference: "UGFnZToy", - boolean: null, - date: null, - dateTime: null, - value: "", - __typename: "AttributeValue", - }, - { - id: "QXR0cmlidXRlOjMx", - name: "Dolor Sit", - slug: "72_3", - file: null, - reference: "UGFnZToz", - boolean: null, - date: null, - dateTime: null, - value: "", - __typename: "AttributeValue", - }, - ], - __typename: "SelectedAttribute", - }, -]; - -storiesOf("Views / Products / Product list / Attribute display", module) - .addDecorator(Decorator) - .addDecorator(PaginatorContextDecorator) - .add("default", () => ( - - )) - .add("date", () => ( - - )) - .add("datetime", () => ( - - )); diff --git a/src/storybook/stories/products/ProductListPage.tsx b/src/products/components/ProductListPage/ProductListPage.stories.tsx similarity index 91% rename from src/storybook/stories/products/ProductListPage.tsx rename to src/products/components/ProductListPage/ProductListPage.stories.tsx index 6830dab1f..b6618b58d 100644 --- a/src/storybook/stories/products/ProductListPage.tsx +++ b/src/products/components/ProductListPage/ProductListPage.stories.tsx @@ -1,14 +1,5 @@ import placeholderImage from "@assets/images/placeholder255x255.png"; import { defaultListSettings } from "@saleor/config"; -import { products as productListFixture } from "@saleor/products/fixtures"; -import { ProductListUrlSortField } from "@saleor/products/urls"; -import { productListFilterOpts } from "@saleor/products/views/ProductList/fixtures"; -import { attributes } from "@saleor/productTypes/fixtures"; -import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator"; -import { ListViews } from "@saleor/types"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - import { fetchMoreProps, filterPageProps, @@ -17,11 +8,18 @@ import { listActionsProps, pageListProps, sortPageProps, -} from "../../../fixtures"; -import ProductListPage, { - ProductListPageProps, -} from "../../../products/components/ProductListPage"; -import Decorator from "../../Decorator"; +} from "@saleor/fixtures"; +import { products as productListFixture } from "@saleor/products/fixtures"; +import { ProductListUrlSortField } from "@saleor/products/urls"; +import { productListFilterOpts } from "@saleor/products/views/ProductList/fixtures"; +import { attributes } from "@saleor/productTypes/fixtures"; +import Decorator from "@saleor/storybook/Decorator"; +import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator"; +import { ListViews } from "@saleor/types"; +import { storiesOf } from "@storybook/react"; +import React from "react"; + +import ProductListPage, { ProductListPageProps } from "./ProductListPage"; const products = productListFixture(placeholderImage); @@ -56,7 +54,7 @@ const props: ProductListPageProps = { }, }; -storiesOf("Views / Products / Product list", module) +storiesOf("Products / Product list", module) .addDecorator(Decorator) .addDecorator(PaginatorContextDecorator) .add("default", () => ) diff --git a/src/storybook/stories/products/ProductImagePage.tsx b/src/products/components/ProductMediaPage/ProductMediaPage.stories.tsx similarity index 85% rename from src/storybook/stories/products/ProductImagePage.tsx rename to src/products/components/ProductMediaPage/ProductMediaPage.stories.tsx index 640aeaabd..a7a3f25f4 100644 --- a/src/storybook/stories/products/ProductImagePage.tsx +++ b/src/products/components/ProductMediaPage/ProductMediaPage.stories.tsx @@ -1,10 +1,10 @@ import placeholder from "@assets/images/placeholder1080x1080.png"; import { ProductMediaType } from "@saleor/graphql"; +import Decorator from "@saleor/storybook/Decorator"; import { storiesOf } from "@storybook/react"; import React from "react"; -import ProductMediaPage from "../../../products/components/ProductMediaPage"; -import Decorator from "../../Decorator"; +import ProductMediaPage from "./ProductMediaPage"; const mediaObj = { alt: "Lorem ipsum", @@ -16,7 +16,7 @@ const media = (Array(8) as any) .fill({ id: "img", url: placeholder, oembedData: "{}" }) .map((image, imageIndex) => ({ ...image, id: image.id + imageIndex })); -storiesOf("Views / Products / Product image details", module) +storiesOf("Products / Product image details", module) .addDecorator(Decorator) .add("when loaded data", () => ( undefined, - fetchMoreProductTypes: { - hasMore: false, - loading: false, - onFetchMore: () => undefined, - }, - onClose: () => undefined, - onConfirm: () => undefined, - open: true, -}; - -storiesOf("Views / Products / Product type dialog", module) - .addDecorator(Decorator) - .add("default", () => ); diff --git a/src/storybook/stories/products/ProductUpdatePage.tsx b/src/products/components/ProductUpdatePage/ProductUpdatePage.stories.tsx similarity index 92% rename from src/storybook/stories/products/ProductUpdatePage.tsx rename to src/products/components/ProductUpdatePage/ProductUpdatePage.stories.tsx index 56289e013..7be8fa56c 100644 --- a/src/storybook/stories/products/ProductUpdatePage.tsx +++ b/src/products/components/ProductUpdatePage/ProductUpdatePage.stories.tsx @@ -3,17 +3,15 @@ import { channelsList } from "@saleor/channels/fixtures"; import { collections } from "@saleor/collections/fixtures"; import { fetchMoreProps, limits, limitsReached } from "@saleor/fixtures"; import { ProductErrorCode } from "@saleor/graphql"; -import ProductUpdatePage, { - ProductUpdatePageProps, -} from "@saleor/products/components/ProductUpdatePage"; -import { ProductUpdateFormData } from "@saleor/products/components/ProductUpdatePage/types"; -import { product as productFixture } from "@saleor/products/fixtures"; +import Decorator from "@saleor/storybook/Decorator"; import { taxClasses } from "@saleor/taxes/fixtures"; import { warehouseList } from "@saleor/warehouses/fixtures"; import { storiesOf } from "@storybook/react"; import React from "react"; -import Decorator from "../../Decorator"; +import { product as productFixture } from "../../fixtures"; +import ProductUpdatePage, { ProductUpdatePageProps } from "./ProductUpdatePage"; +import { ProductUpdateFormData } from "./types"; const product = productFixture(placeholderImage); @@ -67,7 +65,7 @@ const props: ProductUpdatePageProps = { attributeValues: [], }; -storiesOf("Views / Products / Product edit", module) +storiesOf("Products / Product edit", module) .addDecorator(Decorator) .add("when data is fully loaded", () => ) .add("when product has no images", () => ( diff --git a/src/storybook/stories/products/ProductVariantCreatePage.tsx b/src/products/components/ProductVariantCreatePage/ProductVariantCreatePage.stories.tsx similarity index 94% rename from src/storybook/stories/products/ProductVariantCreatePage.tsx rename to src/products/components/ProductVariantCreatePage/ProductVariantCreatePage.stories.tsx index 79a625f42..8d7f05728 100644 --- a/src/storybook/stories/products/ProductVariantCreatePage.tsx +++ b/src/products/components/ProductVariantCreatePage/ProductVariantCreatePage.stories.tsx @@ -1,16 +1,16 @@ import placeholderImage from "@assets/images/placeholder255x255.png"; import { ProductErrorCode } from "@saleor/graphql"; +import Decorator from "@saleor/storybook/Decorator"; import { warehouseList } from "@saleor/warehouses/fixtures"; import { storiesOf } from "@storybook/react"; import React from "react"; -import ProductVariantCreatePage from "../../../products/components/ProductVariantCreatePage"; -import { product as productFixture } from "../../../products/fixtures"; -import Decorator from "../../Decorator"; +import { product as productFixture } from "../../fixtures"; +import ProductVariantCreatePage from "./ProductVariantCreatePage"; const product = productFixture(placeholderImage); -storiesOf("Views / Products / Create product variant", module) +storiesOf("Products / Create product variant", module) .addDecorator(Decorator) .add("default", () => ( ( undefined, - name: "Shipping", - onClose: () => undefined, - open: true, -}; - -storiesOf("Shipping / DeleteShippingRateDialog", module) - .addDecorator(Decorator) - .add("default", () => ) - .add("loading", () => ( - - )); diff --git a/src/shipping/components/OrderValue/OrderValue.stories.tsx b/src/shipping/components/OrderValue/OrderValue.stories.tsx deleted file mode 100644 index 6e1e73fc8..000000000 --- a/src/shipping/components/OrderValue/OrderValue.stories.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { createShippingChannelsFromRate } from "@saleor/channels/utils"; -import { shippingZone } from "@saleor/shipping/fixtures"; -import Decorator from "@saleor/storybook//Decorator"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import OrderValue, { OrderValueProps } from "./OrderValue"; - -const props: OrderValueProps = { - channels: createShippingChannelsFromRate( - shippingZone.shippingMethods[0].channelListings, - ), - disabled: false, - errors: [], - orderValueRestricted: true, - onChange: () => undefined, - onChannelsChange: () => undefined, -}; - -storiesOf("Shipping / Order value rates", module) - .addDecorator(Decorator) - .add("default", () => ) - .add("loading", () => ); diff --git a/src/shipping/components/OrderWeight/OrderWeight.stories.tsx b/src/shipping/components/OrderWeight/OrderWeight.stories.tsx deleted file mode 100644 index c76d653fe..000000000 --- a/src/shipping/components/OrderWeight/OrderWeight.stories.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { ShippingErrorCode } from "@saleor/graphql"; -import Decorator from "@saleor/storybook//Decorator"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import OrderWeight, { OrderWeightProps } from "./OrderWeight"; - -const props: OrderWeightProps = { - disabled: false, - errors: [], - maxValue: "2", - minValue: "1", - orderValueRestricted: true, - onChange: () => undefined, -}; - -storiesOf("Shipping / Order weight rates", module) - .addDecorator(Decorator) - .add("default", () => ) - .add("loading", () => ) - .add("new", () => ) - .add("form errors", () => ( - ({ - __typename: "ShippingError", - code: ShippingErrorCode.INVALID, - field, - message: "Shipping code invalid", - }))} - /> - )); diff --git a/src/shipping/components/PricingCard/PricingCard.stories.tsx b/src/shipping/components/PricingCard/PricingCard.stories.tsx deleted file mode 100644 index bd3b00360..000000000 --- a/src/shipping/components/PricingCard/PricingCard.stories.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { createShippingChannelsFromRate } from "@saleor/channels/utils"; -import { shippingZone } from "@saleor/shipping/fixtures"; -import Decorator from "@saleor/storybook//Decorator"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import PricingCard, { PricingCardProps } from "./PricingCard"; - -const props: PricingCardProps = { - channels: createShippingChannelsFromRate( - shippingZone.shippingMethods[0].channelListings, - ), - disabled: false, - errors: [], - onChange: () => undefined, -}; - -storiesOf("Shipping / Pricing Card", module) - .addDecorator(Decorator) - .add("default", () => ) - .add("loading", () => ); diff --git a/src/shipping/components/ShippingMethodProducts/ShippingMethodProducts.stories.tsx b/src/shipping/components/ShippingMethodProducts/ShippingMethodProducts.stories.tsx deleted file mode 100644 index cb3e178ca..000000000 --- a/src/shipping/components/ShippingMethodProducts/ShippingMethodProducts.stories.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { shippingZone } from "@saleor/shipping/fixtures"; -import Decorator from "@saleor/storybook//Decorator"; -import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator"; -import { mapEdgesToItems } from "@saleor/utils/maps"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import ShippingMethodProducts, { - ShippingMethodProductsProps, -} from "./ShippingMethodProducts"; - -const products = mapEdgesToItems( - shippingZone.shippingMethods[0].excludedProducts, -); - -const props: ShippingMethodProductsProps = { - disabled: false, - isChecked: () => undefined, - onProductAssign: () => undefined, - onProductUnassign: () => undefined, - products, - selected: products.length, - toggle: () => undefined, - toggleAll: () => undefined, - toolbar: () => undefined, -}; - -storiesOf("Shipping / ShippingMethodProducts", module) - .addDecorator(Decorator) - .addDecorator(PaginatorContextDecorator) - .add("default", () => ); diff --git a/src/shipping/components/ShippingMethodProductsAddDialog/ShippingMethodProductsAddDialog.stories.tsx b/src/shipping/components/ShippingMethodProductsAddDialog/ShippingMethodProductsAddDialog.stories.tsx deleted file mode 100644 index 220cb0740..000000000 --- a/src/shipping/components/ShippingMethodProductsAddDialog/ShippingMethodProductsAddDialog.stories.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { products } from "@saleor/shipping/fixtures"; -import Decorator from "@saleor/storybook//Decorator"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import ShippingMethodProductsAddDialog, { - ShippingMethodProductsAddDialogProps, -} from "./ShippingMethodProductsAddDialog"; - -const props: ShippingMethodProductsAddDialogProps = { - confirmButtonState: "default", - hasMore: false, - loading: false, - onClose: () => undefined, - onFetch: () => undefined, - onFetchMore: () => undefined, - onSubmit: () => undefined, - open: true, - products, -}; - -storiesOf("Shipping / ShippingMethodProductsAddDialog", module) - .addDecorator(Decorator) - .add("default", () => ); diff --git a/src/storybook/stories/shipping/ShippingZoneCreatePage.tsx b/src/shipping/components/ShippingZoneCreatePage/ShippingZoneCreatePage.stories.tsx similarity index 90% rename from src/storybook/stories/shipping/ShippingZoneCreatePage.tsx rename to src/shipping/components/ShippingZoneCreatePage/ShippingZoneCreatePage.stories.tsx index 1928d643e..1c1162b18 100644 --- a/src/storybook/stories/shipping/ShippingZoneCreatePage.tsx +++ b/src/shipping/components/ShippingZoneCreatePage/ShippingZoneCreatePage.stories.tsx @@ -1,12 +1,12 @@ import { ShippingErrorCode } from "@saleor/graphql"; +import Decorator from "@saleor/storybook/Decorator"; import { mapCountriesToCountriesCodes } from "@saleor/utils/maps"; import { storiesOf } from "@storybook/react"; import React from "react"; import ShippingZoneCreatePage, { ShippingZoneCreatePageProps, -} from "../../../shipping/components/ShippingZoneCreatePage"; -import Decorator from "../../Decorator"; +} from "./ShippingZoneCreatePage"; const countries = [ { @@ -45,7 +45,7 @@ const props: ShippingZoneCreatePageProps = { saveButtonBarState: "default", }; -storiesOf("Views / Shipping / Create shipping zone", module) +storiesOf("Shipping / Create shipping zone", module) .addDecorator(Decorator) .add("default", () => ) .add("loading", () => ) diff --git a/src/storybook/stories/shipping/ShippingZoneDetailsPage.tsx b/src/shipping/components/ShippingZoneDetailsPage/ShippingZoneDetailsPage.stories.tsx similarity index 86% rename from src/storybook/stories/shipping/ShippingZoneDetailsPage.tsx rename to src/shipping/components/ShippingZoneDetailsPage/ShippingZoneDetailsPage.stories.tsx index 09039122b..7e0b2553a 100644 --- a/src/storybook/stories/shipping/ShippingZoneDetailsPage.tsx +++ b/src/shipping/components/ShippingZoneDetailsPage/ShippingZoneDetailsPage.stories.tsx @@ -1,14 +1,14 @@ import { fetchMoreProps, searchPageProps } from "@saleor/fixtures"; import { ShippingErrorCode } from "@saleor/graphql"; +import Decorator from "@saleor/storybook/Decorator"; import { warehouseList } from "@saleor/warehouses/fixtures"; import { storiesOf } from "@storybook/react"; import React from "react"; +import { shippingZone } from "../../fixtures"; import ShippingZoneDetailsPage, { ShippingZoneDetailsPageProps, -} from "../../../shipping/components/ShippingZoneDetailsPage"; -import { shippingZone } from "../../../shipping/fixtures"; -import Decorator from "../../Decorator"; +} from "./ShippingZoneDetailsPage"; const props: ShippingZoneDetailsPageProps = { ...fetchMoreProps, @@ -31,7 +31,7 @@ const props: ShippingZoneDetailsPageProps = { warehouses: warehouseList, }; -storiesOf("Views / Shipping / Shipping zone details", module) +storiesOf("Shipping / Shipping zone details", module) .addDecorator(Decorator) .add("default", () => ) .add("loading", () => ( diff --git a/src/shipping/components/ShippingZonePostalCodeRangeDialog/ShippingZonePostalCodeRangeDialog.stories.tsx b/src/shipping/components/ShippingZonePostalCodeRangeDialog/ShippingZonePostalCodeRangeDialog.stories.tsx deleted file mode 100644 index ba9cb7125..000000000 --- a/src/shipping/components/ShippingZonePostalCodeRangeDialog/ShippingZonePostalCodeRangeDialog.stories.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import Decorator from "@saleor/storybook/Decorator"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import ShippingZonePostalCodeRangeDialog from "./ShippingZonePostalCodeRangeDialog"; - -storiesOf("Shipping / Add postal code range", module) - .addDecorator(Decorator) - .add("default", () => ( - undefined} - onSubmit={() => undefined} - /> - )); diff --git a/src/shipping/components/ShippingZoneRatesCreatePage/ShippingZoneRatesCreatePage.stories.tsx b/src/shipping/components/ShippingZoneRatesCreatePage/ShippingZoneRatesCreatePage.stories.tsx index bb9c417e8..e54c5a04f 100644 --- a/src/shipping/components/ShippingZoneRatesCreatePage/ShippingZoneRatesCreatePage.stories.tsx +++ b/src/shipping/components/ShippingZoneRatesCreatePage/ShippingZoneRatesCreatePage.stories.tsx @@ -78,7 +78,7 @@ const props: ShippingZoneRatesCreatePageProps = { fetchMoreTaxClasses: undefined, }; -storiesOf("Shipping / ShippingZoneRatesCreatePage page", module) +storiesOf("Shipping / ShippingZoneRatesCreatePage", module) .addDecorator(Decorator) .add("create price", () => ) .add("loading", () => ( diff --git a/src/shipping/components/ShippingZoneRatesPage/ShippingZoneRatesPage.stories.tsx b/src/shipping/components/ShippingZoneRatesPage/ShippingZoneRatesPage.stories.tsx index 1e0627fde..5534ff20a 100644 --- a/src/shipping/components/ShippingZoneRatesPage/ShippingZoneRatesPage.stories.tsx +++ b/src/shipping/components/ShippingZoneRatesPage/ShippingZoneRatesPage.stories.tsx @@ -70,7 +70,7 @@ const props: ShippingZoneRatesPageProps = { fetchMoreTaxClasses: undefined, }; -storiesOf("Views / Shipping / Shipping rate", module) +storiesOf("Shipping / Shipping rate", module) .addDecorator(Decorator) .addDecorator(PaginatorContextDecorator) .add("create price rate", () => ) diff --git a/src/shipping/components/ShippingZoneSettingsCard/ShippingZoneSettingsCard.stories.tsx b/src/shipping/components/ShippingZoneSettingsCard/ShippingZoneSettingsCard.stories.tsx deleted file mode 100644 index 02fc9d41c..000000000 --- a/src/shipping/components/ShippingZoneSettingsCard/ShippingZoneSettingsCard.stories.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import { ChannelDetailsFragment } from "@saleor/graphql"; -import CentralPlacementDecorator from "@saleor/storybook/CentralPlacementDecorator"; -import CommonDecorator from "@saleor/storybook/Decorator"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import { ShippingZoneUpdateFormData } from "../../components/ShippingZoneDetailsPage/types"; -import ShippingZoneSettingsCard, { - ShippingZoneSettingsCardProps, -} from "./ShippingZoneSettingsCard"; - -const props: ShippingZoneSettingsCardProps = { - formData: { - channels: ["channel1"], - warehouses: ["warehouse1", "warehouse2"], - } as ShippingZoneUpdateFormData, - warehousesDisplayValues: [ - { - value: "warehouse1", - label: "Asia Warehouse", - }, - { - value: "warehouse2", - label: "Europe Warehouse", - }, - ], - hasMoreWarehouses: false, - loading: false, - onWarehouseChange: () => undefined, - onFetchMoreWarehouses: () => undefined, - onWarehousesSearchChange: () => undefined, - onWarehouseAdd: () => undefined, - warehousesChoices: [ - { - value: "warehouse1", - label: "C our wares", - }, - { - value: "warehouse2", - label: "Be stocked", - }, - ], - allChannels: [ - { __typename: "Channel", id: "channel1", name: "GBP" }, - { __typename: "Channel", id: "channel2", name: "PLN" }, - { __typename: "Channel", id: "channel3", name: "USD" }, - ] as ChannelDetailsFragment[], - channelsDisplayValues: [ - { - value: "channel1", - label: "GBP", - }, - ], - onChannelChange: () => undefined, -}; - -storiesOf("Shipping zones details / Settings Card", module) - .addDecorator(CommonDecorator) - .addDecorator(CentralPlacementDecorator) - .add("default", () => ); diff --git a/src/storybook/stories/shipping/ShippingZonesListPage.tsx b/src/shipping/components/ShippingZonesListPage/ShippingZonesListPage.stories.tsx similarity index 81% rename from src/storybook/stories/shipping/ShippingZonesListPage.tsx rename to src/shipping/components/ShippingZonesListPage/ShippingZonesListPage.stories.tsx index c15ec50a7..e7b2faf55 100644 --- a/src/storybook/stories/shipping/ShippingZonesListPage.tsx +++ b/src/shipping/components/ShippingZonesListPage/ShippingZonesListPage.stories.tsx @@ -1,18 +1,18 @@ -import { WeightUnitsEnum } from "@saleor/graphql"; -import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - import { adminUserPermissions, listActionsProps, pageListProps, -} from "../../../fixtures"; +} from "@saleor/fixtures"; +import { WeightUnitsEnum } from "@saleor/graphql"; +import Decorator from "@saleor/storybook/Decorator"; +import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator"; +import { storiesOf } from "@storybook/react"; +import React from "react"; + +import { shippingZones } from "../../fixtures"; import ShippingZonesListPage, { ShippingZonesListPageProps, -} from "../../../shipping/components/ShippingZonesListPage"; -import { shippingZones } from "../../../shipping/fixtures"; -import Decorator from "../../Decorator"; +} from "./ShippingZonesListPage"; const props: ShippingZonesListPageProps = { ...listActionsProps, @@ -24,7 +24,7 @@ const props: ShippingZonesListPageProps = { userPermissions: adminUserPermissions, }; -storiesOf("Views / Shipping / Shipping zones list", module) +storiesOf("Shipping / Shipping zones list", module) .addDecorator(Decorator) .addDecorator(PaginatorContextDecorator) .add("default", () => ) diff --git a/src/shipping/components/UnassignDialog/UnassignDialog.stories.tsx b/src/shipping/components/UnassignDialog/UnassignDialog.stories.tsx deleted file mode 100644 index 682cc6505..000000000 --- a/src/shipping/components/UnassignDialog/UnassignDialog.stories.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import Decorator from "@saleor/storybook//Decorator"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import UnassignDialog, { UnassignDialogProps } from "./UnassignDialog"; - -const props: UnassignDialogProps = { - closeModal: () => undefined, - confirmButtonState: "default", - idsLength: 2, - onConfirm: () => undefined, - open: true, -}; - -storiesOf("Shipping / UnassignDialog", module) - .addDecorator(Decorator) - .add("default", () => ); diff --git a/src/storybook/stories/siteSettings/SiteSettingsPage.tsx b/src/siteSettings/components/SiteSettingsPage/SiteSettingsPage.stories.tsx similarity index 77% rename from src/storybook/stories/siteSettings/SiteSettingsPage.tsx rename to src/siteSettings/components/SiteSettingsPage/SiteSettingsPage.stories.tsx index 92e45c57f..2980abbc6 100644 --- a/src/storybook/stories/siteSettings/SiteSettingsPage.tsx +++ b/src/siteSettings/components/SiteSettingsPage/SiteSettingsPage.stories.tsx @@ -1,12 +1,10 @@ import { ShopErrorCode } from "@saleor/graphql"; +import { shop } from "@saleor/siteSettings/fixtures"; +import Decorator from "@saleor/storybook/Decorator"; import { storiesOf } from "@storybook/react"; import React from "react"; -import SiteSettingsPage, { - SiteSettingsPageProps, -} from "../../../siteSettings/components/SiteSettingsPage"; -import { shop } from "../../../siteSettings/fixtures"; -import Decorator from "../../Decorator"; +import SiteSettingsPage, { SiteSettingsPageProps } from "./SiteSettingsPage"; const props: Omit = { disabled: false, @@ -16,7 +14,7 @@ const props: Omit = { shop, }; -storiesOf("Views / Site settings / Page", module) +storiesOf("Site settings / Page", module) .addDecorator(Decorator) .add("default", () => ) .add("loading", () => ( diff --git a/src/staff/components/StaffDetailsPage/StaffDetailsPage.stories.tsx b/src/staff/components/StaffDetailsPage/StaffDetailsPage.stories.tsx index 887dcd121..40110e849 100644 --- a/src/staff/components/StaffDetailsPage/StaffDetailsPage.stories.tsx +++ b/src/staff/components/StaffDetailsPage/StaffDetailsPage.stories.tsx @@ -1,12 +1,11 @@ import { userPermissionGroups } from "@saleor/permissionGroups/fixtures"; -import StaffDetailsPage, { - StaffDetailsPageProps, -} from "@saleor/staff/components/StaffDetailsPage"; import { staffMember } from "@saleor/staff/fixtures"; import Decorator from "@saleor/storybook/Decorator"; import { storiesOf } from "@storybook/react"; import React from "react"; +import StaffDetailsPage, { StaffDetailsPageProps } from "./StaffDetailsPage"; + const props: Omit = { availablePermissionGroups: [], canEditAvatar: false, @@ -27,7 +26,7 @@ const props: Omit = { staffMember: { ...staffMember, permissionGroups: userPermissionGroups }, }; -storiesOf("Views / Staff / Staff member details", module) +storiesOf("Staff / Staff member details", module) .addDecorator(Decorator) .add("default", () => ) .add("loading", () => ( diff --git a/src/staff/components/StaffListPage/StaffListPage.stories.tsx b/src/staff/components/StaffListPage/StaffListPage.stories.tsx index b70b5d518..e740f2f62 100644 --- a/src/staff/components/StaffListPage/StaffListPage.stories.tsx +++ b/src/staff/components/StaffListPage/StaffListPage.stories.tsx @@ -15,7 +15,7 @@ import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDec import { storiesOf } from "@storybook/react"; import React from "react"; -import StaffListPage, { StaffListPageProps } from "."; +import StaffListPage, { StaffListPageProps } from "./StaffListPage"; const props: StaffListPageProps = { ...pageListProps.default, @@ -38,7 +38,7 @@ const props: StaffListPageProps = { staffMembers, }; -storiesOf("Views / Staff / Staff members", module) +storiesOf("Staff / Staff members", module) .addDecorator(Decorator) .addDecorator(PaginatorContextDecorator) .add("default", () => ) diff --git a/src/storybook/CentralPlacementDecorator.tsx b/src/storybook/CentralPlacementDecorator.tsx deleted file mode 100644 index 2b32eef8d..000000000 --- a/src/storybook/CentralPlacementDecorator.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from "react"; - -const CentralPlacementDecorator = storyFn => ( -
- {storyFn()} -
-); -export default CentralPlacementDecorator; diff --git a/src/storybook/stories/customers/MockedUserProvider.tsx b/src/storybook/MockedUserProvider.tsx similarity index 100% rename from src/storybook/stories/customers/MockedUserProvider.tsx rename to src/storybook/MockedUserProvider.tsx diff --git a/src/storybook/UserDecorator.tsx b/src/storybook/UserDecorator.tsx deleted file mode 100644 index d9c08407c..000000000 --- a/src/storybook/UserDecorator.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { UserContext } from "@saleor/auth"; -import { UserFragment } from "@saleor/graphql"; -import React from "react"; - -export const UserDecorator = (user: UserFragment) => storyFn => ( - - {storyFn()} - -); -export default UserDecorator; diff --git a/src/storybook/config.js b/src/storybook/config.js index 4b0cd16d7..20829ccf3 100644 --- a/src/storybook/config.js +++ b/src/storybook/config.js @@ -2,150 +2,11 @@ import { configure } from "@storybook/react"; import requireContext from "require-context.macro"; -window.__SALEOR_CONFIG__ = { - APP_MOUNT_URI: "/", - MARKETPLACE_URL: "", -}; - const req = requireContext("../", true, /.stories.tsx$/); function loadStories() { // Story autodiscovery req.keys().forEach(filename => req(filename)); - - // Components - require("./stories/components/ActionDialog"); - require("./stories/components/AddressEdit"); - require("./stories/components/AddressFormatter"); - require("./stories/components/AssignProductDialog"); - require("./stories/components/AutocompleteSelectMenu"); - require("./stories/components/CardMenu"); - require("./stories/components/Checkbox"); - require("./stories/components/ColumnPicker"); - require("./stories/components/Date"); - require("./stories/components/DateTime"); - require("./stories/components/DeleteFilterTabDialog"); - require("./stories/components/EditableTableCell"); - require("./stories/components/ErrorMessageCard"); - require("./stories/components/ErrorPage"); - require("./stories/components/ExternalLink"); - require("./stories/components/Filter"); - require("./stories/components/Money"); - require("./stories/components/MoneyRange"); - require("./stories/components/MultiSelectField"); - require("./stories/components/NotFoundPage"); - require("./stories/components/PageHeader"); - require("./stories/components/Percent"); - require("./stories/components/PhoneField"); - require("./stories/components/PriceField"); - require("./stories/components/SaveFilterTabDialog"); - require("./stories/components/SingleSelectField"); - require("./stories/components/Skeleton"); - require("./stories/components/TablePagination"); - require("./stories/components/Timeline"); - require("./stories/components/Weight"); - require("./stories/components/WeightRange"); - require("./stories/components/messages"); - - // Attributes - require("./stories/attributes/AttributeBulkDeleteDialog"); - require("./stories/attributes/AttributeDeleteDialog"); - require("./stories/attributes/AttributeListPage"); - require("./stories/attributes/AttributePage"); - require("./stories/attributes/AttributeValueDeleteDialog"); - require("./stories/attributes/AttributeValueEditDialog"); - - // Categories - require("./stories/categories/CategoryCreatePage"); - require("./stories/categories/CategoryUpdatePage"); - require("./stories/categories/CategoryListPage"); - - // Collections - require("./stories/collections/CollectionCreatePage"); - require("./stories/collections/CollectionDetailsPage"); - require("./stories/collections/CollectionListPage"); - - // Configuration - require("./stories/configuration/ConfigurationPage"); - - // Customers - require("./stories/customers/CustomerAddressDialog"); - require("./stories/customers/CustomerAddressListPage"); - require("./stories/customers/CustomerCreatePage"); - require("./stories/customers/CustomerDetailsPage"); - require("./stories/customers/CustomerListPage"); - - // Discounts - require("./stories/discounts/DiscountCountrySelectDialog"); - require("./stories/discounts/SaleCreatePage"); - require("./stories/discounts/SaleDetailsPage"); - require("./stories/discounts/SaleListPage"); - require("./stories/discounts/VoucherCreatePage"); - require("./stories/discounts/VoucherDetailsPage"); - require("./stories/discounts/VoucherListPage"); - - // Homepage - require("./stories/home/HomePage"); - - // Navigation - require("./stories/navigation/MenuCreateDialog"); - require("./stories/navigation/MenuDetailsPage"); - require("./stories/navigation/MenuItemDialog"); - require("./stories/navigation/MenuListPage"); - - // Pages - require("./stories/pages/PageDetailsPage"); - require("./stories/pages/PageListPage"); - - // Plugins - require("./stories/plugins/PluginDetailsPage"); - require("./stories/plugins/PluginsListPage"); - - // Products - require("./stories/products/ProductCreatePage"); - require("./stories/products/ProductImagePage"); - require("./stories/products/ProductListPage"); - require("./stories/products/ProductUpdatePage"); - require("./stories/products/ProductVariantCreatePage"); - require("./stories/products/ProductVariantImageSelectDialog"); - require("./stories/products/ProductVariantPage"); - - // Orders - require("./stories/orders/OrderBulkCancelDialog"); - require("./stories/orders/OrderCancelDialog"); - require("./stories/orders/OrderCustomer"); - require("./stories/orders/OrderDetailsPage"); - require("./stories/orders/OrderDraftCancelDialog"); - require("./stories/orders/OrderDraftListPage"); - require("./stories/orders/OrderDraftPage/OrderDraftPage"); - require("./stories/orders/OrderFulfillmentCancelDialog"); - require("./stories/orders/OrderFulfillmentTrackingDialog"); - require("./stories/orders/OrderHistory"); - require("./stories/orders/OrderListPage"); - require("./stories/orders/OrderMarkAsPaidDialog"); - require("./stories/orders/OrderPaymentDialog"); - require("./stories/orders/OrderPaymentVoidDialog"); - require("./stories/orders/OrderProductAddDialog"); - require("./stories/orders/OrderShippingMethodEditDialog"); - require("./stories/orders/OrderInvoiceList"); - - // Product types - require("./stories/productTypes/ProductTypeCreatePage"); - require("./stories/productTypes/ProductTypeDetailsPage"); - require("./stories/productTypes/ProductTypeListPage"); - - // Shipping - require("./stories/shipping/ShippingZoneCountriesAssignDialog"); - require("./stories/shipping/ShippingZoneCreatePage"); - require("./stories/shipping/ShippingZoneDetailsPage"); - require("./stories/shipping/ShippingZonesListPage"); - - // Site settings - require("./stories/siteSettings/SiteSettingsPage"); - - // Translations - require("./stories/translations/TranslationsEntitiesListPage"); - require("./stories/translations/TranslationsLanguageListPage"); } configure(loadStories, module); diff --git a/src/storybook/misc.ts b/src/storybook/formError.ts similarity index 100% rename from src/storybook/misc.ts rename to src/storybook/formError.ts diff --git a/src/storybook/mock.tsx b/src/storybook/mock.tsx deleted file mode 100644 index 9086ac558..000000000 --- a/src/storybook/mock.tsx +++ /dev/null @@ -1,98 +0,0 @@ -import { SingleAutocompleteChoiceType } from "@saleor/components/SingleAutocompleteSelectField/SingleAutocompleteSelectFieldContent"; -import { FetchMoreProps } from "@saleor/types"; -import React from "react"; - -interface ChoiceProviderProps { - children: ( - props: FetchMoreProps & { - choices: SingleAutocompleteChoiceType[]; - fetchChoices: (value: string) => void; - }, - ) => React.ReactElement; - choices: SingleAutocompleteChoiceType[]; -} - -const step = 5; -const loadingTime = 400; - -export interface UseMockChoiceProviderOpts extends FetchMoreProps { - fetchChoices: (value: string) => void; -} -export type UseMockChoiceProvider = [ - SingleAutocompleteChoiceType[], - UseMockChoiceProviderOpts, -]; -export function useMockChoiceProvider( - choices: SingleAutocompleteChoiceType[], -): UseMockChoiceProvider { - const [filteredChoices, setFilteredChoices] = React.useState( - choices.slice(0, step), - ); - const [loading, setLoading] = React.useState(false); - const [first, setFirst] = React.useState(step); - const timeout = React.useRef(null); - - React.useEffect( - () => () => { - if (timeout.current) { - clearTimeout(timeout.current); - } - }, - [], - ); - - const handleChange = (value: string) => { - if (!!timeout.current) { - clearTimeout(timeout.current); - } - timeout.current = setTimeout(() => fetchChoices(value), loadingTime); - }; - - const fetchChoices = (value: string) => { - const filteredChoices = choices.filter( - suggestion => - !value || - suggestion.label.toLowerCase().indexOf(value.toLowerCase()) !== -1, - ); - - setLoading(true); - - timeout.current = setTimeout(() => { - setFilteredChoices(filteredChoices); - setLoading(false); - setFirst(step); - }, loadingTime); - }; - - const handleFetchMore = () => { - setLoading(true); - - timeout.current = setTimeout(() => { - setFilteredChoices(choices.slice(0, first + step)); - setLoading(false); - setFirst(first + step); - }, loadingTime); - }; - - return [ - filteredChoices, - { - fetchChoices: handleChange, - hasMore: choices.length > filteredChoices.length, - loading, - onFetchMore: handleFetchMore, - }, - ]; -} - -export const ChoiceProvider: React.FC = ({ - children, - choices, -}) => { - const [filteredChoices, opts] = useMockChoiceProvider(choices); - - return children({ - choices: filteredChoices, - ...opts, - }); -}; diff --git a/src/storybook/preview-body.html b/src/storybook/preview-body.html new file mode 100644 index 000000000..8163d5714 --- /dev/null +++ b/src/storybook/preview-body.html @@ -0,0 +1,2 @@ +
+ diff --git a/src/storybook/preview-head.html b/src/storybook/preview-head.html new file mode 100644 index 000000000..2681d010e --- /dev/null +++ b/src/storybook/preview-head.html @@ -0,0 +1,10 @@ + diff --git a/src/storybook/stories/attributes/AttributeBulkDeleteDialog.tsx b/src/storybook/stories/attributes/AttributeBulkDeleteDialog.tsx deleted file mode 100644 index c2dcd547f..000000000 --- a/src/storybook/stories/attributes/AttributeBulkDeleteDialog.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import AttributeBulkDeleteDialog, { - AttributeBulkDeleteDialogProps, -} from "../../../attributes/components/AttributeBulkDeleteDialog"; -import Decorator from "../../Decorator"; - -const props: AttributeBulkDeleteDialogProps = { - confirmButtonState: "default", - onClose: () => undefined, - onConfirm: () => undefined, - open: true, - quantity: 5, -}; - -storiesOf("Attributes / Delete multiple attributes", module) - .addDecorator(Decorator) - .add("default", () => ); diff --git a/src/storybook/stories/attributes/AttributeDeleteDialog.tsx b/src/storybook/stories/attributes/AttributeDeleteDialog.tsx deleted file mode 100644 index e872b3779..000000000 --- a/src/storybook/stories/attributes/AttributeDeleteDialog.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import AttributeDeleteDialog, { - AttributeDeleteDialogProps, -} from "../../../attributes/components/AttributeDeleteDialog"; -import Decorator from "../../Decorator"; - -const props: AttributeDeleteDialogProps = { - confirmButtonState: "default", - name: "Size", - onClose: () => undefined, - onConfirm: () => undefined, - open: true, -}; - -storiesOf("Attributes / Attribute delete", module) - .addDecorator(Decorator) - .add("default", () => ); diff --git a/src/storybook/stories/attributes/AttributeListPage.tsx b/src/storybook/stories/attributes/AttributeListPage.tsx deleted file mode 100644 index 878f920e3..000000000 --- a/src/storybook/stories/attributes/AttributeListPage.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import AttributeListPage, { - AttributeListPageProps, -} from "@saleor/attributes/components/AttributeListPage"; -import { attributes } from "@saleor/attributes/fixtures"; -import { AttributeListUrlSortField } from "@saleor/attributes/urls"; -import { - filterPageProps, - listActionsProps, - pageListProps, - searchPageProps, - sortPageProps, - tabPageProps, -} from "@saleor/fixtures"; -import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import Decorator from "../../Decorator"; - -const props: AttributeListPageProps = { - ...pageListProps.default, - ...listActionsProps, - ...tabPageProps, - ...searchPageProps, - ...filterPageProps, - attributes, - filterOpts: { - filterableInStorefront: { - active: false, - value: false, - }, - isVariantOnly: { - active: false, - value: false, - }, - valueRequired: { - active: false, - value: false, - }, - visibleInStorefront: { - active: false, - value: false, - }, - }, - onSort: () => undefined, - sort: { - ...sortPageProps.sort, - sort: AttributeListUrlSortField.name, - }, -}; - -storiesOf("Views / Attributes / Attribute list", module) - .addDecorator(Decorator) - .addDecorator(PaginatorContextDecorator) - .add("default", () => ) - .add("loading", () => ( - - )) - .add("no data", () => ); diff --git a/src/storybook/stories/attributes/AttributePage.tsx b/src/storybook/stories/attributes/AttributePage.tsx deleted file mode 100644 index ef0ef5d1c..000000000 --- a/src/storybook/stories/attributes/AttributePage.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import AttributePage, { - AttributePageProps, -} from "@saleor/attributes/components/AttributePage"; -import { attribute } from "@saleor/attributes/fixtures"; -import { AttributeErrorCode, AttributeInputTypeEnum } from "@saleor/graphql"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import Decorator from "../../Decorator"; - -const props: AttributePageProps = { - children: () => null, - attribute, - disabled: false, - errors: [], - onDelete: () => undefined, - onSubmit: () => undefined, - onValueAdd: () => undefined, - onValueDelete: () => undefined, - onValueReorder: () => undefined, - onValueUpdate: () => undefined, - saveButtonBarState: "default", - values: attribute.choices, - pageInfo: { - hasNextPage: false, - hasPreviousPage: false, - }, - onNextPage: () => undefined, - onPreviousPage: () => undefined, -}; - -storiesOf("Views / Attributes / Attribute details", module) - .addDecorator(Decorator) - .add("default", () => {() => null}) - .add("loading", () => ( - - {() => null} - - )) - .add("no values", () => ( - - {() => null} - - )) - .add("form errors", () => ( - ({ - __typename: "AttributeError", - code: AttributeErrorCode.INVALID, - field, - message: "Attribute code invalid", - }))} - > - {() => null} - - )) - .add("multiple select input", () => ( - - {() => null} - - )) - .add("create", () => ( - - {() => null} - - )); diff --git a/src/storybook/stories/attributes/AttributeValueDeleteDialog.tsx b/src/storybook/stories/attributes/AttributeValueDeleteDialog.tsx deleted file mode 100644 index acc762bbe..000000000 --- a/src/storybook/stories/attributes/AttributeValueDeleteDialog.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import AttributeValueDeleteDialog, { - AttributeValueDeleteDialogProps, -} from "../../../attributes/components/AttributeValueDeleteDialog"; -import Decorator from "../../Decorator"; - -const props: AttributeValueDeleteDialogProps = { - attributeName: "Size", - confirmButtonState: "default", - name: "XS", - onClose: () => undefined, - onConfirm: () => undefined, - open: true, -}; - -storiesOf("Attributes / Attribute value delete", module) - .addDecorator(Decorator) - .add("default", () => ); diff --git a/src/storybook/stories/attributes/AttributeValueEditDialog.tsx b/src/storybook/stories/attributes/AttributeValueEditDialog.tsx deleted file mode 100644 index 30194d3ce..000000000 --- a/src/storybook/stories/attributes/AttributeValueEditDialog.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { attribute } from "@saleor/attributes/fixtures"; -import { AttributeErrorCode } from "@saleor/graphql"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import AttributeValueEditDialog, { - AttributeValueEditDialogProps, -} from "../../../attributes/components/AttributeValueEditDialog"; -import Decorator from "../../Decorator"; - -const props: AttributeValueEditDialogProps = { - attributeValue: attribute.choices[0], - confirmButtonState: "default", - disabled: false, - errors: [], - onClose: () => undefined, - onSubmit: () => undefined, - open: true, -}; - -storiesOf("Attributes / Attribute value edit", module) - .addDecorator(Decorator) - .add("default", () => ) - .add("form errors", () => ( - - )); diff --git a/src/storybook/stories/components/ActionDialog.tsx b/src/storybook/stories/components/ActionDialog.tsx deleted file mode 100644 index 6efd4d566..000000000 --- a/src/storybook/stories/components/ActionDialog.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import ActionDialogComponent from "@saleor/components/ActionDialog"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import Decorator from "../../Decorator"; -import { MockedUserProvider } from "../customers/MockedUserProvider"; - -const ActionDialog = props => ( - - - -); - -storiesOf("Generics / ActionDialog", module) - .addDecorator(Decorator) - .add("default", () => ( - - Example content - - )); diff --git a/src/storybook/stories/components/AddressEdit.tsx b/src/storybook/stories/components/AddressEdit.tsx deleted file mode 100644 index 706f002e1..000000000 --- a/src/storybook/stories/components/AddressEdit.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { Card, CardContent } from "@material-ui/core"; -import AddressEdit from "@saleor/components/AddressEdit"; -import { mapCountriesToChoices } from "@saleor/utils/maps"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import { customer } from "../../../customers/fixtures"; -import { transformAddressToForm } from "../../../misc"; -import { countries } from "../../../orders/fixtures"; -import Decorator from "../../Decorator"; - -storiesOf("Generics / AddressEdit", module) - .addDecorator(Decorator) - .add("default", () => ( - - - undefined} - /> - - - )); diff --git a/src/storybook/stories/components/AddressFormatter.tsx b/src/storybook/stories/components/AddressFormatter.tsx deleted file mode 100644 index eb86052ef..000000000 --- a/src/storybook/stories/components/AddressFormatter.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import AddressFormatter from "@saleor/components/AddressFormatter"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import { customer } from "../../../customers/fixtures"; -import CardDecorator from "../../CardDecorator"; -import Decorator from "../../Decorator"; - -storiesOf("Generics / AddressFormatter", module) - .addDecorator(CardDecorator) - .addDecorator(Decorator) - .add("default", () => ( - - )) - .add("when loading", () => ); diff --git a/src/storybook/stories/components/AssignProductDialog.tsx b/src/storybook/stories/components/AssignProductDialog.tsx deleted file mode 100644 index 62f00e324..000000000 --- a/src/storybook/stories/components/AssignProductDialog.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import AssignProductDialog, { - AssignProductDialogProps, -} from "@saleor/components/AssignProductDialog"; -import { fetchMoreProps } from "@saleor/fixtures"; -import { products } from "@saleor/shipping/fixtures"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import Decorator from "../../Decorator"; - -const props: AssignProductDialogProps = { - ...fetchMoreProps, - confirmButtonState: "default", - loading: false, - onClose: () => undefined, - onFetch: () => undefined, - onSubmit: () => undefined, - open: true, - products, -}; - -storiesOf("Generics / Assign product", module) - .addDecorator(Decorator) - .add("default", () => ); diff --git a/src/storybook/stories/components/AutocompleteSelectMenu.tsx b/src/storybook/stories/components/AutocompleteSelectMenu.tsx deleted file mode 100644 index e6f86144e..000000000 --- a/src/storybook/stories/components/AutocompleteSelectMenu.tsx +++ /dev/null @@ -1,114 +0,0 @@ -import { Card, CardContent } from "@material-ui/core"; -import AutocompleteSelectMenu, { - AutocompleteSelectMenuProps, -} from "@saleor/components/AutocompleteSelectMenu"; -import Form from "@saleor/components/Form"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import { getMenuItemByValue, IMenu } from "../../../utils/menu"; -import Decorator from "../../Decorator"; - -const menu: IMenu = [ - { - children: [], - data: null, - label: "Item 1", - value: "item1", - }, - { - children: [ - { - children: [], - data: null, - label: "Item 1.1", - value: "item1.1", - }, - { - children: [], - data: null, - label: "Item 1.2", - value: "item1.2", - }, - ], - data: null, - label: "Menu 1", - }, - { - children: [], - data: null, - label: "Item 3", - value: "item3", - }, - { - children: [], - data: null, - label: "Item 4", - value: "item4", - }, - { - children: [ - { - children: [], - data: null, - label: "Item 5.1", - value: "item5.1", - }, - { - children: [], - data: null, - label: "Item 5.2", - value: "item5.2", - }, - ], - data: null, - label: "Menu 5", - }, -]; - -const props: AutocompleteSelectMenuProps = { - disabled: false, - displayValue: menu[1].children[1].label.toString(), - error: false, - helperText: undefined, - label: "Autocomplete Menu", - loading: false, - name: "menu", - onChange: () => undefined, - options: menu, - placeholder: "Start typing to search ...", -}; - -storiesOf("Generics / Autocomplete Menu", module) - .addDecorator(storyFn => ( - - {storyFn()} - - )) - .addDecorator(Decorator) - .add("default", () => ) - .add("loading", () => ) - .add("error", () => ( - - )) - .add("interactive", () => ( -
- {({ change, data }) => ( - - )} - - )); diff --git a/src/storybook/stories/components/CardMenu.tsx b/src/storybook/stories/components/CardMenu.tsx deleted file mode 100644 index 08e95aa7d..000000000 --- a/src/storybook/stories/components/CardMenu.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import CardMenu, { CardMenuItem } from "@saleor/components/CardMenu"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import Decorator from "../../Decorator"; - -const menuItems: CardMenuItem[] = [ - { label: "Do this", onSelect: () => undefined }, - { label: "Or do this", onSelect: () => undefined }, - { label: "Or maybe this?", onSelect: () => undefined }, -]; - -storiesOf("Generics / Card menu", module) - .addDecorator(Decorator) - .add("default", () => ); diff --git a/src/storybook/stories/components/Checkbox.tsx b/src/storybook/stories/components/Checkbox.tsx deleted file mode 100644 index 071483a1f..000000000 --- a/src/storybook/stories/components/Checkbox.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import Checkbox, { CheckboxProps } from "@saleor/components/Checkbox"; -import Form from "@saleor/components/Form"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import CardDecorator from "../../CardDecorator"; -import Decorator from "../../Decorator"; - -const props: CheckboxProps = { - checked: false, - name: "data", -}; - -storiesOf("Generics / Checkbox", module) - .addDecorator(CardDecorator) - .addDecorator(Decorator) - .add("checked", () => ) - .add("unchecked", () => ) - .add("undeterminate", () => ) - .add("disabled", () => ) - .add("interactive", () => ( -
- {({ change, data }) => ( - - change({ - target: { - name: "data", - value: !data.data, - }, - } as any) - } - /> - )} - - )); diff --git a/src/storybook/stories/components/ColumnPicker.tsx b/src/storybook/stories/components/ColumnPicker.tsx deleted file mode 100644 index f91564c85..000000000 --- a/src/storybook/stories/components/ColumnPicker.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import ColumnPicker, { - ColumnPickerProps, -} from "@saleor/components/ColumnPicker"; -import { MultiAutocompleteChoiceType } from "@saleor/components/MultiAutocompleteSelectField"; -import CardDecorator from "@saleor/storybook/CardDecorator"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import Decorator from "../../Decorator"; - -const availableColumns: MultiAutocompleteChoiceType[] = [ - { label: "Name", value: "name" }, - { label: "Value", value: "value" }, - { label: "Type", value: "type" }, - { label: "Size", value: "size" }, - { label: "Status", value: "isPublished" }, - { label: "Price", value: "price" }, - { label: "Digital", value: "isDigital" }, - ...Array(15) - .fill(0) - .map((_, index) => ({ - label: "Attribute " + (index + 1), - value: "attribute_" + index, - })), -]; - -const props: ColumnPickerProps = { - availableColumns, - defaultColumns: [1, 3].map(index => availableColumns[index].value), - initialColumns: [1, 3, 4, 6].map(index => availableColumns[index].value), - initialOpen: true, - hasMore: false, - onFetchMore: () => undefined, - loading: false, - onSave: () => undefined, - query: "", - onQueryChange: () => undefined, -}; - -storiesOf("Generics / Column picker", module) - .addDecorator(storyFn => ( -
- {storyFn()} -
- )) - .addDecorator(CardDecorator) - .addDecorator(Decorator) - .add("default", () => ) - .add("loading", () => ); diff --git a/src/storybook/stories/components/Date.tsx b/src/storybook/stories/components/Date.tsx deleted file mode 100644 index 8a738d021..000000000 --- a/src/storybook/stories/components/Date.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import Date from "@saleor/components/Date"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import CardDecorator from "../../CardDecorator"; -import Decorator from "../../Decorator"; - -storiesOf("Generics / Date", module) - .addDecorator(CardDecorator) - .addDecorator(Decorator) - .add("default", () => ) - .add("plain", () => ); diff --git a/src/storybook/stories/components/DateTime.tsx b/src/storybook/stories/components/DateTime.tsx deleted file mode 100644 index 5035e7223..000000000 --- a/src/storybook/stories/components/DateTime.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { DateTime } from "@saleor/components/Date"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import CardDecorator from "../../CardDecorator"; -import Decorator from "../../Decorator"; - -storiesOf("Generics / DateTime", module) - .addDecorator(CardDecorator) - .addDecorator(Decorator) - .add("default", () => ) - .add("plain", () => ( - - )); diff --git a/src/storybook/stories/components/DeleteFilterTabDialog.tsx b/src/storybook/stories/components/DeleteFilterTabDialog.tsx deleted file mode 100644 index 66af65327..000000000 --- a/src/storybook/stories/components/DeleteFilterTabDialog.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import DeleteFilterTabDialog, { - DeleteFilterTabDialogProps, -} from "@saleor/components/DeleteFilterTabDialog"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import Decorator from "../../Decorator"; - -const props: DeleteFilterTabDialogProps = { - confirmButtonState: "default", - onClose: () => undefined, - onSubmit: () => undefined, - open: true, - tabName: "Out of stock", -}; - -storiesOf("Generics / Delete filter tab", module) - .addDecorator(Decorator) - .add("default", () => ); diff --git a/src/storybook/stories/components/EditableTableCell.tsx b/src/storybook/stories/components/EditableTableCell.tsx deleted file mode 100644 index 0d02cbd67..000000000 --- a/src/storybook/stories/components/EditableTableCell.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { TableBody, TableCell, TableHead } from "@material-ui/core"; -import EditableTableCell from "@saleor/components/EditableTableCell"; -import ResponsiveTable from "@saleor/components/ResponsiveTable"; -import TableRowLink from "@saleor/components/TableRowLink"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import CardDecorator from "../../CardDecorator"; -import Decorator from "../../Decorator"; - -storiesOf("Generics / EditableTableCell", module) - .addDecorator(CardDecorator) - .addDecorator(Decorator) - .add("default", () => ( - - - Some header - Some header - Some header - - - - Some value - undefined} - /> - Some value - - - - )); diff --git a/src/storybook/stories/components/ErrorMessageCard.tsx b/src/storybook/stories/components/ErrorMessageCard.tsx deleted file mode 100644 index b47d2a6f8..000000000 --- a/src/storybook/stories/components/ErrorMessageCard.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import ErrorMessageCard from "@saleor/components/ErrorMessageCard"; -import CardDecorator from "@saleor/storybook/CardDecorator"; -import Decorator from "@saleor/storybook/Decorator"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -storiesOf("Generics / ErrorMessageCard", module) - .addDecorator(CardDecorator) - .addDecorator(Decorator) - .add("default", () => ( - - )); diff --git a/src/storybook/stories/components/ExternalLink.tsx b/src/storybook/stories/components/ExternalLink.tsx deleted file mode 100644 index cb914903a..000000000 --- a/src/storybook/stories/components/ExternalLink.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import ExternalLink from "@saleor/components/ExternalLink"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import CardDecorator from "../../CardDecorator"; -import Decorator from "../../Decorator"; - -storiesOf("Generics / External Link", module) - .addDecorator(CardDecorator) - .addDecorator(Decorator) - .add("default", () => ( - Link to google.com - )) - .add("new tab", () => ( - - Link to google.com - - )); diff --git a/src/storybook/stories/components/Filter.tsx b/src/storybook/stories/components/Filter.tsx deleted file mode 100644 index 3e82ab07c..000000000 --- a/src/storybook/stories/components/Filter.tsx +++ /dev/null @@ -1,100 +0,0 @@ -import { FilterContent, FilterContentProps } from "@saleor/components/Filter"; -import useFilter from "@saleor/components/Filter/useFilter"; -import { - createDateField, - createKeyValueField, - createOptionsField, - createPriceField, -} from "@saleor/utils/filters/fields"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import Decorator from "../../Decorator"; - -const filtersData = [ - createPriceField("price", "Price", { - max: "100.00", - min: "20.00", - }), - { - ...createDateField("createdAt", "Created At", { - max: "2019-10-23", - min: "2019-09-09", - }), - active: true, - }, - { - ...createOptionsField("status", "Status", ["val1"], false, [ - { - label: "Value 1", - value: "val1", - }, - { - label: "Value 2", - value: "val2", - }, - { - label: "Value 3", - value: "val3", - }, - ]), - active: true, - }, - { - ...createOptionsField( - "multiplOptions", - "Multiple Options", - ["val1", "val2"], - true, - [ - { - label: "Value 1", - value: "val1", - }, - { - label: "Value 2", - value: "val2", - }, - { - label: "Value 3", - value: "val3", - }, - ], - ), - active: false, - }, - { - ...createKeyValueField("metadata", "Metadata", [ - { key: "123", value: "123" }, - ]), - }, -]; - -const props: FilterContentProps = { - filters: filtersData, - dataStructure: filtersData, - onClear: () => undefined, - onFilterPropertyChange: () => undefined, - onSubmit: () => undefined, -}; - -const InteractiveStory: React.FC = () => { - const [data, dispatchFilterActions, clear] = useFilter(props.filters); - - return ( - - ); -}; - -storiesOf("Generics / Filter", module) - .addDecorator(storyFn => ( -
{storyFn()}
- )) - .addDecorator(Decorator) - .add("default", () => ) - .add("interactive", () => ); diff --git a/src/storybook/stories/components/Money.tsx b/src/storybook/stories/components/Money.tsx deleted file mode 100644 index dda4b6b03..000000000 --- a/src/storybook/stories/components/Money.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import Money, { MoneyProps } from "@saleor/components/Money"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import CardDecorator from "../../CardDecorator"; -import Decorator from "../../Decorator"; - -const props: MoneyProps = { - money: { - amount: 14, - currency: "EUR", - }, -}; - -storiesOf("Generics / Money formatting", module) - .addDecorator(CardDecorator) - .addDecorator(Decorator) - .add("default", () => ); diff --git a/src/storybook/stories/components/MoneyRange.tsx b/src/storybook/stories/components/MoneyRange.tsx deleted file mode 100644 index 053fab905..000000000 --- a/src/storybook/stories/components/MoneyRange.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import MoneyRange, { MoneyRangeProps } from "@saleor/components/MoneyRange"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import CardDecorator from "../../CardDecorator"; -import Decorator from "../../Decorator"; - -const props: MoneyRangeProps = { - from: { - amount: 5.2, - currency: "USD", - }, - to: { - amount: 10.6, - currency: "USD", - }, -}; - -storiesOf("Generics / Money range", module) - .addDecorator(CardDecorator) - .addDecorator(Decorator) - .add("from", () => ) - .add("to", () => ) - .add("range", () => ); diff --git a/src/storybook/stories/components/MultiSelectField.tsx b/src/storybook/stories/components/MultiSelectField.tsx deleted file mode 100644 index 22ff30f89..000000000 --- a/src/storybook/stories/components/MultiSelectField.tsx +++ /dev/null @@ -1,81 +0,0 @@ -import Form from "@saleor/components/Form"; -import MultiSelectField from "@saleor/components/MultiSelectField"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import CardDecorator from "../../CardDecorator"; -import Decorator from "../../Decorator"; - -const choices = [ - { label: "Apparel", value: "1" }, - { label: "Groceries", value: "2" }, - { label: "Books", value: "3" }, - { label: "Accessories", value: "4" }, -]; - -storiesOf("Generics / MultiSelectField", module) - .addDecorator(CardDecorator) - .addDecorator(Decorator) - .add("with no value", () => ( - - )) - .add("with value", () => ( - - )) - .add("with label", () => ( - - )) - .add("with hint", () => ( - - )) - .add("with label and hint", () => ( - - )) - .add("with value, label and hint", () => ( - - )) - .add("with error hint", () => ( - - )) - .add("interactive", () => ( -
- {({ change, data }) => ( - - )} - - )); diff --git a/src/storybook/stories/components/PageHeader.tsx b/src/storybook/stories/components/PageHeader.tsx deleted file mode 100644 index 474ec4d94..000000000 --- a/src/storybook/stories/components/PageHeader.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import PageHeader from "@saleor/components/PageHeader"; -import { DeleteIcon, IconButton } from "@saleor/macaw-ui"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import Decorator from "../../Decorator"; - -storiesOf("Generics / PageHeader", module) - .addDecorator(Decorator) - .add("without title", () => ) - .add("with title", () => ) - .add("with title icon bar", () => ( - - - - - - )); diff --git a/src/storybook/stories/components/Percent.tsx b/src/storybook/stories/components/Percent.tsx deleted file mode 100644 index 9beead514..000000000 --- a/src/storybook/stories/components/Percent.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import Percent from "@saleor/components/Percent"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import CardDecorator from "../../CardDecorator"; -import Decorator from "../../Decorator"; - -storiesOf("Generics / Percent formatting", module) - .addDecorator(CardDecorator) - .addDecorator(Decorator) - .add("default", () => ); diff --git a/src/storybook/stories/components/PhoneField.tsx b/src/storybook/stories/components/PhoneField.tsx deleted file mode 100644 index 3e5d8bb87..000000000 --- a/src/storybook/stories/components/PhoneField.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import PhoneField from "@saleor/components/PhoneField"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import { prefixes } from "../../../orders/fixtures"; -import CardDecorator from "../../CardDecorator"; -import Decorator from "../../Decorator"; - -storiesOf("Generics / PhoneField", module) - .addDecorator(CardDecorator) - .addDecorator(Decorator) - .add("default", () => ( - - )); diff --git a/src/storybook/stories/components/PriceField.tsx b/src/storybook/stories/components/PriceField.tsx deleted file mode 100644 index 55c2a7b94..000000000 --- a/src/storybook/stories/components/PriceField.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import PriceField from "@saleor/components/PriceField"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import CardDecorator from "../../CardDecorator"; -import Decorator from "../../Decorator"; - -storiesOf("Generics / Price input", module) - .addDecorator(CardDecorator) - .addDecorator(Decorator) - .add("with no value", () => ) - .add("with value", () => ) - .add("with label", () => ( - - )) - .add("with hint", () => ( - - )) - .add("with currency symbol", () => ( - - )) - .add("disabled", () => ) - .add("with label and hint", () => ( - - )) - .add("with value, label, currency symbol and hint", () => ( - - )) - .add("with value, label, currency symbol and error", () => ( - - )); diff --git a/src/storybook/stories/components/SaveFilterTabDialog.tsx b/src/storybook/stories/components/SaveFilterTabDialog.tsx deleted file mode 100644 index 05ed52c29..000000000 --- a/src/storybook/stories/components/SaveFilterTabDialog.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import SaveFilterTabDialog, { - SaveFilterTabDialogProps, -} from "@saleor/components/SaveFilterTabDialog"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import Decorator from "../../Decorator"; - -const props: SaveFilterTabDialogProps = { - confirmButtonState: "default", - onClose: () => undefined, - onSubmit: () => undefined, - open: true, -}; - -storiesOf("Generics / Save filter tab", module) - .addDecorator(Decorator) - .add("default", () => ); diff --git a/src/storybook/stories/components/SingleSelectField.tsx b/src/storybook/stories/components/SingleSelectField.tsx deleted file mode 100644 index 166325db2..000000000 --- a/src/storybook/stories/components/SingleSelectField.tsx +++ /dev/null @@ -1,102 +0,0 @@ -import SingleSelectField from "@saleor/components/SingleSelectField"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import CardDecorator from "../../CardDecorator"; -import Decorator from "../../Decorator"; - -const choices = [ - { label: "Apparel", value: "1" }, - { label: "Groceries", value: "2" }, - { label: "Books", value: "3" }, - { label: "Accessories", value: "4" }, -]; - -const manyChoices = [ - { label: "Apparel", value: "1" }, - { label: "Groceries", value: "2" }, - { label: "Books", value: "3" }, - { label: "Accessories", value: "4" }, - { label: "Audiobooks", value: "5" }, - { label: "Bananas", value: "6" }, - { label: "Apples", value: "7" }, - { label: "Fridge", value: "8" }, - { label: "PCs", value: "9" }, - { label: "Music", value: "10" }, - { label: "Clothes", value: "11" }, - { label: "Smartphones", value: "12" }, - { label: "Keyboards", value: "13" }, - { label: "LEDs", value: "14" }, - { label: "Cars", value: "15" }, - { label: "Petrol", value: "16" }, -]; - -const disabledChoices = [ - { label: "Apparel", value: "1" }, - { label: "Groceries", value: "2", disabled: true }, - { label: "Books", value: "3", disabled: true }, - { label: "Accessories", value: "4" }, -]; - -storiesOf("Generics / SingleSelectField", module) - .addDecorator(CardDecorator) - .addDecorator(Decorator) - .add("with no value", () => ( - - )) - .add("with value", () => ( - - )) - .add("with many values", () => ( - - )) - .add("with label", () => ( - - )) - .add("with hint", () => ( - - )) - .add("with label and hint", () => ( - - )) - .add("with value, label and hint", () => ( - - )) - .add("with error hint", () => ( - - )) - .add("with disabled options", () => ( - - )); diff --git a/src/storybook/stories/components/Skeleton.tsx b/src/storybook/stories/components/Skeleton.tsx deleted file mode 100644 index 8a3c2318a..000000000 --- a/src/storybook/stories/components/Skeleton.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import Skeleton from "@saleor/components/Skeleton"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import CardDecorator from "../../CardDecorator"; -import Decorator from "../../Decorator"; - -storiesOf("Generics / Skeleton", module) - .addDecorator(CardDecorator) - .addDecorator(Decorator) - .add("default", () => ); diff --git a/src/storybook/stories/components/TablePagination.tsx b/src/storybook/stories/components/TablePagination.tsx deleted file mode 100644 index d90f34316..000000000 --- a/src/storybook/stories/components/TablePagination.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import ResponsiveTable from "@saleor/components/ResponsiveTable"; -import TablePagination from "@saleor/components/TablePagination"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import CardDecorator from "../../CardDecorator"; -import Decorator from "../../Decorator"; - -storiesOf("Generics / TablePagination", module) - .addDecorator(CardDecorator) - .addDecorator(Decorator) - .add("no previous / next page", () => ( - - - - )) - .add("previous page available", () => ( - - - - )) - .add("next page available", () => ( - - - - )) - .add("both previous and next pages are available", () => ( - - - - )); diff --git a/src/storybook/stories/components/Timeline.tsx b/src/storybook/stories/components/Timeline.tsx deleted file mode 100644 index 0f46c9cb4..000000000 --- a/src/storybook/stories/components/Timeline.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import Timeline, { - TimelineEvent, - TimelineNote, -} from "@saleor/components/Timeline"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import Decorator from "../../Decorator"; - -storiesOf("Generics / Timeline", module) - .addDecorator(Decorator) - .add("default", () => ( - - - - - - )) - .add("with expansion panels", () => ( - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse - malesuada lacus ex, sit amet blandit leo lobortis eget. - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse - malesuada lacus ex, sit amet blandit leo lobortis eget. - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse - malesuada lacus ex, sit amet blandit leo lobortis eget. - - - )) - .add("with order notes", () => ( - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse - malesuada lacus ex, sit amet blandit leo lobortis eget. - - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse - malesuada lacus ex, sit amet blandit leo lobortis eget. - - - )); diff --git a/src/storybook/stories/components/Weight.tsx b/src/storybook/stories/components/Weight.tsx deleted file mode 100644 index f5b9d5587..000000000 --- a/src/storybook/stories/components/Weight.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import Weight, { WeightProps } from "@saleor/components/Weight"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import CardDecorator from "../../CardDecorator"; -import Decorator from "../../Decorator"; - -const props: WeightProps = { - weight: { - unit: "kg", - value: 8.4, - }, -}; - -storiesOf("Generics / Weight", module) - .addDecorator(CardDecorator) - .addDecorator(Decorator) - .add("default", () => ); diff --git a/src/storybook/stories/components/WeightRange.tsx b/src/storybook/stories/components/WeightRange.tsx deleted file mode 100644 index 16414fcb2..000000000 --- a/src/storybook/stories/components/WeightRange.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import WeightRange, { WeightRangeProps } from "@saleor/components/WeightRange"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import CardDecorator from "../../CardDecorator"; -import Decorator from "../../Decorator"; - -const props: WeightRangeProps = { - from: { - unit: "kg", - value: 4.2, - }, - to: { - unit: "kg", - value: 81.9, - }, -}; - -storiesOf("Generics / Weight range", module) - .addDecorator(CardDecorator) - .addDecorator(Decorator) - .add("from", () => ) - .add("to", () => ) - .add("range", () => ); diff --git a/src/storybook/stories/components/messages.tsx b/src/storybook/stories/components/messages.tsx deleted file mode 100644 index 9e3b76336..000000000 --- a/src/storybook/stories/components/messages.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import { Button } from "@saleor/components/Button"; -import { IMessage } from "@saleor/components/messages"; -import useNotifier from "@saleor/hooks/useNotifier"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import CardDecorator from "../../CardDecorator"; -import Decorator from "../../Decorator"; - -const props = { - text: "This is message", - title: "Title", -}; -const Story: React.FC = ({ - actionBtn, - expandText, - onUndo, - status, - title, - text, -}) => { - const pushMessage = useNotifier(); - - return ( - - ); -}; - -storiesOf("Generics / Global messages", module) - .addDecorator(CardDecorator) - .addDecorator(Decorator) - .add("default", () => ) - .add("with action", () => ( - undefined, label: "Action" }} - {...props} - /> - )) - .add("with success status", () => ( - - )) - .add("with error status", () => ( - - )) - .add("with warning status", () => ( - - )); diff --git a/src/storybook/stories/customers/CustomerAddressDialog.tsx b/src/storybook/stories/customers/CustomerAddressDialog.tsx deleted file mode 100644 index 238183bef..000000000 --- a/src/storybook/stories/customers/CustomerAddressDialog.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import CustomerAddressDialog, { - CustomerAddressDialogProps, -} from "../../../customers/components/CustomerAddressDialog"; -import { customer } from "../../../customers/fixtures"; -import { countries } from "../../../fixtures"; -import Decorator from "../../Decorator"; - -const props: CustomerAddressDialogProps = { - address: customer.addresses[0], - confirmButtonState: "default", - countries: countries.map(c => ({ - __typename: "CountryDisplay", - code: c.code, - country: c.name, - })), - errors: [], - onClose: () => undefined, - onConfirm: () => undefined, - open: true, - variant: "create", -}; - -storiesOf("Customers / Address editing dialog", module) - .addDecorator(Decorator) - .add("default", () => ) - .add("edit", () => ); diff --git a/src/storybook/stories/discounts/DiscountCountrySelectDialog.tsx b/src/storybook/stories/discounts/DiscountCountrySelectDialog.tsx deleted file mode 100644 index 741e5923b..000000000 --- a/src/storybook/stories/discounts/DiscountCountrySelectDialog.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import DiscountCountrySelectDialog, { - DiscountCountrySelectDialogProps, -} from "../../../discounts/components/DiscountCountrySelectDialog"; -import Decorator from "../../Decorator"; - -const props: DiscountCountrySelectDialogProps = { - confirmButtonState: "default", - countries: [ - { __typename: "CountryDisplay", code: "AF", country: "Afghanistan" }, - { __typename: "CountryDisplay", code: "AX", country: "Åland Islands" }, - { __typename: "CountryDisplay", code: "AL", country: "Albania" }, - { __typename: "CountryDisplay", code: "DZ", country: "Algeria" }, - { __typename: "CountryDisplay", code: "AS", country: "American Samoa" }, - ], - initial: ["AX", "AL"], - onClose: () => undefined, - onConfirm: () => undefined, - open: true, -}; - -storiesOf("Discounts / Select countries", module) - .addDecorator(Decorator) - .add("default", () => ); diff --git a/src/storybook/stories/navigation/MenuCreateDialog.tsx b/src/storybook/stories/navigation/MenuCreateDialog.tsx deleted file mode 100644 index 0f6a7354f..000000000 --- a/src/storybook/stories/navigation/MenuCreateDialog.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { MenuErrorCode } from "@saleor/graphql"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import MenuCreateDialog, { - MenuCreateDialogProps, -} from "../../../navigation/components/MenuCreateDialog"; -import Decorator from "../../Decorator"; - -const props: MenuCreateDialogProps = { - confirmButtonState: "default", - disabled: false, - errors: [], - onClose: () => undefined, - onConfirm: () => undefined, - open: true, -}; - -storiesOf("Navigation / Menu create", module) - .addDecorator(Decorator) - .add("default", () => ) - .add("loading", () => ( - - )) - .add("form errors", () => ( - ({ - __typename: "MenuError", - code: MenuErrorCode.INVALID, - field, - message: "Invalid field", - }))} - /> - )); diff --git a/src/storybook/stories/navigation/MenuItemDialog.tsx b/src/storybook/stories/navigation/MenuItemDialog.tsx deleted file mode 100644 index 479b0cd2e..000000000 --- a/src/storybook/stories/navigation/MenuItemDialog.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import { MenuErrorCode } from "@saleor/graphql"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import MenuItemDialog, { - MenuItemDialogProps, -} from "../../../navigation/components/MenuItemDialog"; -import Decorator from "../../Decorator"; - -const props: MenuItemDialogProps = { - categories: [ - { - __typename: "Category", - id: "1", - name: "Chairs", - }, - { - __typename: "Category", - id: "2", - name: "Desks", - }, - ], - collections: [], - confirmButtonState: "default", - disabled: false, - errors: [], - loading: false, - onClose: () => undefined, - onQueryChange: () => undefined, - onSubmit: () => undefined, - open: true, - pages: [], -}; - -storiesOf("Navigation / Menu item", module) - .addDecorator(Decorator) - .add("default", () => ) - .add("edit", () => ( - - )) - .add("errors", () => ( - ({ - __typename: "MenuError", - code: MenuErrorCode.INVALID, - field, - message: "Invalid field", - }))} - /> - )); diff --git a/src/storybook/stories/orders/OrderBulkCancelDialog.tsx b/src/storybook/stories/orders/OrderBulkCancelDialog.tsx deleted file mode 100644 index 9feac7cef..000000000 --- a/src/storybook/stories/orders/OrderBulkCancelDialog.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import OrderBulkCancelDialog, { - OrderBulkCancelDialogProps, -} from "../../../orders/components/OrderBulkCancelDialog"; -import Decorator from "../../Decorator"; - -const props: OrderBulkCancelDialogProps = { - confirmButtonState: "default", - numberOfOrders: "10", - onClose: () => undefined, - onConfirm: () => undefined, - open: true, -}; - -storiesOf("Orders / OrderBulkCancelDialog", module) - .addDecorator(Decorator) - .add("default", () => ); diff --git a/src/storybook/stories/orders/OrderCancelDialog.tsx b/src/storybook/stories/orders/OrderCancelDialog.tsx deleted file mode 100644 index f3b29942a..000000000 --- a/src/storybook/stories/orders/OrderCancelDialog.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import { OrderErrorCode } from "@saleor/graphql"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import OrderCancelDialog, { - OrderCancelDialogProps, -} from "../../../orders/components/OrderCancelDialog"; -import Decorator from "../../Decorator"; - -const props: OrderCancelDialogProps = { - confirmButtonState: "default", - errors: [], - number: "123", - onClose: () => undefined, - onSubmit: () => undefined, - open: true, -}; - -storiesOf("Orders / OrderCancelDialog", module) - .addDecorator(Decorator) - .add("default", () => ( - - )) - .add("errors", () => ( - - )); diff --git a/src/storybook/stories/orders/OrderCustomer.tsx b/src/storybook/stories/orders/OrderCustomer.tsx deleted file mode 100644 index 8e62f4a9c..000000000 --- a/src/storybook/stories/orders/OrderCustomer.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import OrderCustomerComponent, { - OrderCustomerProps, -} from "../../../orders/components/OrderCustomer"; -import { clients, order as orderFixture } from "../../../orders/fixtures"; -import Decorator from "../../Decorator"; -import { MockedUserProvider } from "../customers/MockedUserProvider"; - -const order = orderFixture(""); - -const props: Omit = { - canEditAddresses: false, - canEditCustomer: true, - fetchUsers: () => undefined, - onBillingAddressEdit: undefined, - onCustomerEdit: undefined, - onProfileView: () => undefined, - onShippingAddressEdit: undefined, - order, - users: clients, - errors: [], -}; - -const OrderCustomer = props => { - const customPermissions = props?.customPermissions; - - return ( - - - - ); -}; - -storiesOf("Orders / OrderCustomer", module) - .addDecorator(Decorator) - .add("default", () => ) - .add("loading", () => ) - .add("with different addresses", () => ( - - )) - .add("editable", () => ( - - )) - .add("no user permissions", () => ( - - )); diff --git a/src/storybook/stories/orders/OrderDraftCancelDialog.tsx b/src/storybook/stories/orders/OrderDraftCancelDialog.tsx deleted file mode 100644 index a18787d33..000000000 --- a/src/storybook/stories/orders/OrderDraftCancelDialog.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { OrderErrorCode } from "@saleor/graphql"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import OrderDraftCancelDialog, { - OrderDraftCancelDialogProps, -} from "../../../orders/components/OrderDraftCancelDialog"; -import Decorator from "../../Decorator"; - -const props: OrderDraftCancelDialogProps = { - confirmButtonState: "default", - errors: [], - onClose: () => undefined, - onConfirm: () => undefined, - open: true, - orderNumber: "4", -}; - -storiesOf("Orders / OrderDraftCancelDialog", module) - .addDecorator(Decorator) - .add("default", () => ) - .add("errors", () => ( - - )); diff --git a/src/storybook/stories/orders/OrderFulfillmentCancelDialog.tsx b/src/storybook/stories/orders/OrderFulfillmentCancelDialog.tsx deleted file mode 100644 index 0111e68cb..000000000 --- a/src/storybook/stories/orders/OrderFulfillmentCancelDialog.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { OrderErrorCode } from "@saleor/graphql"; -import { warehouseList } from "@saleor/warehouses/fixtures"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import OrderFulfillmentCancelDialog, { - OrderFulfillmentCancelDialogProps, -} from "../../../orders/components/OrderFulfillmentCancelDialog"; -import Decorator from "../../Decorator"; - -const props: OrderFulfillmentCancelDialogProps = { - confirmButtonState: "default", - errors: [], - onClose: () => undefined, - onConfirm: () => undefined, - open: true, - warehouses: warehouseList, -}; - -storiesOf("Orders / OrderFulfillmentCancelDialog", module) - .addDecorator(Decorator) - .add("default", () => ) - .add("error", () => ( - - )); diff --git a/src/storybook/stories/orders/OrderFulfillmentTrackingDialog.tsx b/src/storybook/stories/orders/OrderFulfillmentTrackingDialog.tsx deleted file mode 100644 index 84abdbffe..000000000 --- a/src/storybook/stories/orders/OrderFulfillmentTrackingDialog.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import { OrderErrorCode } from "@saleor/graphql"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import OrderFulfillmentTrackingDialog, { - OrderFulfillmentTrackingDialogProps, -} from "../../../orders/components/OrderFulfillmentTrackingDialog"; -import Decorator from "../../Decorator"; - -const props: OrderFulfillmentTrackingDialogProps = { - confirmButtonState: "default", - errors: [], - onClose: () => undefined, - onConfirm: () => undefined, - open: true, - trackingNumber: "21kn7526v1", -}; - -storiesOf("Orders / OrderFulfillmentTrackingDialog", module) - .addDecorator(Decorator) - .add("default", () => ) - .add("errors", () => ( - - )); diff --git a/src/storybook/stories/orders/OrderHistory.tsx b/src/storybook/stories/orders/OrderHistory.tsx deleted file mode 100644 index 08bae3280..000000000 --- a/src/storybook/stories/orders/OrderHistory.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import OrderHistory from "../../../orders/components/OrderHistory"; -import { order as orderFixture } from "../../../orders/fixtures"; -import Decorator from "../../Decorator"; - -const order = orderFixture(""); - -storiesOf("Orders / OrderHistory", module) - .addDecorator(Decorator) - .add("default", () => ( - - )); diff --git a/src/storybook/stories/orders/OrderInvoiceList.tsx b/src/storybook/stories/orders/OrderInvoiceList.tsx deleted file mode 100644 index cfad97cc1..000000000 --- a/src/storybook/stories/orders/OrderInvoiceList.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import OrderInvoiceList, { - OrderInvoiceListProps, -} from "@saleor/orders/components/OrderInvoiceList"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import { invoices } from "../../../orders/fixtures"; -import Decorator from "../../Decorator"; - -const props: OrderInvoiceListProps = { - invoices: undefined, - onInvoiceClick: () => undefined, - onInvoiceGenerate: () => undefined, - onInvoiceSend: () => undefined, -}; - -storiesOf("Orders / OrderInvoiceList", module) - .addDecorator(Decorator) - .add("with invoices", () => ( - - )) - .add("without invoices", () => ) - .add("loading", () => ); diff --git a/src/storybook/stories/orders/OrderMarkAsPaidDialog.tsx b/src/storybook/stories/orders/OrderMarkAsPaidDialog.tsx deleted file mode 100644 index 57cd3808d..000000000 --- a/src/storybook/stories/orders/OrderMarkAsPaidDialog.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { OrderErrorCode } from "@saleor/graphql"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import OrderMarkAsPaidDialog, { - OrderMarkAsPaidDialogProps, -} from "../../../orders/components/OrderMarkAsPaidDialog"; -import Decorator from "../../Decorator"; - -const props: OrderMarkAsPaidDialogProps = { - confirmButtonState: "default", - errors: [], - handleTransactionReference: () => undefined, - onClose: () => undefined, - onConfirm: () => undefined, - open: true, - transactionReference: "", -}; - -storiesOf("Orders / OrderMarkAsPaidDialog", module) - .addDecorator(Decorator) - .add("default", () => ) - .add("errors", () => ( - - )); diff --git a/src/storybook/stories/orders/OrderPaymentDialog.tsx b/src/storybook/stories/orders/OrderPaymentDialog.tsx deleted file mode 100644 index 4c375831c..000000000 --- a/src/storybook/stories/orders/OrderPaymentDialog.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import { OrderErrorCode } from "@saleor/graphql"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import OrderPaymentDialog, { - OrderPaymentDialogProps, -} from "../../../orders/components/OrderPaymentDialog"; -import Decorator from "../../Decorator"; - -const props: OrderPaymentDialogProps = { - confirmButtonState: "default", - errors: [], - initial: 0, - onClose: () => undefined, - onSubmit: () => undefined, - open: true, -}; - -storiesOf("Orders / OrderPaymentDialog", module) - .addDecorator(Decorator) - .add("capture payment", () => ) - .add("errors", () => ( - - )); diff --git a/src/storybook/stories/orders/OrderPaymentVoidDialog.tsx b/src/storybook/stories/orders/OrderPaymentVoidDialog.tsx deleted file mode 100644 index 4295f1996..000000000 --- a/src/storybook/stories/orders/OrderPaymentVoidDialog.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { OrderErrorCode } from "@saleor/graphql"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import OrderPaymentVoidDialog, { - OrderPaymentVoidDialogProps, -} from "../../../orders/components/OrderPaymentVoidDialog"; -import Decorator from "../../Decorator"; - -const props: OrderPaymentVoidDialogProps = { - confirmButtonState: "default", - errors: [], - onClose: () => undefined, - onConfirm: () => undefined, - open: true, -}; - -storiesOf("Orders / OrderPaymentVoidDialog", module) - .addDecorator(Decorator) - .add("default", () => ) - .add("errors", () => ( - - )); diff --git a/src/storybook/stories/orders/OrderProductAddDialog.tsx b/src/storybook/stories/orders/OrderProductAddDialog.tsx deleted file mode 100644 index 97febdba5..000000000 --- a/src/storybook/stories/orders/OrderProductAddDialog.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import placeholderImage from "@assets/images/placeholder60x60.png"; -import { fetchMoreProps } from "@saleor/fixtures"; -import { OrderErrorCode } from "@saleor/graphql"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import OrderProductAddDialog, { - OrderProductAddDialogProps, -} from "../../../orders/components/OrderProductAddDialog"; -import { orderLineSearch } from "../../../orders/fixtures"; -import Decorator from "../../Decorator"; - -const products = orderLineSearch(placeholderImage); - -const props: OrderProductAddDialogProps = { - ...fetchMoreProps, - confirmButtonState: "default", - errors: [], - onClose: () => undefined, - onFetch: () => undefined, - onSubmit: () => undefined, - open: true, - products, -}; - -storiesOf("Orders / OrderProductAddDialog", module) - .addDecorator(Decorator) - .add("default", () => ) - .add("errors", () => ( - - )); diff --git a/src/storybook/stories/orders/OrderShippingMethodEditDialog.tsx b/src/storybook/stories/orders/OrderShippingMethodEditDialog.tsx deleted file mode 100644 index 0dfa3506e..000000000 --- a/src/storybook/stories/orders/OrderShippingMethodEditDialog.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { OrderErrorCode } from "@saleor/graphql"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import OrderShippingMethodEditDialog, { - OrderShippingMethodEditDialogProps, -} from "../../../orders/components/OrderShippingMethodEditDialog"; -import { order as orderFixture } from "../../../orders/fixtures"; -import Decorator from "../../Decorator"; - -const order = orderFixture(""); -const props: OrderShippingMethodEditDialogProps = { - confirmButtonState: "default", - errors: [], - onClose: () => undefined, - onSubmit: () => undefined, - open: true, - shippingMethod: null, - shippingMethods: order.shippingMethods, -}; - -storiesOf("Orders / OrderShippingMethodEditDialog", module) - .addDecorator(Decorator) - .add("default", () => ) - .add("errors", () => ( - - )); diff --git a/src/storybook/stories/products/ProductVariantImageSelectDialog.tsx b/src/storybook/stories/products/ProductVariantImageSelectDialog.tsx deleted file mode 100644 index a038952ca..000000000 --- a/src/storybook/stories/products/ProductVariantImageSelectDialog.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import placeholderImage from "@assets/images/placeholder255x255.png"; -import Decorator from "@saleor/storybook/Decorator"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import ProductVariantMediaSelectDialog from "../../../products/components/ProductVariantImageSelectDialog"; -import { - variantMedia as variantImagesFixture, - variantProductImages as variantProductImagesFixture, -} from "../../../products/fixtures"; - -const variantImages = variantImagesFixture(placeholderImage); -const variantProductImages = variantProductImagesFixture(placeholderImage); - -storiesOf("Products / ProductVariantImageSelectDialog", module) - .addDecorator(Decorator) - .add("default", () => ( - image.id)} - onClose={() => undefined} - onConfirm={() => undefined} - open={true} - /> - )); diff --git a/src/storybook/stories/shipping/ShippingZoneCountriesAssignDialog.tsx b/src/storybook/stories/shipping/ShippingZoneCountriesAssignDialog.tsx deleted file mode 100644 index a6b8629b0..000000000 --- a/src/storybook/stories/shipping/ShippingZoneCountriesAssignDialog.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { countries } from "@saleor/fixtures"; -import { mapCountriesToCountriesCodes } from "@saleor/utils/maps"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import ShippingZoneCountriesAssignDialog, { - ShippingZoneCountriesAssignDialogProps, -} from "../../../shipping/components/ShippingZoneCountriesAssignDialog"; -import Decorator from "../../Decorator"; - -const initialCountries = ["PL", "GB", "DE"]; - -const mappedCountries = countries.map(({ code, name }) => ({ - __typename: "CountryDisplay" as const, - code, - country: name, -})); - -const props: ShippingZoneCountriesAssignDialogProps = { - confirmButtonState: "default", - countries: mappedCountries, - restWorldCountries: mapCountriesToCountriesCodes(countries).filter( - countryCode => !initialCountries.includes(countryCode), - ), - initial: initialCountries, - onClose: () => undefined, - onConfirm: () => undefined, - open: true, -}; - -storiesOf("Shipping / Assign countries", module) - .addDecorator(Decorator) - .add("default", () => ) - .add("all countries in shipping zones", () => ( - - )); diff --git a/src/taxes/pages/TaxChannelsPage/TaxChannelsPage.stories.tsx b/src/taxes/pages/TaxChannelsPage/TaxChannelsPage.stories.tsx index 74c50dfc0..40b0e547e 100644 --- a/src/taxes/pages/TaxChannelsPage/TaxChannelsPage.stories.tsx +++ b/src/taxes/pages/TaxChannelsPage/TaxChannelsPage.stories.tsx @@ -28,7 +28,7 @@ const props = { disabled: false, }; -storiesOf("Views / Taxes / Channels view", module) +storiesOf("Taxes / Channels view", module) .addDecorator(Decorator) .add("loading", () => ( diff --git a/src/taxes/pages/TaxClassesPage/TaxClassesPage.stories.tsx b/src/taxes/pages/TaxClassesPage/TaxClassesPage.stories.tsx index 9e2f0a940..514fc3876 100644 --- a/src/taxes/pages/TaxClassesPage/TaxClassesPage.stories.tsx +++ b/src/taxes/pages/TaxClassesPage/TaxClassesPage.stories.tsx @@ -17,7 +17,7 @@ const props = { onTaxClassDelete: () => undefined, }; -storiesOf("Views / Taxes / Tax classes view", module) +storiesOf("Taxes / Tax classes view", module) .addDecorator(Decorator) .add("loading", () => ) .add("default", () => ); diff --git a/src/taxes/pages/TaxCountriesPage/TaxCountriesPage.stories.tsx b/src/taxes/pages/TaxCountriesPage/TaxCountriesPage.stories.tsx index 1f0d1979a..79ed0b999 100644 --- a/src/taxes/pages/TaxCountriesPage/TaxCountriesPage.stories.tsx +++ b/src/taxes/pages/TaxCountriesPage/TaxCountriesPage.stories.tsx @@ -16,7 +16,7 @@ const props: TaxCountriesPageProps = { disabled: false, }; -storiesOf("Views / Taxes / Countries view", module) +storiesOf("Taxes / Countries view", module) .addDecorator(Decorator) .add("loading", () => ( diff --git a/src/storybook/stories/translations/TranslationsEntitiesListPage.tsx b/src/translations/components/TranslationsEntitiesListPage/TranslationsEntitiesListPage.stories.tsx similarity index 81% rename from src/storybook/stories/translations/TranslationsEntitiesListPage.tsx rename to src/translations/components/TranslationsEntitiesListPage/TranslationsEntitiesListPage.stories.tsx index 27ced42b5..87d58135e 100644 --- a/src/storybook/stories/translations/TranslationsEntitiesListPage.tsx +++ b/src/translations/components/TranslationsEntitiesListPage/TranslationsEntitiesListPage.stories.tsx @@ -1,14 +1,14 @@ +import { pageListProps, searchPageProps } from "@saleor/fixtures"; import { LanguageCodeEnum } from "@saleor/graphql"; +import Decorator from "@saleor/storybook/Decorator"; import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator"; import { storiesOf } from "@storybook/react"; import React from "react"; -import { pageListProps, searchPageProps } from "../../../fixtures"; -import TranslationsEntitiesList from "../../../translations/components/TranslationsEntitiesList"; +import TranslationsEntitiesList from "../TranslationsEntitiesList"; import TranslationsEntitiesListPage, { TranslationsEntitiesListPageProps, -} from "../../../translations/components/TranslationsEntitiesListPage"; -import Decorator from "../../Decorator"; +} from "./TranslationsEntitiesListPage"; const props: TranslationsEntitiesListPageProps = { ...pageListProps.default, @@ -33,7 +33,7 @@ const props: TranslationsEntitiesListPageProps = { }, }; -storiesOf("Views / Translations / Entity list", module) +storiesOf("Translations / Entity list", module) .addDecorator(Decorator) .addDecorator(PaginatorContextDecorator) .add("default", () => ( diff --git a/src/storybook/stories/translations/TranslationsLanguageListPage.tsx b/src/translations/components/TranslationsLanguageListPage/TranslationsLanguageListPage.stories.tsx similarity index 86% rename from src/storybook/stories/translations/TranslationsLanguageListPage.tsx rename to src/translations/components/TranslationsLanguageListPage/TranslationsLanguageListPage.stories.tsx index 467e9ed7a..736c73c9c 100644 --- a/src/storybook/stories/translations/TranslationsLanguageListPage.tsx +++ b/src/translations/components/TranslationsLanguageListPage/TranslationsLanguageListPage.stories.tsx @@ -1,3 +1,4 @@ +import Decorator from "@saleor/storybook/Decorator"; import { storiesOf } from "@storybook/react"; import React from "react"; @@ -5,13 +6,12 @@ import TranslationsLanguageListPage, { TranslationsLanguageListPageProps, } from "../../../translations/components/TranslationsLanguageListPage"; import { languages } from "../../../translations/fixtures"; -import Decorator from "../../Decorator"; const props: TranslationsLanguageListPageProps = { languages, }; -storiesOf("Views / Translations / Language list", module) +storiesOf("Translations / Language list", module) .addDecorator(Decorator) .add("default", () => ) .add("loading", () => ( diff --git a/src/translations/components/TranslationsLanguageListPage/TranslationsLanguageListPage.tsx b/src/translations/components/TranslationsLanguageListPage/TranslationsLanguageListPage.tsx index 2a633d318..4934d6b5b 100644 --- a/src/translations/components/TranslationsLanguageListPage/TranslationsLanguageListPage.tsx +++ b/src/translations/components/TranslationsLanguageListPage/TranslationsLanguageListPage.tsx @@ -1,6 +1,5 @@ import Container from "@saleor/components/Container"; import PageHeader from "@saleor/components/PageHeader"; -// tslint:disable no-submodule-imports import { LanguageFragment } from "@saleor/graphql"; import React from "react"; import { useIntl } from "react-intl"; @@ -23,16 +22,7 @@ const TranslationsLanguageListPage: React.FC id: "GsBRWL", defaultMessage: "Languages", })} - > - {/* */} - + > ); diff --git a/src/warehouses/components/WarehouseCreatePage/WarehouseCreatePage.stories.tsx b/src/warehouses/components/WarehouseCreatePage/WarehouseCreatePage.stories.tsx index 56223b178..fc2f5db69 100644 --- a/src/warehouses/components/WarehouseCreatePage/WarehouseCreatePage.stories.tsx +++ b/src/warehouses/components/WarehouseCreatePage/WarehouseCreatePage.stories.tsx @@ -20,7 +20,7 @@ const props: WarehouseCreatePageProps = { onSubmit: () => undefined, saveButtonBarState: "default", }; -storiesOf("Views / Warehouses / Create warehouse", module) +storiesOf("Warehouses / Create warehouse", module) .addDecorator(Decorator) .add("default", () => ) .add("loading", () => ) diff --git a/src/warehouses/components/WarehouseDetailsPage/WarehouseDetailsPage.stories.tsx b/src/warehouses/components/WarehouseDetailsPage/WarehouseDetailsPage.stories.tsx index 2311a7b12..9f7683b42 100644 --- a/src/warehouses/components/WarehouseDetailsPage/WarehouseDetailsPage.stories.tsx +++ b/src/warehouses/components/WarehouseDetailsPage/WarehouseDetailsPage.stories.tsx @@ -23,7 +23,7 @@ const props: WarehouseDetailsPageProps = { saveButtonBarState: "default", warehouse, }; -storiesOf("Views / Warehouses / Warehouse details", module) +storiesOf("Warehouses / Warehouse details", module) .addDecorator(Decorator) .add("default", () => ) .add("loading", () => ( diff --git a/src/warehouses/components/WarehouseListPage/WarehouseListPage.stories.tsx b/src/warehouses/components/WarehouseListPage/WarehouseListPage.stories.tsx index 04d480c0b..2c92d1a97 100644 --- a/src/warehouses/components/WarehouseListPage/WarehouseListPage.stories.tsx +++ b/src/warehouses/components/WarehouseListPage/WarehouseListPage.stories.tsx @@ -8,14 +8,12 @@ import { } from "@saleor/fixtures"; import Decorator from "@saleor/storybook/Decorator"; import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator"; -import WarehouseListPage, { - WarehouseListPageProps, -} from "@saleor/warehouses/components/WarehouseListPage"; import { WarehouseListUrlSortField } from "@saleor/warehouses/urls"; import { storiesOf } from "@storybook/react"; import React from "react"; import { warehouseList } from "../../fixtures"; +import WarehouseListPage, { WarehouseListPageProps } from "./WarehouseListPage"; const props: WarehouseListPageProps = { ...pageListProps.default, @@ -31,7 +29,7 @@ const props: WarehouseListPageProps = { warehouses: warehouseList, }; -storiesOf("Views / Warehouses / Warehouse list", module) +storiesOf("Warehouses / Warehouse list", module) .addDecorator(Decorator) .addDecorator(PaginatorContextDecorator) .add("default", () => ) diff --git a/testUtils/ApolloMockedProvider.tsx b/testUtils/ApolloMockedProvider.tsx index f4a11222c..bc9fed0fd 100644 --- a/testUtils/ApolloMockedProvider.tsx +++ b/testUtils/ApolloMockedProvider.tsx @@ -1,10 +1,22 @@ import { MockedProvider, MockedResponse } from "@apollo/client/testing"; -// mocks -import { mocks as appMocks } from "@saleor/apps/apolloMocks"; import React from "react"; -const mocks: MockedResponse[] = [...appMocks]; +import { + addressMocks, + appsMocks, + pageTypesMocks, + warehousesMocks, +} from "./mocks"; + +const mocks: MockedResponse[] = [ + ...appsMocks, + ...addressMocks, + ...warehousesMocks, + ...pageTypesMocks, +]; export const ApolloMockedProvider = ({ children }) => ( - {children} + + {children} + ); diff --git a/testUtils/mocks/address.ts b/testUtils/mocks/address.ts new file mode 100644 index 000000000..fd5e5e9b7 --- /dev/null +++ b/testUtils/mocks/address.ts @@ -0,0 +1,52 @@ +import { MockedResponse } from "@apollo/client/testing"; +import { addressValidationQuery } from "@saleor/components/AddressEdit/queries"; + +export const addressMocks: MockedResponse[] = [ + { + request: { + query: addressValidationQuery, + variables: { + countryCode: "UA", + PERMISSION_MANAGE_USERS: false, + PERMISSION_MANAGE_STAFF: false, + PERMISSION_IMPERSONATE_USER: false, + PERMISSION_MANAGE_APPS: false, + PERMISSION_MANAGE_OBSERVABILITY: false, + PERMISSION_MANAGE_CHECKOUTS: false, + PERMISSION_HANDLE_CHECKOUTS: false, + PERMISSION_HANDLE_TAXES: false, + PERMISSION_MANAGE_TAXES: false, + PERMISSION_MANAGE_CHANNELS: false, + PERMISSION_MANAGE_DISCOUNTS: false, + PERMISSION_MANAGE_GIFT_CARD: false, + PERMISSION_MANAGE_MENUS: false, + PERMISSION_MANAGE_ORDERS: false, + PERMISSION_MANAGE_PAGES: false, + PERMISSION_MANAGE_PAGE_TYPES_AND_ATTRIBUTES: false, + PERMISSION_HANDLE_PAYMENTS: false, + PERMISSION_MANAGE_PLUGINS: false, + PERMISSION_MANAGE_PRODUCTS: false, + PERMISSION_MANAGE_PRODUCT_TYPES_AND_ATTRIBUTES: false, + PERMISSION_MANAGE_SHIPPING: false, + PERMISSION_MANAGE_SETTINGS: false, + PERMISSION_MANAGE_TRANSLATIONS: false, + }, + }, + result: { + data: { + addressValidationRules: { + countryAreaChoices: [], + allowedFields: [ + "countryArea", + "name", + "city", + "streetAddress2", + "streetAddress1", + "postalCode", + "companyName", + ], + }, + }, + }, + }, +]; diff --git a/src/apps/apolloMocks.ts b/testUtils/mocks/apps.ts similarity index 61% rename from src/apps/apolloMocks.ts rename to testUtils/mocks/apps.ts index dfe09736b..d97acef99 100644 --- a/src/apps/apolloMocks.ts +++ b/testUtils/mocks/apps.ts @@ -1,8 +1,7 @@ import { MockedResponse } from "@apollo/client/testing"; +import { extensionList } from "@saleor/apps/queries"; -import { extensionList } from "./queries"; - -export const mocks: MockedResponse[] = [ +export const appsMocks: MockedResponse[] = [ { request: { query: extensionList, diff --git a/testUtils/mocks/index.ts b/testUtils/mocks/index.ts new file mode 100644 index 000000000..c322f956e --- /dev/null +++ b/testUtils/mocks/index.ts @@ -0,0 +1,4 @@ +export * from "./address"; +export * from "./apps"; +export * from "./pageTypes"; +export * from "./warehouses"; diff --git a/testUtils/mocks/pageTypes.ts b/testUtils/mocks/pageTypes.ts new file mode 100644 index 000000000..2423c60c1 --- /dev/null +++ b/testUtils/mocks/pageTypes.ts @@ -0,0 +1,41 @@ +import { MockedResponse } from "@apollo/client/testing"; +import { SearchPageTypesDocument } from "@saleor/graphql"; + +export const pageTypesMocks: MockedResponse[] = [ + { + request: { + query: SearchPageTypesDocument, + variables: { + after: null, + first: 5, + query: "", + PERMISSION_MANAGE_USERS: false, + PERMISSION_MANAGE_STAFF: false, + PERMISSION_IMPERSONATE_USER: false, + PERMISSION_MANAGE_APPS: false, + PERMISSION_MANAGE_OBSERVABILITY: false, + PERMISSION_MANAGE_CHECKOUTS: false, + PERMISSION_HANDLE_CHECKOUTS: false, + PERMISSION_HANDLE_TAXES: false, + PERMISSION_MANAGE_TAXES: false, + PERMISSION_MANAGE_CHANNELS: false, + PERMISSION_MANAGE_DISCOUNTS: false, + PERMISSION_MANAGE_GIFT_CARD: false, + PERMISSION_MANAGE_MENUS: false, + PERMISSION_MANAGE_ORDERS: false, + PERMISSION_MANAGE_PAGES: false, + PERMISSION_MANAGE_PAGE_TYPES_AND_ATTRIBUTES: false, + PERMISSION_HANDLE_PAYMENTS: false, + PERMISSION_MANAGE_PLUGINS: false, + PERMISSION_MANAGE_PRODUCTS: false, + PERMISSION_MANAGE_PRODUCT_TYPES_AND_ATTRIBUTES: false, + PERMISSION_MANAGE_SHIPPING: false, + PERMISSION_MANAGE_SETTINGS: false, + PERMISSION_MANAGE_TRANSLATIONS: false, + }, + }, + result: { + data: [], + }, + }, +]; diff --git a/testUtils/mocks/warehouses.ts b/testUtils/mocks/warehouses.ts new file mode 100644 index 000000000..93d84982b --- /dev/null +++ b/testUtils/mocks/warehouses.ts @@ -0,0 +1,41 @@ +import { MockedResponse } from "@apollo/client/testing"; +import { SearchWarehousesDocument } from "@saleor/graphql"; + +export const warehousesMocks: MockedResponse[] = [ + { + request: { + query: SearchWarehousesDocument, + variables: { + after: null, + first: 20, + query: "", + PERMISSION_MANAGE_USERS: false, + PERMISSION_MANAGE_STAFF: false, + PERMISSION_IMPERSONATE_USER: false, + PERMISSION_MANAGE_APPS: false, + PERMISSION_MANAGE_OBSERVABILITY: false, + PERMISSION_MANAGE_CHECKOUTS: false, + PERMISSION_HANDLE_CHECKOUTS: false, + PERMISSION_HANDLE_TAXES: false, + PERMISSION_MANAGE_TAXES: false, + PERMISSION_MANAGE_CHANNELS: false, + PERMISSION_MANAGE_DISCOUNTS: false, + PERMISSION_MANAGE_GIFT_CARD: false, + PERMISSION_MANAGE_MENUS: false, + PERMISSION_MANAGE_ORDERS: false, + PERMISSION_MANAGE_PAGES: false, + PERMISSION_MANAGE_PAGE_TYPES_AND_ATTRIBUTES: false, + PERMISSION_HANDLE_PAYMENTS: false, + PERMISSION_MANAGE_PLUGINS: false, + PERMISSION_MANAGE_PRODUCTS: false, + PERMISSION_MANAGE_PRODUCT_TYPES_AND_ATTRIBUTES: false, + PERMISSION_MANAGE_SHIPPING: false, + PERMISSION_MANAGE_SETTINGS: false, + PERMISSION_MANAGE_TRANSLATIONS: false, + }, + }, + result: { + data: [], + }, + }, +];