amc-component-library

The AMC component library is a themable repository of simple and complex UI components

Tech Stack

• React,
• Styled Components,
• typescript,

Using The Component Library

• Install the component library.

    npm i amc-component-library
  
    yarn add amc-component-library

• Import the ComponentThemeProvider and wrap it around your app.

    import {ComponentThemeProvider} from "amc-component-library"
    import {Home} from './home'
  
    const App = () => {
      return(
        <ComponentThemeProvider>
        <Home />
        </ComponentThemeProvider>
      )
    }
    export default App

• Optionally Provide your theme object to override the default theme.

    import {ComponentThemeProvider} from "amc-component-library"
    import {Home} from './home'
  
    const theme = {primaryColor: '#f4561e'}
  
    const App = () => {
      return(
        <ComponentThemeProvider theme={theme}>
        <Home />
        </ComponentThemeProvider>
      )
    }
    export default App

• Import Any Other Component & use within the context of the ComponentThemeProvider

    // home.js
    import {Button} from "amc-component-library"
  
    export const Home = () => {
      return(
        <Button onClick={() => console.log('hello world!!!)}>
          click Me
        <Button>
      )
    }

Run The Component Library Locally

Clone the mobile repository via SSH

  [email protected]:Ayu-Digital-Ltd/amc-component-library.git

change to directory

  cd amc-component-library

Install dependencies

  yarn

Start Project

  yarn start

Testing The Component Library Locally

change to directory to the example folder

  cd example

Install dependencies

  yarn

Start Project

  yarn start

App would be running on http://localhost:1234,

Folder Structure

• The main file i.e the file from which the library export from is the src/index.js file on the project root.
• Only use named export through out the project.