@trilogy-ds/react 0.0.1-beta.5 → 0.0.1-beta.6

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 (4) hide show
  1. package/README.md +117 -0
  2. package/lib/version.d.ts +1 -1
  3. package/lib/version.js +1 -1
  4. package/package.json +4 -4
package/README.md ADDED
@@ -0,0 +1,117 @@
1
+ <div align='center'>
2
+
3
+ # Trilogy DS
4
+
5
+ ## 🚀 [Quick Start](#usage)
6
+
7
+ Trilogy DS, developed by Bouygues Telecom, is a multiplatform design system ( Web / React / React Native ) with reusable components with same codebase.
8
+
9
+ </div>
10
+
11
+ ![SASS](https://img.shields.io/badge/SASS-hotpink.svg?style=for-the-badge&logo=SASS&logoColor=white)
12
+ ![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)
13
+ ![React Native](https://img.shields.io/badge/react_native-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)
14
+ ---
15
+
16
+ ### Structure
17
+
18
+ ```
19
+ .
20
+ ├── react
21
+ ├── components # ◀ React functional components
22
+ ├── context # Providers (Themes , styles / hashed styles)
23
+ ├── events # Event type definitions
24
+ ├── helpers # Utility functions
25
+ ├── objects # Atoms & facets definition & implementation
26
+ ├── services # Hooks
27
+ └── types # Typescript types
28
+ ```
29
+
30
+ ---
31
+
32
+ ## Usage
33
+
34
+ ```
35
+ npm i @trilogy-ds/react
36
+ ```
37
+
38
+ ```typescript jsx
39
+ import { Button, Text } from '@trilogy-ds/react';
40
+
41
+ <Button variant='PRIMARY'>My Button</Button>
42
+ <Text level='1'>My Text</Text>
43
+ ```
44
+
45
+ ### Trilogy Provider - Import directly css styles
46
+
47
+ The **TrilogyProvider** simplifies integrating Trilogy style into your app by wrapping your entry point with a provider. It offers two props for customization:
48
+
49
+ - `mangled` [optional]: Apply compressed styling for performance.
50
+ - `injectTrilogyAssets`: Inject Trilogy assets directly into the DOM.
51
+
52
+ #### Web Usage
53
+
54
+ 1. Import the `TrilogyProvider` component:
55
+
56
+ ```typescript jsx
57
+ import { TrilogyProvider } from "@trilogy-ds/react/lib/context/provider"
58
+ ```
59
+
60
+ 2. Wrap your app's root component with it:
61
+
62
+ ```typescript jsx
63
+ <TrilogyProvider mangled injectTrilogyAssets>
64
+ <App />
65
+ </TrilogyProvider>
66
+ ```
67
+
68
+ #### Native Usage
69
+
70
+ 1. Import the `TrilogyThemeProvider` along with `SVGicons` & colors from [@trilogy-ds/assets](https://www.npmjs.com/package/@trilogy-ds/assets) library:
71
+
72
+ ```typescript jsx
73
+ import { TrilogyThemeProvider, defaultTheme } from '@trilogy-ds/react/lib/context/providerTheme'
74
+ import { SVGicons } from '@trilogy-ds/assets/lib/iconsPath'
75
+ ```
76
+
77
+ 2. Wrap your app's root component with it:
78
+
79
+ ```typescript jsx
80
+ const theme = {
81
+ ...defaultTheme,
82
+ icons: SVGicons,
83
+ // here: override theme colors
84
+ }
85
+
86
+ <TrilogyThemeProvider theme={theme}>
87
+ <AppNative />
88
+ </TrilogyThemeProvider>
89
+ ```
90
+
91
+ ### Environment
92
+
93
+ #### Web
94
+
95
+ - [Node.js](https://nodejs.org/en/) (>= 18.0.0)
96
+ - [npm](https://www.npmjs.com/) (>= 9.0.0)
97
+
98
+ #### Mobile (Android / IOS)
99
+
100
+ - [Java](https://www.java.com/fr/download/manual.jsp)
101
+ - [cocoapods](https://cocoapods.org/) (>= 1.10.1) (only for ios)
102
+ - [Xcode](https://developer.apple.com/xcode/) (>= 12.5.1) (only for ios)
103
+ - [Android Studio](https://developer.android.com/studio) (>= 4.2.2) (only for android)
104
+
105
+ See how to setup your environment for [Android](https://reactnative.dev/docs/environment-setup) and [IOS](https://reactnative.dev/docs/environment-setup)
106
+
107
+ ### Example
108
+
109
+ Check out our [example project](https://github.com/BouyguesTelecom/trilogy/tree/master/examples/react-template) using Trilogy for consumption.
110
+
111
+ ### Contributing
112
+
113
+ Read [the contributing guide](https://github.com/BouyguesTelecom/trilogy/blob/master/CONTRIBUTING.md) to become familiar with our development process, suggest fixes for bugs and improvements, and understand how to construct and assess your modifications
114
+
115
+ ### Changelog
116
+
117
+ [The changelog](https://github.com/BouyguesTelecom/trilogy/blob/master/CHANGELOG.md) is consistently refreshed to show the modifications made in each new version.
package/lib/version.d.ts CHANGED
@@ -1 +1 @@
1
- export declare const version = "0.0.1-beta.5";
1
+ export declare const version = "0.0.1-beta.6";
package/lib/version.js CHANGED
@@ -1,2 +1,2 @@
1
- export const version = "0.0.1-beta.5";
1
+ export const version = "0.0.1-beta.6";
2
2
  //# sourceMappingURL=version.js.map
package/package.json CHANGED
@@ -1,7 +1,8 @@
1
1
  {
2
2
  "name": "@trilogy-ds/react",
3
- "version": "0.0.1-beta.5",
3
+ "version": "0.0.1-beta.6",
4
4
  "type": "module",
5
+ "author": "Bouygues Telecom",
5
6
  "files": [
6
7
  "lib"
7
8
  ],
@@ -10,7 +11,6 @@
10
11
  "main": "lib/index.js",
11
12
  "sideEffect": false,
12
13
  "description": "Trilogy react framework design system for Bouygues Telecom",
13
- "author": "bouygues-telecom",
14
14
  "license": "UNLICENSED",
15
15
  "scripts": {
16
16
  "test": "jest --config jest.config.web.ts --updateSnapshot --coverage",
@@ -27,8 +27,8 @@
27
27
  "react-native-toast-message": "^2.2.0",
28
28
  "rollup-plugin-copy": "^3.5.0",
29
29
  "shortid": "^2.2.16",
30
- "@trilogy-ds/assets": "^0.0.1-beta.5",
31
- "@trilogy-ds/styles": "^0.0.1-beta.5",
30
+ "@trilogy-ds/assets": "^0.0.1-beta.6",
31
+ "@trilogy-ds/styles": "^0.0.1-beta.6",
32
32
  "@ptomasroos/react-native-multi-slider": "^2.2.2",
33
33
  "react-native-gesture-handler": "^2.16.0"
34
34
  }