@lotte-innovate/ui-component-test 0.0.5 → 0.0.6

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;