@bariskuran/base 0.0.1 → 0.0.3

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 (3) hide show
  1. package/README.md +83 -83
  2. package/package.json +3 -3
  3. package/src/libs/Button/String.js +0 -2
package/README.md CHANGED
@@ -1,115 +1,115 @@
1
1
  # @bariskuran/base
2
2
 
3
- ## create ve Base yayınlaması için
3
+ **A comprehensive React framework, UI library, and design system.**
4
4
 
5
- `yarn publish:all` tek bir sürüm sorar, Base ve create paketlerinin sürümlerini eşitler, ardından önce Base'i sonra create paketini yayımlar.
5
+ ## Installation
6
6
 
7
- Advanced hooks, functions, components for React projects.
7
+ ### Automatic Setup
8
8
 
9
- ```js
9
+ To create a new project with Base:
10
+
11
+ ```bash
12
+ npx @bariskuran/create-base
13
+ ```
14
+
15
+ ### Manual Installation
16
+
17
+ To add Base to an existing React project:
18
+
19
+ **npm**
20
+
21
+ ```bash
10
22
  npm install @bariskuran/base
11
23
  ```
12
24
 
13
- or
25
+ **Yarn**
14
26
 
15
- ```js
27
+ ```bash
16
28
  yarn add @bariskuran/base
17
29
  ```
18
30
 
19
- **Required dependencies:**
20
- • react >=17.0.0
21
- • react-dom >=17.0.0
22
- • react-router-dom >=6.0.0
23
- • styled-components >=6.0.0
31
+ ### Getting Started
24
32
 
25
- ## Create a project
33
+ Once the automatic setup is complete, start the development server:
26
34
 
27
- ```sh
28
- npm create @bariskuran/base
35
+ ```bash
36
+ yarn start
29
37
  ```
30
38
 
31
- The initializer asks for project details, creates the workspace, and installs dependencies with Yarn. Start the project with `yarn start`.
39
+ The application runs at `http://localhost:3000` by default.
32
40
 
33
- ## Publishing
41
+ The integrated Design System is available at `http://localhost:3000/design-system`.
34
42
 
35
- Use `yarn publish:all` to publish both `@bariskuran/base` and `@bariskuran/create-base` with one shared version. The command also sets the Base dependency and `BASE_SPEC` in the generated project template to that version.
43
+ ## Purpose
36
44
 
37
- ## <Base>
45
+ Base is a comprehensive, largely self-contained development framework that brings together the essential tools, systems, and UI components needed to build modern React applications.
38
46
 
39
- Base uygulamanı tek bir yerde toplayan bir app shelldir. Error Boundary, App Suspense, Styled-components, global context api, global styling, loading yönetimlerini barındırır.
47
+ With over 100 utility functions, React hooks, and UI components, Base covers a wide range of development needs, from icons and flags to data handling, state management, date and time utilities, and image management.
40
48
 
41
- ```js
42
- import { Base } from "@bariskuran/base";
49
+ **Base is not a collection of third-party libraries bundled together.** Its core systems and components are developed entirely in-house, following a unified architecture. The only third-party library used within Base's own functional modules is the Lottie animation engine.
43
50
 
44
- export default function App() {
45
- return (
46
- <Base>
47
- <YourApp />
48
- </Base>
49
- );
50
- }
51
- ```
51
+ Instead of installing, configuring, integrating, and maintaining numerous independent packages for common development tasks, Base provides a cohesive and consistent environment.
52
52
 
53
- Çalışan akordiyon örneği:
53
+ Its purpose goes beyond simplifying project setup: **Base aims to provide the shared infrastructure, tools, and components that React applications need, all within a single, standardized ecosystem.**
54
54
 
55
- <details><summary><strong>Error Boundary:</strong> Async error wrapper. ErrorFallback verilmezse wrapper devreye girmez.</summary>
55
+ ## Features
56
56
 
57
- | Prop | Type | Description |
58
- | --------------- | ----------- | ---------------------- |
59
- | `ErrorFallback` | `ReactNode` | Error boundary wrapper |
60
- | `OTHER_` | `ReactNode` | Suspense wrapper |
57
+ ### Core Libraries & Systems
61
58
 
62
- </details>
59
+ Base provides built-in solutions for many features that would otherwise require separate third-party dependencies.
63
60
 
64
- 1- Error Boundary: Async error wrapper. ErrorFallback verilmezse wrapper devreye girmez.
61
+ - **UI Components & Templates:** Reusable interface components and ready-to-use UI templates.
62
+ - **Icons & Flags:** Built-in icon and country flag libraries.
63
+ - **Fetch & Data Management:** Tools for API requests and data handling.
64
+ - **State Management:** An integrated system for managing application state.
65
+ - **CSS & Styling Utilities:** Utilities for styling, design variables, and CSS operations.
66
+ - **Date & Time:** Functions for date, time, and time-related calculations.
67
+ - **Image Management:** Tools for image processing and management.
68
+ - **Timers:** Utilities for timers and time-based operations.
69
+ - **React Hooks:** Custom hooks for reusable React behaviors and application logic.
70
+ - **Utility Functions:** General-purpose functions for everyday development tasks.
71
+ - **Animations:** Lottie-based animation support.
65
72
 
66
- ```js
67
- import { Base } from "base";
73
+ These are not unrelated solutions assembled into a single package. They are interconnected parts of a unified library, built around a consistent development philosophy.
68
74
 
69
- function AppError() {
70
- return <div>Something went wrong.</div>;
71
- }
75
+ ### UI & Design System
72
76
 
73
- export default function App() {
74
- return (
75
- <Base ErrorFallback={<AppError />}>
76
- <YourApp />
77
- </Base>
78
- );
79
- }
77
+ Base provides more than functional utilities. It also establishes a shared visual language and a consistent standard for interface development.
80
78
 
81
- ErrorFallback - ReactNode - Optional;
82
- OTHER_ERROR_BOUNDARY_PROPS - Object - Optional;
83
- ```
79
+ Components, UI templates, styles, and design rules are developed within the same system, making it easier to create consistent interfaces across different projects.
84
80
 
85
- ```js
86
- <Base
87
- /** A React Suspense wrapper. Async. Optional */
88
- SuspenseFallback={<SuspenceFallback />}
89
- /** Error boundary wrapper. Async. Optional */
90
- ErrorFallback={<ErrorFallback />}
91
- /** Mandatory if you want to use styled-components.
92
- {
93
- background: "#17181c",
94
- foreground: "#E0E0E0",
95
- grey: "#3A3A3A",
96
- ...
97
- }
98
- To access theme,
99
-
100
- const Styled = styled.div`
101
- ${({ theme }) => css`
102
- color: ${theme.background};
103
- ...
104
- * */
105
- STYLED_COMPONENTS_THEME={THEME}
106
- /* Styling için kullanılan maximum aspect ratio. Default value is 1/2 */
107
- MAX_ASP_RATIO
108
- /* Styling için kullanılan minimum aspect ratio. Default value is 3/1 */
109
- MIN_ASP_RATIO
110
- /* Styling sisteminin responsive sistemi için kullandığı viewport ayarları. Optional. */
111
- SYSTEM_BREAKPOINTS
112
- >
113
- {yourApp}
114
- </Base>
115
- ```
81
+ ### Ready-to-Use Project Infrastructure
82
+
83
+ Starting a React project may take only a few commands, but preparing a complete development environment can take days.
84
+
85
+ Setting up the project architecture, routing, styling system, icons, shared components, development tools, and configurations is often a repetitive process.
86
+
87
+ Base provides this infrastructure out of the box.
88
+
89
+ A project structure built on the latest React, React DOM, React Router DOM, and Vite comes with the necessary development configurations, design system, and application integrations already in place.
90
+
91
+ **This allows you to focus on building your application instead of spending time on initial setup.**
92
+
93
+ ## Design System
94
+
95
+ Base includes an integrated **Design System** environment where components, functions, and hooks can be explored, tested, and documented through their APIs.
96
+
97
+ It serves both as a documentation resource and as a live development and testing environment.
98
+
99
+ After automatic setup, it is accessible at:
100
+
101
+ **http://localhost:3000/design-system**
102
+
103
+ ## Development Philosophy
104
+
105
+ Base was built around the idea of solving common development needs within its own architecture rather than introducing a new dependency for every feature.
106
+
107
+ This approach is guided by three core principles:
108
+
109
+ **Independence.** Keeping third-party dependencies to a minimum while maintaining full control over the core systems.
110
+
111
+ **Consistency.** Bringing functions, utilities, and UI components together under a shared development standard.
112
+
113
+ **Efficiency.** Reducing repetitive infrastructure work and accelerating the development process.
114
+
115
+ Base is designed not just to help you start a project, but to **provide a shared development foundation throughout the entire application lifecycle.**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bariskuran/base",
3
- "version": "0.0.1",
3
+ "version": "0.0.3",
4
4
  "private": false,
5
5
  "license": "MIT",
6
6
  "description": "Advanced hooks, functions, components for React projects.",
@@ -38,8 +38,8 @@
38
38
  "vite.aliases.mjs"
39
39
  ],
40
40
  "bin": {
41
- "base-image-catalog-setup": "./src/libs/createImageCatalog/tools/base-image-catalog-setup.cjs",
42
- "base-image-index": "./src/libs/createImageCatalog/tools/base-image-index.cjs"
41
+ "base-image-catalog-setup": "src/libs/createImageCatalog/tools/base-image-catalog-setup.cjs",
42
+ "base-image-index": "src/libs/createImageCatalog/tools/base-image-index.cjs"
43
43
  },
44
44
  "exports": {
45
45
  ".": {
package/src/libs/Button/String.js CHANGED
@@ -71,8 +71,6 @@ const S = styled.span`
71
71
 
72
72
  ${$isActivated &&
73
73
  css`
74
- pointer-events: none;
75
-
76
74
  &::after {
77
75
  background: ${theme.foreground};
78
76
  left: 0;