diff --git a/.gitignore b/.gitignore index 153a0df..ef36911 100644 --- a/.gitignore +++ b/.gitignore @@ -6,6 +6,8 @@ node_modules # builds build dist +dist-ssr +*.local .rpt2_cache # misc diff --git a/DEVELOPMENT.md b/DEVELOPMENT.md index cf602df..6ece8aa 100644 --- a/DEVELOPMENT.md +++ b/DEVELOPMENT.md @@ -4,129 +4,72 @@ `npm install` -`npm install -g typescript` if you have never install TS - -`npm run build` +`npm run dev` There are a few ways of making new components for Indigo. Let's cover some of the core patterns. ## Component Patterns -### Single Element Component with dynamic properties - -Creating a basic theme-aware component with dynamic properties from scratch. +Creating a basic component with dynamic properties that alter styling from scratch. ```tsx -import styled from "styled-components"; -import css, { SystemStyleObject } from "@styled-system/css"; -// commonStyle includes all commonly used styled-system props -import { commonStyle, CommonStyleProps } from "./system/unions"; - -// Define property types and export typing -export type LabelProps = CommonStyleProps & { - gray?: boolean; - bold?: boolean; - mono?: boolean; -}; +import React, { FC } from "react"; +import classNames from "classnames"; -// First, a we create a style object. Then, we pass it to css(), whcih converts values like fontSize:0 to fontSize:'12px'. The conversion is based on the theme. Css() returns a function that can be passed to styled.foo() as a StyleFn, like border, color, and flexbox imported from styled-system. This method is convinient because you don't have to pass the theme as a prop and write a bunch of template string functions for each dynamic property. We also assign prop defaults in the argument field. -const style = ({ gray = false, bold = false, mono = false }: LabelProps) => - css({ - fontWeight: bold ? "bold" : "regular", - color: gray ? "gray" : "black", - fontFamily: mono ? "mono" : "sans", - display: "block", - lineHeight: "short", - fontSize: 1, - pointerEvents: "none", - userSelect: "none", - verticalAlign: "middle", - width: "100%", - } as SystemStyleObject); - -// Here, we define out component. Because we want this component to use an HTML