@lotte-innovate/ui-component-test 0.0.7 → 0.0.8

package/dist/Typography/Header/index.d.ts

@@ -6,7 +6,7 @@ export interface HeaderProps extends VariantProps<typeof headerVariants> {
 }
 declare let headerVariants: (props?: ({
     weight?: "medium" | "regular" | "semibold" | "bold" | null | undefined;
-    headers?: "h2" | "h3" | "h1" | "h4" | "h5" | "h6" | null | undefined;
+    headers?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | null | undefined;
     color?: string | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const Header: React.ForwardRefExoticComponent<Omit<import("@radix-ui/themes").HeadingProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & HeaderProps & React.RefAttributes<HTMLHeadingElement>>;

package/dist/Typography/Header/{index.js → index.jsx}

@@ -20,7 +20,6 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from '../../utils/utils';
 import { cva } from 'class-variance-authority';
 import { textColorStyle, weightVariants } from '../../constants';
@@ -49,7 +48,11 @@ export var Header = React.forwardRef(function (_a, ref) {
     var className = _a.className, children = _a.children, size = _a.size, weight = _a.weight, color = _a.color, headers = _a.headers, align = _a.align, rootProps = __rest(_a, ["className", "children", "size", "weight", "color", "headers", "align"]);
     if (!headers)
         headers = 'h1';
-    return (_jsx(Theme, { children: _jsx(HeadingTheme, __assign({ ref: ref, as: headers, size: size, align: align, className: cn('leading-normal', headerVariants({ weight: weight, color: color }), className) }, rootProps, { children: children })) }));
+    return (<Theme>
+      <HeadingTheme ref={ref} as={headers} size={size} align={align} className={cn('leading-normal', headerVariants({ weight: weight, color: color }), className)} {...rootProps}>
+        {children}
+      </HeadingTheme>
+    </Theme>);
 });
 Header.displayName = 'Header';
 export default Header;

package/dist/Typography/Text/{index.js → index.jsx}

@@ -20,8 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 import { cva } from 'class-variance-authority';
 import { Text as TextTheme, Theme } from '@radix-ui/themes';
 import { textColorStyle, weightVariants } from '../../constants';
@@ -38,7 +37,11 @@ var textVariants = cva('text', {
 });
 export var Text = forwardRef(function (_a, ref) {
     var className = _a.className, children = _a.children, as = _a.as, align = _a.align, weight = _a.weight, color = _a.color, size = _a.size, props = __rest(_a, ["className", "children", "as", "align", "weight", "color", "size"]);
-    return (_jsx(Theme, { children: _jsx(TextTheme, __assign({ as: as, ref: ref, size: size, align: align, className: cn(textVariants({ weight: weight, color: color }), className) }, props, { children: children })) }));
+    return (<Theme>
+        <TextTheme as={as} ref={ref} size={size} align={align} className={cn(textVariants({ weight: weight, color: color }), className)} {...props}>
+          {children}
+        </TextTheme>
+      </Theme>);
 });
 Text.displayName = 'Text';
 export default Text;

package/dist/app/layout.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { Metadata } from 'next';
+import './globals.css';
+export declare const metadata: Metadata;
+export default function RootLayout({ children, }: Readonly<{
+    children: React.ReactNode;
+}>): import("react").JSX.Element;

package/dist/app/layout.jsx

@@ -0,0 +1,13 @@
+import { Inter } from 'next/font/google';
+import './globals.css';
+var inter = Inter({ subsets: ['latin'] });
+export var metadata = {
+    title: 'Create Next App',
+    description: 'Generated by create next app',
+};
+export default function RootLayout(_a) {
+    var children = _a.children;
+    return (<html lang="en">
+      <body className={inter.className}>{children}</body>
+    </html>);
+}

package/dist/app/page.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export default function Home(): React.JSX.Element;

package/dist/app/page.jsx

@@ -0,0 +1,6 @@
+'use client';
+import React from 'react';
+// import { Button } from '@lotte-innovate/ui-component-test';
+export default function Home() {
+    return <div>{/* <Button>버튼</Button> */}</div>;
+}

package/dist/app/template/badgeTemplate.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import 'react-tabs/style/react-tabs.css';
+import { ITheme, IColor, IRadius, IScaling, IWeight } from 'types';
+type IBadgeTemplate = {
+    radiusTheme: IRadius;
+    scalingTheme: IScaling;
+    fontWeightTheme: IWeight;
+    colorTheme: IColor;
+    mode: ITheme;
+};
+declare const BadgeTemplate: ({ radiusTheme, scalingTheme, fontWeightTheme, colorTheme, mode, }: IBadgeTemplate) => React.JSX.Element;
+export default BadgeTemplate;

package/dist/app/template/badgeTemplate.jsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
+import 'react-tabs/style/react-tabs.css';
+import { radiusOptions, scalingOptions } from '../../constants';
+import Badge from 'components/Badge';
+import { colorOptions } from 'color/constants';
+var BadgeTemplate = function (_a) {
+    var radiusTheme = _a.radiusTheme, scalingTheme = _a.scalingTheme, fontWeightTheme = _a.fontWeightTheme, colorTheme = _a.colorTheme, mode = _a.mode;
+    return (<div className="m-3">
+      <div className=" font-extrabold">Badge</div>
+      <div className="">
+        <div className="border p-2 space-x-2">
+          <Tabs className="">
+            <TabList>
+              <Tab>Theme colors</Tab>
+              <Tab>All colors</Tab>
+              <Tab>All sizes</Tab>
+            </TabList>
+            <TabPanel>
+              <p className="">Main Color 적용 뱃지</p>
+              <Badge radius={radiusTheme} scaling={scalingTheme} color={colorTheme}>
+                Badge
+              </Badge>
+              <Badge radius={radiusTheme} scaling={scalingTheme} color={colorTheme}>
+                outline
+              </Badge>
+            </TabPanel>
+            <TabPanel>
+              <table>
+                <tr>
+                  <th></th>
+                  <th>default</th>
+                  <th>outline</th>
+                </tr>
+                {colorOptions === null || colorOptions === void 0 ? void 0 : colorOptions.map(function (color) { return (<tr key={color}>
+                    <th>{color}</th>
+                    <td>
+                      <Badge radius={radiusTheme} scaling={scalingTheme} color={color}>
+                        Badge
+                      </Badge>
+                    </td>
+                    <td>
+                      <Badge radius={radiusTheme} scaling={scalingTheme} color={color}>
+                        outline
+                      </Badge>
+                    </td>
+                  </tr>); })}
+              </table>
+            </TabPanel>
+            <TabPanel>
+              <table>
+                <tr>
+                  <th></th>
+                  {radiusOptions.map(function (radius) { return (<th key={radius}>{radius}</th>); })}
+                </tr>
+                {scalingOptions.map(function (scale) { return (<tr key={scale}>
+                    <th>{scale}</th>
+                    {radiusOptions.map(function (radius) { return (<td key={radius}>
+                        <Badge scaling={scale} radius={radius} color={colorTheme}>
+                          Badge
+                        </Badge>
+                      </td>); })}
+                  </tr>); })}
+              </table>
+
+              <table>
+                {scalingOptions.map(function (scale) { return (<tr key={scale}>
+                    <th>{scale}</th>
+                    {radiusOptions.map(function (radius) { return (<td key={radius}>
+                        <Badge scaling={scale} radius={radius} color={colorTheme}>
+                          outline
+                        </Badge>
+                      </td>); })}
+                  </tr>); })}
+              </table>
+            </TabPanel>
+          </Tabs>
+        </div>
+      </div>
+    </div>);
+};
+export default BadgeTemplate;

package/dist/app/template/buttonTemplate.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ITheme, IColor, IRadius, IScaling, IWeight } from 'types';
+import 'react-tabs/style/react-tabs.css';
+type IButtonTemplate = {
+    radiusTheme: IRadius;
+    scalingTheme: IScaling;
+    fontWeightTheme: IWeight;
+    colorTheme: IColor;
+    mode: ITheme;
+};
+declare const ButtonTemplate: ({ radiusTheme, scalingTheme, fontWeightTheme, colorTheme, mode, }: IButtonTemplate) => React.JSX.Element;
+export default ButtonTemplate;

package/dist/app/template/buttonTemplate.jsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
+import 'react-tabs/style/react-tabs.css';
+import { radiusOptions, scalingOptions } from '../../constants';
+import Button from 'components/Button';
+import { colorOptions } from 'color/constants';
+var ButtonTemplate = function (_a) {
+    var radiusTheme = _a.radiusTheme, scalingTheme = _a.scalingTheme, fontWeightTheme = _a.fontWeightTheme, colorTheme = _a.colorTheme, mode = _a.mode;
+    return (<div className="m-3">
+      <div className=" font-extrabold">Button</div>
+      <div className="">
+        <div className="border p-2 space-x-2">
+          <Tabs className="">
+            <TabList>
+              <Tab>Theme colors</Tab>
+              <Tab>All colors</Tab>
+              <Tab>All sizes</Tab>
+            </TabList>
+            <TabPanel>
+              <p className="">Main Color 적용 Button</p>
+              <Button radius={radiusTheme} scaling={scalingTheme} weight={fontWeightTheme} color={colorTheme}>
+                Button
+              </Button>
+              <Button radius={radiusTheme} scaling={scalingTheme} weight={fontWeightTheme} color={colorTheme}>
+                outline
+              </Button>
+            </TabPanel>
+            <TabPanel>
+              <table>
+                <tr>
+                  <th></th>
+                  <th>default</th>
+                  <th>outline</th>
+                </tr>
+                {colorOptions === null || colorOptions === void 0 ? void 0 : colorOptions.map(function (color) { return (<tr key={color}>
+                    <th>{color}</th>
+                    <td>
+                      <Button radius={radiusTheme} scaling={scalingTheme} weight={fontWeightTheme} color={color}>
+                        Button
+                      </Button>
+                    </td>
+                    <td>
+                      <Button radius={radiusTheme} scaling={scalingTheme} weight={fontWeightTheme} color={color}>
+                        outline
+                      </Button>
+                    </td>
+                  </tr>); })}
+              </table>
+            </TabPanel>
+            <TabPanel>
+              <table>
+                <tr>
+                  <th></th>
+                  {radiusOptions.map(function (radius) { return (<th key={radius}>{radius}</th>); })}
+                </tr>
+                {scalingOptions.map(function (scale) { return (<tr key={scale}>
+                    <th>{scale}</th>
+                    {radiusOptions.map(function (radius) { return (<td key={radius}>
+                        <Button scaling={scale} radius={radius} weight={fontWeightTheme} color={colorTheme}>
+                          Button
+                        </Button>
+                      </td>); })}
+                  </tr>); })}
+              </table>
+
+              <table>
+                {scalingOptions.map(function (scale) { return (<tr key={scale}>
+                    <th>{scale}</th>
+                    {radiusOptions.map(function (radius) { return (<td key={radius}>
+                        <Button scaling={scale} radius={radius} weight={fontWeightTheme} color={colorTheme}>
+                          outline
+                        </Button>
+                      </td>); })}
+                  </tr>); })}
+              </table>
+            </TabPanel>
+          </Tabs>
+        </div>
+      </div>
+    </div>);
+};
+export default ButtonTemplate;

package/dist/app/template/colorPicker.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { IColor } from 'types';
+declare const ColorPicker: ({ setColorTheme, mode, }: {
+    setColorTheme: (color: IColor) => void;
+    mode: string;
+}) => import("react").JSX.Element;
+export default ColorPicker;

package/dist/app/template/colorPicker.jsx

@@ -0,0 +1,19 @@
+'use client';
+import { bgColorStyle } from '../../constants';
+var ColorPicker = function (_a) {
+    var setColorTheme = _a.setColorTheme, mode = _a.mode;
+    var handleColorClick = function (color) {
+        setColorTheme(color);
+    };
+    return (<div>
+      <div className="flex flex-row flex-wrap gap-2">
+        {Object.entries(bgColorStyle).map(function (_a) {
+            var key = _a[0], value = _a[1];
+            return (<button className={"w-12 p-2 rounded-full text-xs cursor-pointer hover:border-gray-900 ".concat(value, " text-white hover:text-black")} key={key}>
+            {key.replace('Dark', '')}
+          </button>);
+        })}
+      </div>
+    </div>);
+};
+export default ColorPicker;

package/dist/app/template/textTemplate.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ITheme, IScaling, IWeight, IColor } from 'types';
+import 'react-tabs/style/react-tabs.css';
+type ITextTemplate = {
+    scalingTheme: IScaling;
+    fontWeightTheme: IWeight;
+    colorTheme: IColor;
+    mode: ITheme;
+};
+declare const TextTemplate: ({ scalingTheme, fontWeightTheme, colorTheme, mode }: ITextTemplate) => React.JSX.Element;
+export default TextTemplate;

package/dist/app/template/textTemplate.jsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
+import 'react-tabs/style/react-tabs.css';
+import { scalingOptions, weightOptions } from '../../constants';
+import { Text } from '../../Typography/Text';
+import { colorOptions } from 'color/constants';
+var TextTemplate = function (_a) {
+    var scalingTheme = _a.scalingTheme, fontWeightTheme = _a.fontWeightTheme, colorTheme = _a.colorTheme, mode = _a.mode;
+    return (<div className="m-3">
+      <div className=" font-extrabold">Text</div>
+      <div className="">
+        <div className="border p-2 space-x-2">
+          <Tabs className="">
+            <TabList>
+              <Tab>All colors</Tab>
+              <Tab>All sizes</Tab>
+              <Tab>All weights</Tab>
+            </TabList>
+            <TabPanel>
+              <table>
+                <tbody>
+                  {colorOptions === null || colorOptions === void 0 ? void 0 : colorOptions.map(function (color) { return (<tr key={color}>
+                      <td>{color}</td>
+                      <td>
+                        <Text 
+        // scaling={scalingTheme}
+        weight={fontWeightTheme} color={color}>
+                          The quick brown fox jumps over the lazy dog.
+                        </Text>
+                      </td>
+                    </tr>); })}
+                </tbody>
+              </table>
+            </TabPanel>
+            <TabPanel>
+              <table>
+                <tbody>
+                  {scalingOptions === null || scalingOptions === void 0 ? void 0 : scalingOptions.map(function (scale) { return (<tr key={scale}>
+                      <td>{scale}</td>
+                      <td>
+                        <Text 
+        // scaling={scale}
+        weight={fontWeightTheme} color={colorTheme}>
+                          The quick brown fox jumps over the lazy dog.
+                        </Text>
+                      </td>
+                    </tr>); })}
+                </tbody>
+              </table>
+            </TabPanel>
+            <TabPanel>
+              <table>
+                <tbody>
+                  {weightOptions === null || weightOptions === void 0 ? void 0 : weightOptions.map(function (weight) { return (<tr key={weight}>
+                      <td>{weight}</td>
+                      <td>
+                        <Text 
+        // scaling={scalingTheme}
+        weight={weight} color={colorTheme}>
+                          The quick brown fox jumps over the lazy dog.
+                        </Text>
+                      </td>
+                    </tr>); })}
+                </tbody>
+              </table>
+            </TabPanel>
+          </Tabs>
+        </div>
+      </div>
+    </div>);
+};
+export default TextTemplate;

package/dist/app/template/theme.d.ts

@@ -0,0 +1,12 @@
+import React, { Dispatch, SetStateAction } from 'react';
+import { IColor, IRadius, IScaling, IWeight } from 'types';
+type ITheme = {
+    setRadiusTheme: Dispatch<SetStateAction<IRadius>>;
+    setScalingTheme: Dispatch<SetStateAction<IScaling>>;
+    setFontWeightTheme: Dispatch<SetStateAction<IWeight>>;
+    setColorTheme: Dispatch<SetStateAction<IColor>>;
+    setFontColorTheme: Dispatch<SetStateAction<IColor>>;
+    mode: string;
+};
+declare const Theme: ({ setRadiusTheme, setScalingTheme, setFontWeightTheme, setColorTheme, setFontColorTheme, mode, }: ITheme) => React.JSX.Element;
+export default Theme;

package/dist/app/template/theme.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import ColorPicker from './colorPicker';
+import { radiusOptions, scalingOptions, weightOptions } from '../../constants';
+var Theme = function (_a) {
+    var setRadiusTheme = _a.setRadiusTheme, setScalingTheme = _a.setScalingTheme, setFontWeightTheme = _a.setFontWeightTheme, setColorTheme = _a.setColorTheme, setFontColorTheme = _a.setFontColorTheme, mode = _a.mode;
+    var setColor = function (color) {
+        setColorTheme(color);
+        setFontColorTheme(color);
+    };
+    return (<div className="flex flex-col p-3">
+      <p className="text-2xl font-bold">Themes</p>
+      <div className="flex flex-col text-xl gap-2">
+        Accent Color
+        <ColorPicker mode={mode} setColorTheme={setColor}/>
+      </div>
+      <div className="flex gap-4">
+        <div className="flex gap-2">
+          <p>Radius</p>
+          <select className="border border-gray-900" onChange={function (e) { return setRadiusTheme(e.target.value); }} defaultValue={'full'}>
+            {radiusOptions.map(function (item) { return (<option key={item} value={item}>
+                {item}
+              </option>); })}
+          </select>
+        </div>
+        <div className="flex gap-2">
+          <p>Scaling</p>
+          <select className="border border-gray-900" onChange={function (e) { return setScalingTheme(e.target.value); }}>
+            {scalingOptions.map(function (item) { return (<option key={item} value={item}>
+                {item}
+              </option>); })}
+          </select>
+        </div>
+        <div className="flex gap-2">
+          <p>Font Weight</p>
+          <select className="border border-gray-900" onChange={function (e) { return setFontWeightTheme(e.target.value); }} defaultValue={'semibold'}>
+            {weightOptions.map(function (item) { return (<option key={item} value={item}>
+                {item}
+              </option>); })}
+          </select>
+        </div>
+      </div>
+    </div>);
+};
+export default Theme;