Wishket Design System

Wishket Design System (WDS) is the design concept system for Wishket products.

Features

• Steady Components. Frequently used Components based on the Atomic Design Pattern.
• Storybook. You can explore the components in Storybook.

Getting Started

1. Install

Choose according to your environment.

yarn add @wishket/design-system

npm install @wishket/design-system

pnpm add @wishket/design-system

2. Default Setting in tailwind.config.ts

// tailwind.config.ts
import path from 'path';
import type { Config } from 'tailwindcss';

const config: Config = {
  content: [
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
    path.join(path.dirname(require.resolve('@wishket/design-system')), '**/*.{js,ts,jsx,tsx,mdx}'),
  ],
  presets: [require('@wishket/design-system/config')],
  plugins: [],
};

export default config;

Usage

//Home.tsx
import { Typography } from '@wishket/design-system';

export const Home  = () => {
  return (
      <Typography variant="title1" className='bg-w-cyan-500'>Hello, World!</Typography>
  );
}

export default Home;

Customize Theme in Config File

// tailwind.config.ts
import path from 'path';
import type { Config } from 'tailwindcss';
import colors from '@wishket/design-system/colors';

const config: Config = {
  // default config
  theme: {
    colors: {
      primary: colors.w_primary,
    },
  },
};

export default config;

Troubleshooting Color Imports

If you're having trouble importing colors from '@wishket/design-system/colors', please verify your TypeScript configuration:

• Verify TypeScript version 5.0 or later
• Check your tsconfig.json settings:

  {
    "compilerOptions": {
      "moduleResolution": "bundler",
      "module": "ESNext"
    }
  }