forstok-ui-lib 1.0.1 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "forstok-ui-lib",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Forstok UI Components Library",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -30,13 +30,18 @@
     "@rollup/plugin-node-resolve": "^16.0.0",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^12.1.2",
-    "@types/react": "^19.0.8",
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
     "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^7.1.1",
     "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-typescript2": "^0.36.0",
     "styled-components": "^6.1.15",
     "tslib": "^2.8.1",
-    "typescript": "^5.7.3"
+    "typescript": "^5.7.2",
+    "typescript-plugin-styled-components": "^3.0.0"
   }
 }

package/rollup.config.js

@@ -1,10 +1,10 @@
-import PeerDepsExternal from 'rollup-plugin-peer-deps-external';
+import PeerDepsExternalPlugin from 'rollup-plugin-peer-deps-external'
 import resolve from '@rollup/plugin-node-resolve';
 import commonjs from '@rollup/plugin-commonjs';
-import typescript from '@rollup/plugin-typescript';
 import terser from '@rollup/plugin-terser';
 import postcss from 'rollup-plugin-postcss';
 import dts from 'rollup-plugin-dts';
+import typescript from "@rollup/plugin-typescript";
 
 const packageJson = require('./package.json');
 
@@ -16,18 +16,20 @@ export default [
         file: packageJson.main,
         format: 'cjs',
         sourcemap: true,
+        interop: "auto",
       },
       {
         file: packageJson.module,
         format: 'esm',
         sourcemap: true,
+        interop: "auto",
       },
     ],
     plugins: [
-      PeerDepsExternal(),
+      PeerDepsExternalPlugin(),
       resolve(),
       commonjs(),
-      typescript({tsconfig: './tsconfig.json'}),
+      typescript({ tsconfig: "./tsconfig.json" }),
       terser(),
       postcss({
         extract: true,
@@ -40,7 +42,8 @@ export default [
     input: 'src/index.ts',
     output: [
       {
-        file: packageJson.types
+        file: packageJson.types, 
+        format: 'esm'
       },
     ],
     plugins: [

package/src/assets/stylesheets/bases.styles.ts

@@ -0,0 +1,62 @@
+import { css } from 'styled-components'
+
+export const clearList = css`
+  list-style: none;
+  padding: 0;
+  margin: 0;
+`
+export const responseWidth = css `
+  width: 100%;
+`
+export const elipsis = css `
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: block;
+  max-width: 100%;
+  width: auto;
+`
+export const multiElipsis = css`
+  display: -webkit-box !important;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  word-break: break-all;
+  line-height: 16px;
+`
+export const thirdElipsis = css`
+  display: -webkit-box !important;
+  -webkit-line-clamp: 3 !important;
+  -webkit-box-orient: vertical !important;
+  overflow: hidden !important;
+  white-space: pre-wrap !important;
+  overflow-wrap: anywhere !important;
+  word-break: break-word !important;
+  line-height: 16px;
+`
+export const boxBase = css`
+  background-color: var(--pri-clr-bg);
+  box-shadow: var(--pri-shd-bx);
+  border-radius: var(--pri-rd);
+  border: 1px solid var(--lay-clr-ln);
+`
+export const dropBase = css`
+  background-color: var(--pri-clr-bg);
+  border: 1px solid var(--sec-clr-ln);
+  box-shadow: var(--sec-shd-bx);
+  border-radius: var(--sec-rd);
+`
+export const headTable = css`
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.3px;
+  text-transform: capitalize;
+`
+export const formLabel = css`
+  color: var(--hd-clr);
+  font-weight: 600;
+  font-size: 13px;
+  text-transform: capitalize;
+`

package/src/components/index.ts

@@ -0,0 +1,2 @@
+export { default as TextComponent } from './text/text';
+export { default as LinkComponent } from './link/link';

package/src/components/link/link.styles.ts

@@ -0,0 +1,162 @@
+import { Link } from 'react-router-dom';
+import styled, { css } from 'styled-components';
+import { multiElipsis } from '../../assets/stylesheets/bases.styles';
+
+const ClearStyles = css`
+  color: var(--pri-clr-lnk);
+  &, 
+  &:hover {
+    text-decoration: none;
+  }
+  &:hover {
+    color: var(--pri-clr-lnk__hvr);
+  }
+`
+const ClearRStyles = css`
+  color: var(--pri-clr-lnk);
+  &, 
+  &:hover {
+    text-decoration: none;
+  }
+  &:hover {
+    color: var(--sec-clr-lnk__hvr);
+  }
+`
+const ButtonStyles = css`
+  position: relative;
+  display: inline-grid;
+  padding: 0 16px;
+  border-radius: var(--sec-rd);
+  outline: none;
+  height: 30px;
+  align-items: center;
+  transform-origin: 100% 0%;
+  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
+  &, 
+  &:hover {
+    text-decoration: none;
+  }
+`
+const getLinkModifiedStyled = ({ mode, $elipsis, $activated, $shadow, disabled }:{ mode?: string, $elipsis: boolean, $activated: boolean, $shadow: boolean, disabled: boolean }) => {
+  let style = ``;
+  if (mode === 'clear') {
+    style += ClearStyles
+  } else if (mode === 'clearR') {
+    style += ClearRStyles
+  } else if (mode === 'blue') {
+    style += `
+      &, &:hover {
+        color: var(--pri-clr-lnk__hvr);
+        text-decoration: none;
+      }
+    `
+  } else if (mode === 'trans') {
+    style += ButtonStyles + `
+      height: auto;
+      padding: 0;
+      opacity: 1;
+      &, 
+      &:hover { 
+        color: var(--pri-clr-lnk__hvr);
+        text-decoration: none;
+      }  
+      &:hover {
+        opacity: .9; 
+      }
+    `
+  } else if (mode === 'hover') {
+    style += ButtonStyles + `
+      height: auto;
+      width: max-content;
+      padding: 3px 6px;
+      position: relative;
+      left: -6px;
+      color: initial;
+      grid-gap: 4px;
+      &:hover { 
+        border-radius: var(--ter-rd);
+        box-shadow: 1px 1px var(--pri-clr-ln);
+        background-color: var(--mt-clr-bg__fc);
+        text-decoration: none;
+      }
+    `
+  } else if (mode === 'whiteB') {
+    style += ButtonStyles + `
+      color: var(--ter-clr);
+      background-color: var(--cl-clr-bg);
+      border: 1px solid var(--sec-clr-ln);
+      &, 
+      &:hover { 
+        background-color: var(--cl-clr-bg__hvr);
+      }  
+    `
+  } else if (mode === 'redB') {
+    style += ButtonStyles + `
+      color: var(--act-clr);
+      background-color: var(--act-clr-bg);
+      &:hover {
+        background-color: var(--act-clr-bg__hvr);
+      } 
+    `
+  } else if (mode === 'greyB') {
+    style += ButtonStyles + `
+      color: var(--act-clr);
+      background-color: var(--mt-clr-bg__fc);
+      &:hover {
+        background-color: var(--cl-clr-bg__hvr);
+      } 
+    `
+  }
+  if ($activated) {
+    style += `
+      color: var(--sta-clr);
+      font-weight: 400;
+    `
+    if (mode === 'clear' || mode === 'clearR') { 
+      style += `
+        color: var(--pri-clr-lnk__act);
+        font-weight: 600;
+      `
+    }
+  }
+  if ($elipsis) {
+    style += `
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      display: block;
+      max-width: 100%;
+      width: auto;
+      ${multiElipsis}
+    `
+  }
+  if ($shadow) {
+    style += `
+      box-shadow: var(--act-shd-bx);
+    `
+  }
+  if(disabled) {
+    style += `
+      color: #A9A9A9;
+      opacity: 0.7;
+      pointer-events: none;
+    `
+  } 
+  return style;
+}
+
+export const LinkContainer = styled(Link)<{ mode?: string, $elipsis: boolean, $activated: boolean, $shadow: boolean, disabled: boolean }>`
+  &._refHoverLink {
+    padding: 3px 0px 0px 6px;
+    position: relative;
+    top: -3px;
+  }
+  ${getLinkModifiedStyled}
+`
+export const AnchorLinkContainer = styled.a<{ mode?: string, $elipsis: boolean, $activated: boolean, $shadow: boolean, disabled: boolean }>`
+  ${getLinkModifiedStyled}
+`
+export const ElLinkContainer = styled.span<{ mode?: string, $elipsis: boolean, $activated: boolean, $shadow: boolean, disabled: boolean }>`
+  cursor:pointer;
+  ${getLinkModifiedStyled}
+`

package/src/components/link/link.tsx

@@ -0,0 +1,38 @@
+import type { AnchorHTMLAttributes, ReactNode, MouseEvent, HTMLAttributes } from 'react';
+import { AnchorLinkContainer, ElLinkContainer } from './link.styles';
+import LinkRouteComponent from './link_route';
+import type { Path } from 'react-router-dom';
+
+type TLinkBase = {
+  children: ReactNode
+  mode?: string
+  $activated?: boolean
+  $elipsis?: boolean
+  $shadow?: boolean
+  disabled?: boolean
+} & (
+  (AnchorHTMLAttributes<HTMLAnchorElement> & {
+    href?: string
+    to?: undefined
+    onClick?: (e: MouseEvent<HTMLAnchorElement>) => void
+  }) | 
+  (AnchorHTMLAttributes<HTMLAnchorElement> & {
+    href?: undefined
+    to: string | Partial<Path>
+    onClick?: (e: MouseEvent<HTMLAnchorElement>) => void
+  }) | 
+  (HTMLAttributes<HTMLSpanElement> & {
+    href?: undefined
+    to?: undefined
+    onClick?: (e: MouseEvent<HTMLSpanElement>) => void
+  })
+);
+
+const LinkComponent = ({ children, mode, $activated=false, href, to, $elipsis=false, $shadow=false, disabled=false, ...props }: TLinkBase) => {
+  const { onClick } = props
+  return ( 
+    href ? <AnchorLinkContainer className='_refLink' mode={mode} $activated={$activated ? true : false} $elipsis={$elipsis ? true : false} $shadow={$shadow ? true : false} disabled={disabled ? true : false} href={href} {...props}>{children}</AnchorLinkContainer> : (to ? <LinkRouteComponent to={to} className='_refLink' mode={mode} $activated={$activated && true} $elipsis={$elipsis ? true : false} $shadow={$shadow ? true : false} disabled={disabled ? true : false} {...props}>{children}</LinkRouteComponent> : <ElLinkContainer className='_refLink' mode={mode} $activated={$activated ? true : false} $elipsis={$elipsis ? true : false} $shadow={$shadow ? true : false} disabled={disabled ? true : false} onClick={onClick} {...props}>{children}</ElLinkContainer>)
+  );
+};
+
+export default LinkComponent;

package/src/components/link/link_route.tsx

@@ -0,0 +1,21 @@
+import type { ReactNode, AnchorHTMLAttributes } from 'react';
+import type { LinkProps, Path } from 'react-router-dom';
+import { LinkContainer } from './link.styles';
+
+type TLinkBase = {
+  children: ReactNode
+  mode?: string
+  $activated: boolean
+  $elipsis: boolean
+  $shadow: boolean
+  disabled: boolean
+  to: string | Partial<Path>
+};
+
+type TLink = LinkProps & AnchorHTMLAttributes<HTMLAnchorElement> & TLinkBase;
+
+const LinkRouteComponent = ({ children, mode, $activated, $elipsis, to, $shadow, disabled, ...props }: TLink) => {
+  return <LinkContainer className='_refLink' to={to} mode={mode} $activated={$activated ? true : false} $elipsis={$elipsis ? true : false} $shadow={$shadow ? true : false} disabled={disabled ? true : false} {...props}>{children}</LinkContainer>;
+};
+
+export default LinkRouteComponent;

package/src/index.ts

@@ -1,5 +1,4 @@
 //index.ts
 
 // Text Component
-import TextComponent from './components/text/text';
-export { TextComponent };
+export * from './components';