# axil-shared-components-library2
> ## Getting started
Latest version **0.0.8** (published 2022-07-27) · ISC license · 0 weekly downloads
## Install
```sh
npm install axil-shared-components-library2
pnpm add axil-shared-components-library2
yarn add axil-shared-components-library2
bun add axil-shared-components-library2
```
## Health
**Score 25/100 (F)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities.
Warnings: low downloads; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.0.8 |
| Published | 2022-07-27 |
| First published | 2022-07-27 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 343.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Flogistix |
| Maintainers | khardcastle96 |
## Links
- npm: https://www.npmjs.com/package/axil-shared-components-library2
- npm.io page: https://npm.io/package/axil-shared-components-library2
## Recent versions
- 0.0.8 (latest) — 2022-07-27
- 0.0.7 — 2022-07-27
- 0.0.6 — 2022-07-27
- 0.0.5 — 2022-07-27
- 0.0.41 — 2022-07-27
- 0.0.4 — 2022-07-27
- 0.0.3 — 2022-07-27
- 0.0.2 — 2022-07-27
- 0.0.1 — 2022-07-27
## README
# Axil Shared Components Library
## Getting started
In this directory, first run:
`yarn install`
Once a yarn lock file is generated, then you can write TypeScript components in the `src` directory.
## Writing components
Each component will include an `index.tsx` and a `styles.module.css`.
### index.tsx
This is a standard TS components with one exception.
The styles must be imported like `import cssClasses from "./styles.module.css"`.
Then, you can apply styles like `className={cssClasses['css-className']}`.
## Icons
Notice in the `src` directory, there is a folder called `icons`.
These are components that directly implement SVG's/images to work-around issues with importing them through Rollup.JS.
For example if you want to add an SVG icon, you would make a new Functional Component file in the `icons` directory that looks something like this:
```
export default function SomeIcon() {
return (
);
}
```
Note: You can edit the styles directly SVG in this file directly by adding the `style={{ }}` attribute to the `svg` tag.
Once the SVG component is saved, you can import and use the SVG Component like:
```
import SomeIcon from "../icons/SomeIcon"
export default function ExampleWithIcon() {
return (
Icon Example
;
)
}
```
Once you have added your component to the `src` directory, then make sure you update the `index.ts` file to export it properly.
```
export { default as NewComponent } from './new-component';
export * from './new-component';
```
## Bundling Components
Using `Rollup.JS` (https://rollupjs.org/guide/en/) we are able to bundle files together and publish them to NPM.
In `package.json` there is the script `"build": "rollup -c"`.
This bundles our `src` directory into a compiled `lib` folder.
After running `yarn build`, we can update the version of the package accordingly.
## Publishing Components
First: Make sure you have an NPM account AND are a listed maintainer of the NPM package.
Login in to NPM using `npm login`.
Run `npm publish`.
Note: If you didn't update the version in the package it will fail with an authentication error and cancel publishing.
# How this works
In this directory, you will notice:
Folders: `lib` and `src`,
Package file: `package.json`,
Rollup config: `rollup.config.js`,
TS config: `tsconfig.json`,
### Rollup.JS
In order to use `Rollup.JS`, we need to provide a `rollup.config.js` file.
```
import { nodeResolve } from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from 'rollup-plugin-typescript2';
import postCSS from 'rollup-plugin-postcss';
import pkg from './package.json';
export default {
input: 'src/index.ts',
output: [
{
file: './lib/cjs/index.js',
format: 'cjs',
},
{
file: './lib/esm/index.js',
format: 'es',
},
],
external: [...Object.keys(pkg.peerDependencies || {})],
plugins: [
commonjs(),
typescript({
typescript: require('typescript'),
}),
postCSS({
plugins: [require('autoprefixer')],
}),
nodeResolve(),
],
};
```
This config file takes in our `input` then we can specify the `output` to which Rollup outputs our code as a usable JS module.
Notice we are using dependencies `nodeResolve`, `commonjs`,`typescript`, and `postcss`.
These `plugins` help process various file types, such as `css` and `typescript`, which aren't supported by default.
### TypeScript
In order to properly use TypeScript, our `tsconfig.json` file looks like:
```
{
"compilerOptions": {
"outDir": "lib/esm",
"module": "esnext",
"target": "es5",
"lib": ["es6", "dom", "es2016", "es2017"],
"jsx": "react-jsx",
"declaration": true,
"moduleResolution": "node",
"noUnusedLocals": true,
"noUnusedParameters": true,
"esModuleInterop": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noImplicitAny": true,
"strictNullChecks": true,
"suppressImplicitAnyIndexErrors": true,
"allowSyntheticDefaultImports": true
},
"include": ["src/**/*.ts*"],
"exclude": ["node_modules", "lib"],
}
```
Note: In order to use CSS files, we have to a module to interpret the file.
To solve this we add a `global.d.ts` file to our `src` directory and in it we have:
```
declare module '*.module.css' {
const classes: { readonly [key: string]: string };
export default classes;
}
```
This is where we can also define any other types our library may need.
---
_Source: https://npm.io/package/axil-shared-components-library2 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._