@mobileaction/action-kit 1.42.7-beta.2 → 1.42.7-beta.3

package/src/components/notification/stories/commonStories.ts

@@ -0,0 +1,126 @@
+import { Template } from './constants';
+import { h } from 'vue';
+
+export const createStory = (args: Record<string, any>): any => {
+    const story = Template.bind({});
+    story.args = args;
+    return story;
+};
+
+const commonArgs = {
+    size: 'large',
+    variant: 'filled',
+    title: 'Insert your alert title here!',
+    description: 'Insert the alert description here. It would look better as two lines of text.',
+};
+
+export const createCommonStories = (variant: string) => ({
+    Success: createStory({
+        ...commonArgs,
+        variant,
+        type: 'success',
+    }),
+
+    Error: createStory({
+        ...commonArgs,
+        variant,
+        type: 'error',
+    }),
+
+    Warning: createStory({
+        ...commonArgs,
+        variant,
+        type: 'warning',
+    }),
+
+    Info: createStory({
+        ...commonArgs,
+        variant,
+        type: 'info',
+    }),
+
+    Dark: createStory({
+        ...commonArgs,
+        variant,
+        icon: 'pen-square',
+        type: 'dark',
+    }),
+
+    VNode: createStory({
+        variant,
+        type: 'success',
+        title: 'Insert your alert title here!',
+        size: 'large',
+        description: h('div', [
+            h('p', [
+                'We have recognized that there is ',
+                h('b', ['no integration']),
+                ' for these apps.',
+            ]),
+            h('p', ['Please ', h('b', ['integrate']), ' your apps.']),
+            h('img', { src: 'https://picsum.photos/200/300', width: 200, height: 300, class: 'my-2' }),
+            h('p', [
+                'Have unique recommended actions to increase your visibility within the App Store.',
+            ]),
+        ]),
+    }),
+
+    WithButtons: createStory({
+        ...commonArgs,
+        variant,
+        type: 'success',
+        buttons: [
+            {
+                label: 'Details',
+                onClick: () => {
+                    alert('Details Clicked!');
+                },
+            },
+            {
+                label: 'Learn More',
+                onClick: () => {
+                    alert('Learn More Clicked!');
+                },
+            },
+        ],
+    }),
+
+    NoTitle: createStory({
+        variant,
+        type: 'success',
+        description: 'Insert the alert description here.',
+        size: 'small',
+        buttons: [
+            {
+                label: 'Details',
+                onClick: () => {
+                    alert('Details Clicked!');
+                },
+            },
+        ],
+    }),
+
+    NoDescription: createStory({
+        variant,
+        type: 'success',
+        title: 'Insert the alert title here.',
+        size: 'small',
+        buttons: [
+            {
+                label: 'Details',
+                onClick: () => {
+                    alert('Details Clicked!');
+                },
+            },
+        ],
+    }),
+
+    Overflow: createStory({
+        variant,
+        type: 'dark',
+        size: 'large',
+        icon: 'pen-square',
+        title: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.',
+        description: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.',
+    }),
+});

package/src/components/notification/stories/constants.ts

@@ -0,0 +1,67 @@
+import type { Meta, StoryFn } from '@storybook/vue3';
+import { MaNotification, MaButton } from '@/index';
+import { NotificationOptions, NotificationPlacements, NotificationSizes, NotificationTypes, NotificationVariants } from '../types';
+import IconList from '@/components/icon/icons.json';
+
+export const baseConfig: Meta = {
+    parameters: {
+        docs: {
+            description: {
+                component: `<p><b>MaNotification</b> </p><p>
+                    Figma Designs <a href="https://www.figma.com/file/LsEcZ7CR3mf1vzBpCRgN7m/Design-Foundation_VD?type=design&node-id=631-77386&mode=dev" target="_blank">here!</a></p>
+                `,
+            },
+        },
+    },
+    argTypes: {
+        type: {
+            control: { type: 'select' },
+            options: NotificationTypes,
+            defaultValue: 'success',
+        },
+        variant: {
+            control: { type: 'select' },
+            options: NotificationVariants,
+            defaultValue: 'topRight',
+        },
+        placement: {
+            control: { type: 'select' },
+            options: NotificationPlacements,
+            defaultValue: 'topRight',
+        },
+        size: {
+            control: { type: 'select' },
+            options: NotificationSizes,
+            defaultValue: 'small',
+        },
+        duration: {
+            control: { type: 'number' },
+            description: 'milisecond',
+        },
+        closable: {
+            control: { type: 'boolean' },
+        },
+        buttons: {
+            control: { type: 'object' },
+        },
+        icon: {
+            control: { type: 'select' },
+            options: IconList,
+        },
+    },
+};
+
+export const Template: StoryFn = (args: NotificationOptions) => ({
+    components: {
+        MaButton,
+    },
+    setup() {
+
+        const show = () => {
+            MaNotification[args.type](args);
+        };
+
+        return { show };
+    },
+    template: `<div><ma-button @click="show">Open the notification</ma-button></div>`,
+});

package/src/components/notification/stories/docs.mdx

@@ -0,0 +1,100 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Core/Notification/Docs" />
+
+# MaNotification
+
+The `MaNotification` service allows you to easily add and remove notifications. You can use different notification types and placements.
+
+## Usage
+
+### Adding a Notification
+
+```js
+import { MaNotification } from '@/index';
+
+const notificationId = MaNotification.success({
+  title: 'Success notification',
+  duration: 3000, // Will automatically be removed after 3 seconds
+  placement: 'topRight', // Notification placement
+  buttons: [
+    { label: 'Click me', onClick: () => alert('Button clicked!') }
+  ]
+});
+
+// Notification ID can be used to manually remove the notification later
+```
+
+### Removing a Notification
+
+```js
+MaNotification.remove(notificationId);
+```
+
+### Remove All Notifications
+
+```js
+MaNotification.removeAll();
+```
+
+## Examples
+
+### Success Notification
+
+```js
+const notificationId = MaNotification.success({
+  variant: 'filled',
+  title: 'Success notification',
+  duration: 3000,
+  placement: 'topRight'
+});
+```
+
+### Error Notification
+
+```js
+MaNotification.error({
+  variant: 'filled',
+  title: 'Error notification',
+  duration: 3000,
+  placement: 'bottomLeft'
+});
+```
+
+### Info Notification with Button
+
+```js
+MaNotification.info({
+  variant: 'filled',
+  title: 'Info notification with button',
+  duration: 3000,
+  placement: 'topLeft',
+  buttons: [
+    { label: 'Click me', onClick: () => alert('Button clicked!') }
+  ]
+});
+```
+
+### Warning Notification
+
+```js
+MaNotification.warning({
+  variant: 'filled',
+  title: 'Warning notification',
+  duration: 3000,
+  placement: 'topRight'
+});
+```
+
+### Dark Notification
+
+```js
+MaNotification.dark({
+  variant: 'filled',
+  title: 'Dark notification',
+  duration: 3000,
+  placement: 'bottomRight'
+});
+```
+
+### Different Sizes

package/src/components/notification/stories/filled.stories.ts

@@ -0,0 +1,23 @@
+import type { Meta } from '@storybook/vue3';
+import { baseConfig } from './constants';
+import { createCommonStories } from './commonStories';
+
+const meta: Meta = {
+  title: 'Core/Notification/Filled',
+  ...baseConfig,
+};
+
+export default meta;
+
+const stories = createCommonStories('filled');
+
+export const Success = stories.Success;
+export const ErrorType = stories.Error;
+export const Warning = stories.Warning;
+export const Info = stories.Info;
+export const Dark = stories.Dark;
+export const VNode = stories.VNode;
+export const WithButtons = stories.WithButtons;
+export const NoTitle = stories.NoTitle;
+export const NoDescription = stories.NoDescription;
+export const Overflow = stories.Overflow;

package/src/components/notification/stories/light.stories.ts

@@ -0,0 +1,23 @@
+import type { Meta } from '@storybook/vue3';
+import { baseConfig } from './constants';
+import { createCommonStories } from './commonStories';
+
+const meta: Meta = {
+  title: 'Core/Notification/Light',
+  ...baseConfig,
+};
+
+export default meta;
+
+const stories = createCommonStories('light');
+
+export const Success = stories.Success;
+export const ErrorType = stories.Error;
+export const Warning = stories.Warning;
+export const Info = stories.Info;
+export const Dark = stories.Dark;
+export const VNode = stories.VNode;
+export const WithButtons = stories.WithButtons;
+export const NoTitle = stories.NoTitle;
+export const NoDescription = stories.NoDescription;
+export const Overflow = stories.Overflow;

package/src/components/notification/stories/stroke.stories.ts

@@ -0,0 +1,23 @@
+import type { Meta } from '@storybook/vue3';
+import { baseConfig } from './constants';
+import { createCommonStories } from './commonStories';
+
+const meta: Meta = {
+  title: 'Core/Notification/Stroke',
+  ...baseConfig,
+};
+
+export default meta;
+
+const stories = createCommonStories('stroke');
+
+export const Success = stories.Success;
+export const ErrorType = stories.Error;
+export const Warning = stories.Warning;
+export const Info = stories.Info;
+export const Dark = stories.Dark;
+export const VNode = stories.VNode;
+export const WithButtons = stories.WithButtons;
+export const NoTitle = stories.NoTitle;
+export const NoDescription = stories.NoDescription;
+export const Overflow = stories.Overflow;

package/src/components/notification/types.ts

@@ -0,0 +1,56 @@
+import { VNode } from 'vue';
+
+export const NotificationTypes = [
+    'dark',
+    'info',
+    'error',
+    'success',
+    'warning',
+] as const;
+
+export type NotificationType = (typeof NotificationTypes)[number];
+
+export const NotificationVariants = [
+    'filled',
+    'light',
+    'stroke',
+] as const;
+
+export type NotificationVariant = (typeof NotificationVariants)[number];
+
+export const NotificationPlacements = [
+    'top',
+    'topLeft',
+    'topRight',
+    'bottom',
+    'bottomLeft',
+    'bottomRight',
+] as const;
+
+export type NotificationPlacement = (typeof NotificationPlacements)[number];
+
+export const NotificationSizes = [
+    'small',
+    'large',
+] as const;
+
+export type NotificationSize = (typeof NotificationSizes)[number];
+
+export interface NotificationButton {
+  label: string;
+  onClick: (id: number | string) => void;
+}
+
+export interface NotificationOptions {
+  id?: number | string,
+  description?: string | VNode;
+  title?: string | VNode;
+  type?: NotificationType;
+  closable?: boolean;
+  buttons?: NotificationButton[];
+  placement?: NotificationPlacement;
+  duration?: number;
+  variant?: NotificationVariant;
+  size?: NotificationSize;
+  icon?: string;
+}

package/src/components/numeric-input/assets/styles.scss

@@ -0,0 +1,53 @@
+.ma-numeric-input {
+  @apply flex flex-wrap gap-1.5;
+  &__input {
+    @apply border border-gray-300 rounded-lg bg-white outline-none text-center text-gray-900 text-[2rem] leading-[3rem] font-euclid;
+    /* Chrome, Safari, Edge, Opera */
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+
+    /* Firefox */
+    &[type="number"] {
+      -moz-appearance: textfield;
+    }
+    &::placeholder {
+      @apply text-gray-300 text-[2rem] leading-[3rem];
+    }
+  }
+  &:not(&--has-error, &--disabled) {
+    .ma-numeric-input__input {
+      &:focus {
+        @apply border-primary-jordy-blue;
+      }
+    }
+  }
+  &--has-error {
+    input {
+      @apply border-red-400 bg-red-25;
+    }
+  }
+  &--disabled {
+    @apply cursor-not-allowed;
+    input {
+      @apply border-gray-300 bg-gray-200 text-gray-300;
+    }
+  }
+  &--small {
+    input {
+      @apply w-12 h-14;
+    }
+  }
+  &--medium {
+    input {
+      @apply w-14 h-16;
+    }
+  }
+  &--large {
+    input {
+      @apply w-16 h-[4.5rem];
+    }
+  }
+}

package/src/components/numeric-input/components/singleNumericInput.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+
+export interface SingleNumericInputProps {
+    value?: string;
+    focus: boolean;
+}
+
+const props = withDefaults(defineProps<SingleNumericInputProps>(), {
+    value: '',
+    focus: false,
+});
+
+
+const emits = defineEmits(['update:value']);
+
+const input = ref(null);
+
+watch(
+    () => props.focus,
+    (focus) => {
+        if (focus) {
+            input.value.focus();
+        }
+    },
+);
+
+const handleInput = (e: Event) => {
+    emits("update:value", (e.target as HTMLInputElement).value)
+}
+
+</script>
+<template>
+    <input
+        v-bind="$attrs"
+        :value="props.value"
+        @input="handleInput"
+        ref="input"
+        type="number"
+        min="0"
+        max="9"
+        maxlength="1"
+        pattern="[0-9]"
+        inputmode="numeric"
+    />
+</template>

package/src/components/numeric-input/index.vue

@@ -0,0 +1,148 @@
+<script lang="ts">
+export default {
+  name: 'MaNumericInput',
+};
+</script>
+<script setup lang="ts">
+import { Ref, computed, ref, watch } from "vue";
+import SingleNumericInput from "./components/singleNumericInput.vue";
+
+import { NumericInputSize } from "./types";
+
+export interface MaNumericInputProps {
+    disabled?: boolean,
+    length?: number,
+    hasError?: boolean,
+    value?: string,
+    placeholderStatus?: boolean,
+    size?: NumericInputSize,
+}
+
+const props = withDefaults(defineProps<MaNumericInputProps>(), {
+    length: 6,
+    value: "",
+    placeholderStatus: true,
+    size: "medium",
+});
+
+const emits = defineEmits(['update:value']);
+
+const activeInput: Ref<number> = ref(null);
+const inputValues: Ref<string[]> = ref(Array.from({length: props.length}, (_, index: number) => props.value[index] || null));
+
+const classNames = computed(() => [
+    "ma-numeric-input",
+    `ma-numeric-input--${props.size}`,
+    {
+        'ma-numeric-input--has-error': props?.hasError
+    },
+    {
+        'ma-numeric-input--disabled': props?.disabled
+    },
+]);
+
+const singleInputPlaceholder = computed(() => props?.placeholderStatus? "0": null);
+
+const isCodeNumeric = (charCode: string) => /^Digit[0-9]$/.test(charCode);
+
+const handleFocus = (itemNumber: number) => activeInput.value = itemNumber;
+
+const handleKeydown = (event: KeyboardEvent, inputKey: number) => {
+
+    switch (event.code) {
+        case 'Backspace':
+        case 'Delete':
+            handleFocus(inputKey);
+            event.preventDefault();
+            if (!inputValues.value[inputKey]){
+                focusPrevInput();
+            }
+            handleSingleInputUpdate('', inputKey);
+            break;
+        case 'ArrowLeft':
+            event.preventDefault();
+            focusPrevInput();
+            break;
+        case 'ArrowRight':
+            event.preventDefault();
+            focusNextInput();
+            break;
+        default:
+            if(isCodeNumeric(event.code)){
+                event.preventDefault();
+                handleSingleInputUpdate(event.key, inputKey);
+                focusNextInput();
+            }
+          break;
+      }
+};
+
+const focusNextInput = () => {
+    if(activeInput.value < props.length){
+        activeInput.value++;
+    }
+};
+const focusPrevInput = () => {
+    if(props.length >= activeInput.value && activeInput.value > 0){
+        activeInput.value--;
+    }
+};
+
+const handleSingleInputUpdate = (inputValue: string, inputIndex: number) => {
+    inputValues.value[inputIndex] = inputValue;
+}
+
+const handleOnPaste = (event: ClipboardEvent, inputIndex: number) => {
+    event.preventDefault();
+    const pastedData = event.clipboardData
+        .getData('text/plain')
+        .replaceAll(' ', '')
+        .replaceAll('-', '')
+        .slice(0, props.length);
+    if(pastedData.length === 1 && pastedData.match(/^\d+$/)){
+        inputValues.value[inputIndex] = pastedData;
+    }
+    else if(pastedData.match(/^\d+$/)){
+        inputValues.value = pastedData.split('');
+    }
+}
+
+watch(
+    () => inputValues.value,
+    (data) => {
+        const value = data.join('');
+        emits("update:value", value);
+    },
+    {deep: true}
+);
+
+watch(
+    () => props.value,
+    (data) => {
+        if(data !== inputValues.value.join('') && data && data.match(/^\d+$/)){
+            inputValues.value = data.split('').slice(0, props.length);
+        }
+    },
+);
+
+</script>
+<template>
+    <div
+        :class="classNames"
+        v-bind="$attrs"
+    >
+        <single-numeric-input
+            v-for="i in props.length"
+            :focus="activeInput === i-1"
+            :key="i"
+            :placeholder="singleInputPlaceholder"
+            :value="inputValues[i-1]"
+            :disabled="props.disabled"
+            @focus="handleFocus(i-1)"
+            @keydown="handleKeydown($event, i-1)"
+            @paste="handleOnPaste($event, i-1)"
+            class="ma-numeric-input__input"
+        />
+    </div>
+</template>
+<style lang="scss" src="./assets/styles.scss"></style>