@zidsa/zidmui 2.1.8 → 2.3.0-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/illustrations/404.svg +39 -0
- package/dist/illustrations/abandoned-cart.svg +23 -0
- package/dist/illustrations/add-ons.svg +15 -0
- package/dist/illustrations/announcement.svg +31 -0
- package/dist/illustrations/barcode-with-code.svg +49 -0
- package/dist/illustrations/barcode-with-sku.svg +26 -0
- package/dist/illustrations/barcode.svg +43 -0
- package/dist/illustrations/cards-stack-notification.svg +43 -0
- package/dist/illustrations/chat-bubble-plus.svg +30 -0
- package/dist/illustrations/coins-stack-shopping-cart.svg +22 -0
- package/dist/illustrations/coins-stack.svg +20 -0
- package/dist/illustrations/congrats.svg +108 -0
- package/dist/illustrations/congratulations-rocket.svg +36 -0
- package/dist/illustrations/country-bahrain.svg +78 -0
- package/dist/illustrations/country-egypt.svg +78 -0
- package/dist/illustrations/country-iraq.svg +78 -0
- package/dist/illustrations/country-kuwait.svg +78 -0
- package/dist/illustrations/country-oman.svg +78 -0
- package/dist/illustrations/country-qatar.svg +78 -0
- package/dist/illustrations/country-saudi-arabia.svg +78 -0
- package/dist/illustrations/country-saudi-regions.svg +17 -0
- package/dist/illustrations/country-uae.svg +78 -0
- package/dist/illustrations/custom-themes.svg +95 -0
- package/dist/illustrations/customers-empty-state.svg +38 -0
- package/dist/illustrations/customers-groups-add.svg +13 -0
- package/dist/illustrations/customers-groups.svg +23 -0
- package/dist/illustrations/draft-empty.svg +48 -0
- package/dist/illustrations/empty-draft-orders.svg +55 -0
- package/dist/illustrations/empty-order.svg +58 -0
- package/dist/illustrations/empty-state-discount-coupon.svg +27 -0
- package/dist/illustrations/empty-state-page-tag.svg +15 -0
- package/dist/illustrations/empty-state-page-url.svg +10 -0
- package/dist/illustrations/empty-state-page.svg +20 -0
- package/dist/illustrations/empty-state-payout.svg +35 -0
- package/dist/illustrations/empty-state-review.svg +29 -0
- package/dist/illustrations/empty-state-trash-bin.svg +60 -0
- package/dist/illustrations/faq-no-results.svg +43 -0
- package/dist/illustrations/fire-badge.svg +14 -0
- package/dist/illustrations/inactive-shop.svg +98 -0
- package/dist/illustrations/inventory-empty-state.svg +38 -0
- package/dist/illustrations/item-list.svg +40 -0
- package/dist/illustrations/items-add.svg +38 -0
- package/dist/illustrations/opened-box-empty.svg +33 -0
- package/dist/illustrations/opened-box-zid-location.svg +64 -0
- package/dist/illustrations/page-error.svg +34 -0
- package/dist/illustrations/payment-card-add-2.svg +14 -0
- package/dist/illustrations/payment-card-add.svg +14 -0
- package/dist/illustrations/payment-card.svg +12 -0
- package/dist/illustrations/payments-links-empty-state.svg +43 -0
- package/dist/illustrations/plan-activation.svg +29 -0
- package/dist/illustrations/plan-changed.svg +32 -0
- package/dist/illustrations/plan-downgrade.svg +28 -0
- package/dist/illustrations/product-card-options.svg +55 -0
- package/dist/illustrations/product-stacked-cards.svg +46 -0
- package/dist/illustrations/raising-start.svg +14 -0
- package/dist/illustrations/raising-starter.svg +14 -0
- package/dist/illustrations/sad-icon.svg +100 -0
- package/dist/illustrations/stacked-messages-sms.svg +41 -0
- package/dist/illustrations/stacked-messages-whatsapp.svg +42 -0
- package/dist/illustrations/step-diamond-01.svg +39 -0
- package/dist/illustrations/step-heptagon-02.svg +44 -0
- package/dist/illustrations/step-heptagon-04.svg +49 -0
- package/dist/illustrations/step-heptagon-06.svg +44 -0
- package/dist/illustrations/step-heptagon-red-04.svg +44 -0
- package/dist/illustrations/step-hexagon-02.svg +44 -0
- package/dist/illustrations/step-pentagon-03.svg +39 -0
- package/dist/illustrations/step-pentagon-05.svg +39 -0
- package/dist/illustrations/step-shield-like-03.svg +44 -0
- package/dist/illustrations/vehicle.svg +80 -0
- package/dist/illustrations/whatsapp-tier1.svg +80 -0
- package/dist/illustrations/whatsapp-tier2.svg +80 -0
- package/dist/illustrations/whatsapp-tier3.svg +89 -0
- package/dist/illustrations/whatsapp-tier4.svg +80 -0
- package/dist/illustrations/whatsapp-tier5.svg +174 -0
- package/dist/illustrations/wishlist-empty.svg +48 -0
- package/dist/illustrations/zid-logo-glass-reversed.svg +26 -0
- package/dist/illustrations/zid-logo-glass.svg +26 -0
- package/dist/illustrations/zid-logo-star.svg +4 -0
- package/dist/logos/delivery/aramex.svg +14 -0
- package/dist/logos/delivery/barq.svg +14 -0
- package/dist/logos/delivery/careem.svg +14 -0
- package/dist/logos/delivery/dhl.svg +14 -0
- package/dist/logos/delivery/fedex.svg +20 -0
- package/dist/logos/delivery/imile.svg +14 -0
- package/dist/logos/delivery/parcelat.svg +14 -0
- package/dist/logos/delivery/redbox.svg +14 -0
- package/dist/logos/delivery/smsa.svg +14 -0
- package/dist/logos/delivery/spl.svg +19 -0
- package/dist/logos/delivery/zid.svg +14 -0
- package/dist/logos/payments/amex.svg +12 -0
- package/dist/logos/payments/apple-pay.svg +7 -0
- package/dist/logos/payments/google-pay.svg +7 -0
- package/dist/logos/payments/knet.svg +5 -0
- package/dist/logos/payments/mada.svg +5 -0
- package/dist/logos/payments/mastercard.svg +5 -0
- package/dist/logos/payments/mispay.svg +10 -0
- package/dist/logos/payments/samsung-pay-icon.svg +13 -0
- package/dist/logos/payments/samsung-pay-text.svg +19 -0
- package/dist/logos/payments/stc-pay.svg +6 -0
- package/dist/logos/payments/tabby.svg +12 -0
- package/dist/logos/payments/tamara-secondary.svg +10 -0
- package/dist/logos/payments/tamara.svg +63 -0
- package/dist/logos/payments/visa.svg +3 -0
- package/dist/react/cjs/components/app-dialog.js +3 -2
- package/dist/react/cjs/components/app-dialog.js.map +1 -1
- package/dist/react/cjs/components/app-list-item.js +3 -0
- package/dist/react/cjs/components/app-list-item.js.map +1 -1
- package/dist/react/cjs/theme/components/alert.js +16 -16
- package/dist/react/cjs/theme/components/alert.js.map +1 -1
- package/dist/react/cjs/theme/components/app-bar.js +3 -5
- package/dist/react/cjs/theme/components/app-bar.js.map +1 -1
- package/dist/react/cjs/theme/components/card.js +3 -3
- package/dist/react/cjs/theme/components/card.js.map +1 -1
- package/dist/react/cjs/theme/components/paper.js +3 -3
- package/dist/react/cjs/theme/components/paper.js.map +1 -1
- package/dist/react/cjs/theme/components/table.js +2 -2
- package/dist/react/cjs/theme/components/table.js.map +1 -1
- package/dist/react/cjs/theme/palette.dark.js +343 -0
- package/dist/react/cjs/theme/palette.dark.js.map +1 -0
- package/dist/react/cjs/theme/palette.js +11 -5
- package/dist/react/cjs/theme/palette.js.map +1 -1
- package/dist/react/cjs/theme/shadows.dark.js +32 -0
- package/dist/react/cjs/theme/shadows.dark.js.map +1 -0
- package/dist/react/cjs/theme/theme.dark.js +19 -0
- package/dist/react/cjs/theme/theme.dark.js.map +1 -0
- package/dist/react/es/components/app-dialog.js +3 -2
- package/dist/react/es/components/app-dialog.js.map +1 -1
- package/dist/react/es/components/app-list-item.js +3 -0
- package/dist/react/es/components/app-list-item.js.map +1 -1
- package/dist/react/es/theme/components/alert.js +16 -16
- package/dist/react/es/theme/components/alert.js.map +1 -1
- package/dist/react/es/theme/components/app-bar.js +3 -5
- package/dist/react/es/theme/components/app-bar.js.map +1 -1
- package/dist/react/es/theme/components/card.js +3 -3
- package/dist/react/es/theme/components/card.js.map +1 -1
- package/dist/react/es/theme/components/paper.js +3 -3
- package/dist/react/es/theme/components/paper.js.map +1 -1
- package/dist/react/es/theme/components/table.js +2 -2
- package/dist/react/es/theme/components/table.js.map +1 -1
- package/dist/react/es/theme/palette.dark.js +343 -0
- package/dist/react/es/theme/palette.dark.js.map +1 -0
- package/dist/react/es/theme/palette.js +11 -5
- package/dist/react/es/theme/palette.js.map +1 -1
- package/dist/react/es/theme/shadows.dark.js +32 -0
- package/dist/react/es/theme/shadows.dark.js.map +1 -0
- package/dist/react/es/theme/theme.dark.js +19 -0
- package/dist/react/es/theme/theme.dark.js.map +1 -0
- package/dist/react/types/stories/design/DeliveryLogos.stories.d.ts +12 -0
- package/dist/react/types/stories/design/Illustrations.stories.d.ts +12 -0
- package/dist/react/types/stories/design/PaymentLogos.stories.d.ts +12 -0
- package/dist/react/types/theme/palette.dark.d.ts +2 -0
- package/dist/react/types/theme/shadows.dark.d.ts +2 -0
- package/dist/react/types/theme/theme.dark.d.ts +1 -0
- package/dist/react/types/theme/types.d.ts +8 -2
- package/dist/styles/colors.css +33 -0
- package/dist/styles/root.css +10 -0
- package/dist/styles/states.css +47 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +5 -2
- package/dist/react/cjs/stories/css/Alert.stories.js +0 -69
- package/dist/react/cjs/stories/css/Alert.stories.js.map +0 -1
- package/dist/react/cjs/stories/css/Button.stories.js +0 -133
- package/dist/react/cjs/stories/css/Button.stories.js.map +0 -1
- package/dist/react/cjs/stories/css/Card.stories.js +0 -145
- package/dist/react/cjs/stories/css/Card.stories.js.map +0 -1
- package/dist/react/cjs/stories/css/Checkbox.stories.js +0 -138
- package/dist/react/cjs/stories/css/Checkbox.stories.js.map +0 -1
- package/dist/react/cjs/stories/css/ComponentReference.stories.js +0 -139
- package/dist/react/cjs/stories/css/ComponentReference.stories.js.map +0 -1
- package/dist/react/cjs/stories/css/Input.stories.js +0 -162
- package/dist/react/cjs/stories/css/Input.stories.js.map +0 -1
- package/dist/react/cjs/stories/css/ListItem.stories.js +0 -166
- package/dist/react/cjs/stories/css/ListItem.stories.js.map +0 -1
- package/dist/react/cjs/stories/css/Modal.stories.js +0 -121
- package/dist/react/cjs/stories/css/Modal.stories.js.map +0 -1
- package/dist/react/cjs/stories/css/Radio.stories.js +0 -118
- package/dist/react/cjs/stories/css/Radio.stories.js.map +0 -1
- package/dist/react/cjs/stories/css/Select.stories.js +0 -187
- package/dist/react/cjs/stories/css/Select.stories.js.map +0 -1
- package/dist/react/cjs/stories/css/Status.stories.js +0 -59
- package/dist/react/cjs/stories/css/Status.stories.js.map +0 -1
- package/dist/react/cjs/stories/css/Switch.stories.js +0 -136
- package/dist/react/cjs/stories/css/Switch.stories.js.map +0 -1
- package/dist/react/cjs/stories/css/Table.stories.js +0 -171
- package/dist/react/cjs/stories/css/Table.stories.js.map +0 -1
- package/dist/react/cjs/stories/css/Tooltip.stories.js +0 -99
- package/dist/react/cjs/stories/css/Tooltip.stories.js.map +0 -1
- package/dist/react/cjs/stories/css/Utilities.stories.js +0 -136
- package/dist/react/cjs/stories/css/Utilities.stories.js.map +0 -1
- package/dist/react/cjs/stories/design/Colors.stories.js +0 -142
- package/dist/react/cjs/stories/design/Colors.stories.js.map +0 -1
- package/dist/react/cjs/stories/design/Typography.stories.js +0 -116
- package/dist/react/cjs/stories/design/Typography.stories.js.map +0 -1
- package/dist/react/cjs/stories/design/spacing/CSS.stories.js +0 -61
- package/dist/react/cjs/stories/design/spacing/CSS.stories.js.map +0 -1
- package/dist/react/cjs/stories/design/spacing/React.stories.js +0 -102
- package/dist/react/cjs/stories/design/spacing/React.stories.js.map +0 -1
- package/dist/react/cjs/stories/react/AppAlert.stories.js +0 -149
- package/dist/react/cjs/stories/react/AppAlert.stories.js.map +0 -1
- package/dist/react/cjs/stories/react/AppButton.stories.js +0 -93
- package/dist/react/cjs/stories/react/AppButton.stories.js.map +0 -1
- package/dist/react/cjs/stories/react/AppCheckbox.stories.js +0 -67
- package/dist/react/cjs/stories/react/AppCheckbox.stories.js.map +0 -1
- package/dist/react/cjs/stories/react/AppDialog.stories.js +0 -129
- package/dist/react/cjs/stories/react/AppDialog.stories.js.map +0 -1
- package/dist/react/cjs/stories/react/AppDialogWithFeatures.stories.js +0 -127
- package/dist/react/cjs/stories/react/AppDialogWithFeatures.stories.js.map +0 -1
- package/dist/react/cjs/stories/react/AppEmptyState.stories.js +0 -157
- package/dist/react/cjs/stories/react/AppEmptyState.stories.js.map +0 -1
- package/dist/react/cjs/stories/react/AppIconButton.stories.js +0 -53
- package/dist/react/cjs/stories/react/AppIconButton.stories.js.map +0 -1
- package/dist/react/cjs/stories/react/AppIconWithTooltip.stories.js +0 -36
- package/dist/react/cjs/stories/react/AppIconWithTooltip.stories.js.map +0 -1
- package/dist/react/cjs/stories/react/AppInputBase.stories.js +0 -158
- package/dist/react/cjs/stories/react/AppInputBase.stories.js.map +0 -1
- package/dist/react/cjs/stories/react/AppInputBaseSearch.stories.js +0 -87
- package/dist/react/cjs/stories/react/AppInputBaseSearch.stories.js.map +0 -1
- package/dist/react/cjs/stories/react/AppInputRadio.stories.js +0 -262
- package/dist/react/cjs/stories/react/AppInputRadio.stories.js.map +0 -1
- package/dist/react/cjs/stories/react/AppInputRadioCard.stories.js +0 -126
- package/dist/react/cjs/stories/react/AppInputRadioCard.stories.js.map +0 -1
- package/dist/react/cjs/stories/react/AppListItem.stories.js +0 -123
- package/dist/react/cjs/stories/react/AppListItem.stories.js.map +0 -1
- package/dist/react/cjs/stories/react/AppOverflownTextWithTooltip.stories.js +0 -41
- package/dist/react/cjs/stories/react/AppOverflownTextWithTooltip.stories.js.map +0 -1
- package/dist/react/cjs/stories/react/AppPagination.stories.js +0 -71
- package/dist/react/cjs/stories/react/AppPagination.stories.js.map +0 -1
- package/dist/react/cjs/stories/react/AppRadioGroup.stories.js +0 -145
- package/dist/react/cjs/stories/react/AppRadioGroup.stories.js.map +0 -1
- package/dist/react/cjs/stories/react/AppStatus.stories.js +0 -68
- package/dist/react/cjs/stories/react/AppStatus.stories.js.map +0 -1
- package/dist/react/cjs/stories/react/AppSwitch.stories.js +0 -138
- package/dist/react/cjs/stories/react/AppSwitch.stories.js.map +0 -1
- package/dist/react/cjs/stories/react/AppTabs.stories.js +0 -100
- package/dist/react/cjs/stories/react/AppTabs.stories.js.map +0 -1
- package/dist/react/cjs/stories/react/AppTooltip.stories.js +0 -119
- package/dist/react/cjs/stories/react/AppTooltip.stories.js.map +0 -1
- package/dist/react/cjs/stories/react/AppTypography.stories.js +0 -172
- package/dist/react/cjs/stories/react/AppTypography.stories.js.map +0 -1
- package/dist/react/es/stories/css/Alert.stories.js +0 -69
- package/dist/react/es/stories/css/Alert.stories.js.map +0 -1
- package/dist/react/es/stories/css/Button.stories.js +0 -133
- package/dist/react/es/stories/css/Button.stories.js.map +0 -1
- package/dist/react/es/stories/css/Card.stories.js +0 -145
- package/dist/react/es/stories/css/Card.stories.js.map +0 -1
- package/dist/react/es/stories/css/Checkbox.stories.js +0 -138
- package/dist/react/es/stories/css/Checkbox.stories.js.map +0 -1
- package/dist/react/es/stories/css/ComponentReference.stories.js +0 -139
- package/dist/react/es/stories/css/ComponentReference.stories.js.map +0 -1
- package/dist/react/es/stories/css/Input.stories.js +0 -162
- package/dist/react/es/stories/css/Input.stories.js.map +0 -1
- package/dist/react/es/stories/css/ListItem.stories.js +0 -166
- package/dist/react/es/stories/css/ListItem.stories.js.map +0 -1
- package/dist/react/es/stories/css/Modal.stories.js +0 -121
- package/dist/react/es/stories/css/Modal.stories.js.map +0 -1
- package/dist/react/es/stories/css/Radio.stories.js +0 -118
- package/dist/react/es/stories/css/Radio.stories.js.map +0 -1
- package/dist/react/es/stories/css/Select.stories.js +0 -187
- package/dist/react/es/stories/css/Select.stories.js.map +0 -1
- package/dist/react/es/stories/css/Status.stories.js +0 -59
- package/dist/react/es/stories/css/Status.stories.js.map +0 -1
- package/dist/react/es/stories/css/Switch.stories.js +0 -136
- package/dist/react/es/stories/css/Switch.stories.js.map +0 -1
- package/dist/react/es/stories/css/Table.stories.js +0 -171
- package/dist/react/es/stories/css/Table.stories.js.map +0 -1
- package/dist/react/es/stories/css/Tooltip.stories.js +0 -99
- package/dist/react/es/stories/css/Tooltip.stories.js.map +0 -1
- package/dist/react/es/stories/css/Utilities.stories.js +0 -136
- package/dist/react/es/stories/css/Utilities.stories.js.map +0 -1
- package/dist/react/es/stories/design/Colors.stories.js +0 -142
- package/dist/react/es/stories/design/Colors.stories.js.map +0 -1
- package/dist/react/es/stories/design/Typography.stories.js +0 -116
- package/dist/react/es/stories/design/Typography.stories.js.map +0 -1
- package/dist/react/es/stories/design/spacing/CSS.stories.js +0 -61
- package/dist/react/es/stories/design/spacing/CSS.stories.js.map +0 -1
- package/dist/react/es/stories/design/spacing/React.stories.js +0 -102
- package/dist/react/es/stories/design/spacing/React.stories.js.map +0 -1
- package/dist/react/es/stories/react/AppAlert.stories.js +0 -149
- package/dist/react/es/stories/react/AppAlert.stories.js.map +0 -1
- package/dist/react/es/stories/react/AppButton.stories.js +0 -93
- package/dist/react/es/stories/react/AppButton.stories.js.map +0 -1
- package/dist/react/es/stories/react/AppCheckbox.stories.js +0 -67
- package/dist/react/es/stories/react/AppCheckbox.stories.js.map +0 -1
- package/dist/react/es/stories/react/AppDialog.stories.js +0 -129
- package/dist/react/es/stories/react/AppDialog.stories.js.map +0 -1
- package/dist/react/es/stories/react/AppDialogWithFeatures.stories.js +0 -127
- package/dist/react/es/stories/react/AppDialogWithFeatures.stories.js.map +0 -1
- package/dist/react/es/stories/react/AppEmptyState.stories.js +0 -157
- package/dist/react/es/stories/react/AppEmptyState.stories.js.map +0 -1
- package/dist/react/es/stories/react/AppIconButton.stories.js +0 -53
- package/dist/react/es/stories/react/AppIconButton.stories.js.map +0 -1
- package/dist/react/es/stories/react/AppIconWithTooltip.stories.js +0 -36
- package/dist/react/es/stories/react/AppIconWithTooltip.stories.js.map +0 -1
- package/dist/react/es/stories/react/AppInputBase.stories.js +0 -158
- package/dist/react/es/stories/react/AppInputBase.stories.js.map +0 -1
- package/dist/react/es/stories/react/AppInputBaseSearch.stories.js +0 -87
- package/dist/react/es/stories/react/AppInputBaseSearch.stories.js.map +0 -1
- package/dist/react/es/stories/react/AppInputRadio.stories.js +0 -262
- package/dist/react/es/stories/react/AppInputRadio.stories.js.map +0 -1
- package/dist/react/es/stories/react/AppInputRadioCard.stories.js +0 -126
- package/dist/react/es/stories/react/AppInputRadioCard.stories.js.map +0 -1
- package/dist/react/es/stories/react/AppListItem.stories.js +0 -123
- package/dist/react/es/stories/react/AppListItem.stories.js.map +0 -1
- package/dist/react/es/stories/react/AppOverflownTextWithTooltip.stories.js +0 -41
- package/dist/react/es/stories/react/AppOverflownTextWithTooltip.stories.js.map +0 -1
- package/dist/react/es/stories/react/AppPagination.stories.js +0 -71
- package/dist/react/es/stories/react/AppPagination.stories.js.map +0 -1
- package/dist/react/es/stories/react/AppRadioGroup.stories.js +0 -145
- package/dist/react/es/stories/react/AppRadioGroup.stories.js.map +0 -1
- package/dist/react/es/stories/react/AppStatus.stories.js +0 -68
- package/dist/react/es/stories/react/AppStatus.stories.js.map +0 -1
- package/dist/react/es/stories/react/AppSwitch.stories.js +0 -138
- package/dist/react/es/stories/react/AppSwitch.stories.js.map +0 -1
- package/dist/react/es/stories/react/AppTabs.stories.js +0 -100
- package/dist/react/es/stories/react/AppTabs.stories.js.map +0 -1
- package/dist/react/es/stories/react/AppTooltip.stories.js +0 -119
- package/dist/react/es/stories/react/AppTooltip.stories.js.map +0 -1
- package/dist/react/es/stories/react/AppTypography.stories.js +0 -172
- package/dist/react/es/stories/react/AppTypography.stories.js.map +0 -1
- package/dist/react/zidmui.css +0 -3062
|
@@ -1,157 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
|
|
3
|
-
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
-
const appEmptyState = require("../../components/app-empty-state.js");
|
|
5
|
-
const appButton = require("../../components/app-button.js");
|
|
6
|
-
const errorWarningLine = require("../../icons/system/error-warning-line.js");
|
|
7
|
-
const lockLine = require("../../icons/system/lock-line.js");
|
|
8
|
-
const starLine = require("../../icons/system/star-line.js");
|
|
9
|
-
const meta = {
|
|
10
|
-
title: "React/App Empty State",
|
|
11
|
-
component: appEmptyState.AppEmptyState,
|
|
12
|
-
parameters: {
|
|
13
|
-
layout: "centered"
|
|
14
|
-
},
|
|
15
|
-
tags: ["autodocs"],
|
|
16
|
-
argTypes: {
|
|
17
|
-
size: {
|
|
18
|
-
control: "select",
|
|
19
|
-
options: ["standard", "small"]
|
|
20
|
-
},
|
|
21
|
-
variant: {
|
|
22
|
-
control: "select",
|
|
23
|
-
options: ["default", "error", "warning", "success"]
|
|
24
|
-
},
|
|
25
|
-
title: {
|
|
26
|
-
control: "text"
|
|
27
|
-
},
|
|
28
|
-
description: {
|
|
29
|
-
control: "text"
|
|
30
|
-
},
|
|
31
|
-
subDescription: {
|
|
32
|
-
control: "text"
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
};
|
|
36
|
-
const Default = {
|
|
37
|
-
args: {
|
|
38
|
-
size: "standard",
|
|
39
|
-
icon: /* @__PURE__ */ jsxRuntime.jsx(starLine.IconStarLine, {}),
|
|
40
|
-
title: "Empty state title",
|
|
41
|
-
description: "Some text explaining the state here and a nudge to take a corrective or guiding action",
|
|
42
|
-
children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
43
|
-
/* @__PURE__ */ jsxRuntime.jsx(appButton.AppButton, { color: "secondary", variant: "outlined", children: "Secondary Action" }),
|
|
44
|
-
/* @__PURE__ */ jsxRuntime.jsx(appButton.AppButton, { variant: "contained", children: "Primary Action" })
|
|
45
|
-
] })
|
|
46
|
-
}
|
|
47
|
-
};
|
|
48
|
-
const PageNotFound = {
|
|
49
|
-
args: {
|
|
50
|
-
icon: /* @__PURE__ */ jsxRuntime.jsx(errorWarningLine.IconErrorWarningLine, {}),
|
|
51
|
-
variant: "error",
|
|
52
|
-
size: "standard",
|
|
53
|
-
title: "Oops, page not found!",
|
|
54
|
-
description: "We are very sorry for inconvenience.",
|
|
55
|
-
children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
56
|
-
/* @__PURE__ */ jsxRuntime.jsx(appButton.AppButton, { color: "secondary", variant: "outlined", children: "Secondary Action" }),
|
|
57
|
-
/* @__PURE__ */ jsxRuntime.jsx(appButton.AppButton, { variant: "contained", children: "Primary Action" })
|
|
58
|
-
] })
|
|
59
|
-
}
|
|
60
|
-
};
|
|
61
|
-
const PageNotFoundWithSubDescription = {
|
|
62
|
-
args: {
|
|
63
|
-
icon: /* @__PURE__ */ jsxRuntime.jsx(errorWarningLine.IconErrorWarningLine, {}),
|
|
64
|
-
variant: "error",
|
|
65
|
-
size: "standard",
|
|
66
|
-
title: "Oops, page not found!",
|
|
67
|
-
description: "We are very sorry for inconvenience.",
|
|
68
|
-
subDescription: "Error Code: 404",
|
|
69
|
-
children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
70
|
-
/* @__PURE__ */ jsxRuntime.jsx(appButton.AppButton, { color: "secondary", variant: "outlined", children: "Secondary Action" }),
|
|
71
|
-
/* @__PURE__ */ jsxRuntime.jsx(appButton.AppButton, { variant: "contained", children: "Primary Action" })
|
|
72
|
-
] })
|
|
73
|
-
}
|
|
74
|
-
};
|
|
75
|
-
const AccessDenied = {
|
|
76
|
-
args: {
|
|
77
|
-
icon: /* @__PURE__ */ jsxRuntime.jsx(lockLine.IconLockLine, {}),
|
|
78
|
-
title: "Access denied",
|
|
79
|
-
variant: "warning",
|
|
80
|
-
size: "standard",
|
|
81
|
-
description: "You don't have permission to access this area or take this action",
|
|
82
|
-
children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
83
|
-
/* @__PURE__ */ jsxRuntime.jsx(appButton.AppButton, { color: "secondary", variant: "outlined", children: "Secondary Action" }),
|
|
84
|
-
/* @__PURE__ */ jsxRuntime.jsx(appButton.AppButton, { variant: "contained", children: "Primary Action" })
|
|
85
|
-
] })
|
|
86
|
-
}
|
|
87
|
-
};
|
|
88
|
-
const SomethingWentWrong = {
|
|
89
|
-
args: {
|
|
90
|
-
icon: /* @__PURE__ */ jsxRuntime.jsx(errorWarningLine.IconErrorWarningLine, {}),
|
|
91
|
-
variant: "error",
|
|
92
|
-
size: "standard",
|
|
93
|
-
title: "Something went wrong",
|
|
94
|
-
description: "The page you are looking for doesn't exist or has been moved.",
|
|
95
|
-
children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
96
|
-
/* @__PURE__ */ jsxRuntime.jsx(appButton.AppButton, { color: "secondary", variant: "outlined", children: "Secondary Action" }),
|
|
97
|
-
/* @__PURE__ */ jsxRuntime.jsx(appButton.AppButton, { variant: "contained", children: "Primary Action" })
|
|
98
|
-
] })
|
|
99
|
-
}
|
|
100
|
-
};
|
|
101
|
-
const SmallSize = {
|
|
102
|
-
args: {
|
|
103
|
-
icon: /* @__PURE__ */ jsxRuntime.jsx(errorWarningLine.IconErrorWarningLine, {}),
|
|
104
|
-
variant: "error",
|
|
105
|
-
size: "small",
|
|
106
|
-
title: "Something went wrong",
|
|
107
|
-
description: "The page you are looking for doesn't exist or has been moved.",
|
|
108
|
-
children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
109
|
-
/* @__PURE__ */ jsxRuntime.jsx(appButton.AppButton, { color: "secondary", variant: "outlined", children: "Secondary Action" }),
|
|
110
|
-
/* @__PURE__ */ jsxRuntime.jsx(appButton.AppButton, { variant: "contained", children: "Primary Action" })
|
|
111
|
-
] })
|
|
112
|
-
}
|
|
113
|
-
};
|
|
114
|
-
const WithImage = {
|
|
115
|
-
args: {
|
|
116
|
-
icon: /* @__PURE__ */ jsxRuntime.jsx(errorWarningLine.IconErrorWarningLine, {}),
|
|
117
|
-
imageUrl: "https://picsum.photos/200/300",
|
|
118
|
-
variant: "error",
|
|
119
|
-
size: "standard",
|
|
120
|
-
title: "Oops, page not found!",
|
|
121
|
-
description: "We are very sorry for inconvenience.",
|
|
122
|
-
children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
123
|
-
/* @__PURE__ */ jsxRuntime.jsx(appButton.AppButton, { color: "secondary", variant: "outlined", children: "Secondary Action" }),
|
|
124
|
-
/* @__PURE__ */ jsxRuntime.jsx(appButton.AppButton, { variant: "contained", children: "Primary Action" })
|
|
125
|
-
] })
|
|
126
|
-
}
|
|
127
|
-
};
|
|
128
|
-
const NoDescription = {
|
|
129
|
-
args: {
|
|
130
|
-
size: "standard",
|
|
131
|
-
icon: /* @__PURE__ */ jsxRuntime.jsx(starLine.IconStarLine, {}),
|
|
132
|
-
title: "Empty state title",
|
|
133
|
-
children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
134
|
-
/* @__PURE__ */ jsxRuntime.jsx(appButton.AppButton, { color: "secondary", variant: "outlined", children: "Secondary Action" }),
|
|
135
|
-
/* @__PURE__ */ jsxRuntime.jsx(appButton.AppButton, { variant: "contained", children: "Primary Action" })
|
|
136
|
-
] })
|
|
137
|
-
}
|
|
138
|
-
};
|
|
139
|
-
const NoChildren = {
|
|
140
|
-
args: {
|
|
141
|
-
size: "standard",
|
|
142
|
-
icon: /* @__PURE__ */ jsxRuntime.jsx(starLine.IconStarLine, {}),
|
|
143
|
-
title: "Empty state title",
|
|
144
|
-
description: "Some text explaining the state here and a nudge to take a corrective or guiding action"
|
|
145
|
-
}
|
|
146
|
-
};
|
|
147
|
-
exports.AccessDenied = AccessDenied;
|
|
148
|
-
exports.Default = Default;
|
|
149
|
-
exports.NoChildren = NoChildren;
|
|
150
|
-
exports.NoDescription = NoDescription;
|
|
151
|
-
exports.PageNotFound = PageNotFound;
|
|
152
|
-
exports.PageNotFoundWithSubDescription = PageNotFoundWithSubDescription;
|
|
153
|
-
exports.SmallSize = SmallSize;
|
|
154
|
-
exports.SomethingWentWrong = SomethingWentWrong;
|
|
155
|
-
exports.WithImage = WithImage;
|
|
156
|
-
exports.default = meta;
|
|
157
|
-
//# sourceMappingURL=AppEmptyState.stories.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AppEmptyState.stories.js","sources":["../../../../../src/stories/react/AppEmptyState.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react-vite';\n\nimport { AppEmptyState } from '~/components/app-empty-state';\nimport { AppButton } from '~/components/app-button';\nimport { IconErrorWarningLine } from '~/icons/system/error-warning-line';\nimport { IconLockLine } from '~/icons/system/lock-line';\nimport { IconStarLine } from '~/icons/system/star-line';\n\n//\n//\n\n// Meta\nconst meta = {\n title: 'React/App Empty State',\n component: AppEmptyState,\n parameters: {\n layout: 'centered',\n },\n tags: ['autodocs'],\n argTypes: {\n size: {\n control: 'select',\n options: ['standard', 'small'],\n },\n variant: {\n control: 'select',\n options: ['default', 'error', 'warning', 'success'],\n },\n title: {\n control: 'text',\n },\n description: {\n control: 'text',\n },\n subDescription: {\n control: 'text',\n },\n },\n} satisfies Meta<typeof AppEmptyState>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n//\n\nexport const Default: Story = {\n args: {\n size: 'standard',\n icon: <IconStarLine />,\n title: 'Empty state title',\n description:\n 'Some text explaining the state here and a nudge to take a corrective or guiding action',\n children: (\n <>\n <AppButton color=\"secondary\" variant=\"outlined\">\n Secondary Action\n </AppButton>\n <AppButton variant=\"contained\">Primary Action</AppButton>\n </>\n ),\n },\n};\n\n//\n\nexport const PageNotFound: Story = {\n args: {\n icon: <IconErrorWarningLine />,\n variant: 'error',\n size: 'standard',\n title: 'Oops, page not found!',\n description: 'We are very sorry for inconvenience.',\n children: (\n <>\n <AppButton color=\"secondary\" variant=\"outlined\">\n Secondary Action\n </AppButton>\n <AppButton variant=\"contained\">Primary Action</AppButton>\n </>\n ),\n },\n};\n\n//\n\nexport const PageNotFoundWithSubDescription: Story = {\n args: {\n icon: <IconErrorWarningLine />,\n variant: 'error',\n size: 'standard',\n title: 'Oops, page not found!',\n description: 'We are very sorry for inconvenience.',\n subDescription: 'Error Code: 404',\n children: (\n <>\n <AppButton color=\"secondary\" variant=\"outlined\">\n Secondary Action\n </AppButton>\n <AppButton variant=\"contained\">Primary Action</AppButton>\n </>\n ),\n },\n};\n\n//\n\nexport const AccessDenied: Story = {\n args: {\n icon: <IconLockLine />,\n title: 'Access denied',\n variant: 'warning',\n size: 'standard',\n description: \"You don't have permission to access this area or take this action\",\n children: (\n <>\n <AppButton color=\"secondary\" variant=\"outlined\">\n Secondary Action\n </AppButton>\n <AppButton variant=\"contained\">Primary Action</AppButton>\n </>\n ),\n },\n};\n\n//\n\nexport const SomethingWentWrong: Story = {\n args: {\n icon: <IconErrorWarningLine />,\n variant: 'error',\n size: 'standard',\n title: 'Something went wrong',\n description: \"The page you are looking for doesn't exist or has been moved.\",\n children: (\n <>\n <AppButton color=\"secondary\" variant=\"outlined\">\n Secondary Action\n </AppButton>\n <AppButton variant=\"contained\">Primary Action</AppButton>\n </>\n ),\n },\n};\n\n//\n\nexport const SmallSize: Story = {\n args: {\n icon: <IconErrorWarningLine />,\n variant: 'error',\n size: 'small',\n title: 'Something went wrong',\n description: \"The page you are looking for doesn't exist or has been moved.\",\n children: (\n <>\n <AppButton color=\"secondary\" variant=\"outlined\">\n Secondary Action\n </AppButton>\n <AppButton variant=\"contained\">Primary Action</AppButton>\n </>\n ),\n },\n};\n\n//\n\nexport const WithImage: Story = {\n args: {\n icon: <IconErrorWarningLine />,\n imageUrl: 'https://picsum.photos/200/300',\n variant: 'error',\n size: 'standard',\n title: 'Oops, page not found!',\n description: 'We are very sorry for inconvenience.',\n children: (\n <>\n <AppButton color=\"secondary\" variant=\"outlined\">\n Secondary Action\n </AppButton>\n <AppButton variant=\"contained\">Primary Action</AppButton>\n </>\n ),\n },\n};\n\n//\n\nexport const NoDescription: Story = {\n args: {\n size: 'standard',\n icon: <IconStarLine />,\n title: 'Empty state title',\n children: (\n <>\n <AppButton color=\"secondary\" variant=\"outlined\">\n Secondary Action\n </AppButton>\n <AppButton variant=\"contained\">Primary Action</AppButton>\n </>\n ),\n },\n};\n\n//\n\nexport const NoChildren: Story = {\n args: {\n size: 'standard',\n icon: <IconStarLine />,\n title: 'Empty state title',\n description:\n 'Some text explaining the state here and a nudge to take a corrective or guiding action',\n },\n};\n"],"names":["AppEmptyState","IconStarLine","jsxs","Fragment","jsx","AppButton","IconErrorWarningLine","IconLockLine"],"mappings":"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"}
|
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
|
|
3
|
-
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
-
const appIconButton = require("../../components/app-icon-button.js");
|
|
5
|
-
const settingsLine = require("../../icons/system/settings-line.js");
|
|
6
|
-
const deleteBinLine = require("../../icons/system/delete-bin-line.js");
|
|
7
|
-
const stackColumn = require("../../components/stack-column.js");
|
|
8
|
-
const meta = {
|
|
9
|
-
title: "React/App Icon Button",
|
|
10
|
-
component: appIconButton.AppIconButton,
|
|
11
|
-
parameters: {
|
|
12
|
-
layout: "centered"
|
|
13
|
-
},
|
|
14
|
-
tags: ["autodocs"]
|
|
15
|
-
};
|
|
16
|
-
const Variants = {
|
|
17
|
-
render: () => /* @__PURE__ */ jsxRuntime.jsxs(stackColumn.StackColumn, { gap: 3, children: [
|
|
18
|
-
/* @__PURE__ */ jsxRuntime.jsxs(stackColumn.StackColumn, { direction: "row", gap: 2, alignItems: "center", children: [
|
|
19
|
-
/* @__PURE__ */ jsxRuntime.jsx(appIconButton.AppIconButton, { color: "primary", size: "large", children: /* @__PURE__ */ jsxRuntime.jsx(settingsLine.IconSettingsLine, {}) }),
|
|
20
|
-
/* @__PURE__ */ jsxRuntime.jsx(appIconButton.AppIconButton, { color: "primary", size: "medium", children: /* @__PURE__ */ jsxRuntime.jsx(settingsLine.IconSettingsLine, {}) }),
|
|
21
|
-
/* @__PURE__ */ jsxRuntime.jsx(appIconButton.AppIconButton, { color: "primary", size: "small", children: /* @__PURE__ */ jsxRuntime.jsx(settingsLine.IconSettingsLine, {}) }),
|
|
22
|
-
/* @__PURE__ */ jsxRuntime.jsx(appIconButton.AppIconButton, { color: "primary", size: "extraSmall", children: /* @__PURE__ */ jsxRuntime.jsx(settingsLine.IconSettingsLine, {}) })
|
|
23
|
-
] }),
|
|
24
|
-
/* @__PURE__ */ jsxRuntime.jsxs(stackColumn.StackColumn, { direction: "row", gap: 2, alignItems: "center", children: [
|
|
25
|
-
/* @__PURE__ */ jsxRuntime.jsx(appIconButton.AppIconButton, { color: "secondary", size: "large", children: /* @__PURE__ */ jsxRuntime.jsx(settingsLine.IconSettingsLine, {}) }),
|
|
26
|
-
/* @__PURE__ */ jsxRuntime.jsx(appIconButton.AppIconButton, { color: "secondary", size: "medium", children: /* @__PURE__ */ jsxRuntime.jsx(settingsLine.IconSettingsLine, {}) }),
|
|
27
|
-
/* @__PURE__ */ jsxRuntime.jsx(appIconButton.AppIconButton, { color: "secondary", size: "small", children: /* @__PURE__ */ jsxRuntime.jsx(settingsLine.IconSettingsLine, {}) }),
|
|
28
|
-
/* @__PURE__ */ jsxRuntime.jsx(appIconButton.AppIconButton, { color: "secondary", size: "extraSmall", children: /* @__PURE__ */ jsxRuntime.jsx(settingsLine.IconSettingsLine, {}) })
|
|
29
|
-
] }),
|
|
30
|
-
/* @__PURE__ */ jsxRuntime.jsxs(stackColumn.StackColumn, { direction: "row", gap: 2, alignItems: "center", children: [
|
|
31
|
-
/* @__PURE__ */ jsxRuntime.jsx(appIconButton.AppIconButton, { color: "error", size: "large", children: /* @__PURE__ */ jsxRuntime.jsx(deleteBinLine.IconDeleteBinLine, {}) }),
|
|
32
|
-
/* @__PURE__ */ jsxRuntime.jsx(appIconButton.AppIconButton, { color: "error", size: "medium", children: /* @__PURE__ */ jsxRuntime.jsx(deleteBinLine.IconDeleteBinLine, {}) }),
|
|
33
|
-
/* @__PURE__ */ jsxRuntime.jsx(appIconButton.AppIconButton, { color: "error", size: "small", children: /* @__PURE__ */ jsxRuntime.jsx(deleteBinLine.IconDeleteBinLine, {}) }),
|
|
34
|
-
/* @__PURE__ */ jsxRuntime.jsx(appIconButton.AppIconButton, { color: "error", size: "extraSmall", children: /* @__PURE__ */ jsxRuntime.jsx(deleteBinLine.IconDeleteBinLine, {}) })
|
|
35
|
-
] }),
|
|
36
|
-
/* @__PURE__ */ jsxRuntime.jsxs(stackColumn.StackColumn, { direction: "row", gap: 2, alignItems: "center", children: [
|
|
37
|
-
/* @__PURE__ */ jsxRuntime.jsx(appIconButton.AppIconButton, { color: "default", size: "large", children: /* @__PURE__ */ jsxRuntime.jsx(deleteBinLine.IconDeleteBinLine, {}) }),
|
|
38
|
-
/* @__PURE__ */ jsxRuntime.jsx(appIconButton.AppIconButton, { color: "default", size: "medium", children: /* @__PURE__ */ jsxRuntime.jsx(deleteBinLine.IconDeleteBinLine, {}) }),
|
|
39
|
-
/* @__PURE__ */ jsxRuntime.jsx(appIconButton.AppIconButton, { color: "default", size: "small", children: /* @__PURE__ */ jsxRuntime.jsx(deleteBinLine.IconDeleteBinLine, {}) }),
|
|
40
|
-
/* @__PURE__ */ jsxRuntime.jsx(appIconButton.AppIconButton, { color: "default", size: "extraSmall", children: /* @__PURE__ */ jsxRuntime.jsx(deleteBinLine.IconDeleteBinLine, {}) })
|
|
41
|
-
] }),
|
|
42
|
-
/* @__PURE__ */ jsxRuntime.jsxs(stackColumn.StackColumn, { direction: "row", gap: 2, alignItems: "center", children: [
|
|
43
|
-
/* @__PURE__ */ jsxRuntime.jsx(appIconButton.AppIconButton, { color: "primary", size: "large", loading: true, children: /* @__PURE__ */ jsxRuntime.jsx(settingsLine.IconSettingsLine, {}) }),
|
|
44
|
-
/* @__PURE__ */ jsxRuntime.jsx(appIconButton.AppIconButton, { color: "primary", size: "medium", loading: true, children: /* @__PURE__ */ jsxRuntime.jsx(settingsLine.IconSettingsLine, {}) }),
|
|
45
|
-
/* @__PURE__ */ jsxRuntime.jsx(appIconButton.AppIconButton, { color: "primary", size: "small", loading: true, children: /* @__PURE__ */ jsxRuntime.jsx(settingsLine.IconSettingsLine, {}) }),
|
|
46
|
-
/* @__PURE__ */ jsxRuntime.jsx(appIconButton.AppIconButton, { color: "primary", size: "extraSmall", loading: true, children: /* @__PURE__ */ jsxRuntime.jsx(settingsLine.IconSettingsLine, {}) })
|
|
47
|
-
] })
|
|
48
|
-
] }),
|
|
49
|
-
args: {}
|
|
50
|
-
};
|
|
51
|
-
exports.Variants = Variants;
|
|
52
|
-
exports.default = meta;
|
|
53
|
-
//# sourceMappingURL=AppIconButton.stories.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AppIconButton.stories.js","sources":["../../../../../src/stories/react/AppIconButton.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react-vite';\n\nimport { AppIconButton } from '~/components/app-icon-button';\nimport { IconSettingsLine } from '~/icons/system/settings-line';\nimport { IconDeleteBinLine } from '~/icons/system/delete-bin-line';\nimport { StackColumn } from '~/components/stack-column';\n\n//\n//\n\n// Meta\nconst meta = {\n title: 'React/App Icon Button',\n component: AppIconButton,\n parameters: {\n layout: 'centered',\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof AppIconButton>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n//\n\nexport const Variants: Story = {\n render: () => (\n <StackColumn gap={3}>\n {/* Primary */}\n <StackColumn direction=\"row\" gap={2} alignItems=\"center\">\n <AppIconButton color=\"primary\" size=\"large\">\n <IconSettingsLine />\n </AppIconButton>\n\n <AppIconButton color=\"primary\" size=\"medium\">\n <IconSettingsLine />\n </AppIconButton>\n\n <AppIconButton color=\"primary\" size=\"small\">\n <IconSettingsLine />\n </AppIconButton>\n\n <AppIconButton color=\"primary\" size=\"extraSmall\">\n <IconSettingsLine />\n </AppIconButton>\n </StackColumn>\n\n {/* Secondary */}\n <StackColumn direction=\"row\" gap={2} alignItems=\"center\">\n <AppIconButton color=\"secondary\" size=\"large\">\n <IconSettingsLine />\n </AppIconButton>\n\n <AppIconButton color=\"secondary\" size=\"medium\">\n <IconSettingsLine />\n </AppIconButton>\n\n <AppIconButton color=\"secondary\" size=\"small\">\n <IconSettingsLine />\n </AppIconButton>\n\n <AppIconButton color=\"secondary\" size=\"extraSmall\">\n <IconSettingsLine />\n </AppIconButton>\n </StackColumn>\n\n {/* Error */}\n <StackColumn direction=\"row\" gap={2} alignItems=\"center\">\n <AppIconButton color=\"error\" size=\"large\">\n <IconDeleteBinLine />\n </AppIconButton>\n\n <AppIconButton color=\"error\" size=\"medium\">\n <IconDeleteBinLine />\n </AppIconButton>\n\n <AppIconButton color=\"error\" size=\"small\">\n <IconDeleteBinLine />\n </AppIconButton>\n\n <AppIconButton color=\"error\" size=\"extraSmall\">\n <IconDeleteBinLine />\n </AppIconButton>\n </StackColumn>\n\n {/* Default */}\n <StackColumn direction=\"row\" gap={2} alignItems=\"center\">\n <AppIconButton color=\"default\" size=\"large\">\n <IconDeleteBinLine />\n </AppIconButton>\n\n <AppIconButton color=\"default\" size=\"medium\">\n <IconDeleteBinLine />\n </AppIconButton>\n\n <AppIconButton color=\"default\" size=\"small\">\n <IconDeleteBinLine />\n </AppIconButton>\n\n <AppIconButton color=\"default\" size=\"extraSmall\">\n <IconDeleteBinLine />\n </AppIconButton>\n </StackColumn>\n\n {/* Loading */}\n <StackColumn direction=\"row\" gap={2} alignItems=\"center\">\n <AppIconButton color=\"primary\" size=\"large\" loading>\n <IconSettingsLine />\n </AppIconButton>\n\n <AppIconButton color=\"primary\" size=\"medium\" loading>\n <IconSettingsLine />\n </AppIconButton>\n\n <AppIconButton color=\"primary\" size=\"small\" loading>\n <IconSettingsLine />\n </AppIconButton>\n\n <AppIconButton color=\"primary\" size=\"extraSmall\" loading>\n <IconSettingsLine />\n </AppIconButton>\n </StackColumn>\n </StackColumn>\n ),\n args: {},\n};\n"],"names":["AppIconButton","jsxs","StackColumn","jsx","IconSettingsLine","IconDeleteBinLine"],"mappings":"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"}
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
|
|
3
|
-
const appIconWithTooltip = require("../../components/app-icon-with-tooltip.js");
|
|
4
|
-
const meta = {
|
|
5
|
-
title: "React/App Icon With Tooltip",
|
|
6
|
-
component: appIconWithTooltip.AppIconWithTooltip,
|
|
7
|
-
parameters: {
|
|
8
|
-
layout: "centered"
|
|
9
|
-
},
|
|
10
|
-
tags: ["autodocs"],
|
|
11
|
-
argTypes: {
|
|
12
|
-
tooltip: {
|
|
13
|
-
control: "text"
|
|
14
|
-
},
|
|
15
|
-
accessibleAreaWidth: {
|
|
16
|
-
control: "text"
|
|
17
|
-
},
|
|
18
|
-
accessibleAreaHeight: {
|
|
19
|
-
control: "text"
|
|
20
|
-
},
|
|
21
|
-
iconProps: {
|
|
22
|
-
control: "object"
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
};
|
|
26
|
-
const Variants = {
|
|
27
|
-
args: {
|
|
28
|
-
tooltip: "Tooltip sample",
|
|
29
|
-
accessibleAreaWidth: "36px",
|
|
30
|
-
accessibleAreaHeight: "36px",
|
|
31
|
-
tooltipProps: { enterDelay: 250 }
|
|
32
|
-
}
|
|
33
|
-
};
|
|
34
|
-
exports.Variants = Variants;
|
|
35
|
-
exports.default = meta;
|
|
36
|
-
//# sourceMappingURL=AppIconWithTooltip.stories.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AppIconWithTooltip.stories.js","sources":["../../../../../src/stories/react/AppIconWithTooltip.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react-vite';\n\nimport { AppIconWithTooltip } from '~/components/app-icon-with-tooltip';\n\n//\n//\n\n// Meta\nconst meta = {\n title: 'React/App Icon With Tooltip',\n component: AppIconWithTooltip,\n parameters: {\n layout: 'centered',\n },\n tags: ['autodocs'],\n argTypes: {\n tooltip: {\n control: 'text',\n },\n accessibleAreaWidth: {\n control: 'text',\n },\n accessibleAreaHeight: {\n control: 'text',\n },\n iconProps: {\n control: 'object',\n },\n },\n} satisfies Meta<typeof AppIconWithTooltip>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n//\n\nexport const Variants: Story = {\n args: {\n tooltip: 'Tooltip sample',\n accessibleAreaWidth: '36px',\n accessibleAreaHeight: '36px',\n tooltipProps: { enterDelay: 250 },\n },\n};\n"],"names":["AppIconWithTooltip"],"mappings":";;;AAQA,MAAM,OAAO;AAAA,EACX,OAAO;AAAA,EACP,WAAWA,mBAAAA;AAAAA,EACX,YAAY;AAAA,IACV,QAAQ;AAAA,EAAA;AAAA,EAEV,MAAM,CAAC,UAAU;AAAA,EACjB,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,IAAA;AAAA,IAEX,qBAAqB;AAAA,MACnB,SAAS;AAAA,IAAA;AAAA,IAEX,sBAAsB;AAAA,MACpB,SAAS;AAAA,IAAA;AAAA,IAEX,WAAW;AAAA,MACT,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ;AAOO,MAAM,WAAkB;AAAA,EAC7B,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,qBAAqB;AAAA,IACrB,sBAAsB;AAAA,IACtB,cAAc,EAAE,YAAY,IAAA;AAAA,EAAI;AAEpC;;;"}
|
|
@@ -1,158 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
|
|
3
|
-
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
-
const material = require("@mui/material");
|
|
5
|
-
const appInputBase = require("../../components/app-input-base.js");
|
|
6
|
-
const appTypography = require("../../components/app-typography.js");
|
|
7
|
-
const stackColumn = require("../../components/stack-column.js");
|
|
8
|
-
const meta = {
|
|
9
|
-
title: "React/App Input Base",
|
|
10
|
-
component: appInputBase.AppInputBase,
|
|
11
|
-
parameters: {
|
|
12
|
-
layout: "centered"
|
|
13
|
-
},
|
|
14
|
-
tags: ["autodocs"],
|
|
15
|
-
argTypes: {
|
|
16
|
-
size: {
|
|
17
|
-
control: "select",
|
|
18
|
-
options: ["medium", "small"]
|
|
19
|
-
},
|
|
20
|
-
disabled: {
|
|
21
|
-
control: "boolean"
|
|
22
|
-
},
|
|
23
|
-
error: {
|
|
24
|
-
control: "boolean"
|
|
25
|
-
},
|
|
26
|
-
multiline: {
|
|
27
|
-
control: "boolean"
|
|
28
|
-
},
|
|
29
|
-
label: {
|
|
30
|
-
control: "text"
|
|
31
|
-
},
|
|
32
|
-
placeholder: {
|
|
33
|
-
control: "text"
|
|
34
|
-
},
|
|
35
|
-
helperText: {
|
|
36
|
-
control: "text"
|
|
37
|
-
},
|
|
38
|
-
startAdornmentText: {
|
|
39
|
-
control: "text"
|
|
40
|
-
},
|
|
41
|
-
endAdornmentText: {
|
|
42
|
-
control: "text"
|
|
43
|
-
}
|
|
44
|
-
},
|
|
45
|
-
args: {
|
|
46
|
-
size: "medium",
|
|
47
|
-
label: "Label",
|
|
48
|
-
placeholder: "Placeholder text",
|
|
49
|
-
disabled: false,
|
|
50
|
-
error: false,
|
|
51
|
-
multiline: false
|
|
52
|
-
}
|
|
53
|
-
};
|
|
54
|
-
const Playground = {
|
|
55
|
-
args: {}
|
|
56
|
-
};
|
|
57
|
-
const Variants = {
|
|
58
|
-
render: () => /* @__PURE__ */ jsxRuntime.jsxs(stackColumn.StackColumn, { sx: { background: "white" }, padding: 4, gap: 3, width: 400, children: [
|
|
59
|
-
/* @__PURE__ */ jsxRuntime.jsxs(stackColumn.StackColumn, { gap: 2, children: [
|
|
60
|
-
/* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { variant: "h6", children: "Basic" }),
|
|
61
|
-
/* @__PURE__ */ jsxRuntime.jsx(appInputBase.AppInputBase, {}),
|
|
62
|
-
/* @__PURE__ */ jsxRuntime.jsx(appInputBase.AppInputBase, { label: "User name" }),
|
|
63
|
-
/* @__PURE__ */ jsxRuntime.jsx(appInputBase.AppInputBase, { label: "User name", placeholder: "Enter your username" }),
|
|
64
|
-
/* @__PURE__ */ jsxRuntime.jsx(appInputBase.AppInputBase, { label: "User name", placeholder: "Enter your username", size: "small" })
|
|
65
|
-
] }),
|
|
66
|
-
/* @__PURE__ */ jsxRuntime.jsx(material.Divider, {}),
|
|
67
|
-
/* @__PURE__ */ jsxRuntime.jsxs(stackColumn.StackColumn, { gap: 2, children: [
|
|
68
|
-
/* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { variant: "h6", children: "States" }),
|
|
69
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
70
|
-
appInputBase.AppInputBase,
|
|
71
|
-
{
|
|
72
|
-
label: "Error",
|
|
73
|
-
placeholder: "Invalid input",
|
|
74
|
-
error: true,
|
|
75
|
-
helperText: "This field is required"
|
|
76
|
-
}
|
|
77
|
-
),
|
|
78
|
-
/* @__PURE__ */ jsxRuntime.jsx(appInputBase.AppInputBase, { label: "Disabled", placeholder: "Cannot edit", disabled: true })
|
|
79
|
-
] }),
|
|
80
|
-
/* @__PURE__ */ jsxRuntime.jsx(material.Divider, {}),
|
|
81
|
-
/* @__PURE__ */ jsxRuntime.jsxs(stackColumn.StackColumn, { gap: 2, children: [
|
|
82
|
-
/* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { variant: "h6", children: "Adornments" }),
|
|
83
|
-
/* @__PURE__ */ jsxRuntime.jsx(appInputBase.AppInputBase, { label: "Price", placeholder: "0.00", startAdornmentText: "$" }),
|
|
84
|
-
/* @__PURE__ */ jsxRuntime.jsx(appInputBase.AppInputBase, { label: "Price", placeholder: "0.00", endAdornmentText: "$" }),
|
|
85
|
-
/* @__PURE__ */ jsxRuntime.jsx(appInputBase.AppInputBase, { label: "Weight", placeholder: "0", endAdornmentText: "Kg" }),
|
|
86
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
87
|
-
appInputBase.AppInputBase,
|
|
88
|
-
{
|
|
89
|
-
label: "Price",
|
|
90
|
-
placeholder: "0.00",
|
|
91
|
-
endAdornmentText: "SAR",
|
|
92
|
-
endAdornmentTextProps: { typographyProps: { color: "primary" } }
|
|
93
|
-
}
|
|
94
|
-
)
|
|
95
|
-
] }),
|
|
96
|
-
/* @__PURE__ */ jsxRuntime.jsx(material.Divider, {}),
|
|
97
|
-
/* @__PURE__ */ jsxRuntime.jsxs(stackColumn.StackColumn, { gap: 2, children: [
|
|
98
|
-
/* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { variant: "h6", children: "Multiline" }),
|
|
99
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
100
|
-
appInputBase.AppInputBase,
|
|
101
|
-
{
|
|
102
|
-
label: "Description",
|
|
103
|
-
placeholder: "Enter a detailed description...",
|
|
104
|
-
endAdornmentText: "Kg",
|
|
105
|
-
multiline: true
|
|
106
|
-
}
|
|
107
|
-
)
|
|
108
|
-
] }),
|
|
109
|
-
/* @__PURE__ */ jsxRuntime.jsx(material.Divider, {}),
|
|
110
|
-
/* @__PURE__ */ jsxRuntime.jsxs(stackColumn.StackColumn, { gap: 2, children: [
|
|
111
|
-
/* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { variant: "h6", children: "RTL" }),
|
|
112
|
-
/* @__PURE__ */ jsxRuntime.jsx(appInputBase.AppInputBase, { dir: "rtl", label: "اسم المستخدم" }),
|
|
113
|
-
/* @__PURE__ */ jsxRuntime.jsx(appInputBase.AppInputBase, { dir: "rtl", label: "اسم المستخدم", placeholder: "اسم المستخدم" }),
|
|
114
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
115
|
-
appInputBase.AppInputBase,
|
|
116
|
-
{
|
|
117
|
-
dir: "rtl",
|
|
118
|
-
label: "اسم المستخدم",
|
|
119
|
-
placeholder: "اسم المستخدم",
|
|
120
|
-
size: "small",
|
|
121
|
-
error: true
|
|
122
|
-
}
|
|
123
|
-
),
|
|
124
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
125
|
-
appInputBase.AppInputBase,
|
|
126
|
-
{
|
|
127
|
-
dir: "rtl",
|
|
128
|
-
label: "اسم المستخدم",
|
|
129
|
-
placeholder: "اسم المستخدم",
|
|
130
|
-
startAdornmentText: "$"
|
|
131
|
-
}
|
|
132
|
-
),
|
|
133
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
134
|
-
appInputBase.AppInputBase,
|
|
135
|
-
{
|
|
136
|
-
dir: "rtl",
|
|
137
|
-
label: "اسم المستخدم",
|
|
138
|
-
placeholder: "اسم المستخدم",
|
|
139
|
-
endAdornmentText: "Kg"
|
|
140
|
-
}
|
|
141
|
-
),
|
|
142
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
143
|
-
appInputBase.AppInputBase,
|
|
144
|
-
{
|
|
145
|
-
dir: "rtl",
|
|
146
|
-
label: "الوصف",
|
|
147
|
-
placeholder: "هذا النص طويل جداً جداً جداً جداً للاختبار",
|
|
148
|
-
endAdornmentText: "Kg",
|
|
149
|
-
multiline: true
|
|
150
|
-
}
|
|
151
|
-
)
|
|
152
|
-
] })
|
|
153
|
-
] })
|
|
154
|
-
};
|
|
155
|
-
exports.Playground = Playground;
|
|
156
|
-
exports.Variants = Variants;
|
|
157
|
-
exports.default = meta;
|
|
158
|
-
//# sourceMappingURL=AppInputBase.stories.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AppInputBase.stories.js","sources":["../../../../../src/stories/react/AppInputBase.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react-vite';\n\nimport { Divider } from '@mui/material';\n\nimport { AppInputBase } from '~/components/app-input-base';\nimport { AppTypography } from '~/components/app-typography';\nimport { StackColumn } from '~/components/stack-column';\n\n//\n//\n\n// Meta\nconst meta = {\n title: 'React/App Input Base',\n component: AppInputBase,\n parameters: {\n layout: 'centered',\n },\n tags: ['autodocs'],\n argTypes: {\n size: {\n control: 'select',\n options: ['medium', 'small'],\n },\n disabled: {\n control: 'boolean',\n },\n error: {\n control: 'boolean',\n },\n multiline: {\n control: 'boolean',\n },\n label: {\n control: 'text',\n },\n placeholder: {\n control: 'text',\n },\n helperText: {\n control: 'text',\n },\n startAdornmentText: {\n control: 'text',\n },\n endAdornmentText: {\n control: 'text',\n },\n },\n args: {\n size: 'medium',\n label: 'Label',\n placeholder: 'Placeholder text',\n disabled: false,\n error: false,\n multiline: false,\n },\n} satisfies Meta<typeof AppInputBase>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n//\n\nexport const Playground: Story = {\n args: {},\n};\n\n//\n\nexport const Variants: Story = {\n render: () => (\n <StackColumn sx={{ background: 'white' }} padding={4} gap={3} width={400}>\n <StackColumn gap={2}>\n <AppTypography variant=\"h6\">Basic</AppTypography>\n\n <AppInputBase />\n <AppInputBase label=\"User name\" />\n <AppInputBase label=\"User name\" placeholder=\"Enter your username\" />\n <AppInputBase label=\"User name\" placeholder=\"Enter your username\" size=\"small\" />\n </StackColumn>\n\n <Divider />\n\n <StackColumn gap={2}>\n <AppTypography variant=\"h6\">States</AppTypography>\n\n <AppInputBase\n label=\"Error\"\n placeholder=\"Invalid input\"\n error\n helperText=\"This field is required\"\n />\n <AppInputBase label=\"Disabled\" placeholder=\"Cannot edit\" disabled />\n </StackColumn>\n\n <Divider />\n\n <StackColumn gap={2}>\n <AppTypography variant=\"h6\">Adornments</AppTypography>\n\n <AppInputBase label=\"Price\" placeholder=\"0.00\" startAdornmentText=\"$\" />\n <AppInputBase label=\"Price\" placeholder=\"0.00\" endAdornmentText=\"$\" />\n <AppInputBase label=\"Weight\" placeholder=\"0\" endAdornmentText=\"Kg\" />\n <AppInputBase\n label=\"Price\"\n placeholder=\"0.00\"\n endAdornmentText=\"SAR\"\n endAdornmentTextProps={{ typographyProps: { color: 'primary' } }}\n />\n </StackColumn>\n\n <Divider />\n\n <StackColumn gap={2}>\n <AppTypography variant=\"h6\">Multiline</AppTypography>\n\n <AppInputBase\n label=\"Description\"\n placeholder=\"Enter a detailed description...\"\n endAdornmentText=\"Kg\"\n multiline\n />\n </StackColumn>\n\n <Divider />\n\n <StackColumn gap={2}>\n <AppTypography variant=\"h6\">RTL</AppTypography>\n\n <AppInputBase dir=\"rtl\" label=\"اسم المستخدم\" />\n <AppInputBase dir=\"rtl\" label=\"اسم المستخدم\" placeholder=\"اسم المستخدم\" />\n <AppInputBase\n dir=\"rtl\"\n label=\"اسم المستخدم\"\n placeholder=\"اسم المستخدم\"\n size=\"small\"\n error\n />\n <AppInputBase\n dir=\"rtl\"\n label=\"اسم المستخدم\"\n placeholder=\"اسم المستخدم\"\n startAdornmentText=\"$\"\n />\n <AppInputBase\n dir=\"rtl\"\n label=\"اسم المستخدم\"\n placeholder=\"اسم المستخدم\"\n endAdornmentText=\"Kg\"\n />\n <AppInputBase\n dir=\"rtl\"\n label=\"الوصف\"\n placeholder=\"هذا النص طويل جداً جداً جداً جداً للاختبار\"\n endAdornmentText=\"Kg\"\n multiline\n />\n </StackColumn>\n </StackColumn>\n ),\n};\n"],"names":["AppInputBase","jsxs","StackColumn","jsx","AppTypography","Divider"],"mappings":"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"}
|
|
@@ -1,87 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
|
|
3
|
-
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
-
const material = require("@mui/material");
|
|
5
|
-
const appInputBaseSearch = require("../../components/app-input-base-search.js");
|
|
6
|
-
const appTypography = require("../../components/app-typography.js");
|
|
7
|
-
const stackColumn = require("../../components/stack-column.js");
|
|
8
|
-
const meta = {
|
|
9
|
-
title: "React/App Input Base Search",
|
|
10
|
-
component: appInputBaseSearch.AppInputBaseSearch,
|
|
11
|
-
parameters: {
|
|
12
|
-
layout: "centered"
|
|
13
|
-
},
|
|
14
|
-
tags: ["autodocs"],
|
|
15
|
-
argTypes: {
|
|
16
|
-
size: {
|
|
17
|
-
control: "select",
|
|
18
|
-
options: ["medium", "small"]
|
|
19
|
-
},
|
|
20
|
-
disabled: {
|
|
21
|
-
control: "boolean"
|
|
22
|
-
},
|
|
23
|
-
error: {
|
|
24
|
-
control: "boolean"
|
|
25
|
-
},
|
|
26
|
-
label: {
|
|
27
|
-
control: "text"
|
|
28
|
-
},
|
|
29
|
-
placeholder: {
|
|
30
|
-
control: "text"
|
|
31
|
-
}
|
|
32
|
-
},
|
|
33
|
-
args: {
|
|
34
|
-
name: "search",
|
|
35
|
-
label: "Search",
|
|
36
|
-
placeholder: "Search for...",
|
|
37
|
-
disabled: false,
|
|
38
|
-
error: false
|
|
39
|
-
}
|
|
40
|
-
};
|
|
41
|
-
const Playground = {
|
|
42
|
-
args: {}
|
|
43
|
-
};
|
|
44
|
-
const Variants = {
|
|
45
|
-
render: () => /* @__PURE__ */ jsxRuntime.jsxs(stackColumn.StackColumn, { sx: { background: "white" }, padding: 4, gap: 4, width: 400, children: [
|
|
46
|
-
/* @__PURE__ */ jsxRuntime.jsxs(stackColumn.StackColumn, { children: [
|
|
47
|
-
/* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { variant: "h6", children: "Basic" }),
|
|
48
|
-
/* @__PURE__ */ jsxRuntime.jsx(appInputBaseSearch.AppInputBaseSearch, { name: "search" }),
|
|
49
|
-
/* @__PURE__ */ jsxRuntime.jsx(appInputBaseSearch.AppInputBaseSearch, { name: "search", label: "Search" }),
|
|
50
|
-
/* @__PURE__ */ jsxRuntime.jsx(appInputBaseSearch.AppInputBaseSearch, { name: "search", label: "Search", placeholder: "Search for..." })
|
|
51
|
-
] }),
|
|
52
|
-
/* @__PURE__ */ jsxRuntime.jsx(material.Divider, {}),
|
|
53
|
-
/* @__PURE__ */ jsxRuntime.jsxs(stackColumn.StackColumn, { children: [
|
|
54
|
-
/* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { variant: "h6", children: "Sizes" }),
|
|
55
|
-
/* @__PURE__ */ jsxRuntime.jsx(appInputBaseSearch.AppInputBaseSearch, { name: "search", label: "Medium", placeholder: "Search for..." }),
|
|
56
|
-
/* @__PURE__ */ jsxRuntime.jsx(appInputBaseSearch.AppInputBaseSearch, { name: "search", label: "Small", placeholder: "Search for...", size: "small" })
|
|
57
|
-
] }),
|
|
58
|
-
/* @__PURE__ */ jsxRuntime.jsx(material.Divider, {}),
|
|
59
|
-
/* @__PURE__ */ jsxRuntime.jsxs(stackColumn.StackColumn, { children: [
|
|
60
|
-
/* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { variant: "h6", children: "States" }),
|
|
61
|
-
/* @__PURE__ */ jsxRuntime.jsx(appInputBaseSearch.AppInputBaseSearch, { name: "search", label: "Error", placeholder: "Search for...", error: true }),
|
|
62
|
-
/* @__PURE__ */ jsxRuntime.jsx(appInputBaseSearch.AppInputBaseSearch, { name: "search", label: "Disabled", placeholder: "Search for...", disabled: true })
|
|
63
|
-
] }),
|
|
64
|
-
/* @__PURE__ */ jsxRuntime.jsx(material.Divider, {}),
|
|
65
|
-
/* @__PURE__ */ jsxRuntime.jsxs(stackColumn.StackColumn, { children: [
|
|
66
|
-
/* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { variant: "h6", children: "RTL" }),
|
|
67
|
-
/* @__PURE__ */ jsxRuntime.jsx(appInputBaseSearch.AppInputBaseSearch, { name: "search", dir: "rtl" }),
|
|
68
|
-
/* @__PURE__ */ jsxRuntime.jsx(appInputBaseSearch.AppInputBaseSearch, { name: "search", dir: "rtl", label: "بحث" }),
|
|
69
|
-
/* @__PURE__ */ jsxRuntime.jsx(appInputBaseSearch.AppInputBaseSearch, { name: "search", dir: "rtl", label: "بحث", placeholder: "ابحث عن..." }),
|
|
70
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
71
|
-
appInputBaseSearch.AppInputBaseSearch,
|
|
72
|
-
{
|
|
73
|
-
name: "search",
|
|
74
|
-
dir: "rtl",
|
|
75
|
-
label: "بحث",
|
|
76
|
-
placeholder: "ابحث عن...",
|
|
77
|
-
size: "small",
|
|
78
|
-
error: true
|
|
79
|
-
}
|
|
80
|
-
)
|
|
81
|
-
] })
|
|
82
|
-
] })
|
|
83
|
-
};
|
|
84
|
-
exports.Playground = Playground;
|
|
85
|
-
exports.Variants = Variants;
|
|
86
|
-
exports.default = meta;
|
|
87
|
-
//# sourceMappingURL=AppInputBaseSearch.stories.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AppInputBaseSearch.stories.js","sources":["../../../../../src/stories/react/AppInputBaseSearch.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react-vite';\n\nimport { Divider } from '@mui/material';\n\nimport { AppInputBaseSearch } from '~/components/app-input-base-search';\nimport { AppTypography } from '~/components/app-typography';\nimport { StackColumn } from '~/components/stack-column';\n\n//\n//\n\n// Meta\nconst meta = {\n title: 'React/App Input Base Search',\n component: AppInputBaseSearch,\n parameters: {\n layout: 'centered',\n },\n tags: ['autodocs'],\n argTypes: {\n size: {\n control: 'select',\n options: ['medium', 'small'],\n },\n disabled: {\n control: 'boolean',\n },\n error: {\n control: 'boolean',\n },\n label: {\n control: 'text',\n },\n placeholder: {\n control: 'text',\n },\n },\n args: {\n name: 'search',\n label: 'Search',\n placeholder: 'Search for...',\n disabled: false,\n error: false,\n },\n} satisfies Meta<typeof AppInputBaseSearch>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n//\n\nexport const Playground: Story = {\n args: {},\n};\n\n//\n\nexport const Variants: Story = {\n render: () => (\n <StackColumn sx={{ background: 'white' }} padding={4} gap={4} width={400}>\n <StackColumn>\n <AppTypography variant=\"h6\">Basic</AppTypography>\n\n <AppInputBaseSearch name=\"search\" />\n <AppInputBaseSearch name=\"search\" label=\"Search\" />\n <AppInputBaseSearch name=\"search\" label=\"Search\" placeholder=\"Search for...\" />\n </StackColumn>\n\n <Divider />\n\n <StackColumn>\n <AppTypography variant=\"h6\">Sizes</AppTypography>\n\n <AppInputBaseSearch name=\"search\" label=\"Medium\" placeholder=\"Search for...\" />\n <AppInputBaseSearch name=\"search\" label=\"Small\" placeholder=\"Search for...\" size=\"small\" />\n </StackColumn>\n\n <Divider />\n\n <StackColumn>\n <AppTypography variant=\"h6\">States</AppTypography>\n\n <AppInputBaseSearch name=\"search\" label=\"Error\" placeholder=\"Search for...\" error />\n <AppInputBaseSearch name=\"search\" label=\"Disabled\" placeholder=\"Search for...\" disabled />\n </StackColumn>\n\n <Divider />\n\n <StackColumn>\n <AppTypography variant=\"h6\">RTL</AppTypography>\n\n <AppInputBaseSearch name=\"search\" dir=\"rtl\" />\n <AppInputBaseSearch name=\"search\" dir=\"rtl\" label=\"بحث\" />\n <AppInputBaseSearch name=\"search\" dir=\"rtl\" label=\"بحث\" placeholder=\"ابحث عن...\" />\n <AppInputBaseSearch\n name=\"search\"\n dir=\"rtl\"\n label=\"بحث\"\n placeholder=\"ابحث عن...\"\n size=\"small\"\n error\n />\n </StackColumn>\n </StackColumn>\n ),\n};\n"],"names":["AppInputBaseSearch","jsxs","StackColumn","jsx","AppTypography","Divider"],"mappings":";;;;;;;AAYA,MAAM,OAAO;AAAA,EACX,OAAO;AAAA,EACP,WAAWA,mBAAAA;AAAAA,EACX,YAAY;AAAA,IACV,QAAQ;AAAA,EAAA;AAAA,EAEV,MAAM,CAAC,UAAU;AAAA,EACjB,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,SAAS,CAAC,UAAU,OAAO;AAAA,IAAA;AAAA,IAE7B,UAAU;AAAA,MACR,SAAS;AAAA,IAAA;AAAA,IAEX,OAAO;AAAA,MACL,SAAS;AAAA,IAAA;AAAA,IAEX,OAAO;AAAA,MACL,SAAS;AAAA,IAAA;AAAA,IAEX,aAAa;AAAA,MACX,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAEF,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,OAAO;AAAA,IACP,aAAa;AAAA,IACb,UAAU;AAAA,IACV,OAAO;AAAA,EAAA;AAEX;AAOO,MAAM,aAAoB;AAAA,EAC/B,MAAM,CAAA;AACR;AAIO,MAAM,WAAkB;AAAA,EAC7B,QAAQ,MACNC,2BAAAA,KAACC,YAAAA,aAAA,EAAY,IAAI,EAAE,YAAY,QAAA,GAAW,SAAS,GAAG,KAAK,GAAG,OAAO,KACnE,UAAA;AAAA,IAAAD,gCAACC,YAAAA,aAAA,EACC,UAAA;AAAA,MAAAC,2BAAAA,IAACC,cAAAA,eAAA,EAAc,SAAQ,MAAK,UAAA,SAAK;AAAA,MAEjCD,2BAAAA,IAACH,mBAAAA,oBAAA,EAAmB,MAAK,SAAA,CAAS;AAAA,MAClCG,2BAAAA,IAACH,mBAAAA,oBAAA,EAAmB,MAAK,UAAS,OAAM,UAAS;AAAA,qCAChDA,mBAAAA,oBAAA,EAAmB,MAAK,UAAS,OAAM,UAAS,aAAY,gBAAA,CAAgB;AAAA,IAAA,GAC/E;AAAA,mCAECK,SAAAA,SAAA,EAAQ;AAAA,oCAERH,YAAAA,aAAA,EACC,UAAA;AAAA,MAAAC,2BAAAA,IAACC,cAAAA,eAAA,EAAc,SAAQ,MAAK,UAAA,SAAK;AAAA,qCAEhCJ,mBAAAA,oBAAA,EAAmB,MAAK,UAAS,OAAM,UAAS,aAAY,iBAAgB;AAAA,MAC7EG,2BAAAA,IAACH,mBAAAA,sBAAmB,MAAK,UAAS,OAAM,SAAQ,aAAY,iBAAgB,MAAK,QAAA,CAAQ;AAAA,IAAA,GAC3F;AAAA,mCAECK,SAAAA,SAAA,EAAQ;AAAA,oCAERH,YAAAA,aAAA,EACC,UAAA;AAAA,MAAAC,2BAAAA,IAACC,cAAAA,eAAA,EAAc,SAAQ,MAAK,UAAA,UAAM;AAAA,MAElCD,2BAAAA,IAACH,mBAAAA,sBAAmB,MAAK,UAAS,OAAM,SAAQ,aAAY,iBAAgB,OAAK,KAAA,CAAC;AAAA,MAClFG,2BAAAA,IAACH,mBAAAA,sBAAmB,MAAK,UAAS,OAAM,YAAW,aAAY,iBAAgB,UAAQ,KAAA,CAAC;AAAA,IAAA,GAC1F;AAAA,mCAECK,SAAAA,SAAA,EAAQ;AAAA,oCAERH,YAAAA,aAAA,EACC,UAAA;AAAA,MAAAC,2BAAAA,IAACC,cAAAA,eAAA,EAAc,SAAQ,MAAK,UAAA,OAAG;AAAA,MAE/BD,2BAAAA,IAACH,mBAAAA,oBAAA,EAAmB,MAAK,UAAS,KAAI,OAAM;AAAA,qCAC3CA,mBAAAA,oBAAA,EAAmB,MAAK,UAAS,KAAI,OAAM,OAAM,OAAM;AAAA,MACxDG,2BAAAA,IAACH,mBAAAA,sBAAmB,MAAK,UAAS,KAAI,OAAM,OAAM,OAAM,aAAY,aAAA,CAAa;AAAA,MACjFG,2BAAAA;AAAAA,QAACH,mBAAAA;AAAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,KAAI;AAAA,UACJ,OAAM;AAAA,UACN,aAAY;AAAA,UACZ,MAAK;AAAA,UACL,OAAK;AAAA,QAAA;AAAA,MAAA;AAAA,IACP,EAAA,CACF;AAAA,EAAA,EAAA,CACF;AAEJ;;;;"}
|