Introduction

Component development environment.

View built on 'next.js', exports handled with 'rollup.js'

Installation

npm install

Run

npm run dev:        Starts dev env on 'localhost:3500'
npm run build:      Builds next static site to folder './out'
npm run build-lib:  Rollup compiles './components' to './dist'

Motivation & Manifest

This program is built by a junior front-end web dev for consumption in various applications ranging from cms to web based interfaces. It comprises both view, presentation, simple & advanced components. This library will be built into .tsx with time but is for now written in .js format.

'Component design' - manifest

All components shall:

• K I S S
• Be able to render monochromatically following currentColor convention
• Documented clearly with example on lib.chansen.design

List of components

| name | type | | | --------- | ------------ | --- | | Button | presentation | | | Hamburger | presentation | | | Logo | presentation | |

Explicit details and preview examples can be found on : https://lib.chansen.design

Folder Structure

Exporting Components:

//Target for rollup

file: '~/components/index.js';

export * from './Foo';
export * from './Bar';

file: '~/components/Foo/index.js';

export * from './Foo';

file: '~/components/Foo/Foo.js';

export const Foo = () => {
  return (
    <div>
      <h4>foo</h4>
    </div>
  );
};

Importing Components

import { Foo, Bar } from '~/components';

//or

import { Foo, Bar } from 'chansencode-lib';