@esic-lab/data-core-ui 0.0.2 → 0.0.4

package/src/Switch/Switch/Switch.tsx

@@ -1,25 +0,0 @@
-interface SwitchProps {
-  label?: string;
-  checked: boolean;
-  onChange: (checked: boolean) => void;
-}
-
-//TODO: CONFIRM DESIGN
-export function Switch({ label, checked, onChange }: SwitchProps) {
-  return (
-    <div className="flex items-center gap-[10px]">
-      {label && <p>{label}</p>}
-      <button
-        type="button"
-        onClick={() => onChange(!checked)}
-        className={`w-13 h-7 flex items-center rounded-full p-1 transition-colors duration-300 cursor-pointer 
-        ${checked ? "bg-blue-500" : "bg-gray-300"}`}
-      >
-        <div
-          className={`bg-white w-5 h-5 rounded-full shadow-md transform transition-transform duration-300 
-        ${checked ? "translate-x-6" : "translate-x-0"}`}
-        />
-      </button>
-    </div>
-  );
-}

package/src/index.css

@@ -1,260 +0,0 @@
-@import "tailwindcss";
-
-@import url("https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
-
-/*
-  The default border color has changed to `currentcolor` in Tailwind CSS v4,
-  so we've added these compatibility styles to make sure everything still
-  looks the same as it did with Tailwind CSS v3.
-
-  If we ever want to remove these styles, we need to add an explicit border
-  color utility to any element that depends on these defaults.
-*/
-
-@layer base {
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: var(--color-gray-200, currentcolor);
-  }
-}
-
-@theme {
-  --spacing: 0.25rem;
-
-  /* Primary */
-  --color-primary-900: #212967;
-  --color-primary-800: #2b3587;
-  --color-primary-700: #3745af;
-  --color-primary-600: #4758e0;
-  --color-primary-500: #4e61f6;
-  --color-primary-400: #7181f8;
-  --color-primary-300: #8895f9;
-  --color-primary-200: #aeb6fb;
-  --color-primary-100: #c8cefc;
-  --color-primary-50: #edeffe;
-
-  /* Grey */
-  --color-gray-900: #131927;
-  --color-gray-800: #212936;
-  --color-gray-700: #394050;
-  --color-gray-600: #4d5461;
-  --color-gray-500: #6d717f;
-  --color-gray-400: #9ea2ae;
-  --color-gray-300: #d2d5db;
-  --color-gray-200: #e5e7ea;
-  --color-gray-100: #f3f4f6;
-  --color-gray-50: #f9fafb;
-
-  /* Green / Success */
-  --color-green-900: #1c4d27;
-  --color-green-800: #256533;
-  --color-green-700: #308242;
-  --color-green-600: #3da755;
-  --color-green-500: #43b75d;
-  --color-green-400: #69c57d;
-  --color-green-300: #81cf92;
-  --color-green-200: #a9deb4;
-  --color-green-100: #c5e9cd;
-  --color-green-50: #ecf8ef;
-
-  /* Red / Danger */
-  --color-red-900: #641d1a;
-  --color-red-800: #832523;
-  --color-red-700: #a9302d;
-  --color-red-600: #d93e39;
-  --color-red-500: #ee443f;
-  --color-red-400: #f16965;
-  --color-red-300: #f4827e;
-  --color-red-200: #f7a9a7;
-  --color-red-100: #fac5c3;
-  --color-red-50: #fdecec;
-
-  /* Yellow / Warning */
-  --color-yellow-900: #6b4700;
-  --color-yellow-800: #8c5e00;
-  --color-yellow-700: #b57900;
-  --color-yellow-600: #e89b00;
-  --color-yellow-500: #ffaa00;
-  --color-yellow-400: #ffbb33;
-  --color-yellow-300: #ffc654;
-  --color-yellow-200: #ffd88a;
-  --color-yellow-100: #ffe5b0;
-  --color-yellow-50: #fff7e6;
-
-  /* Blue / Info */
-  --color-blue-900: #003f6b;
-  --color-blue-800: #00528c;
-  --color-blue-700: #006ab5;
-  --color-blue-600: #0088e8;
-  --color-blue-500: #0095ff;
-  --color-blue-400: #33aaff;
-  --color-blue-300: #54b8ff;
-  --color-blue-200: #8aceff;
-  --color-blue-100: #b0deff;
-  --color-blue-50: #e6f4ff;
-}
-
-/* SYSTEM FONTS */
-
-.headline-1 {
-  font-family: "Kanit";
-  font-size: 48px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 58px;
-}
-
-.headline-2 {
-  font-family: "Kanit";
-  font-size: 40px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 48px;
-}
-
-.headline-3 {
-  font-family: "Kanit";
-  font-size: 32px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 38px;
-}
-
-.headline-4 {
-  font-family: "Kanit";
-  font-size: 28px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 34px;
-}
-
-.headline-5 {
-  font-family: "Kanit";
-  font-size: 24px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 28px;
-}
-
-.subtitle-1 {
-  font-family: "Kanit";
-  font-size: 18px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 28px;
-}
-
-.subtitle-2 {
-  font-family: "Kanit";
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 24px;
-}
-
-.body-1 {
-  font-family: "Kanit";
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 24px;
-}
-
-.body-2 {
-  font-family: "Kanit";
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 24px;
-}
-
-.body-3 {
-  font-family: "Kanit";
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 20px;
-}
-
-.body-4 {
-  font-family: "Kanit";
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 20px;
-}
-
-.caption-1 {
-  font-family: "Kanit";
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 16px;
-}
-
-.caption-2 {
-  font-family: "Kanit";
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 16px;
-}
-
-.caption-3 {
-  font-family: "Kanit";
-  font-size: 10px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 14px;
-}
-
-.label {
-  font-family: "Kanit";
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 16px;
-}
-
-.btn-giant {
-  font-family: "Kanit";
-  font-size: 18px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 24px;
-}
-
-.btn-large {
-  font-family: "Kanit";
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 20px;
-}
-
-.btn-medium {
-  font-family: "Kanit";
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 16px;
-}
-
-.btn-small {
-  font-family: "Kanit";
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 16px;
-}
-
-.btn-tiny {
-  font-family: "Kanit";
-  font-size: 10px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 12px;
-}

package/src/index.ts

@@ -1,24 +0,0 @@
-import "./index.css";
-
-/* BUTTON */
-export { PrimaryButton } from "./Button/PrimaryButton/PrimaryButton";
-export { SecondaryButton } from "./Button/SecondaryButton/SecondaryButton";
-export { GhostButton } from "./Button/GhostButton/GhostButton";
-
-/* LOADER */
-export { Loader } from "./Loader/Loader/Loader";
-
-/* CHECKBOX */
-export { Checkbox } from "./Checkbox/Checkbox/Checkbox";
-export { CheckboxGroup } from "./Checkbox/CheckboxGroup/CheckboxGroup";
-
-/* RADIO */
-export { Radio } from "./Radio/Radio/Radio";
-export { RadioGroup } from "./Radio/RadioGroup/RadioGroup";
-
-/* SWITCH */
-export { Switch } from "./Switch/Switch/Switch";
-
-/* NAV */
-export { MenuNavBar } from "./NavBar/MenuNavBar/MenuNavBar";
-export { TopNavBar } from "./NavBar/TopNavBar/TopNavBar";

package/stories/Button.stories.ts

@@ -1,49 +0,0 @@
-import { fn } from 'storybook/test';
-
-import { Button } from './Button';
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-export default {
-  title: 'Example/Button',
-  component: Button,
-  parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: 'centered',
-  },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ['autodocs'],
-  // More on argTypes: https://storybook.js.org/docs/api/argtypes
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
-  args: { onClick: fn() },
-};
-
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const Primary = {
-  args: {
-    primary: true,
-    label: 'Button',
-  },
-};
-
-export const Secondary = {
-  args: {
-    label: 'Button',
-  },
-};
-
-export const Large = {
-  args: {
-    size: 'large',
-    label: 'Button',
-  },
-};
-
-export const Small = {
-  args: {
-    size: 'small',
-    label: 'Button',
-  },
-};

package/stories/Button.tsx

@@ -1,33 +0,0 @@
-import React from "react";
-
-import PropTypes from "prop-types";
-
-import "./button.css";
-
-/** Primary UI component for user interaction */
-export const Button = ({ primary = false, backgroundColor = null, size = "medium", label, ...props }) => {
-  const mode = primary ? "storybook-button--primary" : "storybook-button--secondary";
-  return (
-    <button
-      type="button"
-      className={["storybook-button", `storybook-button--${size}`, mode].join(" ")}
-      style={backgroundColor && { backgroundColor }}
-      {...props}
-    >
-      {label}
-    </button>
-  );
-};
-
-Button.propTypes = {
-  /** Is this the principal call to action on the page? */
-  primary: PropTypes.bool,
-  /** What background color to use */
-  backgroundColor: PropTypes.string,
-  /** How large should the button be? */
-  size: PropTypes.oneOf(["small", "medium", "large"]),
-  /** Button contents */
-  label: PropTypes.string.isRequired,
-  /** Optional click handler */
-  onClick: PropTypes.func,
-};