feat: Moved to vite

Signed-off-by: Avior <f.bouillon@aptatio.com>

.github/workflows/publish.yml

@@ -0,0 +1,28 @@
+name: publish
+on:
+  push:
+    tags:
+      - 'v[0-9]+.[0-9]+.[0-9]+*'
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup NodeJS
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18.x'
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build
+        run: npm run build
+
+      - name: Publish
+        run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitignore

@@ -1,5 +1,7 @@
 node_modules/
 types/
 
-index.js
+index.es.js
+index.umd.js
 style.css
+*.tgz

.npmignore

@@ -1,8 +1,9 @@
+.github/
 .storybook/
 node_modules/
 *.stories.js
+.editorconfig
 .gitattributes
 .gitignore
 .npmignore
-yarn.lock
+*.tgz
-yarn-error.log

.storybook/main.js

@@ -1,12 +1,9 @@
-const path = require("path");
-const webpack = require('webpack')
-
 module.exports = {
 	"stories": [
 		"../src/**/*.stories.tsx",
 	],
 	core: {
-		builder: "webpack5"
+		builder: "@storybook/builder-vite"
 	},
 	staticDirs: ["./public"],
 	"addons": [
@@ -23,19 +20,5 @@ module.exports = {
 			shouldExtractLiteralValuesFromEnum: true,
 			propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
 		},
-	},
-	presets: [path.resolve(__dirname, "./next.js")],
-	// Allow to use Next/Image
-	webpackFinal: (config) => {
-		config.plugins.push(new webpack.DefinePlugin({
-			'process.env.__NEXT_IMAGE_OPTS': JSON.stringify({
-				deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
-				imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
-				domains: [],
-				path: '/',
-				loader: 'default',
-			})
-		}))
-		return config
 	}
 }

.storybook/mockNextImage.js

@@ -1,18 +0,0 @@
-import React from 'react'
-// https://stackoverflow.com/a/64765638/7335674
-
-import * as nextImage from 'next/image'
-
-Object.defineProperty(nextImage, 'default', {
-	configurable: true,
-	value: (props) => {
-		return (
-			<div style={{display: 'inline-block', maxWidth: '100%', overflow: 'hidden', position: 'relative', boxSizing: 'border-box', margin: 0}}>
-				<div style={{boxSizing: 'border-box', display: 'block', maxWidth: '100%'}}>
-					<img {...props} alt="" aria-hidden="true" role="presentation" style={{maxWidth: '100%', display: 'block', margin: 0, border: 'none', padding: 0}} />
-				</div>
-				<img {...props} style={{position: 'absolute', inset: 0, boxSizing: 'border-box', padding: 0, border: 'none', margin: 'auto', display: 'block', width: 0, height: 0, minWidth: '100%', maxWidth: '100%', minHeight: '100%', maxHeight: '100%'}} />
-			</div>
-		)
-	},
-})

.storybook/next.js

@@ -1,50 +0,0 @@
-module.exports = {
-	webpackFinal: async (baseConfig, options) => {
-		const { module = {} } = baseConfig;
-
-		const newConfig = {
-			...baseConfig,
-			module: {
-				...module,
-				rules: [...(module.rules || [])],
-			},
-		};
-
-		// TypeScript
-		newConfig.module.rules.push({
-			test: /\.(ts|tsx)$/,
-			// include: [path.resolve(__dirname, '../src/client/components')],
-			use: ['babel-loader', 'ts-loader']
-		});
-		newConfig.resolve.extensions.push('.ts', '.tsx');
-
-		// JavaScript
-		newConfig.module.rules.push({
-			test: /\.(js|jsx)$/,
-			// include: [path.resolve(__dirname, '../src/client/components')],
-			use: [{
-				loader: 'babel-loader',
-				options: {
-					presets: ['@babel/preset-env', '@babel/preset-react']
-				}
-			}]
-		});
-		newConfig.resolve.extensions.push('.js', '.jsx');
-
-		// Stylus
-		newConfig.module.rules.push({
-		test: /\.styl$/,
-		use: ['style-loader', {
-			loader: 'css-loader',
-			options: {
-				url: false,
-				importLoaders: 1,
-				modules: true
-			},
-		}, 'stylus-loader'],
-	});
-		newConfig.resolve.extensions.push('.styl');
-
-		return newConfig;
-	},
-};

.storybook/preview.js

@@ -1,6 +1,5 @@
 import '../src/general.styl'
 import './mockNextRouter'
-import './mockNextImage'
 
 export const parameters = {
   layout: 'centered',

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Florian Bouillon
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1 @@
+# Dzeio Components

package.json

@@ -5,28 +5,18 @@
 	"main": "./index.js",
 	"types": "./types/index.d.ts",
 	"devDependencies": {
-		"@babel/core": "^7.17.8",
+		"@storybook/addon-essentials": "^6",
-		"@babel/preset-env": "^7.16.11",
+		"@storybook/builder-vite": "^0.2.2",
-		"@babel/preset-react": "^7.16.7",
+		"@storybook/cli": "^6",
-		"@storybook/addon-essentials": "^6.4.20",
+		"@storybook/react": "^6",
-		"@storybook/builder-webpack5": "^6.4.20",
+		"@types/node": "^18",
-		"@storybook/cli": "^6.4.20",
+		"@types/react": "^18",
-		"@storybook/manager-webpack5": "^6.4.20",
+		"@types/react-dom": "^18",
-		"@storybook/react": "^6.4.20",
+		"next": "^12",
-		"@types/node": "^18.7.16",
+		"react": "^18",
-		"@types/react": "^18.0.19",
+		"react-dom": "^18",
-		"@types/react-dom": "^18.0.6",
+		"style-loader": "^3",
-		"babel-loader": "^8.2.4",
+		"typescript": "^4"
-		"css-loader": "^6.7.1",
-		"next": "^12.3.0",
-		"react": "^18.2.0",
-		"react-dom": "^18.2.0",
-		"style-loader": "^3.3.0",
-		"stylus": "^0.59.0",
-		"stylus-loader": "^7.0.0",
-		"ts-loader": "^9.2.8",
-		"typescript": "^4.6.3",
-		"webpack": "^5.71.0"
 	},
 	"peerDependencies": {
 		"next": ">=11.0.0",
@@ -34,17 +24,14 @@
 		"react-dom": ">=17.0.0"
 	},
 	"scripts": {
-		"dev": "start-storybook -p 6006",
+		"dev": "start-storybook --port 6006 --no-version-updates --disable-telemetry --no-manager-cache --modern --no-open",
-		"build": "rollup --config",
+		"build": "npx vite build && npx tsc --emitDeclarationOnly",
-		"prepublishOnly": "npm run build",
+		"prepublishOnly": "npx vite build && npx tsc --emitDeclarationOnly",
-		"postinstall": "rollup --config"
+		"postinstall": "npx vite build && npx tsc --emitDeclarationOnly"
 	},
 	"dependencies": {
-		"@dzeio/object-util": "^1.3.0",
+		"@dzeio/object-util": "^1",
 		"lucide-react": "^0.88.0",
-		"rollup": "^2.70.1",
+		"vite": "^3"
-		"rollup-plugin-styles": "^4.0.0",
-		"rollup-plugin-typescript2": "^0.34.0",
-		"tslib": "^2.1.0"
 	}
 }

rollup.config.js

@@ -1,29 +0,0 @@
-import typescript from 'rollup-plugin-typescript2';
-import styles from 'rollup-plugin-styles'
-import pkg from './package.json';
-
-export default [
-	{
-		input: 'src/index.ts',
-		external: ['ms'],
-		plugins: [
-			styles({
-				modules: true,
-				url: false,
-				autoModules: true,
-				mode: 'extract',
-				modules: {
-					generateScopedName: '[local][hash:5]'
-				}
-			}),
-			typescript({useTsconfigDeclarationDir: true}), // so Rollup can convert TypeScript to JavaScript
-		],
-		output: [
-			{
-				file: pkg.main,
-				format: 'cjs',
-				assetFileNames: 'style.css'
-			}
-		]
-	}
-];

src/Button/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react'
+import React from 'react'
 import Link from '../Link'
 import { ColorType, Icon } from '../interfaces'
 import { buildClassName } from '../Util'

src/Input/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, FocusEvent } from 'react'
+import React, { FocusEvent } from 'react'
 
 import { ChevronDown, MinusSquare, PlusSquare } from 'lucide-react'
 import Text from '../Text'
@@ -167,7 +167,10 @@ export default class Input extends React.PureComponent<Props, States> {
 		let iconRight = this.props.iconRight
 		let iconLeft = this.props.iconLeft
 
-		let input: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>
+		let input: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> = <input
+			{...props}
+			{...baseProps}
+		/>
 
 		switch (this.props.type) {
 			case 'textarea':
@@ -202,13 +205,14 @@ export default class Input extends React.PureComponent<Props, States> {
 						return (value + this.ensureNumber(this.props.step, 1)).toString()
 					}}
 				}
-			default:
 				input = <input
 					{...props}
 					{...baseProps}
 				/>
+				break
 		}
 
+
 		return (
 			<>
 			{this.props.label && (

src/Loader/Loader.module.styl

@@ -11,4 +11,4 @@
 	top 0
 
 	&.hide
-		top -7px
+		top -8px

src/Navbar/index.tsx

@@ -2,7 +2,7 @@ import Router from 'next/router'
 
 import Image, { ImageProps } from 'next/image'
 import React from 'react'
-import { ChevronDown, ChevronsRight, Menu as LucideMenu, X } from 'lucide-react'
+import { ChevronDown, Menu as LucideMenu } from 'lucide-react'
 import Text from '../Text'
 import Menu from '../Menu'
 import Sidebar from '../Sidebar'
@@ -14,7 +14,6 @@ import { buildClassName } from '../Util'
 import css from './Navbar.module.styl'
 import { Icon } from '../interfaces'
 import Button from '../Button'
-import { objectEqual } from '@dzeio/object-util'
 
 interface MenuItem {
 	path?: string

src/NotificationManager/index.tsx

@@ -1,7 +1,6 @@
 import { buildClassName } from '../Util'
 import Button from '../Button'
 import Box from '../Box'
-import Col from '../Col'
 import Text from '../Text'
 import Router from 'next/router'
 import React from 'react'

src/ProgressBar/ProgressBar.module.styl

@@ -19,6 +19,7 @@
 		transition-duration $transitionTime
 		transition-timing-function $transitionFunction
 		height 100%
+		max-width 100%
 		width 0
 		background $main
 		border-radius 8px

src/ProgressBox/index.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import { buildClassName } from '../Util'
 import css from './ProgressBox.module.styl'
 import ProgressBar from '../ProgressBar'
 import Row from '../Row'

tsconfig.json

@@ -1,62 +1,39 @@
 {
 	"compilerOptions": {
-		/* Basic Options */
+		// from @dzeio/config
-		"target": "esnext",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
+		"target": "ES2019", // Follow NodeJS oldest supported LTS and use version from https://github.com/microsoft/TypeScript/wiki/Node-Target-Mapping
-		"module": "esnext",                       /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
+		"module": "commonjs",
-		// "lib": [],                             /* Specify library files to be included in the compilation. */
+		"resolveJsonModule": true,
-		// "allowJs": true,                       /* Allow javascript files to be compiled. */
+		"moduleResolution": "node",
-		// "checkJs": true,                       /* Report errors in .js files. */
+		"esModuleInterop": true,
+		"experimentalDecorators": true,
+		"emitDecoratorMetadata": true,
+		"skipLibCheck": true,
+		"allowJs": true,
+		"pretty": true,
+		"allowSyntheticDefaultImports": true,
+
+		// Type Checking
+		"forceConsistentCasingInFileNames": true,
+
+		"alwaysStrict": true,
+		"strict": true,
+		"strictNullChecks": true,
+		"strictFunctionTypes": true,
+		"strictBindCallApply": true,
+		"strictPropertyInitialization": true,
+
+		"noImplicitAny": true,
+		"noImplicitThis": true,
+		"noUnusedLocals": true,
+		"noUnusedParameters": true,
+		"noImplicitReturns": true,
+		"noFallthroughCasesInSwitch": true,
+		// -end
 		"jsx": "react",                        /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
 		"declaration": true,                   /* Generates corresponding '.d.ts' file. */
-		// "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
-		// "sourceMap": true,                     /* Generates corresponding '.map' file. */
-		// "outFile": "./",                       /* Concatenate and emit output to single file. */
 		"declarationDir": "types",
-		// "outDir": "./dist",                        /* Redirect output structure to the directory. */
-		// "rootDir": "./src",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
-		// "composite": true,                     /* Enable project compilation */
-		// "removeComments": true,                /* Do not emit comments to output. */
-		// "noEmit": true,                        /* Do not emit outputs. */
 		"importHelpers": false,                 /* Import emit helpers from 'tslib'. */
-		// "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
-		// "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
-
-		/* Strict Type-Checking Options */
-		"strict": true,                           /* Enable all strict type-checking options. */
-		// "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
-		// "strictNullChecks": true,              /* Enable strict null checks. */
-		// "strictFunctionTypes": true,           /* Enable strict checking of function types. */
-		// "strictBindCallApply": true,           /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
-		// "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
-		// "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
-		// "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
-
-		/* Additional Checks */
-		// "noUnusedLocals": true,                /* Report errors on unused locals. */
-		// "noUnusedParameters": true,            /* Report errors on unused parameters. */
-		// "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
-		// "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
-
-		/* Module Resolution Options */
-		"moduleResolution": "node",               /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
-		// "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
-		// "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
-		// "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
-		// "typeRoots": [],                       /* List of folders to include type definitions from. */
-		// "types": [],                           /* Type declaration files to be included in compilation. */
-		// "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
-		"esModuleInterop": true                   /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
-		// "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
-
-		/* Source Map Options */
-		// "sourceRoot": "",                      /* Specify the location where debugger should locate TypeScript files instead of source locations. */
-		// "mapRoot": "",                         /* Specify the location where debugger should locate map files instead of generated locations. */
-		// "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
-		// "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
-
-		/* Experimental Options */
-		// "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
-		// "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
 	},
 	"include": [
 		"src/**/*",

vite.config.js

@@ -0,0 +1,30 @@
+import path from 'path'
+import { defineConfig } from 'vite'
+import pkg from './package.json'
+import { objectKeys } from '@dzeio/object-util'
+
+const external = objectKeys(pkg.dependencies)
+
+// https://vitejs.dev/config/
+export default defineConfig({
+	build: {
+		outDir: './',
+		lib: {
+			entry: path.resolve(__dirname, 'src/index.ts'),
+			name: '@dzeio/components',
+			fileName: (format) => `index.${format}.js`
+		},
+		rollupOptions: {
+			// externalize deps that shouldn't be bundled
+			// into your library
+			external: ['react', 'react-dom', 'next', ...external],
+			output: {
+				// Provide global variables to use in the UMD build
+				// for externalized deps
+				globals: {
+					react: 'React'
+				}
+			}
+		}
+	}
+})