@devkitlab/create-devkitlab-nextjs 0.1.3

package/template/src/components/button/index.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import { cn } from '@/utils/class-merge';
+import { TERipple } from 'tw-elements-react';
+import type { IButtonProps } from './interface';
+
+export default function Button({
+  children,
+  className,
+  size = 'md',
+  variant = 'primary',
+  disabled = false,
+  ...rest
+}: IButtonProps) {
+  return (
+    <TERipple>
+      <button
+        className={cn(
+          {
+            'py-3 px-5 text-lg': size === 'lg',
+            'py-2 px-4': size === 'md',
+            'py-1.5 px-3 text-sm': size === 'sm',
+          },
+          {
+            'bg-primary': variant === 'primary',
+            'bg-primary-light': variant === 'secondary',
+            'bg-transparent border': variant === 'transparent',
+          },
+          disabled ? 'disabled:cursor-not-allowed' : 'hover:shadow-md',
+          'flex items-center gap-2 rounded transition-all dark:bg-primary',
+          className
+        )}
+        disabled={disabled}
+        {...rest}
+      >
+        {children}
+      </button>
+    </TERipple>
+  );
+}
+
+Button.displayName = 'Button';

package/template/src/components/button/interface.ts

@@ -0,0 +1,6 @@
+import type { ButtonHTMLAttributes, PropsWithChildren } from 'react';
+
+export interface IButtonProps extends PropsWithChildren, ButtonHTMLAttributes<HTMLButtonElement> {
+  size?: 'lg' | 'md' | 'sm';
+  variant?: 'primary' | 'secondary' | 'transparent';
+}

package/template/src/components/container/index.tsx

@@ -0,0 +1,13 @@
+import { cn } from '@/utils/class-merge';
+import { forwardRef } from 'react';
+import type { IContainerProps } from './interface';
+
+const Container = forwardRef<HTMLDivElement, IContainerProps>(({ children, className }, ref) => (
+  <div ref={ref} className={cn('container', className)}>
+    {children}
+  </div>
+));
+
+Container.displayName = 'Container';
+
+export default Container;

package/template/src/components/container/interface.ts

@@ -0,0 +1,6 @@
+import type { ClassValue } from 'clsx';
+import type { PropsWithChildren } from 'react';
+
+export interface IContainerProps extends PropsWithChildren {
+  className?: ClassValue;
+}

package/template/src/components/icon-store/arrow-icons.tsx

@@ -0,0 +1,19 @@
+export function ArrowRightLong() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="1em"
+      width="1em"
+      viewBox="0 0 24 24"
+      fill="none"
+      strokeWidth={1.5}
+      stroke="currentColor"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3"
+      />
+    </svg>
+  );
+}

package/template/src/components/icon-store/index.tsx

@@ -0,0 +1,26 @@
+import { cn } from '@/utils/class-merge';
+import { ArrowRightLong } from './arrow-icons';
+import type { IIconProps } from './interface';
+import { MoonIcon, SunIcon } from './weather-icons';
+
+function IconStore({ name }: Pick<IIconProps, 'name'>) {
+  switch (name) {
+    // arrow icons
+    case 'arrow-right-long':
+      return <ArrowRightLong />;
+
+    // weather icons
+    case 'sun':
+      return <SunIcon />;
+    case 'moon':
+      return <MoonIcon />;
+  }
+}
+
+export default function Icon({ name, className, ...rest }: IIconProps) {
+  return (
+    <span className={cn(className)} {...rest}>
+      <IconStore name={name} />
+    </span>
+  );
+}

package/template/src/components/icon-store/interface.ts

@@ -0,0 +1,10 @@
+import type { ClassValue } from 'clsx';
+
+export type ArrowIcons = 'arrow-right-long' | 'arrow-left-long';
+export type WeatherIcons = 'moon' | 'sun';
+
+export interface IIconProps {
+  name: ArrowIcons | WeatherIcons;
+  className?: ClassValue;
+  onClick?: () => void;
+}

package/template/src/components/icon-store/weather-icons.tsx

@@ -0,0 +1,45 @@
+export function SunIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <circle cx="12" cy="12" r="4" />
+      <path d="M12 2v2" />
+      <path d="M12 20v2" />
+      <path d="m4.93 4.93 1.41 1.41" />
+      <path d="m17.66 17.66 1.41 1.41" />
+      <path d="M2 12h2" />
+      <path d="M20 12h2" />
+      <path d="m6.34 17.66-1.41 1.41" />
+      <path d="m19.07 4.93-1.41 1.41" />
+    </svg>
+  );
+}
+
+export function MoonIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9" />
+      <path d="M20 3v4" />
+      <path d="M22 5h-4" />
+    </svg>
+  );
+}

package/template/src/components/loader/index.tsx

@@ -0,0 +1,20 @@
+import { cn } from '@/utils/class-merge';
+import type { ILoadingState } from './interface';
+
+export default function Loader({ viewport }: ILoadingState) {
+  return (
+    <section
+      className={cn(
+        'flex items-center justify-center relative py-10 h-full flex-grow',
+        viewport && 'h-screen absolute inset-0'
+      )}
+    >
+      <span className="relative flex h-10 w-10">
+        <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
+        <span className="relative inline-flex rounded-full h-full w-full bg-primary"></span>
+      </span>
+    </section>
+  );
+}
+
+Loader.displayName = 'Loader';

package/template/src/components/loader/interface.ts

@@ -0,0 +1,3 @@
+export interface ILoadingState {
+  viewport?: boolean;
+}

package/template/src/components/typography/index.tsx

@@ -0,0 +1,10 @@
+import { cn } from '@/utils/class-merge';
+import type ITypography from './interface';
+
+export default function Typography({ children, variant = 'p', className }: ITypography) {
+  const Wrapper = variant;
+
+  return <Wrapper className={cn(className)}>{children}</Wrapper>;
+}
+
+Typography.displayName = 'Typography';

package/template/src/components/typography/interface.ts

@@ -0,0 +1,13 @@
+import type { ClassValue } from 'clsx';
+import type { PropsWithChildren } from 'react';
+
+// the possible heading, paragraph, and other sizes.
+type Heading = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+type Paragraph = 'p';
+
+interface ITypography extends PropsWithChildren {
+  variant?: Heading | Paragraph | 'span';
+  className?: ClassValue;
+}
+
+export default ITypography;

package/template/src/utils/class-merge.ts

@@ -0,0 +1,4 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs));

package/template/tailwind.config.ts

@@ -0,0 +1,52 @@
+import type { Config } from 'tailwindcss';
+
+const config: Config = {
+  darkMode: 'class',
+  content: [
+    './src/**/*.{js,ts,jsx,tsx,mdx}',
+    './app/**/*.{js,ts,jsx,tsx,mdx}',
+    './node_modules/tw-elements-react/dist/js/**/*.js',
+  ],
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          DEFAULT: '#ff4733',
+          light: '#ffada2',
+          lighter: '#ffc6bf',
+        },
+
+        white: {
+          DEFAULT: '#EEEEEE',
+          deep: '#ffffff',
+          light: '#edf6f9',
+        },
+
+        dark: {
+          DEFAULT: '#26282B',
+          deep: '#1e1e1e',
+          light: '#363B4E',
+        },
+
+        gray: {
+          DEFAULT: '#555555',
+          deep: '#404040',
+          light: '#999999',
+        },
+      },
+      fontFamily: {
+        heading: ['"Averia Serif Libre"', 'serif'],
+        body: ['"Roboto Slab"', 'Roboto', 'serif'],
+      },
+      container: {
+        center: true,
+        screens: {
+          sm: '100%',
+          '2xl': '1280px',
+        },
+      },
+    },
+  },
+  plugins: [require('tw-elements-react/dist/plugin.cjs')],
+};
+export default config;

package/template/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [{ "name": "next" }],
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "target": "ES2017"
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}