techtenum-component-lib
v0.3.7
Published
Downloads
113
Readme
Techtenum component Library
Installation.
npm i techtenum-component-lib
Installs the library and necessary dependencies to the project
To use the components, import them from the library:
import { Button } from 'techtenum-component-lib';
export const MyComponent = ({message}) => {
return (
<div>
<Button label={message} styling={{color: "crimson",height: "auto"}} />
// the styling prop is optional
</div>
)
}
Commands
npm install
This installs the library dependencies as per the package.json file
npm run storybook
Runs the storybook server and opens the storybook on localhost:6006
npm run compile
Does a clean install, removes the current ./dist output folder, compiles the library using babel then spits the results in a ./dist folder in the root directory at the topmost level.
{
"clean": "rimraf dist",
"compile": "npm run clean && tsc || echo 'tsc' && cross-env NODE_ENV=production babel src/ --out-dir dist --copy-files --ignore __tests__,spec.js,test.js,stories.js,__snapshots__"
}
npm publish
Publishes to npm. Ready for installation and use ;)
Folder Structure
The ./src folder contains all the source code to the library. React Components for the library are found in ./src/components
- Each Component is assigned a folder named the component's title e.g for the button component, a folder named Button in ./src/components/Button
- In each component folder there is a:
- [ComponentName].js file --> the react component itself
- [ComponentName].stories.js file --> Setup for rendering the component in Storybook
- /stylesheet/[componentName].sass || .css --> styling
Make sure to export components in the ./src/components/index.js file then export [again] from the main entry point ./src/index.js
- All React Contexts should go to the ./contexts folder:
- Create a folder for each context e.g ./[ContextName]Ctx
- Contexts should be named in the following format ending with Ctx, [ContextName]Ctx.js
- All Hooks be kept in the ./src/hooks folder:
- Create a folder for each hook e.g ./use[HookName]
- Hook files should be named in the following format starting with use, use[HookName].js
- All Context Providers go to the ./src/providers folder:
- Create a folder for each folder e.g ./[ContextName]Provider
- Providers should be named in the following format ending with Provider, [ProviderName]Provider.js
Remember to export the contexts, hooks, providers from the respective root folder index.js, then export from the main root folder [main entry point] index.js
WorkFlow
--** Adding Components **--
For a button component,
Create the component:
import React from 'react';
import PropTypes from 'prop-types';
import './stylesheets/button.css';
export const Button = ({label, styling}) => {
return (
<button style={styling}>{label}</button>
)
}
Button.propTypes = {
label: PropTypes.string,
}
Then create the story for the component in order to configure it for rendering in Storybook;
import React from "react";
import { Button } from "./Button";
// Defines Metadata for the component including the component itself, its title (where it will show up in the navigation UI story hierarchy), decorators, and parameters.
export default {
title: 'Components/Button',
component: Button,
argTypes: {
label: {
type: 'string',
required: false
}
}
}
// component render
// you can pass in the props directly e.g
const Template = (args) => <Button label="hello" styling={{height: "100px", width: "400px"}} />
// Or you can pass down the props for the component through the Template function arguments this is recommended if there is need for various states of a component based on different arguments for example:
// this is a Template for the Button Component
const Template = (args) => <Button {...args} />
// Based on the template, the button can appear as default for example:
export const Default = Template.bind({});
// Or it can appear as primary for example:
export const Primary = Template.bind({});
// this defines the arguments/ parameters for rendering the component or the different states of the component e.g:
// for the default button:
Default.args = {
label: "Hello",
styling: {
height: "100px",
width: "400px"
}
}
// for the Primary Button:
Primary.args = {
label: "I'm Primary!!",
styling: {
height: "50px",
background: "black",
width: "100px"
}
}
Add some styling to the components in the stylesheets folders of the respective components.
Then export the button from the components root index.js file in ./src/components/index.js:
export { Button } from './Button/Button';
Then in the main entry point ./src/index.js under the //components comment export the button from the components entry point:
// Components
export { Button } from './components';
Conclusion
Good Luck *** work in progress ***