@apart-tech/mywork-components NPM

MyWork Components

A comprehensive, accessible component library built with Next.js and shadcn/ui. This library provides a large collection of ready-to-use UI components, layout components, and form elements designed for modern React applications.

Features

🚀 50+ UI Components: Buttons, cards, modals, dropdowns, and more
📱 Responsive Design: Mobile-first approach with a comprehensive breakpoint system
🎨 Customizable Theming: Light/dark mode support with theme customization
♿ Accessibility: ARIA compliant and keyboard navigable components
🔄 Form Components: Complete form solution with validation via react-hook-form and zod
📊 Data Visualization: Tables, charts, and data display components
📦 Tree-shakeable: Only include the components you use
🛠️ TypeScript Support: Full TypeScript definitions for all components

Dependencies

MyWork Components requires the following peer dependencies:

Package	Required Version
React	^18.2.0
React DOM	^18.2.0
Next.js	^14.0.0
Tailwind CSS	^3.3.0

For a complete list of dependencies and setup instructions, please refer to DEPENDENCIES.md.

Installation

This is a private package hosted on npm. To install it, you need to authenticate with npm:

1. Set up authentication

Create a .npmrc file in your project root:

@apart-tech:registry=https://registry.npmjs.org/
//registry.npmjs.org/:_authToken=${NPM_TOKEN}

Replace ${NPM_TOKEN} with your npm token or set the environment variable.

2. Install the package

# Install the latest stable version
npm install @apart-tech/mywork-components

# Or install using yarn
yarn add @apart-tech/mywork-components

# Or install using pnpm
pnpm add @apart-tech/mywork-components

You can also specify an exact version:

npm install @apart-tech/mywork-components@1.0.0

3. Configure Tailwind CSS

Update your tailwind.config.js file to include the paths for MyWork Components:

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    './pages/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}',
    './app/**/*.{ts,tsx}',
    './src/**/*.{ts,tsx}',
    // Add path to MyWork Components
    './node_modules/@apart-tech/mywork-components/dist/**/*.{js,ts,jsx,tsx}'
  ],
  theme: {
    extend: {
      // Your theme extensions
    },
  },
  plugins: [require("tailwindcss-animate")],
}

Quick Start

First, set up Tailwind CSS in your project:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configure your tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    './pages/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}',
    './app/**/*.{ts,tsx}',
    './src/**/*.{ts,tsx}',
    // Add the path to the MyWork Components
    './node_modules/@apart-tech/mywork-components/dist/**/*.{js,ts,jsx,tsx}', 
  ],
  theme: {
    extend: {
      // Your theme extensions
    },
  },
  plugins: [require("tailwindcss-animate")],
}

Import and use the components:

import { Button, Card, ThemeProvider } from '@apart-tech/mywork-components';

export default function MyApp() {
  return (
    <ThemeProvider>
      <Card>
        <h2>Hello World</h2>
        <p>This is a card from MyWork Components</p>
        <Button>Click Me</Button>
      </Card>
    </ThemeProvider>
  );
}

Component Categories

UI Components

Basic UI elements such as buttons, inputs, cards, and more:

import { 
  Button, 
  Card, 
  Input, 
  Checkbox, 
  Select, 
  Tabs 
} from '@apart-tech/mywork-components';

Layout Components

Components for page structure and navigation:

import { 
  AppShell1, 
  Navbar1, 
  Footer1 
} from '@apart-tech/mywork-components';

Form Components

Form controls with validation:

import { 
  Form, 
  FormField, 
  DatePicker, 
  TimePicker, 
  FileUpload 
} from '@apart-tech/mywork-components';

Data Display Components

Components for displaying data:

import { 
  Table, 
  Chart, 
  DataCard 
} from '@apart-tech/mywork-components';

Theming

MyWork Components supports light and dark modes, as well as custom theme configuration:

import { ThemeProvider, ThemeEditor } from '@apart-tech/mywork-components';

export default function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider 
      defaultTheme="light" 
      customTheme={{
        colors: {
          primary: '#0070f3',
          // Other color overrides
        }
      }}
    >
      <Component {...pageProps} />
      
      {/* Optional theme editor for user customization */}
      <ThemeEditor />
    </ThemeProvider>
  );
}

Documentation

For full documentation and examples, visit our documentation site.

Testing

All components have been thoroughly tested for functionality, accessibility, and performance:

# Run tests
npm run test

# Generate coverage report
npm run test:coverage

Development

Building the library

To build the library, run:

npm run build:lib

Publishing a new version

Automatic publishing (recommended)

Update the version in package.json
Create a new release on GitHub
The GitHub Actions workflow will automatically publish the package
- Beta/alpha/rc versions will be published with the "beta" tag
- Stable versions will be published with the "latest" tag

Manual publishing

For beta releases:

npm run build:lib
npm run publish:beta

For stable releases:

npm run build:lib
npm publish

Contributing

We welcome contributions! Please see our contribution guidelines for more details.

License

Proprietary. This software is the exclusive property of Apart Tech.
Use is restricted to platforms and applications built by Apart Tech.
Unauthorized distribution or use is prohibited.

CLI Tool

MyWork Components now includes a CLI tool to help you quickly scaffold new projects and troubleshoot issues. The CLI makes it easy to create new modules that use MyWork Components with proper configuration.

Creating a New Module

# Install globally
npm install -g @apart-tech/mywork-components

# Create a new module
mywork create-module my-new-app

The CLI will guide you through the setup process, creating a fully configured Next.js project with MyWork Components integrated.

For full documentation, see CLI.md.

TypeScript Declarations

Currently, the library includes a simplified TypeScript declaration file (dist/index.d.ts) with basic type definitions for components. To improve the TypeScript experience:

Fix TypeScript errors in components:
- Fix the Grid component in src/components/organisms/grid/index.tsx
- Fix the Tooltip usage in other components
- Fix any type conflicts between similar component names
Enable automated declarations:
- Once TypeScript errors are fixed, update the build command in package.json:
```
"build:lib": "tsup src/index.ts --format cjs,esm --dts --ignore-watch node_modules"
```
Export component prop types:
- Ensure all component prop interfaces are properly exported
- Use export type { ButtonProps } syntax for component props

These improvements will ensure better IDE integration and type safety when using the component library.

Form Components Integration

The component library provides integration with react-hook-form. To use form components:

Install required peer dependencies:
```
npm install react-hook-form@^7.43.0
```
Optional: Install resolver for validation:
```
npm install @hookform/resolvers
```

Import and use Form components:

import { useForm, Form, FormField, FormItem, FormLabel, FormControl, Input, Button } from '@apart-tech/mywork-components';

function MyForm() {
  const form = useForm();
  
  const onSubmit = (data) => {
    console.log(data);
  };
  
  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)}>
        <FormField
          control={form.control}
          name="name"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Name</FormLabel>
              <FormControl>
                <Input {...field} />
              </FormControl>
            </FormItem>
          )}
        />
        <Button type="submit">Submit</Button>
      </form>
    </Form>
  );
}

Troubleshooting Form Integration

If you're encountering issues with the form components:

Version Compatibility: Ensure you're using react-hook-form version 7.43.0 or higher. Lower versions may cause compatibility issues.

Direct Import: If you're experiencing naming conflicts, you can import react-hook-form directly in your application and use it with our form components:

// Import directly from react-hook-form
import { useForm as rhfUseForm } from 'react-hook-form';
// Import our components
import { Form, FormField } from '@apart-tech/mywork-components';

function MyForm() {
  // Use react-hook-form's useForm directly
  const form = rhfUseForm();
  
  return (
    <Form {...form}>
      {/* Rest of your form */}
    </Form>
  );
}

Fallback Mechanism: The library includes compatibility handling to gracefully handle cases where react-hook-form might not be properly available. You might see warnings in your console if the fallback is being used.

Built with Next.js and shadcn/ui.