@commonfate/design NPM

Design

This repo contains Common Fate's design system and component library Our component library is built off Chakra (components and theming system).

The library is rendered in storybook, with links to the original Figma spec

Publishing changes

If you have made changes to components in the component library, you can push these live

Bump the version number, by editting package.json
```
    "version": "0.1.0", # 👈 bump this 
```
Run yarn publish, or npm publish

Installing the component library

If you want to use the react component library on your own project run the following

Download the package from github
```
yarn add @commonfate/design
```
To fetch a specific release you can append an ampersand followed by the verision number i.e. yarn add @common-fate/design@0.1.0
Install peer dependencies
- The component library requires your own installlation of Chakra to function correctly
- This grants some flexibility in package versions and allows the package to ship smaller
- Follow the latest chakra install instructions or run this current step
```
yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^5
```

Add a chakra provider component to base of your react project add import the custome theme

import { ChakraProvider } from '@chakra-ui/react';
import { theme } from '@common-fate/design';

// ...

return (
    <ChakraProvider theme={theme}>
    //...
    </Chakraprovider>
  )
}

Add other dependencies

This project uses fonts from google, add these link tags to your index.html

<head>
<link

    rel="preconnect"
    href="https://fonts.gstatic.com"
    crossOrigin={true}
/>
<link
    href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,300;0,400;0,500;0,700;1,400;1,500;1,700&family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap"
    rel="stylesheet"
/>
</head>

Deploying a project with the library

To deploy a react app using our design library, the Deployment infra will also need to be authorized to download the project. To achieve this you will have to add an npm.rc file. You will first need to obtain a Personal Access Token from your github account (choose read:packages for minimum access)

registry=https://registry.npmjs.org/
@common-fate:registry=https://npm.pkg.github.com/
//npm.pkg.github.com/:_authToken=ghp_REPLACE_ME

Running Storybook

yarn storybook

@everything-registry/sub-chunk-190 @infinitebrahmanuniverse/nolb-_comm

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago