@nextday-ai/spice-ui

A collection of UI components for NextDay Web and Mobile.

Installation

Before installing, you need to create a GitHub token and export it into your environment variables.

1. Create a GitHub Token: Follow GitHub's guide to create a token.
2. Export the token in your environment:

   export GITHUB_TOKEN=your_github_token

3. Install the package using Yarn:

   yarn add @nextday-ai/spice-ui

Creating a Component

To create a new component, follow these steps:

1. Create the component in the src/components directory.

2. An example of a component is provided in src/components/Button/Button.tsx. You can use this as a reference for creating your own components.

3. Make sure to define the props for your component similar to how it's done in the Button component.

Example

// src/components/Button/Button.tsx

import { ReactNode } from "react";
import { ButtonProps as TButtonProps, Button as TButton } from 'tamagui';
import { Shape, Size, Variant } from '../../types';
import React from "react";

export interface ButtonProps {
  shape?: Shape;
  size?: Size;
  variant?: Variant;
  onPress: () => void;
  children: ReactNode;
  color: string;
}

export const Button = ({
  shape,
  size,
  variant,
  color,
  children,
  ...props
}: ButtonProps): JSX.Element => {
  let componentProps: TButtonProps = {
    fontSize: '14px',
    ...props,
  };

  let componentSize: string = '$3';
  if (size === Size.Small) {
    componentSize = '$2';
  } else if (size === Size.Large) {
    componentSize = '$4';
  }

  let componentBorderRadius: string = '8px';
  if (shape === Shape.Pill) {
    componentBorderRadius = '34px';
  }

  if (variant === Variant.Text) {
    componentProps = {
      ...componentProps,
      chromeless: true,
    };
  }

  if (variant === Variant.Inverse) {
    componentProps = {
      ...componentProps,
      themeInverse: true,
    };
  }

  if (variant === Variant.Outlined) {
    componentProps = {
      ...componentProps,
      borderWidth: '1px',
      variant,
    };
  }
  
  return (
    <TButton
      size={componentSize}
      borderRadius={componentBorderRadius}
      {...componentProps}
      color={color}
      variant={variant}
    >
      {children}
    </TButton>
  );
};

export default Button;

Adding Props

Specify the props for your component as shown in the example above. The Button component takes title, onPress, and an optional disabled prop. Ensure your components have the appropriate type definitions and styles as needed.

Exporting component

After creating the component in src/components, follow the pattern of Button component, and then export your component from the src/index.ts file.