Repository for all Leno projects' shared components

Local Development

To use locally:

1. git clone [email protected]:lenoit/leno-shared-components.git
2. run npm i
3. Navigate to project that will use this package
4. run npm install --save ../path/to/this/repo*
5. Navigate to your tailwind.config.ts (if one isn't present, you can run npx tailwindcss init)
6. Alter your config like this:

import tailwindConfig from "path/to/leno-components";

const config: Config = {
  ...tailwindConfig,
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "/path/to/leno-components/src/**/*.{jsx,tsx,js,ts,config}",
  ],
};

This should allow you to use the tailwind.config provided from the package in your project.

Please note, that this will also allow access to ALL custom styles or animations from the package.

Installing the package normally

1. Navigate to your project's directory
2. run npm i leno-shared-components
3. Start coding!

Publishing the library

1. Open the package directory (leno-shared-components)
2. Change whatever needs changing
3. Open package.json and find the following line ("version": "1.0.1")
4. Increment the version number appropriately:
   • small changes - last number
   • medium changes (component additions, etc) - second last number
   • major changes (big changes to entire design) - first number
5. run npm publish

Using the Button component

Currently the library holds only a button component. To use it in it's most basic variant write:

<Button text={'test'} />

Icons can be added on the left/right side of the button with the iconLeft and iconRight properties. Please Note these properties only take a React.ReactElement so be sure to wrap any SVGs you send in a component

Colors and sizes can be added with the color and size props. Values currently include primary, error, warning, neutral and sm,md,lg,xl respectively.

If anything even more specific is required. A prop called btnClassNames is added. This will allow you to pass and classes (incl. tailwind ones) to the button.