@fewbox/den 0.0.83

package/src/network/SSEObservableBase.d.ts

@@ -0,0 +1,12 @@
+import { Observable } from 'rxjs';
+export declare abstract class SSEObservableBase extends Observable<any> {
+    protected Path: string;
+    protected External: string;
+    protected Action: (value: any) => void;
+    protected ErrorHandler: (error: any) => void;
+    protected DoneHandler?: () => void;
+    constructor(path: string, external: string, action: (value: any) => void, errorHandler: (error: any) => void, doneHandler?: () => void);
+    protected GetHeader(customHeaders?: Record<string, string>): Record<string, string>;
+    protected GetUrl(): string;
+    protected Pipe(method: string, body?: any): Promise<void>;
+}

package/src/network/UploadHeaders.d.ts

@@ -0,0 +1,2 @@
+declare const _default: {};
+export default _default;

package/src/network/WS.d.ts

@@ -0,0 +1,11 @@
+import { IWebsocketOptions } from "./Network";
+declare class WS {
+    private websocket;
+    constructor(options: IWebsocketOptions);
+    send(data: string | ArrayBufferLike | Blob | ArrayBufferView): void;
+    receive(onmessage: ((this: WebSocket, ev: MessageEvent) => any) | null): void;
+    open(onopen: ((this: WebSocket, ev: Event) => any) | null): void;
+    close(onclose: ((this: WebSocket, ev: CloseEvent) => any) | null): void;
+    handleError(onerror: ((this: WebSocket, ev: Event) => any) | null): void;
+}
+export default WS;

package/src/network/index.d.ts

@@ -0,0 +1,43 @@
+export { default as NetworkObservableAjax } from './NetworkObservableAjax';
+export { default as Delete } from './Delete';
+export { default as NetworkObservableAjaxExternal } from './NetworkObservableAjaxExternal';
+export { default as DeleteExternal } from './DeleteExternal';
+export { default as GetExternal } from './GetExternal';
+export { default as PatchExternal } from './PatchExternal';
+export { default as PostExternal } from './PostExternal';
+export { default as PutExternal } from './PutExternal';
+export { default as GQL } from './GQL';
+export { default as GQLExternal } from './GQLExternal';
+export { default as GQLUpload } from './GQLUpload';
+export { default as GQLExternalUpload } from './GQLExternalUpload';
+export { default as NetworkObservableGQL } from './NetworkObservableGQL';
+export { default as Get } from './Get';
+export { default as JsonHeaders } from './JsonHeaders';
+export { default as GetLocal } from './GetLocal';
+export { default as Patch } from './Patch';
+export { default as Post } from './Post';
+export { default as Put } from './Put';
+export { default as GetFetch } from './GetFetch';
+export { default as GetFetchExternal } from './GetFetchExternal';
+export { default as PostFetch } from './PostFetch';
+export { default as PostFetchExternal } from './PostFetchExternal';
+export { default as PutFetch } from './PutFetch';
+export { default as PutFetchExternal } from './PutFetchExternal';
+export { default as PatchFetch } from './PatchFetch';
+export { default as PatchFetchExternal } from './PatchFetchExternal';
+export { default as PostSSE } from './PostSSE';
+export { default as PostForm } from './PostForm';
+export { default as PostFormExternal } from './PostFormExternal';
+export { default as PutForm } from './PutForm';
+export { default as PutFormExternal } from './PutFormExternal';
+export { default as PatchForm } from './PatchForm';
+export { default as PatchFormExternal } from './PatchFormExternal';
+export { default as GetForm } from './GetForm';
+export { default as GetFormExternal } from './GetFormExternal';
+export { default as DeleteForm } from './DeleteForm';
+export { default as DeleteFormExternal } from './DeleteFormExternal';
+export { default as IGraphQL } from './IGraphQL';
+export { LoadPayload } from './LoadPayload';
+export { parseGQLAjaxData, parseAjaxData, parseFetchData, convertJsonToGraphQLSchema } from './util';
+export { buildHeaders, buildUrl, buildExternalUrl, _verbsGet, _verbsDelete, _verbsPost, _verbsPut, _verbsPatch, _verbsGetPromise, _verbsDeletePromise, _verbsPostPromise, _verbsPutPromise, _verbsPatchPromise, verbsGet, verbsDelete, verbsPost, verbsPut, verbsPatch, verbsGetPromise, verbsDeletePromise, verbsPostPromise, verbsPutPromise, verbsPatchPromise, verbsGetExternal, verbsDeleteExternal, verbsPostExternal, verbsPutExternal, verbsPatchExternal, verbsGetPromiseExternal, verbsDeletePromiseExternal, verbsPostPromiseExternal, verbsPutPromiseExternal, verbsPatchPromiseExternal, ws, IWebsocketOptions } from './Network';
+export { default as WS } from './WS';

package/src/network/util.d.ts

@@ -0,0 +1,4 @@
+export declare const parseGQLAjaxData: (input: any, field: string) => any;
+export declare const parseAjaxData: (input: any) => any;
+export declare const parseFetchData: (input: any) => any;
+export declare const convertJsonToGraphQLSchema: (json: any) => string;

package/src/store/EnumDictionary.d.ts

@@ -0,0 +1,3 @@
+export type EnumDictionary<T extends string | symbol | number, U> = {
+    [K in T]: U;
+};

package/src/store/IContinuePaging.d.ts

@@ -0,0 +1,4 @@
+export default interface IContinuePaging<T> {
+    continueToken: string;
+    items: T[];
+}

package/src/store/IList.d.ts

@@ -0,0 +1,3 @@
+export default interface IList<T> {
+    items: T[];
+}

package/src/store/IMetaResponse.d.ts

@@ -0,0 +1,5 @@
+export default interface IMetaResponse {
+    isSuccessful: boolean;
+    errorCode: string;
+    errorMessage: string;
+}

package/src/store/IPaging.d.ts

@@ -0,0 +1,6 @@
+export default interface IPaging<T> {
+    currentIndex: number;
+    size: number;
+    total: number;
+    items: T[];
+}

package/src/store/IPayloadResponse.d.ts

@@ -0,0 +1,4 @@
+import IMetaResponse from "./IMetaResponse";
+export default interface IPayloadResponse<P> extends IMetaResponse {
+    payload: P;
+}

package/src/store/Json.d.ts

@@ -0,0 +1,9 @@
+type JsonValue = string | number | boolean | null | {
+    [key: string]: JsonValue;
+} | JsonValue[];
+type JsonObject = {
+    [key: string]: JsonValue;
+};
+type JsonArray = JsonValue[];
+export type Json = JsonObject | JsonArray;
+export {};

package/src/store/index.d.ts

@@ -0,0 +1,6 @@
+export { default as IList } from './IList';
+export { default as IPaging } from './IPaging';
+export { default as IContinuePaging } from './IContinuePaging';
+export { EnumDictionary } from './EnumDictionary';
+export { default as IMetaResponse } from './IMetaResponse';
+export { default as IPayloadResponse } from './IPayloadResponse';

package/templates/FEWBOX.md

@@ -0,0 +1,73 @@
+# How to use?
+## 1. Init
+```shell
+yarn add sass -D
+yarn add @paypal/react-paypal-js
+yarn add jwt-decode
+yarn add react-ga4
+yarn add react-intl
+
+```
+```typescript
+import '../style/_root.scss';
+```
+## 2. Config
+Change the variables. ( ***root/_variables.scss*** )
+
+**EG :**
+``` scss
+$body-color: #e1e1e1;
+```
+
+## 3. Use
+```tsx
+import { Den } from '@fewbox/den'; // @fewbox/den-web @fewbox/den-lite
+<Den.Components.VLabel frontColor={Den.Components.ColorType.Primary} caption='Hello, FewBox!' />
+```
+
+## 4. Custom Component
+```tsx
+// Class Component
+import * as React from 'react';
+import { Den } from '@fewbox/den';
+import './index.scss';
+
+export interface IClassComponentProps extends Den.Interface.IBaseProps {
+    message: string;
+}
+
+export interface IClassComponentStates extends Den.Interface.IBaseStates {
+}
+
+export default class ClassComponent extends Den.Components.BaseComponent<IClassComponentProps, IClassComponentStates> {
+    render(): React.ReactNode {
+        return <Den.Components.VBoundary {...this.props} className={this.getClassName('class-component')} style={this.getStyle()}>
+            <Den.Components.VLabel caption={this.props.message} />
+        </Den.Components.VBoundary>;
+    }
+}
+// Function Component
+import * as React from 'react';
+import { Den } from '@fewbox/den';
+import './index.scss';
+
+export interface IFunctionComponentProps extends Den.Interface.IBaseProps {
+    isSelected: boolean;
+}
+
+export interface IFunctionComponentStates extends Den.Interface.IBaseStates {
+    isSelected: boolean;
+}
+
+const FunctionComponent = (props: IFunctionComponentProps) => {
+    const _base = Den.Components.Base(props);
+    const [state, setState] = React.useState<IFunctionComponentStates>({ isSelected: props.isSelected });
+    return (
+        <div className={_base.getClassName(`function-component${state.isSelected ? ' selected' : ''}`)} style={_base.getStyle()} onClick={() => { setState({ ...state, isSelected: !state.isSelected }); }}>
+            Click Me
+        </div>
+    );
+}
+
+export default FunctionComponent;
+```

package/templates/style/_core.scss

@@ -0,0 +1,297 @@
+@use './variables' as v;
+
+$border-positions: "all", "top", "right", "bottom", "left", "except-top", "except-right", "except-bottom", "except-left",
+    "right-top", "right-bottom", "left-top", "left-bottom", "top-bottom", "left-right";
+
+/* border position */
+@each $color, $value in v.$colors {
+    @each $border-position in $border-positions {
+        .#{$color}-border-#{$border-position} {
+            @if ($border-position == "all") {
+                border-color: var(#{v.$var-prefix}color-#{$color});
+            }
+            @if ($border-position == "top") {
+                border-color: var(#{v.$var-prefix}color-#{$color}) transparent transparent transparent;
+            }
+            @if ($border-position == "right") {
+                border-color: transparent var(#{v.$var-prefix}color-#{$color}) transparent transparent;
+            }
+            @if ($border-position == "bottom") {
+                border-color: transparent transparent var(#{v.$var-prefix}color-#{$color}) transparent;
+            }
+            @if ($border-position == "left") {
+                border-color: transparent transparent transparent var(#{v.$var-prefix}color-#{$color});
+            }
+            @if ($border-position == "except-top") {
+                border-color: transparent
+                    var(#{v.$var-prefix}color-#{$color})
+                    var(#{v.$var-prefix}color-#{$color})
+                    var(#{v.$var-prefix}color-#{$color});
+            }
+            @if ($border-position == "except-right") {
+                border-color: var(#{v.$var-prefix}color-#{$color})
+                    transparent
+                    var(#{v.$var-prefix}color-#{$color})
+                    var(#{v.$var-prefix}color-#{$color});
+            }
+            @if ($border-position == "except-bottom") {
+                border-color: var(#{v.$var-prefix}color-#{$color})
+                    var(#{v.$var-prefix}color-#{$color})
+                    transparent
+                    var(#{v.$var-prefix}color-#{$color});
+            }
+            @if ($border-position == "except-left") {
+                border-color: var(#{v.$var-prefix}color-#{$color})
+                    var(#{v.$var-prefix}color-#{$color})
+                    var(#{v.$var-prefix}color-#{$color})
+                    transparent;
+            }
+            @if ($border-position == "right-top") {
+                border-color: var(#{v.$var-prefix}color-#{$color})
+                    var(#{v.$var-prefix}color-#{$color})
+                    transparent
+                    transparent;
+            }
+            @if ($border-position == "right-bottom") {
+                border-color: transparent
+                    var(#{v.$var-prefix}color-#{$color})
+                    var(#{v.$var-prefix}color-#{$color})
+                    transparent;
+            }
+            @if ($border-position == "left-top") {
+                border-color: var(#{v.$var-prefix}color-#{$color})
+                    transparent
+                    transparent
+                    var(#{v.$var-prefix}color-#{$color});
+            }
+            @if ($border-position == "left-bottom") {
+                border-color: transparent
+                    transparent
+                    var(#{v.$var-prefix}color-#{$color})
+                    var(#{v.$var-prefix}color-#{$color});
+            }
+            @if ($border-position == "top-bottom") {
+                border-color: var(#{v.$var-prefix}color-#{$color})
+                    transparent
+                    var(#{v.$var-prefix}color-#{$color})
+                    transparent;
+            }
+            @if ($border-position == "left-right") {
+                border-color: transparent
+                    var(#{v.$var-prefix}color-#{$color})
+                    transparent
+                    var(#{v.$var-prefix}color-#{$color});
+            }
+        }
+    }
+}
+/* pseudo - after */
+@each $color, $value in v.$colors {
+    @each $border-position in $border-positions {
+        .#{$color}-after-border-#{$border-position}::after {
+            @if ($border-position == "all") {
+                border-color: var(#{v.$var-prefix}color-#{$color});
+            }
+            @if ($border-position == "top") {
+                border-color: var(#{v.$var-prefix}color-#{$color}) transparent transparent transparent;
+            }
+            @if ($border-position == "right") {
+                border-color: transparent var(#{v.$var-prefix}color-#{$color}) transparent transparent;
+            }
+            @if ($border-position == "bottom") {
+                border-color: transparent transparent var(#{v.$var-prefix}color-#{$color}) transparent;
+            }
+            @if ($border-position == "left") {
+                border-color: transparent transparent transparent var(#{v.$var-prefix}color-#{$color});
+            }
+            @if ($border-position == "except-top") {
+                border-color: transparent
+                    var(#{v.$var-prefix}color-#{$color})
+                    var(#{v.$var-prefix}color-#{$color})
+                    var(#{v.$var-prefix}color-#{$color});
+            }
+            @if ($border-position == "except-right") {
+                border-color: var(#{v.$var-prefix}color-#{$color})
+                    transparent
+                    var(#{v.$var-prefix}color-#{$color})
+                    var(#{v.$var-prefix}color-#{$color});
+            }
+            @if ($border-position == "except-bottom") {
+                border-color: var(#{v.$var-prefix}color-#{$color})
+                    var(#{v.$var-prefix}color-#{$color})
+                    transparent
+                    var(#{v.$var-prefix}color-#{$color});
+            }
+            @if ($border-position == "except-left") {
+                border-color: var(#{v.$var-prefix}color-#{$color})
+                    var(#{v.$var-prefix}color-#{$color})
+                    var(#{v.$var-prefix}color-#{$color})
+                    transparent;
+            }
+            @if ($border-position == "right-top") {
+                border-color: var(#{v.$var-prefix}color-#{$color})
+                    var(#{v.$var-prefix}color-#{$color})
+                    transparent
+                    transparent;
+            }
+            @if ($border-position == "right-bottom") {
+                border-color: transparent
+                    var(#{v.$var-prefix}color-#{$color})
+                    var(#{v.$var-prefix}color-#{$color})
+                    transparent;
+            }
+            @if ($border-position == "left-top") {
+                border-color: var(#{v.$var-prefix}color-#{$color})
+                    transparent
+                    transparent
+                    var(#{v.$var-prefix}color-#{$color});
+            }
+            @if ($border-position == "left-bottom") {
+                border-color: transparent
+                    transparent
+                    var(#{v.$var-prefix}color-#{$color})
+                    var(#{v.$var-prefix}color-#{$color});
+            }
+            @if ($border-position == "top-bottom") {
+                border-color: var(#{v.$var-prefix}color-#{$color})
+                    transparent
+                    var(#{v.$var-prefix}color-#{$color})
+                    transparent;
+            }
+            @if ($border-position == "left-right") {
+                border-color: transparent
+                    var(#{v.$var-prefix}color-#{$color})
+                    transparent
+                    var(#{v.$var-prefix}color-#{$color});
+            }
+        }
+    }
+}
+
+/* pseudo - before */
+@each $color, $value in v.$colors {
+    @each $border-position in $border-positions {
+        .#{$color}-before-border-#{$border-position}::before {
+            @if ($border-position == "all") {
+                border-color: var(#{v.$var-prefix}color-#{$color});
+            }
+            @if ($border-position == "top") {
+                border-color: var(#{v.$var-prefix}color-#{$color}) transparent transparent transparent;
+            }
+            @if ($border-position == "right") {
+                border-color: transparent var(#{v.$var-prefix}color-#{$color}) transparent transparent;
+            }
+            @if ($border-position == "bottom") {
+                border-color: transparent transparent var(#{v.$var-prefix}color-#{$color}) transparent;
+            }
+            @if ($border-position == "left") {
+                border-color: transparent transparent transparent var(#{v.$var-prefix}color-#{$color});
+            }
+            @if ($border-position == "except-top") {
+                border-color: transparent
+                    var(#{v.$var-prefix}color-#{$color})
+                    var(#{v.$var-prefix}color-#{$color})
+                    var(#{v.$var-prefix}color-#{$color});
+            }
+            @if ($border-position == "except-right") {
+                border-color: var(#{v.$var-prefix}color-#{$color})
+                    transparent
+                    var(#{v.$var-prefix}color-#{$color})
+                    var(#{v.$var-prefix}color-#{$color});
+            }
+            @if ($border-position == "except-bottom") {
+                border-color: var(#{v.$var-prefix}color-#{$color})
+                    var(#{v.$var-prefix}color-#{$color})
+                    transparent
+                    var(#{v.$var-prefix}color-#{$color});
+            }
+            @if ($border-position == "except-left") {
+                border-color: var(#{v.$var-prefix}color-#{$color})
+                    var(#{v.$var-prefix}color-#{$color})
+                    var(#{v.$var-prefix}color-#{$color})
+                    transparent;
+            }
+            @if ($border-position == "right-top") {
+                border-color: var(#{v.$var-prefix}color-#{$color})
+                    var(#{v.$var-prefix}color-#{$color})
+                    transparent
+                    transparent;
+            }
+            @if ($border-position == "right-bottom") {
+                border-color: transparent
+                    var(#{v.$var-prefix}color-#{$color})
+                    var(#{v.$var-prefix}color-#{$color})
+                    transparent;
+            }
+            @if ($border-position == "left-top") {
+                border-color: var(#{v.$var-prefix}color-#{$color})
+                    transparent
+                    transparent
+                    var(#{v.$var-prefix}color-#{$color});
+            }
+            @if ($border-position == "left-bottom") {
+                border-color: transparent
+                    transparent
+                    var(#{v.$var-prefix}color-#{$color})
+                    var(#{v.$var-prefix}color-#{$color});
+            }
+            @if ($border-position == "top-bottom") {
+                border-color: var(#{v.$var-prefix}color-#{$color})
+                    transparent
+                    var(#{v.$var-prefix}color-#{$color})
+                    transparent;
+            }
+            @if ($border-position == "left-right") {
+                border-color: transparent
+                    var(#{v.$var-prefix}color-#{$color})
+                    transparent
+                    var(#{v.$var-prefix}color-#{$color});
+            }
+        }
+    }
+}
+/* background */
+@each $color, $value in v.$colors {
+    .#{$color}-background {
+        background-color: var(#{v.$var-prefix}color-#{$color});
+        @if ($color == "primary") {
+            color: var(#{v.$var-prefix}color-white);
+        }
+        &::-webkit-slider-thumb {
+            background-color: var(#{v.$var-prefix}color-#{$color});
+        }
+    }
+}
+/* front */
+@each $color, $value in v.$colors {
+    .#{$color}-front {
+        color: var(#{v.$var-prefix}color-#{$color});
+    }
+}
+/* border */
+@each $color, $value in v.$colors {
+    .#{$color}-border {
+        border-color: var(#{v.$var-prefix}color-#{$color}) !important;
+        &::-webkit-slider-thumb {
+            border-color: var(#{v.$var-prefix}color-#{$color}) !important;
+        }
+    }
+}
+/* size */
+@each $font-size, $value in v.$font-sizes {
+    .font-size-#{$font-size} {
+        font-size: var(#{v.$var-prefix}font-size-#{$font-size});
+    }
+}
+/* auto size */
+@each $font-size, $value in v.$auto-font-sizes {
+    .auto-font-size-#{$font-size} {
+        font-size: var(#{v.$var-prefix}auto-font-size-#{$font-size});
+    }
+}
+/* weight */
+@each $font-weight, $value in v.$font-weights {
+    .font-weight-#{$font-weight} {
+        font-weight: var(#{v.$var-prefix}font-weight-#{$font-weight});
+    }
+}

package/templates/style/_root-properties.scss

@@ -0,0 +1,56 @@
+@use './variables' as v;
+
+%root-properties {
+
+    /* variable */
+    @each $color, $value in v.$colors {
+        #{v.$var-prefix}color-#{$color}: #{$value};
+    }
+
+    @each $font-size, $value in v.$font-sizes {
+        #{v.$var-prefix}font-size-#{$font-size}: #{$value};
+    }
+
+    @each $font-size, $value in v.$auto-font-sizes {
+        #{v.$var-prefix}auto-font-size-#{$font-size}: #{$value};
+    }
+
+    @each $font-weight, $value in v.$font-weights {
+        #{v.$var-prefix}font-weight-#{$font-weight}: #{$value}
+    }
+
+    @each $border-size, $value in v.$border-radius-sizes {
+        #{v.$var-prefix}border-radius-#{$border-size}: #{$value};
+    }
+    // Build-In
+    #{v.$var-prefix}font-family: #{v.$font-family};
+    #{v.$var-prefix}font-size: #{v.$font-size};
+    #{v.$var-prefix}line-height: #{v.$line-height};
+    #{v.$var-prefix}letter-spacing: #{v.$letter-spacing};
+    #{v.$var-prefix}padding: #{v.$padding};
+    #{v.$var-prefix}margin: #{v.$margin};
+    #{v.$var-prefix}box-sizing: #{v.$box-sizing};
+    #{v.$var-prefix}scrollbar-size: #{v.$scrollbar-size};
+    #{v.$var-prefix}scrollbar-track-color: #{v.$scrollbar-track-color};
+    #{v.$var-prefix}scrollbar-thumb-color: #{v.$scrollbar-thumb-color};
+    #{v.$var-prefix}scrollbar-thumb-hover-color: #{v.$scrollbar-thumb-hover-color};
+    #{v.$var-prefix}scrollbar-radius: #{v.$scrollbar-radius};
+    // Component
+    #{v.$var-prefix}input-padding: #{v.$input-padding};
+    #{v.$var-prefix}input-padding: #{v.$input-padding};
+    #{v.$var-prefix}dropdown-hover-background-color: #{v.$dropdown-hover-background-color};
+    #{v.$var-prefix}dropdown-hover-color: #{v.$dropdown-hover-color};
+
+    #{v.$var-prefix}v-ellipse-size: #{v.$v-ellipse-size};
+    #{v.$var-prefix}v-rectangle-size: #{v.$v-ellipse-size};
+    #{v.$var-prefix}v-image-size: #{v.$v-image-size};
+    #{v.$var-prefix}v-svg-size: #{v.$v-svg-size};
+    #{v.$var-prefix}v-window--size: #{v.$v-window-size};
+    
+
+    *,
+    ::before,
+    ::after {
+        box-sizing: inherit;
+    }
+}

package/templates/style/_root.scss

@@ -0,0 +1,6 @@
+@forward './root-properties';
+@forward "./core";
+
+:root {
+    @extend %root-properties;
+}