npx @twinklecube/create-ui-library ui-library required node version 18.17.0 or higher Here the 'ui-library' is the package/directory name... so, it's your choice This command will create a folder called 'ui-library' and install the project there npx @twinklecube/create-ui-library . This command will install the package in the current directory

npm start This command will start the development server on port 3030

npm run build This command will create the 'dist' folder and put the bundled files there

version 5.3.6 styled-components are installed and ready to use just import as usual and that's it import styled from "styled-components"

install emotion. npm i @emotion/styled then, just import as usual. you are good to go. import styled from @emotion/styled

if you use styled-components or @emotion in this ui-library, please be mindful, that,

if you install the ui-library in another app locally eg: npm i ../ui-library or npm link ui-library

you will get invalid hook call runtime error when you run your app on devServer or when you run your app through the dist folder This seems like a wierd bug... and anyone out there is most welcome to have a look :) npm clone https://github.com/twinklecube/create-ui-library.git

assets are copied in to the dist folder and NOT base64 encoded

Following formats are supported Image formats: jpg, jpeg, svg, png, gif, webp Font formats: woff2, woff, eot, ttf, otf

Step 1: open webpack.config.js which is located in the root folder Step 2: find test: /\.(jpg|jpeg|png|gif|svg|webp|woff|woff2|eot|ttf|otf)$/i Step 4: include the new file/format extension in this list seperated by a pipe character Step 5: open rollup.config.js which is located in the root folder Step 6: find include : [ '**/*.svg', '**/*.png', '**/*.jp(e)?g', '**/*.gif', '**/*.webp', '**/*.woff2', '**/*.woff', '**/*.ttf', '**/*.otf', '**/*.eot' ] Step 7: include the new file/format extension in this array seperated by a comma. eg '**/*.your-file-extension' Step 5: open module.d.ts which is located in the src folder Step 6: add declare module *.your-file-extension; at the end of the file.

when this project is built, assets(images/fonts) are copied in to the dist folder. in your app, you have to copy these assets in to the build folder (eg. dist folder) of the app in order to be referenced and served correctly for example you can do the following in your webpack config file

const CopyPlugin = require('copy-webpack-plugin');

module.exports = {

plugins: [
    new CopyPlugin({
        patterns: [
            {
                from: path.resolve(__dirname, 'node_modules', '<your-ui-library>', 'dist', 'esm', 'images'),
                to: path.join(__dirname, 'dist', 'images'),
                noErrorOnMissing: true
            },
            {
                from: path.resolve(__dirname, 'node_modules', <your-ui-library>', 'dist', 'esm', 'fonts'),
                to: path.join(__dirname, 'dist', 'fonts'),
                noErrorOnMissing: true
            }
        ]
    })
]

}

please be good enough to inform us about any bugs https://github.com/twinklecube/create-ui-library/issues