https://github.com/froggy-app/lilypad
A modern and responsive component library built for froggy
https://github.com/froggy-app/lilypad
component-library componentlibrary react reactjs storybook typescript
Last synced: 3 months ago
JSON representation
A modern and responsive component library built for froggy
- Host: GitHub
- URL: https://github.com/froggy-app/lilypad
- Owner: froggy-app
- Created: 2022-11-03T23:25:01.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-04-12T22:01:42.000Z (about 3 years ago)
- Last Synced: 2025-03-20T08:08:44.230Z (over 1 year ago)
- Topics: component-library, componentlibrary, react, reactjs, storybook, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@froggy-app/lilypad
- Size: 1020 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# 🪷 lilypad
A modern and responsive component library built for froggy 🐸.
## How to install
> Requires Node 18
npm
```
npm i @froggy-app/lilypad
```
yarn
```
yarn add @froggy-app/lilypad
```
## Development
### First time setup
Request to be added to the
[npm package](https://www.npmjs.com/package/@froggy-app/lilypad).
Clone this repository and cd into it. Log in to npm using the following command.
```
npm login scope=@froggy-app
```
### Publishing
Before publishing, make sure to increment the version in `package.json`. Then,
build the package and publish it to npm.
```
npm run build
npm publish
```
### Using Storybook
Storybook is a great way to preview components. You can run storybook using the
following command.
```
npm run storybook
```
To create a new story, create a new file using the naming convention:
`ComponentName.stories.tsx` in the same directory as your component. Add the
following storie template to get started:
```
import ComponentName from './ComponentName';
import {ComponentStory, ComponentMeta} from '@storybook/react';
import React from 'react';
export default {
title: 'lilypad/ComponentName',
component: ComponentName,
} as ComponentMeta;
const Template: ComponentStory = (args) => ;
export const ComponentNameDefault = Template.bind({});
ComponentNameDefault.args = {
componentArg: 'lorem ipsum',
};
```
You can replace `ComponentName` with the name of your component.