fix: output in ts with babel

.github/workflows/release.yml

@@ -23,7 +23,6 @@ jobs:
           NPM_TOKEN: ${{ secrets.NPM_TOKEN || secrets.GH_MASTER_TOKEN }}
         run: |
           yarn build
-          yarn export:docs
           yarn release
       - name: Release GitHub Registry
         env:

lib/components/box/box.tsx

@@ -1,12 +1,13 @@
 import React, { Ref } from 'react';
 import { renderCSS } from '@lib/utils/renderCSS';
 import { theme } from '@lib/core/theme/theme';
+import { StyleSheet } from '@lib/core/stylesheet/stylesheet';
 
 interface BoxProps {
   as?: any;
   children?: any;
   className?: string;
-  styleSheet?: any;
+  styleSheet?: StyleSheet;
   ref?: Ref<any>;
 }
 export const Box = React.forwardRef(({

lib/core/stylesheet/stylesheet.ts

@@ -3,7 +3,10 @@ import { Breakpoints } from '@lib/core/breakpoints/breakpoints';
 type ResponsiveProperty<Type> = Partial<Record<Breakpoints, Type>>;
 
 export interface StyleSheet {
-  backgroundColor: ResponsiveProperty<string>;
-  padding: ResponsiveProperty<number>;
-  margin: ResponsiveProperty<number>;
+  srOnly?: boolean;
+  backgroundColor?: ResponsiveProperty<string>;
+  padding?: ResponsiveProperty<number>;
+  margin?: ResponsiveProperty<number>;
+  focus?: any;
+  hover?: any;
 }

package.json

@@ -14,11 +14,13 @@
     "url": "/~https://github.com/skynexui/core.git"
   },
   "scripts": {
-    "build": "rollup -c",
+    "prebuild": "rimraf dist && rimraf types",
+    "build": "yarn export:types && rollup -c && yarn export:docs",
     "release": "semantic-release",
     "release:github_registry": "npm publish --@skynexui:registry=https://npm.pkg.github.com",
     "dev": "start-storybook -p 6006",
     "build:storybook": "build-storybook -o dist-storybook",
+    "export:types": "tsc",
     "export:docs": "find ./lib -name '*.mdx' -exec cp -prv '{}' './dist' ';' && node ./scripts/parseDocs.js && cp ./docs.json ./dist/docs.json && ls -la ./dist"
   },
   "dependencies": {

rollup.config.js

@@ -47,21 +47,22 @@ export default [
       }),  
       commonjs(),
       babel({
+        babelHelpers: 'bundled',
         exclude: "node_modules/**",
         extensions
       }),
     ],
   },
   {
-    input: 'dist/esm/types/components.d.ts',
+    input: 'types/components.d.ts',
     output: [{ file: packageJson.types, format: "esm" }],
     external: [/\.css$/],
     plugins: [
       alias({
         entries: [{
           find: '@lib',
           replacement: (...args) => {
-            return path.resolve(__dirname, 'dist/esm/types/');
+            return path.resolve(__dirname, 'types/');
           },
         }]
       }),

tsconfig.json

@@ -15,6 +15,7 @@
     "declarationDir": "types",
     "sourceMap": true,
     "emitDeclarationOnly": true,
+    "skipLibCheck": true,
     "typeRoots": [
       "./node_modules/@types",
       "./@types"

types/_old/GlobalStyle.d.ts

@@ -0,0 +1 @@
+export declare function GlobalStyle(): JSX.Element;

types/_old/components.d.ts

@@ -0,0 +1,31 @@
+import React, { Ref } from 'react';
+interface BoxProps {
+    as?: any;
+    children?: any;
+    className?: string;
+    styleSheet?: any;
+    ref?: Ref<any>;
+}
+export declare const Box: React.ForwardRefExoticComponent<Pick<BoxProps, "as" | "styleSheet" | "children" | "className"> & React.RefAttributes<unknown>>;
+export declare function Icon({ as, styleSheet: initialStyleSheet, ...props }: any): JSX.Element;
+export declare const Text: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<unknown>>;
+export declare function Image({ as, ...props }: any): JSX.Element;
+export declare namespace Image {
+    var defaultProps: {
+        styleSheet: {};
+    };
+}
+export declare function Input({ as, styleSheet, ...props }: any): JSX.Element;
+export declare namespace Input {
+    var defaultProps: {
+        styleSheet: {};
+    };
+}
+export declare function Button({ as, styleSheet, ...props }: any): JSX.Element;
+export declare namespace Button {
+    var defaultProps: {
+        styleSheet: {};
+    };
+}
+export declare function Link({ children, href, styleSheet, as, ...props }: any): JSX.Element;
+export {};

types/components.d.ts

@@ -0,0 +1,3 @@
+export { theme } from '@lib/core/theme/theme';
+export { Box } from '@lib/components/box/box';
+export { Text } from '@lib/components/text/text';

types/components/box/box.d.ts

@@ -0,0 +1,11 @@
+import React, { Ref } from 'react';
+import { StyleSheet } from '@lib/core/stylesheet/stylesheet';
+interface BoxProps {
+    as?: any;
+    children?: any;
+    className?: string;
+    styleSheet?: StyleSheet;
+    ref?: Ref<any>;
+}
+export declare const Box: React.ForwardRefExoticComponent<Pick<BoxProps, "as" | "styleSheet" | "children" | "className"> & React.RefAttributes<unknown>>;
+export {};

types/components/text/text.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { StyleSheet } from '@lib/core/stylesheet/stylesheet';
+interface TextProps {
+    styleSheet: StyleSheet;
+    children: React.ReactNode;
+}
+export declare function Text({ children, styleSheet }: TextProps): JSX.Element;
+export declare namespace Text {
+    var defaultProps: {
+        styleSheet: {};
+    };
+}
+export {};

types/core/breakpoints/breakpoints.d.ts

@@ -0,0 +1,7 @@
+export declare enum Breakpoints {
+    xs = "Breakpoints.xs",
+    sm = "Breakpoints.sm",
+    md = "Breakpoints.md",
+    lg = "Breakpoints.lg",
+    xl = "Breakpoints.xl"
+}

types/core/stylesheet/stylesheet.d.ts

@@ -0,0 +1,11 @@
+import { Breakpoints } from '@lib/core/breakpoints/breakpoints';
+declare type ResponsiveProperty<Type> = Partial<Record<Breakpoints, Type>>;
+export interface StyleSheet {
+    srOnly?: boolean;
+    backgroundColor?: ResponsiveProperty<string>;
+    padding?: ResponsiveProperty<number>;
+    margin?: ResponsiveProperty<number>;
+    focus?: any;
+    hover?: any;
+}
+export {};