From 181547a25213bee8a20002e07344b957386c4d0f Mon Sep 17 00:00:00 2001 From: Pauline Date: Sun, 26 Nov 2023 22:55:04 -0500 Subject: feat(build): transfer everything to esm/ts --- packages/config/base.tsconfig.json | 2 +- packages/config/index.js | 1 - packages/config/index.ts | 1 + packages/config/package.json | 8 ++- packages/config/vitest.shared.ts | 8 +++ packages/ui/package.json | 12 ++-- packages/ui/postcss.config.js | 3 - packages/ui/postcss.config.ts | 8 +++ packages/ui/src/index.ts | 1 + packages/ui/style/index.js | 1 - packages/ui/style/index.ts | 1 + packages/ui/style/postcss.config.js | 1 - packages/ui/style/postcss.ts | 1 + packages/ui/style/tailwind.js | 125 ------------------------------------ packages/ui/style/tailwind.ts | 115 +++++++++++++++++++++++++++++++++ packages/ui/tailwind.config.js | 2 - packages/ui/tailwind.config.ts | 3 + packages/ui/vitest.config.ts | 3 + 18 files changed, 155 insertions(+), 141 deletions(-) delete mode 100644 packages/config/index.js create mode 100644 packages/config/index.ts create mode 100644 packages/config/vitest.shared.ts delete mode 100644 packages/ui/postcss.config.js create mode 100644 packages/ui/postcss.config.ts delete mode 100644 packages/ui/style/index.js create mode 100644 packages/ui/style/index.ts delete mode 100644 packages/ui/style/postcss.config.js create mode 100644 packages/ui/style/postcss.ts delete mode 100644 packages/ui/style/tailwind.js create mode 100644 packages/ui/style/tailwind.ts delete mode 100644 packages/ui/tailwind.config.js create mode 100644 packages/ui/tailwind.config.ts create mode 100644 packages/ui/vitest.config.ts (limited to 'packages') diff --git a/packages/config/base.tsconfig.json b/packages/config/base.tsconfig.json index 2d27ce4..17c8f2a 100644 --- a/packages/config/base.tsconfig.json +++ b/packages/config/base.tsconfig.json @@ -17,6 +17,6 @@ "resolveJsonModule": true, "module": "ESNext", "target": "ESNext", - "types": ["vite/client"] + "types": ["vite/client", "vitest/globals"] } } diff --git a/packages/config/index.js b/packages/config/index.js deleted file mode 100644 index cf96492..0000000 --- a/packages/config/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default as vite } from './vite'; diff --git a/packages/config/index.ts b/packages/config/index.ts new file mode 100644 index 0000000..cf96492 --- /dev/null +++ b/packages/config/index.ts @@ -0,0 +1 @@ +export { default as vite } from './vite'; diff --git a/packages/config/package.json b/packages/config/package.json index dbdad1b..4b480ef 100644 --- a/packages/config/package.json +++ b/packages/config/package.json @@ -5,13 +5,17 @@ "exports": { "./*": "./*", "./vite": "./vite", - "./vite/relAlias": "./vite/relAlias" + "./vite/relAlias": "./vite/relAlias", + "./vitest": "./vitest.shared" }, + "main": "index.ts", + "types": "index.ts", "devDependencies": { "@vitejs/plugin-react": "^4.2.0", "regexpp": "^3.2.0", "vite-plugin-html": "^3.2.0", "vite-plugin-svgr": "^4.2.0", - "vite-tsconfig-paths": "^4.2.1" + "vite-tsconfig-paths": "^4.2.1", + "vitest": "^0.34.6" } } diff --git a/packages/config/vitest.shared.ts b/packages/config/vitest.shared.ts new file mode 100644 index 0000000..313a0ff --- /dev/null +++ b/packages/config/vitest.shared.ts @@ -0,0 +1,8 @@ +import { defineConfig } from 'vitest/config'; + +export default defineConfig({ + test: { + globals: true, + reporters: ['dot'], + }, +}); diff --git a/packages/ui/package.json b/packages/ui/package.json index c2c95a0..54f5c8f 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -4,16 +4,17 @@ "exports": { ".": "./src/index.ts", "./src/forms": "./src/forms/index.ts", - "./postcss": "./style/postcss.config.js", - "./tailwind": "./style/tailwind.js", - "./style": "./style/index.js", + "./postcss": "./style/postcss", + "./tailwind": "./style/tailwind", + "./style": "./style", "./style/style.scss": "./style/style.scss", "./package.json": "./package.json" }, "main": "src/index.ts", "types": "src/index.ts", "scripts": { - "typecheck": "tsc -b" + "typecheck": "tsc -b", + "test": "vitest" }, "dependencies": { "@headlessui/react": "^1.7.17", @@ -45,6 +46,7 @@ "sass": "^1.69.5", "tailwindcss": "^3.3.5", "tailwindcss-animate": "^1.0.7", - "typescript": "^5.3.2" + "typescript": "^5.3.2", + "vitest": "^0.34.6" } } diff --git a/packages/ui/postcss.config.js b/packages/ui/postcss.config.js deleted file mode 100644 index cc95735..0000000 --- a/packages/ui/postcss.config.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = { - plugins: [require('tailwindcss'), require('autoprefixer')], -}; diff --git a/packages/ui/postcss.config.ts b/packages/ui/postcss.config.ts new file mode 100644 index 0000000..2eb70ea --- /dev/null +++ b/packages/ui/postcss.config.ts @@ -0,0 +1,8 @@ +import autoprefixer from 'autoprefixer'; +import tailwindcss from 'tailwindcss'; + +const config = { + plugins: [autoprefixer(), tailwindcss()], +}; + +export default config; diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index 904db93..98af4eb 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -1 +1,2 @@ export { cva, cx } from 'class-variance-authority'; +export * from './utils'; diff --git a/packages/ui/style/index.js b/packages/ui/style/index.js deleted file mode 100644 index 423b033..0000000 --- a/packages/ui/style/index.js +++ /dev/null @@ -1 +0,0 @@ -import './style.scss'; diff --git a/packages/ui/style/index.ts b/packages/ui/style/index.ts new file mode 100644 index 0000000..423b033 --- /dev/null +++ b/packages/ui/style/index.ts @@ -0,0 +1 @@ +import './style.scss'; diff --git a/packages/ui/style/postcss.config.js b/packages/ui/style/postcss.config.js deleted file mode 100644 index 0b6eba2..0000000 --- a/packages/ui/style/postcss.config.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('../postcss.config'); diff --git a/packages/ui/style/postcss.ts b/packages/ui/style/postcss.ts new file mode 100644 index 0000000..60d0ac7 --- /dev/null +++ b/packages/ui/style/postcss.ts @@ -0,0 +1 @@ +export { default } from '../postcss.config'; diff --git a/packages/ui/style/tailwind.js b/packages/ui/style/tailwind.js deleted file mode 100644 index 8ebf041..0000000 --- a/packages/ui/style/tailwind.js +++ /dev/null @@ -1,125 +0,0 @@ -const defaultTheme = require('tailwindcss/defaultTheme'); - -/** @type {(varName: string) => string} */ -// eslint-disable-next-line unused-imports/no-unused-vars -const alpha = varName => `hsla(var(${varName}), )`; -const contentExts = `{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue,stories.tsx}`; - -// TODO: make this not CJS - -/** - * @param {string} app - * @param {import('tailwindcss').Config} options - * @returns {import('tailwindcss').Config} the tailwind config - */ -module.exports = (app, options) => { - /** @type {import('tailwindcss').Config} */ - const config = { - content: [ - `../../apps/${app}/src/**/*.${contentExts}`, - `../../packages/*/src/**/*.${contentExts}`, - `../../interface/**/*.${contentExts}`, - ], - darkMode: 'class', - theme: { - screens: { - xs: '475px', - sm: '650px', - md: '868px', - lg: '1024px', - xl: '1280px', - ...defaultTheme.screens, - }, - fontSize: { - 'xs': '12px', - 'sm': '14px', - 'md': '16px', - 'lg': '18px', - 'header-sm': '24px', - 'header': '28px', - 'header-lg': '32px', - 'body-sm': '15px', - 'body': '16px', - 'body-lg': '17px', - }, - borderRadius: { - none: '0', - sm: '3px', - md: '5px', - lg: '8px', - xl: '12px', - full: '100vw', - }, - extend: { - colors: { - blue: { - 500: 'rgba(31, 101, 214, 1)', - }, - gray: { - 50: 'rgba(240, 242, 244, 1)', - 400: 'rgba(138, 150, 168, 1)', - 700: 'rgba(65, 74, 88, 1)', - 800: 'rgba(42, 47, 55, 1)', - }, - white: { - DEFAULT: 'rgba(255, 255, 255, 1)', - secondary: 'rgba(238, 241, 254, 1)', - hover: 'rgba(231, 235, 252, 1)', - }, - black: { - DEFAULT: 'rgba(0, 0, 0, 1)', - }, - text: { - DEFAULT: 'rgba(2, 3, 7, 1)', - primary: 'rgba(2, 3, 7, 1)', - }, - }, - extend: { - transitionTimingFunction: { - 'css': 'ease', - 'css-in': 'ease-in', - 'css-out': 'ease-out', - 'css-in-out': 'ease-in-out', - 'in-sine': 'cubic-bezier(0.12, 0, 0.39, 0)', - 'out-sine': 'cubic-bezier(0.61, 1, 0.88, 1)', - 'in-out-sine': 'cubic-bezier(0.37, 0, 0.63, 1)', - 'in-quad': 'cubic-bezier(0.11, 0, 0.5, 0)', - 'out-quad': 'cubic-bezier(0.5, 1, 0.89, 1)', - 'in-out-quad': 'cubic-bezier(0.45, 0, 0.55, 1)', - 'in-cubic': 'cubic-bezier(0.32, 0, 0.67, 0)', - 'out-cubic': 'cubic-bezier(0.33, 1, 0.68, 1)', - 'in-out-cubic': 'cubic-bezier(0.65, 0, 0.35, 1)', - 'in-quart': 'cubic-bezier(0.5, 0, 0.75, 0)', - 'out-quart': 'cubic-bezier(0.25, 1, 0.5, 1)', - 'in-out-quart': 'cubic-bezier(0.76, 0, 0.24, 1)', - 'in-quint': 'cubic-bezier(0.64, 0, 0.78, 0)', - 'out-quint': 'cubic-bezier(0.22, 1, 0.36, 1)', - 'in-out-quint': 'cubic-bezier(0.83, 0, 0.17, 1)', - 'in-expo': 'cubic-bezier(0.7, 0, 0.84, 0)', - 'out-expo': 'cubic-bezier(0.16, 1, 0.3, 1)', - 'in-out-expo': 'cubic-bezier(0.87, 0, 0.13, 1)', - 'in-circ': 'cubic-bezier(0.55, 0, 1, 0.45)', - 'out-circ': 'cubic-bezier(0, 0.55, 0.45, 1)', - 'in-out-circ': 'cubic-bezier(0.85, 0, 0.15, 1)', - 'in-back': 'cubic-bezier(0.36, 0, 0.66, -0.56)', - 'out-back': 'cubic-bezier(0.34, 1.56, 0.64, 1)', - 'in-out-back': 'cubic-bezier(0.68, -0.6, 0.32, 1.6)', - }, - }, - }, - }, - plugins: [ - require('@tailwindcss/forms'), - require('tailwindcss-animate'), - require('@headlessui/tailwindcss'), - require('tailwindcss-radix')(), - ], - - ...options, - }; - - if (app === 'website') - config.plugins.push(require('@tailwindcss/typography')); - - return config; -}; diff --git a/packages/ui/style/tailwind.ts b/packages/ui/style/tailwind.ts new file mode 100644 index 0000000..73c8fc7 --- /dev/null +++ b/packages/ui/style/tailwind.ts @@ -0,0 +1,115 @@ +import type { Config } from 'tailwindcss'; + +import forms from '@tailwindcss/forms'; +import typography from '@tailwindcss/typography'; +import headlessui from '@headlessui/tailwindcss'; +import animate from 'tailwindcss-animate'; +import radix from 'tailwindcss-radix'; + +export const alpha = (varName: string) => `hsla(var(${varName}), )`; +export const contentExts = `{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue,stories.tsx}`; + +export default async (app: string, options?: Config): Promise => { + const config: Config = { + content: [ + `../../apps/${app}/src/**/*.${contentExts}`, + `../../packages/*/src/**/*.${contentExts}`, + `../../interface/**/*.${contentExts}`, + ], + darkMode: 'class', + theme: { + screens: { + xs: '475px', + sm: '650px', + md: '868px', + lg: '1024px', + xl: '1280px', + }, + fontSize: { + 'xs': '12px', + 'sm': '14px', + 'md': '16px', + 'lg': '18px', + 'header-sm': '24px', + 'header': '28px', + 'header-lg': '32px', + 'body-sm': '15px', + 'body': '16px', + 'body-lg': '17px', + }, + borderRadius: { + none: '0', + sm: '3px', + md: '5px', + lg: '8px', + xl: '12px', + full: '100vw', + }, + extend: { + colors: { + blue: { + 500: 'rgba(31, 101, 214, 1)', + }, + gray: { + 50: 'rgba(240, 242, 244, 1)', + 400: 'rgba(138, 150, 168, 1)', + 700: 'rgba(65, 74, 88, 1)', + 800: 'rgba(42, 47, 55, 1)', + }, + white: { + DEFAULT: 'rgba(255, 255, 255, 1)', + secondary: 'rgba(238, 241, 254, 1)', + hover: 'rgba(231, 235, 252, 1)', + }, + black: { + DEFAULT: 'rgba(0, 0, 0, 1)', + }, + text: { + DEFAULT: 'rgba(2, 3, 7, 1)', + primary: 'rgba(2, 3, 7, 1)', + }, + }, + extend: { + transitionTimingFunction: { + 'css': 'ease', + 'css-in': 'ease-in', + 'css-out': 'ease-out', + 'css-in-out': 'ease-in-out', + 'in-sine': 'cubic-bezier(0.12, 0, 0.39, 0)', + 'out-sine': 'cubic-bezier(0.61, 1, 0.88, 1)', + 'in-out-sine': 'cubic-bezier(0.37, 0, 0.63, 1)', + 'in-quad': 'cubic-bezier(0.11, 0, 0.5, 0)', + 'out-quad': 'cubic-bezier(0.5, 1, 0.89, 1)', + 'in-out-quad': 'cubic-bezier(0.45, 0, 0.55, 1)', + 'in-cubic': 'cubic-bezier(0.32, 0, 0.67, 0)', + 'out-cubic': 'cubic-bezier(0.33, 1, 0.68, 1)', + 'in-out-cubic': 'cubic-bezier(0.65, 0, 0.35, 1)', + 'in-quart': 'cubic-bezier(0.5, 0, 0.75, 0)', + 'out-quart': 'cubic-bezier(0.25, 1, 0.5, 1)', + 'in-out-quart': 'cubic-bezier(0.76, 0, 0.24, 1)', + 'in-quint': 'cubic-bezier(0.64, 0, 0.78, 0)', + 'out-quint': 'cubic-bezier(0.22, 1, 0.36, 1)', + 'in-out-quint': 'cubic-bezier(0.83, 0, 0.17, 1)', + 'in-expo': 'cubic-bezier(0.7, 0, 0.84, 0)', + 'out-expo': 'cubic-bezier(0.16, 1, 0.3, 1)', + 'in-out-expo': 'cubic-bezier(0.87, 0, 0.13, 1)', + 'in-circ': 'cubic-bezier(0.55, 0, 1, 0.45)', + 'out-circ': 'cubic-bezier(0, 0.55, 0.45, 1)', + 'in-out-circ': 'cubic-bezier(0.85, 0, 0.15, 1)', + 'in-back': 'cubic-bezier(0.36, 0, 0.66, -0.56)', + 'out-back': 'cubic-bezier(0.34, 1.56, 0.64, 1)', + 'in-out-back': 'cubic-bezier(0.68, -0.6, 0.32, 1.6)', + }, + }, + }, + }, + plugins: [forms, animate, headlessui, radix], + + ...options, + }; + + if (app === 'website') + config.plugins!.push(typography); + + return config; +}; diff --git a/packages/ui/tailwind.config.js b/packages/ui/tailwind.config.js deleted file mode 100644 index 8c53793..0000000 --- a/packages/ui/tailwind.config.js +++ /dev/null @@ -1,2 +0,0 @@ -/** @type {import('tailwindcss').Config} */ -module.exports = require('./style/tailwind')('web'); diff --git a/packages/ui/tailwind.config.ts b/packages/ui/tailwind.config.ts new file mode 100644 index 0000000..0c30ba3 --- /dev/null +++ b/packages/ui/tailwind.config.ts @@ -0,0 +1,3 @@ +import tailwindConfig from './style/tailwind'; + +export default await tailwindConfig('web'); diff --git a/packages/ui/vitest.config.ts b/packages/ui/vitest.config.ts new file mode 100644 index 0000000..3160c1a --- /dev/null +++ b/packages/ui/vitest.config.ts @@ -0,0 +1,3 @@ +import vitestShared from '@polyfrost/config/vitest.shared'; + +export default vitestShared; -- cgit