Append feature and change ConfigProvider

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "cSpell.words": [
+        "Sider"
+    ]
+}

README.md

@@ -43,17 +43,40 @@ To use the components from the library, you need to import them into your projec
 ```tsx
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { config } from '1byte-react-design';
+import { config, Button } from '1byte-react-design';
 import { globalToken } from '@/assets/styles/customTheme';
-import { Button } from '1byte-react-design';
+
+const seedToken: Partial<AliasToken> = {
+    borderRadius: 6,
+    colorLink: generatedTheme.colorPrimary,
+
+    colorPrimary: generatedTheme.colorPrimary,
+    colorTextSecondary: generatedTheme.colorSecondary,
+    colorTextTertiary: generatedTheme.colorTertiary,
+    colorTextQuaternary: generatedTheme.colorQuaternary,
+
+    fontFamily: "'Open Sans', sans-serif",
+    fontSize: 14,
+    controlHeight: 28,
+};
+
+const themeConfig: ThemeConfig = {
+    token: seedToken,
+};
+
+const globalToken = theme.getDesignToken(themeConfig);
 
 // Set the design token
 config.designToken = globalToken;
 
 const App = () => {
     return (
         <div>
-            <Button type="primary">Click Me</Button>
+            <ConfigProvider theme={customTheme}>
+                <App1Byte>
+                    <Button type="primary">Click Me</Button>
+                </App1Byte>
+            </ConfigProvider>
         </div>
     );
 };
@@ -63,7 +86,7 @@ ReactDOM.render(<App />, document.getElementById('root'));
 
 ### Note
 
-If you do not provide a [`designToken`](command:_github.copilot.openSymbolFromReferences?%5B%22%22%2C%5B%7B%22uri%22%3A%7B%22scheme%22%3A%22file%22%2C%22authority%22%3A%22%22%2C%22path%22%3A%22%2FUsers%2Fkenneth_wise%2FWorkspace%2F1ByteSoftware%2FLibrary%2F1byte%3Areact-design%2Fsrc%2Findex.tsx%22%2C%22query%22%3A%22%22%2C%22fragment%22%3A%22%22%7D%2C%22pos%22%3A%7B%22line%22%3A4%2C%22character%22%3A4%7D%7D%2C%7B%22uri%22%3A%7B%22scheme%22%3A%22file%22%2C%22authority%22%3A%22%22%2C%22path%22%3A%22%2FUsers%2Fkenneth_wise%2FWorkspace%2F1ByteSoftware%2FLibrary%2F1byte%3Areact-design%2FREADME.md%22%2C%22query%22%3A%22%22%2C%22fragment%22%3A%22%22%7D%2C%22pos%22%3A%7B%22line%22%3A72%2C%22character%22%3A26%7D%7D%2C%7B%22uri%22%3A%7B%22scheme%22%3A%22file%22%2C%22authority%22%3A%22%22%2C%22path%22%3A%22%2FUsers%2Fkenneth_wise%2FWorkspace%2F1ByteSoftware%2FLibrary%2F1byte%3Areact-design%2FREADME.md%22%2C%22query%22%3A%22%22%2C%22fragment%22%3A%22%22%7D%2C%22pos%22%3A%7B%22line%22%3A57%2C%22character%22%3A7%7D%7D%5D%2C%22cd97981e-fe0d-41e4-b8a7-f07d20b5fc41%22%5D "Go to definition"), the library will use the default Antd tokens for the components.
+If you do not provide a [`designToken`](command:_github.copilot.openSymbolFromReferences?%5B%22%22%2C%5B%7B%22uri%22%3A%7B%22scheme%22%3A%22file%22%2C%22authority%22%3A%22%22%2C%22path%22%3A%22%2FUsers%2Fkenneth_wise%2FWorkspace%2F1ByteSoftware%2FLibrary%2F1byte%3Areact-design%2Fsrc%2Findex.tsx%22%2C%22query%22%3A%22%22%2C%22fragment%22%3A%22%22%7D%2C%22pos%22%3A%7B%22line%22%3A4%2C%22character%22%3A4%7D%7D%2C%7B%22uri%22%3A%7B%22scheme%22%3A%22file%22%2C%22authority%22%3A%22%22%2C%22path%22%3A%22%2FUsers%2Fkenneth_wise%2FWorkspace%2F1ByteSoftware%2FLibrary%2F1byte%3Areact-design%2FREADME.md%22%2C%22query%22%3A%22%22%2C%22fragment%22%3A%22%22%7D%2C%22pos%22%3A%7B%22line%22%3A72%2C%22character%22%3A26%7D%7D%2C%7B%22uri%22%3A%7B%22scheme%22%3A%22file%22%2C%22authority%22%3A%22%22%2C%22path%22%3A%22%2FUsers%2Fkenneth_wise%2FWorkspace%2F1ByteSoftware%2FLibrary%2F1byte%3Areact-design%2FREADME.md%22%2C%22query%22%3A%22%22%2C%22fragment%22%3A%22%22%7D%2C%22pos%22%3A%7B%22line%22%3A57%2C%22character%22%3A7%7D%7D%5D%2C%22cd97981e-fe0d-41e4-b8a7-f07d20b5fc41%22%5D 'Go to definition'), the library will use the default Antd tokens for the components.
 
 ## Getting Started
 
@@ -81,33 +104,13 @@ Before you start, make sure you have a fresh version of [Node.js](https://nodejs
     yarn install
     ```
 
-3. To run and test the app on your local machine (http://localhost:5173):
-
-    ```sh
-    yarn start:dev
-    ```
-
-    This will start a server instance and begin listening for connections in develop environment from localhost on port 5173.
+3. To build/deploy the app, you can run:
 
     ```sh
-    yarn start:pro
+    yarn build
     ```
 
-    This will start a server instance and begin listening for connections in production environment from localhost on port 5173.
-
-4. To build/deploy the app, you can run:
-
-    ```sh
-    yarn build:dev
-    ```
-
-    This will place all files needed for deployment for develop server into the [`/dist`](command:_github.copilot.openRelativePath?%5B%7B%22scheme%22%3A%22file%22%2C%22authority%22%3A%22%22%2C%22path%22%3A%22%2FUsers%2Fkenneth_wise%2FWorkspace%2F1ByteSoftware%2FLibrary%2F1byte%3Areact-design%2Fdist%22%2C%22query%22%3A%22%22%2C%22fragment%22%3A%22%22%7D%2C%22cd97981e-fe0d-41e4-b8a7-f07d20b5fc41%22%5D "/Users/kenneth_wise/Workspace/1ByteSoftware/Library/1byte:react-design/dist") directory.
-
-    ```sh
-    yarn build:pro
-    ```
-
-    This will place all files needed for deployment for production server into the [`/dist`](command:_github.copilot.openRelativePath?%5B%7B%22scheme%22%3A%22file%22%2C%22authority%22%3A%22%22%2C%22path%22%3A%22%2FUsers%2Fkenneth_wise%2FWorkspace%2F1ByteSoftware%2FLibrary%2F1byte%3Areact-design%2Fdist%22%2C%22query%22%3A%22%22%2C%22fragment%22%3A%22%22%7D%2C%22cd97981e-fe0d-41e4-b8a7-f07d20b5fc41%22%5D "/Users/kenneth_wise/Workspace/1ByteSoftware/Library/1byte:react-design/dist") directory.
+    This will place all files needed for deployment for develop server into the [`/dist`](command:_github.copilot.openRelativePath?%5B%7B%22scheme%22%3A%22file%22%2C%22authority%22%3A%22%22%2C%22path%22%3A%22%2FUsers%2Fkenneth_wise%2FWorkspace%2F1ByteSoftware%2FLibrary%2F1byte%3Areact-design%2Fdist%22%2C%22query%22%3A%22%22%2C%22fragment%22%3A%22%22%7D%2C%22cd97981e-fe0d-41e4-b8a7-f07d20b5fc41%22%5D '/Users/kenneth_wise/Workspace/1ByteSoftware/Library/1byte:react-design/dist') directory.
 
 ## License
 
@@ -119,17 +122,18 @@ We welcome contributions to improve this library. Please fork the repository and
 
 ## Authors
 
-- [Your Name](https://github.com/your-github-username)
+-   [1byte dev](https://github.com/1Byte-Software/)
 
 ## Acknowledgments
 
-- [Ant Design](https://ant.design/)
-- [Emotion](https://emotion.sh/docs/introduction)
-- [TypeScript](https://www.typescriptlang.org/)
+-   [Ant Design](https://ant.design/)
+-   [Emotion](https://emotion.sh/docs/introduction)
+-   [TypeScript](https://www.typescriptlang.org/)
 
 ## About
 
 This library is developed by 1Byte to unify the interface for the company, optimize component reuse, and ensure that our developers do not need to remember conventions. The library is based on the Atomic Design architecture.
+
 ```
 
-Bạn có thể thay thế các thông tin như "Your Name" và "your-github-username" bằng thông tin của bạn.
+```

dist/ConfigProviderDesign.d.ts

@@ -0,0 +1,16 @@
+import { ThemeConfig } from 'antd';
+import { PropsWithChildren } from 'react';
+interface IConfigProviderDesignProps extends PropsWithChildren {
+    /**
+     * The theme components configuration.
+     * This will override the default `config.componentToken` if provided.
+     */
+    componentToken?: ThemeConfig['components'];
+    /**
+     * The theme design token configuration.
+     * This will override the default `config.designToken` if provided.
+     */
+    designToken?: ThemeConfig['token'];
+}
+export declare const ConfigProviderDesign: ({ children, componentToken, designToken, }: IConfigProviderDesignProps) => import("react/jsx-runtime").JSX.Element;
+export {};

dist/atomics/TextError/TextError.d.ts

@@ -0,0 +1,2 @@
+import { ITextErrorProps } from './types';
+export declare const TextError: (props: ITextErrorProps) => import("react/jsx-runtime").JSX.Element;

dist/atomics/TextError/index.d.ts

@@ -0,0 +1 @@
+export * from './TextError';

dist/atomics/TextError/styles.d.ts

@@ -0,0 +1,4 @@
+export declare const TextErrorWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react/dist/emotion-react.cjs").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

dist/atomics/Typography/H1.d.ts

@@ -0,0 +1,2 @@
+import { IH1Props } from '../TextError/types';
+export declare const H1: (props: IH1Props) => import("react/jsx-runtime").JSX.Element;

dist/atomics/Typography/H2.d.ts

@@ -0,0 +1,2 @@
+import { IH2Props } from '../TextError/types';
+export declare const H2: (props: IH2Props) => import("react/jsx-runtime").JSX.Element;

dist/atomics/Typography/H3.d.ts

@@ -0,0 +1,2 @@
+import { IH3Props } from '../TextError/types';
+export declare const H3: (props: IH3Props) => import("react/jsx-runtime").JSX.Element;

dist/atomics/Typography/H4.d.ts

@@ -0,0 +1,2 @@
+import { IH4Props } from '../TextError/types';
+export declare const H4: (props: IH4Props) => import("react/jsx-runtime").JSX.Element;

dist/atomics/Typography/H5.d.ts

@@ -0,0 +1,2 @@
+import { IH5Props } from '../TextError/types';
+export declare const H5: (props: IH5Props) => import("react/jsx-runtime").JSX.Element;

dist/atomics/Typography/H6.d.ts

@@ -0,0 +1,2 @@
+import { IH6Props } from '../TextError/types';
+export declare const H6: (props: IH6Props) => import("react/jsx-runtime").JSX.Element;

dist/atomics/Typography/index.d.ts

@@ -0,0 +1,6 @@
+export * from './H1';
+export * from './H2';
+export * from './H3';
+export * from './H4';
+export * from './H5';
+export * from './H6';

dist/atomics/Typography/styles.d.ts

@@ -0,0 +1,24 @@
+export declare const H1Wrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react/dist/emotion-react.cjs").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
+export declare const H2Wrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react/dist/emotion-react.cjs").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
+export declare const H3Wrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react/dist/emotion-react.cjs").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
+export declare const H4Wrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react/dist/emotion-react.cjs").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
+export declare const H5Wrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react/dist/emotion-react.cjs").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
+export declare const H6Wrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react/dist/emotion-react.cjs").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;

dist/atomics/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Flex/index';
+export * from './TextError/index';
+export * from './Typography/index';

dist/index.d.ts

@@ -0,0 +1,11 @@
+import { ThemeConfig } from 'antd';
+export interface IConfig {
+    designToken: NonNullable<ThemeConfig['token']>;
+    componentToken: ThemeConfig['components'];
+}
+export declare const config: IConfig;
+export * from './atomics';
+export * from './models';
+export * from './molecules';
+export * from './organisms';
+export declare const version = "0.0.6";