Naughty Programmer's Madness

    @cabindao/topo
    TypeScript icon, indicating that this package has built-in type declarations

    0.8.5 • Public • Published

    Topo

    to·pog·ra·phy

    /təˈpäɡrəfē/

    noun
    the arrangement of the natural and artificial physical features of an area.
    "the topography of the island"

    Quick Links

    Topo: The CabinDAO Design System

    Welcome to Topo, CabinDAO's internal design system. We use this collection of libraries and tools to build high-quality interfaces while maintaining brand consistency and uniformity.

    The Topo theming is built on top of Stitches and includes all the primitives for the CabinDAO visual identity. Topo Components is our library of pre-built UI components using Storybook.

    Contributing

    This project is open source and we would love for you to contribute to it. In our discord server, there is a channel dedicated to discussing this product. Progress, milestones, and on-going initiatives are tracked on our Bounty board in Clarity.

    If you would like to contribute, start by reading the Contribution Guide and the Code of Conduct . Open issues can be found in this repository.

    Setup: Getting Started

    Follow these instructions to setup and use Topo in a Next.js project.

    1. Install Topo:
    yarn add @cabindao/topo
    1. Set up server-side rendering:
    // _document.tsx
    import React from "react";
    import NextDocument, { Html, Head, Main, NextScript } from "next/document";
    import { getCssText } from "@cabindao/topo";
    
    export default class Document extends NextDocument {
      render() {
        return (
          <Html lang="en">
            <Head>
              <style
                id="stitches"
                // https://stitches.dev/docs/server-side-rendering
                dangerouslySetInnerHTML={{ __html: getCssText() }}
              />
            </Head>
            <body>
              <Main />
              <NextScript />
            </body>
          </Html>
        );
      }
    }
    1. Set up global css:
    // _app.tsx
    import { globalCss } from "@cabindao/topo";
    import type { AppProps } from "next/app";
    
    const globalStyles = globalCss({
      body: {
        backgroundColor: "$sand",
      },
      "html, body": {
        padding: 0,
        margin: 0,
        fontFamily: "$sans",
      },
      a: {
        color: "inherit",
        textDecoration: "none",
      },
      "*": {
        boxSizing: "border-box",
      },
        <ClerkProvider>
    });
    
    function MyApp({ Component, pageProps }: AppProps) {
      globalStyles();
      return (
        <Component {...pageProps} />
      );
    }

    You should be good to go now. You can install components from Topo or Stitches into your project.

    Contributing

    1. Fork the Topo repository into your Github account.
    2. Clone the forked repo to your local system.
    3. Navigate to the newly created project directory.
    4. yarn or npm i will install the Topo package's dependencies.
    5. yarn storybook will run Storybook locally so that you could interact with our components directly.

    Cabin is a digitally-native organization (often called a DAO) building a decentralized city by creators, for creators. You can learn more about us by visiting our website or joining our Discord server.

    We look forward to creating with you!

    Keywords

    none

    Install

    npm i @cabindao/topo

    DownloadsWeekly Downloads

    23

    Version

    0.8.5

    License

    MIT

    Unpacked Size

    1.41 MB

    Total Files

    109

    Last publish

    Collaborators

    • dvargas92495