UIK 5438/rewrite base components to ns

.github/workflows/cd.yml

@@ -122,6 +122,7 @@ jobs:
             semcore/illustration/**/*.js
             semcore/illustration/**/*.mjs
             semcore/illustration/**/*.d.ts
+            semcore/*/tsconfig.tsbuildinfo
           key: build-${{ hashFiles('**/pnpm-lock.yaml', '**/CHANGELOG.md') }}-6
           enableCrossOsArchive: true
       - name: Install dependencies
@@ -167,6 +168,7 @@ jobs:
             semcore/illustration/**/*.js
             semcore/illustration/**/*.mjs
             semcore/illustration/**/*.d.ts
+            semcore/*/tsconfig.tsbuildinfo
           key: build-${{ hashFiles('**/pnpm-lock.yaml', '**/CHANGELOG.md') }}-6
           enableCrossOsArchive: true
       - name: Install dependencies

.gitignore

@@ -81,3 +81,6 @@ allure-report
 
 storybook-static
 *storybook.log
+
+# TS
+**/*.tsbuildinfo

package.json

@@ -3,6 +3,7 @@
   "scripts": {
     "dev": "pnpm storybook",
     "start": "pnpm storybook",
+    "watch-semcore": "tsc -b semcore --emitDeclarationOnly --watch",
     "build": "pnpm run clean && pnpm --filter @semcore/theme run build && pnpm --filter @semcore/core run build && pnpm build:icons && pnpm build:illustration && pnpm --filter @semcore/base-components run build && pnpm --filter @semcore/dropdown run build && pnpm --filter @semcore/* --filter !@semcore/icon --filter !@semcore/core --filter !@semcore/base-components --filter !@semcore/illustration --filter !@semcore/dropdown --filter !@semcore/ui run build",
     "process-theme": "pnpm --filter @semcore/theme build",
     "install-n-test": "pnpm install && pnpm test",
@@ -28,7 +29,9 @@
     "clean:illustration": "pnpm --filter @semcore/illustration run clean",
     "format": "biome format ./semcore ./tools ./website ./stories ./.ci --config-path . --write",
     "lint:es": "npx eslint",
-    "lint:ts": "tsc --noEmit && cd website && tsc --noEmit",
+    "lint:ts": "pnpm lint:ts:semcore && tsc --noEmit && pnpm lint:ts:website",
+    "lint:ts:semcore": "tsc -b semcore --emitDeclarationOnly --verbose",
+    "lint:ts:website": "cd website && tsc --noEmit",
     "lint:css": "stylelint **/*.css",
     "lint:docs": "vale README.md CONTRIBUTING.md semcore/*/README.md semcore/*/CHANGELOG.md tools/*/README.md tools/*/CHANGELOG.md website/docs",
     "prepare": "husky install",

playground/entries/Spin.tsx

@@ -1,4 +1,4 @@
-import type { FlexProps } from '@semcore/ui/base-components';
+import type { NSFlex } from '@semcore/ui/base-components';
 import { Flex } from '@semcore/ui/base-components';
 import type { NSSpin } from '@semcore/ui/spin';
 import Spin from '@semcore/ui/spin';
@@ -38,7 +38,7 @@ const textSize: { [key in SpinJSXProps['size']]: NSText.Props['size'] } = {
   xxl: 200,
 };
 
-const textPlacement: { [key in SpinJSXProps['textPlacement']]: FlexProps['direction'] } = {
+const textPlacement: { [key in SpinJSXProps['textPlacement']]: NSFlex.Props['direction'] } = {
   right: 'row',
   bottom: 'column',
 };

semcore/accordion/.npmignore

@@ -1,4 +1,5 @@
 node_modules
 __tests__
 src
-tsconfig.json
+tsconfig.json
+tsconfig.tsbuildinfo

semcore/accordion/src/Accordion.type.ts

@@ -1,12 +1,12 @@
-import type { BoxProps, FlexProps, Flex } from '@semcore/base-components';
+import type { NSBox, NSFlex } from '@semcore/base-components';
 import type { PropGetterFn, Intergalactic } from '@semcore/core';
 import type { Text } from '@semcore/typography';
 import type { Property } from 'csstype';
 
 declare namespace NSAccordion {
   // TODO: It looks like the value isn't accurate. Revise and align it with the component's logic.
   type Value = null | number | string | Array<number | string | null>;
-  type Props<V extends NSAccordion.Value = NSAccordion.Value> = FlexProps & {
+  type Props<V extends NSAccordion.Value = NSAccordion.Value> = NSFlex.Props & {
   /** Value for the active tab. Can be set as stroke, number, null or as array.
    * @type NSAccordion.Value
    * */
@@ -59,17 +59,17 @@ declare namespace NSAccordion {
       selected?: boolean;
     };
     namespace Toggle {
-      type Props = BoxProps & {
+      type Props = NSBox.Props & {
         tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
       };
       type Component = Intergalactic.Component<typeof Text, Props>;
     }
     namespace ToggleButton {
       type Props = {};
-      type Component = Intergalactic.Component<typeof Flex, Props>;
+      type Component = Intergalactic.Component<NSFlex.Component, Props>;
     }
     namespace Chevron {
-      type Props = BoxProps & {
+      type Props = NSBox.Props & {
         /**
          * Chevron size
          * @default m
@@ -81,7 +81,7 @@ declare namespace NSAccordion {
     }
 
     namespace Collapse {
-      type Props = BoxProps & {
+      type Props = NSBox.Props & {
         /** Animation titles */
         keyframes?: [string, string];
         /** Enables animation on first rendering

semcore/accordion/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../../tsconfig.json",
+  "extends": "../tsconfig.json",
   "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.json"],
   "compilerOptions": {
     "rootDir": "./src"

semcore/add-filter/.npmignore

@@ -2,3 +2,4 @@ node_modules
 __tests__
 src
 tsconfig.json
+tsconfig.tsbuildinfo

semcore/add-filter/src/AddFilter.types.ts

@@ -1,4 +1,4 @@
-import type { FlexProps } from '@semcore/base-components';
+import type { NSFlex } from '@semcore/base-components';
 import type { FilterTrigger } from '@semcore/base-trigger';
 import type { ButtonLink } from '@semcore/button';
 import type { Intergalactic } from '@semcore/core';
@@ -13,7 +13,7 @@ import type { LocalizedMessages } from './translations/__intergalactic-dynamic-l
 declare namespace NSAddFilter {
   type Key = string;
   type Data = Record<string, any>;
-  type Props = FlexProps & {
+  type Props = NSFlex.Props & {
   /**
    * Action to perform on `Clear filters` button click.
    */

semcore/add-filter/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../../tsconfig.json",
+  "extends": "../tsconfig.json",
   "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.json"],
   "compilerOptions": {
     "rootDir": "./src"

semcore/badge/.npmignore

@@ -2,3 +2,4 @@ node_modules
 __tests__
 src
 tsconfig.json
+tsconfig.tsbuildinfo

semcore/badge/src/Badge.tsx

@@ -1,4 +1,3 @@
-import type { BoxProps } from '@semcore/base-components';
 import { Box } from '@semcore/base-components';
 import type { Intergalactic } from '@semcore/core';
 import { createComponent, Component, Root, sstyled } from '@semcore/core';

semcore/badge/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../../tsconfig.json",
+  "extends": "../tsconfig.json",
   "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.json"],
   "compilerOptions": {
     "rootDir": "./src"

semcore/base-components/.npmignore

@@ -1,4 +1,5 @@
 node_modules
 __tests__
 src
-tsconfig.json
+tsconfig.json
+tsconfig.tsbuildinfo

semcore/base-components/src/components/animation/Animation.tsx

@@ -1,23 +1,18 @@
+import type { Intergalactic } from '@semcore/core';
 import { createComponent, sstyled, Root, Component } from '@semcore/core';
 import contextEnhance from '@semcore/core/lib/utils/enhances/contextEnhance';
 import React from 'react';
 
 import { Box } from '../flex-box';
-import type { AnimationContext, AnimationProps, Animation as AnimationComponent, AnimationDefaultProps } from './Animation.types';
+import type { NSAnimation } from './Animation.types';
 import style from './style/animate.shadow.css';
 
-type State = {
-  animationRunning: boolean;
-  render: AnimationProps['visible'] | AnimationProps['preserveNode'];
-  wasInvisible: AnimationProps['visible'];
-};
-
 function propToArray(prop: any) {
   return Array.isArray(prop) ? prop : [prop, prop];
 }
 
 const makeAnimationContextValue = () => {
-  const context: AnimationContext = {
+  const context: NSAnimation.Ctx = {
     onAnimationStartSubscribers: [],
     onAnimationStart: (callback) => {
       context.onAnimationStartSubscribers.push(callback);
@@ -31,19 +26,19 @@ const makeAnimationContextValue = () => {
   };
   return context;
 };
-export const animationContext = React.createContext<AnimationContext | null>(null);
+export const animationContext = React.createContext<NSAnimation.Ctx | null>(null);
 
 class Animation extends Component<
-  AnimationProps,
+  Intergalactic.InternalTypings.InferComponentProps<NSAnimation.Component>,
   typeof Animation.enhance,
   {},
-  { parentAnimationContext: AnimationContext },
-  State,
-  AnimationDefaultProps
+  { parentAnimationContext: NSAnimation.Ctx },
+  NSAnimation.State,
+  NSAnimation.DefaultProps
 > {
   static displayName = 'Animation';
   static style = style;
-  static defaultProps: AnimationDefaultProps = {
+  static defaultProps: NSAnimation.DefaultProps = {
     visible: false,
     duration: 0,
     delay: 0,
@@ -55,15 +50,15 @@ class Animation extends Component<
 
   static enhance = [contextEnhance(animationContext, 'parentAnimationContext')];
 
-  static getDerivedStateFromProps(props: AnimationProps, state: State) {
+  static getDerivedStateFromProps(props: NSAnimation.Props, state: NSAnimation.State) {
     const wasInvisible = state.wasInvisible || !props.visible;
     if (props.visible || props.preserveNode || state.wasInvisible !== wasInvisible) {
       return { render: true, wasInvisible };
     }
     return state;
   }
 
-  state: State = {
+  state: NSAnimation.State = {
     animationRunning: false,
     render: this.props.visible || this.props.preserveNode,
     wasInvisible: !this.props.visible,
@@ -116,7 +111,7 @@ class Animation extends Component<
     this.animationEventFallback();
   }
 
-  componentDidUpdate(prevProps: AnimationProps, prevState: State) {
+  componentDidUpdate(prevProps: typeof this.asProps, prevState: typeof this.state) {
     if (prevProps.visible !== this.props.visible || prevState.render !== this.state.render) {
       this.animationEventFallback();
     }
@@ -162,4 +157,4 @@ class Animation extends Component<
   }
 }
 
-export default createComponent<AnimationComponent, typeof Animation>(Animation);
+export default createComponent<NSAnimation.Component, typeof Animation>(Animation);