npm - podo-ui - Versions diffs - 0.1.46 → 0.2.0 - Mend

podo-ui 0.1.46 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (64) hide show

package/package.json +2 -2
package/react/atom/pagination.module.scss +61 -0
package/react/atom/pagination.tsx +87 -0
package/react.ts +2 -1
package/readme.md +3 -3
package/scss/color/theme.scss +92 -0
package/scss/form/checkbox-radio.scss +48 -0
package/scss/form/toggle.scss +16 -0
package/scss/layout/bg-elevation.scss +14 -0
package/scss/reset.scss +2 -0
package/.prettierignore +0 -9
package/.prettierrc +0 -8
package/ARCHITECTURE.md +0 -727
package/cli/icon-scss.js +0 -56
package/eslint.config.js +0 -26
package/index.html +0 -12
package/next-env.d.ts +0 -5
package/next.config.mjs +0 -10
package/public/logo.svg +0 -57
package/src/app/components/button/page.module.scss +0 -253
package/src/app/components/button/page.tsx +0 -366
package/src/app/components/checkbox-radio/page.module.scss +0 -95
package/src/app/components/checkbox-radio/page.tsx +0 -265
package/src/app/components/input/page.module.scss +0 -112
package/src/app/components/input/page.tsx +0 -196
package/src/app/components/select/page.module.scss +0 -90
package/src/app/components/select/page.tsx +0 -225
package/src/app/components/textarea/page.module.scss +0 -81
package/src/app/components/textarea/page.tsx +0 -103
package/src/app/foundation/colors/page.module.scss +0 -370
package/src/app/foundation/colors/page.tsx +0 -200
package/src/app/foundation/icons/page.module.scss +0 -229
package/src/app/foundation/icons/page.tsx +0 -229
package/src/app/foundation/spacing/page.module.scss +0 -258
package/src/app/foundation/spacing/page.tsx +0 -289
package/src/app/foundation/typography/page.module.scss +0 -148
package/src/app/foundation/typography/page.tsx +0 -207
package/src/app/getting-started/installation/page.module.scss +0 -157
package/src/app/getting-started/installation/page.tsx +0 -154
package/src/app/getting-started/usage/page.module.scss +0 -209
package/src/app/getting-started/usage/page.tsx +0 -242
package/src/app/home.module.scss +0 -541
package/src/app/layout/grid/page.module.scss +0 -178
package/src/app/layout/grid/page.tsx +0 -217
package/src/app/layout/responsive/page.module.scss +0 -237
package/src/app/layout/responsive/page.tsx +0 -279
package/src/app/layout.module.scss +0 -14
package/src/app/layout.tsx +0 -30
package/src/app/page.module.scss +0 -71
package/src/app/page.tsx +0 -284
package/src/components/CodeBlock.module.scss +0 -29
package/src/components/CodeBlock.tsx +0 -18
package/src/components/Navigation.module.scss +0 -104
package/src/components/Navigation.tsx +0 -96
package/src/components/PageHeader.module.scss +0 -24
package/src/components/PageHeader.tsx +0 -17
package/src/components/ThemeToggle.module.scss +0 -34
package/src/components/ThemeToggle.tsx +0 -47
package/src/styles/custom.scss +0 -11
package/src/styles/doc-common.scss +0 -119
package/src/styles/font-family.scss +0 -80
package/src/styles/icon.scss +0 -5
package/src/vite-env.d.ts +0 -1
package/tsconfig.json +0 -26

package/cli/icon-scss.js DELETED Viewed

@@ -1,56 +0,0 @@
-import path from 'node:path';
-import fs from 'node:fs';
-import opentype from 'opentype.js';
-// 파일 경로와 출력 디렉토리 설정
-const woffPath = path.resolve(process.cwd(), 'scss/icon/font/icon.woff');
-const outputFileName = path.resolve(process.cwd(), 'scss/icon/icon-name.scss');
-// SCSS 파일 생성 함수
-function generateIconScss(glyphs, outputPath) {
-  let scssContent = '$icon-name: (\n';
-  // 각 글리프에 대해 CSS 클래스 생성
-  for (const [glyphName, unicode] of Object.entries(glyphs)) {
-    if (glyphName === '.notdef') {
-      continue;
-    }
-    scssContent += `  ${glyphName}: ${unicode},\n`;
-  }
-  scssContent += ');';
-  // SCSS 파일 저장
-  fs.writeFileSync(outputPath, scssContent, 'utf8');
-  console.log(`SCSS file generated at: ${outputPath}`);
-}
-// WOFF 파일에서 글리프 추출 함수
-function extractGlyphsFromWoff(woffPath) {
-  const font = opentype.loadSync(woffPath);
-  const glyphs = {};
-  // GlyphSet 객체에서 글리프를 순회하며 이름과 유니코드 추출
-  for (let i = 0; i < font.glyphs.length; i++) {
-    const glyph = font.glyphs.get(i);
-    if (glyph.unicode) {
-      const glyphName = glyph.name || `glyph${i}`;
-      const formattedGlyphName = glyphName.replace(/_/g, '-');
-      const unicode = `\\${glyph.unicode.toString(16).padStart(4, '0')}`; // 유니코드 값을 \xxxx 형식으로 변환
-      glyphs[formattedGlyphName] = unicode;
-    }
-  }
-  return glyphs;
-}
-// 실행
-try {
-  if (!fs.existsSync(woffPath)) {
-    throw new Error('WOFF file not found.');
-  }
-  const glyphs = extractGlyphsFromWoff(woffPath);
-  generateIconScss(glyphs, outputFileName);
-} catch (error) {
-  console.error('Error:', error.message);
-}

package/eslint.config.js DELETED Viewed

@@ -1,26 +0,0 @@
-import js from '@eslint/js';
-import globals from 'globals';
-import reactHooks from 'eslint-plugin-react-hooks';
-import reactRefresh from 'eslint-plugin-react-refresh';
-import tseslint from 'typescript-eslint';
-export default tseslint.config({
-  extends: [js.configs.recommended, ...tseslint.configs.recommended],
-  files: ['**/*.{ts,tsx}'],
-  ignores: ['dist'],
-  languageOptions: {
-    ecmaVersion: 2020,
-    globals: globals.browser,
-  },
-  plugins: {
-    'react-hooks': reactHooks,
-    'react-refresh': reactRefresh,
-  },
-  rules: {
-    ...reactHooks.configs.recommended.rules,
-    'react-refresh/only-export-components': [
-      'warn',
-      { allowConstantExport: true },
-    ],
-  },
-});

package/index.html DELETED Viewed

@@ -1,12 +0,0 @@
-<!doctype html>
-<html lang="ko">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Podo-ui</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>

package/next-env.d.ts DELETED Viewed

@@ -1,5 +0,0 @@
-/// <reference types="next" />
-/// <reference types="next/image-types/global" />
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.

package/next.config.mjs DELETED Viewed

@@ -1,10 +0,0 @@
-import { setupDevPlatform } from '@cloudflare/next-on-pages/next-dev';
-/** @type {import('next').NextConfig} */
-const nextConfig = {};
-if (process.env.NODE_ENV === 'development') {
-  await setupDevPlatform();
-}
-export default nextConfig;

package/public/logo.svg DELETED Viewed

@@ -1,57 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="29" height="32" viewBox="0 0 29 32" fill="none">
-  <mask id="mask0_1201_144" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="29" height="32">
-    <path d="M12.8211 31.6416C12.1409 31.6416 11.4909 31.519 10.874 31.2728C10.3109 31.0483 9.85814 30.7048 9.47776 30.4007C7.54555 28.8546 6.02764 27.0099 4.70151 24.5963L4.02623 23.3667L6.48356 22.0148L7.15884 23.2445C8.30134 25.3241 9.59445 26.9018 11.229 28.2093C11.462 28.3957 11.7062 28.5845 11.912 28.6664C13.9342 29.4724 16.8479 27.0805 17.8054 26.2944C20.0502 24.4515 22.0172 22.3208 23.6509 19.9615C24.9933 18.0226 26.1652 15.9439 25.6541 13.8774C25.0494 11.4308 21.7395 10.9388 17.4757 10.5496C16.9036 10.4976 16.345 10.4464 15.8126 10.3862C15.7841 10.5655 15.757 10.7465 15.7294 10.9293C15.634 11.5625 15.5354 12.2174 15.3734 12.8714C14.8153 15.1284 13.7456 16.9554 12.2802 18.1557C10.8509 19.3265 9.08336 20.0293 7.30357 20.1353C5.32206 20.2525 3.49298 19.603 2.15282 18.3055C1.39884 17.5755 0.807241 16.6495 0.441334 15.6276C0.0935182 14.6563 -0.053026 13.5928 0.0170799 12.5532C0.159101 10.451 1.16184 8.56732 2.7684 7.38564C4.18861 6.34109 5.92361 5.89394 8.07383 6.01885C8.17243 6.02473 8.27149 6.03152 8.37009 6.03967C7.55324 4.66428 7.10682 3.06622 7.12944 1.403L7.14843 0L9.95222 0.0380165L9.93322 1.44101C9.90111 3.81796 11.272 6.0003 13.4259 7.00095C13.5444 7.05616 13.6633 7.10595 13.7827 7.15166C13.8741 6.94166 13.9767 6.73302 14.0921 6.528C15.0496 4.82449 16.4703 3.49074 18.3143 2.56386C19.9068 1.76325 21.7929 1.29845 23.7681 1.2197L23.8015 1.21834C24.9594 1.17128 26.2448 1.23509 27.002 2.0615C27.4004 2.49643 27.5773 3.06713 27.5004 3.6677C27.2905 5.30378 25.7211 6.40581 24.6826 7.13536C24.5831 7.20506 24.489 7.27159 24.4022 7.33359C23.8382 7.73956 23.2547 8.11112 22.6541 8.44603C23.0697 8.54605 23.4763 8.66191 23.8698 8.79633C26.3466 9.64265 27.8627 11.1258 28.3765 13.2035C29.1567 16.3598 27.5909 19.1989 25.9563 21.5595C24.1742 24.1329 22.0303 26.456 19.5843 28.4641C18.7028 29.1877 17.3604 30.2278 15.8845 30.9035C14.8094 31.3959 13.785 31.6421 12.8216 31.6421L12.8211 31.6416ZM7.39539 8.80267C6.29178 8.80267 5.2696 9.02715 4.42878 9.64537C3.48891 10.3369 2.90047 11.4652 2.81408 12.7415C2.72272 14.0933 3.20441 15.4189 4.10222 16.2883C5.83225 17.9629 8.71564 17.4487 10.5036 15.9842C11.7582 14.9564 12.3639 13.3574 12.6506 12.197C12.7813 11.6693 12.8659 11.1063 12.9559 10.5102C12.9876 10.3016 13.0197 10.0884 13.0545 9.87211C12.8098 9.80966 12.5615 9.74448 12.3028 9.67705C10.6962 9.2566 8.9635 8.80267 7.39493 8.80267H7.39539ZM24.1539 4.01438C24.0797 4.01574 24.0001 4.01845 23.9146 4.02162L23.8793 4.02298C20.7132 4.14925 18.1519 5.41511 16.7715 7.51508C17.7475 7.42502 18.6078 7.17202 19.1994 6.95479C20.4541 6.49451 21.6531 5.85547 22.7635 5.05576C22.8585 4.98742 22.9621 4.91456 23.0715 4.83807C23.4266 4.5887 23.8232 4.31037 24.1543 4.01438H24.1539Z" fill="white"/>
-  </mask>
-  <g mask="url(#mask0_1201_144)">
-    <path d="M21.5235 43.6519C31.7536 43.6519 40.0468 35.3535 40.0468 25.1169C40.0468 14.8804 31.7536 6.58199 21.5235 6.58199C11.2933 6.58199 3.00012 14.8804 3.00012 25.1169C3.00012 35.3535 11.2933 43.6519 21.5235 43.6519Z" fill="url(#paint0_radial_1201_144)"/>
-    <path style="mix-blend-mode:overlay" d="M-1.47654 48.6519C8.75362 48.6519 17.0468 40.3535 17.0468 30.1169C17.0468 19.8804 8.75362 11.582 -1.47654 11.582C-11.7067 11.582 -19.9999 19.8804 -19.9999 30.1169C-19.9999 40.3535 -11.7067 48.6519 -1.47654 48.6519Z" fill="url(#paint1_radial_1201_144)"/>
-    <path d="M18.5235 24.8909C28.7536 24.8909 37.0468 16.5925 37.0468 6.35597C37.0468 -3.88058 28.7536 -12.179 18.5235 -12.179C8.2933 -12.179 0.00012207 -3.88058 0.00012207 6.35597C0.00012207 16.5925 8.2933 24.8909 18.5235 24.8909Z" fill="url(#paint2_radial_1201_144)"/>
-    <path d="M1.52346 31.8909C11.7536 31.8909 20.0468 23.5925 20.0468 13.356C20.0468 3.11942 11.7536 -5.17896 1.52346 -5.17896C-8.7067 -5.17896 -16.9999 3.11942 -16.9999 13.356C-16.9999 23.5925 -8.7067 31.8909 1.52346 31.8909Z" fill="url(#paint3_radial_1201_144)"/>
-  </g>
-  <defs>
-    <radialGradient id="paint0_radial_1201_144" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(21.5235 25.1169) scale(18.5233 18.5349)">
-      <stop stop-color="#1EACDC"/>
-      <stop offset="0.17" stop-color="#1EACDC" stop-opacity="0.99"/>
-      <stop offset="0.31" stop-color="#1EACDC" stop-opacity="0.94"/>
-      <stop offset="0.44" stop-color="#1EADDD" stop-opacity="0.86"/>
-      <stop offset="0.56" stop-color="#1EAFDE" stop-opacity="0.76"/>
-      <stop offset="0.67" stop-color="#1FB0DF" stop-opacity="0.62"/>
-      <stop offset="0.78" stop-color="#1FB3E0" stop-opacity="0.45"/>
-      <stop offset="0.89" stop-color="#20B5E2" stop-opacity="0.24"/>
-      <stop offset="0.99" stop-color="#20B8E4" stop-opacity="0.01"/>
-      <stop offset="1" stop-color="#21B9E5" stop-opacity="0"/>
-    </radialGradient>
-    <radialGradient id="paint1_radial_1201_144" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(-1.47654 30.1169) scale(18.5233 18.5349)">
-      <stop stop-color="#E75C9C"/>
-      <stop offset="0.17" stop-color="#E75C9C" stop-opacity="0.99"/>
-      <stop offset="0.31" stop-color="#E75F9D" stop-opacity="0.94"/>
-      <stop offset="0.43" stop-color="#E8639E" stop-opacity="0.87"/>
-      <stop offset="0.55" stop-color="#E969A0" stop-opacity="0.77"/>
-      <stop offset="0.66" stop-color="#EA71A2" stop-opacity="0.63"/>
-      <stop offset="0.77" stop-color="#EB7BA6" stop-opacity="0.47"/>
-      <stop offset="0.87" stop-color="#ED86A9" stop-opacity="0.28"/>
-      <stop offset="0.97" stop-color="#EF93AD" stop-opacity="0.06"/>
-      <stop offset="1" stop-color="#F097AF" stop-opacity="0"/>
-    </radialGradient>
-    <radialGradient id="paint2_radial_1201_144" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(18.5235 6.35597) scale(18.5233 18.5349)">
-      <stop stop-color="#72C7CE"/>
-      <stop offset="0.18" stop-color="#72C7CD" stop-opacity="0.98"/>
-      <stop offset="0.32" stop-color="#72C7CD" stop-opacity="0.94"/>
-      <stop offset="0.45" stop-color="#73C7CC" stop-opacity="0.85"/>
-      <stop offset="0.57" stop-color="#74C7CA" stop-opacity="0.74"/>
-      <stop offset="0.69" stop-color="#75C7C8" stop-opacity="0.59"/>
-      <stop offset="0.81" stop-color="#76C7C6" stop-opacity="0.41"/>
-      <stop offset="0.91" stop-color="#78C7C3" stop-opacity="0.2"/>
-      <stop offset="1" stop-color="#7AC8C1" stop-opacity="0"/>
-    </radialGradient>
-    <radialGradient id="paint3_radial_1201_144" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1.52346 13.356) scale(18.5233 18.5349)">
-      <stop stop-color="#8B5CF6"/>
-      <stop offset="0.09" stop-color="#8B5CF6" stop-opacity="0.97"/>
-      <stop offset="0.23" stop-color="#8B5CF6" stop-opacity="0.87"/>
-      <stop offset="0.4" stop-color="#8B5CF6" stop-opacity="0.72"/>
-      <stop offset="0.6" stop-color="#8B5CF6" stop-opacity="0.5"/>
-      <stop offset="0.82" stop-color="#8B5CF6" stop-opacity="0.24"/>
-      <stop offset="1" stop-color="#8B5CF6" stop-opacity="0"/>
-    </radialGradient>
-  </defs>
-</svg>

package/src/app/components/button/page.module.scss DELETED Viewed

@@ -1,253 +0,0 @@
-@use '../../../../mixin' as *;
-.section {
-  margin-bottom: s(10);
-  h2 {
-    @include display5;
-    margin: 0 0 s(5) 0;
-    color: color(default-deep-base);
-  }
-  h3 {
-    @include p1; font-weight: 600;
-    margin: s(7) 0 s(4) 0;
-    color: color(default-deep-base);
-  }
-  p {
-    @include p2;
-    color: color(default-base);
-    line-height: 1.8;
-    margin: 0 0 s(5) 0;
-  }
-}
-.codeBlock {
-  background: color(default-deep-base);
-  border-radius: r(4);
-  overflow: hidden;
-  margin-bottom: s(4);
-  .codeHeader {
-    padding: s(3) s(5);
-    background: rgba(0, 0, 0, 0.2);
-    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-    @include p4-semibold;
-    color: rgba(255, 255, 255, 0.7);
-  }
-  pre {
-    margin: 0;
-    padding: s(5);
-    overflow-x: auto;
-    code {
-      @include p3;
-      font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
-      color: #f8f8f2;
-      white-space: pre;
-    }
-  }
-}
-// Demo
-.demo {
-  margin-top: s(5);
-  padding: s(5);
-  background: color(default-fill);
-  border: 1px solid color(default-outline);
-  border-radius: r(4);
-}
-.demoTitle {
-  @include p3-semibold;
-  margin-bottom: s(4);
-  color: color(default-deep-base);
-}
-.buttonGroup {
-  display: flex;
-  flex-wrap: wrap;
-  gap: s(4);
-  button {
-    i {
-      font-size: 16px;
-    }
-  }
-}
-// Variants Showcase
-.variantsShowcase {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: s(5);
-  margin: s(6) 0;
-}
-.variantCard {
-  padding: s(5);
-  background: color(default-fill);
-  border: 1px solid color(default-outline);
-  border-radius: r(4);
-  transition: all 0.3s;
-  &:hover {
-    border-color: color(primary-base);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  }
-}
-.variantHeader {
-  margin-bottom: s(4);
-  h3 {
-    @include p2; font-weight: 600;
-    margin: 0 0 s(2) 0;
-    color: color(default-deep-base);
-  }
-  p {
-    @include p4;
-    margin: 0;
-    color: color(default-base);
-  }
-}
-// Style Section
-.styleSection {
-  margin-top: s(8);
-  padding-top: s(6);
-  border-top: 1px solid color(default-outline);
-  &:first-child {
-    margin-top: 0;
-    padding-top: 0;
-    border-top: none;
-  }
-  h3 {
-    @include p1; font-weight: 600;
-    margin: 0 0 s(2) 0;
-    color: color(default-deep-base);
-  }
-  > p {
-    @include p3;
-    margin: 0 0 s(5) 0;
-    color: color(default-base);
-  }
-}
-// Size Demo
-.sizeDemo {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: s(4);
-}
-// Icon Button Demo
-.iconButtonDemo {
-  display: flex;
-  flex-wrap: wrap;
-  gap: s(4);
-  button {
-    display: flex;
-    align-items: center;
-    gap: s(2);
-    i {
-      font-size: 16px;
-    }
-  }
-}
-// Group Demo
-.groupDemo {
-  display: flex;
-  flex-direction: column;
-  gap: s(4);
-}
-.buttonRow {
-  display: flex;
-  gap: s(3);
-  button {
-    display: flex;
-    align-items: center;
-    gap: s(2);
-    i {
-      font-size: 16px;
-    }
-  }
-}
-// Showcase
-.showcase {
-  margin-top: s(6);
-  border: 1px solid color(default-outline);
-  border-radius: r(4);
-  overflow: hidden;
-}
-.showcaseRow {
-  display: flex;
-  align-items: center;
-  padding: s(5);
-  border-bottom: 1px solid color(default-outline);
-  &:last-child {
-    border-bottom: none;
-  }
-  &:hover {
-    background: color(default-fill);
-  }
-}
-.showcaseLabel {
-  min-width: 200px;
-  padding-right: s(5);
-  strong {
-    @include p2; font-weight: 600;
-    display: block;
-    margin-bottom: s(1);
-    color: color(default-deep-base);
-  }
-  span {
-    @include p4;
-    color: color(default-base);
-  }
-}
-.showcaseButtons {
-  display: flex;
-  flex-wrap: wrap;
-  gap: s(3);
-  flex: 1;
-}
-// Responsive
-@media (max-width: 768px) {
-  .showcaseRow {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: s(4);
-  }
-  .showcaseLabel {
-    min-width: 0;
-    padding-right: 0;
-  }
-  .showcaseButtons {
-    width: 100%;
-  }
-}