akashdp3 / star-ui Goto Github PK

View Code? Open in Web Editor NEW

3.0 1.0 0.0 7.25 MB

It is a configurable design system with support for multiple themes and custom types

Home Page: https://star-ui.vercel.app/

License: MIT License

JavaScript 50.03% TypeScript 48.34% HTML 1.56% Shell 0.02% CSS 0.04%

star-ui's Introduction

star-ui

This is a design system. Feel free to raise any issue or PR.

Introduction

So star-ui is a monorepo created using yarn workspace. There are 3 packages:

docs
star-ui

docs is documentation for star-ui. It should automatically create documentation from component. Possibly I can use the storybook docs addon directly. I am not sure. The idea is to generate it, not write it manually.
star-ui is the root package in the project. This will contain all components.

Installation

using npm

npm install react-star-ui

or yarn

yarn add react-star-ui

Getting Started

Clone the repo

git clone [email protected]:akkssh/star-ui.git

After that, run the below command in the root directory to install all dependencies across all packages

yarn install

Run the below command to run storybook server and start working:

yarn start-docs

Cheers 🍻

star-ui's People

Contributors

Stargazers

Watchers

star-ui's Issues

Rollup generating empty chunk files

With the configuration now, rollup is generating empty files as chunks. Seems like it is issue with compatibility with typescript

Figure out a basic design for star-ui docs

Add theme-provider configuration for storybook

Provide theme object (which contains all design tokens) to all components.

For now we are only providing colors as tokens.

Alert Component

Create a alert component with following config:

variants:

Error
Warning
Info
Success

This component will show different icons according to the variant and default close button.

Create a npm package for star-ui

Add prop 'align' in stack

Instead of passing align-items as inline style, create a prop for stack

Create a customizable button component with different appearances

No overload matches this call.
Overload 1 of 2, '(props: Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes, HTMLSpanElement>, "slot" | "style" | ... 252 more ... | "is"> & { ...; }, "ref" | ... 254 more ... | "is"> & Partial<...>, "ref" | ... 254 more ... | "is"> & { ...; } & { ...; }): ReactElement<...>', gave the following error.
Type '{ size?: "sm" | "md" | "bg" | undefined; borderColor?: string | undefined; borderLeftColor?: string | undefined; }' has no properties in common with type 'IntrinsicAttributes & Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes, HTMLSpanElement>, "slot" | ... 253 more ... | "is"> & { ...; }, "ref" | ... 254 more ... | "is"> & Partial<...>, "ref" | ... 254 more ... | "is"> & { ...; } & { ...; }'.
Overload 2 of 2, '(props: StyledComponentPropsWithAs<"span", any, {}, never>): ReactElement<StyledComponentPropsWithAs<"span", any, {}, never>, string | ... 1 more ... | (new (props: any) => Component<...>)>', gave the following error.
Type '{ size?: "sm" | "md" | "bg" | undefined; borderColor?: string | undefined; borderLeftColor?: string | undefined; }' has no properties in common with type 'IntrinsicAttributes & Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes, HTMLSpanElement>, "slot" | ... 253 more ... | "is"> & { ...; }, "ref" | ... 254 more ... | "is"> & Partial<...>, "ref" | ... 254 more ... | "is"> & { ...; } & { ...; }'.