@dmsierra11/ui-library

This project is a reusable component library designed for React applications. It provides styled components that can be easily integrated into any React project.

Features

Reusable React Components: Includes components like Button which are customizable and reusable across projects.
TypeScript Support: Fully supports TypeScript for type-safe code.
Customizable Styling: Uses CSS modules for component styling, allowing easy theming and customization.

Installation

To install the library, you can use npm or yarn:

npm install @dmsierra11/ui-library
# or
yarn add @dmsierra11/ui-library

Usage

Here's a quick example to get you started with using the Button component from the library:

import React from 'react';
import { Button } from '@dmsierra11/ui-library';

const App = () => {
  return (
    <Button label="Click Me" onClick={() => alert("Button Clicked!")} />
  );
};

export default App;

Development

This project uses Webpack for bundling modules and Babel for transpiling JavaScript. The main entry point is src/index.ts.

Building the Project

To build the project, run:

npm run build

This command uses Webpack to bundle the components into dist/bundle.js.

Configuration Files

Webpack Configuration: webpack.config.js
Babel Configuration: .babelrc
TypeScript Configuration: tsconfig.json

Storybook Integration

This project is configured to use Storybook, which helps you build UI components in isolation and offers tools to enhance frontend development.

Running Storybook

To run Storybook locally and explore the components, use the following command:

npm run storybook

This will start Storybook on http://localhost:6006 where you can view and interact with your component library.

Building Storybook

To build a static version of Storybook, which can be deployed or shared, run:

npm run build-storybook

This command will generate a static web application in your storybook-static directory that you can deploy to a static hosting service.

Learn More

For more detailed information on using and configuring Storybook, visit the Storybook documentation.

Publishing a New Version

To publish a new version of the library, follow these steps:

Update the version: Update the version number in package.json according to semantic versioning.
Build the project: Run npm run build to ensure the latest changes are compiled.
Publish: Run npm publish to publish the package to npm. Ensure you are logged in to npm with the account that has access to the @dmsierra11 scope.
Tag the release: After publishing, tag the commit with the new version number and push the tags to the repository.
```
git tag v1.0.1
git push --tags
```
Update documentation: Ensure the README and any other relevant documentation are updated to reflect the changes in the new version.

Contributing

Contributions are welcome! Please feel free to submit a pull request or open an issue.

License

This project is licensed under the MIT License - see the LICENSE file for details.

dmsierra11 / my-ui-library

readme