@fewbox/den-web 0.2.0-preview.4 → 0.2.0-preview.41

package/templates/FEWBOX.md

@@ -3,7 +3,6 @@
 ```shell
 yarn add sass -D
 yarn add jwt-decode
-yarn add react-intl
 
 ```
 ```typescript
@@ -19,54 +18,32 @@ $body-color: #e1e1e1;
 
 ## 3. Use
 ```tsx
-import { Den } from '@fewbox/den-web'; // @fewbox/den-app
-<Den.Components.VLabel frontColor={Den.Components.ColorType.Primary} caption='Hello, FewBox!' />
+import { VLabel, ColorType } from '@fewbox/den-web'; // @fewbox/den-app
+
+<VLabel frontColor={ColorType.Primary} caption='Hello, FewBox!' />
 ```
 
 ## 4. Custom Component
 ```tsx
-// Class Component
-
-import { Den } from '@fewbox/den-web'; // @fewbox/den-app
-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 { Den } from '@fewbox/den-web'; // @fewbox/den-app
+import React from 'react';
+import { Base, VBoundary, VLabel } from '@fewbox/den-web'; // @fewbox/den-app
+import type { IBaseProps } from '@fewbox/den-web';
 import './index.scss';
 
-export interface IFunctionComponentProps extends Den.Interface.IBaseProps {
-    isSelected: boolean;
-}
-
-export interface IFunctionComponentStates extends Den.Interface.IBaseStates {
+export interface IFunctionComponentProps extends IBaseProps {
     isSelected: boolean;
 }
 
 const FunctionComponent = (props: IFunctionComponentProps) => {
-    const { ...rest } = props;
-    const _base = Den.Components.Base(rest);
-    const [state, setState] = React.useState<IFunctionComponentStates>({ isSelected: props.isSelected });
+    const { isSelected, ...rest } = props;
+    const _base = Base(rest);
+    const [selected, setSelected] = React.useState(isSelected);
     return (
-        <div className={_base.getClassName(`function-component${state.isSelected ? ' selected' : ''}`)} style={_base.getStyle()} {..._base.getHtmlProps()}>
+        <div className={_base.getClassName(`function-component${selected ? ' selected' : ''}`)} style={_base.getStyle()} {..._base.getProps('div').html}>
             Click Me
         </div>
     );
 }
 
 export default FunctionComponent;
-```
+```

package/templates/style/_core.scss

@@ -296,6 +296,18 @@ $border-positions: "all", "top", "right", "bottom", "left", "except-top", "excep
         font-weight: var(#{v.$var-prefix}font-weight-#{$font-weight});
     }
 }
+/* gap */
+@each $gap, $value in v.$gaps {
+    .gap-#{$gap} {
+        gap: var(#{v.$var-prefix}gap-#{$gap});
+    }
+}
+/* letter-spacing */
+@each $letter-spacing, $value in v.$letter-spacings {
+    .letter-spacing-#{$letter-spacing} {
+        letter-spacing: var(#{v.$var-prefix}letter-spacing-#{$letter-spacing});
+    }
+}
 /* padding */
 @each $padding, $value in v.$paddings {
     .padding-#{$padding} {

package/templates/style/_root-properties.scss

@@ -75,6 +75,9 @@
     #{v.$var-prefix}font-size: #{v.$font-size};
     #{v.$var-prefix}line-height: #{v.$line-height};
     #{v.$var-prefix}letter-spacing: #{v.$letter-spacing};
+    @each $letter-spacing, $value in v.$letter-spacings {
+        #{v.$var-prefix}letter-spacing-#{$letter-spacing}: #{$value};
+    }
     #{v.$var-prefix}padding: #{v.$padding};
     #{v.$var-prefix}margin: #{v.$margin};
     #{v.$var-prefix}box-sizing: #{v.$box-sizing};
@@ -93,7 +96,7 @@
     #{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};
-    
+    #{v.$var-prefix}position-offset: #{v.$position-offset};
 
     *,
     ::before,

package/templates/style/_variables.scss

@@ -129,7 +129,7 @@ $margins: (
     "extra-large": $margin-extra-large,
 );
 //left right top bottom offset
-$self-offset: 1em;
+$position-offset: 1em;
 //border
 $border-radius-normal: 0.4rem;
 $border-radius-extra-small: $border-radius-normal * 0.25;
@@ -252,6 +252,18 @@ $scrollbar-radius: 8px;
 /*------------------*/
 $line-height: 1.4;
 $letter-spacing: 0.01em;
+$letter-spacing-normal: 0.05em;
+$letter-spacing-extra-small: $letter-spacing-normal * 0.5;
+$letter-spacing-small: $letter-spacing-normal * 0.8;
+$letter-spacing-large: $letter-spacing-normal * 1.4;
+$letter-spacing-extra-large: $letter-spacing-normal * 2.4;
+$letter-spacings: (
+    "normal": $letter-spacing-normal,
+    "extra-small": $letter-spacing-extra-small,
+    "small": $letter-spacing-small,
+    "large": $letter-spacing-large,
+    "extra-large": $letter-spacing-extra-large,
+);
 $font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
     "Segoe UI Emoji", "Segoe UI Symbol";
 $font-size: 1em; // 16px * 0.875 = 14px;