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

• React 18
• typescript
• css, css modules
• scss/sass, modules
• less, less modules
• styled-components
• @emotion

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

• Create a new folder inside src > components with your component name. (eg. 'button')
• Inside the newly created folder, create your corrensponding react file.
  (eg. Button.tsx)
  your component code goes there.

• Inside the component folder created previously, create the corresponding .twinklecube.tsx file (eg. Button.twinklecube.tsx)
• Inside this file import the component file
  `import Button from './Button'`
  
• Try our component with whatever the props, types, etc... you have defined.
  you can see an example component 'Chip'.
• Inside the 'twinklecube' folder, in the SideNav component, create a new route for the newly created component
  you may follow the patters
• Inside the 'twinklecube' folder, in the 'Container' component import the new '.twinklecube.tsx' component.
  eg. 'import ButtonTwinklecube from "../../../src/components/button/Button.twinklecube"';
  and expose the component to the route created previously
  you may follow the pattern
• Now you are good to go!!!
  Your component is on the twinklecube dashboard

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,

1. you upload the library to a remote repository (eg. github, bitbucket, etc...) first
2. and then install the ui-library in to any of your intended apps from the remote repository
   eg. `npm install git+https://github.com/your-user-name/your-repo-name.git`

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