From 1a03f582b4c266580ce126421cd2cf5b89ecfeb0 Mon Sep 17 00:00:00 2001 From: amalcaraz Date: Wed, 26 Apr 2023 04:52:49 +0200 Subject: [PATCH] fixed rollup tw transpilation --- .babelrc.json => .babelrc | 0 README.md | 6 ++- package-lock.json | 55 ++++++++++++++++++++ package.json | 1 + rollup.config.js | 43 +++++++++------ src/components/Breadcrumb/index.ts | 2 +- src/components/Button/index.ts | 2 +- src/components/Card/index.ts | 2 +- src/components/Icon/index.ts | 2 +- src/components/Logo/index.ts | 2 +- src/components/Navbar/index.tsx | 2 +- src/components/NavbarLink/index.tsx | 2 +- src/components/NavbarLinkList/index.tsx | 2 +- src/components/Notification/index.ts | 2 +- src/components/NotificationCard/index.ts | 2 +- src/components/NotificationCard/types.ts | 5 +- src/components/ObjectImg/index.ts | 2 +- src/components/Table/index.ts | 2 +- src/components/TextGradient/index.ts | 2 +- src/components/Tooltip/index.ts | 2 +- src/components/forms/Checkbox/index.ts | 2 +- src/components/forms/CheckboxGroup/index.ts | 2 +- src/components/forms/ChipInput/index.ts | 2 +- src/components/forms/CodeEditor/index.ts | 2 +- src/components/forms/Dropdown/index.ts | 2 +- src/components/forms/DropdownOption/index.ts | 2 +- src/components/forms/FormError/index.ts | 2 +- src/components/forms/Radio/index.ts | 2 +- src/components/forms/RadioGroup/index.ts | 2 +- src/components/forms/Select/index.ts | 2 +- src/components/forms/TextArea/index.ts | 2 +- src/components/forms/TextInput/index.ts | 2 +- src/styles/global.tsx | 40 +++++++++----- src/themes/index.ts | 2 +- tailwind.config.js | 24 ++++----- 35 files changed, 155 insertions(+), 73 deletions(-) rename .babelrc.json => .babelrc (100%) diff --git a/.babelrc.json b/.babelrc similarity index 100% rename from .babelrc.json rename to .babelrc diff --git a/README.md b/README.md index 6f22293f..f3a66e17 100644 --- a/README.md +++ b/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 `` 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 \ No newline at end of file + - 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 \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 6318eae6..6e014bcf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,6 +21,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", @@ -3105,6 +3106,60 @@ } } }, + "node_modules/@rollup/plugin-babel": { + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-6.0.3.tgz", + "integrity": "sha512-fKImZKppa1A/gX73eg4JGo+8kQr/q1HBQaCGKECZ0v4YBBv3lFqi14+7xyApECzvkLTHCifx+7ntcrvtBIRcpg==", + "dev": true, + "dependencies": { + "@babel/helper-module-imports": "^7.18.6", + "@rollup/pluginutils": "^5.0.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0", + "@types/babel__core": "^7.1.9", + "rollup": "^1.20.0||^2.0.0||^3.0.0" + }, + "peerDependenciesMeta": { + "@types/babel__core": { + "optional": true + }, + "rollup": { + "optional": true + } + } + }, + "node_modules/@rollup/plugin-babel/node_modules/@rollup/pluginutils": { + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.2.tgz", + "integrity": "sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==", + "dev": true, + "dependencies": { + "@types/estree": "^1.0.0", + "estree-walker": "^2.0.2", + "picomatch": "^2.3.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "rollup": "^1.20.0||^2.0.0||^3.0.0" + }, + "peerDependenciesMeta": { + "rollup": { + "optional": true + } + } + }, + "node_modules/@rollup/plugin-babel/node_modules/@types/estree": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.1.tgz", + "integrity": "sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==", + "dev": true + }, "node_modules/@rollup/plugin-commonjs": { "version": "22.0.2", "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-22.0.2.tgz", diff --git a/package.json b/package.json index 28c218bf..806faefc 100644 --- a/package.json +++ b/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", diff --git a/rollup.config.js b/rollup.config.js index e5fcc414..b1f0395e 100644 --- a/rollup.config.js +++ b/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' }], }, -]; +] diff --git a/src/components/Breadcrumb/index.ts b/src/components/Breadcrumb/index.ts index 29333c93..719bad82 100644 --- a/src/components/Breadcrumb/index.ts +++ b/src/components/Breadcrumb/index.ts @@ -1,2 +1,2 @@ export { default, Breadcrumb } from './cmp' -export { BreadcrumbProps } from './types' +export type { BreadcrumbProps } from './types' diff --git a/src/components/Button/index.ts b/src/components/Button/index.ts index 5676074c..f6f2d36e 100644 --- a/src/components/Button/index.ts +++ b/src/components/Button/index.ts @@ -1,2 +1,2 @@ export { default, Button } from './cmp' -export { ButtonProps } from './types' +export type { ButtonProps } from './types' diff --git a/src/components/Card/index.ts b/src/components/Card/index.ts index b4938bb0..1369f206 100644 --- a/src/components/Card/index.ts +++ b/src/components/Card/index.ts @@ -1,2 +1,2 @@ export { default, Card } from './cmp' -export { CardProps } from './types' +export type { CardProps } from './types' diff --git a/src/components/Icon/index.ts b/src/components/Icon/index.ts index 37a32d25..183b4f64 100644 --- a/src/components/Icon/index.ts +++ b/src/components/Icon/index.ts @@ -1,2 +1,2 @@ export { default, Icon } from './cmp' -export { IconProps } from './types' +export type { IconProps } from './types' diff --git a/src/components/Logo/index.ts b/src/components/Logo/index.ts index 735a9a10..c4a459a0 100644 --- a/src/components/Logo/index.ts +++ b/src/components/Logo/index.ts @@ -1,2 +1,2 @@ export { default, Logo } from './cmp' -export { LogoProps } from './types' +export type { LogoProps } from './types' diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx index cabeb496..2f6e1b4b 100644 --- a/src/components/Navbar/index.tsx +++ b/src/components/Navbar/index.tsx @@ -1,2 +1,2 @@ export { default, Navbar } from './cmp' -export { NavbarProps } from './types' +export type { NavbarProps } from './types' diff --git a/src/components/NavbarLink/index.tsx b/src/components/NavbarLink/index.tsx index 80b68c87..4e7b254e 100644 --- a/src/components/NavbarLink/index.tsx +++ b/src/components/NavbarLink/index.tsx @@ -1,2 +1,2 @@ export { default, NavbarLink } from './cmp' -export { NavbarLinkProps } from './types' +export type { NavbarLinkProps } from './types' diff --git a/src/components/NavbarLinkList/index.tsx b/src/components/NavbarLinkList/index.tsx index 559c3f7b..a39fd128 100644 --- a/src/components/NavbarLinkList/index.tsx +++ b/src/components/NavbarLinkList/index.tsx @@ -1,2 +1,2 @@ export { default, NavbarLinkList } from './cmp' -export { NavbarLinkListProps } from './types' +export type { NavbarLinkListProps } from './types' diff --git a/src/components/Notification/index.ts b/src/components/Notification/index.ts index 353cb147..b1f012e9 100644 --- a/src/components/Notification/index.ts +++ b/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' diff --git a/src/components/NotificationCard/index.ts b/src/components/NotificationCard/index.ts index a168ead8..3c1fa842 100644 --- a/src/components/NotificationCard/index.ts +++ b/src/components/NotificationCard/index.ts @@ -1,2 +1,2 @@ export { default, NotificationCard } from './cmp' -export { NotificationCardProps } from './types' +export type { NotificationCardProps } from './types' diff --git a/src/components/NotificationCard/types.ts b/src/components/NotificationCard/types.ts index 0a231e18..a9695637 100644 --- a/src/components/NotificationCard/types.ts +++ b/src/components/NotificationCard/types.ts @@ -2,7 +2,10 @@ import { HTMLAttributes, ReactNode } from 'react' export type NotificationCardVariant = 'success' | 'warning' | 'error' -export type NotificationCardProps = HTMLAttributes & { +export type NotificationCardProps = Omit< + HTMLAttributes, + 'content' +> & { variant: NotificationCardVariant title?: string text?: string diff --git a/src/components/ObjectImg/index.ts b/src/components/ObjectImg/index.ts index 2d365000..e4b9add7 100644 --- a/src/components/ObjectImg/index.ts +++ b/src/components/ObjectImg/index.ts @@ -1,2 +1,2 @@ export { default, ObjectImg } from './cmp' -export { ObjectImgProps } from './types' +export type { ObjectImgProps } from './types' diff --git a/src/components/Table/index.ts b/src/components/Table/index.ts index 5f535189..1d4151ac 100644 --- a/src/components/Table/index.ts +++ b/src/components/Table/index.ts @@ -1,2 +1,2 @@ export { default, Table } from './cmp' -export { TableProps } from './types' +export type { TableProps } from './types' diff --git a/src/components/TextGradient/index.ts b/src/components/TextGradient/index.ts index bae128f3..fdc6a0e1 100644 --- a/src/components/TextGradient/index.ts +++ b/src/components/TextGradient/index.ts @@ -1,2 +1,2 @@ export { default, TextGradient } from './cmp' -export { TextGradientProps } from './types' +export type { TextGradientProps } from './types' diff --git a/src/components/Tooltip/index.ts b/src/components/Tooltip/index.ts index 6c9ae95d..0ce3f269 100644 --- a/src/components/Tooltip/index.ts +++ b/src/components/Tooltip/index.ts @@ -1,2 +1,2 @@ export { default, Tooltip } from './cmp' -export { TooltipProps } from './types' +export type { TooltipProps } from './types' diff --git a/src/components/forms/Checkbox/index.ts b/src/components/forms/Checkbox/index.ts index 5dccc30f..18afa655 100644 --- a/src/components/forms/Checkbox/index.ts +++ b/src/components/forms/Checkbox/index.ts @@ -1,2 +1,2 @@ export { default, Checkbox } from './cmp' -export { CheckboxProps } from './types' +export type { CheckboxProps } from './types' diff --git a/src/components/forms/CheckboxGroup/index.ts b/src/components/forms/CheckboxGroup/index.ts index 8dc2a276..a80acc42 100644 --- a/src/components/forms/CheckboxGroup/index.ts +++ b/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' diff --git a/src/components/forms/ChipInput/index.ts b/src/components/forms/ChipInput/index.ts index 769b357e..6ec160d6 100644 --- a/src/components/forms/ChipInput/index.ts +++ b/src/components/forms/ChipInput/index.ts @@ -1,2 +1,2 @@ export { default, ChipInput } from './cmp' -export { ChipInputProps } from './types' +export type { ChipInputProps } from './types' diff --git a/src/components/forms/CodeEditor/index.ts b/src/components/forms/CodeEditor/index.ts index 20e97bde..56b69d20 100644 --- a/src/components/forms/CodeEditor/index.ts +++ b/src/components/forms/CodeEditor/index.ts @@ -1,2 +1,2 @@ export { default, CodeEditor } from './cmp' -export { CodeEditorProps } from './types' +export type { CodeEditorProps } from './types' diff --git a/src/components/forms/Dropdown/index.ts b/src/components/forms/Dropdown/index.ts index 302fcf55..3b5917f0 100644 --- a/src/components/forms/Dropdown/index.ts +++ b/src/components/forms/Dropdown/index.ts @@ -1,2 +1,2 @@ export { default, Dropdown } from './cmp' -export { DropdownProps } from './types' +export type { DropdownProps } from './types' diff --git a/src/components/forms/DropdownOption/index.ts b/src/components/forms/DropdownOption/index.ts index 74b31633..52ec77ad 100644 --- a/src/components/forms/DropdownOption/index.ts +++ b/src/components/forms/DropdownOption/index.ts @@ -1,2 +1,2 @@ export { default, DropdownOption } from './cmp' -export { DropdownOptionProps } from './types' +export type { DropdownOptionProps } from './types' diff --git a/src/components/forms/FormError/index.ts b/src/components/forms/FormError/index.ts index 17e8b497..6220de7f 100644 --- a/src/components/forms/FormError/index.ts +++ b/src/components/forms/FormError/index.ts @@ -1,2 +1,2 @@ export { default, FormError } from './cmp' -export { FormErrorProps } from './types' +export type { FormErrorProps } from './types' diff --git a/src/components/forms/Radio/index.ts b/src/components/forms/Radio/index.ts index 49b911e5..8e992494 100644 --- a/src/components/forms/Radio/index.ts +++ b/src/components/forms/Radio/index.ts @@ -1,2 +1,2 @@ export { default, Radio } from './cmp' -export { RadioProps } from './types' +export type { RadioProps } from './types' diff --git a/src/components/forms/RadioGroup/index.ts b/src/components/forms/RadioGroup/index.ts index bcc6c4ee..3f91658e 100644 --- a/src/components/forms/RadioGroup/index.ts +++ b/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' diff --git a/src/components/forms/Select/index.ts b/src/components/forms/Select/index.ts index bb1c6913..a8ac1d1f 100644 --- a/src/components/forms/Select/index.ts +++ b/src/components/forms/Select/index.ts @@ -1,2 +1,2 @@ export { default, Select } from './cmp' -export { SelectProps } from './types' +export type { SelectProps } from './types' diff --git a/src/components/forms/TextArea/index.ts b/src/components/forms/TextArea/index.ts index 429568ea..1868d8b9 100644 --- a/src/components/forms/TextArea/index.ts +++ b/src/components/forms/TextArea/index.ts @@ -1,2 +1,2 @@ export { default, TextArea } from './cmp' -export { TextAreaProps } from './types' +export type { TextAreaProps } from './types' diff --git a/src/components/forms/TextInput/index.ts b/src/components/forms/TextInput/index.ts index d892beb7..1dc3f22e 100644 --- a/src/components/forms/TextInput/index.ts +++ b/src/components/forms/TextInput/index.ts @@ -1,2 +1,2 @@ export { default, TextInput } from './cmp' -export { TextInputProps } from './types' +export type { TextInputProps } from './types' diff --git a/src/styles/global.tsx b/src/styles/global.tsx index 660244ee..043654e6 100644 --- a/src/styles/global.tsx +++ b/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[], +) { + 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) diff --git a/src/themes/index.ts b/src/themes/index.ts index f2c797ec..414f63bd 100644 --- a/src/themes/index.ts +++ b/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' diff --git a/tailwind.config.js b/tailwind.config.js index 01d59c86..12357621 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,25 +1,23 @@ /* eslint-disable no-undef */ /** @type {import('tailwindcss').Config} */ module.exports = { - content: [ - "./src/**/*.{js,jsx,ts,tsx}", - ], + content: ['./src/**/*.{js,jsx,ts,tsx}'], theme: { screens: { - 'xs': '0rem', // 0px - 'sm': '36rem', // 576px - 'md': '48rem', // 768px - 'lg': '62rem', // 992px - 'xl': '75rem', // 1200px + xs: '0rem', // 0px + sm: '36rem', // 576px + md: '48rem', // 768px + lg: '62rem', // 992px + xl: '75rem', // 1200px '2xl': '96rem', // 1400px }, fontSize: { '2xs': '0.5rem', // 8px - 'xs': '0.625rem', // 10px - 'sm': '1rem', // 16px - 'md': '1.125rem', // 18px - 'lg': '1.5rem', // 24px - 'xl': '1.75rem', // 28px + xs: '0.625rem', // 10px + sm: '1rem', // 16px + md: '1.125rem', // 18px + lg: '1.5rem', // 24px + xl: '1.75rem', // 28px '2xl': '3rem', // 48px '3xl': '3.875rem', // 62px '4xl': '5.125rem', // 82px