component-library-template-alex-bloop

ComponentLibraryTemplate

Creating a new repository

1. Select 'New' to open the UI for creating a repository
2. In 'Repository Template' select this github repository
3. Give the repository a name
4. Select 'Create repository'

Local Setup

1. Clone your new repository to your machine
2. In the root directory run 'yarn'

Repository Contents This repository contains the base code for generating a new NPM component library package.

./src Directory The source directory has two folders:

1. ./components
2. ./styles

./src/components Directory Any new components will need to be added into the ./src/components directory with the following file structure:

1. folder = {componentName}
2. ./{componentName}/{componentName}.stories.ts
3. ./{componentName}/index.tsx
4. {componentName}/style.ts - This is only required if styled-components is used

Inside of the ./components directory is a top level index.ts file. Inside of here, your component should be imported and then exported, allowing applications that use this NPM package to import the component from the package name - e.g `import { componentName } from '@tickd/npm-package-name';

An example component has been added here as a guide.

./src/styles Directory The ./src/styles folder should contain any css files that are to be used within applications. These css files can be imported in the following manor:

1. import '@tickd/npm-package-name/dist/styles/{fileName/directory}';

An example file has been added here as a guide.

Storybook Storybook is a frontend workshop for building UI components and pages in isolation. It is a package that can start it's own UI allowing you to visualise your components as you work on them, avoiding the need to constantly publish and update the package import on a separate project/application.

Story book has been added to this repository to serve as a means of testing components.

Run the following NPM script to start storybook:

1. yarn run storybook

Storybook will open at http://localhost:6006

'Stories' are essentially components. To add a new component into the storybook UI, ensure that the component folder has a 'componentName.stories.tsx' file with the relevant data.