refactor: update component renders from antd (#28)

* refactor: update component renders from antd

- Enhance Layout render with all sub-components (Header, Sider, Content, Footer)
- Add Input.Password to Input render
- Add Input.Group with nested Inputs
- Move Space.Addon inside Space.Compact with content
- Add default Modal._InternalPanelDoNotUseOrYouWillBeFired
- Simplify Cascader and Layout render functions

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* test: add Modal.confirm test and update SSR warnings

- Add test for Modal.confirm style extraction
- Add Input.Group deprecation warning to allowed list
- Fix minor formatting issues (trailing commas, semicolons)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* refactor: improve type annotations and code formatting

- Add explicit types for component render functions (typeof antd.XXX)
- Optimize import statements structure
- Apply consistent code formatting

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: zombieJ

src/index.tsx

@@ -1,13 +1,14 @@
-import { createCache, extractStyle as extStyle, StyleProvider } from '@ant-design/cssinjs';
-import { renderToString } from 'react-dom/server';
+import {
+  createCache,
+  extractStyle as extStyle,
+  StyleProvider,
+} from '@ant-design/cssinjs';
 import * as antd from 'antd';
 import React from 'react';
+import { renderToString } from 'react-dom/server';
 import type { CustomRender } from './interface';
 
-const defaultBlackList: string[] = [
-  'ConfigProvider',
-  'Grid',
-];
+const defaultBlackList: string[] = ['ConfigProvider', 'Grid'];
 
 const ComponentCustomizeRender: Record<
   string,
@@ -19,6 +20,12 @@ const ComponentCustomizeRender: Record<
     </Affix>
   ),
   BackTop: () => <antd.FloatButton.BackTop />,
+  Cascader: (Cascader: typeof antd.Cascader) => (
+    <>
+      <Cascader />
+      <Cascader.Panel />
+    </>
+  ),
   Dropdown: (Dropdown) => (
     <Dropdown menu={{ items: [] }}>
       <div />
@@ -39,18 +46,32 @@ const ComponentCustomizeRender: Record<
       <Badge.Ribbon />
     </>
   ),
-  Space: (Space: any) => (
+  Space: (Space: typeof antd.Space) => (
     <>
       <Space />
-      <Space.Addon />
       <Space.Compact>
         <antd.Button />
+        <Space.Addon>1</Space.Addon>
       </Space.Compact>
     </>
   ),
-  Modal: (Modal: any) => (
+  Input: (Input: typeof antd.Input) => (
+    <>
+      <Input />
+      <Input.Group>
+        <Input />
+        <Input />
+      </Input.Group>
+      <Input.Search />
+      <Input.TextArea />
+      <Input.Password />
+      <Input.OTP />
+    </>
+  ),
+  Modal: (Modal: typeof antd.Modal) => (
     <>
       <Modal />
+      <Modal._InternalPanelDoNotUseOrYouWillBeFired />
       <Modal._InternalPanelDoNotUseOrYouWillBeFired type="confirm" />
     </>
   ),
@@ -63,24 +84,12 @@ const ComponentCustomizeRender: Record<
     return <PurePanel />;
   },
   Layout: (Layout: typeof antd.Layout) => (
-    <>
-      <Layout />
-      <Layout.Sider />
-    </>
-  ),
-  Cascader: (Cascader: typeof antd.Cascader) => (
-    <>
-      <Cascader options={[]} />
-      <Cascader.Panel options={[]} />
-    </>
-  ),
-  Input: (Input: typeof antd.Input) => (
-    <>
-      <Input />
-      <Input.OTP />
-      <Input.Search />
-      <Input.TextArea />
-    </>
+    <Layout>
+      <Layout.Header>Header</Layout.Header>
+      <Layout.Sider>Sider</Layout.Sider>
+      <Layout.Content>Content</Layout.Content>
+      <Layout.Footer>Footer</Layout.Footer>
+    </Layout>
   ),
 };
 
@@ -97,7 +106,9 @@ const defaultNode = ({ excludes = [], includes }: NodeProps) => {
       {components
         .filter(
           (name) =>
-            ![...defaultBlackList, ...excludes].includes(name) && (name[0] === name[0].toUpperCase() || ['notification', 'message'].includes(name)),
+            ![...defaultBlackList, ...excludes].includes(name) &&
+            (name[0] === name[0].toUpperCase() ||
+              ['notification', 'message'].includes(name)),
         )
         .map((compName) => {
           const Comp = antd[compName];
@@ -114,13 +125,17 @@ const defaultNode = ({ excludes = [], includes }: NodeProps) => {
         })}
     </>
   );
-}
+};
 
-export function extractStyle(arg?: CustomRender | {
-  customTheme?: CustomRender,
-  excludes?: string[],
-  includes?: string[],
-}): string {
+export function extractStyle(
+  arg?:
+    | CustomRender
+    | {
+        customTheme?: CustomRender;
+        excludes?: string[];
+        includes?: string[];
+      },
+): string {
   const cache = createCache();
 
   let customTheme: CustomRender | undefined;
@@ -135,11 +150,13 @@ export function extractStyle(arg?: CustomRender | {
   const nodeProps: NodeProps = {
     includes,
     excludes,
-  }
+  };
 
   renderToString(
     <StyleProvider cache={cache}>
-      {customTheme ? customTheme(defaultNode(nodeProps)) : defaultNode(nodeProps)}
+      {customTheme
+        ? customTheme(defaultNode(nodeProps))
+        : defaultNode(nodeProps)}
     </StyleProvider>,
   );
 

tests/index.test.tsx

@@ -48,7 +48,7 @@ describe('Static-Style-Extract', () => {
           token: {
             colorPrimary: testGreenColor,
           },
-          hashed: true
+          hashed: true,
         }}
       >
         {node}
@@ -59,24 +59,29 @@ describe('Static-Style-Extract', () => {
 
   it('whitelist should work', () => {
     const cssText = extractStyle({
-      includes: ['Button']
+      includes: ['Button'],
     });
     expect(cssText).toContain('.ant-btn');
     expect(cssText).not.toContain('.ant-select');
   });
 
   it('blacklist should work', () => {
     const cssText = extractStyle({
-      excludes: ['Card']
+      excludes: ['Card'],
     });
     expect(cssText).toContain('.ant-btn');
     expect(cssText).toContain('.ant-notification');
     expect(cssText).toContain('.ant-message');
     expect(cssText).not.toContain('.ant-card');
-  })
+  });
 
   it('should extract Layout.Sider', () => {
     const cssText = extractStyle();
     expect(cssText).toContain('.ant-layout-sider');
   });
+
+  it('should extract Modal.confirm', () => {
+    const cssText = extractStyle();
+    expect(cssText).toContain('.ant-modal-confirm-title');
+  });
 });

tests/ssr.test.tsx

@@ -12,17 +12,18 @@ jest.mock('react', () => {
 describe('Static-Style-Extract.SSR', () => {
   it('should not produce unexpected warnings', () => {
     const allowedWarnings = [
-      'Warning: [antd: List] The `List` component is deprecated. And will be removed in next major version.'
-    ]
+      'Warning: [antd: List] The `List` component is deprecated. And will be removed in next major version.',
+      'Warning: [antd: Input.Group] `Input.Group` is deprecated. Please use `Space.Compact` instead.',
+    ];
 
     const errSpy = jest.spyOn(console, 'error');
 
     extractStyle();
 
     const filteredCalls = errSpy.mock.calls.filter(([msg]) => {
       return !allowedWarnings.some((allowed) => msg === allowed);
-    })
-    
+    });
+
     expect(filteredCalls).toHaveLength(0);
   });
 });