@fewbox/den-web 0.2.0-preview.30 → 0.2.0-preview.32

package/templates/FEWBOX.md

@@ -19,54 +19,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;
-```
+```