Skip to content

aleph-im/front-core

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Jan 24, 2025
90b55c9 · Jan 24, 2025
Feb 21, 2024
Feb 21, 2023
Jan 24, 2025
May 2, 2023
May 2, 2023
Jan 24, 2025
Apr 26, 2023
Feb 13, 2023
Feb 16, 2023
May 9, 2024
Jan 24, 2024
Apr 25, 2023
Feb 26, 2023
Feb 16, 2023
Feb 13, 2023
Jan 24, 2025
Feb 13, 2023
Jan 24, 2025
Jan 24, 2025
May 13, 2024
Jan 7, 2025
May 9, 2024

Repository files navigation

Aleph Cloud frontend core package

Usage

  1. Install Styled Components

    npm i --save-dev styled-components
  2. Set the desired theme

    import { ThemeProvider } from "styled-components";
    import { themes } from "@aleph-front/core";
    
    function App() {
      return (
        <ThemeProvider theme={themes.aleph}>
          <div>...</div>
        <ThemeProvider />
      );
  3. Start using the Components

    import { ThemeProvider } from "styled-components";
    import { themes, Logo } from "@aleph-front/core";
    
    function App() {
      return (
        <ThemeProvider theme={themes.aleph}>
          <Logo text="Node Metrics" />
        </ThemeProvider>
      );
    }

    See all components in the StoryBook

Get started as developer

Set up font awesome in your local environment

Before start, obtain a valid package token and set the env var FONTAWESOME_NPM_AUTH_TOKEN Follow this guide for configuring your local npm config

Known issues and workarounds

  • Using aleph-core with Next.js framework:
    • Problems with css @import syntaxis. You will need to manually import the font-face css from an url via <link> html element, or by creating a font.css that will contain the @import statement and will be imported from the _app.tsx Next.js file
    • Problems with font awesome stylesheet. Follow this guide to solve it: https://fontawesome.com/docs/web/use-with/react/use-with#next-js

We strongly recomend to use styled-components tailwind and twin.macro in your project

Follow this guide: https://github.com/ben-rogerson/twin.examples/tree/master/next-styled-components-typescript#getting-started