@amboss/design-system - npm Package Compare versions

Comparing version 0.0.4-canary-font-2 to 0.0.5

build/components/Card/Card.d.ts

 import React from "react";
 export declare class CardProps {
-    title?: string;
-    justifyHeight?: boolean;
-    margin?: boolean;
-    darkenShadowOnHover?: boolean;
+    /** specify title displayed in Header */
+    headerTitle?: string;
+    /** specify subtitle displayed in Header */
+    headerSubtitle?: string;
+    /** specify button displayed in Header */
+    headerButton?: React.ReactElement;
+    /** set to true if you want a card with no header */
+    noHeader?: boolean;
     overflowHidden?: boolean;
-    padding?: boolean;
     squareCorners?: boolean;
-    children: React.ReactNode;
+    children?: React.ReactNode;
     "data-e2e-test-id"?: string;
 }
-export declare function Card({ title, justifyHeight, darkenShadowOnHover, margin, overflowHidden, padding, squareCorners, children, "data-e2e-test-id": dataE2eTestId, }: CardProps): React.ReactElement;
+declare type BareCardComponent = (props: {
+    overflowHidden?: boolean;
+    squareCorners?: boolean;
+    children?: React.ReactNode;
+    "data-e2e-test-id"?: string;
+}) => React.ReactElement;
+declare type BaseCardComponent = (props: {
+    headerTitle: string;
+    headerSubtitle?: string;
+    headerButton?: React.ReactElement;
+    overflowHidden?: boolean;
+    squareCorners?: boolean;
+    children?: React.ReactNode;
+    "data-e2e-test-id"?: string;
+}) => React.ReactElement;
+export default function Card({ headerTitle, headerSubtitle, headerButton, noHeader, overflowHidden, squareCorners, children, "data-e2e-test-id": dataE2eTestId, }: CardProps): React.ReactElement;
+export declare const BaseCard: BaseCardComponent;
+export declare const BareCard: BareCardComponent;
+export {};

build/components/Inline/Inline.d.ts

 import React from "react";
 import { HorizontalAlignment, SpaceSizes } from "../../types";
 declare type InlineProps = {
-    children: React.ReactNode[];
+    children: React.ReactNode[] | React.ReactElement;
     /** specify vertical alignment */
@@ -6,0 +6,0 @@ alignItems?: HorizontalAlignment;

build/components/Stack/Stack.d.ts

 import React from "react";
 import { SpaceSizes } from "../../types";
 declare type StackProps = {
-    children: React.ReactNode[];
+    children: React.ReactNode[] | React.ReactElement;
     space?: SpaceSizes;
@@ -6,0 +6,0 @@ };

build/components/Typography/Header/Header.d.ts

@@ -10,2 +10,3 @@ import React from "react";
 export declare const H5: HeaderComponent;
+export declare const H6: HeaderComponent;
 export {};

build/components/Typography/Text/Text.d.ts

@@ -7,4 +7,5 @@ import React from "react";
     as?: "p" | "span";
+    secondary?: boolean;
 };
-export declare function Text({ size, weight, children, as, }: TextProps): React.ReactElement;
+export declare function Text({ size, weight, children, as, secondary, }: TextProps): React.ReactElement;
 export declare namespace Text {
@@ -11,0 +12,0 @@ var defaultProps: Partial<TextProps>;

build/index.d.ts

@@ -1,5 +0,5 @@
-export { Card } from "./components/Card/Card";
+export { BaseCard, BareCard } from "./components/Card/Card";
 export { Inline } from "./components/Inline/Inline";
 export { Stack } from "./components/Stack/Stack";
-export { H1, H2, H3 } from "./components/Typography/Header/Header";
+export { H1, H2, H3, H4, H5, H6 } from "./components/Typography/Header/Header";
 export { Text } from "./components/Typography/Text/Text";

build/types/index.d.ts

@@ -1,3 +0,3 @@
-export declare type HorizontalAlignment = `left` | `right` | `center` | `spaceBetween`;
-export declare type VerticalAlignment = `top` | `bottom` | `center` | `spaceBetween`;
-export declare type SpaceSizes = "zero" | "xxs" | "xs" | "s" | "m" | "l" | "xl";
+export declare type HorizontalAlignment = "left" | "right" | "center" | "spaceBetween";
+export declare type VerticalAlignment = "top" | "bottom" | "center" | "spaceBetween";
+export declare type SpaceSizes = "zero" | "xxs" | "xs" | "s" | "m" | "l" | "xl" | "xxl";

package.json

 {
   "name": "@amboss/design-system",
-  "version": "0.0.4-canary-font-2",
+  "version": "0.0.5",
   "description": "the design system for AMBOSS products",
   "main": "build/index.js",
   "types": "build/index.d.ts",
+  "readme": "./PACKAGE_README.md",
   "files": [
@@ -11,7 +12,8 @@ "build/**/*"
   "scripts": {
-    "build": "npm run type-styles & webpack",
-    "tsc": "tsc",
-    "start": "npm run type-styles:watch & npm run storybook",
+    "prebuild": "npm run tokens & npm run type-styles",
+    "build": "npm run prebuild && webpack",
+    "prestart": "npm run type-styles:watch & npm run tokens:watch &",
+    "start": "npm run storybook",
     "storybook": "start-storybook -p 6006",
-    "build-storybook": "npm run type-styles & build-storybook",
+    "build-storybook": "npm run prebuild && build-storybook",
     "type-styles": "tsm src --banner '// Autogenerated. Dont edit directly.\n'",
@@ -22,3 +24,5 @@ "type-styles:watch": "tsm src --banner '// Autogenerated. Dont edit directly.\n' --watch --ignoreInitial",
     "test:coverage": "jest --coverage",
-    "tokens": "node style-dictionary.build.js"
+    "tokens": "node style-dictionary.build.js",
+    "tokens:watch": "npm run tokens && chokidar  \"tokens/**/*.json\" -c \"npm run tokens\"",
+    "postinstall": "npm run tokens & npm run type-styles"
   },
@@ -44,9 +48,10 @@ "repository": {
     "react": "^16.13.1",
-    "react-dom": "^16.13.1"
+    "react-dom": "^16.13.1",
+    "react-keyed-flatten-children": "^1.3.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.3",
-    "@storybook/addon-essentials": "^6.0.27",
-    "@storybook/addon-links": "^6.0.27",
-    "@storybook/react": "^6.0.27",
+    "@storybook/addon-essentials": "^6.1.5",
+    "@storybook/addon-links": "^6.1.5",
+    "@storybook/react": "^6.1.5",
     "@testing-library/jest-dom": "^5.11.5",
@@ -62,2 +67,3 @@ "@testing-library/react": "^11.1.0",
     "babel-loader": "^8.1.0",
+    "chokidar-cli": "^2.1.0",
     "css-loader": "^3.5.3",
@@ -77,6 +83,5 @@ "eslint": "^7.11.0",
     "react-is": "^16.13.1",
-    "resolve-url-loader": "^3.1.2",
     "sass": "^1.26.5",
     "sass-loader": "^8.0.2",
-    "storybook-addon-themes": "^6.0.0",
+    "storybook-addon-multi-theme": "^0.0.5",
     "style-dictionary": "^2.10.2",
@@ -88,3 +93,2 @@ "style-loader": "^1.2.1",
     "typescript": "^3.8.3",
-    "url-loader": "^4.1.1",
     "webpack": "^4.43.0",
@@ -91,0 +95,0 @@ "webpack-cli": "^3.3.11"

README.md

@@ -0,35 +1,206 @@
+
 # amboss-design-system
 
 ## Quick start
-Development
 
-<code>
-  npm install
+**Development**
 
-  npm run start
-</code>
 
-Building package
+`npm install`
+`npm run start`
 
-<code>
-  npm run build
-</code>
+**Building package**
 
-Building storybook
+`npm run build`
 
-<code>
-  npm run build-storybook
-</code>
+**Building storybook**
 
+`npm run build-storybook`
 
 
-## *d.ts for styles
+## Overview
 
-Type definitions are generating automatically
-while `npm run start` is running.
+1. [Tech stack](#tech-stack)
+2. [Folder structure](#folder-structure)
+3. [Build](#build)
+4. [*.d.ts for styles](#d.ts-for-styles)
+5. [Tokens, styles and theming](#tokens-styles-and-theming)
 
-You can generate *d.ts manually using:
+### Tech stack
 
-<code>
-  npm run type-styles
-</code>
+Code: **typescript + scss**
+Framework: **react**
+Bundler: **webpack**
+Environment: **storybook**
+Tokens: **[style-dictionary](https://github.com/amzn/style-dictionary)**
+Testing: **jest + react testing library**
+
+### Folder structure
+<pre>
+|-- .storybook
+   |-- components
+       |-- ColorGrid.tsx
+       |-- SizeGrid.tsx
+   |-- main.js
+   |-- preview.js
+|-- assets
+   |-- fonts
+      |-- Lato.woff
+|-- build    (autogenerated)
+|-- build-tokens    (autogenerated)
+     |-- _assets_fonts.scss
+     |-- _variables.scss
+     |-- _theme.scss
+     |-- _colors.json
+     |-- _theme.json
+|-- docs
+   |-- Design-principles.mdx
+|-- tokens
+    |-- themes
+        |-- dark.json
+        |-- light.json
+    |-- assets.json
+    |-- colors.json
+|-- src
+   |-- components
+      |-- Button
+          |-- Button.tsx
+          |-- Button.scss
+          |-- Button.scss.d.ts    (autogenerated)
+          |-- Button.stories.tsx
+          |-- Button.test.tsx
+   |-- shared-styles
+       |-- _fonts.scss
+   |-- types
+	   |-- index.ts
+   |-- index.ts
+
+</pre>
+
+### Build
+There are 3 stages of a build.
+1. Generate type definitions for styles
+2. Generate variables and mixins for tokens
+3. Bundle all exported components
+
+#### Generate type definitions for styles
+Files like `Button.scss.d.ts` are autogenerated, and they are added to .gitignore.
+
+Type definitions are generating automatically:
+ - in watch mode while `npm run start` is running
+ - after npm install
+ - before build
+
+You can generate *d.ts manually using `npm run type-styles` and `npm run type-styles:watch`
+
+[Why we need *.d.ts for styles?](#d.ts-for-styles)
+
+#### Generate variables and mixins from tokens
+In order to structure our tokens we use **[style-dictionary](https://github.com/amzn/style-dictionary)**.
+This tool is used for creation a content of `./build-tokens` folder where we keep all the scss variables and mixins.
+
+New variables and mixins gets generated automaticaly:
+ - in watch mode while `npm run start` is running
+ - after npm install
+ - before build
+
+ You can generate tokens manually using `npm run tokens` and `npm run tokens:watch`
+
+We use tokens to control the most atomic values in styles and themes.
+How does it work?
+We have a set of .json files that are located in `./tokens` folder, and we have a `style-dictionary` as a tool for converting .json in to various formats.
+For example:
+We have a file - `./tokens/colors.json` that gets converted into `./build-tokens/_variables.scss` and `./build-tokens/_colors.json`.
+`_variables.scss` is directly imported in other `.scss` files.
+`_colors.json` is imported inside `./.storybook/components/ColorGrid.tsx` in order to present in storybook all the colors we currently have.
+
+The configuration for `style-dictionary` is inside `./style-dictionary.config.json`. In this config we use 2 custom formatters and 1 custom filter, all of them defined in `./style-dictionary.build.js`.
+
+**custom/format/scss** - a formatter that is used for generation a .json files for tokens like colors, size, weight and so on. These .json files are imported in storybook for presentation.
+**custom/format/theme-scss** - a formatter that is used for generation a `_theme.scss` that contains a `@theme` mixin.
+**custom/filter/only-vars** - a filter for excluding theme and assets from processing them as variables.
+
+[More about tokens, themes and styles.](#tokens-styles-and-theming)
+
+#### Bundle all exported components
+Before publish the design system for npm we run `npm run build` that bundles everything that is exported from `./src/index.ts`.
+
+We use webpack + typescript for bundling. For all `/\.ts(x?)$/` files webpack uses a ts-loader as a rule which is implicitly using `tsconfig.json`.
+
+For styles we use sass-loader + css-loader with enabled modules for namespacing all css selectors.
+
+What in the bundle?
+-  JS code that is compiled from typescript
+- fonts that are base64-ed
+- css rules that are namespaced using css-loader
+
+### .d.ts for styles
+
+We use type definitions for style in order to improve quality of a product overall. One example:
+```ts
+	import styles from './button.scss';
+
+	type ButtonProps = {
+	    size: 's' | 'm' | 'l'
+	}
+
+	export const Button = ({size}: ButtonProps) => (
+		<button className={styles[size]} />
+	)
+```
+Here with type definitions we are sure that `button.scss` contain all 3 classes (.s, .m, and .l). Otherwise, it won't compile.
+
+### Tokens, styles and theming
+
+Currently, we have 3 types of tokens:
+- atomic values, like colors, sizes, shadows.
+- font assets, that are basically base64 of font files.
+- theme values, that are referencing atomic different atomic values
+
+Atomic values and font assets are straight forward and simply converted to scss variables.
+After build all atomic values can't be imported as `@import  "build-tokens/variables";`
+Fonts are imported inside `./src/shared-styles/_fonts` and never used directly (it doesn't make sense).
+In the application simply `@import  "src/shared-styles/fonts";`.
+
+Theme values are little more complex. When theme token is precessed we generate several entities. All of them are located in `./build-tokens/_theme.scss`
+
+1. A number of scss-maps with all the theme variables for each theme.
+2. A `@theme` mixin, that include all themes.
+3. A list of scss variables with the name of entries in the maps (see point 1). This is just for IDE auto-complition.
+
+As the result developers are free to use a `@theme` mixin for particular css properties with no worries about active theme and amount of themes.
+
+Example:
+```scss
+@import  "build-tokens/theme";
+@import  "build-tokens/variables";
+@import  "src/shared-styles/fonts";
+
+.primary {
+	@include  theme('color', $theme-color-text-primary);
+	font-family: $Lato;
+	margin: 0;
+}
+
+.secondary {
+	@include  theme('color', $theme-color-text-secondary);
+}
+
+.s {
+	font-size: $size-font-text-s;
+	line-height: $size-font-text-line-height-s;
+}
+
+.m {
+	font-size: $size-font-text-m;
+	line-height: $size-font-text-line-height-m;
+}
+
+.normal {
+	font-weight: $weight-normal;
+}
+
+.bold {
+	font-weight: $weight-bold;
+}
+```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Install scripts

Supply chain risk

Install scripts are run when the package is installed. The majority of malware in npm is hidden in install scripts.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1493658

increased by217.41%

Dev dependency count

40

decreased by-2.44%

Number of package files

21

increased by75%

Lines of code

3895

increased by126.06%

Number of lines in readme file

207

increased by475%

Worsened metrics

Dependency count

4

increased by33.33%

Number of high supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedreact-keyed-flatten-children@^1.3.0

• + Addedreact-keyed-flatten-children@1.3.0(transitive)