Generic Type Provider

// Get path to resource on disk
 const onDiskPath = vscode.Uri.file( 
   path.join(context.extensionPath, 'css', 'style.css')
);
// And get the special URI to use with the webview
const cssURI = panel.webview.asWebviewUri(onDiskPath);

array.sort((x, y) => +new Date(x.createdAt) - +new Date(y.createdAt));

export function toTitleCase(str: string) {
  return str.toLowerCase().replace(/\b(\w)/g, s => s.toUpperCase());
}

// Example 4051231234 -> (405) 123-1234
export const formatToUSPhoneNumber = (e: React.ChangeEvent<HTMLInputElement>): string => {
  const phoneField = e.target;

  const cursorPosition = phoneField.selectionStart;
  const numericString = phoneField.value.replace(/\D/g, '').substring(0, 10);

  const match = numericString.match(/^(\d{1,3})(\d{0,3})(\d{0,4})$/);

  if (match) {
    let newVal = '(' + match[1];
    newVal += match[2] ? ') ' + match[2] : '';
    newVal += match[3] ? '-' + match[3] : '';

    // to help us put the cursor back in the right place
    const delta = newVal.length - Math.min(phoneField.value.length, 14);
    phoneField.value = newVal;
    if (cursorPosition) {
      phoneField.selectionEnd = cursorPosition + delta;
    }
  } else {
    phoneField.value = '';
  }

  return phoneField.value;
};

module.exports = {
  presets: [["next/babel"]],
  plugins: [["import", { libraryName: "antd", style: true }]],
};

import type { AppProps } from "next/app";
import "styles/variables.less";
import "styles/style.sass";

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

export default MyApp;

@import "~antd/lib/style/themes/default.less";
@import "~antd/dist/antd.less"; // Import Ant Design styles

@primary-color: #10f5e2; // primary color for all components
@link-color: #10f5e2; // link color
@success-color: #60f7ca; // success state color
@warning-color: #faad14; // warning state color
@error-color: #f5222d; // error state color
@font-size-base: 14px; // major text font size
@heading-color: rgba(0, 0, 0, 0.85); // heading text color
@text-color: rgba(0, 0, 0, 0.65); // major text color
@text-color-secondary: rgba(0, 0, 0, 0.45); // secondary text color
@disabled-color: rgba(0, 0, 0, 0.25); // disable state color
@border-radius-base: 2px; // major border radius
@border-color-base: #d9d9d9; // major border color
@box-shadow-base: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
  0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05); // major shadow for layers

/** @type {import('next').NextConfig} */
const withBundleAnalyzer = require("@next/bundle-analyzer")({
  enabled: process.env.ANALYZE === "true",
});

const withAntdLess = require("next-plugin-antd-less");

module.exports = withBundleAnalyzer(
  withAntdLess({
    // Or better still you can specify a path to a file
    lessVarsFilePath: "./styles/variables.less",
    // optional
    lessVarsFilePathAppendToEndOfContent: false,
    // optional https://github.com/webpack-contrib/css-loader#object
    cssLoaderOptions: {},

    // Other Config Here...

    webpack(config) {
      return config;
    },

    // ONLY for Next.js 10, if you use Next.js 11, delete this block
    future: {
      webpack5: true,
    },
    reactStrictMode: true
  })
);

import React from "react";
import { Checkbox } from "antd";

function onChange(checkedValues: any) {
  console.log("checked = ", checkedValues);
}

const ChecboxComponent = () => {
  const plainOptions = ["Apple", "Pear", "Orange"];
  const options = [
    { label: "Apple", value: "Apple" },
    { label: "Pear", value: "Pear" },
    { label: "Orange", value: "Orange" },
  ];
  const optionsWithDisabled = [
    { label: "Apple", value: "Apple" },
    { label: "Pear", value: "Pear" },
    { label: "Orange", value: "Orange", disabled: false },
  ];
  return (
    <>
      <Checkbox.Group
        options={plainOptions}
        defaultValue={["Apple"]}
        onChange={onChange}
      />
      <br />
      <br />
      <Checkbox.Group
        options={options}
        defaultValue={["Pear"]}
        onChange={onChange}
      />
      <br />
      <br />
      <Checkbox.Group
        options={optionsWithDisabled}
        disabled
        defaultValue={["Apple"]}
        onChange={onChange}
      />
    </>
  );
};

export default ChecboxComponent;

import React from 'react'
import { Badge, Space, Switch } from "antd";
import { ClockCircleOutlined } from "@ant-design/icons";


const BadgeComponent = () => {
    const [show, setShow] = React.useState(true);

    return (
      <Space>
        <Switch checked={show} onChange={() => setShow(!show)} />
        <Badge count={show ? 25 : 0} />
        <Badge
          count={
            show ? <ClockCircleOutlined style={{ color: "#f5222d" }} /> : 0
          }
        />
        <Badge
          className="site-badge-count-109"
          count={show ? 109 : 0}
          style={{ backgroundColor: "#52c41a" }}
        />
      </Space>
    );
}

export default BadgeComponent

import React from "react";
import { Button, Tooltip } from "antd";
import { SearchOutlined } from "@ant-design/icons";
const ButtonComponent = () => {
  return (
    <div className="button-container">
      <Tooltip title="search">
        <Button type="primary" shape="circle" icon={<SearchOutlined />} />
      </Tooltip>
      <Button type="primary" shape="circle">
        A
      </Button>
      <Button type="primary" icon={<SearchOutlined />}>
        Search
      </Button>
      <Tooltip title="search">
        <Button shape="circle" icon={<SearchOutlined />} />
      </Tooltip>
      <Button icon={<SearchOutlined />}>Search</Button>
      <br />
      <Tooltip title="search">
        <Button shape="circle" icon={<SearchOutlined />} />
      </Tooltip>
      <Button icon={<SearchOutlined />}>Search</Button>
      <Tooltip title="search">
        <Button type="dashed" shape="circle" icon={<SearchOutlined />} />
      </Tooltip>
      <Button type="dashed" icon={<SearchOutlined />}>
        Search
      </Button>
      <Button icon={<SearchOutlined />} href="https://www.google.com" />
      <br />
      <br />
      <Tooltip title="search">
        <Button
          type="primary"
          shape="circle"
          icon={<SearchOutlined />}
          size="large"
        />
      </Tooltip>
      <Button type="primary" shape="circle" size="large">
        A
      </Button>
      <Button type="primary" icon={<SearchOutlined />} size="large">
        Search
      </Button>
      <Tooltip title="search">
        <Button shape="circle" icon={<SearchOutlined />} size="large" />
      </Tooltip>
      <Button icon={<SearchOutlined />} size="large">
        Search
      </Button>
      <br />
      <Tooltip title="search">
        <Button shape="circle" icon={<SearchOutlined />} size="large" />
      </Tooltip>
      <Button icon={<SearchOutlined />} size="large">
        Search
      </Button>
      <Tooltip title="search">
        <Button
          type="dashed"
          shape="circle"
          icon={<SearchOutlined />}
          size="large"
        />
      </Tooltip>
      <Button type="dashed" icon={<SearchOutlined />} size="large">
        Search
      </Button>
      <Button
        icon={<SearchOutlined />}
        size="large"
        href="https://www.google.com"
      />
    </div>
  );
};

export default ButtonComponent;

import type { NextPage } from "next";
import Head from "next/head";
import { Tabs } from "antd";
import ButtonComponent from "components/ButtonComponent";
import BadgeComponent from "components/BadgeComponent";
import ChecboxComponent from "components/ChecboxComponent";

const Home: NextPage = () => {
  return (
    <div className="container">
      <Head>
        <title>Latihan Antd Custom Varibale</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className="main">
        <Tabs defaultActiveKey="1">
          <Tabs.TabPane tab="Komponen Button" key="1">
            <ButtonComponent />
          </Tabs.TabPane>
          <Tabs.TabPane tab="Komponen Badge" key="2">
            <BadgeComponent />
          </Tabs.TabPane>
          <Tabs.TabPane tab="Komponen Checkbox" key="3">
            <ChecboxComponent />
          </Tabs.TabPane>
        </Tabs>
      </main>
    </div>
  );
};

export default Home;

import '../styles/globals.css'
import type { AppProps } from 'next/app'
import "antd/dist/antd.css";

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

export default MyApp

interface SuperComponentProps {
  test1: {
    a: "1" | "2"
  },
  test2: {
    a: "3" | "4"
  }
  helloworld: {
    b: "4" | "b"
  }
};

function SuperComponent<T extends SuperComponentProps[keyof SuperComponentProps]>(props: T) {
  return <p>test 3</p>;
}

// HOW TO USE
<SuperComponent<SuperComponentProps["test1"]> a="1" />