fixed rollup tw transpilation

README.md

@@ -11,4 +11,8 @@ Follow [this guide](https://fontawesome.com/docs/web/setup/packages#set-up-npm-t
 
 - Using `aleph-core` with `Next.js` framework:
   - Problems with css `@import` syntaxis. You will need to manually import the font-face css from an url via `<link>` html element, or by creating a `font.css` that will contain the `@import` statement and will be imported from the `_app.tsx` Next.js file
-  - Problems with font awesome stylesheet. Follow this guide to solve it: https://fontawesome.com/docs/web/use-with/react/use-with#next-js
+  - Problems with font awesome stylesheet. Follow this guide to solve it: https://fontawesome.com/docs/web/use-with/react/use-with#next-js
+
+### We strongly recomend to use styled-components tailwind and twin.macro in your project
+
+Follow this guide: https://github.com/ben-rogerson/twin.examples/tree/master/next-styled-components-typescript#getting-started

package.json

@@ -29,6 +29,7 @@
     "@fortawesome/pro-regular-svg-icons": "^6.3.0",
     "@fortawesome/react-fontawesome": "^0.1.18",
     "@fortawesome/sharp-solid-svg-icons": "^6.3.0",
+    "@rollup/plugin-babel": "^6.0.3",
     "@rollup/plugin-commonjs": "^22.0.0",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-typescript": "^8.3.2",

rollup.config.js

@@ -1,43 +1,52 @@
-import resolve from "@rollup/plugin-node-resolve";
-import commonjs from "@rollup/plugin-commonjs";
-import typescript from "@rollup/plugin-typescript";
-import dts from "rollup-plugin-dts";
+import resolve from '@rollup/plugin-node-resolve'
+import commonjs from '@rollup/plugin-commonjs'
+import dts from 'rollup-plugin-dts'
+import { babel } from '@rollup/plugin-babel'
+// import typescript from '@rollup/plugin-typescript'
 
-import { terser } from "rollup-plugin-terser";
-import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+import { terser } from 'rollup-plugin-terser'
+import peerDepsExternal from 'rollup-plugin-peer-deps-external'
 
-const packageJson = require("./package.json");
+const packageJson = require('./package.json')
 
 export default [
   {
-    input: "src/index.ts",
+    input: 'src/index.ts',
     output: [
       {
         file: packageJson.main,
-        format: "cjs",
+        format: 'cjs',
         sourcemap: true,
       },
       {
         file: packageJson.module,
-        format: "esm",
+        format: 'esm',
         sourcemap: true,
       },
     ],
     plugins: [
       peerDepsExternal(),
-      resolve(),
+      resolve({
+        extensions: ['.ts', '.tsx'],
+      }),
       commonjs(),
-      typescript({ tsconfig: './tsconfig.json' }),
+      babel({
+        babelHelpers: 'bundled',
+        extensions: ['.ts', '.tsx'],
+        include: ['src/**/*'],
+        exclude: 'node_modules/**',
+      }),
+      // typescript({ tsconfig: './tsconfig.json' }),
       terser(),
     ],
   },
   {
-    input: "dist/esm/index.d.ts",
-    output: [{ file: "dist/index.d.ts", format: "esm" }],
+    input: 'dist/esm/index.d.ts',
+    output: [{ file: 'dist/index.d.ts', format: 'esm' }],
     plugins: [dts()],
   },
   {
-    input: "./tailwind.config.js",
-    output: [{ file: "dist/tailwind.config.js", format: "cjs" }],
+    input: './tailwind.config.js',
+    output: [{ file: 'dist/tailwind.config.js', format: 'cjs' }],
   },
-];
+]

src/components/Breadcrumb/index.ts

@@ -1,2 +1,2 @@
 export { default, Breadcrumb } from './cmp'
-export { BreadcrumbProps } from './types'
+export type { BreadcrumbProps } from './types'

src/components/Button/index.ts

@@ -1,2 +1,2 @@
 export { default, Button } from './cmp'
-export { ButtonProps } from './types'
+export type { ButtonProps } from './types'

src/components/Card/index.ts

@@ -1,2 +1,2 @@
 export { default, Card } from './cmp'
-export { CardProps } from './types'
+export type { CardProps } from './types'

src/components/Icon/index.ts

@@ -1,2 +1,2 @@
 export { default, Icon } from './cmp'
-export { IconProps } from './types'
+export type { IconProps } from './types'

src/components/Logo/index.ts

@@ -1,2 +1,2 @@
 export { default, Logo } from './cmp'
-export { LogoProps } from './types'
+export type { LogoProps } from './types'

src/components/Navbar/index.tsx

@@ -1,2 +1,2 @@
 export { default, Navbar } from './cmp'
-export { NavbarProps } from './types'
+export type { NavbarProps } from './types'

src/components/NavbarLink/index.tsx

@@ -1,2 +1,2 @@
 export { default, NavbarLink } from './cmp'
-export { NavbarLinkProps } from './types'
+export type { NavbarLinkProps } from './types'

src/components/NavbarLinkList/index.tsx

@@ -1,2 +1,2 @@
 export { default, NavbarLinkList } from './cmp'
-export { NavbarLinkListProps } from './types'
+export type { NavbarLinkListProps } from './types'

src/components/Notification/index.ts

@@ -1,3 +1,3 @@
 export { default, Notification } from './cmp'
-export { NotificationProps } from './types'
+export type { NotificationProps } from './types'
 export { useNotification } from './context'

src/components/NotificationCard/index.ts

@@ -1,2 +1,2 @@
 export { default, NotificationCard } from './cmp'
-export { NotificationCardProps } from './types'
+export type { NotificationCardProps } from './types'

src/components/NotificationCard/types.ts

@@ -2,7 +2,10 @@ import { HTMLAttributes, ReactNode } from 'react'
 
 export type NotificationCardVariant = 'success' | 'warning' | 'error'
 
-export type NotificationCardProps = HTMLAttributes<HTMLDivElement> & {
+export type NotificationCardProps = Omit<
+  HTMLAttributes<HTMLDivElement>,
+  'content'
+> & {
   variant: NotificationCardVariant
   title?: string
   text?: string

src/components/ObjectImg/index.ts

@@ -1,2 +1,2 @@
 export { default, ObjectImg } from './cmp'
-export { ObjectImgProps } from './types'
+export type { ObjectImgProps } from './types'

src/components/Table/index.ts

@@ -1,2 +1,2 @@
 export { default, Table } from './cmp'
-export { TableProps } from './types'
+export type { TableProps } from './types'

src/components/TextGradient/index.ts

@@ -1,2 +1,2 @@
 export { default, TextGradient } from './cmp'
-export { TextGradientProps } from './types'
+export type { TextGradientProps } from './types'

src/components/Tooltip/index.ts

@@ -1,2 +1,2 @@
 export { default, Tooltip } from './cmp'
-export { TooltipProps } from './types'
+export type { TooltipProps } from './types'

src/components/forms/Checkbox/index.ts

@@ -1,2 +1,2 @@
 export { default, Checkbox } from './cmp'
-export { CheckboxProps } from './types'
+export type { CheckboxProps } from './types'

src/components/forms/CheckboxGroup/index.ts

@@ -1,3 +1,3 @@
 export { default, CheckboxGroup } from './cmp'
-export { CheckboxGroupProps } from './types'
+export type { CheckboxGroupProps } from './types'
 export { useCheckboxGroup } from './context'

src/components/forms/ChipInput/index.ts

@@ -1,2 +1,2 @@
 export { default, ChipInput } from './cmp'
-export { ChipInputProps } from './types'
+export type { ChipInputProps } from './types'

src/components/forms/CodeEditor/index.ts

@@ -1,2 +1,2 @@
 export { default, CodeEditor } from './cmp'
-export { CodeEditorProps } from './types'
+export type { CodeEditorProps } from './types'

src/components/forms/Dropdown/index.ts

@@ -1,2 +1,2 @@
 export { default, Dropdown } from './cmp'
-export { DropdownProps } from './types'
+export type { DropdownProps } from './types'

src/components/forms/DropdownOption/index.ts

@@ -1,2 +1,2 @@
 export { default, DropdownOption } from './cmp'
-export { DropdownOptionProps } from './types'
+export type { DropdownOptionProps } from './types'

src/components/forms/FormError/index.ts

@@ -1,2 +1,2 @@
 export { default, FormError } from './cmp'
-export { FormErrorProps } from './types'
+export type { FormErrorProps } from './types'

src/components/forms/Radio/index.ts

@@ -1,2 +1,2 @@
 export { default, Radio } from './cmp'
-export { RadioProps } from './types'
+export type { RadioProps } from './types'

src/components/forms/RadioGroup/index.ts

@@ -1,3 +1,3 @@
 export { default, RadioGroup } from './cmp'
-export { RadioGroupProps } from './types'
+export type { RadioGroupProps } from './types'
 export { useRadioGroup } from './context'

src/components/forms/Select/index.ts

@@ -1,2 +1,2 @@
 export { default, Select } from './cmp'
-export { SelectProps } from './types'
+export type { SelectProps } from './types'

src/components/forms/TextArea/index.ts

@@ -1,2 +1,2 @@
 export { default, TextArea } from './cmp'
-export { TextAreaProps } from './types'
+export type { TextAreaProps } from './types'

src/components/forms/TextInput/index.ts

@@ -1,2 +1,2 @@
 export { default, TextInput } from './cmp'
-export { TextInputProps } from './types'
+export type { TextInputProps } from './types'

src/styles/global.tsx

@@ -1,5 +1,10 @@
 import React from 'react'
-import { createGlobalStyle, css, DefaultTheme } from 'styled-components'
+import {
+  createGlobalStyle,
+  css,
+  DefaultTheme,
+  Interpolation,
+} from 'styled-components'
 import { BreakpointId } from '../themes/types'
 import {
   getDarkEffectCss,
@@ -255,41 +260,37 @@ function effectClasses() {
 }
 
 function typoClasses(theme: DefaultTheme) {
-  const breakpointId = getSortedResponsiveBreakpoints(theme)
-
   const typos = Object.entries(theme.typo).sort(
     ([, av], [, bv]) => av.size - bv.size,
   )
 
   const fontSizes = getSortedFontSizes(theme)
 
-  function getTypoClasses(bp: string = '') {
-    bp = bp ? `- ${bp} ` : ''
+  function getTypoClasses(bp: string) {
     return typos.map(
       ([k, v]) => css`
-        .tp-${k}${bp} ${v.tag && !bp ? `, ${k}` : ''} {
+        .${bp}tp-${k} ${v.tag && !bp ? `, ${k}` : ''} {
           ${getTypoCss(k as any)}
         }
       `,
     )
   }
 
-  function getFontSizesClasses(bp: string = '') {
-    bp = bp ? `- ${bp} ` : ''
+  function getFontSizesClasses(bp: string) {
     return fontSizes.map(
       ([k, v]) => css`
-        .fs-${k}${bp} {
+        .${bp}fs-${k} {
           font-size: ${v};
         }
       `,
     )
   }
 
-  const responsiveTypoCss = [undefined, ...breakpointId].map((bp) =>
-    getResponsiveCss(bp, getTypoClasses(bp)),
-  )
-  const responsiveFontSizesCss = [undefined, ...breakpointId].map((bp) =>
-    getResponsiveCss(bp, getFontSizesClasses(bp)),
+  const responsiveTypoCss = getResponsiveClasses(theme, getTypoClasses)
+
+  const responsiveFontSizesCss = getResponsiveClasses(
+    theme,
+    getFontSizesClasses,
   )
 
   return css`
@@ -301,6 +302,17 @@ function typoClasses(theme: DefaultTheme) {
   `
 }
 
+function getResponsiveClasses(
+  theme: DefaultTheme,
+  getClasses: (bp: string) => Interpolation<any>[],
+) {
+  const breakpointId = getSortedResponsiveBreakpoints(theme)
+
+  return [undefined, ...breakpointId].map((bp) =>
+    getResponsiveCss(bp, getClasses(bp ? `${bp}\\:` : '')),
+  )
+}
+
 function getSortedResponsiveBreakpoints(theme: DefaultTheme): BreakpointId[] {
   return Object.entries(theme.breakpoint)
     .sort(([, av], [, bv]) => av - bv)

src/themes/index.ts

@@ -13,4 +13,4 @@ export const themes = {
 // @note: sorted list for storybook UI
 export const themeList = [dark, light, alephDark, alephLight]
 
-export { CoreTheme, BreakpointId, TypoSizeKind, TypoKind } from './types'
+export type { CoreTheme, BreakpointId, TypoSizeKind, TypoKind } from './types'